fix(integrations): hide integrations the permission group disallows

Author: waleedlatif1

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

@@ -5,6 +5,7 @@ import { Chip, ChipDropdown, ChipLink, cn } from '@sim/emcn'
 import { ArrowLeft, Plus } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { EmptyState } from '@/components/empty-state/empty-state'
 import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import {
@@ -16,6 +17,7 @@ import {
 import { credentialProviderMatchesService } from '@/lib/oauth'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
 import { RESOURCE_TILE_BASE } from '@/app/workspace/[workspaceId]/components/resource-tile'
+import { IntegrationBlockDetailFallback } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail-fallback'
 import { IntegrationSkillsSection } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section'
 import { connectParam } from '@/app/workspace/[workspaceId]/integrations/[block]/search-params'
 import { ConnectPersonalTokenModal } from '@/app/workspace/[workspaceId]/integrations/components/connect-personal-token-modal'
@@ -42,6 +44,8 @@ import {
   getTemplatesForBlock,
   type ScopedBlockTemplate,
 } from '@/blocks/registry'
+import { useWorkspaceAccessRequestFeatures } from '@/ee/access-requests/components/permission-access-boundary'
+import { RequestAccessAction } from '@/ee/access-requests/components/request-access-action'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -60,7 +64,52 @@ interface IntegrationBlockDetailProps {
   workspaceId: string
 }
 
+/**
+ * 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.
+ */
 export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
+  const { isLoading, isBlockPermitted, isBlockRequestable } = usePermissionConfig()
+  const accessRequests = useWorkspaceAccessRequestFeatures()
+
+  if (isLoading) return <IntegrationBlockDetailFallback workspaceId={workspaceId} />
+  if (isBlockPermitted(integration.type)) {
+    return <IntegrationBlockDetailContent integration={integration} workspaceId={workspaceId} />
+  }
+
+  const requestable = accessRequests.data?.enabled === true && isBlockRequestable(integration.type)
+
+  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
+        }
+      />
+    </div>
+  )
+}
+
+function IntegrationBlockDetailContent({ integration, workspaceId }: IntegrationBlockDetailProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   useOAuthReturnRouter()
   const router = useRouter()

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

@@ -83,12 +83,17 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
   )
 }
 
+interface IntegrationsShowcaseProps {
+  /** Tiles whose block type fails this check are left out of the grid. */
+  isBlockPermitted: (blockType: string) => boolean
+}
+
 /**
  * Decorative integrations grid: a notched, masked grid background populated
  * with a curated set of brand tiles. The bottom-right notch leaves room for an
  * "Explore in chat" CTA rendered by `ShowcaseWithExplore`.
  */
