Merge pull request #974 from menakaj/application-mgt

Reactstrap migration.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/package.json

@@ -10,6 +10,7 @@
   "license": "Apache License 2.0",
   "dependencies": {
     "axios": "^0.16.2",
+    "bootstrap": "^4.0.0-alpha.6",
     "flux": "^3.1.3",
     "history": "^4.7.2",
     "latest-version": "^3.1.0",
@@ -17,6 +18,8 @@
     "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",
     "react-images-uploader": "^1.1.0",
@@ -26,7 +29,8 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.10",
     "react-sliding-pane": "^1.2.3",
-    "react-tap-event-plugin": "^2.0.1"
+    "react-tap-event-plugin": "^2.0.1",
+    "reactstrap": "^4.8.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html

@@ -21,6 +21,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" type="text/css" href="./css/font-wso2.css">
+    <link rel="stylesheet" type="text/css" href="./themes/index.css">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

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

@@ -25,13 +25,14 @@ import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {
-ApplicationCreate,
+    ApplicationCreate,
-ApplicationListing,
+    ApplicationListing,
-BaseLayout,
+    BaseLayout,
-Login,
+    Login,
-NotFound,
+    NotFound,
-PlatformCreate,
+    PlatformCreate,
-PlatformListing
+    PlatformListing,
+    ApplicationEdit
 } from './components';
 
 
@@ -78,7 +79,7 @@ class Base extends Component {
         if (this.state.user !== null) {
             console.log("Have User.");
             return (
-                <div className="container">
+                <div>
                     <BaseLayout user={this.state.user}>
                         <Switch>
                             <Redirect exact path={"/"} to={"/assets/apps"}/>
@@ -86,8 +87,8 @@ class Base extends Component {
                             <Route exact path={"/assets/apps/create"} component={ApplicationCreate}/>
                             <Route exact path={"/assets/platforms"} component={PlatformListing}/>
                             <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
-                            <Route exact path={"/assets/apps/:app"}/>
+                            {/*<Route exact path={"/assets/apps/:app"}/>*/}
-                            <Route exact path={"/assets/apps/:app/edit"}/>
+                            <Route exact path={"/assets/apps/edit/:app"} component={ApplicationEdit}/>
                             <Route exact path={"/assets/platforms/:platform"}/>
                             <Route exact path={"/assets/platforms/:platform/edit"}/>
                             <Route exact path={"/assets/reviews"}/>
@@ -151,27 +152,28 @@ class Publisher extends Component {
         if (this.state.selectedType === "default") {
             let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
             this.setState({
-                muiTheme : getMuiTheme(defaultTheme.default)
+                muiTheme: getMuiTheme(defaultTheme.default)
             });
         } else {
             let customTheme = require("./themes/" + this.state.selectedTheme);
             this.setState({
-                muiTheme : getMuiTheme(customTheme.default)
+                muiTheme: getMuiTheme(customTheme.default)
             });
         }
 
     }
+
     render() {
         return (
             <div className="App">
-                <MuiThemeProvider muiTheme={this.state.muiTheme}>
+                <MuiThemeProvider>
-                <Router basename="publisher" history={history}>
+                    <Router basename="publisher" history={history}>
-                    <Switch>
+                        <Switch>
-                        <Route path="/login" component={Login}/>
+                            <Route path="/login" component={Login}/>
-                        <Route path="/logout" component={Login}/>
+                            <Route path="/logout" component={Login}/>
-                        <Route component={Base}/>
+                            <Route component={Base}/>
-                    </Switch>
+                        </Switch>
-                </Router>
+                    </Router>
                 </MuiThemeProvider>
             </div>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/authHandler.js

@@ -137,10 +137,13 @@ class AuthHandler {
     }
 
     static createAuthenticationHeaders(contentType) {
-        return {
+        if (AuthHandler.getUser().getAuthToken()) {
-            "Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
+            return {
-            "Content-Type": contentType,
+                "Authorization": "Bearer " + AuthHandler.getUser().getAuthToken(),
-        };
+                "Content-Type": contentType,
+            };
+        }
+        return "User not found";
 
     };
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/helpers/appMgtApiHelpers.js

@@ -48,6 +48,9 @@ export default class Helper {
         return {application, images};
     }
 
+    /**
+     * Creates a String array from tags array.
+     * */
     static stringifyTags(tags) {
         let tmpTags = [];
         for (let tag in tags) {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {withRouter} from 'react-router-dom';
+import AuthHandler from "../../api/authHandler";
+import '../../css/font-wso2.css';
+import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import ApplicationCreate from '../Application/Create/ApplicationCreate';
+import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap';
+import NotificationItem from '../UIComponents/Notifications/NotificationItem';
+
+
+/**
+ * Base Layout:
+ * App bar
+ * Left Navigation
+ * Middle content.
+ * */
+class BaseLayout extends Component {
+
+    constructor() {
+        super();
+        this.state = {
+            notifications: 0,
+            user: 'Admin',
+            openModal: false
+        };
+        this.logout = this.logout.bind(this);
+    }
+
+    handleApplicationClick() {
+        this.handleHistory('/assets/apps');
+    }
+
+    handleApplicationCreateClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({openModal: true});
+    }
+
+    /**
+     * The method to update the history.
+     * to: The URL to route.
+     * */
+    handleHistory(to) {
+        this.props.history.push(to);
+    }
+
+    logout(event, index, value) {
+        AuthHandler.logout();
+    }
+
+    render() {
+        return (
+            <div id="container">
+                <div id="header-content">
+                    <div id="header">
+                        <span id="header-text">
+                            WSO2 IoT App Publisher
+                        </span>
+                        <div id="header-btn">
+                            <Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
+                            <Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
+                        </div>
+                    </div>
+                    <div id="search-box">
+                        <InputGroup>
+                            <Input
+                                id="search"
+                                name="search"
+                                placeholder={'Search for Applications'}
+                                onChange={(event) => console.log(event.target.value)}
+                            />
+                        </InputGroup>
+                    </div>
+                    <div id="add-btn-container">
+                        <Button
+                            id="add-btn"
+                            onClick={this.handleApplicationCreateClick.bind(this)}
+                        >
+                            <h3>
+                                <strong>+</strong>
+                            </h3>
+                        </Button>
+                    </div>
+                </div>
+
+                <div id="application-content" style={this.state.style}>
+                    {this.props.children}
+                </div>
+                <ApplicationCreate open={this.state.openModal}/>
+            </div>
+        );
+    }
+}
+
+BaseLayout.propTypes = {
+    children: PropTypes.element
+};
+
+export default withRouter(BaseLayout);

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

@@ -19,11 +19,13 @@
 import Theme from '../../theme';
 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';
 import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import {Button, Row, Table} from 'reactstrap';
+import Drawer from '../UIComponents/Drawer/Drawer';
+import ApplicationView from './View/ApplicationView';
+import NotificationView from "../UIComponents/Notifications/NotificationView";
+import AppImage from "../UIComponents/AppImage/AppImage";
 
 /**
  * The App Create Component.
@@ -41,10 +43,17 @@ class ApplicationListing extends Component {
         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.state = {
             searchedApplications: [],
             applications: [],
-            asc: true
+            asc: true,
+            open: false,
+            application: {},
+            drawer: {},
+            appListStyle: {},
+            image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
+                {id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}]
         };
         this.scriptId = "application-listing";
     }
@@ -80,23 +89,48 @@ class ApplicationListing extends Component {
             data_type: "string",
             sortable: false,
             label: "Status"
+        },
+        {
+            data_id: "edit",
+            data_type: "button",
+            sortable: false,
+            label: ""
         }
     ];
 
+
+    applications = [
+        {
+            id: "3242342ffww3423",
+            applicationName: "Facebook",
+            platform: "android",
+            category: "Business",
+            status: "Published"
+        },
+        {
+            icon: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png",
+            id: "324234233423423",
+            applicationName: "Twitter",
+            platform: "android",
+            category: "Business",
+            status: "Created"
+        },
+        {
+            icon: "https://www.greenfoot.org/images/logos/macos.png",
+            id: "3242d3423423423",
+            applicationName: "Massenger",
+            platform: "android",
+            category: "Business",
+            status: "In Review"
+        },
+    ];
+
     componentWillMount() {
 
         /**
          *Loading the theme files based on the the user-preference.
          */
         Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-        // this.setState({data: this.data});
-    }
-
-    componentDidMount() {
         let getApps = ApplicationMgtApi.getApplications();
         getApps.then(response => {
             let apps = this.setData(response.data.applications);
@@ -165,32 +199,96 @@ class ApplicationListing extends Component {
         return 0;
     }
 
-    onRowClick(id) {
+    onRowClick() {
-        //TODO: Remove console logs.
+        console.log("sfsdfsdf");
-        ApplicationMgtApi.getApplication(id).then(response => {
+        let style = {
-            console.log(response);
+            width: '500px',
-        }).catch(err => {
+            marginLeft: '500px'
-            console.log(err)
+        };
+
+        let appListStyle = {
+            marginRight: '500px',
+        };
+
+        this.setState({drawer: style, appListStyle: appListStyle});
+    }
+
+    handleButtonClick() {
+        console.log("Application Listing");
+        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.props.history.push("apps/" + id);
+        console.log(rem);
+
+        this.setState({image: rem});
+    }
+
+    closeDrawer() {
+        let style = {
+            width: '0',
+            marginLeft: '0'
+        };
+
+        let appListStyle = {
+            marginRight: '0',
+        };
+        this.setState({drawer: style, appListStyle: appListStyle});
     }
 
     render() {
         return (
-            <div className="middle applicationListingMiddle">
+
-                <Card className="applicationListingCard">
+            <div id="application-list" style={this.state.appListStyle}>
-                    <TextField
+                <Table striped hover>
-                        hintText="Search"
+                    <thead>
-                        className="applicationListingSearch"
+                    <tr>
-                        onChange={this.searchApplications}/>
+                        <th></th>
-                    <CardTitle title="Applications" className="applicationListTitle"/>
+                        {/* TODO: Remove console.log and add sort method. */}
-                    <DataTable
+                        <th onClick={() => {console.log("sort")}}>Application Name</th>
-                        headers={this.headers}
+                        <th>Category</th>
-                        data={this.state.searchedApplications}
+                        <th>Platform</th>
-                        handleRowClick={this.onRowClick}
+                        <th>Status</th>
-                        noDataMessage={{type: 'button', text: 'Create Application'}}
+                        <th></th>
-                    />
+                    </tr>
-                </Card>
+                    </thead>
+                    <tbody>
+                    {this.applications.map(
+                        (application) => {
+                            return (
+                                <tr key={application.id} onClick={this.onRowClick}>
+                                    <td>
+                                        {/* 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.category}</td>
+                                    <td>{application.platform}</td>
+                                    <td>{application.status}</td>
+                                    <td><Button onClick={this.handleButtonClick}>Edit</Button></td>
+                                </tr>
+                            )
+                        }
+                    )}
+                    </tbody>
+                </Table>
+
+                <Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
+                    <ApplicationView/>
+                </Drawer>
             </div>
         );
     }

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

@@ -16,17 +16,12 @@
  * under the License.
  */
 
-import Theme from '../../theme';
 import React, {Component} from 'react';
-import Dialog from 'material-ui/Dialog';
 import {withRouter} from 'react-router-dom';
-import FlatButton from 'material-ui/FlatButton';
+import AuthHandler from "../../../api/authHandler";
-import AuthHandler from "../../api/authHandler";
+import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
-import {Step1, Step2, Step3} from './CreateSteps';
+import ApplicationMgtApi from '../../../api/applicationMgtApi';
-import RaisedButton from 'material-ui/RaisedButton';
+import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
-import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
 
 /**
  * The App Create Component.
@@ -48,6 +43,7 @@ class ApplicationCreate extends Component {
         this.handleNo = this.handleNo.bind(this);
         this.handlePrev = this.handlePrev.bind(this);
         this.handleNext = this.handleNext.bind(this);
+        this.close = this.close.bind(this);
         this.state = {
             finished: false,
             stepIndex: 0,
@@ -56,15 +52,22 @@ class ApplicationCreate extends Component {
         };
     }
 
+    componentWillReceiveProps(props, nextprops) {
+        this.setState({open: props.open})
+    }
+
     componentWillMount() {
-        /**
+        this.setState({open: this.props.open});
-         *Loading the theme files based on the the user-preference.
+    }
-         */
+
-        Theme.insertThemingScripts(this.scriptId);
+    close() {
+        this.setState({open: false, stepIndex: 0})
     }
 
-    componentWillUnmount() {
+    handleBack() {
-        Theme.removeThemingScripts(this.scriptId);
+        let currentStep = this.state.stepIndex;
+        let nextStep = currentStep === 0 ? currentStep : currentStep - 1 ;
+        this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
     }
 
     /**
@@ -190,6 +193,15 @@ class ApplicationCreate extends Component {
                         removeData={this.removeStepData}
                     />
                 );
+            case 3: {
+                return (
+                    <Step4
+                        handleNext={this.handleNext}
+                        setData={this.setStepData}
+                        removeData={this.removeStepData}
+                    />
+                )
+            }
             default:
                 return <div/>;
         }
@@ -198,69 +210,23 @@ class ApplicationCreate extends Component {
     render() {
         const {finished, stepIndex} = this.state;
 
-        /**
-         * Defines the dialog box actions. [Yes][No]
-         * */
-        const actions = [
-            <FlatButton
-                label="Yes"
-                primary={true}
-                onClick={this.handleYes}
-            />,
-            <FlatButton
-                label="No"
-                secondary={true}
-                onClick={this.handleNo}
-            />,
-        ];
-
         return (
-            <div className="middle createapplicationmiddle">
+            <div id="create-application-modal">
-                <Card className="creataapplicationcard">
+                <Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
-                    <CardTitle title="Create Application"/>
+                       backdrop={'static'}>
-
+                    <ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
-                    {/**
+                    <ModalBody id="modal-body-content">
-                     * The stepper goes here.
+                        {this.getStepContent(this.state.stepIndex)}
-                     */}
+                    </ModalBody>
-                    <CardActions>
+                    <ModalFooter>
-                        <div className="createapplicationcardaction">
+                        {this.state.stepIndex === 0? <div/> :
-                            <Stepper activeStep={stepIndex}>
+                            <Button color="primary" onClick={this.handlePrev}>Back</Button>}
-                                <Step>
+                        <Button color="secondary" onClick={this.close}>Cancel</Button>
-                                    <StepLabel>Select Application Platform</StepLabel>
+                        {this.state.finished ?
-                                </Step>
+                            <Button color="primary" onClick={this.handleSubmit}>Finish</Button> :
-                                <Step>
+                            <Button color="primary" onClick={this.handleNext}>Continue</Button>}
-                                    <StepLabel>Enter Application Details</StepLabel>
+                    </ModalFooter>
-                                </Step>
+                </Modal>
-                                <Step>
-                                    <StepLabel>Release</StepLabel>
-                                </Step>
-                            </Stepper>
-                            <div className="createapplicationcontent">
-                                {finished ? (
-                                    <div>
-                                        <p>Create App?</p>
-                                        <form>
-                                            <RaisedButton primary={true} label="Create" onClick={this.handleSubmit}/>
-                                            <FlatButton label="Cancel" onClick={this.handleCancel}/>
-                                        </form>
-                                    </div>
-                                ) : (
-                                    <div>
-                                        {this.getStepContent(stepIndex)}
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    </CardActions>
-                </Card>
-                <Dialog
-                    actions={actions}
-                    modal={false}
-                    open={this.state.isDialogOpen}
-                    onRequestClose={this.handleNo}
-                >
-                    Do you really want to cancel?
-                </Dialog>
             </div>);
     }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx

@@ -16,14 +16,11 @@
  * under the License.
  */
 
-import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import MenuItem from 'material-ui/MenuItem';
+import AuthHandler from "../../../../api/authHandler";
-import SelectField from 'material-ui/SelectField';
+import PlatformMgtApi from "../../../../api/platformMgtApi";
-import AuthHandler from "../../../api/authHandler";
+import {FormGroup, Input, Label} from 'reactstrap';
-import RaisedButton from 'material-ui/RaisedButton';
-import PlatformMgtApi from "../../../api/platformMgtApi";
 
 /**
  * The first step of the application creation wizard.
@@ -42,6 +39,8 @@ class Step1 extends Component {
     constructor() {
         super();
         this.setPlatforms = this.setPlatforms.bind(this);
+        this.setStepData = this.setStepData.bind(this);
+        this.cancel = this.cancel.bind(this);
         this.platforms = [];
         this.state = {
             finished: false,
@@ -57,16 +56,6 @@ class Step1 extends Component {
         this.scriptId = "application-create-step1";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-       Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
     componentDidMount() {
         //Get the list of available platforms and set to the state.
         PlatformMgtApi.getPlatforms().then(response => {
@@ -88,14 +77,14 @@ class Step1 extends Component {
             platform = platforms[index];
             tmpPlatforms.push(platform);
         }
-        this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].identifier})
+        this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
     }
 
     /**
      * Persist the current form data to the state.
      * */
     setStepData() {
-        console.log("Platforms",this.state.platforms);
+        console.log("Platforms", this.state.platforms);
         let step = {
             store: this.state.store,
             platform: this.state.platforms[this.state.platformSelectedIndex]
@@ -104,77 +93,66 @@ class Step1 extends Component {
         this.props.setData("step1", {step: step});
     }
 
-    /**
+    cancel() {
-     * Handles Next button click.
+
-     *  Validates the form.
-     *  Sets the data to the state.
-     *  Invokes the handleNext method of Create component.
-     * */
-    handleClick() {
-        this.setStepData();
     }
 
     /**
      * Triggers when changing the Platform selection.
      * */
-    onChangePlatform(event, index, value) {
+    onChangePlatform(event) {
-        console.log(this.state.platforms[index]);
+        console.log(event.target.value, this.state.platforms);
-        this.setState({platform: this.state.platforms[index].identifier, platformSelectedIndex: index});
+        let id = event.target.value;
+        let selectedPlatform = this.state.platforms.filter((platform) => {
+            return platform.identifier === id;
+        });
+        console.log(selectedPlatform);
+
+        this.setState({platform: selectedPlatform});
     };
 
     /**
      * Triggers when changing the Store selection.
      * */
-    onChangeStore(event, index, value) {
+    onChangeStore(event) {
-        this.setState({store: value});
+        console.log(event.target.value);
+        this.setState({store: event.target.value});
     };
 
     render() {
         return (
             <div>
-                <div className="creatediv">
-                    <div>
-                        <div>
-                            <SelectField
-                                floatingLabelText="Store Type*"
-                                value={this.state.store}
-                                floatingLabelFixed={true}
-                                onChange={this.onChangeStore.bind(this)}
-                            >
-                                <MenuItem value={0} primaryText="Enterprise"/>
-                                <MenuItem value={1} primaryText="Public"/>
-                            </SelectField>
-                            <br/>
-                            <SelectField
-                                floatingLabelText="Platform*"
-                                value={this.state.platform}
-                                floatingLabelFixed={true}
-                                onChange={this.onChangePlatform.bind(this)}
-                            >
-                                {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
-                                    return (
-                                        <MenuItem
-                                            key={Math.random()}
-                                            value={platform.identifier}
-                                            primaryText={platform.name}
-                                        />
-                                    )
-                                }) : <div/>}
-
 
-                            </SelectField>
+                <FormGroup>
-                        </div>
+                    <Label for="store">Store Type</Label>
-                        <br/>
+                    <Input
-                        <br/>
+                        type="select"
-                        <div className="nextButton">
+                        name="store"
-                            <RaisedButton
+                        id="store"
-                                label="Next >"
+                        className="input-custom"
-                                primary={true}
+                        onChange={this.onChangeStore.bind(this)}
-                                onClick={this.handleClick.bind(this)}
+                    >
-                            />
+                        <option>Enterprise</option>
-                        </div>
+                        <option>Public</option>
-                    </div>
+                    </Input>
-                </div>
+                </FormGroup>
+                <FormGroup>
+                    <Label for="store">Platform</Label>
+                    <Input
+                        type="select"
+                        name="store"
+                        id="store"
+                        onChange={this.onChangePlatform.bind(this)}
+                    >
+                        {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
+                            return (
+                                <option value={platform.identifier}>
+                                    {platform.name}
+                                </option>
+                            )
+                        }) : <option>No Platforms</option>}
+                    </Input>
+                </FormGroup>
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx

@@ -0,0 +1,318 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {Badge, FormGroup, Input, Label} from 'reactstrap';
+
+/**
+ * The Second step of application create wizard.
+ * This contains following components.
+ *      * App Title
+ *      * Short Description
+ *      * Application Description
+ *      * Application Visibility
+ *      * Application Tags : {Used Material UI Chip component}
+ *      * Application Category.
+ *      * Platform Specific properties.
+ *
+ * Parent Component: Create
+ * Props:
+ *      * handleNext : {type: function, Invokes handleNext function in Parent.}
+ *      * handlePrev : {type: function, Invokes handlePrev function in Parent}
+ *      * setData : {type: function, Invokes setStepData function in Parent}
+ *      * removeData : {type: Invokes removeStepData function in Parent}
+ * */
+class Step2 extends Component {
+    constructor() {
+        super();
+        this.state = {
+            tags: [],
+            icon: [],
+            title: "",
+            errors: {},
+            banner: [],
+            defValue: "",
+            category: 0,
+            visibility: 0,
+            description: "",
+            screenshots: [],
+            identifier: "",
+            shortDescription: ""
+        };
+        this.scriptId = "application-create-step2";
+    }
+
+    /**
+     * 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: ""}, console.log(tags));
+        }
+    }
+
+    /**
+     * Set the value for tag.
+     * */
+    handleTagChange(event) {
+        let defaultValue = this.state.defValue;
+        defaultValue = event.target.value;
+        this.setState({defValue: defaultValue})
+    }
+
+    /**
+     * Invokes the handleNext function in Create component.
+     * */
+    handleNext() {
+        let fields = [{name: "Title", value: this.state.title},
+            {name: "Short Description", value: this.state.shortDescription},
+            {name: "Description", value: this.state.description},
+            {name: "Banner", value: this.state.banner},
+            {name: "Screenshots", value: this.state.screenshots},
+            {name: "Identifier", value: this.state.identifier},
+            {name: "Icon", value: this.state.icon}];
+        this.validate(fields);
+    }
+
+    /**
+     * Invokes the handlePrev function in Create component.
+     * */
+    handlePrev() {
+        this.props.handlePrev();
+    }
+
+    /**
+     * 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});
+    };
+
+    /**
+     * Validate the form.
+     * */
+    validate(fields) {
+        let errors = {};
+        let errorsPresent = false;
+        fields.forEach(function (field) {
+            switch (field.name) {
+                case 'Title': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Identifier': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Short Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Banner': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Icon': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Screenshots': {
+                    if (field.value.length < 3) {
+                        errors[field.name] = "3 " + field.name + " are required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+            }
+        });
+
+        if (!errorsPresent) {
+            this.setStepData();
+        } else {
+            this.setState({errors: errors}, console.log(errors));
+        }
+    }
+
+    /**
+     * Creates an object with the current step data and persist in the parent.
+     * */
+    setStepData() {
+        let stepData = {};
+
+        this.props.setData("step2", {step: stepData});
+    };
+
+    /**
+     * Set text field values to state.
+     * */
+    onTextFieldChange(event, value) {
+        let field = event.target.id;
+        switch (field) {
+            case "name": {
+                this.setState({name: value});
+                break;
+            }
+            case "shortDescription": {
+                this.setState({shortDescription: value});
+                break;
+            }
+            case "description": {
+                this.setState({description: value});
+                break;
+            }
+            case "identifier": {
+                this.setState({identifier: value});
+                break;
+            }
+        }
+    };
+
+    render() {
+        console.log(this.state.visibilityComponent);
+        return (
+            <div className="createStep2Content">
+                <div>
+                    <div>
+                        <FormGroup>
+                            <Label for="app-title">Title*</Label>
+                            <Input
+                                required
+                                type="text"
+                                name="appName"
+                                id="app-title"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-description">Description*</Label>
+                            <Input
+                                required
+                                type="textarea"
+                                name="appDescription"
+                                id="app-description"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-category">Category</Label>
+                            <Input
+                                type="select"
+                                name="category"
+                                id="app-category"
+                            >
+                                <option>Business</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-visibility">Visibility</Label>
+                            <Input
+                                type="select"
+                                name="visibility"
+                                id="app-visibility"
+                            >
+                                <option>Devices</option>
+                                <option>Roles</option>
+                                <option>Groups</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-tags">Tags*</Label>
+                            <Input
+                                required
+                                type="text"
+                                value={this.state.defValue}
+                                name="app-tags"
+                                id="app-tags"
+                                onChange={this.handleTagChange.bind(this)}
+                                onKeyPress={this.addTags.bind(this)}
+                            />
+                            <div id="batch-content">
+                                {this.state.tags.map(tag => {
+                                        return (
+                                            <Badge
+                                                style={{margin: '0 2px 0 2px'}}
+                                                value={tag.value}
+                                                onClick={this.handleRequestDelete.bind(this)}
+                                            >
+                                                {tag.value}
+                                            </Badge>
+                                        )
+                                    }
+                                )}
+                            </div>
+                        </FormGroup>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Step2.prototypes = {
+    handleNext: PropTypes.func,
+    handlePrev: PropTypes.func,
+    setData: PropTypes.func,
+    removeData: PropTypes.func
+};
+
+export default Step2;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx

@@ -0,0 +1,393 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * 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 MenuItem from 'material-ui/MenuItem';
+import SelectField from 'material-ui/SelectField';
+import {FormGroup, Label} from 'reactstrap';
+import AppImage from "../../../UIComponents/AppImage/AppImage";
+
+
+/**
+ * The Third step of application create wizard.
+ * This contains following components.
+ *      * Screenshots
+ *      * Banner
+ *      * Icon
+ *
+ * Parent Component: Create
+ * Props:
+ *      * handleNext : {type: function, Invokes handleNext function in Parent.}
+ *      * handlePrev : {type: function, Invokes handlePrev function in Parent}
+ *      * setData : {type: function, Invokes setStepData function in Parent}
+ *      * removeData : {type: Invokes removeStepData function in Parent}
+ * */
+class Step3 extends Component {
+    constructor() {
+        super();
+        this.state = {
+            tags: [],
+            icon: [],
+            title: "",
+            errors: {},
+            banner: [],
+            defValue: "",
+            category: 0,
+            visibility: 0,
+            description: "",
+            screenshots: [],
+            identifier: "",
+            shortDescription: ""
+        };
+        this.scriptId = "application-create-step2";
+    }
+
+
+    /**
+     * 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: ""}, console.log(tags));
+        }
+    }
+
+    /**
+     * Set the value for tag.
+     * */
+    handleTagChange(event) {
+        let defaultValue = this.state.defValue;
+        defaultValue = event.target.value;
+        this.setState({defValue: defaultValue})
+    }
+
+    /**
+     * Invokes the handleNext function in Create component.
+     * */
+    handleNext() {
+        let fields = [{name: "Title", value: this.state.title},
+            {name: "Short Description", value: this.state.shortDescription},
+            {name: "Description", value: this.state.description},
+            {name: "Banner", value: this.state.banner},
+            {name: "Screenshots", value: this.state.screenshots},
+            {name: "Identifier", value: this.state.identifier},
+            {name: "Icon", value: this.state.icon}];
+        this.validate(fields);
+    }
+
+    /**
+     * Invokes the handlePrev function in Create component.
+     * */
+    handlePrev() {
+        this.props.handlePrev();
+    }
+
+    /**
+     * 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});
+    };
+
+    /**
+     * Creates Chip array from state.tags.
+     * */
+    renderChip(data) {
+        return (
+            <Chip
+                key={data.key}
+                onRequestDelete={() => this.handleRequestDelete(data.key)}
+                className="applicationCreateChip">
+                {data.value}
+            </Chip>
+        );
+    }
+
+    onVisibilitySelect(event, index, value) {
+        console.log(value);
+        let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
+            <MenuItem value={1} primaryText="Roles"/>
+            <MenuItem value={2} primaryText="Devices"/> </SelectField>;
+        if (value === 1) {
+            this.setState({visibilityComponent: comp});
+        } else if (value === 2) {
+
+        } else {
+
+        }
+    };
+
+    /**
+     * Validate the form.
+     * */
+    validate(fields) {
+        let errors = {};
+        let errorsPresent = false;
+        fields.forEach(function (field) {
+            switch (field.name) {
+                case 'Title': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Identifier': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Short Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Banner': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Icon': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Screenshots': {
+                    if (field.value.length < 3) {
+                        errors[field.name] = "3 " + field.name + " are required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+            }
+        });
+
+        if (!errorsPresent) {
+            this.setStepData();
+        } else {
+            this.setState({errors: errors}, console.log(errors));
+        }
+    }
+
+    /**
+     * Creates an object with the current step data and persist in the parent.
+     * */
+    setStepData() {
+        let stepData = {
+            icon: this.state.icon,
+            name: this.state.name,
+            tags: this.state.tags,
+            banner: this.state.banner,
+            category: this.categories[this.state.category],
+            identifier: this.state.identifier,
+            screenshots: this.state.screenshots,
+            description: this.state.description,
+            shortDescription: this.state.shortDescription
+        };
+
+        this.props.setData("step2", {step: stepData});
+    };
+
+    /**
+     * Set text field values to state.
+     * */
+    onTextFieldChange(event, value) {
+        let field = event.target.id;
+        switch (field) {
+            case "name": {
+                this.setState({name: value});
+                break;
+            }
+            case "shortDescription": {
+                this.setState({shortDescription: value});
+                break;
+            }
+            case "description": {
+                this.setState({description: value});
+                break;
+            }
+            case "identifier": {
+                this.setState({identifier: value});
+                break;
+            }
+        }
+    };
+
+    /**
+     * Removed user uploaded banner.
+     * */
+    removeBanner(event, d) {
+        console.log(event, d);
+        this.setState({banner: []});
+    };
+
+    /**
+     * Removes uploaded icon.
+     * */
+    removeIcon(event) {
+        this.setState({icon: []});
+    };
+
+    /**
+     * Removes selected screenshot.
+     * */
+    removeScreenshot(event) {
+        console.log(event.target)
+    };
+
+    render() {
+        console.log(this.state.visibilityComponent);
+        return (
+            <div className="createStep2Content">
+                <div>
+                    <div>
+                        <div>
+                            <FormGroup>
+                                <Label for="app-screenshots">Screenshots*</Label>
+                                <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                                <div id="screenshot-container">
+                                    {this.state.screenshots.map((tile) => (
+                                        <div id="app-image-screenshot">
+                                            <AppImage image={tile[0].preview}/>
+                                        </div>
+                                    ))}
+                                    {this.state.screenshots.length < 3 ?
+                                        <Dropzone
+                                            className="applicationCreateScreenshotDropZone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(screenshots, rejected) => {
+                                                let tmpScreenshots = this.state.screenshots;
+                                                tmpScreenshots.push(screenshots);
+                                                console.log(screenshots);
+                                                this.setState({
+                                                    screenshots: tmpScreenshots
+                                                });
+                                            }}
+                                        >
+                                            <p className="applicationCreateScreenshotp">+</p>
+                                        </Dropzone> : <div/>}
+                                </div>
+                            </FormGroup>
+                        </div>
+                        <div style={{display: 'flex'}}>
+                            <div style={{float: 'left', marginRight: '15px'}}>
+                                <FormGroup>
+                                    <Label for="app-icon">Icon*</Label>
+                                    <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                    <div id="app-icon-container">
+                                        {this.state.icon.map((tile) => (
+                                            <div id="app-image-icon">
+                                                <AppImage image={tile.preview}/>
+                                            </div>
+                                        ))}
+
+                                    {this.state.icon.length === 0 ?
+                                        <Dropzone
+                                            className="applicationCreateIconDropZone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(icon, rejected) => {
+                                                this.setState({icon, rejected});
+                                            }}
+                                        >
+                                            <p className="applicationCreateIconp">+</p>
+                                        </Dropzone> : <div/>}
+                                    </div>
+                                </FormGroup>
+                            </div>
+                            <div style={{marginLeft: '15px'}}>
+                                <FormGroup>
+                                    <Label for="app-banner">Banner*</Label>
+                                    <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                    <div id="app-banner-container">
+                                        {this.state.banner.map((tile) => (
+                                            <div id="app-image-banner">
+                                                <AppImage image={tile.preview}/>
+                                            </div>
+                                        ))}
+                                        {this.state.banner.length === 0 ?
+                                            <Dropzone
+                                                className="applicationCreateBannerDropZone"
+                                                accept="image/jpeg, image/png"
+                                                onDrop={(banner, rejected) => {
+                                                    this.setState({banner, rejected});
+                                                }}
+                                            >
+                                                <p className="applicationCreateBannerp">+</p>
+                                            </Dropzone> : <div/>
+                                        }
+                                    </div>
+                                </FormGroup>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Step3.prototypes = {
+    handleNext: PropTypes.func,
+    handlePrev: PropTypes.func,
+    setData: PropTypes.func,
+    removeData: PropTypes.func
+};
+
+export default Step3;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx

@@ -18,13 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import Toggle from 'material-ui/Toggle';
+import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap';
-import MenuItem from 'material-ui/MenuItem';
+import Switch from '../../../UIComponents/Switch/Switch'
-import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
-import SelectField from 'material-ui/SelectField';
-import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -48,7 +43,7 @@ import Theme from '../../../theme';
  *      * setData : {type: function, Invokes setStepData function in Parent}
  *      * removeData : {type: Invokes removeStepData function in Parent}
  * */
-class Step3 extends Component {
+class Step4 extends Component {
     constructor() {
         super();
         this.handleToggle = this.handleToggle.bind(this);
@@ -63,17 +58,6 @@ class Step3 extends Component {
         this.scriptId = "application-create-step3";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
     /**
      * Handles finish button click.
      * This invokes handleNext function in parent component.
@@ -101,57 +85,71 @@ class Step3 extends Component {
         return (
             <div className="applicationCreateStepMiddle">
                 <div>
-                    <Toggle
+                    <FormGroup>
-                        label="Release the Application"
+                        <div id="app-release-switch-content">
-                        labelPosition="right"
+                            <div id="app-release-switch-label">
-                        onToggle={this.handleToggle}
+                                <Label for="app-release-switch">
-                        defaultToggled={this.state.showForm}
+                                    <strong>
-                    />
+                                        Add Release to Application
-                    {/*If toggle is true, the release form will be shown.*/}
+                                    </strong>
-                    {!this.state.showForm ? <div/> :
+                                </Label>
-                        <div>
+                            </div>
-                            <SelectField
+                            <div id="app-release-switch-switch">
-                                floatingLabelText="Select Release Channel*"
+                                <Switch
-                                value={this.state.releaseChannel}
+                                    id="app-release-switch"
-                                floatingLabelFixed={true}
+                                    onChange={this.handleToggle.bind(this)}
-                            >
+                                />
-                                <MenuItem value={1} primaryText="Alpha"/>
+                            </div>
-                                <MenuItem value={2} primaryText="Beta"/>
+                        </div>
-                                <MenuItem value={3} primaryText="GA"/>
+                    </FormGroup>
-                            </SelectField>
+                    <br/>
-                            <br/>
+                    <div>
-                            <TextField
+                            <FormText color="muted">
-                                hintText="1.0.0"
+                                <i>Info: </i>
-                                floatingLabelText="Version*"
+                                Enabling this will create a release for the current Application.
-                                errorText={this.state.errors["title"]}
+                                To upload the Application, please visit to the Release management section of
-                                floatingLabelFixed={true}
+                                Application Edit View.
-                            /><br/>
+                            </FormText>
-                        </div>}
-                    <div className="applicationCreateBackAndFinish">
-                        <FlatButton
-                            label="< Back"
-                            disabled={false}
-                            onClick={this.handlePrev}
-                            className="applicationCreateFinish"
-                        />
-                        <RaisedButton
-                            label="Finish"
-                            primary={true}
-                            onClick={this.handleFinish}
-                        />
-
                     </div>
+                    {/*If toggle is true, the release form will be shown.*/}
+                    <Collapse isOpen={this.state.showForm}>
+                        <FormGroup>
+                            <Label for="release-channel">Release Channel</Label>
+                            <Input
+                                type="select"
+                                id="release-channel"
+                                style={{
+                                    width: '200px',
+                                    border: 'none',
+                                    borderRadius: '0',
+                                    borderBottom: 'solid 1px #BDBDBD'
+                                }}>
+                                <option>GA</option>
+                                <option>Alpha</option>
+                                <option>Beta</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="version">Version*</Label>
+                            <Input
+                                type="text"
+                                id="version input-custom"
+                                placeholder="v1.0"
+                                required
+                            />
+                        </FormGroup>
+                    </Collapse>
                 </div>
             </div>
         );
     }
 }
 
-Step3.propTypes = {
+Step4.propTypes = {
     handleFinish: PropTypes.func,
     handlePrev: PropTypes.func,
     setData: PropTypes.func,
     removeData: PropTypes.func
 };
 
-export default Step3;
+export default Step4;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/index.js

@@ -19,5 +19,6 @@
 import Step1 from './Step1';
 import Step2 from './Step2';
 import Step3 from './Step3';
+import Step4 from './Step4';
 
-export {Step1, Step2, Step3};
+export {Step1, Step2, Step3, Step4};

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

@@ -1,517 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import PropTypes from 'prop-types';
-import Theme from '../../../theme';
-import Chip from 'material-ui/Chip';
-import Dropzone from 'react-dropzone';
-import React, {Component} from 'react';
-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 Clear from 'material-ui/svg-icons/content/clear';
-import {GridList, GridTile} from 'material-ui/GridList';
-
-/**
- * The Second step of application create wizard.
- * This contains following components.
- *      * App Title
- *      * Short Description
- *      * Application Description
- *      * Application Visibility
- *      * Application Tags : {Used Material UI Chip component}
- *      * Application Category.
- *      * Platform Specific properties.
- *      * Screenshots
- *      * Banner
- *      * Icon
- *
- * Parent Component: Create
- * Props:
- *      * handleNext : {type: function, Invokes handleNext function in Parent.}
- *      * handlePrev : {type: function, Invokes handlePrev function in Parent}
- *      * setData : {type: function, Invokes setStepData function in Parent}
- *      * removeData : {type: Invokes removeStepData function in Parent}
- * */
-class Step2 extends Component {
-    constructor() {
-        super();
-        this.state = {
-            tags: [],
-            icon: [],
-            title: "",
-            errors: {},
-            banner: [],
-            defValue: "",
-            category: 0,
-            visibility: 0,
-            description: "",
-            screenshots: [],
-            identifier: "",
-            shortDescription: ""
-        };
-        this.scriptId = "application-create-step2";
-    }
-
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
-    /**
-     * 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: ""}, console.log(tags));
-        }
-    }
-
-    /**
-     * Set the value for tag.
-     * */
-    handleTagChange(event) {
-        let defaultValue = this.state.defValue;
-        defaultValue = event.target.value;
-        this.setState({defValue: defaultValue})
-    }
-
-    /**
-     * Invokes the handleNext function in Create component.
-     * */
-    handleNext() {
-        let fields = [{name: "Title", value: this.state.title},
-            {name: "Short Description", value: this.state.shortDescription},
-            {name: "Description", value: this.state.description},
-            {name: "Banner", value: this.state.banner},
-            {name: "Screenshots", value: this.state.screenshots},
-            {name: "Identifier", value: this.state.identifier},
-            {name: "Icon", value: this.state.icon}];
-        this.validate(fields);
-    }
-
-    /**
-     * Invokes the handlePrev function in Create component.
-     * */
-    handlePrev() {
-        this.props.handlePrev();
-    }
-
-    /**
-     * Handles Chip delete function.
-     * Removes the tag from state.tags
-     * */
-    handleRequestDelete(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});
-    };
-
-    /**
-     * Creates Chip array from state.tags.
-     * */
-    renderChip(data) {
-        return (
-            <Chip
-                key={data.key}
-                onRequestDelete={() => this.handleRequestDelete(data.key)}
-                className="applicationCreateChip">
-                {data.value}
-            </Chip>
-        );
-    }
-
-    onVisibilitySelect(event, index, value) {
-        console.log(value);
-        let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
-            <MenuItem value={1} primaryText="Roles"/>
-            <MenuItem value={2} primaryText="Devices"/> </SelectField>;
-        if (value === 1) {
-            this.setState({visibilityComponent: comp});
-        } else if (value === 2) {
-
-        } else {
-
-        }
-    };
-
-    /**
-     * Validate the form.
-     * */
-    validate(fields) {
-        let errors = {};
-        let errorsPresent = false;
-        fields.forEach(function (field) {
-            switch (field.name) {
-                case 'Title': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Identifier': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Short Description': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Description': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Banner': {
-                    if (field.value.length === 0) {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Icon': {
-                    if (field.value.length === 0) {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Screenshots': {
-                    if (field.value.length < 3) {
-                        errors[field.name] = "3 " + field.name + " are required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-            }
-        });
-
-        if (!errorsPresent) {
-            this.setStepData();
-        } else {
-            this.setState({errors: errors}, console.log(errors));
-        }
-    }
-
-    /**
-     * Creates an object with the current step data and persist in the parent.
-     * */
-    setStepData() {
-        let stepData = {
-            icon: this.state.icon,
-            name: this.state.name,
-            tags: this.state.tags,
-            banner: this.state.banner,
-            category: this.categories[this.state.category],
-            identifier: this.state.identifier,
-            screenshots: this.state.screenshots,
-            description: this.state.description,
-            shortDescription: this.state.shortDescription
-        };
-
-        this.props.setData("step2", {step: stepData});
-    };
-
-    /**
-     * Set text field values to state.
-     * */
-    onTextFieldChange(event, value) {
-        let field = event.target.id;
-        switch (field) {
-            case "name": {
-                this.setState({name: value});
-                break;
-            }
-            case "shortDescription": {
-                this.setState({shortDescription: value});
-                break;
-            }
-            case "description": {
-                this.setState({description: value});
-                break;
-            }
-            case "identifier": {
-                this.setState({identifier: value});
-                break;
-            }
-        }
-    };
-
-    /**
-     * Removed user uploaded banner.
-     * */
-    removeBanner(event, d) {
-        console.log(event, d);
-        this.setState({banner: []});
-    };
-
-    /**
-     * Removes uploaded icon.
-     * */
-    removeIcon(event) {
-        this.setState({icon: []});
-    };
-
-    /**
-     * Removes selected screenshot.
-     * */
-    removeScreenshot(event) {
-        console.log(event.target)
-    };
-
-    render() {
-        console.log(this.state.visibilityComponent);
-        return (
-            <div className="createStep2Content">
-                <div>
-                    <div>
-                        <TextField
-                            id="name"
-                            hintText="Enter a name for your application."
-                            errorText={this.state.errors["Title"]}
-                            floatingLabelText="Name*"
-                            floatingLabelFixed={true}
-                            onChange={this.onTextFieldChange.bind(this)}
-                        />
-                        <br/>
-                        <TextField
-                            id="identifier"
-                            hintText="Unique Identifier for Application."
-                            errorText={this.state.errors["Identifier"]}
-                            floatingLabelText="Identifier*"
-                            floatingLabelFixed={true}
-                            onChange={this.onTextFieldChange.bind(this)}
-                        />
-                        <br/>
-                        <TextField
-                            id="shortDescription"
-                            hintText="Enter a short description for your application."
-                            errorText={this.state.errors["Short Description"]}
-                            floatingLabelText="Short Description*"
-                            floatingLabelFixed={true}
-                            multiLine={true}
-                            rows={2}
-                            onChange={this.onTextFieldChange.bind(this)}
-                        />
-                        <br/>
-                        <TextField
-                            id="description"
-                            errorText={this.state.errors["Description"]}
-                            hintText="Enter the description."
-                            floatingLabelText="Description*"
-                            floatingLabelFixed={true}
-                            multiLine={true}
-                            rows={4}
-                            onChange={this.onTextFieldChange.bind(this)}
-                        />
-                        <br/>
-                        <SelectField
-                            floatingLabelText="Visibility*"
-                            value={this.state.visibility}
-                            floatingLabelFixed={true}
-                            onChange={this.onVisibilitySelect.bind(this)}
-                        >
-                            <MenuItem value={0} primaryText="Public"/>
-                            <MenuItem value={1} primaryText="Roles"/>
-                            <MenuItem value={2} primaryText="Devices"/>
-                        </SelectField>
-                        <br/>
-                        <TextField
-                            id="tags"
-                            errorText={this.state.errors["tags"]}
-                            hintText="Enter Application tags.."
-                            floatingLabelText="Tags*"
-                            floatingLabelFixed={true}
-                            value={this.state.defValue}
-                            onChange={this.handleTagChange.bind(this)}
-                            onKeyPress={this.addTags.bind(this)}
-                        />
-                        <br/>
-                        <div className="applicationCreateWrapper">
-                            {this.state.tags.map(this.renderChip, this)}
-                        </div>
-                        <br/>
-                        <SelectField
-                            floatingLabelText="Category*"
-                            value={this.state.category}
-                            floatingLabelFixed={true}
-                        >
-                            <MenuItem value={0} primaryText="Business"/>
-                        </SelectField>
-                        <br/>
-                        {/*Platform Specific Properties.*/}
-                        <div className="platformSpecificPropertyDiv">
-                            <p className="platformSpecificPropertyP">Platform Specific Properties</p>
-                        </div>
-                        <br/>
-                        <div>
-                            <p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
-                            <p className="applicationCreateBannerTitle">Banner*:</p>
-                            <GridList className="applicationCreateGrid" cols={1.1}>
-                                {this.state.banner.map((tile) => (
-                                    <GridTile
-                                        key={Math.floor(Math.random() * 1000)}
-                                        title={tile.name}
-                                        actionIcon={
-                                            <IconButton onClick={this.removeBanner.bind(this)}>
-                                                <Clear/>
-                                            </IconButton>}>
-                                        <img src={tile.preview}/>
-                                    </GridTile>
-                                ))}
-                                {this.state.banner.length === 0 ?
-                                    <Dropzone
-                                        className="applicationCreateBannerDropZone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(banner, rejected) => {
-                                            this.setState({banner, rejected});
-                                        }}
-                                    >
-                                        <p className="applicationCreateBannerp">+</p>
-                                    </Dropzone> : <div/>
-                                }
-                            </GridList>
-                        </div>
-                        <br/>
-                        <div>
-                            <p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
-                            <p className="applicationCreateScreenshotTitle">Screenshots*:</p>
-                            <GridList className="applicationCreateScreenshotGrid" cols={1.1}>
-                                {this.state.screenshots.map((file) => (
-                                    <GridTile
-                                        key={Math.floor(Math.random() * 1000)}
-                                        title={file[0].name}
-                                        actionIcon={
-                                            <IconButton onClick={this.removeScreenshot.bind(this)}>
-                                                <Clear/>
-                                            </IconButton>}>
-                                        <img src={file[0].preview}/></GridTile>
-                                ))}
-                                {this.state.screenshots.length < 3 ?
-                                    <Dropzone
-                                        className="applicationCreateScreenshotDropZone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(screenshots, rejected) => {
-                                            let tmpScreenshots = this.state.screenshots;
-                                            tmpScreenshots.push(screenshots);
-                                            this.setState({
-                                                screenshots: tmpScreenshots
-                                            });
-                                        }}
-                                    >
-                                        <p className="applicationCreateScreenshotp">+</p>
-                                    </Dropzone> : <div/>}
-                            </GridList>
-                        </div>
-                        <br/>
-                        <div>
-                            <p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
-                            <p className="applicationCreateIconTitle">Icon*:</p>
-                            <GridList className="applicationCreateIconGrid" cols={1.1}>
-                                {this.state.icon.map((tile) => (
-                                    <GridTile
-                                        key={Math.floor(Math.random() * 1000)}
-                                        title={tile.name}
-                                        actionIcon={
-                                            <IconButton onClick={this.removeIcon.bind(this)}>
-                                                <Clear/>
-                                            </IconButton>}>
-                                        <img src={tile.preview}/>
-                                    </GridTile>
-                                ))}
-                                {this.state.icon.length === 0 ?
-                                    <Dropzone
-                                        className="applicationCreateIconDropZone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(icon, rejected) => {
-                                            this.setState({icon, rejected});
-                                        }}
-                                    >
-                                        <p className="applicationCreateIconp">+</p>
-                                    </Dropzone> : <div/>}
-                            </GridList>
-                        </div>
-                        <br/>
-                    </div>
-                    <br/>
-                    <br/>
-                    <div className="applicationCreateBackAndNext">
-                        <FlatButton
-                            label="< Back"
-                            disabled={false}
-                            onClick={this.handlePrev.bind(this)}
-                            style={{marginRight: 12}}
-                        />
-                        <RaisedButton
-                            label="Next >"
-                            primary={true}
-                            onClick={this.handleNext.bind(this)}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-Step2.prototypes = {
-    handleNext: PropTypes.func,
-    handlePrev: PropTypes.func,
-    setData: PropTypes.func,
-    removeData: PropTypes.func
-};
-
-export default Step2;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import './baseLayout.css';
+import {Col, Row} from "reactstrap";
+import React, {Component} from 'react';
+import GeneralInfo from "../GeneralInfo";
+import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
+
+class ApplicationEdit extends Component {
+
+    constructor() {
+        super();
+        this.getTabContent = this.getTabContent.bind(this);
+        this.state = {
+            general: "active",
+            release: "",
+            pkgmgt: "",
+            activeTab: 1
+        }
+    }
+
+    handleClick(event) {
+        event.stopPropagation();
+        console.log(typeof event.target.value);
+        const key = event.target.value;
+
+        switch (key) {
+            case "1": {
+                console.log("Step1");
+                this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
+                break;
+            }
+            case "2": {
+                this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
+                break;
+            }
+            case "3": {
+                this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
+                break;
+            }
+            default: {
+                return "No Content";
+            }
+        }
+    }
+
+    getTabContent(tab) {
+        switch (tab) {
+            case 1: {
+                return <GeneralInfo/>
+            }
+            case 2: {
+                return <ReleaseManager/>
+            }
+            case 3: {
+                return ("Step3")
+            }
+        }
+    }
+
+    render() {
+        console.log(this.state);
+        return (
+            <div id="application-edit-base">
+                <Row id="application-edit-header">
+                    <Col>Application Name</Col>
+                </Row>
+                <Row id="application-edit-main-container">
+                    <Col xs="3">
+                        <div className="tab">
+                            <button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
+                                General
+                            </button>
+                            <button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
+                                App
+                                Releases
+                            </button>
+                            <button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
+                                Package Manager
+                            </button>
+                        </div>
+                    </Col>
+                    <Col xs="9">
+                        <div id="app-edit-content">
+                            <Row>
+                                <Col xs="12">
+                                    <div id="application-edit-outer-content">
+                                        {/* Application edit content */}
+                                        <div id="application-edit-content">
+                                            {this.getTabContent(this.state.activeTab)}
+                                        </div>
+                                    </div>
+                                </Col>
+                            </Row>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
+}
+
+export default ApplicationEdit;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css

@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+#application-edit-base {
+    width: 70%;
+    margin: 0 auto;
+    height: 100%;
+    background-color: #f6f6f6;
+    border: solid 1px #828282;
+}
+
+#application-edit-header {
+    height: 50px;
+    width: 100%;
+    margin: 0;
+    background-color: #9a9a9a;
+    border: solid 1px #a2a2a2;
+    font-size: 20px;
+}
+
+.application-header-text {
+    margin: 10px 0px 0px 10px;
+}
+
+#save-btn-content {
+    float: right;
+
+}
+
+#app-save-btn {
+    border-radius: 0%;
+}
+
+.save-btn {
+    margin: 5px 5px 5px 0px;
+    height: 70%;
+    width: 50%;
+    float: right;
+}
+
+.save-btn:hover {
+    cursor: pointer;
+}
+
+/*Tab styling*/
+div.tab {
+    float: left;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    height: 100%;
+}
+
+/* Style the tab buttons */
+div.tab button {
+    display: block;
+    background-color: inherit;
+    color: black;
+    padding: 15px 16px;
+    width: 100%;
+    border: none;
+    outline: none;
+    text-align: left;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+div.tab button:hover {
+    background-color: #ddd;
+    cursor: pointer;
+}
+
+/* Create an active/current "tab button" class */
+div.tab button.active {
+    background-color: #ccc;
+}
+
+
+#application-edit-main-container {
+    display: flex;
+}
+
+#application-edit-outer-content {
+    height: auto;
+    width: 100%;
+}
+
+#application-edit-content {
+    margin: 5px 10px 5px 10px;
+    width: 90%;
+}
+
+#app-edit-content {
+    height: 100%;
+    position: relative;
+}

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

@@ -0,0 +1,200 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
+import Dropzone from 'react-dropzone';
+import './generalInfo.css';
+
+class GeneralInfo extends Component {
+
+    constructor() {
+        super();
+        this.state = {
+            defValue: "",
+            tags: [],
+            screenshots: [],
+            icon: [],
+            banner: []
+        }
+    }
+
+    render() {
+        return (
+            <div className="app-edit-general-info">
+                <form>
+                    <FormGroup>
+                        <Label for="app-title">Title*</Label>
+                        <Input
+                            required
+                            type="text"
+                            name="appName"
+                            id="app-title"
+                        />
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-title">Description*</Label>
+                        <Input
+                            required
+                            type="textarea"
+                            multiline
+                            name="appName"
+                            id="app-title"
+                        />
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-category">Category</Label>
+                        <Input
+                            type="select"
+                            name="category"
+                            id="app-category"
+                        >
+                            <option>Business</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-visibility">Visibility</Label>
+                        <Input
+                            type="select"
+                            name="visibility"
+                            id="app-visibility"
+                        >
+                            <option>Devices</option>
+                            <option>Roles</option>
+                            <option>Groups</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-tags">Tags*</Label>
+                        <Input
+                            required
+                            type="text"
+                            value={this.state.defValue}
+                            name="app-tags"
+                            id="app-tags"
+                        />
+                        <div id="batch-content">
+                            {this.state.tags.map(tag => {
+                                    return (
+                                        <Badge
+                                            style={{margin: '0 2px 0 2px'}}
+                                            value={tag.value}
+                                        >
+                                            {tag.value}
+                                        </Badge>
+                                    )
+                                }
+                            )}
+                        </div>
+                    </FormGroup>
+                    <div>
+                        <FormGroup>
+                            <Label for="app-screenshots">Screenshots*</Label>
+                            <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                            <div id="screenshot-container">
+                                {this.state.screenshots.map((tile) => (
+                                    <button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
+                                            onMouseEnter={() => {
+                                                console.log("Mouse Entered")
+                                            }}>
+                                        {console.log(tile[0].preview)}
+                                        <img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
+                                    </button>
+                                ))}
+                                {this.state.screenshots.length < 3 ?
+                                    <Dropzone
+                                        className="applicationCreateScreenshotDropZone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(screenshots, rejected) => {
+                                            let tmpScreenshots = this.state.screenshots;
+                                            tmpScreenshots.push(screenshots);
+                                            console.log(screenshots);
+                                            this.setState({
+                                                screenshots: tmpScreenshots
+                                            });
+                                        }}
+                                    >
+                                        <p className="applicationCreateScreenshotp">+</p>
+                                    </Dropzone> : <div/>}
+                            </div>
+                        </FormGroup>
+                    </div>
+                    <div style={{display: 'flex'}}>
+                        <div style={{float: 'left', marginRight: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-icon">Icon*</Label>
+                                <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                <div id="app-icon-container">
+                                    {this.state.icon.map((tile) => (
+                                        <button onMouseEnter={() => {
+                                            console.log("Mouse Entered")
+                                        }}>
+                                            <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
+                                        </button>
+                                    ))}
+                                    {this.state.icon.length === 0 ?
+                                        <Dropzone
+                                            className="applicationCreateIconDropZone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(icon, rejected) => {
+                                                this.setState({icon, rejected});
+                                            }}
+                                        >
+                                            <p className="applicationCreateIconp">+</p>
+                                        </Dropzone> : <div/>}
+                                </div>
+                            </FormGroup>
+                        </div>
+                        <div style={{marginLeft: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-banner">Banner*</Label>
+                                <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                <div id="app-banner-container">
+                                    {this.state.banner.map((tile) => (
+                                        <button onMouseEnter={() => {
+                                            console.log("Mouse Entered")
+                                        }}>
+                                            <img style={{height: '200px', width: '400px'}} src={tile.preview}/>
+                                        </button>
+                                    ))}
+                                    {this.state.banner.length === 0 ?
+                                        <Dropzone
+                                            className="applicationCreateBannerDropZone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(banner, rejected) => {
+                                                this.setState({banner, rejected});
+                                            }}
+                                        >
+                                            <p className="applicationCreateBannerp">+</p>
+                                        </Dropzone> : <div/>
+                                    }
+                                </div>
+                            </FormGroup>
+                        </div>
+                    </div>
+                    <div className="save-info">
+                        <Button>Save</Button>
+                    </div>
+                </form>
+            </div>
+        )
+    }
+}
+
+export default GeneralInfo;
+

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

@@ -16,15 +16,22 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {withRouter} from 'react-router-dom';
 
-/**
+class PackageManager extends Component {
- * Application view component.
- * Shows the details of the application.
- * */
-class ApplicationView extends Component{
 
+    constructor() {
+        super();
+    }
+
+    render() {
+        return(
+            <div id="package-mgt-content">
+
+            </div>
+        )
+    }
 }
 
-export default withRouter(ApplicationView);
+export default PackageManager;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/generalInfo.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.app-edit-general-info {
+    margin-top: 20px;
+}
+
+.save-info {
+    float: right;
+    margin-bottom: 10px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx

@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './createRelease.css';
+import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
+import UploadPackage from "./UploadPackage";
+
+class CreateRelease extends Component {
+    constructor() {
+        super();
+        this.onTestMethodChange = this.onTestMethodChange.bind(this);
+        this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
+        this.handleBack = this.handleBack.bind(this);
+        this.backToRelease = this.backToRelease.bind(this);
+        this.state = {
+            open: true,
+            hiddenMain: false
+        }
+    }
+
+    onTestMethodChange(event) {
+        let type = event.target.value;
+        if (type !== 'open') {
+            this.setState({open: false})
+        } else {
+            this.setState({open: true})
+        }
+    }
+
+    showUploadArtifacts() {
+        this.setState({hiddenMain: true})
+    }
+
+    handleBack() {
+        this.props.handleBack();
+    }
+
+    backToRelease() {
+        this.setState({hiddenMain: false});
+    }
+
+    render() {
+        const {channel} = this.props;
+        console.log(channel);
+        return (
+            <div>
+
+                {this.state.hiddenMain ?
+                    <div>
+                        <UploadPackage
+                            backToRelease={this.backToRelease}
+                            selectedChannel={channel}
+                        />
+                    </div> :
+
+                    <div>
+                        <Row>
+                            <div className="release-header">
+                                <a onClick={this.handleBack}>{"<-"}</a>
+                                <span id="create-release-header">
+                            <strong>{channel} Release</strong>
+                        </span>
+                            </div>
+                        </Row>
+                        <Row>
+                            <div className="release-create">
+                                <div>
+                            <span>
+                                <strong>Create Release</strong>
+                            </span>
+                                    <p>
+                                        {channel === 'Production' ? "" :
+                                            "You could create " + channel + " release for your application and let " +
+                                            "the test users to test the application for it's stability."}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Button id="create-release-btn" onClick={this.showUploadArtifacts}>Create a {channel} Release</Button>
+                                </div>
+                            </div>
+                        </Row>
+                        {channel !== 'Production' ?
+                            <Row>
+                                <div>
+                            <span>
+                                <strong>Manage Test Method</strong>
+                            </span>
+                                    <p>
+                                        This section allows you to change the test method and the users who would be
+                                        able to test your application.
+                                    </p>
+                                    <div>
+                                        <form>
+                                            <FormGroup>
+                                                <Label for="test-method">Test Method*</Label>
+                                                <Input
+                                                    required
+                                                    type="select"
+                                                    name="testMethod"
+                                                    id="test-method"
+                                                    onChange={this.onTestMethodChange}
+                                                >
+                                                    <option value="open">Open {channel}</option>
+                                                    <option value="closed">Closed {channel}</option>
+                                                </Input>
+                                            </FormGroup>
+                                            {!this.state.open ? (
+                                                <FormGroup>
+                                                    <Label for="user-list">Users List*</Label>
+                                                    <Input
+                                                        required
+                                                        name="userList"
+                                                        id="user-list"
+                                                        type="text"
+                                                    />
+                                                    <FormText color="muted">
+                                                        Provide a comma separated list of email
+                                                        addresses.
+                                                    </FormText>
+                                                </FormGroup>
+                                            ) : <div/>}
+                                            <FormGroup>
+                                                <Label for="app-title">Feedback Method*</Label>
+                                                <Input
+                                                    required
+                                                    name="appName"
+                                                    id="app-title"
+                                                />
+                                                <FormText color="muted">
+                                                    Provide an Email address or a URL for your users to provide
+                                                    feedback on the application.
+                                                </FormText>
+                                            </FormGroup>
+                                            <div>
+                                                <Button className="form-btn">Save</Button>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                            </Row> :
+                            <div/>
+                        }
+                    </div>
+                }
+
+            </div>
+        );
+    }
+}
+
+CreateRelease.propTypes = {
+    channel: PropTypes.string,
+    handleBack: PropTypes.func
+};
+
+export default CreateRelease;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './createRelease.css';
+import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
+
+class UploadPackage extends Component {
+
+    constructor() {
+        super();
+        this.handleBack = this.handleBack.bind(this)
+    }
+
+    handleBack() {
+        this.props.backToRelease();
+    }
+
+    render() {
+        const {selectedChannel} = this.props;
+        return (
+            <div>
+                <Row>
+                    <div className="release-header">
+                        <a onClick={this.handleBack}>{"<-"}</a>
+                        <span id="create-release-header">
+                            <strong>New Release for {selectedChannel}</strong>
+                        </span>
+                    </div>
+                </Row>
+                <Row>
+                    <div className="release-header">
+                        <span id="create-release-header">
+                            <strong>Upload Package File</strong>
+                        </span>
+                    </div>
+                </Row>
+                <Row>
+                    <Col xs="3">
+                        <Button>Upload</Button>
+                    </Col>
+                    <Col xs="3">
+                        <Button>Select from package library</Button>
+                    </Col>
+                </Row>
+                <Row>
+                    <div className="release-detail-content">
+                        <form>
+                            <FormGroup>
+                                <Label>Release Name *</Label>
+                                <Input
+                                    required
+                                    type="text"
+                                />
+                            </FormGroup>
+                            <FormGroup>
+                                <Label>Release Notes *</Label>
+                                <Input
+                                    required
+                                    type="textarea"
+                                />
+                            </FormGroup>
+                            <div className="form-btn">
+                                <Button>Send for Review</Button>
+                            </div>
+                        </form>
+                    </div>
+                </Row>
+            </div>
+        );
+    }
+}
+
+UploadPackage.protoTypes = {
+    backToRelease: PropTypes.func,
+    channel: PropTypes.string
+};
+
+export default UploadPackage;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.release-header {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.release-create {
+    height: 150px;
+    margin-bottom: 20px;
+}
+
+.release-detail-content {
+    width: 100%;
+    margin-top: 20%;
+    height: 300px;
+}
+
+.form-btn {
+    float: right;
+    margin-bottom: 10px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx

@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './release-mgt.css';
+import {Button, Col, Row} from "reactstrap";
+import CreateRelease from "../Create/CreateRelease";
+
+class ReleaseManager extends Component {
+
+    constructor() {
+        super();
+        this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
+        this.createRelease = this.createRelease.bind(this);
+        this.handleBackPress = this.handleBackPress.bind(this);
+        this.state = {
+            createRelease: false,
+            onGoing: ""
+        }
+    }
+
+    createRelease(event) {
+        event.preventDefault();
+        this.setState({createRelease: true, onGoing: event.target.value})
+    }
+
+    handleBackPress() {
+        this.setState({createRelease: false});
+    }
+
+    /**
+     * Holds a generic message saying there are no current release in the specified release channel.
+     * */
+    getNoReleaseContent(release) {
+        return (
+            <div>
+                <Row>
+                    <Col sm="12" md={{size: 8, offset: 4}}>
+                        <p>You have no on-going {release} Releases!</p>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col sm="12" md={{size: 8, offset: 5}}>
+                        <Button
+                            className="button-add"
+                            id={release.toLowerCase()}
+                            value={release}
+                            onClick={this.createRelease}
+                        >
+                            Create a Release
+                        </Button>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div>
+                {this.state.createRelease ?
+                    <CreateRelease
+                        channel={this.state.onGoing}
+                        handleBack={this.handleBackPress}
+                    /> :
+                    <div id="release-mgt-content">
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="production">
+                                    <span>Production Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Production")}
+                                        </div>
+                                    </div>
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="beta">
+                                    <span>Beta Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Beta")}
+                                        </div>
+                                    </div>
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm="12">
+                                <div className="release" id="alpha">
+                                    <span>Alpha Releases</span>
+                                    <div className="release-content">
+                                        <div className="release-inner">
+                                            {this.getNoReleaseContent("Alpha")}
+                                        </div>
+                                    </div>
+                                </div>
+                            </Col>
+                        </Row>
+                    </div>
+                }
+            </div>
+        )
+    }
+}
+
+export default ReleaseManager;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.release-content {
+    height: 180px;
+    width: 95%;
+    border: dashed 1px #626262;
+    border-radius: 2%;
+    position: relative;
+    background-color: #e8e8e8;
+}
+
+.release-content:after {
+    content: "";
+    letter-spacing: 4px;
+}
+
+.release {
+    margin: 30px 10px 20px 30px;
+}
+
+.no-release-content {
+    position: absolute;
+    margin-top: 10px;
+    left: 40%;
+}
+
+.button-add:hover {
+    cursor: pointer;
+}
+
+.release-inner {
+    margin-top: 5%;
+}
+

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

@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import {withRouter} from 'react-router-dom';
+import {Col, Row} from "reactstrap";
+import './applicationView.css';
+
+/**
+ * Application view component.
+ * Shows the details of the application.
+ * */
+class ApplicationView extends Component {
+    constructor() {
+        super();
+        this.state = {
+            application: {}
+        }
+    }
+
+    componentWillReceiveProps(props, nextProps) {
+        this.setState({application: props.application});
+        console.log(props.application, nextProps)
+    }
+
+    componentDidMount() {
+        //TODO: Download image artifacts.
+    }
+
+    handleEdit() {
+        this.props.history.push("/assets/apps/edit/" + this.state.application.uuid);
+    }
+
+    render() {
+        const platform = this.state.application;
+        console.log(platform);
+
+        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>
+                            </Row>
+                            <Row>
+                                <span className="app-updated-date">Last updated on 2017-09-23</span>
+                            </Row>
+                        </Col>
+                    </Row>
+                </div>
+                <div id="application-view-row">
+                    <Row>
+                        <Col>
+                            <span className="app-install-count">2k Installs</span>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>Rating</Col>
+                        <Col>View in Store</Col>
+                    </Row>
+                </div>
+                <hr/>
+                <div id="application-view-row">
+                    <Row>
+                        <Col>
+                            <span><strong>Description: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>sdfjlkdsjfsjdfjsdf sfjdslkjfdsflkjdsfslkdjfl j</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Tags: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>[list of tags...]</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Release: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>Production</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <span><strong>Version: </strong></span>
+                        </Col>
+                        <Col>
+                            <p>v1.0</p>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withRouter(ApplicationView);

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+#application-view-content {
+    width: 100%;
+}
+
+#application-view-row {
+    margin: 10px 10px 20px 20px;
+}
+
+#app-icon {
+    height: 100px;
+    width: 100px;
+    border: solid 1px black;
+    border-radius: 50%;
+}
+
+.app-updated-date {
+    color: #888888;
+    font-style: italic;
+}
+
+.app-install-count {
+    font-style: italic;
+}
+
+.app-details-tbl {
+    outline: none;
+    border-color: #2196F3;
+}
+
+.app-details-tbl tr {
+    margin: 20px 0 0 0;
+}
+
+.app-details-tbl td {
+    margin-left: 10px;
+    max-width: 400px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx

@@ -1,194 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import Theme from '../../theme';
-import PropTypes from 'prop-types';
-import Badge from 'material-ui/Badge';
-import React, {Component} from 'react';
-import AppBar from 'material-ui/AppBar';
-import Drawer from 'material-ui/Drawer';
-import IconMenu from 'material-ui/IconMenu';
-import MenuItem from 'material-ui/MenuItem';
-import {withRouter} from 'react-router-dom';
-import AuthHandler from "../../api/authHandler";
-import FlatButton from 'material-ui/FlatButton';
-import IconButton from 'material-ui/IconButton';
-import {List, ListItem} from 'material-ui/List';
-import Apps from 'material-ui/svg-icons/navigation/apps';
-import Add from 'material-ui/svg-icons/content/add-circle';
-import Feedback from 'material-ui/svg-icons/action/feedback';
-import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
-import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
-import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-
-
-/**
- * Base Layout:
- * App bar
- * Left Navigation
- * Middle content.
- * */
-class BaseLayout extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            notifications: 0,
-            user: 'Admin'
-        };
-        this.scriptId = "basic-layout";
-        this.logout = this.logout.bind(this);
-    }
-
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId)
-    }
-
-    handleApplicationClick() {
-        this.handleHistory('/assets/apps');
-    }
-
-    handleOverviewClick() {
-        this.handleHistory('/overview');
-    }
-
-    handleApplicationCreateClick() {
-        this.handleHistory('/assets/apps/create');
-    }
-
-    handlePlatformClick() {
-        this.handleHistory('/assets/platforms');
-    }
-
-    handlePlatformCreateClick() {
-        this.handleHistory('/assets/platforms/create');
-    }
-
-    handleReviewClick() {
-        this.handleHistory('/assets/reviews');
-    }
-
-    /**
-     * The method to update the history.
-     * to: The URL to route.
-     * */
-    handleHistory(to) {
-        this.props.history.push(to);
-    }
-
-    logout(event, index, value) {
-        AuthHandler.logout();
-    }
-
-    render() {
-        return (
-
-            <div>
-                <AppBar
-                    title="App Publisher"
-                    iconElementRight={
-                        <div>
-                            <Badge
-                                badgeContent={this.state.notifications}
-                                secondary={true}
-                                badgeStyle={{top: 12, right: 12}}
-                            >
-                                <IconButton tooltip="Notifications">
-                                    <NotificationsIcon/>
-                                </IconButton>
-                            </Badge>
-                            <IconMenu
-                                iconButtonElement={<FlatButton
-                                    icon={<ActionAccountCircle/>}
-                                    label="sdfdsf"
-                                />}
-                                anchorOrigin={{horizontal: 'left', vertical: 'top'}}
-                                targetOrigin={{horizontal: 'left', vertical: 'top'}}
-                                onChange={this.logout}
-                            >
-                                <MenuItem value={0} primaryText="Logout" />
-                            </IconMenu>
-                            {/*<FlatButton*/}
-                                {/*icon={<ActionAccountCircle/>}*/}
-                                {/*onClick={() => {console.log("Clicked")}}*/}
-                                {/*label={this.props.user.getUserName()}*/}
-                            {/*/>*/}
-                        </div>
-                    }
-                />
-                <div>
-                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: '10%'}} open={true}>
-                        <List>
-                            <ListItem
-                                primaryText="Applications"
-                                leftIcon={<Apps/>}
-                                initiallyOpen={false}
-                                primaryTogglesNestedList={true}
-                                onClick={this.handleApplicationClick.bind(this)}
-                                nestedItems={[
-                                    <ListItem
-                                        key={1}
-                                        primaryText="Create"
-                                        onClick={this.handleApplicationCreateClick.bind(this)}
-                                        leftIcon={<Add/>}
-                                    />
-                                ]}
-                            />
-                            <ListItem
-                                primaryText="Platforms"
-                                leftIcon={<DevicesOther/>}
-                                initiallyOpen={false}
-                                primaryTogglesNestedList={true}
-                                onClick={this.handlePlatformClick.bind(this)}
-                                nestedItems={[
-                                    <ListItem
-                                        key={1}
-                                        primaryText="Create"
-                                        onClick={this.handlePlatformCreateClick.bind(this)}
-                                        leftIcon={<Add/>}
-                                    />
-                                ]}
-                            />
-                            <ListItem
-                                primaryText="Reviews"
-                                onClick={this.handleReviewClick.bind(this)}
-                                leftIcon={<Feedback/>}
-                            />
-                        </List>
-                    </Drawer>
-                </div>
-                <div className="basicLayoutDiv">
-                    {this.props.children}
-                </div>
-            </div>
-        );
-    }
-}
-
-BaseLayout.propTypes = {
-    children: PropTypes.element
-};
-
-export default withRouter(BaseLayout);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx

@@ -21,7 +21,7 @@ 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';
+import DataTable from '../UIComponents/DataTable/DataTable';
 import PlatformMgtApi from "../../api/platformMgtApi";
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/AppImage.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './appImage.css';
+
+/**
+ * Component for holding uploaded image.
+ * This component has the feature to remove selected image from the array.
+ * */
+class AppImage extends Component {
+
+    constructor() {
+        super();
+        this.removeImage = this.removeImage.bind(this);
+    }
+
+    /**
+     * Triggers the parent method to remove the selected image.
+     * @param event: The click event of the component.
+     * */
+    removeImage(event) {
+        event.preventDefault();
+        this.props.onRemove(event.target.id);
+    }
+
+    render() {
+        const {image, imageId} = this.props;
+        return (
+            <div className="image-container" style={this.props.imageStyles}>
+                <img src={image} style={{width: '100%'}} className="image" id={imageId}/>
+                <div className="btn-content">
+                    <i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
+                </div>
+            </div>
+        )
+    }
+}
+
+AppImage.propTypes = {
+    image: PropTypes.string,
+    imageId: PropTypes.string,
+    onRemove: PropTypes.func,
+    imageStyles: PropTypes.object
+};
+
+export default AppImage;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 5px;
+}
+
+.image {
+    opacity: 1;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    transition: .5s ease;
+    backface-visibility: hidden;
+}
+
+.btn-content {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-color: rgba(243, 243, 243, 0.43);
+    border-radius: 50%;
+    border: solid 1px #ffffff;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%)
+}
+
+.image-container:hover .image {
+    opacity: 0.3;
+}
+
+.image-container:hover .btn-content {
+    opacity: 1;
+}
+
+.close-btn {
+    color: #000000;
+    font-size: 16px;
+    padding: 20px 30px;
+}
+
+.close-btn:hover {
+    cursor: pointer;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import './chip.css';
+
+class Chip extends Component {
+
+    render() {
+        return (
+            <div className="chip">
+                {this.props.image?<img src={this.props.image} alt="Person" width="96" height="96" />:<div/>}
+                {this.props.text}
+                <span className="close-btn" >&times;</span>
+            </div>
+        )
+    }
+}
+
+export default Chip;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.chip {
+    display: inline-block;
+    padding: 0 25px;
+    height: 50px;
+    font-size: 16px;
+    line-height: 50px;
+    border-radius: 25px;
+    background-color: #f1f1f1;
+}
+
+.chip img {
+    float: left;
+    margin: 0 10px 0 -25px;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+}
+
+.close-btn {
+    padding-left: 10px;
+    color: #888;
+    font-weight: bold;
+    float: right;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.close-btn:hover {
+    color: #000;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import DataTableRow from './DataTableRow';
@@ -54,6 +54,7 @@ class DataTable extends Component {
     constructor() {
         super();
         this.handleRowClick = this.handleRowClick.bind(this);
+        this.handleBtnClick = this.handleBtnClick.bind(this);
         this.state = {
             data: [],
             headers: [],
@@ -75,6 +76,10 @@ class DataTable extends Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
+        if (!nextProps.data) {
+            this.setState({data: nextState.data});
+            return true;
+        }
         this.setState({data: nextProps.data});
         return true;
     }
@@ -87,6 +92,10 @@ class DataTable extends Component {
         this.props.handleRowClick(id);
     }
 
+    handleBtnClick(id) {
+        this.props.handleButtonClick(id);
+    }
+
     render() {
         const {data, headers} = this.state;
 
@@ -121,6 +130,7 @@ class DataTable extends Component {
                             <DataTableRow
                                 key={dataItem.id}
                                 dataItem={dataItem}
+                                handleButtonClick={this.handleBtnClick}
                                 handleClick={this.handleRowClick}
                             />
                         )

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx

@@ -16,10 +16,14 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
+import IconButton from 'material-ui/IconButton';
+import Create from 'material-ui/svg-icons/content/create'
 import {TableRow, TableRowColumn} from 'material-ui/Table';
+import Avatar from 'material-ui/Avatar';
+
 
 /**
  * Data table row component.
@@ -51,10 +55,17 @@ class DataTableRow extends Component {
     /**
      * Triggers the click event on the data table row.
      * */
-    handleClick() {
+    handleClick(event) {
+        event.stopPropagation();
         this.props.handleClick(this.state.dataItem.id);
     }
 
+    handleBtnClick(event) {
+        event.stopPropagation();
+        console.log(event.target['id'])
+        this.props.handleButtonClick(event.target['id']);
+    }
+
     render() {
         const {dataItem} = this.state;
         return (
@@ -62,6 +73,12 @@ class DataTableRow extends Component {
                 key={this.props.key}
                 onClick={this.handleClick.bind(this)}
             >
+                <TableRowColumn
+                    className="datatableRowColumn"
+                    key={Math.random()}
+                >
+                    <Avatar>{dataItem.name}</Avatar>
+                </TableRowColumn>
                 {Object.keys(dataItem).map((key) => {
                     if (key !== 'id') {
                         return (
@@ -71,11 +88,17 @@ class DataTableRow extends Component {
                             >
                                 {dataItem[key]}
                             </TableRowColumn>)
-                    } else {
-                        return <TableRowColumn key={key}/>
                     }
 
                 })}
+                <TableRowColumn
+                    className="datatableRowColumn"
+                    key={dataItem.id}
+                >
+                    <IconButton id={dataItem.id} onClick={this.handleBtnClick.bind(this)}>
+                        <Create id={dataItem.id}/>
+                    </IconButton>
+                </TableRowColumn>
             </TableRow>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/Drawer.jsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './drawer.css';
+import {Row} from "reactstrap";
+
+/**
+ * Custom React component for Application View.
+ * */
+class Drawer extends Component {
+
+    constructor() {
+        super();
+        this.closeDrawer = this.closeDrawer.bind(this);
+    }
+
+    /**
+     * Closes the drawer.
+     * */
+    closeDrawer() {
+        this.props.onClose();
+    }
+
+    render() {
+        return (
+            <div>
+                <div id="app-view" className="app-view-drawer" style={this.props.style}>
+                    <a onClick={this.closeDrawer} className="drawer-close-btn">&times;</a>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Drawer.propTypes = {
+    style: PropTypes.object,
+    children: PropTypes.node,
+    onClose: PropTypes.func
+};
+
+export default Drawer;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.app-view-drawer {
+    height: 100%; /* 100% Full-height */
+    width: 0; /* 0 width - change this with JavaScript */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Stay on top */
+    top: 5%;
+    right: 0%;
+    background-color: #b5b5b5;
+    overflow-x: hidden; /* Disable horizontal scroll */
+    padding-top: 60px; /* Place content 60px from the top */
+    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+    border: solid 1px black;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.app-view-drawer a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+    transition: 0.3s
+}
+
+
+/* Position and style the close button (top right corner) */
+.app-view-drawer .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+.drawer-close-btn {
+    height: 40px;
+    width: 30px;
+}
+
+.drawer-close-btn:hover {
+    cursor: pointer;
+    color: #818181;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+    transition: margin-left .5s;
+    padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+}
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/ImageUploader.jsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './imageUploader.css';
+import Dropzone from "react-dropzone";
+import {Row} from "reactstrap";
+
+
+class ImageUploader extends Component {
+    constructor() {
+        super();
+        this.setImages = this.setImages.bind(this);
+        this.state = {
+            images: []
+        }
+    }
+
+    setImages(images) {
+        this.props.setImages(images);
+    }
+
+    render() {
+        let {images, height, width, accepted, multiple, maxAmount} = this.props;
+        return (
+            <div id="screenshot-container">
+                <Row>
+                    {images.map((tile) => (
+                            <input type="image" src={tile[0].preview} onClick=""/>
+                        )
+                    )}
+                </Row>
+
+                {this.state.screenshots.length < maxAmount ?
+                    <Dropzone
+                        className="add-image"
+                        accept="image/jpeg, image/png"
+                        onDrop={(accepted, rejected) => {
+                            this.setImages(accepted);
+                        }}
+                    >
+                        <p className="add-image-symbol">+</p>
+                    </Dropzone> : <div/>}
+            </div>
+        );
+    }
+
+}
+
+ImageUploader.prototypes = {
+    height: PropTypes.string,
+    width: PropTypes.string,
+    accepted: PropTypes.array,
+    multiple: PropTypes.bool,
+    maxAmount: PropTypes.number,
+    setImages: PropTypes.func
+};
+
+
+export default ImageUploader;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationItem.jsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import {Col, Row} from "reactstrap";
+import './notification.css';
+
+class NotificationItem extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                <Row>
+                    <Col>
+                        <div className="notification-app-icon small">
+                            <img/>
+                        </div>
+                    </Col>
+                    <Col>
+                        <p>Your application, Facebook has been published.</p>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default NotificationItem;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/NotificationView.jsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import {Col, Row} from "reactstrap";
+import './notification.css';
+
+class NotificationView extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div id="notification-view-content">
+                <div>
+                    <Row id="notification-content">
+                        <Col xs="3">
+                            <div className="notification-app-icon medium">
+
+                            </div>
+                        </Col>
+                        <Col xs="9">
+                            <Row>
+                                <span><strong>Application Name</strong></span>
+                            </Row>
+                            <Row>
+                                <span>Version 1.0</span>
+                            </Row>
+                            <Row>
+                                <p id="app-reject-msg">Your Application was rejected</p>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <hr/>
+                    <Row id="notification-content">
+                        <Col xs="12">
+                            <p>Following validations were detected in your review submission.
+                               Please attend to them and re-submit</p>
+                            <ul>
+                                <li>sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd </li>
+                                <li>sdfkds jfdsljfklsdfjksdjlksdjdlkf</li>
+                                <li>sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf</li>
+                                <li>skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs</li>
+                                <li>ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf</li>
+                                <li> jsdljflksd jfklsdfskljfkjshf;ks ldj</li>
+                            </ul>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default NotificationView;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.notification-app-icon {
+    border-radius: 50%;
+    border: solid 1px black;
+}
+
+.small {
+    height: 50px;
+    width: 50px;
+}
+
+.medium {
+    height: 100px;
+    width: 100px;
+}
+
+#notification-view-content {
+    width: 50%;
+    border: solid 1px black;
+    margin: 0 auto;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+#notification-content {
+    margin: 20px 10px 20px 10px;
+}
+
+#app-reject-msg {
+    width: 100%;
+    height: 30px;
+    background-color: #888888;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/Switch.jsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, {Component} from 'react';
+import './switch.css';
+
+class Switch extends Component {
+
+    render() {
+        const {height, width} = this.props;
+        return (
+            <label className="switch">
+                <input type="checkbox" onChange={this.props.onChange}/>
+                <span className="slider round"></span>
+            </label>
+        )
+    }
+}
+
+export default Switch;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(16px);
+    -ms-transform: translateX(16px);
+    transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx

@@ -16,15 +16,10 @@
  * under the License.
  */
 
-import qs from 'qs';
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import Checkbox from 'material-ui/Checkbox';
-import TextField from 'material-ui/TextField';
 import {Redirect, Switch} from 'react-router-dom';
 import AuthHandler from '../../../api/authHandler';
-import RaisedButton from 'material-ui/RaisedButton';
+import {Button, Card, CardBlock, CardSubtitle, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap';
-import {Card, CardActions, CardTitle} from 'material-ui/Card';
 
 /**
  * The Login Component.
@@ -72,9 +67,10 @@ class Login extends Component {
      * Handles the username field change event.
      * */
     onUserNameChange(event, value) {
+        console.log(event.target.value);
         this.setState(
             {
-                userName: value
+                userName: event.target.value
             }
         );
     }
@@ -85,7 +81,7 @@ class Login extends Component {
     onPasswordChange(event, value) {
         this.setState(
             {
-                password: value
+                password: event.target.value
             }
         );
     }
@@ -136,43 +132,32 @@ class Login extends Component {
 
         if (!this.state.isLoggedIn) {
             return (
-                <div>
+                <div id="login-container">
                     {/*TODO: Style the components.*/}
+                    <Card id="login-card">
+                    <CardBlock>
+                        <CardTitle>WSO2 IoT APP Publisher</CardTitle>
+                        <Form onSubmit={this.handleLogin.bind(this)}>
+                            <FormGroup row>
+                                <Label for="userName" sm={2}>User Name:</Label>
+                                <Col sm={10}>
+                                    <Input type="text" name="userName" id="userName" placeholder="User Name" onChange={this.onUserNameChange.bind(this)}/>
+                                </Col>
 
-                    <Card>
+                            </FormGroup>
-                        <CardTitle title="WSO2 IoT App Publisher"/>
+                            <FormGroup row>
-                        <CardActions>
+                                <Label for="password" sm={2}>Password:</Label>
-                            <form onSubmit={this.handleLogin.bind(this)}>
+                                <Col sm={10}>
-                                <TextField
+                                    <Input type="password" name="text" id="password" placeholder="Password" onChange={this.onPasswordChange.bind(this)}/>
-                                    hintText="Enter the User Name."
+                                </Col>
-                                    id="username"
+                            </FormGroup>
-                                    errorText={this.state.errors["userNameError"]}
+                            <FormGroup check row>
-                                    floatingLabelText="User Name*"
+                                <Col sm={{ size: 10, offset: 2 }}>
-                                    floatingLabelFixed={true}
+                                    <Button type="submit" id="login-btn">Submit</Button>
-                                    value={this.state.userName}
+                                </Col>
-                                    onChange={this.onUserNameChange.bind(this)}
+                            </FormGroup>
-                                />
+                        </Form>
-                                <br/>
+                    </CardBlock>
-                                <TextField
-                                    hintText="Enter the Password."
-                                    id="password"
-                                    type="password"
-                                    errorText={this.state.errors["passwordError"]}
-                                    floatingLabelText="Password*"
-                                    floatingLabelFixed={true}
-                                    value={this.state.password}
-                                    onChange={this.onPasswordChange.bind(this)}
-                                />
-                                <br/>
-                                <Checkbox
-                                    label="Remember me."
-                                    onCheck={this.handleRememberMe.bind(this)}
-                                    checked={this.state.rememberMe}
-                                />
-                                <br/>
-                                <RaisedButton type="submit" label="Login"/>
-                            </form>
-                        </CardActions>
                     </Card>
                 </div>);
         } else {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js

@@ -18,14 +18,15 @@
 
 import Login from './User/Login/Login';
 import NotFound from './Error/NotFound';
-import BaseLayout from './Base/BaseLayout';
+import BaseLayout from './AppPublisherBase/BaseLayout';
 import PlatformCreate from './Platform/PlatformCreate';
 import PlatformListing from './Platform/PlatformListing';
-import ApplicationCreate from './Application/ApplicationCreate';
+import ApplicationCreate from './Application/Create/ApplicationCreate';
 import ApplicationListing from './Application/ApplicationListing';
+import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
 
 /**
  * Contains all UI components related to Application, Login and Platform
  */
 
-export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate};
+export {Login, BaseLayout, ApplicationCreate, ApplicationListing, PlatformListing, NotFound, PlatformCreate, ApplicationEdit};

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css

@@ -1,5 +1,238 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 body {
-  margin: 0;
+    width: 100%;
-  padding: 0;
+    font-family: sans-serif;
-  font-family: sans-serif;
+}
+
+#userName {
+    border-radius: 0;
+}
+
+#password {
+    border-radius: 0;
+}
+
+#login-btn {
+    border-radius: 0;
+    background-color: navy;
+    color: white;
+    cursor: pointer;
+}
+
+#login-container {
+    width: 50%;
+    margin: 0 auto
+}
+
+#login-card {
+    border-radius: 0;
+    background-color: #BaBaBa;
+}
+
+#container {
+    background-color: #ffffff;
+}
+
+#header-content {
+    height: 100px;
+    width: 100%;
+    margin: 0 10px 0 0;
+    background-color: #BDBDBD;
+    border-bottom: solid 2px;
+    position: fixed; /* Set the navbar to fixed position */
+    top: 0; /* Position the navbar at the top of the page */
+    z-index: 2;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+#application-content {
+    max-height: 800px;
+    margin-top: 150px;
+}
+
+#add-btn {
+    border-radius: 50%;
+    border: solid 2px;
+    position: absolute;
+    background-color: #BDBDBD;
+    left: 15px;
+    top: 75px;
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.add-btn.div {
+    position: relative;
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+#fw-api:before {
+    content: '\e601';
+}
+
+#btn {
+    background-color: #BDBDBD;
+    border-color: #BDBDBD;
+}
+
+#header-text {
+    font-size: 25px;
+    top: 10px;
+    margin-left: 10px;
+}
+
+#header-btn {
+    float: right;
+}
+
+#search-box {
+    float: right;
+}
+
+#search {
+    background-color: #BDBDBD;
+    left: 110px;
+    top: 20px;
+    height: 25px;
+    outline: none;
+    border: none;
+    border-bottom: solid 1px black;
+    border-radius: 0%;
+}
+
+#application-list {
+    margin-top: 20px;
+    transition: margin-right .5s;
+}
+
+#app-image-screenshot {
+    width: 300px;
+    height: 300px;
+}
+
+#app-image-icon {
+    width: 300px;
+    height: 300px;
+}
+
+#app-image-banner {
+    width: 400px;
+    height: 300px;
+}
+
+.applicationCreateBannerDropZone {
+    width: 300px;
+    height: 150px;
+    border-radius: 5%;
+    background-color: rgba(157, 159, 157, 0.53);
+    border: dashed #888888 2px;
+}
+
+.applicationCreateBannerp {
+    margin: 70px 40px 40px 150px;
+}
+
+
+.applicationCreateScreenshotDropZone {
+    width: 150px;
+    height: 150px;
+    margin: 0 5px 0 5px;
+    border-radius: 10%;
+    background-color: rgba(157, 159, 157, 0.53);
+    border: dashed #888888 2px;
+}
+
+.applicationCreateIconDropZone {
+    width: 150px;
+    height: 150px;
+    border-radius: 10%;
+    background-color: rgba(157, 159, 157, 0.53);
+    border: dashed #888888 2px;
+}
+
+.applicationCreateIconp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applicationCreateScreenshotp {
+    margin: 70px 40px 70px 70px;
+}
+
+#screenshot-container {
+    display: flex;
+    overflow-x: auto;
+    height: 200px;
+}
+
+#app-icon-container {
+    height: 300px;
+    overflow-x: auto;
+}
+
+#modal-body-content {
+    max-height: 700px;
+    overflow-y: auto;
+}
+
+#img-btn-screenshot {
+    margin: 0 5px 0 5px;
+}
+
+#app-create-modal {
+    max-width: 700px;
+    overflow-x: auto;
+}
+
+#store {
+    border: none;
+    border-bottom: solid #BDBDBD 1px;
+    border-radius: 0px;
+    width: 200px;
+}
+
+#version {
+    border: none;
+    border-bottom: solid #BDBDBD 1px;
+    border-radius: 0px;
+    width: 200px;
+}
+
+#app-release-switch-content {
+    display: flex;
+}
+
+#app-release-switch-label {
+    position: absolute;
+    float: left;
+}
+
+#app-release-switch-switch {
+    position: absolute;
+    right: 10px;
+}
+
+.image-sub-title {
+    font-style: italic;
+    font-size: 12px;
+    color: #818181;
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js

@@ -20,6 +20,8 @@ import './index.css';
 import React from 'react';
 import Publisher from './App';
 import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.css';
+import './css/font-wso2.css';
 import registerServiceWorker from './registerServiceWorker';
 
 /**

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js

@@ -16,6 +16,7 @@
  * under the License.
  */
 var path = require('path');
+import '!!style-loader!css-loader!src/css/font-wso2.css';
 
 const config = {
     entry: {
@@ -61,7 +62,7 @@ const config = {
     },
     resolve: {
         // you can now require('file') instead of require('file.coffee')
-        extensions: ['.jsx', '.js']
+        extensions: ['.jsx', '.js', '.ttf', '.woff', '.woff2', '.svg']
     }
 
 };