Migrate requirements tabs to gl-tabs

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/45736

ee/app/assets/javascripts/requirements/components/requirements_tabs.vue

 <script>
-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlBadge, GlButton, GlTabs, GlTab } from '@gitlab/ui';
 
 import { FilterState } from '../constants';
 
 export default {
   FilterState,
   components: {
-    GlLink,
     GlBadge,
     GlButton,
+    GlTabs,
+    GlTab,
   },
   props: {
     filterBy: {
@@ -43,42 +44,41 @@ export default {
 </script>
 
 <template>
-  <div class="top-area">
-    <ul class="nav-links mobile-separator requirements-state-filters js-requirements-state-filters">
-      <li :class="{ active: isOpenTab }">
-        <gl-link
-          id="state-opened"
-          data-state="opened"
-          :title="__('Filter by requirements that are currently opened.')"
-          @click="$emit('click-tab', { filterBy: $options.FilterState.opened })"
-        >
-          {{ __('Open') }}
-          <gl-badge>{{ requirementsCount.OPENED }}</gl-badge>
-        </gl-link>
-      </li>
-      <li :class="{ active: isArchivedTab }">
-        <gl-link
-          id="state-archived"
-          data-state="archived"
-          :title="__('Filter by requirements that are currently archived.')"
-          @click="$emit('click-tab', { filterBy: $options.FilterState.archived })"
-        >
-          {{ __('Archived') }}
-          <gl-badge>{{ requirementsCount.ARCHIVED }}</gl-badge>
-        </gl-link>
-      </li>
-      <li :class="{ active: isAllTab }">
-        <gl-link
-          id="state-all"
-          data-state="all"
-          :title="__('Show all requirements.')"
-          @click="$emit('click-tab', { filterBy: $options.FilterState.all })"
-        >
-          {{ __('All') }}
-          <gl-badge>{{ requirementsCount.ALL }}</gl-badge>
-        </gl-link>
-      </li>
-    </ul>
+  <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+    <gl-tabs content-class="gl-p-0">
+      <gl-tab
+        :title-link-attributes="{ 'data-testid': 'state-opened' }"
+        :active="isOpenTab"
+        @click="$emit('click-tab', { filterBy: $options.FilterState.opened })"
+      >
+        <template #title>
+          <span>{{ __('Open') }}</span>
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ requirementsCount.OPENED }}</gl-badge>
+        </template>
+      </gl-tab>
+      <gl-tab
+        :title-link-attributes="{ 'data-testid': 'state-archived' }"
+        :active="isArchivedTab"
+        @click="$emit('click-tab', { filterBy: $options.FilterState.archived })"
+      >
+        <template #title>
+          <span>{{ __('Archived') }}</span>
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{
+            requirementsCount.ARCHIVED
+          }}</gl-badge>
+        </template>
+      </gl-tab>
+      <gl-tab
+        :title-link-attributes="{ 'data-testid': 'state-all' }"
+        :active="isAllTab"
+        @click="$emit('click-tab', { filterBy: $options.FilterState.all })"
+      >
+        <template #title>
+          <span>{{ __('All') }}</span>
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ requirementsCount.ALL }}</gl-badge>
+        </template>
+      </gl-tab>
+    </gl-tabs>
     <div v-if="isOpenTab && canCreateRequirement" class="nav-controls">
       <gl-button
         category="primary"

ee/changelogs/unreleased/230727-yet-another-requiremnets-tab-migration.yml

+---
+title: Migrate requirements tabs to gltab
+merge_request: 45736
+author:
+type: changed

ee/spec/features/projects/requirements_management/requirements_list_spec.rb

@@ -44,18 +44,15 @@ RSpec.describe 'Requirements list', :js do
     end
 
     it 'shows requirements tabs for each status type' do
-      page.within('.requirements-state-filters') do
-        expect(page).to have_selector('li > a#state-opened')
-        expect(find('li > a#state-opened')[:title]).to eq('Filter by requirements that are currently opened.')
-        expect(find('li > a#state-opened .badge')).to have_content('3')
-
-        expect(page).to have_selector('li > a#state-archived')
-        expect(find('li > a#state-archived')[:title]).to eq('Filter by requirements that are currently archived.')
-        expect(find('li > a#state-archived .badge')).to have_content('1')
-
-        expect(page).to have_selector('li > a#state-all')
-        expect(find('li > a#state-all')[:title]).to eq('Show all requirements.')
-        expect(find('li > a#state-all .badge')).to have_content('4')
+      page.within('.gl-tabs') do
+        expect(page).to have_selector('li > a[data-testid="state-opened"]')
+        expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('3')
+
+        expect(page).to have_selector('li > a[data-testid="state-archived"]')
+        expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('1')
+
+        expect(page).to have_selector('li > a[data-testid="state-all"]')
+        expect(find('li > a[data-testid="state-all"] .badge')).to have_content('4')
       end
     end
 
@@ -91,16 +88,16 @@ RSpec.describe 'Requirements list', :js do
       end
 
       it 'updates requirements count in nav sidebar and opened and all tab badges' do
