MNTOR-5162 - Fix Monitor logo breaking version on dashboard (#6436)

* fix breaking version on dashboard

* usePathname to avoid undefined pathname crash

* align route handling between Storybook and Jest for MonitorLogo

* remove unused path

Author: codemist

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/high-risk-data-breaches/[type]/HighRiskDataBreach.stories.tsx

@@ -135,27 +135,55 @@ export const SsnStory: Story = {
   args: {
     type: "social-security-number",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/high-risk-data-breaches/social-security-number",
+      },
+    },
+  },
 };
 
 export const CreditCardStory: Story = {
   name: "2b. Credit card",
   args: {
     type: "credit-card",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/high-risk-data-breaches/credit-card",
+      },
+    },
+  },
 };
 
 export const BankAccountStory: Story = {
   name: "2c. Bank account",
   args: {
     type: "bank-account",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/high-risk-data-breaches/bank-account",
+      },
+    },
+  },
 };
 
 export const PinStory: Story = {
   name: "2d. PIN",
   args: {
     type: "pin",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/high-risk-data-breaches/pin",
+      },
+    },
+  },
 };
 
 export const HighRiskBreachDoneStory: Story = {
@@ -164,4 +192,11 @@ export const HighRiskBreachDoneStory: Story = {
     type: "done",
     nextUnresolvedBreachType: "None",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/high-risk-data-breaches/done",
+      },
+    },
+  },
 };

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/leaked-passwords/[type]/LeakedPasswords.stories.tsx

@@ -122,13 +122,27 @@ export const PasswordsStory: Story = {
   args: {
     type: "passwords",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/leaked-passwords/passwords",
+      },
+    },
+  },
 };
 
 export const SecurityQuestionsStory: Story = {
   name: "3b. Security questions",
   args: {
     type: "security-questions",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/leaked-passwords/security-questions",
+      },
+    },
+  },
 };
 
 export const LeakedPasswordsDoneStory: Story = {
@@ -137,4 +151,11 @@ export const LeakedPasswordsDoneStory: Story = {
     type: "passwords-done",
     nextUnresolvedBreachType: "None",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/leaked-passwords/done",
+      },
+    },
+  },
 };

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/security-recommendations/[type]/SecurityRecommendations.stories.tsx

@@ -93,25 +93,53 @@ export const PhoneStory: Story = {
   args: {
     type: "phone",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/security-recommendations/phone",
+      },
+    },
+  },
 };
 
 export const EmailStory: Story = {
   name: "4b. Email address",
   args: {
     type: "email",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/security-recommendations/email",
+      },
+    },
+  },
 };
 
 export const IpStory: Story = {
   name: "4c. IP address",
   args: {
     type: "ip",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/security-recommendations/ip",
+      },
+    },
+  },
 };
 
 export const DoneStory: Story = {
   name: "4d. Done",
   args: {
     type: "done",
   },
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/security-recommendations/done",
+      },
+    },
+  },
 };

src/app/(proper_react)/(redesign)/Shell/MonitorLogo.module.scss

@@ -0,0 +1,28 @@
+@use "../../../tokens";
+
+.homeLink {
+  display: none;
+
+  @media screen and (min-width: tokens.$screen-md) {
+    align-items: center;
+    display: flex;
+    height: tokens.$tab-bar-height;
+    padding: 0 tokens.$spacing-lg;
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+
+    &:focus {
+      outline-offset: calc(-1 * tokens.$border-focus-width);
+      outline: tokens.$border-focus-width solid tokens.$color-purple-10;
+    }
+
+    &.isOnDashboard {
+      background: tokens.$color-white;
+      border-bottom: 1px solid tokens.$color-grey-20;
+      box-shadow: tokens.$box-shadow-xs;
+    }
+  }
+}

src/app/(proper_react)/(redesign)/Shell/MonitorLogo.stories.ts

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { MonitorLogo } from "./MonitorLogo";
+
+const meta: Meta<typeof MonitorLogo> = {
+  title: "Layout/Navigation/Monitor Logo",
+  component: MonitorLogo,
+};
+
+export default meta;
+type Story = StoryObj<typeof MonitorLogo>;
+
+export const MonitorLogoFixFlow: Story = {
+  args: {},
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/fix/leaked-passwords/passwords",
+      },
+    },
+  },
+};
+
+export const MonitorLogoActionNeeded: Story = {
+  args: {},
+  parameters: {
+    nextjs: {
+      navigation: {
+        pathname: "/action-needed",
+      },
+    },
+  },
+};

