windmill-components 1.394.8 → 1.405.5

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, getContext, tick } from 'svelte';
-import { createBranchAll, createBranches, createLoop, createWhileLoop, deleteFlowStateById, emptyModule, pickScript } from '../flowStateUtils';
+import { createInlineScriptModule, createBranchAll, createBranches, createLoop, createWhileLoop, deleteFlowStateById, emptyModule, pickScript, pickFlow } from '../flowStateUtils';
 import { emptyFlowModuleState, initFlowStepWarnings } from '../utils';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowConstantsItem from './FlowConstantsItem.svelte';
@@ -25,11 +25,15 @@ export let disableSettings = false;
 export let smallErrorHandler = false;
 let flowTutorials = undefined;
 const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore } = getContext('FlowEditorContext');
-async function insertNewModuleAtIndex(modules, index, kind, wsScript) {
+async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsFlow, inlineScript) {
     push(history, $flowStore);
     var module = emptyModule($flowStateStore, $flowStore, kind == 'flow');
     var state = emptyFlowModuleState();
-    if (wsScript) {
+    if (wsFlow) {
+        ;
+        [module, state] = await pickFlow(wsFlow.path, wsFlow.summary, module.id);
+    }
+    else if (wsScript) {
         ;
         [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
     }
@@ -60,11 +64,33 @@ async function insertNewModuleAtIndex(modules, index, kind, wsScript) {
         module.summary = 'Terminate flow';
         module.stop_after_if = { skip_if_stopped: false, expr: 'true' };
     }
+    if (inlineScript) {
+        const { language, kind, subkind } = inlineScript;
+        [module, state] = await createInlineScriptModule(language, kind, subkind, module.id, module.summary);
+        $flowStateStore[module.id] = state;
+    }
     if (!modules)
         return [module];
     modules.splice(index, 0, module);
     return modules;
 }
+async function insertNewPreprocessorModule(inlineScript, wsScript) {
+    var module = {
+        id: 'preprocessor',
+        value: { type: 'identity' }
+    };
+    var state = emptyFlowModuleState();
+    if (inlineScript) {
+        ;
+        [module, state] = await createInlineScriptModule(inlineScript.language, 'script', inlineScript.subkind, 'preprocessor');
+    }
+    else if (wsScript) {
+        ;
+        [module, state] = await pickScript(wsScript.path, wsScript.summary, module.id, wsScript.hash);
+    }
+    $flowStore.value.preprocessor_module = module;
+    $flowStateStore[module.id] = state;
+}
 function removeAtId(modules, id) {
     const index = modules.findIndex((mod) => mod.id == id);
     if (index != -1) {
@@ -156,7 +182,7 @@ async function updateFlowInputsStore() {
 }
 </script>
 
-<Portal>
+<Portal name="flow-module">
 	<ConfirmationModal
 		title="Confirm deleting step with dependents"
 		confirmationText="Delete step"
@@ -203,7 +229,7 @@ async function updateFlowInputsStore() {
 		{/if}
 	</div>
 
-	<div class="z-10 flex-auto grow" bind:clientHeight={minHeight}>
+	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
 			{disableAi}
 			insertable
@@ -212,6 +238,7 @@ async function updateFlowInputsStore() {
 			moving={$moving?.module.id}
 			maxHeight={minHeight}
 			modules={$flowStore.value?.modules}
+			preprocessorModule={$flowStore.value?.preprocessor_module}
 			{selectedId}
 			{flowInputsStore}
 			on:delete={({ detail }) => {
@@ -219,13 +246,15 @@ async function updateFlowInputsStore() {
 				dependents = getDependentComponents(e.id, $flowStore)
 				const cb = () => {
 					push(history, $flowStore)
-
-					selectNextId(e.id)
-
-					removeAtId($flowStore.value.modules, e.id)
-
-					if ($flowInputsStore) {
-						delete $flowInputsStore[e.id]
+					if (e.id === 'preprocessor') {
+						$selectedId = 'Input'
+						$flowStore.value.preprocessor_module = undefined
+					} else {
+						selectNextId(e.id)
+						removeAtId($flowStore.value.modules, e.id)
+						if ($flowInputsStore) {
+							delete $flowInputsStore[e.id]
+						}
 					}
 					$flowStore = $flowStore
 
@@ -256,19 +285,26 @@ async function updateFlowInputsStore() {
 							$selectedId = $moving.module.id
 							$moving = undefined
 						} else {
-							await insertNewModuleAtIndex(
-								detail.modules,
-								detail.index ?? 0,
-								detail.detail,
-								detail.script
-							)
-							$selectedId = detail.modules[detail.index ?? 0].id
+							if (detail.detail === 'preprocessor') {
+								insertNewPreprocessorModule(detail.inlineScript, detail.script)
+								$selectedId = 'preprocessor'
+							} else {
+								await insertNewModuleAtIndex(
+									detail.modules,
+									detail.index ?? 0,
+									detail.kind,
+									detail.script,
+									detail.flow,
+									detail.inlineScript
+								)
+								$selectedId = detail.modules[detail.index ?? 0].id
+							}
 						}
 
 						if (['branchone', 'branchall'].includes(detail.detail)) {
 							await addBranch(detail.modules[detail.index ?? 0])
 						}
-
+						$flowStateStore = $flowStateStore
 						$flowStore = $flowStore
 						dispatch('change')
 					}
@@ -299,6 +335,14 @@ async function updateFlowInputsStore() {
 										}
 									})
 								)
+							} else if (mod?.value?.type === 'forloopflow') {
+								if (mod.value.iterator.type === 'javascript') {
+									mod.value.iterator.expr = replaceId(mod.value.iterator.expr, id, newId)
+								}
+							} else if (mod?.value?.type === 'branchone') {
+								mod.value.branches.forEach((branch) => {
+									branch.expr = replaceId(branch.expr, id, newId)
+								})
 							}
 						})
 					}

package/package/components/flows/map/InsertModuleButton.svelte

@@ -1,164 +1,187 @@
-<script>import { Menu } from '../../common';
-import { createEventDispatcher, getContext } from 'svelte';
-import { CheckCircle2, Code, Cross, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
-import StepGen from '../../copilot/StepGen.svelte';
-import BarsStaggered from '../../icons/BarsStaggered.svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { Cross, Zap } from 'lucide-svelte';
+import StepGenQuick from '../../copilot/StepGenQuick.svelte';
+import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
+import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import { twMerge } from 'tailwind-merge';
+import TopLevelNode from '../pickers/TopLevelNode.svelte';
+import PopupV2 from '../../common/popup/PopupV2.svelte';
+import { flip, offset } from 'svelte-floating-ui/dom';
+// import type { Writable } from 'svelte/store'
 const dispatch = createEventDispatcher();
-export let trigger = false;
 export let stop = false;
-export let open = undefined;
-export let index;
+export let index = 0;
 export let funcDesc = '';
-export let modules;
+export let modules = [];
 export let disableAi = false;
+export let kind = 'script';
+export let allowTrigger = true;
+export let placement = 'bottom-center';
+let floatingConfig = {
+    strategy: 'fixed',
+    // @ts-ignore
+    placement,
+    middleware: [offset(8), flip()],
+    autoUpdate: true
+};
 $: !open && (funcDesc = '');
 let customUi = getContext('customUi');
+let selectedKind = kind;
+let preFilter = 'all';
+let loading = false;
+let small = false;
+let open = false;
+$: small = kind === 'preprocessor' || kind === 'failure';
 </script>
 
-<Menu
-	transitionDuration={0}
-	pointerDown
-	bind:show={open}
-	noMinW
-	placement="bottom-center"
-	let:close
->
-	<svelte:fragment slot="trigger">
+<!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
+
+<!-- {floatingConfig}
+floatingClasses="mt-2"
+containerClasses="border rounded-lg shadow-lg  bg-surface"
+noTransition
+shouldUsePortal={true} -->
+
+<PopupV2 {floatingConfig} bind:open let:close target="#flow-editor">
+	<svelte:fragment let:pointerdown let:pointerup slot="button">
 		<button
-			title="Add step"
+			title={`Add ${
+				kind === 'failure'
+					? ' failure module '
+					: kind === 'preprocessor'
+					? 'preprocessor step'
+					: kind === 'trigger'
+					? 'trigger'
+					: 'step'
+			}`}
 			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 '
+				'bg-surface focus:outline-none hover:bg-surface-hover rounded '
 			)}
+			on:pointerdown|preventDefault|stopPropagation={pointerdown}
+			on:pointerup={pointerup}
 		>
-			<Cross size={12} />
+			{#if kind === 'trigger'}
+				<Zap size={12} />
+			{:else}
+				<Cross size={12} />
+			{/if}
 		</button>
 	</svelte:fragment>
-	<div id="flow-editor-insert-module">
-		<StepGen on:insert {index} bind:funcDesc bind:open {close} {modules} {disableAi} />
+	<!-- FOO -->
+	<div
+		id="flow-editor-insert-module"
+		class="flex flex-col h-[400px] {small ? 'w-[450px]' : 'w-[650px]'}  pt-1 pr-1 pl-1 gap-1.5"
+		on:wheel={(e) => {
+			e.stopPropagation()
+		}}
+		role="none"
+	>
+		<div class="flex flex-row items-center gap-2">
+			<StepGenQuick {disableAi} on:insert bind:funcDesc {preFilter} {loading} />
+			{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
+				<ToggleHubWorkspaceQuick bind:selected={preFilter} />
+			{/if}
+		</div>
 
-		{#if funcDesc.length === 0}
-			<div class="font-mono divide-y text-xs w-full text-secondary">
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'script')
-					}}
-					role="menuitem"
-					tabindex="-1"
-				>
-					<Code size={14} />
-					Action
-				</button>
-				{#if customUi?.triggers != false && trigger}
-					<button
-						class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-						on:pointerdown={() => {
-							close()
-							dispatch('new', 'trigger')
+		<div class="flex flex-row grow min-h-0">
+			{#if kind === 'script' || kind == 'trigger'}
+				<div class="flex-none flex flex-col text-xs text-primary">
+					<TopLevelNode
+						label="Action"
+						selected={selectedKind === 'script'}
+						on:select={() => {
+							selectedKind = 'script'
 						}}
-						role="menuitem"
-						tabindex="-1"
-					>
-						<Zap size={14} />
-						Trigger
-					</button>
-				{/if}
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'approval')
-					}}
-					role="menuitem"
-					tabindex="-1"
-				>
-					<CheckCircle2 size={14} />
-					Approval/Prompt
-				</button>
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'forloop')
-					}}
-					role="menuitem"
-				>
-					<Repeat size={14} />
-
-					For Loop
-				</button>
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'whileloop')
-					}}
-					role="menuitem"
-				>
-					<Repeat size={14} />
-
-					While Loop
-				</button>
-
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'branchone')
-					}}
-					role="menuitem"
-				>
-					<GitBranch size={14} />
-					Branch to one
-				</button>
-
-				<button
-					class="w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center"
-					on:pointerdown={() => {
-						close()
-						dispatch('new', 'branchall')
-					}}
-					role="menuitem"
-				>
-					<GitBranch size={14} />
-
-					Branch to all
-				</button>
+					/>
+					{#if customUi?.triggers != false && allowTrigger}
+						<TopLevelNode
+							label="Trigger"
+							selected={selectedKind === 'trigger'}
+							on:select={() => {
+								selectedKind = 'trigger'
+							}}
+						/>
+					{/if}
+					<TopLevelNode
+						label="Approval/Prompt"
+						selected={selectedKind === 'approval'}
+						on:select={() => {
+							selectedKind = 'approval'
+						}}
+					/>
+					{#if customUi?.flowNode != false}
+						<TopLevelNode
+							label="Flow"
+							selected={selectedKind === 'flow'}
+							on:select={() => {
+								selectedKind = 'flow'
+							}}
+						/>
+					{/if}
+					{#if stop}
+						<TopLevelNode
+							label="End Flow"
+							selected={selectedKind === 'script'}
+							on:select={() => {
+								selectedKind = 'script'
+							}}
+						/>
+					{/if}
 
-				{#if customUi?.flowNode != false}
-					<button
-						class="w-full text-left py-2 px-3 hover:bg-surface-hover rounded-none whitespace-nowrap flex flex-row gap-2 items-center"
-						on:pointerdown={() => {
-							close()
-							dispatch('new', 'flow')
+					<TopLevelNode
+						label="For Loop"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'forloop' })
+						}}
+					/>
+					<TopLevelNode
+						label="While Loop"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'whileloop' })
 						}}
