Skip to content

chore(site): add preset combobox to dynamic parameters page #19100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 30, 2025
Merged

chore(site): add preset combobox to dynamic parameters page #19100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 33 additions & 41 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
View file
Open in desktop
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 Down Expand 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 Down Expand 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

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

);
}}
>
<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
Loading