feat: add dynamic workspace update parameter editor

packages/shared/src/index.ts

@@ -33,3 +33,5 @@ export type {
 // Workspaces types and API
 export * from "./workspaces/types";
 export { WorkspacesApi } from "./workspaces/api";
+
+export * from "./workspaceUpdate/api";

packages/shared/src/workspaceUpdate/api.ts

@@ -0,0 +1,34 @@
+import { defineCommand, defineNotification } from "../ipc/protocol";
+
+import type {
+	PreviewParameter,
+	FriendlyDiagnostic,
+} from "coder/site/src/api/typesGenerated";
+
+export interface WorkspaceUpdateState {
+	readonly workspaceName: string;
+	readonly templateVersionId: string;
+	readonly revision: number;
+	readonly status:
+		"loading" | "evaluating" | "ready" | "submitting" | "success" | "error";
+	readonly parameters: readonly PreviewParameter[];
+	readonly inputs: Readonly<Record<string, string>>;
+	readonly locked: readonly string[];
+	readonly diagnostics: readonly FriendlyDiagnostic[];
+	readonly error?: string;
+	readonly canSubmit: boolean;
+	readonly canRetry?: boolean;
+}
+
+export const WorkspaceUpdateApi = {
+	stateChanged: defineNotification<WorkspaceUpdateState>(
+		"workspaceUpdate/stateChanged",
+	),
+	ready: defineCommand<void>("workspaceUpdate/ready"),
+	change: defineCommand<{ name: string; value: string }>(
+		"workspaceUpdate/change",
+	),
+	retry: defineCommand<void>("workspaceUpdate/retry"),
+	submit: defineCommand<{ revision: number }>("workspaceUpdate/submit"),
+	cancel: defineCommand<void>("workspaceUpdate/cancel"),
+} as const;

packages/workspace-update/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@repo/workspace-update",
+	"version": "1.0.0",
+	"description": "Coder workspace update parameter form webview",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@repo/shared": "workspace:*",
+		"@repo/ui": "workspace:*",
+		"@repo/webview-shared": "workspace:*",
+		"react": "catalog:",
+		"react-dom": "catalog:"
+	},
+	"devDependencies": {
+		"@repo/storybook-utils": "workspace:*",
+		"@rolldown/plugin-babel": "catalog:",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
+		"babel-plugin-react-compiler": "catalog:",
+		"typescript": "catalog:",
+		"vite": "catalog:"
+	}
+}

packages/workspace-update/src/App.tsx

@@ -0,0 +1,24 @@
+import { WorkspaceUpdateForm } from "./components/WorkspaceUpdateForm";
+import { useWorkspaceUpdate } from "./hooks/useWorkspaceUpdate";
+
+export default function App(): React.JSX.Element {
+	const { api, state } = useWorkspaceUpdate();
+
+	if (!state) {
+		return (
+			<div className="workspace-update-app__loading">
+				Loading workspace update…
+			</div>
+		);
+	}
+
+	return (
+		<WorkspaceUpdateForm
+			state={state}
+			onChange={api.change}
+			onCancel={api.cancel}
+			onRetry={api.retry}
+			onSubmit={(revision) => api.submit({ revision })}
+		/>
+	);
+}

packages/workspace-update/src/components/WorkspaceUpdateForm.stories.tsx

@@ -0,0 +1,125 @@
+import { useState } from "react";
+
+import { WorkspaceUpdateForm } from "./WorkspaceUpdateForm";
+
+import type { WorkspaceUpdateState } from "@repo/shared";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const parameter = (
+	name: string,
+	formType: WorkspaceUpdateState["parameters"][number]["form_type"],
+	options: ReadonlyArray<{
+		name: string;
+		value: string;
+		description?: string;
+	}> = [],
+): WorkspaceUpdateState["parameters"][number] => ({
+	name,
+	display_name: name,
+	description: `Configure ${name}.`,
+	type: formType === "slider" ? "number" : "string",
+	form_type: formType,
+	styling: {},
+	mutable: true,
+	default_value: { valid: false, value: "" },
+	value: { valid: false, value: "" },
+	icon: "",
+	options: options.map((option) => ({
+		name: option.name,
+		description: option.description ?? "",
+		value: { valid: true, value: option.value },
+		icon: "",
+	})),
+	validations: [],
+	required: false,
+	order: 0,
+	ephemeral: false,
+	diagnostics: [],
+});
+
+const state: WorkspaceUpdateState = {
+	workspaceName: "dev",
+	templateVersionId: "template-version-1",
+	revision: 3,
+	status: "ready",
+	inputs: {
+		region: "us-east",
+		autoscale: "true",
+		cores: "4",
+		tags: '["team,blue", "staging"]',
+		features: '["metrics"]',
+	},
+	locked: ["locked"],
+	diagnostics: [],
+	canSubmit: true,
+	parameters: [
+		parameter("region", "radio", [
+			{ name: "US East", value: "us-east" },
+			{ name: "Europe", value: "eu-west", description: "Frankfurt" },
+		]),
+		parameter("autoscale", "switch"),
+		parameter("cores", "slider"),
+		parameter("notes", "textarea"),
+		parameter("features", "multi-select", [
+			{ name: "Metrics", value: "metrics" },
+			{ name: "Tracing", value: "tracing" },
+		]),
+		parameter("tags", "tag-select"),
+		{ ...parameter("token", "input"), styling: { mask_input: true } },
+		{ ...parameter("locked", "input"), mutable: false },
+	],
+};
+
+function InteractiveForm(): React.JSX.Element {
+	const [inputs, setInputs] = useState(state.inputs);
+	return (
+		<WorkspaceUpdateForm
+			state={{ ...state, inputs }}
+			onChange={({ name, value }) =>
+				setInputs((current) => ({ ...current, [name]: value }))
+			}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	);
+}
+
+const meta: Meta<typeof InteractiveForm> = {
+	title: "Workspace Update/Form",
+	component: InteractiveForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof InteractiveForm>;
+
+export const Ready: Story = {};
+
+export const Evaluating: Story = {
+	render: () => (
+		<WorkspaceUpdateForm
+			state={{ ...state, status: "evaluating" }}
+			onChange={() => undefined}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	),
+};
+
+export const Error: Story = {
+	render: () => (
+		<WorkspaceUpdateForm
+			state={{
+				...state,
+				status: "error",
+				parameters: [],
+				error: "The template is unavailable.",
+			}}
+			onChange={() => undefined}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	),
+};