-        page.within('.requirements-state-filters') do
-          expect(find('li > a#state-opened .badge')).to have_content('3')
-          expect(find('li > a#state-all .badge')).to have_content('4')
+        page.within('.gl-tabs') do
+          expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('3')
+          expect(find('li > a[data-testid="state-all"] .badge')).to have_content('4')
         end
 
         create_requirement('Foobar')
 
-        page.within('.requirements-state-filters') do
-          expect(find('li > a#state-opened .badge')).to have_content('4')
-          expect(find('li > a#state-all .badge')).to have_content('5')
+        page.within('.gl-tabs') do
+          expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('4')
+          expect(find('li > a[data-testid="state-all"] .badge')).to have_content('5')
         end
       end
     end
@@ -187,16 +184,16 @@ RSpec.describe 'Requirements list', :js do
         end
 
         expect(page.find('.requirements-list-container')).to have_selector('li.requirement', count: 2)
-        page.within('.requirements-state-filters') do
-          expect(find('li > a#state-opened .badge')).to have_content('2')
-          expect(find('li > a#state-archived .badge')).to have_content('2')
+        page.within('.gl-tabs') do
+          expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('2')
+          expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('2')
         end
       end
     end
 
     context 'archived tab' do
       before do
-        find('li > a#state-archived').click
+        find('li > a[data-testid="state-archived"]').click
 
         wait_for_requests
       end
@@ -230,16 +227,16 @@ RSpec.describe 'Requirements list', :js do
         end
 
         expect(page.find('.requirements-list-container')).to have_selector('li.requirement', count: 0)
-        page.within('.requirements-state-filters') do
-          expect(find('li > a#state-opened .badge')).to have_content('4')
-          expect(find('li > a#state-archived .badge')).to have_content('0')
+        page.within('.gl-tabs') do
+          expect(find('li > a[data-testid="state-opened"] .badge')).to have_content('4')
+          expect(find('li > a[data-testid="state-archived"] .badge')).to have_content('0')
         end
       end
     end
 
     context 'all tab' do
       before do
-        find('li > a#state-all').click
+        find('li > a[data-testid="state-all"]').click
 
         wait_for_requests
       end

ee/spec/frontend/requirements/components/requirements_tabs_spec.js

-import { GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlTab, GlBadge, GlButton, GlTabs } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
@@ -19,6 +19,10 @@ const createComponent = ({
       showCreateForm,
       canCreateRequirement,
     },
+    stubs: {
+      GlTabs,
+      GlTab,
+    },
   });
 
 describe('RequirementsTabs', () => {
@@ -34,39 +38,30 @@ describe('RequirementsTabs', () => {
 
   describe('template', () => {
     it('renders "Open" tab', () => {
-      const tabEl = wrapper.findAll(GlLink).at(0);
+      const tabEl = wrapper.findAll(GlTab).at(0);
 
-      expect(tabEl.attributes('id')).toBe('state-opened');
-      expect(tabEl.attributes('data-state')).toBe('opened');
-      expect(tabEl.attributes('title')).toBe('Filter by requirements that are currently opened.');
       expect(tabEl.text()).toContain('Open');
       expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.OPENED}`);
     });
 
     it('renders "Archived" tab', () => {
-      const tabEl = wrapper.findAll(GlLink).at(1);
+      const tabEl = wrapper.findAll(GlTab).at(1);
 
-      expect(tabEl.attributes('id')).toBe('state-archived');
-      expect(tabEl.attributes('data-state')).toBe('archived');
-      expect(tabEl.attributes('title')).toBe('Filter by requirements that are currently archived.');
       expect(tabEl.text()).toContain('Archived');
       expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ARCHIVED}`);
     });
 
     it('renders "All" tab', () => {
-      const tabEl = wrapper.findAll(GlLink).at(2);
+      const tabEl = wrapper.findAll(GlTab).at(2);
 
-      expect(tabEl.attributes('id')).toBe('state-all');
-      expect(tabEl.attributes('data-state')).toBe('all');
-      expect(tabEl.attributes('title')).toBe('Show all requirements.');
       expect(tabEl.text()).toContain('All');
       expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ALL}`);
     });
 
     it('renders class `active` on currently selected tab', () => {
-      const tabEl = wrapper.findAll('li').at(0);
+      const tabEl = wrapper.findAll(GlTab).at(0);
 
-      expect(tabEl.classes()).toContain('active');
+      expect(tabEl.attributes('active')).toBeDefined();
     });
 
     it('renders "New requirement" button when current tab is "Open" tab', () => {

locale/gitlab.pot

@@ -12182,12 +12182,6 @@ msgstr ""
 msgid "Filter by name"
 msgstr ""
 
-msgid "Filter by requirements that are currently archived."
-msgstr ""
-
-msgid "Filter by requirements that are currently opened."
-msgstr ""
-
 msgid "Filter by status"
 msgstr ""
 
@@ -25405,9 +25399,6 @@ msgstr ""
 msgid "Show all members"
 msgstr ""
 
-msgid "Show all requirements."
-msgstr ""
-
 msgid "Show all test cases."
 msgstr ""