From 237d74a9277913cf93b6efb205ab132f26502370 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 14 May 2024 11:02:53 -0400
Subject: [PATCH] feat: Direct `About Skate` clicks to the /user-guide endpoint
 (#2593)

---
 assets/src/components/nav/leftNav.tsx          | 11 +++++------
 assets/src/components/nav/navMenu.tsx          | 11 +++++------
 .../components/__snapshots__/app.test.tsx.snap |  6 ++++--
 .../appStateWrapper.test.tsx.snap              |  6 ++++--
 assets/tests/components/nav/leftNav.test.tsx   | 14 --------------
 assets/tests/components/nav/navMenu.test.tsx   | 18 +-----------------
 6 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/assets/src/components/nav/leftNav.tsx b/assets/src/components/nav/leftNav.tsx
index 32a8f7361..aa74d4a5f 100644
--- a/assets/src/components/nav/leftNav.tsx
+++ b/assets/src/components/nav/leftNav.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useContext } from "react"
-import { NavLink, useLocation } from "react-router-dom"
+import { NavLink } from "react-router-dom"
 import { StateDispatchContext } from "../../contexts/stateDispatchContext"
-import { displayHelp } from "../../helpers/appCue"
 import { openDrift } from "../../helpers/drift"
 import { tagManagerEvent } from "../../helpers/googleTagManager"
 import NotificationBellIcon from "../notificationBellIcon"
