feat: Direct About Skate clicks to the /user-guide endpoint

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

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>

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

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

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()

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()
   })