Skip to content

Commit 79a0d3e

Browse files
Guilhem-lmGuilhem-lm
authored
add tip to triggers pannel (#7220)
* improve triggers pannel * nit * nit * improve placement and transition * Add tip * stop input selection when adding a preprocessor
1 parent 2388e38 commit 79a0d3e

File tree

4 files changed

+102
-91
lines changed

4 files changed

+102
-91
lines changed

‎frontend/src/lib/components/flows/map/InsertModuleButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
let { Icon = Plus, title, id }: Props = $props()
1212
</script>
1313

14-
<button class="center-center p-2 group">
14+
<button class="center-center p-2 group" onclick={(e) => e.stopPropagation()}>
1515
<div
1616
{title}
1717
{id}

‎frontend/src/lib/components/triggers/AddTriggersButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
setDropdownWidthToButtonWidth = false,
2424
children,
2525
class: className,
26-
placement = 'bottom',
26+
placement = 'bottom-start',
2727
isEditor = false,
2828
onAddDraftTrigger,
2929
onAddScheduledPoll,

‎frontend/src/lib/components/triggers/TriggersEditor.svelte‎

Lines changed: 94 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
import CaptureWrapper from './CaptureWrapper.svelte'
99
import { fade } from 'svelte/transition'
1010
import TriggersBadge from '../graph/renderers/triggers/TriggersBadge.svelte'
11-
import { twMerge } from 'tailwind-merge'
1211
import AddTriggersButton from '$lib/components/triggers/AddTriggersButton.svelte'
13-
import { Plus } from 'lucide-svelte'
12+
import { Plus, BookOpen, ExternalLink } from 'lucide-svelte'
1413
import Button from '../common/button/Button.svelte'
1514
import TriggersWrapperV2 from './TriggersWrapper.svelte'
1615
import {
@@ -283,6 +282,8 @@
283282
CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersState.selectedTrigger?.type ?? '') &&
284283
isCloudHosted()
285284
)
285+
286+
let leftPaneWidth = $state(0)
286287
</script>
287288

