From 3eb545ef3103422915390aefb06288f9e3213826 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Fri, 27 Sep 2024 08:00:46 -0400
Subject: [PATCH] feat: Update route ladder dropdown (#2802)

* feat: Route ladder dropdown includes text if there's an external detour

---------

Co-authored-by: Josh Larson <jlarson@mbta.com>
---
 assets/css/_route_ladder.scss                 | 40 +++++++++-
 assets/src/components/routeLadder.tsx         | 40 ++++++++--
 assets/src/helpers/bsIcons.tsx                | 18 +++++
 .../__snapshots__/ladderPage.test.tsx.snap    | 14 ++--
 .../__snapshots__/minimalLadder.test.tsx.snap |  4 +-
 .../__snapshots__/routeLadder.test.tsx.snap   | 53 ++++++++-----
 .../__snapshots__/routeLadders.test.tsx.snap  |  4 +-
 assets/tests/components/routeLadder.test.tsx  | 74 +++++++++++++++++++
 8 files changed, 206 insertions(+), 41 deletions(-)

diff --git a/assets/css/_route_ladder.scss b/assets/css/_route_ladder.scss
index 30ead6398..d1fcfcb46 100644
--- a/assets/css/_route_ladder.scss
+++ b/assets/css/_route_ladder.scss
@@ -1,3 +1,5 @@
+@use "./color/tokens_2024" as new_tokens;
+
 .c-route-ladder__header,
 .c-route-ladder__controls {
   margin: 0 0.5rem;
@@ -12,24 +14,54 @@
     padding: 6px 8px;
   }
 
-  .c-route-ladder__header__action-container {
+  .c-route-ladder__dropdown {
     display: inline-flex;
     .dropdown,
     .c-route-ladder__alert-icon {
       padding-right: 0.5rem;
     }
+
+    &.c-route-ladder__dropdown--non-skate-alert .dropdown-menu {
+      width: 20.5rem;
+    }
+
+    .dropdown-menu {
+      border-radius: 0.25rem;
+      max-width: 20.5rem;
+    }
+
+    .dropdown-divider {
+      border-color: $color-gray-300;
+    }
   }
 
   .c-route-ladder__dropdown-button {
     height: 2.25rem;
-    width: 2.25rem;
+    width: 1.8125rem;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    color: black;
+    border-radius: 0.25rem;
+
+    &:active {
+      background-color: unset;
+      color: unset;
+    }
 
     &.dropdown-toggle::after {
-      // Force bootstrap carat to center even with hidden text
-      margin-left: 0;
+      // Hide bootstrap carat
+      display: none;
     }
   }
 
+  .c-route-ladder__dropdown-header-text {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: new_tokens.$gray-800;
+  }
+
   .c-route-ladder__alert-icon {
     display: flex;
     align-items: center;
diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx
index ad83c4ccf..a90f5af81 100644
--- a/assets/src/components/routeLadder.tsx
+++ b/assets/src/components/routeLadder.tsx
@@ -23,10 +23,14 @@ import Loading from "./loading"
 import Tippy from "@tippyjs/react"
 import { tagManagerEvent } from "../helpers/googleTagManager"
 import inTestGroup, { TestGroups } from "../userInTestGroup"
-import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons"
+import {
+  ExclamationTriangleFill,
+  PlusSquare,
+  ThreeDotsVertical,
+} from "../helpers/bsIcons"
 import { RoutePill } from "./routePill"
 import { Card, CloseButton, Dropdown } from "react-bootstrap"
-import { joinTruthy } from "../helpers/dom"
+import { joinClasses, joinTruthy } from "../helpers/dom"
 
 interface Props {
   route: Route
@@ -63,25 +67,49 @@ export const Header = ({
   return (
     <Card className="c-route-ladder__header">
       <Card.Body>
-        <div className="c-route-ladder__header__action-container">
+        <div
+          className={joinClasses([
+            "c-route-ladder__dropdown",
+            hasAlert && "c-route-ladder__dropdown--non-skate-alert",
+          ])}
+        >
           {showDropdown && (
             <Dropdown className="border-box inherit-box">
               <Dropdown.Toggle
-                className="c-route-ladder__dropdown-button d-none d-sm-block"
+                className="c-route-ladder__dropdown-button d-none d-sm-flex"
                 aria-labelledby={joinTruthy([
                   routePillId,
                   routeOptionsToggleId,
                 ])}
               >
+                <ThreeDotsVertical />
                 <span className="visually-hidden" id={routeOptionsToggleId}>
                   Route Options
                 </span>
               </Dropdown.Toggle>
               <Dropdown.Menu>
+                <Dropdown.Header>
+                  <div className="c-route-ladder__dropdown-header-text">
+                    Adjustments
+                  </div>
+                </Dropdown.Header>
                 <Dropdown.Item className="icon-link" onClick={onClickAddDetour}>
-                  <PlusSquare />
-                  Add detour
+                  <PlusSquare /> Add detour
                 </Dropdown.Item>
+                {hasAlert && (
+                  <>
+                    <Dropdown.Divider className="border-top-0" />
+                    <Dropdown.Header>
+                      <div className="c-route-ladder__dropdown-header-text">
+                        Active detours
+                      </div>
+                    </Dropdown.Header>
+                    <Dropdown.ItemText className="lh-base pb-4">
+                      This route has an active detour. View detour details on{" "}
+                      <a href="https://www.mbta.com/">mbta.com</a> or in IRIS.
+                    </Dropdown.ItemText>
+                  </>
+                )}
               </Dropdown.Menu>
             </Dropdown>
           )}
diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
index 9389fff76..782c13e1f 100644
--- a/assets/src/helpers/bsIcons.tsx
+++ b/assets/src/helpers/bsIcons.tsx
@@ -358,6 +358,24 @@ export const StopCircle = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/three-dots-vertical/
+ */
+export const ThreeDotsVertical = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-three-dots-vertical"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/x-square/
  */
diff --git a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
index 20d7436dd..2e1203fbf 100644
--- a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
@@ -296,7 +296,7 @@ exports[`LadderPage renders with alerts 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -337,7 +337,7 @@ exports[`LadderPage renders with alerts 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown c-route-ladder__dropdown--non-skate-alert"
             >
               <div
                 class="mock-tippy"
@@ -606,7 +606,7 @@ exports[`LadderPage renders with route tabs 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -826,7 +826,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -867,7 +867,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -1087,7 +1087,7 @@ exports[`LadderPage renders with timepoints 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -1246,7 +1246,7 @@ exports[`LadderPage renders with timepoints 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
diff --git a/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap b/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
index 1ecc61e66..7a37d8031 100644
--- a/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
           class="card-body"
         >
           <div
-            class="c-route-ladder__header__action-container"
+            class="c-route-ladder__dropdown"
           />
           <div
             class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -175,7 +175,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
           class="card-body"
         >
           <div
-            class="c-route-ladder__header__action-container"
+            class="c-route-ladder__dropdown"
           />
           <div
             class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
diff --git a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
index 81db6eee7..81a8eb7d2 100644
--- a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
@@ -9,11 +9,11 @@ exports[`routeLadder displays loading if we are fetching the timepoints 1`] = `
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rl:"
+        id="route-pill:rr:"
       >
         28
       </div>
@@ -55,11 +55,11 @@ exports[`routeLadder displays no crowding data for a bus coming off a route with
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rh:"
+        id="route-pill:rn:"
       >
         28
       </div>
@@ -324,11 +324,11 @@ exports[`routeLadder doesn't display crowding data for a vehicle coming off a ro
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rj:"
+        id="route-pill:rp:"
       >
         28
       </div>
@@ -536,11 +536,11 @@ exports[`routeLadder doesn't render a bus that's off-course but nonrevenue 1`] =
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rf:"
+        id="route-pill:rl:"
       >
         28
       </div>
@@ -715,7 +715,7 @@ exports[`routeLadder renders a route ladder 1`] = `
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -852,11 +852,11 @@ exports[`routeLadder renders a route ladder with crowding instead of vehicles 1`
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rd:"
+        id="route-pill:rj:"
       >
         28
       </div>
@@ -1125,11 +1125,11 @@ exports[`routeLadder renders a route ladder with laying over vehicles 1`] = `
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:rb:"
+        id="route-pill:rh:"
       >
         28
       </div>
@@ -1337,7 +1337,7 @@ exports[`routeLadder renders a route ladder with the new header and detour dropd
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       >
         <div
           class="border-box inherit-box dropdown"
@@ -1345,10 +1345,23 @@ exports[`routeLadder renders a route ladder with the new header and detour dropd
           <button
             aria-expanded="false"
             aria-labelledby="route-pill:r4: route-options-toggle:r5:"
-            class="c-route-ladder__dropdown-button d-none d-sm-block dropdown-toggle btn btn-primary"
+            class="c-route-ladder__dropdown-button d-none d-sm-flex dropdown-toggle btn btn-primary"
             id="react-aria-:r6:"
             type="button"
           >
+            <svg
+              aria-hidden="true"
+              class="bi bi-three-dots-vertical"
+              fill="currentColor"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"
+              />
+            </svg>
             <span
               class="visually-hidden"
               id="route-options-toggle:r5:"
@@ -1493,7 +1506,7 @@ exports[`routeLadder renders a route ladder with the new header format 1`] = `
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -1630,11 +1643,11 @@ exports[`routeLadder renders a route ladder with vehicles 1`] = `
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:r7:"
+        id="route-pill:rd:"
       >
         28
       </div>
@@ -1934,11 +1947,11 @@ exports[`routeLadder renders a route ladder with vehicles in the incoming box 1`
       class="card-body"
     >
       <div
-        class="c-route-ladder__header__action-container"
+        class="c-route-ladder__dropdown"
       />
       <div
         class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
-        id="route-pill:r9:"
+        id="route-pill:rf:"
       >
         28
       </div>
diff --git a/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
index a82eddd38..e50ea778c 100644
--- a/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/routeLadders.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
         class="card-body"
       >
         <div
-          class="c-route-ladder__header__action-container"
+          class="c-route-ladder__dropdown"
         />
         <div
           class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -172,7 +172,7 @@ exports[`RouteLadders renders a route ladder 1`] = `
         class="card-body"
       >
         <div
-          class="c-route-ladder__header__action-container"
+          class="c-route-ladder__dropdown"
         />
         <div
           class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
diff --git a/assets/tests/components/routeLadder.test.tsx b/assets/tests/components/routeLadder.test.tsx
index 010bc93d1..e4aaff5df 100644
--- a/assets/tests/components/routeLadder.test.tsx
+++ b/assets/tests/components/routeLadder.test.tsx
@@ -259,6 +259,80 @@ describe("routeLadder", () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test("renders descriptive content in dropdown if there's a non-skate alert", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot])
+
+    const route: Route = routeFactory.build({
+      id: "28",
+      name: "28",
+    })
+    const timepoints = [
+      { id: "MATPN", name: "MATPN Name" },
+      { id: "WELLH", name: "WELLH Name" },
+      { id: "MORTN", name: "MORTN Name" },
+    ]
+
+    render(
+      <RouteLadder
+        route={route}
+        timepoints={timepoints}
+        vehiclesAndGhosts={undefined}
+        selectedVehicleId={undefined}
+        deselectRoute={() => {}}
+        reverseLadder={() => {}}
+        toggleCrowding={() => {}}
+        ladderDirections={{}}
+        ladderCrowdingToggles={{}}
+        hasAlert={true}
+      />
+    )
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "28 Route Options" })
+    )
+
+    expect(screen.getByText(/This route has an active detour./)).toBeVisible()
+  })
+
+  test("renders 'Add detour' in the dropdown", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot])
+
+    const route: Route = routeFactory.build({
+      id: "28",
+      name: "28",
+    })
+    const timepoints = [
+      { id: "MATPN", name: "MATPN Name" },
+      { id: "WELLH", name: "WELLH Name" },
+      { id: "MORTN", name: "MORTN Name" },
+    ]
+
+    render(
+      <RouteLadder
+        route={route}
+        timepoints={timepoints}
+        vehiclesAndGhosts={undefined}
+        selectedVehicleId={undefined}
+        deselectRoute={() => {}}
+        reverseLadder={() => {}}
+        toggleCrowding={() => {}}
+        ladderDirections={{}}
+        ladderCrowdingToggles={{}}
+        hasAlert={false}
+      />
+    )
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "28 Route Options" })
+    )
+
+    expect(
+      screen.queryByText(/This route has an active detour./)
+    ).not.toBeInTheDocument()
+
+    expect(screen.getByText("Add detour")).toBeVisible()
+  })
+
   test("renders a route ladder with vehicles", () => {
     const route: Route = routeFactory.build({
       id: "28",