May 27, 2025 · May 23, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 };

 templateVersionDynamicParameters = (
 userId: string,
 versionId: string,
 {
 onMessage,
 },
 ): WebSocket => {
 const socket = createWebSocket(
 `/api/v2/users/${userId}/templateversions/${versionId}/parameters`,
 `/api/v2/templateversions/${versionId}/dynamic-parameters`,
 );

 socket.addEventListener("message", (event) =>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx

 const autofillParameters = getAutofillParameters(searchParams);

 const sendMessage = useCallback((formValues: Record<string, string>) => {
 const request: DynamicParametersRequest = {
 id: wsResponseId.current + 1,
 inputs: formValues,
 };
 if (ws.current && ws.current.readyState === WebSocket.OPEN) {
 ws.current.send(JSON.stringify(request));
 wsResponseId.current = wsResponseId.current + 1;
 }
 }, []);
 const sendMessage = useEffectEvent(
 (formValues: Record<string, string>, ownerId?: string) => {
 const request: DynamicParametersRequest = {
 id: wsResponseId.current + 1,
 owner_id: ownerId ?? owner.id,
 inputs: formValues,
 };
 if (ws.current && ws.current.readyState === WebSocket.OPEN) {
 ws.current.send(JSON.stringify(request));
 wsResponseId.current = wsResponseId.current + 1;
 }
 },
 );

 // On page load, sends all initial parameter values to the websocket
 // (including defaults and autofilled from the url)
 useEffect(() => {
 if (!realizedVersionId) return;

 const socket = API.templateVersionDynamicParameters(
 owner.id,
 realizedVersionId,
 {
 onMessage,
 onError: (error) => {
 if (ws.current === socket) {
 setWsError(error);
 }
 },
 onClose: () => {
 if (ws.current === socket) {
 setWsError(
 new DetailedError(
 "Websocket connection for dynamic parameters unexpectedly closed.",
 "Refresh the page to reset the form.",
 ),
 );
 }
 },
 const socket = API.templateVersionDynamicParameters(realizedVersionId, {
 onMessage,
 onError: (error) => {
 if (ws.current === socket) {
 setWsError(error);
 }
 },
 );
 onClose: () => {
 if (ws.current === socket) {
 setWsError(
 new DetailedError(
 "Websocket connection for dynamic parameters unexpectedly closed.",
 "Refresh the page to reset the form.",
 ),
 );
 }
 },
 });

 ws.current = socket;

 return () => {
 socket.close();
 };
 }, [owner.id,realizedVersionId, onMessage]);
 }, [realizedVersionId, onMessage]);

 const organizationId = templateQuery.data?.organization_id;

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 owner: TypesGen.User,
 ) => void;
 resetMutation: () => void;
 sendMessage: (message: Record<string, string>) => void;
 sendMessage: (message: Record<string, string>, ownerId?: string) => void;
 startPollingExternalAuth: () => void;
 owner: TypesGen.User;
 setOwner: (user: TypesGen.User) => void;
 form.values.rich_parameter_values,
 ]);

 //send the last usermodifiedparameter and all touched parameters to the websocket
 //include anymodifiedparameters and all touched parameters to the websocket request
 const sendDynamicParamsRequest = (
 parameters: Array<{ parameter: PreviewParameter; value: string }>,
 ownerId?: string,
 ) => {
 const formInputs: Record<string, string> = {};
 const formParameters = form.values.rich_parameter_values ?? [];
 }
 }

 sendMessage(formInputs);
 sendMessage(formInputs, ownerId);
 };

 const handleOwnerChange = (user: TypesGen.User) => {
 setOwner(user);
 sendDynamicParamsRequest([], user.id);
 };

 const handleChange = async (
 <UserAutocomplete
 value={owner}
 onChange={(user) => {
 setOwner(user ?? defaultOwner);
 handleOwnerChange(user ?? defaultOwner);
 }}
 size="medium"
 />
diff --git a/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx
 import { Loader } from "components/Loader/Loader";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import type { FC } from "react";
 import {
 useCallback,
 useContext,
 useEffect,
 useMemo,
 useRef,
 useState,
 } from "react";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 const ws = useRef<WebSocket | null>(null);
 const [wsError, setWsError] = useState<Error | null>(null);

 const sendMessage =useCallback((formValues: Record<string, string>) => {
 const sendMessage =useEffectEvent((formValues: Record<string, string>) => {
 const request: DynamicParametersRequest = {
 id: wsResponseId.current + 1,
 owner_id: workspace.owner_id,
 inputs: formValues,
 };
 if (ws.current && ws.current.readyState === WebSocket.OPEN) {
 ws.current.send(JSON.stringify(request));
 wsResponseId.current = wsResponseId.current + 1;
 }
 }, []);
 });

 const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
 if (latestResponse && latestResponse?.id >= response.id) {
 if (!workspace.latest_build.template_version_id) return;

 const socket = API.templateVersionDynamicParameters(
 workspace.owner_id,
 workspace.latest_build.template_version_id,
 {
 onMessage,
 return () => {
 socket.close();
 };
 }, [
 workspace.owner_id,
 workspace.latest_build.template_version_id,
 onMessage,
 ]);
 }, [workspace.latest_build.template_version_id, onMessage]);

 const updateParameters = useMutation({
 mutationFn: (buildParameters: WorkspaceBuildParameter[]) =>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1000,7 +1000,6 @@ class ApiMethods {
		};

		templateVersionDynamicParameters = (
		userId: string,
		versionId: string,
		{
		onMessage,
Expand All		@@ -1013,7 +1012,7 @@ class ApiMethods {
		},
		): WebSocket => {
		const socket = createWebSocket(
		`/api/v2/users/${userId}/templateversions/${versionId}/parameters`,
		`/api/v2/templateversions/${versionId}/dynamic-parameters`,
		);

		socket.addEventListener("message", (event) =>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -90,16 +90,19 @@ const CreateWorkspacePageExperimental: FC = () => {

		const autofillParameters = getAutofillParameters(searchParams);

		const sendMessage = useCallback((formValues: Record<string, string>) => {
		const request: DynamicParametersRequest = {
		id: wsResponseId.current + 1,
		inputs: formValues,
		};
		if (ws.current && ws.current.readyState === WebSocket.OPEN) {
		ws.current.send(JSON.stringify(request));
		wsResponseId.current = wsResponseId.current + 1;
		}
		}, []);
		const sendMessage = useEffectEvent(
		(formValues: Record<string, string>, ownerId?: string) => {
		const request: DynamicParametersRequest = {
		id: wsResponseId.current + 1,
		owner_id: ownerId ?? owner.id,
		inputs: formValues,
		};
		if (ws.current && ws.current.readyState === WebSocket.OPEN) {
		ws.current.send(JSON.stringify(request));
		wsResponseId.current = wsResponseId.current + 1;
		}
		},
		);

		// On page load, sends all initial parameter values to the websocket
		// (including defaults and autofilled from the url)
Expand DownExpand Up		@@ -147,35 +150,31 @@ const CreateWorkspacePageExperimental: FC = () => {
		useEffect(() => {
		if (!realizedVersionId) return;

		const socket = API.templateVersionDynamicParameters(
		owner.id,
		realizedVersionId,
		{
		onMessage,
		onError: (error) => {
		if (ws.current === socket) {
		setWsError(error);
		}
		},
		onClose: () => {
		if (ws.current === socket) {
		setWsError(
		new DetailedError(
		"Websocket connection for dynamic parameters unexpectedly closed.",
		"Refresh the page to reset the form.",
		),
		);
		}
		},
		const socket = API.templateVersionDynamicParameters(realizedVersionId, {
		onMessage,
		onError: (error) => {
		if (ws.current === socket) {
		setWsError(error);
		}
		},
		);
		onClose: () => {
		if (ws.current === socket) {
		setWsError(
		new DetailedError(
		"Websocket connection for dynamic parameters unexpectedly closed.",
		"Refresh the page to reset the form.",
		),
		);
		}
		},
		});

		ws.current = socket;

		return () => {
		socket.close();
		};
		}, [owner.id,realizedVersionId, onMessage]);
		}, [realizedVersionId, onMessage]);

		const organizationId = templateQuery.data?.organization_id;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,7 +70,7 @@ export interface CreateWorkspacePageViewExperimentalProps {
		owner: TypesGen.User,
		) => void;
		resetMutation: () => void;
		sendMessage: (message: Record<string, string>) => void;
		sendMessage: (message: Record<string, string>, ownerId?: string) => void;
		startPollingExternalAuth: () => void;
		owner: TypesGen.User;
		setOwner: (user: TypesGen.User) => void;
Expand DownExpand Up		@@ -271,9 +271,10 @@ export const CreateWorkspacePageViewExperimental: FC<
		form.values.rich_parameter_values,
		]);

		//send the last usermodifiedparameter and all touched parameters to the websocket
		//include anymodifiedparameters and all touched parameters to the websocket request
		const sendDynamicParamsRequest = (
		parameters: Array<{ parameter: PreviewParameter; value: string }>,
		ownerId?: string,
		) => {
		const formInputs: Record<string, string> = {};
		const formParameters = form.values.rich_parameter_values ?? [];
Expand All		@@ -294,7 +295,12 @@ export const CreateWorkspacePageViewExperimental: FC<
		}
		}

		sendMessage(formInputs);
		sendMessage(formInputs, ownerId);
		};

		const handleOwnerChange = (user: TypesGen.User) => {
		setOwner(user);
		sendDynamicParamsRequest([], user.id);
		};

		const handleChange = async (
Expand DownExpand Up		@@ -449,7 +455,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		<UserAutocomplete
		value={owner}
		onChange={(user) => {
		setOwner(user ?? defaultOwner);
		handleOwnerChange(user ?? defaultOwner);
		}}
		size="medium"
		/>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,14 +14,7 @@ import { Link } from "components/Link/Link";
		import { Loader } from "components/Loader/Loader";
		import { useEffectEvent } from "hooks/hookPolyfills";
		import type { FC } from "react";
		import {
		useCallback,
		useContext,
		useEffect,
		useMemo,
		useRef,
		useState,
		} from "react";
		import { useContext, useEffect, useMemo, useRef, useState } from "react";
		import { Helmet } from "react-helmet-async";
		import { useMutation, useQuery } from "react-query";
		import { useNavigate } from "react-router-dom";
Expand All		@@ -46,16 +39,17 @@ const WorkspaceParametersPageExperimental: FC = () => {
		const ws = useRef<WebSocket \| null>(null);
		const [wsError, setWsError] = useState<Error \| null>(null);

		const sendMessage =useCallback((formValues: Record<string, string>) => {
		const sendMessage =useEffectEvent((formValues: Record<string, string>) => {
		const request: DynamicParametersRequest = {
		id: wsResponseId.current + 1,
		owner_id: workspace.owner_id,
		inputs: formValues,
		};
		if (ws.current && ws.current.readyState === WebSocket.OPEN) {
		ws.current.send(JSON.stringify(request));
		wsResponseId.current = wsResponseId.current + 1;
		}
		}, []);
		});

		const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
		if (latestResponse && latestResponse?.id >= response.id) {
Expand All		@@ -69,7 +63,6 @@ const WorkspaceParametersPageExperimental: FC = () => {
		if (!workspace.latest_build.template_version_id) return;

		const socket = API.templateVersionDynamicParameters(
		workspace.owner_id,
		workspace.latest_build.template_version_id,
		{
		onMessage,
Expand All		@@ -96,11 +89,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
		return () => {
		socket.close();
		};
		}, [
		workspace.owner_id,
		workspace.latest_build.template_version_id,
		onMessage,
		]);
		}, [workspace.latest_build.template_version_id, onMessage]);

		const updateParameters = useMutation({
		mutationFn: (buildParameters: WorkspaceBuildParameter[]) =>
Expand Down