fix(selectors): scope connector caches by dependencies

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field/connector-selector-field.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { ConnectorConfigField } from '@/connectors/types'
+import type { SelectorDefinition, SelectorKey } from '@/hooks/selectors/types'
+
+const { getSelectorDefinitionMock, useSelectorOptionsMock } = vi.hoisted(() => ({
+  getSelectorDefinitionMock: vi.fn(),
+  useSelectorOptionsMock: vi.fn(() => ({
+    data: [],
+    isLoading: false,
+    isFetching: false,
+    isFetchingMore: false,
+    hasMore: false,
+    truncated: false,
+    error: null,
+  })),
+}))
+
+vi.mock('@sim/emcn', () => ({ ChipCombobox: () => null }))
+vi.mock('@sim/emcn/icons', () => ({ Loader: () => null }))
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ workspaceId: 'workspace-1', id: 'knowledge-1' }),
+}))
+vi.mock('@/hooks/selectors/registry', () => ({
+  getSelectorDefinition: getSelectorDefinitionMock,
+}))
+vi.mock('@/hooks/selectors/use-selector-query', () => ({
+  useSelectorOptions: useSelectorOptionsMock,
+  useSelectorOptionDetail: () => ({ data: null }),
+  useSelectorOptionDetails: () => [],
+}))
+vi.mock('@/hooks/use-debounce', () => ({ useDebounce: (value: string) => value }))
+
+import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field/connector-selector-field'
+
+let root: Root | null = null
+
+afterEach(() => {
+  act(() => root?.unmount())
+  root = null
+  document.body.innerHTML = ''
+  vi.clearAllMocks()
+})
+
+describe('ConnectorSelectorField cache scope', () => {
+  it('changes only when a server-resolved selector dependency changes', () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const definition = {
+      key: 'jira.projects' as SelectorKey,
+      serverResolvedContextFields: ['domain'],
+      getQueryKey: () => ['selectors', 'jira.projects'],
+      fetchList: async () => [],
+    } as SelectorDefinition
+    getSelectorDefinitionMock.mockReturnValue(definition)
+
+    const domainField: ConnectorConfigField = {
+      id: 'domain-field',
+      title: 'Domain',
+      type: 'short-input',
+      canonicalParamId: 'domain',
+      mode: 'basic',
+    }
+    const projectField = {
+      id: 'project',
+      title: 'Project',
+      type: 'selector',
+      selectorKey: definition.key,
+      dependsOn: ['domain-field'],
+    } satisfies ConnectorConfigField & { selectorKey: SelectorKey }
+    const configFields = [domainField, projectField]
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+
+    const render = (domain: string, unrelated: string) => {
+      act(() =>
+        root?.render(
+          <ConnectorSelectorField
+            field={projectField}
+            value=''
+            onChange={vi.fn()}
+            credentialId='credential-1'
+            sourceConfig={{ 'domain-field': domain, unrelated }}
+            configFields={configFields}
+            canonicalModes={{ domain: 'basic' }}
+          />
+        )
+      )
+      return useSelectorOptionsMock.mock.calls.at(-1)?.[1].context.selectorCacheScope
+    }
+
+    const initial = render('{{JIRA_DOMAIN}}', 'first')
+    const afterUnrelatedEdit = render('{{JIRA_DOMAIN}}', 'second')
+    const afterDependencyEdit = render('{{OTHER_DOMAIN}}', 'second')
+
+    expect(initial).toEqual(expect.any(String))
+    expect(afterUnrelatedEdit).toBe(initial)
+    expect(afterDependencyEdit).not.toBe(initial)
+  })
+})

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field/connector-selector-field.tsx

@@ -3,7 +3,6 @@
 import { useMemo, useState } from 'react'
 import { ChipCombobox, type ComboboxOption } from '@sim/emcn'
 import { Loader } from '@sim/emcn/icons'
-import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { SELECTOR_CONTEXT_FIELDS } from '@/lib/workflows/subblocks/context'
@@ -13,6 +12,10 @@ import type {
   ConfigFieldValue,
 } from '@/app/workspace/[workspaceId]/knowledge/[id]/hooks/use-connector-config-fields'
 import type { ConnectorConfigField } from '@/connectors/types'
+import {
+  createSelectorCacheScopeRegistry,
+  scopeServerResolvedSelectorContext,
+} from '@/hooks/selectors/context-resolution'
 import { getSelectorDefinition } from '@/hooks/selectors/registry'
 import type { SelectorContext, SelectorKey } from '@/hooks/selectors/types'
 import {
@@ -46,15 +49,12 @@ export function ConnectorSelectorField({
   const params = useParams<{ workspaceId: string; id: string }>()
   const isMulti = Boolean(field.multi)
   const [searchTerm, setSearchTerm] = useState('')
-  const selectorCacheScope = useMemo(
-    () => generateShortId(),
-    [field.id, field.selectorKey, credentialId, sourceConfig]
-  )
+  const definition = getSelectorDefinition(field.selectorKey)
+  const selectorCacheScopes = useMemo(() => createSelectorCacheScopeRegistry(), [])
 
   const context = useMemo<SelectorContext>(() => {
     const ctx: SelectorContext = {
       workspaceId: params.workspaceId,
-      selectorCacheScope,
     }
     if (credentialId) ctx.oauthCredential = credentialId
     if (field.mimeType) ctx.mimeType = field.mimeType
@@ -69,7 +69,7 @@ export function ConnectorSelectorField({
       }
     }
 
-    return ctx
+    return scopeServerResolvedSelectorContext(definition, ctx, selectorCacheScopes)
   }, [
     credentialId,
     field.mimeType,
@@ -78,7 +78,8 @@ export function ConnectorSelectorField({
     configFields,
     canonicalModes,
     params.workspaceId,
-    selectorCacheScope,
+    definition,
+    selectorCacheScopes,
   ])
 
   const depsResolved = useMemo(() => {
@@ -126,7 +127,7 @@ export function ConnectorSelectorField({
    * implementations resolve a record by id, where a partial keystroke is a guaranteed
    * failed upstream request rather than an empty result.
    */
-  const resolvesUnknownIds = Boolean(getSelectorDefinition(field.selectorKey).resolvesUnknownIds)
+  const resolvesUnknownIds = Boolean(definition.resolvesUnknownIds)
   const debouncedSearch = useDebounce(searchTerm.trim(), SEARCH_DEBOUNCE_MS)
   const { data: searchedOption } = useSelectorOptionDetail(field.selectorKey, {
     context,