-export function IntegrationsShowcase() {
+export function IntegrationsShowcase({ isBlockPermitted }: IntegrationsShowcaseProps) {
   return (
     <div aria-hidden className='relative h-[144px] w-full overflow-hidden rounded-xl'>
       <div
@@ -110,7 +115,7 @@ export function IntegrationsShowcase() {
         <div className='absolute inset-0 grid translate-x-[0.5px] translate-y-[0.5px] grid-cols-[repeat(auto-fill,48px)] grid-rows-[repeat(auto-fill,48px)]'>
           {SHOWCASE_TILES.map((tile) => {
             const block = getBlock(tile.id)
-            if (!block) return null
+            if (!block || !isBlockPermitted(tile.id)) return null
             return (
               <div
                 key={tile.id}

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

@@ -6,6 +6,7 @@ import { useParams, useRouter } from 'next/navigation'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { IntegrationsShowcase } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
 import { storeCuratedPrompt } from '@/blocks/integration-matcher'
+import { usePermissionConfig } from '@/hooks/use-permission-config'
 
 interface ShowcaseWithExploreProps {
   /**
@@ -26,11 +27,12 @@ export function ShowcaseWithExplore({ prompt }: ShowcaseWithExploreProps) {
   const params = useParams()
   const router = useRouter()
   const { chatEnabled } = useDeploymentShape()
+  const { isBlockPermitted } = usePermissionConfig()
   const workspaceId = (params?.workspaceId as string) || ''
 
   return (
     <div className='relative'>
-      <IntegrationsShowcase />
+      <IntegrationsShowcase isBlockPermitted={isBlockPermitted} />
       {chatEnabled && (
         <Chip
           active

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

@@ -150,7 +150,7 @@ function IntegrationsContent() {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
-  const { integrationAvailability } = usePermissionConfig()
+  const { integrationAvailability, isBlockPermitted } = usePermissionConfig()
 
   const [{ category: selectedCategory, search: urlSearchTerm }, setIntegrationFilters] =
     useQueryStates(integrationsParsers, integrationsUrlKeys)
@@ -205,6 +205,22 @@ function IntegrationsContent() {
     })
   }, [oauthCredentials])
 
+  const permittedFeatured = useMemo(
+    () => FEATURED_INTEGRATIONS.filter((integration) => isBlockPermitted(integration.type)),
+    [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]
+  )
+
   const setSelectedCategory = useCallback(
     (category: string) => {
       setIntegrationFilters({ category })
@@ -215,8 +231,8 @@ function IntegrationsContent() {
   const categoryOptions = [
     ALL_CATEGORY,
     ...(connectedItems.length > 0 ? [CONNECTED_LABEL] : []),
-    FEATURED_LABEL,
-    ...ALL_CATEGORY_SECTIONS.map((section) => section.label),
+    ...(permittedFeatured.length > 0 ? [FEATURED_LABEL] : []),
+    ...permittedCategorySections.map((section) => section.label),
   ]
 
   const isAllCategorySelected = selectedCategory === ALL_CATEGORY
@@ -234,7 +250,7 @@ function IntegrationsContent() {
       integration.description.toLowerCase().includes(normalizedSearch)
 
     if (isFeaturedSelected) {
-      const items = FEATURED_INTEGRATIONS.filter(matchesSearch)
+      const items = permittedFeatured.filter(matchesSearch)
       return items.length > 0 ? [{ label: FEATURED_LABEL, integrations: items }] : []
     }
 
@@ -243,27 +259,22 @@ function IntegrationsContent() {
 
     // Featured is a curated home-row pin: hide it during search so results
     // are not duplicated between the Featured section and the category list.
-    const featured = normalizedSearch ? [] : FEATURED_INTEGRATIONS.filter(matchesCategory)
+    const featured = normalizedSearch ? [] : permittedFeatured.filter(matchesCategory)
     const featuredSection =
       featured.length > 0 ? [{ label: FEATURED_LABEL, integrations: featured }] : []
 
-    if (isAllCategorySelected) {
-      const rest = ALL_CATEGORY_SECTIONS.map((section) => ({
+    const categorySections = permittedCategorySections
+      .filter((section) => isAllCategorySelected || section.label === selectedCategory)
+      .map((section) => ({
         label: section.label,
         integrations: section.integrations.filter(matchesSearch),
-      })).filter((section) => section.integrations.length > 0)
-      return [...featuredSection, ...rest]
-    }
-
-    const integrations = INTEGRATIONS.filter(matchesCategory)
-      .filter(matchesSearch)
-      .sort((a, b) => a.name.localeCompare(b.name))
+      }))
+      .filter((section) => section.integrations.length > 0)
 
-    return [
-      ...featuredSection,
-      ...(integrations.length > 0 ? [{ label: selectedCategory, integrations }] : []),
-    ]
+    return [...featuredSection, ...categorySections]
   }, [
+    permittedFeatured,
+    permittedCategorySections,
     isAllCategorySelected,
     isConnectedSelected,
     isFeaturedSelected,

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

@@ -101,6 +101,21 @@ describe('usePermissionConfig deployment readiness', () => {
     expect(current!.isBlockRequestable('credential_group')).toBe(false)
   })
 
+  it('judges policy permission independently of deployment OAuth readiness', () => {
+    mockUseUserPermissionConfig.mockReturnValue({
+      data: { config: { ...DEFAULT_PERMISSION_GROUP_CONFIG, allowedIntegrations: ['airtable'] } },
+      isLoading: false,
+    })
+    queryClient.setQueryData(integrationAvailabilityKeys.environments(), {
+      ...AVAILABILITY,
+      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)
+  })
+
   it('does not offer a request before deployment availability resolves', () => {
     mockUseUserPermissionConfig.mockReturnValue({
       data: { config: { ...DEFAULT_PERMISSION_GROUP_CONFIG, allowedIntegrations: [] } },

apps/sim/hooks/use-permission-config.ts

@@ -35,6 +35,14 @@ export interface PermissionConfigResult {
   filterBlocks: <T extends { type: string }>(blocks: T[]) => T[]
   filterProviders: (providerIds: string[]) => string[]
   isBlockAllowed: (blockType: string) => boolean
+  /**
+   * Whether the integration policy (permission group allowlist intersected with
+   * the deployment's `ALLOWED_INTEGRATIONS`) permits a block, regardless of
+   * whether this deployment has the block's OAuth client configured. Surfaces
+   * that show an unconfigured integration as unavailable, rather than hiding
+   * it, filter by this instead of {@link isBlockAllowed}.
+   */
+  isBlockPermitted: (blockType: string) => boolean
   /** Presentation-only hint; request creation revalidates the deployed public catalog. */
   isBlockRequestable: (blockType: string) => boolean
   /**
@@ -138,6 +146,14 @@ export function usePermissionConfig(): PermissionConfigResult {
     [envAllowlistData?.oauthServiceAvailability]
   )
 
+  const isBlockPermitted = useMemo(() => {
+    return (blockType: string) => {
+      if (isBlockTypeAccessControlExempt(blockType)) return true
+      if (allowedAccessControlTypes === null) return true
+      return allowedAccessControlTypes.has(resolveAccessControlBlockType(blockType.toLowerCase()))
+    }
+  }, [allowedAccessControlTypes])
+
   const isBlockAllowed = useMemo(() => {
     return (blockType: string) => {
       const normalizedBlockType = blockType.toLowerCase()
@@ -152,11 +168,9 @@ export function usePermissionConfig(): PermissionConfigResult {
       ) {
         return false
       }
-      if (isBlockTypeAccessControlExempt(blockType)) return true
-      if (allowedAccessControlTypes === null) return true
-      return allowedAccessControlTypes.has(resolveAccessControlBlockType(normalizedBlockType))
+      return isBlockPermitted(blockType)
     }
-  }, [hostContext?.features?.credentialGroups, integrationAvailability, allowedAccessControlTypes])
+  }, [hostContext?.features?.credentialGroups, integrationAvailability, isBlockPermitted])
 
   const isBlockRequestable = useMemo(() => {
     const deploymentAllowlist = intersectAccessControlAllowlists(
@@ -241,6 +255,7 @@ export function usePermissionConfig(): PermissionConfigResult {
       filterBlocks,
       filterProviders,
       isBlockAllowed,
+      isBlockPermitted,
       isBlockRequestable,
       isModelUsable,
       isToolAllowed,
@@ -264,6 +279,7 @@ export function usePermissionConfig(): PermissionConfigResult {
       filterBlocks,
       filterProviders,
       isBlockAllowed,
+      isBlockPermitted,
       isBlockRequestable,
       isModelUsable,
       isToolAllowed,