Overview

Trying to add a JS component, when adding it by using the "Add to components" button on the top right corner, everything works okay. In the case when trying to add from the Library tab "Code" region, it fails and the internal API returns a 422 response. Request payload seems to be missing the "imported_js_components" value.

Steps to reproduce:

  1. Create a new JS component
  2. When it is ready to be used, try to add it by clicking on the left Library menu, Code section, click on the hamburger menu and click "Add to components"
  3. Click Add on the modal and see the error

Button to click
Error on the UI
Request error

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

attilatilman created an issue. See original summary.

attilatilman’s picture

Issue summary: View changes
attilatilman’s picture

Issue summary: View changes
wim leers’s picture

Component: Internal HTTP API » Theme builder
Status: Active » Postponed (maintainer needs more info)

I would swear this was fixed weeks ago 😬

Which commit or tag of XB was this tested on?

hooroomoo’s picture

It was changed back here: https://www.drupal.org/project/experience_builder/issues/3521819#comment... in order to resolve that bug's issue.

But the change itself is a band-aid solution that solved the above issue, but causes the 422 error here. We will want to update the band-aid solution to a proper one but it will require work. @tedbow actually started on a proof of concept solution to address this: #3524274: Component list for UI Library should return auto-saved code components if any

I think in order to address this there's 2 options:

  1. Continue on #3524274: Component list for UI Library should return auto-saved code components if any if that approach looks good
  2. Remove the "Add to components" from the contextual menu for now, and make users click it from the top right in the code editor (which is working with the band-aid). And then return to #1 later and replace the band-aid fix, if we want to prioritize what's currently in the remaining sprints before GA

My opinion is doing #2 because it seems like most people have been adding components using the top right button in the code editor anyway.

lauriii’s picture

Status: Postponed (maintainer needs more info) » Active

Makes sense to remove the button while it's broken. 👍

hooroomoo’s picture

Title: Trying to add JS component, fails with 422 response » Temporarily remove
Status: Active » Needs review

Opened an MR to remove the "Add to components" menu item from the contextual menu for now. Added a todo that points to #3524274: Component list for UI Library should return auto-saved code components if any which will replace the band-aid solution with a proper one.

The reason behind this bug is because in the "add to components" PATCH request, we are currently sending "...selectedComponent" along with status: true. Ideally the frontend should only have to send the necessary changes, in this case status: true. See #3508140: PATCH request for config entities reset values that are not sent.

The band-aid is that we send "...selectedComponent" in the PATCH. Without sending that as of now, I think the hovered preview, and props and slots breaks which is a serious bug. I think this is because the component entities displayed in the component UI list ignores auto-saved JS components.

The contextual menu "Add to components" sends the JS component config entity (...selectedComponent) since thats what we use to render the list of code components. The JS component config entity doesn't include imported_js_components (by backend design) and so the server complains because it requires imported_js_components to be sent when its also sent compiled_js

The bug doesn't happen from clicking the top right "Add to components" button because ...selectedComponent in this case is taken from our redux store of the code editor which stores the imported_js_components property that the error is about.

hooroomoo’s picture

Title: Temporarily remove » Temporarily remove "Add to components" from contextual menu
balintbrews’s picture

Assigned: Unassigned » hooroomoo
Issue tags: +Needs reroll

I also think removing it for now is the good call. Approved the MR, assigning back to @hooroomoo to resolve the conflicts, then this can be merged.

balintbrews’s picture

Status: Needs review » Needs work

  • hooroomoo committed e79b245e on 0.x
    Issue #3528151 by hooroomoo: Temporarily remove "Add to components" from...
hooroomoo’s picture

Assigned: hooroomoo » Unassigned
Status: Needs work » Fixed
Issue tags: -Needs reroll

Status: Fixed » Closed (fixed)

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