-						role="menuitem"
-					>
-						<BarsStaggered size={14} />
-						Flow
-					</button>
-				{/if}
-				{#if stop}
-					<button
-						class="w-full text-left py-2 px-3 hover:bg-surface-hover inline-flex gap-2.5"
-						on:pointerdown={() => {
-							close()
-							dispatch('new', 'end')
+					/>
+					<TopLevelNode
+						label="Branch to one"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'branchone' })
 						}}
-						role="menuitem"
-					>
-						<Square size={14} />
-						End Flow
-					</button>
-				{/if}
-			</div>
-		{/if}
+					/>
+					<TopLevelNode
+						label="Branch to all"
+						on:select={() => {
+							close(null)
+							dispatch('new', { kind: 'branchall' })
+						}}
+					/>
+				</div>
+			{/if}
+
+			<FlowInputsQuick
+				{selectedKind}
+				bind:loading
+				filter={funcDesc}
+				{modules}
+				{index}
+				{disableAi}
+				{funcDesc}
+				{kind}
+				on:close={() => {
+					close(null)
+				}}
+				on:new
+				on:pickScript
+				on:pickFlow
+				{preFilter}
+				{small}
+			/>
+		</div>
 	</div>
-</Menu>
+</PopupV2>

package/package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -2,17 +2,20 @@ import { SvelteComponent } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        trigger?: boolean | undefined;
         stop?: boolean | undefined;
