fix(integrations): fall back from emptied categories and fail closed on detail gate

Author: waleedlatif1

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
 import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
@@ -67,44 +67,82 @@ 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.
+ * access-required state instead of the connect actions, and the check fails
+ * closed until the deployment allowlist has loaded.
  */
 export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
-  const { isLoading, isBlockPermitted, isBlockRequestable } = usePermissionConfig()
+  const {
+    isBlockPermitted,
+    isBlockRequestable,
+    isIntegrationAvailabilityReady,
+    integrationAvailabilityError,
+    refetchIntegrationAvailability,
+  } = usePermissionConfig()
   const accessRequests = useWorkspaceAccessRequestFeatures()
 
-  if (isLoading) return <IntegrationBlockDetailFallback workspaceId={workspaceId} />
+  if (integrationAvailabilityError) {
+    return (
+      <IntegrationAccessNotice
+        workspaceId={workspaceId}
+        title='Unable to check access'
+        description={integrationAvailabilityError.message}
+        action={<Chip onClick={() => void refetchIntegrationAvailability()}>Try again</Chip>}
+      />
+    )
+  }
+  if (!isIntegrationAvailabilityReady) {
+    return <IntegrationBlockDetailFallback workspaceId={workspaceId} />
+  }
   if (isBlockPermitted(integration.type)) {
     return <IntegrationBlockDetailContent integration={integration} workspaceId={workspaceId} />
   }
 
   const requestable = accessRequests.data?.enabled === true && isBlockRequestable(integration.type)
 
+  return (
+    <IntegrationAccessNotice
+      workspaceId={workspaceId}
+      title='Access required'
+      description={
+        requestable
+          ? 'Ask an administrator for access.'
+          : 'Your organization restricts this integration.'
+      }
+      action={
+        requestable ? (
+          <RequestAccessAction
+            scope={{ kind: 'workspace', workspaceId }}
+            target={{ kind: 'integration', id: integration.type }}
+            label={integration.name}
+            variant='primary'
+          />
+        ) : undefined
+      }
+    />
+  )
+}
+
+interface IntegrationAccessNoticeProps {
+  workspaceId: string
+  title: string
+  description: string
+  action?: ReactNode
+}
+
+function IntegrationAccessNotice({
+  workspaceId,
+  title,
+  description,
+  action,
+}: IntegrationAccessNoticeProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className={PAGE_HEADER_BAR}>
         <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
           Integrations
         </ChipLink>
       </div>
-      <EmptyState
-        title='Access required'
-        description={
-          requestable
-            ? 'Ask an administrator for access.'
-            : 'Your organization restricts this integration.'
-        }
-        action={
-          requestable ? (
-            <RequestAccessAction
-              scope={{ kind: 'workspace', workspaceId }}
-              target={{ kind: 'integration', id: integration.type }}
-              label={integration.name}
-              variant='primary'
-            />
-          ) : undefined
-        }
-      />
+      <EmptyState title={title} description={description} action={action} />
     </div>
   )
 }

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

@@ -152,8 +152,10 @@ function IntegrationsContent() {
   const workspaceId = (params?.workspaceId as string) || ''
   const { integrationAvailability, isBlockPermitted } = usePermissionConfig()
 
-  const [{ category: selectedCategory, search: urlSearchTerm }, setIntegrationFilters] =
-    useQueryStates(integrationsParsers, integrationsUrlKeys)
+  const [{ category: urlCategory, search: urlSearchTerm }, setIntegrationFilters] = useQueryStates(
+    integrationsParsers,
+    integrationsUrlKeys
+  )
 
   /**
    * The input is controlled directly by the instant nuqs value; only the URL
@@ -235,6 +237,16 @@ function IntegrationsContent() {
     ...permittedCategorySections.map((section) => section.label),
   ]
 
+  /**
+   * A category the viewer's integration policy leaves empty is not offered, so a
+   * link or a policy change that points at one falls back to All. Connected stays
+   * selected while credentials load so the page does not flash All first.
+   */
+  const selectedCategory =
+    categoryOptions.includes(urlCategory) || (urlCategory === CONNECTED_LABEL && credentialsLoading)
+      ? urlCategory
+      : ALL_CATEGORY
+
   const isAllCategorySelected = selectedCategory === ALL_CATEGORY
   const isFeaturedSelected = selectedCategory === FEATURED_LABEL
   const isConnectedSelected = selectedCategory === CONNECTED_LABEL

apps/sim/hooks/use-permission-config.test.tsx

@@ -111,9 +111,9 @@ describe('usePermissionConfig deployment readiness', () => {
       integrationAvailability: [{ type: 'airtable', state: 'unavailable', oauthAvailable: false }],
     })
     render()
-    expect(current!.isBlockAllowed('airtable')).toBe(false)
-    expect(current!.isBlockPermitted('airtable')).toBe(true)
-    expect(current!.isBlockPermitted('slack')).toBe(false)
+    expect(current.isBlockAllowed('airtable')).toBe(false)
+    expect(current.isBlockPermitted('airtable')).toBe(true)
+    expect(current.isBlockPermitted('slack')).toBe(false)
   })
 
   it('does not offer a request before deployment availability resolves', () => {