feat: Add non-navigable alert modals

Author: pedronfigueiredo

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

@@ -23,6 +23,7 @@ describe('MultipleAlertModal', () => {
   const FROM_ALERT_KEY_MOCK = 'from';
   const CONTRACT_ALERT_KEY_MOCK = 'contract';
   const DATA_ALERT_KEY_MOCK = 'data';
+  const HIDDEN_ALERT_KEY_MOCK = 'hidden';
   const onAcknowledgeClickMock = jest.fn();
   const onCloseMock = jest.fn();
 
@@ -282,4 +283,98 @@ describe('MultipleAlertModal', () => {
       expect(getByText(alertsMock[1].message)).toBeInTheDocument();
     });
   });
+
+  describe('Alerts hidden from navigation', () => {
+    const alertsWithHiddenNavigationMock = [
+      {
+        key: FROM_ALERT_KEY_MOCK,
+        field: FROM_ALERT_KEY_MOCK,
+        severity: Severity.Warning,
+        message: 'Alert 1',
+        reason: 'Reason 1',
+        alertDetails: ['Detail 1', 'Detail 2'],
+      },
+      {
+        key: HIDDEN_ALERT_KEY_MOCK,
+        field: HIDDEN_ALERT_KEY_MOCK,
+        severity: Severity.Danger,
+        message: 'Hidden Alert',
+        hideFromAlertNavigation: true,
+      },
+      {
+        key: CONTRACT_ALERT_KEY_MOCK,
+        field: CONTRACT_ALERT_KEY_MOCK,
+        severity: Severity.Info,
+        message: 'Alert 3',
+      },
+    ];
+
+    const mockStoreWithHiddenNavigation = configureMockStore([])({
+      ...STATE_MOCK,
+      confirmAlerts: {
+        alerts: { [OWNER_ID_MOCK]: alertsWithHiddenNavigationMock },
+        confirmed: {
+          [OWNER_ID_MOCK]: {
+            [FROM_ALERT_KEY_MOCK]: false,
+            [HIDDEN_ALERT_KEY_MOCK]: false,
+            [CONTRACT_ALERT_KEY_MOCK]: false,
+          },
+        },
+      },
+    });
+
+    const mockStoreWithHiddenNavigationConfirmed = configureMockStore([])({
+      ...STATE_MOCK,
+      confirmAlerts: {
+        alerts: { [OWNER_ID_MOCK]: alertsWithHiddenNavigationMock },
+        confirmed: {
+          [OWNER_ID_MOCK]: {
+            [FROM_ALERT_KEY_MOCK]: true,
+            [HIDDEN_ALERT_KEY_MOCK]: true,
+            [CONTRACT_ALERT_KEY_MOCK]: true,
+          },
+        },
+      },
+    });
+
+    it('does not render navigation controls when the selected alert hides navigation', () => {
+      const { queryByTestId } = renderWithProvider(
+        <MultipleAlertModal
+          {...defaultProps}
+          alertKey={HIDDEN_ALERT_KEY_MOCK}
+        />,
+        mockStoreWithHiddenNavigation,
+      );
+
+      expect(queryByTestId('alert-modal-next-button')).toBeNull();
+      expect(queryByTestId('alert-modal-back-button')).toBeNull();
+    });
+
+    it('skips alerts hidden from navigation when cycling forward', () => {
+      const { getByTestId, getByText, queryByText } = renderWithProvider(
+        <MultipleAlertModal {...defaultProps} />,
+        mockStoreWithHiddenNavigation,
+      );
+
+      fireEvent.click(getByTestId('alert-modal-next-button'));
+
+      expect(queryByText('Hidden Alert')).not.toBeInTheDocument();
+      expect(getByText('Alert 3')).toBeInTheDocument();
+    });
+
+    it('acknowledges an alert that hides navigation without cycling', () => {
+      onAcknowledgeClickMock.mockReset();
+      const { getByTestId } = renderWithProvider(
+        <MultipleAlertModal
+          {...defaultProps}
+          alertKey={HIDDEN_ALERT_KEY_MOCK}
+        />,
+        mockStoreWithHiddenNavigationConfirmed,
+      );
+
+      fireEvent.click(getByTestId('alert-modal-button'));
+
+      expect(onAcknowledgeClickMock).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -165,73 +165,146 @@ export function MultipleAlertModal({
   showCloseIcon = true,
   skipAlertNavigation = false,
 }: MultipleAlertModalProps) {
-  const { isAlertConfirmed, fieldAlerts, alerts } = useAlerts(ownerId);
+  const {
+    alerts: alertsFromHook,
+    fieldAlerts: fieldAlertsFromHook,
+    isAlertConfirmed,
+    navigableAlerts: navigableAlertsFromHook,
+    navigableFieldAlerts: navigableFieldAlertsFromHook,
+  } = useAlerts(ownerId);
+
+  const alerts = alertsFromHook ?? [];
+  const fieldAlerts = fieldAlertsFromHook ?? [];
+  const navigableAlerts = navigableAlertsFromHook ?? alerts;
+  const navigableFieldAlerts = navigableFieldAlertsFromHook ?? fieldAlerts;
+
   const alertsToDisplay = displayAllAlerts ? alerts : fieldAlerts;
+  const navigableAlertsToDisplay = displayAllAlerts
+    ? navigableAlerts
+    : navigableFieldAlerts;
 
-  const initialAlertIndex = alertsToDisplay.findIndex(
-    (alert: Alert) => alert.key === alertKey,
-  );
+  const initialAlertKey =
+    alertsToDisplay.find((alert) => alert.key === alertKey)?.key ??
+    navigableAlertsToDisplay[0]?.key ??
+    alertsToDisplay[0]?.key;
 
-  const [selectedIndex, setSelectedIndex] = useState(
-    initialAlertIndex === -1 ? 0 : initialAlertIndex,
+  const [currentAlertKey, setCurrentAlertKey] = useState<string | undefined>(
+    initialAlertKey,
   );
 
-  // If the selected alert is not found, default to the first alert
-  const selectedAlert = alertsToDisplay[selectedIndex] ?? alertsToDisplay[0];
+  const selectedAlert =
+    alertsToDisplay.find((alert) => alert.key === currentAlertKey) ??
+    alertsToDisplay[0];
+
+  const currentNavigableIndex = navigableAlertsToDisplay.findIndex(
+    (alert) => alert.key === (selectedAlert?.key ?? currentAlertKey),
+  );
 
   const hasUnconfirmedAlerts = alerts.some(
     (alert: Alert) =>
       !isAlertConfirmed(alert.key) && alert.severity === Severity.Danger,
   );
 
   const handleBackButtonClick = useCallback(() => {
-    setSelectedIndex((prevIndex: number) =>
-      prevIndex > 0 ? prevIndex - 1 : prevIndex,
+    const activeAlertKey = selectedAlert?.key ?? currentAlertKey;
+    const newIndex = navigableAlertsToDisplay.findIndex(
+      (alert) => alert.key === activeAlertKey,
     );
-  }, []);
+
+    if (newIndex > 0) {
+      setCurrentAlertKey(navigableAlertsToDisplay[newIndex - 1]?.key);
+    }
+  }, [currentAlertKey, navigableAlertsToDisplay, selectedAlert]);
 
   const handleNextButtonClick = useCallback(() => {
-    setSelectedIndex((prevIndex: number) => prevIndex + 1);
-  }, []);
+    const activeAlertKey = selectedAlert?.key ?? currentAlertKey;
+    const newIndex = navigableAlertsToDisplay.findIndex(
+      (alert) => alert.key === activeAlertKey,
+    );
+
+    if (
+      newIndex !== -1 &&
+      newIndex + 1 < navigableAlertsToDisplay.length &&
+      navigableAlertsToDisplay[newIndex + 1]?.key
+    ) {
+      setCurrentAlertKey(navigableAlertsToDisplay[newIndex + 1]?.key);
+    }
+  }, [currentAlertKey, navigableAlertsToDisplay, selectedAlert]);
 
   const handleAcknowledgeClick = useCallback(() => {
-    if (skipAlertNavigation) {
+    const activeAlertKey = selectedAlert?.key ?? currentAlertKey;
+    const activeAlertHidesNavigation =
+      selectedAlert?.hideFromAlertNavigation === true;
+
+    if (skipAlertNavigation || !activeAlertKey) {
+      onFinalAcknowledgeClick();
+      return;
+    }
+
+    if (activeAlertHidesNavigation) {
       onFinalAcknowledgeClick();
       return;
     }
 
-    if (selectedIndex + 1 === alertsToDisplay.length) {
+    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;
       }
 
-      setSelectedIndex(0);
+      const firstNavigableKey = navigableAlertsToDisplay[0]?.key;
+      if (firstNavigableKey) {
+        setCurrentAlertKey(firstNavigableKey);
+      }
       return;
     }
-    handleNextButtonClick();
+
+    const nextAlertKey = navigableAlertsToDisplay[navigableIndex + 1]?.key;
+    if (nextAlertKey) {
+      setCurrentAlertKey(nextAlertKey);
+    }
   }, [
+    currentAlertKey,
     onFinalAcknowledgeClick,
-    handleNextButtonClick,
-    selectedIndex,
-    alertsToDisplay.length,
     hasUnconfirmedAlerts,
+    navigableAlertsToDisplay,
+    selectedAlert,
     skipAlertNavigation,
   ]);
 
+  const showNavigationButtons =
+    !skipAlertNavigation &&
+    selectedAlert?.hideFromAlertNavigation !== true &&
+    currentNavigableIndex !== -1 &&
+    navigableAlertsToDisplay.length > 1;
+
   return (
     <AlertModal
       ownerId={ownerId}
       onAcknowledgeClick={handleAcknowledgeClick}
       alertKey={selectedAlert?.key}
       onClose={onClose}
       headerStartAccessory={
-        <PageNavigation
-          alerts={alertsToDisplay}
-          onBackButtonClick={handleBackButtonClick}
-          onNextButtonClick={handleNextButtonClick}
-          selectedIndex={selectedIndex}
-        />
+        showNavigationButtons ? (
+          <PageNavigation
+            alerts={navigableAlertsToDisplay}
+            onBackButtonClick={handleBackButtonClick}
+            onNextButtonClick={handleNextButtonClick}
+            selectedIndex={currentNavigableIndex}
+          />
+        ) : null
       }
       showCloseIcon={showCloseIcon}
     />

ui/components/app/confirm/info/row/alert-row/alert-row.tsx

@@ -54,12 +54,15 @@ export const ConfirmInfoAlertRow = ({
   const { getFieldAlerts } = useAlerts(ownerId);
   const fieldAlerts = getFieldAlerts(alertKey);
   const hasFieldAlert = fieldAlerts.length > 0;
-  const selectedAlertSeverity = fieldAlerts[0]?.severity;
-  const selectedAlertKey = fieldAlerts[0]?.key;
-  const selectedAlertShowArrow = fieldAlerts[0]?.showArrow;
-  const selectedAlertInlineAlertText = fieldAlerts[0]?.inlineAlertText;
+  const selectedAlert = fieldAlerts[0];
+  const selectedAlertSeverity = selectedAlert?.severity;
+  const selectedAlertKey = selectedAlert?.key;
+  const selectedAlertShowArrow = selectedAlert?.showArrow;
+  const selectedAlertInlineAlertText = selectedAlert?.inlineAlertText;
   const selectedAlertIsOpenModalOnClick =
-    fieldAlerts[0]?.isOpenModalOnClick ?? true;
+    selectedAlert?.isOpenModalOnClick ?? true;
+  const selectedAlertHideFromAlertNavigation =
+    selectedAlert?.hideFromAlertNavigation ?? false;
 
   const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false);
 
@@ -139,7 +142,7 @@ export const ConfirmInfoAlertRow = ({
           onFinalAcknowledgeClick={handleModalClose}
           onClose={handleModalClose}
           showCloseIcon={false}
-          skipAlertNavigation={true}
+          skipAlertNavigation={selectedAlertHideFromAlertNavigation}
         />
       )}
       {confirmInfoRow}

ui/ducks/confirm-alerts/confirm-alerts.ts

@@ -68,6 +68,11 @@ export type Alert = {
    */
   severity: AlertSeverity;
 
+  /**
+   * Whether this alert should be excluded from navigation controls.
+   */
+  hideFromAlertNavigation?: boolean;
+
   /**
    * Whether to show the arrow icon on the inline alert.
    */

ui/hooks/useAlerts.test.ts

@@ -240,6 +240,72 @@ describe('useAlerts', () => {
     });
   });
 
+  describe('navigable alerts', () => {
+    it('excludes alerts that hide from alert navigation', () => {
+      const hiddenFieldAlertKey = 'hidden-field';
+      const generalAlertKey = 'general';
+      const hiddenGeneralAlertKey = 'hidden-general';
+
+      const fieldVisibleAlert = {
+        key: fromAlertKeyMock,
+        field: fromAlertKeyMock,
+        severity: Severity.Danger as AlertSeverity,
+        message: 'Visible Field Alert',
+      };
+      const fieldHiddenAlert = {
+        key: hiddenFieldAlertKey,
+        field: fromAlertKeyMock,
+        severity: Severity.Warning as AlertSeverity,
+        message: 'Hidden Field Alert',
+        hideFromAlertNavigation: true,
+      };
+      const generalVisibleAlert = {
+        key: generalAlertKey,
+        severity: Severity.Info as AlertSeverity,
+        message: 'Visible General Alert',
+      };
+      const generalHiddenAlert = {
+        key: hiddenGeneralAlertKey,
+        severity: Severity.Success as AlertSeverity,
+        message: 'Hidden General Alert',
+        hideFromAlertNavigation: true,
+      };
+
+      const state = {
+        confirmAlerts: {
+          alerts: {
+            [ownerIdMock]: [
+              fieldVisibleAlert,
+              fieldHiddenAlert,
+              generalVisibleAlert,
+              generalHiddenAlert,
+            ],
+          },
+          confirmed: {},
+        },
+      };
+
+      const result = renderAndReturnResult(undefined, state);
+
+      expect(result.current.navigableAlerts.map(({ key }) => key)).toEqual([
+        fieldVisibleAlert.key,
+        generalVisibleAlert.key,
+      ]);
+      expect(result.current.navigableFieldAlerts.map(({ key }) => key)).toEqual(
+        [fieldVisibleAlert.key],
+      );
+      expect(
+        result.current.navigableGeneralAlerts.map(({ key }) => key),
+      ).toEqual([generalVisibleAlert.key]);
+      expect(
+        result.current
+          .getNavigableFieldAlerts(fromAlertKeyMock)
+          .map(({ key }) => key),
+      ).toEqual([fieldVisibleAlert.key]);
+      expect(result.current.getNavigableFieldAlerts('unknown')).toEqual([]);
+    });
+  });
+
   describe('isAlertConfirmed', () => {
     it('returns an if an alert is confirmed', () => {
       const result = renderAndReturnResult();