windmill-components 1.28.6 → 1.35.0

package/components/flows/FlowTimeline.svelte

@@ -0,0 +1,169 @@
+<script>import { faInfoCircle, faPen, faPlus, faSliders, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Button, Toggle, Tooltip } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import ModuleStep from '../ModuleStep.svelte';
+import FlowInput from './FlowInput.svelte';
+import { emptyFlowModuleSchema } from './flowStateUtils';
+import { stepOpened } from './stepOpenedStore';
+export let args = {};
+export let flowModuleSchemas;
+export let parentIndex = undefined;
+const root = parentIndex === undefined;
+function insertAtIndex(index) {
+    flowModuleSchemas.splice(index, 0, emptyFlowModuleSchema());
+    flowModuleSchemas = flowModuleSchemas;
+    const indexes = getIndexes(parentIndex, index);
+    stepOpened.update(() => String(indexes.join('-')));
+}
+function removeAtIndex(index) {
+    flowModuleSchemas.splice(index, 1);
+    flowModuleSchemas = flowModuleSchemas;
+}
+function getIndexes(parentIndex, childIndex) {
+    const indexes = [];
+    if (parentIndex !== undefined) {
+        indexes.push(parentIndex);
+    }
+    indexes.push(childIndex);
+    return indexes;
+}
+const color = root ? 'blue' : 'orange';
+</script>
+
+<div class="w-full">
+	<ol class="relative ml-4 border-l border-gray-200 dark:border-gray-700 space-y-12 border-dashed">
+		{#if root}
+			<li class="ml-8">
+				<span class="relative">
+					<span
+						class={`flex absolute -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
+					>
+						<Icon
+							class={`text-${color}-600 dark:text-${color}-400  text-font-bold text-center`}
+							data={faSliders}
+						/>
+					</span>
+				</span>
+				<slot name="settings" />
+			</li>
+			<li class="ml-8 ">
+				<span class="relative">
+					<span
+						class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
+					>
+						<Icon
+							class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}
+							data={faPen}
+						/>
+					</span>
+				</span>
+				<FlowInput />
+			</li>
+		{/if}
+		{#each flowModuleSchemas as flowModuleSchema, index (index)}
+			{#if flowModuleSchema.flowModule.value.type === 'forloopflow'}
+				<li id="module-{index}" class="ml-4 relative">
+					<button
+						on:click={() => insertAtIndex(index)}
+						class="flex absolute -top-10 -left-8 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
+					>
+						<Icon class="text-gray-400" data={faPlus} />
+					</button>
+					<div
+						class="py-2 px-6 ml-4 mb-16 flex justify-between text-sm font-bold border border-gray-300 rounded-md shadow-md"
+						role="alert"
+					>
+						<span class="flex items-center z-50">
+							For loop
+							<Tooltip
+								content="Inside a loop, the flow input has an 'iter' property. It contains the value and the index of the iteration"
+								placement="bottom"
+								arrow
+							>
+								<Icon data={faInfoCircle} class="ml-2" /></Tooltip
+							>
+						</span>
+						<span class="flex items-center space-x-2">
+							<Toggle size="small" bind:checked={flowModuleSchema.flowModule.value.skip_failures}>
+								Skip failures
+							</Toggle>
+							<Button size="xs" color="alternative" on:click={() => removeAtIndex(index)}>
+								<Icon data={faTrashAlt} class="mr-2" />
+								Remove loop
+							</Button>
+						</span>
+					</div>
+					<span
+						class="flex absolute top-3 -left-8 justify-center items-center w-8 h-8 bg-orange-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-orange-900"
+					>
+						<span class={`text-orange-600 dark:text-orange-400 font-bold text-center`}>
+							{index + 1}
+						</span>
+					</span>
+
+					<svelte:self
+						bind:args
+						bind:flowModuleSchemas={flowModuleSchema.childFlowModules}
+						parentIndex={index}
+					/>
+
+					<div
+						class="flex px-6 py-4 ml-4 mt-4 text-sm font-bold border border-gray-300 rounded-md shadow-md z-50"
+						role="alert"
+					>
+						End of For Loop
+						<Tooltip
+							content="The results of each iteration are collecting in an array and is the result of the step.	"
+							placement="bottom"
+							arrow
+						>
+							<Icon data={faInfoCircle} class="ml-2" /></Tooltip
+						>
+					</div>
+				</li>
+			{:else}
+				<li id="module-{String(getIndexes(parentIndex, index).join('-'))}" class="ml-8">
+					<span class="relative">
+						<button
+							on:click={() => insertAtIndex(index)}
+							class="flex absolute -top-10 -left-12 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
+						>
+							<Icon class="text-gray-400" data={faPlus} />
+						</button>
+						<span
+							class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200  rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
+						>
+							<span class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}>
+								{index + 1}
+							</span>
+						</span>
+						<ModuleStep
+							indexes={getIndexes(parentIndex, index)}
+							bind:mod={flowModuleSchema.flowModule}
+							bind:args
+							bind:schema={flowModuleSchema.schema}
+							bind:childFlowModules={flowModuleSchema.childFlowModules}
+							on:delete={() => removeAtIndex(index)}
+						/>
+					</span>
+				</li>
+			{/if}
+			{#if flowModuleSchemas.length - 1 === index}
+				<button
+					on:click={() => insertAtIndex(flowModuleSchemas.length)}
+					class="-ml-4 -mt-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
+				>
+					<Icon class="text-gray-400" data={faPlus} />
+				</button>
+			{/if}
+		{/each}
+		{#if flowModuleSchemas.length === 0}
+			<button
+				on:click={() => insertAtIndex(0)}
+				class="-ml-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
+			>
+				<Icon class="text-gray-400" data={faPlus} />
+			</button>
+		{/if}
+	</ol>
+</div>

package/components/flows/FlowTimeline.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowState } from './flowState';
+declare const __propDef: {
+    props: {
+        args?: Record<string, any> | undefined;
+        flowModuleSchemas: FlowState;
+        parentIndex?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        settings: {};
+    };
+};
+export declare type FlowTimelineProps = typeof __propDef.props;
+export declare type FlowTimelineEvents = typeof __propDef.events;
+export declare type FlowTimelineSlots = typeof __propDef.slots;
+export default class FlowTimeline extends SvelteComponentTyped<FlowTimelineProps, FlowTimelineEvents, FlowTimelineSlots> {
+}
+export {};

package/components/flows/flowState.d.ts

@@ -0,0 +1,14 @@
+import type { Schema } from '../../common';
+import type { Flow, FlowModule } from '../../gen';
+export declare type FlowModuleSchema = {
+    flowModule: FlowModule;
+    schema: Schema;
+    childFlowModules?: FlowModuleSchema[];
+    previewResult?: any;
+};
+export declare type FlowState = FlowModuleSchema[];
+export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
+export declare function initFlowState(flow: Flow): Promise<void>;
+export declare const isCopyFirstStepSchemaDisabled: import("svelte/store").Readable<boolean>;
+export declare function flowModulesToFlowState(flowModules: FlowModule[]): Promise<FlowState>;
+export declare function flowStateToFlow(flowState: FlowState, flow: Flow): Flow;

package/components/flows/flowState.js

@@ -0,0 +1,52 @@
+import { derived, writable } from 'svelte/store';
+import { emptyFlowModuleSchema, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils';
+export const flowStateStore = writable(undefined);
+export async function initFlowState(flow) {
+    const flowState = await flowModulesToFlowState(flow.value.modules);
+    flowStateStore.set(flowState);
+}
+export const isCopyFirstStepSchemaDisabled = derived(flowStateStore, (flowState) => {
+    if (flowState) {
+        const firstModule = flowState[0];
+        if (!firstModule) {
+            return true;
+        }
+        const fm = firstModule.flowModule;
+        return flowState.length === 0 || isEmptyFlowModule(fm);
+    }
+    else {
+        return true;
+    }
+});
+export async function flowModulesToFlowState(flowModules) {
+    return Promise.all(flowModules.map(async (flowModule) => {
+        const value = flowModule.value;
+        if (value.type === 'forloopflow') {
+            const childFlowModules = await Promise.all(value.modules.map(async (module) => loadFlowModuleSchema(module)));
+            const loopFlowModule = await loadFlowModuleSchema(flowModule);
+            return {
+                ...loopFlowModule,
+                childFlowModules
+            };
+        }
+        if (isEmptyFlowModule(flowModule)) {
+            return emptyFlowModuleSchema();
+        }
+        return loadFlowModuleSchema(flowModule);
+    }));
+}
+export function flowStateToFlow(flowState, flow) {
+    if (!flowState || !flow) {
+        return flow;
+    }
+    const modules = flowState.map(({ flowModule, childFlowModules }) => {
+        const fmv = flowModule.value;
+        if (fmv.type === 'forloopflow' && childFlowModules && Array.isArray(childFlowModules)) {
+            fmv.modules = childFlowModules.map((cfm) => cfm.flowModule);
+            flowModule.value = fmv;
+        }
+        return flowModule;
+    });
+    flow.value.modules = modules;
+    return flow;
+}

package/components/flows/flowStateUtils.d.ts

@@ -0,0 +1,37 @@
+import type { Schema } from '../../common';
+import { Job, type FlowModule, type RawScript } from '../../gen';
+import { type FlowModuleSchema, type FlowState } from './flowState';
+export declare function emptyFlowModuleSchema(): FlowModuleSchema;
+export declare function loadFlowModuleSchema(flowModule: FlowModule): Promise<FlowModuleSchema>;
+export declare function pickScript(path: string): Promise<FlowModuleSchema>;
+export declare function createInlineScriptModule({ language, type }: {
+    language: RawScript.language;
+    type: 'trigger' | 'flow' | 'pgsql';
+}): Promise<FlowModuleSchema>;
+export declare function createLoop(): Promise<FlowModuleSchema>;
+export declare function fork(flowModule: FlowModule): Promise<FlowModuleSchema>;
+export declare function createInlineScriptModuleFromPath(path: string): Promise<FlowModule>;
+export declare function createScriptFromInlineScript({ flowModule, suffix, schema }: {
+    flowModule: FlowModule;
+    suffix: string;
+    schema: Schema;
+}): Promise<FlowModuleSchema>;
+export declare function isEmptyFlowModule(flowModule: FlowModule): boolean;
+declare type Result = any;
+declare type PickableProperties = {
+    flow_input?: Object;
+    previous_result: Result | undefined;
+    step: Result[];
+};
+declare type StepPropPicker = {
+    pickableProperties: PickableProperties;
+    extraLib: string;
+};
+export declare function getStepPropPicker(indexes: number[], flowInputSchema: Schema, flowState: FlowState, args: Record<string, any>): StepPropPicker;
+export declare type JobResult = {
+    job?: Job;
+    innerJobs?: JobResult[];
+    loopJobs?: JobResult[];
+};
+export declare function mapJobResultsToFlowState(jobs: JobResult, config: 'upto' | 'justthis', configIndex: number): void;
+export {};

package/components/flows/flowStateUtils.js

@@ -0,0 +1,220 @@
+import { CompletedJob, Job, ScriptService } from '../../gen';
+import { initialCode } from '../../script_helpers';
+import { userStore, workspaceStore } from '../../stores';
+import { buildExtraLib, emptyModule, 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() {
+    return {
+        flowModule: emptyModule(),
+        schema: emptySchema()
+    };
+}
+export async function loadFlowModuleSchema(flowModule) {
+    try {
+        const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+        flowModule.input_transforms = input_transforms;
+        return { flowModule, schema };
+    }
+    catch (e) {
+        return { flowModule, schema: emptySchema() };
+    }
+}
+export async function pickScript(path) {
+    const flowModule = {
+        value: { type: 'script', path },
+        input_transforms: {}
+    };
+    return await loadFlowModuleSchema(flowModule);
+}
+export async function createInlineScriptModule({ language, type }) {
+    const code = initialCode(language, type);
+    const flowModule = {
+        value: { type: 'rawscript', content: code, language },
+        input_transforms: {}
+    };
+    return await loadFlowModuleSchema(flowModule);
+}
+export async function createLoop() {
+    const loopFlowModule = {
+        value: {
+            type: 'forloopflow',
+            modules: [],
+            iterator: { type: 'javascript', expr: 'result' },
+            skip_failures: true
+        },
+        input_transforms: {}
+    };
+    const { flowModule, schema } = await loadFlowModuleSchema(loopFlowModule);
+    return {
+        flowModule,
+        schema,
+        childFlowModules: [emptyFlowModuleSchema()],
+        previewResult: undefined
+    };
+}
+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);
+}
+export async function createInlineScriptModuleFromPath(path) {
+    const { content, language } = await getScriptByPath(path);
+    return {
+        value: {
+            type: 'rawscript',
+            language: language,
+            content: content,
+            path
+        },
+        input_transforms: {}
+    };
+}
+export async function createScriptFromInlineScript({ flowModule, suffix, schema }) {
+    const flow = get(flowStore);
+    const user = get(userStore);
+    if (flowModule.value.type != 'rawscript') {
+        throw new Error("Can't create script from non-inline script");
+    }
+    const originalScriptPath = flowModule.value.path;
+    const wasForked = Boolean(originalScriptPath);
+    if (wasForked && originalScriptPath) {
+        const [first, second, ...others] = originalScriptPath.split('/');
+        suffix = others.join('/');
+    }
+    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 availablePath = await findNextAvailablePath(path);
+    await ScriptService.createScript({
+        workspace: get(workspaceStore),
+        requestBody: {
+            path: availablePath,
+            summary: '',
+            description,
+            content: flowModule.value.content,
+            parent_hash: undefined,
+            schema,
+            is_template: false,
+            language: flowModule.value.language
+        }
+    });
+    return pickScript(availablePath);
+}
+async function findNextAvailablePath(path) {
+    try {
+        await ScriptService.getScriptByPath({
+            workspace: get(workspaceStore),
+            path
+        });
+        const [_, version] = path.split(/.*_([0-9]*)/);
+        if (version.length > 0) {
+            path = path.slice(0, -(version.length + 1));
+        }
+        path = `${path}_${Number(version) + 1}`;
+        return findNextAvailablePath(path);
+    }
+    catch (e) {
+        // Catching an error means the path is available
+        return path;
+    }
+}
+export function isEmptyFlowModule(flowModule) {
+    return flowModule.value.type === 'script' && flowModule.value.path === '';
+}
+export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
+    const isInsideLoop = indexes.length > 1;
+    const [parentIndex] = indexes;
+    const flowInput = schemaToObject(flowInputSchema, args);
+    const results = getPreviousResults(flowState, parentIndex);
+    const lastResult = results.length > 0 ? results[results.length - 1] : undefined;
+    if (isInsideLoop) {
+        const 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})`
+            };
+        }
+        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), undefined);
+        return {
+            extraLib,
+            pickableProperties: {
+                flow_input: forLoopFlowInput,
+                step: [],
+                previous_result: {}
+            }
+        };
+    }
+    else {
+        const extraLib = buildExtraLib(schemaToTsType(flowInputSchema), objectToTsType(lastResult));
+        return {
+            extraLib,
+            pickableProperties: {
+                flow_input: flowInput,
+                step: results,
+                previous_result: lastResult
+            }
+        };
+    }
+}
+function getPreviousResults(flowModuleSchemas, target) {
+    if (!Array.isArray(flowModuleSchemas) || target < 1) {
+        return [];
+    }
+    const results = extractPreviewResults(flowModuleSchemas);
+    return results.splice(0, 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;
+        });
+    }
+    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;
+                    }
+                });
+            }
+            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;
+            });
+        });
+    }
+}

