From f478f6235c7c4b1e8ff4d50079678f8ebed09285 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhem@mbp-de-windmill.home>
Date: Tue, 15 Oct 2024 10:05:56 +0200
Subject: [PATCH] Add schedule poll in triggers

---
 .../details/SchedulePollPanel.svelte          |  5 +-
 .../flows/content/FlowEditorPanel.svelte      |  4 +-
 .../flows/content/FlowShedulePole.svelte      | 11 +++
 .../flows/content/FlowTriggers.svelte         |  2 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |  2 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |  9 +++
 .../flows/map/InsertTriggersButton.svelte     | 13 +++-
 .../lib/components/graph/FlowGraphV2.svelte   | 13 +++-
 .../src/lib/components/graph/graphBuilder.ts  | 68 +++++++++++------
 .../renderers/nodes/ShedulePollNode.svelte    | 75 +++++++++++++++++++
 .../graph/renderers/nodes/TriggersNode.svelte | 36 +++++++++
 .../renderers/triggers/TriggersWrapper.svelte | 24 +-----
 12 files changed, 206 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/content/FlowShedulePole.svelte
 create mode 100644 frontend/src/lib/components/graph/renderers/nodes/ShedulePollNode.svelte

diff --git a/frontend/src/lib/components/details/SchedulePollPanel.svelte b/frontend/src/lib/components/details/SchedulePollPanel.svelte
index 57f8fa498f..6679df63d4 100644
--- a/frontend/src/lib/components/details/SchedulePollPanel.svelte
+++ b/frontend/src/lib/components/details/SchedulePollPanel.svelte
@@ -6,10 +6,9 @@
 	import { getContext } from 'svelte'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 
-	let schedulePollExists: boolean = true
 	export let path: string
 	export let isFlow: boolean
-	export let setScheduleEnabled: (path: string, enabled: boolean) => void
+	export let setScheduleEnabled: (path: string, enabled: boolean) => void = () => {}
 
 	const { triggerModule, primarySchedule } = getContext<TriggerContext>('TriggerContext')
 
@@ -19,7 +18,7 @@
 <ScheduleEditor on:update={() => {}} bind:this={scheduleEditor} />
 
 <div class="flex flex-col gap-8">
