fix: update permission response

web/src/containers/Settings/deletePermissionModal.tsx

@@ -29,7 +29,7 @@ const DeleteModal = ({ open, setOpen, deletePermission }: DeleteModalProps) => {
     <BootstrapDialog onClose={() => setOpen(false)} open={open}>
       <DialogContent dividers>
         <Typography gutterBottom>
-          Are you sure to delete this permission?
+          Are you sure you want to delete this permission?
         </Typography>
       </DialogContent>
       <DialogActions>

web/src/containers/Settings/index.tsx

@@ -47,7 +47,7 @@ const Settings = () => {
           >
             <StyledTab label="Profile" value="profile" />
             {appContext.mode === ModeType.Server && (
-              <StyledTab label="Permission" value="permission" />
+              <StyledTab label="Uri Access" value="permission" />
             )}
           </TabList>
         </Box>

web/src/containers/Settings/permission.tsx

@@ -12,7 +12,9 @@ import {
   Grid,
   CircularProgress,
   IconButton,
-  Tooltip
+  Tooltip,
+  Typography,
+  Popover
 } from '@mui/material'
 
 import FilterListIcon from '@mui/icons-material/FilterList'
@@ -29,6 +31,7 @@ import UpdatePermissionModal from './updatePermissionModal'
 import DeleteModal from './deletePermissionModal'
 
 import {
+  GroupDetailsResponse,
   PermissionResponse,
   RegisterPermissionPayload
 } from '../../utils/types'
@@ -401,8 +404,66 @@ const PermissionTable = ({
 }
 
 const displayPrincipal = (permission: PermissionResponse) => {
-  if (permission.user) return permission.user?.username
-  if (permission.group) return permission.group?.name
+  if (permission.user) return permission.user.username
+  if (permission.group) return <DisplayGroup group={permission.group} />
+}
+
+type DisplayGroupProps = {
+  group: GroupDetailsResponse
+}
+
+const DisplayGroup = ({ group }: DisplayGroupProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div>
+      <Typography
+        aria-owns={open ? 'mouse-over-popover' : undefined}
+        aria-haspopup="true"
+        onMouseEnter={handlePopoverOpen}
+        onMouseLeave={handlePopoverClose}
+      >
+        {group.name}
+      </Typography>
+      <Popover
+        id="mouse-over-popover"
+        sx={{
+          pointerEvents: 'none'
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left'
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+      >
+        <Typography sx={{ p: 1 }} variant="h6" component="div">
+          Group Users
+        </Typography>
+        {group.users.map((user) => (
+          <Typography sx={{ p: 1 }} component="li">
+            {user.username}
+          </Typography>
+        ))}
+      </Popover>
+    </div>
+  )
 }
 
 const displayPrincipalType = (permission: PermissionResponse) => {

web/src/utils/types.ts

@@ -11,12 +11,17 @@ export interface GroupResponse {
   description: string
 }
 
+export interface GroupDetailsResponse extends GroupResponse {
+  isActive: boolean
+  users: UserResponse[]
+}
+
 export interface PermissionResponse {
   permissionId: number
   uri: string
   setting: string
   user?: UserResponse
-  group?: GroupResponse
+  group?: GroupDetailsResponse
 }
 
 export interface RegisterPermissionPayload {