Merge branch 'feature/230726-repo-tabs' into 'master'

Add GlTabs to app/assets/javascripts/ide/components/repo_tabs.vue

See merge request gitlab-org/gitlab!42162

app/assets/javascripts/ide/components/repo_tab.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTab } from '@gitlab/ui';
 import { mapActions, mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
 
@@ -13,6 +13,7 @@ export default {
     FileIcon,
     GlIcon,
     ChangedFileIcon,
+    GlTab,
   },
   props: {
     tab: {
@@ -71,15 +72,15 @@ export default {
 </script>
 
 <template>
-  <li
-    :class="{
-      active: tab.active,
-      disabled: tab.pending,
-    }"
+  <gl-tab
+    :active="tab.active"
+    :disabled="tab.pending"
+    :title="tab.name"
     @click="clickFile(tab)"
     @mouseover="mouseOverTab"
     @mouseout="mouseOutTab"
   >
+    <template #title>
       <div :title="getUrlForPath(tab.path)" class="multi-file-tab">
         <file-icon :file-name="tab.name" :size="16" />
         {{ tab.name }}
@@ -95,5 +96,6 @@ export default {
         <gl-icon v-if="!showChangedIcon" :size="12" name="close" />
         <changed-file-icon v-else :file="tab" />
       </button>
-  </li>
+    </template>
+  </gl-tab>
 </template>

app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
+import { GlTabs } from '@gitlab/ui';
 import { mapActions, mapGetters } from 'vuex';
 import RepoTab from './repo_tab.vue';
 
 export default {
   components: {
     RepoTab,
+    GlTabs,
   },
   props: {
     activeFile: {
@@ -42,8 +44,8 @@ export default {
 
 <template>
   <div class="multi-file-tabs">
-    <ul ref="tabsScroller" class="list-unstyled gl-mb-0">
+    <gl-tabs>
       <repo-tab v-for="tab in files" :key="tab.key" :tab="tab" />
-    </ul>
+    </gl-tabs>
   </div>
 </template>

changelogs/unreleased/feature-230726-repo-tabs.yml

+---
+title: convert to GlTabs in app/assets/javascripts/ide/components/repo_tabs.vue
+merge_request: 42162
+author: Brandon Everett
+type: added

spec/frontend/ide/components/repo_tab_spec.js

+import { GlTab } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { stubComponent } from 'helpers/stub_component';
 import RepoTab from '~/ide/components/repo_tab.vue';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
@@ -8,16 +10,25 @@ import { file } from '../helpers';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+const GlTabStub = stubComponent(GlTab, {
+  template: '<li><slot name="title" /></li>',
+});
+
 describe('RepoTab', () => {
   let wrapper;
   let store;
   let router;
 
+  const findTab = () => wrapper.find(GlTabStub);
+
   function createComponent(propsData) {
     wrapper = mount(RepoTab, {
       localVue,
       store,
       propsData,
+      stubs: {
+        GlTab: GlTabStub,
+      },
     });
   }
 
@@ -55,7 +66,7 @@ describe('RepoTab', () => {
 
     jest.spyOn(wrapper.vm, 'openPendingTab').mockImplementation(() => {});
 
-    await wrapper.trigger('click');
+    await findTab().vm.$emit('click');
 
     expect(wrapper.vm.openPendingTab).not.toHaveBeenCalled();
   });
@@ -67,7 +78,7 @@ describe('RepoTab', () => {
 
     jest.spyOn(wrapper.vm, 'clickFile').mockImplementation(() => {});
 
-    wrapper.trigger('click');
+    findTab().vm.$emit('click');
 
     expect(wrapper.vm.clickFile).toHaveBeenCalledWith(wrapper.vm.tab);
   });
@@ -91,11 +102,11 @@ describe('RepoTab', () => {
       tab,
     });
 
-    await wrapper.trigger('mouseover');
+    await findTab().vm.$emit('mouseover');
 
     expect(wrapper.find('.file-modified').exists()).toBe(false);
 
-    await wrapper.trigger('mouseout');
+    await findTab().vm.$emit('mouseout');
 
     expect(wrapper.find('.file-modified').exists()).toBe(true);
   });