Improve delete device UI

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

@@ -17,67 +17,91 @@
  */
 
 import React from "react";
-import {Button, Icon, notification} from "antd";
+import {Button, Tooltip, Popconfirm, Divider} from "antd";
 
 class BulkActionBar extends React.Component {
 
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {
-            selectedMultiple:false,
-            selectedSingle:false
+            selectedMultiple: false,
+            selectedSingle: false,
+            deleteable: true,
         }
     }
 
     //This method is used to trigger delete request on selected devices
-    deleteDevice = () => {
-        const deviceStatusArray = this.props.selectedRows.map(obj => obj.enrolmentInfo.status);
-        if(deviceStatusArray.includes("ACTIVE") || deviceStatusArray.includes("INACTIVE")){
-            notification["error"]({
-                message: "There was a problem",
-                duration: 0,
-                description:
-                "Cannot delete ACTIVE/INACTIVE devices.",
-            });
-        }else{
-            this.props.deleteDevice();
+    onDeleteDeviceCall = () => {
+        let i;
+        for(i=0; i < this.props.selectedRows.length; i++){
+            if(this.props.selectedRows[i].enrolmentInfo.status != "REMOVED"){
+                this.setState({deletable:false});
+                break;
+            }
+            this.setState({deletable:true});
         }
-    }
+    };
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if(prevProps.selectedRows !== this.props.selectedRows){
-            if(this.props.selectedRows.length > 1){
-                this.setState({selectedMultiple:true,selectedSingle:false})
-            }else if(this.props.selectedRows.length == 1){
-                this.setState({selectedSingle:true,selectedMultiple:true})
-            }else{
-                this.setState({selectedSingle:false,selectedMultiple:false})
-            }
+    onConfirmDelete = () => {
+        if (this.state.deletable) {
+            this.props.deleteDevice();
         }
-    }
+    };
+
+    onConfirmDisenroll = () => {
+        //TODO: Implement disenrollment function
+    };
 
     render() {
-        return(
-                <div style={{padding:'5px'}}>
-                                <Button
-                                        type="normal"
-                                        icon="delete"
-                                        size={'default'}
-                                        onClick={this.deleteDevice}
-                                        style={
-                                            {display:this.state.selectedMultiple ? "inline" : "none"}
-                                        }>Delete
-                                </Button>
+        const isSelected = this.props.selectedRows.length > 0;
+        const isSelectedSingle = this.props.selectedRows.length == 1;
+
+        return (
+            <div
+                style={{display: isSelected ? "inline" : "none", padding: '11px'}}>
+
+                <Tooltip
+                    placement="bottom"
+                    title={"Delete Device"}
+                    autoAdjustOverflow={true}>
+                    <Popconfirm
+                        placement="topLeft"
+                        title={
+                            this.state.deletable ?
+                                "Are you sure you want to delete?" : "You can only delete disenrolled devices"}
+                        onConfirm={this.onConfirmDelete}
+                        okText="Ok"
+                        cancelText="Cancel">
 
-                                <Button
-                                        type="normal"
-                                        icon="delete"
-                                        size={'default'}
-                                        style={
-                                            {display:this.state.selectedSingle ? "inline" : "none"}
-                                        }>Disenroll
-                                </Button>
-                </div>
+                        <Button
+                            type="link"
+                            shape="circle"
+                            icon="delete"
+                            size={'default'}
+                            onClick={this.onDeleteDeviceCall}
+                            disabled={isSelected ? false : true}
+                            style={{margin: "2px"}}/>
+                    </Popconfirm>
+                </Tooltip>
+                <Divider type="vertical"/>
+                <Tooltip placement="bottom" title={"Disenroll Device"}>
+                    <Popconfirm
+                        placement="topLeft"
+                        title={"Are you sure?"}
+                        onConfirm={this.onConfirmDisenroll}
+                        okText="Ok"
+                        disabled={isSelectedSingle ? false : true}
+                        cancelText="Cancel">
+                        <Button
+                            type="link"
+                            shape="circle"
+                            icon="close"
+                            size={'default'}
+                            disabled={isSelectedSingle ? false : true}
+                            style={{margin: "2px"}}/>
+                    </Popconfirm>
+                </Tooltip>
+            </div>
         )
     }
 }

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

@@ -118,9 +118,9 @@ const columns = [
         key: 'action',
         render: () => (
             <span>
-                <a><Icon type="edit" /></a>
-                <Divider type="vertical" />
-                <a><Text type="danger"><Icon type="delete" /></Text></a>
+                <a><Icon type="edit"/></a>
+                <Divider type="vertical"/>
+                <a><Text type="danger"><Icon type="delete"/></Text></a>
             </span>
         ),
     },
@@ -135,7 +135,7 @@ const getTimeAgo = (time) => {
 class DeviceTable extends React.Component {
     constructor(props) {
         super(props);
-        config =  this.props.context;
+        config = this.props.context;
         TimeAgo.addLocale(en);
         this.state = {
             data: [],
@@ -173,7 +173,7 @@ class DeviceTable extends React.Component {
         };
 
         const encodedExtraParams = Object.keys(extraParams)
-                .map(key => key + '=' + extraParams[key]).join('&');
+            .map(key => key + '=' + extraParams[key]).join('&');
 
         //send request to the invoker
         axios.get(
@@ -216,21 +216,14 @@ class DeviceTable extends React.Component {
 
         //send request to the invoker
         axios.put(
-                window.location.origin + config.serverConfig.invoker.uri +
-                config.serverConfig.invoker.deviceMgt +
-                "/admin/devices/permanent-delete",
-                deviceData,
-                { headers : {'Content-Type': 'application/json'}}
-
+            window.location.origin + config.serverConfig.invoker.uri +
+            config.serverConfig.invoker.deviceMgt +
+            "/admin/devices/permanent-delete",
+            deviceData,
+            {headers: {'Content-Type': 'application/json'}}
         ).then(res => {
             if (res.status === 200) {
                 this.fetch();
-                const pagination = {...this.state.pagination};
-                this.setState({
-                                  loading: false,
-                                  data: res.data.data.devices,
-                                  pagination,
-                              });
             }
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
@@ -239,16 +232,16 @@ class DeviceTable extends React.Component {
                 window.location.href = window.location.origin + '/entgra/login';
             } else {
                 notification["error"]({
-                                          message: "There was a problem",
-                                          duration: 0,
-                                          description:
-                                                  "Error occurred while trying to delete devices.",
-                                      });
+                    message: "There was a problem",
+                    duration: 0,
+                    description:
+                        "Error occurred while trying to delete devices.",
+                });
             }
 
             this.setState({loading: false});
         });
-    }
+    };
 
     handleTableChange = (pagination, filters, sorter) => {
         const pager = {...this.state.pagination};
@@ -270,24 +263,26 @@ class DeviceTable extends React.Component {
         return (
             <div>
                 <BulkActionBar
-                        deleteDevice={this.deleteDevice}
-                        selectedRows={this.state.selectedRows}/>
-                <Table
-                    columns={columns}
-                    rowKey={record => (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)}
-                    dataSource={data}
-                    pagination={{
-                        ...pagination,
-                        size: "small",
-                        // position: "top",
-                        showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
-                        // showQuickJumper: true
-                    }}
-                    loading={loading}
-                    onChange={this.handleTableChange}
-                    rowSelection={this.rowSelection}
-                    scroll={{x: 1000}}
-                />
+                    deleteDevice={this.deleteDevice}
+                    selectedRows={this.state.selectedRows}/>
+                <div>
+                    <Table
+                        columns={columns}
+                        rowKey={record => (record.deviceIdentifier + record.enrolmentInfo.owner + record.enrolmentInfo.ownership)}
+                        dataSource={data}
+                        pagination={{
+                            ...pagination,
+                            size: "small",
+                            // position: "top",
+                            showTotal: (total, range) => `showing ${range[0]}-${range[1]} of ${total} devices`
+                            // showQuickJumper: true
+                        }}
+                        loading={loading}
+                        onChange={this.handleTableChange}
+                        rowSelection={this.rowSelection}
+                        scroll={{x: 1000}}
+                    />
+                </div>
             </div>
         );
     }