windmill-components 1.37.0 → 1.46.1

package/components/flows/previousResults.js

@@ -0,0 +1,118 @@
+import { schemaToObject } from '../../utils';
+function dfs(id, flow, getParents = true) {
+    if (id === undefined) {
+        return [];
+    }
+    function getSubModules(flowModule) {
+        if (flowModule.value.type === 'forloopflow') {
+            return [flowModule.value.modules];
+        }
+        else if (flowModule.value.type === 'branchall') {
+            return flowModule.value.branches.map((branch) => branch.modules);
+        }
+        else if (flowModule.value.type == 'branchone') {
+            return [
+                ...flowModule.value.branches.map((branch) => branch.modules),
+                flowModule.value.default
+            ];
+        }
+        return [];
+    }
+    function rec(id, moduleBranches) {
+        for (let modules of moduleBranches) {
+            for (const [i, module] of modules.entries()) {
+                if (module.id === id) {
+                    return getParents ? [module] : modules.slice(0, i + 1).reverse();
+                }
+                else {
+                    const submodules = getSubModules(module);
+                    if (submodules) {
+                        let found = rec(id, submodules);
+                        if (found) {
+                            return getParents ? [...found, module] : [...found, ...modules.slice(0, i).reverse()];
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    return rec(id, [flow.value.modules]) ?? [];
+}
+function getFlowInput(parentModules, flowState, args, schema) {
+    const parentModule = parentModules.shift();
+    const parentState = parentModule ? flowState[parentModule.id] : undefined;
+    if (parentState && parentModule) {
+        if (parentState.previewArgs) {
+            return parentState.previewArgs;
+        }
+        else {
+            const parentFlowInput = getFlowInput(parentModules, flowState, args, schema);
+            if (parentModule.value.type === 'forloopflow') {
+                return {
+                    iter: {
+                        value: "Iteration's value",
+                        index: "Iteration's index"
+                    },
+                    ...parentFlowInput,
+                };
+            }
+            else {
+                return parentFlowInput;
+            }
+        }
+    }
+    else {
+        return schemaToObject(schema, args);
+    }
+}
+export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node, approvers = false) {
+    const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
+    const previousIds = dfs(id, flow, false).map((x) => x.id);
+    if (!include_node) {
+        previousIds.shift();
+    }
+    let priorIds = Object.fromEntries(previousIds.map((id) => [id, flowState[id]?.previewResult ?? {}]).reverse());
+    const pickableProperties = {
+        flow_input: flowInput,
+        priorIds: priorIds,
+        previousId: previousIds[0]
+    };
+    if (approvers && ((previousModule?.suspend?.required_events ?? 0) > 0)) {
+        pickableProperties["approvers"] = "The list of approvers";
+    }
+    return {
+        extraLib: buildExtraLib(flowInput, priorIds),
+        pickableProperties
+    };
+}
+export function buildExtraLib(flowInput, results) {
+    return `
+/**
+* get variable (including secret) at path
+* @param {string} path - path of the variable (e.g: g/all/pretty_secret)
+*/
+export function variable(path: string): string;
+
+/**
+* get resource at path
+* @param {string} path - path of the resource (e.g: g/all/my_resource)
+*/
+export function resource(path: string): any;
+
+/**
+* flow input as an object
+*/
+export const flow_input = ${JSON.stringify(flowInput)};
+
+/**
+* static params of this same step
+*/
+export const params: any;
+
+/**
+ * result by id
+ */
+export const results = ${JSON.stringify(results)};
+`;
+}

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -2,11 +2,15 @@
 </script>
 
 <script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
+import PropPickerResult from '../../propertyPicker/PropPickerResult.svelte';
 import { createEventDispatcher, setContext } from 'svelte';
-import { HSplitPane } from 'svelte-split-pane';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
-export let pickableProperties = {};
+export let pickableProperties;
+export let result = undefined;
+export let error = false;
 export let displayContext = true;
+export let notSelectable = false;
 const propPickerConfig = writable(undefined);
 const dispatch = createEventDispatcher();
 setContext('PropPickerWrapper', {
@@ -24,23 +28,26 @@ setContext('PropPickerWrapper', {
 });
 </script>
 
-<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
-	<left slot="left" class="relative">
-		<div class="overflow-auto h-full p-4">
-			<slot />
-		</div>
-	</left>
-	<right slot="right">
-		<div class="overflow-auto h-full">
+<Splitpanes>
+	<Pane minSize={20} size={66} class="relative p-4 !transition-none">
+		<slot />
+	</Pane>
+	<Pane minSize={20} size={34} class="px-2 py-2 h-full !transition-none">
+		{#if result}
+			<PropPickerResult {result} />
+		{:else if pickableProperties}
 			<PropPicker
 				{displayContext}
+				{error}
 				{pickableProperties}
+				{notSelectable}
 				on:select={({ detail }) => {
 					dispatch('select', detail)
-					$propPickerConfig?.onSelect(detail)
-					propPickerConfig.set(undefined)
+					if ($propPickerConfig?.onSelect(detail)) {
+						propPickerConfig.set(undefined)
+					}
 				}}
 			/>
-		</div>
-	</right>
-</HSplitPane>
+		{/if}
+	</Pane>
+</Splitpanes>

package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare type InsertionMode = 'append' | 'connect' | 'insert';
-declare type SelectCallback = (path: string) => void;
+declare type SelectCallback = (path: string) => boolean;
 declare type PropPickerConfig = {
     insertionMode: InsertionMode;
     propName: string;
@@ -12,10 +12,14 @@ export declare type PropPickerWrapperContext = {
     clearFocus: () => void;
 };
 import { type Writable } from 'svelte/store';
+import type { PickableProperties } from '../previousResults';
 declare const __propDef: {
     props: {
-        pickableProperties?: Object | undefined;
+        pickableProperties: PickableProperties | undefined;
+        result?: any;
+        error?: boolean | undefined;
         displayContext?: boolean | undefined;
+        notSelectable?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/flows/utils.d.ts

@@ -1,11 +1,9 @@
 import type { Schema } from '../../common';
 import { type Flow, type FlowModule, type InputTransform, type Job } from '../../gen';
-import type { FlowModuleState, FlowState } from './flowState';
+import type { FlowModuleState } from './flowState';
 export declare function cleanInputs(flow: Flow | any): Flow;
+export declare function cleanExpr(expr: string): string;
 export declare function getTypeAsString(arg: any): string;
-export declare function selectedIdToIndexes(selectedId: string): number[];
-export declare function selectedIdToModule(selectedId: string, flow: Flow): FlowModule;
-export declare function selectedIdToModuleState(selectedId: string, flow: FlowState): FlowModuleState;
 export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     input_transforms: Record<string, InputTransform>;
     schema: Schema;
@@ -15,4 +13,9 @@ export declare function getDefaultExpr(importPath?: string | undefined, key?: st
 export declare function jobsToResults(jobs: Job[]): any;
 export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
-export declare function getIndexes(parentIndex: number | undefined, childIndex: number): number[];
+export declare const NEVER_TESTED_THIS_FAR = "never tested this far";
+export declare function emptyFlowModuleState(): FlowModuleState;
+export declare function numberToChars(n: number): any;
+export declare function charsToNumber(n: string): number;
+export declare function isEmptyFlowModule(flowModule: FlowModule): boolean;
+export declare function findNextAvailablePath(path: string): Promise<string>;

package/components/flows/utils.js

@@ -1,4 +1,4 @@
-import { JobService } from '../../gen';
+import { JobService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { loadSchema } from '../../scripts';
 import { workspaceStore } from '../../stores';
@@ -7,25 +7,34 @@ import { get } from 'svelte/store';
 export function cleanInputs(flow) {
     const newFlow = JSON.parse(JSON.stringify(flow));
     newFlow.value.modules.forEach((mod) => {
-        Object.values(mod.input_transforms).forEach((inp) => {
-            // for now we use the value for dynamic expression when done in the static editor so we have to resort to this
-            if (inp.type == 'javascript') {
-                //@ts-ignore
-                inp.value = undefined;
-                inp.expr = inp.expr
-                    .split('\n')
-                    .filter((x) => x != '' &&
-                    !x.startsWith(`import { previous_result, flow_input, step, variable, resource, params } from 'windmill@`))
-                    .join('\n');
+        if (mod.value.type == 'rawscript' || mod.value.type == 'script') {
+            if (Object.keys(mod.input_transforms ?? {}).length > 0) {
+                mod.value.input_transforms = mod.input_transforms;
+                delete mod.input_transforms;
             }
-            else {
-                //@ts-ignore
-                inp.expr = undefined;
-            }
-        });
+            Object.values(mod.value.input_transforms ?? {}).forEach((inp) => {
+                // for now we use the value for dynamic expression when done in the static editor so we have to resort to this
+                if (inp.type == 'javascript') {
+                    //@ts-ignore
+                    inp.value = undefined;
+                    inp.expr = cleanExpr(inp.expr);
+                }
+                else {
+                    //@ts-ignore
+                    inp.expr = undefined;
+                }
+            });
+        }
     });
     return newFlow;
 }
+export function cleanExpr(expr) {
+    return expr
+        .split('\n')
+        .filter((x) => x != '' &&
+        !x.startsWith(`import `))
+        .join('\n');
+}
 export function getTypeAsString(arg) {
     if (arg === null) {
         return 'null';
@@ -35,35 +44,6 @@ export function getTypeAsString(arg) {
     }
     return typeof arg;
 }
-export function selectedIdToIndexes(selectedId) {
-    const splitted = selectedId.split('-');
-    if (splitted[0] == 'loop') {
-        return [Number(splitted[1])];
-    }
-    else {
-        return splitted.map(Number);
-    }
-}
-export function selectedIdToModule(selectedId, flow) {
-    const [p, c] = selectedIdToIndexes(selectedId);
-    const pm = flow.value.modules[p];
-    if (c && pm.value.type == 'forloopflow') {
-        return pm.value.modules[c];
-    }
-    else {
-        return pm;
-    }
-}
-export function selectedIdToModuleState(selectedId, flow) {
-    const [p, c] = selectedIdToIndexes(selectedId);
-    const pm = flow.modules[p];
-    if (c && pm.childFlowModules) {
-        return pm.childFlowModules[c];
-    }
-    else {
-        return pm;
-    }
-}
 export async function loadSchemaFromModule(module) {
     const mod = module.value;
     if (mod.type == 'rawscript' || mod.type === 'script') {
@@ -82,10 +62,13 @@ export async function loadSchemaFromModule(module) {
             };
         }
         const keys = Object.keys(schema?.properties ?? {});
-        let input_transforms = module.input_transforms;
-        if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(module.input_transforms).sort())) {
+        if (Object.keys(module.input_transforms ?? {}).length > 0) {
+            mod.input_transforms = module.input_transforms;
+        }
+        let input_transforms = mod.input_transforms ?? module.input_transforms ?? {};
+        if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
             input_transforms = keys.reduce((accu, key) => {
-                let nv = module.input_transforms[key] ?? {
+                let nv = input_transforms[key] ?? {
                     type: 'static',
                     value: undefined
                 };
@@ -111,8 +94,8 @@ export function isCodeInjection(expr) {
     return dynamicTemplateRegex.test(expr);
 }
 export function getDefaultExpr(importPath = undefined, key = 'myfield', previousExpr) {
-    const expr = previousExpr ?? `previous_result.${key}`;
-    return `import { previous_result, flow_input, step, variable, resource, params } from 'windmill${importPath ? `@${importPath}` : ''}'
+    const expr = previousExpr ?? `results.${key}`;
+    return `import { results, flow_input, variable, resource, params } from 'windmill${importPath ? `@${importPath}` : ''}'
 
 ${expr}`;
 }
@@ -152,11 +135,58 @@ export function codeToStaticTemplate(code) {
     }
     return undefined;
 }
-export function getIndexes(parentIndex, childIndex) {
-    const indexes = [];
-    if (parentIndex !== undefined) {
-        indexes.push(parentIndex);
+export const NEVER_TESTED_THIS_FAR = 'never tested this far';
+export function emptyFlowModuleState() {
+    return {
+        schema: emptySchema(),
+        previewResult: NEVER_TESTED_THIS_FAR
+    };
+}
+const aCharCode = 'a'.charCodeAt(0);
+export function numberToChars(n) {
+    var b = [n], sp, out, i, div;
+    sp = 0;
+    while (sp < b.length) {
+        if (b[sp] > 25) {
+            div = Math.floor(b[sp] / 26);
+            b[sp + 1] = div - 1;
+            b[sp] %= 26;
+        }
+        sp += 1;
+    }
+    out = '';
+    for (i = 0; i < b.length; i += 1) {
+        out = String.fromCharCode(aCharCode + b[i]) + out;
+    }
+    return out;
+}
+export function charsToNumber(n) {
+    let b = Math.pow(26, n.length - 1);
+    let res = 0;
+    for (let c of n) {
+        res += (c.charCodeAt(0) - aCharCode + 1) * b;
+        b = b / 26;
+    }
+    return res - 1;
+}
+export function isEmptyFlowModule(flowModule) {
+    return flowModule.value.type === 'identity';
+}
+export 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;
     }
-    indexes.push(childIndex);
-    return indexes;
 }

package/components/graph/FlowGraph.svelte

@@ -0,0 +1,259 @@
+<script>import Svelvet, {} from 'svelvet';
+import { sugiyama, dagStratify, decrossOpt, coordGreedy, coordCenter } from 'd3-dag';
+import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
+import { truncate, truncateRev } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import { numberToChars } from '../flows/utils';
+export let modules = [];
+export let failureModule = undefined;
+const idGenerator = createIdGenerator();
+let nestedNodes;
+let nodes = [];
+let edges = [];
+let width, height;
+let dispatch = createEventDispatcher();
+$: if (modules?.length) {
+    createGraph(modules, failureModule);
+}
+else {
+    nodes = edges = [];
+}
+function createGraph(modules, failureModule) {
+    nestedNodes = nodes = [];
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Flow start'));
+    modules.forEach((m) => {
+        const item = getConvertedFlowModule(m);
+        item && nestedNodes.push(item);
+    });
+    const endParentIds = getParentIds();
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Flow end'));
+    if (failureModule) {
+        nestedNodes.push(createErrorHandler(endParentIds, failureModule));
+    }
+    const flatNodes = flattenNestedNodes(nestedNodes);
+    const layered = layoutNodes(flatNodes);
+    nodes = layered.nodes;
+    width = layered.width;
+    height = layered.height;
+    edges = createEdges(nodes);
+}
+function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefined) {
+    const type = module.value.type;
+    const parentIds = getParentIds(parent);
+    if (type === 'rawscript') {
+        const lang = module.value.language;
+        return flowModuleToNode(parentIds, module.id, module.summary || 'Inline script', 'inline', module, lang, edgeLabel);
+    }
+    else if (type === 'script') {
+        return flowModuleToNode(parentIds, module.id, module.summary || module.value.path || 'Hub script', module.value.path.startsWith('hub/') ? 'hub' : 'workspace', module, undefined, edgeLabel);
+    }
+    else if (type === 'forloopflow') {
+        const expr = module.value.iterator['expr'];
+        return flowModuleToLoop(module.value.modules, `For loop: ${truncate(expr, 10)}`, parent);
+    }
+    else if (type === 'branchone') {
+        const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
+        return flowModuleToBranch(branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent);
+    }
+    else if (type === 'branchall') {
+        const branches = module.value.branches.map((b) => b.modules);
+        return flowModuleToBranch(branches, [], parent);
+    }
+    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity script', 'inline', module, undefined, edgeLabel);
+}
+function getParentIds(items = undefined) {
+    const item = items?.at(-1) || nestedNodes.at(-1);
+    if (!item)
+        return [];
+    if (isNode(item)) {
+        return ['' + item.id];
+    }
+    else if (isLoop(item)) {
+        return getParentIds(item.items);
+    }
+    else if (isBranch(item)) {
+        return item.items.map((i) => getParentIds(i)).flat();
+    }
+    return [];
+}
+function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel) {
+    const langImg = {
+        deno: '/icons/ts-lang.svg',
+        go: '/icons/go-lang.svg',
+        python3: '/icons/python-lang.svg',
+        bash: '/icons/bash-lang.svg'
+    };
+    const hostImg = {
+        hub: '/icons/hub-script.svg',
+        workspace: '/icons/inline-script.svg',
+        inline: ''
+    };
+    const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]';
+    const graphId = idGenerator.next().value;
+    return {
+        id: graphId,
+        position: { x: -1, y: -1 },
+        data: {
+            html: `
+				<div class="w-full flex justify-between items-center px-1">
+					<div class="${wrapperWidth} text-left ellipsize text-2xs">
+						${title}
+					</div>
+					<div class="flex items-center">
+						${lang ? `<img src="${langImg[lang]}" class="grayscale">` : ''}
+						${host != 'inline' ? `<img src="${hostImg[host]}" class="grayscale">` : ''}
+						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
+							${id ?? numberToChars(graphId - 1)}
+						</span>
+					</div>
+				</div>
+			`
+        },
+        host,
+        width: NODE.width,
+        height: NODE.height,
+        bgColor: 'white',
+        parentIds,
+        clickCallback: (node) => {
+            dispatch('click', onClickDetail);
+        },
+        edgeLabel
+    };
+}
+function flowModuleToLoop(modules, startLabel, parent = undefined) {
+    const loop = {
+        type: 'loop',
+        items: [createVirtualNode(getParentIds(parent), startLabel)]
+    };
+    modules.forEach((module) => {
+        const item = getConvertedFlowModule(module, loop.items);
+        item && loop.items.push(item);
+    });
+    loop.items.push(createVirtualNode(getParentIds(loop.items), 'Collection of the results'));
+    return loop;
+}
+function flowModuleToBranch(branches, edgesLabel, parent = undefined) {
+    const branch = {
+        type: 'branch',
+        items: []
+    };
+    branches.forEach((modules, i) => {
+        const items = [];
+        if (!modules.length) {
+            items.push(createVirtualNode(getParentIds(parent), 'Empty branch', edgesLabel[i]));
+        }
+        else {
+            modules.forEach((module) => {
+                const item = getConvertedFlowModule(module, items.length ? items : parent, edgesLabel[i]);
+                item && items.push(item);
+            });
+        }
+        items.length && branch.items.push(items);
+    });
+    return branch;
+}
+function flattenNestedNodes(nestedNodes, nodes = []) {
+    const array = nodes;
+    nestedNodes.forEach((node) => {
+        if (isNode(node)) {
+            array.push(node);
+        }
+        else if (isLoop(node)) {
+            flattenNestedNodes(node.items, array);
+        }
+        else if (isBranch(node)) {
+            node.items.forEach((item) => {
+                flattenNestedNodes(item, array);
+            });
+        }
+    });
+    return array;
+}
+function layoutNodes(nodes) {
+    if (!nodes.length)
+        return { nodes: [], width: 0, height: 0 };
+    const stratify = dagStratify().id(({ id }) => '' + id);
+    const dag = stratify(nodes);
+    const layout = sugiyama()
+        .decross(decrossOpt())
+        .coord(coordCenter())
+        .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+    const { width, height } = layout(dag);
+    return {
+        nodes: dag.descendants().map((des) => ({
+            ...des.data,
+            id: +des.data.id,
+            position: { x: des.x ? des.x - NODE.width / 2 : 0, y: des.y || 0 }
+        })),
+        width: width,
+        height: height + NODE.height
+    };
+}
+function createEdges(nodes) {
+    const edges = [];
+    nodes.forEach((node) => {
+        node.parentIds.forEach((pid, i) => {
+            edges.push({
+                id: `e-${pid}-${node.id}`,
+                source: +pid,
+                target: node.id,
+                labelBgColor: 'white',
+                arrow: true,
+                animate: false,
+                noHandle: false,
+                label: node.edgeLabel
+                // type: 'smoothstep'
+            });
+        });
+    });
+    return edges;
+}
+function createVirtualNode(parentIds, label, edgesLabel) {
+    return {
+        id: idGenerator.next().value,
+        position: { x: -1, y: -1 },
+        data: {
+            html: `
+				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+					${label}
+				</div>
+			`
+        },
+        width: NODE.width,
+        height: NODE.height,
+        bgColor: '#d4e4ff',
+        parentIds
+    };
+}
+function createErrorHandler(parentIds, module) {
+    return {
+        id: -1,
+        position: { x: -1, y: -1 },
+        data: {
+            html: `
+				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+					Error handler
+				</div>
+			`
+        },
+        width: NODE.width,
+        height: NODE.height,
+        bgColor: 'rgb(248 113 113)',
+        parentIds,
+        clickCallback: (node) => {
+            dispatch('click', module);
+        }
+    };
+}
+</script>
+
+<div
+	on:scroll={() => console.log('X')}
+	bind:clientWidth={width}
+	bind:clientHeight={height}
+	class="w-full h-full overflow-hidden"
+>
+	{#if width && height}
+		<Svelvet {nodes} {edges} {width} {height} bgColor="rgb(249 250 251)" />
+	{/if}
+</div>

package/components/graph/FlowGraph.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../gen';
+declare const __propDef: {
+    props: {
+        modules?: FlowModule[] | undefined;
+        failureModule?: FlowModule | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowGraphProps = typeof __propDef.props;
+export declare type FlowGraphEvents = typeof __propDef.events;
+export declare type FlowGraphSlots = typeof __propDef.slots;
+export default class FlowGraph extends SvelteComponentTyped<FlowGraphProps, FlowGraphEvents, FlowGraphSlots> {
+}
+export {};