Changes as per the comments.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml

@@ -1,4 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<!--
+~ 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.
+-->
 <project xmlns="http://maven.apache.org/POM/4.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
@@ -9,18 +26,9 @@
         <artifactId>application-mgt</artifactId>
         <version>3.0.46-SNAPSHOT</version>
     </parent>
-
     <artifactId>org.wso2.carbon.device.application.mgt.publisher.ui</artifactId>
     <version>3.0.46-SNAPSHOT</version>
 
-    <dependencies>
-        <!--<dependency>-->
-        <!--<groupId>org.wso2.carbon.apimgt</groupId>-->
-        <!--<artifactId>org.wso2.carbon.apimgt.publisher.feature</artifactId>-->
-        <!--<type>zip</type>-->
-        <!--</dependency>-->
-    </dependencies>
-
     <build>
         <plugins>
             <plugin>
@@ -77,36 +85,6 @@
                             </arguments>
                         </configuration>
                     </execution>
-                    <!-- 'npm run clean' which is run in clean lifecycle needs 'rimraf' node module.
-                     Make sure it is installed  -->
-                    <!--<execution>
-                        <id>npm install rimraf (clean)</id>
-                        <goals>
-                            <goal>exec</goal>
-                        </goals>
-                        <phase>pre-clean</phase>
-                        <configuration>
-                            <executable>${npm.executable}</executable>
-                            <arguments>
-                                <argument>install</argument>
-                                <argument>rimraf</argument>
-                            </arguments>
-                        </configuration>
-                    </execution>-->
-                    <!--<execution>
-                        <id>npm run clean (clean)</id>
-                        <goals>
-                            <goal>exec</goal>
-                        </goals>
-                        <phase>clean</phase>
-                        <configuration>
-                            <executable>${npm.executable}</executable>
-                            <arguments>
-                                <argument>run</argument>
-                                <argument>clean</argument>
-                            </arguments>
-                        </configuration>
-                    </execution>-->
                     <execution>
                         <id>npm run build (compile)</id>
                         <goals>
@@ -122,21 +100,6 @@
                             </arguments>
                         </configuration>
                     </execution>
-                    <!--<execution>-->
-                    <!--<id>npm run test (test)</id>-->
-                    <!--<goals>-->
-                    <!--<goal>exec</goal>-->
-                    <!--</goals>-->
-                    <!--<phase>test</phase>-->
-                    <!--<configuration>-->
-                    <!--<workingDirectory>${basedir}/src/main/resources/publisher</workingDirectory>-->
-                    <!--<skip>${maven.test.skip}</skip>-->
-                    <!--<executable>${npm.executable}</executable>-->
-                    <!--<arguments>-->
-                    <!--<argument>test</argument>-->
-                    <!--</arguments>-->
-                    <!--</configuration>-->
-                    <!--</execution>-->
                 </executions>
                 <configuration>
                     <workingDirectory>${npm.working.dir}</workingDirectory>
@@ -165,5 +128,4 @@
         <npm.build.command>build_prod</npm.build.command>
         <npm.working.dir>./src/main/</npm.working.dir>
     </properties>
-    
 </project>

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

@@ -15,9 +15,11 @@
     "latest-version": "^3.1.0",
     "material-ui": "^0.19.0",
     "material-ui-datatables": "^0.18.2",
+    "prop-types": "^15.5.10",
     "qs": "^6.5.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-dropzone": "^4.1.0",
     "react-images-uploader": "^1.1.0",
     "react-material-ui-form-validator": "^0.5.0",
     "react-modal": "^2.2.2",

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

@@ -1,4 +1,21 @@
 <!doctype html>
+<!--
+~ Copyright (c) 2014, 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.
+-->
 <html lang="en">
   <head>
     <meta charset="utf-8">

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

@@ -20,15 +20,26 @@ import './App.css'
 import React, {Component} from 'react';
 import createHistory from 'history/createHashHistory';
 import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
-import {BaseLayout, Create, Login, NotFound, PublisherOverview} from './components'
+import {BaseLayout, ApplicationCreate, Login, NotFound, PublisherOverview, PlatformCreate} from './components'
 
 const history = createHistory({basename: '/publisher'});
 
