fix: fix validation error during workspace creation without preset (#18494)

SasSwart · jaaydenh · ssncferreira · web-flow · commit 4f98fd4e6eeb · 2025-06-24T06:48:59.000Z
closes #18430. Selecting a preset, and then selecting the "None" preset used to result in a validation error because an invalid preset id ("") was sent to the backend. --------- Co-authored-by: Jaayden Halko <jaayden@coder.com> Co-authored-by: Susana Ferreira <susana@coder.com>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -201,6 +201,46 @@ export const PresetReselected: Story = {
 	},
 };
 
+export const PresetNoneSelected: Story = {
+	args: {
+		...PresetsButNoneSelected.args,
+		onSubmit: (request, owner) => {
+			// Assert that template_version_preset_id is not present in the request
+			console.assert(
+				!("template_version_preset_id" in request),
+				'template_version_preset_id should not be present when "None" is selected',
+			);
+			action("onSubmit")(request, owner);
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		// First select a preset to set the field value
+		await userEvent.click(canvas.getByLabelText("Preset"));
+		await userEvent.click(canvas.getByText("Preset 1"));
+
+		// Then select "None" to unset the field value
+		await userEvent.click(canvas.getByLabelText("Preset"));
+		await userEvent.click(canvas.getByText("None"));
+
+		// Fill in required fields and submit to test the API call
+		await userEvent.type(
+			canvas.getByLabelText("Workspace Name"),
+			"test-workspace",
+		);
+		await userEvent.click(canvas.getByText("Create workspace"));
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"This story tests that when 'None' preset is selected, the template_version_preset_id field is not included in the form submission. The story first selects a preset to set the field value, then selects 'None' to unset it, and finally submits the form to verify the API call behavior.",
+			},
+		},
+	},
+};
+
 export const ExternalAuth: Story = {
 	args: {
 		externalAuth: [
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -369,7 +369,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 													setSelectedPresetIndex(index);
 													form.setFieldValue(
 														"template_version_preset_id",
-														option?.value,
+														// Empty string is equivalent to using None
+														option?.value === "" ? undefined : option?.value,
 													);
 												}}
 												placeholder="Select a preset"
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -563,6 +563,10 @@ export const CreateWorkspacePageViewExperimental: FC<
 														return;
 													}
 													setSelectedPresetIndex(index);
+													form.setFieldValue(
+														"template_version_preset_id",
+														index === 0 ? undefined : option,
+													);
 												}}
 											>
 												<SelectTrigger>

Original file line number	Diff line number	Diff line change
`@@ -563,6 +563,10 @@ export const CreateWorkspacePageViewExperimental: FC<`
`563`	`563`	`return;`
`564`	`564`	`}`
`565`	`565`	`setSelectedPresetIndex(index);`
	`566`	`+ form.setFieldValue(`
	`567`	`+ "template_version_preset_id",`
	`568`	`+ index === 0 ? undefined : option,`
	`569`	`+ );`
`566`	`570`	`}}`
`567`	`571`	`>`
`568`	`572`	`<SelectTrigger>`