@@ -65,7 +64,6 @@ const LeftNav = ({
   } = usePanelStateFromStateDispatchContext()
 
   const [collapsed, setCollapsed] = useState<boolean>(defaultToCollapsed)
-  const location = useLocation()
 
   const bellIconClasses =
     openView == OpenView.NotificationDrawer
@@ -180,14 +178,15 @@ const LeftNav = ({
               </button>
             </li>
             <li>
-              <button
+              <a
                 className="c-left-nav__link"
-                onClick={() => displayHelp(location)}
                 title="About Skate"
+                target="_blank"
+                href="/user-guide"
               >
                 <QuestionMarkIcon className="c-left-nav__icon" />
                 About Skate
-              </button>
+              </a>
             </li>
             <li>
               <NavLink
diff --git a/assets/src/components/nav/navMenu.tsx b/assets/src/components/nav/navMenu.tsx
index 3ff677b83..5e5226f87 100644
--- a/assets/src/components/nav/navMenu.tsx
+++ b/assets/src/components/nav/navMenu.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import { Link } from "react-router-dom"
 import { Nav } from "react-bootstrap"
-import { displayHelp } from "../../helpers/appCue"
 import { openDrift } from "../../helpers/drift"
 import { OldCloseIcon, LogoIcon } from "../../helpers/icon"
 import * as BsIcon from "../../helpers/bsIcons"
@@ -76,12 +75,12 @@ const NavMenu: React.FC<Props> = ({ mobileMenuIsOpen, toggleMobileMenu }) => {
             </Nav.Item>
             <Nav.Item>
               <Nav.Link
+                as={Link}
+                onClick={toggleMobileMenu}
+                title="About Skate"
+                to="/user-guide"
+                target="_blank"
                 className="icon-link"
-                as="button"
-                onClick={() => {
-                  displayHelp(location)
-                  toggleMobileMenu()
-                }}
               >
                 <BsIcon.QuestionFill /> About Skate
               </Nav.Link>
diff --git a/assets/tests/components/__snapshots__/app.test.tsx.snap b/assets/tests/components/__snapshots__/app.test.tsx.snap
index 238e49756..729f65cf1 100644
--- a/assets/tests/components/__snapshots__/app.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/app.test.tsx.snap
@@ -181,8 +181,10 @@ exports[`App renders 1`] = `
                   </button>
                 </li>
                 <li>
-                  <button
+                  <a
                     class="c-left-nav__link"
+                    href="/user-guide"
+                    target="_blank"
                     title="About Skate"
                   >
                     <span
@@ -191,7 +193,7 @@ exports[`App renders 1`] = `
                       <svg />
                     </span>
                     About Skate
-                  </button>
+                  </a>
                 </li>
                 <li>
                   <a
diff --git a/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap b/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
index 9ff58e409..ddf56bc22 100644
--- a/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
@@ -181,8 +181,10 @@ exports[`renders 1`] = `
                   </button>
                 </li>
                 <li>
-                  <button
+                  <a
                     class="c-left-nav__link"
+                    href="/user-guide"
+                    target="_blank"
                     title="About Skate"
                   >
                     <span
@@ -191,7 +193,7 @@ exports[`renders 1`] = `
                       <svg />
                     </span>
                     About Skate
-                  </button>
+                  </a>
                 </li>
                 <li>
                   <a
diff --git a/assets/tests/components/nav/leftNav.test.tsx b/assets/tests/components/nav/leftNav.test.tsx
index ee942f172..18e7f6254 100644
--- a/assets/tests/components/nav/leftNav.test.tsx
+++ b/assets/tests/components/nav/leftNav.test.tsx
@@ -6,7 +6,6 @@ import React from "react"
 import { BrowserRouter } from "react-router-dom"
 import LeftNav from "../../../src/components/nav/leftNav"
 import { StateDispatchProvider } from "../../../src/contexts/stateDispatchContext"
-import { displayHelp } from "../../../src/helpers/appCue"
 import { openDrift } from "../../../src/helpers/drift"
 import { tagManagerEvent } from "../../../src/helpers/googleTagManager"
 import { initialState, togglePickerContainer } from "../../../src/state"
@@ -309,19 +308,6 @@ describe("LeftNav", () => {
     expect(openDrift).toHaveBeenCalled()
   })
 
-  test("clicking About Skate button displays help", async () => {
-    const user = userEvent.setup()
-    const result = render(
-      <BrowserRouter>
-        <LeftNav defaultToCollapsed={false} dispatcherFlag={false} />
-      </BrowserRouter>
-    )
-
-    await user.click(result.getByTitle("About Skate"))
-
-    expect(displayHelp).toHaveBeenCalled()
-  })
-
   test("clicking notifications icon toggles notifications drawer and logs a tag manager event", async () => {
     const mockedUsePanelState = mockUsePanelState()
     const user = userEvent.setup()
diff --git a/assets/tests/components/nav/navMenu.test.tsx b/assets/tests/components/nav/navMenu.test.tsx
index 8519c396f..c0cd5be67 100644
--- a/assets/tests/components/nav/navMenu.test.tsx
+++ b/assets/tests/components/nav/navMenu.test.tsx
@@ -5,7 +5,6 @@ import userEvent from "@testing-library/user-event"
 import "@testing-library/jest-dom/jest-globals"
 import * as browser from "../../../src/models/browser"
 import { openDrift } from "../../../src/helpers/drift"
-import { displayHelp } from "../../../src/helpers/appCue"
 import NavMenu from "../../../src/components/nav/navMenu"
 import { BrowserRouter } from "react-router-dom"
 import getTestGroups from "../../../src/userTestGroups"
@@ -197,21 +196,6 @@ describe("NavMenu", () => {
     expect(toggleMobileMenu).toHaveBeenCalled()
   })
 
-  test("clicking About Skate button displays help", async () => {
-    const toggleMobileMenu = jest.fn()
-
-    const user = userEvent.setup()
-    const result = render(
-      <BrowserRouter>
-        <NavMenu toggleMobileMenu={toggleMobileMenu} mobileMenuIsOpen={false} />
-      </BrowserRouter>
-    )
-
-    await user.click(result.getByRole("button", { name: "About Skate" }))
-
-    expect(displayHelp).toHaveBeenCalled()
-  })
-
   test("clicking the About button closes the mobile menu", async () => {
     const toggleMobileMenu = jest.fn()
 
@@ -222,7 +206,7 @@ describe("NavMenu", () => {
       </BrowserRouter>
     )
 
-    await user.click(result.getByRole("button", { name: "About Skate" }))
+    await user.click(result.getByRole("link", { name: "About Skate" }))
 
     expect(toggleMobileMenu).toHaveBeenCalled()
   })