Commit b146cfda authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

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

Alert Managament: Change sorting order

See merge request gitlab-org/gitlab!33642
parents b8ce03a6 efec4567
......@@ -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"
>
......
......@@ -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 \
......
---
title: 'Alert Managament: Change sorting order to have newest alerts first'
merge_request: 33642
author:
type: changed
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment