From ef4b02e9698d1f1938f0574d976d6aa3293e6712 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhem@mbp-de-windmill.home>
Date: Wed, 9 Oct 2024 13:39:52 +0200
Subject: [PATCH] fix minor issues

---
 .../lib/components/RunPageSchedules.svelte    |  8 +++
 .../details/EmailTriggerPanel.svelte          |  7 +++
 .../components/details/WebhooksPanel.svelte   |  8 +++
 .../flows/content/FlowTriggers.svelte         | 40 +++++++-----
 .../renderers/triggers/TriggersWrapper.svelte | 10 +--
 .../components/triggers/RoutesPanel.svelte    | 62 +++++++++++--------
 6 files changed, 82 insertions(+), 53 deletions(-)

diff --git a/frontend/src/lib/components/RunPageSchedules.svelte b/frontend/src/lib/components/RunPageSchedules.svelte
index 6bff8eb6e3..1406ed457e 100644
--- a/frontend/src/lib/components/RunPageSchedules.svelte
+++ b/frontend/src/lib/components/RunPageSchedules.svelte
@@ -8,6 +8,7 @@
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import PrimarySchedule from './PrimarySchedule.svelte'
 	import Label from '$lib/components/Label.svelte'
+	import Alert from './common/alert/Alert.svelte'
 	export let isFlow: boolean
 	export let path: string
 	export let can_write: boolean
@@ -16,6 +17,7 @@
 
 	let schedule: Schedule | false | undefined = undefined
 	export let schedules: Schedule[] | undefined = undefined
+	export let newFlow: boolean = false
 
 	$: path && loadSchedule()
 	$: path && loadSchedules()
@@ -122,4 +124,10 @@
 			<Skeleton layout={[[8]]} />
 		{/if}
 	</Label>
