Merge branch '230724-matej-tabs-migration-ide-pipelines-list' into 'master'

Replace tabs with new component on IDE pipelines panel

See merge request gitlab-org/gitlab!45007

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
-import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlIcon,
+  GlSafeHtmlDirective as SafeHtml,
+  GlTabs,
+  GlTab,
+  GlBadge,
+} from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
-import Tabs from '../../../vue_shared/components/tabs/tabs';
-import Tab from '../../../vue_shared/components/tabs/tab.vue';
 import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
 import JobsList from '../jobs/list.vue';
 
@@ -15,11 +20,12 @@ export default {
   components: {
     GlIcon,
     CiIcon,
-    Tabs,
-    Tab,
     JobsList,
     EmptyState,
     GlLoadingIcon,
+    GlTabs,
+    GlTab,
+    GlBadge,
   },
   directives: {
     SafeHtml,
@@ -88,22 +94,26 @@ export default {
         <p class="gl-mb-0 break-word">{{ latestPipeline.yamlError }}</p>
         <p v-safe-html="ciLintText" class="gl-mb-0"></p>
       </div>
-      <tabs v-else class="ide-pipeline-list">
-        <tab :active="!pipelineFailed">
+      <gl-tabs v-else>
+        <gl-tab :active="!pipelineFailed">
           <template #title>
             {{ __('Jobs') }}
-            <span v-if="jobsCount" class="badge badge-pill"> {{ jobsCount }} </span>
+            <gl-badge v-if="jobsCount" size="sm" class="gl-tab-counter-badge">{{
+              jobsCount
+            }}</gl-badge>
           </template>
           <jobs-list :loading="isLoadingJobs" :stages="stages" />
-        </tab>
-        <tab :active="pipelineFailed">
+        </gl-tab>
+        <gl-tab :active="pipelineFailed">
           <template #title>
             {{ __('Failed Jobs') }}
-            <span v-if="failedJobsCount" class="badge badge-pill"> {{ failedJobsCount }} </span>
+            <gl-badge v-if="failedJobsCount" size="sm" class="gl-tab-counter-badge">{{
+              failedJobsCount
+            }}</gl-badge>
           </template>
           <jobs-list :loading="isLoadingJobs" :stages="failedStages" />
-        </tab>
-      </tabs>
+        </gl-tab>
+      </gl-tabs>
     </template>
   </div>
 </template>

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -5,7 +5,7 @@
   $bs-input-focus-border: #80bdff;
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
-  a:not(.btn),
+  a:not(.btn):not(.gl-tab-nav-item),
   .gl-button.btn-link,
   .gl-button.btn-link:hover,
   .gl-button.btn-link:focus,

app/assets/stylesheets/page_bundles/ide.scss

@@ -915,12 +915,6 @@ $ide-commit-header-height: 48px;
   }
 }
 
-.ide-pipeline-list {
-  flex: 1;
-  overflow: auto;
-  padding: 0 $gl-padding;
-}
-
 .ide-pipeline-header {
   min-height: 55px;
   padding-left: $gl-padding;

changelogs/unreleased/230724-matej-tabs-migration-ide-pipelines-list.yml

+---
+title: Update Web IDE pipelines panel to use our design system component
+merge_request: 45007
+author: matejlatin
+type: other

spec/frontend/ide/components/pipelines/list_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTab } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import { pipelines } from 'jest/ide/mock_data';
 import List from '~/ide/components/pipelines/list.vue';
 import JobsList from '~/ide/components/jobs/list.vue';
-import Tab from '~/vue_shared/components/tabs/tab.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import IDEServices from '~/ide/services';
 
@@ -167,7 +166,7 @@ describe('IDE pipelines list', () => {
         createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs });
 
         const jobProps = wrapper
-          .findAll(Tab)
+          .findAll(GlTab)
           .at(0)
           .find(JobsList)
           .props();
@@ -182,7 +181,7 @@ describe('IDE pipelines list', () => {
         createComponent({}, { ...withLatestPipelineState, isLoadingJobs });
 
         const jobProps = wrapper
-          .findAll(Tab)
+          .findAll(GlTab)
           .at(1)
           .find(JobsList)
           .props();