Merge branch 'jnnkl-table-lite-devops-score' into 'master'

Replace GlTable with GlTablelite for DevOps Score

See merge request gitlab-org/gitlab!75409

app/assets/javascripts/analytics/devops_reports/components/devops_score.vue

 <script>
-import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui';
+import { GlBadge, GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { sprintf, s__ } from '~/locale';
@@ -13,7 +13,7 @@ const defaultHeaderAttrs = {
 export default {
   components: {
     GlBadge,
-    GlTable,
+    GlTableLite,
     GlSingleStat,
     GlLink,
     GlEmptyState,
@@ -94,7 +94,7 @@ export default {
         :meta-text="devopsScoreMetrics.averageScore.scoreLevel.label"
         :variant="devopsScoreMetrics.averageScore.scoreLevel.variant"
       />
-      <gl-table
+      <gl-table-lite
         :fields="$options.tableHeaderFields"
         :items="devopsScoreMetrics.cards"
         thead-class="gl-border-t-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
@@ -108,7 +108,7 @@ export default {
             }}</gl-badge>
           </div>
         </template>
-      </gl-table>
+      </gl-table-lite>
     </div>
   </div>
 </template>

spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js

-import { GlTable, GlBadge, GlEmptyState } from '@gitlab/ui';
+import { GlTableLite, GlBadge, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -20,7 +20,7 @@ describe('DevopsScore', () => {
     );
   };
 
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findCol = (testId) => findTable().find(`[data-testid="${testId}"]`);
   const findUsageCol = () => findCol('usageCol');
@@ -124,11 +124,11 @@ describe('DevopsScore', () => {
 
         describe('table columns', () => {
           describe('Your usage', () => {
-            it('displays the corrrect value', () => {
+            it('displays the correct value', () => {
               expect(findUsageCol().text()).toContain('3.2');
             });
 
-            it('displays the corrrect badge', () => {
+            it('displays the correct badge', () => {
               const badge = findUsageCol().find(GlBadge);
 
               expect(badge.exists()).toBe(true);