May 19, 2025 · May 16, 2025 · May 16, 2025 · May 18, 2025 · May 18, 2025 · May 16, 2025
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
 return;
 }

 if (!initialParamsSentRef.current && response.parameters.length > 0) {
 if (!initialParamsSentRef.current && response.parameters?.length > 0) {
 sendInitialParameters([...response.parameters]);
 }

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 setSuggestedName(() => generateWorkspaceName());
 }, []);

 const autofillByName = Object.fromEntries(
 autofillParameters.map((param) => [param.name, param]),
 );

 // Only touched fields are sent to the websocket
 // Autofilled parameters are marked as touched since they have been modified
 const initialTouched = parameters.reduce(
 (touched, parameter) => {
 if (autofillByName[parameter.name] !== undefined) {
 touched[parameter.name] = true;
 }
 return touched;
 },
 {} as Record<string, boolean>,
 );

 // The form parameters values hold the working state of the parameters that will be submitted when creating a workspace
 // 1. The form parameter values are initialized from the websocket response when the form is mounted
 // 2. Only touched form fields are sent to the websocket, a field is touched if edited by the user or set by autofill
 // 3. The websocket response may add or remove parameters, these are added or removed from the form values in the useSyncFormParameters hook
 // 4. All existing form parameters are updated to match the websocket response in the useSyncFormParameters hook
 const form: FormikContextType<TypesGen.CreateWorkspaceRequest> =
 useFormik<TypesGen.CreateWorkspaceRequest>({
 initialValues: {
 autofillParameters,
 ),
 },
 initialTouched,
 validationSchema: Yup.object({
 name: nameValidator("Workspace Name"),
 rich_parameter_values:
 },
 });

 const autofillByName = Object.fromEntries(
 autofillParameters.map((param) => [param.name, param]),
 );

 useEffect(() => {
 if (error) {
 window.scrollTo(0, 0);
 sendDynamicParamsRequest(parameter, value);
 };

 useSyncFormParameters({
 parameters,
 formValues: form.values.rich_parameter_values ?? [],
 setFieldValue: form.setFieldValue,
 });

 return (
 <>
 <div className="sticky top-5 ml-10">
 </div>
 );
 };

 type UseSyncFormParametersProps = {
 parameters: readonly PreviewParameter[];
 formValues: readonly TypesGen.WorkspaceBuildParameter[];
 setFieldValue: (
 field: string,
 value: TypesGen.WorkspaceBuildParameter[],
 ) => void;
 };

 function useSyncFormParameters({
 parameters,
 formValues,
 setFieldValue,
 }: UseSyncFormParametersProps) {
 // Form values only needs to be updated when parameters change
 // Keep track of form values in a ref to avoid unnecessary updates to rich_parameter_values
 const formValuesRef = useRef(formValues);

 useEffect(() => {
 formValuesRef.current = formValues;
 }, [formValues]);

 useEffect(() => {
 if (!parameters) return;
 const currentFormValues = formValuesRef.current;

 const newParameterValues = parameters.map((param) => {
 return {
 name: param.name,
 value: param.value.valid ? param.value.value : "",
 };
 });

 const isChanged =
 currentFormValues.length !== newParameterValues.length ||
 newParameterValues.some(
 (p) =>
 !currentFormValues.find(
 (formValue) =>
 formValue.name === p.name && formValue.value === p.value,
 ),
 );

 if (isChanged) {
 setFieldValue("rich_parameter_values", newParameterValues);
 }
 }, [parameters, setFieldValue]);
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -136,7 +136,7 @@ const CreateWorkspacePageExperimental: FC = () => {
		return;
		}

		if (!initialParamsSentRef.current && response.parameters.length > 0) {
		if (!initialParamsSentRef.current && response.parameters?.length > 0) {
Copy link Member EmyrkMay 16, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. ❤️
		sendInitialParameters([...response.parameters]);
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -113,6 +113,27 @@ export const CreateWorkspacePageViewExperimental: FC<
		setSuggestedName(() => generateWorkspaceName());
		}, []);

		const autofillByName = Object.fromEntries(
		autofillParameters.map((param) => [param.name, param]),
		);

		// Only touched fields are sent to the websocket
		// Autofilled parameters are marked as touched since they have been modified
		const initialTouched = parameters.reduce(
		(touched, parameter) => {
		if (autofillByName[parameter.name] !== undefined) {
		touched[parameter.name] = true;
		}
		return touched;
		},
		{} as Record<string, boolean>,
		);

		// The form parameters values hold the working state of the parameters that will be submitted when creating a workspace
		// 1. The form parameter values are initialized from the websocket response when the form is mounted
		// 2. Only touched form fields are sent to the websocket, a field is touched if edited by the user or set by autofill
		// 3. The websocket response may add or remove parameters, these are added or removed from the form values in the useSyncFormParameters hook
		// 4. All existing form parameters are updated to match the websocket response in the useSyncFormParameters hook
		const form: FormikContextType<TypesGen.CreateWorkspaceRequest> =
		useFormik<TypesGen.CreateWorkspaceRequest>({
		initialValues: {
Expand All		@@ -123,6 +144,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		autofillParameters,
		),
		},
		initialTouched,
		validationSchema: Yup.object({
		name: nameValidator("Workspace Name"),
		rich_parameter_values:
Expand All		@@ -140,10 +162,6 @@ export const CreateWorkspacePageViewExperimental: FC<
		},
		});

		const autofillByName = Object.fromEntries(
		autofillParameters.map((param) => [param.name, param]),
		);

		useEffect(() => {
		if (error) {
		window.scrollTo(0, 0);
Expand DownExpand Up		@@ -250,6 +268,12 @@ export const CreateWorkspacePageViewExperimental: FC<
		sendDynamicParamsRequest(parameter, value);
		};

		useSyncFormParameters({
		parameters,
		formValues: form.values.rich_parameter_values ?? [],
		setFieldValue: form.setFieldValue,
		});

		return (
		<>
		<div className="sticky top-5 ml-10">
Expand DownExpand Up		@@ -568,3 +592,52 @@ const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
		</div>
		);
		};

		type UseSyncFormParametersProps = {
		parameters: readonly PreviewParameter[];
		formValues: readonly TypesGen.WorkspaceBuildParameter[];
		setFieldValue: (
		field: string,
		value: TypesGen.WorkspaceBuildParameter[],
		) => void;
		};

		function useSyncFormParameters({
		parameters,
		formValues,
		setFieldValue,
		}: UseSyncFormParametersProps) {
		// Form values only needs to be updated when parameters change
		// Keep track of form values in a ref to avoid unnecessary updates to rich_parameter_values
		const formValuesRef = useRef(formValues);

		useEffect(() => {
		formValuesRef.current = formValues;
		}, [formValues]);

		useEffect(() => {
		if (!parameters) return;
		const currentFormValues = formValuesRef.current;

		const newParameterValues = parameters.map((param) => {
		return {
		name: param.name,
		value: param.value.valid ? param.value.value : "",
		};
		});

		const isChanged =
		currentFormValues.length !== newParameterValues.length \|\|
		newParameterValues.some(
		(p) =>
		!currentFormValues.find(
		(formValue) =>
		formValue.name === p.name && formValue.value === p.value,
		),
		);

		if (isChanged) {
		setFieldValue("rich_parameter_values", newParameterValues);
		}
		}, [parameters, setFieldValue]);
		}