infrastructure/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Hint custom event names in combobox when no matches are found

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-01 18:55:32 +02:00
parent 3e3117e4a7
commit 3214f6c42d
2 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/workflows/[id].tsx
+36 -19
View File
@@ -27,7 +27,6 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
Command, Command,
CommandEmpty,
CommandGroup, CommandGroup,
CommandItem, CommandItem,
CommandList, CommandList,
@@ -875,21 +874,27 @@ function SettingsDialog({workflow, open, onOpenChange, onSave}: SettingsDialogPr
required required
autoComplete="off" autoComplete="off"
/> />
{eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && ( {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
<div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md"> <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty className="py-3 text-center text-sm text-neutral-500">
No matching events
</CommandEmpty>
<CommandGroup> <CommandGroup>
{eventNamesData.eventNames {eventNamesData?.eventNames
.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase())) ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
.map(n => ( .map(n => (
<CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}> <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
{n} {n}
</CommandItem> </CommandItem>
))} ))}
{eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
<CommandItem
key="__custom__"
value={eventName.trim()}
onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
>
Use &ldquo;{eventName.trim()}&rdquo;
</CommandItem>
)}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> </Command>
@@ -1651,21 +1656,27 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
className="mt-1.5" className="mt-1.5"
autoComplete="off" autoComplete="off"
/> />
{eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && ( {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
<div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md"> <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty className="py-3 text-center text-sm text-neutral-500">
No matching events
</CommandEmpty>
<CommandGroup> <CommandGroup>
{eventNamesData.eventNames {eventNamesData?.eventNames
.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase())) ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
.map(n => ( .map(n => (
<CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}> <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
{n} {n}
</CommandItem> </CommandItem>
))} ))}
{eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
<CommandItem
key="__custom__"
value={eventName.trim()}
onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
>
Use &ldquo;{eventName.trim()}&rdquo;
</CommandItem>
)}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> </Command>
@@ -2847,21 +2858,27 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
className="mt-1.5" className="mt-1.5"
autoComplete="off" autoComplete="off"
/> />
{eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && ( {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
<div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md"> <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty className="py-3 text-center text-sm text-neutral-500">
No matching events
</CommandEmpty>
<CommandGroup> <CommandGroup>
{eventNamesData.eventNames {eventNamesData?.eventNames
.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase())) ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
.map(n => ( .map(n => (
<CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}> <CommandItem key={n} value={n} onSelect={() => { setEventName(n); setEventPopoverOpen(false); }}>
{n} {n}
</CommandItem> </CommandItem>
))} ))}
{eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
<CommandItem
key="__custom__"
value={eventName.trim()}
onSelect={() => { setEventName(eventName.trim()); setEventPopoverOpen(false); }}
>
Use &ldquo;{eventName.trim()}&rdquo;
</CommandItem>
)}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> </Command>
apps/web/src/pages/workflows/index.tsx
+15 -7
View File
@@ -7,7 +7,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
Command, Command,
CommandEmpty,
CommandGroup, CommandGroup,
CommandItem, CommandItem,
CommandList, CommandList,
@@ -412,16 +411,13 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
required required
autoComplete="off" autoComplete="off"
/> />
{eventPopoverOpen && eventNamesData?.eventNames && eventNamesData.eventNames.length > 0 && ( {eventPopoverOpen && ((eventNamesData?.eventNames?.length ?? 0) > 0 || eventName?.trim()) && (
<div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md"> <div className="absolute z-50 w-full mt-1 rounded-md border border-neutral-200 bg-white shadow-md">
<Command> <Command>
<CommandList> <CommandList>
<CommandEmpty className="py-3 text-center text-sm text-neutral-500">
No matching events
</CommandEmpty>
<CommandGroup> <CommandGroup>
{eventNamesData.eventNames {eventNamesData?.eventNames
.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase())) ?.filter(n => !eventName || n.toLowerCase().includes(eventName.toLowerCase()))
.map(n => ( .map(n => (
<CommandItem <CommandItem
key={n} key={n}
@@ -434,6 +430,18 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
{n} {n}
</CommandItem> </CommandItem>
))} ))}
{eventName?.trim() && !eventNamesData?.eventNames?.some(n => n === eventName.trim()) && (
<CommandItem
key="__custom__"
value={eventName.trim()}
onSelect={() => {
setEventName(eventName.trim());
setEventPopoverOpen(false);
}}
>
Use &ldquo;{eventName.trim()}&rdquo;
</CommandItem>
)}
</CommandGroup> </CommandGroup>
</CommandList> </CommandList>
</Command> </Command>