May 29, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
 value={value}
 onChange={onChange}
 disabled={disabled}
 isPreset={isPreset}
 />
 ) :(
 <ParameterField
 onChange:(value:string)=>void;
 disabled?:boolean;
 id:string;
 isPreset?:boolean;
 }

 constDebouncedParameterField:FC<DebouncedParameterFieldProps>=({
 onChange,
 disabled,
 id,
 isPreset,
 })=>{
 const[localValue,setLocalValue]=useState(
 value!==undefined ?value :validValue(parameter.value),

 // This is necessary in the case of fields being set by preset parameters
 useEffect(()=>{
 if(value!==undefined&&value!==prevValueRef.current){
 if(isPreset&&value!==undefined&&value!==prevValueRef.current){
 setLocalValue(value);
 prevValueRef.current=value;
 }
 },[value]);
 },[value,isPreset]);

 useEffect(()=>{
 if(prevDebouncedValueRef.current!==undefined){
 // Only call onChangeEvent if debouncedLocalValue is different from the previously committed value
 // and it's not the initial undefined state.
 if(
 prevDebouncedValueRef.current!==undefined&&
 prevDebouncedValueRef.current!==debouncedLocalValue
 ){
 onChangeEvent(debouncedLocalValue);
 }

 // Update the ref to the current debounced value for the next comparison
 prevDebouncedValueRef.current=debouncedLocalValue;
 },[debouncedLocalValue,onChangeEvent]);

 consttextareaRef=useRef<HTMLTextAreaElement>(null);

 constresizeTextarea=useEffectEvent(()=>{
 max={parameter.validations[0]?.validation_max??100}
 disabled={disabled}
 />
 <spanclassName="w-4 font-medium">{parameter.value.value}</span>
 <spanclassName="w-4 font-medium">
 {Number.isFinite(Number(value)) ?value :"0"}
 </span>
 </div>
 );
 case"error":
diff --git a/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx b/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx
 import { useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
 import { pageTitle } from "utils/page";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import {
 type WorkspacePermissions,
 workspaceChecks,
 const navigate = useNavigate();
 const experimentalFormContext = useContext(ExperimentalFormContext);

 // autofill the form with the workspace build parameters from the latest build
 const {
 data: latestBuildParameters,
 isLoading: latestBuildParametersLoading,
 } = useQuery({
 queryKey: ["workspaceBuilds", workspace.latest_build.id, "parameters"],
 queryFn: () => API.getWorkspaceBuildParameters(workspace.latest_build.id),
 });

 const [latestResponse, setLatestResponse] =
 useState<DynamicParametersResponse | null>(null);
 const wsResponseId = useRef<number>(-1);
 const ws = useRef<WebSocket | null>(null);
 const [wsError, setWsError] = useState<Error | null>(null);
 const initialParamsSentRef = useRef(false);

 const autofillParameters: AutofillBuildParameter[] =
 latestBuildParameters?.map((p) => ({
 ...p,
 source: "active_build",
 })) ?? [];

 const sendMessage = useEffectEvent((formValues: Record<string, string>) => {
 const request: DynamicParametersRequest = {
 }
 });

 // On page load, sends initial workspace build parameters to the websocket.
 // This ensures the backend has the form's complete initial state,
 // vital for rendering dynamic UI elements dependent on initial parameter values.
 const sendInitialParameters = useEffectEvent(() => {
 if (initialParamsSentRef.current) return;
 if (autofillParameters.length === 0) return;

 const initialParamsToSend: Record<string, string> = {};
 for (const param of autofillParameters) {
 if (param.name && param.value) {
 initialParamsToSend[param.name] = param.value;
 }
 }
 if (Object.keys(initialParamsToSend).length === 0) return;

 sendMessage(initialParamsToSend);
 initialParamsSentRef.current = true;
 });

 const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
 if (latestResponse && latestResponse?.id >= response.id) {
 return;
 }

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

 setLatestResponse(response);
 });

 const error = wsError || updateParameters.error;

 if (
 latestBuildParametersLoading ||
 !latestResponse ||
 (ws.current && ws.current.readyState === WebSocket.CONNECTING)
 ) {
 {sortedParams.length > 0 ? (
 <WorkspaceParametersPageViewExperimental
 workspace={workspace}
 autofillParameters={autofillParameters}
 canChangeVersions={canChangeVersions}
 parameters={sortedParams}
 diagnostics={latestResponse.diagnostics}
diff --git a/...WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/...WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
 }from"modules/workspaces/DynamicParameter/DynamicParameter";
 importtype{FC}from"react";
 import{docs}from"utils/docs";
 importtype{AutofillBuildParameter}from"utils/richParameters";

 typeWorkspaceParametersPageViewExperimentalProps={
 workspace:Workspace;
 autofillParameters:AutofillBuildParameter[];
 parameters:PreviewParameter[];
 diagnostics:PreviewParameter["diagnostics"];
 canChangeVersions:boolean;
 WorkspaceParametersPageViewExperimentalProps
 >=({
 workspace,
 autofillParameters,
 parameters,
 diagnostics,
 canChangeVersions,
 sendMessage,
 onCancel,
 })=>{
 constautofillByName=Object.fromEntries(
 autofillParameters.map((param)=>[param.name,param]),
 );
 constinitialTouched=parameters.reduce(
 (touched,parameter)=>{
 if(autofillByName[parameter.name]!==undefined){
 touched[parameter.name]=true;
 }
 returntouched;
 },
 {}asRecord<string,boolean>,
 );
 constform=useFormik({
 onSubmit,
 initialValues:{
 rich_parameter_values:getInitialParameterValues(parameters),
 rich_parameter_values:getInitialParameterValues(
 parameters,
 autofillParameters,
 ),
 },
 initialTouched,
 validationSchema:useValidationSchemaForDynamicParameters(parameters),
 enableReinitialize:false,
 validateOnChange:true,
 validateOnBlur:true,
 });

 // Group parameters by ephemeral status
 constephemeralParameters=parameters.filter((p)=>p.ephemeral);
 conststandardParameters=parameters.filter((p)=>!p.ephemeral);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -84,6 +84,7 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
		value={value}
		onChange={onChange}
		disabled={disabled}
		isPreset={isPreset}
		/>
		) :(
		<ParameterField
Expand DownExpand Up		@@ -231,6 +232,7 @@ interface DebouncedParameterFieldProps {
		onChange:(value:string)=>void;
		disabled?:boolean;
		id:string;
		isPreset?:boolean;
		}

		constDebouncedParameterField:FC<DebouncedParameterFieldProps>=({
Expand All		@@ -239,6 +241,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
		onChange,
		disabled,
		id,
		isPreset,
		})=>{
		const[localValue,setLocalValue]=useState(
		value!==undefined ?value :validValue(parameter.value),
Expand All		@@ -251,19 +254,26 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({

		// This is necessary in the case of fields being set by preset parameters
		useEffect(()=>{
		if(value!==undefined&&value!==prevValueRef.current){
		if(isPreset&&value!==undefined&&value!==prevValueRef.current){
		setLocalValue(value);
		prevValueRef.current=value;
		}
		},[value]);
		},[value,isPreset]);

		useEffect(()=>{
		if(prevDebouncedValueRef.current!==undefined){
		// Only call onChangeEvent if debouncedLocalValue is different from the previously committed value
		// and it's not the initial undefined state.
		if(
		prevDebouncedValueRef.current!==undefined&&
		prevDebouncedValueRef.current!==debouncedLocalValue
		){
		onChangeEvent(debouncedLocalValue);
		}

		// Update the ref to the current debounced value for the next comparison
		prevDebouncedValueRef.current=debouncedLocalValue;
		},[debouncedLocalValue,onChangeEvent]);

		consttextareaRef=useRef<HTMLTextAreaElement>(null);

		constresizeTextarea=useEffectEvent(()=>{
Expand DownExpand Up		@@ -513,7 +523,9 @@ const ParameterField: FC<ParameterFieldProps> = ({
		max={parameter.validations[0]?.validation_max??100}
		disabled={disabled}
		/>
		<spanclassName="w-4 font-medium">{parameter.value.value}</span>
		<spanclassName="w-4 font-medium">
		{Number.isFinite(Number(value)) ?value :"0"}
		</span>
		</div>
		);
		case"error":
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,6 +26,7 @@ import { useMutation, useQuery } from "react-query";
		import { useNavigate } from "react-router-dom";
		import { docs } from "utils/docs";
		import { pageTitle } from "utils/page";
		import type { AutofillBuildParameter } from "utils/richParameters";
		import {
		type WorkspacePermissions,
		workspaceChecks,
Expand All		@@ -39,11 +40,27 @@ const WorkspaceParametersPageExperimental: FC = () => {
		const navigate = useNavigate();
		const experimentalFormContext = useContext(ExperimentalFormContext);

		// autofill the form with the workspace build parameters from the latest build
		const {
		data: latestBuildParameters,
		isLoading: latestBuildParametersLoading,
		} = useQuery({
		queryKey: ["workspaceBuilds", workspace.latest_build.id, "parameters"],
		queryFn: () => API.getWorkspaceBuildParameters(workspace.latest_build.id),
		});

		const [latestResponse, setLatestResponse] =
		useState<DynamicParametersResponse \| null>(null);
		const wsResponseId = useRef<number>(-1);
		const ws = useRef<WebSocket \| null>(null);
		const [wsError, setWsError] = useState<Error \| null>(null);
		const initialParamsSentRef = useRef(false);

		const autofillParameters: AutofillBuildParameter[] =
		latestBuildParameters?.map((p) => ({
		...p,
		source: "active_build",
		})) ?? [];

		const sendMessage = useEffectEvent((formValues: Record<string, string>) => {
		const request: DynamicParametersRequest = {
Expand All		@@ -57,11 +74,34 @@ const WorkspaceParametersPageExperimental: FC = () => {
		}
		});

		// On page load, sends initial workspace build parameters to the websocket.
		// This ensures the backend has the form's complete initial state,
		// vital for rendering dynamic UI elements dependent on initial parameter values.
		const sendInitialParameters = useEffectEvent(() => {
		if (initialParamsSentRef.current) return;
		if (autofillParameters.length === 0) return;

		const initialParamsToSend: Record<string, string> = {};
		for (const param of autofillParameters) {
		if (param.name && param.value) {
		initialParamsToSend[param.name] = param.value;
		}
		}
		if (Object.keys(initialParamsToSend).length === 0) return;

		sendMessage(initialParamsToSend);
		initialParamsSentRef.current = true;
		});

		const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
		if (latestResponse && latestResponse?.id >= response.id) {
		return;
		}

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

		setLatestResponse(response);
		});

Expand DownExpand Up		@@ -149,6 +189,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
		const error = wsError \|\| updateParameters.error;

		if (
		latestBuildParametersLoading \|\|
		!latestResponse \|\|
		(ws.current && ws.current.readyState === WebSocket.CONNECTING)
		) {
Expand DownExpand Up		@@ -202,6 +243,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
		{sortedParams.length > 0 ? (
		<WorkspaceParametersPageViewExperimental
		workspace={workspace}
		autofillParameters={autofillParameters}
		canChangeVersions={canChangeVersions}
		parameters={sortedParams}
		diagnostics={latestResponse.diagnostics}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,9 +16,11 @@ import {
		}from"modules/workspaces/DynamicParameter/DynamicParameter";
		importtype{FC}from"react";
		import{docs}from"utils/docs";
		importtype{AutofillBuildParameter}from"utils/richParameters";

		typeWorkspaceParametersPageViewExperimentalProps={
		workspace:Workspace;
		autofillParameters:AutofillBuildParameter[];
		parameters:PreviewParameter[];
		diagnostics:PreviewParameter["diagnostics"];
		canChangeVersions:boolean;
Expand All		@@ -34,6 +36,7 @@ export const WorkspaceParametersPageViewExperimental: FC<
		WorkspaceParametersPageViewExperimentalProps
		>=({
		workspace,
		autofillParameters,
		parameters,
		diagnostics,
		canChangeVersions,
Expand All		@@ -42,17 +45,32 @@ export const WorkspaceParametersPageViewExperimental: FC<
		sendMessage,
		onCancel,
		})=>{
		constautofillByName=Object.fromEntries(
		autofillParameters.map((param)=>[param.name,param]),
		);
		constinitialTouched=parameters.reduce(
		(touched,parameter)=>{
		if(autofillByName[parameter.name]!==undefined){
		touched[parameter.name]=true;
		}
		returntouched;
		},
		{}asRecord<string,boolean>,
		);
		constform=useFormik({
		onSubmit,
		initialValues:{
		rich_parameter_values:getInitialParameterValues(parameters),
		rich_parameter_values:getInitialParameterValues(
		parameters,
		autofillParameters,
		),
		},
		initialTouched,
		validationSchema:useValidationSchemaForDynamicParameters(parameters),
		enableReinitialize:false,
		validateOnChange:true,
		validateOnBlur:true,
		});

		// Group parameters by ephemeral status
		constephemeralParameters=parameters.filter((p)=>p.ephemeral);
		conststandardParameters=parameters.filter((p)=>!p.ephemeral);
Expand Down