Merge branch '229534-incidents-sorting-FE' into 'master'

Column sorting for Incident list

See merge request gitlab-org/gitlab!43121

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

@@ -33,9 +33,15 @@ import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants';
-import { I18N, DEFAULT_PAGE_SIZE, INCIDENT_STATUS_TABS } from '../constants';
+import {
+  I18N,
+  DEFAULT_PAGE_SIZE,
+  INCIDENT_STATUS_TABS,
+  TH_CREATED_AT_TEST_ID,
+  TH_SEVERITY_TEST_ID,
+  TH_PUBLISHED_TEST_ID,
+} from '../constants';
 
-const TH_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
 const tdClass =
   'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-white-space-nowrap';
 const thClass = 'gl-hover-bg-blue-50';
@@ -57,8 +63,10 @@ export default {
     {
       key: 'severity',
       label: s__('IncidentManagement|Severity'),
-      thClass: `gl-pointer-events-none`,
-      tdClass,
+      thClass,
+      tdClass: `${tdClass} sortable-cell`,
+      sortable: true,
+      thAttr: TH_SEVERITY_TEST_ID,
     },
     {
       key: 'title',
@@ -72,7 +80,7 @@ export default {
       thClass,
       tdClass: `${tdClass} sortable-cell`,
       sortable: true,
-      thAttr: TH_TEST_ID,
+      thAttr: TH_CREATED_AT_TEST_ID,
     },
     {
       key: 'assignees',
@@ -226,7 +234,10 @@ export default {
               {
                 key: 'published',
                 label: s__('IncidentManagement|Published'),
-                thClass: 'gl-pointer-events-none',
+                thClass,
+                tdClass: `${tdClass} sortable-cell`,
+                sortable: true,
+                thAttr: TH_PUBLISHED_TEST_ID,
               },
             ],
           ]
@@ -312,6 +323,7 @@ export default {
   },
   methods: {
     filterIncidentsByStatus(tabIndex) {
+      this.resetPagination();
       const { filters, status } = this.$options.statusTabs[tabIndex];
       this.statusFilter = filters;
       this.filteredByStatus = status;
@@ -345,15 +357,19 @@ export default {
       this.pagination = initialPaginationState;
     },
     fetchSortedData({ sortBy, sortDesc }) {
-      const sortingDirection = sortDesc ? 'desc' : 'asc';
-      const sortingColumn = convertToSnakeCase(sortBy).replace(/_.*/, '');
+      const sortingDirection = sortDesc ? 'DESC' : 'ASC';
+      const sortingColumn = convertToSnakeCase(sortBy)
+        .replace(/_.*/, '')
+        .toUpperCase();
 
+      this.resetPagination();
       this.sort = `${sortingColumn}_${sortingDirection}`;
     },
     getSeverity(severity) {
       return INCIDENT_SEVERITY[severity];
     },
     handleFilterIncidents(filters) {
+      this.resetPagination();
       const filterParams = { authorUsername: '', assigneeUsername: '', search: '' };
 
       filters.forEach(filter => {

app/assets/javascripts/incidents/constants.js

@@ -35,3 +35,6 @@ export const INCIDENT_STATUS_TABS = [
 ];
 
 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_PUBLISHED_TEST_ID = { 'data-testid': 'incident-management-published-sort' };

changelogs/unreleased/229534-incidents-sorting.yml

+---
+title: Sort incidents list by severity and published columns
+merge_request: 43121
+author:
+type: added

spec/frontend/incidents/components/incidents_list_spec.js

@@ -16,7 +16,13 @@ import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
-import { I18N, INCIDENT_STATUS_TABS } from '~/incidents/constants';
+import {
+  I18N,
+  INCIDENT_STATUS_TABS,
+  TH_CREATED_AT_TEST_ID,
+  TH_SEVERITY_TEST_ID,
+  TH_PUBLISHED_TEST_ID,
+} from '~/incidents/constants';
 import mockIncidents from '../mocks/incidents.json';
 import mockFilters from '../mocks/incidents_filter.json';
 
@@ -45,8 +51,6 @@ describe('Incidents List', () => {
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
-  const findDateColumnHeader = () =>
-    wrapper.find('[data-testid="incident-management-created-at-sort"]');
   const findSearch = () => wrapper.find(FilteredSearchBar);
   const findAssingees = () => wrapper.findAll('[data-testid="incident-assignees"]');
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
@@ -437,13 +441,25 @@ describe('Incidents List', () => {
       });
     });
 
-    it('updates sort with new direction and column key', () => {
-      expect(findDateColumnHeader().attributes('aria-sort')).toBe('descending');
+    const descSort = 'descending';
+    const ascSort = 'ascending';
+    const noneSort = 'none';
 
-      findDateColumnHeader().trigger('click');
-      return wrapper.vm.$nextTick(() => {
-        expect(findDateColumnHeader().attributes('aria-sort')).toBe('ascending');
-      });
+    it.each`
+      selector                 | initialSort | firstSort   | nextSort
+      ${TH_CREATED_AT_TEST_ID} | ${descSort} | ${ascSort}  | ${descSort}
+      ${TH_SEVERITY_TEST_ID}   | ${noneSort} | ${descSort} | ${ascSort}
+      ${TH_PUBLISHED_TEST_ID}  | ${noneSort} | ${descSort} | ${ascSort}
+    `('updates sort with new direction', async ({ selector, initialSort, firstSort, nextSort }) => {
+      const [[attr, value]] = Object.entries(selector);
+      const columnHeader = () => wrapper.find(`[${attr}="${value}"]`);
+      expect(columnHeader().attributes('aria-sort')).toBe(initialSort);
+      columnHeader().trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(columnHeader().attributes('aria-sort')).toBe(firstSort);
+      columnHeader().trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(columnHeader().attributes('aria-sort')).toBe(nextSort);
     });
   });
 });