Fix reactive subblocks and avoid duplicate credential resolve

Author: cursoragent

apps/sim/app/api/auth/oauth/utils.test.ts

@@ -166,7 +166,6 @@ describe('OAuth Utils', () => {
         accountId: 'account-id',
         workspaceId: 'workspace-id',
       }
-      const mockCredentialRow = { type: 'oauth', accountId: 'account-id' }
       const mockAccountRow = {
         id: 'account-id',
         accessToken: 'valid-token',
@@ -176,7 +175,6 @@ describe('OAuth Utils', () => {
         userId: 'test-user-id',
       }
       mockSelectChain([mockResolvedCredential])
-      mockSelectChain([mockCredentialRow])
       mockSelectChain([mockAccountRow])
 
       const token = await refreshAccessTokenIfNeeded('credential-id', 'test-user-id', 'request-id')
@@ -192,7 +190,6 @@ describe('OAuth Utils', () => {
         accountId: 'account-id',
         workspaceId: 'workspace-id',
       }
-      const mockCredentialRow = { type: 'oauth', accountId: 'account-id' }
       const mockAccountRow = {
         id: 'account-id',
         accessToken: 'expired-token',
@@ -202,7 +199,6 @@ describe('OAuth Utils', () => {
         userId: 'test-user-id',
       }
       mockSelectChain([mockResolvedCredential])
-      mockSelectChain([mockCredentialRow])
       mockSelectChain([mockAccountRow])
       mockUpdateChain()
 
@@ -221,7 +217,6 @@ describe('OAuth Utils', () => {
 
     it('should return null if credential not found', async () => {
       mockSelectChain([])
-      mockSelectChain([])
 
       const token = await refreshAccessTokenIfNeeded('nonexistent-id', 'test-user-id', 'request-id')
 
@@ -235,7 +230,6 @@ describe('OAuth Utils', () => {
         accountId: 'account-id',
         workspaceId: 'workspace-id',
       }
-      const mockCredentialRow = { type: 'oauth', accountId: 'account-id' }
       const mockAccountRow = {
         id: 'account-id',
         accessToken: 'expired-token',
@@ -245,7 +239,6 @@ describe('OAuth Utils', () => {
         userId: 'test-user-id',
       }
       mockSelectChain([mockResolvedCredential])
-      mockSelectChain([mockCredentialRow])
       mockSelectChain([mockAccountRow])
 
       mockRefreshOAuthToken.mockResolvedValueOnce(null)

apps/sim/app/api/auth/oauth/utils.ts

@@ -231,10 +231,14 @@ export async function getCredential(requestId: string, credentialId: string, use
     return undefined
   }
 
+  return getCredentialByAccountId(requestId, resolved.accountId, userId)
+}
+
+async function getCredentialByAccountId(requestId: string, accountId: string, userId: string) {
   const credentials = await db
     .select()
     .from(account)
-    .where(and(eq(account.id, resolved.accountId), eq(account.userId, userId)))
+    .where(and(eq(account.id, accountId), eq(account.userId, userId)))
     .limit(1)
 
   if (!credentials.length) {
@@ -244,7 +248,7 @@ export async function getCredential(requestId: string, credentialId: string, use
 
   return {
     ...credentials[0],
-    resolvedCredentialId: resolved.accountId,
+    resolvedCredentialId: accountId,
   }
 }
 
@@ -365,8 +369,7 @@ export async function refreshAccessTokenIfNeeded(
     return getServiceAccountToken(resolved.credentialId, scopes, impersonateEmail)
   }
 
-  // Get the credential directly using the getCredential helper
-  const credential = await getCredential(requestId, credentialId, userId)
+  const credential = await getCredentialByAccountId(requestId, resolved.accountId, userId)
 
   if (!credential) {
     return null

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useQueries } from '@tanstack/react-query'
 import {
   buildCanonicalIndex,
   evaluateSubBlockCondition,
@@ -7,13 +8,18 @@ import {
   isSubBlockVisibleForMode,
 } from '@/lib/workflows/subblocks/visibility'
 import type { BlockConfig, SubBlockConfig, SubBlockType } from '@/blocks/types'
-import { useWorkspaceCredential } from '@/hooks/queries/credentials'
+import { type WorkspaceCredential, workspaceCredentialKeys } from '@/hooks/queries/credentials'
+import { fetchJson } from '@/hooks/selectors/helpers'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
+interface CredentialResponse {
+  credential?: WorkspaceCredential | null
+}
+
 /**
  * Evaluates reactive conditions for subblocks. Always calls the same hooks
  * regardless of whether a reactive condition exists (Rules of Hooks).
@@ -26,45 +32,86 @@ function useReactiveConditions(
   activeWorkflowId: string | null,
   blockSubBlockValues: Record<string, unknown>
 ): Set<string> {
-  const reactiveSubBlock = useMemo(
-    () => subBlocks.find((sb) => sb.reactiveCondition),
+  const reactiveSubBlocks = useMemo(
+    () => subBlocks.filter((subBlock) => subBlock.reactiveCondition),
     [subBlocks]
   )
-  const reactiveCond = reactiveSubBlock?.reactiveCondition
 
   // Subscribe to watched field values — always called (stable hook count)
-  const watchedCredentialId = useSubBlockStore(
+  const watchedCredentialIdsBySubBlock = useSubBlockStore(
     useCallback(
       (state) => {
-        if (!reactiveCond || !activeWorkflowId) return ''
+        if (!activeWorkflowId || reactiveSubBlocks.length === 0) return {}
         const blockValues = state.workflowValues[activeWorkflowId]?.[blockId] ?? {}
         const merged = { ...blockSubBlockValues, ...blockValues }
-        for (const field of reactiveCond.watchFields) {
-          const val = merged[field]
-          if (val && typeof val === 'string') return val
-        }
-        return ''
+        return reactiveSubBlocks.reduce<Record<string, string>>((acc, subBlock) => {
+          const reactiveCondition = subBlock.reactiveCondition
+          if (!reactiveCondition) return acc
+
+          for (const field of reactiveCondition.watchFields) {
+            const value = merged[field]
+            if (value && typeof value === 'string') {
+              acc[subBlock.id] = value
+              break
+            }
+          }
+
+          return acc
+        }, {})
       },
-      [reactiveCond, activeWorkflowId, blockId, blockSubBlockValues]
+      [activeWorkflowId, blockId, blockSubBlockValues, reactiveSubBlocks]
     )
   )
 
-  // Always call useWorkspaceCredential (stable hook count), disable when not needed
-  const { data: credential } = useWorkspaceCredential(
-    watchedCredentialId || undefined,
-    Boolean(reactiveCond && watchedCredentialId)
+  const watchedCredentialIds = useMemo(
+    () => Array.from(new Set(Object.values(watchedCredentialIdsBySubBlock))),
+    [watchedCredentialIdsBySubBlock]
   )
 
+  const credentialQueries = useQueries({
+    queries: watchedCredentialIds.map((credentialId) => ({
+      queryKey: workspaceCredentialKeys.detail(credentialId),
+      queryFn: async ({ signal }: { signal: AbortSignal }) => {
+        const data = await fetchJson<CredentialResponse>(`/api/credentials/${credentialId}`, {
+          signal,
+        })
+        return data.credential ?? null
+      },
+      enabled: Boolean(credentialId) && reactiveSubBlocks.length > 0,
+      staleTime: 60 * 1000,
+    })),
+  })
+
+  const credentialTypeById = useMemo(() => {
+    const typeById = new Map<string, WorkspaceCredential['type']>()
+    watchedCredentialIds.forEach((credentialId, index) => {
+      const credential = credentialQueries[index]?.data
+      if (credential?.type) {
+        typeById.set(credentialId, credential.type)
+      }
+    })
+    return typeById
+  }, [credentialQueries, watchedCredentialIds])
+
   return useMemo(() => {
     const hidden = new Set<string>()
-    if (!reactiveSubBlock || !reactiveCond) return hidden
+    if (reactiveSubBlocks.length === 0) return hidden
 
-    const conditionMet = credential?.type === reactiveCond.requiredType
-    if (!conditionMet) {
-      hidden.add(reactiveSubBlock.id)
+    for (const subBlock of reactiveSubBlocks) {
+      const reactiveCondition = subBlock.reactiveCondition
+      if (!reactiveCondition) continue
+
+      const watchedCredentialId = watchedCredentialIdsBySubBlock[subBlock.id]
+      const credentialType = watchedCredentialId
+        ? credentialTypeById.get(watchedCredentialId)
+        : undefined
+      if (credentialType !== reactiveCondition.requiredType) {
+        hidden.add(subBlock.id)
+      }
     }
+
     return hidden
-  }, [reactiveSubBlock, reactiveCond, credential?.type])
+  }, [credentialTypeById, reactiveSubBlocks, watchedCredentialIdsBySubBlock])
 }
 
 /**