Problem/Motivation
Editors configuring a JS code component need a way to declare which entity fields a prop depends on. The config storage was added in #3585298: Add `dataDependencies.entityFields` to `JavaScriptComponent` config schema as
dataDependencies.entityFields, and the supporting HTTP APIs are added in #3585354: Backend APIs for Entity Reference Selection. This issue wires both together with an editor-facing React UI.
Proposed resolution
Add a "Content Relationship"-style modal dialog to the code component editor. The editor picks an entity type + bundle, then selects fields via checkboxes; reference
fields are expandable and load their children lazily. Selections persist as an array of expression strings in dataDependencies.entityFields[propName].
Existing infrastructure reused (no new auto-save wiring):
codeEditorSliceatui/src/features/code-editor/codeEditorSlice.ts— already managesstate.codeComponent.dataDependencies.setCodeComponentProperty([property, value])action — sets anycodeComponentproperty and flagsneedsAutoSave.useAutoSavehook — already watchesdataDependenciesand dispatches the existing
PATCH /canvas/api/v0/config/auto-save/js_component/{id}mutation.
- Props panel at
ui/src/features/code-editor/component-data/Props.tsx— the entry point ("Bind to entity fields" action on a prop row).
New components (in ui/src/features/code-editor/component-data/entity-reference/):
EntityReferenceSelectionDialog— top-level modal, receivespropName, owns draft state.TypeSelector— combobox for entity type + bundle (RTK Query against/content-entity-types).FieldTree— recursive tree with checkboxes; expanding a reference field triggers a lazy fetch withparent=[expression].FieldRow— leaf row rendering (icon, label, reference-target pill, checkbox).
New RTK Query service:
entityReferenceApi slice in ui/src/services/ with getContentEntityTypes() and getFields(entityType, bundle, parent?)
endpoints, wired into store.ts. Cache tags scoped by entity type + bundle + parent so lazy-loaded subtrees cache independently. 403 responses (from a user's
permissions changing or a parent chain becoming inaccessible) surface as RTK Query errors — consuming components render an error state rather than crashing.
Type extension:
Extend DataDependencies at ui/src/types/CodeComponent.ts with entityFields?: Record<string, string[]>.
Persistence flow (no direct PATCH from the UI):
- Dialog opens with
propNamecontext; reads current selections from Redux. - Local draft state tracks the working set separately from the store — only commits on Save.
- On Save, dispatches
setCodeComponentProperty(['dataDependencies', { ...current, entityFields: { ...current.entityFields, [propName]: [...selected] } }]). Empty arrays/keys are pruned to respect backend
NotBlanksemantics. - The existing
useAutoSavehook observes the store change and auto-saves via the existing mutation. - Cancel discards draft state without dispatching.
Remaining tasks
- Land backend APIs from #3585354: Backend APIs for Entity Reference Selection.
- Extend
DataDependenciesTypeScript type. - Create
entityReferenceApiRTK Query service and register it instore.ts. - Build the four new components with error-state handling for 403s.
- Add "Bind to entity fields" action to
Props.tsx. - Vitest coverage for: Save dispatches correctly-shaped payload, Cancel does not dispatch, empty selections prune keys, dialog initialises from existing Redux
selection, reference-field expansion triggersgetFieldswith the correctparent. - Manual verification: open the JS component editor, configure
entityFieldsfor a prop, save, reload — selections persist.
User interface changes
New modal dialog accessible from the props panel in the code component editor. No changes to existing views.
API changes
None. This issue consumes the endpoints added in #3585354: Backend APIs for Entity Reference Selection and writes via the existing auto-save mutation.
Data model changes
None server-side. Client-side DataDependencies TypeScript type gains an optional entityFields key.
Comments
Comment #2
penyaskitoComment #3
penyaskitoUpdated issue summary with access checks + more details
Comment #4
penyaskitoOops, updated the wrong one
Comment #5
penyaskitoFormat only
Comment #6
wim leersBlocked on #3585354: Backend APIs for Entity Reference Selection.