288289
<div bind:clientWidth={width} class="h-full w-full">
@@ -298,61 +299,64 @@
298299
<FlowCard {noEditor} noHeader>
299300
<Splitpanes horizontal>
300301
<Pane>
301-
{#if triggersState.selectedTrigger}
302-
<div
303-
class="flex flex-row h-full"
304-
in:fade={{ duration: 200, delay: 50 }}
305-
out:fade={{ duration: 150 }}
306-
>
307-
<!-- Left Pane - Triggers List -->
308-
{#if !useVerticalTriggerBar}
309-
<div class="w-[350px] flex-shrink-0 overflow-auto pr-2 pl-4 pt-2 pb-2">
310-
<TriggersTable
311-
selectedTrigger={triggersState.selectedTriggerIndex}
312-
{onSelect}
313-
triggers={triggersState.triggers}
314-
{isEditor}
315-
onAddDraftTrigger={handleAddTrigger}
316-
onDeleteDraft={deleteTrigger}
317-
onReset={handleResetDraft}
318-
webhookToken={$triggersCount?.webhook_count}
319-
emailToken={$triggersCount?.default_email_count}
320-
/>
321-
</div>
322-
{:else}
323-
<div class="p-2 flex flex-col gap-2 border-r">
324-
<AddTriggersButton
325-
onAddDraftTrigger={handleAddTrigger}
326-
class="w-fit h-fit"
327-
placement="right-start"
328-
>
329-
<Button
330-
variant="accent"
331-
btnClasses="h-8 w-8 p-0"
332-
nonCaptureEvent
333-
startIcon={{ icon: Plus }}
334-
/>
335-
</AddTriggersButton>
336-
<TriggersBadge
337-
showOnlyWithCount={false}
338-
path={initialPath || fakeInitialPath}
339-
{newItem}
340-
isFlow
341-
selected={true}
342-
small={false}
343-
vertical
344-
onSelect={(triggerIndex: number) => {
345-
triggersState.selectedTriggerIndex = triggerIndex
346-
}}
302+
<div class="flex flex-row h-full" bind:clientWidth={leftPaneWidth}>
303+
<!-- Left Pane - Triggers List -->
304+
{#if !useVerticalTriggerBar || !triggersState.selectedTrigger}
305+
<div
306+
class="overflow-auto p-2"
307+
style={triggersState.selectedTrigger
308+
? 'width: 350px; flex: 0 0 350px;'
309+
: 'flex: 1 1 350px; min-width: 350px;'}
310+
>
311+
<TriggersTable
312+
selectedTrigger={triggersState.selectedTriggerIndex}
313+
{onSelect}
314+
triggers={triggersState.triggers}
315+
{isEditor}
316+
onAddDraftTrigger={handleAddTrigger}
317+
onDeleteDraft={deleteTrigger}
318+
onReset={handleResetDraft}
319+
webhookToken={$triggersCount?.webhook_count}
320+
emailToken={$triggersCount?.default_email_count}
321+
/>
322+
{#if leftPaneWidth <= 800 && !triggersState.selectedTrigger}
323+
<div class="mt-6">
324+
{@render TriggerInfo()}
325+
</div>
326+
{/if}
327+
</div>
328+
{:else}
329+
<div class="p-2 flex flex-col gap-2 border-r justify-start">
330+
<AddTriggersButton
331+
onAddDraftTrigger={handleAddTrigger}
332+
class="w-fit h-fit"
333+
placement="right-start"
334+
>
335+
<Button
336+
variant="accent"
337+
btnClasses="h-8 w-8 p-0"
338+
nonCaptureEvent
339+
startIcon={{ icon: Plus }}
347340
/>
348-
</div>
349-
{/if}
341+
</AddTriggersButton>
342+
<TriggersBadge
343+
showOnlyWithCount={false}
344+
path={initialPath || fakeInitialPath}
345+
{newItem}
346+
isFlow
347+
selected={true}
348+
small={false}
349+
vertical
350+
onSelect={(triggerIndex: number) => {
351+
triggersState.selectedTriggerIndex = triggerIndex
352+
}}
353+
/>
354+
</div>
355+
{/if}
350356

357+
{#if triggersState.selectedTrigger}
351358
<div
352-
class={twMerge(
353-
'flex-grow overflow-auto pl-2 pr-4 pb-4 pt-2',
354-
useVerticalTriggerBar ? 'pl-4 pt-2' : ''
355-
)}
359+
class="flex-grow overflow-auto py-2 px-4 transition-all duration-200 ease-in-out"
356360
style="scrollbar-gutter: stable"
357361
>
358362
{#if loading}
@@ -401,35 +405,10 @@
401405
{/key}
402406
{/if}
403407
</div>
404-
</div>
405-
{:else}
406-
<!-- Full-width triggers table when no trigger is selected -->
407-
<div
408-
class="h-full w-full overflow-auto px-4 py-2 flex justify-start"
409-
in:fade={{ duration: 200, delay: 50 }}
410-
out:fade={{ duration: 150 }}
411-
>
412-
{#if loading}
413-
<div
414-
class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full max-w-2xl"
415-
></div>
416-
{:else}
417-
<div class="w-full max-w-2xl">
418-
<TriggersTable
419-
selectedTrigger={triggersState.selectedTriggerIndex}
420-
{onSelect}
421-
triggers={triggersState.triggers}
422-
{isEditor}
423-
onAddDraftTrigger={handleAddTrigger}
424-
onDeleteDraft={deleteTrigger}
425-
onReset={handleResetDraft}
426-
webhookToken={$triggersCount?.webhook_count}
427-
emailToken={$triggersCount?.default_email_count}
428-
/>
429-
</div>
430-
{/if}
431-
</div>
432-
{/if}
408+
{:else if leftPaneWidth > 800}
409+
{@render TriggerInfo(true)}
410+
{/if}
411+
</div>
433412
</Pane>
434413
{#if !cloudDisabled && triggersState.selectedTrigger && triggersState.selectedTrigger.type !== 'schedule' && triggersState.selectedTrigger.type != 'poll' && !noCapture}
435414
{@const captureKind = triggersState.selectedTrigger
@@ -460,3 +439,35 @@
460439
</Splitpanes>
461440
</FlowCard>
462441
</div>
442+
443+
{#snippet TriggerInfo(margin: boolean = false)}
444+
<div class="p-4 rounded bg-surface-tertiary grow min-w-[450px] h-fit {margin ? 'm-2' : ''}">
445+
<div class="flex gap-3">
446+
<BookOpen size={16} class="text-secondary mt-0.5 flex-shrink-0" />
447+
<div class="flex-1">
448+
<div class="text-2xs font-normal text-secondary mb-2">
449+
<strong class="font-semibold">Triggers</strong> automatically run your flow when events
450+
happen. Select one to configure it or create a new one.
451+
<a
452+
href="https://www.windmill.dev/docs/getting_started/triggers"
453+
target="_blank"
454+
class="whitespace-nowrap">Learn more <ExternalLink size={14} class="inline-block" /></a
455+
>
456+
</div>
457+
<ul class="text-2xs text-hint space-y-1 ml-2">
458+
<li class="flex">
459+
<span class="mr-2">•</span>
460+
<span>Default triggers: Webhooks, email, CLI - always exist, can't be disabled</span>
461+
</li>
462+
<li class="flex">
463+
<span class="mr-2">•</span>
464+
<span
465+
>Additional triggers: Setup advanced triggers, like HTTP routes, database changes,
466+
message queues, cloud events, and more</span
467+
>
468+
</li>
469+
</ul>
470+
</div>
471+
</div>
472+
</div>
473+
{/snippet}

‎frontend/src/lib/components/triggers/TriggersTable.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@
3939
</script>
4040

4141
<div class="flex flex-col space-y-2 w-full">
42-
<div class="w-full">
42+
<div class="w-full flex justify-start">
4343
<AddTriggersButton {onAddDraftTrigger} setDropdownWidthToButtonWidth class="w-full" {isEditor}>
4444
<Button
4545
aiId="add-trigger"
4646
aiDescription="Add a new trigger"
47-
size="xs"
48-
startIcon={{ icon: Plus }}
47+
unifiedSize="md"
4948
nonCaptureEvent
5049
variant="accent"
50+
startIcon={{ icon: Plus }}
5151
>
5252
Add trigger
5353
</Button>
@@ -59,7 +59,7 @@
5959
{@const SvelteComponent = triggerIconMap[trigger.type]}
6060
<tr
6161
class={twMerge(
62-
'cursor-pointer h-10 group',
62+
'cursor-pointer h-8 group',
6363
trigger.isDraft ? 'text-hint' : '',
6464
selectedTrigger === index
6565
? 'bg-surface-accent-selected text-accent '
@@ -72,9 +72,9 @@
7272
callback: () => onSelect?.(index)
7373
}}
7474
>
75-
<td class="w-12 text-center py-2 px-2">
75+
<td class="w-8 text-center py-2 px-2">
7676
<div class="relative flex justify-center items-center">
77-
<SvelteComponent size={16} />
77+
<SvelteComponent size={14} />
7878

7979
{#if trigger.isPrimary}
8080
<Star size={10} class="absolute -mt-3 ml-3 text-blue-400" />

0 commit comments

Comments
 (0)