Routing error alert (#2503)

* feat: display Bootstrap alert component on routing error

* test: tests for alert banner

assets/css/bootstrap.scss

@@ -19,6 +19,9 @@
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/utilities";
 
+// 5.5. These need to be added after maps but before other styles based on these colors are generated
+@import "./bootstrap/theme_color_additions";
+
 @import "../node_modules/bootstrap/scss/root";
 
 // 6. Optionally include any other parts as needed

assets/css/bootstrap/_theme_color_additions.scss

@@ -0,0 +1,25 @@
+@use "../color/tokens_2024" as new_tokens;
+
+$custom-theme-text: (
+  "ui-alert": new_tokens.$strawberry-800,
+);
+
+$theme-colors-text: map-merge($theme-colors-text, $custom-theme-text);
+
+$custom-theme-bg-subtle: (
+  "ui-alert": new_tokens.$strawberry-50,
+);
+
+$theme-colors-bg-subtle: map-merge(
+  $theme-colors-bg-subtle,
+  $custom-theme-bg-subtle
+);
+
+$custom-theme-border-subtle: (
+  "ui-alert": new_tokens.$strawberry-100,
+);
+
+$theme-colors-border-subtle: map-merge(
+  $theme-colors-border-subtle,
+  $custom-theme-border-subtle
+);

assets/src/components/detours/diversionPage.tsx

@@ -42,6 +42,7 @@ export const DiversionPage = ({
 
     detourShape,
     directions,
+    routingError,
 
     stops,
     missedStops,
@@ -122,6 +123,7 @@ export const DiversionPage = ({
               Detour is not editable from this screen.
             </Alert>
           )}
+          {routingError && <RoutingErrorAlert />}
           <DetourMap
             originalShape={originalRoute.shape.points}
             center={originalRoute.center}
@@ -249,6 +251,25 @@ const DiversionPagePanelFooter = ({
   </div>
 )
 
+// If we just use the `dismissible` prop, the close button is
+// positioned absolutely in a way that looks weird, so we need to wrap
+// the Alert in our own show state logic.
+const RoutingErrorAlert = (): React.ReactElement => {
+  const [show, setShow] = useState<boolean>(true)
+
+  return (
+    <Alert
+      variant="ui-alert"
+      className="position-absolute top-0 left-0 mt-3 start-50 translate-middle-x icon-link z-1"
+      show={show}
+    >
+      <BsIcons.ExclamationTriangleFill />
+      Something went wrong. Please try again.
+      <CloseButton onClick={() => setShow(false)} />
+    </Alert>
+  )
+}
+
 DiversionPagePanel.Header = DiversionPagePanelHeader
 
 DiversionPagePanelBody.ScrollArea = DiversionPagePanelScrollArea

assets/src/helpers/bsIcons.tsx

@@ -142,6 +142,24 @@ export const ExclamationCircleFill = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/exclamation-triangle-fill/
+ */
+export const ExclamationTriangleFill = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-exclamation-triangle-fill"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/gear-fill/
  */

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

@@ -28,7 +28,7 @@ import {
   missedStopIcon,
   stopIcon,
 } from "../../testHelpers/selectors/components/map/markers/stopIcon"
-import { ok, loading } from "../../../src/util/fetchResult"
+import { ok, loading, fetchError } from "../../../src/util/fetchResult"
 
 const DiversionPage = (
   props: Omit<
@@ -117,6 +117,54 @@ describe("DiversionPage", () => {
     ).toHaveLength(1)
   })
 
+  test("when adding a point results in a routing error, displays an alert", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(fetchError())
+
+    const { container } = render(<DiversionPage />)
+
+    await act(async () => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    await act(async () => {
+      fireEvent.click(container.querySelector(".c-vehicle-map")!)
+    })
+
+    await waitFor(async () =>
+      expect(
+        screen.getByText("Something went wrong. Please try again.")
+      ).toBeVisible()
+    )
+  })
+
+  test("routing error alert can be dismissed", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(fetchError())
+
+    const { container } = render(<DiversionPage />)
+
+    await act(async () => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    await act(async () => {
+      fireEvent.click(container.querySelector(".c-vehicle-map")!)
+    })
+
+    await waitFor(async () =>
+      expect(
+        screen.getByText("Something went wrong. Please try again.")
+      ).toBeInTheDocument()
+    )
+
+    await act(async () => {
+      fireEvent.click(within(screen.getByRole("alert")).getByRole("button"))
+    })
+
+    await waitFor(async () =>
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument()
+    )
+  })
+
   test("detour points are correctly rendered when detour is complete", async () => {
     const { container } = render(<DiversionPage />)