From acc130b9aebb34359a2d1d93f2c8f3b1aa3c900e Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Fri, 6 Dec 2024 09:00:03 -0500
Subject: [PATCH 1/3] feat: add Affected Route to Finished Panel

Asana Ticket: https://app.asana.com/0/1205385723132845/1208672004049522/f
---
 .../detours/detourPanels/detourFinishedPanel.tsx     | 12 ++++++++----
 assets/src/components/detours/diversionPage.tsx      |  9 +++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index 604d22ac1..daf544488 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/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.
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index 342fb78d8..1f0e736c7 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/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,
@@ -270,6 +271,14 @@ export const DiversionPage = ({
                 }
               : undefined
           }
+          affectedRoute={
+            <AffectedRoute
+              routeName={routeName ?? "??"}
+              routeDescription={routeDescription ?? "??"}
+              routeOrigin={routeOrigin ?? "??"}
+              routeDirection={routeDirection ?? "??"}
+            />
+          }
         >
           {snapshot.matches({
             "Detour Drawing": {

From ab620e85764e24e0f6bf6471be63f427547d5490 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Fri, 6 Dec 2024 09:15:58 -0500
Subject: [PATCH 2/3] fix: add Affected Route params to Finished Detour Panel
 Story

---
 .../detours/detourFinishedPanel.stories.tsx           | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx b/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx
index 856e43a06..cc47ee111 100644
--- a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx
+++ b/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

From a8d1b9c64a3df184330c43b0f0819ff1bc306324 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Fri, 6 Dec 2024 10:11:25 -0500
Subject: [PATCH 3/3] fix:test: update snapshots

---
 .../detoursListPage.openDetour.test.tsx.snap  | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index b630c50f1..75670605e 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/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"
               >