Incident list: "Time to SLA" column behaves differently than others
Summary
In the incident list, the Time to SLA column header behaves differently from other columns.
Steps to reproduce
- Open the incident list, for example in https://gitlab.com/gitlab-examples/ops/incident-setup/everyone/tanuki-inc/-/incidents.
- Hover over and click different columns to change sorting.
Example Project
What is the current bug behavior?
When you hover over:
- Severity, Status, Date created, Published - the column headers are highlighted in blue.
- Time to SLA - there is no highlight.
When you click:
- Severity, Status, Date created, Published - the sorting changes to descending with the arrow icon pointing down.
- Time to SLA - the sorting changes to ascending(?) with the arrow icon pointing up.
What is the expected correct behavior?
There is no difference between the sortable columns.
Relevant logs and/or screenshots
Output of checks
This bug happens on GitLab.com
Unused template parts
Results of GitLab environment info
Expand for output related to GitLab environment info
(For installations with omnibus-gitlab package run and paste the output of: `sudo gitlab-rake gitlab:env:info`) (For installations from source run and paste the output of: `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
Results of GitLab application Check
Expand for output related to the GitLab application check
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true
)(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true
)(we will only investigate if the tests are passing)
Implementation Guide
Part 1: fix the hover color
The line in question is located in the table fields configuration here: https://gitlab.com/gitlab-org/gitlab/-/blob/4594324a96363162810c8db876532a5310d214a8/app/assets/javascripts/incidents/components/incidents_list.vue#L89
The thClass
property needs to include the ${thClass}
that is imported from 'javascripts/vue_shared/components/paginated_table_with_search_and_tabs/constants.js'
. See the other interactive column headers for an example.
Part 2: fix the rest of the sort behavior
To change the column to sort in descending order by default, remove the sortDirection: 'asc'
property from the table field configuration.
Or potentially a better fix (see discussion below): flip the hover arrow
To achieve that, the code for the current hover style is here: https://gitlab.com/gitlab-org/gitlab/-/blob/bced72dd10a001dc167be5c73d7ea1907f4f0868/app/assets/stylesheets/page_bundles/incident_management_list.scss#L43.
The source for the icons is here: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/framework/variables_overrides.scss
An additional arrow, this time upwards facing, could be added to incident_management_list.scss
, behind a new class 'default-sort-asc' or something similar. This could be applied by setting the appropriate class in the table field config, for just the incident SLA column.
In all cases - some frontend unit tests should be added or updated.