fix: update permission response

api/public/swagger.yaml

@@ -171,7 +171,7 @@ components:
                 user:
                     $ref: '#/components/schemas/UserResponse'
                 group:
-                    $ref: '#/components/schemas/GroupResponse'
+                    $ref: '#/components/schemas/GroupDetailsResponse'
             required:
                 - permissionId
                 - uri
@@ -1008,7 +1008,7 @@ paths:
                                 type: array
                             examples:
                                 'Example 1':
-                                    value: [{permissionId: 123, uri: /SASjsApi/code/execute, setting: Grant, user: {id: 1, username: johnSnow01, displayName: 'John Snow', isAdmin: false}}, {permissionId: 124, uri: /SASjsApi/code/execute, setting: Grant, group: {groupId: 1, name: DCGroup, description: 'This group represents Data Controller Users'}}]
+                                    value: [{permissionId: 123, uri: /SASjsApi/code/execute, setting: Grant, user: {id: 1, username: johnSnow01, displayName: 'John Snow', isAdmin: false}}, {permissionId: 124, uri: /SASjsApi/code/execute, setting: Grant, group: {groupId: 1, name: DCGroup, description: 'This group represents Data Controller Users', isActive: true, users: []}}]
             summary: 'Get list of all permissions (uri, setting and userDetail).'
             tags:
                 - Permission

api/src/controllers/group.ts

@@ -20,7 +20,7 @@ export interface GroupResponse {
   description: string
 }
 
-interface GroupDetailsResponse {
+export interface GroupDetailsResponse {
   groupId: number
   name: string
   description: string

api/src/controllers/permission.ts

@@ -15,7 +15,7 @@ import Permission from '../model/Permission'
 import User from '../model/User'
 import Group from '../model/Group'
 import { UserResponse } from './user'
-import { GroupResponse } from './group'
+import { GroupDetailsResponse } from './group'
 
 export enum PrincipalType {
   user = 'user',
@@ -63,7 +63,7 @@ export interface PermissionDetailsResponse {
   uri: string
   setting: string
   user?: UserResponse
-  group?: GroupResponse
+  group?: GroupDetailsResponse
 }
 
 @Security('bearerAuth')
@@ -93,7 +93,9 @@ export class PermissionController {
       group: {
         groupId: 1,
         name: 'DCGroup',
-        description: 'This group represents Data Controller Users'
+        description: 'This group represents Data Controller Users',
+        isActive: true,
+        users: []
       }
     }
   ])
@@ -170,7 +172,12 @@ const getAllPermissions = async (): Promise<PermissionDetailsResponse[]> =>
     .populate({ path: 'user', select: 'id username displayName isAdmin -_id' })
     .populate({
       path: 'group',
-      select: 'groupId name description -_id'
+      select: 'groupId name description -_id',
+      populate: {
+        path: 'users',
+        select: 'id username displayName isAdmin -_id',
+        options: { limit: 15 }
+      }
     })) as unknown as PermissionDetailsResponse[]
 
 const createPermission = async ({
@@ -185,7 +192,7 @@ const createPermission = async ({
   })
 
   let user: UserResponse | undefined
-  let group: GroupResponse | undefined
+  let group: GroupDetailsResponse | undefined
 
   switch (principalType) {
     case PrincipalType.user: {
@@ -251,7 +258,13 @@ const createPermission = async ({
       group = {
         groupId: groupInDB.groupId,
         name: groupInDB.name,
-        description: groupInDB.description
+        description: groupInDB.description,
+        isActive: groupInDB.isActive,
+        users: groupInDB.populate({
+          path: 'users',
+          select: 'id username displayName isAdmin -_id',
+          options: { limit: 15 }
+        }) as unknown as UserResponse[]
       }
       break
     }

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 {