windmill-components 1.408.1 → 1.430.2

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -1,13 +1,14 @@
-<script context="module">export {};
+<script context="module">export const CONNECT = 'connect';
 </script>
 
 <script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
 import PropPickerResult from '../../propertyPicker/PropPickerResult.svelte';
-import { clickOutside, sendUserToast } from '../../../utils';
-import { createEventDispatcher, setContext } from 'svelte';
+import { clickOutside } from '../../../utils';
+import { createEventDispatcher, getContext, setContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
+import AnimatedButton from '../../common/button/AnimatedButton.svelte';
 export let pickableProperties;
 export let result = undefined;
 export let extraResults = undefined;
@@ -16,73 +17,121 @@ export let error = false;
 export let displayContext = true;
 export let notSelectable = false;
 export let noPadding = false;
+export let alwaysOn = false;
+export let paneClass = '';
+export let noFlowPlugConnect = false;
 const propPickerConfig = writable(undefined);
+const inputMatches = writable(undefined);
 const dispatch = createEventDispatcher();
+const { flowPropPickerConfig } = getContext('PropPickerContext');
+flowPropPickerConfig.set(undefined);
 setContext('PropPickerWrapper', {
     propPickerConfig,
+    inputMatches,
     focusProp: (propName, insertionMode, onSelect) => {
-        propPickerConfig.set({
+        const config = {
             propName,
             insertionMode,
-            onSelect
-        });
+            onSelect,
+            clearFocus: () => {
+                propPickerConfig.set(undefined);
+                flowPropPickerConfig.set(undefined);
+            }
+        };
+        propPickerConfig.set(config);
+        if (!noFlowPlugConnect) {
+            flowPropPickerConfig.set({
+                ...config,
+                clearFocus: () => {
+                    propPickerConfig.set(undefined);
+                    flowPropPickerConfig.set(undefined);
+                }
+            });
+        }
     },
     clearFocus: () => {
+        flowPropPickerConfig.set(undefined);
         propPickerConfig.set(undefined);
     }
 });
+async function getPropPickerElements() {
+    return Array.from(document.querySelectorAll('[data-prop-picker], [data-prop-picker] *'));
+}
 </script>
 
 <div
 	class="h-full w-full"
-	use:clickOutside
-	on:click_outside={() => propPickerConfig.set(undefined)}
+	data-prop-picker-root
+	use:clickOutside={{ capture: true, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		propPickerConfig.set(undefined)
+		flowPropPickerConfig.set(undefined)
+	}}
 >
-	<Splitpanes>
+	<Splitpanes class={$propPickerConfig ? 'splitpanes-remove-splitter' : ''}>
 		<Pane
 			minSize={20}
 			size={60}
-			class={twMerge('relative !transition-none', noPadding ? '' : 'p-2')}
+			class={twMerge('relative !transition-none ', noPadding ? '' : 'p-2')}
 		>
 			<slot />
 		</Pane>
 		<Pane
 			minSize={20}
 			size={40}
-			class="pt-2 relative !transition-none {$propPickerConfig ? 'border-2 border-blue-500' : ''}"
+			class="!transition-none z-1000 {$propPickerConfig ? 'ml-[-1px]' : ''} {paneClass}"
 		>
-			{#if result}
-				<PropPickerResult
-					{result}
-					{extraResults}
-					{flow_input}
-					on:select={({ detail }) => {
-						if (!notSelectable && !$propPickerConfig) {
-							sendUserToast('Set cursor within an input or click on the plug first', true)
-						}
-						dispatch('select', detail)
-						if ($propPickerConfig?.onSelect(detail)) {
-							propPickerConfig.set(undefined)
-						}
-					}}
-				/>
-			{:else if pickableProperties}
-				<PropPicker
-					{displayContext}
-					{error}
-					{pickableProperties}
-					{notSelectable}
-					on:select={({ detail }) => {
-						if (!notSelectable && !$propPickerConfig) {
-							sendUserToast('Set cursor within an input or click on the plug first', true)
-						}
-						dispatch('select', detail)
-						if ($propPickerConfig?.onSelect(detail)) {
-							propPickerConfig.set(undefined)
-						}
-					}}
-				/>
-			{/if}
+			<AnimatedButton
+				animate={$propPickerConfig?.insertionMode == 'connect'}
+				baseRadius="4px"
+				wrapperClasses="h-full w-full pt-2 !bg-surface "
+				marginWidth="3px"
+				ringColor={$propPickerConfig?.insertionMode == 'insert' ||
+				$propPickerConfig?.insertionMode == 'append'
+					? '#3b82f6'
+					: 'transparent'}
+				animationDuration="4s"
+			>
+				{#if result != undefined}
+					<PropPickerResult
+						{result}
+						{extraResults}
+						{flow_input}
+						allowCopy={!notSelectable && !$propPickerConfig}
+						on:select={({ detail }) => {
+							dispatch('select', detail)
+							if ($propPickerConfig?.onSelect(detail)) {
+								$propPickerConfig?.clearFocus()
+							}
+						}}
+					/>
+				{:else if pickableProperties}
+					<PropPicker
+						{alwaysOn}
+						{displayContext}
+						{error}
+						previousId={pickableProperties?.previousId}
+						{pickableProperties}
+						allowCopy={!notSelectable && !$propPickerConfig}
+						on:select={({ detail }) => {
+							dispatch('select', detail)
+							if ($propPickerConfig?.onSelect(detail)) {
+								$propPickerConfig?.clearFocus()
+							}
+						}}
+					/>
+				{/if}
+			</AnimatedButton>
 		</Pane>
 	</Splitpanes>
 </div>
+
+<style>
+	:global(.splitpanes-remove-splitter > .splitpanes__pane) {
+		background-color: inherit !important;
+	}
+	:global(.splitpanes-remove-splitter > .splitpanes__splitter) {
+		background-color: transparent !important;
+		width: 0 !important;
+		border: none !important;
+	}</style>

package/package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -1,14 +1,19 @@
 import { SvelteComponent } from "svelte";
-type InsertionMode = 'append' | 'connect' | 'insert';
 type SelectCallback = (path: string) => boolean;
-type PropPickerConfig = {
-    insertionMode: InsertionMode;
-    propName: string;
+export declare const CONNECT: "connect";
+export type PropPickerConfig = {
+    propName?: string;
     onSelect: SelectCallback;
+    clearFocus: () => void;
+    insertionMode: 'append' | 'connect' | 'insert';
 };
 export type PropPickerWrapperContext = {
     propPickerConfig: Writable<PropPickerConfig | undefined>;
-    focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void;
+    inputMatches: Writable<{
+        word: string;
+        value: string;
+    }[] | undefined>;
+    focusProp: (propName: string, insertionMode: 'append' | 'connect' | 'insert', onSelect: SelectCallback) => void;
     clearFocus: () => void;
 };
 import { type Writable } from 'svelte/store';
@@ -23,6 +28,9 @@ declare const __propDef: {
         displayContext?: boolean | undefined;
         notSelectable?: boolean | undefined;
         noPadding?: boolean | undefined;
+        alwaysOn?: boolean | undefined;
+        paneClass?: string | undefined;
+        noFlowPlugConnect?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/flows/scheduleUtils.d.ts

@@ -1,8 +1,7 @@
-export type Schedule = {
-    summary: string | undefined;
-    args: Record<string, any>;
-    cron: string;
-    timezone: string;
-    enabled: boolean;
-};
-export declare function loadFlowSchedule(path: string, workspace: string): Promise<Schedule>;
+/// <reference types="svelte" />
+import { type Schedule, type TriggersCount } from '../../gen';
+import type { ScheduleTrigger } from '../triggers';
+import type { Writable } from 'svelte/store';
+export declare function loadFlowSchedule(path: string, workspace: string): Promise<ScheduleTrigger>;
+export declare function loadSchedules(forceRefresh: boolean, path: string, isFlow: boolean, schedules: Writable<Schedule[] | undefined>, primarySchedule: Writable<ScheduleTrigger | false | undefined>, initialPrimarySchedule: Writable<ScheduleTrigger | false | undefined>, workspace: string, triggersCount: Writable<TriggersCount | undefined>): Promise<void>;
+export declare function saveSchedule(path: string, newItem: boolean, workspace: string, primarySchedule: Writable<ScheduleTrigger | false | undefined>, isFlow: boolean): Promise<void>;

package/package/components/flows/scheduleUtils.js

@@ -1,4 +1,6 @@
 import { ScheduleService } from '../../gen';
+import { get } from 'svelte/store';
+import { sendUserToast } from '../../utils';
 // Load the schedule of a flow given its path and the workspace
 export async function loadFlowSchedule(path, workspace) {
     const existsSchedule = await ScheduleService.existsSchedule({
@@ -20,3 +22,92 @@ export async function loadFlowSchedule(path, workspace) {
         args: schedule.args ?? {}
     };
 }
+export async function loadSchedules(forceRefresh, path, isFlow, schedules, primarySchedule, initialPrimarySchedule, workspace, triggersCount) {
+    console.log('loading schedules for path', path);
+    if (!path || path == '') {
+        schedules.set([]);
+        primarySchedule.update((ps) => (ps === undefined ? false : ps));
+        initialPrimarySchedule.set(structuredClone(get(primarySchedule)));
+        return;
+    }
+    console.log('loading schedules for path', path);
+    try {
+        const allSchedules = await ScheduleService.listSchedules({
+            workspace,
+            path: path,
+            isFlow
+        });
+        const primary = allSchedules.find((s) => s.path == path);
+        let remotePrimarySchedule = primary
+            ? {
+                summary: primary.summary,
+                args: primary.args ?? {},
+                cron: primary.schedule,
+                timezone: primary.timezone,
+                enabled: primary.enabled
+            }
+            : false;
+        primarySchedule.update((ps) => (ps === undefined || forceRefresh ? remotePrimarySchedule : ps));
+        initialPrimarySchedule.set(structuredClone(remotePrimarySchedule));
+        triggersCount.update((tc) => {
+            const primary = get(primarySchedule);
+            return {
+                ...(tc ?? {}),
+                schedule_count: allSchedules.length,
+                primary_schedule: primary ? { schedule: primary.cron } : undefined
+            };
+        });
+        schedules.set(allSchedules.filter((s) => s.path != path));
+    }
+    catch (e) {
+        console.error('impossible to load schedules', e);
+    }
+}
+export async function saveSchedule(path, newItem, workspace, primarySchedule, isFlow) {
+    const scheduleExists = path != '' &&
+        !newItem &&
+        (await ScheduleService.existsSchedule({
+            workspace,
+            path
+        }));
+    if (scheduleExists) {
+        console.log('primary schedule exists');
+        const primary = get(primarySchedule);
+        if (primary) {
+            await ScheduleService.updateSchedule({
+                workspace,
+                path,
+                requestBody: {
+                    summary: primary.summary,
+                    args: primary.args,
+                    schedule: primary.cron,
+                    timezone: primary.timezone
+                }
+            });
+            sendUserToast(`Primary schedule updated`);
+        }
+        else {
+            await ScheduleService.deleteSchedule({ workspace, path });
+            sendUserToast(`Primary schedule deleted`);
+        }
+    }
+    else {
+        const primary = get(primarySchedule);
+        if (primary) {
+            await ScheduleService.createSchedule({
+                workspace,
+                requestBody: {
+                    path,
+                    script_path: path,
+                    is_flow: isFlow,
+                    summary: primary.summary,
+                    args: primary.args,
+                    schedule: primary.cron,
+                    timezone: primary.timezone,
+                    enabled: primary.enabled
+                }
+            });
+            sendUserToast(`Primary schedule created`);
+        }
+    }
+}

package/package/components/flows/types.d.ts

@@ -4,7 +4,6 @@ import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
-import type { Schedule } from './scheduleUtils';
 import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
@@ -24,7 +23,6 @@ export type FlowEditorContext = {
         module: FlowModule;
         modules: FlowModule[];
     } | undefined>;
-    schedule: Writable<Schedule>;
     previewArgs: Writable<Record<string, any>>;
     scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>;
     history: History<OpenFlow>;

package/package/components/graph/FlowGraphV2.svelte

@@ -1,10 +1,10 @@
-<script>import {} from '../../gen';
+<script>import { FlowService } from '../../gen';
 import { NODE } from '.';
-import { createEventDispatcher, onMount, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+import { createEventDispatcher, getContext, onDestroy, onMount, setContext } from 'svelte';
+import { get, writable } from 'svelte/store';
 import '@xyflow/svelte/dist/style.css';
 import { SvelteFlow, ConnectionLineType, Controls, ControlButton } from '@xyflow/svelte';
-import graphBuilder from './graphBuilder';
+import { graphBuilder, isTriggerStep } from './graphBuilder';
 import ModuleNode from './renderers/nodes/ModuleNode.svelte';
 import InputNode from './renderers/nodes/InputNode.svelte';
 import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
@@ -21,9 +21,14 @@ import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
 import { encodeState } from '../../utils';
 import BranchOneStart from './renderers/nodes/BranchOneStart.svelte';
 import NoBranchNode from './renderers/nodes/NoBranchNode.svelte';
+import HiddenBaseEdge from './renderers/edges/HiddenBaseEdge.svelte';
+import TriggersNode from './renderers/nodes/TriggersNode.svelte';
 import { Alert, Drawer } from '../common';
 import Button from '../common/button/Button.svelte';
 import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte';
+import BranchOneEndNode from './renderers/nodes/branchOneEndNode.svelte';
+import { workspaceStore } from '../../stores';
+import SubflowBound from './renderers/nodes/SubflowBound.svelte';
 export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
@@ -33,6 +38,8 @@ export let maxHeight = undefined;
 export let notSelectable = false;
 export let flowModuleStates = undefined;
 export let selectedId = writable(undefined);
+export let path = undefined;
+export let newFlow = false;
 export let insertable = false;
 export let scroll = false;
 export let moving = undefined;
@@ -41,11 +48,38 @@ export let download = false;
 export let fullSize = false;
 export let disableAi = false;
 export let flowInputsStore = writable(undefined);
+export let triggerNode = false;
+export let workspace = $workspaceStore ?? 'NO_WORKSPACE';
 let useDataflow = writable(false);
 setContext('FlowGraphContext', { selectedId, flowInputsStore, useDataflow });
+const triggerContext = getContext('TriggerContext');
 const dispatch = createEventDispatcher();
 let fullWidth = 0;
 let width = 0;
+export let allowSimplifiedPoll = true;
+let simplifiableFlow = undefined;
+export let expandedSubflows = {};
+if (triggerContext && allowSimplifiedPoll) {
+    if (isSimplifiable(modules)) {
+        triggerContext?.simplifiedPoll?.set(true);
+    }
+    triggerContext?.simplifiedPoll.subscribe((value) => {
+        computeSimplifiableFlow(modules ?? [], value ?? false);
+    });
+}
+function computeSimplifiableFlow(modules, simplifiedFlow) {
+    const isSimplif = isSimplifiable(modules);
+    simplifiableFlow = isSimplif ? { simplifiedFlow } : undefined;
+}
+onDestroy(() => {
+    if (isSimplifiable(modules)) {
+        triggerContext?.simplifiedPoll?.set(undefined);
+    }
+});
+function onModulesChange(modules) {
+    computeSimplifiableFlow(modules, triggerContext?.simplifiedPoll ? get(triggerContext.simplifiedPoll) ?? false : false);
+}
+$: allowSimplifiedPoll && onModulesChange(modules ?? []);
 function layoutNodes(nodes) {
     let seenId = [];
     for (const n of nodes) {
@@ -93,12 +127,7 @@ function layoutNodes(nodes) {
     }));
     return newNodes;
 }
-$: graph = graphBuilder(modules, {
-    disableAi,
-    insertable,
-    flowModuleStates,
-    selectedId: $selectedId
-}, failureModule, preprocessorModule, {
+let eventHandler = {
     deleteBranch: (detail, label) => {
         $selectedId = label;
         dispatch('deleteBranch', detail);
@@ -129,20 +158,51 @@ $: graph = graphBuilder(modules, {
     },
     selectedIteration: (detail, moduleId) => {
         dispatch('selectedIteration', { ...detail, moduleId: moduleId });
+    },
+    simplifyFlow: (detail) => {
+        triggerContext?.simplifiedPoll.set(detail);
+    },
+    expandSubflow: async (id, path) => {
+        const flow = await FlowService.getFlowByPath({ workspace: workspace, path });
+        expandedSubflows[id] = flow.value.modules;
+        expandedSubflows = expandedSubflows;
+    },
+    minimizeSubflow: (id) => {
+        delete expandedSubflows[id];
+        expandedSubflows = expandedSubflows;
     }
-}, success, $useDataflow, $selectedId, moving);
+};
+$: graph = graphBuilder(modules, {
+    disableAi,
+    insertable,
+    flowModuleStates,
+    selectedId: $selectedId,
+    path,
+    newFlow
+}, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 const nodes = writable([]);
 const edges = writable([]);
 let height = 0;
+function isSimplifiable(modules) {
+    if (!modules || modules?.length !== 2) {
+        return false;
+    }
+    if (isTriggerStep(modules?.[0])) {
+        let secondValue = modules?.[1].value;
+        return secondValue.type == 'forloopflow';
+    }
+    return false;
+}
 function updateStores() {
     if (graph.error) {
         return;
     }
-    $nodes = layoutNodes(graph?.nodes);
-    $edges = graph.edges;
-    height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight);
+    let newGraph = graph;
+    $nodes = layoutNodes(newGraph.nodes);
+    $edges = newGraph.edges;
+    height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
-$: graph && updateStores();
+$: (graph || allowSimplifiedPoll) && updateStores();
 const nodeTypes = {
     input2: InputNode,
     module: ModuleNode,
@@ -154,13 +214,16 @@ const nodeTypes = {
     whileLoopStart: ForLoopStartNode,
     whileLoopEnd: ForLoopEndNode,
     branchOneStart: BranchOneStart,
-    branchOneEnd: BranchAllEndNode,
-    noBranch: NoBranchNode
+    branchOneEnd: BranchOneEndNode,
+    subflowBound: SubflowBound,
+    noBranch: NoBranchNode,
+    trigger: TriggersNode
 };
 const edgeTypes = {
     edge: BaseEdge,
     empty: EmptyEdge,
-    dataflowedge: DataflowEdge
+    dataflowedge: DataflowEdge,
+    hiddenedge: HiddenBaseEdge
 };
 const proOptions = { hideAttribution: true };
 $: showDataflow =
@@ -169,7 +232,8 @@ $: showDataflow =
         !$selectedId.startsWith('settings') &&
         $selectedId !== 'failure' &&
         $selectedId !== 'preprocessor' &&
-        $selectedId !== 'Result';
+        $selectedId !== 'Result' &&
+        $selectedId !== 'triggers';
 const viewport = writable({
     x: 0,
     y: 35,
@@ -195,7 +259,7 @@ let yamlEditorDrawer = undefined;
 
 <div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
 	{#if graph?.error}
-		<div class="center-center">
+		<div class="center-center p-2">
 			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
 				{graph.error}
 
@@ -210,7 +274,7 @@ let yamlEditorDrawer = undefined;
 	{:else}
 		<SvelteFlow
 			on:paneclick={(e) => {
-				window.dispatchEvent(new Event('focus'))
+				document.dispatchEvent(new Event('focus'))
 			}}
 			{nodes}
 			{edges}

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         notSelectable?: boolean | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
         selectedId?: Writable<string | undefined> | undefined;
+        path?: string | undefined;
+        newFlow?: boolean | undefined;
         insertable?: boolean | undefined;
         scroll?: boolean | undefined;
         moving?: string | undefined;
@@ -22,6 +24,10 @@ declare const __propDef: {
         fullSize?: boolean | undefined;
         disableAi?: boolean | undefined;
         flowInputsStore?: Writable<FlowInput | undefined> | undefined;
+        triggerNode?: boolean | undefined;
+        workspace?: string | undefined;
+        allowSimplifiedPoll?: boolean | undefined;
+        expandedSubflows?: Record<string, FlowModule[]> | undefined;
     };
     events: {
         deleteBranch: CustomEvent<any>;

package/package/components/graph/graphBuilder.d.ts

@@ -9,8 +9,16 @@ export type GraphEventHandlers = {
     move: (module: FlowModule, modules: FlowModule[]) => void;
     selectedIteration: (detail: any, moduleId: string) => void;
     changeId: (newId: string) => void;
+    simplifyFlow: (detail: boolean) => void;
+    expandSubflow: (id: string, path: string) => void;
+    minimizeSubflow: (id: string) => void;
 };
-export default function graphBuilder(modules: FlowModule[] | undefined, extra: Record<string, any>, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined): {
+export type SimplifiableFlow = {
+    simplifiedFlow: boolean;
+};
+export declare function isTriggerStep(module: FlowModule | undefined): boolean;
+export declare function buildPrefix(prefix: string | undefined, id: string): string;
+export declare function graphBuilder(modules: FlowModule[] | undefined, extra: Record<string, any>, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined, simplifiableFlow: SimplifiableFlow | undefined, flowPathForTriggerNode: string | undefined, expandedSubflows: Record<string, FlowModule[]>): {
     nodes: Node[];
     edges: Edge[];
     error?: string | undefined;