fix(integrations): fail closed on the catalog until the deployment allowlist loads

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx

@@ -68,12 +68,14 @@ interface IntegrationBlockDetailProps {
  * Integration detail page, shown only when the viewer's integration policy
  * permits the integration. A direct link to a restricted one renders an
  * access-required state instead of the connect actions, and the check fails
- * closed until the deployment allowlist has loaded.
+ * closed until both the permission group and the deployment allowlist have
+ * loaded.
  */
 export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
   const {
     isBlockPermitted,
     isBlockRequestable,
+    isPermissionReady,
     isIntegrationAvailabilityReady,
     integrationAvailabilityError,
     refetchIntegrationAvailability,
@@ -90,7 +92,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
       />
     )
   }
-  if (!isIntegrationAvailabilityReady) {
+  if (!isPermissionReady || !isIntegrationAvailabilityReady) {
     return <IntegrationBlockDetailFallback workspaceId={workspaceId} />
   }
   if (isBlockPermitted(integration.type)) {

apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx

@@ -27,12 +27,16 @@ export function ShowcaseWithExplore({ prompt }: ShowcaseWithExploreProps) {
   const params = useParams()
   const router = useRouter()
   const { chatEnabled } = useDeploymentShape()
-  const { isBlockPermitted } = usePermissionConfig()
+  const { isBlockPermitted, isIntegrationAvailabilityReady } = usePermissionConfig()
   const workspaceId = (params?.workspaceId as string) || ''
 
   return (
     <div className='relative'>
-      <IntegrationsShowcase isBlockPermitted={isBlockPermitted} />
+      <IntegrationsShowcase
+        isBlockPermitted={(blockType) =>
+          isIntegrationAvailabilityReady && isBlockPermitted(blockType)
+        }
+      />
       {chatEnabled && (
         <Chip
           active

apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx

@@ -32,7 +32,10 @@ import {
   integrationsParsers,
   integrationsUrlKeys,
 } from '@/app/workspace/[workspaceId]/integrations/search-params'
-import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
+import {
+  SettingsEmptyState,
+  SettingsQueryErrorState,
+} from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { PermissionAccessBoundary } from '@/ee/access-requests/components/permission-access-boundary'
 import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
@@ -150,7 +153,14 @@ function IntegrationsContent() {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
-  const { integrationAvailability, isBlockPermitted } = usePermissionConfig()
+  const {
+    integrationAvailability,
+    isBlockPermitted,
+    isIntegrationAvailabilityReady,
+    isIntegrationAvailabilityFetching,
+    integrationAvailabilityError,
+    refetchIntegrationAvailability,
+  } = usePermissionConfig()
 
   const [{ category: urlCategory, search: urlSearchTerm }, setIntegrationFilters] = useQueryStates(
     integrationsParsers,
@@ -207,20 +217,30 @@ function IntegrationsContent() {
     })
   }, [oauthCredentials])
 
+  /**
+   * The catalog lists nothing until the deployment allowlist has loaded, so a
+   * pending or failed availability request never shows an integration the
+   * deployment's `ALLOWED_INTEGRATIONS` excludes.
+   */
   const permittedFeatured = useMemo(
-    () => FEATURED_INTEGRATIONS.filter((integration) => isBlockPermitted(integration.type)),
-    [isBlockPermitted]
+    () =>
+      isIntegrationAvailabilityReady
+        ? FEATURED_INTEGRATIONS.filter((integration) => isBlockPermitted(integration.type))
+        : [],
+    [isIntegrationAvailabilityReady, isBlockPermitted]
   )
 
   const permittedCategorySections = useMemo(
     () =>
-      ALL_CATEGORY_SECTIONS.flatMap((section) => {
-        const integrations = section.integrations.filter((integration) =>
-          isBlockPermitted(integration.type)
-        )
-        return integrations.length > 0 ? [{ label: section.label, integrations }] : []
-      }),
-    [isBlockPermitted]
+      isIntegrationAvailabilityReady
+        ? ALL_CATEGORY_SECTIONS.flatMap((section) => {
+            const integrations = section.integrations.filter((integration) =>
+              isBlockPermitted(integration.type)
+            )
+            return integrations.length > 0 ? [{ label: section.label, integrations }] : []
+          })
+        : [],
+    [isIntegrationAvailabilityReady, isBlockPermitted]
   )
 
   const setSelectedCategory = useCallback(
@@ -321,6 +341,7 @@ function IntegrationsContent() {
   ])
 
   const showNoResults =
+    isIntegrationAvailabilityReady &&
     Boolean(urlSearchTerm.trim() || !isAllCategorySelected) &&
     filteredCategorySections.length === 0 &&
     visibleConnectedItems.length === 0
@@ -380,6 +401,16 @@ function IntegrationsContent() {
               </IntegrationSection>
             )}
 
+            {integrationAvailabilityError && (
+              <SettingsQueryErrorState
+                variant='inline'
+                error={integrationAvailabilityError}
+                fallback='Unable to load integrations'
+                isRetrying={isIntegrationAvailabilityFetching}
+                onRetry={() => void refetchIntegrationAvailability()}
+              />
+            )}
+
             {filteredCategorySections.map((section) => (
               <IntegrationSection key={section.label} label={formatIntegrationType(section.label)}>
                 {section.integrations.map((integration) => {