Load draggable and resizable jquery-ui chunks for dialog widget only if needed

[martasiewierska]

Description (*)

As in our shops we often struggle with huge javascript files, and quite a big amount of unused code, which lowers speed test results, I looked for some opportunity to remove not used code. Magento dropdownDialog widget (docs here: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_dialog.html) is based on dialog widget. In dialog widget, there are available options: draggable and resizable, but in dropdown they are set to false and even not mentioned in the documentation or covered in tests. Besides dropdownDialog, dialog widget is also used in inline translation functionality, but this functionality is not used by end-users in the shop.

To decrease the amount of unnecessary code I added dependency only for dialog widget that really needs resizable and draggable jquery-ui chunks.

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

1. Check if an element that uses dropdown widget (for example minicart) works as expected
2. Enable inline translations and check if you can move and resize translation dialog

Questions or comments

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)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Load draggable and resizable jquery-ui chunks for dialog widget only if needed #32810: Load draggable and resizable jquery-ui chunks for dialog widget only if needed

[m2-assistant]

Hi @martasiewierska. Thank you for your contribution
Here are 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
13. Semantic Version Checker

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

[martasiewierska]

@magento run all tests

[mrtuvn]

cc: Hi @martasiewierska Just have a question ?
https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_dropdown.html => This reference to dropdown widget used in codebase
dropdown widget seem only depend on jquery right ? i don't see reference to dialog (lib/mage/dialog.js) depend on jquery ui dialog
Can you help clarify

[martasiewierska]

@mrtuvn Yes, I pasteed the wrong reference in the documentation, I am sorry. The proper one is: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_dialog.html

So we have:

            'dropdownDialog':         'mage/dropdown',
            'dropdown':               'mage/dropdowns',

The first one is based on dialog.js and is used in minicart, msrp module and checkout sidebar (but is not resizable or draggable there) and the second one is much lighter and used in some other places. I will adjust the description.

[mrtuvn]

Thank you for response! And great improvements
Let's wait for another decision should we need cover this change with any automation tests. Current everything seem ok with me in my view

[ptylek]

Looks good to me. I think this is the same scenario as in other PR and it might be too hard to cover these changes with any test. What do you think @mrtuvn?

[magento-engcom-team]

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

[magento-engcom-team]

@martasiewierska thank you for contributing. Please accept Community Contributors team invitation here to gain extended permissions for this repository.

[mrtuvn]

Agreed with ptylek

[mrtuvn]

@magento create issue

[m2-assistant]

Hi @martasiewierska, 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.