From 8053c927ef888fd765fab0087f633a577e24f83a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 30 Sep 2024 19:08:35 +0200
Subject: [PATCH] feat(frontend): fix trigger when position when a preprocessor
 is presetn

---
 .../src/lib/components/graph/graphBuilder.ts  |  13 +-
 .../renderers/triggers/TriggerButton.svelte   |   7 +-
 .../renderers/triggers/TriggersWrapper.svelte | 202 ++++++++++--------
 3 files changed, 131 insertions(+), 91 deletions(-)

diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index 7cb331aaae..e5a05ac83d 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -173,9 +173,16 @@ export default function graphBuilder(
 			}
 
 			nodes.push(triggerNode)
-			addEdge('Trigger', 'Input', {
-				type: 'hiddenedge'
-			})
+
+			if (!!preprocessorModule) {
+				addEdge('Trigger', preprocessorModule.id, {
+					type: 'hiddenedge'
+				})
+			} else {
+				addEdge('Trigger', 'Input', {
+					type: 'hiddenedge'
+				})
+			}
 		}
 
 		const resultNode: Node = {
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
index 387a7541da..3f53e8c669 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
@@ -1,5 +1,7 @@
-<script>
+<script lang="ts">
 	import { twMerge } from 'tailwind-merge'
+
+	export let disabled: boolean = false
 </script>
 
 <button
@@ -7,7 +9,8 @@
 	class={twMerge(
 		'bg-surface-secondary hover:bg-surface-hover rounded-md border text-xs',
 		'w-6 h-6',
-		'relative center-center'
+		'relative center-center',
+		disabled ? 'cursor-not-allowed bg-surface-disabled' : 'cursor-pointer'
 	)}
 >
 	<slot />
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 94c6ec8735..00ae3de137 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -66,23 +66,25 @@
 	}
 
 	onMount(() => {
-		loadSchedules()
-		loadTriggers()
+		if (!newFlow) {
+			loadSchedules()
+			loadTriggers()
+		}
 	})
 
 	let drawer: Drawer | undefined = undefined
 	let selectedTab: 'webhooks' | 'mail' | 'routes' | 'schedules' = 'webhooks'
 </script>
 
-{#if !newFlow}
-	{#if isEditor}
+{#if isEditor}
+	{#if !newFlow}
 		<Drawer bind:this={drawer} size="600px">
 			<DrawerContent title="Triggers" noPadding on:close={drawer.closeDrawer}>
 				<Tabs bind:selected={selectedTab}>
-					<Tab value="webhooks">Webhooks</Tab>
-					<Tab value="mail">Mail</Tab>
-					<Tab value="routes">Routes</Tab>
-					<Tab value="schedules">Schedules</Tab>
+					<Tab value="webhooks" disabled={newFlow}>Webhooks</Tab>
+					<Tab value="mail" disabled={newFlow}>Mail</Tab>
+					<Tab value="routes" disabled={newFlow}>Routes</Tab>
+					<Tab value="schedules" disabled={newFlow}>Schedules</Tab>
 
 					<svelte:fragment slot="content">
 						{#if selectedTab === 'webhooks'}
@@ -99,11 +101,11 @@
 							<EmailTriggerPanel token="" scopes={[`run:flow/${path}`]} {path} isFlow={true} />
 						{/if}
 
-						{#if selectedTab === 'routes'}
+						{#if !newFlow && selectedTab === 'routes'}
 							<RoutesPanel path={path ?? ''} isFlow={true} bind:triggers />
 						{/if}
 
-						{#if selectedTab === 'schedules'}
+						{#if !newFlow && selectedTab === 'schedules'}
 							<RunPageSchedules
 								isFlow={true}
 								path={path ?? ''}
@@ -115,85 +117,113 @@
 				</Tabs>
 			</DrawerContent>
 		</Drawer>
-		<div style={`width: ${NODE.width}px; margin-top: -24px;`}>
-			<div class="flex flex-row mx-auto w-min">
-				<div
-					class="flex flex-row gap-2 px-2 border p-1 rounded-md border-surface-selected bg-surface shadow-md items-center"
-				>
-					<div class="flex flex-col">
-						<div class="flex flex-row items-center text-2xs">
-							Triggers
+	{/if}
+	<div style={`width: ${NODE.width}px; margin-top: -24px;`}>
+		<div class="flex flex-row mx-auto w-min">
+			<div
+				class="flex flex-row gap-2 px-2 border p-1 rounded-md border-surface-selected bg-surface shadow-md items-center"
+			>
+				<div class="flex flex-col">
+					<div class="flex flex-row items-center text-2xs">
+						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>
+						<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>
-					<Popover>
-						<svelte:fragment slot="text">See default webhooks triggers</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									selectedTab = 'webhooks'
-									drawer?.openDrawer()
-								} else {
-									dispatch('triggerDetail', 'webhooks')
-								}
-							}}
-						>
-							<Webhook size={12} />
-						</TriggerButton>
-					</Popover>
-					<Popover>
-						<svelte:fragment slot="text">See default mail trigger</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									selectedTab = 'mail'
-									drawer?.openDrawer()
-								} else {
-									dispatch('triggerDetail', 'mail')
-								}
-							}}
-						>
-							<Mail size={12} />
-						</TriggerButton>
-					</Popover>
-					<Popover>
-						<svelte:fragment slot="text">See all routes</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									selectedTab = 'routes'
-									drawer?.openDrawer()
-								} else {
-									dispatch('triggerDetail', 'routes')
-								}
-							}}
-						>
-							<TriggerCount count={triggers?.length} />
-							<Route size={12} />
-						</TriggerButton>
-					</Popover>
-					<Popover>
-						<svelte:fragment slot="text">See all schedules</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									selectedTab = 'schedules'
-									drawer?.openDrawer()
-								} else {
-									dispatch('triggerDetail', 'schedule')
-								}
-							}}
-						>
-							<TriggerCount count={(schedules?.length ?? 0) + (primaryScheduleExists ? 1 : 0)} />
-							<Calendar size={12} />
-						</TriggerButton>
-					</Popover>
 				</div>
