Overview
#3541037: Allow linking `ContentTemplate` SDC/code component instance props to fields (aka finally use `DynamicPropSource`s!) added the ability to link a prop of a component to a content type field.
This is a follow-up to improve how the list of suggestions is displayed in the UI. Currently it is presented as a flat list. We can do a nested menu structure and also update how the used field is displayed in the menu by removing the '(active)' string.
This is the frontend counter part of #3547598: Refine API response with DynamicPropSource suggestions to provide better UX.
This issue also removes the Content templates feature out of the dev mode flag

Proposed resolution
- Nested menu structure
- Update how the selected field is displayed. Currently it says '(active)' in the menu item and it is disabled but we can either replace the '(active)' with a checkmark, or use blue text. Run by design?
User interface changes
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | Screen Recording 2025-10-08 at 5.mp4 | 5.09 MB | hooroomoo |
| #19 | Screenshot 2025-10-08 at 5.48.14 PM.png | 43.2 KB | hooroomoo |
| #19 | Screenshot 2025-10-08 at 5.49.02 PM.png | 43.22 KB | hooroomoo |
| #19 | Screenshot 2025-10-08 at 5.49.20 PM.png | 39.31 KB | hooroomoo |
| #19 | Screenshot 2025-10-08 at 5.52.14 PM.png | 41.66 KB | hooroomoo |
Issue fork canvas-3548322
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
hooroomooComment #3
hooroomooNot sure if there is another MR that's supposed to happen here: #3547598: Refine API response with DynamicPropSource suggestions to provide better UX that would be good to have before starting this MR
Comment #4
hooroomooComment #5
hooroomooComment #6
hooroomooComment #7
wim leers@lauriii and Callum indicated this should use a nested contextual menu, like we know from most desktop operating systems:

@jessebaker suggested to use https://www.radix-ui.com/primitives/docs/components/context-menu.
Comment #8
wim leersIt's unclear what exactly is expected here, see #11, #14 and #15 at #3547598: Refine API response with DynamicPropSource suggestions to provide better UX.
@hooroomoo — curious about your thoughts over there too! 🤓
Comment #9
hooroomooResponded in https://www.drupal.org/project/canvas/issues/3547598#comment-16279558
Comment #10
hooroomooComment #11
hooroomooComment #12
hooroomooComment #13
lauriiiI think we should do something along the lines of this (which is really close to what @hooroomoo had posted on #3547598: Refine API response with DynamicPropSource suggestions to provide better UX):
.
Comment #14
hooroomooRemoving needs design/needs product tag since we have a path forward now
Comment #15
effulgentsia commentedThis is blocked on #3547598: Refine API response with DynamicPropSource suggestions to provide better UX.
Comment #16
wim leers🥳 #3547598: Refine API response with DynamicPropSource suggestions to provide better UX is on the verge of landing!
Once it's in, whomever works on this only needs to change this one line on the back end:
(The back end could not be changed in that issue without breaking the UI.)
Comment #17
wim leers#3547598 implemented the hierarchical structure proposed by @hooroomoo at #3547598-26: Refine API response with DynamicPropSource suggestions to provide better UX. When in doubt, consult the OpenAPI spec and its examples as a reference. In particular, look at the 3rd example provided there, because it illustrates the most complex edge case @hooroomoo was worried about:

Comment #19
hooroomoo⚠️⚠️ See video below or see Gitlab MR for video
VIDEO
Edge case where a valid parent suggestion also has children suggestion. In this case, we render the parent suggestion in it's own submenu with a separator below it. This is talked about in #17.
Comment #20
hooroomooComment #21
hooroomooComment #22
hooroomooComment #23
hooroomooAdding "remove feature flag" in issue title for VISIBLITY
Comment #25
hooroomooComment #27
wim leersAWESOME! 🤩 Looks like @hooroomoo's proposed response structure worked out very well 👏
I'm only surprised by the skipping of "revision log message" if it's the only suggestion. I don't see that being discussed anywhere. It doesn't belong in the UI. Please create a follow-up issue for that. 🙏
Comment #29
hooroomooComment #30
hooroomooComment #31
bnjmnmThe cleanup looks good!
Comment #33
hooroomooOpened #3551339: Suggest only relevant DynamicPropSources per #27.
Removed the hard-coded Revision log message removal in the frontend in https://git.drupalcode.org/project/canvas/-/merge_requests/218#note_603115.
Comment #35
wim leersThanks! And … nice! 🤩