Move trigger script inertion to trigger Node

frontend/src/lib/components/flows/map/InsertTriggersButton.svelte

@@ -17,6 +17,12 @@
 	export let modules: FlowModule[] = []
 	export let disableAi = false
 	export let kind: 'script' | 'trigger' | 'preprocessor' | 'failure' = 'script'
+	export let buttonClasses: string = twMerge(
+		'w-5 h-5 flex items-center justify-center',
+		'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
+		'text-secondary',
+		'bg-surface focus:outline-none hover:bg-surface-hover rounded '
+	)
 
 	type Alignment = 'start' | 'end' | 'center'
 	type Side = 'top' | 'bottom'
@@ -63,12 +69,7 @@ shouldUsePortal={true} -->
 			}`}
 			id={`flow-editor-add-step-${index}`}
 			type="button"
-			class={twMerge(
-				'w-5 h-5 flex items-center justify-center',
-				'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
-				'text-secondary',
-				'bg-surface focus:outline-none hover:bg-surface-hover rounded '
-			)}
+			class={buttonClasses}
 			on:pointerdown|preventDefault|stopPropagation={pointerdown}
 			on:pointerup={pointerup}
 		>

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -38,7 +38,6 @@
 	import Button from '../common/button/Button.svelte'
 	import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte'
 	import SchedulePollNode from './renderers/nodes/ShedulePollNode.svelte'
-	import tr from 'date-fns/locale/tr'
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
 	export let failureModule: FlowModule | undefined = undefined

frontend/src/lib/components/graph/graphBuilder.ts

@@ -195,7 +195,8 @@ export default function graphBuilder(
 						isEditor: triggerProps?.isEditor,
 						newFlow: extra.newFlow,
 						eventHandlers: eventHandlers,
-						modules: modules
+						modules: modules,
+						...extra
 					}
 				}
 

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -86,44 +86,6 @@
 				}}
 			/>
 		</div>
-		{#if data.enableTrigger}
-			<div
-				class="edgeButtonContainer nodrag nopan"
-				style:transform="translate(100%, 50%) translate({sourceX}px,{sourceY + 2}px)"
-			>
-				<InsertModuleButton
-					disableAi={data.disableAi}
-					on:new={(e) => {
-						// console.log('new', e)
-						data?.eventHandlers.insert({
-							modules: data.modules,
-							index: data.index,
-							kind: e.detail.kind,
-							inlineScript: e.detail.inlineScript
-						})
-					}}
-					on:pickScript={(e) => {
-						// console.log('pickScript', e)
-						data?.eventHandlers.insert({
-							modules: data.modules,
-							index: data.index,
-							script: e.detail
-						})
-					}}
-					on:pickFlow={(e) => {
-						// console.log('pickFlow', e)
-						data?.eventHandlers.insert({
-							modules: data.modules,
-							index: data.index,
-							flow: e.detail
-						})
-					}}
-					kind="trigger"
-					index={data?.index ?? 0}
-					modules={data?.modules ?? []}
-				/>
-			</div>
-		{/if}
 	{/if}
 
 	{#if data?.moving}

frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte

@@ -14,11 +14,13 @@
 		eventHandlers: GraphEventHandlers
 		modules: FlowModule[]
 		index: number
+		disableAi: boolean
 	}
 </script>
 
 <NodeWrapper wrapperClass="shadow-none">
 	<TriggersWrapper
+		{data}
 		path={data.path}
 		on:new={(e) => {
 			data?.eventHandlers.insert({

frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Calendar, Mail, Webhook, Repeat } from 'lucide-svelte'
+	import { Calendar, Mail, Webhook } from 'lucide-svelte'
 	import TriggerButton from './TriggerButton.svelte'
 	import { NODE } from '../../util'
 	import { HttpTriggerService, ScheduleService } from '$lib/gen'
@@ -11,11 +11,20 @@
 	import { canWrite } from '$lib/utils'
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../../../flows/types'
-	import InsertTriggersButton from '../../../flows/map/InsertTriggersButton.svelte'
-	import TopLevelNode from '$lib/components/flows/pickers/TopLevelNode.svelte'
+	import InsertModuleButton from '../../../flows/map/InsertTriggersButton.svelte'
+	import type { FlowModule } from '$lib/gen'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+	import { twMerge } from 'tailwind-merge'
+
 	export let path: string
 	export let isEditor: boolean
 	export let newFlow: boolean
+	export let data: {
+		modules: FlowModule[]
+		index: number
+		eventHandlers: GraphEventHandlers
+		disableAi: boolean
+	}
 
 	const dispatch = createEventDispatcher()
 
@@ -65,22 +74,6 @@
 
 	const { httpTriggers, selectedId, selectedTrigger, schedules, primarySchedule } =
 		getContext<FlowEditorContext>('FlowEditorContext') ?? {}
-
-	import { writable } from 'svelte/store'
-
-	const modifiableTriggers = writable<
-		{ type: 'routes' | 'webhooks' | 'schedule' | 'email' | 'schedule_poll' }[]
-	>([{ type: 'schedule' }])
-
-	function addTrigger(triggerType: 'routes' | 'webhooks' | 'schedule' | 'email' | 'schedule_poll') {
-		modifiableTriggers.update((triggers) => [...triggers, { type: triggerType }])
-	}
-
-	/* function removeTrigger(
-		triggerType: 'routes' | 'webhooks' | 'schedule' | 'email' | 'schedule_poll'
-	) {
-		modifiableTriggers.update((triggers) => triggers.filter((t) => t.type !== triggerType))
-	} */
 </script>
 
 {#if isEditor}
@@ -97,163 +90,135 @@
 				<div class="flex flex-col">
 					<div class="flex flex-row items-center text-2xs font-normal"> Triggers </div>
 				</div>
-				{#if $modifiableTriggers.some((trigger) => trigger.type === 'webhooks')}
-					<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) {
-									$selectedTrigger = 'webhooks'
-									$selectedId = 'webhooks'
-								} else {
-									dispatch('triggerDetail', 'webhooks')
-								}
-							}}
-							disabled={newFlow}
-						>
-							<Webhook size={12} />
-						</TriggerButton>
-					</Popover>
-				{/if}
-				{#if $modifiableTriggers.some((trigger) => trigger.type === 'email')}
-					<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) {
-									$selectedTrigger = 'mail'
-									$selectedId = 'mail'
-								} else {
-									dispatch('triggerDetail', 'mail')
-								}
-							}}
-							disabled={newFlow}
-						>
-							<Mail size={12} />
-						</TriggerButton>
-					</Popover>
-				{/if}
-				{#if $modifiableTriggers.some((trigger) => trigger.type === 'routes')}
-					<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) {
-									$selectedTrigger = 'routes'
-									$selectedId = 'routes'
-								} else {
-									dispatch('triggerDetail', 'routes')
-								}
-							}}
-							disabled={newFlow}
-						>
-							<TriggerCount count={$httpTriggers?.length} />
-							<Route size={12} />
-						</TriggerButton>
-					</Popover>
-				{/if}
-				{#if $modifiableTriggers.some((trigger) => trigger.type === 'schedule')}
-					<Popover>
-						<svelte:fragment slot="text">See all schedules triggers</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									$selectedTrigger = 'schedules'
-									$selectedId = 'schedules'
-								} else {
-									dispatch('triggerDetail', 'schedule')
-								}
-							}}
-							disabled={newFlow}
-						>
-							<TriggerCount count={($schedules?.length ?? 0) + ($primarySchedule ? 1 : 0)} />
-							<Calendar size={12} />
-						</TriggerButton>
-					</Popover>
-				{/if}
-				{#if $modifiableTriggers.some((trigger) => trigger.type === 'schedule_poll')}
-					<Popover>
-						<svelte:fragment slot="text">See all schedules poll triggers</svelte:fragment>
-						<TriggerButton
-							on:click={() => {
-								if (isEditor) {
-									$selectedTrigger = 'schedule_poll'
-									$selectedId = 'schedule_poll'
-								} else {
-									dispatch('triggerDetail', 'schedule_poll')
-								}
-							}}
-							disabled={newFlow}
-						>
-							<Repeat size={12} />
-						</TriggerButton>
-					</Popover>
-				{/if}
+
+				<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) {
+								$selectedTrigger = 'webhooks'
+								$selectedId = 'webhooks'
+							} 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) {
+								$selectedTrigger = 'mail'
+								$selectedId = 'mail'
+							} 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) {
+								$selectedTrigger = 'routes'
+								$selectedId = 'routes'
+							} else {
+								dispatch('triggerDetail', 'routes')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<TriggerCount count={$httpTriggers?.length} />
+						<Route size={12} />
+					</TriggerButton>
+				</Popover>
+
+				<Popover>
+					<svelte:fragment slot="text">See all schedules triggers</svelte:fragment>
+					<TriggerButton
+						on:click={() => {
+							if (isEditor) {
+								$selectedTrigger = 'schedules'
+								$selectedId = 'schedules'
+							} else {
+								dispatch('triggerDetail', 'schedule')
+							}
+						}}
+						disabled={newFlow}
+					>
+						<TriggerCount count={($schedules?.length ?? 0) + ($primarySchedule ? 1 : 0)} />
+						<Calendar size={12} />
+					</TriggerButton>
+				</Popover>
 
 				<!-- index={data.index ?? 0}
 					allowTrigger={data.enableTrigger}
 					modules={data?.modules ?? []} -->
-				<InsertTriggersButton on:new on:pickScript>
-					<svelte:fragment slot="topLevelNodes" let:close>
-						{#each ['schedule', 'routes', 'email', 'webhooks', 'schedule_poll'] as triggersType}
-							{#if !$modifiableTriggers.some((trigger) => trigger.type === triggersType)}
-								{#if triggersType === 'schedule'}
-									<TopLevelNode
-										label="Schedule"
-										on:select={() => {
-											close(null)
-											addTrigger('schedule')
-										}}
-									/>
-								{:else if triggersType === 'routes'}
-									<TopLevelNode
-										label="Http route"
-										on:select={() => {
-											close(null)
-											addTrigger('routes')
-										}}
-									/>
-								{:else if triggersType === 'email'}
-									<TopLevelNode
-										label="Email"
-										on:select={() => {
-											close(null)
-											addTrigger('email')
-										}}
-									/>
-								{:else if triggersType === 'webhooks'}
-									<TopLevelNode
-										label="Webhook"
-										on:select={() => {
-											close(null)
-											addTrigger('webhooks')
-										}}
-									/>
-								{:else if triggersType === 'schedule_poll'}
-									<TopLevelNode label="Schedule poll" />
-								{/if}
-							{/if}
-						{/each}
-					</svelte:fragment>
-				</InsertTriggersButton>
+				<InsertModuleButton
+					disableAi={data.disableAi}
+					on:new={(e) => {
+						// console.log('new', e)
+						data?.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index,
+							kind: e.detail.kind,
+							inlineScript: e.detail.inlineScript
+						})
+					}}
+					on:pickScript={(e) => {
+						// console.log('pickScript', e)
+						data?.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index,
+							script: e.detail
+						})
+					}}
+					on:pickFlow={(e) => {
+						// console.log('pickFlow', e)
+						data?.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index,
+							flow: e.detail
+						})
+					}}
+					kind="trigger"
+					index={data?.index ?? 0}
+					modules={data?.modules ?? []}
+					buttonClasses={twMerge(
+						'bg-surface-secondary hover:bg-surface-hover rounded-md border text-xs',
+						'w-6 h-6',
+						'relative center-center',
+						newFlow ? 'cursor-not-allowed bg-surface-disabled' : 'cursor-pointer'
+					)}
+				/>
 			</button>
 		</div>
 	</div>