Merge branch '329854-move-common-table-util-to-utility-file' into 'master'

Add a common thWidthClass table utility function

See merge request gitlab-org/gitlab!62100

app/assets/javascripts/admin/users/components/users_table.vue

@@ -2,16 +2,13 @@
 import { GlSkeletonLoader, GlTable } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { convertNodeIdsFromGraphQLIds } from '~/graphql_shared/utils';
+import { thWidthClass } from '~/lib/utils/table_utility';
 import { s__, __ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import getUsersGroupCountsQuery from '../graphql/queries/get_users_group_counts.query.graphql';
 import UserActions from './user_actions.vue';
 import UserAvatar from './user_avatar.vue';
 
-const DEFAULT_TH_CLASSES =
-  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
-
 export default {
   components: {
     GlSkeletonLoader,

app/assets/javascripts/jobs/components/table/jobs_table.vue

 <script>
 import { GlTable } from '@gitlab/ui';
+import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
 import { s__, __ } from '~/locale';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import ActionsCell from './cells/actions_cell.vue';
@@ -9,7 +10,7 @@ import PipelineCell from './cells/pipeline_cell.vue';
 
 const defaultTableClasses = {
   tdClass: 'gl-p-5!',
-  thClass: 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!',
+  thClass: DEFAULT_TH_CLASSES,
 };
 // eslint-disable-next-line @gitlab/require-i18n-strings
 const coverageTdClasses = `${defaultTableClasses.tdClass} gl-display-none! gl-lg-display-table-cell!`;

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

@@ -16,3 +16,6 @@ export const BV_HIDE_MODAL = 'bv::hide::modal';
 export const BV_HIDE_TOOLTIP = 'bv::hide::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!';

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

+import { DEFAULT_TH_CLASSES } from './constants';
+
+/**
+ * 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}`;

ee/app/assets/javascripts/billings/seat_usage/constants.js

+import { thWidthClass } from '~/lib/utils/table_utility';
 import { __, s__ } from '~/locale';
 
-export const DEFAULT_TH_CLASSES =
-  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
-
 export const FIELDS = [
   {
     key: 'user',

ee/app/assets/javascripts/status_checks/components/status_checks.vue

 <script>
 import { GlButton, GlTable } from '@gitlab/ui';
 import { mapState } from 'vuex';
+import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
+import { thWidthClass } from '~/lib/utils/table_utility';
 import { __, s__ } from '~/locale';
 import Actions from './actions.vue';
 import Branch from './branch.vue';
 
-const DEFAULT_TH_CLASSES =
-  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
-
 export const i18n = {
   addButton: s__('StatusCheck|Add status check'),
   apiHeader: __('API'),

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}`);
+    });
+  });
+});