May 19, 2025 · May 19, 2025 · May 19, 2025
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
 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) {
 <Slider
 id={id}
 className="mt-2"
 value={[Number(value)]}
 value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
 onValueChange={([value]) => {
 onChange(value.toString());
 }}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
 }
 }, []);

 // On sends all initial parameter values to the websocket
 // Onpage 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

 setPresetParameterNames(selectedPreset.Parameters.map((p) => p.Name));

 const currentValues = form.values.rich_parameter_values ?? [];

 const updates: Array<{
 field: string;
 fieldValue: TypesGen.WorkspaceBuildParameter;
 parameter: PreviewParameter;
 presetValue: string;
 }> = [];

 for (const presetParameter of selectedPreset.Parameters) {
 const parameterIndex = parameters.findIndex(
 (p) => p.name === presetParameter.Name,
 );
 if (parameterIndex === -1) continue;

 const parameterField = `rich_parameter_values.${parameterIndex}`;
 const parameter = parameters[parameterIndex];
 const currentValue = currentValues.find(
 (p) => p.name === presetParameter.Name,
 )?.value;

 if (currentValue !== presetParameter.Value) {
 updates.push({
 field: parameterField,
 fieldValue: {
 name: presetParameter.Name,
 value: presetParameter.Value,
 },
 parameter,
 presetValue: presetParameter.Value,
 });
 }
 }

 form.setFieldValue(parameterField, {
 name: presetParameter.Name,
 value: presetParameter.Value,
 });
 if (updates.length > 0) {
 for (const update of updates) {
 form.setFieldValue(update.field, update.fieldValue);
 form.setFieldTouched(update.parameter.name, true);
 }

 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;
 }
 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
Expand Up		@@ -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) {
Expand DownExpand Up		@@ -458,7 +467,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
		<Slider
		id={id}
		className="mt-2"
		value={[Number(value)]}
		value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
		onValueChange={([value]) => {
		onChange(value.toString());
		}}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -101,7 +101,7 @@ const CreateWorkspacePageExperimental: FC = () => {
		}
		}, []);

		// On sends all initial parameter values to the websocket
		// Onpage 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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -213,39 +213,80 @@ export const CreateWorkspacePageViewExperimental: FC<

		setPresetParameterNames(selectedPreset.Parameters.map((p) => p.Name));

		const currentValues = form.values.rich_parameter_values ?? [];

		const updates: Array<{
		field: string;
		fieldValue: TypesGen.WorkspaceBuildParameter;
		parameter: PreviewParameter;
		presetValue: string;
		}> = [];

		for (const presetParameter of selectedPreset.Parameters) {
		const parameterIndex = parameters.findIndex(
		(p) => p.name === presetParameter.Name,
		);
		if (parameterIndex === -1) continue;

		const parameterField = `rich_parameter_values.${parameterIndex}`;
		const parameter = parameters[parameterIndex];
		const currentValue = currentValues.find(
		(p) => p.name === presetParameter.Name,
		)?.value;

		if (currentValue !== presetParameter.Value) {
		updates.push({
		field: parameterField,
		fieldValue: {
		name: presetParameter.Name,
		value: presetParameter.Value,
		},
		parameter,
		presetValue: presetParameter.Value,
		});
		}
		}

		form.setFieldValue(parameterField, {
		name: presetParameter.Name,
		value: presetParameter.Value,
		});
		if (updates.length > 0) {
		for (const update of updates) {
		form.setFieldValue(update.field, update.fieldValue);
		form.setFieldTouched(update.parameter.name, true);
		}

		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;
		}
Expand All		@@ -260,12 +301,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({
Expand Down