Merge branch 'jnnkl-table-lite-clusters' into 'master'

Replace GlTable with GlTableLite for clusters Table

See merge request gitlab-org/gitlab!80997

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -6,7 +6,7 @@ import {
   GlPagination,
   GlDeprecatedSkeletonLoading as GlSkeletonLoading,
   GlSprintf,
-  GlTable,
+  GlTableLite,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
@@ -27,7 +27,7 @@ export default {
     GlPagination,
     GlSkeletonLoading,
     GlSprintf,
-    GlTable,
+    GlTableLite,
     NodeErrorHelpText,
     ClustersEmptyState,
   },
@@ -229,7 +229,7 @@ export default {
   <section v-else>
     <ancestor-notice />
 
-    <gl-table
+    <gl-table-lite
       v-if="hasClusters"
       :items="clusters"
       :fields="fields"
@@ -326,7 +326,7 @@ export default {
           {{ value }}
         </gl-badge>
       </template>
-    </gl-table>
+    </gl-table-lite>
 
     <clusters-empty-state v-else :is-child-component="isChildComponent" />
 

spec/frontend/clusters_list/components/clusters_spec.js

@@ -2,7 +2,7 @@ import {
   GlLoadingIcon,
   GlPagination,
   GlDeprecatedSkeletonLoading as GlSkeletonLoading,
-  GlTable,
+  GlTableLite,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
@@ -41,7 +41,7 @@ describe('Clusters', () => {
 
   const findLoader = () => wrapper.findComponent(GlLoadingIcon);
   const findPaginatedButtons = () => wrapper.findComponent(GlPagination);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findStatuses = () => findTable().findAll('.js-status');
   const findEmptyState = () => wrapper.findComponent(ClustersEmptyState);
 
@@ -51,7 +51,7 @@ describe('Clusters', () => {
 
   const createWrapper = ({ propsData = {} }) => {
     store = ClusterStore(entryData);
-    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTable } });
+    wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTableLite } });
     return axios.waitForAll();
   };