fix: preserve parameter values when dynamic ordering changes (#18270)

blink-so[bot] · jaaydenh · web-flow · commit cb9c483445e8 · 2025-06-09T16:42:40.000-04:00
## Problem

When creating a workspace from a template with dynamic parameter
ordering, parameter values are not displaying correctly when the order
changes. This occurs when a parameter's `order` value depends on another
parameter's value.

**Example scenario:**
```terraform
data "coder_parameter" "reorder" {
  name = "reorder"
  type = "bool"
  default = false
  order = 1
}

data "coder_parameter" "cpu" {
  order = data.coder_parameter.reorder.value ? 0 : 2
  name = "cpu"
  type = "number"
  default = 4
}
```

When the user toggles `reorder` from `false` to `true`, the `cpu`
parameter moves from position 2 to position 0, but its value gets mixed
up with the `reorder` parameter's value.

## Root Cause

The issue was in `CreateWorkspacePageViewExperimental.tsx` where
parameters were rendered using array indices instead of parameter names:

```typescript
// Problematic code
const parameterField = `rich_parameter_values.${index}`;
const formValue = form.values?.rich_parameter_values?.[index]?.value || "";
```

When parameters are reordered:
1. The `parameters` array order changes based on the new `order` values
2. The `form.values.rich_parameter_values` array maintains the original
order
3. Array index-based lookup causes values to be mismatched

## Solution

Implemented name-based lookup to ensure parameter values stay with their
correct parameters:

```typescript
// Find parameter value by name instead of index
const currentParameterValueIndex = form.values.rich_parameter_values?.findIndex(
  (p) =&gt; p.name === parameter.name
) ?? -1;

// Use the found index for form field mapping
const parameterFieldIndex = currentParameterValueIndex !== -1 ? currentParameterValueIndex : index;
const parameterField = `rich_parameter_values.${parameterFieldIndex}`;

// Get form value by name to ensure correct mapping
const formValue = currentParameterValueIndex !== -1 
  ? form.values?.rich_parameter_values?.[currentParameterValueIndex]?.value || ""
  : "";
```

## Testing

- ✅ Created test script that validates the fix works correctly
- ✅ Tested with the provided template showing dynamic parameter ordering
- ✅ Verified parameter values persist correctly during reordering
- ✅ Confirmed no TypeScript compilation issues

## Impact

This fix ensures that users can reliably use dynamic parameter ordering
in their templates without losing parameter values when the order
changes. This is particularly important for templates that use
conditional parameter visibility and ordering based on user selections.

---------

Co-authored-by: blink-so[bot] &lt;211532188+blink-so[bot]@users.noreply.github.com&gt;
Co-authored-by: Jaayden Halko &lt;jaayden@coder.com&gt;
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -608,7 +608,15 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 							<div className="flex flex-col gap-9">
 								{parameters.map((parameter, index) => {
-									const parameterField = `rich_parameter_values.${index}`;
+									const currentParameterValueIndex =
+										form.values.rich_parameter_values?.findIndex(
+											(p) => p.name === parameter.name,
+										) ?? -1;
+									const parameterFieldIndex =
+										currentParameterValueIndex !== -1
+											? currentParameterValueIndex
+											: index;
+									const parameterField = `rich_parameter_values.${parameterFieldIndex}`;
 									const isPresetParameter = presetParameterNames.includes(
 										parameter.name,
 									);
@@ -629,8 +637,13 @@ export const CreateWorkspacePageViewExperimental: FC<
 										return null;
 									}
 
+									// Get the form value by parameter name to ensure correct value mapping
 									const formValue =
-										form.values?.rich_parameter_values?.[index]?.value || "";
+										currentParameterValueIndex !== -1
+											? form.values?.rich_parameter_values?.[
+													currentParameterValueIndex
+												]?.value || ""
+											: "";
 
 									return (
 										<DynamicParameter
