Code Review Bench PR #19876 - feat(ui-v2): add WorkPoolEditForm component for editing work pools

ui-v2/src/api/work-pools/index.ts

@@ -8,10 +8,12 @@ export {
 	useDeleteWorkPool,
 	usePauseWorkPool,
 	useResumeWorkPool,
+	useUpdateWorkPool,
 	type WorkPool,
 	type WorkPoolCreate,
 	type WorkPoolStatus,
 	type WorkPoolsCountFilter,
 	type WorkPoolsFilter,
+	type WorkPoolUpdate,
 	type WorkPoolWorker,
 } from "./work-pools";

ui-v2/src/components/work-pools/edit/index.ts

@@ -1 +1,3 @@
+export { type WorkPoolEditFormValues, workPoolEditSchema } from "./schema";
+export { WorkPoolEditForm } from "./work-pool-edit-form";
 export { WorkPoolEditPageHeader } from "./work-pool-edit-page-header";

ui-v2/src/components/work-pools/edit/work-pool-edit-form.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HttpResponse, http } from "msw";
+import { createFakeWorkPool } from "@/mocks/create-fake-work-pool";
+import {
+	reactQueryDecorator,
+	routerDecorator,
+	toastDecorator,
+} from "@/storybook/utils";
+import { WorkPoolEditForm } from "./work-pool-edit-form";
+
+const meta: Meta<typeof WorkPoolEditForm> = {
+	title: "Components/WorkPools/WorkPoolEditForm",
+	component: WorkPoolEditForm,
+	decorators: [reactQueryDecorator, routerDecorator, toastDecorator],
+	parameters: {
+		layout: "padded",
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkPoolEditForm>;
+
+export const Default: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "my-work-pool",
+			description: "A work pool for running flow runs",
+			concurrency_limit: 10,
+			type: "process",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const WithNullDescription: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "no-description-pool",
+			description: null,
+			concurrency_limit: 5,
+			type: "docker",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const WithNullConcurrencyLimit: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "unlimited-pool",
+			description: "A pool with unlimited concurrency",
+			concurrency_limit: null,
+			type: "kubernetes",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const WithLongDescription: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "detailed-pool",
+			description:
+				"This is a very detailed description of the work pool that explains its purpose, configuration, and usage guidelines. It spans multiple lines to demonstrate how the textarea handles longer content. The pool is configured for high-throughput batch processing workloads.",
+			concurrency_limit: 100,
+			type: "process",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const SuccessResponse: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "success-pool",
+			description: "Test successful update",
+			concurrency_limit: 10,
+			type: "process",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const ErrorResponse: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "error-pool",
+			description: "Test error handling",
+			concurrency_limit: 10,
+			type: "process",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return HttpResponse.json(
+						{ detail: "Work pool not found" },
+						{ status: 404 },
+					);
+				}),
+			],
+		},
+	},
+};
+
+export const KubernetesWorkPool: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "production-k8s-pool",
+			description: "Kubernetes work pool for production deployments",
+			concurrency_limit: 50,
+			type: "kubernetes",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};
+
+export const DockerWorkPool: Story = {
+	args: {
+		workPool: createFakeWorkPool({
+			name: "docker-dev-pool",
+			description: "Docker work pool for development",
+			concurrency_limit: 20,
+			type: "docker",
+		}),
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.patch("http://localhost:4200/api/work_pools/:name", () => {
+					return new HttpResponse(null, { status: 204 });
+				}),
+			],
+		},
+	},
+};