package/components/flows/flowStore.d.ts

@@ -1,20 +1,5 @@
-import type { Schema } from '../../common';
-import { RawScript, type Flow } from '../../gen';
+import type { Flow } from '../../gen';
 export declare type FlowMode = 'push' | 'pull';
-export declare const mode: import("svelte/store").Writable<FlowMode>;
 export declare const flowStore: import("svelte/store").Writable<Flow>;
-export declare const schemasStore: import("svelte/store").Writable<Schema[]>;
 export declare function initFlow(flow: Flow): void;
-export declare function codeToStaticTemplate(code?: string): string | undefined;
-export declare function flattenForloopFlows(flow: Flow): Flow;
-export declare const isCopyFirstStepSchemaDisabled: import("svelte/store").Readable<boolean>;
-export declare function addModule(i?: number): void;
-export declare function pickScript(path: string, step: number): Promise<void>;
-export declare function createInlineScriptModule(language: RawScript.language, step: number, mode: FlowMode): Promise<void>;
-export declare function loadSchema(step: number): Promise<void>;
-export declare function fork(step: number): Promise<void>;
-export declare function createScriptFromInlineScript(step: number): Promise<void>;
-export declare function removeModule(step: number): void;
 export declare function copyFirstStepSchema(): Promise<void>;
-export declare function findNextAvailablePath(path: string): Promise<string>;
-export declare function shouldPickOrCreateScript(flow: Flow, step: number): boolean;