Add tabs on user info modal

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/DeviceTypes/DeviceTypesTable.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Card, Col, Row, Select} from "antd";
+import {message, notification, Typography, Icon, Card, Col, Row} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -113,16 +113,27 @@ class DeviceTypesTable extends React.Component {
     render() {
 
         const {data, pagination, loading, selectedRows} = this.state;
-
+        const { Meta } = Card;
         const itemCard = data.map((data) =>
-            <Col span={8} key={data.id}>
+            <Col span={5} key={data.id}>
-                <Card hoverable title="Device Type" bordered={true}>
+                <Card
-                    {data.name}
+                    size="default"
+                    style={{ width: 200 }}
+                    bordered={true}
+                    actions={[
+                        <Icon type="setting" key="setting" />,
+                        <Icon type="edit" key="edit" />,]}
+                >
+                    <Meta
+                        avatar={<Icon type="desktop" key="device-types"/>}
+                        title={data.name}
+                    />
+
                 </Card>
             </Col>
         );
         return (
-            <div style={{ background: '#ECECEC', padding: '30px' }}>
+            <div style={{ background: '#ECECEC', padding: '20px' }}>
                 <Row gutter={16}>
                     {itemCard}
                 </Row>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/DevicesTable.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd";
+import {Tag, message, notification, Table, Typography, Tooltip, Icon, Modal, Select} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -133,18 +133,11 @@ class DeviceTable extends React.Component {
             selectedRows: [],
             deviceGroups: [],
             groupModalVisible: false,
-            selectedGroupId: []
+            selectedGroupId: [],
+            selectedRowKeys:[]
         };
     }
 
-    rowSelection = {
-        onChange: (selectedRowKeys, selectedRows) => {
-            this.setState({
-                selectedRows: selectedRows
-            });
-        }
-    };
-
     componentDidMount() {
         this.fetch();
     }
@@ -249,6 +242,9 @@ class DeviceTable extends React.Component {
         ).then(res => {
             if (res.status === 200) {
                 this.fetch();
+                this.setState({
+                    selectedRowKeys:[]
+                })
                 notification["success"]({
                     message: "Done",
                     duration: 4,
@@ -409,11 +405,30 @@ class DeviceTable extends React.Component {
         });
     };
 
-    render() {
+    onSelectChange = (selectedRowKeys, selectedRows) => {
-        const {data, pagination, loading, selectedRows} = this.state;
+        this.setState({
+            selectedRowKeys,
+            selectedRows: selectedRows
+        });
+    };
 
+    render() {
+        const {data, pagination, loading, selectedRows, selectedRowKeys} = this.state;
         const isSelectedSingle = this.state.selectedRows.length == 1;
 
+        let selectedText;
+        if(isSelectedSingle){
+            selectedText = "You have selected 1 device"
+        }else{
+            selectedText = "You have selected " + this.state.selectedRows.length + " devices"
+        }
+
+        const rowSelection = {
+            selectedRowKeys,
+            selectedRows,
+            onChange: this.onSelectChange,
+        };
+
         let item = this.state.deviceGroups.map((data) =>
             <Select.Option
                 value={data.id}
@@ -441,8 +456,7 @@ class DeviceTable extends React.Component {
                         }}
                         loading={loading}
                         onChange={this.handleTableChange}
-                        rowSelection={this.rowSelection}
+                        rowSelection={rowSelection}
-                        scroll={{x: 1000}}
                     />
                 </div>
 
@@ -453,10 +467,11 @@ class DeviceTable extends React.Component {
                     onOk={this.handleOk}
                     onCancel={this.handleCancel}
                 >
+                    <p>{selectedText}</p>
                     <Select
                         mode={isSelectedSingle ? "multiple" : "default"}
                         showSearch
-                        style={{width: 200}}
+                        style={{display:"block"}}
                         placeholder="Select Group"
                         optionFilterProp="children"
                         onChange={this.onGroupSelectChange}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Devices/ReportDevicesTable.js

@@ -239,7 +239,6 @@ class ReportDeviceTable extends React.Component {
                             loading={loading}
                             onChange={this.handleTableChange}
                             rowSelection={this.rowSelection}
-                            scroll={{x: 1000}}
                     />
                 </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider} from "antd";
+import { message, notification, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -164,7 +164,6 @@ class GroupsTable extends React.Component {
                     loading={loading}
                     onChange={this.handleTableChange}
                     rowSelection={this.rowSelection}
-                    scroll={{x: 1000}}
                 />
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Policies/PoliciesTable.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider} from "antd";
+import {message, notification, Table, Typography} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -171,7 +171,6 @@ class PoliciesTable extends React.Component {
                     loading={loading}
                     onChange={this.handleTableChange}
                     rowSelection={this.rowSelection}
-                    scroll={{x: 1000}}
                 />
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js

@@ -126,16 +126,26 @@ class RolesTable extends React.Component {
     render() {
 
         const {data, pagination, loading, selectedRows} = this.state;
-
+        const { Meta } = Card;
         const itemCard = data.map((data) =>
-            <Col span={8} key={data}>
+            <Col span={5} key={data}>
-                <Card hoverable title="Role" bordered={true}>
+                    <Card
-                    {data}
+                size="default"
+                style={{ width: 200 }}
+                bordered={true}
+                actions={[
+                        <Icon type="setting" key="setting" />,
+                        <Icon type="edit" key="edit" />,]}
+            >
+            <Meta
+                avatar={<Icon type="book" key="roles"/>}
+                title={data}
+                />
             </Card>
             </Col>
         );
         return (
-            <div style={{ background: '#ECECEC', padding: '30px' }}>
+            <div style={{ background: '#ECECEC', padding: '20px' }}>
                 <Row gutter={16}>
                     {itemCard}
                 </Row>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersDevices.js

@@ -240,7 +240,6 @@ class UsersDevices extends React.Component {
                     loading={loading}
                     onChange={this.handleTableChange}
                     rowSelection={this.rowSelection}
-                    scroll={{x: 1000}}
                 />
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js

@@ -18,7 +18,7 @@
 
 import React from "react";
 import axios from "axios";
-import {message, notification, Table, Typography, Panel, Collapse, Button, List, Modal, Icon} from "antd";
+import {message, notification, Table, Typography, Panel, Collapse, Button, List, Modal, Icon, Tabs} from "antd";
 import TimeAgo from 'javascript-time-ago'
 
 // Load locale-specific relative date/time formatting rules.
@@ -174,9 +174,9 @@ class UsersTable extends React.Component {
     };
 
     render() {
-
         const {data, pagination, loading, selectedRows} = this.state;
         const { Panel } = Collapse;
+        const { TabPane } = Tabs;
         const columns = [
             {
                 title: 'User Name',
@@ -231,30 +231,44 @@ class UsersTable extends React.Component {
                         loading={loading}
                         onChange={this.handleTableChange}
                         rowSelection={this.rowSelection}
-                        scroll={{x: 1000}}
                     />
                 </div>
                 <div>
                     <Modal
                         width="900px"
-                        title="Info"
                         visible={this.state.rolesModalVisible}
                         onOk={this.handleOk}
                         onCancel={this.handleCancel}
                     >
-                        <Collapse>
+                        <Tabs size="small" defaultActiveKey="1">
-                            <Panel header="User Roles" key="1">
+                            <TabPane
+                                tab={
+                                    <span>
+                                        <Icon type="book"/>
+                                      Roles
+                                    </span>
+                                }
+                                key="1"
+                            >
                                 <List
                                     size="small"
                                     bordered
                                     dataSource={this.state.rolesData}
                                     renderItem={item => <List.Item>{item}</List.Item>}
                                 />
-                            </Panel>
+                            </TabPane>
-                            <Panel header="Enrolled Devices" key="2">
+                            <TabPane
+                                tab={
+                                    <span>
+                                      <Icon type="appstore"/>
+                                      Enrolled Devices
+                                    </span>
+                                }
+                                key="2"
+                            >
                                 <UsersDevices user={this.state.user}/>
-                            </Panel>
+                            </TabPane>
-                        </Collapse>
+                        </Tabs>
                     </Modal>
                 </div>
             </div>