Merge branch 'lm-change-sorting' into 'master'

Alert Managament: Change sorting order

See merge request gitlab-org/gitlab!33642

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -34,7 +34,6 @@ import Tracking from '~/tracking';
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
-const findDefaultSortColumn = () => document.querySelector('.js-started-at');
 
 const initialPaginationState = {
   currentPage: 1,
@@ -189,10 +188,12 @@ export default {
       errored: false,
       isAlertDismissed: false,
       isErrorAlertDismissed: false,
-      sort: 'STARTED_AT_ASC',
+      sort: 'STARTED_AT_DESC',
       statusFilter: [],
       filteredByStatus: '',
       pagination: initialPaginationState,
+      sortBy: 'startedAt',
+      sortDesc: true,
     };
   },
   computed: {
@@ -241,9 +242,6 @@ export default {
       const sortDirection = sortDesc ? 'DESC' : 'ASC';
       const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
 
-      if (sortBy !== 'startedAt') {
-        findDefaultSortColumn().ariaSort = 'none';
-      }
       this.resetPagination();
       this.sort = `${sortColumn}_${sortDirection}`;
     },
@@ -344,8 +342,9 @@ export default {
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
         :no-local-sorting="true"
+        :sort-desc.sync="sortDesc"
+        :sort-by.sync="sortBy"
         sort-icon-left
-        sort-by="startedAt"
         @row-clicked="navigateToAlertDetails"
         @sort-changed="fetchSortedData"
       >

app/assets/stylesheets/framework/variables_overrides.scss

@@ -55,7 +55,7 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg \
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
   <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \
@@ -67,7 +67,7 @@ $b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg \
   ,9.90237 11.316555,9.90237 11.707085,10.2929 \
   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/> \
   </svg>') !default;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml,<svg \
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg \
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
   <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 \
   L11.7071,4.2971 C12.0976,4.6876 \

changelogs/unreleased/lm-change-sorting.yml

+---
+title: 'Alert Managament: Change sorting order to have newest alerts first'
+merge_request: 33642
+author:
+type: changed

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -48,7 +48,6 @@ describe('AlertManagementList', () => {
   const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
   const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
-  const findStartTimeColumnHeader = () => wrapper.findAll('th').at(1);
   const findPagination = () => wrapper.find(GlPagination);
   const alertsCount = {
     open: 14,
@@ -92,10 +91,7 @@ describe('AlertManagementList', () => {
     });
   }
 
-  const mockStartedAtCol = {};
-
   beforeEach(() => {
-    jest.spyOn(document, 'querySelector').mockReturnValue(mockStartedAtCol);
     mountComponent();
   });
 
@@ -333,7 +329,12 @@ describe('AlertManagementList', () => {
     beforeEach(() => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: { list: mockAlerts }, errored: false, sort: 'STARTED_AT_ASC', alertsCount },
+        data: {
+          alerts: { list: mockAlerts },
+          errored: false,
+          sort: 'STARTED_AT_DESC',
+          alertsCount,
+        },
         loading: false,
         stubs: { GlTable },
       });
@@ -348,17 +349,6 @@ describe('AlertManagementList', () => {
 
       expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC');
     });
-
-    it('updates the `ariaSort` attribute so the sort icon appears in the proper column', () => {
-      expect(findStartTimeColumnHeader().attributes('aria-sort')).toBe('ascending');
-
-      findSeverityColumnHeader().trigger('click');
-
-      wrapper.vm.$nextTick(() => {
-        expect(findStartTimeColumnHeader().attributes('aria-sort')).toBe('none');
-        expect(findSeverityColumnHeader().attributes('aria-sort')).toBe('ascending');
-      });
-    });
   });
 
   describe('updating the alert status', () => {