diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-selector-setup.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-selector-setup.ts index e9acaca7dc..cdbf1e17b6 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-selector-setup.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-selector-setup.ts @@ -3,8 +3,9 @@ import { useMemo } from 'react' import { useParams } from 'next/navigation' import type { SubBlockConfig } from '@/blocks/types' -import { isEnvVarReference, isReference } from '@/executor/constants' +import { extractEnvVarName, isEnvVarReference, isReference } from '@/executor/constants' import type { SelectorContext, SelectorKey } from '@/hooks/selectors/types' +import { useEnvironmentStore } from '@/stores/settings/environment' import { useWorkflowRegistry } from '@/stores/workflows/registry/store' import { useDependsOnGate } from './use-depends-on-gate' @@ -30,23 +31,43 @@ export function useSelectorSetup( const activeWorkflowId = useWorkflowRegistry((s) => s.activeWorkflowId) const workflowId = (params?.workflowId as string) || activeWorkflowId || '' + const envVariables = useEnvironmentStore((s) => s.variables) + const { finalDisabled, dependencyValues, canonicalIndex } = useDependsOnGate( blockId, subBlock, opts ) + const resolvedDependencyValues = useMemo(() => { + const resolved: Record = {} + for (const [key, value] of Object.entries(dependencyValues)) { + if (value === null || value === undefined) { + resolved[key] = value + continue + } + const str = String(value) + if (isEnvVarReference(str)) { + const varName = extractEnvVarName(str) + resolved[key] = envVariables[varName]?.value || undefined + } else { + resolved[key] = value + } + } + return resolved + }, [dependencyValues, envVariables]) + const selectorContext = useMemo(() => { const context: SelectorContext = { workflowId, mimeType: subBlock.mimeType, } - for (const [depKey, value] of Object.entries(dependencyValues)) { + for (const [depKey, value] of Object.entries(resolvedDependencyValues)) { if (value === null || value === undefined) continue const strValue = String(value) if (!strValue) continue - if (isReference(strValue) || isEnvVarReference(strValue)) continue + if (isReference(strValue)) continue const canonicalParamId = canonicalIndex.canonicalIdBySubBlockId[depKey] ?? depKey @@ -58,14 +79,14 @@ export function useSelectorSetup( } return context - }, [dependencyValues, canonicalIndex, workflowId, subBlock.mimeType]) + }, [resolvedDependencyValues, canonicalIndex, workflowId, subBlock.mimeType]) return { selectorKey: (subBlock.selectorKey ?? null) as SelectorKey | null, selectorContext, allowSearch: subBlock.selectorAllowSearch ?? true, disabled: finalDisabled || !subBlock.selectorKey, - dependencyValues, + dependencyValues: resolvedDependencyValues, } } diff --git a/apps/sim/hooks/selectors/use-selector-query.ts b/apps/sim/hooks/selectors/use-selector-query.ts index 4ed0770cdc..6486e76977 100644 --- a/apps/sim/hooks/selectors/use-selector-query.ts +++ b/apps/sim/hooks/selectors/use-selector-query.ts @@ -1,8 +1,9 @@ import { useMemo } from 'react' import { useQuery } from '@tanstack/react-query' -import { isEnvVarReference, isReference } from '@/executor/constants' +import { extractEnvVarName, isEnvVarReference, isReference } from '@/executor/constants' import { getSelectorDefinition, mergeOption } from '@/hooks/selectors/registry' import type { SelectorKey, SelectorOption, SelectorQueryArgs } from '@/hooks/selectors/types' +import { useEnvironmentStore } from '@/stores/settings/environment' interface SelectorHookArgs extends Omit { search?: string @@ -30,14 +31,25 @@ export function useSelectorOptionDetail( key: SelectorKey, args: SelectorHookArgs & { detailId?: string } ) { + const envVariables = useEnvironmentStore((s) => s.variables) const definition = getSelectorDefinition(key) + + const resolvedDetailId = useMemo(() => { + if (!args.detailId) return undefined + if (isReference(args.detailId)) return undefined + if (isEnvVarReference(args.detailId)) { + const varName = extractEnvVarName(args.detailId) + return envVariables[varName]?.value || undefined + } + return args.detailId + }, [args.detailId, envVariables]) + const queryArgs: SelectorQueryArgs = { key, context: args.context, - detailId: args.detailId, + detailId: resolvedDetailId, } - const hasRealDetailId = - Boolean(args.detailId) && !isReference(args.detailId!) && !isEnvVarReference(args.detailId!) + const hasRealDetailId = Boolean(resolvedDetailId) const baseEnabled = hasRealDetailId && definition.fetchById !== undefined ? definition.enabled @@ -47,7 +59,7 @@ export function useSelectorOptionDetail( const enabled = args.enabled ?? baseEnabled const query = useQuery({ - queryKey: [...definition.getQueryKey(queryArgs), 'detail', args.detailId ?? 'none'], + queryKey: [...definition.getQueryKey(queryArgs), 'detail', resolvedDetailId ?? 'none'], queryFn: () => definition.fetchById!(queryArgs), enabled, staleTime: definition.staleTime ?? 300_000,