chore: add filter based on principal type

web/src/containers/Settings/permission.tsx

@@ -38,7 +38,7 @@ const BootstrapTableCell = styled(TableCell)({
   textAlign: 'left'
 })
 
-enum PrincipalType {
+export enum PrincipalType {
   User = 'User',
   Group = 'Group'
 }
@@ -58,6 +58,9 @@ const Permission = () => {
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [uriFilter, setUriFilter] = useState<string[]>([])
   const [principalFilter, setPrincipalFilter] = useState<string[]>([])
+  const [principalTypeFilter, setPrincipalTypeFilter] = useState<
+    PrincipalType[]
+  >([])
   const [settingFilter, setSettingFilter] = useState<string[]>([])
   const [permissions, setPermissions] = useState<PermissionResponse[]>([])
   const [filteredPermissions, setFilteredPermissions] = useState<
@@ -93,17 +96,33 @@ const Permission = () => {
       uriFilter.length > 0
         ? permissions.filter((permission) => uriFilter.includes(permission.uri))
         : permissions
+
     const principalFilteredPermissions =
       principalFilter.length > 0
         ? permissions.filter((permission) => {
             if (permission.user) {
-              return principalFilter.includes(permission.user.displayName)
-            } else if (permission.group) {
+              return principalFilter.includes(permission.user.username)
+            }
+            if (permission.group) {
               return principalFilter.includes(permission.group.name)
             }
             return false
           })
         : permissions
+
+    const principalTypeFilteredPermissions =
+      principalTypeFilter.length > 0
+        ? permissions.filter((permission) => {
+            if (permission.user) {
+              return principalTypeFilter.includes(PrincipalType.User)
+            }
+            if (permission.group) {
+              return principalTypeFilter.includes(PrincipalType.Group)
+            }
+            return false
+          })
+        : permissions
+
     const settingFilteredPermissions =
       settingFilter.length > 0
         ? permissions.filter((permission) =>
@@ -117,6 +136,12 @@ const Permission = () => {
       )
     )
 
+    filteredArray = filteredArray.filter((permission) =>
+      principalTypeFilteredPermissions.some(
+        (item) => item.permissionId === permission.permissionId
+      )
+    )
+
     filteredArray = filteredArray.filter((permission) =>
       settingFilteredPermissions.some(
         (item) => item.permissionId === permission.permissionId
@@ -261,6 +286,8 @@ const Permission = () => {
         setUriFilter={setUriFilter}
         principalFilter={principalFilter}
         setPrincipalFilter={setPrincipalFilter}
+        principalTypeFilter={principalTypeFilter}
+        setPrincipalTypeFilter={setPrincipalTypeFilter}
         settingFilter={settingFilter}
         setSettingFilter={setSettingFilter}
         applyFilter={applyFilter}
@@ -355,7 +382,7 @@ const PermissionTable = ({
 }
 
 const displayPrincipal = (permission: PermissionResponse) => {
-  if (permission.user) return permission.user?.displayName
+  if (permission.user) return permission.user?.username
   if (permission.group) return permission.group?.name
 }
 

web/src/containers/Settings/permissionFilterModal.tsx

@@ -12,6 +12,8 @@ import Autocomplete from '@mui/material/Autocomplete'
 
 import { PermissionResponse } from '../../utils/types'
 import { BootstrapDialogTitle } from '../../components/dialogTitle'
+import { PrincipalType } from './permission'
+
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialogContent-root': {
     padding: theme.spacing(2)
@@ -29,6 +31,8 @@ type FilterModalProps = {
   setUriFilter: Dispatch<SetStateAction<string[]>>
   principalFilter: string[]
   setPrincipalFilter: Dispatch<SetStateAction<string[]>>
+  principalTypeFilter: PrincipalType[]
+  setPrincipalTypeFilter: Dispatch<SetStateAction<PrincipalType[]>>
   settingFilter: string[]
   setSettingFilter: Dispatch<SetStateAction<string[]>>
   applyFilter: () => void
@@ -43,6 +47,8 @@ const PermissionFilterModal = ({
   setUriFilter,
   principalFilter,
   setPrincipalFilter,
+  principalTypeFilter,
+  setPrincipalTypeFilter,
   settingFilter,
   setSettingFilter,
   applyFilter,
@@ -54,7 +60,7 @@ const PermissionFilterModal = ({
 
   // fetch all the principals from permissions array
   let principals = permissions.map((permission) => {
-    if (permission.user) return permission.user.displayName
+    if (permission.user) return permission.user.username
     if (permission.group) return permission.group.name
     return ''
   })
@@ -103,6 +109,20 @@ const PermissionFilterModal = ({
               )}
             />
           </Grid>
+          <Grid item xs={12}>
+            <Autocomplete
+              multiple
+              options={Object.values(PrincipalType)}
+              filterSelectedOptions
+              value={principalTypeFilter}
+              onChange={(event: any, newValue: PrincipalType[]) => {
+                setPrincipalTypeFilter(newValue)
+              }}
+              renderInput={(params) => (
+                <TextField {...params} label="Principal Type" />
+              )}
+            />
+          </Grid>
           <Grid item xs={12}>
             <Autocomplete
               multiple