+				<Popover>
+					<svelte:fragment slot="text">
+						{#if newFlow}
+							Deploy the flow to see webhooks triggers
+						{:else}
+							See default webhooks triggers
+						{/if}
+					</svelte:fragment>
+					<TriggerButton
+						on:click={() => {
+							if (isEditor) {
+								selectedTab = 'webhooks'
+								drawer?.openDrawer()
+							} else {
+								dispatch('triggerDetail', 'webhooks')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<Webhook size={12} />
+					</TriggerButton>
+				</Popover>
+				<Popover>
+					<svelte:fragment slot="text">
+						{#if newFlow}
+							Deploy the flow to see email triggers
+						{:else}
+							See all email triggers
+						{/if}
+					</svelte:fragment>
+					<TriggerButton
+						on:click={() => {
+							if (isEditor) {
+								selectedTab = 'mail'
+								drawer?.openDrawer()
+							} else {
+								dispatch('triggerDetail', 'mail')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<Mail size={12} />
+					</TriggerButton>
+				</Popover>
+				<Popover>
+					<svelte:fragment slot="text">
+						{#if newFlow}
+							Deploy the flow to add routes triggers
+						{:else}
+							See all routes triggers
+						{/if}
+					</svelte:fragment>
+					<TriggerButton
+						on:click={() => {
+							if (isEditor) {
+								selectedTab = 'routes'
+								drawer?.openDrawer()
+							} else {
+								dispatch('triggerDetail', 'routes')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<TriggerCount count={triggers?.length} />
+						<Route size={12} />
+					</TriggerButton>
+				</Popover>
+				<Popover>
+					<svelte:fragment slot="text">
+						{#if newFlow}
+							Deploy the flow to add schedules triggers
+						{:else}
+							See all schedules triggers
+						{/if}
+					</svelte:fragment>
+					<TriggerButton
+						on:click={() => {
+							if (isEditor) {
+								selectedTab = 'schedules'
+								drawer?.openDrawer()
+							} else {
+								dispatch('triggerDetail', 'schedule')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<TriggerCount count={(schedules?.length ?? 0) + (primaryScheduleExists ? 1 : 0)} />
+						<Calendar size={12} />
+					</TriggerButton>
+				</Popover>
 			</div>
 		</div>
-	{/if}
+	</div>
 {/if}