Skip to content

GlTabsBehavior - Support hash updating

Zack Cuddy requested to merge 364037-gl-tabs-hash into master

What does this MR do and why?

Closes #364037 (closed)

As part of the conversion from LinkedTabs => GlTabsBehavior we lost the component support for updating the hash when a user selects a new tab. To get around this a conversions wrote their own hash logic in their respected index.js files. This however was causing duplicate code to exist between implementations that would be better suited in the component itself.

  1. Milestones: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/milestones/milestone.js#L10-30
  2. Group Usage Quotas - https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/pages/groups/usage_quotas/index.js#L10-39
  3. Profile Usage Quotas - https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/pages/profiles/usage_quotas/index.js#L8-37

Additionally there were some UX issues that popped up from this where the hash was then used to scroll to the content. This is causing a lot of jumping between tab changes. This MR also addresses that issue inside of GlTabsBehavior.

Finally the duplicated logic was removed as it is no longer needed outside of GlTabsBehavior.

Screenshots or screen recordings

Group Usage Quota Profile Usage Quota Milestone
Groups Profile Milestones

How to set up and validate locally

For Groups Usage Quotas

  1. Go to a Group's Usage Quotas (ie. http://127.0.0.1:3000/groups/flightjs/-/usage_quotas)
  2. Ensure tabs work

For User Profile Usage Quotas

  1. Go to a Profile -> Usage Settings (ie. http://127.0.0.1:3000/-/profile/usage_quotas)
  2. Ensure tabs work

For Project Milestone

  1. Go to a Project Milestone (ie. http://127.0.0.1:3000/flightjs/Flight/-/milestones/1)
  2. Ensure tabs work

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

cc/ @markrian

Edited by Mark Florian

Merge request reports