MNTOR-3865 - Move through broker results under maintenance with the r…

…ight arrow (#5400) * move through broker results in maintenance mode * clearer names
mozilla · Dec 12, 2024 · 824dbb2 · 824dbb2
1 parent e2249a5
commit 824dbb2
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 39 deletions.
diff --git a/locales/en/fix.ftl b/locales/en/fix.ftl
@@ -8,6 +8,7 @@ fix-flow-nav-security-recommendations = Security recommendations
 
 guided-resolution-flow-exit = Return to dashboard
 guided-resolution-flow-next-arrow = Go to next step
+guided-resolution-flow-next-arrow-sub-step = Go to next result
 guided-resolution-flow-step-navigation-label = Guided steps
 
 # Celebration screens

diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/FixView.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/FixView.tsx
@@ -18,12 +18,13 @@ import {
   StepLink,
 } from "../../../../../../../functions/server/getRelevantGuidedSteps";
 import { useTelemetry } from "../../../../../../../hooks/useTelemetry";
+import { TelemetryButton } from "../../../../../../../components/client/TelemetryButton";
 
 export type FixViewProps = {
   children: ReactNode;
   subscriberEmails: string[];
   data: StepDeterminationData;
-  nextStep: StepLink;
+  nextStep: StepLink | (() => void);
   currentSection:
     | "data-broker-profiles"
     | "high-risk-data-breach"
@@ -95,22 +96,47 @@ export const FixView = (props: FixViewProps) => {
         {!props.hideNavClose && navigationClose()}
         <section className={styles.fixSection}>
           <div className={styles.viewWrapper}>{props.children}</div>
-          {!props.hideNextNavigationRightArrow && (
-            <Link
-              className={`${styles.navArrow} ${styles.navArrowNext}`}
-              href={props.nextStep.href}
-              aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
-              onClick={() => {
-                recordTelemetry("button", "click", {
-                  button_id: "next_arrow",
-                });
-              }}
-            >
-              <Image alt="" src={ImageArrowRight} />
-            </Link>
-          )}
+          {!props.hideNextNavigationRightArrow &&
+            (isNextStepALink(props.nextStep) ? (
+              <Link
+                className={`${styles.navArrow} ${styles.navArrowNext}`}
+                href={props.nextStep.href}
+                aria-label={l10n.getString("guided-resolution-flow-next-arrow")}
+                onClick={() => {
+                  recordTelemetry("button", "click", {
+                    button_id: "next_arrow",
+                  });
+                }}
+              >
+                <Image alt="" src={ImageArrowRight} />
+              </Link>
+            ) : (
+              <TelemetryButton
+                className={`${styles.navArrow} ${styles.navArrowNext}`}
+                event={{
+                  module: "button",
+                  name: "click",
+                  data: {
+                    button_id: "go_to_next_result",
+                  },
+                }}
+                variant="link"
+                onPress={props.nextStep}
+                aria-label={l10n.getString(
+                  "guided-resolution-flow-next-arrow-sub-step",
+                )}
+              >
+                <Image alt="" src={ImageArrowRight} />
+              </TelemetryButton>
+            ))}
         </section>
       </div>
     </div>
   );
 };
+
+function isNextStepALink(
+  nextStep: StepLink | (() => void),
+): nextStep is StepLink {
+  return "href" in nextStep;
+}
diff --git a/...d/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.test.tsx b/...d/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.test.tsx
@@ -10,10 +10,8 @@ import { axe } from "jest-axe";
 import Meta, {
   RemovalUnderMaintenanceViewStory,
 } from "./RemovalUnderMaintenanceView.stories";
-
 const mockedRouterPush = jest.fn();
 
-jest.mock("../../../../../../../../../hooks/useTelemetry");
 jest.mock("next/navigation", () => ({
   useRouter: () => ({
     push: mockedRouterPush,
@@ -23,6 +21,13 @@ jest.mock("next/navigation", () => ({
     get: jest.fn(),
   }),
 }));
+const mockedRecordTelemetry = jest.fn();
+
+jest.mock("../../../../../../../../../hooks/useTelemetry", () => {
+  return {
+    useTelemetry: () => mockedRecordTelemetry,
+  };
+});
 
 describe("Removal under  maintenance", () => {
   it("passes the axe accessibility test suite", async () => {
@@ -122,3 +127,23 @@ describe("Removal under  maintenance", () => {
     expect(resolveButton).toHaveTextContent("Loading");
   });
 });
+
+it("clicks the right arrow button to show the next step", async () => {
+  const user = userEvent.setup();
+  const RemovalUnderMaintenanceView = composeStory(
+    RemovalUnderMaintenanceViewStory,
+    Meta,
+  );
+  render(<RemovalUnderMaintenanceView />);
+  const rightArrowBtn = screen.getByRole("button", {
+    name: "Go to next result",
+  });
+  await user.click(rightArrowBtn);
+  expect(mockedRecordTelemetry).toHaveBeenCalledWith(
+    "button",
+    "click",
+    expect.objectContaining({
+      button_id: "go_to_next_result",
+    }),
+  );
+});
diff --git a/...hboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.tsx b/...hboard/fix/data-broker-profiles/removal-under-maintenance/RemovalUnderMaintenanceView.tsx
@@ -48,6 +48,24 @@ export const RemovalUnderMaintenanceView = (props: Props) => {
 
   // Not covered by tests; mostly side-effects. See test-coverage.md#mock-heavy
   /* c8 ignore start */
+
+  function moveToNextAvailableStep() {
+    const currentResultIndex = props.data.results.findIndex(
+      (result) =>
+        result.onerep_scan_result_id ===
+        firstScanResultNotResolved.onerep_scan_result_id,
+    );
+
+    if (currentResultIndex < props.data.results.length - 1) {
+      // Move to the next unresolved result
+      const nextUnresolvedResult = props.data.results[currentResultIndex + 1];
+      setFirstScanResultNotResolved(nextUnresolvedResult);
+    } else {
+      // Redirect if no unresolved scan result remains
+      router.push(nextGuidedStep.href);
+    }
+  }
+
   async function handleManualRemovalChange() {
     setIsLoadingNextDataBroker(true);
     try {
@@ -70,19 +88,7 @@ export const RemovalUnderMaintenanceView = (props: Props) => {
       void confetti();
 
       // Mark the current scan result as manually resolved
-      const currentResultIndex = props.data.results.findIndex(
-        (result) =>
-          result.onerep_scan_result_id ===
-          firstScanResultNotResolved.onerep_scan_result_id,
-      );
-
-      if (currentResultIndex < props.data.results.length - 1) {
-        const nextUnresolvedResult = props.data.results[currentResultIndex + 1];
-        setFirstScanResultNotResolved(nextUnresolvedResult);
-      } else {
-        // Redirect if no unresolved scan result remains
-        router.push(nextGuidedStep.href);
-      }
+      moveToNextAvailableStep();
     } catch (error) {
       console.error("Error occurred in handleManualRemovalChange:", error);
     } finally {
@@ -398,7 +404,7 @@ export const RemovalUnderMaintenanceView = (props: Props) => {
   return (
     <FixView
       subscriberEmails={props.subscriberEmails}
-      nextStep={nextGuidedStep}
+      nextStep={() => moveToNextAvailableStep()}
       currentSection="data-broker-profiles"
       data={props.stepDeterminationData}
       hideProgressIndicator={detailedRemovalGuide}

diff --git a/src/app/components/client/FixNavigation.tsx b/src/app/components/client/FixNavigation.tsx
@@ -82,7 +82,9 @@ export const Steps = (props: {
       {label} {count > 0 && `(${count})`}
     </div>
   );
-
+  const dataBrokerStepCompleted =
+    hasCompletedStepSection(props.data, "Scan") &&
+    hasCompletedStepSection(props.data, "DataBrokerManualRemoval");
   return (
     <ul className={styles.steps}>
       {isEligibleForStep(props.data, "Scan") && (
@@ -96,11 +98,7 @@ export const Steps = (props: {
           }
           className={`${styles.navigationItem} ${
             props.currentSection === "data-broker-profiles" ? styles.active : ""
-          } ${
-            hasCompletedStepSection(props.data, "Scan")
-              ? styles.isCompleted
-              : ""
-          }`}
+          } ${dataBrokerStepCompleted ? styles.isCompleted : ""}`}
         >
           <div className={styles.stepIcon}>
             <StepImage data={props.data} section="Scan" />

diff --git a/src/app/functions/server/getRelevantGuidedSteps.ts b/src/app/functions/server/getRelevantGuidedSteps.ts
@@ -246,9 +246,9 @@ export function hasCompletedStep(
 ): boolean {
   if (stepId === "DataBrokerManualRemoval") {
     return (
-      data.latestScanData?.results.every(
+      data.latestScanData?.results?.every(
         (result) =>
-          result.broker_status === "removal_under_maintenance" &&
+          result.broker_status !== "removal_under_maintenance" ||
           result.manually_resolved,
       ) ?? false
     );