Merge branch 'project/usage-quota/use-gl-tabs-nav' into 'master'

Use gl_tabs_nav in Project Usage Quota index page

See merge request gitlab-org/gitlab!80488

app/views/projects/usage_quotas/index.html.haml

@@ -9,11 +9,10 @@
     %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
       = s_('UsageQuota|Learn more about usage quotas') + '.'
 
-.top-area.scrolling-tabs-container.inner-page-scroll-tabs
-  %ul.nav.nav-tabs.nav-links.scrolling-tabs.separator.js-usage-quota-tabs{ role: 'tablist' }
-    %li.nav-item
-      %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#storage-quota-tab' }, href: '#storage-quota-tab', 'aria-controls': '#storage-quota-tab', 'aria-selected': 'true' }
+= gl_tabs_nav do
+  = gl_tab_link_to '#storage-quota-tab', item_active: true do
     = s_('UsageQuota|Storage')
+
 .tab-content
-  .tab-pane#storage-quota-tab
+  .tab-pane.active#storage-quota-tab
     #js-project-storage-count-app{ data: { project_path: @project.full_path } }

ee/app/assets/javascripts/pages/projects/usage_quotas/index.js

-import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 import initProjectStorage from 'ee/usage_quotas/storage/init_project_storage';
 import initSearchSettings from '~/search_settings';
 
-const initLinkedTabs = () => {
-  if (!document.querySelector('.js-usage-quota-tabs')) {
-    return false;
-  }
-
-  return new LinkedTabs({
-    defaultAction: '#storage-quota-tab',
-    parentEl: '.js-usage-quota-tabs',
-    hashedTabs: true,
-  });
-};
-
 const initVueApp = () => {
   initProjectStorage('js-project-storage-count-app');
 };
 
 initVueApp();
-initLinkedTabs();
 initSearchSettings();