From 4d7d172e37a72047fcba97c2adb5aa6452637fd7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 29 Apr 2025 22:35:28 +0000
Subject: [PATCH 1/7] fix: update default value handling for dynamic defaults

---
 .../DynamicParameter/DynamicParameter.tsx     | 48 +++++++++++--------
 .../CreateWorkspacePageViewExperimental.tsx   |  7 +--
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index d023bbcf4446b..a191d3b3dd7db 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -32,7 +32,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { Info, Settings, TriangleAlert } from "lucide-react";
-import { type FC, useId } from "react";
+import { type FC, useId, useState, useEffect } from "react";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
 
@@ -164,14 +164,18 @@ const ParameterField: FC<ParameterFieldProps> = ({
 	id,
 }) => {
 	const value = validValue(parameter.value);
-	const defaultValue = validValue(parameter.default_value);
+	const [localValue, setLocalValue] = useState(value);
+
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
 
 	switch (parameter.form_type) {
 		case "dropdown":
 			return (
 				<Select
 					onValueChange={onChange}
-					defaultValue={defaultValue}
+					value={value}
 					disabled={disabled}
 					required={parameter.required}
 				>
@@ -195,13 +199,13 @@ const ParameterField: FC<ParameterFieldProps> = ({
 
 		case "multi-select": {
 			// Map parameter options to MultiSelectCombobox options format
-			const comboboxOptions: Option[] = parameter.options.map((opt) => ({
+			const options: Option[] = parameter.options.map((opt) => ({
 				value: opt.value.value,
 				label: opt.name,
 				disable: false,
 			}));
 
-			const defaultOptions: Option[] = JSON.parse(defaultValue).map(
+			const selectedOptions: Option[] = JSON.parse(value).map(
 				(val: string) => {
 					const option = parameter.options.find((o) => o.value.value === val);
 					return {
@@ -217,8 +221,8 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					inputProps={{
 						id: `${id}-${parameter.name}`,
 					}}
-					options={comboboxOptions}
-					defaultOptions={defaultOptions}
+					options={options}
+					defaultOptions={selectedOptions}
 					onChange={(newValues) => {
 						const values = newValues.map((option) => option.value);
 						onChange(JSON.stringify(values));
@@ -254,7 +258,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				<RadioGroup
 					onValueChange={onChange}
 					disabled={disabled}
-					defaultValue={defaultValue}
+					value={value}
 				>
 					{parameter.options.map((option) => (
 						<div
@@ -282,7 +286,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					<Checkbox
 						id={parameter.name}
 						checked={value === "true"}
-						defaultChecked={defaultValue === "true"} // TODO: defaultChecked is always overridden by checked
 						onCheckedChange={(checked) => {
 							onChange(checked ? "true" : "false");
 						}}
@@ -299,14 +302,11 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				<div className="flex flex-row items-baseline gap-3">
 					<Slider
 						className="mt-2"
-						defaultValue={[
-							Number(
-								parameter.default_value.valid
-									? parameter.default_value.value
-									: 0,
-							),
-						]}
-						onValueChange={([value]) => onChange(value.toString())}
+						value={[Number(localValue ?? 0)]}
+						onValueChange={([value]) => {
+							setLocalValue(value.toString());
+							onChange(value.toString());
+						}}
 						min={parameter.validations[0]?.validation_min ?? 0}
 						max={parameter.validations[0]?.validation_max ?? 100}
 						disabled={disabled}
@@ -319,8 +319,11 @@ const ParameterField: FC<ParameterFieldProps> = ({
 			return (
 				<Textarea
 					className="max-w-2xl"
-					defaultValue={defaultValue}
-					onChange={(e) => onChange(e.target.value)}
+					value={localValue}
+					onChange={(e) => {
+						setLocalValue(e.target.value);
+						onChange(e.target.value);
+					}}
 					onInput={(e) => {
 						const target = e.currentTarget;
 						target.style.maxHeight = "700px";
@@ -354,8 +357,11 @@ const ParameterField: FC<ParameterFieldProps> = ({
 			return (
 				<Input
 					type={inputType}
-					defaultValue={defaultValue}
-					onChange={(e) => onChange(e.target.value)}
+					value={localValue}
+					onChange={(e) => {
+						setLocalValue(e.target.value);
+						onChange(e.target.value);
+					}}
 					disabled={disabled}
 					required={parameter.required}
 					placeholder={
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 1a07596854f8d..c101e3eda5006 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -217,12 +217,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 		parameter: PreviewParameter,
 		value: string,
 	) => {
-		const formInputs = Object.fromEntries(
-			form.values.rich_parameter_values?.map((value) => {
-				return [value.name, value.value];
-			}) ?? [],
-		);
-		// Update the input for the changed parameter
+		const formInputs: {[k:string]:string} = {};
 		formInputs[parameter.name] = value;
 
 		sendMessage(formInputs);

From e95f0106f92c1e78bd10e994fdc13d69baf51b59 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 29 Apr 2025 22:40:38 +0000
Subject: [PATCH 2/7] fix: format

---
 .../DynamicParameter/DynamicParameter.tsx     | 26 +++++++------------
 .../CreateWorkspacePageViewExperimental.tsx   |  2 +-
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index a191d3b3dd7db..375a7d4a08dd8 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -32,7 +32,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { Info, Settings, TriangleAlert } from "lucide-react";
-import { type FC, useId, useState, useEffect } from "react";
+import { type FC, useEffect, useId, useState } from "react";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
 
@@ -205,16 +205,14 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				disable: false,
 			}));
 
-			const selectedOptions: Option[] = JSON.parse(value).map(
-				(val: string) => {
-					const option = parameter.options.find((o) => o.value.value === val);
-					return {
-						value: val,
-						label: option?.name || val,
-						disable: false,
-					};
-				},
-			);
+			const selectedOptions: Option[] = JSON.parse(value).map((val: string) => {
+				const option = parameter.options.find((o) => o.value.value === val);
+				return {
+					value: val,
+					label: option?.name || val,
+					disable: false,
+				};
+			});
 
 			return (
 				<MultiSelectCombobox
@@ -255,11 +253,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 
 		case "radio":
 			return (
-				<RadioGroup
-					onValueChange={onChange}
-					disabled={disabled}
-					value={value}
-				>
+				<RadioGroup onValueChange={onChange} disabled={disabled} value={value}>
 					{parameter.options.map((option) => (
 						<div
 							key={option.value.value}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index c101e3eda5006..4c34cf5afa319 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -217,7 +217,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 		parameter: PreviewParameter,
 		value: string,
 	) => {
-		const formInputs: {[k:string]:string} = {};
+		const formInputs: { [k: string]: string } = {};
 		formInputs[parameter.name] = value;
 
 		sendMessage(formInputs);

From ec14f9d9233629968fe1c731be7388178466097f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 30 Apr 2025 21:37:17 +0000
Subject: [PATCH 3/7] fix: always use value instead of default_value

---
 .../modules/workspaces/DynamicParameter/DynamicParameter.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 375a7d4a08dd8..027560b1b9ed9 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -435,7 +435,7 @@ export const getInitialParameterValues = (
 		if (parameter.ephemeral) {
 			return {
 				name: parameter.name,
-				value: validValue(parameter.default_value),
+				value: validValue(parameter.value),
 			};
 		}
 
@@ -450,7 +450,7 @@ export const getInitialParameterValues = (
 				isValidParameterOption(parameter, autofillParam) &&
 				autofillParam.value
 					? autofillParam.value
-					: validValue(parameter.default_value),
+					: validValue(parameter.value),
 		};
 	});
 };

From b93d804c779f5dffd012340503cde3991ceb5ad0 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 30 Apr 2025 21:37:42 +0000
Subject: [PATCH 4/7] fix: send the last user modified param and all touched
 params to the server

---
 .../CreateWorkspacePageViewExperimental.tsx         | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 4c34cf5afa319..f313d5d896852 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -213,12 +213,23 @@ export const CreateWorkspacePageViewExperimental: FC<
 		parameters,
 	]);
 
+	// send the last user modified parameter and all touched parameters to the websocket
 	const sendDynamicParamsRequest = (
 		parameter: PreviewParameter,
 		value: string,
 	) => {
 		const formInputs: { [k: string]: string } = {};
 		formInputs[parameter.name] = value;
+		const parameters = form.values.rich_parameter_values ?? [];
+
+		for (const [fieldName, isTouched] of Object.entries(form.touched)) {
+			if (isTouched && fieldName !== parameter.name) {
+				const param = parameters.find(p => p.name === fieldName);
+				if (param?.value) {
+					formInputs[fieldName] = param.value;
+				}
+			}
+		}
 
 		sendMessage(formInputs);
 	};
@@ -233,6 +244,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 				name: parameter.name,
 				value,
 			});
+			form.setFieldTouched(parameter.name, true);
 			sendDynamicParamsRequest(parameter, value);
 		},
 		500,
@@ -250,6 +262,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 				name: parameter.name,
 				value,
 			});
+			form.setFieldTouched(parameter.name, true);
 			sendDynamicParamsRequest(parameter, value);
 		}
 	};

From a94f0937baf64661d682aa389895e7dec1471c94 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 30 Apr 2025 21:55:01 +0000
Subject: [PATCH 5/7] fix: format

---
 .../CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index f313d5d896852..e41c7d4f89d7c 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -224,7 +224,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 		for (const [fieldName, isTouched] of Object.entries(form.touched)) {
 			if (isTouched && fieldName !== parameter.name) {
-				const param = parameters.find(p => p.name === fieldName);
+				const param = parameters.find((p) => p.name === fieldName);
 				if (param?.value) {
 					formInputs[fieldName] = param.value;
 				}

From f61fd0aa8b91a5b0fda250062b6342b9df7f9514 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 2 May 2025 17:12:46 +0000
Subject: [PATCH 6/7] fix: code improvements

---
 .../DynamicParameter/DynamicParameter.tsx     | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 027560b1b9ed9..3b50135074bc7 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -198,6 +198,19 @@ const ParameterField: FC<ParameterFieldProps> = ({
 			);
 
 		case "multi-select": {
+			let values: string[] = [];
+
+			if (value) {
+				try {
+					const parsed = JSON.parse(value);
+					if (Array.isArray(parsed)) {
+						values = parsed;
+					}
+				} catch (e) {
+					console.error("Error parsing parameter value with form_type multi-select", e);
+				}
+			}
+
 			// Map parameter options to MultiSelectCombobox options format
 			const options: Option[] = parameter.options.map((opt) => ({
 				value: opt.value.value,
@@ -205,11 +218,14 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				disable: false,
 			}));
 
-			const selectedOptions: Option[] = JSON.parse(value).map((val: string) => {
-				const option = parameter.options.find((o) => o.value.value === val);
+			const optionMap = new Map(
+				parameter.options.map(opt => [opt.value.value, opt.name])
+			);
+
+			const selectedOptions: Option[] = values.map((val) => {
 				return {
 					value: val,
-					label: option?.name || val,
+					label: optionMap.get(val) || val,
 					disable: false,
 				};
 			});

From 5e547aaad0da98d573ba9d27fa56decc045af84c Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 2 May 2025 17:25:44 +0000
Subject: [PATCH 7/7] fix: format

---
 .../workspaces/DynamicParameter/DynamicParameter.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 3b50135074bc7..9ec69158c4e84 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -207,7 +207,10 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						values = parsed;
 					}
 				} catch (e) {
-					console.error("Error parsing parameter value with form_type multi-select", e);
+					console.error(
+						"Error parsing parameter value with form_type multi-select",
+						e,
+					);
 				}
 			}
 
@@ -219,7 +222,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 			}));
 
 			const optionMap = new Map(
-				parameter.options.map(opt => [opt.value.value, opt.name])
+				parameter.options.map((opt) => [opt.value.value, opt.name]),
 			);
 
 			const selectedOptions: Option[] = values.map((val) => {