🇺🇸United States @hooroomoo

Un-assigning myself because I have to hand this off. Updated MR description

hooroomoo → changed the visibility of the branch 3537654-automatically-detect-first-party to hidden.

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → made their first commit to this issue’s fork.

🥳

Left some comments

@jessebaker do you have concrete steps to reproduce the issue on 1.x? I tried to create similar scenarios as the GIF with the components i have but i haven't been able to reproduce the issue

hooroomoo → made their first commit to this issue’s fork.

I opened 2 new issues:
#3551343: Add type-appropriate icons for LinkedFieldBox.tsx in `ContentTemplates` →
📌 Triage shape-matched DynamicPropSources: remove irrelevant ones such as any revision information Active

I am adding them to the Lower priority/need scope clarity Confirmed with product these are out of scope for 1.0 section for now... If anyone disagrees please feel free to move it. But adding them to the META so they can be tracked.

hooroomoo → created an issue.

Nice!!!

Opened 📌 Triage shape-matched DynamicPropSources: remove irrelevant ones such as any revision information Active 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.

hooroomoo → created an issue.

hooroomoo → made their first commit to this issue’s fork.

Adding "remove feature flag" in issue title for VISIBLITY

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

hooroomoo → made their first commit to this issue’s fork.

adding at least 1 tag to this so this doesn't get lost in the weedz

Moved FE 📌 UI polish for `ContentTemplates` feature Active 📌 Follow-up for #3541037: Contextual panel flickers when linking prop to field Active to completed

I approved but want @jessebaker to check over my latest commit.

Yay!! And also adding 📌 Investigate updateExistingComponentValues to maybe not require component deselect / reselect. Postponed as related issue

📌 Follow-up for #3541037: Contextual panel flickers when linking prop to field Active is in! so changing status from postponed

We can close this. Can open a new issue if something else comes up.

Left a question

Tested and works great! Left some comments and a question

When deleting a component on a page, it should not redirect user outside of the page.

So this got fixed in 📌 FE follow up to Only allow deleting Code Components if there's 0 usages Active

But looks like @lauriii is asking for

When deleting a component while editing that component, it should redirect user back to the page they were editing before.

so we don't want to redirect to /editor if you were editing the code component that was deleted

This is the media field I configured for the Article content type and the second code snippet is the article content template where I added the Card SDC.

// field.field.node.article.field_media.yml

uuid: 64ec6591-f4f6-4258-90a0-4f58ba742827
langcode: en
status: true
dependencies:
  config:
    - field.storage.node.field_media
    - media.type.audio
    - media.type.document
    - media.type.image
    - media.type.remote_video
    - media.type.video
    - node.type.article
id: node.article.field_media
field_name: field_media
entity_type: node
bundle: article
label: media
description: ''
required: true
translatable: false
default_value: {  }
default_value_callback: ''
settings:
  handler: 'default:media'
  handler_settings:
    target_bundles:
      audio: audio
      document: document
      image: image
      remote_video: remote_video
      video: video
    sort:
      field: _none
      direction: ASC
    auto_create: false
    auto_create_bundle: document
field_type: entity_reference

// canvas.content_template.node.article.full.yml

uuid: 4b74ff90-c411-48c7-a655-78bd64200a52
langcode: en
status: true
dependencies:
  config:
    - canvas.component.sdc.canvas_test_sdc.card
    - core.entity_view_mode.node.full
  module:
    - options
id: node.article.full
content_entity_type_id: node
content_entity_type_bundle: article
content_entity_type_view_mode: full
component_tree:
  -
    uuid: 8f152218-fdcf-467b-bd11-4c408400e5af
    component_id: sdc.canvas_test_sdc.card
    component_version: 3b105d413d26cd38
    inputs: '{"heading":"Card","content":"In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a suggestion for reaching the North Pole by an aerostat.","footer":"I have a footer!","image":{"sourceType":"default-relative-url","value":{"src":"balloons.png","alt":"Hot air balloons","width":640,"height":427},"jsonSchema":{"type":"object","properties":{"src":{"type":"string","contentMediaType":"image\/*","format":"uri-reference","x-allowed-schemes":["http","https"]},"alt":{"type":"string"},"width":{"type":"integer"},"height":{"type":"integer"}},"required":["src"]},"componentId":"sdc.canvas_test_sdc.card"},"sizes":"auto 50vw","loading":"eager"}'
