Added New Functionality Mobile Device List Page

src/views/email-exchange/administration/ViewMobileDevices.js

@@ -1,89 +1,184 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { CippPageList } from 'src/components/layout'
 import useQuery from 'src/hooks/useQuery'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CellTip, cellDateFormatter } from 'src/components/tables'
+import { faEye, faEdit, faEllipsisV, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { CippActionsOffcanvas } from 'src/components/utilities'
+import { Link } from 'react-router-dom'
+import { CButton } from '@coreui/react'
 
 //TODO: Add CellBoolean
-const columns = [
-  {
-    selector: (row) => row['clientType'],
-    name: 'Client Type',
-    sortable: true,
-    cell: (row) => CellTip(row['clientType']),
-    exportSelector: 'clientType',
-  },
-  {
-    selector: (row) => row['clientVersion'],
-    name: 'Client Version',
-    sortable: true,
-    exportSelector: 'clientVersion',
-  },
-  {
-    selector: (row) => row['deviceAccessState'],
-    name: 'Access State',
-    sortable: true,
-    exportSelector: 'deviceAccessState',
-  },
-  {
-    selector: (row) => row['deviceFriendlyName'],
-    name: 'Friendly Name',
-    sortable: true,
-    cell: (row) => CellTip(row['deviceFriendlyName']),
-    exportSelector: 'deviceFriendlyName',
-  },
-  {
-    selector: (row) => row['deviceModel'],
-    name: 'Model',
-    sortable: true,
-    cell: (row) => CellTip(row['deviceModel']),
-    exportSelector: 'deviceModel',
-  },
-  {
-    selector: (row) => row['deviceOS'],
-    name: 'OS',
-    sortable: true,
-    cell: (row) => CellTip(row['deviceOS']),
-    exportSelector: 'deviceOS',
-  },
-  {
-    selector: (row) => row['deviceType'],
-    name: 'Device Type',
-    sortable: true,
-    cell: (row) => CellTip(row['deviceType']),
-    exportSelector: 'deviceType',
-  },
-  {
-    selector: (row) => row['firstSync'],
-    name: 'First Sync',
-    sortable: true,
-    exportSelector: 'firstSync',
-    cell: cellDateFormatter(),
-  },
-  {
-    selector: (row) => row['lastSyncAttempt'],
-    name: 'Last Sync Attempt',
-    sortable: true,
-    exportSelector: 'lastSyncAttempt',
-    cell: cellDateFormatter(),
-  },
-  {
-    selector: (row) => row['lastSuccessSync'],
-    name: 'Last Succesfull Sync',
-    sortable: true,
-    exportSelector: 'lastSuccessSync',
-    cell: cellDateFormatter(),
-  },
-  {
-    selector: (row) => row['status'],
-    name: 'Status',
-    sortable: true,
-    exportSelector: 'status',
-  },
-]
 
 const MobileDeviceList = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
+
+  const Offcanvas = (row, rowIndex, formatExtraData) => {
+    const [ocVisible, setOCVisible] = useState(false)
+    return (
+      <>
+        <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
+          <FontAwesomeIcon icon={faEllipsisV} />
+        </CButton>
+        <CippActionsOffcanvas
+          title="Device Information"
+          extendedInfo={[
+            {
+              label: 'User',
+              value: userId,
+            },
+            {
+              label: 'Access State',
+              value: row.deviceAccessState,
+            },
+            {
+              label: 'Model',
+              value: row.deviceModel,
+            },
+            {
+              label: 'Device Type',
+              value: row.deviceType,
+            },
+            {
+              label: 'Device ID',
+              value: row.deviceID,
+            },
+          ]}
+          actions={[
+            {
+              label: 'Allow Device',
+              color: 'info',
+              modal: true,
+              modalUrl: `/api/ExecMailboxMobileDevices?TenantFilter=${tenant.defaultDomainName}&DeviceID=${row.deviceID}&UserID=${userId}&quarantine=false`,
+              modalMessage: 'Are you sure you want to remove device from quarantine?',
+            },
+            {
+              label: 'Block Device',
+              color: 'warning',
+              modal: true,
+              modalUrl: `/api/ExecMailboxMobileDevices?TenantFilter=${tenant.defaultDomainName}&DeviceID=${row.deviceID}&UserID=${userId}&quarantine=true`,
+              modalMessage: 'Are you sure you want to block the device?',
+            },
+            {
+              label: 'Delete active sync device ',
+              color: 'warning',
+              modal: true,
+              modalUrl: `/api/ExecMailboxMobileDevices?TenantFilter=${tenant.defaultDomainName}&UserID=${userId}&Guid=${row.Guid}&delete=true`,
+              modalMessage: 'Are you sure you want to delete this device.',
+            },
+          ]}
+          placement="end"
+          visible={ocVisible}
+          id={row.id}
+          hideFunction={() => setOCVisible(false)}
+        />
+      </>
+    )
+  }
+
+  const columns = [
+    {
+      selector: (row) => query.get('userId'),
+      name: 'User ID',
+      sortable: true,
+      cell: (row) => CellTip(query.get('userId')),
+      exportSelector: 'userId',
+    },
+    {
+      selector: (row) => row['clientType'],
+      name: 'Client Type',
+      sortable: true,
+      cell: (row) => CellTip(row['clientType']),
+      exportSelector: 'clientType',
+    },
+    {
+      selector: (row) => row['clientVersion'],
+      name: 'Client Version',
+      sortable: true,
+      exportSelector: 'clientVersion',
+    },
+    {
+      selector: (row) => row['deviceAccessState'],
+      name: 'Access State',
+      sortable: true,
+      exportSelector: 'deviceAccessState',
+    },
+    {
+      selector: (row) => row['deviceFriendlyName'],
+      name: 'Friendly Name',
+      sortable: true,
+      cell: (row) => CellTip(row['deviceFriendlyName']),
+      exportSelector: 'deviceFriendlyName',
+    },
+    {
+      selector: (row) => row['deviceModel'],
+      name: 'Model',
+      sortable: true,
+      cell: (row) => CellTip(row['deviceModel']),
+      exportSelector: 'deviceModel',
+    },
+    {
+      selector: (row) => row['deviceOS'],
+      name: 'OS',
+      sortable: true,
+      cell: (row) => CellTip(row['deviceOS']),
+      exportSelector: 'deviceOS',
+    },
+    {
+      selector: (row) => row['deviceType'],
+      name: 'Device Type',
+      sortable: true,
+      cell: (row) => CellTip(row['deviceType']),
+      exportSelector: 'deviceType',
+    },
+    {
+      selector: (row) => row['deviceID'],
+      name: 'Device ID',
+      sortable: true,
+      exportSelector: 'deviceID',
+      cell: cellDateFormatter(),
+    },
+    {
+      selector: (row) => row['firstSync'],
+      name: 'First Sync',
+      sortable: true,
+      exportSelector: 'firstSync',
+      cell: cellDateFormatter(),
+    },
+    {
+      selector: (row) => row['lastSyncAttempt'],
+      name: 'Last Sync Attempt',
+      sortable: true,
+      exportSelector: 'lastSyncAttempt',
+      cell: cellDateFormatter(),
+    },
+    {
+      selector: (row) => row['lastSuccessSync'],
+      name: 'Last Succesfull Sync',
+      sortable: true,
+      exportSelector: 'lastSuccessSync',
+      cell: cellDateFormatter(),
+    },
+    {
+      selector: (row) => row['status'],
+      name: 'Status',
+      sortable: true,
+      exportSelector: 'status',
+    },
+    {
+      selector: (row) => row['Guid'],
+      name: 'Guid',
+      sortable: true,
+      exportSelector: 'Guid',
+    },
+    {
+      name: 'Actions',
+      cell: Offcanvas,
+      maxWidth: '75px',
+    },
+  ]
+
   let query = useQuery()
   const userId = query.get('userId')
   return (
@@ -96,9 +191,9 @@ const MobileDeviceList = () => {
         path: '/api/ListMailboxMobileDevices',
         columns,
         params: { TenantFilter: tenant?.defaultDomainName, mailbox: userId },
+        selectableRows: true,
       }}
     />
   )
 }
-
 export default MobileDeviceList

src/views/identity/administration/UserActions.js

@@ -8,6 +8,7 @@ import {
   faLockOpen,
   faUserTimes,
   faEllipsisH,
+  faEnvelope,
 } from '@fortawesome/free-solid-svg-icons'
 import { ActionContentCard } from 'src/components/contentcards'
 import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
@@ -46,6 +47,16 @@ export default function UserActions({ tenantDomain, userId, userEmail, className
           `/api/ExecSendPush?TenantFilter=${tenantDomain}&UserEmail=${userEmail}`,
         ),
     },
+    {
+      label: 'Enable Online Archive ',
+      link: '#',
+      icon: faEnvelope,
+      onClick: () =>
+        handleModal(
+          'Are you sure you want to enable the online archive for this user?',
+          `/api/ExecEnableArchive?TenantFilter=${tenantDomain}&ID=${userEmail}`,
+        ),
+    },
     {
       label: 'Convert to Shared Mailbox',
       link: '#',