From c4f47b6b8ed08eb9f758aec0c6e90be41f00c012 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:15:58 +0000
Subject: [PATCH 1/9] add a switch to toggle whether or not to show preset
 parameters

---
 .../CreateWorkspacePageView.stories.tsx       | 23 +++++++++
 .../CreateWorkspacePageView.tsx               | 49 +++++++++++++------
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index a972cefd2bafe..b6a548e3410ff 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -159,6 +159,29 @@ export const PresetSelected: Story = {
 	},
 };
 
+export const PresetSelectedWithHiddenParameters: Story = {
+	args: PresetsButNoneSelected.args,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		// Select a preset
+		await userEvent.click(canvas.getByLabelText("Preset"));
+		await userEvent.click(canvas.getByText("Preset 1"));
+		// Toggle off the show preset parameters switch
+		await userEvent.click(canvas.getByLabelText("Show preset parameters"));
+	},
+};
+
+export const PresetSelectedWithVisibleParameters: Story = {
+	args: PresetsButNoneSelected.args,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		// Select a preset
+		await userEvent.click(canvas.getByLabelText("Preset"));
+		await userEvent.click(canvas.getByText("Preset 1"));
+		// Ensure the show preset parameters switch is on (it's on by default)
+	},
+};
+
 export const PresetReselected: Story = {
 	args: PresetsButNoneSelected.args,
 	play: async ({ canvasElement }) => {
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 34917fe14b058..9ea900819631f 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,6 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import FormHelperText from "@mui/material/FormHelperText";
 import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -45,6 +46,7 @@ import type {
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWSPermissions } from "./permissions";
+import { Switch } from "components/Switch/Switch";
 
 export const Language = {
 	duplicationWarning:
@@ -101,6 +103,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
 	);
+	const [showPresetParameters, setShowPresetParameters] = useState(true);
 
 	const rerollSuggestedName = useCallback(() => {
 		setSuggestedName(() => generateWorkspaceName());
@@ -281,22 +284,31 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 									</span>
 									<FeatureStageBadge contentType={"beta"} size="md" />
 								</Stack>
-								<Stack direction="row" spacing={2}>
-									<SelectFilter
-										label="Preset"
-										options={presetOptions}
-										onSelect={(option) => {
-											const index = presetOptions.findIndex(
-												(preset) => preset.value === option?.value,
-											);
-											if (index === -1) {
-												return;
-											}
-											setSelectedPresetIndex(index);
-										}}
-										placeholder="Select a preset"
-										selectedOption={presetOptions[selectedPresetIndex]}
-									/>
+								<Stack direction="column" spacing={2}>
+									<Stack direction="row" spacing={2}>
+										<SelectFilter
+											label="Preset"
+											options={presetOptions}
+											onSelect={(option) => {
+												const index = presetOptions.findIndex(
+													(preset) => preset.value === option?.value,
+												);
+												if (index === -1) {
+													return;
+												}
+												setSelectedPresetIndex(index);
+											}}
+											placeholder="Select a preset"
+											selectedOption={presetOptions[selectedPresetIndex]}
+										/>
+									</Stack>
+									<div css={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+										<Switch
+											checked={showPresetParameters}
+											onCheckedChange={setShowPresetParameters}
+										/>
+										<span>Show preset parameters</span>
+									</div>
 								</Stack>
 							</Stack>
 						)}
@@ -383,6 +395,11 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 									creatingWorkspace ||
 									presetParameterNames.includes(parameter.name);
 
+								// Skip rendering preset parameters if showPresetParameters is false
+								if (!showPresetParameters && presetParameterNames.includes(parameter.name)) {
+									return null;
+								}
+
 								return (
 									<RichParameterInput
 										{...getFieldHelpers(parameterInputName)}

From 1894f3ce00970630009116431e9f4bffe02b99bf Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:19:48 +0000
Subject: [PATCH 2/9] fix bug where changing preset overwrote which parameters
 were being hidden

---
 .../CreateWorkspacePage/CreateWorkspacePageView.tsx   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 9ea900819631f..edc3245c85607 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -200,13 +200,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				value: presetParameter.Value,
 			});
 		}
-	}, [
-		presetOptions,
-		selectedPresetIndex,
-		presets,
-		parameters,
-		form.setFieldValue,
-	]);
+	}, [presetOptions, selectedPresetIndex, presets, parameters, form.setFieldValue]);
 
 	return (
 		<Margins size="medium">
@@ -395,7 +389,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 									creatingWorkspace ||
 									presetParameterNames.includes(parameter.name);
 
-								// Skip rendering preset parameters if showPresetParameters is false
+								// Hide preset parameters if showPresetParameters is false
+								// but keep their values in the form
 								if (!showPresetParameters && presetParameterNames.includes(parameter.name)) {
 									return null;
 								}

From f1a58396992747e238e2bfda6efac78d9ff30988 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:35:35 +0000
Subject: [PATCH 3/9] Label preset parameters as such

---
 .../RichParameterInput.stories.tsx            | 38 +++++++++++++++++++
 .../RichParameterInput/RichParameterInput.tsx | 15 +++++++-
 .../CreateWorkspacePageView.tsx               | 34 +++++++++--------
 3 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
index 3ec838272e7c6..ea034586fccf7 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -374,3 +374,41 @@ export const SmallBasicWithDisplayName: Story = {
 		size: "small",
 	},
 };