-	{#if schedulePollExists && $triggerModule}
+	{#if $triggerModule}
 		<Label label="Schedule">
 			{#if $primarySchedule}
 				<PrimarySchedule
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index aa08b54646..43186b02eb 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -12,7 +12,7 @@
 	import { initFlowStepWarnings } from '../utils'
 	import { dfs } from '../dfs'
 	import FlowPreprocessorModule from './FlowPreprocessorModule.svelte'
-
+	import FlowShedulePole from './FlowShedulePole.svelte'
 	export let noEditor = false
 	export let enableAi = false
 	export let newFlow = false
@@ -71,6 +71,8 @@
 	<FlowPreprocessorModule {noEditor} />
 {:else if $selectedId === 'triggers'}
 	<FlowTriggers {noEditor} {newFlow} />
+{:else if $selectedId === 'schedulePoll'}
+	<FlowShedulePole />
 {:else}
 	{@const dup = checkDup($flowStore.value.modules)}
 	{#if dup}
diff --git a/frontend/src/lib/components/flows/content/FlowShedulePole.svelte b/frontend/src/lib/components/flows/content/FlowShedulePole.svelte
new file mode 100644
index 0000000000..9772838a00
--- /dev/null
+++ b/frontend/src/lib/components/flows/content/FlowShedulePole.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import SchedulePollPanel from '$lib/components/details/SchedulePollPanel.svelte'
+	import { getContext } from 'svelte'
+	import type { FlowEditorContext } from '../types'
+
+	const { pathStore } = getContext<FlowEditorContext>('FlowEditorContext')
+</script>
+
+<div class="p-4">
+	<SchedulePollPanel isFlow={true} path={$pathStore ?? ''} />
+</div>
diff --git a/frontend/src/lib/components/flows/content/FlowTriggers.svelte b/frontend/src/lib/components/flows/content/FlowTriggers.svelte
index 7f68d7b264..d3b682edf8 100644
--- a/frontend/src/lib/components/flows/content/FlowTriggers.svelte
+++ b/frontend/src/lib/components/flows/content/FlowTriggers.svelte
@@ -78,7 +78,7 @@
 
 				{#if $selectedTrigger === 'schedule_poll' && triggerModule}
 					<div class="p-4">
-						<SchedulePollPanel flowModule={$triggerModule} />
+						<SchedulePollPanel isFlow={true} path={path ?? ''} />
 					</div>
 				{/if}
 			</svelte:fragment>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index d93d85366d..c18b5392c7 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -131,7 +131,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
-		'w-full module flex rounded-sm cursor-pointer',
+		'w-full module flex rounded-sm cursor-pointer max-w-full',
 		selected ? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400' : '',
 		'flex relative',
 		$copilotCurrentStepStore === id ? 'z-[901]' : ''
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 2cdaa44dbe..b1e9ba485b 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -45,6 +45,8 @@
 
 	let flowTutorials: FlowTutorials | undefined = undefined
 
+	let hasSchedulePoll = false
+
 	const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore, pathStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -318,6 +320,7 @@
 			preprocessorModule={$flowStore.value?.preprocessor_module}
 			{selectedId}
 			{flowInputsStore}
+			{hasSchedulePoll}
 			on:delete={({ detail }) => {
 				let e = detail.detail
 				dependents = getDependentComponents(e.id, $flowStore)
@@ -326,6 +329,9 @@
 					if (e.id === 'preprocessor') {
 						$selectedId = 'Input'
 						$flowStore.value.preprocessor_module = undefined
+					} else if (e.id === 'schedulePoll') {
+						$selectedId = 'Triggers'
+						hasSchedulePoll = false
 					} else {
 						selectNextId(e.id)
 						removeAtId($flowStore.value.modules, e.id)
@@ -449,6 +455,9 @@
 			on:openSchedules={() => {
 				$selectedId = 'settings-schedule'
 			}}
+			on:addSchedulePoll={() => {
+				hasSchedulePoll = true
+			}}
 		/>
 	</div>
 	<div
diff --git a/frontend/src/lib/components/flows/map/InsertTriggersButton.svelte b/frontend/src/lib/components/flows/map/InsertTriggersButton.svelte
index f4c495d3ae..26f2509b74 100644
--- a/frontend/src/lib/components/flows/map/InsertTriggersButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertTriggersButton.svelte
@@ -8,6 +8,7 @@
 	import type { ComputeConfig } from 'svelte-floating-ui'
 	import PopupV2 from '$lib/components/common/popup/PopupV2.svelte'
 	import { flip, offset } from 'svelte-floating-ui/dom'
+	import { createEventDispatcher } from 'svelte'
 
 	// import type { Writable } from 'svelte/store'
 
@@ -35,6 +36,7 @@
 	let loading = false
 	let small = false
 	let open = false
+	let dispatch = createEventDispatcher()
 
 	$: small = kind === 'preprocessor' || kind === 'failure'
 </script>
@@ -109,9 +111,14 @@ shouldUsePortal={true} -->
 				on:close={() => {
 					close(null)
 				}}
-				on:new
-				on:pickScript
-				on:pickFlow
+				on:new={(event) => {
+					dispatch('new', event.detail)
+					close(null)
+				}}
+				on:pickScript={(event) => {
+					dispatch('pickScript', event.detail)
+					close(null)
+				}}
 				{preFilter}
 				{small}
 			/>
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 56aeeb33f9..7a6938e2a5 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -37,6 +37,7 @@
 	import { Alert, Drawer } from '../common'
 	import Button from '../common/button/Button.svelte'
 	import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte'
+	import SchedulePollNode from './renderers/nodes/ShedulePollNode.svelte'
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
 	export let failureModule: FlowModule | undefined = undefined
@@ -50,7 +51,7 @@
 	export let path: string | undefined = undefined
 	export let isEditor: boolean = false
 	export let newFlow: boolean = false
-
+	export let hasSchedulePoll: boolean = true
 	export let insertable = false
 	export let scroll = false
 	export let moving: string | undefined = undefined
@@ -173,6 +174,9 @@
 			},
 			selectedIteration: (detail, moduleId) => {
 				dispatch('selectedIteration', { ...detail, moduleId: moduleId })
+			},
+			addSchedulePoll: () => {
+				dispatch('addSchedulePoll')
 			}
 		},
 		success,
@@ -188,7 +192,8 @@
 			},
 			isEditor: isEditor,
 			path
-		}
+		},
+		hasSchedulePoll
 	)
 
 	const nodes = writable<Node[]>([])
@@ -204,6 +209,7 @@
 		$nodes = layoutNodes(graph?.nodes)
 		$edges = graph.edges
 
+		console.log('nodes', $nodes)
 		height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight)
 	}
 
@@ -222,7 +228,8 @@
 		branchOneStart: BranchOneStart,
 		branchOneEnd: BranchAllEndNode,
 		noBranch: NoBranchNode,
