fix: get presets working correctly with dynamic params

jaaydenh · jaaydenh · commit b03e3befac55 · 2025-05-19T20:38:18.000Z
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -222,6 +222,15 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 	const onChangeEvent = useEffectEvent(onChange);
 	// prevDebouncedValueRef is to prevent calling the onChangeEvent on the initial render
 	const prevDebouncedValueRef = useRef<string | undefined>();
+	const prevValueRef = useRef(value);
+
+	// This is necessary in the case of fields being set by preset parameters
+	useEffect(() => {
+		if (value !== undefined && value !== prevValueRef.current) {
+			setLocalValue(value);
+			prevValueRef.current = value;
+		}
+	}, [value]);
 
 	useEffect(() => {
 		if (prevDebouncedValueRef.current !== undefined) {
@@ -458,7 +467,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					<Slider
 						id={id}
 						className="mt-2"
-						value={[Number(value)]}
+						value={[Number.isNaN(Number(value)) ? 0 : Number(value)]}
 						onValueChange={([value]) => {
 							onChange(value.toString());
 						}}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -101,7 +101,7 @@ const CreateWorkspacePageExperimental: FC = () => {
 		}
 	}, []);
 
-	// On sends all initial parameter values to the websocket
+	// On page load, sends all initial parameter values to the websocket
 	// (including defaults and autofilled from the url)
 	// This ensures the backend has the complete initial state of the form,
 	// which is vital for correctly rendering dynamic UI elements where parameter visibility
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -213,39 +213,76 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 		setPresetParameterNames(selectedPreset.Parameters.map((p) => p.Name));
 
-		for (const presetParameter of selectedPreset.Parameters) {
+		const currentValues = form.values.rich_parameter_values ?? [];
+
+		const updates = selectedPreset.Parameters.map((presetParameter) => {
 			const parameterIndex = parameters.findIndex(
 				(p) => p.name === presetParameter.Name,
 			);
-			if (parameterIndex === -1) continue;
+			if (parameterIndex === -1) return null;
 
 			const parameterField = `rich_parameter_values.${parameterIndex}`;
+			const parameter = parameters[parameterIndex];
+			const currentValue = currentValues.find(
+				(p) => p.name === presetParameter.Name,
+			)?.value;
+
+			if (currentValue !== presetParameter.Value) {
+				return {
+					field: parameterField,
+					fieldValue: {
+						name: presetParameter.Name,
+						value: presetParameter.Value,
+					},
+					parameter,
+					presetValue: presetParameter.Value,
+				};
+			}
+			return null;
+		}).filter(
+			(update): update is NonNullable<typeof update> => update !== null,
+		);
+
+		if (updates.length > 0) {
+			for (const update of updates) {
+				form.setFieldValue(update.field, update.fieldValue);
+				form.setFieldTouched(update.parameter.name, true);
+			}
 
-			form.setFieldValue(parameterField, {
-				name: presetParameter.Name,
-				value: presetParameter.Value,
-			});
+			sendDynamicParamsRequest(
+				updates.map((update) => ({
+					parameter: update.parameter,
+					value: update.presetValue,
+				})),
+			);
 		}
 	}, [
 		presetOptions,
 		selectedPresetIndex,
 		presets,
 		form.setFieldValue,
+		form.setFieldTouched,
 		parameters,
+		form.values.rich_parameter_values,
 	]);
 
 	// send the last user modified parameter and all touched parameters to the websocket
 	const sendDynamicParamsRequest = (
-		parameter: PreviewParameter,
-		value: string,
+		parameters: Array<{ parameter: PreviewParameter; value: string }>,
 	) => {
 		const formInputs: Record<string, string> = {};
-		formInputs[parameter.name] = value;
-		const parameters = form.values.rich_parameter_values ?? [];
+		const formParameters = form.values.rich_parameter_values ?? [];
+
+		for (const { parameter, value } of parameters) {
+			formInputs[parameter.name] = value;
+		}
 
 		for (const [fieldName, isTouched] of Object.entries(form.touched)) {
-			if (isTouched && fieldName !== parameter.name) {
-				const param = parameters.find((p) => p.name === fieldName);
+			if (
+				isTouched &&
+				!parameters.some((p) => p.parameter.name === fieldName)
+			) {
+				const param = formParameters.find((p) => p.name === fieldName);
 				if (param?.value) {
 					formInputs[fieldName] = param.value;
 				}
@@ -260,12 +297,20 @@ export const CreateWorkspacePageViewExperimental: FC<
 		parameterField: string,
 		value: string,
 	) => {
+		const currentFormValue = form.values.rich_parameter_values?.find(
+			(p) => p.name === parameter.name,
+		)?.value;
+
 		await form.setFieldValue(parameterField, {
 			name: parameter.name,
 			value,
 		});
-		form.setFieldTouched(parameter.name, true);
-		sendDynamicParamsRequest(parameter, value);
+
+		// Only send the request if the value has changed from the form value
+		if (currentFormValue !== value) {
+			form.setFieldTouched(parameter.name, true);
+			sendDynamicParamsRequest([{ parameter, value }]);
+		}
 	};
 
 	useSyncFormParameters({

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ const CreateWorkspacePageExperimental: FC = () => {`
`101`	`101`	`}`
`102`	`102`	`}, []);`
`103`	`103`
`104`		`- // On sends all initial parameter values to the websocket`
	`104`	`+ // On page load, sends all initial parameter values to the websocket`
`105`	`105`	`// (including defaults and autofilled from the url)`
`106`	`106`	`// This ensures the backend has the complete initial state of the form,`
`107`	`107`	`// which is vital for correctly rendering dynamic UI elements where parameter visibility`