-        open?: boolean | undefined;
-        index: number;
+        index?: number | undefined;
         funcDesc?: string | undefined;
-        modules: FlowModule[];
+        modules?: FlowModule[] | undefined;
         disableAi?: boolean | undefined;
+        kind?: "script" | "failure" | "trigger" | "preprocessor" | undefined;
+        allowTrigger?: boolean | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
         insert: CustomEvent<any>;
         new: CustomEvent<any>;
+        pickScript: CustomEvent<any>;
+        pickFlow: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/map/MapItem.svelte

@@ -8,8 +8,10 @@ import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
+import FlowCopilotButton from './FlowCopilotButton.svelte';
 export let mod;
 export let insertable;
+export let disableAi;
 export let annotation = undefined;
 export let bgColor = '';
 export let modules;
@@ -24,6 +26,7 @@ $: itemProps = {
     selected: $selectedId === mod.id,
     retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
     earlyStop: mod.stop_after_if != undefined || mod.stop_after_all_iters_if != undefined,
+    skip: Boolean(mod.skip_if),
     suspend: Boolean(mod.suspend),
     sleep: Boolean(mod.sleep),
     cache: Boolean(mod.cache_ttl),
@@ -37,6 +40,9 @@ function onDelete(event) {
 
 {#if mod}
 	<div class="relative">
+		{#if insertable && !disableAi && mod.id === 'preprocessor'}
+			<FlowCopilotButton className="-top-10" />
+		{/if}
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
 				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
@@ -140,6 +146,11 @@ function onDelete(event) {
 					modType={mod.value.type}
 					{bgColor}
 					label={mod.summary ||
+						(mod.id === 'preprocessor'
+							? 'Preprocessor'
+							: mod.id.startsWith('failure')
+							? 'Error Handler'
+							: undefined) ||
 						(`path` in mod.value ? mod.value.path : undefined) ||
 						(mod.value.type === 'rawscript'
 							? `Inline ${prettyLanguage(mod.value.language)}`

package/package/components/flows/map/MapItem.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         mod: FlowModule;
         insertable: boolean;
+        disableAi: boolean;
         annotation?: string | undefined;
         bgColor?: string | undefined;
         modules: FlowModule[];

package/package/components/flows/pickers/FlowScriptPickerQuick.svelte

@@ -0,0 +1,48 @@
+<script>import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
+import { sendUserToast } from '../../../toast';
+import { createEventDispatcher } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+export let label;
+export let lang = undefined;
+export let selected = false;
+export let eeRestricted;
+export let enterpriseLangs = [];
+const dispatch = createEventDispatcher();
+function handleKeydown(event) {
+    if (selected && event.key === 'Enter') {
+        click();
+    }
+}
+function click() {
+    if (eeRestricted) {
+        sendUserToast(`The languages ${enterpriseLangs.join(', ')} are only available on the enterprise edition`, true);
+        return;
+    }
+    dispatch('click');
+}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<button
+	class={twMerge(
+		'px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md',
+		selected ? 'bg-surface-hover' : ''
+	)}
+	on:click={click}
+	role="menuitem"
+>
+	{#if lang}
+		<LanguageIcon {lang} width={14} height={14} />
+	{/if}
+	<span
+		class="grow truncate text-left text-2xs font-normal {eeRestricted
+			? 'text-secondary'
+			: 'text-primary'}"
+	>
+		{label}{#if eeRestricted}&nbsp;(EE){/if}
+	</span>
+	{#if selected}
+		<kbd class="!text-xs">&crarr;</kbd>
+	{/if}
+</button>

package/package/components/flows/pickers/FlowScriptPickerQuick.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { SupportedLanguage } from '../../../common';
+declare const __propDef: {
+    props: {
+        label: string;
+        lang?: SupportedLanguage | 'docker' | 'javascript' | undefined;
+        selected?: boolean | undefined;
+        eeRestricted: boolean;
+        enterpriseLangs?: string[] | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowScriptPickerQuickProps = typeof __propDef.props;
+export type FlowScriptPickerQuickEvents = typeof __propDef.events;
+export type FlowScriptPickerQuickSlots = typeof __propDef.slots;
+export default class FlowScriptPickerQuick extends SvelteComponent<FlowScriptPickerQuickProps, FlowScriptPickerQuickEvents, FlowScriptPickerQuickSlots> {
+}
+export {};

package/package/components/flows/pickers/FlowToplevelNode.svelte

@@ -0,0 +1,19 @@
+<script>import { createEventDispatcher } from 'svelte';
+import TopLevelNode from './TopLevelNode.svelte';
+export let label;
+export let selected = false;
+const dispatch = createEventDispatcher();
+function handleKeydown(event) {
+    if (selected && event.key === 'Enter') {
+        event.preventDefault();
+        click();
+    }
+}
+function click() {
+    dispatch('click');
+}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<TopLevelNode class="px-3" {label} {selected} returnIcon on:select={click} />

package/package/components/flows/pickers/FlowToplevelNode.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        selected?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowToplevelNodeProps = typeof __propDef.props;
+export type FlowToplevelNodeEvents = typeof __propDef.events;
+export type FlowToplevelNodeSlots = typeof __propDef.slots;
+export default class FlowToplevelNode extends SvelteComponent<FlowToplevelNodeProps, FlowToplevelNodeEvents, FlowToplevelNodeSlots> {
+}
+export {};