windmill-components 1.37.0 → 1.46.1

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: "blue" | "orange" | undefined;
+        color?: "blue" | "indigo" | "orange" | undefined;
         isFirst?: boolean | undefined;
         isLast?: boolean | undefined;
         hasLine?: boolean | undefined;
@@ -10,18 +10,18 @@ declare const __propDef: {
         retry?: boolean | undefined;
         earlyStop?: boolean | undefined;
         suspend?: boolean | undefined;
+        bold?: boolean | undefined;
+        id?: string | undefined;
+        label: string;
     };
     events: {
         click: MouseEvent;
-        delete: CustomEvent<any>;
+        delete: CustomEvent<CustomEvent<MouseEvent>>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         icon: {};
-        content: {
-            class: string;
-        };
     };
 };
 export declare type FlowModuleSchemaItemProps = typeof __propDef.props;

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,162 +1,91 @@
 <script>import { getContext } from 'svelte';
-import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
-import Icon from 'svelte-awesome';
-import { faCalendarAlt, faPen, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
-import { emptyFlowModuleState, isEmptyFlowModule } from '../flowStateUtils';
-import { classNames, emptyModule } from '../../../utils';
+import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
+import { flowStateStore } from '../flowState';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
-export let prefix = undefined;
+import { emptyFlowModuleState, isEmptyFlowModule } from '../utils';
+import MapItem from './MapItem.svelte';
+import FlowSettingsItem from './FlowSettingsItem.svelte';
+import FlowInputsItem from './FlowInputsItem.svelte';
+import InsertModuleButton from './InsertModuleButton.svelte';
+export let root = false;
+export let color = 'blue';
 export let modules;
-export let moduleStates;
-const { select, selectedId, schedule } = getContext('FlowEditorContext');
-function insertAtIndex(index) {
-    moduleStates.splice(index, 0, emptyFlowModuleState());
-    modules.splice(index, 0, emptyModule());
-    moduleStates = moduleStates;
-    modules = modules;
-    select([prefix, String(index)].filter(Boolean).join('-'));
+let indexToRemove = undefined;
+const { select } = getContext('FlowEditorContext');
+async function insertNewModuleAtIndex(index) {
+    await idMutex.runExclusive(async () => {
+        const flowModule = emptyModule();
+        modules.splice(index, 0, flowModule);
+        modules = modules;
+        $flowStateStore[flowModule.id] = emptyFlowModuleState();
+        select(flowModule.id);
+    });
 }
 function removeAtIndex(index) {
     select('settings');
-    modules.splice(index, 1);
-    moduleStates.splice(index, 1);
-    moduleStates = moduleStates;
+    const [removedModule] = modules.splice(index, 1);
     modules = modules;
+    const leaves = findLeaves(removedModule);
+    leaves.forEach((leafId) => deleteFlowStateById(leafId));
+}
+function findLeaves(flowModule) {
+    const id = flowModule.id;
+    if (flowModule.value.type === 'forloopflow') {
+        return [id, ...flowModule.value.modules.map((fm) => findLeaves(fm)).flat()];
+    }
+    if (flowModule.value.type === 'branchall') {
+        return [
+            id,
+            ...flowModule.value.branches
+                .map((branch) => branch.modules.map((mod) => findLeaves(mod)).flat())
+                .flat()
+        ];
+    }
+    if (flowModule.value.type === 'branchone') {
+        return [
+            id,
+            ...flowModule.value.branches
+                .map((branch) => {
+                return branch.modules.map((mod) => findLeaves(mod)).flat();
+            })
+                .flat(),
+            ...flowModule.value.default.map((mod) => findLeaves(mod)).flat()
+        ];
+    }
+    return [id];
 }
-let indexToRemove = undefined;
 $: confirmationModalOpen = indexToRemove !== undefined;
 </script>
 
-<div class="flex flex-col justify-between h-full">
+<div class="flex flex-col justify-between w-full">
 	<ul class="w-full">
-		{#if prefix === undefined}
-			<div
-				on:click={() => select('settings')}
-				class={classNames(
-					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
-					$selectedId.includes('settings')
-						? 'outline outline-offset-1 outline-2  outline-slate-900'
-						: ''
-				)}
-			>
-				<Icon data={faSliders} class="mr-2" />
-				<span class="font-bold flex flex-row justify-between w-full flex-wrap gap-2 items-center"
-					>Settings <span
-						class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
-						on:click|stopPropagation={() => select('settings-schedule')}
-					>
-						{$schedule.cron}
-						<Icon class={$schedule.cron ? 'ml-2' : ''} data={faCalendarAlt} scale={0.8} />
-					</span></span
-				>
-			</div>
-
-			<FlowModuleSchemaItem
-				on:click={() => select('inputs')}
-				isFirst
-				hasLine
-				selected={$selectedId === 'inputs'}
-			>
-				<div slot="icon">
-					<Icon data={faPen} scale={0.8} />
-				</div>
-				<div slot="content" class="flex flex-row">
-					<span>Inputs</span>
-				</div>
-			</FlowModuleSchemaItem>
+		{#if root}
+			<FlowSettingsItem />
+			<FlowInputsItem />
 		{/if}
 
-		{#each modules as mod, index (index)}
-			<button
-				on:click={() => insertAtIndex(index)}
-				type="button"
-				class="text-gray-900 m-0.5 my-0.5 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
-			>
-				<Icon data={faPlus} scale={0.8} />
-			</button>
-			{#if mod.value.type === 'forloopflow'}
-				<li>
-					<FlowModuleSchemaItem
-						deletable
-						on:delete={() => removeAtIndex(index)}
-						on:click={() => select(['loop', String(index)].join('-'))}
-						selected={$selectedId === ['loop', String(index)].join('-')}
-						retry={mod.retry?.constant != undefined || mod.retry?.exponential != undefined}
-						earlyStop={mod.stop_after_if != undefined}
-						suspend={Boolean(mod.suspend)}
-					>
-						<div slot="icon">
-							<span>{index + 1}</span>
-						</div>
-						<div slot="content" class="truncate block w-full">
-							<span>{mod.summary || 'For loop'}</span>
-						</div>
-					</FlowModuleSchemaItem>
-
-					<div class="flex text-xs">
-						<div class="line mr-2 w-8" />
-
-						<div class="w-full mb-2">
-							{#if moduleStates[index]?.childFlowModules}
-								<svelte:self
-									prefix={String(index)}
-									moduleStates={moduleStates[index].childFlowModules}
-									modules={mod.value.modules}
-								/>
-							{/if}
-						</div>
-					</div>
-
-					<div class="italic text-xs pl-10 text-gray-600">
-						The loop's result is the list of every iteration's result.
-					</div>
-				</li>
-			{:else}
-				<li>
-					<FlowModuleSchemaItem
-						on:click={() => select([prefix, String(index)].filter(Boolean).join('-'))}
-						color={prefix ? 'orange' : 'blue'}
-						isLast={index === modules.length - 1}
-						selected={$selectedId === [prefix, String(index)].filter(Boolean).join('-')}
-						deletable
-						on:delete={(event) => {
-							if (event.detail.event.shiftKey || isEmptyFlowModule(mod)) {
-								removeAtIndex(index)
-							} else {
-								indexToRemove = index
-							}
-						}}
-						retry={mod.retry?.constant != undefined || mod.retry?.exponential != undefined}
-						earlyStop={mod.stop_after_if != undefined}
-						suspend={Boolean(mod.suspend)}
-					>
-						<div slot="icon">
-							<span>{index + 1}</span>
-						</div>
-						<div slot="content" class="w-full truncate block">
-							<span
-								>{mod.summary ||
-									(`path` in mod.value ? mod.value.path : undefined) ||
-									(mod.value.type === 'rawscript'
-										? `Inline ${mod.value.language}`
-										: 'Select a script')}</span
-							>
-						</div>
-					</FlowModuleSchemaItem>
-				</li>
-			{/if}
+		{#each modules as mod, index (mod.id ?? index)}
+			<MapItem
+				{color}
+				{index}
+				bind:mod
+				on:delete={(event) => {
+					if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) {
+						removeAtIndex(index)
+					} else {
+						indexToRemove = index
+					}
+				}}
+				on:insert={() => {
+					insertNewModuleAtIndex(index)
+				}}
+			/>
 		{/each}
 
-		<button
-			on:click={() => insertAtIndex(modules.length)}
-			type="button"
-			class="text-gray-900 bg-white border m-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
-		>
-			<Icon data={faPlus} scale={0.8} />
-		</button>
+		<InsertModuleButton on:click={() => insertNewModuleAtIndex(modules.length)} />
 	</ul>
-	{#if prefix === undefined}
+	{#if root}
 		<FlowErrorHandlerItem />
 	{/if}
 </div>
@@ -208,18 +137,18 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 
     --tw-text-opacity: 1;
 
-    color: rgb(30 66 159 / var(--tw-text-opacity))
+    color: rgb(30 64 175 / var(--tw-text-opacity))
 }
 
 	.badge-on:hover {
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(195 221 253 / var(--tw-bg-opacity))
+    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
 }
 
 	.badge-off {

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

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FlowModuleState } from '../flowState';
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        prefix?: string | undefined;
+        root?: boolean | undefined;
+        color?: "blue" | "indigo" | "orange" | undefined;
         modules: FlowModule[];
-        moduleStates: FlowModuleState[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/map/FlowSettingsItem.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { classNames } from '../../../utils';
+import { Badge } from '../../common';
+const { select, selectedId, schedule } = getContext('FlowEditorContext');
+$: settingsClass = classNames('border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4 sticky top-0 z-10', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={() => select('settings')} class={settingsClass}>
+	<Icon data={faSliders} class="mr-2" />
+	<span
+		class="text-xs font-bold flex flex-row justify-between w-full  gap-2 items-center flex-wrap"
+	>
+		Settings
+		<span
+			class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
+			on:click|stopPropagation={() => select('settings-schedule')}
+		>
+			{#if $schedule?.enabled}
+				<Badge color="gray"
+					>{$schedule.cron}
+					<Icon class={$schedule.cron ? 'ml-2' : ''} data={faCalendarAlt} scale={0.8} />
+				</Badge>
+			{/if}
+		</span>
+	</span>
+</div>

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

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

package/components/flows/map/InsertModuleButton.svelte

@@ -0,0 +1,11 @@
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+</script>
+
+<button
+	on:click
+	type="button"
+	class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+>
+	<Icon data={faPlus} scale={0.8} />
+</button>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InsertModuleButtonProps = typeof __propDef.props;
+export declare type InsertModuleButtonEvents = typeof __propDef.events;
+export declare type InsertModuleButtonSlots = typeof __propDef.slots;
+export default class InsertModuleButton extends SvelteComponentTyped<InsertModuleButtonProps, InsertModuleButtonEvents, InsertModuleButtonSlots> {
+}
+export {};

package/components/flows/map/MapItem.svelte

@@ -0,0 +1,105 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
+import InsertModuleButton from './InsertModuleButton.svelte';
+import FlowBranchOneMap from './FlowBranchOneMap.svelte';
+import FlowBranchAllMap from './FlowBranchAllMap.svelte';
+export let mod;
+export let index;
+export let color = 'blue';
+const { select, selectedId } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+$: itemProps = {
+    selected: $selectedId === mod.id,
+    retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
+    earlyStop: mod.stop_after_if != undefined,
+    suspend: Boolean(mod.suspend)
+};
+function onDelete(event) {
+    dispatch('delete', event.detail);
+}
+</script>
+
+{#if mod}
+	<InsertModuleButton on:click={() => dispatch('insert')} />
+	{#if mod.value.type === 'forloopflow'}
+		<li class="w-full">
+			<FlowModuleSchemaItem
+				deletable
+				label={mod.summary || 'For loop'}
+				id={mod.id}
+				on:delete={onDelete}
+				on:click={() => select(mod.id)}
+				{...itemProps}
+			>
+				<div slot="icon">
+					<span>{index + 1}</span>
+				</div>
+			</FlowModuleSchemaItem>
+			<div class="flex flex-row w-full">
+				<div class="w-8 shrink-0 line" />
+				<div class="grow my-4 overflow-auto">
+					<div class="w-full pr-1">
+						<FlowModuleSchemaMap bind:modules={mod.value.modules} color="orange" />
+					</div>
+				</div>
+			</div>
+		</li>
+	{:else if mod.value.type === 'branchone'}
+		<li>
+			<FlowModuleSchemaItem
+				deletable
+				on:delete={onDelete}
+				on:click={() => select(mod.id)}
+				{...itemProps}
+				id={mod.id}
+				label={mod.summary || 'Run one branch'}
+			>
+				<div slot="icon">
+					<span>{index + 1}</span>
+				</div>
+			</FlowModuleSchemaItem>
+			<FlowBranchOneMap bind:module={mod} />
+		</li>
+	{:else if mod.value.type === 'branchall'}
+		<li>
+			<FlowModuleSchemaItem
+				deletable
+				on:delete={onDelete}
+				on:click={() => select(mod.id)}
+				id={mod.id}
+				{...itemProps}
+				label={mod.summary || 'Run all branches'}
+			>
+				<div slot="icon">
+					<span>{index + 1}</span>
+				</div>
+			</FlowModuleSchemaItem>
+			<FlowBranchAllMap bind:module={mod} />
+		</li>
+	{:else}
+		<li>
+			<FlowModuleSchemaItem
+				on:click={() => select(mod.id)}
+				on:delete={onDelete}
+				{color}
+				deletable
+				id={mod.id}
+				{...itemProps}
+				label={mod.summary ||
+					(`path` in mod.value ? mod.value.path : undefined) ||
+					(mod.value.type === 'rawscript' ? `Inline ${mod.value.language}` : 'To be defined')}
+			>
+				<div slot="icon">
+					<span>{index + 1}</span>
+				</div>
+			</FlowModuleSchemaItem>
+		</li>
+	{/if}
+{/if}
+
+<style>
+	.line {
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
+			no-repeat;
+	}</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        index: number;
+        color?: "blue" | "indigo" | "orange" | undefined;
+    };
+    events: {
+        delete: CustomEvent<CustomEvent<MouseEvent>>;
+        insert: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type MapItemProps = typeof __propDef.props;
+export declare type MapItemEvents = typeof __propDef.events;
+export declare type MapItemSlots = typeof __propDef.slots;
+export default class MapItem extends SvelteComponentTyped<MapItemProps, MapItemEvents, MapItemSlots> {
+}
+export {};

package/components/flows/pickers/FlowScriptPicker.svelte

@@ -1,4 +1,4 @@
-<script>import { Button } from 'flowbite-svelte';
+<script>import Button from '../../common/button/Button.svelte';
 import Icon from 'svelte-awesome';
 export let disabled = false;
 export let icon;
@@ -6,7 +6,17 @@ export let label;
 export let iconColor;
 </script>
 
-<Button {disabled} on:click size="md" class="text-left" color="alternative">
-	<Icon data={icon} class={`mr-2 ${iconColor} w-4`} scale={1.5} />
-	<span class="text-sm text-left"> {label} </span>
+<Button
+	{disabled}
+	on:click
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+	startIcon={{
+		icon,
+		classes: iconColor
+	}}
+>
+	{label}
 </Button>

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         iconColor: string;
     };
     events: {
-        click: MouseEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/pickers/PickHubScript.svelte

@@ -5,6 +5,7 @@ import { hubScripts } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import { Script } from '../../../gen';
 export let kind;
+export let customText = undefined;
 let items;
 $: items = $hubScripts?.filter((x) => x.kind == kind) ?? [];
 let itemPicker;
@@ -13,8 +14,8 @@ const dispatch = createEventDispatcher();
 
 <ItemPicker
 	bind:this={itemPicker}
-	pickCallback={(path) => {
-		dispatch('pick', { path })
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary, kind })
 	}}
 	itemName={'Script'}
 	extraField="summary"
@@ -25,8 +26,8 @@ const dispatch = createEventDispatcher();
 />
 
 <FlowScriptPicker
-	label={`Pick a ${kind == Script.kind.SCRIPT ? '' : kind} script from the Hub`}
+	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from the Hub`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
-	on:click={() => itemPicker.openModal()}
+	on:click={() => itemPicker.openDrawer()}
 />

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

@@ -3,6 +3,7 @@ import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
         kind: Script.kind;
+        customText?: string | undefined;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/pickers/PickScript.svelte

@@ -1,10 +1,11 @@
 <script>import ItemPicker from '../../ItemPicker.svelte';
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
-import { ScriptService } from '../../../gen';
+import { Script, ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './FlowScriptPicker.svelte';
 export let kind;
+export let customText = undefined;
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
@@ -14,8 +15,8 @@ async function loadItems() {
 
 <ItemPicker
 	bind:this={itemPicker}
-	pickCallback={(path) => {
-		dispatch('pick', { path })
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary, kind })
 	}}
 	itemName={'Script'}
 	extraField="summary"
@@ -23,8 +24,8 @@ async function loadItems() {
 />
 
 <FlowScriptPicker
-	label={`Pick a ${kind == 'script' ? '' : kind} script from your workspace`}
+	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from workspace`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
-	on:click={() => itemPicker.openModal()}
+	on:click={() => itemPicker.openDrawer()}
 />

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         kind: string;
+        customText?: string | undefined;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/previousResults.d.ts

@@ -0,0 +1,14 @@
+import type { Flow, FlowModule } from '../../gen';
+import type { FlowState } from './flowState';
+export declare type PickableProperties = {
+    flow_input: Object;
+    priorIds: Record<string, any>;
+    previousId: string | undefined;
+};
+declare type StepPropPicker = {
+    pickableProperties: PickableProperties;
+    extraLib: string;
+};
+export declare function getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: Flow, args: any, include_node: boolean, approvers?: boolean): StepPropPicker;
+export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>): string;
+export {};