fix: update permission response

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) => {