windmill-components 1.28.7 → 1.34.0

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

@@ -2,17 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 import type { FlowModule } from '../../gen';
 declare const __propDef: {
     props: {
-        open: number;
-        i: number;
-        shouldPick?: boolean | undefined;
+        indexes: number[];
         mod: FlowModule;
     };
     events: {
+        fork: CustomEvent<any>;
+        createScriptFromInlineScript: CustomEvent<any>;
+        delete: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export declare type FlowModuleHeaderProps = typeof __propDef.props;
 export declare type FlowModuleHeaderEvents = typeof __propDef.events;

package/components/flows/FlowSettings.svelte

@@ -5,25 +5,23 @@ 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 { flowStore, initFlow } from './../flows/flowStore';
 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';
+import { stepOpened } from './stepOpenedStore';
+import { cleanInputs } from './utils';
 export let pathError = '';
 export let initialPath = '';
 export let previewArgs = {};
 export let scheduleArgs = {};
 export let scheduleEnabled = false;
 export let scheduleCron = '0 */5 * * *';
-export let open;
 let jsonSetter;
 let jsonViewer;
 let jsonValue = '';
@@ -40,7 +38,7 @@ let jsonValue = '';
 			on:click={() => {
 				Object.assign($flowStore, JSON.parse(jsonValue))
 				initFlow($flowStore)
-				open = -1
+				stepOpened.update(() => undefined)
 				sendUserToast('OpenFlow imported from JSON')
 				jsonSetter.closeModal()
 			}}
@@ -53,12 +51,12 @@ let jsonValue = '';
 <Modal bind:this={jsonViewer}>
 	<div slot="title">See JSON</div>
 	<div slot="content" class="h-full">
-		<FlowViewer flow={flowToMode($flowStore, $mode)} tab="json" />
+		<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
 	</div>
 </Modal>
 
-<FlowBox>
-	<FlowBoxHeader title="Flow Settings">
+<FlowBox title="Flow Settings">
+	<div slot="header">
 		<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">
@@ -89,7 +87,7 @@ let jsonValue = '';
 							description: $flowStore.description,
 							schema: $flowStore.schema
 						}
-						url.searchParams.append('flow', btoa(JSON.stringify(flowToMode(openFlow, $mode))))
+						url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
 						window.open(url, '_blank')?.focus()
 					}}
 				>
@@ -98,55 +96,34 @@ let jsonValue = '';
 				</DropdownItem>
 			</Dropdown>
 		</div>
-	</FlowBoxHeader>
+	</div>
 
-	<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>
+	<div slot="content">
+		<div class="p-6 border-t border-gray-300">
+			<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>
+			<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
@@ -179,6 +156,6 @@ let jsonValue = '';
 				</div>
 				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
 			</CollapseLink>
-		{/if}
+		</div>
 	</div>
 </FlowBox>

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         scheduleArgs?: Record<string, any> | undefined;
         scheduleEnabled?: boolean | undefined;
         scheduleCron?: string | undefined;
-        open: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.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.value.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 {};