Skip to content

Scrolling by clicking in arrow (horizontal tabs)

Eduardo Sanz García requested to merge eduardosanz/scrolling-on-click into master

What does this MR do and why?

When horizontal tabs don't fit the viewport, a left and a right arrow is shown. We converted these two arrows into buttons and attach a left and right scrolling event when clicked.

Changelog: changed

Relates to https://gitlab.com/gitlab-jh/gitlab-jh-enablement/-/issues/293+

Relates to Implement scrollable tabs in GlTabs (gitlab-ui#1940)

Also relates to https://gitlab.com/gitlab-com/account-management/emea/telekom/collaboration-project/-/issues/142+

Screenshots or screen recordings

Screen_Recording_2023-03-15_at_16.50.12

How to set up and validate locally

These are the pages that are affected:

  1. Admin > Jobs: https://gdk.test:3443/admin/jobs
  2. Admin > Projects: https://gdk.test:3443/admin/projects
  3. Admin > Users: https://gdk.test:3443/admin/users
  4. Landing page (projects): https://gdk.test:3443/
  5. New merge request: https://gdk.test:3443/flightjs/Flight/-/merge_requests/new?merge_request%5Bsource_branch%5D=remove-from
  6. Project activity: https://gdk.test:3443/flightjs/Flight/activity
  7. Milestone details: https://gdk.test:3443/flightjs/Flight/-/milestones/6#tab-issues
  8. User profile: https://gdk.test:3443/root
  9. Admin > Credentials: https://gdk.test:3443/admin/credentials

From the above, #3 is the one that it is more noticeable under all screen sizes. Some of the above tabs are broken for other reasons.

Other uses of the horizontal tabs that are currently broken, because NavTabs, a Vue component that uses initScrollingTabs, is not working properly:

app/assets/javascripts/environments/mixins/environments_mixin.js
10:import tabs from '~/vue_shared/components/navigation_tabs.vue';

app/assets/javascripts/deploy_keys/components/app.vue
5:import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';

app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
8:import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';

MR acceptance checklist

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

Edited by Hannah Sutor

Merge request reports