Jul 30, 2025 · Jul 30, 2025 · Jul 31, 2025 · Aug 4, 2025
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
 import { Button } from "components/Button/Button";
 import { Combobox } from "components/Combobox/Combobox";
 import { Input } from "components/Input/Input";
 import { Label } from "components/Label/Label";
 import { Link } from "components/Link/Link";
 import {
 Select,
 SelectContent,
 SelectItem,
 SelectTrigger,
 SelectValue,
 } from "components/Select/Select";
 import { Spinner } from "components/Spinner/Spinner";
 import { Switch } from "components/Switch/Switch";
 import {
 }, [form.submitCount, form.errors]);

 const [presetOptions, setPresetOptions] = useState([
 {label: "None", value: "None" },
 {displayName: "None", value: "undefined", icon: "", description: "" },
 ]);
 const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);
 // Build options and keep default label/value in sync
 useEffect(() => {
 setPresetOptions([
 {label: "None", value: "None" },
 const options =[
 {displayName: "None", value: "undefined", icon: "", description: "" },
 ...presets.map((preset) => ({
 label: preset.Default ? `${preset.Name} (Default)` : preset.Name,
 displayName: preset.Default ? `${preset.Name} (Default)` : preset.Name,
 value: preset.ID,
 icon: preset.Icon,
 description: preset.Description,
 })),
 ]);
 }, [presets]);

 const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);

 // Set default preset when presets are loaded
 useEffect(() => {
 const defaultPreset = presets.find((preset) => preset.Default);
 ];
 setPresetOptions(options);
 const defaultPreset = presets.find((p) => p.Default);
 if (defaultPreset) {
 // +1 because "None" is at index 0
 const defaultIndex =
 presets.findIndex((preset) => preset.ID === defaultPreset.ID) + 1;
 setSelectedPresetIndex(defaultIndex);
 const idx = presets.indexOf(defaultPreset) + 1; // +1 for "None"
 setSelectedPresetIndex(idx);
 form.setFieldValue("template_version_preset_id", defaultPreset.ID);
 } else {
 setSelectedPresetIndex(0); // Explicitly set to "None"
 form.setFieldValue("template_version_preset_id", undefined);
 }
 }, [presets]);
 }, [presets, form.setFieldValue]);

 const [presetParameterNames, setPresetParameterNames] = useState<string[]>(
 [],
 </div>
 <div className="flex flex-col gap-4">
 <div className="max-w-lg">
 <Select
 value={presetOptions[selectedPresetIndex]?.value}
 onValueChange={(option) => {
 <Combobox
 value={
 presetOptions[selectedPresetIndex]?.displayName || ""
 }
 options={presetOptions}
 placeholder="Select a preset"
 onSelect={(value) => {
 const index = presetOptions.findIndex(
 (preset) => preset.value ===option,
 (preset) => preset.value ===value,
 );
 if (index === -1) {
 return;
 }
 setSelectedPresetIndex(index);
 form.setFieldValue(
 "template_version_preset_id",
 index === 0 ? undefined : option,
 // "undefined" string is equivalent to using None option
 // Combobox requires a value in order to correctly highlight the None option
 presetOptions[index].value === "undefined"
 ? undefined
 : presetOptions[index].value,
 );
 }}
 >
 <SelectTrigger>
 <SelectValue placeholder={"Select a preset"} />
 </SelectTrigger>
 <SelectContent>
 {presetOptions.map((option) => (
 <SelectItem key={option.value} value={option.value}>
 {option.label}
 </SelectItem>
 ))}
 </SelectContent>
 </Select>
 />
 </div>
 {/* Only show the preset parameter visibility toggle if preset parameters are actually being modified, otherwise it is ineffectual */}
 {presetParameterNames.length > 0 && (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,16 +5,10 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { Avatar } from "components/Avatar/Avatar";
		import { Badge } from "components/Badge/Badge";
		import { Button } from "components/Button/Button";
		import { Combobox } from "components/Combobox/Combobox";
		import { Input } from "components/Input/Input";
		import { Label } from "components/Label/Label";
		import { Link } from "components/Link/Link";
		import {
		Select,
		SelectContent,
		SelectItem,
		SelectTrigger,
		SelectValue,
		} from "components/Select/Select";
		import { Spinner } from "components/Spinner/Spinner";
		import { Switch } from "components/Switch/Switch";
		import {
Expand DownExpand Up		@@ -186,30 +180,31 @@ export const CreateWorkspacePageViewExperimental: FC<
		}, [form.submitCount, form.errors]);

		const [presetOptions, setPresetOptions] = useState([
		{label: "None", value: "None" },
		{displayName: "None", value: "undefined", icon: "", description: "" },
		]);
		const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);
		// Build options and keep default label/value in sync
		useEffect(() => {
		setPresetOptions([
		{label: "None", value: "None" },
		const options =[
		{displayName: "None", value: "undefined", icon: "", description: "" },
		...presets.map((preset) => ({
		label: preset.Default ? `${preset.Name} (Default)` : preset.Name,
		displayName: preset.Default ? `${preset.Name} (Default)` : preset.Name,
		value: preset.ID,
		icon: preset.Icon,
		description: preset.Description,
		})),
		]);
		}, [presets]);

		const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);

		// Set default preset when presets are loaded
		useEffect(() => {
		const defaultPreset = presets.find((preset) => preset.Default);
		];
		setPresetOptions(options);
		const defaultPreset = presets.find((p) => p.Default);
		if (defaultPreset) {
		// +1 because "None" is at index 0
		const defaultIndex =
		presets.findIndex((preset) => preset.ID === defaultPreset.ID) + 1;
		setSelectedPresetIndex(defaultIndex);
		const idx = presets.indexOf(defaultPreset) + 1; // +1 for "None"
		setSelectedPresetIndex(idx);
		form.setFieldValue("template_version_preset_id", defaultPreset.ID);
		} else {
		setSelectedPresetIndex(0); // Explicitly set to "None"
		form.setFieldValue("template_version_preset_id", undefined);
		}
		}, [presets]);
		}, [presets, form.setFieldValue]);

		const [presetParameterNames, setPresetParameterNames] = useState<string[]>(
		[],
Expand DownExpand Up		@@ -572,33 +567,30 @@ export const CreateWorkspacePageViewExperimental: FC<
		</div>
		<div className="flex flex-col gap-4">
		<div className="max-w-lg">
		<Select
		value={presetOptions[selectedPresetIndex]?.value}
		onValueChange={(option) => {
		<Combobox
		value={
		presetOptions[selectedPresetIndex]?.displayName \|\| ""
		}
		options={presetOptions}
		placeholder="Select a preset"
		onSelect={(value) => {
		const index = presetOptions.findIndex(
		(preset) => preset.value ===option,
		(preset) => preset.value ===value,
		);
		if (index === -1) {
		return;
		}
		setSelectedPresetIndex(index);
		form.setFieldValue(
		"template_version_preset_id",
		index === 0 ? undefined : option,
		// "undefined" string is equivalent to using None option
		// Combobox requires a value in order to correctly highlight the None option
		presetOptions[index].value === "undefined"
		? undefined
		: presetOptions[index].value,
Comment on lines +586 to +590 Copy link Member aslilacJul 31, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. sorry to keep bringing up merged pull requests, but couldn't`value` just be`""`? then it wouldn't need this special handling, as`undefined` gets deserialized the same as`""` by the backend Copy link ContributorAuthor ssncferreiraAug 4, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. @aslilac Ideally, yes, it should be an empty string. However, this appears to be an issue with the`Combobox` component: when no value is provided, the "None" option doesn't get highlighted on hover like the other options do. This was a workaround to ensure consistent hover behavior, including for the "None" option. @jaaydenh helped me investigate this and came up with the workaround, so he may have more context. I've included a recording below showing the difference: When value is "": "None" is not highlighted on hover Screen.Recording.2025-08-04.at.16.09.20.mov When value is set: "None" is highlighted on hover Screen.Recording.2025-08-04.at.16.10.17.mov
		);
		}}
		>
		<SelectTrigger>
		<SelectValue placeholder={"Select a preset"} />
		</SelectTrigger>
		<SelectContent>
		{presetOptions.map((option) => (
		<SelectItem key={option.value} value={option.value}>
		{option.label}
		</SelectItem>
		))}
		</SelectContent>
		</Select>
		/>
		</div>
		{/* Only show the preset parameter visibility toggle if preset parameters are actually being modified, otherwise it is ineffectual */}
		{presetParameterNames.length > 0 && (
Expand Down