Merge pull request #3115 from Infisical/fix-check-permissions-on-before-load-integrations

Fix (temp): Wrap Integrations beforeLoad in Try/Catch and RenderBannerGuard if order

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -57,6 +57,10 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
         const finalChild =
           typeof children === "function" ? children(isAllowed, ability as any) : children;
 
+        if (!isAllowed && renderGuardBanner) {
+          return <ProjectPermissionGuardBanner />;
+        }
+
         if (!isAllowed && passThrough) {
           return <Tooltip content={label}>{finalChild}</Tooltip>;
         }
@@ -65,10 +69,6 @@ export const ProjectPermissionCan: FunctionComponent<Props<ProjectPermissionSet>
           return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
         }
 
-        if (!isAllowed && renderGuardBanner) {
-          return <ProjectPermissionGuardBanner />;
-        }
-
         if (!isAllowed) return null;
 
         return finalChild;

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx

@@ -8,6 +8,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import { Badge, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 import {
@@ -100,8 +101,7 @@ export const IntegrationsListPage = () => {
             <TabPanel value={IntegrationsListPageTabs.SecretSyncs}>
               <ProjectPermissionCan
                 renderGuardBanner
-                passThrough={false}
-                I={ProjectPermissionActions.Read}
+                I={ProjectPermissionSecretSyncActions.Read}
                 a={ProjectPermissionSub.SecretSyncs}
               >
                 <SecretSyncsTab />
@@ -110,7 +110,6 @@ export const IntegrationsListPage = () => {
             <TabPanel value={IntegrationsListPageTabs.NativeIntegrations}>
               <ProjectPermissionCan
                 renderGuardBanner
-                passThrough={false}
                 I={ProjectPermissionActions.Read}
                 a={ProjectPermissionSub.Integrations}
               >

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -3,7 +3,12 @@ import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
 import { workspaceKeys } from "@app/hooks/api";
-import { fetchSecretSyncsByProjectId, secretSyncKeys } from "@app/hooks/api/secretSyncs";
+import { TIntegration } from "@app/hooks/api/integrations/types";
+import {
+  fetchSecretSyncsByProjectId,
+  secretSyncKeys,
+  TSecretSync
+} from "@app/hooks/api/secretSyncs";
 import { fetchWorkspaceIntegrations } from "@app/hooks/api/workspace/queries";
 import { IntegrationsListPageTabs } from "@app/types/integrations";
 
@@ -20,10 +25,22 @@ export const Route = createFileRoute(
   validateSearch: zodValidator(IntegrationsListPageQuerySchema),
   beforeLoad: async ({ context, search, params: { projectId } }) => {
     if (!search.selectedTab) {
-      const secretSyncs = await context.queryClient.ensureQueryData({
-        queryKey: secretSyncKeys.list(projectId),
-        queryFn: () => fetchSecretSyncsByProjectId(projectId)
-      });
+      let secretSyncs: TSecretSync[];
+
+      try {
+        secretSyncs = await context.queryClient.ensureQueryData({
+          queryKey: secretSyncKeys.list(projectId),
+          queryFn: () => fetchSecretSyncsByProjectId(projectId)
+        });
+      } catch {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations }
+        });
+      }
 
       if (secretSyncs.length) {
         throw redirect({
@@ -35,10 +52,21 @@ export const Route = createFileRoute(
         });
       }
 
-      const integrations = await context.queryClient.ensureQueryData({
-        queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
-        queryFn: () => fetchWorkspaceIntegrations(projectId)
-      });
+      let integrations: TIntegration[];
+      try {
+        integrations = await context.queryClient.ensureQueryData({
+          queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
+          queryFn: () => fetchWorkspaceIntegrations(projectId)
+        });
+      } catch {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
+        });
+      }
 
       if (integrations.length) {
         throw redirect({