Add ability to sort by status column in incident list view

Swaps status column to be sortable under project > Monitor > Incidents.

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -33,6 +33,7 @@ import {
   TH_CREATED_AT_TEST_ID,
   TH_INCIDENT_SLA_TEST_ID,
   TH_SEVERITY_TEST_ID,
+  TH_ESCALATION_STATUS_TEST_ID,
   TH_PUBLISHED_TEST_ID,
   INCIDENT_DETAILS_PATH,
   trackIncidentCreateNewOptions,
@@ -67,8 +68,11 @@ export default {
     {
       key: 'escalationStatus',
       label: s__('IncidentManagement|Status'),
-      thClass: `${thClass} gl-w-eighth gl-pointer-events-none`,
-      tdClass,
+      thClass: `${thClass} gl-w-eighth`,
+      tdClass: `${tdClass} sortable-cell`,
+      actualSortKey: 'ESCALATION_STATUS',
+      sortable: true,
+      thAttr: TH_ESCALATION_STATUS_TEST_ID,
     },
     {
       key: 'createdAt',

app/assets/javascripts/incidents/constants.js

@@ -47,6 +47,7 @@ export const ESCALATION_STATUSES = {
 export const DEFAULT_PAGE_SIZE = 20;
 export const TH_CREATED_AT_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
 export const TH_SEVERITY_TEST_ID = { 'data-testid': 'incident-management-severity-sort' };
+export const TH_ESCALATION_STATUS_TEST_ID = { 'data-testid': 'incident-management-status-sort' };
 export const TH_INCIDENT_SLA_TEST_ID = { 'data-testid': 'incident-management-sla' };
 export const TH_PUBLISHED_TEST_ID = { 'data-testid': 'incident-management-published-sort' };
 export const INCIDENT_DETAILS_PATH = 'incident';

spec/frontend/incidents/components/incidents_list_spec.js

@@ -7,6 +7,7 @@ import {
   I18N,
   TH_CREATED_AT_TEST_ID,
   TH_SEVERITY_TEST_ID,
+  TH_ESCALATION_STATUS_TEST_ID,
   TH_PUBLISHED_TEST_ID,
   TH_INCIDENT_SLA_TEST_ID,
   trackIncidentCreateNewOptions,
@@ -294,11 +295,12 @@ describe('Incidents List', () => {
     const noneSort = 'none';
 
     it.each`
-      description        | selector                   | initialSort | firstSort   | nextSort
-      ${'creation date'} | ${TH_CREATED_AT_TEST_ID}   | ${descSort} | ${ascSort}  | ${descSort}
-      ${'severity'}      | ${TH_SEVERITY_TEST_ID}     | ${noneSort} | ${descSort} | ${ascSort}
-      ${'publish date'}  | ${TH_PUBLISHED_TEST_ID}    | ${noneSort} | ${descSort} | ${ascSort}
-      ${'due date'}      | ${TH_INCIDENT_SLA_TEST_ID} | ${noneSort} | ${ascSort}  | ${descSort}
+      description        | selector                        | initialSort | firstSort   | nextSort
+      ${'creation date'} | ${TH_CREATED_AT_TEST_ID}        | ${descSort} | ${ascSort}  | ${descSort}
+      ${'severity'}      | ${TH_SEVERITY_TEST_ID}          | ${noneSort} | ${descSort} | ${ascSort}
+      ${'status'}        | ${TH_ESCALATION_STATUS_TEST_ID} | ${noneSort} | ${descSort} | ${ascSort}
+      ${'publish date'}  | ${TH_PUBLISHED_TEST_ID}         | ${noneSort} | ${descSort} | ${ascSort}
+      ${'due date'}      | ${TH_INCIDENT_SLA_TEST_ID}      | ${noneSort} | ${ascSort}  | ${descSort}
     `(
       'updates sort with new direction when sorting by $description',
       async ({ selector, initialSort, firstSort, nextSort }) => {