windmill-components 1.37.0 → 1.46.1

package/components/flows/content/FlowLoop.svelte

@@ -3,24 +3,22 @@ import FlowCard from '../common/FlowCard.svelte';
 import Toggle from '../../Toggle.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { flowStore } from '../flowStore';
-import { getStepPropPicker } from '../flowStateUtils';
-import { flowStateStore } from '../flowState';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { VSplitPane } from 'svelte-split-pane';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
-import FlowRetries from './FlowRetries.svelte';
+// import FlowRetries from './FlowRetries.svelte'
 import { Button, Tab, TabContent, Tabs } from '../../common';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { getStepPropPicker } from '../previousResults';
+import { flowStateStore } from '../flowState';
+import { flowStore } from '../flowStore';
 const { previewArgs } = getContext('FlowEditorContext');
 export let mod;
-export let index;
+export let parentModule;
+export let previousModule;
 let editor = undefined;
-let monacos = {};
-let selected = 'retries';
-let inputTransformName = '';
-$: mod = $flowStore.value.modules[index];
-$: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
+let selected = 'early-stop';
+$: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, previewArgs, false, true).pickableProperties;
 </script>
 
 <div class="h-full flex flex-col">
@@ -28,141 +26,86 @@ $: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $f
 		<div slot="header" class="grow">
 			<input bind:value={mod.summary} placeholder={'Summary'} />
 		</div>
