feat(ui): updated ui with new role form for users

frontend/src/hooks/api/projectUserAdditionalPrivilege/index.tsx

@@ -3,5 +3,5 @@ export {
   useDeleteProjectUserAdditionalPrivilege,
   useUpdateProjectUserAdditionalPrivilege
 } from "./mutation";
-export { useGetProjectUserPrivilegeDetails } from "./queries";
+export { useGetProjectUserPrivilegeDetails, useListProjectUserPrivileges } from "./queries";
 export type { TProjectUserPrivilege } from "./types";

frontend/src/hooks/api/projectUserAdditionalPrivilege/mutation.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { workspaceKeys } from "../workspace/queries";
+import { projectUserPrivilegeKeys } from "./queries";
 import {
   TCreateProjectUserPrivilegeDTO,
   TDeleteProjectUserPrivilegeDTO,
@@ -22,8 +22,8 @@ export const useCreateProjectUserAdditionalPrivilege = () => {
       });
       return data.privilege;
     },
-    onSuccess: (_, { workspaceId }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(workspaceId));
+    onSuccess: (_, { projectMembershipId }) => {
+      queryClient.invalidateQueries(projectUserPrivilegeKeys.list(projectMembershipId));
     }
   });
 };
@@ -39,8 +39,8 @@ export const useUpdateProjectUserAdditionalPrivilege = () => {
       );
       return data.privilege;
     },
-    onSuccess: (_, { workspaceId }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(workspaceId));
+    onSuccess: (_, { projectMembershipId }) => {
+      queryClient.invalidateQueries(projectUserPrivilegeKeys.list(projectMembershipId));
     }
   });
 };
@@ -55,8 +55,8 @@ export const useDeleteProjectUserAdditionalPrivilege = () => {
       );
       return data.privilege;
     },
-    onSuccess: (_, { workspaceId }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(workspaceId));
+    onSuccess: (_, { projectMembershipId }) => {
+      queryClient.invalidateQueries(projectUserPrivilegeKeys.list(projectMembershipId));
     }
   });
 };

frontend/src/hooks/api/projectUserAdditionalPrivilege/queries.tsx

@@ -7,7 +7,9 @@ import { TProjectPermission } from "../roles/types";
 import { TProjectUserPrivilege } from "./types";
 
 export const projectUserPrivilegeKeys = {
-  details: (privilegeId: string) => ["project-user-privilege", { privilegeId }] as const
+  details: (privilegeId: string) => ["project-user-privilege", { privilegeId }] as const,
+  list: (projectMembershipId: string) =>
+    ["project-user-privileges", { projectMembershipId }] as const
 };
 
 const fetchProjectUserPrivilegeDetails = async (privilegeId: string) => {
@@ -29,3 +31,21 @@ export const useGetProjectUserPrivilegeDetails = (privilegeId: string) => {
     queryFn: () => fetchProjectUserPrivilegeDetails(privilegeId)
   });
 };
+
+export const useListProjectUserPrivileges = (projectMembershipId: string) => {
+  return useQuery({
+    enabled: Boolean(projectMembershipId),
+    queryKey: projectUserPrivilegeKeys.list(projectMembershipId),
+    queryFn: async () => {
+      const {
+        data: { privileges }
+      } = await apiRequest.get<{
+        privileges: Array<Omit<TProjectUserPrivilege, "permissions"> & { permissions: unknown }>;
+      }>("/api/v1/additional-privilege/users", { params: { projectMembershipId } });
+      return privileges.map((el) => ({
+        ...el,
+        permissions: unpackRules(el.permissions as PackRule<TProjectPermission>[])
+      }));
+    }
+  });
+};

frontend/src/hooks/api/projectUserAdditionalPrivilege/types.tsx

@@ -7,25 +7,30 @@ export enum ProjectUserAdditionalPrivilegeTemporaryMode {
 export type TProjectUserPrivilege = {
   projectMembershipId: string;
   slug: string;
-  name: string;
-  isTemporary: boolean;
   id: string;
   createdAt: Date;
   updatedAt: Date;
-  description?: string | null | undefined;
-  temporaryMode?: string | null | undefined;
-  temporaryRange?: string | null | undefined;
-  temporaryAccessStartTime?: string | null | undefined;
-  temporaryAccessEndTime?: Date | null | undefined;
   permissions?: TProjectPermission[];
-};
+} & (
+    | {
+      isTemporary: true;
+      temporaryMode: string;
+      temporaryRange: string;
+      temporaryAccessStartTime: string;
+      temporaryAccessEndTime?: string;
+    }
+    | {
+      isTemporary: false;
+      temporaryMode?: null;
+      temporaryRange?: null;
+      temporaryAccessStartTime?: null;
+      temporaryAccessEndTime?: null;
+    }
+  );
 
 export type TCreateProjectUserPrivilegeDTO = {
   projectMembershipId: string;
-  slug: string;
-  name: string;
-  workspaceId: string;
-  description?: string;
+  slug?: string;
   isTemporary?: boolean;
   temporaryMode?: ProjectUserAdditionalPrivilegeTemporaryMode;
   temporaryRange?: string;
@@ -35,14 +40,18 @@ export type TCreateProjectUserPrivilegeDTO = {
 
 export type TUpdateProjectUserPrivlegeDTO = {
   privilegeId: string;
-  workspaceId: string;
+  projectMembershipId: string;
 } & Partial<Omit<TCreateProjectUserPrivilegeDTO, "projectMembershipId">>;
 
 export type TDeleteProjectUserPrivilegeDTO = {
   privilegeId: string;
-  workspaceId: string;
+  projectMembershipId: string;
 };
 
-export type TGetProejctUserPrivilegeDetails = {
+export type TGetProjectUserPrivilegeDetails = {
   privilegeId: string;
 };
+
+export type TListProjectUserPrivileges = {
+  projectMembershipId: string;
+};