Merge branch 'tr-show-new-alerts' into 'master'

Highlight row when alert is new

See merge request gitlab-org/gitlab!35708

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

@@ -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;

app/assets/stylesheets/pages/alert_management/list.scss

 .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;

changelogs/unreleased/tr-show-new-alerts.yml

+---
+title: Show when alert is new in the Alerts list
+merge_request: 35708
+author:
+type: added

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -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');
+        });
+      });
     });
   });