windmill-components 1.35.42 → 1.36.0

package/components/flows/flowStateUtils.js

@@ -1,14 +1,13 @@
-import { CompletedJob, Job, ScriptService } from '../../gen';
-import { initialCode } from '../../script_helpers';
+import { CompletedJob, Job, Script, ScriptService } from '../../gen';
+import { DENO_FAILURE_MODULE_CODE, initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
-import { buildExtraLib, emptyModule, emptySchema, getScriptByPath, objectToTsType, schemaToObject, schemaToTsType } from '../../utils';
+import { buildExtraLib, emptySchema, getScriptByPath, objectToTsType, schemaToObject, schemaToTsType } from '../../utils';
 import { get } from 'svelte/store';
 import { flowStateStore } from './flowState';
 import { flowStore } from './flowStore';
-import { jobsToResults, loadSchemaFromModule } from './utils';
-export function emptyFlowModuleSchema() {
+import { loadSchemaFromModule } from './utils';
+export function emptyFlowModuleState() {
     return {
-        flowModule: emptyModule(),
         schema: emptySchema()
     };
 }
@@ -16,10 +15,10 @@ export async function loadFlowModuleSchema(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         flowModule.input_transforms = input_transforms;
-        return { flowModule, schema };
+        return { schema, previewResult: NEVER_TESTED_THIS_FAR };
     }
     catch (e) {
-        return { flowModule, schema: emptySchema() };
+        return { schema: emptySchema(), previewResult: NEVER_TESTED_THIS_FAR };
     }
 }
 export async function pickScript(path) {
@@ -27,40 +26,42 @@ export async function pickScript(path) {
         value: { type: 'script', path },
         input_transforms: {}
     };
-    return await loadFlowModuleSchema(flowModule);
+    return [flowModule, await loadFlowModuleSchema(flowModule)];
 }
-export async function createInlineScriptModule({ language, type }) {
-    const code = initialCode(language, type);
+export async function createInlineScriptModule({ language, kind, subkind }) {
+    const code = initialCode(language, kind, subkind);
     const flowModule = {
         value: { type: 'rawscript', content: code, language },
         input_transforms: {}
     };
-    return await loadFlowModuleSchema(flowModule);
+    return [flowModule, await loadFlowModuleSchema(flowModule)];
 }
 export async function createLoop() {
     const loopFlowModule = {
         value: {
             type: 'forloopflow',
             modules: [],
-            iterator: { type: 'javascript', expr: 'result' },
+            iterator: { type: 'javascript', expr: 'previous_result' },
             skip_failures: true
         },
         input_transforms: {}
     };
-    const { flowModule, schema } = await loadFlowModuleSchema(loopFlowModule);
-    return {
-        flowModule,
-        schema,
-        childFlowModules: [emptyFlowModuleSchema()],
-        previewResult: undefined
-    };
+    const { schema } = await loadFlowModuleSchema(loopFlowModule);
+    return [
+        loopFlowModule,
+        {
+            schema,
+            childFlowModules: [emptyFlowModuleState()],
+            previewResult: NEVER_TESTED_THIS_FAR
+        }
+    ];
 }
 export async function fork(flowModule) {
     if (flowModule.value.type !== 'script') {
         throw new Error('Can only fork a script module');
     }
     const fm = await createInlineScriptModuleFromPath(flowModule.value.path ?? '');
-    return await loadFlowModuleSchema(fm);
+    return [fm, await loadFlowModuleSchema(fm)];
 }
 export async function createInlineScriptModuleFromPath(path) {
     const { content, language } = await getScriptByPath(path);
@@ -88,7 +89,7 @@ export async function createScriptFromInlineScript({ flowModule, suffix, schema
     }
     const path = `${flow.path}/${suffix}`;
     const forkedDescription = wasForked ? `as a fork of ${originalScriptPath}` : '';
-    const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}}.`;
+    const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}.`;
     const availablePath = await findNextAvailablePath(path);
     await ScriptService.createScript({
         workspace: get(workspaceStore),
@@ -126,34 +127,41 @@ async function findNextAvailablePath(path) {
 export function isEmptyFlowModule(flowModule) {
     return flowModule.value.type === 'script' && flowModule.value.path === '';
 }
+export const NEVER_TESTED_THIS_FAR = 'never tested this far';
 export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
-    const isInsideLoop = indexes.length > 1;
-    const [parentIndex] = indexes;
+    const [parentIndex, childIndex] = indexes;
+    const isInsideLoop = childIndex !== undefined;
     const flowInput = schemaToObject(flowInputSchema, args);
-    const results = getPreviousResults(flowState, parentIndex);
-    const lastResult = results.length > 0 ? results[results.length - 1] : undefined;
+    const results = getPreviousResults(flowState.modules, parentIndex);
+    const lastResult = parentIndex == 0
+        ? flowInput
+        : results.length > 0
+            ? results[results.length - 1]
+            : NEVER_TESTED_THIS_FAR;
     if (isInsideLoop) {
-        const forLoopFlowInput = {
+        let forLoopFlowInput = {
             ...flowInput,
             iter: {
                 value: "Iteration's value",
                 index: "Iteration's index"
             }
         };
-        if (Array.isArray(lastResult) && lastResult.length > 0) {
-            const last = lastResult[lastResult.length - 1];
-            forLoopFlowInput.iter = {
-                value: last,
-                index: `Iteration's index (0 to ${lastResult.length - 1})`
-            };
+        if (flowState.modules[parentIndex]?.previewArgs) {
+            forLoopFlowInput = flowState.modules[parentIndex]?.previewArgs;
         }
-        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), undefined);
+        const innerResults = getPreviousResults(flowState.modules[parentIndex]?.childFlowModules, childIndex);
+        const innerLastResult = childIndex == 0
+            ? forLoopFlowInput
+            : innerResults.length > 0
+                ? innerResults[innerResults.length - 1]
+                : NEVER_TESTED_THIS_FAR;
+        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), objectToTsType(innerLastResult));
         return {
             extraLib,
             pickableProperties: {
                 flow_input: forLoopFlowInput,
-                step: [],
-                previous_result: {}
+                previous_result: innerLastResult,
+                step: innerResults
             }
         };
     }
@@ -163,8 +171,8 @@ export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
             extraLib,
             pickableProperties: {
                 flow_input: flowInput,
-                step: results,
-                previous_result: lastResult
+                previous_result: lastResult,
+                step: results
             }
         };
     }
@@ -179,42 +187,42 @@ function getPreviousResults(flowModuleSchemas, target) {
 function extractPreviewResults(flowModuleSchemas) {
     return flowModuleSchemas.map((fms) => fms.previewResult);
 }
-export function mapJobResultsToFlowState(jobs, config, configIndex) {
-    if (!Array.isArray(jobs.innerJobs) || jobs.innerJobs.length === 0) {
-        return;
-    }
-    if (config === 'justthis') {
-        const job = jobs.job;
-        flowStateStore.update((flowState) => {
-            flowState[configIndex] = job.result;
-            return flowState;
-        });
+function getResult(job) {
+    if (job && 'result' in job) {
+        return job.result;
     }
-    else {
-        const results = jobs.innerJobs.map(({ job, loopJobs }) => {
-            if (Array.isArray(loopJobs) && loopJobs.length > 0) {
-                return loopJobs.map(({ job }) => {
-                    if (job && 'result' in job) {
-                        return job.result;
-                    }
+}
+export function mapJobResultsToFlowState(jobs, upto) {
+    const results = jobs.innerJobs.map(({ job, loopJobs }) => {
+        if (loopJobs && loopJobs.length > 0) {
+            return [
+                job?.args,
+                loopJobs.map(({ job }) => {
+                    return getResult(job);
+                })
+            ];
+        }
+        else {
+            return [job?.args, getResult(job)];
+        }
+    });
+    const old = get(flowStateStore);
+    const modules = old.modules.map((flowModuleState, index) => {
+        if (results[index] && index <= upto) {
+            if (results[index][1] != NEVER_TESTED_THIS_FAR ||
+                flowModuleState.previewResult == undefined) {
+                flowModuleState.previewArgs = results[index][0];
+                flowModuleState.previewResult = results[index][1];
+                flowModuleState.childFlowModules?.map((innerMod, j) => {
+                    const lastLoopJob = jobs.innerJobs[index].loopJobs?.length ?? 0;
+                    innerMod.previewResult = getResult(jobs.innerJobs[index].loopJobs?.[lastLoopJob - 1]?.innerJobs?.[j]?.job);
                 });
             }
-            else {
-                if (job && 'result' in job) {
-                    return job.result;
-                }
-            }
-        });
-        flowStateStore.update((flowState) => {
-            if (!Array.isArray(flowState)) {
-                return flowState;
-            }
-            return flowState.map((flowModuleSchema, index) => {
-                if (index <= configIndex) {
-                    flowModuleSchema.previewResult = results[index];
-                }
-                return flowModuleSchema;
-            });
-        });
-    }
+        }
+        return flowModuleState;
+    });
+    flowStateStore.set({
+        modules,
+        failureModule: old.failureModule
+    });
 }

package/components/flows/flowStore.js

@@ -1,6 +1,6 @@
 import { get, writable } from 'svelte/store';
 import { flowStateStore, initFlowState } from './flowState';
-export const flowStore = writable(undefined);
+export const flowStore = writable({ summary: "", value: { modules: [] }, path: "", edited_at: "", edited_by: "", archived: false, extra_perms: {} });
 export function initFlow(flow) {
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
@@ -23,7 +23,10 @@ export function initFlow(flow) {
             delete modVal.input_transform;
         }
         if (modVal.stop_after_if_expr) {
-            modVal.stop_after_if = { expr: modVal.stop_after_if_expr, skip_if_stopped: modVal.skip_if_stopped };
+            modVal.stop_after_if = {
+                expr: modVal.stop_after_if_expr,
+                skip_if_stopped: modVal.skip_if_stopped
+            };
             delete modVal.stop_after_if_expr;
             delete modVal.skip_if_stopped;
         }
@@ -32,8 +35,8 @@ export function initFlow(flow) {
 export async function copyFirstStepSchema() {
     const flowState = get(flowStateStore);
     flowStore.update((flow) => {
-        if (flowState[0].schema) {
-            flow.schema = flowState[0].schema;
+        if (flowState.modules[0].schema) {
+            flow.schema = flowState.modules[0].schema;
         }
         return flow;
     });

package/components/flows/header/FlowImportExportMenu.svelte

@@ -0,0 +1,55 @@
+<script>import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import Menu from '../../common/menu/Menu.svelte';
+import MenuItem from '../../common/menu/MenuItem.svelte';
+import FlowViewer from '../../FlowViewer.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import { sendUserToast } from '../../../utils';
+import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { Button } from '../../common';
+import { flowStore, initFlow } from '../flowStore';
+import { cleanInputs } from '../utils';
+let jsonSetterDrawer;
+let jsonViewerDrawer;
+let pendingJson;
+function importJson() {
+    Object.assign($flowStore, JSON.parse(pendingJson));
+    initFlow($flowStore);
+    sendUserToast('OpenFlow imported from JSON');
+    jsonSetterDrawer.toggleDrawer();
+}
+</script>
+
+<Menu placement="bottom-end">
+	<button
+		slot="trigger"
+		class="flex items-center text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
+	>
+		Import/Export
+	</button>
+	<div class="divide-y divide-gray-200">
+		<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
+			<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
+			Import from a JSON OpenFlow
+		</MenuItem>
+		<MenuItem on:click={() => jsonViewerDrawer.toggleDrawer()}>
+			<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+			Export to a JSON OpenFlow
+		</MenuItem>
+	</div>
+</Menu>
+
+<Drawer bind:this={jsonSetterDrawer} size="800px">
+	<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
+		<Button size="sm" on:click={importJson}>Import</Button>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+	</DrawerContent>
+</Drawer>
+<Drawer bind:this={jsonViewerDrawer} size="800px">
+	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+		{#if $flowStore}
+			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
+		{/if}
+	</DrawerContent>
+</Drawer>

package/components/flows/header/FlowImportExportMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowImportExportMenuProps = typeof __propDef.props;
+export declare type FlowImportExportMenuEvents = typeof __propDef.events;
+export declare type FlowImportExportMenuSlots = typeof __propDef.slots;
+export default class FlowImportExportMenu extends SvelteComponentTyped<FlowImportExportMenuProps, FlowImportExportMenuEvents, FlowImportExportMenuSlots> {
+}
+export {};

package/components/flows/header/FlowPreviewButtons.svelte

@@ -0,0 +1,57 @@
+<script>import Button from '../../common/button/Button.svelte';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import FlowPreviewContent from '../../FlowPreviewContent.svelte';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+const { selectedId } = getContext('FlowEditorContext');
+let previewOpen = false;
+let previewMode = 'whole';
+$: upToDisabled = [
+    'settings',
+    'settings-schedule',
+    'settings-retries',
+    'inputs',
+    'schedules'
+].includes($selectedId);
+</script>
+
+<span
+	class="flex flex-row-reverse justify-between flex-wrap gap-2  w-full py-2 px-4 bg-white border-b border-t"
+>
+	<Button
+		btnClasses="grow"
+		on:click={() => {
+			previewMode = 'whole'
+			previewOpen = !previewOpen
+		}}
+		size="sm"
+	>
+		Test flow
+		<Icon data={faPlay} class="ml-2" scale={0.8} />
+	</Button>
+	{#if !upToDisabled}
+		<Button
+			btnClasses="grow"
+			size="sm"
+			disabled={upToDisabled}
+			color="light"
+			variant="border"
+			on:click={() => {
+				previewMode = 'upTo'
+
+				previewOpen = !previewOpen
+			}}
+		>
+			Test up to step {$selectedId
+				.split('-')
+				.map((x) => (Number.isNaN(Number(x)) ? x : Number(x) + 1))
+				.join(' ')}
+			<Icon data={faPlay} class="ml-2" scale={0.8} />
+		</Button>
+	{/if}
+</span>
+
+<Drawer bind:open={previewOpen} size="800px">
+	<FlowPreviewContent bind:previewMode on:close={() => (previewOpen = !previewOpen)} />
+</Drawer>

package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowPreviewButtonsProps = typeof __propDef.props;
+export declare type FlowPreviewButtonsEvents = typeof __propDef.events;
+export declare type FlowPreviewButtonsSlots = typeof __propDef.slots;
+export default class FlowPreviewButtons extends SvelteComponentTyped<FlowPreviewButtonsProps, FlowPreviewButtonsEvents, FlowPreviewButtonsSlots> {
+}
+export {};

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -0,0 +1,60 @@
+<script>import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faBug } from '@fortawesome/free-solid-svg-icons';
+import { NEVER_TESTED_THIS_FAR } from '../flowStateUtils';
+import { classNames, emptyModule, emptySchema } from '../../../utils';
+import { flowStateStore } from '../flowState';
+import Toggle from '../../Toggle.svelte';
+import { flowStore } from '../flowStore';
+const { select, selectedId } = getContext('FlowEditorContext');
+function onToggle() {
+    if ($flowStore.value.failure_module) {
+        $flowStore.value.failure_module = undefined;
+        // By default, we return to settings when disabling the failure module
+        select('settings');
+    }
+    else {
+        const failureModule = {
+            schema: emptySchema(),
+            previewResult: NEVER_TESTED_THIS_FAR,
+            childFlowModules: []
+        };
+        $flowStateStore.failureModule = failureModule;
+        $flowStore.value.failure_module = emptyModule();
+        select('failure');
+    }
+}
+</script>
+
+<div
+	on:click={() => {
+		if ($flowStore.value.failure_module) {
+			select('failure')
+		} else {
+			onToggle()
+		}
+	}}
+	class={classNames(
+		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden',
+		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+	)}
+>
+	<div class=" flex justify-between items-center flex-wrap">
+		<div>
+			<Icon data={faBug} class="mr-2" />
+			<span class="font-bold">Error handler</span>
+		</div>
+		<Toggle checked={Boolean($flowStore.value.failure_module)} on:change={onToggle} />
+	</div>
+
+	<div class="w-full truncate block">
+		{#if Boolean($flowStore.value.failure_module)}
+			<span
+				>{$flowStore.value.failure_module?.summary ||
+					($flowStore.value.failure_module?.value.type === 'rawscript'
+						? `Inline ${$flowStore.value.failure_module?.value.language}`
+						: 'Select a script')}</span
+			>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowErrorHandlerItemProps = typeof __propDef.props;
+export declare type FlowErrorHandlerItemEvents = typeof __propDef.events;
+export declare type FlowErrorHandlerItemSlots = typeof __propDef.slots;
+export default class FlowErrorHandlerItem extends SvelteComponentTyped<FlowErrorHandlerItemProps, FlowErrorHandlerItemEvents, FlowErrorHandlerItemSlots> {
+}
+export {};

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -0,0 +1,80 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { classNames } from '../../../utils';
+import { faBed, faRepeat, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+export let color = 'blue';
+export let isFirst = false;
+export let isLast = false;
+export let hasLine = true;
+export let selected = false;
+export let deletable = false;
+export let retry = false;
+export let earlyStop = false;
+export let suspend = false;
+const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5';
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex" on:click>
+	<div
+		class={classNames(
+			'flex  mr-2 w-8 ',
+			hasLine ? 'line' : '',
+			isFirst ? 'justify-center items-start' : 'justify-center items-center'
+		)}
+	>
+		<div
+			class={classNames(
+				'flex justify-center items-center w-6 h-6 border rounded-full text-xs font-bold',
+				color === 'blue' ? 'bg-blue-100 text-blue-400' : 'bg-orange-100 text-orange-400',
+				margin
+			)}
+		>
+			<slot name="icon" />
+		</div>
+	</div>
+	<div class="relative w-full">
+		<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1"
+			>{#if retry}
+				<div class="bg-white rounded border text-gray-600 px-1"
+					><Icon scale={0.8} data={faRepeat} /></div
+				>
+			{/if}{#if earlyStop}
+				<div class="bg-white rounded border text-gray-600 px-1"
+					><Icon scale={0.8} data={faStop} /></div
+				>
+			{/if}
+			{#if suspend}
+				<div class="bg-white rounded border text-gray-600 px-1"
+					><Icon scale={0.8} data={faBed} /></div
+				>
+			{/if}</div
+		>
+		<div
+			class={classNames(
+				'border  w-full rounded-sm p-2 bg-white text-sm cursor-pointer flex justify-between items-center space-x-2 overflow-hidden',
+				margin,
+				selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
+			)}
+		>
+			<slot name="content" class="w-full" />
+			{#if deletable}
+				<Button
+					on:click={(event) => dispatch('delete', { event })}
+					startIcon={{ icon: faTrashAlt }}
+					iconOnly={true}
+					color="light"
+					variant="border"
+					size="xs"
+				/>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}</style>

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

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: "blue" | "orange" | undefined;
+        isFirst?: boolean | undefined;
+        isLast?: boolean | undefined;
+        hasLine?: boolean | undefined;
+        selected?: boolean | undefined;
+        deletable?: boolean | undefined;
+        retry?: boolean | undefined;
+        earlyStop?: boolean | undefined;
+        suspend?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        content: {
+            class: string;
+        };
+    };
+};
+export declare type FlowModuleSchemaItemProps = typeof __propDef.props;
+export declare type FlowModuleSchemaItemEvents = typeof __propDef.events;
+export declare type FlowModuleSchemaItemSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaItem extends SvelteComponentTyped<FlowModuleSchemaItemProps, FlowModuleSchemaItemEvents, FlowModuleSchemaItemSlots> {
+}
+export {};