+
+export const WithPreset: Story = {
+	args: {
+		value: "preset-value",
+		id: "project_name",
+		parameter: createTemplateVersionParameter({
+			name: "project_name",
+			description: "Customize the name of a Google Cloud project that will be created!",
+		}),
+		isPreset: true,
+	},
+};
+
+export const WithPresetAndImmutable: Story = {
+	args: {
+		value: "preset-value",
+		id: "project_name",
+		parameter: createTemplateVersionParameter({
+			name: "project_name",
+			description: "Customize the name of a Google Cloud project that will be created!",
+			mutable: false,
+		}),
+		isPreset: true,
+	},
+};
+
+export const WithPresetAndOptional: Story = {
+	args: {
+		value: "preset-value",
+		id: "project_name",
+		parameter: createTemplateVersionParameter({
+			name: "project_name",
+			description: "Customize the name of a Google Cloud project that will be created!",
+			required: false,
+		}),
+		isPreset: true,
+	},
+};
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index 9919fca44b592..ceda7ecf39039 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -19,6 +19,7 @@ import type {
 	AutofillSource,
 } from "utils/richParameters";
 import { MultiTextField } from "./MultiTextField";
+import SettingsIcon from "@mui/icons-material/Settings";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
 	return parameter.type === "bool";
@@ -122,9 +123,10 @@ const styles = {
 
 export interface ParameterLabelProps {
 	parameter: TemplateVersionParameter;
+	isPreset?: boolean;
 }
 
-const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
+const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 	const hasDescription = parameter.description && parameter.description !== "";
 	const displayName = parameter.display_name
 		? parameter.display_name
@@ -146,6 +148,13 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
 					</Pill>
 				</Tooltip>
 			)}
+			{isPreset && (
+				<Tooltip title="This value was set by a preset">
+					<Pill type="info" icon={<SettingsIcon />}>
+						Preset
+					</Pill>
+				</Tooltip>
+			)}
 		</span>
 	);
 
@@ -187,6 +196,7 @@ export type RichParameterInputProps = Omit<
 	parameterAutofill?: AutofillBuildParameter;
 	onChange: (value: string) => void;
 	size?: Size;
