feat(infisical-pg): new org role routes completed

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

@@ -1,2 +1,14 @@
-export { useCreateRole, useDeleteRole, useUpdateRole } from "./mutation";
-export { useGetRoles, useGetUserOrgPermissions,useGetUserProjectPermissions } from "./queries";
+export {
+  useCreateOrgRole,
+  useCreateRole,
+  useDeleteOrgRole,
+  useDeleteRole,
+  useUpdateOrgRole,
+  useUpdateRole
+} from "./mutation";
+export {
+  useGetOrgRoles,
+  useGetRoles,
+  useGetUserOrgPermissions,
+  useGetUserProjectPermissions
+} from "./queries";

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

@@ -1,9 +1,17 @@
+import { packRules } from "@casl/ability/extra";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
 import { roleQueryKeys } from "./queries";
-import { TCreateRoleDTO, TDeleteRoleDTO, TUpdateRoleDTO } from "./types";
+import {
+  TCreateOrgRoleDTO,
+  TCreateRoleDTO,
+  TDeleteOrgRoleDTO,
+  TDeleteRoleDTO,
+  TUpdateOrgRoleDTO,
+  TUpdateRoleDTO
+} from "./types";
 
 export const useCreateRole = <T extends string | undefined>() => {
   const queryClient = useQueryClient();
@@ -40,3 +48,47 @@ export const useDeleteRole = () => {
     }
   });
 };
+
+export const useCreateOrgRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) =>
+      apiRequest.post(`/api/ee/v1/organization/${orgId}/roles`, {
+        ...dto,
+        permissions: permissions.length ? packRules(permissions) : []
+      }),
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
+    }
+  });
+};
+
+export const useUpdateOrgRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) =>
+      apiRequest.patch(`/api/ee/v1/organization/${orgId}/roles/${id}`, {
+        ...dto,
+        permissions: permissions?.length ? packRules(permissions) : undefined
+      }),
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
+    }
+  });
+};
+
+export const useDeleteOrgRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ orgId, id }: TDeleteOrgRoleDTO) =>
+      apiRequest.delete(`/api/ee/v1/organization/${orgId}/roles/${id}`, {
+        data: { orgId }
+      }),
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
+    }
+  });
+};

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

@@ -13,6 +13,8 @@ import {
   TGetRolesDTO,
   TGetUserOrgPermissionsDTO,
   TGetUserProjectPermissionDTO,
+  TOrgRole,
+  TPermission,
   TRole
 } from "./types";
 
@@ -36,6 +38,7 @@ const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
 
 export const roleQueryKeys = {
   getRoles: ({ orgId, workspaceId }: TGetRolesDTO) => ["roles", { orgId, workspaceId }] as const,
+  getOrgRoles: (orgId: string) => ["org-roles", { orgId }] as const,
   getUserOrgPermissions: ({ orgId }: TGetUserOrgPermissionsDTO) =>
     ["user-permissions", { orgId }] as const,
   getUserProjectPermissions: ({ workspaceId }: TGetUserProjectPermissionDTO) =>
@@ -63,6 +66,23 @@ export const useGetRoles = ({ orgId, workspaceId }: TGetRolesDTO) =>
     enabled: Boolean(orgId)
   });
 
+const getOrgRoles = async (orgId: string) => {
+  const { data } = await apiRequest.get<{
+    data: { roles: Array<Omit<TOrgRole, "permissions"> & { permissions: unknown }> };
+  }>(`/api/ee/v1/organization/${orgId}/roles`);
+  return data.data.roles.map(({ permissions, ...el }) => ({
+    ...el,
+    permissions: unpackRules(permissions as PackRule<TPermission>[])
+  }));
+};
+
+export const useGetOrgRoles = (orgId: string, enable = true) =>
+  useQuery({
+    queryKey: roleQueryKeys.getOrgRoles(orgId),
+    queryFn: () => getOrgRoles(orgId),
+    enabled: Boolean(orgId) && enable
+  });
+
 const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
   if (orgId === "") return { permissions: [], membership: null };
 

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

@@ -3,6 +3,7 @@ export type TGetRolesDTO = {
   workspaceId?: string;
 };
 
