chore: improve interface for add permission response

web/src/containers/Settings/addPermissionModal.tsx

@@ -32,7 +32,13 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 type AddPermissionModalProps = {
   open: boolean
   handleOpen: Dispatch<SetStateAction<boolean>>
-  addPermission: (permissions: RegisterPermissionPayload[]) => void
+  addPermission: (
+    permissions: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => void
 }
 
 const AddPermissionModal = ({
@@ -110,7 +116,18 @@ const AddPermissionModal = ({
       permissions.push(addPermissionPayload)
     })
 
-    addPermission(permissions)
+    const principal =
+      principalType.toLowerCase() === 'user'
+        ? userPrincipal?.username
+        : groupPrincipal?.name
+
+    addPermission(
+      permissions,
+      permissionType,
+      principalType,
+      principal!,
+      permissionSetting
+    )
   }
 
   const addButtonDisabled =

web/src/containers/Settings/addPermissionResponseModal.tsx

@@ -1,22 +1,16 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 
-import {
+import { Typography, DialogContent } from '@mui/material'
-  Paper,
-  Typography,
-  DialogContent,
-  TableContainer,
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableCell
-} from '@mui/material'
 
 import { BootstrapDialog } from '../../components/modal'
 import { BootstrapDialogTitle } from '../../components/dialogTitle'
 import { PermissionResponse } from '../../utils/types'
 
 export interface PermissionResponsePayload {
+  permissionType: string
+  principalType: string
+  principal: string
+  permissionSetting: string
   existingPermissions: PermissionResponse[]
   newAddedPermissions: PermissionResponse[]
   updatedPermissions: PermissionResponse[]
@@ -30,77 +24,11 @@ type Props = {
 }
 
 const PermissionResponseModal = ({ open, setOpen, payload }: Props) => {
-  const rows = useMemo(() => {
+  const newAddedPermissionsLength = payload.newAddedPermissions.length
-    const paths: any = []
+  const updatedPermissionsLength = payload.updatedPermissions.length
-
+  const existingPermissionsLength = payload.existingPermissions.length
-    const existingPermissionsLength = payload.existingPermissions.length
+  const appliedPermissionsLength =
-    const newAddedPermissionsLength = payload.newAddedPermissions.length
+    newAddedPermissionsLength + updatedPermissionsLength
-    const updatedPermissionsLength = payload.updatedPermissions.length
-    if (
-      existingPermissionsLength >= newAddedPermissionsLength &&
-      existingPermissionsLength >= updatedPermissionsLength
-    ) {
-      payload.existingPermissions.forEach((permission, index) => {
-        const obj = {
-          existing: permission.path,
-          newAdded:
-            index < newAddedPermissionsLength
-              ? payload.newAddedPermissions[index].path
-              : '-',
-          updated:
-            index < updatedPermissionsLength
-              ? payload.updatedPermissions[index].path
-              : '-'
-        }
-        paths.push(obj)
-      })
-      return paths
-    }
-
-    if (
-      newAddedPermissionsLength >= existingPermissionsLength &&
-      newAddedPermissionsLength >= updatedPermissionsLength
-    ) {
-      payload.newAddedPermissions.forEach((permission, index) => {
-        const obj = {
-          newAdded: permission.path,
-          existing:
-            index < existingPermissionsLength
-              ? payload.existingPermissions[index].path
-              : '-',
-          updated:
-            index < updatedPermissionsLength
-              ? payload.updatedPermissions[index].path
-              : '-'
-        }
-        paths.push(obj)
-      })
-      return paths
-    }
-
-    if (
-      updatedPermissionsLength >= existingPermissionsLength &&
-      updatedPermissionsLength >= newAddedPermissionsLength
-    ) {
-      payload.updatedPermissions.forEach((permission, index) => {
-        const obj = {
-          updated: permission.path,
-          existing:
-            index < existingPermissionsLength
-              ? payload.existingPermissions[index].path
-              : '-',
-          newAdded:
-            index < newAddedPermissionsLength
-              ? payload.newAddedPermissions[index].path
-              : '-'
-        }
-        paths.push(obj)
-      })
-      return paths
-    }
-
-    return paths
-  }, [payload])
 
   return (
     <div>
@@ -112,28 +40,62 @@ const PermissionResponseModal = ({ open, setOpen, payload }: Props) => {
           Permission Response
         </BootstrapDialogTitle>
         <DialogContent dividers>
-          <TableContainer component={Paper}>
+          <Typography sx={{ fontWeight: 'bold', marginBottom: '15px' }}>
-            <Table size="small">
+            {`${appliedPermissionsLength} "${payload.permissionSetting}", "${
-              <TableHead sx={{ background: 'rgb(0,0,0, 0.3)' }}>
+              payload.permissionType
-                <TableRow>
+            }", "${payload.principalType}", "${payload.principal}" ${
-                  <TableCell>New</TableCell>
+              appliedPermissionsLength > 1 ? 'Rules' : 'Rule'
-                  <TableCell>Updated</TableCell>
+            }`}{' '}
-                  <TableCell>Unchanged</TableCell>
+            Applied:
-                </TableRow>
+          </Typography>
-              </TableHead>
+
-              <TableBody>
+          {newAddedPermissionsLength > 0 && (
-                {rows.map((obj: any, index: number) => {
+            <>
-                  return (
+              <Typography>
-                    <TableRow key={index}>
+                {`${newAddedPermissionsLength} ${
-                      <TableCell>{obj.newAdded}</TableCell>
+                  newAddedPermissionsLength > 1 ? 'Rules' : 'Rule'
-                      <TableCell>{obj.updated}</TableCell>
+                }`}{' '}
-                      <TableCell>{obj.existing}</TableCell>
+                Added:
-                    </TableRow>
+              </Typography>
-                  )
+              <ul>
-                })}
+                {payload.newAddedPermissions.map((permission, index) => (
-              </TableBody>
+                  <li key={index}>{permission.path}</li>
-            </Table>
+                ))}
-          </TableContainer>
+              </ul>
+            </>
+          )}
+
+          {updatedPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {` ${updatedPermissionsLength} ${
+                  updatedPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Updated:
+              </Typography>
+              <ul>
+                {payload.updatedPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {existingPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {`${existingPermissionsLength} ${
+                  existingPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Unchanged:
+              </Typography>
+              <ul>
+                {payload.existingPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
 
           {payload.errorPaths.length > 0 && (
             <>

web/src/containers/Settings/permission.tsx

@@ -71,6 +71,10 @@ const Permission = () => {
     useState(false)
   const [permissionResponsePayload, setPermissionResponsePayload] =
     useState<PermissionResponsePayload>({
+      permissionType: '',
+      principalType: '',
+      principal: '',
+      permissionSetting: '',
       existingPermissions: [],
       newAddedPermissions: [],
       updatedPermissions: [],
@@ -200,7 +204,11 @@ const Permission = () => {
   }
 
   const addPermission = async (
-    permissionsToAdd: RegisterPermissionPayload[]
+    permissionsToAdd: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
   ) => {
     setAddPermissionModalOpen(false)
     setIsLoading(true)
@@ -256,6 +264,10 @@ const Permission = () => {
     fetchPermissions()
     setIsLoading(false)
     setPermissionResponsePayload({
+      permissionType,
+      principalType,
+      principal,
+      permissionSetting,
       existingPermissions,
       updatedPermissions,
       newAddedPermissions,