Commit 47d7099e authored by Tristan Read's avatar Tristan Read Committed by Andrew Fontaine

Highlight row when alert is new

parent ec44773b
......@@ -44,6 +44,8 @@ const initialPaginationState = {
lastPageSize: null,
};
const TWELVE_HOURS_IN_MS = 12 * 60 * 60 * 1000;
export default {
i18n: {
noAlertsMsg: s__(
......@@ -149,9 +151,20 @@ export default {
update(data) {
const { alertManagementAlerts: { nodes: list = [], pageInfo = {} } = {} } =
data.project || {};
const now = new Date();
const listWithData = list.map(alert => {
const then = new Date(alert.startedAt);
const diff = now - then;
return {
...alert,
isNew: diff < TWELVE_HOURS_IN_MS,
};
});
return {
list,
list: listWithData,
pageInfo,
};
},
......@@ -207,9 +220,6 @@ export default {
hasAlerts() {
return this.alerts?.list?.length;
},
tbodyTrClass() {
return !this.loading && this.hasAlerts ? bodyTrClass : '';
},
showPaginationControls() {
return Boolean(this.prevPage || this.nextPage);
},
......@@ -290,6 +300,12 @@ export default {
resetPagination() {
this.pagination = initialPaginationState;
},
tbodyTrClass(item) {
return {
[bodyTrClass]: !this.loading && this.hasAlerts,
'new-alert': item?.isNew,
};
},
handleAlertError(errorMessage) {
this.errored = true;
this.errorMessage = errorMessage;
......
.alert-management-list {
.new-alert {
background-color: $issues-today-bg;
}
// these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
table {
color: $gray-700;
......
---
title: Show when alert is new in the Alerts list
merge_request: 35708
author:
type: added
......@@ -349,6 +349,40 @@ describe('AlertManagementTable', () => {
});
expect(findDateFields().exists()).toBe(false);
});
describe('New Alert indicator', () => {
const oldAlert = mockAlerts[0];
const newAlert = { ...oldAlert, isNew: true };
it('should highlight the row when alert is new', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: { list: [newAlert] }, alertsCount, errored: false },
loading: false,
});
expect(
findAlerts()
.at(0)
.classes(),
).toContain('new-alert');
});
it('should not highlight the row when alert is not new', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: { list: [oldAlert] }, alertsCount, errored: false },
loading: false,
});
expect(
findAlerts()
.at(0)
.classes(),
).not.toContain('new-alert');
});
});
});
});
......
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