fix: extract checkbox label from dynamic parameter styling prop (#17651)

jaaydenh · web-flow · commit c66e80e86276 · 2025-05-08T08:02:27.000-04:00
resolves #17474 A label will only be shown next to the checkbox If there is a value for `label` in the styling prop for the dynamic parameter <img width="457" alt="Screenshot 2025-05-01 at 21 35 32" src="https://github.com/user-attachments/assets/3b3a8160-65a2-4411-b763-0d07a4eeb699" />
diff --git a/go.mod b/go.mod
@@ -488,7 +488,7 @@ require (
 
 require (
 	github.com/anthropics/anthropic-sdk-go v0.2.0-beta.3
-	github.com/coder/preview v0.0.1
+	github.com/coder/preview v0.0.2-0.20250506154333-6f500ca7b245
 	github.com/fsnotify/fsnotify v1.9.0
 	github.com/kylecarbs/aisdk-go v0.0.8
 	github.com/mark3labs/mcp-go v0.25.0
diff --git a/go.sum b/go.sum
@@ -907,8 +907,8 @@ github.com/coder/pq v1.10.5-0.20240813183442-0c420cb5a048 h1:3jzYUlGH7ZELIH4XggX
 github.com/coder/pq v1.10.5-0.20240813183442-0c420cb5a048/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0 h1:3A0ES21Ke+FxEM8CXx9n47SZOKOpgSE1bbJzlE4qPVs=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0/go.mod h1:5UuS2Ts+nTToAMeOjNlnHFkPahrtDkmpydBen/3wgZc=
-github.com/coder/preview v0.0.1 h1:2X5McKdMOZJILTIDf7qRplXKupT+91qTJBN67XUh5cA=
-github.com/coder/preview v0.0.1/go.mod h1:eInDmOdSDF8cxCvapIvYkGRzmzvcvGAFL1HYqcA4g+E=
+github.com/coder/preview v0.0.2-0.20250506154333-6f500ca7b245 h1:RGoANNubwwPZF8puiYAk2qbzhVgipBMNu8WIrY1VIbI=
+github.com/coder/preview v0.0.2-0.20250506154333-6f500ca7b245/go.mod h1:5VnO9yw7vq19hBgBqqBksE2BH53UTmNYH1QltkYLXJI=
 github.com/coder/quartz v0.1.2 h1:PVhc9sJimTdKd3VbygXtS4826EOCpB1fXoRlLnCrE+s=
 github.com/coder/quartz v0.1.2/go.mod h1:vsiCc+AHViMKH2CQpGIpFgdHIEQsxwm8yCscqKmzbRA=
 github.com/coder/retry v1.5.1 h1:iWu8YnD8YqHs3XwqrqsjoBTAVqT9ml6z9ViJ2wlMiqc=
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -181,10 +181,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				>
 					<SelectTrigger>
 						<SelectValue
-							placeholder={
-								(parameter.styling as { placeholder?: string })?.placeholder ||
-								"Select option"
-							}
+							placeholder={parameter.styling?.placeholder || "Select option"}
 						/>
 					</SelectTrigger>
 					<SelectContent>
@@ -245,10 +242,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						onChange(JSON.stringify(values));
 					}}
 					hidePlaceholderWhenSelected
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder ||
-						"Select option"
-					}
+					placeholder={parameter.styling?.placeholder || "Select option"}
 					emptyIndicator={
 						<p className="text-center text-md text-content-primary">
 							No results found
@@ -304,9 +298,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						}}
 						disabled={disabled}
 					/>
-					<Label htmlFor={parameter.name}>
-						{parameter.display_name || parameter.name}
-					</Label>
+					<Label htmlFor={parameter.name}>{parameter.styling?.label}</Label>
 				</div>
 			);
 
@@ -343,9 +335,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						target.style.height = `${target.scrollHeight}px`;
 					}}
 					disabled={disabled}
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder
-					}
+					placeholder={parameter.styling?.placeholder}
 					required={parameter.required}
 				/>
 			);
@@ -377,9 +367,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					}}
 					disabled={disabled}
 					required={parameter.required}
-					placeholder={
-						(parameter.styling as { placeholder?: string })?.placeholder
-					}
+					placeholder={parameter.styling?.placeholder}
 					{...inputProps}
 				/>
 			);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -493,15 +493,14 @@ export const CreateWorkspacePageViewExperimental: FC<
 							<div className="flex flex-col gap-9">
 								{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, "_"),
 										) ||
-										(parameter.styling as { disabled?: boolean })?.disabled ||
+										parameter.styling?.disabled ||
 										creatingWorkspace ||
 										isPresetParameter;
 
