Added prop types and started creating the data table component.

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

@@ -16,11 +16,12 @@
  * under the License.
  */
 
-import './App.css'
+import './App.css';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import createHistory from 'history/createHashHistory';
 import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
-import {BaseLayout, ApplicationCreate, Login, NotFound, PublisherOverview, PlatformCreate} from './components'
+import {BaseLayout, ApplicationCreate, ApplicationListing, Login, NotFound, PublisherOverview, PlatformCreate} from './components'
 
 const history = createHistory({basename: '/publisher'});
 
@@ -51,9 +52,9 @@ class Base extends Component {
                         <Switch>
                             <Redirect exact path={"/"} to={"/overview"}/>
                             <Route exact path={"/overview"} component={PublisherOverview}/>
+                            <Route exact path={"/assets/apps"} component={ApplicationListing}/>
                             <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"}/>
@@ -90,8 +91,6 @@ class Publisher extends Component {
     }
 }
 
-Publisher.propTypes = {
+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

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Dialog from 'material-ui/Dialog';
 import {withRouter} from 'react-router-dom';
@@ -228,4 +229,6 @@ class ApplicationCreate extends Component {
     }
 }
 
+ApplicationCreate.propTypes = {};
+
 export default withRouter(ApplicationCreate);

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

@@ -16,10 +16,10 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 
@@ -137,4 +137,10 @@ class Step1 extends Component {
     }
 }
 
+Step1.propTypes = {
+    handleNext: PropTypes.func,
+    setData: PropTypes.func,
+    removeData: PropTypes.func
+};
+
 export default Step1;

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

@@ -16,7 +16,9 @@
  * 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 TextField from 'material-ui/TextField';
@@ -51,7 +53,8 @@ class Step2 extends Component {
         this.state = {
             tags: [],
             defValue: "",
-            category: 1
+            category: 1,
+            errors: {}
         };
 
         this.styles = {
@@ -63,7 +66,6 @@ class Step2 extends Component {
                 flexWrap: 'wrap',
             },
         };
-
     }
 
     /**
@@ -138,17 +140,21 @@ class Step2 extends Component {
                     <div>
                         <TextField
                             hintText="Enter a title for your application."
+                            errorText={this.state.errors["title"]}
                             floatingLabelText="Title*"
                             floatingLabelFixed={true}
                         /><br/>
                         <TextField
                             hintText="Enter a short description for your application."
+                            errorText={this.state.errors["shortDesc"]}
                             floatingLabelText="Short Description*"
                             floatingLabelFixed={true}
                             multiLine={true}
                             rows={2}
+
                         /><br/>
                         <TextField
+                            errorText={this.state.errors["description"]}
                             hintText="Enter the description."
                             floatingLabelText="Description*"
                             floatingLabelFixed={true}
@@ -157,10 +163,11 @@ class Step2 extends Component {
                         /><br/>
                         <TextField
                             hintText="Select the application visibility"
-                            floatingLabelText="Visibility*"
+                            floatingLabelText="Visibility"
                             floatingLabelFixed={true}
                         /><br/>
                         <TextField
+                            errorText={this.state.errors["tags"]}
                             hintText="Enter application tags.."
                             floatingLabelText="Tags*"
                             floatingLabelFixed={true}
@@ -180,9 +187,27 @@ class Step2 extends Component {
                             <MenuItem value={1} primaryText="Business"/>
                         </SelectField> <br/>
                         {/*Platform Specific Properties.*/}
-                        <div style={{border: '1px'}}>
+                        <div style={{border: 'solid #BDBDBD 1px'}}>
-                            fdfdfd
+                            <p style={{color:'#BDBDBD'}}>Platform Specific Properties</p>
-                        </div>
+                        </div><br/>
+                        <div>
+                            <p style={{color:'#BDBDBD'}}>Screenshots*:</p>
+                            <Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
+                                <p style={{margin: '40px 40px 40px 50px'}}>+</p>
+                            </Dropzone>
+                        </div><br/>
+                        <div>
+                            <p style={{color:'#BDBDBD'}}>Banner*:</p>
+                            <Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
+                                <p style={{margin: '40px 40px 40px 50px'}}>+</p>
+                            </Dropzone>
+                        </div><br/>
+                        <div>
+                            <p style={{color:'#BDBDBD'}}>Icon*:</p>
+                            <Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
+                                <p style={{margin: '40px 40px 40px 50px'}}>+</p>
+                            </Dropzone>
+                        </div><br/>
                     </div>
 
                     <br />
@@ -206,4 +231,11 @@ class Step2 extends Component {
     }
 }
 
