fix: show error message for incompatible parameters (#18365)

jaaydenh · web-flow · commit dc5f69ebfe50 · 2025-06-13T14:52:29.000-04:00
resolves coder/preview#148 If there are any immutable params with diagnostics on the workspace parameters page, display this error dialog. <img width="838" alt="Screenshot 2025-06-13 at 18 06 36" src="https://github.com/user-attachments/assets/47a9ad04-7969-4567-a5fc-39301c5f830c" />
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -596,11 +596,18 @@ export const CreateWorkspacePageViewExperimental: FC<
 									const currentParameterValueIndex =
 										form.values.rich_parameter_values?.findIndex(
 											(p) => p.name === parameter.name,
-										) ?? -1;
+										);
 									const parameterFieldIndex =
-										currentParameterValueIndex !== -1
+										currentParameterValueIndex !== undefined
 											? currentParameterValueIndex
 											: index;
+									// Get the form value by parameter name to ensure correct value mapping
+									const formValue =
+										currentParameterValueIndex !== undefined
+											? form.values?.rich_parameter_values?.[
+													currentParameterValueIndex
+												]?.value || ""
+											: "";
 									const parameterField = `rich_parameter_values.${parameterFieldIndex}`;
 									const isPresetParameter = presetParameterNames.includes(
 										parameter.name,
@@ -622,14 +629,6 @@ export const CreateWorkspacePageViewExperimental: FC<
 										return null;
 									}
 
-									// Get the form value by parameter name to ensure correct value mapping
-									const formValue =
-										currentParameterValueIndex !== -1
-											? form.values?.rich_parameter_values?.[
-													currentParameterValueIndex
-												]?.value || ""
-											: "";
-
 									return (
 										<DynamicParameter
 											key={parameter.name}
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageViewExperimental.tsx
@@ -123,6 +123,13 @@ export const WorkspaceParametersPageViewExperimental: FC<
 		setFieldValue: form.setFieldValue,
 	});
 
+	const hasIncompatibleParameters = parameters.some((parameter) => {
+		if (!parameter.mutable && parameter.diagnostics.length > 0) {
+			return true;
+		}
+		return false;
+	});
+
 	return (
 		<>
 			{disabled && (
@@ -132,6 +139,38 @@ export const WorkspaceParametersPageViewExperimental: FC<
 				</Alert>
 			)}
 
+			{hasIncompatibleParameters && (
+				<Alert severity="error">
+					<p className="text-lg leading-tight font-bold m-0">
+						Workspace update blocked
+					</p>
+					<p className="mb-0">
+						The new template version includes parameter changes that are
+						incompatible with this workspace's existing parameter values. This
+						may be caused by:
+					</p>
+					<ul className="mb-0 pl-4 space-y-1">
+						<li>
+							New <strong>required</strong> parameters that cannot be provided
+							after workspace creation
+						</li>
+						<li>
+							Changes to <strong>valid options or validations</strong> for
+							existing parameters
+						</li>
+						<li>Logic changes that conflict with previously selected values</li>
+					</ul>
+					<p className="mb-0">
+						Please contact the <strong>template administrator</strong> to review
+						the changes and ensure compatibility for existing workspaces.
+					</p>
+					<p className="mb-0">
+						Consider supplying defaults for new parameters or validating
+						conditional logic against prior workspace states.
+					</p>
+				</Alert>
+			)}
+
 			{diagnostics && diagnostics.length > 0 && (
 				<div className="flex flex-col gap-4 mb-8">
 					{diagnostics.map((diagnostic, index) => (
@@ -182,7 +221,23 @@ export const WorkspaceParametersPageViewExperimental: FC<
 							</p>
 						</hgroup>
 						{standardParameters.map((parameter, index) => {
-							const parameterField = `rich_parameter_values.${index}`;
+							const currentParameterValueIndex =
+								form.values.rich_parameter_values?.findIndex(
+									(p) => p.name === parameter.name,
+								);
+							const parameterFieldIndex =
+								currentParameterValueIndex !== undefined
+									? currentParameterValueIndex
+									: index;
+							// Get the form value by parameter name to ensure correct value mapping
+							const formValue =
+								currentParameterValueIndex !== undefined
+									? form.values?.rich_parameter_values?.[
+											currentParameterValueIndex
+										]?.value || ""
+									: "";
+
+							const parameterField = `rich_parameter_values.${parameterFieldIndex}`;
 							const isDisabled =
 								disabled ||
 								parameter.styling?.disabled ||
@@ -198,9 +253,7 @@ export const WorkspaceParametersPageViewExperimental: FC<
 									}
 									autofill={false}
 									disabled={isDisabled}
-									value={
-										form.values?.rich_parameter_values?.[index]?.value || ""
-									}
+									value={formValue}
 								/>
 							);
 						})}
