Merge branch 'jnnkl-gl-table-lite-pipelines-table' into 'master'

Replace GlTable with GlTablelite for pipelines table

See merge request gitlab-org/gitlab!74381

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue

 <script>
-import { GlTable, GlTooltipDirective } from '@gitlab/ui';
+import { GlTableLite, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../../event_hub';
 import PipelineMiniGraph from './pipeline_mini_graph.vue';
@@ -18,7 +18,7 @@ const DEFAULT_TH_CLASSES =
 
 export default {
   components: {
-    GlTable,
+    GlTableLite,
     LinkedPipelinesMiniList: () =>
       import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
     PipelinesCommit,
@@ -156,7 +156,7 @@ export default {
 </script>
 <template>
   <div class="ci-table">
-    <gl-table
+    <gl-table-lite
       :fields="tableFields"
       :items="pipelines"
       tbody-tr-class="commit"
@@ -225,7 +225,7 @@ export default {
       <template #cell(actions)="{ item }">
         <pipeline-operations :pipeline="item" :canceling-pipeline="cancelingPipeline" />
       </template>
-    </gl-table>
+    </gl-table-lite>
 
     <pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" />
   </div>

spec/frontend/commit/pipelines/pipelines_table_spec.js

-import { GlEmptyState, GlLoadingIcon, GlModal, GlTable } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlModal, GlTableLite } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
@@ -22,7 +22,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findRunPipelineBtnMobile = () => wrapper.findByTestId('run_pipeline_button_mobile');
   const findLoadingState = () => wrapper.findComponent(GlLoadingIcon);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findTableRows = () => wrapper.findAllByTestId('pipeline-table-row');
   const findModal = () => wrapper.findComponent(GlModal);
 

spec/frontend/pipelines/pipelines_table_spec.js

 import '~/commons';
-import { GlTable } from '@gitlab/ui';
+import { GlTableLite } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -44,7 +44,7 @@ describe('Pipelines Table', () => {
     );
   };
 
-  const findGlTable = () => wrapper.findComponent(GlTable);
+  const findGlTableLite = () => wrapper.findComponent(GlTableLite);
   const findStatusBadge = () => wrapper.findComponent(CiBadge);
   const findPipelineInfo = () => wrapper.findComponent(PipelineUrl);
   const findTriggerer = () => wrapper.findComponent(PipelineTriggerer);
@@ -77,7 +77,7 @@ describe('Pipelines Table', () => {
     });
 
     it('displays table', () => {
-      expect(findGlTable().exists()).toBe(true);
+      expect(findGlTableLite().exists()).toBe(true);
     });
 
     it('should render table head with correct columns', () => {