-		trigger: TriggersNode
+		trigger: TriggersNode,
+		schedulePoll: SchedulePollNode
 	} as any
 
 	const edgeTypes = {
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index 3cfcf503d7..1593ba08f7 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -14,6 +14,7 @@ export type GraphEventHandlers = {
 	move: (module: FlowModule, modules: FlowModule[]) => void
 	selectedIteration: (detail, moduleId: string) => void
 	changeId: (newId: string) => void
+	addSchedulePoll: () => void
 }
 
 export default function graphBuilder(
@@ -31,7 +32,8 @@ export default function graphBuilder(
 		openSchedules?: () => void
 		triggerDetail?: (e) => void
 		isEditor?: boolean
-	}
+	},
+	hasSchedulePoll?: boolean
 ): {
 	nodes: Node[]
 	edges: Edge[]
@@ -159,28 +161,52 @@ export default function graphBuilder(
 		}
 
 		if (extra.path) {
-			const triggerNode: Node = {
-				id: 'Trigger',
-				position: { x: -1, y: -1 },
-				type: 'trigger',
-				data: {
-					path: triggerProps?.path,
-					openSchedules: triggerProps?.openSchedules,
-					triggerDetail: triggerProps?.triggerDetail,
-					isEditor: triggerProps?.isEditor,
-					newFlow: extra.newFlow
+			if (hasSchedulePoll) {
+				const schedulePollNode: Node = {
+					id: 'SchedulePoll',
+					position: { x: -1, y: -1 },
+					type: 'schedulePoll',
+					data: {
+						eventHandlers: eventHandlers,
+						modules: modules
+					}
+				}
+				nodes.push(schedulePollNode)
+				if (!!preprocessorModule) {
+					addEdge('SchedulePoll', preprocessorModule.id, {
+						type: 'empty'
+					})
+				} else {
+					addEdge('SchedulePoll', 'Input', {
+						type: 'empty'
+					})
 				}
-			}
-
-			nodes.push(triggerNode)
-			if (!!preprocessorModule) {
-				addEdge('Trigger', preprocessorModule.id, {
-					type: 'empty'
-				})
 			} else {
-				addEdge('Trigger', 'Input', {
-					type: 'empty'
-				})
+				const triggerNode: Node = {
+					id: 'Trigger',
+					position: { x: -1, y: -1 },
+					type: 'trigger',
+					data: {
+						path: triggerProps?.path,
+						openSchedules: triggerProps?.openSchedules,
+						triggerDetail: triggerProps?.triggerDetail,
+						isEditor: triggerProps?.isEditor,
+						newFlow: extra.newFlow,
+						eventHandlers: eventHandlers,
+						modules: modules
+					}
+				}
+
+				nodes.push(triggerNode)
+				if (!!preprocessorModule) {
+					addEdge('Trigger', preprocessorModule.id, {
+						type: 'empty'
+					})
+				} else {
+					addEdge('Trigger', 'Input', {
+						type: 'empty'
+					})
+				}
 			}
 		}
 
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ShedulePollNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ShedulePollNode.svelte
new file mode 100644
index 0000000000..5e644c9627
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/ShedulePollNode.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import NodeWrapper from './NodeWrapper.svelte'
+	import FlowModuleSchemaItem from '../../../flows/map/FlowModuleSchemaItem.svelte'
+	import { Repeat } from 'lucide-svelte'
+	import { getContext, createEventDispatcher } from 'svelte'
+	import type { Writable } from 'svelte/store'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+	import { twMerge } from 'tailwind-merge'
+	import { NODE } from '../../util'
+	import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte'
+
+	const dispatch = createEventDispatcher()
+
+	export let data: {
+		bgColor: string
+		eventHandlers: GraphEventHandlers
+	}
+
+	const { selectedId } = getContext<{ selectedId: Writable<string> }>('FlowGraphContext')
+	$: itemProps = {
+		selected: $selectedId === 'stepid'
+	}
+
+	/* async function deleteSchedulePoll(e) {
+		data.eventHandlers.delete(e.detail, '')
+	} */
+</script>
+
+<NodeWrapper>
+	<button
+		class={twMerge(
+			'flex flex-col gap-2  rounded-sm p-1 z-10 border',
+			$selectedId === 'schedulePoll'
+				? 'outline outline-offset-0  outline-2  outline-slate-500 dark:outline-gray-400'
+				: ''
+		)}
+		style="width: {NODE.width}px; min-height: {NODE.height}px;"
+		on:click={() => data.eventHandlers.select('schedulePoll')}
+	>
+		<div
+			class="text-2xs text-secondary font-normal text-center rounded-sm w-[80%] border bg-surface"
+		>
+			<div class="flex flex-row gap-2 p-2">
+				<div>
+					<Repeat size={16} />
+				</div>
+
+				<div class="flex grow justify-center items-center">
+					<span class="text-center">Schedule Poll</span>
+				</div>
+			</div>
+		</div>
+		<div
+			class="text-2xs text-secondary font-normal text-center rounded-sm w-[80%] ml-auto border bg-surface"
+		>
+			<FlowModuleSchemaItem
+				deletable={true}
+				label={`Step`}
+				id="step id"
+				on:changeId
+				on:move={() => dispatch('move')}
+				on:delete
+				on:click={() => ($selectedId = 'stepid')}
+				{...itemProps}
+				bgColor={'#ffffff'}
+			/>
+		</div>
+
+		<div class="text-2xs text-secondary font-normal rounded-sm w-[80%] ml-auto">
+			<div class="flex justify-center items-center w-full">
+				<InsertModuleButton />
+			</div>
+		</div>
+	</button>
+</NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index b7619455ad..6e9a1492d8 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import NodeWrapper from './NodeWrapper.svelte'
 	import TriggersWrapper from '../triggers/TriggersWrapper.svelte'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { FlowModule } from '$lib/gen'
 
 	export let data: {
 		path: string
@@ -9,12 +11,46 @@
 		isEditor: boolean
 		newFlow: boolean
 		extra_perms: Record<string, any>
+		eventHandlers: GraphEventHandlers
+		modules: FlowModule[]
+		index: number
 	}
 </script>
 
 <NodeWrapper wrapperClass="shadow-none">
 	<TriggersWrapper
 		path={data.path}
+		on:new={(e) => {
+			console.log('Yes New script at index', data.index, e)
+			console.log('Event Handlers', data?.eventHandlers)
+			data?.eventHandlers.insert({
+				modules: data.modules,
+				index: 0,
+				kind: e.detail.kind,
+				inlineScript: e.detail.inlineScript
+			})
+			data?.eventHandlers.insert({
+				modules: data.modules,
+				index: 1,
+				kind: 'forloop',
+				light: true
+			})
+			data?.eventHandlers.addSchedulePoll()
+		}}
+		on:pickScript={(e) => {
+			data?.eventHandlers.insert({
+				modules: data.modules,
+				index: 0,
+				script: e.detail
+			})
+			data?.eventHandlers.insert({
+				modules: data.modules,
+				index: 1,
+				kind: 'forloop',
+				light: true
+			})
+			data?.eventHandlers.addSchedulePoll()
+		}}
 		on:openSchedules={() => data.openSchedules()}
 		on:triggerDetail={(e) => {
 			data.triggerDetail(e.detail)
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 45a084bb61..08222e009c 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -13,7 +13,6 @@
 	import type { FlowEditorContext } from '../../../flows/types'
 	import InsertTriggersButton from '../../../flows/map/InsertTriggersButton.svelte'
 	import TopLevelNode from '$lib/components/flows/pickers/TopLevelNode.svelte'
-	import type { TriggerContext } from '../../../triggers'
 	export let path: string
 	export let isEditor: boolean
 	export let newFlow: boolean
@@ -67,17 +66,8 @@
 	const { httpTriggers, selectedId, selectedTrigger, schedules, primarySchedule } =
 		getContext<FlowEditorContext>('FlowEditorContext') ?? {}
 
-	const { triggerModule } = getContext<TriggerContext>('TriggerContext') ?? {}
-
 	import { writable } from 'svelte/store'
-	import { pickScript } from '$lib/components/flows/flowStateUtils'
 
-	async function pickScriptEventHandler(path: string, summary: string, id: string) {
-		var module
-		var state
-		;[module, state] = await pickScript(path, summary, id)
-		$triggerModule = module
-	}
 	const modifiableTriggers = writable<
 		{ type: 'routes' | 'webhooks' | 'schedule' | 'email' | 'schedule_poll' }[]
 	>([{ type: 'schedule' }])
@@ -221,19 +211,7 @@
 				<!-- index={data.index ?? 0}
 					allowTrigger={data.enableTrigger}
 					modules={data?.modules ?? []} -->
-				<InsertTriggersButton
-					on:new={(e) => {
-						// console.log('new', e)
-						$selectedId = 'triggers'
-						$selectedTrigger = 'schedule_poll'
-						addTrigger('schedule_poll')
-					}}
-					on:pickScript={(e) => {
-						pickScriptEventHandler(e.detail.path, e.detail.summary, e.detail.id)
-						// console.log('pickScript', e)
-						close(null)
-					}}
-				>
+				<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)}