Remove thWidthClass in violations_report

We still need `gl-p-5!` due to the left-aligned sort icon.

app/assets/javascripts/lib/utils/constants.js

@@ -10,9 +10,6 @@ export const BV_SHOW_TOOLTIP = 'bv::show::tooltip';
 export const BV_DROPDOWN_SHOW = 'bv::dropdown::show';
 export const BV_DROPDOWN_HIDE = 'bv::dropdown::hide';
 
-export const DEFAULT_TH_CLASSES =
-  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-
 // We set the drawer's z-index to 252 to clear flash messages that might
 // be displayed in the page and that have a z-index of 251.
 export const DRAWER_Z_INDEX = 252;

app/assets/javascripts/lib/utils/table_utility.js

 import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility';
-import { DEFAULT_TH_CLASSES } from './constants';
-
-/**
- * Deprecated: use thWidthPercent instead
- * Generates the table header classes to be used for GlTable fields.
- *
- * @param {Number} width - The column width as a percentage.
- * @returns {String} The classes to be used in GlTable fields object.
- */
-export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
 
 /**
  * Generates the table header class for width to be used for GlTable fields.

ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue

@@ -2,7 +2,7 @@
 import { GlAlert, GlButton, GlKeysetPagination, GlLoadingIcon, GlTable } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { __, s__ } from '~/locale';
-import { sortObjectToString, sortStringToObject, thWidthClass } from '~/lib/utils/table_utility';
+import { sortObjectToString, sortStringToObject, thWidthPercent } from '~/lib/utils/table_utility';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
@@ -173,28 +173,28 @@ export default {
     {
       key: 'severityLevel',
       label: __('Severity'),
-      thClass: thWidthClass(10),
+      thClass: `gl-p-5! ${thWidthPercent(10)}`,
       tdClass: 'gl-vertical-align-middle!',
       sortable: true,
     },
     {
       key: 'violationReason',
       label: __('Violation'),
-      thClass: thWidthClass(15),
+      thClass: `gl-p-5! ${thWidthPercent(15)}`,
       tdClass: 'gl-vertical-align-middle!',
       sortable: true,
     },
     {
       key: 'mergeRequestTitle',
       label: __('Merge request'),
-      thClass: thWidthClass(40),
+      thClass: `gl-p-5! ${thWidthPercent(40)}`,
       tdClass: 'gl-vertical-align-middle!',
       sortable: true,
     },
     {
       key: 'mergedAt',
       label: __('Date merged'),
-      thClass: thWidthClass(20),
+      thClass: `gl-p-5! ${thWidthPercent(20)}`,
       tdClass: 'gl-vertical-align-middle!',
       sortable: true,
     },

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue

@@ -6,9 +6,7 @@ import Target from 'ee/security_configuration/corpus_management/components/colum
 import { s__ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
-import { thWidthClass } from '~/lib/utils/table_utility';
-
-const thClass = 'gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!';
+import { thWidthPercent } from '~/lib/utils/table_utility';
 
 export default {
   components: {
@@ -29,29 +27,29 @@ export default {
     {
       key: 'name',
       label: s__('CorpusManagement|Corpus name'),
-      thClass: `${thClass} ${thWidthClass(40)}`,
+      thClass: thWidthPercent(40),
       tdClass: 'gl-text-truncate gl-max-w-15',
     },
     {
       key: 'target',
       label: s__('CorpusManagement|Target'),
-      thClass: `${thClass} ${thWidthClass(20)}`,
+      thClass: thWidthPercent(20),
       tdClass: 'gl-word-break-word',
     },
     {
       key: 'lastUpdated',
       label: s__('CorpusManagement|Last updated'),
-      thClass: `${thClass} ${thWidthClass(15)}`,
+      thClass: thWidthPercent(15),
     },
     {
       key: 'lastUsed',
       label: s__('CorpusManagement|Last used'),
-      thClass: `${thClass} ${thWidthClass(15)}`,
+      thClass: thWidthPercent(15),
     },
     {
       key: 'actions',
       label: s__('CorpusManagement|Actions'),
-      thClass: `${thClass} ${thWidthClass(10)}`,
+      thClass: thWidthPercent(10),
     },
   ],
   i18n: {

ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap

@@ -6,7 +6,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
 >
   <th
     aria-colindex="1"
-    class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-40p"
+    class="gl-w-40p"
     role="columnheader"
     scope="col"
   >
@@ -16,7 +16,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="2"
-    class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-20p"
+    class="gl-w-20p"
     role="columnheader"
     scope="col"
   >
@@ -26,7 +26,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="3"
-    class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-15p"
+    class="gl-w-15p"
     role="columnheader"
     scope="col"
   >
@@ -36,7 +36,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="4"
-    class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-15p"
+    class="gl-w-15p"
     role="columnheader"
     scope="col"
   >
@@ -46,7 +46,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="5"
-    class="gl-bg-transparent! gl-border-b-1! gl-border-b-gray-100! gl-border-b-solid! gl-border-gray-100! gl-p-5! gl-w-10p"
+    class="gl-w-10p"
     role="columnheader"
     scope="col"
   >

spec/frontend/lib/utils/table_utility_spec.js

-import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
 import * as tableUtils from '~/lib/utils/table_utility';
 
 describe('table_utility', () => {
-  describe('thWidthClass', () => {
-    it('returns the width class including default table header classes', () => {
-      const width = 50;
-      expect(tableUtils.thWidthClass(width)).toBe(`gl-w-${width}p ${DEFAULT_TH_CLASSES}`);
-    });
-  });
-
   describe('thWidthPercent', () => {
     it('returns the width class including default table header classes', () => {
       const width = 50;