+/**
+ * This component defines the layout and the routes for the app.
+ * All the content will be loaded inside the Base component.
+ * The base component includes the Core layout and the routers according to which the content will be displayed.
+ *
+ * The Router and Route components.
+ *     The Router and Route is used for navigation.
+ *     We specify the component which needs to be rendered for an URL.
+ *     Ex: When navigate to publisher/overview, the overview component will be rendered inside the main layout.
+ * */
+
 class Base extends Component {
     constructor() {
         super();
         this.state = {
-            user: "s"
+            user: "admin"
         }
     }
 
@@ -40,15 +51,15 @@ class Base extends Component {
                         <Switch>
                             <Redirect exact path={"/"} to={"/overview"}/>
                             <Route exact path={"/overview"} component={PublisherOverview}/>
-                            {/*<Route path={"/assets/apps"} component={}/>*/}
-                            {/*<Route path={"/assets/apps/:app"} component={}/>*/}
-                            <Route path={"/assets/apps/create"} component={Create}/>
-                            {/*<Route path={"/assets/apps/edit/:app"} component="app edit"/>*/}
-                            <Route path={"/assets/platforms/:platform"}/>
-                            <Route path={"/assets/platforms/create"}/>
-                            <Route path={"/assets/platforms/edit/:platform"}/>
-                            <Route path={"/assets/reviews"}/>
-                            <Route path={"/assets/reviews/:review"}/>
+                            <Route exact path={"/assets/apps/create"} component={ApplicationCreate}/>
+                            <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
+                            <Route exact path={"/assets/apps"} />
+                            <Route exact path={"/assets/apps/:app"} />
+                            <Route exact path={"/assets/apps/edit/:app"} />
+                            <Route exact path={"/assets/platforms/:platform"}/>
+                            <Route exact path={"/assets/platforms/edit/:platform"}/>
+                            <Route exact path={"/assets/reviews"}/>
+                            <Route exact path={"/assets/reviews/:review"}/>
                             <Route component={NotFound}/>
                         </Switch>
                     </BaseLayout>
@@ -60,6 +71,9 @@ class Base extends Component {
     }
 }
 
+/**
+ * This component is referred by the index.js to initiate the application.
+ * */
 class Publisher extends Component {
     render() {
         return (
@@ -76,4 +90,8 @@ class Publisher extends Component {
     }
 }
 
+Publisher.propTypes = {
+    user: Object
+};
+
 export default Publisher;

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

@@ -25,7 +25,16 @@ import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
 
-class Create extends Component {
+
+/**
+ * The App Create Component.
+ *
+ * Application creation is handled through a Wizard. (We use Material UI Stepper.)
+ *
+ * In each step, data will be set to the state separately.
+ * When the wizard is completed, data will be arranged and sent to the api.
+ * */
+class ApplicationCreate extends Component {
     constructor() {
         super();
         this.setStepData.bind(this);
@@ -42,6 +51,9 @@ class Create extends Component {
         };
     }
 
+    /**
+     * Handles next button click event.
+     * */
     handleNext = () => {
         const {stepIndex} = this.state;
         this.setState({
@@ -50,14 +62,25 @@ class Create extends Component {
         });
     };
 
+    /**
+     * Handles form submit.
+     * */
     handleSubmit = () => {
         console.log(this.state.stepData);
     };
 
+    /**
+     * Handles cancel button click event.
+     * This will show a confirmation dialog to cancel the application creation process.
+     * */
     handleCancel = () => {
         this.setState({isDialogOpen: true});
     };
 
+    /**
+     * Handled [ < Prev ] button click.
+     * This clears the data in the current step and returns to the previous step.
+     * */
     handlePrev = () => {
         const {stepIndex} = this.state;
         if (stepIndex > 0) {
@@ -66,6 +89,9 @@ class Create extends Component {
         }
     };
 
+    /**
+     * Saves form data in each step in to the state.
+     * */
     setStepData = (step, data) => {
         console.log(step, data, this.state.stepData);
         let tmpStepData = this.state.stepData;
@@ -83,14 +109,31 @@ class Create extends Component {
         this.setState({stepData: tempData});
     };
 
+    /**
+     * Handles the Yes button in app creation cancellation dialog.
+     * Clears all the form data and reset the wizard.
+     * */
     handleYes = () => {
         this.setState({finished: false, stepIndex: 0, stepData: [], isDialogOpen: false});
     };
 
+    /**
+     * Handles No button in app creation cancellation dialog.
+     * Returns to the same step.
+     * */
     handleNo = () => {
         this.setState({isDialogOpen: false});
     };
 
+    /**
+     * Defines all the Steps in the stepper. (Wizard)
+     *
+     * Extension Point: If any extra steps needed, follow the instructions below.
+     *                   1. Create the required form ./Forms directory.
+     *                   2. Add defined case statements.
+     *                   3. Define the Step in render function.
+     *
+     * */
     getStepContent(stepIndex) {
         switch (stepIndex) {
             case 0:
@@ -117,6 +160,9 @@ class Create extends Component {
         const {finished, stepIndex} = this.state;
         const contentStyle = {margin: '0 16px'};
 
+        /**
+         * Defines the dialog box actions. [Yes][No]
+         * */
         const actions = [
             <FlatButton
                 label="Yes"
@@ -156,7 +202,7 @@ class Create extends Component {
                                 {finished ? (
                                     <div>
                                         <p>Create App?</p>
-                                        <form onSubmit={this.handleSubmit}>
+                                        <form>
                                             <RaisedButton primary={true} label="Create" onClick={this.handleSubmit}/>
                                             <FlatButton label="Cancel" onClick={this.handleCancel}/>
                                         </form>
@@ -182,4 +228,4 @@ class Create extends Component {
     }
 }
 
-export default withRouter(Create);
+export default withRouter(ApplicationCreate);

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

@@ -15,3 +15,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import React, {Component} from 'react';
+import {withRouter} from 'react-router-dom';
+
+
+/**
+ * Application List Component.
+ * */
+class ApplicationListing extends Component{
+
+}
+
+export default withRouter(ApplicationListing);

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

@@ -15,3 +15,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import React, {Component} from 'react';
+import {withRouter} from 'react-router-dom';
+
+/**
+ * Application view component.
+ * Shows the details of the application.
+ * */
+class ApplicationView extends Component{
+
+}
+
+export default withRouter(ApplicationView);

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

@@ -23,6 +23,19 @@ import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 
+/**
+ * The first step of the application creation wizard.
+ * This contains following components:
+ *      * Application Title
+ *      * Store Type
+ *      * Application Platform
+ *
+ * Parent Component: Create
+ * Props:
+ *      1. handleNext: {type: function, Invokes handleNext function of parent component}
+ *      2. setData : {type: function, Sets current form data to the state of the parent component}
+ *      3. removeData: {type: function, Invokes the removeStepData function click of parent}
+ * */
 class Step1 extends Component {
     constructor() {
         super();
@@ -35,34 +48,47 @@ class Step1 extends Component {
         };
     }
 
+    /**
+     * Invokes the handleNext function in Create component.
+     * */
     handleNext = () => {
         this.props.handleNext();
     };
 
+    /**
+     * Persist the current form data to the state.
+     * */
     setStepData() {
         this.props.setData("step1", {step: "Dfds"});
         this.handleNext.bind(this);
     }
 
+    /**
+     * Handles Next button click.
+     *  Validates the form.
+     *  Sets the data to the state.
+     *  Invokes the handleNext method of Create component.
+     * */
     handleClick() {
         this.setStepData();
         this.handleNext();
     }
 
-    handlePrev() {
-        this.props.handlePrev();
-    }
-
+    /**
+     * Triggers when changing the Platform selection.
+     * */
     onChangePlatform = (event, index, value) => {
         this.setState({platform: value});
     };
 
+    /**
+     * Triggers when changing the Store selection.
+     * */
     onChangeStore = (event, index, value) => {
         this.setState({store: value});
     };
 
     render() {
-        const {finished, stepIndex} = this.state;
         const contentStyle = {margin: '0 16px'};
         return (
             <div>
@@ -94,13 +120,10 @@ class Step1 extends Component {
                                 <MenuItem value={3} primaryText="Web"/>
                             </SelectField>
                         </div>
+
+                        <br/>
+                        <br/>
                         <div style={{marginTop: 12}}>
-                            <FlatButton
-                                label="< Back"
-                                disabled={true}
-                                onClick={this.handlePrev.bind(this)}
-                                style={{marginRight: 12}}
-                            />
                             <RaisedButton
                                 label="Next >"
                                 primary={true}

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

@@ -24,6 +24,27 @@ import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 
+/**
+ * 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();
@@ -45,6 +66,11 @@ class Step2 extends Component {
 
     }
 
+    /**
+     * 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) {
@@ -54,33 +80,43 @@ class Step2 extends Component {
         }
     }
 
+    /**
+     *
+     * */
     handleTagChange(event) {
         let defaultValue = this.state.defValue;
         defaultValue = event.target.value;
         this.setState({defValue: defaultValue})
     }
 
+    /**
+     * Invokes the handleNext function in Create component.
+     * */
     handleNext() {
         this.props.handleNext();
     }
 
+    /**
+     * Invokes the handlePrev function in Create component.
+     * */
     handlePrev() {
         this.props.handlePrev();
     }
 
-
+    /**
+     * Handles Chip delete function.
+     * Removes the tag from state.tags
+     * */
     handleRequestDelete = (key) => {
-        if (key === 3) {
-            alert('Why would you want to delete React?! :)');
-            return;
-        }
-
         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) {
         console.log(data);
         return (
@@ -143,8 +179,14 @@ class Step2 extends Component {
                         >
                             <MenuItem value={1} primaryText="Business"/>
                         </SelectField> <br/>
+                        {/*Platform Specific Properties.*/}
+                        <div style={{border: '1px'}}>
+                            fdfdfd
+                        </div>
                     </div>
 
+                    <br />
+                    <br />
                     <div style={{marginTop: 12}}>
                         <FlatButton
                             label="< Back"

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

@@ -24,6 +24,28 @@ import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 
+/**
+ * The Third step of application create wizard. {Application Release Step}
+ * This step is not compulsory.
+ *
+ * When click finish, user will prompt to confirm the application creation.
+ * User can go ahead and create the app or cancel.
+ *
+ * This contains following components:
+ *      * Toggle to select application release. Un-hides the Application Release form.
+ *
+ *     Application Release Form.
+ *      * Release Channel
+ *      * Application Version
+ *      * Upload component for application.
+ *
+ * Parent Component: Create
+ * Props:
+ *      * handleFinish : {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();
@@ -33,14 +55,24 @@ class Step3 extends Component {
         }
     }
 
+    /**
+     * Handles finish button click.
+     * This invokes handleNext function in parent component.
+     * */
     handleFinish() {
         this.props.handleFinish();
     }
 
+    /**
+     * Invokes Prev button click.
+     * */
     handlePrev() {
         this.props.handlePrev();
     }
 
+    /**
+     * Handles release application selection.
+     * */
     handleToggle() {
         let hide = this.state.showForm;
         this.setState({showForm: !hide});
@@ -60,7 +92,7 @@ class Step3 extends Component {
                     />
 
                     {/*If toggle is true, the release form will be shown.*/}
-                    {!this.state.showForm ? <div></div> : <div>
+                    {!this.state.showForm ? <div/> : <div>
                         <SelectField
                             floatingLabelText="Select Release Channel*"
                             value={this.state.releaseChannel}

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

@@ -31,7 +31,6 @@ 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

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

@@ -17,22 +17,19 @@
  */
 import React, {Component} from 'react';
 
+/**
+ * Error page.
+ * */
 class Error extends Component {
 
     constructor() {
         super();
     }
 
-    componentWillMount() {
-        console.log("In Crate")
-    }
-
     render() {
-
         return (
-
             <div>
-               404 not found
+                404 not found
             </div>
         );
     }

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

@@ -17,6 +17,13 @@
  */
 import React, {Component} from 'react';
 
+/**
+ *
+ * ***NEW***
+ * The Publisher overview component.
+ * This component could be used to view app analytics.
+ * i.e number of overall downloads, ratings ect.
+ * */
 class PublisherOverview extends Component {
 
     constructor() {
@@ -24,7 +31,6 @@ class PublisherOverview extends Component {
     }
 
     componentWillMount() {
-        console.log("In Crate")
     }
 
     render() {

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Platform Create component
+ * */
+class PlatformCreate extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Create Platform
+            </div>
+        );
+    }
+}
+
+export default PlatformCreate;

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Platform Listing component.
+ * */
+class PlatformListing extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Platform View
+            </div>
+        );
+    }
+}
+
+export default PlatformListing;

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Platform view component.
+ * */
+class PlatformView extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Platform View
+            </div>
+        );
+    }
+}
+
+export default PlatformView;

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Review Listing.
+ * */
+class ReviewListing extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Reviews List
+            </div>
+        );
+    }
+}
+
+export default ReviewListing;

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Review details view.
+ * */
+class ReviewView extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Review
+            </div>
+        );
+    }
+}
+
+export default ReviewView;

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

@@ -15,3 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, {Component} from 'react';
+
+/**
+ * Error page.
+ * */
+class DataTable extends Component {
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                Data Table
+            </div>
+        );
+    }
+}
+
+export default DataTable;

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

@@ -1,17 +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.
- */

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

@@ -26,6 +26,15 @@ import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
 
 //todo: remove the {TextValidator, ValidatorForm} and implement it manually.
 
+
+/**
+ * The Login Component.
+ *
+ * This component contains the Login form and methods to handle field change events.
+ * The user name and password will be set to the state and sent to the api.
+ *
+ * If the user is already logged in, it will redirect to the last point where the user was.
+ * */
 class Login extends Component {
     constructor() {
         super();
@@ -53,6 +62,9 @@ class Login extends Component {
         event.preventDefault();
     }
 
+    /**
+     * Handles the username field change event.
+     * */
     onUserNameChange(event) {
         this.setState(
             {
@@ -61,6 +73,9 @@ class Login extends Component {
         );
     }
 
+    /**
+     * Handles the password field change event.
+     * */
     onPasswordChange(event) {
         this.setState(
             {
@@ -69,12 +84,15 @@ class Login extends Component {
         );
     }
 
-    rememberMe() {
+    /**
+     * Handles the remember me check.
+     * */
+    handleRememberMe() {
         this.setState(
             {
                 rememberMe: !this.state.rememberMe
             }
-        )
+        );
     }
 
     render() {
@@ -87,13 +105,11 @@ class Login extends Component {
 
                     <Card>
                         <CardTitle title="WSO2 IoT App Publisher"/>
-
                         <CardActions>
                             <ValidatorForm
                                 ref="form"
                                 onSubmit={this.handleLogin.bind(this)}
                                 onError={errors => console.log(errors)}>
-
                                 <TextValidator
                                     floatingLabelText="User Name"
                                     floatingLabelFixed={true}
@@ -116,12 +132,11 @@ class Login extends Component {
                                 />
                                 <br/>
                                 <Checkbox label="Remember me."
-                                          onCheck={this.rememberMe.bind(this)}
+                                          onCheck={this.handleRememberMe.bind(this)}
                                           checked={this.state.rememberMe}/>
                                 <br/>
                                 <RaisedButton type="submit" label="Login"/>
                             </ValidatorForm>
-
                         </CardActions>
                     </Card>
                 </div>);
@@ -132,7 +147,6 @@ class Login extends Component {
                 </Switch>
             );
         }
-
     }
 }
 

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

@@ -16,14 +16,15 @@
  * under the License.
  */
 
-import Login from './User/Login/Login'
-import BaseLayout from './Base/BaseLayout'
-import Create from './Application/Create'
-import NotFound from './Error/NotFound'
-import PublisherOverview from './Overview/PublisherOverview'
+import Login from './User/Login/Login';
+import NotFound from './Error/NotFound';
+import BaseLayout from './Base/BaseLayout';
+import PlatformCreate from './Platform/PlatformCreate';
+import PublisherOverview from './Overview/PublisherOverview';
+import ApplicationCreate from './Application/ApplicationCreate';
 
 /**
  * Contains all UI components related to Application, Login and Platform
  */
 
-export {Login, BaseLayout, Create, NotFound, PublisherOverview};
+export {Login, BaseLayout, ApplicationCreate, NotFound, PublisherOverview, PlatformCreate};

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

@@ -16,12 +16,15 @@
  * under the License.
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
+import React from 'react';
 import Publisher from './App';
+import ReactDOM from 'react-dom';
 import registerServiceWorker from './registerServiceWorker';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
+/**
+ * This is the base js file of the app. All the content will be rendered in the root element.
+ * */
 ReactDOM.render(<MuiThemeProvider><Publisher/></MuiThemeProvider>, document.getElementById('root'));
 registerServiceWorker();

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

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export class ApplicationStore {};

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

@@ -15,3 +15,4 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+export class PlatformStore{};

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

@@ -15,3 +15,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+export class ReviewStore{};

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

@@ -15,3 +15,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import ReviewStore from './ReviewStore';
+import PlatformStore from './PlatformStore';
+import ApplicationStore from './ApplicationStore';
+
+
+export {ApplicationStore, PlatformStore, ReviewStore};

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

@@ -1,3 +1,20 @@
+/*
+ * 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.
+ */
 var path = require('path');
 
 const config = {