Add custom intervention modals

tests/pages/decision-approaches.test.jsx

@@ -6,7 +6,19 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
+import { useLayoutEffect } from "react";
 import { DecisionApproachesScreen } from "../../app/(app)/create/screens/right-rail/DecisionApproachesScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
+
+const CUSTOM_APPROACH_ID = "550e8400-e29b-41d4-a716-446655440000";
+
+function DecisionApproachesScreenWithState({ initial }) {
+  const { replaceState } = useCreateFlow();
+  useLayoutEffect(() => {
+    replaceState(initial);
+  }, [replaceState, initial]);
+  return <DecisionApproachesScreen />;
+}
 
 afterEach(() => {
   cleanup();
@@ -27,7 +39,7 @@ describe("Create flow decision-approaches page", () => {
     render(<DecisionApproachesScreen />);
 
     const addControl = screen.getByRole("button", {
-      name: /^add$/,
+      name: /^Add$/i,
     });
     expect(addControl).toBeInTheDocument();
 
@@ -37,6 +49,31 @@ describe("Create flow decision-approaches page", () => {
     expect(description?.textContent).toMatch(/new decision making approaches/);
   });
 
+  test("with a finalized custom approach, sidebar still shows add (not Remove policy)", () => {
+    render(
+      <DecisionApproachesScreenWithState
+        initial={{
+          selectedDecisionApproachIds: [CUSTOM_APPROACH_ID],
+          customMethodCardMetaById: {
+            [CUSTOM_APPROACH_ID]: {
+              label: "My approach",
+              supportText: "Desc",
+            },
+          },
+        }}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: "Remove policy" }),
+    ).not.toBeInTheDocument();
+    const addControl = screen.getByRole("button", { name: /^Add$/i });
+    expect(addControl).toBeInTheDocument();
+    const description = addControl.parentElement;
+    expect(description?.textContent).toMatch(/Select as many as you need/);
+    expect(description?.textContent).toMatch(/new decision making approaches/);
+  });
+
   test("renders message box with title and checkboxes", () => {
     render(<DecisionApproachesScreen />);
 
@@ -103,6 +140,7 @@ describe("Create flow decision-approaches page", () => {
     expect(
       screen.getByRole("button", { name: "Show less" }),
     ).toBeInTheDocument();
+    expect(screen.getAllByRole("button", { name: /^add$/i })).toHaveLength(2);
   });
 
   test("expanded view reveals additional non-recommended approaches", async () => {
@@ -143,6 +181,52 @@ describe("Create flow decision-approaches page", () => {
     expect(screen.getByText("SELECTED")).toBeInTheDocument();
   });
 
+  test("re-opening a selected approach shows Remove as the modal primary action", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    const card = screen.getByRole("button", {
+      name: /Lazy Consensus: A decision is assumed approved/,
+    });
+    await user.click(card);
+    const dialog = await screen.findByRole("dialog");
+    await user.click(
+      within(dialog).getByRole("button", {
+        name: "Add Approach",
+      }),
+    );
+
+    await user.click(card);
+    const dialogAgain = screen.getByRole("dialog");
+    expect(
+      within(dialogAgain).getByRole("button", { name: "Remove" }),
+    ).toBeInTheDocument();
+  });
+
+  test("Remove in the modal deselects the approach", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    const card = screen.getByRole("button", {
+      name: /Lazy Consensus: A decision is assumed approved/,
+    });
+    await user.click(card);
+    await user.click(
+      within(await screen.findByRole("dialog")).getByRole("button", {
+        name: "Add Approach",
+      }),
+    );
+
+    expect(card).toHaveTextContent("SELECTED");
+
+    await user.click(card);
+    await user.click(
+      within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }),
+    );
+
+    expect(card).not.toHaveTextContent("SELECTED");
+  });
+
   test("message box checkboxes are interactive", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);