exposed_slots: {  }

Tested and #6 fixed the reported issue here! So now can render the component instance form with the presence of the media field.

But I'm not able to link a required media field (even with only image media type is selected) to the image prop of my Card SDC. Is this a known issue? Or maybe a regression happened? I see it was originally fixed here: Linker does not appear for certain field widgets 🐛 `LinkedPropSource` render element does not appear for Media Library Widget Active

1. Add required media field to article content type with only image selected
2. Create an article and add an image to the media field
3. Go to canvas and open article template for the node created
4. Add Card SDC and there is no linker that appears for the image prop

Nice sleuthing

2 small things

@bnjmnm walked me through the MR and his reasoning and it makes sense to me. Yes global window object is side-eyed sometimes, but I think with the ComponentInstanceForm being special and unique in that it can get updated via React or AJAX, it is a valid use case to use the window object since the conventional ReactContext did not completely fulfill our needs by itself. And it is also prefixed with an underscore which is common convention for internal usage and is used in other apps including React which he pointed out.

It did make me wonder if the transforms are static, why don't we store them client-side in a static object so the ComponentInstanceForm always has access to it instead of getting it from the backend?

But after reading redux-integrated-field-widgets.md specifically 3.4.1 Defining your own transform , looks like at least one of the big reasons is for extensibility, so someone can define their own transforms in JS or PHP then the FE would have access to it since the server is the source of truth.

hooroomoo → made their first commit to this issue’s fork.

Left some comments

hooroomoo → made their first commit to this issue’s fork.

Expected API here :-)

And have it in a way where the frontend can just render the JSON directly without any re-ordering/manipulating based on @lauriii's guidelines in #25?

  {
    "id": "some-unique-id" 
    "label": "Image",
    "source": <opaque JSON object>,
    "items": [
      { "id": "some-unique-id", "label": "Changed", "source": <opaque JSON object> },
      { "id": "some-unique-id",  "label": "Created", "source": <opaque JSON object> },
      { "id": "some-unique-id", "label": "File size", "source": <opaque JSON object> }, 
    ]
  },

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

hooroomoo → created an issue.

Or does that happen already and this is to catch the case where the entity was deleted but the UI hasn't been refreshed yet (or if the user visits an out of date url with the id in the params?)?

Yes this, now if a user refreshes from being on an out of date URL, it will redirect to /canvas/template/node/{bundle}/{viewMode} which will either re-route to the new suggestedEntityId or if there is no more content, to the "No content available" screen.

@jessebaker based on #11, I can open a follow-up for that?

Also after adding the feedback Ben left, the Settings tab stays in the panel and only the form refreshes.

wasn't able to get to this today

test failed

Crazy work (very complimentary), left a comment about debounce

Responded in https://www.drupal.org/project/canvas/issues/3547598#comment-16279558 📌 Refine API response with DynamicPropSource suggestions to provide better UX Active

We can do something like this where we utilize separators and labels to differentiate between a field pointing to a field on another entity and a field of which only a subset is consumed (and this could also be a reference field!)

I mocked this up in Figma really quick using the example @wimleers gave in #11 (last code block):

So we could use a label in this case ("File") for fields for another entity and add a separator after it.

Added these issues relating to mapping props to field types to their own category, feel free to rename category or move them to a different one, just want to capture them in the META.

✨ Support linking image and video field to props in a `ContentTemplate` Active
✨ Support linking User/author field to props in a `ContentTemplate` Active
✨ Support linking field types marked SUPPORTED from #3512433 to props in a `ContentTemplate` Active

chungus ✨ Allow linking a component prop of a template to a dynamic field Active is in! 🚨🔥

Added 2 FE follow-ups for that issue:
📌 Follow-up for #3541037: Contextual panel flickers when linking prop to field Active
📌 Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` Active

Opened 2 FE follow-ups
📌 Follow-up for #3541037: Contextual panel flickers when linking prop to field Active
📌 Follow-up for #3541037: Improve how list of field suggestions is displayed in the UI for `ContentTemplates` Active

Not sure if there is another MR that's supposed to happen here: 📌 Refine API response with DynamicPropSource suggestions to provide better UX Active that would be good to have before starting this MR

hooroomoo → created an issue.

hooroomoo → created an issue.