feat: add estimated-duration column to frontend detours list

mbta · Jan 9, 2025 · a5bfb3c · a5bfb3c
1 parent 700b887
commit a5bfb3c
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 9 deletions.
diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -98,6 +98,7 @@ export const DetourListPage = () => {
                 <th className="px-3 py-4 u-hide-for-mobile">
                   {timestampLabelFromStatus(DetourStatus.Active)}
                 </th>
+                <th className="px-3 py-4 u-hide-for-mobile">Est. Duration</th>
               </tr>
             </thead>
             <tbody>
@@ -126,6 +127,9 @@ export const DetourListPage = () => {
                       <td className="align-middle p-3 u-hide-for-mobile">
                         {timeAgoLabelForDates(detour.activatedAt, epochNow)}
                       </td>
+                      <td className="align-middle p-3 u-hide-for-mobile">
+                        {detour.estimatedDuration}
+                      </td>
                     </tr>
                   ))
                 : null}

diff --git a/assets/src/models/detoursList.ts b/assets/src/models/detoursList.ts
@@ -21,6 +21,7 @@ export interface SimpleDetour {
 
 export interface ActivatedDetour {
   activatedAt: Date
+  estimatedDuration: string
   details: SimpleDetour
 }
 
@@ -36,6 +37,7 @@ export const SimpleDetourData = type({
 
 export const ActivatedDetourData = type({
   activated_at: coerce(date(), string(), (dateStr) => new Date(dateStr)),
+  estimated_duration: string(),
   details: SimpleDetourData,
 })
 
@@ -72,6 +74,7 @@ export const groupedDetoursFromData = (
   active: groupedDetours.active?.map((detour) => ({
     details: simpleDetourFromData(detour.details),
     activatedAt: detour.activated_at,
+    estimatedDuration: detour.estimated_duration,
   })),
   draft: groupedDetours.draft?.map((detour) => simpleDetourFromData(detour)),
   past: groupedDetours.past?.map((detour) => simpleDetourFromData(detour)),

diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -82,6 +82,11 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               On detour since
             </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Est. Duration
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -123,6 +128,11 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               26 hours ago
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
           </tr>
           <tr>
             <td
@@ -162,6 +172,11 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               29 hours ago
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              3 hours
+            </td>
           </tr>
         </tbody>
       </table>
@@ -453,6 +468,11 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               On detour since
             </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Est. Duration
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -494,6 +514,11 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               26 hours ago
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              4 hours
+            </td>
           </tr>
           <tr>
             <td
@@ -533,6 +558,11 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               29 hours ago
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Until end of service
+            </td>
           </tr>
         </tbody>
       </table>

diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -85,6 +85,11 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               On detour since
             </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Est. Duration
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -126,6 +131,11 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               Just now
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
           </tr>
           <tr>
             <td
@@ -165,6 +175,11 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               Just now
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
           </tr>
         </tbody>
       </table>
@@ -932,6 +947,11 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               On detour since
             </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Est. Duration
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -973,6 +993,11 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               Just now
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
           </tr>
           <tr>
             <td
@@ -1012,6 +1037,11 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               Just now
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
           </tr>
         </tbody>
       </table>

diff --git a/assets/tests/components/detours/detourListPage.test.tsx b/assets/tests/components/detours/detourListPage.test.tsx
@@ -44,6 +44,7 @@ describe("DetourListPage", () => {
               updatedAt: 1724866392,
             },
             activatedAt: new Date(1724866392000),
+            estimatedDuration: "2 hours",
           },
           {
             details: {
@@ -55,6 +56,7 @@ describe("DetourListPage", () => {
               updatedAt: 1724856392,
             },
             activatedAt: new Date(1724856392000),
+            estimatedDuration: "3 hours",
           },
         ],
         draft: undefined,
@@ -108,6 +110,7 @@ describe("DetourListPage", () => {
               updatedAt: 1724866392,
             },
             activatedAt: new Date(1724866392000),
+            estimatedDuration: "4 hours",
           },
           {
             details: {
@@ -119,6 +122,7 @@ describe("DetourListPage", () => {
               updatedAt: 1724856392,
             },
             activatedAt: new Date(1724856392000),
+            estimatedDuration: "Until end of service",
           },
         ],
         draft: undefined,

diff --git a/assets/tests/factories/detourListFactory.ts b/assets/tests/factories/detourListFactory.ts
@@ -27,5 +27,6 @@ const simpleDetourFactory = Factory.define<SimpleDetour>(({ sequence }) => ({
 
 const activeDetourFactory = Factory.define<ActivatedDetour>(() => ({
   activatedAt: new Date(),
+  estimatedDuration: "2 hours",
   details: simpleDetourFactory.build(),
 }))
diff --git a/lib/skate/detours/detour.ex b/lib/skate/detours/detour.ex
@@ -74,13 +74,15 @@ defmodule Skate.Detours.Detour do
 
     @type t :: %__MODULE__{
             activated_at: DateTime.t(),
+            estimated_duration: String.t(),
             details: Detailed.t()
           }
 
     @derive Jason.Encoder
 
     defstruct [
       :activated_at,
+      :estimated_duration,
       :details
     ]
   end

diff --git a/lib/skate/detours/detours.ex b/lib/skate/detours/detours.ex
@@ -80,13 +80,17 @@ defmodule Skate.Detours.Detours do
 
   def db_detour_to_detour(
         :active,
-        %Detour{activated_at: activated_at} = db_detour
+        %Detour{
+          activated_at: activated_at,
+          state: %{"context" => %{"selectedDuration" => estimated_duration}}
+        } = db_detour
       ) do
     details = DetailedDetour.from(:active, db_detour)
 
     details &&
       %ActivatedDetourDetails{
         activated_at: activated_at,
+        estimated_duration: estimated_duration,
         details: details
       }
   end

diff --git a/test/support/factories/detour_factory.ex b/test/support/factories/detour_factory.ex
@@ -61,22 +61,37 @@ defmodule Skate.DetourFactory do
         with_id(detour, id)
       end
 
-      def activated(update_arg, activated_at \\ DateTime.utc_now())
+      def activated(
+            update_arg,
+            activated_at \\ DateTime.utc_now(),
+            estimated_duration \\ "1 hour"
+          )
 
-      def activated(%Skate.Detours.Db.Detour{} = detour, activated_at) do
+      def activated(%Skate.Detours.Db.Detour{} = detour, activated_at, estimated_duration) do
         activated_at = Skate.DetourFactory.browser_date(activated_at)
-        %{detour | state: activated(detour.state, activated_at), activated_at: activated_at}
+
+        %{
+          detour
+          | state: activated(detour.state, activated_at, estimated_duration),
+            activated_at: activated_at
+        }
       end
 
-      def activated(%{"value" => %{}, "context" => %{}} = state, activated_at) do
+      def activated(%{"value" => %{}, "context" => %{}} = state, activated_at, estimated_duration) do
         state =
           put_in(state["value"], %{"Detour Drawing" => %{"Active" => "Reviewing"}})
 
+        state =
+          put_in(
+            state["context"]["activatedAt"],
+            activated_at
+            |> Skate.DetourFactory.browser_date()
+            |> DateTime.to_iso8601()
+          )
+
         put_in(
-          state["context"]["activatedAt"],
-          activated_at
-          |> Skate.DetourFactory.browser_date()
-          |> DateTime.to_iso8601()
+          state["context"]["selectedDuration"],
+          estimated_duration
         )
       end