Label preset parameters as such

SasSwart · SasSwart · commit f1a583969927 · 2025-03-31T09:35:35.000Z
diff --git 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
@@ -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
@@ -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>
