Issue 30286 - Fix widget layout update removal button to work for multiple layout updates

[zaximus84]

Description (*)

When adding a widget in the Magento admin (Content > Widgets), the remove button (trash can icon) on layout updates doesn't work for any layout update but the first. This is because the current code relies on \Magento\Framework\View\Helper\SecureHtmlRenderer::renderEventListenerAsTag to generate the js click listeners, and that uses document.querySelector to establish the element. The element selector passed to querySelector is not unique because it comes from javascript templating, and it always selects the first matching element on the page. Every time the "Add Layout Button" is clicked, another layout row is added, but the click handler is just added to the first row again.

Using a widget block (PHP) class in combination with javascript templating to produce the click listeners doesn't work for this scenario, so this PR updates the remove buttons to use a standard onclick attribute. It also updates the new widget MFTF test to add and remove layout rows and confirm the resulting counts.

Fixed Issues (if relevant)

1. Fixes Can't remove seconde added Layout Update #30286

Manual testing scenarios (*)

1. In admin, go to Content > Widgets and click New Widget.
2. Select any widget type and design theme and click Continue.
3. Under Layout Updates, click Add Layout Update multiple times.
4. Click the trash can icon on any of the resulting rows and confirm that the intended row is removed.
5. Give special attention to removing a row other than the first when there are multiples (that was the original failure which prompted this PR).

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @zaximus84. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE,
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[mrtuvn]

good catch!. Description clearly to me. But seem a reason previously core team remove this code onclick in template that lead to this issue
@zaximus84
Previous commit related with "MC-29420: Remove event handlers from CE" made by @svitja
svitja
CC @rogyar can you see this

Oh my! Magento now handle click event in php code instead html like before. Maybe this code line here will affect to all element have click event (button, anchor)
https://github.com/magento/magento2/blob/2.4-develop/lib/internal/Magento/Framework/View/Helper/SecureHtmlRenderer.php#L98

[gabrieldagama]

@magento run all tests

[bhaveshpp]

Magento 2.4

I am facing the same issue in my project.
The console is clear there is no error in the console
https://drive.google.com/file/d/1EEhxFnAlPUu_-4srQGkQOP_iVtlLxIm6/view

Did anyone found any solution to this issue?

Thank you.

[zaximus84]

@bhaveshpp
I have a PR open for this, though there's apparently a question about whether this would undo a change intentionally made in the past. You can apply my changes as a patch and see if they work for you without side effects:

https://patch-diff.githubusercontent.com/raw/magento/magento2/pull/30992.diff

layout.phtml is the only file that really needs to be updated to fix the issue.

[rogyar]

@magento run all tests

[rogyar]

@magento run Functional Tests B2B

[mrtuvn]

@rogyar i think this patch from @zaximus84 is better fix and simplest . Can we have further check and approve this soon ?

[rogyar]

The failing tests are not related to the current changeset

[magento-engcom-team]

Hi @rogyar, thank you for the review.
ENGCOM-8502 has been created to process this Pull Request

[engcom-Bravo]

✔️ QA Passed

Manual testing scenario

1. From Admin, go to Content - Widget click Add Widget
2. Select, for example,

• Type - CMS Page Link
• Design Theme - Magento Luma
  Click Continue

3. Using Add Layout Update button, Add 3 Layout Updates, for example
4. Try to remove the added Layouts using the Remove Layout Update (basket)

BEFORE applying changes provided in this PR, only the first Layout Update could be removed

AFTER switching to the PR, all the Layout Updates can be removed

The Widget can be saved successfully

[engcom-Foxtrot]

@magento run all tests

[m2-assistant]

Hi @zaximus84, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.