feat: Add Activate button gated behind detours-list test group

assets/css/_diversion_page.scss

@@ -1,3 +1,5 @@
+@use "./color/definitions" as semantic;
+
 .l-diversion-page {
   display: grid;
   // Default layout is linear
@@ -107,3 +109,7 @@
 .c-diversion-panel__help-text {
   line-height: 1.5;
 }
+
+.c-diversion-panel__activate-button {
+  background-color: semantic.$missed-stop;
+}

assets/src/components/detours/detourFinishedPanel.tsx

@@ -7,10 +7,12 @@ export const DetourFinishedPanel = ({
   onNavigateBack,
   detourText,
   onChangeDetourText,
+  onActivateDetour,
 }: {
   onNavigateBack: () => void
   detourText: string
   onChangeDetourText: (value: string) => void
+  onActivateDetour?: () => void
 }) => (
   <Panel as="article">
     <Panel.Header className="">
@@ -39,7 +41,7 @@ export const DetourFinishedPanel = ({
         />
       </Panel.Body.ScrollArea>
 
-      <Panel.Body.Footer className="d-flex">
+      <Panel.Body.Footer className="d-flex flex-column">
         <OverlayTrigger
           placement="top"
           trigger="click"
@@ -58,6 +60,14 @@ export const DetourFinishedPanel = ({
             Copy Details
           </Button>
         </OverlayTrigger>
+        {onActivateDetour && (
+          <Button
+            className="m-3 flex-grow-1 c-diversion-panel__activate-button"
+            onClick={onActivateDetour}
+          >
+            Activate Detour
+          </Button>
+        )}
       </Panel.Body.Footer>
     </Panel.Body>
   </Panel>

assets/src/components/detours/diversionPage.tsx

@@ -233,6 +233,11 @@ export const DiversionPage = ({
               onNavigateBack={editDetour}
               detourText={textArea}
               onChangeDetourText={setTextArea}
+              onActivateDetour={
+                inTestGroup(TestGroups.DetoursList)
+                  ? () => alert("Activate!")
+                  : undefined
+              }
             />
           ) : null}
         </div>

assets/src/userInTestGroup.ts

@@ -3,6 +3,7 @@ import getTestGroups from "./userTestGroups"
 export enum TestGroups {
   BackwardsDetourPrevention = "backwards-detour-prevention",
   DemoMode = "demo-mode",
+  DetoursList = "detours-list",
   DetoursPilot = "detours-pilot",
   DummyDetourPage = "dummy-detour-page",
   KeycloakSso = "keycloak-sso",

assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx

@@ -50,4 +50,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Story: Story = {}
+export const WithActivateButton: Story = {}
+export const WithoutActivateButton: Story = {
+  args: {
+    onActivateDetour: undefined,
+  },
+}

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

@@ -0,0 +1,86 @@
+import React from "react"
+import {
+  DiversionPage as DiversionPageDefault,
+  DiversionPageProps,
+} from "../../../src/components/detours/diversionPage"
+import { originalRouteFactory } from "../../factories/originalRouteFactory"
+import { beforeEach, describe, expect, jest, test } from "@jest/globals"
+import "@testing-library/jest-dom/jest-globals"
+import getTestGroups from "../../../src/userTestGroups"
+import { TestGroups } from "../../../src/userInTestGroup"
+import { act, fireEvent, render } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import {
+  activateDetourButton,
+  originalRouteShape,
+  reviewDetourButton,
+} from "../../testHelpers/selectors/components/detours/diversionPage"
+import {
+  fetchDetourDirections,
+  fetchFinishedDetour,
+  fetchNearestIntersection,
+  fetchRoutePatterns,
+  fetchUnfinishedDetour,
+} from "../../../src/api"
+import { neverPromise } from "../../testHelpers/mockHelpers"
+
+beforeEach(() => {
+  jest.spyOn(global, "scrollTo").mockImplementationOnce(jest.fn())
+})
+
+const DiversionPage = (props: Partial<DiversionPageProps>) => {
+  return (
+    <DiversionPageDefault
+      originalRoute={originalRouteFactory.build()}
+      showConfirmCloseModal={false}
+      {...props}
+    />
+  )
+}
+
+jest.mock("../../../src/api")
+jest.mock("../../../src/userTestGroups")
+
+beforeEach(() => {
+  jest.mocked(fetchDetourDirections).mockReturnValue(neverPromise())
+  jest.mocked(fetchUnfinishedDetour).mockReturnValue(neverPromise())
+  jest.mocked(fetchFinishedDetour).mockReturnValue(neverPromise())
+  jest.mocked(fetchNearestIntersection).mockReturnValue(neverPromise())
+  jest.mocked(fetchRoutePatterns).mockReturnValue(neverPromise())
+
+  jest
+    .mocked(getTestGroups)
+    .mockReturnValue([TestGroups.DetoursPilot, TestGroups.DetoursList])
+})
+
+describe("DiversionPage activate workflow", () => {
+  test("does not have an activate button on the review details screen if not in the detours-list test group", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursPilot])
+
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+    await userEvent.click(reviewDetourButton.get())
+
+    expect(activateDetourButton.query()).not.toBeInTheDocument()
+  })
+
+  test("has an activate button on the review details screen", async () => {
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+    await userEvent.click(reviewDetourButton.get())
+
+    expect(activateDetourButton.get()).toBeVisible()
+  })
+})

assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx

@@ -2,6 +2,9 @@ import { expect } from "@jest/globals"
 import { byRole } from "testing-library-selector"
 
 export const reviewDetourButton = byRole("button", { name: "Review Detour" })
+export const activateDetourButton = byRole("button", {
+  name: "Activate Detour",
+})
 
 export const originalRouteShape = {
   interactive: {