From 0757783b81f808c3f3c811d8bc665442d57172a0 Mon Sep 17 00:00:00 2001
From: Nipun Nadeen De Silva <nipunnadeendesilva@gmail.com>
Date: Tue, 8 Oct 2019 07:56:13 +0000
Subject: [PATCH] Fix the navigation bar issue in APPM UI

---
 .../src/components/apps/list-apps/ListApps.js |  4 +-
 .../src/pages/dashboard/Dashboard.js          | 27 ++++++------
 .../react-app/src/pages/Login.js              |  2 +-
 .../src/pages/dashboard/Dashboard.js          | 42 +++++++++----------
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
index ec5b7a25d9b..38582664dc9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js
@@ -57,10 +57,10 @@ class ListApps extends React.Component {
         return (
             <Card>
                 <Row gutter={28}>
-                    <Col md={6}>
+                    <Col md={7}>
                         <Filters setFilters={this.setFilters}/>
                     </Col>
-                    <Col md={18}>
+                    <Col md={17}>
                         <Row>
                             <Col span={6}>
                                 <Title level={4}>Apps</Title>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
index 044851a503a..50adbe5516f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -77,8 +77,7 @@ class Dashboard extends React.Component {
                                             <Icon type="plus"/>
                                             Add New App
                                         </span>
-                                    }
-                                >
+                                    }>
                                     <Menu.Item key="add-new-public-app">
                                         <Link to="/publisher/add-new-app/public">
                                             Public App
@@ -105,8 +104,7 @@ class Dashboard extends React.Component {
                                     title={
                                         <span className="submenu-title-wrapper">
                                             <Icon type="control"/>Manage
-                                        </span>
-                                    }>
+                                        </span>}>
                                     <Menu.Item key="manage">
                                         <Link to="/publisher/manage">
                                             <Icon type="setting"/> General
@@ -125,8 +123,7 @@ class Dashboard extends React.Component {
                                          title={
                                              <span className="submenu-title-wrapper">
                                                <Icon type="user"/>Profile
-                                             </span>
-                                         }>
+                                             </span>}>
                                     <Logout/>
                                 </SubMenu>
                             </Menu>
@@ -137,9 +134,12 @@ class Dashboard extends React.Component {
                 <Layout className="mobile-layout">
                     <div className="mobile-menu-button">
                         <Button type="link" onClick={this.showMobileNavigationBar}>
-                            <Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
+                            <Icon
+                                type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'}
+                                className="bar-icon"/>
                         </Button>
                     </div>
+                </Layout>
                     <Drawer
                         title={
                             <Link to="/publisher/apps">
@@ -160,8 +160,11 @@ class Dashboard extends React.Component {
                             mode="inline"
                             defaultSelectedKeys={['1']}
                             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">
@@ -188,6 +191,7 @@ class Dashboard extends React.Component {
                             </Menu.Item>
                         </Menu>
                     </Drawer>
+                <Layout className="mobile-layout">
                     <Menu
                         mode="horizontal"
                         defaultSelectedKeys={['1']}
@@ -196,8 +200,7 @@ class Dashboard extends React.Component {
                             title={
                                 <span className="submenu-title-wrapper">
                                     <Icon type="user"/>
-                                </span>
-                            }>
+                                </span>}>
                             <Logout/>
                         </SubMenu>
                     </Menu>
@@ -219,6 +222,6 @@ class Dashboard extends React.Component {
             </div>
         );
     }
-};
+}
 
 export default withConfigContext(Dashboard);
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
index ec615bfedfc..e5177f77624 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js
@@ -159,7 +159,7 @@ class NormalLoginForm extends React.Component {
                     )}
                     <br/>
                     <a className="login-form-forgot" href="">Forgot password</a>
-                    <Button block type="primary" htmlType="submit" className="login-form-button">
+                    <Button loading={this.state.loading} block type="primary" htmlType="submit" className="login-form-button">
                         Log in
                     </Button>
                 </Form.Item>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
index 2ee3aba497f..e3d2ee72935 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -80,7 +80,7 @@ class Dashboard extends React.Component {
             collapsed: !this.state.collapsed,
         });
     };
-
+    
     onCloseMobileNavigationBar = () => {
         this.setState({
             visible: false,
@@ -123,22 +123,23 @@ class Dashboard extends React.Component {
                                 theme="light"
                                 mode="horizontal"
                                 defaultSelectedKeys={selectedKeys}
-                                style={{lineHeight: '64px'}}
-                            >
+                                style={{lineHeight: '64px'}}>
 
                                 {DeviceTypesData}
 
-                                <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
-                                    Clips</Link></Menu.Item>
+                                <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>
-                                         }
-                                >
+                                     </span> }>
                                     <Logout/>
                                 </SubMenu>
                             </Menu>
@@ -153,6 +154,7 @@ class Dashboard extends React.Component {
                             <Icon type={this.state.collapsed ? 'menu-fold' : 'menu-unfold'} className="bar-icon"/>
                         </Button>
                     </div>
+                </Layout>
                     <Drawer
                         title={<Link to="/store/android">
                             <img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
@@ -162,34 +164,32 @@ class Dashboard extends React.Component {
                         onClose={this.onCloseMobileNavigationBar}
                         visible={this.state.visible}
                         getContainer={false}
-                        style={{position: 'absolute'}}
-                    >
+                        style={{position: 'absolute'}}>
                         <Menu
                             theme="light"
                             mode="inline"
                             defaultSelectedKeys={selectedKeys}
-                            style={{lineHeight: '64px', width: 231}}
-                        >
+                            style={{lineHeight: '64px', width: 231}}>
 
                             {DeviceTypesData}
 
-                            <Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
-                                Clips</Link></Menu.Item>
-
+                            <Menu.Item key="web-clip">
+                                <Link to="/store/web-clip">
+                                <Icon type="upload"/>Web Clips
+                                </Link>
+                            </Menu.Item>
                         </Menu>
                     </Drawer>
+                <Layout className="mobile-layout">
                     <Menu
                         mode="horizontal"
                         defaultSelectedKeys={selectedKeys}
-                        style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}
-                    >
+                        style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}>
                         <SubMenu
                             title={
                                 <span className="submenu-title-wrapper">
                                      <Icon type="user"/>
-                                     </span>
-                            }
-                        >
+                                </span>}>
                             <Logout/>
                         </SubMenu>
                     </Menu>
@@ -202,9 +202,7 @@ class Dashboard extends React.Component {
                                 <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem}
                                                     key={route.path} {...route} />
                             ))}
-
                         </Switch>
-
                     </Content>
 
                     <Footer style={{textAlign: 'center'}}>