PIMS-1430 User Table Tidy (#2253)

react-app/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useNavigate } from 'react-router-dom';
 import Home from '@/pages/Home';
 import React from 'react';
 import '@/App.css';
@@ -13,8 +13,10 @@ import { AccessRequest } from './pages/AccessRequest';
 import UsersManagement from './pages/UsersManagement';
 import { ErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '@/pages/ErrorFallback';
+import UserDetail from '@/components/users/UserDetail';
 
 const Router = () => {
+  const navigate = useNavigate();
   return (
     <Routes>
       <Route
@@ -56,6 +58,16 @@ const Router = () => {
             </BaseLayout>
           }
         />
+        <Route
+          path="users/:id"
+          element={
+            <BaseLayout>
+              <AuthRouteGuard>
+                <UserDetail onClose={() => navigate('/admin/users')} />
+              </AuthRouteGuard>
+            </BaseLayout>
+          }
+        />
       </Route>
     </Routes>
   );

react-app/src/components/layout/Header.tsx

@@ -85,7 +85,7 @@ const Header: React.FC = () => {
               <Link underline="none" href="#" variant="h5">
                 Disposal Inventory
               </Link>
-              <Link component={RouterLink} underline="none" to="/admin/users" variant="h5">
+              <Link underline="none" href="/admin/users" variant="h5">
                 Users
               </Link>
             </>

react-app/src/components/property/PropertyTable.tsx

@@ -246,6 +246,7 @@ const PropertyTable = () => {
         excelTitle={'Properties'}
         columns={columns}
         rows={rows}
+        addTooltip="Add a new property"
       />
     </Box>
   );

react-app/src/components/table/DataTable.tsx

@@ -31,6 +31,7 @@ import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
 import DownloadIcon from '@mui/icons-material/Download';
 import AddIcon from '@mui/icons-material/Add';
 import { GridApiCommunity } from '@mui/x-data-grid/internals';
+import { GridInitialStateCommunity } from '@mui/x-data-grid/models/gridStateCommunity';
 
 type RenderCellParams = GridRenderCellParams<any, any, any, GridTreeNodeWithRender>;
 
@@ -157,6 +158,8 @@ type FilterSearchDataGridProps = {
   presetFilterSelectOptions: JSX.Element[];
   tableHeader: string;
   excelTitle: string;
+  addTooltip: string;
+  initialState?: GridInitialStateCommunity;
 } & DataGridProps;
 
 export const FilterSearchDataGrid = (props: FilterSearchDataGridProps) => {
@@ -218,11 +221,7 @@ export const FilterSearchDataGrid = (props: FilterSearchDataGridProps) => {
             onChange={updateSearchValue}
             optionalExternalState={[keywordSearchContents, setKeywordSearchContents]}
           />
-          <Tooltip
-            title={
-              'Adding a new user from this table is not supported yet. Please advise users to use the sign-up form.'
-            }
-          >
+          <Tooltip title={props.addTooltip}>
             <span>
               <IconButton disabled>
                 <AddIcon />
@@ -268,9 +267,7 @@ export const FilterSearchDataGrid = (props: FilterSearchDataGridProps) => {
         apiRef={tableApiRef}
         initialState={{
           pagination: { paginationModel: { pageSize: 10 } },
-          sorting: {
-            sortModel: [{ field: 'created', sort: 'desc' }],
-          },
+          ...props.initialState,
         }}
         pageSizeOptions={[10, 20, 30, 100]} // DataGrid max is 100
         disableRowSelectionOnClick

react-app/src/components/users/UserDetail.tsx

@@ -16,21 +16,22 @@ import { Agency } from '@/hooks/api/useAgencyApi';
 import { Role } from '@/hooks/api/useRolesApi';
 import DetailViewNavigation from '../display/DetailViewNavigation';
 import { useGroupedAgenciesApi } from '@/hooks/api/useGroupedAgenciesApi';
+import { useParams } from 'react-router-dom';
 
 interface IUserDetail {
-  userId: string;
   onClose: () => void;
 }
 
-const UserDetail = ({ userId, onClose }: IUserDetail) => {
+const UserDetail = ({ onClose }: IUserDetail) => {
+  const { id } = useParams();
   const { pimsUser } = useContext(AuthContext);
   const api = usePimsApi();
 
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [openProfileDialog, setOpenProfileDialog] = useState(false);
   const [openStatusDialog, setOpenStatusDialog] = useState(false);
 
-  const { data, refreshData } = useDataLoader(() => api.users.getUserById(userId));
+  const { data, refreshData } = useDataLoader(() => api.users.getUserById(id));
 
   const { data: rolesData, loadOnce: loadRoles } = useDataLoader(api.roles.getInternalRoles);
   loadRoles();
@@ -93,7 +94,7 @@ const UserDetail = ({ userId, onClose }: IUserDetail) => {
 
   useEffect(() => {
     refreshData();
-  }, [userId]);
+  }, [id]);
 
   useEffect(() => {
     profileFormMethods.reset({
@@ -124,7 +125,7 @@ const UserDetail = ({ userId, onClose }: IUserDetail) => {
         deleteTitle={'Delete Account'}
         onDeleteClick={() => setOpenDeleteDialog(true)}
         onBackClick={() => onClose()}
-        deleteButtonProps={{ disabled: pimsUser.data.Id === userId }}
+        deleteButtonProps={{ disabled: pimsUser.data?.Id === id }}
       />
       <DataCard
         customFormatter={customFormatterStatus}
@@ -144,7 +145,7 @@ const UserDetail = ({ userId, onClose }: IUserDetail) => {
         message={deleteAccountConfirmText}
         deleteText="Delete Account"
         onDelete={async () => {
-          api.users.deleteUser(userId).then(() => {
+          api.users.deleteUser(id).then(() => {
             setOpenDeleteDialog(false);
             onClose();
           });
@@ -158,7 +159,7 @@ const UserDetail = ({ userId, onClose }: IUserDetail) => {
           const isValid = await profileFormMethods.trigger();
           if (isValid) {
             api.users
-              .updateUser(userId, { Id: userId, ...profileFormMethods.getValues() })
+              .updateUser(id, { Id: id, ...profileFormMethods.getValues() })
               .then(() => refreshData());
             setOpenProfileDialog(false);
           }
@@ -201,8 +202,8 @@ const UserDetail = ({ userId, onClose }: IUserDetail) => {
           if (isValid) {
             await api.users.updateUserRole(data.Username, statusFormMethods.getValues().Role);
             api.users
-              .updateUser(userId, {
-                Id: userId,
+              .updateUser(id, {
+                Id: id,
                 Status: statusFormMethods.getValues().Status,
               })
               .then(() => refreshData());

react-app/src/components/users/UsersTable.tsx

@@ -78,7 +78,8 @@ const UsersTable = (props: IUsersTable) => {
       // All Status filters
       case 'Active':
       case 'Pending':
-      case 'Hold':
+      case 'On Hold':
+      case 'Disabled':
         ref.current.setFilterModel({
           items: [
             {
@@ -92,6 +93,18 @@ const UsersTable = (props: IUsersTable) => {
       // All Role filters
       case 'User':
       case 'Admin':
+      case 'Auditor':
+        ref.current.setFilterModel({
+          items: [
+            {
+              value,
+              operator: 'contains',
+              field: 'Role',
+            },
+          ],
+        });
+        break;
+      case 'No Role':
         ref.current.setFilterModel({
           items: [
             {
@@ -112,12 +125,14 @@ const UsersTable = (props: IUsersTable) => {
       headerName: 'First Name',
       flex: 1,
       minWidth: 125,
+      maxWidth: 200,
     },
     {
       field: 'LastName',
       headerName: 'Last Name',
       flex: 1,
       minWidth: 125,
+      maxWidth: 200,
     },
     {
       field: 'Status',
@@ -126,19 +141,29 @@ const UsersTable = (props: IUsersTable) => {
         if (!params.value) return <></>;
         return statusChipFormatter(params.value);
       },
-      minWidth: 150,
+      width: 150,
     },
     {
       field: 'Email',
       headerName: 'Email Address',
-      minWidth: 150,
+      minWidth: 200,
       flex: 1,
     },
     {
-      field: 'DisplayName',
-      headerName: 'IDIR/BCeID',
-      minWidth: 150,
-      flex: 1,
+      field: 'Username',
+      headerName: 'Provider',
+      width: 125,
+      valueGetter: (params) => {
+        const username: string = params.value;
+        if (!username.includes('@')) return undefined;
+        const provider = username.split('@').at(1);
+        switch (provider) {
+          case 'idir':
+            return 'IDIR';
+          default:
+            return 'BCeID';
+        }
+      },
     },
     {
       field: 'Agency',
@@ -156,7 +181,7 @@ const UsersTable = (props: IUsersTable) => {
     {
       field: 'Role',
       headerName: 'Role',
-      minWidth: 100,
+      minWidth: 150,
       flex: 1,
       valueGetter: (params) => params.value?.Name ?? `No Role`,
     },
@@ -193,13 +218,19 @@ const UsersTable = (props: IUsersTable) => {
         defaultFilter="All Users"
         tableHeader="Users Overview"
         excelTitle="Users Table"
+        addTooltip="Adding a new user from this table is not supported yet. Please advise users to use the access request form."
         getRowId={(row) => row.Id}
         columns={columns}
         rows={users}
         loading={isLoading}
+        initialState={{
+          sorting: {
+            sortModel: [{ field: 'CreatedOn', sort: 'desc' }],
+          },
+        }}
         onPresetFilterChange={selectPresetFilter}
         presetFilterSelectOptions={[
-          <CustomMenuItem key={'AllUsers'} value={'All Users'}>
+          <CustomMenuItem key={'All Users'} value={'All Users'}>
             All Users
           </CustomMenuItem>,
           <CustomListSubheader key={'Status'}>Status</CustomListSubheader>,
@@ -209,16 +240,25 @@ const UsersTable = (props: IUsersTable) => {
           <CustomMenuItem key={'Pending'} value={'Pending'}>
             Pending
           </CustomMenuItem>,
-          <CustomMenuItem key={'Hold'} value={'Hold'}>
-            Hold
+          <CustomMenuItem key={'On Hold'} value={'On Hold'}>
+            On Hold
+          </CustomMenuItem>,
+          <CustomMenuItem key={'Disabled'} value={'Disabled'}>
+            Disabled
           </CustomMenuItem>,
           <CustomListSubheader key={'Role'}>Role</CustomListSubheader>,
           <CustomMenuItem key={'User'} value={'User'}>
-            User
+            General User
           </CustomMenuItem>,
           <CustomMenuItem key={'Admin'} value={'Admin'}>
             System Admin
           </CustomMenuItem>,
+          <CustomMenuItem key={'Auditor'} value={'Auditor'}>
+            Auditor
+          </CustomMenuItem>,
+          <CustomMenuItem key={'No Role'} value={'No Role'}>
+            No Role
+          </CustomMenuItem>,
         ]}
       />
     </Box>

react-app/src/pages/UsersManagement.tsx

@@ -1,25 +1,24 @@
-import UserDetail from '@/components/users/UserDetail';
 import UsersTable from '@/components/users/UsersTable';
 import useDataLoader from '@/hooks/useDataLoader';
 import usePimsApi from '@/hooks/usePimsApi';
-import React, { useState } from 'react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const UsersManagement = () => {
-  const [selectedUserId, setSelectedUserId] = useState('');
+  const navigate = useNavigate();
   // Getting data from API
   const usersApi = usePimsApi();
   const { data, refreshData, isLoading, error } = useDataLoader(usersApi.users.getAllUsers);
-  return selectedUserId ? (
-    <UserDetail
-      userId={selectedUserId}
-      onClose={() => {
-        setSelectedUserId('');
-        refreshData();
-      }}
-    />
-  ) : (
+
+  return (
     <UsersTable
-      rowClickHandler={(params) => setSelectedUserId(params.row.Id)}
+      rowClickHandler={(params) => {
+        // Checking length of selection so it only navigates if user isn't trying to select something
+        const selection = window.getSelection().toString();
+        if (!selection.length) {
+          navigate(`/admin/users/${params.id}`);
+        }
+      }}
       data={data}
       refreshData={refreshData}
       isLoading={isLoading}