feat: delete draft detour UI

assets/src/components/detours/deleteDetourModal.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { Button, Modal } from "react-bootstrap"
+import { RoutePill } from "../routePill"
+
+export const DeleteDetourModal = ({
+  onDelete,
+  onCancel,
+  routeName,
+  routeDescription,
+  routeOrigin,
+  routeDirection,
+}: {
+  onDelete: () => void
+  onCancel: () => void
+  routeName: string
+  routeDescription: string
+  routeOrigin: string
+  routeDirection: string
+}) => {
+  return (
+    <Modal show animation={false} onHide={onCancel}>
+      <Modal.Header closeButton>
+        <h3 className="fs-3 fw-semibold lh-sm my-1">Delete Draft</h3>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="d-flex flex-row gap-2 mb-3">
+          <RoutePill routeName={routeName} />
+          <div>
+            <div className="fw-semibold mb-1">{routeDescription}</div>
+            <div className="fw-normal text-body-secondary fs-6 mb-1">
+              From {routeOrigin.split(" - ")[0]}
+            </div>
+            <div className="fw-normal fs-6">{routeDirection}</div>
+          </div>
+        </div>
+        <p>Are you sure you want to delete this draft?</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="outline-primary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant="ui-alert"
+          onClick={onDelete}
+          className="text-white"
+          data-fs-element="Confirm Delete Draft"
+        >
+          Delete Draft
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}

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

@@ -17,6 +17,7 @@ interface DetourFinishedPanelProps extends PropsWithChildren {
   missedStops?: Stop[]
   onChangeDetourText: (value: string) => void
   onActivateDetour?: () => void
+  onDeleteDetour?: () => void
   affectedRoute?: ReactNode
 }
 
@@ -28,6 +29,7 @@ export const DetourFinishedPanel = ({
   missedStops,
   onChangeDetourText,
   onActivateDetour,
+  onDeleteDetour,
   children,
   affectedRoute,
 }: DetourFinishedPanelProps) => (
@@ -81,15 +83,26 @@ export const DetourFinishedPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer className="d-flex flex-column">
-        {onActivateDetour && (
-          <Button
-            className="m-3 flex-grow-1 icon-link justify-content-center"
-            onClick={onActivateDetour}
-            data-fs-element="Begin Activate Detour"
-          >
-            <BsIcons.Power />
-            Start Detour
-          </Button>
+        {onDeleteDetour && (
+          <>
+            <Button
+              className="m-3 flex-grow-1 icon-link justify-content-center"
+              variant="outline-ui-alert"
+              onClick={onDeleteDetour}
+              data-fs-element="Delete Detour Draft"
+            >
+              <BsIcons.Trash />
+              Delete Draft
+            </Button>
+            <Button
+              className="m-3 flex-grow-1 icon-link justify-content-center"
+              onClick={onActivateDetour}
+              data-fs-element="Begin Activate Detour"
+            >
+              <BsIcons.Power />
+              Start Detour
+            </Button>
+          </>
         )}
       </Panel.Body.Footer>
     </Panel.Body>

assets/src/components/detours/diversionPage.tsx

@@ -27,6 +27,7 @@ import { timeAgoLabel } from "../../util/dateTime"
 import { DetourStatus, timestampLabelFromStatus } from "../detoursTable"
 import { ActivateDetour } from "./activateDetourModal"
 import { DeactivateDetourModal } from "./deactivateDetourModal"
+import { DeleteDetourModal } from "./deleteDetourModal"
 import useScreenSize from "../../hooks/useScreenSize"
 import { Drawer } from "../drawer"
 import { isMobile } from "../../util/screenSize"
@@ -271,6 +272,13 @@ export const DiversionPage = ({
                 }
               : undefined
           }
+          onDeleteDetour={
+            inTestGroup(TestGroups.DeleteDraftDetours)
+              ? () => {
+                  send({ type: "detour.delete.open-delete-modal" })
+                }
+              : undefined
+          }
           affectedRoute={
             <AffectedRoute
               routeName={routeName ?? "??"}
@@ -365,6 +373,25 @@ export const DiversionPage = ({
               ) : null}
             </ActivateDetour.Modal>
           ) : null}
+
+          {snapshot.matches({
+            "Detour Drawing": {
+              "Share Detour": "Deleting",
+            },
+          }) ? (
+            <DeleteDetourModal
+              onDelete={() =>
+                send({ type: "detour.delete.delete-modal.delete-draft" })
+              }
+              onCancel={() =>
+                send({ type: "detour.delete.delete-modal.cancel" })
+              }
+              routeName={routeName || "??"}
+              routeDescription={routeDescription || "??"}
+              routeOrigin={routeOrigin || "??"}
+              routeDirection={routeDirection || "??"}
+            />
+          ) : null}
         </DetourFinishedPanel>
       )
     } else if (snapshot.matches({ "Detour Drawing": "Active" })) {

assets/src/helpers/bsIcons.tsx

@@ -450,6 +450,25 @@ export const ThreeDotsVertical = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/trash/
+ */
+export const Trash = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-trash"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
+    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/x-square/
  */

assets/src/models/createDetourMachine.ts

@@ -88,7 +88,10 @@ export const createDetourMachine = setup({
       | { type: "detour.active.deactivate-modal.deactivate" }
       | { type: "detour.active.deactivate-modal.cancel" }
       | { type: "detour.save.begin-save" }
-      | { type: "detour.save.set-uuid"; uuid: number },
+      | { type: "detour.save.set-uuid"; uuid: number }
+      | { type: "detour.delete.open-delete-modal" }
+      | { type: "detour.delete.delete-modal.cancel" }
+      | { type: "detour.delete.delete-modal.delete-draft" },
 
     // We're making an assumption that we'll never want to save detour edits to the database when in particular stages
     // of detour drafting:
@@ -528,6 +531,9 @@ export const createDetourMachine = setup({
                     editedDirections: ({ event }) => event.detourText,
                   }),
                 },
+                "detour.delete.open-delete-modal": {
+                  target: "Deleting",
+                },
               },
             },
             Activating: {
@@ -632,6 +638,27 @@ export const createDetourMachine = setup({
                 target: "Done",
               },
             },
+            Deleting: {
+              initial: "Confirming",
+              on: {
+                "detour.delete.delete-modal.cancel": {
+                  target: "Reviewing",
+                },
+              },
+              states: {
+                Confirming: {
+                  on: {
+                    "detour.delete.delete-modal.delete-draft": {
+                      target: "Done",
+                    },
+                  },
+                },
+                Done: { type: "final" },
+              },
+              onDone: {
+                target: "Done",
+              },
+            },
             Done: { type: "final" },
           },
           onDone: {

assets/src/userInTestGroup.ts

@@ -9,6 +9,7 @@ export enum TestGroups {
   MinimalLadderPage = "minimal-ladder-page",
   LateView = "late-view",
   CopyButton = "copy-button",
+  DeleteDraftDetours = "delete-draft-detours",
 }
 
 const inTestGroup = (key: TestGroups): boolean => {