fix: Do not highlight and widen original route shape after the detour…

… is finished (#2434)

assets/src/components/detours/detourMap.tsx

@@ -40,6 +40,12 @@ interface DetourMapProps {
    */
   waypoints: ShapePoint[]
 
+  /**
+   * User signal to show whether the original shape should be
+   * highlighted
+   */
+  originalShapeClickable: boolean
+
   /**
    * Callback fired when the {@link originalShape} is clicked.
    */
@@ -79,6 +85,7 @@ export const DetourMap = ({
   endPoint,
   waypoints,
 
+  originalShapeClickable,
   onClickOriginalShape,
   onClickMap,
 
@@ -133,6 +140,7 @@ export const DetourMap = ({
           ? ["c-detour_map--original-route-shape__unstarted"]
           : []
       }
+      clickable={originalShapeClickable}
       onClick={(e) => {
         const { position } =
           closestPosition(
@@ -211,13 +219,15 @@ interface OriginalRouteShapeProps extends PropsWithChildren {
   key: string
   positions: LatLngLiteral[]
   classNames: string[]
+  clickable: boolean
   onClick: (e: LeafletMouseEvent) => void
 }
 
 const OriginalRouteShape = ({
   positions,
   children,
   classNames,
+  clickable,
   onClick,
 }: OriginalRouteShapeProps) => (
   <>
@@ -226,19 +236,21 @@ const OriginalRouteShape = ({
       positions={positions}
       className="c-detour_map--original-route-shape-core"
     />
-    <Polyline
-      positions={positions}
-      weight={16}
-      className={joinClasses([
-        "c-detour_map--original-route-shape",
-        ...classNames,
-      ])}
-      bubblingMouseEvents={false}
-      eventHandlers={{
-        click: onClick,
-      }}
-    >
-      {children}
-    </Polyline>
+    {clickable && (
+      <Polyline
+        positions={positions}
+        weight={16}
+        className={joinClasses([
+          "c-detour_map--original-route-shape",
+          ...classNames,
+        ])}
+        bubblingMouseEvents={false}
+        eventHandlers={{
+          click: onClick,
+        }}
+      >
+        {children}
+      </Polyline>
+    )}
   </>
 )

assets/src/components/detours/diversionPage.tsx

@@ -29,6 +29,7 @@ export const DiversionPage = ({
     addConnectionPoint,
     addWaypoint,
 
+    canAddPoints,
     startPoint,
     endPoint,
     waypoints,
@@ -92,6 +93,7 @@ export const DiversionPage = ({
           startPoint={startPoint ?? undefined}
           endPoint={endPoint ?? undefined}
           waypoints={waypoints}
+          originalShapeClickable={canAddPoints}
           onClickMap={addWaypoint}
           onClickOriginalShape={addConnectionPoint}
           undoDisabled={canUndo === false}

assets/src/hooks/useDetour.ts

@@ -94,6 +94,7 @@ export const useDetour = (routePatternId: RoutePatternId) => {
     }
   }
 
+  const canAddPoints = endPoint === null
   const canUndo = startPoint !== null && state === DetourState.Edit
 
   const undo = () => {
@@ -137,6 +138,10 @@ export const useDetour = (routePatternId: RoutePatternId) => {
      */
     addConnectionPoint,
 
+    /**
+     * Reports whether it's possible to add points to the detour.
+     */
+    canAddPoints,
     /**
      * The starting connection point of the detour.
      */

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

@@ -20,6 +20,7 @@ const DetourMapWithDefaults = (
     endPoint={undefined}
     waypoints={[]}
     undoDisabled={false}
+    originalShapeClickable={true}
     onClickMap={() => {}}
     onClickOriginalShape={() => {}}
     onUndo={() => {}}
@@ -170,4 +171,30 @@ describe("DetourMap", () => {
 
     expect(undoButton).toBeDisabled()
   })
+
+  test("when `originalShapeClickable` is true, there should be two route shape elements", () => {
+    const { container } = render(
+      <DetourMapWithDefaults originalShapeClickable={true} />
+    )
+
+    expect(
+      container.querySelector(".c-detour_map--original-route-shape-core")
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector(".c-detour_map--original-route-shape")
+    ).toBeInTheDocument()
+  })
+
+  test("when `originalShapeClickable` is false, there should be only be one (non-clickable) route shape element", () => {
+    const { container } = render(
+      <DetourMapWithDefaults originalShapeClickable={false} />
+    )
+
+    expect(
+      container.querySelector(".c-detour_map--original-route-shape-core")
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector(".c-detour_map--original-route-shape")
+    ).not.toBeInTheDocument()
+  })
 })

assets/tests/hooks/useDetour.test.ts

@@ -279,6 +279,40 @@ describe("useDetour", () => {
     expect(result.current.canUndo).toBe(true)
   })
 
+  test("when `startPoint` is null, `canAddPoints` is `true`", async () => {
+    const { result } = renderHook(useDetourWithFakeRoutePattern)
+
+    expect(result.current.startPoint).toBeNull()
+    expect(result.current.canAddPoints).toBe(true)
+  })
+
+  test("when `startPoint` is set, `canAddPoints` is `true`", async () => {
+    const { result } = renderHook(useDetourWithFakeRoutePattern)
+
+    act(() => result.current.addConnectionPoint({ lat: 0, lon: 0 }))
+
+    expect(result.current.startPoint).not.toBeNull()
+    expect(result.current.canAddPoints).toBe(true)
+  })
+
+  test("when `endPoint` is set, `canAddPoints` is `false`", async () => {
+    const { result } = renderHook(useDetourWithFakeRoutePattern)
+
+    jest
+      .mocked(fetchDetourMissedStops)
+      .mockResolvedValue(stopFactory.buildList(3))
+
+    act(() => result.current.addConnectionPoint({ lat: 0, lon: 0 }))
+    act(() => result.current.addConnectionPoint({ lat: 0, lon: 0 }))
+
+    await waitFor(() => {
+      expect(result.current.missedStops).not.toBeUndefined()
+    })
+
+    expect(result.current.endPoint).not.toBeNull()
+    expect(result.current.canAddPoints).toBe(false)
+  })
+
   test("when `endPoint` is set, `missedStops` is filled in", async () => {
     const { result } = renderHook(useDetourWithFakeRoutePattern)