windmill-components 1.70.0 → 1.75.0

package/components/flows/flowState.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
+import type { Writable } from 'svelte/store';
 export type FlowModuleState = {
     schema: Schema;
     previewResult?: any;
@@ -11,6 +12,4 @@ export type FlowState = Record<string, FlowModuleState>;
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
  * We also hold the data of the results of a test job, ran by the user.
  */
-export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
-export declare const testStepStore: import("svelte/store").Writable<Record<string, any>>;
-export declare function initFlowState(flow: Flow): Promise<void>;
+export declare function initFlowState(flow: Flow, flowStateStore: Writable<FlowState>): Promise<void>;

package/components/flows/flowState.js

@@ -1,4 +1,3 @@
-import { writable } from 'svelte/store';
 import { loadFlowModuleState } from './flowStateUtils';
 import { emptyFlowModuleState } from './utils';
 /**
@@ -6,9 +5,7 @@ import { emptyFlowModuleState } from './utils';
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
  * We also hold the data of the results of a test job, ran by the user.
  */
-export const flowStateStore = writable({});
-export const testStepStore = writable({});
-export async function initFlowState(flow) {
+export async function initFlowState(flow, flowStateStore) {
     const modulesState = {};
     await mapFlowModules(flow.value.modules, modulesState);
     const failureModule = flow.value.failure_module

package/components/flows/flowStateUtils.d.ts

@@ -1,11 +1,12 @@
 import type { Schema } from '../../common';
-import { Script, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
-import { type FlowModuleState } from './flowState';
+import { Script, type Flow, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowModuleState, FlowState } from './flowState';
 import { Mutex } from 'async-mutex';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
 export declare const idMutex: Mutex;
 export declare function getNextId(currentKeys: string[]): string;
-export declare function nextId(): string;
+export declare function nextId(flowState: FlowState): string;
 export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
@@ -20,8 +21,8 @@ export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleS
 export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
-export declare function emptyModule(flow?: boolean): FlowModule;
-export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema): Promise<[FlowModule & {
+export declare function emptyModule(flowState: FlowState, flow?: boolean): FlowModule;
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema, flow: Flow): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
-export declare function deleteFlowStateById(id: string): void;
+export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;

package/components/flows/flowStateUtils.js

@@ -3,8 +3,6 @@ import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
 import { getScriptByPath } from '../../utils';
 import { get } from 'svelte/store';
-import { flowStateStore } from './flowState';
-import { flowStore } from './flowStore';
 import { charsToNumber, emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR, numberToChars } from './utils';
 import { Mutex } from 'async-mutex';
 export async function loadFlowModuleState(flowModule) {
@@ -36,8 +34,7 @@ export function getNextId(currentKeys) {
     return numberToChars(max);
 }
 // Computes the next available id
-export function nextId() {
-    const flowState = get(flowStateStore);
+export function nextId(flowState) {
     const max = Object.keys(flowState).reduce((acc, key) => {
         if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
             return acc;
@@ -145,14 +142,13 @@ async function createInlineScriptModuleFromPath(path, id) {
         }
     };
 }
-export function emptyModule(flow) {
+export function emptyModule(flowState, flow) {
     return {
-        id: nextId(),
+        id: nextId(flowState),
         value: { type: 'identity', flow }
     };
 }
-export async function createScriptFromInlineScript(flowModule, suffix, schema) {
-    const flow = get(flowStore);
+export async function createScriptFromInlineScript(flowModule, suffix, schema, flow) {
     const user = get(userStore);
     if (flowModule.value.type != 'rawscript') {
         throw new Error("Can't create script from non-inline script");
@@ -182,7 +178,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
     });
     return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
 }
-export function deleteFlowStateById(id) {
+export function deleteFlowStateById(id, flowStateStore) {
     flowStateStore.update((fss) => {
         delete fss[id];
         return fss;

package/components/flows/flowStore.d.ts

@@ -1,7 +1,8 @@
 import type { Flow, FlowModule } from '../../gen';
+import { type Writable } from 'svelte/store';
+import { type FlowState } from './flowState';
 export type FlowMode = 'push' | 'pull';
-export declare const importFlowStore: import("svelte/store").Writable<Flow | undefined>;
-export declare const flowStore: import("svelte/store").Writable<Flow>;
+export declare const importFlowStore: Writable<Flow | undefined>;
 export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
-export declare function initFlow(flow: Flow): Promise<void>;
-export declare function copyFirstStepSchema(): Promise<void>;
+export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
+export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<Flow>): Promise<void>;

package/components/flows/flowStore.js

@@ -1,17 +1,7 @@
-import { sendUserToast } from '../../utils';
-import { get, writable, derived } from 'svelte/store';
-import { flowStateStore, initFlowState } from './flowState';
+import { get, writable } from 'svelte/store';
+import { initFlowState } from './flowState';
 import { numberToChars } from './utils';
 export const importFlowStore = writable(undefined);
-export const flowStore = writable({
-    summary: '',
-    value: { modules: [] },
-    path: '',
-    edited_at: '',
-    edited_by: '',
-    archived: false,
-    extra_perms: {}
-});
 export function dfs(modules, f) {
     let result = [];
     for (const module of modules) {
@@ -33,7 +23,7 @@ export function dfs(modules, f) {
     }
     return result;
 }
-export async function initFlow(flow) {
+export async function initFlow(flow, flowStore, flowStateStore) {
     let counter = 0;
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
@@ -47,7 +37,7 @@ export async function initFlow(flow) {
             flowVal.modules.forEach(migrateFlowModule);
         }
     }
-    await initFlowState(flow);
+    await initFlowState(flow, flowStateStore);
     flowStore.set(flow);
     function migrateFlowModule(mod) {
         if (mod.id == undefined) {
@@ -75,8 +65,7 @@ export async function initFlow(flow) {
         }
     }
 }
-export async function copyFirstStepSchema() {
-    const flowState = get(flowStateStore);
+export async function copyFirstStepSchema(flowState, flowStore) {
     flowStore.update((flow) => {
         const firstModuleId = flow.value.modules[0]?.id;
         if (flowState[firstModuleId] && firstModuleId) {
@@ -93,5 +82,4 @@ export async function copyFirstStepSchema() {
         }
         return flow;
     });
-    sendUserToast('Copied first step schema as flow input schema');
 }

package/components/flows/header/FlowImportExportMenu.svelte

@@ -2,10 +2,11 @@
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import FlowViewer from '../../FlowViewer.svelte';
 import { faFileExport } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { Button } from '../../common';
-import { flowStore } from '../flowStore';
 import { cleanInputs } from '../utils';
+const { flowStore } = getContext('FlowEditorContext');
 let jsonViewerDrawer;
 </script>
 

package/components/flows/map/FlowConstantsItem.svelte

@@ -1,11 +1,11 @@
 <script>import { getContext } from 'svelte';
 import { classNames } from '../../../utils';
 import { DollarSign } from 'lucide-svelte';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
-<button on:click={() => select('constants')} class={settingsClass}>
+<button on:click={() => ($selectedId = 'constants')} class={settingsClass}>
 	<DollarSign size={16} />
 	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		All Static Inputs

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -2,16 +2,14 @@
 import Icon from 'svelte-awesome';
 import { faBug } from '@fortawesome/free-solid-svg-icons';
 import { classNames, emptySchema } from '../../../utils';
-import { flowStateStore } from '../flowState';
 import Toggle from '../../Toggle.svelte';
-import { flowStore } from '../flowStore';
 import { NEVER_TESTED_THIS_FAR } from '../utils';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
 function onToggle() {
     if ($flowStore?.value?.failure_module) {
         $flowStore.value.failure_module = undefined;
         // By default, we return to settings when disabling the failure module
-        select('settings-metadata');
+        $selectedId = 'settings-metadata';
     }
     else {
         const failureModule = {
@@ -23,7 +21,7 @@ function onToggle() {
             id: 'failure',
             value: { type: 'identity' }
         };
-        select('failure');
+        $selectedId = 'failure';
     }
 }
 </script>
@@ -32,34 +30,35 @@ function onToggle() {
 <div
 	on:click={() => {
 		if ($flowStore?.value?.failure_module) {
-			select('failure')
+			$selectedId = 'failure'
 		} else {
 			onToggle()
 		}
 	}}
 	class={classNames(
-		'border rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex flex-col overflow-x-hidden ',
+		'border mx-auto rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
 		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
+	style="min-width: 275px"
 >
 	<div class=" flex justify-between items-center flex-wrap">
 		<div>
 			<Icon data={faBug} class="mr-2" />
 			<span class="font-bold text-xs">Error handler</span>
 		</div>
-		<div class="-my-1">
-			<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
-		</div>
 	</div>
 
-	<div class="w-full truncate block">
+	<div class=" items-center truncate flex text-xs">
 		{#if Boolean($flowStore?.value?.failure_module)}
 			<span>
 				{$flowStore.value.failure_module?.summary ||
 					($flowStore.value.failure_module?.value.type === 'rawscript'
-						? `Inline ${$flowStore.value.failure_module?.value.language}`
-						: 'Select a script')}
+						? `${$flowStore.value.failure_module?.value.language}`
+						: 'TBD')}
 			</span>
 		{/if}
 	</div>
+	<div class="-my-1">
+		<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
+	</div>
 </div>

package/components/flows/map/FlowInputsItem.svelte

@@ -2,12 +2,11 @@
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import Icon from 'svelte-awesome';
 import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId } = getContext('FlowEditorContext');
 </script>
 
 <FlowModuleSchemaItem
-	on:click={() => select('inputs')}
-	hasLine
+	on:click={() => ($selectedId = 'inputs')}
 	selected={$selectedId === 'inputs'}
 	bold
 	label="Flow Input"

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -3,10 +3,7 @@ import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
-import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
-export let isFirst = false;
-export let isLast = false;
-export let hasLine = true;
+import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -16,105 +13,105 @@ export let sleep = false;
 export let bold = false;
 export let id = undefined;
 export let label;
-const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5';
+export let modType = undefined;
+export let bgColor = '';
 const dispatch = createEventDispatcher();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex relative" on:click>
-	<div
-		class={classNames(
-			'flex pl-6 ml-0.5',
-			hasLine ? 'line' : '',
-			isFirst ? 'justify-center items-start' : 'justify-center items-center'
-		)}
-	/>
+<div
+	class={classNames(
+		'w-full module flex rounded-sm cursor-pointer',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
+		'flex relative'
+	)}
+	style="width: 275px; height: 34px; background-color: {bgColor};"
+	on:click
+>
+	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
+		{#if retry}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Repeat size={14} />
+				</div>
+				<svelte:fragment slot="text">Retries</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if earlyStop}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Square size={14} />
+				</div>
+				<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if suspend}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<PhoneIncoming size={14} />
+				</div>
+				<svelte:fragment slot="text">Suspend</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if sleep}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+				>
+					<Bed size={14} />
+				</div>
+				<svelte:fragment slot="text">Sleep</svelte:fragment>
+			</Popover>
+		{/if}
+	</div>
 	<div
-		class={classNames(
-			'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
-			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
-			margin
-		)}
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 text-2xs module"
 	>
-		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
-			{#if retry}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Repeat size={14} />
-					</div>
-					<svelte:fragment slot="text">Retries</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if earlyStop}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Square size={14} />
-					</div>
-					<svelte:fragment slot="text">Early stop/break</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if suspend}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<PhoneIncoming size={14} />
-					</div>
-					<svelte:fragment slot="text">Suspend</svelte:fragment>
-				</Popover>
-			{/if}
-			{#if sleep}
-				<Popover notClickable>
-					<div
-						transition:fade={{ duration: 200 }}
-						class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
-					>
-						<Bed size={14} />
-					</div>
-					<svelte:fragment slot="text">Sleep</svelte:fragment>
-				</Popover>
+		{#if $$slots.icon}
+			<slot name="icon" />
+			<span class="mr-2" />
+		{/if}
+		<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+		<div class="flex items-center space-x-2">
+			{#if id}
+				<Badge color="indigo">{id}</Badge>
 			{/if}
 		</div>
-		<div
-			class="flex justify-between items-center w-full overflow-hidden rounded-sm 
-			border border-gray-400 p-2 bg-white text-2xs module"
-		>
-			{#if $$slots.icon}
-				<slot name="icon" />
-				<span class="mr-2" />
-			{/if}
-			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
-			<div class="flex items-center space-x-2">
-				{#if id}
-					<Badge color="indigo">{id}</Badge>
-				{/if}
-				{#if deletable}
-					<button
-						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center 
-						border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
-						hover:border-red-700 {selected ? '' : '!hidden'}"
-						on:click|preventDefault|stopPropagation={(event) => dispatch('delete', event)}
-					>
-						<X size={12} strokeWidth={2} />
-					</button>
-				{/if}
-			</div>
-		</div>
 	</div>
+	{#if deletable}
+		<button
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center 
+	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+	hover:border-red-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) =>
+				dispatch('delete', { event, id, type: modType })}
+		>
+			<X size={12} strokeWidth={2} />
+		</button>
+
+		<button
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center 
+border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white 
+hover:border-blue-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
+		>
+			<Move size={12} strokeWidth={2} />
+		</button>
+	{/if}
 </div>
 
 <style>
 	.module:hover .trash {
 		display: flex !important;
-	}
-	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
-			50%/1px 100% no-repeat;
 	}</style>

package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isFirst?: boolean | undefined;
-        isLast?: boolean | undefined;
-        hasLine?: boolean | undefined;
         selected?: boolean | undefined;
         deletable?: boolean | undefined;
         retry?: boolean | undefined;
@@ -13,10 +10,13 @@ declare const __propDef: {
         bold?: boolean | undefined;
         id?: string | undefined;
         label: string;
+        modType?: string | undefined;
+        bgColor?: string | undefined;
     };
     events: {
         click: MouseEvent;
         delete: CustomEvent<any>;
+        move: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };