Merge branch '230725-update-boards-modal-tabs' into 'master'

Update boards modal tabs to gl-tabs

Closes #230725

See merge request gitlab-org/gitlab!43740

app/assets/javascripts/boards/components/modal/tabs.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 export default {
+  components: {
+    GlTabs,
+    GlTab,
+    GlBadge,
+  },
   mixins: [modalMixin],
   data() {
     return ModalStore.store;
@@ -19,18 +25,18 @@ export default {
 };
 </script>
 <template>
-  <div class="top-area gl-mt-3 gl-mb-3">
-    <ul class="nav-links issues-state-filters">
-      <li :class="{ active: activeTab == 'all' }">
-        <a href="#" role="button" @click.prevent="changeTab('all')">
-          Open issues <span class="badge badge-pill"> {{ issuesCount }} </span>
-        </a>
-      </li>
-      <li :class="{ active: activeTab == 'selected' }">
-        <a href="#" role="button" @click.prevent="changeTab('selected')">
-          Selected issues <span class="badge badge-pill"> {{ selectedCount }} </span>
-        </a>
-      </li>
-    </ul>
-  </div>
+  <gl-tabs class="gl-mt-3">
+    <gl-tab @click.prevent="changeTab('all')">
+      <template slot="title">
+        <span>Open issues</span>
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{ issuesCount }}</gl-badge>
+      </template>
+    </gl-tab>
+    <gl-tab @click.prevent="changeTab('selected')">
+      <template slot="title">
+        <span>Selected issues</span>
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{ selectedCount }}</gl-badge>
+      </template>
+    </gl-tab>
+  </gl-tabs>
 </template>

changelogs/unreleased/230725-update-boards-modal-tabs.yml

+---
+title: Update issue boards modal to gl-tabs
+merge_request: 43740
+author:
+type: changed

spec/features/boards/add_issues_modal_spec.rb

@@ -79,7 +79,7 @@ RSpec.describe 'Issue Boards add issue modal', :js do
 
     it 'loads issues' do
       page.within('.add-issues-modal') do
-        page.within('.nav-links') do
+        page.within('.gl-tabs') do
           expect(page).to have_content('2')
         end
 
@@ -146,7 +146,7 @@ RSpec.describe 'Issue Boards add issue modal', :js do
         page.within('.add-issues-modal') do
           first('.board-card .board-card-number').click
 
-          page.within('.nav-links') do
+          page.within('.gl-tabs') do
             expect(page).to have_content('Selected issues 1')
           end
         end