+
+	{#if newFlow}
+		<Alert title="Triggers disabled" type="warning" size="xs">
+			Deploy the flow to enable schedules triggers.
+		</Alert>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index 61b153aa44..4ec51bf782 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -22,6 +22,7 @@
 	export let isFlow: boolean = false
 	export let hash: string | undefined = undefined
 	export let path: string
+	export let newFlow: boolean = false
 
 	let emailDomain: string | null = null
 
@@ -136,5 +137,11 @@
 				Email triggers on Windmill Community Edition are limited to 100 emails per day.
 			</Alert>
 		{/if}
+
+		{#if newFlow}
+			<Alert title="Triggers disabled" type="warning" size="xs">
+				Deploy the flow to enable email triggers.
+			</Alert>
+		{/if}
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/details/WebhooksPanel.svelte b/frontend/src/lib/components/details/WebhooksPanel.svelte
index d33065835b..da2358ef6d 100644
--- a/frontend/src/lib/components/details/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/details/WebhooksPanel.svelte
@@ -20,6 +20,7 @@
 	import HighlightTheme from '../HighlightTheme.svelte'
 	import { base } from '$lib/base'
 	import Label from '$lib/components/Label.svelte'
+	import Alert from '../common/alert/Alert.svelte'
 	let userSettings: UserSettings
 
 	export let token: string
@@ -29,6 +30,7 @@
 	export let hash: string | undefined = undefined
 	export let path: string
 	export let url: string = ''
+	export let newFlow = false
 
 	let selectedTab: string = 'rest'
 
@@ -382,4 +384,10 @@ done`
 			{/key}
 		</svelte:fragment>
 	</Tabs>
+
+	{#if newFlow}
+		<Alert title="Triggers disabled" type="warning" size="xs">
+			Deploy the flow to enable webhooks triggers.
+		</Alert>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/flows/content/FlowTriggers.svelte b/frontend/src/lib/components/flows/content/FlowTriggers.svelte
index a7ba31e20b..da910a672d 100644
--- a/frontend/src/lib/components/flows/content/FlowTriggers.svelte
+++ b/frontend/src/lib/components/flows/content/FlowTriggers.svelte
@@ -64,41 +64,47 @@
 <FlowCard {noEditor} title="Flow Triggers">
 	<div class="pt-4">
 		<Tabs bind:selected={$selectedTrigger}>
-			<Tab value="webhooks" disabled={newFlow} selectedClass="text-primary font-semibold"
-				>Webhooks</Tab
-			>
-			<Tab value="mail" disabled={newFlow} selectedClass="text-primary text-sm font-semibold"
-				>Mail</Tab
-			>
-			<Tab value="routes" disabled={newFlow} selectedClass="text-primary text-sm font-semibold"
-				>Routes</Tab
-			>
-			<Tab value="schedules" disabled={newFlow} selectedClass="text-primary text-sm font-semibold"
-				>Schedules</Tab
-			>
+			<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
+			<Tab value="mail" selectedClass="text-primary text-sm font-semibold">Email</Tab>
+			<Tab value="routes" selectedClass="text-primary text-sm font-semibold">Routes</Tab>
+			<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
 
 			<svelte:fragment slot="content">
 				{#if $selectedTrigger === 'webhooks'}
 					<div class="p-4">
-						<WebhooksPanel scopes={[`run:flow/${path}`]} {path} isFlow={true} args={{}} token="" />
+						<WebhooksPanel
+							{newFlow}
+							scopes={[`run:flow/${path}`]}
+							{path}
+							isFlow={true}
+							args={{}}
+							token=""
+						/>
 					</div>
 				{/if}
 
 				{#if $selectedTrigger === 'mail'}
 					<div class="p-4">
-						<EmailTriggerPanel token="" scopes={[`run:flow/${path}`]} {path} isFlow={true} />
+						<EmailTriggerPanel
+							{newFlow}
+							token=""
+							scopes={[`run:flow/${path}`]}
+							{path}
+							isFlow={true}
+						/>
 					</div>
 				{/if}
 
-				{#if !newFlow && $selectedTrigger === 'routes'}
+				{#if $selectedTrigger === 'routes'}
 					<div class="p-4">
-						<RoutesPanel path={path ?? ''} isFlow={true} bind:triggers />
+						<RoutesPanel {newFlow} path={path ?? ''} isFlow={true} bind:triggers />
 					</div>
 				{/if}
 
-				{#if !newFlow && $selectedTrigger === 'schedules'}
+				{#if $selectedTrigger === 'schedules'}
 					<div class="p-4">
 						<RunPageSchedules
+							{newFlow}
 							isFlow={true}
 							path={path ?? ''}
 							can_write={canWrite(path, {}, $userStore)}
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 9e540adc55..824085635c 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -6,7 +6,6 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import Popover from '$lib/components/Popover.svelte'
 	import TriggerCount from './TriggerCount.svelte'
-	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { createEventDispatcher, onMount } from 'svelte'
 	import { Route } from 'lucide-svelte'
 	import { canWrite } from '$lib/utils'
@@ -85,14 +84,7 @@
 				on:click={() => ($selectedId = 'triggers')}
 			>
 				<div class="flex flex-col">
-					<div class="flex flex-row items-center text-2xs font-normal">
-						Triggers
-
-						<Tooltip small wrapperClass="center-center">
-							The flow can be triggered by webhooks, emails, schedules or routes. Click on the icons
-							to see the triggers.
-						</Tooltip>
-					</div>
+					<div class="flex flex-row items-center text-2xs font-normal"> Triggers </div>
 				</div>
 				<Popover>
 					<svelte:fragment slot="text">
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index 779f705ebf..bbbbf71122 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -7,9 +7,11 @@
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import RouteEditor from './RouteEditor.svelte'
 	import { canWrite } from '$lib/utils'
+	import Alert from '../common/alert/Alert.svelte'
 
 	export let isFlow: boolean
 	export let path: string
+	export let newFlow: boolean = false
 
 	let routeEditor: RouteEditor
 
@@ -40,7 +42,7 @@
 	bind:this={routeEditor}
 />
 
-<div class="flex flex-col">
+<div class="flex flex-col gap-4">
 	{#if $userStore?.is_admin || $userStore?.is_super_admin}
 		<Button
 			on:click={() => routeEditor?.openNew(isFlow, path)}
@@ -52,32 +54,38 @@
 			New Route
 		</Button>
 	{/if}
-</div>
 
-{#if triggers}
-	{#if triggers.length == 0}
-		<div class="text-xs text-secondary"> No http routes </div>
+	{#if triggers}
+		{#if triggers.length == 0}
+			<div class="text-xs text-secondary"> No http routes </div>
+		{:else}
+			<div class="flex flex-col divide-y pt-2">
+				{#each triggers as trigger (trigger.path)}
+					<div class="grid grid-cols-5 text-2xs items-center py-2">
+						<div class="col-span-2 truncate">{trigger.path}</div>
+						<div class="col-span-2 truncate">
+							{trigger.http_method.toUpperCase()} /{trigger.route_path}
+						</div>
+						<div class="flex justify-end">
+							<button on:click={() => routeEditor?.openEdit(trigger.path, isFlow)} class="px-2">
+								{#if trigger.canWrite}
+									Edit
+								{:else}
+									View
+								{/if}
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
 	{:else}
-		<div class="flex flex-col divide-y pt-2">
-			{#each triggers as trigger (trigger.path)}
-				<div class="grid grid-cols-5 text-2xs items-center py-2">
-					<div class="col-span-2 truncate">{trigger.path}</div>
-					<div class="col-span-2 truncate">
-						{trigger.http_method.toUpperCase()} /{trigger.route_path}
-					</div>
-					<div class="flex justify-end">
-						<button on:click={() => routeEditor?.openEdit(trigger.path, isFlow)} class="px-2">
-							{#if trigger.canWrite}
-								Edit
-							{:else}
-								View
-							{/if}
-						</button>
-					</div>
-				</div>
-			{/each}
-		</div>
+		<Skeleton layout={[[8]]} />
 	{/if}
-{:else}
-	<Skeleton layout={[[8]]} />
-{/if}
+
+	{#if newFlow}
+		<Alert title="Triggers disabled" type="warning" size="xs">
+			Deploy the flow to enable routes triggers.
+		</Alert>
+	{/if}
+</div>