feat: Base work to get detours in route ladder dropdown

assets/css/_route_ladder.scss

@@ -21,13 +21,9 @@
       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;
+      min-width: 20.5rem;
     }
 
     .dropdown-divider {

assets/src/components/ladderPage.tsx

@@ -30,6 +30,8 @@ import { fullStoryEvent } from "../helpers/fullStory"
 import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
 import { DetourModal } from "./detours/detourModal"
 import { Route } from "../schedule"
+import { DetourId } from "../models/detoursList"
+import { useLoadDetour } from "../hooks/useLoadDetour"
 
 type DrawerContent = "route_picker" | "presets"
 
@@ -147,6 +149,8 @@ const LadderPage = (): ReactElement<HTMLDivElement> => {
 
   const [showDetourModal, setShowDetourModal] = useState(false)
   const [routeForDetour, setRouteForDetour] = useState<Route | null>(null)
+  const [detourId, setDetourId] = useState<DetourId | undefined>()
+  const detour = useLoadDetour(detourId)
 
   return (
     <div
@@ -226,6 +230,10 @@ const LadderPage = (): ReactElement<HTMLDivElement> => {
             setRouteForDetour(route)
             setShowDetourModal(true)
           }}
+          onOpenDetour={(detourId) => {
+            setDetourId(detourId)
+            setShowDetourModal(true)
+          }}
         />
       </div>
       {routeForDetour && (
@@ -234,7 +242,21 @@ const LadderPage = (): ReactElement<HTMLDivElement> => {
           show={showDetourModal}
           onClose={() => {
             setShowDetourModal(false)
+            setRouteForDetour(null)
+          }}
+        />
+      )}
+      {showDetourModal && detour && (
+        <DetourModal
+          onClose={() => {
+            setShowDetourModal(false)
+            setDetourId(undefined)
           }}
+          show
+          key={detourId ?? ""}
+          snapshot={detour.state}
+          author={detour.author}
+          updatedAt={detour.updatedAt}
         />
       )}
     </div>

assets/src/components/routeLadder.tsx

@@ -24,13 +24,17 @@ import Tippy from "@tippyjs/react"
 import { tagManagerEvent } from "../helpers/googleTagManager"
 import inTestGroup, { TestGroups } from "../userInTestGroup"
 import {
+  ArrowDownLeftSquare,
+  ArrowUpRightSquare,
   ExclamationTriangleFill,
   PlusSquare,
   ThreeDotsVertical,
 } from "../helpers/bsIcons"
 import { RoutePill } from "./routePill"
 import { Card, CloseButton, Dropdown } from "react-bootstrap"
 import { joinClasses, joinTruthy } from "../helpers/dom"
+import { DetourId, SimpleDetour } from "../models/detoursList"
+import { DetoursMap } from "../hooks/useDetours"
 
 interface Props {
   route: Route
@@ -44,23 +48,26 @@ interface Props {
   ladderCrowdingToggles: LadderCrowdingToggles
   hasAlert: boolean
   onAddDetour?: (route: Route) => void
+  onOpenDetour?: (detourId: DetourId) => void
+  skateDetoursForRoute?: DetoursMap
 }
 
 export const Header = ({
   routeName,
   onClose,
   hasAlert,
   showDropdown,
-
   onClickAddDetour,
+  onOpenDetour,
+  skateDetoursForRoute,
 }: {
   routeName: string
   onClose: () => void
   hasAlert: boolean
-
   showDropdown: boolean
-
   onClickAddDetour?: () => void
+  onOpenDetour?: (detourId: DetourId) => void
+  skateDetoursForRoute?: DetoursMap
 }) => {
   const routePillId = "route-pill" + useId()
   const routeOptionsToggleId = "route-options-toggle" + useId()
@@ -100,20 +107,48 @@ export const Header = ({
                 >
                   <PlusSquare /> Add detour
                 </Dropdown.Item>
+                <Dropdown.Divider className="border-top-0" />
+                <Dropdown.Header>
+                  <div className="c-route-ladder__dropdown-header-text">
+                    Active detours
+                  </div>
+                </Dropdown.Header>
                 {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>
+                    {skateDetoursForRoute &&
+                      Object.values(skateDetoursForRoute).map(
+                        (detour: SimpleDetour) => (
+                          <Dropdown.Item
+                            key={detour.id}
+                            className="icon-link"
+                            onClick={() => onOpenDetour?.(detour.id)}
+                          >
+                            {detour.direction === "Outbound" ? (
+                              <ArrowDownLeftSquare />
+                            ) : (
+                              <ArrowUpRightSquare />
+                            )}
+                            <div>
+                              {detour.route} {detour.direction} -{" "}
+                              {detour.intersection}
+                            </div>
+                          </Dropdown.Item>
+                        )
+                      )}
+                    {(!skateDetoursForRoute ||
+                      Object.values(skateDetoursForRoute).length == 0) && (
+                      <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>
+                    )}
                   </>
                 )}
+                {!hasAlert && (
+                  <Dropdown.ItemText className="lh-base pb-4">
+                    No active detours
+                  </Dropdown.ItemText>
+                )}
               </Dropdown.Menu>
             </Dropdown>
           )}
@@ -223,6 +258,8 @@ const RouteLadder = ({
   ladderCrowdingToggles,
   hasAlert,
   onAddDetour,
+  onOpenDetour,
+  skateDetoursForRoute,
 }: Props) => {
   const ladderDirection = getLadderDirectionForRoute(ladderDirections, route.id)
 
@@ -258,6 +295,8 @@ const RouteLadder = ({
         onClickAddDetour={() => {
           onAddDetour?.(route)
         }}
+        onOpenDetour={onOpenDetour}
+        skateDetoursForRoute={skateDetoursForRoute}
       />
       <Controls
         displayCrowdingToggleIcon={displayCrowding}

assets/src/components/routeLadders.tsx

@@ -9,6 +9,8 @@ import RoutesContext from "../contexts/routesContext"
 import useTimepoints from "../hooks/useTimepoints"
 import { SocketContext } from "../contexts/socketContext"
 import useAlerts from "../hooks/useAlerts"
+import { useActiveDetoursByRoute } from "../hooks/useDetours"
+import { DetourId } from "../models/detoursList"
 
 export const findRouteById = (
   routes: Route[] | null,
@@ -24,6 +26,7 @@ interface Props {
   ladderDirections: LadderDirections
   ladderCrowdingToggles: LadderCrowdingToggles
   onAddDetour?: (route: Route) => void
+  onOpenDetour?: (detourId: DetourId) => void
 }
 
 const RouteLadders = ({
@@ -35,6 +38,7 @@ const RouteLadders = ({
   ladderDirections,
   ladderCrowdingToggles,
   onAddDetour,
+  onOpenDetour,
 }: Props) => {
   const vehiclesByRouteId: ByRouteId<(VehicleInScheduledService | Ghost)[]> =
     useContext(VehiclesByRouteIdContext)
@@ -59,11 +63,18 @@ const RouteLadders = ({
   const alerts = useAlerts(socket, selectedRouteIds)
   const routesWithAlerts: RouteId[] = []
 
+  const skateDetours = useActiveDetoursByRoute(socket, selectedRouteIds)
+
   for (const routeId in alerts) {
     if (alerts[routeId].length > 0) {
       routesWithAlerts.push(routeId)
     }
   }
+  for (const routeId in skateDetours) {
+    if (Object.keys(skateDetours[routeId]).length > 0) {
+      routesWithAlerts.push(routeId)
+    }
+  }
 
   return (
     <div
@@ -86,6 +97,8 @@ const RouteLadders = ({
           ladderCrowdingToggles={ladderCrowdingToggles}
           hasAlert={routesWithAlerts.includes(route.id)}
           onAddDetour={onAddDetour}
+          onOpenDetour={onOpenDetour}
+          skateDetoursForRoute={skateDetours[route.id]}
         />
       ))}
     </div>

assets/src/helpers/bsIcons.tsx

@@ -41,6 +41,27 @@ export const ArrowClockwise = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/arrow-down-left-square/
+ */
+export const ArrowDownLeftSquare = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-arrow-up-right-square"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707z"
+    />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/arrow-left-square/
  */
@@ -80,6 +101,27 @@ export const ArrowLeft = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/arrow-up-right-square/
+ */
+export const ArrowUpRightSquare = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-arrow-up-right-square"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707z"
+    />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/box-arrow-right/
  */

assets/src/hooks/useDetours.ts

@@ -13,7 +13,7 @@ import { ByRouteId, RouteId } from "../schedule"
 import { equalByElements } from "../helpers/array"
 import { array, create } from "superstruct"
 
-interface DetoursMap {
+export interface DetoursMap {
   [key: number]: SimpleDetour
 }
 

assets/tests/components/app.test.tsx

@@ -26,6 +26,7 @@ import { OpenView, PagePath } from "../../src/state/pagePanelState"
 import { viewFactory } from "../factories/pagePanelStateFactory"
 import userEvent from "@testing-library/user-event"
 import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
+import { useLoadDetour } from "../../src/hooks/useLoadDetour"
 
 // Avoid Halloween
 jest
@@ -48,9 +49,15 @@ jest.mock("userTestGroups", () => ({
 }))
 
 jest.mock("../../src/hooks/usePanelState")
+jest.mock("../../src/hooks/useLoadDetour")
 
 beforeEach(() => {
   mockUsePanelState()
+  // we _should_ mock the promise, but this file already are mocking hooks here,
+  // and there are a lot of tests, so mocking the hook here too for now
+  jest.mocked(useLoadDetour).mockReturnValue(undefined)
+
+  // Also, `useVehicles` should be mocked in beforeEach. To be done in future PR
 })
 
 describe("App", () => {

assets/tests/components/appStateWrapper.test.tsx

@@ -1,7 +1,9 @@
-import { test, expect, jest } from "@jest/globals"
+import { test, expect, jest, beforeEach } from "@jest/globals"
 import React from "react"
-import { render } from "@testing-library/react"
+import { render, waitFor } from "@testing-library/react"
 import AppStateWrapper from "../../src/components/appStateWrapper"
+import { fetchDetour, fetchRoutes, putRouteTabs } from "../../src/api"
+import { neverPromise } from "../testHelpers/mockHelpers"
 
 // Avoid Halloween
 jest
@@ -13,7 +15,15 @@ jest.mock("userTestGroups", () => ({
   default: jest.fn(() => []),
 }))
 
-test("renders", () => {
+jest.mock("../../src/api")
+
+beforeEach(() => {
+  jest.mocked(fetchRoutes).mockReturnValue(neverPromise())
+  jest.mocked(putRouteTabs).mockReturnValue(neverPromise())
+  jest.mocked(fetchDetour).mockReturnValue(neverPromise())
+})
+
+test("renders", async () => {
   const result = render(<AppStateWrapper />)
-  expect(result.asFragment()).toMatchSnapshot()
+  await waitFor(() => expect(result.asFragment()).toMatchSnapshot())
 })

assets/tests/components/detours/detoursListPage.openDetour.test.tsx

@@ -14,7 +14,7 @@ import { mockScreenSize, neverPromise } from "../../testHelpers/mockHelpers"
 import getTestGroups from "../../../src/userTestGroups"
 import { detourListFactory } from "../../factories/detourListFactory"
 import { TestGroups } from "../../../src/userInTestGroup"
-import { detourStateMachineFactory } from "../../factories/detourStateMachineFactory"
+import { detourInProgressFactory } from "../../factories/detourStateMachineFactory"
 import { viewDraftDetourHeading } from "../../testHelpers/selectors/components/detours/diversionPage"
 
 jest
@@ -48,7 +48,7 @@ describe("Detours Page: Open a Detour", () => {
     // even if it doesn't match the detour clicked
     jest
       .mocked(fetchDetour)
-      .mockResolvedValue(Ok(detourStateMachineFactory.build()))
+      .mockResolvedValue(Ok(detourInProgressFactory.build()))
 
     const { baseElement } = render(<DetourListPage />)
 
@@ -69,7 +69,7 @@ describe("Detours Page: Open a Detour", () => {
 
     jest
       .mocked(fetchDetour)
-      .mockResolvedValue(Ok(detourStateMachineFactory.build()))
+      .mockResolvedValue(Ok(detourInProgressFactory.build()))
 
     const { baseElement } = render(<DetourListPage />)
 
@@ -85,7 +85,7 @@ describe("Detours Page: Open a Detour", () => {
 
     jest
       .mocked(fetchDetour)
-      .mockResolvedValue(Ok(detourStateMachineFactory.build()))
+      .mockResolvedValue(Ok(detourInProgressFactory.build()))
 
     render(<DetourListPage />)