From 634144f94a8bbb63d41908aa06998ee141fba50c Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Thu, 26 Jun 2025 11:23:10 +0200
Subject: [PATCH] fix: hide the preset parameter visibility switch when it has
 no effect (#18574)

When no preset is selected:
<img width="1097" alt="Screenshot 2025-06-25 at 15 49 51"
src="https://github.com/user-attachments/assets/96f1244a-58f1-4e59-b6ac-9319339c764f"
/>

When a preset is selected:
<img width="1097" alt="Screenshot 2025-06-25 at 15 50 00"
src="https://github.com/user-attachments/assets/d0853169-ff93-4b1a-beaf-11012a9a02fb"
/>

Existing frontend stories provide enough validation to cover this
feature. No further testing is required.

---------

Co-authored-by: Susana Ferreira <susana@coder.com>
---
 .../CreateWorkspacePageView.stories.tsx       |  2 +
 .../CreateWorkspacePageView.tsx               | 39 ++++++++++---------
 .../CreateWorkspacePageViewExperimental.tsx   | 24 ++++++------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
index 2d38e1f3a7..f085c74c57 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -277,6 +277,8 @@ export const PresetsWithDefault: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
+		// Wait for the switch to be available since preset parameters are populated asynchronously
+		await canvas.findByLabelText("Show preset parameters");
 		// Toggle off the show preset parameters switch
 		await userEvent.click(canvas.getByLabelText("Show preset parameters"));
 	},
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index addace484e..75c382f807 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -385,25 +385,28 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 												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}
+										{/* Only show the preset parameter visibility toggle if preset parameters are actually being modified, otherwise it has no effect. */}
+										{presetParameterNames.length > 0 && (
+											<div
+												css={{
+													display: "flex",
+													alignItems: "center",
+													gap: "8px",
+												}}
 											>
-												Show preset parameters
-											</label>
-										</div>
+												<Switch
+													id="show-preset-parameters"
+													checked={showPresetParameters}
+													onCheckedChange={setShowPresetParameters}
+												/>
+												<label
+													htmlFor="show-preset-parameters"
+													css={styles.description}
+												>
+													Show preset parameters
+												</label>
+											</div>
+										)}
 									</Stack>
 								</Stack>
 							)}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 59277d5f07..8cb6c4acb6 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -562,7 +562,6 @@ export const CreateWorkspacePageViewExperimental: FC<
 								<div className="flex flex-col gap-2">
 									<div className="flex gap-2 items-center">
 										<Label className="text-sm">Preset</Label>
-										<FeatureStageBadge contentType={"beta"} size="sm" />
 									</div>
 									<div className="flex flex-col gap-4">
 										<div className="max-w-lg">
@@ -594,16 +593,19 @@ export const CreateWorkspacePageViewExperimental: FC<
 												</SelectContent>
 											</Select>
 										</div>
-										<span className="flex items-center gap-3">
-											<Switch
-												id="show-preset-parameters"
-												checked={showPresetParameters}
-												onCheckedChange={setShowPresetParameters}
-											/>
-											<Label htmlFor="show-preset-parameters">
-												Show preset parameters
-											</Label>
-										</span>
+										{/* Only show the preset parameter visibility toggle if preset parameters are actually being modified, otherwise it is ineffectual */}
+										{presetParameterNames.length > 0 && (
+											<span className="flex items-center gap-3">
+												<Switch
+													id="show-preset-parameters"
+													checked={showPresetParameters}
+													onCheckedChange={setShowPresetParameters}
+												/>
+												<Label htmlFor="show-preset-parameters">
+													Show preset parameters
+												</Label>
+											</span>
+										)}
 									</div>
 								</div>
 							)}