Merge pull request #1717 from Infisical/daniel/fix-frontend-roles

Fix: Frontend roles bug

backend/src/ee/routes/v1/project-role-router.ts

@@ -157,7 +157,13 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
       response: {
         200: z.object({
           data: z.object({
-            membership: ProjectMembershipsSchema,
+            membership: ProjectMembershipsSchema.extend({
+              roles: z
+                .object({
+                  role: z.string()
+                })
+                .array()
+            }),
             permissions: z.any().array()
           })
         })

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -25,23 +25,24 @@ export const UpgradeProjectAlert = ({
   project,
   transparent
 }: UpgradeProjectAlertProps): JSX.Element | null => {
-  
   const router = useRouter();
-  const { membership } = useProjectPermission();
+  const { hasProjectRole } = useProjectPermission();
   const upgradeProject = useUpgradeProject();
   const [currentStatus, setCurrentStatus] = useState<string | null>(null);
   const [isUpgrading, setIsUpgrading] = useState(false);
 
+  const isProjectAdmin = hasProjectRole("admin");
+
   const {
     data: projectStatus,
     isLoading: statusIsLoading,
     refetch: manualProjectStatusRefetch
   } = useGetUpgradeProjectStatus({
     projectId: project.id,
-    enabled: membership.role === "admin" && project.version === ProjectVersion.V1,
+    enabled: isProjectAdmin && project.version === ProjectVersion.V1,
     refetchInterval: 5_000,
     onSuccess: (data) => {
-      if (membership.role !== "admin") {
+      if (!isProjectAdmin) {
         return;
       }
 
@@ -101,7 +102,7 @@ export const UpgradeProjectAlert = ({
         variant="solid"
         size="md"
         isLoading={isLoading}
-        isDisabled={isLoading || membership.role !== "admin"}
+        isDisabled={isLoading || !isProjectAdmin}
         onClick={onUpgradeProject}
       >
         Upgrade
@@ -113,13 +114,13 @@ export const UpgradeProjectAlert = ({
     <div
       className={twMerge(
         "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70  bg-primary/[.07] p-4 text-base text-white",
-        membership.role !== "admin" && "opacity-80"
+        !isProjectAdmin && "opacity-80"
       )}
     >
       <FontAwesomeIcon icon={faWarning} className="pr-6 text-6xl text-white/80" />
       <div className="flex w-full flex-col text-sm">
         <span className="mb-2 text-lg font-semibold">Upgrade your project</span>
-        {membership.role === "admin" ? (
+        {isProjectAdmin ? (
           <>
             <p>
               Upgrade your project version to continue receiving the latest improvements and
@@ -150,12 +151,12 @@ export const UpgradeProjectAlert = ({
       </div>
       <div className="my-2">
         <Tooltip
-          className={twMerge(membership.role === "admin" && "hidden")}
+          className={twMerge(isProjectAdmin && "hidden")}
           content="You need to be an admin to upgrade the project."
         >
           <Button
             isLoading={isLoading}
-            isDisabled={isLoading || membership.role !== "admin"}
+            isDisabled={isLoading || !isProjectAdmin}
             onClick={onUpgradeProject}
           >
             Upgrade

frontend/src/context/ProjectPermissionContext/ProjectPermissionContext.tsx

@@ -56,5 +56,7 @@ export const useProjectPermission = () => {
     throw new Error("useProjectPermission to be used within <ProjectPermissionContext>");
   }
 
-  return ctx;
+  const hasProjectRole = (role: string) => ctx?.membership?.roles?.includes(role) || false;
+
+  return { ...ctx, hasProjectRole };
 };

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

@@ -106,7 +106,7 @@ const getUserProjectPermissions = async ({ workspaceId }: TGetUserProjectPermiss
   const { data } = await apiRequest.get<{
     data: {
       permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[];
-      membership: TProjectMembership;
+      membership: Omit<TProjectMembership, "roles"> & { roles: { role: string }[] };
     };
   }>(`/api/v1/workspace/${workspaceId}/permissions`, {});
 
@@ -121,6 +121,12 @@ export const useGetUserProjectPermissions = ({ workspaceId }: TGetUserProjectPer
     select: (data) => {
       const rule = unpackRules<RawRuleOf<MongoAbility<ProjectPermissionSet>>>(data.permissions);
       const ability = createMongoAbility<ProjectPermissionSet>(rule, { conditionsMatcher });
-      return { permission: ability, membership: data.membership };
+
+      const membership = {
+        ...data.membership,
+        roles: data.membership.roles.map(({ role }) => role)
+      };
+
+      return { permission: ability, membership };
     }
   });

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

@@ -62,7 +62,7 @@ export type TProjectMembership = {
   createdAt: string;
   updatedAt: string;
   projectId: string;
-  roleId: string;
+  roles: string[];
 };
 
 export type TWorkspaceUser = {
@@ -79,29 +79,29 @@ export type TWorkspaceUser = {
   organization: string;
   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: 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;
-    }
+        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[];