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):

  • codeEditorSlice at ui/src/features/code-editor/codeEditorSlice.ts — already manages state.codeComponent.dataDependencies.
  • setCodeComponentProperty([property, value]) action — sets any codeComponent property and flags needsAutoSave.
  • useAutoSave hook — already watches dataDependencies and 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, receives propName, 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 with parent=[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):

  1. Dialog opens with propName context; reads current selections from Redux.
  2. Local draft state tracks the working set separately from the store — only commits on Save.
  3. On Save, dispatches
    setCodeComponentProperty(['dataDependencies', { ...current, entityFields: { ...current.entityFields, [propName]: [...selected] }
      }])

    . Empty arrays/keys are pruned to respect backend NotBlank semantics.

  4. The existing useAutoSave hook observes the store change and auto-saves via the existing mutation.
  5. Cancel discards draft state without dispatching.

Remaining tasks

  • Land backend APIs from #3585354: Backend APIs for Entity Reference Selection.
  • Extend DataDependencies TypeScript type.
  • Create entityReferenceApi RTK Query service and register it in store.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 triggers getFields with the correct parent.
  • Manual verification: open the JS component editor, configure entityFields for 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

penyaskito created an issue. See original summary.

penyaskito’s picture

Issue summary: View changes
Issue tags: -JavaScript +JavaScript
penyaskito’s picture

Issue summary: View changes
Issue tags: -JavaScript +JavaScript, +Needs security review

Updated issue summary with access checks + more details

penyaskito’s picture

Oops, updated the wrong one

penyaskito’s picture

Issue summary: View changes
Issue tags: -Needs JavaScript review +JavaScript

Format only

wim leers’s picture

Title: Entity Reference Selection UI » [PP-1] Entity Reference Selection UI
Status: Active » Postponed