-		<div class="overflow-hidden flex-grow">
-			<VSplitPane topPanelSize="60%" downPanelSize="40%" minTopPaneSize="20%" minDownPaneSize="20%">
-				<top slot="top" class="h-full">
-					<div class="p-6 flex flex-col h-full overflow-clip">
-						{#if mod.value.type === 'forloopflow'}
-							<span class="mb-2 text-sm font-bold"
-								>Iterator expression
-								<Tooltip>
-									List to iterate over. For more information see the
-									<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
-								</Tooltip>
-							</span>
-
-							{#if mod.value.iterator.type == 'javascript'}
-								<div class="border w-full">
-									<PropPickerWrapper
-										{pickableProperties}
-										on:select={({ detail }) => {
-											editor?.insertAtCursor(detail)
-										}}
-									>
-										<SimpleEditor
-											bind:this={editor}
-											lang="javascript"
-											bind:code={mod.value.iterator.expr}
-											class="small-editor"
-											shouldBindKey={false}
-										/>
-									</PropPickerWrapper>
-								</div>
-							{:else}
-								<Button
-									on:click={() => {
-										if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
-									}}
-								/>
-							{/if}
-
-							<span class="my-2 text-sm font-bold">Skip failures</span>
-
-							<Toggle
-								bind:checked={mod.value.skip_failures}
-								options={{
-									right: 'Skip failures'
+		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
+			<Pane size={60} minSize={20} class="p-4">
+				{#if mod.value.type === 'forloopflow'}
+					<div class="mb-2 text-sm font-bold">
+						Iterator expression
+						<Tooltip>
+							List to iterate over. For more information see the
+							<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
+						</Tooltip>
+					</div>
+					{#if mod.value.iterator.type == 'javascript'}
+						<div class="border w-full">
+							<PropPickerWrapper
+								notSelectable
+								{pickableProperties}
+								on:select={({ detail }) => {
+									editor?.insertAtCursor(detail)
 								}}
-							/>
-							<span class="my-2 text-sm font-bold"
-								>Pass specific flow context as loop flow input</span
-							>
-							<div class="flex flex-row mt-4 w-80 max-w-full"
-								><input
-									bind:value={inputTransformName}
-									placeholder="Argument name"
-									type="text"
-									class="w-20"
-								/><Button
-									disabled={inputTransformName == ''}
-									btnClasses="ml-2"
-									on:click={() =>
-										(mod.input_transforms[inputTransformName] = { type: 'javascript', expr: '' })}
-									>+</Button
-								></div
 							>
+								<SimpleEditor
+									bind:this={editor}
+									lang="javascript"
+									bind:code={mod.value.iterator.expr}
+									class="small-editor"
+									shouldBindKey={false}
+								/>
+							</PropPickerWrapper>
+						</div>
+					{:else}
+						<Button
+							on:click={() => {
+								if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
+							}}
+						/>
+					{/if}
+					<div class="mt-6 mb-2 text-sm font-bold">Skip failures</div>
+					<Toggle
+						bind:checked={mod.value.skip_failures}
+						options={{
+							right: 'Skip failures'
+						}}
+					/>
+					<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+					<Toggle
+						bind:checked={mod.value.parallel}
+						options={{
+							right: 'All iterations run in parallel'
+						}}
+					/>
+				{/if}
+			</Pane>
+			<Pane size={40} minSize={20} class="flex flex-col flex-1">
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop</Tab>
+					<Tab value="suspend">Sleep/Suspend</Tab>
 
-							{#each Object.keys(mod.input_transforms) as key}
-								<div class="flex flex-row my-2">
-									<span class="my-2 text-sm font-bold">{key}</span>
-
-									<Button
-										btnClasses="ml-4"
-										on:click={() => {
-											delete mod.input_transforms[key]
-											mod.input_transforms = mod.input_transforms
-										}}>-</Button
-									>
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule={mod} />
 								</div>
-								<div class="border w-full">
-									{#if mod.input_transforms[key].type == 'javascript'}
-										<PropPickerWrapper
-											{pickableProperties}
-											on:select={({ detail }) => {
-												monacos[key]?.insertAtCursor(detail)
-											}}
-										>
-											<SimpleEditor
-												bind:this={monacos[key]}
-												lang="javascript"
-												bind:code={mod.input_transforms[key]['expr']}
-												class="small-editor"
-												shouldBindKey={false}
-											/>
-										</PropPickerWrapper>
-									{:else}
-										<Button
-											on:click={() => {
-												mod.input_transforms[key].type = 'javascript'
-												mod.input_transforms[key]['expr'] = ''
-											}}
-										/>
-									{/if}
-								</div>
-							{/each}
-						{/if}
-					</div></top
-				>
-				<down slot="down" class="flex flex-col flex-1 h-full">
-					<Tabs bind:selected>
-						<Tab value="retries">Retries</Tab>
-						<Tab value="early-stop">Early Stop</Tab>
-						<Tab value="suspend">Sleep/Suspend</Tab>
-
-						<svelte:fragment slot="content">
-							<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
-								<TabContent value="retries" class="flex flex-col flex-1 h-full">
-									<div class="p-4 overflow-y-auto">
-										<FlowRetries bind:flowModule={mod} />
-									</div>
-								</TabContent>
+							</TabContent> -->
 
-								<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-									<div class="p-4 overflow-y-auto">
-										<FlowModuleEarlyStop bind:flowModule={mod} />
-									</div>
-								</TabContent>
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule={mod} />
+								</div>
+							</TabContent>
 
-								<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-									<div class="p-4 overflow-y-auto">
-										<FlowModuleSuspend bind:flowModule={mod} />
-									</div>
-								</TabContent>
-							</div>
-						</svelte:fragment>
-					</Tabs>
-				</down>
-			</VSplitPane>
-		</div></FlowCard
-	>
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			</Pane>
+		</Splitpanes>
+	</FlowCard>
 </div>

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

@@ -3,7 +3,8 @@ import type { FlowModule } from '../../../gen/models/FlowModule';
 declare const __propDef: {
     props: {
         mod: FlowModule;
-        index: number;
+        parentModule: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/content/FlowModuleComponent.svelte

@@ -0,0 +1,231 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Tab from '../../common/tabs/Tab.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Editor from '../../Editor.svelte';
+import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from '../../EditorBar.svelte';
+import ModulePreview from '../../ModulePreview.svelte';
+import { createScriptFromInlineScript, fork } from '../flowStateUtils';
+import { flowStore } from '../flowStore';
+import SchemaForm from '../../SchemaForm.svelte';
+import { RawScript } from '../../../gen';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowModuleHeader from './FlowModuleHeader.svelte';
+import { flowStateStore } from '../flowState';
+import { scriptLangToEditorLang } from '../../../utils';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { afterUpdate, getContext, setContext } from 'svelte';
+import { loadSchemaFromModule } from '../utils';
+import FlowModuleScript from './FlowModuleScript.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import FlowRetries from './FlowRetries.svelte';
+import { getStepPropPicker } from '../previousResults';
+import Tooltip from '../../Tooltip.svelte';
+import { Kbd } from '../../common';
+import Button from '../../common/button/Button.svelte';
+import Alert from '../../common/alert/Alert.svelte';
+const { selectedId, previewArgs } = getContext('FlowEditorContext');
+export let flowModule;
+export let failureModule = false;
+export let parentModule = undefined;
+export let previousModule;
+let editor;
+let modulePreview;
+let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let selected = 'inputs';
+let wrapper;
+let panes;
+let totalTopGap = 0;
+let validCode = true;
+let width = 1200;
+let inputTransforms = flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'
+    ? flowModule.value.input_transforms
+    : {};
+$: if (flowModule.value.type === 'rawscript' || flowModule.value.type === 'script') {
+    flowModule.value.input_transforms = inputTransforms;
+}
+$: stepPropPicker = failureModule
+    ? {
+        pickableProperties: {
+            flow_input: $flowStateStore.previewArgs,
+            priorIds: {},
+            previousId: undefined
+        },
+        extraLib: ''
+    }
+    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, previewArgs, false, true);
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        selected = 'test';
+        modulePreview?.runTestWithStepArgs();
+    }
+}
+async function reload(flowModule) {
+    try {
+        const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+        validCode = true;
+        setTimeout(() => {
+            if ((flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') &&
+                JSON.stringify(flowModule.value.input_transforms) !== JSON.stringify(input_transforms)) {
+                inputTransforms = input_transforms;
+            }
+        });
+        if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
+            if (!$flowStateStore[flowModule.id]) {
+                $flowStateStore[flowModule.id] = { schema };
+            }
+            else {
+                $flowStateStore[flowModule.id].schema = schema;
+            }
+        }
+    }
+    catch (e) {
+        validCode = false;
+    }
+}
+afterUpdate(() => {
+    totalTopGap = 0;
+    if (!(wrapper && panes))
+        return;
+    const wrapperTop = wrapper.getBoundingClientRect().top;
+    const panesTop = panes.getBoundingClientRect().top;
+    totalTopGap = panesTop - wrapperTop;
+});
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'}
+	<div class="h-full" bind:this={wrapper} bind:clientWidth={width}>
+		<FlowCard bind:flowModule>
+			<svelte:fragment slot="header">
+				<FlowModuleHeader
+					bind:module={flowModule}
+					on:toggleSuspend={() => (selected = 'suspend')}
+					on:toggleRetry={() => (selected = 'retries')}
+					on:toggleStopAfterIf={() => (selected = 'early-stop')}
+					on:fork={async () => {
+						const [module, state] = await fork(flowModule)
+						flowModule = module
+						$flowStateStore[module.id] = state
+					}}
+					on:createScriptFromInlineScript={async () => {
+						const [module, state] = await createScriptFromInlineScript(
+							flowModule,
+							$selectedId,
+							$flowStateStore[flowModule.id].schema
+						)
+						flowModule = module
+						$flowStateStore[module.id] = state
+					}}
+				/>
+			</svelte:fragment>
+
+			{#if flowModule.value.type === 'rawscript'}
+				<div class="border-b-2 shadow-sm p-1 mb-1">
+					<EditorBar
+						{validCode}
+						{editor}
+						lang={flowModule.value['language'] ?? 'deno'}
+						{websocketAlive}
+						iconOnly={width < 768}
+					/>
+				</div>
+			{/if}
+
+			<div
+				bind:this={panes}
+				class="h-full"
+				style="max-height: calc(100% - {totalTopGap}px) !important;"
+			>
+				<Splitpanes horizontal>
+					<Pane size={50} minSize={20}>
+						{#if flowModule.value.type === 'rawscript'}
+							<div on:mouseleave={() => reload(flowModule)} class="h-full">
+								<Editor
+									bind:websocketAlive
+									bind:this={editor}
+									class="h-full px-2"
+									bind:code={flowModule.value.content}
+									deno={flowModule.value.language === RawScript.language.DENO}
+									lang={scriptLangToEditorLang(flowModule.value.language)}
+									automaticLayout={true}
+									cmdEnterAction={async () => {
+										selected = 'test'
+										await reload(flowModule)
+										modulePreview?.runTestWithStepArgs()
+									}}
+									formatAction={() => reload(flowModule)}
+								/>
+							</div>
+						{:else if flowModule.value.type === 'script'}
+							<FlowModuleScript path={flowModule.value.path} />
+						{/if}
+					</Pane>
+					<Pane size={50} minSize={20}>
+						<Tabs bind:selected>
+							<Tab value="inputs"
+								><Tooltip>
+									Move the focus outside of the text editor to recompute the inputs or press
+									<Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd>
+								</Tooltip><span class="font-semibold">Step Input</span></Tab
+							>
+							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
+							<Tab value="retries">Retries</Tab>
+							{#if !$selectedId.includes('failure')}
+								<Tab value="early-stop">Early Stop</Tab>
+								<Tab value="suspend">Sleep/Suspend</Tab>
+								<Tab value="same_worker">Same Worker/Shared dir</Tab>
+							{/if}
+						</Tabs>
+						<div class="h-[calc(100%-32px)]">
+							{#if selected === 'inputs'}
+								<div class="h-full overflow-auto">
+									<PropPickerWrapper pickableProperties={stepPropPicker.pickableProperties}>
+										<SchemaForm
+											schema={$flowStateStore[$selectedId]?.schema ?? {}}
+											inputTransform={true}
+											importPath={$selectedId}
+											bind:args={flowModule.value.input_transforms}
+											bind:extraLib={stepPropPicker.extraLib}
+										/>
+									</PropPickerWrapper>
+								</div>
+							{:else if selected === 'test'}
+								<ModulePreview
+									bind:this={modulePreview}
+									mod={flowModule}
+									schema={$flowStateStore[$selectedId]?.schema ?? {}}
+								/>
+							{:else if selected === 'retries'}
+								<FlowRetries bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
+							{:else if selected === 'early-stop'}
+								<FlowModuleEarlyStop bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
+							{:else if selected === 'suspend'}
+								<div class="px-4 pb-4 h-full overflow-auto">
+									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							{:else if selected === 'same_worker'}
+								<div class="p-4  h-full overflow-auto">
+									<Alert type="info" title="Share a directory using same worker">
+										If same worker is set, all steps will be run on the same worker and will share
+										the folder `/shared` to pass data between each other.
+									</Alert>
+									<Button
+										btnClasses="mt-4"
+										on:click={() => {
+											$selectedId = 'settings-same-worker'
+										}}>Set same worker in the flow settings</Button
+									>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</div>
+		</FlowCard>
+	</div>
+{:else}
+	Incorrect flow module type
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        failureModule?: boolean | undefined;
+        parentModule?: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleComponentProps = typeof __propDef.props;
+export declare type FlowModuleComponentEvents = typeof __propDef.events;
+export declare type FlowModuleComponentSlots = typeof __propDef.slots;
+export default class FlowModuleComponent extends SvelteComponentTyped<FlowModuleComponentProps, FlowModuleComponentEvents, FlowModuleComponentSlots> {
+}
+export {};

package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -1,33 +1,23 @@
 <script>import SimpleEditor from '../../SimpleEditor.svelte';
 import Toggle from '../../Toggle.svelte';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { getStepPropPicker } from '../flowStateUtils';
-import { flowStore } from '../flowStore';
 import { flowStateStore } from '../flowState';
-import { getContext } from 'svelte';
-import { selectedIdToIndexes } from '../utils';
-const { selectedId, previewArgs } = getContext('FlowEditorContext');
+import Tooltip from '../../Tooltip.svelte';
+import { NEVER_TESTED_THIS_FAR } from '../utils';
 export let flowModule;
 let editor = undefined;
 $: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
-let pickableProperties = {};
-$: {
-    let indices = selectedIdToIndexes($selectedId);
-    if (indices[1]) {
-        indices[1] += 1;
-    }
-    else {
-        indices[0] += 1;
-    }
-    const props = getStepPropPicker(indices, $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
-    props['result'] = props['previous_result'];
-    delete props['previous_result'];
-    props.step = props.step?.slice(0, props.step.length - 1);
-    pickableProperties = props;
-}
+$: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
 </script>
 
-<div class="flex flex-col items-start space-y-2">
+<div class="flex flex-col items-start space-y-2 {$$props.class}">
+	<h2 class="mt-2"
+		>Early stop <Tooltip>
+			If defined, at the end of the step, the predicate expression will be evaluated to decide if
+			the flow should stop early. Skipped flows are just a label useful to not see them in the runs
+			page.</Tooltip
+		></h2
+	>
 	<Toggle
 		checked={isStopAfterIfEnabled}
 		on:change={() => {
@@ -45,32 +35,39 @@ $: {
 		}}
 	/>
 
-	{#if flowModule.stop_after_if}
-		<span class="text-xs font-bold">Should skip if stopped</span>
-
-		<input type="checkbox" bind:checked={flowModule.stop_after_if.skip_if_stopped} />
-
-		<span class="text-xs font-bold">Stop condition expression</span>
-
-		<div class="border w-full">
-			<PropPickerWrapper
-				{pickableProperties}
-				on:select={({ detail }) => {
-					editor?.insertAtCursor(detail)
+	<div class="w-full border p-2  flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
+		{#if flowModule.stop_after_if}
+			<Toggle
+				bind:checked={flowModule.stop_after_if.skip_if_stopped}
+				options={{
+					right: 'Skip if stopped'
+				}}
+			/>
+			<span class="text-xs font-bold">Stop condition expression</span>
+			<div class="border w-full">
+				<PropPickerWrapper
+					{result}
+					pickableProperties={undefined}
+					on:select={({ detail }) => {
+						editor?.insertAtCursor(detail)
+					}}
+				>
+					<SimpleEditor
+						bind:this={editor}
+						lang="javascript"
+						bind:code={flowModule.stop_after_if.expr}
+						class="small-editor"
+					/>
+				</PropPickerWrapper>
+			</div>
+		{:else}
+			<Toggle
+				disabled
+				options={{
+					right: 'Skip if stopped'
 				}}
-			>
-				<SimpleEditor
-					bind:this={editor}
-					lang="javascript"
-					bind:code={flowModule.stop_after_if.expr}
-					class="small-editor"
-				/>
-			</PropPickerWrapper>
-		</div>
-	{:else}
-		<span class="text-xs font-bold">Should skip if stopped</span>
-		<input type="checkbox" disabled />
-		<span class="text-xs font-bold">Stop condition expression</span>
-		<textarea disabled rows="3" />
-	{/if}
+			/> <span class="text-xs font-bold">Stop condition expression</span>
+			<textarea disabled rows="3" class="min-h-[80px]" />
+		{/if}
+	</div>
 </div>

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         flowModule: FlowModule;
     };
     events: {