From 2c2584bcaed859843ee987a7fd925a0953bc1fba Mon Sep 17 00:00:00 2001
From: Shamalka Navod <shamalkanavod95@gmail.com>
Date: Fri, 25 Oct 2019 10:13:17 +0000
Subject: [PATCH] Add devicemgt React app UI improvements

---
 .../src/components/Groups/AddGroup.js          |  5 ++---
 .../src/components/Groups/GroupActions.js      | 18 ++++++++++--------
 .../src/components/Groups/GroupsTable.js       |  4 ++--
 .../src/pages/Dashboard/Policies/Policies.js   |  2 +-
 .../react-app/src/pages/Login.js               |  2 +-
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/AddGroup.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/AddGroup.js
index 00db115bec..d828d20a88 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/AddGroup.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/AddGroup.js
@@ -124,7 +124,7 @@ class AddGroup extends React.Component {
                 <div>
                     <Modal
                         title="ADD NEW GROUP"
-                        width="500px"
+                        width="40%"
                         visible={this.state.addModalVisible}
                         onOk={this.handleAddOk}
                         onCancel={this.handleAddCancel}
@@ -141,8 +141,7 @@ class AddGroup extends React.Component {
                             <p>Create new device group on IoT Server.</p>
                             <Form
                                 labelCol={{ span: 5 }}
-                                wrapperCol={{ span: 12 }}
-                                style={{alignItems:"center"}}
+                                wrapperCol={{ span: 18 }}
                             >
                                 <Form.Item label="Name" style={{display:"block"}}>
                                     {getFieldDecorator('name', {
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupActions.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupActions.js
index 3a3e6e83b5..b82489a14a 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupActions.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupActions.js
@@ -291,7 +291,7 @@ class GroupActions extends React.Component {
                 <div>
                     <Modal
                         title="Update Group"
-                        width="500px"
+                        width="40%"
                         visible={this.state.editModalVisible}
                         onOk={this.handleEditOk}
                         onCancel={this.handleEditCancel}
@@ -308,8 +308,7 @@ class GroupActions extends React.Component {
                             <p>Enter new name and description for the group</p>
                             <Form
                                 labelCol={{ span: 5 }}
-                                wrapperCol={{ span: 12 }}
-                                style={{alignItems:"center"}}
+                                wrapperCol={{ span: 18 }}
                             >
                                 <Form.Item label="Name" style={{display:"block"}}>
                                     {getFieldDecorator(
@@ -351,22 +350,25 @@ class GroupActions extends React.Component {
                         onOk={this.handleShareOk}
                         onCancel={this.handleShareCancel}
                         footer={[
-                            <Button key="cancel" onClick={this.handleShareCancel}>
-                                Cancel
+                            <Button key="new-role" onClick={this.handleShareCancel}>
+                                New Role
+                            </Button>,
+                            <Button key="new-role-selection" onClick={this.handleShareCancel}>
+                                New Role from Selection
                             </Button>,
                             <Button key="submit" type="primary" onClick={this.handleShareOk}>
-                                Submit
+                                Share
                             </Button>,
                         ]}
                     >
+                        <p>Select user role(s)</p>
                         <Select
-                            placeholder={"Select user role(s)"}
                             mode="multiple"
+                            defaultValue={"admin"}
                             style={{ width: '100%' }}
                             onChange={this.handleRolesDropdownChange}>
                             {item}
                         </Select>,
-
                     </Modal>
                 </div>
             </div>
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js
index 6bc8d6527a..cf782973b3 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js
@@ -164,8 +164,8 @@ class GroupsTable extends React.Component {
 
         return (
             <div>
-                <div style={{background: '#f0f2f5', marginBottom:"5px"}}>
-                    <AddGroup fetchGroups={this.fetchGroups}/>
+                <div style={{background: '#f0f2f5'}}>
+                    <AddGroup fetchGroups={this.fetchGroups} style={{marginBottom:"10px"}}/>
                 </div>
                 <div>
                     <Table
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js
index 09955efb4d..66286a2014 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js
@@ -55,7 +55,7 @@ class Policies extends React.Component {
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <p>sghdfugjhskf</p>
+                    
                 </div>
             </div>
         );
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Login.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Login.js
index 19bbf40a27..3ac1408ba0 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Login.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Login.js
@@ -157,7 +157,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>