windmill-components 1.408.2 → 1.430.2

package/package/components/flows/content/FlowLoop.svelte

@@ -3,7 +3,6 @@ import FlowCard from '../common/FlowCard.svelte';
 import Toggle from '../../Toggle.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 // import FlowRetries from './FlowRetries.svelte'
@@ -18,6 +17,8 @@ import FlowLoopIterationPreview from '../../FlowLoopIterationPreview.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import IteratorGen from '../../copilot/IteratorGen.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
+import FlowPlugConnect from '../../FlowPlugConnect.svelte';
+import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
 const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 export let mod;
 export let parentModule;
@@ -26,6 +27,8 @@ export let noEditor;
 export let enableAi = false;
 let editor = undefined;
 let selected = 'early-stop';
+const { flowPropPickerConfig } = getContext('PropPickerContext');
+flowPropPickerConfig.set(undefined);
 $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false);
 let previewOpen = false;
 let jobId = undefined;
@@ -33,6 +36,16 @@ let job = undefined;
 let iteratorFieldFocused = false;
 let iteratorGen = undefined;
 $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
+function setExpr(code) {
+    if (mod.value.type === 'forloopflow') {
+        mod.value.iterator = {
+            type: 'javascript',
+            expr: code
+        };
+    }
+    editor?.setCode('');
+    editor?.insertAtCursor(code);
+}
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
@@ -122,6 +135,27 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 								over. Example : ["banana", "apple", flow_input.my_fruit].
 							</Tooltip>
 						</div>
+						<FlowPlugConnect
+							connecting={$flowPropPickerConfig?.insertionMode == CONNECT}
+							on:click={() => {
+								const config = {
+									insertionMode: CONNECT,
+									onSelect: (code) => {
+										setExpr(code)
+										return true
+									},
+									clearFocus: () => {
+										flowPropPickerConfig.set(undefined)
+									}
+								}
+								flowPropPickerConfig.set({
+									...config,
+									clearFocus: () => {
+										flowPropPickerConfig.set(undefined)
+									}
+								})
+							}}
+						/>
 						{#if enableAi}
 							<IteratorGen
 								bind:this={iteratorGen}
@@ -131,14 +165,7 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 									editor?.setSuggestion(e.detail)
 								}}
 								on:setExpr={(e) => {
-									if (mod.value.type === 'forloopflow') {
-										mod.value.iterator = {
-											type: 'javascript',
-											expr: e.detail
-										}
-									}
-									editor?.setCode('')
-									editor?.insertAtCursor(e.detail)
+									setExpr(e.detail)
 								}}
 								pickableProperties={stepPropPicker.pickableProperties}
 							/>
@@ -153,9 +180,15 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 							on:keyup={iteratorGen?.onKeyUp}
 						>
 							<PropPickerWrapper
+								alwaysOn
 								notSelectable
 								pickableProperties={stepPropPicker.pickableProperties}
 								on:select={({ detail }) => {
+									if ($flowPropPickerConfig?.insertionMode == CONNECT) {
+										setExpr(detail)
+										flowPropPickerConfig.set(undefined)
+										return
+									}
 									editor?.insertAtCursor(detail)
 									editor?.focus()
 								}}

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -52,6 +52,7 @@ export let scriptKind = 'script';
 export let scriptTemplate = 'script';
 export let noEditor;
 export let enableAi;
+let tag = undefined;
 let editor;
 let diffEditor;
 let modulePreview;
