Apr 16, 2025 · Apr 10, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025 · Apr 11, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 return response.data;
 };

 templateVersionDynamicParameters = (
 versionId: string,
 {
 onMessage,
 onError,
 }: {
 onMessage: (response: TypesGen.DynamicParametersResponse) => void;
 onError: (error: Error) => void;
 },
 ): WebSocket => {
 const socket = createWebSocket(
 `/api/v2/templateversions/${versionId}/dynamic-parameters`,
 );

 socket.addEventListener("message", (event) =>
 onMessage(JSON.parse(event.data) as TypesGen.DynamicParametersResponse),
 );

 socket.addEventListener("error", () => {
 onError(new Error("Connection for dynamic parameters failed."));
 socket.close();
 });

 return socket;
 };

 /**
 * @param organization Can be the organization's ID or name
 */
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
 import type {
 NullHCLString,
 PreviewParameter,
 PreviewParameterOption,
 WorkspaceBuildParameter,
 disabled,
 id,
 }) => {
 const value = parameter.value.valid ? parameter.value.value : "";
 const defaultValue = parameter.default_value.valid
 ? parameter.default_value.value
 : "";
 const value = validValue(parameter.value);
 const defaultValue = validValue(parameter.default_value);

 switch (parameter.form_type) {
 case "dropdown":
 if (parameter.ephemeral) {
 return {
 name: parameter.name,
 value: parameter.default_value.valid
 ? parameter.default_value.value
 : "",
 value: validValue(parameter.default_value),
 };
 }

 name: parameter.name,
 value:
 autofillParam &&
 isValidValue(parameter, autofillParam) &&
 isValidParameterOption(parameter, autofillParam) &&
 autofillParam.value
 ? autofillParam.value
 :"",
 :validValue(parameter.default_value),
 };
 });
 };

 const isValidValue = (
 const validValue = (value: NullHCLString) => {
 return value.valid ? value.value : "";
 };

 const isValidParameterOption = (
 previewParam: PreviewParameter,
 buildParam: WorkspaceBuildParameter,
 ) => {
 return validValues.includes(buildParam.value);
 }

 returntrue;
 returnfalse;
 };

 export const useValidationSchemaForDynamicParameters = (
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
 import type {
 DynamicParametersRequest,
 DynamicParametersResponse,
 Template,
 Workspace,
 } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
 import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental";
 export const createWorkspaceModes = ["form", "auto", "duplicate"] as const;
 export type CreateWorkspaceMode = (typeof createWorkspaceModes)[number];
 import { API } from "api/api";
 import {
 type CreateWorkspacePermissions,
 createWorkspaceChecks,

 const [currentResponse, setCurrentResponse] =
 useState<DynamicParametersResponse | null>(null);
 const [wsResponseId, setWSResponseId] = useState<number>(0);
 const sendMessage = (message: DynamicParametersRequest) => {};
 const [wsResponseId, setWSResponseId] = useState<number>(-1);
 const ws = useRef<WebSocket | null>(null);
 const [wsError, setWsError] = useState<Error | null>(null);

 const customVersionId = searchParams.get("version") ?? undefined;
 const defaultName = searchParams.get("name");
 const realizedVersionId =
 customVersionId ?? templateQuery.data?.active_version_id;

 const onMessage = useCallback((response: DynamicParametersResponse) => {
 setCurrentResponse((prev) => {
 if (prev?.id === response.id) {
 return prev;
 }
 return response;
 });
 }, []);

 // Initialize the WebSocket connection when there is a valid template version ID
 useEffect(() => {
 if (!realizedVersionId) {
 return;
 }

 const socket = API.templateVersionDynamicParameters(realizedVersionId, {
 onMessage,
 onError: (error) => {
 setWsError(error);
 },
 });

 ws.current = socket;

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

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

 const organizationId = templateQuery.data?.organization_id;

 const {
 } = useExternalAuth(realizedVersionId);

 const isLoadingFormData =
 templateQuery.isLoading || permissionsQuery.isLoading;
 ws.current?.readyState !== WebSocket.OPEN ||
 templateQuery.isLoading ||
 permissionsQuery.isLoading;
 const loadFormDataError = templateQuery.error ?? permissionsQuery.error;

 const title = autoCreateWorkspaceMutation.isLoading
 <CreateWorkspacePageViewExperimental
 mode={mode}
 defaultName={defaultName}
 diagnostics={currentResponse.diagnostics}
 diagnostics={currentResponse?.diagnostics ?? []}
 disabledParams={disabledParams}
 defaultOwner={me}
 autofillParameters={autofillParameters}
 error={
 wsError ||
 createWorkspaceMutation.error ||
 autoCreateError ||
 loadFormDataError ||
 parameters={sortedParams}
 presets={templateVersionPresetsQuery.data ?? []}
 creatingWorkspace={createWorkspaceMutation.isLoading}
 setWSResponseId={setWSResponseId}
 sendMessage={sendMessage}
 onCancel={() => {
 navigate(-1);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 owner: TypesGen.User,
 ) => void;
 resetMutation: () => void;
 sendMessage: (message: DynamicParametersRequest) => void;
 setWSResponseId: (value: React.SetStateAction<number>) => void;
 sendMessage: (message: Record<string, string>) => void;
 startPollingExternalAuth: () => void;
 }

 onCancel,
 resetMutation,
 sendMessage,
 setWSResponseId,
 startPollingExternalAuth,
 }) => {
 const [owner, setOwner] = useState(defaultOwner);
 // Update the input for the changed parameter
 formInputs[parameter.name] = value;

 setWSResponseId((prevId) => {
 const newId = prevId + 1;
 const request: DynamicParametersRequest = {
 id: newId,
 inputs: formInputs,
 };
 sendMessage(request);
 return newId;
 });
 sendMessage(formInputs);
 };

 const { debounced: handleChangeDebounced } = useDebouncedFunction(
 value: string,
 ) => {
 await form.setFieldValue(parameterField, {
 name: parameter.form_type,
 name: parameter.name,
 value,
 });
 sendDynamicParamsRequest(parameter, value);
 handleChangeDebounced(parameter, parameterField, value);
 } else {
 await form.setFieldValue(parameterField, {
 name: parameter.form_type,
 name: parameter.name,
 value,
 });
 sendDynamicParamsRequest(parameter, value);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1009,6 +1009,32 @@ class ApiMethods {
		return response.data;
		};

		templateVersionDynamicParameters = (
		versionId: string,
		{
		onMessage,
		onError,
		}: {
		onMessage: (response: TypesGen.DynamicParametersResponse) => void;
		onError: (error: Error) => void;
		},
		): WebSocket => {
		const socket = createWebSocket(
		`/api/v2/templateversions/${versionId}/dynamic-parameters`,
		);

		socket.addEventListener("message", (event) =>
		onMessage(JSON.parse(event.data) as TypesGen.DynamicParametersResponse),
		);

		socket.addEventListener("error", () => {
		onError(new Error("Connection for dynamic parameters failed."));
		socket.close();
		});

		return socket;
		};

		/**
		* @param organization Can be the organization's ID or name
		*/
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import type {
		NullHCLString,
		PreviewParameter,
		PreviewParameterOption,
		WorkspaceBuildParameter,
Expand DownExpand Up		@@ -156,10 +157,8 @@ const ParameterField: FC<ParameterFieldProps> = ({
		disabled,
		id,
		}) => {
		const value = parameter.value.valid ? parameter.value.value : "";
		const defaultValue = parameter.default_value.valid
		? parameter.default_value.value
		: "";
		const value = validValue(parameter.value);
		const defaultValue = validValue(parameter.default_value);

		switch (parameter.form_type) {
		case "dropdown":
Expand DownExpand Up		@@ -376,9 +375,7 @@ export const getInitialParameterValues = (
		if (parameter.ephemeral) {
		return {
		name: parameter.name,
		value: parameter.default_value.valid
		? parameter.default_value.value
		: "",
		value: validValue(parameter.default_value),
		};
		}

Expand All		@@ -390,15 +387,19 @@ export const getInitialParameterValues = (
		name: parameter.name,
		value:
		autofillParam &&
		isValidValue(parameter, autofillParam) &&
		isValidParameterOption(parameter, autofillParam) &&
		autofillParam.value
		? autofillParam.value
		:"",
		:validValue(parameter.default_value),
		};
		});
		};

		const isValidValue = (
		const validValue = (value: NullHCLString) => {
		return value.valid ? value.value : "";
		};

		const isValidParameterOption = (
		previewParam: PreviewParameter,
		buildParam: WorkspaceBuildParameter,
		) => {
Expand All		@@ -409,7 +410,7 @@ const isValidValue = (
		return validValues.includes(buildParam.value);
		}

		returntrue;
		returnfalse;
		};

		export const useValidationSchemaForDynamicParameters = (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,6 @@ import { autoCreateWorkspace, createWorkspace } from "api/queries/workspaces";
		import type {
		DynamicParametersRequest,
		DynamicParametersResponse,
		Template,
		Workspace,
		} from "api/typesGenerated";
		import { Loader } from "components/Loader/Loader";
Expand All		@@ -32,6 +31,7 @@ import type { AutofillBuildParameter } from "utils/richParameters";
		import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental";
		export const createWorkspaceModes = ["form", "auto", "duplicate"] as const;
		export type CreateWorkspaceMode = (typeof createWorkspaceModes)[number];
		import { API } from "api/api";
		import {
		type CreateWorkspacePermissions,
		createWorkspaceChecks,
Expand All		@@ -47,8 +47,9 @@ const CreateWorkspacePageExperimental: FC = () => {

		const [currentResponse, setCurrentResponse] =
		useState<DynamicParametersResponse \| null>(null);
		const [wsResponseId, setWSResponseId] = useState<number>(0);
		const sendMessage = (message: DynamicParametersRequest) => {};
		const [wsResponseId, setWSResponseId] = useState<number>(-1);
		const ws = useRef<WebSocket \| null>(null);
		const [wsError, setWsError] = useState<Error \| null>(null);

		const customVersionId = searchParams.get("version") ?? undefined;
		const defaultName = searchParams.get("name");
Expand DownExpand Up		@@ -80,6 +81,49 @@ const CreateWorkspacePageExperimental: FC = () => {
		const realizedVersionId =
		customVersionId ?? templateQuery.data?.active_version_id;

		const onMessage = useCallback((response: DynamicParametersResponse) => {
		setCurrentResponse((prev) => {
		if (prev?.id === response.id) {
		return prev;
		}
		return response;
		});
		}, []);

		// Initialize the WebSocket connection when there is a valid template version ID
		useEffect(() => {
		if (!realizedVersionId) {
		return;
		}

		const socket = API.templateVersionDynamicParameters(realizedVersionId, {
		onMessage,
		onError: (error) => {
		setWsError(error);
		},
		});

		ws.current = socket;

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

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

		const organizationId = templateQuery.data?.organization_id;

		const {
Expand All		@@ -90,7 +134,9 @@ const CreateWorkspacePageExperimental: FC = () => {
		} = useExternalAuth(realizedVersionId);

		const isLoadingFormData =
		templateQuery.isLoading \|\| permissionsQuery.isLoading;
		ws.current?.readyState !== WebSocket.OPEN \|\|
		templateQuery.isLoading \|\|
		permissionsQuery.isLoading;
		const loadFormDataError = templateQuery.error ?? permissionsQuery.error;

		const title = autoCreateWorkspaceMutation.isLoading
Expand DownExpand Up		@@ -189,11 +235,12 @@ const CreateWorkspacePageExperimental: FC = () => {
		<CreateWorkspacePageViewExperimental
		mode={mode}
		defaultName={defaultName}
		diagnostics={currentResponse.diagnostics}
		diagnostics={currentResponse?.diagnostics ?? []}
		disabledParams={disabledParams}
		defaultOwner={me}
		autofillParameters={autofillParameters}
		error={
		wsError \|\|
		createWorkspaceMutation.error \|\|
		autoCreateError \|\|
		loadFormDataError \|\|
Expand All		@@ -210,7 +257,6 @@ const CreateWorkspacePageExperimental: FC = () => {
		parameters={sortedParams}
		presets={templateVersionPresetsQuery.data ?? []}
		creatingWorkspace={createWorkspaceMutation.isLoading}
		setWSResponseId={setWSResponseId}
		sendMessage={sendMessage}
		onCancel={() => {
		navigate(-1);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -67,8 +67,7 @@ export interface CreateWorkspacePageViewExperimentalProps {
		owner: TypesGen.User,
		) => void;
		resetMutation: () => void;
		sendMessage: (message: DynamicParametersRequest) => void;
		setWSResponseId: (value: React.SetStateAction<number>) => void;
		sendMessage: (message: Record<string, string>) => void;
		startPollingExternalAuth: () => void;
		}

Expand All		@@ -95,7 +94,6 @@ export const CreateWorkspacePageViewExperimental: FC<
		onCancel,
		resetMutation,
		sendMessage,
		setWSResponseId,
		startPollingExternalAuth,
		}) => {
		const [owner, setOwner] = useState(defaultOwner);
Expand DownExpand Up		@@ -222,15 +220,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		// Update the input for the changed parameter
		formInputs[parameter.name] = value;

		setWSResponseId((prevId) => {
		const newId = prevId + 1;
		const request: DynamicParametersRequest = {
		id: newId,
		inputs: formInputs,
		};
		sendMessage(request);
		return newId;
		});
		sendMessage(formInputs);
		};

		const { debounced: handleChangeDebounced } = useDebouncedFunction(
Expand All		@@ -240,7 +230,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		value: string,
		) => {
		await form.setFieldValue(parameterField, {
		name: parameter.form_type,
		name: parameter.name,
		value,
		});
		sendDynamicParamsRequest(parameter, value);
Expand All		@@ -257,7 +247,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		handleChangeDebounced(parameter, parameterField, value);
		} else {
		await form.setFieldValue(parameterField, {
		name: parameter.form_type,
		name: parameter.name,
		value,
		});
		sendDynamicParamsRequest(parameter, value);
Expand Down