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

sc

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

Issue fork canvas-3548322

Command icon 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

hooroomoo created an issue. See original summary.

hooroomoo’s picture

Not 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

hooroomoo’s picture

Issue summary: View changes
hooroomoo’s picture

Title: Followup for #3541037: Improve how list of field suggestions is displayed in the UI » Followup for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
hooroomoo’s picture

Title: Followup for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
wim leers’s picture

Component: … to be triaged » Page builder
Issue tags: +JavaScript
StatusFileSize
new125.04 KB

@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.

wim leers’s picture

Title: Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » [needs design/product] Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
Assigned: Unassigned » lauriii
Status: Active » Postponed (maintainer needs more info)
Issue tags: -JavaScript +JavaScript, +Needs design, +Needs product manager review

It'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! 🤓

hooroomoo’s picture

hooroomoo’s picture

Issue summary: View changes
hooroomoo’s picture

Issue summary: View changes
hooroomoo’s picture

Issue summary: View changes
lauriii’s picture

Assigned: lauriii » Unassigned
Status: Postponed (maintainer needs more info) » Active
Issue tags: -Needs product manager review
StatusFileSize
new331.49 KB

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

  1. We should sort the fields based on default form display order (when there is a form display to reference)
  2. Fields not on the form display should be displayed below the ones that are on form display in alphabetical order
  3. In the scenario of file entity in images, we should simplify the structure and bring the file entity properties to the second level
  4. .

  5. We should capitalize properties
  6. We should not display 'only' as a prefix
hooroomoo’s picture

Title: [needs design/product] Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
Issue tags: -Needs design

Removing needs design/needs product tag since we have a path forward now

effulgentsia’s picture

Title: Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » [PP-1] Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
Status: Active » Postponed
wim leers’s picture

🥳 #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:

diff --git a/src/Plugin/Canvas/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php b/src/Plugin/Canvas/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php
index 1ee73f0cc..05aea558c 100644
--- a/src/Plugin/Canvas/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php
+++ b/src/Plugin/Canvas/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php
@@ -645,7 +645,7 @@ abstract class GeneratedFieldExplicitInputUxComponentSourceBase extends Componen
       $form[$sdc_prop_name]['#disabled'] = $disabled;
 
       if ($entity instanceof ContentTemplate) {
-        $suggestions = FieldForComponentSuggester::structureSuggestionsForResponse($this->fieldForComponentSuggester->suggest(
+        $suggestions = FieldForComponentSuggester::structureSuggestionsForHierarchicalResponse($this->fieldForComponentSuggester->suggest(
           $this->getSourceSpecificComponentId(),
           $this->getMetadata(),
           $entity->getTargetEntityDataDefinition(),

(The back end could not be changed in that issue without breaking the UI.)

wim leers’s picture

Title: [PP-1] Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » Improve how list of field suggestions is displayed in the UI for `ContentTemplates`
Assigned: Unassigned » hooroomoo
Status: Postponed » Active
Issue tags: +Usability
StatusFileSize
new354.78 KB

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

hooroomoo’s picture

⚠️⚠️ See video below or see Gitlab MR for video
VIDEO

title
link text
nest

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.

parentvalid

hooroomoo’s picture

StatusFileSize
new5.09 MB
hooroomoo’s picture

Issue summary: View changes
hooroomoo’s picture

Issue summary: View changes
hooroomoo’s picture

Title: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` » Improve how list of field suggestions is displayed in the UI for `ContentTemplates` and remove feature flag

Adding "remove feature flag" in issue title for VISIBLITY

  • hooroomoo committed 327cc242 on 1.x
    [#3548322] feat: Improve how list of field suggestions is displayed in...
hooroomoo’s picture

Title: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` and remove feature flag » Improve how list of field suggestions is displayed in the UI for `ContentTemplates` and remove `ContentTemplates` from feature flag
Assigned: hooroomoo » Unassigned
Status: Active » Fixed

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

wim leers’s picture

Assigned: Unassigned » hooroomoo
Status: Fixed » Patch (to be ported)
Issue tags: +Needs followup

AWESOME! 🤩 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. 🙏

hooroomoo’s picture

Status: Patch (to be ported) » Needs review
hooroomoo’s picture

Assigned: hooroomoo » Unassigned
bnjmnm’s picture

Status: Needs review » Reviewed & tested by the community

The cleanup looks good!

  • hooroomoo committed 8f978424 on 1.x
    [#3548322] fix: Visual tidy-up to list of field suggestions in UI for `...
hooroomoo’s picture

Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs followup

Opened #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.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

wim leers’s picture

Thanks! And … nice! 🤩

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.