Merge branch 'mrincon/runners-use-gl-table-lite' into 'master'

GlTableLite in favor of GlTable for runners list

See merge request gitlab-org/gitlab!80928

app/assets/javascripts/runner/components/runner_list.vue

 <script>
-import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
+import { GlTableLite, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
@@ -12,7 +12,7 @@ import RunnerTags from './runner_tags.vue';
 
 export default {
   components: {
-    GlTable,
+    GlTableLite,
     GlSkeletonLoader,
     TooltipOnTruncate,
     TimeAgo,
@@ -35,6 +35,16 @@ export default {
       required: true,
     },
   },
+  computed: {
+    tableClass() {
+      // <gl-table-lite> does not provide a busy state, add
+      // simple support for it.
+      // See http://bootstrap-vue.org/docs/components/table#table-busy-state
+      return {
+        'gl-opacity-6': this.loading,
+      };
+    },
+  },
   methods: {
     formatJobCount(jobCount) {
       return formatJobCount(jobCount);
@@ -62,8 +72,9 @@ export default {
 </script>
 <template>
   <div>
-    <gl-table
-      :busy="loading"
+    <gl-table-lite
+      :aria-busy="loading"
+      :class="tableClass"
       :items="runners"
       :fields="$options.fields"
       :tbody-tr-attr="runnerTrAttr"
@@ -72,10 +83,6 @@ export default {
       primary-key="id"
       fixed
     >
-      <template v-if="!runners.length" #table-busy>
-        <gl-skeleton-loader v-for="i in 4" :key="i" />
-      </template>
-
       <template #cell(status)="{ item }">
         <runner-status-cell :runner="item" />
       </template>
@@ -116,6 +123,10 @@ export default {
       <template #cell(actions)="{ item }">
         <runner-actions-cell :runner="item" />
       </template>
-    </gl-table>
+    </gl-table-lite>
+
+    <template v-if="!runners.length && loading">
+      <gl-skeleton-loader v-for="i in 4" :key="i" />
+    </template>
   </div>
 </template>

spec/frontend/runner/components/runner_list_spec.js

-import { GlTable, GlSkeletonLoader } from '@gitlab/ui';
+import { GlTableLite, GlSkeletonLoader } from '@gitlab/ui';
 import {
   extendedWrapper,
   shallowMountExtended,
@@ -18,7 +18,7 @@ describe('RunnerList', () => {
   let wrapper;
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findHeaders = () => wrapper.findAll('th');
   const findRows = () => wrapper.findAll('[data-testid^="runner-row-"]');
   const findCell = ({ row = 0, fieldKey }) =>
@@ -144,7 +144,8 @@ describe('RunnerList', () => {
   describe('When data is loading', () => {
     it('shows a busy state', () => {
       createComponent({ props: { runners: [], loading: true } });
-      expect(findTable().attributes('busy')).toBeTruthy();
+
+      expect(findTable().classes('gl-opacity-6')).toBe(true);
     });
 
     it('when there are no runners, shows an skeleton loader', () => {