Skip to content

Commit f6ecc40

Browse files
johnstcnjohnstcn
committed
correctly handle selecting default preset on presetData change
1 parent 1aaaf00 commit f6ecc40

File tree

1 file changed

+57
-31
lines changed

1 file changed

+57
-31
lines changed

‎site/src/pages/TasksPage/TasksPage.tsx

Lines changed: 57 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -231,18 +231,11 @@ const TaskForm: FC<TaskFormProps> = ({ templates, onSuccess }) => {
231231
const [selectedTemplateId, setSelectedTemplateId] = useState<string>(
232232
templates[0].id,
233233
);
234-
const [presets, setPresets] = useState<Preset[] | null>(null);
235234
const [selectedPresetId, setSelectedPresetId] = useState<string | null>(null);
236235
const selectedTemplate = templates.find(
237236
(t) => t.id === selectedTemplateId,
238237
) as Template;
239238

240-
// Extract AI prompt from selected preset
241-
const selectedPreset = presets?.find((p) => p.ID === selectedPresetId);
242-
const presetAIPrompt = selectedPreset?.Parameters?.find(
243-
(param) => param.Name === AI_PROMPT_PARAMETER_NAME,
244-
)?.Value;
245-
const isPromptReadOnly = !!presetAIPrompt;
246239
const {
247240
externalAuth,
248241
externalAuthError,
@@ -251,24 +244,41 @@ const TaskForm: FC<TaskFormProps> = ({ templates, onSuccess }) => {
251244
} = useExternalAuth(selectedTemplate.active_version_id);
252245

253246
// Fetch presets when template changes
254-
const { data: presetsData } = useQuery<Preset[] | null, Error>({
247+
const { data: presetsData, isLoading: isLoadingPresets } = useQuery<
248+
Preset[] | null,
249+
Error
250+
>({
255251
queryKey: ["template-version-presets", selectedTemplate.active_version_id],
256252
queryFn: () =>
257253
API.getTemplateVersionPresets(selectedTemplate.active_version_id),
258254
...disabledRefetchOptions,
259255
});
260256

261-
// Handle preset data changes
257+
// Handle preset selection when data changes
262258
useEffect(() => {
263-
if (!presetsData) {
264-
setPresets(null);
259+
if (presetsData === undefined) {
260+
// Still loading
261+
return;
262+
}
263+
264+
if (!presetsData || presetsData.length === 0) {
265+
setSelectedPresetId(null);
265266
return;
266267
}
267-
setPresets(presetsData);
268+
269+
// Always select the default preset when new data arrives
268270
const defaultPreset = presetsData.find((p: Preset) => p.Default);
269271
const defaultPresetID = defaultPreset?.ID || null;
270272
setSelectedPresetId(defaultPresetID);
271273
}, [presetsData]);
274+
275+
// Extract AI prompt from selected preset
276+
const selectedPreset = presetsData?.find((p) => p.ID === selectedPresetId);
277+
const presetAIPrompt = selectedPreset?.Parameters?.find(
278+
(param) => param.Name === AI_PROMPT_PARAMETER_NAME,
279+
)?.Value;
280+
const isPromptReadOnly = !!presetAIPrompt;
281+
272282
const missedExternalAuth = externalAuth?.filter(
273283
(auth) => !auth.optional && !auth.authenticated,
274284
);
@@ -373,39 +383,55 @@ const TaskForm: FC<TaskFormProps> = ({ templates, onSuccess }) => {
373383
</Select>
374384
</div>
375385

376-
{presets && presets.length > 0 && (
377-
<div className="flex flex-col gap-1">
378-
<label
379-
htmlFor="presetID"
380-
className="text-xs font-medium text-content-primary"
381-
>
382-
Preset
383-
</label>
386+
<div className="flex flex-col gap-1">
387+
<label
388+
htmlFor="presetID"
389+
className="text-xs font-medium text-content-primary"
390+
>
391+
Preset
392+
</label>
393+
{isLoadingPresets ? (
394+
<Skeleton variant="rounded" width={320} height={32} />
395+
) : (
384396
<Select
397+
key={`preset-select-${selectedTemplate.active_version_id}`}
385398
name="presetID"
386-
value={
387-
selectedPresetId === null ? undefined : selectedPresetId
388-
}
389-
onValueChange={(value) => setSelectedPresetId(value)}
399+
value={selectedPresetId || undefined}
400+
onValueChange={(value) => setSelectedPresetId(value || null)}
401+
disabled={!presetsData || presetsData.length === 0}
390402
>
391403
<SelectTrigger
392404
id="presetID"
393405
className="w-80 text-xs [&_svg]:size-icon-xs border-0 bg-surface-secondary h-8 px-3"
394406
>
395-
<SelectValue placeholder="Select a preset" />
407+
<SelectValue
408+
placeholder={
409+
!presetsData || presetsData.length === 0
410+
? "None"
411+
: "Select a preset"
412+
}
413+
/>
396414
</SelectTrigger>
397415
<SelectContent>
398-
{sortedPresets(presets).map((preset) => (
399-
<SelectItem value={preset.ID} key={preset.ID}>
416+
{presetsData && presetsData.length > 0 ? (
417+
sortedPresets(presetsData).map((preset) => (
418+
<SelectItem value={preset.ID} key={preset.ID}>
419+
<span className="overflow-hidden text-ellipsis block">
420+
{preset.Name} {preset.Default && "(Default)"}
421+
</span>
422+
</SelectItem>
423+
))
424+
) : (
425+
<SelectItem value="none" disabled>
400426
<span className="overflow-hidden text-ellipsis block">
401-
{preset.Name} {preset.Default && "(Default)"}
427+
No presets available
402428
</span>
403429
</SelectItem>
404-
))}
430+
)}
405431
</SelectContent>
406432
</Select>
407-
</div>
408-
)}
433+
)}
434+
</div>
409435
</div>
410436

411437
<div className="flex items-center gap-2">

0 commit comments

Comments
 (0)