diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts index e322772c55..c0106b7ce5 100644 --- a/frontend/src/lib/components/flows/flowStateUtils.ts +++ b/frontend/src/lib/components/flows/flowStateUtils.ts @@ -85,6 +85,7 @@ export async function createInlineScriptModule( value: { type: 'rawscript', content: code, language, input_transforms: {} }, isTrigger: kind === 'trigger' } + console.log('flowModule', flowModule) return [flowModule, await loadFlowModuleState(flowModule)] } diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte index 0bff195221..b854e517f0 100644 --- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte +++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte @@ -45,8 +45,6 @@ let flowTutorials: FlowTutorials | undefined = undefined - let hasSchedulePoll = false - const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore, pathStore } = getContext('FlowEditorContext') @@ -102,6 +100,7 @@ module.stop_after_if = { skip_if_stopped: false, expr: 'true' } } if (inlineScript) { + console.log('inlineScript', inlineScript) const { language, kind, subkind } = inlineScript ;[module, state] = await createInlineScriptModule( language, @@ -256,7 +255,6 @@ } } } - $: console.log('has schedule poll', hasSchedulePoll) @@ -321,7 +319,6 @@ preprocessorModule={$flowStore.value?.preprocessor_module} {selectedId} {flowInputsStore} - {hasSchedulePoll} on:delete={({ detail }) => { let e = detail.detail dependents = getDependentComponents(e.id, $flowStore) @@ -330,9 +327,6 @@ 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) @@ -381,7 +375,7 @@ detail.flow, detail.inlineScript ) - $selectedId = detail.modules[detail.index ?? 0].id + //$selectedId = detail.modules[detail.index ?? 0].id console.log('Modules', detail.modules) } } @@ -457,12 +451,6 @@ on:openSchedules={() => { $selectedId = 'settings-schedule' }} - on:addSchedulePoll={() => { - hasSchedulePoll = true - }} - on:removeSchedulePoll={() => { - hasSchedulePoll = false - }} />
{ dispatch('selectedIteration', { ...detail, moduleId: moduleId }) }, - addSchedulePoll: () => { - dispatch('addSchedulePoll') - }, - removeSchedulePoll: () => { - dispatch('removeSchedulePoll') + simplifyFlow: (detail) => { + simplifyFlow = detail + console.log('simplifyFlow', detail) } }, success, @@ -196,9 +200,9 @@ dispatch('triggerDetail', e) }, isEditor: isEditor, - path - }, - hasSchedulePoll + path, + flowIsSimplifiable: !!flowIsSimplifiable + } ) const nodes = writable([]) @@ -261,109 +265,67 @@ return { nodes: updatedNodes, edges: updatedEdges } } - function removeForLoopNodes(nodes, edges) { - let updatedGraph = { - nodes: [...nodes], - edges: [...edges] - } - let forloopNode = updatedGraph.nodes.find((node) => node?.data?.value?.type === 'forloopflow') - - if (!forloopNode) { - return updatedGraph - } - - updatedGraph = removeInputNode(updatedGraph.nodes, updatedGraph.edges, forloopNode.id) - - return updatedGraph - } - - function removeForLoopStartNodes(nodes, edges) { - let updatedGraph = { - nodes: [...nodes], - edges: [...edges] - } - let forloopNode = updatedGraph.nodes.find((node) => node?.type === 'forLoopStart') - if (!forloopNode) { - return updatedGraph - } - forloopEdge = updatedGraph.edges.find((edge) => edge.source === forloopNode.id) - return removeInputNode(updatedGraph.nodes, updatedGraph.edges, forloopNode.id) - } - - function removeForLoopEndNodes(nodes, edges) { - let updatedGraph = { - nodes: [...nodes], - edges: [...edges] - } - let forloopNode = updatedGraph.nodes.find((node) => node?.type === 'forLoopEnd') - if (!forloopNode) { - return updatedGraph - } - return removeInputNode(updatedGraph.nodes, updatedGraph.edges, forloopNode.id) - } - - function removeTriggerScriptModule(nodes, edges) { - let updatedGraph = { - nodes: [...nodes], - edges: [...edges] - } - let triggerScriptModule = updatedGraph.nodes.find((node) => node?.data?.module?.isTrigger) - console.log('triggerScriptModule', triggerScriptModule) - if (!triggerScriptModule) { - return updatedGraph - } - return removeInputNode(updatedGraph.nodes, updatedGraph.edges, triggerScriptModule.id) - } - - function processGraph(graph) { + function processGraph(graph, simplifiable) { let newGraph = { nodes: graph.nodes, edges: graph.edges } newGraph = removeInputNode(newGraph.nodes, newGraph.edges, 'Input') - newGraph = removeForLoopNodes(newGraph.nodes, newGraph.edges) - newGraph = removeForLoopStartNodes(newGraph.nodes, newGraph.edges) - newGraph = removeForLoopEndNodes(newGraph.nodes, newGraph.edges) - newGraph = removeTriggerScriptModule(newGraph.nodes, newGraph.edges) - newGraph.edges = replaceEdge(newGraph.edges, forloopEdge) + newGraph = removeInputNode(newGraph.nodes, newGraph.edges, simplifiable.forLoopNode.id) + newGraph = removeInputNode(newGraph.nodes, newGraph.edges, simplifiable.triggerNode.id) + //newGraph.edges = replaceEdge(newGraph.edges, forloopEdge) return newGraph } - function replaceEdge(edges, edge) { - if (!edge) { - return edges + function isSimplifiable(graph): boolean | { triggerNode: any; forLoopNode: any } { + if (!graph || !graph.nodes || graph.nodes.length < 6) { + return false } - const schedulePollEdge = edges.find((edge) => edge.source === 'SchedulePoll') - if (!schedulePollEdge) { - return edges - } - const targetNode = schedulePollEdge.target - edge.source = 'SchedulePoll' - edge.target = targetNode - edges.push(edge) - // Remove the original SchedulePoll edge - return edges.filter((e) => e !== schedulePollEdge) + // Find the node that has 'Input' as parent in parentIds + const triggerNode = graph.nodes.find( + (node) => + node.data?.parentIds && + node.data.parentIds.includes('Input') && + node.data?.module?.isTrigger + ) + console.log('dbg', triggerNode) + + if (!triggerNode) { + return false + } + + // Check if there's a node which parent is triggerNode and that is a for loop + const forLoopNode = graph.nodes.find( + (node) => + node.data?.parentIds && + node.data.parentIds.includes(triggerNode.id) && + node.data.value?.type === 'forloopflow' + ) + + if (!forLoopNode) { + return false + } + return { triggerNode: triggerNode, forLoopNode: forLoopNode } } + $: console.log('isSimplifiable', isSimplifiable(graph)) function updateStores() { if (graph.error) { return } + let newGraph = graph - if (hasSchedulePoll) { - graph = processGraph(graph) + if (flowIsSimplifiable && simplifyFlow) { + console.log('simplifying flow') + newGraph = processGraph(graph, flowIsSimplifiable) } - console.log('graph nodes after removal', graph.nodes) - console.log('graph edges after removal', graph.edges) - console.log('graph nodes', graph.nodes) - console.log('graph edges', graph.edges) - $nodes = layoutNodes(graph.nodes) - $edges = graph.edges + $nodes = layoutNodes(newGraph.nodes) + $edges = newGraph.edges console.log('nodes', $nodes) height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight) } - $: graph && updateStores() + $: (graph || simplifyFlow) && updateStores() const nodeTypes = { input2: InputNode, @@ -378,8 +340,7 @@ branchOneStart: BranchOneStart, branchOneEnd: BranchAllEndNode, noBranch: NoBranchNode, - trigger: TriggersNode, - schedulePoll: SchedulePollNode + trigger: TriggersNode } as any const edgeTypes = { diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts index bc7a19925d..c79f522298 100644 --- a/frontend/src/lib/components/graph/graphBuilder.ts +++ b/frontend/src/lib/components/graph/graphBuilder.ts @@ -14,8 +14,7 @@ export type GraphEventHandlers = { move: (module: FlowModule, modules: FlowModule[]) => void selectedIteration: (detail, moduleId: string) => void changeId: (newId: string) => void - addSchedulePoll: () => void - removeSchedulePoll: () => void + simplifyFlow: (detail: boolean) => void } export default function graphBuilder( @@ -33,8 +32,8 @@ export default function graphBuilder( openSchedules?: () => void triggerDetail?: (e) => void isEditor?: boolean - }, - hasSchedulePoll?: boolean + flowIsSimplifiable?: boolean + } ): { nodes: Node[] edges: Edge[] @@ -162,54 +161,32 @@ export default function graphBuilder( } if (extra.path) { - if (hasSchedulePoll) { - const schedulePollNode: Node = { - id: 'SchedulePoll', - position: { x: -1, y: -1 }, - type: 'schedulePoll', - data: { - eventHandlers: eventHandlers, - modules: modules, - ...extra - } - } - nodes.push(schedulePollNode) - if (!!preprocessorModule) { - addEdge('SchedulePoll', preprocessorModule.id, { - type: 'empty' - }) - } else { - addEdge('SchedulePoll', 'Input', { - type: 'empty' - }) - } - } else { - 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, - ...extra - } + const triggerNode: Node = { + id: 'Trigger', + position: { x: -1, y: -1 }, + type: 'trigger', + data: { + flowIsSimplifiable: triggerProps?.flowIsSimplifiable, + path: triggerProps?.path, + openSchedules: triggerProps?.openSchedules, + triggerDetail: triggerProps?.triggerDetail, + isEditor: triggerProps?.isEditor, + newFlow: extra.newFlow, + eventHandlers: eventHandlers, + modules: modules, + ...extra } + } - nodes.push(triggerNode) - if (!!preprocessorModule) { - addEdge('Trigger', preprocessorModule.id, { - type: 'empty' - }) - } else { - addEdge('Trigger', 'Input', { - type: 'empty' - }) - } + 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 deleted file mode 100644 index 89c0dcd878..0000000000 --- a/frontend/src/lib/components/graph/renderers/nodes/ShedulePollNode.svelte +++ /dev/null @@ -1,111 +0,0 @@ - - - -
- - -
-
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte index 317e8e088d..6b135d2cfe 100644 --- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte +++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte @@ -15,6 +15,7 @@ modules: FlowModule[] index: number disableAi: boolean + flowIsSimplifiable: boolean } @@ -23,6 +24,7 @@ {data} path={data.path} on:new={(e) => { + console.log('new', e) data?.eventHandlers.insert({ modules: data.modules, index: 0, @@ -35,7 +37,6 @@ kind: 'forloop', light: true }) - data?.eventHandlers.addSchedulePoll() }} on:pickScript={(e) => { data?.eventHandlers.insert({ @@ -49,7 +50,6 @@ kind: 'forloop', light: true }) - data?.eventHandlers.addSchedulePoll() }} on:openSchedules={() => data.openSchedules()} on:triggerDetail={(e) => { diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte index 72b40cb1e7..e2e7764bbe 100644 --- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte +++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte @@ -15,6 +15,8 @@ import type { FlowModule } from '$lib/gen' import type { GraphEventHandlers } from '../../graphBuilder' import { twMerge } from 'tailwind-merge' + import MapItem from '../../../flows/map/MapItem.svelte' + import Toggle from '$lib/components/Toggle.svelte' export let path: string export let isEditor: boolean @@ -24,6 +26,7 @@ index: number eventHandlers: GraphEventHandlers disableAi: boolean + flowIsSimplifiable: boolean } const dispatch = createEventDispatcher() @@ -74,6 +77,13 @@ const { httpTriggers, selectedId, selectedTrigger, schedules, primarySchedule } = getContext('FlowEditorContext') ?? {} + + let simplifiedTriggers = false + + let triggerScriptModule: FlowModule | undefined = undefined + $: triggerScriptModule = data.modules.find((mod) => mod.isTrigger) + + $: data.eventHandlers.simplifyFlow(simplifiedTriggers) {#if isEditor} @@ -85,81 +95,83 @@ ) ? 'outline outline-offset-1 outline-2 outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400' : ''}" - on:click={() => ($selectedId = 'triggers')} + on:click|self={() => ($selectedId = 'triggers')} > -
-
Triggers
-
+ {#if !simplifiedTriggers} +
+
Triggers
+
- - - {#if newFlow} - Deploy the flow to see webhooks triggers - {:else} - See default webhooks triggers - {/if} - - { - if (isEditor) { - $selectedTrigger = 'webhooks' - $selectedId = 'webhooks' - } else { - dispatch('triggerDetail', 'webhooks') - } - }} - disabled={newFlow} - > - - - + + + {#if newFlow} + Deploy the flow to see webhooks triggers + {:else} + See default webhooks triggers + {/if} + + { + if (isEditor) { + $selectedTrigger = 'webhooks' + $selectedId = 'triggers' + } else { + dispatch('triggerDetail', 'webhooks') + } + }} + disabled={newFlow} + > + + + - - - {#if newFlow} - Deploy the flow to see email triggers - {:else} - See all email triggers - {/if} - - { - if (isEditor) { - $selectedTrigger = 'mail' - $selectedId = 'mail' - } else { - dispatch('triggerDetail', 'mail') - } - }} - disabled={newFlow} - > - - - + + + {#if newFlow} + Deploy the flow to see email triggers + {:else} + See all email triggers + {/if} + + { + if (isEditor) { + $selectedTrigger = 'mail' + $selectedId = 'triggers' + } else { + dispatch('triggerDetail', 'mail') + } + }} + disabled={newFlow} + > + + + - - - {#if newFlow} - Deploy the flow to add routes triggers - {:else} - See all routes triggers - {/if} - - { - if (isEditor) { - $selectedTrigger = 'routes' - $selectedId = 'routes' - } else { - dispatch('triggerDetail', 'routes') - } - }} - disabled={newFlow} - > - - - - + + + {#if newFlow} + Deploy the flow to add routes triggers + {:else} + See all routes triggers + {/if} + + { + if (isEditor) { + $selectedTrigger = 'routes' + $selectedId = 'triggers' + } else { + dispatch('triggerDetail', 'routes') + } + }} + disabled={newFlow} + > + + + + + {/if} See all schedules triggers @@ -167,7 +179,7 @@ on:click={() => { if (isEditor) { $selectedTrigger = 'schedules' - $selectedId = 'schedules' + $selectedId = 'triggers' } else { dispatch('triggerDetail', 'schedule') } @@ -182,43 +194,77 @@ - { - // 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' - )} - /> + + {#if !simplifiedTriggers && !data.flowIsSimplifiable} + { + dispatch('new', e.detail) + simplifiedTriggers = true + }} + on:pickScript={(e) => { + dispatch('pickScript', e.detail) + simplifiedTriggers = true + }} + 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' + )} + /> + {/if} + + {#if triggerScriptModule && simplifiedTriggers} +
+ { + data.eventHandlers.delete(e.detail, '') + }} + on:insert={(e) => { + data.eventHandlers.insert(e.detail) + }} + on:changeId={(e) => { + data.eventHandlers.changeId(e.detail) + }} + on:move={(e) => { + if (triggerScriptModule) { + data.eventHandlers.move(triggerScriptModule, data.modules) + } + }} + on:newBranch={(e) => { + if (triggerScriptModule) { + data.eventHandlers.newBranch(triggerScriptModule) + } + }} + on:select={(e) => { + data.eventHandlers.select(e.detail) + }} + /> +
+ {/if} + + {#if data.flowIsSimplifiable} + { + e.stopPropagation() + }} + /> + {/if}