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;
+};

frontend/src/hooks/api/users/types.ts

@@ -76,30 +76,32 @@ export type TWorkspaceUser = {
   };
   inviteEmail: string;
   organization: string;
-  additionalPrivileges: {
-    id: string;
-    name: string;
-    description: string | null | undefined;
-    slug: string;
-    temporaryRange: string | null | undefined;
-    temporaryMode: string | null | undefined;
-    temporaryAccessEndTime: string | null | undefined;
-    temporaryAccessStartTime: string | null | undefined;
-    isTemporary: boolean;
-    createdAt: string;
-  }[];
-  roles: {
-    id: string;
-    role: "owner" | "admin" | "member" | "no-access" | "custom";
-    customRoleId: string;
-    customRoleName: string;
-    customRoleSlug: string;
-    isTemporary: boolean;
-    temporaryMode: string | null;
-    temporaryRange: string | null;
-    temporaryAccessStartTime: string | null;
-    temporaryAccessEndTime: string | null;
-  }[];
+  roles: (
+    | {
+      id: string;
+      role: "owner" | "admin" | "member" | "no-access" | "custom";
+      customRoleId: string;
+      customRoleName: string;
+      customRoleSlug: string;
+      isTemporary: false;
+      temporaryRange: null;
+      temporaryMode: null;
+      temporaryAccessEndTime: null;
+      temporaryAccessStartTime: null;
+    }
+    | {
+      id: string;
+      role: "owner" | "admin" | "member" | "no-access" | "custom";
+      customRoleId: string;
+      customRoleName: string;
+      customRoleSlug: string;
+      isTemporary: true;
+      temporaryRange: string;
+      temporaryMode: string;
+      temporaryAccessEndTime: string;
+      temporaryAccessStartTime: string;
+    }
+  )[];
   status: "invited" | "accepted" | "verified" | "completed";
   deniedPermissions: any[];
 };

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

@@ -315,13 +315,6 @@ export const useGetWorkspaceUsers = (workspaceId: string) => {
       );
       return users;
     },
-    select: (data) =>
-      data.map((el) => ({
-        ...el,
-        additionalPrivileges: el.additionalPrivileges.sort((a, b) =>
-          a.createdAt.localeCompare(b.createdAt)
-        )
-      })),
     enabled: true
   });
 };