Skip to content

Remove `gl-table` headers style classes overrides

Background

We had add extra CSS classes to make gl-table headers Pajamas compliant, however !87554 (merged) fixed this by removing the conflicting styles from gl-table.

Description

We should remove usages of those override classes from our code, simply removing the class and checking the style is correct, should be enough to confirm the new styles are correct.

See !87554 (merged) for an example.

Note: This is a refactor, styles should not change!

There are a few ways in which these classes are added:

Via DEFAULT_TH_CLASSES from ~/lib/utils/constants.js

In these cases we import DEFAULT_TH_CLASSES from a constants file:

  • app/assets/javascripts/jobs/components/table/constants.js
  • app/assets/javascripts/lib/utils/constants.js
  • app/assets/javascripts/lib/utils/table_utility.js, spec/frontend/lib/utils/table_utility_spec.js
  • app/assets/javascripts/runner/utils.js
  • ee/app/assets/javascripts/status_checks/components/status_checks.vue

Defining a CSS classes constant in the components

Other files that define either gl-bg-transparent! gl-border-b-solid! gl-border-b-gray- or DEFAULT_TH_CLASSES.

  • app/assets/javascripts/import_entities/import_groups/components/import_table.vue
  • app/assets/javascripts/jobs/components/trigger_block.vue
  • app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
  • app/assets/javascripts/pages/import/history/components/import_history_app.vue
  • app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
  • app/assets/javascripts/token_access/components/token_projects_table.vue
  • ee/app/assets/javascripts/admin/subscriptions/show/components/subscription_details_history.vue
  • ee/app/assets/javascripts/admin/subscriptions/show/components/subscription_details_table.vue

Other cases

These are other cases I found of thClass adding classes like backgrounds or borders, these need to be more carefully processed, as not all cases may require a removal:

  • app/assets/javascripts/admin/users/components/users_table.vue
  • app/assets/javascripts/alert_management/components/alert_management_table.vue
  • app/assets/javascripts/analytics/devops_reports/components/devops_score.vue
  • app/assets/javascripts/incidents/components/incidents_list.vue
  • app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue
  • app/assets/javascripts/vue_shared/components/alert_details_table.vue
  • ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/components/devops_adoption_overview_table.vue
  • ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/components/devops_adoption_table.vue
  • ee/app/assets/javascripts/audit_events/components/audit_events_table.vue
  • ee/app/assets/javascripts/compliance_dashboard/components/report.vue
  • ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
  • ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue
  • ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles_list.vue
  • ee/app/assets/javascripts/threat_monitoring/components/alerts/constants.js
  • ee/app/assets/javascripts/usage_quotas/seats/constants.js
  • ee/app/assets/javascripts/usage_quotas/storage/components/project_storage_detail.vue
Edited by Justin Ho Tuan Duong