Merge branch 'application-mgt-new' into 'application-mgt-new'

Fix the responsive issues and the web-clip device type issue

See merge request entgra/carbon-device-mgt!214

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css

@@ -39,29 +39,15 @@
   padding: 5px;
 }
 
-.logo-image {
-  /*width: 120px;*/
-  height: 31px;
-  margin: 0 5px 16px 24px;
-  float: left;
-}
-
-.logo-image img{
-  height: 35px;
-}
-
 .main-container{
   background: #f0f2f5;
   min-height: 780px
 }
 
-.profile{
-  float:right;
-  margin-right: 2%;
-}
-
 @media only screen and (min-width: 768px) {
+
   .main-container{
     padding: 24px;
   }
+
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/detailed-rating/DetailedRating.css

@@ -33,6 +33,18 @@
     width: 70%;
 }
 
+@media screen and (max-width: 768px) {
+
+    .d-rating .bar-containers{
+        width: 100%;
+    }
+
+    .d-rating .numeric-data{
+        width: 50%;
+    }
+
+}
+
 .d-rating .bar-containers .bar-container{
     color: #737373;
     font-weight: 400;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css

@@ -23,3 +23,11 @@
 .release-card:hover {
     background-color: rgba(15, 188, 249,0.1);
 }
+
+@media screen and (max-width: 700px) {
+
+    .release-card{
+        width: 210%;
+    }
+
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js

@@ -32,13 +32,11 @@ import {
     Icon,
     Card
 } from 'antd';
-
-import "../../../../App.css";
 import DetailedRating from "../../detailed-rating/DetailedRating";
 import {Link} from "react-router-dom";
 import axios from "axios";
 import ReactQuill from "react-quill";
-import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
+import ReactHtmlParser from 'react-html-parser';
 import "./AppDetailsDrawer.css";
 import pSBC from "shade-blend-color";
 import {withConfigContext} from "../../../../context/ConfigContext";
@@ -71,6 +69,8 @@ const formats = [
 class AppDetailsDrawer extends React.Component {
     constructor(props) {
         super(props);
+        const drawerWidth = window.innerWidth<=768 ? '80%' : '40%';
+
         this.state = {
             loading: false,
             name: "",
@@ -85,6 +85,8 @@ class AppDetailsDrawer extends React.Component {
             isDescriptionEditEnabled: false,
             isCategoriesEditEnabled: false,
             isTagsEditEnabled: false,
+            drawer: null,
+            drawerWidth
         };
     }
 
@@ -188,7 +190,6 @@ class AppDetailsDrawer extends React.Component {
         });
     };
 
-
     // change the app name
     handleNameSave = name => {
         const config = this.props.context;
@@ -412,7 +413,6 @@ class AppDetailsDrawer extends React.Component {
         }
     };
 
-
     render() {
         const config = this.props.context;
         const {app, visible, onClose} = this.props;
@@ -458,11 +458,12 @@ class AppDetailsDrawer extends React.Component {
             <div>
                 <Drawer
                     placement="right"
-                    width={640}
+                    width={this.state.drawerWidth}
                     closable={false}
                     onClose={onClose}
                     visible={visible}
                 >
+
                     <Spin spinning={loading} delay={500}>
                         <div style={{textAlign: "center"}}>
                             {avatar}
@@ -473,39 +474,46 @@ class AppDetailsDrawer extends React.Component {
 
                         <Text strong={true}>Releases </Text>
                         {/*display add new release only if app type is enterprise*/}
-                        {(app.type === "ENTERPRISE") && (
+
-                            <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
+                        <div className="releases-details">
-                                new release</Button></Link>)}
+
-                        <List
+                            {(app.type === "ENTERPRISE") && (
-                            style={{paddingTop: 16}}
+                                <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button"
-                            grid={{gutter: 16, column: 2}}
+                                                                                           size="small">Add
-                            dataSource={app.applicationReleases}
+                                    new release</Button></Link>)}
-                            renderItem={release => (
+                            <List
-                                <List.Item>
+                                style={{paddingTop: 16}}
-                                    <Link to={"apps/releases/" + release.uuid}>
+                                grid={{gutter: 16, column: 2}}
-                                        <Card className="release-card">
+                                dataSource={app.applicationReleases}
-                                            <Meta
+                                renderItem={release => (
-                                                avatar={
+                                    <List.Item>
-                                                    <Avatar size="large" shape="square" src={release.iconPath}/>
+                                        <Link to={"apps/releases/" + release.uuid}>
-                                                }
+                                            <Card className="release-card">
-                                                title={release.version}
+                                                <Meta
-                                                description={
+                                                    avatar={
-                                                    <div style={{
+                                                        <Avatar size="large" shape="square" src={release.iconPath}/>
-                                                        fontSize: "0.7em"
+                                                    }
-                                                    }}>
+                                                    title={release.version}
-                                                        <IconText type="check" text={release.currentStatus}/>
+                                                    description={
-                                                        <Divider type="vertical"/>
+                                                        <div style={{
-                                                        <IconText type="upload" text={release.releaseType}/>
+                                                            fontSize: "0.7em"
-                                                        <Divider type="vertical"/>
+                                                        }} className="description-view">
-                                                        <IconText type="star-o" text={release.rating.toFixed(1)}/>
+                                                            <IconText type="check" text={release.currentStatus}/>
-                                                    </div>
+                                                            <Divider type="vertical"/>
-                                                }
+                                                            <IconText type="upload" text={release.releaseType}/>
-                                            />
+                                                            <Divider type="vertical"/>
-                                        </Card>
+                                                            <IconText type="star-o" text={release.rating.toFixed(1)}/>
-                                    </Link>
+                                                        </div>
-                                </List.Item>
+                                                    }
-                            )}
+                                                />
-                        />
+                                            </Card>
+                                        </Link>
+                                    </List.Item>
+                                )}
+                            />
+
+                        </div>
+
                         <Divider dashed={true}/>
 
                         <Text strong={true}>Description </Text>
@@ -546,6 +554,7 @@ class AppDetailsDrawer extends React.Component {
                         )}
 
                         <Divider dashed={true}/>
+
                         <Text strong={true}>Categories </Text>
                         {!isCategoriesEditEnabled && (<Text
                                 style={{color: config.theme.primaryColor, cursor: "pointer"}}
@@ -590,8 +599,8 @@ class AppDetailsDrawer extends React.Component {
                             }</span>
                         )}
 
-
                         <Divider dashed={true}/>
+
                         <Text strong={true}>Tags </Text>
                         {!isTagsEditEnabled && (<Text
                                 style={{color: config.theme.primaryColor, cursor: "pointer"}}
@@ -636,8 +645,11 @@ class AppDetailsDrawer extends React.Component {
                         )}
 
                         <Divider dashed={true}/>
-                        {app.applicationReleases.length > 0 && (
+
-                            <DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>)}
+                        <div className="app-rate">
+                            {app.applicationReleases.length > 0 && (
+                                <DetailedRating type="app" uuid={app.applicationReleases[0].uuid} />)}
+                        </div>
                     </Spin>
                 </Drawer>
             </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js

@@ -25,7 +25,6 @@ import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
 const {Title} = Typography;
 const Search = Input.Search;
 
-
 class ListApps extends React.Component {
     constructor(props) {
         super(props);
@@ -67,7 +66,6 @@ class ListApps extends React.Component {
         this.setState({
             filters
         });
-        console.log(filters);
     };
 
     render() {
@@ -88,7 +86,7 @@ class ListApps extends React.Component {
                                 <Search
                                     placeholder="input search text"
                                     onSearch={this.setSearchText}
-                                    style={{width: 200}}
+                                    style={{width: 170}}
                                 />
                             </Col>
                         </Row>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css

@@ -19,3 +19,9 @@
 .app-row{
     cursor: pointer;
 }
+
+.apps-table{
+    display: block;
+    overflow: auto;
+    width: 100%;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js

@@ -132,7 +132,6 @@ class AppsTable extends React.Component {
     componentDidUpdate(prevProps, prevState, snapshot) {
         const {filters} = this.props;
         if (prevProps.filters !== this.props.filters) {
-            console.log("d", this.props.filters);
             this.setState({
                 filters
             });
@@ -212,7 +211,7 @@ class AppsTable extends React.Component {
 
     render() {
         return (
-
+            <div className="apps-table">
             <Table
                 rowKey={record => record.id}
                 dataSource={this.state.apps}
@@ -228,6 +227,7 @@ class AppsTable extends React.Component {
                     };
                 }}
             />
+            </div>
 
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. 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.
+ */
+
+.logo-image {
+    height: 31px;
+    margin: 0 5px 16px 24px;
+    float: left;
+}
+
+.logo-image img{
+    height: 35px;
+}
+
+.profile{
+    float:right;
+    margin-right: 2%;
+}
+
+.mobile-layout{
+    visibility: hidden;
+    position: absolute;
+}
+
+.mobile-menu-button{
+    margin-left: 4%;
+    position: fixed;
+}
+
+.bar-icon{
+    margin-top: 10%;
+    font-size: 27px;
+}
+
+@media screen and (max-width: 768px) {
+
+    .web-layout{
+        visibility: hidden;
+    }
+
+    .mobile-layout{
+        visibility: visible;
+        z-index: 1;
+    }
+
+    .mobile-menu-button{
+        margin-top: 4%;
+    }
+
+    Header{
+        position: fixed;
+        z-index: 1;
+        width: 100%;
+    }
+
+    .dashboard-body{
+        margin-top: 14%;
+    }
+
+    .logo-image {
+        margin-left: 20%;
+    }
+
+}
+
+@media screen and (max-height: 500px) {
+    .mobile-menu-button{
+        margin-top: 2%;
+    }
+    .dashboard-body{
+        margin-top: 9%;
+    }
+}
+
+
+
+
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -17,11 +17,11 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon} from 'antd';
+import {Layout, Menu, Icon, Drawer, Button} from 'antd';
 import {Switch, Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 import {Redirect} from 'react-router'
-import "../../App.css";
+import "./Dashboard.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./logout/Logout";
 
@@ -38,27 +38,107 @@ class Dashboard extends React.Component {
         this.Logo = config.theme.logo;
     }
 
+    //functions for show the drawer
+    state = {
+        visible: false,
+        collapsed: false
+    };
+
+    showDrawer = () => {
+        this.setState({
+            visible: true,
+            collapsed: !this.state.collapsed
+        });
+    };
+
+    onClose = () => {
+        this.setState({
+            visible: false,
+        });
+    };
+
     render() {
         return (
             <div>
-                <Layout className="layout">
+                <Layout>
-                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                    <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
                         <div className="logo-image">
-                            <img alt="logo" src={this.Logo}/>
+                            <Link to="/publisher/apps"><img alt="logo" src={this.Logo}/></Link>
                         </div>
+
+                        <div className="web-layout">
+
+                            <Menu
+                                theme="light"
+                                mode="horizontal"
+                                defaultSelectedKeys={['1']}
+                                style={{lineHeight: '64px'}}
+                            >
+                                <Menu.Item key="1"><Link to="/publisher/apps"><Icon
+                                    type="appstore"/>Apps</Link></Menu.Item>
+                                <SubMenu
+                                    title={
+                                        <span className="submenu-title-wrapper">
+                                     <Icon type="plus"/>
+                                         Add New App
+                            </span>
+                                    }
+                                >
+                                    <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
+                                        APP</Link></Menu.Item>
+                                    <Menu.Item key="setting:2"><Link to="/publisher/add-new-app/enterprise">Enterprise
+                                        APP</Link></Menu.Item>
+                                    <Menu.Item key="setting:3"><Link to="/publisher/add-new-app/web-clip">Web
+                                        Clip</Link></Menu.Item>
+                                </SubMenu>
+                                <Menu.Item key="2"><Link to="/publisher/manage"><Icon
+                                    type="control"/>Manage</Link></Menu.Item>
+
+                                <SubMenu className="profile"
+                                         title={
+                                             <span className="submenu-title-wrapper">
+                                     <Icon type="user"/>
+                                         Profile
+                                     </span>
+                                         }
+                                >
+                                    <Logout/>
+                                </SubMenu>
+                            </Menu>
+                        </div>
+                    </Header>
+                </Layout>
+
+                <Layout className="mobile-layout">
+                    <div className="mobile-menu-button">
+                        <Button type="link" onClick={this.showDrawer}>
+                            <Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
+                        </Button>
+                    </div>
+                    <Drawer
+                        title={<Link to="/publisher/apps"><img alt="logo" src={this.Logo} style={{marginLeft: 30}}
+                                                               width={"60%"}/></Link>}
+                        placement="left"
+                        closable={false}
+                        onClose={this.onClose}
+                        visible={this.state.visible}
+                        getContainer={false}
+                        style={{position: 'absolute'}}
+                    >
                         <Menu
                             theme="light"
-                            mode="horizontal"
+                            mode="inline"
                             defaultSelectedKeys={['1']}
-                            style={{lineHeight: '64px'}}
+                            style={{lineHeight: '64px', width: 231}}
                         >
-                            <Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="1"><Link to="/publisher/apps"><Icon
+                                type="appstore"/>Apps</Link></Menu.Item>
                             <SubMenu
                                 title={
                                     <span className="submenu-title-wrapper">
                                      <Icon type="plus"/>
                                          Add New App
-                                     </span>
+                            </span>
                                 }
                             >
                                 <Menu.Item key="setting:1"><Link to="/publisher/add-new-app/public">Public
@@ -70,23 +150,26 @@ class Dashboard extends React.Component {
                             </SubMenu>
                             <Menu.Item key="2"><Link to="/publisher/manage"><Icon
                                 type="control"/>Manage</Link></Menu.Item>
-
+                        </Menu>
-                            <SubMenu className="profile"
+                    </Drawer>
-                                     title={
+                    <Menu
-                                         <span className="submenu-title-wrapper">
+                        mode="horizontal"
+                        defaultSelectedKeys={['1']}
+                        style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
+                    >
+                        <SubMenu
+                            title={
+                                <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
-                                         Profile
                                      </span>
-                                     }
+                            }
-                            >
+                        >
-                                <Logout/>
+                            <Logout/>
-                            </SubMenu>
+                        </SubMenu>
-
+                    </Menu>
-                        </Menu>
-
-                    </Header>
                 </Layout>
-                <Layout>
+
+                <Layout className="dashboard-body">
                     <Content style={{marginTop: 2}}>
                         <Switch>
                             <Redirect exact from="/publisher" to="/publisher/apps"/>
@@ -95,7 +178,7 @@ class Dashboard extends React.Component {
                             ))}
                         </Switch>
                     </Content>
-                    <Footer style={{textAlign: 'center'}}>
+                    <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
                         ©2019 entgra.io
                     </Footer>
                 </Layout>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less

@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
- *
- * Entgra (pvt) Ltd. 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.
- */
-
-.logo {
-  width: 120px;
-  height: 31px;
-  margin: 16px 0 16px 20px;
-  float: left;
-
-  img{
-    height: 35px;
-  }
-}
-
-
-input{
-  min-height: 0;
-}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/babel.config.js

@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. 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.
+ */
+
 module.exports = function (api) {
   api.cache(true);
   const presets = [ "@babel/preset-env",

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css

@@ -39,29 +39,15 @@
   padding: 5px;
 }
 
-.logo-image {
-  /*width: 120px;*/
-  height: 31px;
-  margin: 0 5px 16px 24px;
-  float: left;
-}
-
-.logo-image img{
-  height: 35px;
-}
-
 .main-container{
   background: #f0f2f5;
   min-height: 780px
 }
 
-.profile{
-  float:right;
-  margin-right: 2%;
-}
-
 @media only screen and (min-width: 768px) {
+
   .main-container{
     padding: 24px;
   }
+
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/DeviceInstall.js

@@ -114,7 +114,6 @@ class DeviceInstall extends React.Component {
 
     rowSelection = {
         onChange: (selectedRowKeys, selectedRows) => {
-            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
             this.setState({
                 selectedRows: selectedRows
             })
@@ -142,9 +141,12 @@ class DeviceInstall extends React.Component {
             limit: 10,
             status: "ACTIVE",
             requireDeviceInfo: true,
-            type: deviceType
         };
 
+        if (deviceType !== 'ANY') {
+            extraParams.type = deviceType;
+        }
+        
         // note: encode with '%26' not '&'
         const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&');
 

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.css

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. 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.
+ */
+
+.logo-image {
+    height: 31px;
+    margin: 0 5px 16px 24px;
+    float: left;
+}
+
+.logo-image img{
+    height: 35px;
+}
+
+.profile{
+    float:right;
+    margin-right: 2%;
+}
+
+.mobile-layout{
+    visibility: hidden;
+    position: absolute;
+}
+
+.mobile-menu-button{
+    margin-left: 4%;
+    position: fixed;
+}
+
+.bar-icon{
+    margin-top: 10%;
+    font-size: 27px;
+}
+
+@media only screen and (min-width: 768px) {
+    .main-container{
+        padding: 24px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+
+    .web-layout{
+        visibility: hidden;
+    }
+
+    .mobile-layout{
+        visibility: visible;
+        z-index: 1;
+    }
+
+    .mobile-menu-button {
+        margin-top: 4%;
+    }
+
+    Header{
+        position: fixed;
+        z-index: 1;
+        width: 100%;
+    }
+
+    .dashboard-body{
+        margin-top: 15%;
+    }
+
+    .logo-image {
+        margin-left: 20%;
+    }
+}
+
+@media only screen and (max-height: 500px) {
+    .mobile-menu-button{
+        margin-top: 2%;
+    }
+    .dashboard-body{
+        margin-top: 10%;
+    }
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -17,14 +17,13 @@
  */
 
 import React from "react";
-import {Layout, Menu, Icon} from 'antd';
+import {Layout, Menu, Icon, Drawer, Button} from 'antd';
-
 const {Header, Content, Footer} = Layout;
 import {Link} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
 import {Switch} from 'react-router';
 import axios from "axios";
-import "../../App.css";
+import "./Dashboard.css";
 import {withConfigContext} from "../../context/ConfigContext";
 import Logout from "./logout/Logout";
 
@@ -81,60 +80,134 @@ class Dashboard extends React.Component {
         })
     };
 
+    //functions for show the drawer
+    state = {
+        visible: false,
+        collapsed: false
+    };
+
+    showDrawer = () => {
+        this.setState({
+            visible: true,
+            collapsed: !this.state.collapsed,
+        });
+    };
+
+    onClose = () => {
+        this.setState({
+            visible: false,
+        });
+    };
+
     render() {
         const config = this.props.context;
         const {selectedKeys, deviceTypes} = this.state;
 
+        const DeviceTypesData = deviceTypes.map((deviceType) => {
+            const platform = deviceType.name;
+            const defaultPlatformIcons = config.defaultPlatformIcons;
+            let icon = defaultPlatformIcons.default.icon;
+            let theme = defaultPlatformIcons.default.theme;
+            if (defaultPlatformIcons.hasOwnProperty(platform)) {
+                icon = defaultPlatformIcons[platform].icon;
+                theme = defaultPlatformIcons[platform].theme;
+            }
+            return (
+                <Menu.Item key={platform}>
+                    <Link to={"/store/" + platform}>
+                        <Icon type={icon} theme={theme}/>
+                        {platform}
+                    </Link>
+                </Menu.Item>
+            );
+        });
+
         return (
             <div>
-                <Layout className="layout">
+                <Layout>
-                    <Header style={{paddingLeft: 0, paddingRight: 0}}>
+                    <Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
                         <div className="logo-image">
-                            <img alt="logo" src={this.logo}/>
+                            <Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
+                        </div>
+
+                        <div className="web-layout">
+                            <Menu
+                                theme="light"
+                                mode="horizontal"
+                                defaultSelectedKeys={selectedKeys}
+                                style={{lineHeight: '64px'}}
+                            >
+
+                                {DeviceTypesData}
+
+                                <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
+                                    Clips</Link></Menu.Item>
+
+                                <SubMenu className="profile"
+                                         title={
+                                             <span className="submenu-title-wrapper">
+                                     <Icon type="user"/>
+                                         Profile
+                                     </span>
+                                         }
+                                >
+                                    <Logout/>
+                                </SubMenu>
+                            </Menu>
                         </div>
+                    </Header>
+                </Layout>
+
+                <Layout className="mobile-layout">
+
+                    <div className="mobile-menu-button">
+                        <Button type="link" onClick={this.showDrawer}>
+                            <Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
+                        </Button>
+                    </div>
+                    <Drawer
+                        title={<Link to="/store/android">
+                            <img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
+                        </Link>}
+                        placement="left"
+                        closable={false}
+                        onClose={this.onClose}
+                        visible={this.state.visible}
+                        getContainer={false}
+                        style={{position: 'absolute'}}
+                    >
                         <Menu
                             theme="light"
-                            mode="horizontal"
+                            mode="inline"
                             defaultSelectedKeys={selectedKeys}
-                            style={{lineHeight: '64px'}}
+                            style={{lineHeight: '64px', width: 231}}
                         >
-                            {
+
-                                deviceTypes.map((deviceType) => {
+                            {DeviceTypesData}
-                                    const platform = deviceType.name;
+
-                                    const defaultPlatformIcons = config.defaultPlatformIcons;
-                                    let icon = defaultPlatformIcons.default.icon;
-                                    let theme = defaultPlatformIcons.default.theme;
-                                    if (defaultPlatformIcons.hasOwnProperty(platform)) {
-                                        icon = defaultPlatformIcons[platform].icon;
-                                        theme = defaultPlatformIcons[platform].theme;
-                                    }
-                                    return (
-                                        <Menu.Item key={platform}>
-                                            <Link to={"/store/" + platform}>
-                                                <Icon type={icon} theme={theme}/>
-                                                {platform}
-                                            </Link>
-                                        </Menu.Item>
-                                    );
-                                })
-                            }
                             <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
                                 Clips</Link></Menu.Item>
 
-                            <SubMenu className="profile"
+                        </Menu>
-                                     title={
+                    </Drawer>
-                                         <span className="submenu-title-wrapper">
+                    <Menu
+                        mode="horizontal"
+                        defaultSelectedKeys={selectedKeys}
+                        style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
+                    >
+                        <SubMenu
+                            title={
+                                <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
-                                         Profile
                                      </span>
-                                     }
+                            }
-                            >
+                        >
-                                <Logout/>
+                            <Logout/>
-                            </SubMenu>
+                        </SubMenu>
-                        </Menu>
+                    </Menu>
-                    </Header>
                 </Layout>
-                <Layout>
+
+                <Layout className="dashboard-body">
                     <Content style={{padding: '0 0'}}>
                         <Switch>
                             {this.state.routes.map((route) => (
@@ -145,7 +218,7 @@ class Dashboard extends React.Component {
                         </Switch>
 
                     </Content>
-                    <Footer style={{textAlign: 'center'}}>
+                    <Footer style={{textAlign: 'center', marginBottom: 5 + "%"}}>
                         ©2019 entgra.io
                     </Footer>
                 </Layout>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.less

@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
- *
- * Entgra (pvt) Ltd. 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.
- */
-
-.logo {
-  width: 120px;
-  height: 31px;
-  margin: 16px 0 16px 20px;
-  float: left;
-
-  img{
-    height: 35px;
-  }
-}
-
-
-input{
-  min-height: 0;
-}

components/device-mgt/io.entgra.device.mgt.ui/pom.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-~ Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+~ Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
 ~
-~ WSO2 Inc. licenses this file to you under the Apache License,
+~ Entgra (pvt) Ltd. 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
+~  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
@@ -23,7 +23,7 @@
 
     <parent>
         <groupId>org.wso2.carbon.devicemgt</groupId>
-        <artifactId>application-mgt</artifactId>
+        <artifactId>device-mgt</artifactId>
         <version>3.2.9-SNAPSHOT</version>
     </parent>
     <artifactId>io.entgra.device.mgt.ui</artifactId>

components/device-mgt/io.entgra.device.mgt.ui/react-app/babel.config.js

@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. 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.
+ */
+
 module.exports = function (api) {
   api.cache(true);
   const presets = [ "@babel/preset-env",

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/css/font-wso2.css

@@ -1,18 +1,20 @@
-/*!
+/*
-~   Copyright (c) 2017 WSO2 Inc. (http://wso2.com) All Rights Reserved.
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
-~
+ *
-~   Licensed under the Apache License, Version 2.0 (the "License");
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
-~   you may not use this file except in compliance with the License.
+ * Version 2.0 (the "License"); you may not use this file except
-~   You may obtain a copy of the License at
+ * in compliance with the License.
-~
+ * You may obtain a copy of the License at
-~        http://www.apache.org/licenses/LICENSE-2.0
+ *
-~
+ * 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,
+ * Unless required by applicable law or agreed to in writing,
-~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * software distributed under the License is distributed on an
-~   See the License for the specific language governing permissions and
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-~   limitations under the License.
+ * KIND, either express or implied. See the License for the
-*/
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 
 
 @font-face {

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/scss/_mixin.scss

@@ -1,18 +1,20 @@
-/*!
+/*
-~   Copyright (c) 2017 WSO2 Inc. (http://wso2.com) All Rights Reserved.
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
-~
+ *
-~   Licensed under the Apache License, Version 2.0 (the "License");
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
-~   you may not use this file except in compliance with the License.
+ * Version 2.0 (the "License"); you may not use this file except
-~   You may obtain a copy of the License at
+ * in compliance with the License.
-~
+ * You may obtain a copy of the License at
-~        http://www.apache.org/licenses/LICENSE-2.0
+ *
-~
+ * 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,
+ * Unless required by applicable law or agreed to in writing,
-~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * software distributed under the License is distributed on an
-~   See the License for the specific language governing permissions and
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-~   limitations under the License.
+ * KIND, either express or implied. See the License for the
-*/
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 
 %icon-base {
   &:before {

components/device-mgt/io.entgra.device.mgt.ui/react-app/public/themes/default/default-theme.css

@@ -1,7 +1,7 @@
 /*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
  *
- * WSO2 Inc. licenses this file to you under the Apache License,
+ * Entgra (pvt) Ltd. 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

components/device-mgt/io.entgra.device.mgt.ui/react-app/webpack.config.js

@@ -1,7 +1,7 @@
 /*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
  *
- * WSO2 Inc. licenses this file to you under the Apache License,
+ * Entgra (pvt) Ltd. 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