[UI v2] feat: Adds work pool action options

ui-v2/src/components/automations/automations-wizard/actions-step/action-step.tsx

@@ -4,9 +4,10 @@ import { Icon } from "@/components/ui/icons";
 import { Typography } from "@/components/ui/typography";
 import { useWatch } from "react-hook-form";
 import { ActionTypeSelect } from "./action-type-select";
-import { AutomationsSelectStateFields } from "./automations-select-state-fields";
 import { ChangeFlowRunStateFields } from "./change-flow-run-fields";
-import { DeploymentsSelectStateFields } from "./deployments-select-state-fields";
+import { SelectAutomationsFields } from "./select-automations-fields";
+import { SelectDeploymentsFields } from "./select-deployments-fields";
+import { SelectWorkPoolsFields } from "./select-work-pools-fields";
 
 type ActionStepProps = {
 	index: number;
@@ -50,21 +51,22 @@ const ActionTypeAdditionalFields = ({
 		case "change-flow-run-state":
 			return <ChangeFlowRunStateFields index={index} />;
 		case "run-deployment":
-			return <DeploymentsSelectStateFields action="Run" index={index} />;
+			return <SelectDeploymentsFields action="Run" index={index} />;
 		case "pause-deployment":
-			return <DeploymentsSelectStateFields action="Pause" index={index} />;
+			return <SelectDeploymentsFields action="Pause" index={index} />;
 		case "resume-deployment":
-			return <DeploymentsSelectStateFields action="Resume" index={index} />;
+			return <SelectDeploymentsFields action="Resume" index={index} />;
 		case "pause-work-queue":
 		case "resume-work-queue":
 			return <div>TODO Work Queue</div>;
 		case "pause-work-pool":
+			return <SelectWorkPoolsFields action="Pause" index={index} />;
 		case "resume-work-pool":
-			return <div>TODO Work pool</div>;
+			return <SelectWorkPoolsFields action="Resume" index={index} />;
 		case "pause-automation":
-			return <AutomationsSelectStateFields action="Pause" index={index} />;
+			return <SelectAutomationsFields action="Pause" index={index} />;
 		case "resume-automation":
-			return <AutomationsSelectStateFields action="Resume" index={index} />;
+			return <SelectAutomationsFields action="Resume" index={index} />;
 		case "send-notification":
 			return <div>TODO send notification</div>;
 		case "cancel-flow-run":

ui-v2/src/components/automations/automations-wizard/actions-step/actions-step.stories.tsx

@@ -6,6 +6,7 @@ import {
 	createFakeAutomation,
 	createFakeDeployment,
 	createFakeFlow,
+	createFakeWorkPool,
 } from "@/mocks";
 import { reactQueryDecorator } from "@/storybook/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -26,6 +27,7 @@ const MOCK_FLOWS_DATA = [
 	createFakeFlow({ id: "a" }),
 	createFakeFlow({ id: "b" }),
 ];
+const MOCK_WORK_POOLS_DATA = Array.from({ length: 5 }, createFakeWorkPool);
 
 const meta = {
 	title: "Components/Automations/Wizard/ActionsStep",
@@ -53,6 +55,9 @@ const meta = {
 				http.post(buildApiUrl("/flows/filter"), () => {
 					return HttpResponse.json(MOCK_FLOWS_DATA);
 				}),
+				http.post(buildApiUrl("/work_pools/filter"), () => {
+					return HttpResponse.json(MOCK_WORK_POOLS_DATA);
+				}),
 			],
 		},
 	},

ui-v2/src/components/automations/automations-wizard/actions-step/actions-step.test.tsx

@@ -1,6 +1,7 @@
 import type { Automation } from "@/api/automations";
 import type { Deployment } from "@/api/deployments";
 import type { Flow } from "@/api/flows";
+import type { WorkPool } from "@/api/work-pools";
 import {
 	AutomationWizardSchema,
 	type AutomationWizardSchema as TAutomationWizardSchema,
@@ -10,6 +11,7 @@ import {
 	createFakeAutomation,
 	createFakeDeployment,
 	createFakeFlow,
+	createFakeWorkPool,
 } from "@/mocks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { render, screen } from "@testing-library/react";
@@ -37,14 +39,6 @@ const ActionStepFormContainer = () => {
 };
 
 describe("ActionsStep", () => {
-	const mockListAutomationAPI = (automations: Array<Automation>) => {
-		server.use(
-			http.post(buildApiUrl("/automations/filter"), () => {
-				return HttpResponse.json(automations);
-			}),
-		);
-	};
-
 	beforeAll(mockPointerEvents);
 
 	describe("multiple actions", () => {
@@ -181,8 +175,16 @@ describe("ActionsStep", () => {
 	});
 
 	describe("action type -- automation", () => {
+		const mockListAutomationsAPI = (automations: Array<Automation>) => {
+			server.use(
+				http.post(buildApiUrl("/automations/filter"), () => {
+					return HttpResponse.json(automations);
+				}),
+			);
+		};
+
 		it("able to configure pause an automation action type", async () => {
-			mockListAutomationAPI([
+			mockListAutomationsAPI([
 				createFakeAutomation({ name: "my automation 0" }),
 				createFakeAutomation({ name: "my automation 1" }),
 			]);
@@ -214,7 +216,7 @@ describe("ActionsStep", () => {
 		});
 
 		it("able to configure resume an automation action type", async () => {
-			mockListAutomationAPI([
+			mockListAutomationsAPI([
 				createFakeAutomation({ name: "my automation 0" }),
 				createFakeAutomation({ name: "my automation 1" }),
 			]);
@@ -344,4 +346,80 @@ describe("ActionsStep", () => {
 
 		it.todo("able to configure run a deployment action type", async () => {});
 	});
+
+	describe("action type -- work pools", () => {
+		const mockListWorkPoolsAPI = (workPools: Array<WorkPool>) => {
+			server.use(
+				http.post(buildApiUrl("/work_pools/filter"), () => {
+					return HttpResponse.json(workPools);
+				}),
+			);
+		};
+
+		it("able to configure pause a work pool action type", async () => {
+			mockListWorkPoolsAPI([
+				createFakeWorkPool({ name: "my work pool 0" }),
+				createFakeWorkPool({ name: "my work pool 1" }),
+			]);
+
+			const user = userEvent.setup();
+
+			// ------------ Setup
+			render(<ActionStepFormContainer />, {
+				wrapper: createWrapper(),
+			});
+
+			// ------------ Act
+			await user.click(
+				screen.getByRole("combobox", { name: /select action/i }),
+			);
+			await user.click(
+				screen.getByRole("option", { name: "Pause a work pool" }),
+			);
+
+			expect(screen.getAllByText("Infer Work Pool")).toBeTruthy();
+			await user.click(
+				screen.getByRole("combobox", { name: /select work pool to pause/i }),
+			);
+
+			await user.click(screen.getByRole("option", { name: "my work pool 0" }));
+			// ------------ Assert
+			expect(screen.getAllByText("Pause a work pool")).toBeTruthy();
+			expect(screen.getAllByText("my work pool 0")).toBeTruthy();
+		});
+
+		it("able to configure resume a work pool action type", async () => {
+			mockListWorkPoolsAPI([
+				createFakeWorkPool({ name: "my work pool 0" }),
+				createFakeWorkPool({ name: "my work pool 1" }),
+			]);
+			const user = userEvent.setup();
+
+			// ------------ Setup
+			render(<ActionStepFormContainer />, {
+				wrapper: createWrapper(),
+			});
+
+			// ------------ Act
+			await user.click(
+				screen.getByRole("combobox", { name: /select action/i }),
+			);
+			await user.click(
+				screen.getByRole("option", { name: "Resume a work pool" }),
+			);
+
+			expect(screen.getAllByText("Infer Work Pool")).toBeTruthy();
+			await user.click(
+				screen.getByRole("combobox", {
+					name: /select work pool to resume/i,
+				}),
+			);
+
+			await user.click(screen.getByRole("option", { name: "my work pool 1" }));
+
+			// ------------ Assert
+			expect(screen.getAllByText("Pause a work pool")).toBeTruthy();
+			expect(screen.getAllByText("my work pool 1")).toBeTruthy();
+		});
+	});
 });

ui-v2/src/components/automations/automations-wizard/actions-step/automations-select-state-fields.tsx → ui-v2/src/components/automations/automations-wizard/actions-step/select-automations-fields.tsx

@@ -1,4 +1,4 @@
-import { Automation, buildListAutomationsQuery } from "@/api/automations";
+import { type Automation, buildListAutomationsQuery } from "@/api/automations";
 import {
 	type AutomationWizardSchema,
 	UNASSIGNED,
@@ -30,7 +30,7 @@ const INFER_OPTION = {
 	name: "Infer Automation",
 } as const;
 
-type AutomationsSelectStateFieldsProps = {
+type SelectAutomationsFieldsProps = {
 	action: "Pause" | "Resume";
 	index: number;
 };
@@ -49,10 +49,10 @@ const getButtonLabel = (
 	return undefined;
 };
 
-export const AutomationsSelectStateFields = ({
+export const SelectAutomationsFields = ({
 	action,
 	index,
-}: AutomationsSelectStateFieldsProps) => {
+}: SelectAutomationsFieldsProps) => {
 	const [search, setSearch] = useState("");
 	const form = useFormContext<AutomationWizardSchema>();
 	const { data, isSuccess } = useQuery(buildListAutomationsQuery());

ui-v2/src/components/automations/automations-wizard/actions-step/deployments-select-state-fields.tsx → ui-v2/src/components/automations/automations-wizard/actions-step/select-deployments-fields.tsx

@@ -46,15 +46,15 @@ const getButtonLabel = (
 	return <DeploymentLabel deploymentWithFlow={deployment} />;
 };
 
-type DeploymentsSelectStateFieldsProps = {
+type SelectDeploymentsFieldsProps = {
 	action: "Run" | "Pause" | "Resume";
 	index: number;
 };
 
-export const DeploymentsSelectStateFields = ({
+export const SelectDeploymentsFields = ({
 	action,
 	index,
-}: DeploymentsSelectStateFieldsProps) => {
+}: SelectDeploymentsFieldsProps) => {
 	const [search, setSearch] = useState("");
 	const form = useFormContext<AutomationWizardSchema>();
 	const actionType = form.watch(`actions.${index}.type`);