@@ -179,6 +180,7 @@ function setFlowInput(argName) {
 		>
 			<svelte:fragment slot="header">
 				<FlowModuleHeader
+					{tag}
 					bind:module={flowModule}
 					on:toggleSuspend={() => selectAdvanced('suspend')}
 					on:toggleSleep={() => selectAdvanced('sleep')}
@@ -200,6 +202,10 @@ function setFlowInput(argName) {
 							forceReload++
 							await reload(flowModule)
 						}
+						if (flowModule.value.type == 'flow') {
+							forceReload++
+							await reload(flowModule)
+						}
 					}}
 					on:createScriptFromInlineScript={async () => {
 						const [module, state] = await createScriptFromInlineScript(
@@ -299,6 +305,7 @@ function setFlowInput(argName) {
 								<div class="border-t">
 									{#key forceReload}
 										<FlowModuleScript
+											bind:tag
 											showAllCode={false}
 											path={flowModule.value.path}
 											hash={flowModule.value.hash}
@@ -307,7 +314,9 @@ function setFlowInput(argName) {
 								</div>
 							{/if}
 						{:else if flowModule.value.type === 'flow'}
-							<FlowPathViewer path={flowModule.value.path} />
+							{#key forceReload}
+								<FlowPathViewer path={flowModule.value.path} />
+							{/key}
 						{/if}
 					</Pane>
 					<Pane bind:size={editorSettingsPanelSize} minSize={20}>
@@ -324,12 +333,14 @@ function setFlowInput(argName) {
 							class={advancedSelected === 'runtime' ? 'h-[calc(100%-68px)]' : 'h-[calc(100%-34px)]'}
 						>
 							{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow')}
-								<div class="h-full overflow-auto px-2" id="flow-editor-step-input">
+								<div class="h-full overflow-auto bg-surface" id="flow-editor-step-input">
 									<PropPickerWrapper
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
+										noPadding
 									>
 										<InputTransformSchemaForm
+											class="px-1 xl:px-2"
 											bind:this={inputTransformSchemaForm}
 											pickableProperties={stepPropPicker.pickableProperties}
 											schema={$flowStateStore[$selectedId]?.schema ?? {}}

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -1,12 +1,13 @@
 <script>import Button from '../../common/button/Button.svelte';
 import {} from '../../../gen';
 import { createEventDispatcher, getContext } from 'svelte';
-import { Bed, Database, Gauge, GitFork, Pen, PhoneIncoming, Repeat, Save, Square, Voicemail } from 'lucide-svelte';
+import { Bed, Database, ExternalLink, Gauge, GitFork, Pen, PhoneIncoming, RefreshCcw, Repeat, Save, Square, Voicemail } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
 import { getLatestHashForScript } from '../../../scripts';
 import FlowModuleWorkerTagSelect from './FlowModuleWorkerTagSelect.svelte';
 export let module;
+export let tag;
 const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let customUi = getContext('customUi');
@@ -108,7 +109,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 				Edit {#if module.value.hash != undefined} (locked hash){/if}
 			</Button>
 		{/if}
-		<FlowModuleWorkerTagSelect bind:tag={module.value.tag_override} />
+		<FlowModuleWorkerTagSelect nullTag={tag} bind:tag={module.value.tag_override} />
 		{#if customUi?.scriptFork != false}
 			<Button
 				size="xs"
@@ -121,6 +122,32 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			</Button>
 		{/if}
 	{/if}
+	{#if module.value.type === 'flow'}
+		<Button
+			size="xs"
+			color="light"
+			on:click={async () => {
+				if (module.value.type == 'flow') {
+					window.open(`/flows/edit/${module.value.path}`, '_blank', 'noopener,noreferrer')
+				}
+			}}
+			startIcon={{ icon: Pen }}
+			iconOnly={false}
+		>
+			Edit <ExternalLink size={12} />
+		</Button>
+		<Button
+			size="xs"
+			color="light"
+			on:click={async () => {
+				dispatch('reload')
+			}}
+			startIcon={{
+				icon: RefreshCcw
+			}}
+			iconOnly={true}
+		/>
+	{/if}
 	<div class="px-0.5" />
 	{#if module.value.type === 'rawscript'}
 		<FlowModuleWorkerTagSelect bind:tag={module.value.tag} />

package/package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -3,6 +3,7 @@ import { type FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         module: FlowModule;
+        tag: string | undefined;
     };
     events: {
         toggleRetry: CustomEvent<any>;

package/package/components/flows/content/FlowModuleScript.svelte

@@ -9,6 +9,7 @@ export let hash = undefined;
 export let previousHash = undefined;
 export let showDate = false;
 export let showAllCode = true;
+export let tag = undefined;
 let code;
 let previousCode;
 let language;
@@ -25,6 +26,7 @@ async function loadCode(path, hash) {
         language = script.language;
         lock = script.lock;
         date = script.created_at;
+        tag = script.tag;
     }
     catch (e) {
         notFound = true;
@@ -55,6 +57,9 @@ export let showDiff = false;
 	{#if showDate && date}
 		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
+	{#if tag}
+		<div class="text-xs text-tertiary mb-4">tag: {tag}</div>
+	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}

package/package/components/flows/content/FlowModuleScript.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         previousHash?: string | undefined;
         showDate?: boolean | undefined;
         showAllCode?: boolean | undefined;
+        tag?: string | undefined;
         showDiff?: boolean | undefined;
     };
     events: {

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -47,6 +47,7 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 		{#if flowModule.sleep && schema.properties['sleep']}
 			<div class="border">
 				<PropPickerWrapper
+					noFlowPlugConnect={true}
 					notSelectable
 					{result}
 					displayContext={false}
@@ -62,6 +63,7 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 						{schema}
 						{previousModuleId}
 						argExtra={{ seconds: true }}
+						bind:editor
 					/>
 				</PropPickerWrapper>
 			</div>

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -175,6 +175,7 @@ let jsonView = false;
 						<div class="border">
 							<PropPickerWrapper
 								{result}
+								noFlowPlugConnect
 								displayContext={false}
 								pickableProperties={undefined}
 								on:select={({ detail }) => {
@@ -188,6 +189,7 @@ let jsonView = false;
 									argName="groups"
 									{schema}
 									{previousModuleId}
+									bind:editor
 								/>
 							</PropPickerWrapper>
 						</div>

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -1,7 +1,9 @@
 <script>import { getContext } from 'svelte';
 import { workerTags } from '../../../stores';
 import { WorkerService } from '../../../gen';
+import WorkerTagSelect from '../../WorkerTagSelect.svelte';
 export let tag;
+export let nullTag = undefined;
 const { flowStore, selectedId } = getContext('FlowEditorContext');
 loadWorkerGroups();
 async function loadWorkerGroups() {
@@ -15,28 +17,11 @@ async function loadWorkerGroups() {
 	{#if $workerTags?.length > 0}
 		<div class="w-40">
 			{#if $flowStore.tag == undefined}
-				<select
-					placeholder="Tag"
-					bind:value={tag}
-					on:change={(e) => {
-						if (tag == '') {
-							tag = undefined
-						}
-					}}
-				>
-					{#if tag}
-						<option value="">reset to default</option>
-					{:else}
-						<option value="" disabled selected>Tag</option>
-					{/if}
-					{#each $workerTags ?? [] as tag (tag)}
-						<option value={tag}>{tag}</option>
-					{/each}
-				</select>
+				<WorkerTagSelect {nullTag} bind:tag />
 			{:else}
 				<button
 					title="Worker Group is defined at the flow level"
-					class="w-full text-left items-center font-normal p-1 border text-xs rounded"
+					class="w-full text-left items-center font-normal p-1 py-2 border text-xs rounded"
 					on:click={() => ($selectedId = 'settings-worker-group')}
 				>
 					Flow's WG: {$flowStore.tag}

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         tag: string | undefined;
+        nullTag?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -16,7 +16,8 @@ import { dfs } from '../dfs';
 export let flowModule;
 export let noEditor = false;
 export let enableAi = false;
-const { selectedId, schedule, flowStateStore, flowInputsStore, flowStore } = getContext('FlowEditorContext');
+const { selectedId, flowStateStore, flowInputsStore, flowStore } = getContext('FlowEditorContext');
+const { primarySchedule } = getContext('TriggerContext');
 let scriptKind = 'script';
 let scriptTemplate = 'script';
 // These pointers are used to easily access previewArgs of parent module, and previous module
@@ -24,20 +25,32 @@ let scriptTemplate = 'script';
 export let parentModule = undefined;
 // Pointer to previous module, for easy access to testing results
 export let previousModule = undefined;
+function initializePrimaryScheduleForTriggerScript(module) {
+    if (!$primarySchedule) {
+        $primarySchedule = {
+            summary: 'Scheduled poll of flow',
+            args: {},
+            cron: '0 */15 * * *',
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            enabled: true
+        };
+    }
+    if (!$primarySchedule.cron) {
+        $primarySchedule.cron = '0 */15 * * *';
+    }
+    $primarySchedule.enabled = true;
+    module.stop_after_if = {
+        expr: 'result == undefined || Array.isArray(result) && result.length == 0',
+        skip_if_stopped: true
+    };
+}
 async function createModuleFromScript(path, summary, kind, hash) {
     const [module, state] = await pickScript(path, summary, flowModule.id, hash);
     if (kind == 'approval') {
         module.suspend = { required_events: 1, timeout: 1800 };
     }
     if (kind == 'trigger') {
-        if (!$schedule.cron) {
-            $schedule.cron = '0 */15 * * *';
-        }
-        $schedule.enabled = true;
-        module.stop_after_if = {
-            expr: 'result == undefined || Array.isArray(result) && result.length == 0',
-            skip_if_stopped: true
-        };
+        initializePrimaryScheduleForTriggerScript(module);
     }
     flowModule = module;
     $flowStateStore[module.id] = state;
@@ -113,15 +126,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					scriptTemplate = subkind
 
 					if (kind == 'trigger') {
-						if (!$schedule.cron) {
-							$schedule.cron = '0 */15 * * *'
-						}
-						$schedule.enabled = true
-
-						module.stop_after_if = {
-							expr: 'result == undefined || Array.isArray(result) && result.length == 0',
-							skip_if_stopped: true
-						}
+						initializePrimaryScheduleForTriggerScript(module)
 					}
 
 					if (kind == 'approval') {

package/package/components/flows/content/FlowPathViewer.svelte

@@ -2,18 +2,30 @@
 import FlowGraphViewer from '../../FlowGraphViewer.svelte';
 import { FlowService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
 export let path;
 export let noSide = false;
 let flow = undefined;
+const selectedTriggerStore = writable('webhooks');
+const primaryScheduleStore = writable(undefined);
+const triggersCount = writable(undefined);
+setContext('TriggerContext', {
+    primarySchedule: primaryScheduleStore,
+    selectedTrigger: selectedTriggerStore,
+    triggersCount: triggersCount,
+    simplifiedPoll: writable(false)
+});
 async function loadFlow(path) {
     flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });
+    triggersCount.set(await FlowService.getTriggersCountOfFlow({ workspace: $workspaceStore, path }));
 }
 $: path && loadFlow(path);
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto">
 	{#if flow}
-		<FlowGraphViewer {noSide} {flow} />
+		<FlowGraphViewer triggerNode={true} {noSide} {flow} />
 	{:else}
 		<Skeleton layout={[[40]]} />
 	{/if}