windmill-components 1.13.25 → 1.22.0

package/components/flows/DynamicInputHelpBox.svelte

@@ -0,0 +1,72 @@
+<script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { slide } from 'svelte/transition';
+$: opened = false;
+</script>
+
+<div class="text-xs flex flex-row-reverse">
+	<span
+		class="underline mr-4"
+		on:click={() => {
+			opened = !opened
+		}}
+	>
+		Help
+		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
+	</span>
+</div>
+
+{#if opened}
+	<div
+		transition:slide
+		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		role="alert"
+		id="dynamic-input-help-box"
+	>
+		<p class="font-bold">Dynamic arg help</p>
+		<p>
+			When a field is "dynamic", its value is computed dynamically as the evaluation of its
+			corresponding typescript snippet.
+		</p>
+		That snippet can be single line:
+		<pre><code>last_result.myarg</code></pre>
+		or multiline:
+		<pre><code
+				>let x = 5;
+x + 2</code
+			></pre>
+		<p>
+			If it is multiline, the last statement before the final expression<b
+				>MUST END WITH ; and a newline</b
+			>
+		</p>
+		The snippet can also be a string template:
+		<pre><code
+				>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125;
+belong to us`</code
+			></pre>
+		However, the last line must always be the final expression.
+		<p>
+			The snippet can use any typescript primitives, and the following flow specific objects and
+			functions:
+		</p>
+		<ul class="ml-4">
+			<li>
+				<b>previous_result</b>: the object containing the result of the previous step
+			</li>
+			<li><b>flow_input</b>: the object containing the flow input arguments</li>
+			<li><b>params</b>: the object containing the current step static values</li>
+			<li>
+				<b>step(n)</b>: the function returning the result of step number n. One can also use a
+				negative n. step(0) == flow_input , step(-1) == previous_result
+			</li>
+			<li>
+				<b>variable(path)</b>: the function returning the variable (including secrets) at given path
+				as a string
+			</li>
+			<li>
+				<b>resource(path)</b>: the function returning the resource at a given path as an object
+			</li>
+		</ul>
+	</div>
+{/if}

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

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

package/components/flows/FlowInputs.svelte

@@ -0,0 +1,27 @@
+<script>import { FlowModuleValue } from '../../gen/models/FlowModuleValue';
+import { faCode } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import FlowScriptPicker from './pickers/FlowScriptPicker.svelte';
+import PickHubScript from './pickers/PickHubScript.svelte';
+import PickScript from './pickers/PickScript.svelte';
+export let isTrigger;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="columns-2">
+	<PickScript {isTrigger} on:pick />
+	<PickHubScript {isTrigger} on:pick />
+	<FlowScriptPicker
+		label="New Typescript {isTrigger ? 'trigger ' : ''}script (Deno)"
+		icon={faCode}
+		iconColor="text-blue-800"
+		on:click={() => dispatch('new', { language: FlowModuleValue.language.DENO })}
+	/>
+	<FlowScriptPicker
+		disabled={isTrigger}
+		label="New Python {isTrigger ? 'trigger ' : ''}script (3.10)"
+		icon={faCode}
+		iconColor="text-yellow-500"
+		on:click={() => dispatch('new', { language: FlowModuleValue.language.PYTHON3 })}
+	/>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isTrigger: boolean;
+    };
+    events: {
+        pick: CustomEvent<any>;
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowInputsProps = typeof __propDef.props;
+export declare type FlowInputsEvents = typeof __propDef.events;
+export declare type FlowInputsSlots = typeof __propDef.slots;
+export default class FlowInputs extends SvelteComponentTyped<FlowInputsProps, FlowInputsEvents, FlowInputsSlots> {
+}
+export {};

package/components/flows/FlowModuleHeader.svelte

@@ -0,0 +1,91 @@
+<script>import { FlowModuleValue, Script } from '../../gen';
+import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { Highlight } from 'svelte-highlight';
+import { python, typescript } from 'svelte-highlight/languages';
+import github from 'svelte-highlight/styles/github';
+import Modal from '../Modal.svelte';
+import { createScriptFromInlineScript, fork, removeModule } from './flowStore';
+import { getScriptByPath, scrollIntoView } from './utils';
+export let open;
+export let i;
+export let shouldPick = false;
+export let mod;
+let modalViewer;
+let modalViewerContent = '';
+let modalViewerLanguage = Script.language.DENO;
+async function viewCode() {
+    const { content, language } = await getScriptByPath(mod.value.path);
+    modalViewerContent = content;
+    modalViewerLanguage = language;
+    modalViewer.openModal();
+}
+function scrollTo({ target }) {
+    const el = document.querySelector(target.getAttribute('href'));
+    scrollIntoView(el);
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<div class="flex flex-row w-full space-x-2">
+	<slot />
+	<a href="#module-{i}" class="grow" on:click={() => (open = i)} on:click|preventDefault={scrollTo}
+		><div class="w-full" /></a
+	>
+
+	<div class="flex flex-row space-x-2">
+		{#if mod.value.type === FlowModuleValue.type.SCRIPT && !shouldPick}
+			<button
+				type="button"
+				on:click={() => {
+					open = i
+					fork(i)
+				}}
+				class="default-secondary-button-v2 text-xs"
+			>
+				<Icon data={faCodeBranch} class={`w-4 mr-2 h-4`} />
+				Fork
+			</button>
+			<button type="button" on:click={viewCode} class="default-secondary-button-v2 text-xs">
+				<Icon data={faCode} class="w-4 mr-2 h-4" />
+				View code
+			</button>
+		{/if}
+
+		{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT && !shouldPick}
+			<button
+				type="button"
+				on:click={() => createScriptFromInlineScript(i)}
+				class="default-secondary-button-v2 text-sm"
+			>
+				<Icon data={faSave} class="w-4 mr-4" />
+				Save to workspace
+			</button>
+		{/if}
+		<button
+			type="button"
+			on:click={() => {
+				open = -1
+				removeModule(i)
+			}}
+			class="default-secondary-button-v2 text-xs"
+		>
+			<Icon data={faTrashAlt} class="w-4 mr-2 h-4" />
+			Remove step
+		</button>
+	</div>
+</div>
+
+<Modal bind:this={modalViewer}>
+	<div slot="title">Script {mod?.value.path}</div>
+	<div slot="content">
+		{#if modalViewerLanguage === 'python3'}
+			<Highlight language={python} code={modalViewerContent} />
+		{:else if modalViewerLanguage === 'deno'}
+			<Highlight language={typescript} code={modalViewerContent} />
+		{/if}
+	</div>
+</Modal>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../gen';
+declare const __propDef: {
+    props: {
+        open: number;
+        i: number;
+        shouldPick?: boolean | undefined;
+        mod: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FlowModuleHeaderProps = typeof __propDef.props;
+export declare type FlowModuleHeaderEvents = typeof __propDef.events;
+export declare type FlowModuleHeaderSlots = typeof __propDef.slots;
+export default class FlowModuleHeader extends SvelteComponentTyped<FlowModuleHeaderProps, FlowModuleHeaderEvents, FlowModuleHeaderSlots> {
+}
+export {};

package/components/flows/flowStore.d.ts

@@ -0,0 +1,17 @@
+import type { Schema } from '../../common';
+import { FlowModuleValue, type Flow } from '../../gen';
+export declare type FlowMode = 'push' | 'pull';
+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 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: FlowModuleValue.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;

package/components/flows/flowStore.js

@@ -0,0 +1,161 @@
+import { FlowModuleValue, ScriptService } from '../../gen';
+import { initialCode } from '../../script_helpers';
+import { userStore, workspaceStore } from '../../stores';
+import { derived, get, writable } from 'svelte/store';
+import { createInlineScriptModuleFromPath, getFirstStepSchema, loadSchemaFromModule, scrollIntoView } from './utils';
+export const flowStore = writable(undefined);
+export const schemasStore = writable([]);
+export function initFlow(flow) {
+    schemasStore.set([]);
+    flowStore.set(flow);
+    // For each module in flow, we should load the corresponding schema
+    flow.value.modules.forEach((_, index) => {
+        loadSchema(index);
+    });
+}
+export const isCopyFirstStepSchemaDisabled = derived(flowStore, (flow) => {
+    if (flow) {
+        const modules = flow.value.modules;
+        const [firstModule] = modules;
+        return (modules.length === 0 || (firstModule.value.path === '' && firstModule.value.type === 'script'));
+    }
+    else {
+        return true;
+    }
+});
+export function addModule(i) {
+    const newModule = {
+        value: { type: FlowModuleValue.type.SCRIPT, path: '' },
+        input_transform: {}
+    };
+    flowStore.update((flow) => {
+        const insertAt = i ?? flow.value.modules.length;
+        flow.value.modules.splice(insertAt, 0, newModule);
+        flow.value.modules = flow.value.modules;
+        setTimeout(() => scrollIntoView(document.querySelector(`#module-${insertAt}`)), 100);
+        return flow;
+    });
+}
+export async function pickScript(path, step) {
+    flowStore.update((flow) => {
+        if (flow.value.modules[step]) {
+            flow.value.modules[step].value.path = path;
+        }
+        return flow;
+    });
+    await loadSchema(step);
+}
+export async function createInlineScriptModule(language, step, mode) {
+    const code = initialCode(language, (mode === 'pull' && step == 0));
+    flowStore.update((flow) => {
+        flow.value.modules[step].value = {
+            type: FlowModuleValue.type.RAWSCRIPT,
+            content: code,
+            language,
+        };
+        return flow;
+    });
+    await loadSchema(step);
+}
+export async function loadSchema(step) {
+    const flow = get(flowStore);
+    const module = flow.value.modules[step];
+    const { input_transform, schema } = await loadSchemaFromModule(module);
+    flowStore.update((flow) => {
+        flow.value.modules[step].input_transform = input_transform;
+        return flow;
+    });
+    schemasStore.update((schemas) => {
+        schemas[step] = schema;
+        return schemas;
+    });
+}
+export async function fork(step) {
+    const flow = get(flowStore);
+    const flowModuleValue = flow.value.modules[step].value;
+    if (flowModuleValue.path) {
+        const moduleValue = await createInlineScriptModuleFromPath(flowModuleValue.path);
+        flowStore.update((flow) => {
+            flow.value.modules[step].value = moduleValue;
+            return flow;
+        });
+    }
+}
+export async function createScriptFromInlineScript(step) {
+    const flow = get(flowStore);
+    const schemas = get(schemasStore);
+    const user = get(userStore);
+    const flowModuleValue = flow.value.modules[step].value;
+    const originalScriptPath = flowModuleValue.path;
+    const wasForked = Boolean(originalScriptPath);
+    let suffix = `step-${step}`;
+    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} at step ${step}.`;
+    const availablePath = await findNextAvailablePath(path);
+    await ScriptService.createScript({
+        workspace: get(workspaceStore),
+        requestBody: {
+            path: availablePath,
+            summary: '',
+            description,
+            content: flowModuleValue.content,
+            parent_hash: undefined,
+            schema: schemas[step],
+            is_template: false,
+            language: flowModuleValue.language
+        }
+    });
+    flowStore.update((flow) => {
+        flow.value.modules[step].value = {
+            type: FlowModuleValue.type.SCRIPT,
+            path: availablePath
+        };
+        return flow;
+    });
+    await loadSchema(step);
+}
+export function removeModule(step) {
+    flowStore.update((flow) => {
+        flow.value.modules.splice(step, 1);
+        return flow;
+    });
+    schemasStore.update((schemas) => {
+        schemas.splice(step, 1);
+        return schemas;
+    });
+}
+export async function copyFirstStepSchema() {
+    const flow = get(flowStore);
+    const flowSchema = await getFirstStepSchema(flow);
+    flowStore.update((flow) => {
+        flow.schema = flowSchema;
+        return flow;
+    });
+}
+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;
+    }
+}
+export function shouldPickOrCreateScript(flow, step) {
+    const module = flow.value.modules[step];
+    return module.value.path === '' && module.value.language === undefined;
+}

package/components/flows/pickers/FlowScriptPicker.svelte

@@ -0,0 +1,11 @@
+<script>import Icon from 'svelte-awesome';
+export let disabled = false;
+export let icon;
+export let label;
+export let iconColor;
+</script>
+
+<button {disabled} type="button" on:click class="default-secondary-button-v2 mb-2 w-full">
+	<Icon data={icon} class={`w-4 h-4 mr-2 -ml-2 ${iconColor}`} />
+	{label}
+</button>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconDefinition } from '@fortawesome/free-brands-svg-icons';
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        icon: IconDefinition;
+        label: string;
+        iconColor: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowScriptPickerProps = typeof __propDef.props;
+export declare type FlowScriptPickerEvents = typeof __propDef.events;
+export declare type FlowScriptPickerSlots = typeof __propDef.slots;
+export default class FlowScriptPicker extends SvelteComponentTyped<FlowScriptPickerProps, FlowScriptPickerEvents, FlowScriptPickerSlots> {
+}
+export {};

package/components/flows/pickers/PickHubScript.svelte

@@ -0,0 +1,30 @@
+<script>import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
+import FlowScriptPicker from './FlowScriptPicker.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import { hubScripts } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+export let isTrigger;
+let items;
+$: items = $hubScripts?.filter((x) => x.is_trigger == isTrigger) ?? [];
+let itemPicker;
+const dispatch = createEventDispatcher();
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path) => {
+		dispatch('pick', { path })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	loadItems={async () => {
+		return items
+	}}
+/>
+
+<FlowScriptPicker
+	label={`Pick a ${isTrigger ? 'trigger ' : ''} script from the Hub`}
+	icon={faUserGroup}
+	iconColor="text-blue-500"
+	on:click={() => itemPicker.openModal()}
+/>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isTrigger: boolean;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PickHubScriptProps = typeof __propDef.props;
+export declare type PickHubScriptEvents = typeof __propDef.events;
+export declare type PickHubScriptSlots = typeof __propDef.slots;
+export default class PickHubScript extends SvelteComponentTyped<PickHubScriptProps, PickHubScriptEvents, PickHubScriptSlots> {
+}
+export {};

package/components/flows/pickers/PickScript.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../ItemPicker.svelte';
+import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
+import { ScriptService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+import FlowScriptPicker from './FlowScriptPicker.svelte';
+export let isTrigger;
+let items = [];
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
+}
+$: {
+    if ($workspaceStore) {
+        loadItems();
+    }
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path) => {
+		dispatch('pick', { path })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	loadItems={async () => {
+		return items
+	}}
+/>
+
+<FlowScriptPicker
+	label={`Pick a ${isTrigger ? 'trigger ' : ''}script from your workspace`}
+	icon={faUserGroup}
+	iconColor="text-blue-500"
+	on:click={() => itemPicker.openModal()}
+/>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isTrigger: boolean;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PickScriptProps = typeof __propDef.props;
+export declare type PickScriptEvents = typeof __propDef.events;
+export declare type PickScriptSlots = typeof __propDef.slots;
+export default class PickScript extends SvelteComponentTyped<PickScriptProps, PickScriptEvents, PickScriptSlots> {
+}
+export {};

package/components/flows/utils.d.ts

@@ -0,0 +1,21 @@
+import type { Schema } from '../../common';
+import { FlowModuleValue, InputTransform, type Flow, type FlowModule } from '../../gen';
+import type { FlowMode } from './flowStore';
+export declare function flowToMode(flow: Flow, mode: FlowMode): Flow;
+export declare function flattenForloopFlows(flow: Flow): Flow;
+export declare function getTypeAsString(arg: any): string;
+export declare function formatValue(arg: any): any;
+export declare function getFirstStepSchema(flow: Flow): Promise<Schema>;
+export declare function getScriptByPath(path: string): Promise<{
+    content: string;
+    language: FlowModuleValue.language;
+}>;
+export declare function createInlineScriptModuleFromPath(path: string): Promise<FlowModuleValue>;
+export declare function scrollIntoView(el: any): void;
+export declare function loadSchemaFromModule(module: FlowModule): Promise<{
+    input_transform: Record<string, InputTransform>;
+    schema: Schema;
+}>;
+export declare function isCodeInjection(expr: string | undefined): boolean;
+export declare function getCodeInjectionExpr(code: string, isRaw: boolean): string;
+export declare function getDefaultExpr(i: number, key?: string): string;