Convert IDE nav form tab to GlTab and delete tab.vue

Migrate last usage of vue_shared tab.vue to GlTab
and delete tab.vue

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -57,7 +57,10 @@ export default {
 
 <template>
   <div>
-    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block position-relative" @click.stop>
+    <label
+      class="dropdown-input gl-pt-3 gl-pb-5 gl-mb-0 gl-border-b-1 gl-border-b-solid gl-display-block"
+      @click.stop
+    >
       <input
         ref="searchInput"
         v-model="search"

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -75,7 +75,10 @@ export default {
 
 <template>
   <div>
-    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block" @click.stop>
+    <label
+      class="dropdown-input gl-pt-3 gl-pb-5 gl-mb-0 gl-border-b-1 gl-border-b-solid gl-display-block"
+      @click.stop
+    >
       <tokened-input
         v-model="search"
         :tokens="searchTokens"

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

 <script>
-import Tab from '~/vue_shared/components/tabs/tab.vue';
-import Tabs from '~/vue_shared/components/tabs/tabs';
+import { GlTab, GlTabs } from '@gitlab/ui';
 import BranchesSearchList from './branches/search_list.vue';
 import MergeRequestSearchList from './merge_requests/list.vue';
 
 export default {
   components: {
-    Tabs,
-    Tab,
+    GlTab,
+    GlTabs,
     BranchesSearchList,
     MergeRequestSearchList,
   },
@@ -23,20 +22,14 @@ export default {
 
 <template>
   <div class="ide-nav-form p-0">
-    <tabs v-if="showMergeRequests" stop-propagation>
-      <tab active>
-        <template #title>
-          {{ __('Branches') }}
-        </template>
+    <gl-tabs v-if="showMergeRequests">
+      <gl-tab :title="__('Branches')">
         <branches-search-list />
-      </tab>
-      <tab>
-        <template #title>
-          {{ __('Merge Requests') }}
-        </template>
+      </gl-tab>
+      <gl-tab :title="__('Merge Requests')">
         <merge-request-search-list />
-      </tab>
-    </tabs>
+      </gl-tab>
+    </gl-tabs>
     <branches-search-list v-else />
   </div>
 </template>

app/assets/javascripts/vue_shared/components/tabs/tab.vue

-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      // props can't be updated, so we map it to data where we can
-      localActive: this.active,
-    };
-  },
-  watch: {
-    active() {
-      this.localActive = this.active;
-    },
-  },
-  created() {
-    this.isTab = true;
-  },
-  updated() {
-    if (this.$parent) {
-      this.$parent.$forceUpdate();
-    }
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="{
-      active: localActive,
-    }"
-    class="tab-pane"
-    role="tabpanel"
-  >
-    <slot></slot>
-  </div>
-</template>

app/assets/javascripts/vue_shared/components/tabs/tabs.js

-export default {
-  props: {
-    stopPropagation: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      currentIndex: 0,
-      tabs: [],
-    };
-  },
-  mounted() {
-    this.updateTabs();
-  },
-  methods: {
-    updateTabs() {
-      this.tabs = this.$children.filter((child) => child.isTab);
-      this.currentIndex = this.tabs.findIndex((tab) => tab.localActive);
-    },
-    setTab(e, index) {
-      if (this.stopPropagation) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-
-      this.tabs[this.currentIndex].localActive = false;
-      this.tabs[index].localActive = true;
-
-      this.currentIndex = index;
-    },
-  },
-  render(h) {
-    const navItems = this.tabs.map((tab, i) =>
-      h(
-        'li',
-        {
-          key: i,
-        },
-        [
-          h(
-            'a',
-            {
-              class: tab.localActive ? 'active' : null,
-              attrs: {
-                href: '#',
-              },
-              on: {
-                click: (e) => this.setTab(e, i),
-              },
-            },
-            tab.$slots.title || tab.title,
-          ),
-        ],
-      ),
-    );
-    const nav = h(
-      'ul',
-      {
-        class: 'nav-links tab-links',
-      },
-      [navItems],
-    );
-    const content = h(
-      'div',
-      {
-        class: ['tab-content'],
-      },
-      [this.$slots.default],
-    );
-
-    return h('div', {}, [[nav], content]);
-  },
-};

app/assets/stylesheets/page_bundles/ide.scss

@@ -1043,8 +1043,7 @@ $ide-commit-header-height: 48px;
     .input-icon {
       right: auto;
       left: 10px;
-      top: 50%;
-      transform: translateY(-50%);
+      top: 1rem;
     }
   }
 

changelogs/unreleased/cngo-convert-tab-to-gl-tab.yml

+---
+title: Convert IDE nav form tab to GlTab
+merge_request: 54274
+author:
+type: changed

spec/frontend/vue_shared/components/tabs/tab_spec.js

-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import Tab from '~/vue_shared/components/tabs/tab.vue';
-
-describe('Tab component', () => {
-  const Component = Vue.extend(Tab);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component);
-  });
-
-  it('sets localActive to equal active', (done) => {
-    vm.active = true;
-
-    vm.$nextTick(() => {
-      expect(vm.localActive).toBe(true);
-
-      done();
-    });
-  });
-
-  it('sets active class', (done) => {
-    vm.active = true;
-
-    vm.$nextTick(() => {
-      expect(vm.$el.classList).toContain('active');
-
-      done();
-    });
-  });
-});

spec/frontend/vue_shared/components/tabs/tabs_spec.js

-import Vue from 'vue';
-import Tab from '~/vue_shared/components/tabs/tab.vue';
-import Tabs from '~/vue_shared/components/tabs/tabs';
-
-describe('Tabs component', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = new Vue({
-      components: {
-        Tabs,
-        Tab,
-      },
-      render(h) {
-        return h('div', [
-          h('tabs', [
-            h('tab', { attrs: { title: 'Testing', active: true } }, 'First tab'),
-            h('tab', [h('template', { slot: 'title' }, 'Test slot'), 'Second tab']),
-          ]),
-        ]);
-      },
-    }).$mount();
-
-    return vm.$nextTick();
-  });
-
-  describe('tab links', () => {
-    it('renders links for tabs', () => {
-      expect(vm.$el.querySelectorAll('a').length).toBe(2);
-    });
-
-    it('renders link titles from props', () => {
-      expect(vm.$el.querySelector('a').textContent).toContain('Testing');
-    });
-
-    it('renders link titles from slot', () => {
-      expect(vm.$el.querySelectorAll('a')[1].textContent).toContain('Test slot');
-    });
-
-    it('renders active class', () => {
-      expect(vm.$el.querySelector('a').classList).toContain('active');
-    });
-
-    it('updates active class on click', () => {
-      vm.$el.querySelectorAll('a')[1].click();
-
-      return vm.$nextTick(() => {
-        expect(vm.$el.querySelector('a').classList).not.toContain('active');
-        expect(vm.$el.querySelectorAll('a')[1].classList).toContain('active');
-      });
-    });
-  });
-
-  describe('content', () => {
-    it('renders content panes', () => {
-      expect(vm.$el.querySelectorAll('.tab-pane').length).toBe(2);
-      expect(vm.$el.querySelectorAll('.tab-pane')[0].textContent).toContain('First tab');
-      expect(vm.$el.querySelectorAll('.tab-pane')[1].textContent).toContain('Second tab');
-    });
-  });
-});