feat(ts/components/navMenu): add logout link to mobile nav (#2392)

* feat(ts/components/navMenu): add logout link to mobile nav
mbta · Feb 14, 2024 · 6e4ed30 · 6e4ed30
1 parent 8677c6c
commit 6e4ed30
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/assets/src/components/nav/navMenu.tsx b/assets/src/components/nav/navMenu.tsx
@@ -7,13 +7,16 @@ import { OldCloseIcon, LogoIcon } from "../../helpers/icon"
 import * as BsIcon from "../../helpers/bsIcons"
 import { joinClasses } from "../../helpers/dom"
 import { reload } from "../../models/browser"
+import inTestGroup, { TestGroups } from "../../userInTestGroup"
 
 interface Props {
   mobileMenuIsOpen: boolean
   toggleMobileMenu: () => void
 }
 
 const NavMenu: React.FC<Props> = ({ mobileMenuIsOpen, toggleMobileMenu }) => {
+  const keycloakEnabled = inTestGroup(TestGroups.KeycloakSso)
+
   return (
     <>
       <div
@@ -85,6 +88,22 @@ const NavMenu: React.FC<Props> = ({ mobileMenuIsOpen, toggleMobileMenu }) => {
                 <BsIcon.GearFill /> Settings
               </Nav.Link>
             </Nav.Item>
+            {keycloakEnabled && (
+              <>
+                <Nav.Item>
+                  <hr />
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link
+                    className="icon-link"
+                    as="a"
+                    href="/auth/keycloak/logout"
+                  >
+                    <BsIcon.BoxArrowRight /> Logout
+                  </Nav.Link>
+                </Nav.Item>
+              </>
+            )}
           </Nav>
         </div>
       </div>

diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
@@ -95,3 +95,28 @@ export const QuestionFill = (props: SvgProps) => (
     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
   </svg>
 )
+
+/**
+ * @returns https://icons.getbootstrap.com/icons/box-arrow-right/
+ */
+export const BoxArrowRight = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-box-arrow-right"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"
+    />
+    <path
+      fillRule="evenodd"
+      d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"
+    />
+  </svg>
+)
diff --git a/assets/tests/components/nav/navMenu.test.tsx b/assets/tests/components/nav/navMenu.test.tsx
@@ -8,6 +8,9 @@ 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"
+import { TestGroups } from "../../../src/userInTestGroup"
+import getEmailAddress from "../../../src/userEmailAddress"
 
 jest.mock("../../../src/helpers/drift", () => ({
   __esModule: true,
@@ -19,6 +22,13 @@ jest.mock("../../../src/helpers/appCue", () => ({
   displayHelp: jest.fn(),
 }))
 
+jest.mock("userTestGroups", () => ({
+  __esModule: true,
+  default: jest.fn(() => []),
+}))
+
+jest.mock("../../../src/userEmailAddress")
+
 describe("NavMenu", () => {
   test("when mobile menu is open, clicking the backdrop toggled the mobile menu", async () => {
     const toggleMobileMenu = jest.fn()
@@ -71,6 +81,33 @@ describe("NavMenu", () => {
     expect(result.getByTestId("nav-menu")).not.toHaveClass("c-nav-menu--open")
   })
 
+  test("shows logout button", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.KeycloakSso])
+    jest.mocked(getEmailAddress).mockReturnValue("[email protected]")
+
+    render(
+      <BrowserRouter>
+        <NavMenu toggleMobileMenu={jest.fn()} mobileMenuIsOpen={true} />
+      </BrowserRouter>
+    )
+
+    expect(screen.getByRole("link", { name: "Logout" })).toBeVisible()
+  })
+
+  test("doesn't show logout button if the user isn't in the Keycloak test group", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([])
+
+    render(
+      <BrowserRouter>
+        <NavMenu toggleMobileMenu={jest.fn()} mobileMenuIsOpen={true} />
+      </BrowserRouter>
+    )
+
+    expect(
+      screen.queryByRole("link", { name: "Logout" })
+    ).not.toBeInTheDocument()
+  })
+
   test("refresh button reloads the page", async () => {
     const reloadSpy = jest
       .spyOn(browser, "reload")