The base layout completed.

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

@@ -14,6 +14,7 @@
     "history": "^4.6.3",
     "latest-version": "^3.1.0",
     "material-ui": "^0.19.0",
+    "material-ui-datatables": "^0.18.2",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-images-uploader": "^1.1.0",
@@ -23,7 +24,7 @@
     "react-router-dom": "^4.1.2",
     "react-scripts": "1.0.10",
     "react-sliding-pane": "^1.2.3",
-    "react-table": "^6.5.1"
+    "react-tap-event-plugin": "^2.0.1"
   },
   "devDependencies": {
     "babel-core": "^6.24.1",

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

@@ -17,33 +17,43 @@
  */
 
 import React, {Component} from 'react';
-import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
+import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
-import './App.css';
+import './App.css'
-import {Login, BaseLayout} from './components'
+import {BaseLayout, Create, Login, NotFound} from './components'
+import createHistory from 'history/createBrowserHistory';
+
+const history = createHistory({basename:'/publisher'});
+
 
 class Base extends Component {
     constructor() {
         super();
         this.state = {
-            user: ""
+            user: "m"
         }
     }
 
     render() {
         if (this.state.user) {
-            return(<BaseLayout>
+            return(
+                <div className="container">
+                    <BaseLayout>
                         <Switch>
-                        <Route path={"assets/apps"}/>
+                            <Redirect exact path={"/"} to={"/assets"}/>
-                        <Route path={"assets/apps/:app"}/>
+                            <Route exact path={"/assets"} component={NotFound}/>
-                        <Route path={"assets/apps/create"}/>
+                            <Route path={"/assets/apps"} component={Create}/>
-                        <Route path={"assets/apps/edit"}/>
+                            <Route path={"/assets/apps/:app"}/>
-                        <Route path={"assets/platform/:platform"}/>
+                            <Route path={"/assets/apps/create"}/>
-                        <Route path={"assets/platform/create"}/>
+                            <Route path={"/assets/apps/edit"}/>
-                        <Route path={"assets/platform/edit"}/>
+                            <Route path={"/assets/platform/:platform"}/>
-                        <Route path={"assets/reviews"}/>
+                            <Route path={"/assets/platform/create"}/>
-                        <Route path={"assets/reviews/:review"}/>
+                            <Route path={"/assets/platform/edit"}/>
+                            <Route path={"/assets/reviews"}/>
+                            <Route path={"/assets/reviews/:review"}/>
+                            <Route component={NotFound} />
                         </Switch>
                     </BaseLayout>
+                </div>
             )
         }
 
@@ -55,7 +65,7 @@ class Publisher extends Component {
   render() {
     return (
       <div className="App">
-          <Router basename="publisher">
+          <Router basename="publisher" history={history}>
               <Switch>
                   <Route path="/login" component={Login}/>
                   <Route path="/logout" component={Login}/>

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

@@ -17,10 +17,70 @@
  */
 
 import React, {Component} from 'react';
+import AppBar from 'material-ui/AppBar';
+import Drawer from 'material-ui/Drawer';
+import MenuItem from 'material-ui/MenuItem';
+import Menu from 'material-ui/Menu';
+import IconButton from 'material-ui/IconButton';
+import Notifications from 'material-ui/svg-icons/social/notifications';
+import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import {withRouter} from 'react-router-dom'
 
+
+/**
+ * Base Layout:
+ * App bar
+ * Left Navigation
+ * Middle content.
+ * */
 class BaseLayout extends Component {
 
+    handleApplicationClick() {
+        console.log("Application");
+        window.location = '/publisher/assets/apps';
+    }
+
+    render() {
+        return (
+            <div>
+                <AppBar title="App Publisher"
+                        iconElementRight={
+                            <div>
+                                <IconButton>
+                                    <Notifications/>
+                                </IconButton>
+                                <IconButton onClick={() => {
+                                    console.log("Clicked")
+                                }}>
+                                    <ActionAccountCircle/>
+                                </IconButton>
+                            </div>
+                        }
+                />
+                <div>
+                    <Drawer containerStyle={{height: 'calc(100% - 64px)', width: '15%', top: 64}} open={true}>
+                        <Menu>
+                            <MenuItem onClick={this.handleApplicationClick.bind(this)}>Applications</MenuItem>
+                            <MenuItem>Platforms</MenuItem>
+                            <MenuItem>Reviews</MenuItem>
+                        </Menu>
+                    </Drawer>
+                </div>
+                <div style=
+                         {
+                             {
+                                 height: 'calc(100% - 64px)',
+                                 marginLeft: '16%',
+                                 width: 'calc(100%-15%)',
+                                 top: 64,
+                                 left: "-100px"
+                             }
+                         }>
+                    {this.props.children}
+                </div>
+            </div>);
+    }
 
 }
 
-export default BaseLayout;
+export default withRouter(BaseLayout);

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

@@ -0,0 +1,41 @@
+/*
+ * 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';
+
+class Error extends Component {
+
+    constructor() {
+        super();
+    }
+
+    componentWillMount() {
+        console.log("In Crate")
+    }
+
+    render() {
+
+        return (
+
+            <div>
+               404 not found
+            </div>
+        );
+    }
+}
+
+export default Error;

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

@@ -36,6 +36,7 @@ class Login extends Component {
     handleLogin(event) {
         console.log(this.state);
 
+
         event.preventDefault();
     }
 
@@ -66,8 +67,11 @@ class Login extends Component {
     render() {
         return (
             <div>
+
+                {/*TODO: Style the components.*/}
+
                 <Card>
-                    <CardTitle title="Login to App Publisher"/>
+                    <CardTitle title="WSO2 IoT App Publisher"/>
 
                     <CardMedia>
                     </CardMedia>

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

@@ -18,9 +18,11 @@
 
 import Login from './User/Login/Login'
 import BaseLayout from './Base/BaseLayout'
+import Create from './Application/Create'
+import NotFound from './Error/NotFound'
 
 /**
  * Contains all UI components related to Application, Login and Platform
  */
 
-export {Login, BaseLayout};
+export {Login, BaseLayout, Create, NotFound};