+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/Forms/Step3.js

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Toggle from 'material-ui/Toggle';
 import MenuItem from 'material-ui/MenuItem';
@@ -51,7 +52,8 @@ class Step3 extends Component {
         super();
         this.state = {
             showForm: false,
-            releaseChannel: 1
+            releaseChannel: 1,
+            errors: {}
         }
     }
 
@@ -78,7 +80,6 @@ class Step3 extends Component {
         this.setState({showForm: !hide});
     }
 
-
     render() {
         const contentStyle = {margin: '0 16px'};
         return (
@@ -90,7 +91,6 @@ class Step3 extends Component {
                         onToggle={this.handleToggle.bind(this)}
                         defaultToggled={this.state.showForm}
                     />
-
                     {/*If toggle is true, the release form will be shown.*/}
                     {!this.state.showForm ? <div/> : <div>
                         <SelectField
@@ -105,6 +105,7 @@ class Step3 extends Component {
                         <TextField
                             hintText="1.0.0"
                             floatingLabelText="Version*"
+                            errorText={this.state.errors["title"]}
                             floatingLabelFixed={true}
                         /><br/>
                     </div>}
@@ -128,4 +129,11 @@ class Step3 extends Component {
     }
 }
 
+Step3.propTypes = {
+    handleFinish: 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/Base/BaseLayout.js

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import Badge from 'material-ui/Badge';
 import React, {Component} from 'react';
 import AppBar from 'material-ui/AppBar';
@@ -161,4 +162,8 @@ class BaseLayout extends Component {
 
 }
 
+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/PlatformCreate.js

@@ -15,24 +15,163 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
+import Toggle from 'material-ui/Toggle';
+import MenuItem from 'material-ui/MenuItem';
+import Close from 'material-ui/svg-icons/navigation/close';
+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 {Card, CardActions, CardTitle} from 'material-ui/Card';
+import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
 
 /**
- * Platform Create component
+ * Platform Create component.
+ * Contains following components:
+ *      * Platform Name
+ *      * Platform Description
+ *      * Platform Icon
+ *      * Whether the platform needs an app to be installed.
+ *      * Whether the platform is enabled by default.
+ *      * Whether the platform is shared with tenants.
  * */
 class PlatformCreate extends Component {
 
     constructor() {
         super();
+        this.state = {
+            enabled: true,
+            allTenants: false,
+            files: [],
+            platformProperties: [{key:"Enabled", value: "Boolean"}, {key:"Access Token", value:"String"}]
+        }
+    }
+
+    handleToggle(event) {
+        switch (event.target.id) {
+            case "enabled" : {
+                let enabled = this.state.enabled;
+                this.setState({enabled: !enabled});
+                break;
+            }
+            case "tenant" : {
+                let allTenants = this.state.allTenants;
+                this.setState({allTenants: !allTenants});
+                break;
+            }
+        }
+    }
+
+    removeProperty(p) {
+        let properties = this.state.platformProperties;
+        properties.splice(properties.indexOf(p), 1);
+        this.setState({platformProperties: properties});
+    }
+
+    addProperty() {
+        let property = {key: Math.random(), value: "Temp Prop"};
+        let properties = this.state.platformProperties;
+        properties.push(property);
+        this.setState({platformProperties: properties});
     }
 
     render() {
+        console.log(this.state.platformProperties);
         return (
+            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+                <Card>
+                    <CardTitle title="Create Platform"/>
+
+                    {/**
+                     * The stepper goes here.
+                     */}
+                    <CardActions>
+                        <div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
+                            <form>
+                                <TextField
+                                    hintText="Enter the Platform Name."
+                                    floatingLabelText="Name*"
+                                    floatingLabelFixed={true}
+                                /><br/>
+                                <TextField
+                                    hintText="Enter the Platform Description."
+                                    floatingLabelText="Description*"
+                                    floatingLabelFixed={true}
+                                    multiLine={true}
+                                    rows={2}
+                                /><br/><br/>
+                                <Toggle
+                                    id="tenant"
+                                    label="Shared with all Tenants"
+                                    labelPosition="right"
+                                    onToggle={this.handleToggle.bind(this)}
+                                    defaultToggled={this.state.allTenants}
+                                /> <br/>
+                                <Toggle
+                                    id="enabled"
+                                    label="Enabled"
+                                    labelPosition="right"
+                                    onToggle={this.handleToggle.bind(this)}
+                                    defaultToggled={this.state.enabled}
+                                /> <br/>
                                 <div>
-                Create Platform
+                                    <p style={{color: '#BDBDBD'}}>Platform Properties</p>
+                                    <div id="property-container">
+                                            {this.state.platformProperties.map((p) => {
+                                                return <div key={p.key}>{p.key} : {p.value}
+                                                    <IconButton onClick={this.removeProperty.bind(this, p)}>
+                                                        <Close style={{height:'10px', width:'10px'}}/>
+                                                    </IconButton>
+                                                </div>})}
+                                    </div>
+                                    <TextField
+                                        hintText=""
+                                        floatingLabelText="Platform Property*"
+                                        floatingLabelFixed={true}
+                                    /> <em/>
+                                    <SelectField
+                                        floatingLabelText="Property Type"
+                                        value={this.state.store}
+                                        floatingLabelFixed={true}>
+                                        <MenuItem value={1} primaryText="String"/>
+                                        <MenuItem value={2} primaryText="Number"/>
+                                        <MenuItem value={3} primaryText="Boolean"/>
+                                        <MenuItem value={4} primaryText="File"/>
+                                    </SelectField>
+                                    <IconButton onClick={this.addProperty.bind(this)}>
+                                        <AddCircleOutline/>
+                                    </IconButton>
+                                    <br/>
+                                </div>
+                                <div>
+                                    <p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
+                                    <Dropzone style={{width: '100px', height: '100px', border: 'dashed #BDBDBD 1px'}}>
+                                        <p style={{margin: '40px 40px 40px 50px', color: '#BDBDBD'}}>+</p>
+                                    </Dropzone>
+                                </div>
+                                <br/>
+                                <RaisedButton primary={true} label="Create"/>
+                                <FlatButton label="Cancel"/>
+                            </form>
+                        </div>
+                    </CardActions>
+                </Card>
             </div>
         );
     }
 }
 
+PlatformCreate.prototypes = {
+    enabled: PropTypes.bool,
+    allTenants: PropTypes.bool,
+    files: PropTypes.array,
+    platformProperties: PropTypes.object,
+    handleToggle: PropTypes.func
+};
+
 export default PlatformCreate;

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

@@ -15,8 +15,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {Component} from 'react';
 
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {Table, TableBody} from 'material-ui/Table';
+import DataTableHeader from './DataTableHeader';
+import DataTableRow from './DataTableRow';
 /**
  * Error page.
  * */
@@ -28,11 +32,23 @@ class DataTable extends Component {
 
     render() {
         return (
-            <div>
+            <Table>
-                Data Table
+                <DataTableHeader>
-            </div>
+                    {this.props.headers.map((header) => {
+
+                    })}
+                </DataTableHeader>
+                <TableBody>
+
+                </TableBody>
+            </Table>
         );
     }
 }
 
+DataTable.prototypes = {
+    data: PropTypes.arrayOf(Object),
+    headers: PropTypes.arrayOf(String)
+};
+
 export default DataTable;

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

@@ -0,0 +1,34 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+class DataTableHeader extends Component {
+
+}
+
+DataTableHeader.prototypes = {
+    /*sortable : bool
+    * text: string (The header text)
+    * */
+    label: PropTypes.string,
+    sortable: PropTypes.bool,
+    sort: PropTypes.func
+};
+
+export default DataTableHeader;

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

@@ -0,0 +1,30 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+class DataTableRow extends Component {
+
+}
+
+DataTableRow.propTypes = {
+    onClick: PropTypes.func,
+    data: PropTypes.object
+};
+
+export default DataTableRow;

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

@@ -17,6 +17,7 @@
  */
 
 import qs from 'qs';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Checkbox from 'material-ui/Checkbox';
 import {Redirect, Switch} from 'react-router-dom';

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

@@ -22,9 +22,10 @@ import BaseLayout from './Base/BaseLayout';
 import PlatformCreate from './Platform/PlatformCreate';
 import PublisherOverview from './Overview/PublisherOverview';
 import ApplicationCreate from './Application/ApplicationCreate';
+import ApplicationListing from './Application/ApplicationListing';
 
 /**
  * Contains all UI components related to Application, Login and Platform
  */
 
-export {Login, BaseLayout, ApplicationCreate, NotFound, PublisherOverview, PlatformCreate};
+export {Login, BaseLayout, ApplicationCreate, ApplicationListing, NotFound, PublisherOverview, PlatformCreate};

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

@@ -122,5 +122,4 @@
         <npm.build.command>build_prod</npm.build.command>
         <npm.working.dir>./src/main/</npm.working.dir>
     </properties>
-    
 </project>