+	isPreset?: boolean;
 };
 
 const autofillDescription: Partial<Record<AutofillSource, ReactNode>> = {
@@ -198,6 +208,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
 	parameter,
 	parameterAutofill,
 	onChange,
+	isPreset,
 	...fieldProps
 }) => {
 	const autofillSource = parameterAutofill?.source;
@@ -211,7 +222,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
 			className={size}
 			data-testid={`parameter-field-${parameter.name}`}
 		>
-			<ParameterLabel parameter={parameter} />
+			<ParameterLabel parameter={parameter} isPreset={isPreset} />
 			<div css={{ display: "flex", flexDirection: "column" }}>
 				<RichParameterField
 					{...fieldProps}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index edc3245c85607..786cdf45aa742 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -382,33 +382,35 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 							{parameters.map((parameter, index) => {
 								const parameterField = `rich_parameter_values.${index}`;
 								const parameterInputName = `${parameterField}.value`;
+								const isPresetParameter = presetParameterNames.includes(parameter.name);
 								const isDisabled =
 									disabledParams?.includes(
 										parameter.name.toLowerCase().replace(/ /g, "_"),
 									) ||
 									creatingWorkspace ||
-									presetParameterNames.includes(parameter.name);
+									isPresetParameter;
 
 								// Hide preset parameters if showPresetParameters is false
-								// but keep their values in the form
-								if (!showPresetParameters && presetParameterNames.includes(parameter.name)) {
+								if (!showPresetParameters && isPresetParameter) {
 									return null;
 								}
 
 								return (
-									<RichParameterInput
-										{...getFieldHelpers(parameterInputName)}
-										onChange={async (value) => {
-											await form.setFieldValue(parameterField, {
-												name: parameter.name,
-												value,
-											});
-										}}
-										key={parameter.name}
-										parameter={parameter}
-										parameterAutofill={autofillByName[parameter.name]}
-										disabled={isDisabled}
-									/>
+									<div key={parameter.name}>
+										<RichParameterInput
+											{...getFieldHelpers(parameterInputName)}
+											onChange={async (value) => {
+												await form.setFieldValue(parameterField, {
+													name: parameter.name,
+													value,
+												});
+											}}
+											parameter={parameter}
+											parameterAutofill={autofillByName[parameter.name]}
+											disabled={isDisabled}
+											isPreset={isPresetParameter}
+										/>
+									</div>
 								);
 							})}
 						</FormFields>

From f6d7a8e141c8ca4512bf5362ded072f711343328 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:37:00 +0000
Subject: [PATCH 4/9] text sizing

---
 site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 786cdf45aa742..2d6af185e77b2 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -301,7 +301,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 											checked={showPresetParameters}
 											onCheckedChange={setShowPresetParameters}
 										/>
-										<span>Show preset parameters</span>
+										<span css={styles.description}>Show preset parameters</span>
 									</div>
 								</Stack>
 							</Stack>

From 464e2e705cf54efe8c9679d7f662d7a42a288424 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:39:00 +0000
Subject: [PATCH 5/9] make lint

---
 .../RichParameterInput.stories.tsx            |  9 ++++++---
 .../RichParameterInput/RichParameterInput.tsx |  2 +-
 .../CreateWorkspacePageView.tsx               | 20 ++++++++++++++-----
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
index ea034586fccf7..80ed2c9c8111e 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -381,7 +381,8 @@ export const WithPreset: Story = {
 		id: "project_name",
 		parameter: createTemplateVersionParameter({
 			name: "project_name",
-			description: "Customize the name of a Google Cloud project that will be created!",
+			description:
+				"Customize the name of a Google Cloud project that will be created!",
 		}),
 		isPreset: true,
 	},
@@ -393,7 +394,8 @@ export const WithPresetAndImmutable: Story = {
 		id: "project_name",
 		parameter: createTemplateVersionParameter({
 			name: "project_name",
-			description: "Customize the name of a Google Cloud project that will be created!",
+			description:
+				"Customize the name of a Google Cloud project that will be created!",
 			mutable: false,
 		}),
 		isPreset: true,
@@ -406,7 +408,8 @@ export const WithPresetAndOptional: Story = {
 		id: "project_name",
 		parameter: createTemplateVersionParameter({
 			name: "project_name",
-			description: "Customize the name of a Google Cloud project that will be created!",
+			description:
+				"Customize the name of a Google Cloud project that will be created!",
 			required: false,
 		}),
 		isPreset: true,
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index ceda7ecf39039..beaff8ca2772e 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -1,5 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import SettingsIcon from "@mui/icons-material/Settings";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
@@ -19,7 +20,6 @@ import type {
 	AutofillSource,
 } from "utils/richParameters";
 import { MultiTextField } from "./MultiTextField";
-import SettingsIcon from "@mui/icons-material/Settings";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
 	return parameter.type === "bool";
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 2d6af185e77b2..a1af92028918a 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import TextField from "@mui/material/TextField";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -25,6 +25,7 @@ import { Pill } from "components/Pill/Pill";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
+import { Switch } from "components/Switch/Switch";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
@@ -46,7 +47,6 @@ import type {
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWSPermissions } from "./permissions";
-import { Switch } from "components/Switch/Switch";
 
 export const Language = {
 	duplicationWarning:
@@ -200,7 +200,13 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				value: presetParameter.Value,
 			});
 		}
-	}, [presetOptions, selectedPresetIndex, presets, parameters, form.setFieldValue]);
+	}, [
+		presetOptions,
+		selectedPresetIndex,
+		presets,
+		parameters,
+		form.setFieldValue,
+	]);
 
 	return (
 		<Margins size="medium">
@@ -296,7 +302,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 											selectedOption={presetOptions[selectedPresetIndex]}
 										/>
 									</Stack>
-									<div css={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+									<div
+										css={{ display: "flex", alignItems: "center", gap: "8px" }}
+									>
 										<Switch
 											checked={showPresetParameters}
 											onCheckedChange={setShowPresetParameters}
@@ -382,7 +390,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 							{parameters.map((parameter, index) => {
 								const parameterField = `rich_parameter_values.${index}`;
 								const parameterInputName = `${parameterField}.value`;
-								const isPresetParameter = presetParameterNames.includes(parameter.name);
+								const isPresetParameter = presetParameterNames.includes(
+									parameter.name,
+								);
 								const isDisabled =
 									disabledParams?.includes(
 										parameter.name.toLowerCase().replace(/ /g, "_"),

From 5df4ad6b85ba30b3fe2dd030d5fde3768cf3ce15 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 09:57:18 +0000
Subject: [PATCH 6/9] add id for storybook testing

---
 .../pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index a1af92028918a..9bf4c01da8398 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -306,10 +306,16 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 										css={{ display: "flex", alignItems: "center", gap: "8px" }}
 									>
 										<Switch
+											id="show-preset-parameters"
 											checked={showPresetParameters}
 											onCheckedChange={setShowPresetParameters}
 										/>
-										<span css={styles.description}>Show preset parameters</span>
+										<label
+											htmlFor="show-preset-parameters"
+											css={styles.description}
+										>
+											Show preset parameters
+										</label>
 									</div>
 								</Stack>
 							</Stack>

From d6000e43bdd7c50ca3da8676dbc1465b21ffe981 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 12:01:05 +0000
Subject: [PATCH 7/9] Move presets to the parameter section

---
 .../CreateWorkspacePageView.tsx               | 93 ++++++++++---------
 1 file changed, 49 insertions(+), 44 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 9bf4c01da8398..bf438253d3f6c 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -276,50 +276,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 							</Stack>
 						)}
 
-						{presets.length > 0 && (
-							<Stack direction="column" spacing={2}>
-								<Stack direction="row" spacing={2} alignItems="center">
-									<span css={styles.description}>
-										Select a preset to get started
-									</span>
-									<FeatureStageBadge contentType={"beta"} size="md" />
-								</Stack>
-								<Stack direction="column" spacing={2}>
-									<Stack direction="row" spacing={2}>
-										<SelectFilter
-											label="Preset"
-											options={presetOptions}
-											onSelect={(option) => {
-												const index = presetOptions.findIndex(
-													(preset) => preset.value === option?.value,
-												);
-												if (index === -1) {
-													return;
-												}
-												setSelectedPresetIndex(index);
-											}}
-											placeholder="Select a preset"
-											selectedOption={presetOptions[selectedPresetIndex]}
-										/>
-									</Stack>
-									<div
-										css={{ display: "flex", alignItems: "center", gap: "8px" }}
-									>
-										<Switch
-											id="show-preset-parameters"
-											checked={showPresetParameters}
-											onCheckedChange={setShowPresetParameters}
-										/>
-										<label
-											htmlFor="show-preset-parameters"
-											css={styles.description}
-										>
-											Show preset parameters
-										</label>
-									</div>
-								</Stack>
-							</Stack>
-						)}
 						<div>
 							<TextField
 								{...getFieldHelpers("name")}
@@ -393,6 +349,55 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                 hence they require additional vertical spacing for better readability and
                 user experience. */}
 						<FormFields css={{ gap: 36 }}>
+							{presets.length > 0 && (
+								<Stack direction="column" spacing={2}>
+									<Stack direction="row" spacing={2} alignItems="center">
+										<span css={styles.description}>
+											Select a preset to get started
+										</span>
+										<FeatureStageBadge contentType={"beta"} size="md" />
+									</Stack>
+									<Stack direction="column" spacing={2}>
+										<Stack direction="row" spacing={2}>
+											<SelectFilter
+												label="Preset"
+												options={presetOptions}
+												onSelect={(option) => {
+													const index = presetOptions.findIndex(
+														(preset) => preset.value === option?.value,
+													);
+													if (index === -1) {
+														return;
+													}
+													setSelectedPresetIndex(index);
+												}}
+												placeholder="Select a preset"
+												selectedOption={presetOptions[selectedPresetIndex]}
+											/>
+										</Stack>
+										<div
+											css={{
+												display: "flex",
+												alignItems: "center",
+												gap: "8px",
+											}}
+										>
+											<Switch
+												id="show-preset-parameters"
+												checked={showPresetParameters}
+												onCheckedChange={setShowPresetParameters}
+											/>
+											<label
+												htmlFor="show-preset-parameters"
+												css={styles.description}
+											>
+												Show preset parameters
+											</label>
+										</div>
+									</Stack>
+								</Stack>
+							)}
+
 							{parameters.map((parameter, index) => {
 								const parameterField = `rich_parameter_values.${index}`;
 								const parameterInputName = `${parameterField}.value`;

From 633e7f871b6b73404285452ac62276ac2feafc88 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 12:03:32 +0000
Subject: [PATCH 8/9] hide preset parameters by default

---
 site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index bf438253d3f6c..6dab8de306a10 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -103,7 +103,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
 	);
-	const [showPresetParameters, setShowPresetParameters] = useState(true);
+	const [showPresetParameters, setShowPresetParameters] = useState(false);
 
 	const rerollSuggestedName = useCallback(() => {
 		setSuggestedName(() => generateWorkspaceName());

From dd5f042820133962a205ca4a73e32da88948a14f Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 31 Mar 2025 12:06:05 +0000
Subject: [PATCH 9/9] update preset stories based on new default

---
 .../CreateWorkspacePage/CreateWorkspacePageView.stories.tsx  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index b6a548e3410ff..47d1198765452 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -166,8 +166,6 @@ export const PresetSelectedWithHiddenParameters: Story = {
 		// Select a preset
 		await userEvent.click(canvas.getByLabelText("Preset"));
 		await userEvent.click(canvas.getByText("Preset 1"));
-		// Toggle off the show preset parameters switch
-		await userEvent.click(canvas.getByLabelText("Show preset parameters"));
 	},
 };
 
@@ -178,7 +176,8 @@ export const PresetSelectedWithVisibleParameters: Story = {
 		// Select a preset
 		await userEvent.click(canvas.getByLabelText("Preset"));
 		await userEvent.click(canvas.getByText("Preset 1"));
-		// Ensure the show preset parameters switch is on (it's on by default)
+		// Toggle off the show preset parameters switch
+		await userEvent.click(canvas.getByLabelText("Show preset parameters"));
 	},
 };
 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17168.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17168.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17168.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17168.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>