Skip to content

Add a common thWidthClass table utility function

Jiaan Louw requested to merge 329854-move-common-table-util-to-utility-file into master

What does this MR do?

This MR adds a common thWidthClass utility function in a new file table_utility.js and replaces the method in several files. Changes made:

  1. Add thWidthClass table utility function !62100 (0b11f2a4)
  2. Update use cases of thWidthClass to use utilities !62100 (1f50d1a3)

Validation

grep -Hrn 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!' ./

Before

./app/assets/javascripts/admin/users/components/users_table.vue:12:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
./app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue:17:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1! gl-font-sm!';
./app/assets/javascripts/jobs/components/table/jobs_table.vue:12:  thClass: 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!',
./ee/app/assets/javascripts/billings/seat_usage/constants.js:4:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
./ee/app/assets/javascripts/status_checks/components/status_checks.vue:9:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';

After

./app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue:17:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1! gl-font-sm!';
./app/assets/javascripts/lib/utils/constants.js:21:  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';

Note that the DEFAULT_TH_CLASSES value in pipelines_table.vue includes additional classes.

Testing and setup

Admin/users

  1. Enable the Vue table feature flag: echo "Feature.enable(:vue_admin_users)" | rails c

Seat usage

  1. Enable the Check feature availability on namespace plan setting in Admin > General Settings.
  2. Upgrade the group you want to test (gitlab-org) to paid plan at [GDK_HOST]/admin/groups/gitlab-org/edit.

Jobs table

  1. Enable Vue jobs table feature flag: echo "Feature.enable(:jobs_table_vue)" | rails c

Status checks

  1. Enable the external status checks feature flag: echo "Feature.enable(:ff_compliance_approval_gates) | rails c"
  2. Add a Status Check under Project > General Settings > Merge request (MR) approvals > Add approval rule.
    • Note: This is the only place where you can create a status check - this is temporary untill !61702 (comment 574975925) is merged.
  3. View the status checks in Project > General Settings > Status checks.

Screenshots (strongly suggested)

Admin/users

[GDK_HOST]/admin/users

Before After
image image

Seat usage

[GDK_HOST]/groups/gitlab-org/-/billings

Before After
image image

Jobs table

[GDK_HOST]/flightjs/Flight/-/jobs

Before After
image image

Status checks

[GDK_HOST]/gitlab-org/gitlab-shell/edit

Before After
image image

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to #329854 (closed)

Edited by Jiaan Louw

Merge request reports