src/app/(proper_react)/(redesign)/Shell/MonitorLogo.test.tsx

@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { render, screen } from "@testing-library/react";
+import { composeStory } from "@storybook/react";
+import Meta, {
+  MonitorLogoActionNeeded,
+  MonitorLogoFixFlow,
+} from "./MonitorLogo.stories";
+import * as navigation from "next/navigation";
+
+jest.mock("next/navigation", () => ({
+  usePathname: jest.fn(),
+}));
+
+const mockedUsePathname = navigation.usePathname as unknown as jest.Mock;
+
+describe("MonitorLogo", () => {
+  beforeEach(() => mockedUsePathname.mockReset());
+
+  it("has white background on dashboard", () => {
+    mockedUsePathname.mockReturnValue("/");
+
+    const Composed = composeStory(MonitorLogoActionNeeded, Meta);
+    render(<Composed />);
+
+    const homeLink = screen.getByRole("link", { name: "Home" });
+    expect(homeLink).toHaveClass("isOnDashboard");
+  });
+
+  it("does not have white background on /fix", () => {
+    mockedUsePathname.mockReturnValue("/fix/leaked-passwords/passwords");
+
+    const Composed = composeStory(MonitorLogoFixFlow, Meta);
+    render(<Composed />);
+
+    const homeLink = screen.getByRole("link", { name: "Home" });
+    expect(homeLink).not.toHaveClass("isOnDashboard");
+  });
+});

src/app/(proper_react)/(redesign)/Shell/MonitorLogo.tsx

@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import Image from "next/image";
+import MonitorLogoImg from "../../images/monitor-logo.svg";
+import { useL10n } from "../../../hooks/l10n";
+import { usePathname } from "next/navigation";
+import styles from "./MonitorLogo.module.scss";
+import Link from "next/link";
+
+export const MonitorLogo = () => {
+  const l10n = useL10n();
+  const pathname = usePathname();
+  const isResolutionFlow =
+    typeof pathname === "string" && pathname.includes("/fix/");
+  return (
+    <Link
+      href="/user/dashboard"
+      className={`${styles.homeLink} ${!isResolutionFlow ? styles.isOnDashboard : ""}`}
+    >
+      <Image
+        src={MonitorLogoImg}
+        alt={l10n.getString("main-nav-link-home-label")}
+        width={170}
+      />
+    </Link>
+  );
+};

src/app/(proper_react)/(redesign)/Shell/ShellRedesign.module.scss

@@ -19,27 +19,6 @@
   }
 }
 
-.homeLink {
-  display: none;
-
-  @media screen and (min-width: tokens.$screen-md) {
-    align-items: center;
-    display: flex;
-    height: tokens.$tab-bar-height;
-    padding: 0 tokens.$spacing-lg;
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
-
-    &:focus {
-      outline-offset: calc(-1 * tokens.$border-focus-width);
-      outline: tokens.$border-focus-width solid tokens.$color-purple-10;
-    }
-  }
-}
-
 .content {
   background-color: tokens.$color-grey-05;
   display: flex;

src/app/(proper_react)/(redesign)/Shell/ShellRedesign.tsx

@@ -3,17 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ReactNode } from "react";
-import Link from "next/link";
-import Image from "next/image";
 import { Session } from "next-auth";
 import { MobileShell } from "../MobileShell";
 import { Footer } from "../Footer";
 import { ExtendedReactLocalization } from "../../../functions/l10n";
 import { FeatureFlagName } from "../../../../db/tables/featureFlags";
-import MonitorLogo from "../../images/monitor-logo.svg";
 import styles from "./ShellRedesign.module.scss";
 import { NavbarList } from "./ShellNavbarList";
 import { UserAnnouncementWithDetails } from "../../../../db/tables/user_announcements";
+import { MonitorLogo } from "./MonitorLogo";
 
 export type Props = {
   l10n: ExtendedReactLocalization;
@@ -41,13 +39,7 @@ export const ShellRedesign = (props: Props) => {
             className={styles.mainMenu}
             aria-label={props.l10n.getString("main-nav-label")}
           >
-            <Link href="/user/dashboard" className={styles.homeLink}>
-              <Image
-                src={MonitorLogo}
-                alt={props.l10n.getString("main-nav-link-home-label")}
-                width={170}
-              />
-            </Link>
+            <MonitorLogo />
             {!props.hideSidebar && (
               <NavbarList
                 countryCode={props.countryCode}