windmill-components 1.22.42 → 1.28.3

package/components/flows/FlowSettings.svelte

@@ -0,0 +1,174 @@
+<script>import { sendUserToast } from '../../utils';
+import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown, DropdownItem } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import Editor from '../Editor.svelte';
+import FlowViewer from '../FlowViewer.svelte';
+import Modal from '../Modal.svelte';
+import RadioButton from '../RadioButton.svelte';
+import CollapseLink from './../CollapseLink.svelte';
+import CronInput from './../CronInput.svelte';
+import FlowBox from './../flows/FlowBox.svelte';
+import { flowStore, initFlow, mode } from './../flows/flowStore';
+import { flowToMode } from './../flows/utils';
+import Path from './../Path.svelte';
+import Required from './../Required.svelte';
+import SchemaForm from './../SchemaForm.svelte';
+import Toggle from './../Toggle.svelte';
+import Tooltip from './../Tooltip.svelte';
+import FlowBoxHeader from './FlowBoxHeader.svelte';
+export let pathError = '';
+export let initialPath = '';
+export let scheduleArgs = {};
+export let scheduleEnabled = false;
+export let scheduleCron = '0 */5 * * *';
+export let open;
+let jsonSetter;
+let jsonViewer;
+let jsonValue = '';
+</script>
+
+<Modal bind:this={jsonSetter}>
+	<div slot="title">Import JSON</div>
+	<div slot="content" class="h-full">
+		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
+	</div>
+	<div slot="submission">
+		<button
+			class="default-button px-4 py-2 font-semibold"
+			on:click={() => {
+				Object.assign($flowStore, JSON.parse(jsonValue))
+				initFlow($flowStore)
+				open = -1
+				sendUserToast('OpenFlow imported from JSON')
+				jsonSetter.closeModal()
+			}}
+		>
+			Import
+		</button>
+	</div>
+</Modal>
+
+<Modal bind:this={jsonViewer}>
+	<div slot="title">See JSON</div>
+	<div slot="content" class="h-full">
+		<FlowViewer flow={flowToMode($flowStore, $mode)} tab="json" />
+	</div>
+</Modal>
+
+<FlowBox>
+	<FlowBoxHeader title="Flow Settings">
+		<div class="flex flex-row-reverse">
+			<Dropdown class="w-fit" placement="bottom-end">
+				<button slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+					...
+				</button>
+				<DropdownItem
+					on:click={() => {
+						jsonSetter.openModal()
+					}}
+				>
+					<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
+					Import from a JSON OpenFlow
+				</DropdownItem>
+				<DropdownItem
+					on:click={() => {
+						jsonViewer.openModal()
+					}}
+				>
+					<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+					Export to a JSON OpenFlow
+				</DropdownItem>
+				<DropdownItem
+					on:click={() => {
+						const url = new URL('https://hub.windmill.dev/flows/add')
+						const openFlow = {
+							value: $flowStore.value,
+							summary: $flowStore.summary,
+							description: $flowStore.description,
+							schema: $flowStore.schema
+						}
+						url.searchParams.append('flow', btoa(JSON.stringify(flowToMode(openFlow, $mode))))
+						window.open(url, '_blank')?.focus()
+					}}
+				>
+					<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
+					Publish to Hub
+				</DropdownItem>
+			</Dropdown>
+		</div>
+	</FlowBoxHeader>
+
+	<div class="p-6">
+		<Path
+			bind:error={pathError}
+			bind:path={$flowStore.path}
+			{initialPath}
+			namePlaceholder="my_flow"
+			kind="flow"
+		>
+			<div slot="ownerToolkit">
+				Flow permissions depend on their path. Select the group <span class="font-mono">all</span>
+				to share your flow, and <span class="font-mono">user</span> to keep it private.
+				<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+			</div>
+		</Path>
+
+		<label class="block mt-4">
+			<span class="text-gray-700">Summary <Required required={false} /></span>
+			<textarea
+				bind:value={$flowStore.summary}
+				class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+				placeholder="A very short summary of the flow displayed when the flow is listed"
+				rows="1"
+			/>
+		</label>
+
+		<div class="mt-4">
+			<RadioButton
+				options={[
+					[
+						{
+							title: 'UI or webhook triggered',
+							desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
+						},
+						'push'
+					],
+					[
+						{
+							title: 'Watching changes regularly',
+							desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
+						},
+						'pull'
+					]
+				]}
+				bind:value={$mode}
+			/>
+		</div>
+		{#if $mode == 'pull'}
+			<CollapseLink text="set primary schedule" open={true}>
+				<Tooltip>
+					The primary schedule of a flow is simply a schedule that has the same name as a flow. It
+					can be set and enabled directly within the flow editor. "Watching for new changes" flows
+					are meant to be watching regularly for new items in an external systems. The primary
+					schedule purpose is there to set the periodicity at which you want this watcher to
+					operate.
+				</Tooltip>
+				<Toggle
+					bind:checked={scheduleEnabled}
+					options={{
+						left: 'disabled',
+						right: 'enabled'
+					}}
+				/>
+				<div class="p-2 mt-2 rounded" class:bg-gray-300={!scheduleEnabled}>
+					{#if !scheduleEnabled}
+						<span class="font-black">No next scheduled run when disabled</span>
+					{/if}
+					<CronInput bind:schedule={scheduleCron} />
+				</div>
+				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
+			</CollapseLink>
+		{/if}
+	</div>
+</FlowBox>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        pathError?: string | undefined;
+        initialPath?: string | undefined;
+        scheduleArgs?: Record<string, any> | undefined;
+        scheduleEnabled?: boolean | undefined;
+        scheduleCron?: string | undefined;
+        open: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowSettingsProps = typeof __propDef.props;
+export declare type FlowSettingsEvents = typeof __propDef.events;
+export declare type FlowSettingsSlots = typeof __propDef.slots;
+export default class FlowSettings extends SvelteComponentTyped<FlowSettingsProps, FlowSettingsEvents, FlowSettingsSlots> {
+}
+export {};

package/components/flows/flowStore.d.ts

@@ -1,13 +1,16 @@
 import type { Schema } from '../../common';
-import { FlowModuleValue, type Flow } from '../../gen';
+import { RawScript, 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: FlowModuleValue.language, step: number, mode: FlowMode): 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>;

package/components/flows/flowStore.js

@@ -1,11 +1,25 @@
-import { FlowModuleValue, ScriptService } from '../../gen';
+import { RawScript, ScriptService } from '../../gen';
 import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
+import { emptySchema } from '../../utils';
 import { derived, get, writable } from 'svelte/store';
 import { createInlineScriptModuleFromPath, getFirstStepSchema, loadSchemaFromModule, scrollIntoView } from './utils';
+export const mode = writable('push');
 export const flowStore = writable(undefined);
 export const schemasStore = writable([]);
 export function initFlow(flow) {
+    const newMode = flow.value.modules[1]?.value.type === 'forloopflow' ? 'pull' : 'push';
+    mode.set(newMode);
+    flow = flattenForloopFlows(flow);
+    flow.value.modules.forEach((mod) => {
+        Object.values(mod.input_transform).forEach((inp) => {
+            if (inp.type == 'javascript') {
+                // for now we use the value for dynamic expression when done in the static editor so we have to resort to this
+                //@ts-ignore
+                inp.value = codeToStaticTemplate(inp.expr);
+            }
+        });
+    });
     schemasStore.set([]);
     flowStore.set(flow);
     // For each module in flow, we should load the corresponding schema
@@ -13,11 +27,36 @@ export function initFlow(flow) {
         loadSchema(index);
     });
 }
+export function codeToStaticTemplate(code) {
+    if (!code)
+        return undefined;
+    const lines = code
+        .split('\n')
+        .slice(1)
+        .filter((x) => x != '');
+    if (lines.length == 1) {
+        const line = lines[0].trim();
+        if (line[0] == '`' && line.charAt(line.length - 1) == '`') {
+            return line.slice(1, line.length - 1);
+        }
+    }
+    return undefined;
+}
+export function flattenForloopFlows(flow) {
+    let newFlow = JSON.parse(JSON.stringify(flow));
+    const mod = newFlow.value.modules[1]?.value;
+    if (mod?.type === 'forloopflow') {
+        const oldModules = mod.value?.modules ?? [];
+        newFlow.value.modules = newFlow.value.modules.slice(0, 1);
+        newFlow.value.modules.push(...oldModules);
+    }
+    return newFlow;
+}
 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'));
+        return (modules.length === 0 || (firstModule.value.type === 'script' && firstModule.value.path === ''));
     }
     else {
         return true;
@@ -25,7 +64,7 @@ export const isCopyFirstStepSchemaDisabled = derived(flowStore, (flow) => {
 });
 export function addModule(i) {
     const newModule = {
-        value: { type: FlowModuleValue.type.SCRIPT, path: '' },
+        value: { type: 'script', path: '' },
         input_transform: {}
     };
     flowStore.update((flow) => {
@@ -35,23 +74,34 @@ export function addModule(i) {
         setTimeout(() => scrollIntoView(document.querySelector(`#module-${insertAt}`)), 100);
         return flow;
     });
+    schemasStore.update((schemas) => {
+        if (typeof i !== 'undefined') {
+            const previousSchema = schemas[i];
+            const hadSchema = Boolean(previousSchema);
+            if (hadSchema) {
+                schemas[i] = emptySchema();
+                schemas[i + 1] = previousSchema;
+            }
+        }
+        return schemas;
+    });
 }
 export async function pickScript(path, step) {
     flowStore.update((flow) => {
         if (flow.value.modules[step]) {
-            flow.value.modules[step].value.path = path;
+            flow.value.modules[step].value = { type: 'script', path };
         }
         return flow;
     });
     await loadSchema(step);
 }
 export async function createInlineScriptModule(language, step, mode) {
-    const code = initialCode(language, (mode === 'pull' && step == 0));
+    const code = initialCode(language, mode === 'pull' && step == 0);
     flowStore.update((flow) => {
         flow.value.modules[step].value = {
-            type: FlowModuleValue.type.RAWSCRIPT,
+            type: 'rawscript',
             content: code,
-            language,
+            language
         };
         return flow;
     });
@@ -73,6 +123,9 @@ export async function loadSchema(step) {
 export async function fork(step) {
     const flow = get(flowStore);
     const flowModuleValue = flow.value.modules[step].value;
+    if (flowModuleValue.type !== 'script') {
+        throw new Error('Can only fork a script module');
+    }
     if (flowModuleValue.path) {
         const moduleValue = await createInlineScriptModuleFromPath(flowModuleValue.path);
         flowStore.update((flow) => {
@@ -86,6 +139,9 @@ export async function createScriptFromInlineScript(step) {
     const schemas = get(schemasStore);
     const user = get(userStore);
     const flowModuleValue = flow.value.modules[step].value;
+    if (flowModuleValue.type != 'rawscript') {
+        throw new Error("Can't create script from non-inline script");
+    }
     const originalScriptPath = flowModuleValue.path;
     const wasForked = Boolean(originalScriptPath);
     let suffix = `step-${step}`;
@@ -112,7 +168,7 @@ export async function createScriptFromInlineScript(step) {
     });
     flowStore.update((flow) => {
         flow.value.modules[step].value = {
-            type: FlowModuleValue.type.SCRIPT,
+            type: 'script',
             path: availablePath
         };
         return flow;
@@ -157,5 +213,5 @@ export async function findNextAvailablePath(path) {
 }
 export function shouldPickOrCreateScript(flow, step) {
     const module = flow.value.modules[step];
-    return module.value.path === '' && module.value.language === undefined;
+    return module.value.type === 'script' && module.value.path === '';
 }

package/components/flows/pickers/FlowScriptPicker.svelte

@@ -1,11 +1,16 @@
-<script>import Icon from 'svelte-awesome';
+<script>import { Tooltip } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
 export let disabled = false;
 export let icon;
 export let label;
 export let iconColor;
+export let tooltip = undefined;
 </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}
+	{#if tooltip}
+		<Tooltip placement="bottom" content={tooltip}>(?)</Tooltip>
+	{/if}
 </button>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         icon: IconDefinition;
         label: string;
         iconColor: string;
+        tooltip?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/flows/utils.d.ts

@@ -1,10 +1,8 @@
 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;
+import { type Flow, type FlowModule, type FlowModuleValue, type InputTransform, type Job } from '../../gen';
+import { type FlowMode } from './flowStore';
+export declare function flowToMode(flow: Flow | any, mode: FlowMode): 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 createInlineScriptModuleFromPath(path: string): Promise<FlowModuleValue>;
 export declare function scrollIntoView(el: any): void;
@@ -13,5 +11,11 @@ export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     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;
+export declare function getDefaultExpr(i: number, key?: string, previousExpr?: string): string;
+export declare function getPickableProperties(schema: Schema, args: Record<string, any>, previewResults: Record<number, Object>, mode: FlowMode, i: number): {
+    flow_input: any;
+    previous_result: any;
+    step: any[];
+};
+export declare function jobsToResults(jobs: Job[]): any;
+export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;

package/components/flows/utils.js

@@ -1,39 +1,50 @@
-import { FlowModuleValue, InputTransform, ScriptService } from '../../gen';
+import { JobService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { loadSchema } from '../../scripts';
-import { emptySchema, getScriptByPath } from '../../utils';
+import { workspaceStore } from '../../stores';
+import { emptySchema, getScriptByPath, schemaToObject } from '../../utils';
+import { get } from 'svelte/store';
+import { mode } from './flowStore';
 export function flowToMode(flow, mode) {
+    const newFlow = JSON.parse(JSON.stringify(flow));
+    newFlow.value.modules.forEach((mod) => {
+        Object.values(mod.input_transform).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');
+            }
+            else {
+                //@ts-ignore
+                inp.expr = undefined;
+            }
+        });
+    });
     if (mode == 'pull') {
-        const newFlow = JSON.parse(JSON.stringify(flow));
         const triggerModule = newFlow.value.modules[0];
         const oldModules = newFlow.value.modules.slice(1);
         if (triggerModule) {
-            triggerModule.stop_after_if_expr = 'result.res1.length == 0';
+            triggerModule.stop_after_if_expr = 'result.length == 0';
             triggerModule.skip_if_stopped = true;
         }
         newFlow.value.modules = newFlow.value.modules.slice(0, 1);
         if (oldModules.length > 0) {
             newFlow.value.modules.push({
-                input_transform: oldModules[0].input_transform,
+                //TODO: once we allow arbitrary for loop, we will also allow arbitrary input transform here
+                input_transform: {},
                 value: {
-                    type: FlowModuleValue.type.FORLOOPFLOW,
-                    iterator: { type: InputTransform.type.JAVASCRIPT, expr: 'result.res1' },
+                    type: 'forloopflow',
+                    iterator: { type: 'javascript', expr: 'result' },
                     value: {
                         modules: oldModules
-                    }
+                    },
+                    skip_failures: true
                 }
             });
         }
-        return newFlow;
-    }
-    return flow;
-}
-export function flattenForloopFlows(flow) {
-    let newFlow = JSON.parse(JSON.stringify(flow));
-    if (newFlow.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW) {
-        const oldModules = newFlow.value.modules[1].value.value?.modules ?? [];
-        newFlow.value.modules = newFlow.value.modules.slice(0, 1);
-        newFlow.value.modules.push(...oldModules);
     }
     return newFlow;
 }
@@ -41,17 +52,14 @@ export function getTypeAsString(arg) {
     if (arg === null) {
         return 'null';
     }
-    return typeof arg;
-}
-export function formatValue(arg) {
-    if (getTypeAsString(arg) === 'string') {
-        return `"${arg}"`;
+    if (arg === undefined) {
+        return 'undefined';
     }
-    return arg;
+    return typeof arg;
 }
 export async function getFirstStepSchema(flow) {
     const [firstModule] = flow.value.modules;
-    if (firstModule.value.type === FlowModuleValue.type.RAWSCRIPT) {
+    if (firstModule.value.type === 'rawscript') {
         const { language, content } = firstModule.value;
         if (language && content) {
             const schema = emptySchema();
@@ -59,7 +67,7 @@ export async function getFirstStepSchema(flow) {
             return schema;
         }
     }
-    else if (firstModule.value.path) {
+    else if (firstModule.value.type == 'script') {
         return await loadSchema(firstModule.value.path);
     }
     return emptySchema();
@@ -67,7 +75,7 @@ export async function getFirstStepSchema(flow) {
 export async function createInlineScriptModuleFromPath(path) {
     const { content, language } = await getScriptByPath(path);
     return {
-        type: FlowModuleValue.type.RAWSCRIPT,
+        type: 'rawscript',
         language: language,
         content: content,
         path
@@ -83,25 +91,25 @@ export function scrollIntoView(el) {
     });
 }
 export async function loadSchemaFromModule(module) {
-    const isRaw = module?.value.type === FlowModuleValue.type.RAWSCRIPT;
-    if (isRaw || Boolean(module.value.path)) {
+    const mod = module.value;
+    if (mod.type == 'rawscript' || mod.type === 'script') {
         let schema;
-        if (isRaw) {
+        if (mod.type === 'rawscript') {
             schema = emptySchema();
-            await inferArgs(module.value.language, module.value.content, schema);
+            await inferArgs(mod.language, mod.content, schema);
         }
         else {
-            schema = await loadSchema(module.value.path);
+            schema = await loadSchema(mod.path);
         }
         const keys = Object.keys(schema?.properties ?? {});
         let input_transform = module.input_transform;
-        if (JSON.stringify(Object.keys(schema?.properties ?? {}).sort()) !==
-            JSON.stringify(Object.keys(module.input_transform).sort())) {
+        if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(module.input_transform).sort())) {
             input_transform = keys.reduce((accu, key) => {
-                accu[key] = {
+                let nv = module.input_transform[key] ?? {
                     type: 'static',
                     value: undefined
                 };
+                accu[key] = nv;
                 return accu;
             }, {});
         }
@@ -128,16 +136,77 @@ export function isCodeInjection(expr) {
     }
     return false;
 }
-export function getCodeInjectionExpr(code, isRaw) {
-    let expr = `\`${code}\``;
-    if (isRaw) {
-        expr = `JSON.parse(${expr})`;
-    }
-    return `import { previous_result, flow_input, step, variable, resource, params } from 'windmill'
-${expr}`;
-}
-export function getDefaultExpr(i, key = 'myfield') {
+export function getDefaultExpr(i, key = 'myfield', previousExpr) {
+    const expr = previousExpr ?? `previous_result.${key}`;
     return `import { previous_result, flow_input, step, variable, resource, params } from 'windmill@${i}'
 
-previous_result.${key}`;
+${expr}`;
+}
+export function getPickableProperties(schema, args, previewResults, mode, i) {
+    const flowInputAsObject = schemaToObject(schema, args);
+    const flowInput = mode === 'pull' && i >= 1
+        ? computeFlowInputPull(previewResults[0], flowInputAsObject)
+        : flowInputAsObject;
+    let previous_result;
+    if (i === 0 || (i == 1 && mode == 'pull')) {
+        previous_result = flowInput;
+    }
+    else if (mode == 'pull') {
+        previous_result = previewResults[1] ? previewResults[1][i - 2] : undefined;
+    }
+    else {
+        previous_result = previewResults[i - 1];
+    }
+    let step;
+    if (i >= 1 && mode == 'push') {
+        step = Object.values(previewResults).slice(0, i);
+    }
+    else if (i >= 2 && mode == 'pull') {
+        step = Object.values(previewResults[1] ?? {}).slice(0, i - 1);
+    }
+    else {
+        step = [];
+    }
+    const pickableProperties = {
+        flow_input: flowInput,
+        previous_result,
+        step
+    };
+    return pickableProperties;
+}
+export function jobsToResults(jobs) {
+    return jobs.map((job) => {
+        if ('result' in job) {
+            return job.result;
+        }
+        else if (Array.isArray(job)) {
+            return jobsToResults(job);
+        }
+    });
+}
+export async function runFlowPreview(args, flow) {
+    const newFlow = flowToMode(flow, get(mode));
+    return await JobService.runFlowPreview({
+        workspace: get(workspaceStore) ?? '',
+        requestBody: {
+            args,
+            value: newFlow.value,
+            path: newFlow.path
+        }
+    });
+}
+function computeFlowInputPull(previewResult, flowInputAsObject) {
+    const iteratorValues = (previewResult && Array.isArray(previewResult)) ?
+        {
+            iter: {
+                value: previewResult[0],
+                index: `The current index of the iteration as a number (here from 0 to ${previewResult.length - 1})`
+            }
+        } : {
+        iter: {
+            value: 'The current value of the iteration as an object',
+            index: 'The current index of the iteration as a number'
+        }
+    };
+    return Object.assign(flowInputAsObject, iteratorValues);
 }

package/components/icons/AirtableIcon.svelte

@@ -0,0 +1,17 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 50 50"
+	style=" fill:#000000;"
+>
+	<path
+		d="M 24.505859 4.0078125 C 23.980484 4.0080625 23.454344 4.1114062 22.964844 4.3164062 L 4.2226562 11.646484 C 3.4796562 11.959484 3 12.683281 3 13.488281 C 2.999 14.293281 3.4771406 15.017797 4.2441406 15.341797 L 23.236328 22.775391 C 23.613328 22.935391 24.018969 23.013672 24.417969 23.013672 C 24.802969 23.013672 25.181391 22.939875 25.525391 22.796875 L 45.771484 15.330078 C 46.519484 15.018078 47.001953 14.292422 47.001953 13.482422 C 47.000953 12.672422 46.516422 11.949047 45.732422 11.623047 L 26.046875 4.3144531 C 25.556875 4.1104531 25.031234 4.0075625 24.505859 4.0078125 z M 24.498047 6.0097656 C 24.770047 6.0097656 25.0455 6.0647813 25.3125 6.1757812 L 45.041016 13.46875 L 24.794922 20.935547 C 24.551922 21.039547 24.266188 21.039828 23.992188 20.923828 L 4.9765625 13.5 L 23.705078 6.1738281 L 23.728516 6.1640625 C 23.972516 6.0610625 24.233047 6.0097656 24.498047 6.0097656 z M 1.9980469 17.001953 C 0.94204687 17.001953 -2.9605947e-16 17.853906 0 19.003906 L 0 34.970703 C 0 36.129703 0.95195312 36.972656 2.0019531 36.972656 C 2.2979531 36.972656 2.6015312 36.906766 2.8945312 36.759766 L 20.894531 27.998047 C 22.425531 27.232047 22.349531 25.022281 20.769531 24.363281 L 2.7695312 17.15625 C 2.5135313 17.05125 2.2520469 17.001953 1.9980469 17.001953 z M 48.001953 17.001953 C 47.760953 17.001953 47.514484 17.045625 47.271484 17.140625 L 28.271484 24.505859 C 27.505484 24.806859 27 25.544188 27 26.367188 L 27 42.998047 C 27 44.146047 27.940047 45 28.998047 45 C 29.239047 45 29.485516 44.956328 29.728516 44.861328 L 48.728516 37.425781 C 49.495516 37.125781 50 36.387453 50 35.564453 L 50 19.003906 C 50 17.855906 49.059953 17.001953 48.001953 17.001953 z M 2.0058594 19.003906 L 2.0253906 19.013672 L 20.017578 26.201172 L 2 34.970703 L 2.0058594 19.003906 z M 48 19.003906 L 48 35.564453 L 29 42.998047 L 28.994141 26.371094 L 48 19.003906 z"
+	/></svg
+>