create credentialCondition

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
+import { createElement, useCallback, useMemo, useState } from 'react'
 import { ExternalLink, Users } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Combobox } from '@/components/emcn/components'
@@ -128,14 +128,6 @@ export function CredentialSelector({
     [selectedCredential]
   )
 
-  const [, setIsServiceAccount] = useSubBlockValue<string>(blockId, 'isServiceAccount')
-
-  const isAdvancedMode = subBlock.mode === 'advanced'
-
-  useEffect(() => {
-    setIsServiceAccount(isAdvancedMode || isServiceAccount ? 'true' : '')
-  }, [isServiceAccount, isAdvancedMode, setIsServiceAccount])
-
   const selectedCredentialSet = useMemo(
     () => credentialSets.find((cs) => cs.id === selectedCredentialSetId),
     [credentialSets, selectedCredentialSetId]

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -52,6 +52,9 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import type { SubBlockConfig } from '@/blocks/types'
+import { useWorkspaceCredential } from '@/hooks/queries/credentials'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWebhookManagement } from '@/hooks/use-webhook-management'
 
 const SLACK_OVERRIDES: SelectorOverrides = {
@@ -615,6 +618,36 @@ function SubBlockComponent({
     previewContextValues: contextValues,
   })
 
+  // Credential-type visibility gate: reactively fetches the credential by ID
+  // and hides the field unless it matches the required type.
+  const credTypeCond = config.credentialTypeCondition
+  const activeWfId = useWorkflowRegistry((s) => (credTypeCond ? s.activeWorkflowId : null))
+
+  const watchedCredentialId = useSubBlockStore(
+    useCallback(
+      (state) => {
+        if (!credTypeCond || !activeWfId) return ''
+        const blockValues = state.workflowValues[activeWfId]?.[blockId] ?? {}
+        const merged = { ...(dependencyContext ?? {}), ...blockValues }
+        for (const field of credTypeCond.watchFields) {
+          const val = merged[field]
+          if (val && typeof val === 'string') return val
+        }
+        return ''
+      },
+      [credTypeCond, activeWfId, blockId, dependencyContext]
+    )
+  )
+
+  const { data: watchedCredential } = useWorkspaceCredential(
+    watchedCredentialId || undefined,
+    Boolean(credTypeCond && watchedCredentialId)
+  )
+
+  if (credTypeCond && watchedCredential?.type !== credTypeCond.requiredType) {
+    return <></> as unknown as JSX.Element
+  }
+
   const isDisabled = gatedDisabled
 
   /**

apps/sim/blocks/types.ts

@@ -356,6 +356,19 @@ export interface SubBlockConfig {
           not?: boolean
         }
       })
+  /**
+   * Declarative credential-type visibility gate. The SubBlock watches the specified
+   * fields for a credential ID, fetches the credential via React Query, and hides
+   * the field unless the credential type matches.
+   *
+   * Works in both block editor and tool-input contexts without side effects.
+   */
+  credentialTypeCondition?: {
+    /** Subblock IDs (or canonical param IDs) to read the credential ID from, in priority order. */
+    watchFields: string[]
+    /** Required credential type for the field to be visible (e.g. 'service_account'). */
+    requiredType: string
+  }
   // Props specific to 'code' sub-block type
   language?: 'javascript' | 'json' | 'python'
   generationType?: GenerationType

apps/sim/blocks/utils.ts

@@ -10,37 +10,20 @@ import { useProvidersStore } from '@/stores/providers/store'
 
 /**
  * Standard subblocks for Google service account impersonation.
- * The credential-selector writes `isServiceAccount` to the store when a service account
- * credential is selected. The `impersonateUserEmail` field conditionally appears for
- * domain-wide delegation to Google Workspace APIs.
+ * The `impersonateUserEmail` field fetches the credential by ID to check if it's
+ * a service account, using `asyncCondition` so it works in both block editor and
+ * agent tool-input contexts without cross-subblock state propagation.
  */
 export const SERVICE_ACCOUNT_SUBBLOCKS: SubBlockConfig[] = [
-  {
-    id: 'isServiceAccount',
-    title: 'Is Service Account',
-    type: 'short-input',
-    hidden: true,
-    mode: 'both',
-  },
   {
     id: 'impersonateUserEmail',
     title: 'Impersonated Account',
     type: 'short-input',
     placeholder: 'Email to impersonate (for service accounts)',
     paramVisibility: 'user-only',
-    condition: (values) => {
-      // In tool-input context (agent tools), __canonicalModes and isServiceAccount
-      // are absent — always show so users can configure impersonation.
-      const hasBlockEditorContext =
-        values?.__canonicalModes !== undefined || values?.isServiceAccount !== undefined
-      if (!hasBlockEditorContext) {
-        return { field: 'isServiceAccount', value: 'does-not-match', not: true }
-      }
-      const modes = values.__canonicalModes as Record<string, string> | undefined
-      if (modes?.oauthCredential === 'advanced') {
-        return { field: 'isServiceAccount', value: 'does-not-match', not: true }
-      }
-      return { field: 'isServiceAccount', value: 'true' }
+    credentialTypeCondition: {
+      watchFields: ['credential', 'oauthCredential', 'manualCredential'],
+      requiredType: 'service_account',
     },
     mode: 'both',
   },

apps/sim/tools/params.ts

@@ -989,8 +989,10 @@ export function getSubBlocksForToolInput(
       // Filter by visibility: exclude hidden and llm-only
       if (visibility === 'hidden' || visibility === 'llm-only') continue
 
-      // Evaluate condition against current values
-      if (sb.condition) {
+      // Evaluate condition against current values.
+      // Skip sync condition check for subblocks with credentialTypeCondition — visibility
+      // is handled at render time by the SubBlock component via React Query.
+      if (sb.condition && !sb.credentialTypeCondition) {
         const conditionMet = evaluateSubBlockCondition(
           sb.condition as SubBlockCondition,
           valuesWithOperation