From 7fa3c886fb1e1db3017c00dc7d6aba47f74962cc Mon Sep 17 00:00:00 2001 From: Menaka Jayawardena Date: Tue, 3 Oct 2017 15:01:58 +0530 Subject: [PATCH] Api integration: Application Create steps. --- .../src/main/resources/publisher/package.json | 22 +- .../public/themes/default/default-theme.css | 99 +++-- .../AppPublisherBase/BaseLayout.jsx | 39 +- .../Application/ApplicationListing.jsx | 136 +++--- .../Application/Create/ApplicationCreate.jsx | 84 ++-- .../Application/Create/CreateSteps/Step1.jsx | 176 ++++++-- .../Application/Create/CreateSteps/Step2.jsx | 53 ++- .../Application/Create/CreateSteps/Step3.jsx | 44 +- .../Application/Create/CreateSteps/Step4.jsx | 36 +- .../Edit/Base/ApplicationEditBaseLayout.jsx | 1 + .../Application/View/ApplicationView.jsx | 170 +++---- .../{PlatformView.jsx => Platform.jsx} | 17 +- .../components/Platform/PlatformCreate.jsx | 414 ++---------------- .../components/Platform/PlatformListing.jsx | 152 ++----- .../UIComponents/DataTable/DataTable.jsx | 2 +- .../UIComponents/DataTable/DataTableRow.jsx | 2 +- .../src/components/User/Login/Login.jsx | 43 +- 17 files changed, 635 insertions(+), 855 deletions(-) rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/{PlatformView.jsx => Platform.jsx} (63%) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json index 9c9755c4a1..f64919b7fe 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json @@ -10,18 +10,18 @@ "license": "Apache License 2.0", "dependencies": { "axios": "^0.16.2", - "bootstrap": "^4.0.0-alpha.6", + "bootstrap": "^4.0.0-beta", "flux": "^3.1.3", "history": "^4.7.2", "latest-version": "^3.1.0", - "material-ui": "^0.19.1", - "prop-types": "^15.5.10", - "qs": "^6.5.0", - "react": "^15.6.1", - "react-addons-css-transition-group": "^15.6.0", - "react-addons-transition-group": "^15.6.0", - "react-dom": "^15.6.1", - "react-dropzone": "^4.1.2", + "material-ui": "^0.19.3", + "prop-types": "^15.6.0", + "qs": "^6.5.1", + "react": "^15.6.2", + "react-addons-css-transition-group": "^15.6.2", + "react-addons-transition-group": "^15.6.2", + "react-dom": "^15.6.2", + "react-dropzone": "^4.1.3", "react-images-uploader": "^1.1.0", "react-material-ui-form-validator": "^0.5.1", "react-modal": "^2.3.2", @@ -43,8 +43,8 @@ "css-loader": "^0.28.7", "less": "^2.7.2", "less-loader": "^4.0.4", - "mocha": "^3.4.1", - "mock-local-storage": "^1.0.2", + "mocha": "^3.5.3", + "mock-local-storage": "^1.0.5", "node-sass": "^4.5.3", "react-intl": "^2.4.0", "sass-loader": "^6.0.6", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css index 2470cc0c5c..3aef9f7675 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css @@ -39,13 +39,16 @@ body { } #login-container { - width: 50%; - margin: 0 auto } #login-card { + width: 20%; + height: 50%; + margin: 10% auto; + padding: 10px; border-radius: 0; - background-color: #BaBaBa; + background-color: #ffffff; + box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* Base layout container */ @@ -130,7 +133,7 @@ body { float: right; top: 75px; left: 150px; - margin-right: 16px; + margin-right: 40px; } #search { @@ -148,14 +151,13 @@ body { /* Application Add button */ #add-btn-container { position: absolute; - left: 12%; + left: 11%; top: 100px; } #app-main-content { - height: 100%; - position: inherit; - top: 125px; + margin-top: 140px; + max-width: 98%; } /* Holds the app publisher pages. */ @@ -163,8 +165,8 @@ body { height: auto; width: 80%; margin: 20px auto; - box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - padding: 10px 10px 10px 10px; + box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + padding: 0 10px 10px 10px; } .stepper-header { @@ -183,10 +185,17 @@ body { } #application-list { - margin-top: 20px; transition: margin-right .5s; } +.app-list-table-header { + height: 100px; +} + +#app-visibility-default { + display: none; +} + #app-image-screenshot { width: 300px; height: 300px; @@ -207,7 +216,6 @@ body { height: 150px; border-radius: 5%; position: relative; - background-color: rgba(157, 159, 157, 0.53); border: dashed #888888 2px; } @@ -223,7 +231,6 @@ body { margin: 0 5px 0 5px; border-radius: 10%; position: relative; - background-color: rgba(157, 159, 157, 0.53); border: dashed #888888 2px; } @@ -238,7 +245,6 @@ body { height: 150px; border-radius: 10%; position: relative; - background-color: rgba(157, 159, 157, 0.53); border: dashed #888888 2px; } @@ -249,6 +255,7 @@ body { } #screenshot-container { + max-width: 600px; display: flex; overflow-x: auto; height: 200px; @@ -266,12 +273,13 @@ body { #secondary-button { float: right; + color: #979797; background-color: transparent; border: none; } #secondary-button:hover { - background-color: #e9e9e9; + background-color: #d8d8d8; outline: none; cursor: pointer; } @@ -327,12 +335,12 @@ body { } /* Application View */ + #application-view-content { width: 100%; } - #application-view-row { - margin: 10px 10px 20px 20px; + margin: 10px 10px 0 20px; } #app-icon { @@ -366,14 +374,14 @@ body { } /* Application Edit Base Layout */ + #application-edit-header { - height: 50px; + height: 40px; width: 100%; - margin: 0; - font-size: 20px; - border-bottom: solid 1px #d8d8d8; + margin-top: 20px; + margin-bottom: 20px; + font-size: 25px; } - .application-header-text { margin: 10px 0px 0px 10px; } @@ -399,13 +407,14 @@ body { } /*Tab styling*/ + div.tab { float: left; border-right: 1px solid #d8d8d8; height: 100%; } - /* Style the tab buttons */ + div.tab button { display: block; background-color: inherit; @@ -418,24 +427,23 @@ div.tab button { cursor: pointer; transition: 0.3s; } - /* Change background color of buttons on hover */ + div.tab button:hover { background-color: #ddd6d7; cursor: pointer; } - /* Create an active/current "tab button" class */ + div.tab button.active { background-color: #1b3bcc; color: white; } - - #application-edit-main-container { display: flex; } + #application-edit-outer-content { height: auto; width: 100%; @@ -453,13 +461,13 @@ div.tab button.active { .back-to-app { position: absolute; - height: 40px; - width: 40px; + height: 50px; + width: 50px; border-radius: 50%; } .back-to-app i { - padding: 10px 10px 10px 10px; + padding: 12px 10px 10px 12px; } .back-to-app:hover { @@ -469,11 +477,11 @@ div.tab button.active { } /* Create Release and Release management */ + .release-header { margin-top: 20px; margin-bottom: 20px; } - .release-create { height: 150px; margin-bottom: 20px; @@ -523,12 +531,39 @@ div.tab button.active { } /* Application Edit General Info */ + .app-edit-general-info { margin-top: 20px; max-width: 100%; } - .save-info { float: right; margin-bottom: 10px; } + +/* Platform Specific Styles. */ +#platform-listing { + margin: 10px; +} + +.create-platform { + padding-left: 90%; +} + +#platform-list { + margin-top: 20px; + display: flex; + flex-flow: wrap; +} + +#platform-content { + width: 200px; + height: 300px; + margin: 10px; + box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +#platform-content:hover { + background-color: #f2f2f2; + cursor: pointer; +} diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx index 2e1858a815..de5828aaad 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx @@ -76,7 +76,7 @@ class BaseLayout extends Component { render() { return ( - +
-
- -
- -
- - -
- - - {this.props.children} - - -
- -
+ +
+ +
+ +
+ + +
+ + + {this.props.children} + + +
+ +
+ - +
); } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx index 5b9eac328d..3d05b1b889 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx @@ -22,6 +22,8 @@ import {Button, Col, Row, Table} from 'reactstrap'; import Drawer from '../UIComponents/Drawer/Drawer'; import ApplicationView from './View/ApplicationView'; import {FormattedMessage} from 'react-intl'; +import ApplicationMgtApi from "../../api/applicationMgtApi"; +import AuthHandler from "../../api/authHandler"; /** * The App Create Component. @@ -36,10 +38,10 @@ class ApplicationListing extends Component { super(); this.searchApplications = this.searchApplications.bind(this); this.onRowClick = this.onRowClick.bind(this); - this.setData = this.setData.bind(this); this.sortData = this.sortData.bind(this); this.compare = this.compare.bind(this); - this.handleButtonClick = this.handleButtonClick.bind(this); + this.onAppEditClick = this.onAppEditClick.bind(this); + this.getSelectedApplication = this.getSelectedApplication.bind(this); this.state = { searchedApplications: [], applications: [], @@ -57,7 +59,6 @@ class ApplicationListing extends Component { }; } - applications = [ { id: "3242342ffww3423", @@ -84,35 +85,57 @@ class ApplicationListing extends Component { }, ]; - componentWillMount() { + headers = [ + { + data_id: "image", + data_type: "image", + sortable: false, + label: "" + }, + { + data_id: "applicationName", + data_type: "string", + sortable: true, + label: "Application Name", + sort: this.sortData + }, + { + data_id: "platform", + data_type: "image_array", + sortable: false, + label: "Platform" + }, + { + data_id: "category", + data_type: "string", + sortable: false, + label: "Category" + }, + { + data_id: "status", + data_type: "string", + sortable: false, + label: "Status" + }, + { + data_id: "edit", + data_type: "button", + sortable: false, + label: "" + } + ]; - // let getApps = ApplicationMgtApi.getApplications(); - // getApps.then(response => { - // let apps = this.setData(response.data.applications); - // console.log(apps); //TODO: Remove this. - // this.setState({searchedApplications: apps}); - // // console.log(this.setState({data: response.data}), console.log(this.state)); - // }).catch(err => { - // AuthHandler.unauthorizedErrorHandler(err); - // }); - } - /** - * Extract application from application list and update the state. - * */ - setData(applications) { - let apps = []; - for (let app in applications) { - let application = {}; - application.id = applications[app].uuid; - application.applicationName = applications[app].name; - application.platform = applications[app].platform.name; - application.category = applications[app].category.id; - application.status = applications[app].currentLifecycle.lifecycleState.name; - apps.push(application); - } + componentWillMount() { - this.setState({searchedApplications: apps}); + let getApps = ApplicationMgtApi.getApplications(); + getApps.then(response => { + console.log(response.data.applications); + this.setState({searchedApplications: response.data.applications}); + // console.log(this.setState({data: response.data}), console.log(this.state)); + }).catch(err => { + AuthHandler.unauthorizedErrorHandler(err); + }); } /** @@ -154,34 +177,22 @@ class ApplicationListing extends Component { return 0; } - onRowClick() { + onRowClick(uuid) { + let selectedApp = this.getSelectedApplication(uuid); let style = { - width: '500px', - marginLeft: '500px' + width: '550px', + marginLeft: '550px' }; let appListStyle = { - marginRight: '500px', + marginRight: '550px', }; - this.setState({drawer: style, appListStyle: appListStyle}); - } - - handleButtonClick() { - console.log("Application Listing"); - this.props.history.push("apps/edit/fdsfdsf343"); + this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]}); } - remove(imageId) { - let tmp = this.state.image; - - console.log(imageId); - - let rem = tmp.filter((image) => { - return image.id !== imageId - - }); - this.setState({image: rem}); + onAppEditClick(uuid) { + this.props.history.push("apps/edit/" + uuid); } closeDrawer() { @@ -196,6 +207,12 @@ class ApplicationListing extends Component { this.setState({drawer: style, appListStyle: appListStyle}); } + getSelectedApplication(uuid) { + return this.state.searchedApplications.filter(application => { + return application.uuid === uuid; + }); + } + render() { return ( @@ -213,7 +230,7 @@ class ApplicationListing extends Component { - + {/* TODO: Remove console.log and add sort method. */} - {this.applications.map( + {this.state.searchedApplications.map( (application) => { return ( - - this.onRowClick(application.uuid)}> + - - - - + + + + @@ -259,7 +275,7 @@ class ApplicationListing extends Component { - + ); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx index d42c98c1de..38620bf8f2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx @@ -21,7 +21,7 @@ import {withRouter} from 'react-router-dom'; import AuthHandler from "../../../api/authHandler"; import {Step1, Step2, Step3, Step4} from './CreateSteps/index'; import ApplicationMgtApi from '../../../api/applicationMgtApi'; -import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap'; +import {Col, Modal, ModalBody, ModalHeader, Row} from 'reactstrap'; import {FormattedMessage} from 'react-intl'; /** @@ -49,7 +49,11 @@ class ApplicationCreate extends Component { finished: false, stepIndex: 0, stepData: [], - isDialogOpen: false + isDialogOpen: false, + generalInfo: {}, + platform: {}, + screenshots: {}, + release: {} }; } @@ -61,10 +65,11 @@ class ApplicationCreate extends Component { this.setState({open: this.props.open}); } - + /** + * Resets the form and closes the modal. + * */ onClose() { - this.setState({stepIndex: 0}, this.props.close()); - + this.setState({stepIndex: 0, generalInfo: {}, platform: {}, screenshots: {}, release: {}}, this.props.close()); } /** @@ -111,7 +116,6 @@ class ApplicationCreate extends Component { console.log(this.state.stepIndex); const {stepIndex} = this.state; if (stepIndex > 0) { - this.removeStepData(); this.setState({stepIndex: stepIndex - 1, finished: false}); } }; @@ -123,10 +127,24 @@ class ApplicationCreate extends Component { * */ setStepData(step, data) { console.log(step, data, this.state.stepData); //TODO: Remove this - let tmpStepData = this.state.stepData; - tmpStepData.push({step: step, data: data}); - - this.setState({stepData: tmpStepData}, this.onNextClick()) + switch (step) { + case "generalInfo": { + this.setState({generalInfo: data}, this.onNextClick()); + break; + } + case "platform": { + this.setState({platform: data}, this.onNextClick()); + break; + } + case "screenshots": { + this.setState({screenshots: data}, this.onNextClick()); + break; + } + case "release": { + this.setState({release: data}, this.onNextClick()); + break; + } + } }; /** @@ -135,9 +153,10 @@ class ApplicationCreate extends Component { removeStepData() { let tempData = this.state.stepData; tempData.pop(); - this.setState({stepData: tempData}); + this.setState({stepData: tempData, stepIndex: 0}); }; + /* ----------------- Deprecated ----------------- */ /** * Handles the Yes button in app creation cancellation dialog. * Clears all the form data and reset the wizard. @@ -154,6 +173,8 @@ class ApplicationCreate extends Component { this.setState({isDialogOpen: false}); }; + /* ---------------------------------------------- */ + /** * Defines all the Steps in the stepper. (Wizard) * @@ -168,35 +189,36 @@ class ApplicationCreate extends Component { case 0: return ( ); case 1: return ( ); case 2: return ( ); case 3: { return ( ) } @@ -252,22 +274,6 @@ class ApplicationCreate extends Component { - - {stepIndex === 0 ?
: - } - - {finished ? - : - } -
); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx index 4d1732f17b..9f011fdf67 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx @@ -20,6 +20,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {Badge, FormGroup, Input, Label} from 'reactstrap'; import {FormattedMessage} from 'react-intl'; +import {Badge, Button, Form, FormGroup, Input, Label, ModalFooter} from 'reactstrap'; /** * The Second step of application create wizard. @@ -42,22 +43,32 @@ import {FormattedMessage} from 'react-intl'; class Step1 extends Component { constructor() { super(); + this.onTextFieldChange = this.onTextFieldChange.bind(this); + this.setStepData = this.setStepData.bind(this); + this.onCancelClick = this.onCancelClick.bind(this); + this.onVisibilityChange = this.onVisibilityChange.bind(this); + this.onVisibilityItemSelect = this.onVisibilityItemSelect.bind(this); + this.handleRequestDelete = this.handleRequestDelete.bind(this); this.state = { tags: [], - icon: [], - title: "", + name: "", errors: {}, - banner: [], defValue: "", category: 0, - visibility: 0, - description: "", - screenshots: [], - identifier: "", - shortDescription: "" + visibility: "", + description: "" }; } + componentWillMount() { + const defaultVals = this.props.defaultData; + + if(defaultVals) { + this.setState(defaultVals); + } + + } + /** * Create a tag on Enter key press and set it to the state. * Clears the tags text field. @@ -85,48 +96,101 @@ class Step1 extends Component { * Handles Chip delete function. * Removes the tag from state.tags * */ - handleRequestDelete(event) { - this.chipData = this.state.tags; - console.log(event.target); - const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value); - this.chipData.splice(chipToDelete, 1); - this.setState({tags: this.chipData}); + handleRequestDelete(key) { + let chipData = this.state.tags; + const chipToDelete = chipData.map((chip) => chip.key).indexOf(key); + chipData.splice(chipToDelete, 1); + this.setState({tags: chipData}); }; /** * Creates an object with the current step data and persist in the parent. * */ setStepData() { - let stepData = {}; - this.props.setData("step1", {step: stepData}); + const {name, description, tags, visibility} = this.state; + let stepData = { + name: name, + description: description, + tags: tags, + visibility: visibility + }; + this.props.setStepData("generalInfo", stepData); }; + onCancelClick() { + this.props.close(); + } + /** * Set text field values to state. * */ - onTextFieldChange(event, value) { - let field = event.target.id; + onTextFieldChange(event) { + let field = event.target.name; + console.log(field, event.target.value); switch (field) { - case "name": { - this.setState({name: value}); + case "appName": { + this.setState({name: event.target.value}); break; } - case "shortDescription": { - this.setState({shortDescription: value}); - break; - } - case "description": { - this.setState({description: value}); - break; - } - case "identifier": { - this.setState({identifier: value}); + case "appDescription": { + this.setState({description: event.target.value}); break; } } }; + onVisibilityChange(event) { + console.log(event.target.value); + this.setState({visibility: event.target.value}); + } + + onVisibilityItemSelect(event) { + + } + render() { + + const {visibility} = this.state; + + let visibilityItem = () => { + switch (visibility) { + case("public"): { + return
+ } + case("roles"): { + return + + + + + + + } + case ("groups"): { + return + + + + + + + } + default: { + return
+ } + } + }; + return (
@@ -135,13 +199,27 @@ class Step1 extends Component { - + - + @@ -176,9 +267,10 @@ class Step1 extends Component { {this.state.tags.map(tag => { return ( this.handleRequestDelete(tag.key)} > {tag.value} @@ -189,6 +281,10 @@ class Step1 extends Component {
+ + + +
); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx index edc7b5ce71..3143b2eb85 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx @@ -20,7 +20,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import AuthHandler from "../../../../api/authHandler"; import PlatformMgtApi from "../../../../api/platformMgtApi"; -import {FormGroup, Input, Label} from 'reactstrap'; +import {Button, FormGroup, Input, Label, ModalFooter} from 'reactstrap'; import {FormattedMessage} from 'react-intl'; /** @@ -41,24 +41,28 @@ class Step2 extends Component { super(); this.setPlatforms = this.setPlatforms.bind(this); this.setStepData = this.setStepData.bind(this); + this.onCancelClick = this.onCancelClick.bind(this); + this.onBackClick = this.onBackClick.bind(this); this.platforms = []; this.state = { - finished: false, - stepIndex: 0, store: 1, platformSelectedIndex: 0, platform: "", - platforms: [], - stepData: [], - title: "", - titleError: "" + platforms: [] }; } + componentWillMount() { + const {defaultData} = this.props; + + if (defaultData) { + this.setState(defaultData); + } + } + componentDidMount() { //Get the list of available platforms and set to the state. PlatformMgtApi.getPlatforms().then(response => { - console.log(response); this.setPlatforms(response.data); }).catch(err => { AuthHandler.unauthorizedErrorHandler(err); @@ -83,18 +87,26 @@ class Step2 extends Component { * Persist the current form data to the state. * */ setStepData() { - let step = { - store: this.state.store, - platform: this.state.platforms[this.state.platformSelectedIndex] + const {store, platform} = this.state; + let data = { + store: store, + platform: platform[0] }; - this.props.setData("step2", {step: step}); + this.props.setStepData("platform", data); + } + + onCancelClick() { + this.props.close(); + } + + onBackClick() { + this.props.handlePrev(); } /** * Triggers when changing the Platform selection. * */ onChangePlatform(event) { - console.log(event.target.value, this.state.platforms); let id = event.target.value; let selectedPlatform = this.state.platforms.filter((platform) => { return platform.identifier === id; @@ -122,16 +134,27 @@ class Step2 extends Component { - + + {this.state.platforms.length > 0 ? this.state.platforms.map(platform => { return ( - ) }) : } + + + + +
); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx index ed2e294f75..61b14509d3 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx @@ -19,7 +19,7 @@ import PropTypes from 'prop-types'; import Dropzone from 'react-dropzone'; import React, {Component} from 'react'; -import {FormGroup, Label} from 'reactstrap'; +import {Button, FormGroup, Label, ModalFooter} from 'reactstrap'; import AppImage from "../../../UIComponents/AppImage/AppImage"; import {FormattedMessage} from 'react-intl'; @@ -40,22 +40,23 @@ import {FormattedMessage} from 'react-intl'; class Step3 extends Component { constructor() { super(); + this.setStepData = this.setStepData.bind(this); + this.onBackClick = this.onBackClick.bind(this); + this.onCancelClick = this.onCancelClick.bind(this); this.state = { - tags: [], icon: [], - title: "", errors: {}, banner: [], - defValue: "", - category: 0, - visibility: 0, - description: "", screenshots: [], - identifier: "", - shortDescription: "" }; } + componentWillMount() { + const {defaultData} = this.props; + + this.setState(defaultData); + } + /** * Handles Chip delete function. * Removes the tag from state.tags @@ -72,15 +73,26 @@ class Step3 extends Component { * Creates an object with the current step data and persist in the parent. * */ setStepData() { + + const {icon, banner, screenshots} = this.state; + let stepData = { - icon: this.state.icon, - banner: this.state.banner, - screenshots: this.state.screenshots + icon: icon, + banner: banner, + screenshots: screenshots }; - this.props.setData("step2", {step: stepData}); + this.props.setStepData("screenshots", stepData); }; + onCancelClick() { + this.props.close(); + } + + onBackClick() { + this.props.handlePrev(); + } + /** * Removed user uploaded banner. * */ @@ -126,7 +138,6 @@ class Step3 extends Component { onDrop={(screenshots, rejected) => { let tmpScreenshots = this.state.screenshots; tmpScreenshots.push(screenshots); - console.log(screenshots); //TODO: Remove this this.setState({ screenshots: tmpScreenshots }); @@ -191,6 +202,11 @@ class Step3 extends Component { + + + + + ); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx index 5674e822fa..c5f59724c2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx @@ -18,7 +18,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; -import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap'; +import {Button, Collapse, FormGroup, FormText, Input, Label, ModalFooter} from 'reactstrap'; import Switch from '../../../UIComponents/Switch/Switch' /** @@ -47,8 +47,8 @@ class Step4 extends Component { constructor() { super(); this.handleToggle = this.handleToggle.bind(this); - this.handlePrev = this.handlePrev.bind(this); - this.handleToggle = this.handleToggle.bind(this); + this.onCancelClick = this.onCancelClick.bind(this); + this.onBackClick = this.onBackClick.bind(this); this.handleFinish = this.handleFinish.bind(this); this.state = { showForm: false, @@ -66,13 +66,18 @@ class Step4 extends Component { this.props.handleFinish(); } - /** - * Invokes Prev button click. - * */ - handlePrev() { + onCancelClick() { + this.props.close(); + } + + onBackClick() { this.props.handlePrev(); } + onSubmit() { + + } + /** * Handles release application selection. * */ @@ -104,12 +109,12 @@ class Step4 extends Component {
- - Info: - Enabling this will create a release for the current Application. - To upload the Application, please visit to the Release management section of - Application Edit View. - + + Info: + Enabling this will create a release for the current Application. + To upload the Application, please visit to the Release management section of + Application Edit View. +
{/*If toggle is true, the release form will be shown.*/} @@ -140,6 +145,11 @@ class Step4 extends Component { + + + + + ); } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx index 9e0029bba5..e3c2935e3f 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx @@ -89,6 +89,7 @@ class ApplicationEdit extends Component { +
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx index 85cb7b5fa3..d421901f2d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx @@ -47,91 +47,95 @@ class ApplicationView extends Component { } render() { - const platform = this.state.application; - console.log(platform); + if (this.state.application.length === 0) { + return
+ } else { + const app = this.state.application; + console.log(app); + return ( +
+
+ +
+
+
+ + + + {app.name} + + + Last updated on {app.modifiedAt} + + + + +
+ +
+ 2k Installs + + + + + + + + + + +

View in Store

+ + + +
+
+ +
+ + : + + + +

{app.description}

+ + + + + + : + + + +

[list of tags...]

+ + + + + + : + + + +

Production

+ + + + + + : + + + +

v1.0

+ + + + - return ( -
-
- -
-
+ ); -
- - - - Facebook - - - Last updated on 2017-09-23 - - - - -
- -
- 2k Installs - - - - - - - - - - - View in Store - - - -
-
- -
- - : - - - -

sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j

- - - - - - : - - - -

[list of tags...]

- - - - - - : - - - -

Production

- - - - - - : - - - -

v1.0

- - - - - ); + } } } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx similarity index 63% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.jsx rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx index dce6e9f716..e9b206d91b 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformView.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx @@ -18,21 +18,28 @@ import React, {Component} from 'react'; /** - * Platform view component. + * Platform component. + * In Platform listing, this component will be displayed as cards. * */ -class PlatformView extends Component { +class Platform extends Component { constructor() { super(); } render() { + const {platform} = this.props; + console.log(platform); return ( -
- Platform View +
+
    +
  • Name: {platform.name}
    • +
  • Description: {platform.description}
    • +
  • Status: {platform.enabled}
    • +
); } } -export default PlatformView; +export default Platform; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx index 6d30a2007a..6d8d3162d6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx @@ -15,416 +15,58 @@ * specific language governing permissions and limitations * under the License. */ - -import PropTypes from 'prop-types'; -import Chip from 'material-ui/Chip'; -import Dropzone from 'react-dropzone'; import React, {Component} from 'react'; -import Toggle from 'material-ui/Toggle'; -import MenuItem from 'material-ui/MenuItem'; -import TextField from 'material-ui/TextField'; -import FlatButton from 'material-ui/FlatButton'; -import IconButton from 'material-ui/IconButton'; -import SelectField from 'material-ui/SelectField'; -import RaisedButton from 'material-ui/RaisedButton'; -import PlatformMgtApi from '../../api/platformMgtApi'; -import Clear from 'material-ui/svg-icons/content/clear'; -import {GridList, GridTile} from 'material-ui/GridList'; -import Close from 'material-ui/svg-icons/navigation/close'; -import {Card, CardActions, CardTitle} from 'material-ui/Card'; -import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline'; +import {Button, FormGroup, Label, Modal, ModalBody, ModalFooter, ModalHeader, Input} from "reactstrap"; /** - * Platform Create component. - * Contains following components: - * * Platform Name - * * Platform Description - * * Platform Icon - * * Whether the platform needs an app to be installed. - * * Whether the platform is enabled by default. - * * Whether the platform is shared with tenants. + * Platform view component. * */ class PlatformCreate extends Component { constructor() { super(); - this.onCreatePlatform = this.onCreatePlatform.bind(this); - this.handleToggle = this.handleToggle.bind(this); - this.addProperty = this.addProperty.bind(this); - this.addTags = this.addTags.bind(this); - this.clearForm = this.clearForm.bind(this); - this.onPropertySelect = this.onPropertySelect.bind(this); - this.handleTagChange = this.handleTagChange.bind(this); - this.removeIcon = this.removeIcon.bind(this); - this.onTextChange = this.onTextChange.bind(this); - this.renderChip = this.renderChip.bind(this); - this.removeProperty = this.removeProperty.bind(this); + this.onCancelClick = this.onCancelClick.bind(this); this.state = { - tags: [], - defValue: "", - enabled: true, - allTenants: false, - files: [], - platformProperties: [], - selectedProperty: 0, - name: "", - description: "", - property: "", - icon: [], - identifier: "", - propertyTypes: [ - {key: 0, value: 'String'}, - {key: 1, value: 'Number'}, - {key: 2, value: 'Boolean'}, - {key: 3, value: 'File'}] - }; - } - - /** - * Handles toggle button actions. - * One method is used for all the toggle buttons and, each toggle is identified by the id. - * */ - handleToggle(event) { - switch (event.target.id) { - case "enabled" : { - let enabled = this.state.enabled; - this.setState({enabled: !enabled}); - break; - } - case "tenant" : { - let allTenants = this.state.allTenants; - this.setState({allTenants: !allTenants}); - break; - } + open: false } } - /** - * Triggers the onChange action on property type selection. - * */ - onPropertySelect(event, index, value) { - console.log(this.state.propertyTypes[value]); - this.setState({selectedProperty: value}); - } - /** - * Handles Chip delete function. - * Removes the tag from state.tags - * */ - handleTagDelete(key) { - this.chipData = this.state.tags; - const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key); - this.chipData.splice(chipToDelete, 1); - this.setState({tags: this.chipData}); + componentWillReceiveProps(props, nextprops) { + this.setState({open: props.open}) } - /** - * Create a tag on Enter key press and set it to the state. - * Clears the tags text field. - * Chip gets two parameters: Key and value. - * */ - addTags(event) { - let tags = this.state.tags; - if (event.charCode === 13) { - event.preventDefault(); - tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value}); - this.setState({tags, defValue: ""}); - } + componentWillMount() { + this.setState({open: this.props.open}); } - /** - * Creates Chip array from state.tags. - * */ - renderChip(data) { - return ( - this.handleTagDelete(data.key)} - style={this.styles.chip} - > - {data.value} - - ); - } - - /** - * Set the value for tag. - * */ - handleTagChange(event) { - let defaultValue = this.state.defValue; - defaultValue = event.target.value; - this.setState({defValue: defaultValue}) - } - - /** - * Remove the selected property from the property list. - * */ - removeProperty(property) { - let properties = this.state.platformProperties; - properties.splice(properties.indexOf(property), 1); - this.setState({platformProperties: properties}); - } - - /** - * Add a new platform property. - * */ - addProperty() { - let property = this.state.property; - let selected = this.state.selectedProperty; - - this.setState({ - platformProperties: - this.state.platformProperties.concat([ - { - key: property, - value: this.state.propertyTypes[selected].value - }]), - property: "", - selectedProperty: 0 - }); - } - - /** - * Triggers in onChange event of text fields. - * Text fields are identified by their ids and the value will be persisted in the component state. - * */ - onTextChange(event, value) { - let property = this.state.property; - let name = this.state.name; - let description = this.state.description; - let identifier = this.state.identifier; - - switch (event.target.id) { - case "name": { - name = value; - this.setState({name: name}); - break; - } - - case "description": { - description = value; - this.setState({description: description}); - break; - } - - case "property": { - property = value; - this.setState({property: property}); - break; - } - case "identifier": { - identifier = value; - this.setState({identifier: identifier}); - } - } - }; - - /** - * Create platform object and call the create platform api. - * */ - onCreatePlatform(event) { - //Call the platform create api. - event.preventDefault(); - let platform = {}; - platform.identifier = this.state.identifier; - platform.name = this.state.name; - platform.description = this.state.description; - platform.tags = this.state.tags; - platform.properties = this.state.platformProperties; - platform.icon = this.state.icon; - platform.enabled = this.state.enabled; - platform.allTenants = this.state.allTenants; - platform.defaultTenantMapping = true; - - PlatformMgtApi.createPlatform(platform); - - } - - /** - * Remove the uploaded icon. - * */ - removeIcon(event) { - event.preventDefault(); - this.setState({icon: []}); - } - - /** - * Clears the user entered values in the form. - * */ - clearForm(event) { - event.preventDefault(); - this.setState({ - enabled: true, - allTenants: false, - files: [], - platformProperties: [], - selectedProperty: 0, - name: "", - description: "", - property: "", - }) + onCancelClick() { + this.setState({open: false}) } render() { - const { - platformProperties, - allTenants, - enabled, - selectedProperty, - propertyTypes, - name, - tags, - defValue, - description, - identifier, - property - } = this.state; - return ( -
- - - -
-
- -
- -
- -
-
- -
- -
- -
-
- {tags.map(this.renderChip, this)} -
-
-
-

Platform Properties

-
- {platformProperties.map((p) => { - return
{p.key} : {p.value} - - - -
- })} -
-
- - - {propertyTypes.map((type) => { - return - })} - - - - -
-
-
-
-

Platform Icon*:

- - {this.state.icon.map((tile) => ( - - - }> - - - ))} - {this.state.icon.length === 0 ? - { - this.setState({icon, rejected}) - }} - > -

+

- :
} - -
-
- - - -
- - +
+ + Create Platform + + + + + + + + + + + + + + +
); } } -PlatformCreate.prototypes = {}; - export default PlatformCreate; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx index 3ba0b50fd9..9101c8d300 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx @@ -15,145 +15,61 @@ * specific language governing permissions and limitations * under the License. */ - import React, {Component} from 'react'; -import {withRouter} from 'react-router-dom'; -import TextField from 'material-ui/TextField'; -import AuthHandler from "../../api/authHandler"; -import DataTable from '../UIComponents/DataTable/DataTable'; +import {Button, Col, Row} from "reactstrap"; +import Platform from "./Platform"; import PlatformMgtApi from "../../api/platformMgtApi"; -import {Card, CardActions, CardTitle} from 'material-ui/Card'; +import AuthHandler from "../../api/authHandler"; +import PlatformCreate from "./PlatformCreate"; /** - * The App Create Component. - * - * Application creation is handled through a Wizard. (We use Material UI Stepper.) - * - * In each step, data will be set to the state separately. - * When the wizard is completed, data will be arranged and sent to the api. + * Platform view component. * */ class PlatformListing extends Component { + constructor() { super(); - this.setPlatforms = this.setPlatforms.bind(this); + this.onPlatformCreateClick = this.onPlatformCreateClick.bind(this); this.state = { platforms: [], - asc: true - }; - } - - headers = [ - { - data_id: "image", - data_type: "image", - sortable: false, - label: "" - }, - { - data_id: "platformName", - data_type: String, - sortable: true, - label: "Platform Name", - sort: this.sortData - }, - { - data_id: "enabled", - data_type: String, - sortable: false, - label: "Enabled" - }, - { - data_id: "fileBased", - data_type: String, - sortable: false, - label: "File Based" - } - ]; - - componentDidMount() { - let platformsPromise = PlatformMgtApi.getPlatforms(); - platformsPromise.then( - response => { - let platforms = this.setPlatforms(response.data); - this.setState({platforms: platforms}); - } - ).catch( - err => { - AuthHandler.unauthorizedErrorHandler(err); - } - ) - } - - /** - * Create platform objects from the response which can be displayed in the table. - * */ - setPlatforms(platforms) { - let tmpPlatforms = []; - - for (let index in platforms) { - let platform = {}; - platform.id = platforms[index].identifier; - platform.platformName = platforms[index].name; - platform.enabled = platforms[index].enabled.toString(); - platform.fileBased = platforms[index].fileBased.toString(); - tmpPlatforms.push(platform) + openModal: false } - - return tmpPlatforms; - } - - /** - * Handles the search action. - * When typing in the search bar, this method will be invoked. - * */ - searchApplications(word) { - let searchedData = []; - } - - /** - * Handles sort data function and toggles the asc state. - * asc: true : sort in ascending order. - * */ - sortData() { - let isAsc = this.state.asc; - let datas = isAsc ? this.data.sort(this.compare) : this.data.reverse(); - this.setState({data: datas, asc: !isAsc}); } - compare(a, b) { - if (a.applicationName < b.applicationName) - return -1; - if (a.applicationName > b.applicationName) - return 1; - return 0; + componentWillMount() { + PlatformMgtApi.getPlatforms().then(response => { + console.log(response); + this.setState({platforms: response.data}); + }).catch(err => { + AuthHandler.unauthorizedErrorHandler(err); + }) } - onRowClick(id) { - //TODO: Remove this - console.log(id) + onPlatformCreateClick() { + this.setState({openModal: true}); } render() { return ( -
- - - - - - - - +
+ +
+ +
+ + +
+ {this.state.platforms.map(platform => { + return ( + + ) + })} +
+ +
); } } -PlatformListing.propTypes = {}; - -export default withRouter(PlatformListing); +export default PlatformListing; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx index 2f27a42a51..1ccd6f433d 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx @@ -93,7 +93,7 @@ class DataTable extends Component { } handleBtnClick(id) { - this.props.handleButtonClick(id); + this.props.onAppEditClick(id); } render() { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx index efbb827c52..9046c2cbb4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx @@ -63,7 +63,7 @@ class DataTableRow extends Component { handleBtnClick(event) { event.stopPropagation(); console.log(event.target['id']) - this.props.handleButtonClick(event.target['id']); + this.props.onAppEditClick(event.target['id']); } render() { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx index 7108253c00..6bcce4ab3c 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx @@ -20,7 +20,7 @@ import qs from 'qs'; import React, {Component} from 'react'; import {Redirect, Switch} from 'react-router-dom'; import AuthHandler from '../../../api/authHandler'; -import {Button, Card, CardBlock, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap'; +import {Button, Card, CardBlock, CardTitle, Form, FormGroup, Input, Label} from 'reactstrap'; /** * The Login Component. @@ -132,27 +132,32 @@ class Login extends Component { {/*TODO: Style the components.*/} - WSO2 IoT APP Publisher + + WSO2 IoT APP Publisher + +
- - -
- - - + + + - - - - - + + + - - - - + +
{ @@ -228,25 +245,24 @@ class ApplicationListing extends Component {
+
{/* TODO: Move this styles to css. */} {application.applicationName}{application.category}{application.platform}{application.status}{application.name}{application.category.name}{application.platform.name}{application.currentLifecycle.lifecycleState.name} -