Merge branch 'main' into hp/skate-detours-channel

assets/src/app.tsx

@@ -20,6 +20,7 @@ import AppStateWrapper from "./components/appStateWrapper"
 import { tagManagerIdentify } from "./helpers/googleTagManager"
 import { fullStoryInit } from "./helpers/fullStory"
 import inTestGroup, { TestGroups } from "./userInTestGroup"
+import { userUuid } from "./util/userUuid"
 
 document.documentElement.dataset.demoMode = inTestGroup(
   TestGroups.DemoMode
@@ -37,11 +38,7 @@ sentryInit(
   window.sentryInitialization?.orgSlug
 )
 
-const userUuid = document
-  .querySelector("meta[name=user-uuid]")
-  ?.getAttribute("content")
-
-tagManagerIdentify(userUuid)
+tagManagerIdentify(userUuid())
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(document.getElementById("app")!)

assets/src/components/detours/detourPanels/activeDetourPanel.tsx

@@ -80,12 +80,6 @@ export const ActiveDetourPanel = ({
             routeDirection={routeDirection}
           />
 
-          {connectionPoints && (
-            <ConnectionPoints connectionPoints={connectionPoints} />
-          )}
-
-          {missedStops && <MissedStops missedStops={missedStops} />}
-
           <section className="pb-3">
             <h2 className="c-diversion-panel__h2">Detour Directions</h2>
             {directions ? (
@@ -102,6 +96,12 @@ export const ActiveDetourPanel = ({
               </ListGroup>
             ) : null}
           </section>
+
+          {connectionPoints && (
+            <ConnectionPoints connectionPoints={connectionPoints} />
+          )}
+
+          {missedStops && <MissedStops missedStops={missedStops} />}
         </Panel.Body.ScrollArea>
 
         <Panel.Body.Footer>

assets/src/components/detours/detourPanels/detourFinishedPanel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, ReactNode } from "react"
 import { Button, Form } from "react-bootstrap"
 import * as BsIcons from "../../../helpers/bsIcons"
 import { Panel } from "../diversionPage"
@@ -17,6 +17,7 @@ interface DetourFinishedPanelProps extends PropsWithChildren {
   missedStops?: Stop[]
   onChangeDetourText: (value: string) => void
   onActivateDetour?: () => void
+  affectedRoute?: ReactNode
 }
 
 export const DetourFinishedPanel = ({
@@ -28,6 +29,7 @@ export const DetourFinishedPanel = ({
   onChangeDetourText,
   onActivateDetour,
   children,
+  affectedRoute,
 }: DetourFinishedPanelProps) => (
   <Panel as="article" className="c-diversion-panel">
     <Panel.Header>
@@ -46,14 +48,16 @@ export const DetourFinishedPanel = ({
           <BsIcons.ArrowLeft /> Edit
         </Button>
 
+        {affectedRoute}
+
         <h2 className="c-diversion-panel__h2">Directions</h2>
-        {/* 
+        {/*
             We need a way to let the form area take up exactly the space of its content
             (to avoid double scrollbars). We used this approach:
             https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
 
-            The result is that the Form.Control has an invisible twin that helps the 
-            wrapper grow to the appropriate size, and then the Form.Control likewise 
+            The result is that the Form.Control has an invisible twin that helps the
+            wrapper grow to the appropriate size, and then the Form.Control likewise
             assumes that space. All styles that affect layout must be identical
             (e.g., `border`, `padding`, `margin`, `font`) between the `<Form.Control/>`
             and the `.c-autosized-textarea::after` pseudo-element.

assets/src/components/detours/detourPanels/pastDetourPanel.tsx

@@ -65,12 +65,6 @@ export const PastDetourPanel = ({
           routeDirection={routeDirection}
         />
 
-        {connectionPoints && (
-          <ConnectionPoints connectionPoints={connectionPoints} />
-        )}
-
-        {missedStops && <MissedStops missedStops={missedStops} />}
-
         <section className="pb-3">
           <h2 className="c-diversion-panel__h2">Detour Directions</h2>
           {directions ? (
@@ -87,6 +81,12 @@ export const PastDetourPanel = ({
             </ListGroup>
           ) : null}
         </section>
+
+        {connectionPoints && (
+          <ConnectionPoints connectionPoints={connectionPoints} />
+        )}
+
+        {missedStops && <MissedStops missedStops={missedStops} />}
       </Panel.Body.ScrollArea>
     </Panel.Body>
   </Panel>

assets/src/components/detours/diversionPage.tsx

@@ -30,6 +30,7 @@ import { DeactivateDetourModal } from "./deactivateDetourModal"
 import useScreenSize from "../../hooks/useScreenSize"
 import { Drawer } from "../drawer"
 import { isMobile } from "../../util/screenSize"
+import { AffectedRoute } from "./detourPanelComponents"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -143,17 +144,17 @@ export const DiversionPage = ({
     `Detour ${routeName} ${routeDirection}`,
     routeOrigin,
     ,
+    "Turn-by-Turn Directions:",
+    ...(editedDirections
+      ? [editedDirections]
+      : extendedDirections?.map((v) => v.instruction) ?? []),
+    ,
     "Connection Points:",
     connectionPoints?.start?.name ?? "N/A",
     connectionPoints?.end?.name ?? "N/A",
     ,
     `Missed Stops (${missedStops?.length}):`,
     ...(missedStops?.map(({ name }) => name) ?? ["no stops"]),
-    ,
-    "Turn-by-Turn Directions:",
-    ...(editedDirections
-      ? [editedDirections]
-      : extendedDirections?.map((v) => v.instruction) ?? []),
   ].join("\n")
 
   const routes = useContext(RoutesContext)
@@ -270,6 +271,14 @@ export const DiversionPage = ({
                 }
               : undefined
           }
+          affectedRoute={
+            <AffectedRoute
+              routeName={routeName ?? "??"}
+              routeDescription={routeDescription ?? "??"}
+              routeOrigin={routeOrigin ?? "??"}
+              routeDirection={routeDirection ?? "??"}
+            />
+          }
         >
           {snapshot.matches({
             "Detour Drawing": {

assets/src/util/userUuid.ts

@@ -0,0 +1,2 @@
+export const userUuid = (): string | null | undefined =>
+  document.querySelector("meta[name=user-uuid]")?.getAttribute("content")

assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { DetourFinishedPanel } from "../../../src/components/detours/detourPanels/detourFinishedPanel"
 import React from "react"
+import { AffectedRoute } from "../../../src/components/detours/detourPanelComponents"
 
 // Copied from Figma
 const defaultText = [
@@ -41,6 +42,16 @@ const meta = {
   args: {
     copyableDetourText: defaultText,
     editableDirections: turnByTurn,
+    affectedRoute: (
+      <>
+        <AffectedRoute
+          routeName="39"
+          routeDirection="Outbound"
+          routeDescription="Avenue Louis Pasteur"
+          routeOrigin="Forest Hills Station"
+        />
+      </>
+    ),
   },
   // The bootstrap CSS reset is supposed to set box-sizing: border-box by
   // default, we should be able to remove this after that is added

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

@@ -456,6 +456,43 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   </svg>
                    Edit
                 </button>
+                <section
+                  class="pb-3"
+                >
+                  <h2
+                    class="c-diversion-panel__h2 c-detour-panel__subheader"
+                  >
+                    Affected route
+                  </h2>
+                  <div
+                    class="d-flex"
+                  >
+                    <div
+                      class="c-route-pill c-route-pill--bus me-2 align-top"
+                    >
+                      2
+                    </div>
+                    <div
+                      class="d-inline-block"
+                    >
+                      <p
+                        class="my-0 c-diversion-panel__description"
+                      >
+                        Headsign 2
+                      </p>
+                      <p
+                        class="my-0 text-muted c-diversion-panel__origin py-1"
+                      >
+                        Route pattern From A2 - To B2
+                      </p>
+                      <p
+                        class="my-0 small c-diversion-panel__direction py-1"
+                      >
+                        Outbound
+                      </p>
+                    </div>
+                  </div>
+                </section>
                 <h2
                   class="c-diversion-panel__h2"
                 >
@@ -1270,6 +1307,43 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                 </svg>
                  Edit
               </button>
+              <section
+                class="pb-3"
+              >
+                <h2
+                  class="c-diversion-panel__h2 c-detour-panel__subheader"
+                >
+                  Affected route
+                </h2>
+                <div
+                  class="d-flex"
+                >
+                  <div
+                    class="c-route-pill c-route-pill--bus me-2 align-top"
+                  >
+                    1
+                  </div>
+                  <div
+                    class="d-inline-block"
+                  >
+                    <p
+                      class="my-0 c-diversion-panel__description"
+                    >
+                      Headsign 1
+                    </p>
+                    <p
+                      class="my-0 text-muted c-diversion-panel__origin py-1"
+                    >
+                      Route pattern From A1 - To B1
+                    </p>
+                    <p
+                      class="my-0 small c-diversion-panel__direction py-1"
+                    >
+                      Outbound
+                    </p>
+                  </div>
+                </div>
+              </section>
               <h2
                 class="c-diversion-panel__h2"
               >

assets/tests/components/detours/diversionPage.test.tsx

@@ -1291,19 +1291,19 @@ describe("DiversionPage", () => {
           `Detour ${routeName} ${routeDirection}`,
           routeOrigin,
           ,
-          "Connection Points:",
-          start.name,
-          end.name,
-          ,
-          `Missed Stops (${stops.length}):`,
-          ...stops.map(({ name }) => name),
-          ,
           "Turn-by-Turn Directions:",
           "From Avenue 1 & Street 2",
           "Turn left on Main Street",
           "Turn right on High Street",
           "Turn sharp right on Broadway",
           "Regular Route",
+          ,
+          "Connection Points:",
+          start.name,
+          end.name,
+          ,
+          `Missed Stops (${stops.length}):`,
+          ...stops.map(({ name }) => name),
         ].join("\n")
       )
     )