feat(ui-v2): add WorkPoolEditForm component for editing work pools

- Create WorkPoolEditForm component with name, description, concurrency limit, and type fields
- Name and type fields are disabled/read-only
- Description and concurrency limit fields are editable
- Add comprehensive test file with 16 test cases
- Add Storybook stories with MSW handlers
- Update index.ts exports to include new component and useUpdateWorkPool hook
- Update route component to use new form

Co-Authored-By: alex.s@prefect.io <ajstreed1@gmail.com>

Author: 2 people

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 });
+				}),
+			],
+		},
+	},
+};