Fixes the active_tab param not applying on admin sections that use th…

[jajajaime]

…e tabs.js script

Description (*)

On Admin sections like Sales Order Edit, Product Attribute Edit, Admin User Edit. among others, that use the tabs.js mage script, there exists supporting code to allow for an active_tab to be passed in the URL as a param, and that tab will get selected and load first on the page. This is all working up until the JS has to find the selector and its index on the page, where it is using the wrong selector, so it always gets an index of -1.

Manual testing scenarios (*)

1. Login to the Admin
2. Go view an existing Order
3. Now add this extra param to the url /active_tab/order_shipments and go to that page
4. The Order should now load with the Shipments tab active
5. Do the same now with /active_tab/order_invoices. This should select the Invoices tab on load

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)

[m2-assistant]

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

ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, 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, join the Community Contributions Triage session to discuss the appropriate ticket.

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

[fredden]

Identifiers must be unique on each page. Adding a qualifier to something that's already unique doesn't seem to make sense to me. Perhaps the fix for the problem that you're experiencing is to remove elements or change identifiers to resolve the duplicate problem.

[jajajaime]

I'm not sure I'm following when you say "duplicate". I am just trying to grab the element with the correct identifier that the find returns.

For example above on a product attribute edit page, looking at the anchors that get found, they're all in the form of a#product_attribute_tabs_X
Looking at the id variable, the index method doesn't find anything and always returns a -1, because it can't find #product_attribute_tabs_X, as the a is in front of it.

This makes all edit pages that use the tabs.js script to never be able to link directly to a tab.

[fredden]

$ here is jQuery. Calling jQuery() as a function like this takes a CSS selector as its first argument. The string that's being generated / used here is in the form #identifier, which is an ID selector as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

See here for information about the id attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id (This page is one of many that states that IDs must be unique within a document / page.)

It sounds like this bug requires further investigation.

[jajajaime]

I see what you're saying. The li and child a elements have the same identifier, making the index not find it.
That identifier defined in the backend extension in
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Backend/view/adminhtml/templates/widget/tabs.phtml#L34
and line 37 for the a.

So in reality, probably the actual solution would be to give the a tag a different identifier, and look for that new identifier when trying to find the index in the tabs.js widget.

[fredden]

Yes, that sounds like the right thing to do. Or change (remove?) the id attribute for the list item (<li>) and leave the anchor (<a>) with its current ID.

[jajajaime]

Tabs fail to load if the id is different or missing on the <li> element, it looks like.

[qweik]

Yes, that sounds like the right thing to do. Or change (remove?) the id attribute for the list item (<li>) and leave the anchor (<a>) with its current ID.

Magento/Backend/view/adminhtml/templates/widget/tabs.phtml#L34

class="admin__page-nav-item no-display"
                    id="<?= $block->escapeHtmlAttr($block->getTabId($_tab)) ?>"

=>

class="admin__page-nav-item no-display"
                    id="<?= $block->escapeHtmlAttr($block->getTabId($_tab)) ?>_nav_item"

---

$('li.admin__page-nav-item#{$block->escapeJs($block->getTabId($_tab))}')

=>

$('li.admin__page-nav-item#{$block->escapeJs($block->getTabId($_tab))}_nav_item')

[vpashovski]

Any update on this PR?