+// @depreciated
 export type TRole<T extends string | undefined> = {
   id: string;
   organization: string;
@@ -15,6 +16,17 @@ export type TRole<T extends string | undefined> = {
   updatedAt: string;
 };
 
+export type TOrgRole = {
+  slug: string;
+  name: string;
+  orgId: string;
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  description?: string;
+  permissions: TPermission[];
+};
+
 export type TPermission = {
   conditions?: Record<string, any>;
   action: string;
@@ -55,3 +67,21 @@ export type TGetUserOrgPermissionsDTO = {
 export type TGetUserProjectPermissionDTO = {
   workspaceId: string;
 };
+
+export type TCreateOrgRoleDTO = {
+  orgId: string;
+  name: string;
+  description?: string;
+  slug: string;
+  permissions: TPermission[];
+};
+
+export type TUpdateOrgRoleDTO = {
+  orgId: string;
+  id: string;
+} & Partial<Omit<TCreateOrgRoleDTO, "orgId">>;
+
+export type TDeleteOrgRoleDTO = {
+  orgId: string;
+  id: string;
+};

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -30,6 +30,7 @@ import {
 import {
   useAddUserToOrg,
   useFetchServerStatus,
+  useGetOrgRoles,
   useGetOrgUsers,
   useGetRoles,
   useUpdateOrgUserRole
@@ -56,9 +57,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
   const userId = user?.id || "";
   const orgId = currentOrg?.id || "";
 
-  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
-    orgId
-  });
+  const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
 
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -8,15 +8,16 @@ import {
   faServer,
   faSignIn,
   faUserCog,
-  faUsers} from "@fortawesome/free-solid-svg-icons";
+  faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import { useCreateRole, useUpdateRole } from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
+import { useCreateOrgRole, useUpdateOrgRole } from "@app/hooks/api";
+import { TOrgRole } from "@app/hooks/api/roles/types";
 
 import {
   formRolePermission2API,
@@ -28,7 +29,7 @@ import { SimpleLevelPermissionOption } from "./SimpleLevelPermissionOptions";
 import { WorkspacePermission } from "./WorkspacePermission";
 
 type Props = {
-  role?: TRole<undefined>;
+  role?: TOrgRole;
   onGoBack: VoidFunction;
 };
 
@@ -101,8 +102,8 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
     resolver: zodResolver(formSchema)
   });
 
-  const { mutateAsync: createRole } = useCreateRole();
-  const { mutateAsync: updateRole } = useUpdateRole();
+  const { mutateAsync: createRole } = useCreateOrgRole();
+  const { mutateAsync: updateRole } = useUpdateOrgRole();
 
   const handleRoleUpdate = async (el: TFormSchema) => {
     if (!role?.id) return;

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts

@@ -32,7 +32,7 @@ export const formSchema = z.object({
       "secret-scanning": generalPermissionSchema,
       sso: generalPermissionSchema,
       billing: generalPermissionSchema,
-      "identity": generalPermissionSchema
+      identity: generalPermissionSchema
     })
     .optional()
 });

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 
 import { usePopUp } from "@app/hooks";
-import { TRole } from "@app/hooks/api/roles/types";
+import { TOrgRole } from "@app/hooks/api/roles/types";
 
 import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
@@ -17,7 +17,7 @@ export const OrgRoleTabSection = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgRoleModifySection
-        role={popUp.editRole.data as TRole<undefined>}
+        role={popUp.editRole.data as TOrgRole}
         onGoBack={() => handlePopUpClose("editRole")}
       />
     </motion.div>

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -20,11 +20,11 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteRole, useGetRoles } from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
+import { useDeleteOrgRole, useGetOrgRoles } from "@app/hooks/api";
+import { TOrgRole } from "@app/hooks/api/roles/types";
 
 type Props = {
-  onSelectRole: (role?: TRole<undefined>) => void;
+  onSelectRole: (role?: TOrgRole) => void;
 };
 
 export const OrgRoleTable = ({ onSelectRole }: Props) => {
@@ -34,14 +34,12 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
   const { createNotification } = useNotificationContext();
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
 
-  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
-    orgId
-  });
+  const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);
 
-  const { mutateAsync: deleteRole } = useDeleteRole();
+  const { mutateAsync: deleteRole } = useDeleteOrgRole();
 
   const handleRoleDelete = async () => {
-    const { id } = popUp?.deleteRole?.data as TRole<undefined>;
+    const { id } = popUp?.deleteRole?.data as TOrgRole;
     try {
       await deleteRole({
         orgId,
@@ -90,7 +88,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
             </THead>
             <TBody>
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {(roles as TRole<undefined>[])?.map((role) => {
+              {roles?.map((role) => {
                 const { id, name, slug } = role;
                 const isNonMutatable = ["owner", "admin", "member", "no-access"].includes(slug);
 
@@ -148,9 +146,9 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
         title={`Are you sure want to delete ${
-          (popUp?.deleteRole?.data as TRole<undefined>)?.name || " "
+          (popUp?.deleteRole?.data as TOrgRole)?.name || " "
         } role?`}
-        deleteKey={(popUp?.deleteRole?.data as TRole<undefined>)?.slug || ""}
+        deleteKey={(popUp?.deleteRole?.data as TOrgRole)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
       />