wip

Author: pedronfigueiredo

ui/components/app/alert-system/multiple-alert-modal/multiple-alert-modal.test.tsx

@@ -159,15 +159,20 @@ describe('MultipleAlertModal', () => {
     expect(onAcknowledgeClickMock).toHaveBeenCalledTimes(1);
   });
 
-  it('renders the next alert when the "Got it" button is clicked', () => {
-    const { getByTestId, getByText } = renderWithProvider(
+  it('does not change the alert when the "Got it" button is clicked', () => {
+    onAcknowledgeClickMock.mockReset();
+    const { getByTestId, getByText, queryByText } = renderWithProvider(
       <MultipleAlertModal {...defaultProps} alertKey={DATA_ALERT_KEY_MOCK} />,
       mockStoreAcknowledgeAlerts,
     );
 
+    expect(getByText(alertsMock[1].message)).toBeInTheDocument();
+
     fireEvent.click(getByTestId('alert-modal-button'));
 
+    expect(onAcknowledgeClickMock).toHaveBeenCalledTimes(1);
     expect(getByText(alertsMock[1].message)).toBeInTheDocument();
+    expect(queryByText(alertsMock[2].message)).not.toBeInTheDocument();
   });
 
   it('closes modal when the "Got it" button is clicked', () => {
@@ -186,20 +191,6 @@ describe('MultipleAlertModal', () => {
     expect(onAcknowledgeClickMock).toHaveBeenCalledTimes(1);
   });
 
-  it('resets to the first alert if there are unconfirmed alerts and the final alert is acknowledged', () => {
-    const { getByTestId, getByText } = renderWithProvider(
-      <MultipleAlertModal
-        {...defaultProps}
-        alertKey={CONTRACT_ALERT_KEY_MOCK}
-      />,
-      mockStore,
-    );
-
-    fireEvent.click(getByTestId('alert-modal-button'));
-
-    expect(getByText(alertsMock[0].message)).toBeInTheDocument();
-  });
-
   describe('FieldAlerts not present', () => {
     const alertsMockWithoutField = [
       {
@@ -280,7 +271,7 @@ describe('MultipleAlertModal', () => {
 
       fireEvent.click(getByTestId('alert-modal-back-button'));
 
-      expect(getByText(alertsMock[1].message)).toBeInTheDocument();
+      expect(getByText(alertsMock[0].message)).toBeInTheDocument();
     });
   });
 

ui/components/app/alert-system/multiple-alert-modal/multiple-alert-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Box,
   ButtonIcon,
@@ -12,14 +12,12 @@ import {
   BorderRadius,
   Display,
   IconColor,
-  Severity,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import useAlerts from '../../../../hooks/useAlerts';
 import { AlertModal } from '../alert-modal';
-import { Alert } from '../../../../ducks/confirm-alerts/confirm-alerts';
 
 export type MultipleAlertModalProps = {
   /** The key of the initial alert to display. */
@@ -168,7 +166,6 @@ export function MultipleAlertModal({
   const {
     alerts: alertsFromHook,
     fieldAlerts: fieldAlertsFromHook,
-    isAlertConfirmed,
     navigableAlerts: navigableAlertsFromHook,
     navigableFieldAlerts: navigableFieldAlertsFromHook,
   } = useAlerts(ownerId);
@@ -192,6 +189,82 @@ export function MultipleAlertModal({
     initialAlertKey,
   );
 
+  const previousAlertKeyRef = useRef<string | undefined>();
+  const pendingAlertKeyRef = useRef<string | undefined>();
+
+  useEffect(() => {
+    const alertKeyExists = alertKey
+      ? alertsToDisplay.some((alert) => alert.key === alertKey)
+      : false;
+
+    if (alertKey === previousAlertKeyRef.current) {
+      return;
+    }
+
+    previousAlertKeyRef.current = alertKey;
+
+    if (alertKeyExists && alertKey) {
+      if (alertKey !== currentAlertKey) {
+        setCurrentAlertKey(alertKey);
+      }
+      pendingAlertKeyRef.current = undefined;
+    } else {
+      pendingAlertKeyRef.current = alertKey ?? undefined;
+    }
+  }, [alertKey, alertsToDisplay, currentAlertKey]);
+
+  useEffect(() => {
+    const pendingAlertKey = pendingAlertKeyRef.current;
+
+    if (!pendingAlertKey) {
+      return;
+    }
+
+    const pendingAlertExists = alertsToDisplay.some(
+      (alert) => alert.key === pendingAlertKey,
+    );
+
+    if (!pendingAlertExists) {
+      return;
+    }
+
+    if (pendingAlertKey !== currentAlertKey) {
+      setCurrentAlertKey(pendingAlertKey);
+    }
+    pendingAlertKeyRef.current = undefined;
+  }, [alertsToDisplay, currentAlertKey]);
+
+  useEffect(() => {
+    const currentAlertStillExists = currentAlertKey
+      ? alertsToDisplay.some((alert) => alert.key === currentAlertKey)
+      : false;
+    const alertKeyExists = alertKey
+      ? alertsToDisplay.some((alert) => alert.key === alertKey)
+      : false;
+    const pendingAlertKey = pendingAlertKeyRef.current;
+    const pendingAlertExists = pendingAlertKey
+      ? alertsToDisplay.some((alert) => alert.key === pendingAlertKey)
+      : false;
+
+    if (currentAlertStillExists) {
+      return;
+    }
+
+    const fallbackKey =
+      (alertKeyExists && alertKey) ??
+      (pendingAlertExists && pendingAlertKey) ??
+      navigableAlertsToDisplay[0]?.key ??
+      alertsToDisplay[0]?.key;
+
+    if (fallbackKey !== currentAlertKey) {
+      setCurrentAlertKey(fallbackKey);
+    }
+
+    if (pendingAlertExists && fallbackKey === pendingAlertKey) {
+      pendingAlertKeyRef.current = undefined;
+    }
+  }, [alertKey, alertsToDisplay, navigableAlertsToDisplay, currentAlertKey]);
+
   const selectedAlert =
     alertsToDisplay.find((alert) => alert.key === currentAlertKey) ??
     alertsToDisplay[0];
@@ -200,11 +273,6 @@ export function MultipleAlertModal({
     (alert) => alert.key === (selectedAlert?.key ?? currentAlertKey),
   );
 
-  const hasUnconfirmedAlerts = alerts.some(
-    (alert: Alert) =>
-      !isAlertConfirmed(alert.key) && alert.severity === Severity.Danger,
-  );
-
   const handleBackButtonClick = useCallback(() => {
     const activeAlertKey = selectedAlert?.key ?? currentAlertKey;
     const newIndex = navigableAlertsToDisplay.findIndex(
@@ -232,58 +300,8 @@ export function MultipleAlertModal({
   }, [currentAlertKey, navigableAlertsToDisplay, selectedAlert]);
 
   const handleAcknowledgeClick = useCallback(() => {
-    const activeAlertKey = selectedAlert?.key ?? currentAlertKey;
-    const activeAlertHidesNavigation =
-      selectedAlert?.hideFromAlertNavigation === true;
-
-    if (skipAlertNavigation || !activeAlertKey) {
-      onFinalAcknowledgeClick();
-      return;
-    }
-
-    if (activeAlertHidesNavigation) {
-      onFinalAcknowledgeClick();
-      return;
-    }
-
-    const navigableIndex = navigableAlertsToDisplay.findIndex(
-      (alert) => alert.key === activeAlertKey,
-    );
-
-    if (navigableIndex === -1) {
-      onFinalAcknowledgeClick();
-      return;
-    }
-
-    const isLastNavigableAlert =
-      navigableIndex === navigableAlertsToDisplay.length - 1;
-
-    if (isLastNavigableAlert) {
-      if (!hasUnconfirmedAlerts) {
-        onFinalAcknowledgeClick();
-        return;
-      }
-
-      const firstNavigableKey = navigableAlertsToDisplay[0]?.key;
-      if (firstNavigableKey) {
-        setCurrentAlertKey(firstNavigableKey);
-      }
-      onFinalAcknowledgeClick();
-      return;
-    }
-
-    const nextAlertKey = navigableAlertsToDisplay[navigableIndex + 1]?.key;
-    if (nextAlertKey) {
-      setCurrentAlertKey(nextAlertKey);
-    }
-  }, [
-    currentAlertKey,
-    onFinalAcknowledgeClick,
-    hasUnconfirmedAlerts,
-    navigableAlertsToDisplay,
-    selectedAlert,
-    skipAlertNavigation,
-  ]);
+    onFinalAcknowledgeClick();
+  }, [onFinalAcknowledgeClick]);
 
   const showNavigationButtons =
     !skipAlertNavigation &&

ui/hooks/useAlerts.test.ts

@@ -64,10 +64,24 @@ describe('useAlerts', () => {
     return renderHookUseAlert(ownerId, state).result;
   };
 
+  const sortBySeverityDesc = (alerts: Alert[]) => {
+    const severityOrder = {
+      [Severity.Danger]: 3,
+      [Severity.Warning]: 2,
+      [Severity.Info]: 1,
+      [Severity.Success]: 0,
+    };
+
+    return [...alerts].sort(
+      (a, b) => severityOrder[b.severity] - severityOrder[a.severity],
+    );
+  };
+
   describe('alerts', () => {
     it('returns all alerts', () => {
       const result = renderAndReturnResult();
-      expect(result.current.alerts).toEqual(alertsMock);
+      const expectedAlerts = sortBySeverityDesc(alertsMock);
+      expect(result.current.alerts).toEqual(expectedAlerts);
       expect(result.current.hasAlerts).toEqual(true);
       expect(result.current.hasDangerAlerts).toEqual(true);
       expect(result.current.hasUnconfirmedDangerAlerts).toEqual(false);
@@ -200,7 +214,10 @@ describe('useAlerts', () => {
         },
       });
 
-      expect(result.current.generalAlerts).toEqual(expectedGeneralAlerts);
+      const expectedSortedGeneralAlerts = sortBySeverityDesc(
+        expectedGeneralAlerts,
+      );
+      expect(result.current.generalAlerts).toEqual(expectedSortedGeneralAlerts);
     });
   });
 
@@ -229,10 +246,12 @@ describe('useAlerts', () => {
   describe('fieldAlerts', () => {
     it('returns all alerts with field property', () => {
       const result = renderAndReturnResult();
-      expect(result.current.fieldAlerts).toEqual([
-        alertsMock[0],
-        alertsMock[2],
-      ]);
+      const expectedFieldAlerts = sortBySeverityDesc(
+        [alertsMock[0], alertsMock[2]].filter(
+          (alert) => typeof alert !== 'undefined',
+        ) as Alert[],
+      );
+      expect(result.current.fieldAlerts).toEqual(expectedFieldAlerts);
     });
 
     it('returns empty array if no alerts with field property', () => {

ui/hooks/useAlerts.ts

@@ -129,7 +129,7 @@ function sortAlertsBySeverity(alerts: Alert[]): Alert[] {
     [Severity.Success]: 0,
   };
 
-  return alerts.sort(
+  return [...alerts].sort(
     (a, b) => severityOrder[b.severity] - severityOrder[a.severity],
   );
 }