Incident list: "Time to SLA" column behaves differently than others

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Summary

In the incident list, the Time to SLA column header behaves differently from other columns.

Steps to reproduce

1. Open the incident list, for example in https://gitlab.com/gitlab-examples/ops/incident-setup/everyone/tanuki-inc/-/incidents.
2. 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.