Api integration: Application Create steps.

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",
+    "material-ui": "^0.19.3",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
-    "qs": "^6.5.0",
+    "qs": "^6.5.1",
-    "react": "^15.6.1",
+    "react": "^15.6.2",
-    "react-addons-css-transition-group": "^15.6.0",
+    "react-addons-css-transition-group": "^15.6.2",
-    "react-addons-transition-group": "^15.6.0",
+    "react-addons-transition-group": "^15.6.2",
-    "react-dom": "^15.6.1",
+    "react-dom": "^15.6.2",
-    "react-dropzone": "^4.1.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",
+    "mocha": "^3.5.3",
-    "mock-local-storage": "^1.0.2",
+    "mock-local-storage": "^1.0.5",
     "node-sass": "^4.5.3",
     "react-intl": "^2.4.0",
     "sass-loader": "^6.0.6",

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%;
+    margin-top: 140px;
-    position: inherit;
+    max-width: 98%;
-    top: 125px;
 }
 
 /* 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);
+    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;
+    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;
-    width: 100%;
-    margin: 0;
-    font-size: 20px;
-    border-bottom: solid 1px #d8d8d8;
-}
 
+#application-edit-header {
+    height: 40px;
+    width: 100%;
+    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;
+    height: 50px;
-    width: 40px;
+    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;
+}

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 (
-            <Container fluid id="container">
+            <div>
                 <div id="header-content">
                     <div id="header">
                         <span id="header-text">
@@ -104,10 +104,12 @@ class BaseLayout extends Component {
                         />
                     </div>
                 </div>
+                <Container fluid>
                     <div id="app-main-content" style={this.state.style}>
                         <Row>
                             <div className="platform-link-placeholder">
-                            <Button id="secondary-button" onClick={this.onClickPlatforms}><i className="fw fw-settings"></i> Platforms</Button>
+                                <Button id="secondary-button" onClick={this.onClickPlatforms}>
+                                    <i className="fw fw-settings"></i> Platforms</Button>
                             </div>
                         </Row>
                         <Row>
@@ -120,8 +122,9 @@ class BaseLayout extends Component {
                             </div>
                         </Row>
                     </div>
-                <ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
                 </Container>
+                <ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
+            </div>
         );
     }
 }

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 {
         },
     ];
 
+    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: ""
+        }
+    ];
+
+
     componentWillMount() {
 
-        // let getApps = ApplicationMgtApi.getApplications();
+        let getApps = ApplicationMgtApi.getApplications();
-        // getApps.then(response => {
+        getApps.then(response => {
-        //     let apps = this.setData(response.data.applications);
+            console.log(response.data.applications);
-        //     console.log(apps); //TODO: Remove this.
+            this.setState({searchedApplications: response.data.applications});
-        //     this.setState({searchedApplications: apps});
+            // console.log(this.setState({data: response.data}), console.log(this.state));
-        //     // console.log(this.setState({data: response.data}), console.log(this.state));
+        }).catch(err => {
-        // }).catch(err => {
+            AuthHandler.unauthorizedErrorHandler(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);
-        }
-
-        this.setState({searchedApplications: apps});
     }
 
     /**
@@ -154,34 +177,22 @@ class ApplicationListing extends Component {
         return 0;
     }
 
-    onRowClick() {
+    onRowClick(uuid) {
+        let selectedApp = this.getSelectedApplication(uuid);
         let style = {
-            width: '500px',
+            width: '550px',
-            marginLeft: '500px'
+            marginLeft: '550px'
         };
 
         let appListStyle = {
-            marginRight: '500px',
+            marginRight: '550px',
         };
 
-        this.setState({drawer: style, appListStyle: appListStyle});
+        this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
     }
 
-    handleButtonClick() {
+    onAppEditClick(uuid) {
-        console.log("Application Listing");
+        this.props.history.push("apps/edit/" + uuid);
-        this.props.history.push("apps/edit/fdsfdsf343");
-    }
-
-    remove(imageId) {
-        let tmp = this.state.image;
-
-        console.log(imageId);
-
-        let rem = tmp.filter((image) => {
-            return image.id !== imageId
-
-        });
-        this.setState({image: rem});
     }
 
     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 {
                     <Col>
                         <Table striped hover>
                             <thead>
-                            <tr>
+                            <tr className="app-list-table-header">
                                 <th></th>
                                 {/* TODO: Remove console.log and add sort method. */}
                                 <th onClick={() => {
@@ -228,25 +245,24 @@ class ApplicationListing extends Component {
                             </tr>
                             </thead>
                             <tbody>
-                            {this.applications.map(
+                            {this.state.searchedApplications.map(
                                 (application) => {
                                     return (
-                                        <tr key={application.id} onClick={this.onRowClick}>
+                                        <tr key={application.uuid} onClick={() => this.onRowClick(application.uuid)}>
-                                            <td>
+                                            <td data={application.uuid}>
                                                 {/* TODO: Move this styles to css. */}
                                                 <img
-                                                    src={application.icon}
                                                     height='50px'
                                                     width='50px'
                                                     style={{border: 'solid 1px black', borderRadius: "100%"}}
                                                 />
                                             </td>
-                                            <td>{application.applicationName}</td>
+                                            <td>{application.name}</td>
-                                            <td>{application.category}</td>
+                                            <td>{application.category.name}</td>
-                                            <td>{application.platform}</td>
+                                            <td>{application.platform.name}</td>
-                                            <td>{application.status}</td>
+                                            <td>{application.currentLifecycle.lifecycleState.name}</td>
                                             <td>
-                                                <Button id="secondary-button" onClick={this.handleButtonClick}>
+                                                <Button id="secondary-button" onClick={() => this.onAppEditClick(application.uuid)}>
                                                     <i className="fw fw-edit"></i>
                                                 </Button>
                                             </td>
@@ -259,7 +275,7 @@ class ApplicationListing extends Component {
                     </Col>
                 </Row>
                 <Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
-                    <ApplicationView/>
+                    <ApplicationView application={this.state.application}/>
                 </Drawer>
             </div>
         );

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;
+        switch (step) {
-        tmpStepData.push({step: step, data: data});
+            case "generalInfo": {
-
+                this.setState({generalInfo: data}, this.onNextClick());
-        this.setState({stepData: tmpStepData}, 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 (
                     <Step1
-                        handleNext={this.onNextClick}
+                        defaultData={this.state.generalInfo}
-                        setData={this.setStepData}
+                        setStepData={this.setStepData}
-                        removeData={this.removeStepData}
+                        close={this.onClose}
                     />
                 );
             case 1:
                 return (
                     <Step2
-                        handleNext={this.onNextClick}
+                        defaultData={this.state.platform}
                         handlePrev={this.onPrevClick}
-                        setData={this.setStepData}
+                        setStepData={this.setStepData}
-                        removeData={this.removeStepData}
+                        close={this.onClose}
                     />
                 );
             case 2:
                 return (
                     <Step3
-                        handleFinish={this.onNextClick}
+                        defaultData={this.state.screenshots}
                         handlePrev={this.onPrevClick}
-                        setData={this.setStepData}
+                        setStepData={this.setStepData}
-                        removeData={this.removeStepData}
+                        close={this.onClose}
                     />
                 );
             case 3: {
                 return (
                     <Step4
-                        handleNext={this.onNextClick}
+                        defaultData={this.state.release}
-                        setData={this.setStepData}
+                        handlePrev={this.onPrevClick}
-                        removeData={this.removeStepData}
+                        setStepData={this.setStepData}
+                        close={this.onClose}
                     />
                 )
             }
@@ -252,22 +274,6 @@ class ApplicationCreate extends Component {
                             </Col>
                         </Row>
                     </ModalBody>
-                    <ModalFooter>
-                        {stepIndex === 0 ? <div/> :
-                            <Button color="primary" onClick={this.onPrevClick}>
-                                <FormattedMessage id="Back" defaultMessage="Back"/>
-                            </Button>}
-                        <Button color="secondary" onClick={this.onClose}>
-                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
-                        </Button>
-                        {finished ?
-                            <Button color="primary" onClick={this.onSubmit}>
-                                <FormattedMessage id="Finish" defaultMessage="Finish" />
-                            </Button> :
-                            <Button color="primary" onClick={this.onNextClick}>
-                                <FormattedMessage id="Continue" defaultMessage="Continue"/>
-                            </Button>}
-                    </ModalFooter>
                 </Modal>
             </div>);
     }

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: [],
+            name: "",
-            title: "",
             errors: {},
-            banner: [],
             defValue: "",
             category: 0,
-            visibility: 0,
+            visibility: "",
-            description: "",
+            description: ""
-            screenshots: [],
-            identifier: "",
-            shortDescription: ""
         };
     }
 
+    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) {
+    handleRequestDelete(key) {
-        this.chipData = this.state.tags;
+        let chipData = this.state.tags;
-        console.log(event.target);
+        const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
-        const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
+        chipData.splice(chipToDelete, 1);
-        this.chipData.splice(chipToDelete, 1);
+        this.setState({tags: chipData});
-        this.setState({tags: this.chipData});
     };
 
     /**
      * Creates an object with the current step data and persist in the parent.
      * */
     setStepData() {
-        let stepData = {};
+        const {name, description, tags, visibility} = this.state;
-        this.props.setData("step1", {step: stepData});
+        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) {
+    onTextFieldChange(event) {
-        let field = event.target.id;
+        let field = event.target.name;
+        console.log(field, event.target.value);
         switch (field) {
-            case "name": {
+            case "appName": {
-                this.setState({name: value});
+                this.setState({name: event.target.value});
                 break;
             }
-            case "shortDescription": {
+            case "appDescription": {
-                this.setState({shortDescription: value});
+                this.setState({description: event.target.value});
-                break;
-            }
-            case "description": {
-                this.setState({description: value});
-                break;
-            }
-            case "identifier": {
-                this.setState({identifier: 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 <div/>
+                }
+                case("roles"): {
+                    return <FormGroup>
+                        <Input
+                            type="select"
+                            name="visibility-item"
+                            id="app-visibility-item"
+                            onChange={this.onVisibilityItemSelect}
+                        >
+                            <option id="app-visibility-default" disabled selected>Select the Roles.</option>
+                            <option><Input type="checkbox" />Role1</option>
+                            <option>Role2</option>
+                        </Input>
+                    </FormGroup>
+                }
+                case ("groups"): {
+                    return <FormGroup>
+                        <Input
+                            type="select"
+                            name="visibility-item"
+                            id="app-visibility-item"
+                            onChange={this.onVisibilityItemSelect}
+                        >
+                            <option id="app-visibility-default" disabled selected>Select the Groups.</option>
+                            <option>Group1</option>
+                            <option>Group2</option>
+                        </Input>
+                    </FormGroup>
+                }
+                default: {
+                    return <div/>
+                }
+            }
+        };
+
         return (
             <div className="createStep2Content">
                 <div>
@@ -135,13 +199,27 @@ class Step1 extends Component {
                             <Label for="app-title">
                                 <FormattedMessage id='Title' defaultMessage='Title'/>*
                             </Label>
-                            <Input required type="text" name="appName" id="app-title"/>
+                            <Input
+                                required
+                                type="text"
+                                name="appName"
+                                id="app-title"
+                                value={this.state.name}
+                                onChange={this.onTextFieldChange}
+                            />
                         </FormGroup>
                         <FormGroup>
                             <Label for="app-description">
                                 <FormattedMessage id='Description' defaultMessage='Description'/>*
                             </Label>
-                            <Input required type="textarea" name="appDescription" id="app-description"/>
+                            <Input
+                                required
+                                type="textarea"
+                                name="appDescription"
+                                id="app-description"
+                                value={this.state.description}
+                                onChange={this.onTextFieldChange}
+                            />
                         </FormGroup>
                         <FormGroup>
                             <Label for="app-category">
@@ -155,12 +233,25 @@ class Step1 extends Component {
                             <Label for="app-visibility">
                                 <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
                             </Label>
-                            <Input type="select" name="visibility" id="app-visibility">
+                            <Form inline>
-                                <option><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
+                                <FormGroup>
-                                <option><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
+                                    <Input
-                                <option><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
+                                        type="select"
+                                        name="visibility"
+                                        id="app-visibility"
+                                        onChange={this.onVisibilityChange}
+                                    >
+                                        <option id="app-visibility-default" disabled selected>Select the App Visibility
+                                                                                              Option.
+                                        </option>
+                                        <option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/></option>
+                                        <option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
+                                        <option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
                                     </Input>
                                 </FormGroup>
+                                {visibilityItem()}
+                            </Form>
+                        </FormGroup>
                         <FormGroup>
                             <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
                             <Input
@@ -176,9 +267,10 @@ class Step1 extends Component {
                                 {this.state.tags.map(tag => {
                                         return (
                                             <Badge
-                                                style={{margin: '0 2px 0 2px'}}
+                                                style={{margin: '0 2px 0 2px', backgroundColor: 'blue', height: '20px'}}
-                                                value={tag.value}
+                                                value={tag.key}
-                                                onClick={this.handleRequestDelete.bind(this)}
+                                                key={tag.key}
+                                                onClick={() => this.handleRequestDelete(tag.key)}
                                             >
                                                 {tag.value}
                                             </Badge>
@@ -189,6 +281,10 @@ class Step1 extends Component {
                         </FormGroup>
                     </div>
                 </div>
+                <ModalFooter>
+                    <Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
+                    <Button color="primary" onClick={this.setStepData}>Continue</Button>
+                </ModalFooter>
             </div>
         );
     }

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: [],
+            platforms: []
-            stepData: [],
-            title: "",
-            titleError: ""
         };
     }
 
+    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 = {
+        const {store, platform} = this.state;
-            store: this.state.store,
+        let data = {
-            platform: this.state.platforms[this.state.platformSelectedIndex]
+            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 {
                 </FormGroup>
                 <FormGroup>
                     <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
-                    <Input type="select" name="store" onChange={this.onChangePlatform.bind(this)}>
+                    <Input
+                        required
+                        type="select"
+                        name="store"
+                        onChange={this.onChangePlatform.bind(this)}
+                    >
+                        <option id="app-visibility-default" disabled selected>Select the Application Platform</option>
                         {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
                             return (
-                                <option value={platform.identifier}>
+                                <option value={platform.identifier} key={platform.identifier}>
                                     {platform.name}
                                 </option>
                             )
                         }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
                     </Input>
                 </FormGroup>
+                <ModalFooter>
+                    <Button color="primary" onClick={this.onBackClick}>Back</Button>
+                    <Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
+                    <Button color="primary" onClick={this.setStepData}>Continue</Button>
+                </ModalFooter>
             </div>
         );
     }

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,
+            icon: icon,
-            banner: this.state.banner,
+            banner: banner,
-            screenshots: this.state.screenshots
+            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 {
                         </FormGroup>
                     </div>
                 </div>
+                <ModalFooter>
+                    <Button color="primary" onClick={this.onBackClick}>Back</Button>
+                    <Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
+                    <Button color="primary" onClick={this.setStepData}>Continue</Button>
+                </ModalFooter>
             </div>
         );
     }

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.onCancelClick = this.onCancelClick.bind(this);
-        this.handleToggle = this.handleToggle.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();
     }
 
-    /**
+    onCancelClick() {
-     * Invokes Prev button click.
+        this.props.close();
-     * */
+    }
-    handlePrev() {
+
+    onBackClick() {
         this.props.handlePrev();
     }
 
+    onSubmit() {
+
+    }
+
     /**
      * Handles release application selection.
      * */
@@ -140,6 +145,11 @@ class Step4 extends Component {
                         </FormGroup>
                     </Collapse>
                 </div>
+                <ModalFooter>
+                    <Button color="primary" onClick={this.onBackClick}>Back</Button>
+                    <Button color="danger" onClick={this.onCancelClick}>Cancel</Button>
+                    <Button color="primary" onClick={this.onSubmit}>Finish</Button>
+                </ModalFooter>
             </div>
         );
     }

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 {
                         <FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
                     </Col>
                 </Row>
+                <hr/>
                 <Row id="application-edit-main-container">
                     <Col xs="3">
                         <div className="tab">

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx

@@ -47,24 +47,25 @@ class ApplicationView extends Component {
     }
 
     render() {
-        const platform = this.state.application;
+        if (this.state.application.length === 0) {
-        console.log(platform);
+            return <div/>
-
+        } else {
+            const app = this.state.application;
+            console.log(app);
             return (
                 <div id="application-view-content">
                     <div id="application-view-row">
                         <Row>
                             <Col>
                                 <div id="app-icon">
-
                                 </div>
                             </Col>
                             <Col>
                                 <Row>
-                                <span><strong>Facebook</strong></span>
+                                    <span><strong>{app.name}</strong></span>
                                 </Row>
                                 <Row>
-                                <span className="app-updated-date">Last updated on 2017-09-23</span>
+                                    <span className="app-updated-date">Last updated on {app.modifiedAt}</span>
                                 </Row>
                             </Col>
                         </Row>
@@ -83,7 +84,7 @@ class ApplicationView extends Component {
                                 <i className="fw fw-star"></i>
                             </Col>
                             <Col>
-                            <a href="#">View in Store</a>
+                                <p><a href="#">View in Store</a></p>
                             </Col>
                         </Row>
                     </div>
@@ -96,7 +97,7 @@ class ApplicationView extends Component {
                                 </strong></span>
                             </Col>
                             <Col>
-                            <p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
+                                <p>{app.description}</p>
                             </Col>
                         </Row>
                         <Row>
@@ -131,7 +132,10 @@ class ApplicationView extends Component {
                         </Row>
                     </div>
                 </div>
+
             );
+
+        }
     }
 }
 

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 (
-            <div>
+            <div id="platform-content">
-                Platform View
+                <ul>
+                    <li>Name: {platform.name}</li>
+                    <li>Description: {platform.description}</li>
+                    <li>Status: {platform.enabled}</li>
+                </ul>
             </div>
         );
     }
 }
 
-export default PlatformView;
+export default Platform;

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 {Button, FormGroup, Label, Modal, ModalBody, ModalFooter, ModalHeader, Input} from "reactstrap";
-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';
 
 /**
- * Platform Create component.
+ * Platform view 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.
  * */
 class PlatformCreate extends Component {
 
     constructor() {
         super();
-        this.onCreatePlatform = this.onCreatePlatform.bind(this);
+        this.onCancelClick = this.onCancelClick.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.state = {
-            tags: [],
+            open: false
-            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;
-            }
-        }
-    }
-
-    /**
-     * 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});
-    }
-
-    /**
-     * 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: ""});
         }
     }
 
-    /**
+
-     * Creates Chip array from state.tags.
+    componentWillReceiveProps(props, nextprops) {
-     * */
+        this.setState({open: props.open})
-    renderChip(data) {
-        return (
-            <Chip
-                key={data.key}
-                onRequestDelete={() => this.handleTagDelete(data.key)}
-                style={this.styles.chip}
-            >
-                {data.value}
-            </Chip>
-        );
     }
 
-    /**
+    componentWillMount() {
-     * Set the value for tag.
+        this.setState({open: this.props.open});
-     * */
-    handleTagChange(event) {
-        let defaultValue = this.state.defValue;
-        defaultValue = event.target.value;
-        this.setState({defValue: defaultValue})
     }
 
-    /**
+    onCancelClick() {
-     * Remove the selected property from the property list.
+        this.setState({open: false})
-     * */
-    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: "",
-        })
     }
 
     render() {
-        const {
-            platformProperties,
-            allTenants,
-            enabled,
-            selectedProperty,
-            propertyTypes,
-            name,
-            tags,
-            defValue,
-            description,
-            identifier,
-            property
-        } = this.state;
-
         return (
-            <div className="middle createplatformmiddle">
-                <Card>
-                    <CardTitle title="Create Platform"/>
-                    <CardActions>
-                        <div className="createplatformcardaction">
-                            <form>
-                                <TextField
-                                    hintText="Unique Identifier for Platform."
-                                    id="identifier"
-                                    floatingLabelText="Identifier*"
-                                    floatingLabelFixed={true}
-                                    value={identifier}
-                                    onChange={this.onTextChange}
-                                />
-                                <br/>
-                                <TextField
-                                    hintText="Enter the Platform Name."
-                                    id="name"
-                                    floatingLabelText="Name*"
-                                    floatingLabelFixed={true}
-                                    value={name}
-                                    onChange={this.onTextChange}
-                                />
-                                <br/>
-                                <TextField
-                                    id="description"
-                                    hintText="Enter the Platform Description."
-                                    floatingLabelText="Description*"
-                                    floatingLabelFixed={true}
-                                    multiLine={true}
-                                    rows={2}
-                                    value={description}
-                                    onChange={this.onTextChange}
-                                />
-                                <br/>
-                                <br/>
-                                <Toggle
-                                    id="tenant"
-                                    label="Shared with all Tenants"
-                                    labelPosition="right"
-                                    onToggle={this.handleToggle}
-                                    toggled={allTenants}
-                                />
-                                <br/>
-                                <Toggle
-                                    id="enabled"
-                                    label="Enabled"
-                                    labelPosition="right"
-                                    onToggle={this.handleToggle}
-                                    toggled={enabled}
-                                />
-                                <br/>
-                                <TextField
-                                    id="tags"
-                                    hintText="Enter Platform tags.."
-                                    floatingLabelText="Tags*"
-                                    floatingLabelFixed={true}
-                                    value={defValue}
-                                    onChange={this.handleTagChange}
-                                    onKeyPress={this.addTags}
-                                />
-                                <br/>
-                                <div className="createPlatformTagWrapper">
-                                    {tags.map(this.renderChip, this)}
-                                </div>
-                                <br/>
             <div>
-                                    <p className="createplatformproperties">Platform Properties</p>
+                <Modal isOpen={this.state.open} toggle={this.toggle} id="platform-create-modal" backdrop={'static'}>
-                                    <div id="property-container">
+                    <ModalHeader>Create Platform</ModalHeader>
-                                        {platformProperties.map((p) => {
+                    <ModalBody>
-                                            return <div key={p.key}>{p.key} : {p.value}
+                        <FormGroup>
-                                                <IconButton onClick={this.removeProperty.bind(this, p)}>
+                            <Label for="platform-name">Name*</Label>
-                                                    <Close className="createplatformpropertyclose"/>
+                            <Input required type="text" name="appName" id="platform-name"/>
-                                                </IconButton>
+                        </FormGroup>
-                                            </div>
+                        <FormGroup>
-                                        })}
+                            <Label for="platform-description">Description*</Label>
-                                    </div>
+                            <Input required type="textarea" name="appName" id="platform-description"/>
-                                    <div className="createplatformproperty">
+                        </FormGroup>
-                                        <TextField
+                    </ModalBody>
-                                            id="property"
+                    <ModalFooter>
-                                            hintText="Property Name"
+                        <Button onClick={this.onCancelClick}>Cancel</Button>
-                                            floatingLabelText="Platform Property*"
+                        <Button color="primary">Create</Button>
-                                            floatingLabelFixed={true}
+                    </ModalFooter>
-                                            value={this.state.property}
+                </Modal>
-                                            onChange={this.onTextChange}
-                                        /> <em/>
-                                        <SelectField
-                                            className="createplatformpropertyselect"
-                                            floatingLabelText="Property Type"
-                                            value={selectedProperty}
-                                            floatingLabelFixed={true}
-                                            onChange={this.onPropertySelect}>
-                                            {propertyTypes.map((type) => {
-                                                return <MenuItem key={type.key}
-                                                                 value={type.key}
-                                                                 primaryText={type.value}/>
-                                            })}
-                                        </SelectField>
-                                        <IconButton onClick={this.addProperty}>
-                                            <AddCircleOutline/>
-                                        </IconButton>
-                                        <br/>
-                                    </div>
-                                </div>
-                                <div>
-                                    <p className="createplatformiconp">Platform Icon*:</p>
-                                    <GridList className="createplatformicon" cols={1.1}>
-                                        {this.state.icon.map((tile) => (
-                                            <GridTile
-                                                key={Math.floor(Math.random() * 1000)}
-                                                title={tile.name}
-                                                actionIcon={
-                                                    <IconButton onClick={this.removeIcon}>
-                                                        <Clear/>
-                                                    </IconButton>}>
-                                                <img src={tile.preview}/>
-                                            </GridTile>
-                                        ))}
-                                        {this.state.icon.length === 0 ?
-                                            <Dropzone
-                                                className="createplatformdropzone"
-                                                accept="image/jpeg, image/png"
-                                                onDrop={(icon, rejected) => {
-                                                    this.setState({icon, rejected})
-                                                }}
-                                            >
-                                                <p className="createplatformdropzonep">+</p>
-                                            </Dropzone> : <div/>}
-                                    </GridList>
-                                </div>
-                                <br/>
-                                <RaisedButton
-                                    primary={true} label="Create"
-                                    onClick={this.onCreatePlatform}/>
-                                <FlatButton label="Cancel" onClick={this.clearForm}/>
-                            </form>
-                        </div>
-                    </CardActions>
-                </Card>
             </div>
         );
     }
 }
 
-PlatformCreate.prototypes = {};
-
 export default PlatformCreate;

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 {Button, Col, Row} from "reactstrap";
-import TextField from 'material-ui/TextField';
+import Platform from "./Platform";
-import AuthHandler from "../../api/authHandler";
-import DataTable from '../UIComponents/DataTable/DataTable';
 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.
+ * Platform view 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.
  * */
 class PlatformListing extends Component {
+
     constructor() {
         super();
-        this.setPlatforms = this.setPlatforms.bind(this);
+        this.onPlatformCreateClick = this.onPlatformCreateClick.bind(this);
         this.state = {
             platforms: [],
-            asc: true
+            openModal: false
-        };
+        }
     }
 
-    headers = [
+    componentWillMount() {
-        {
+        PlatformMgtApi.getPlatforms().then(response => {
-            data_id: "image",
+            console.log(response);
-            data_type: "image",
+            this.setState({platforms: response.data});
-            sortable: false,
+        }).catch(err => {
-            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);
-            }
+        })
-        )
     }
 
-    /**
+    onPlatformCreateClick() {
-     * Create platform objects from the response which can be displayed in the table.
+        this.setState({openModal: true});
-     * */
-    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)
-        }
-
-        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;
-    }
-
-    onRowClick(id) {
-        //TODO: Remove this
-        console.log(id)
     }
 
     render() {
         return (
-            <div className='middle listingplatformmiddle'>
+            <div id="platform-listing">
-                <Card className='listingplatformcard'>
+                <Row>
-                    <TextField hintText="Search" onChange={this.searchApplications.bind(this)}
+                    <div className="create-platform">
-                               className='listingplatformsearch'/>
+                        <Button id="create-platform-btn" onClick={this.onPlatformCreateClick}>Create Platform</Button>
-                    <CardTitle title="Platforms" className='listingplatformTitle'/>
+                    </div>
-                    <CardActions>
+                </Row>
-
+                <Row>
-                    </CardActions>
+                    <div id="platform-list">
-                    <DataTable
+                        {this.state.platforms.map(platform => {
-                        headers={this.headers}
+                            return (
-                        data={this.state.platforms}
+                                <Platform key={platform.identifier} platform={platform}/>
-                        handleRowClick={this.onRowClick.bind(this)}
+                            )
-                        noDataMessage={{type: 'button', text: 'Create Platform'}}/>
+                        })}
-                </Card>
+                    </div>
+                </Row>
+                <PlatformCreate open={this.state.openModal}/>
             </div>
         );
     }
 }
 
-PlatformListing.propTypes = {};
+export default PlatformListing;
-
-export default withRouter(PlatformListing);

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() {

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() {

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.*/}
                     <Card id="login-card">
                         <CardBlock>
-                            <CardTitle>WSO2 IoT APP Publisher</CardTitle>
+                            <CardTitle>
+                                WSO2 IoT APP Publisher
+                            </CardTitle>
+                            <hr/>
                             <Form onSubmit={this.handleLogin.bind(this)}>
-                                <FormGroup row>
+                                <FormGroup>
-                                    <Label for="userName" sm={2}>User Name:</Label>
+                                    <Label for="userName">User Name:</Label>
-                                    <Col sm={10}>
+                                    <Input
-                                        <Input type="text" name="userName" id="userName" placeholder="User Name"
+                                        type="text"
+                                        name="userName"
+                                        id="userName"
+                                        placeholder="User Name"
                                         onChange={this.onUserNameChange.bind(this)}/>
-                                    </Col>
-
                                 </FormGroup>
-                                <FormGroup row>
+                                <FormGroup>
-                                    <Label for="password" sm={2}>Password:</Label>
+                                    <Label for="password">Password:</Label>
-                                    <Col sm={10}>
+                                    <Input
-                                        <Input type="password" name="text" id="password" placeholder="Password"
+                                        valid={false}
+                                        type="password"
+                                        name="text"
+                                        id="password"
+                                        placeholder="Password"
                                         onChange={this.onPasswordChange.bind(this)}/>
-                                    </Col>
                                 </FormGroup>
-                                <FormGroup check row>
+                                <FormGroup>
-                                    <Col sm={{size: 10, offset: 2}}>
                                     <Button type="submit" id="login-btn">Login</Button>
-                                    </Col>
                                 </FormGroup>
                             </Form>
                         </CardBlock>