windmill-components 1.46.3 → 1.52.0

package/components/flows/flowState.d.ts

@@ -1,11 +1,11 @@
 import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
-export declare type FlowModuleState = {
+export type FlowModuleState = {
     schema: Schema;
     previewResult?: any;
     previewArgs?: any;
 };
-export declare type FlowState = Record<string, FlowModuleState>;
+export type FlowState = Record<string, FlowModuleState>;
 /**
  * flowStateStore represents the local state of each module indexed by its id.
  * It contains data loaded that are not contained in a Flow object i.e. schemas.

package/components/flows/flowStateUtils.d.ts

@@ -4,6 +4,7 @@ import { type FlowModuleState } 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 pickScript(path: string, summary: string, id: string): Promise<[FlowModule & {
     value: PathScript;

package/components/flows/flowStateUtils.js

@@ -21,11 +21,22 @@ export async function loadFlowModuleState(flowModule) {
     }
 }
 export const idMutex = new Mutex();
+export function getNextId(currentKeys) {
+    const max = currentKeys.reduce((acc, key) => {
+        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+            return acc;
+        }
+        else {
+            const num = charsToNumber(key);
+            return Math.max(acc, num + 1);
+        }
+    }, 0);
+    return numberToChars(max);
+}
 // Computes the next available id
 export function nextId() {
     const flowState = get(flowStateStore);
-    const max = Object.keys(flowState)
-        .reduce((acc, key) => {
+    const max = Object.keys(flowState).reduce((acc, key) => {
         if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
             return acc;
         }

package/components/flows/flowStore.d.ts

@@ -1,5 +1,5 @@
 import type { Flow, FlowModule } from '../../gen';
-export declare type FlowMode = 'push' | 'pull';
+export type FlowMode = 'push' | 'pull';
 export declare const flowStore: import("svelte/store").Writable<Flow>;
 export declare function dfs(modules: FlowModule[]): string[];
 export declare function initFlow(flow: Flow): Promise<void>;

package/components/flows/flowStore.js

@@ -33,7 +33,7 @@ export function dfs(modules) {
     return result;
 }
 export async function initFlow(flow) {
-    let counter = 40;
+    let counter = 0;
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
         let val = mod.value;

package/components/flows/header/FlowImportExportMenu.svelte

@@ -1,41 +1,27 @@
 <script>import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import FlowViewer from '../../FlowViewer.svelte';
-import SimpleEditor from '../../SimpleEditor.svelte';
-import { sendUserToast } from '../../../utils';
-import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { faFileExport } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { Button } from '../../common';
-import { flowStore, initFlow } from '../flowStore';
+import { flowStore } from '../flowStore';
 import { cleanInputs } from '../utils';
-let jsonSetterDrawer;
 let jsonViewerDrawer;
-let pendingJson;
-function importJson() {
-    Object.assign($flowStore, JSON.parse(pendingJson));
-    initFlow($flowStore);
-    sendUserToast('OpenFlow imported from JSON');
-    jsonSetterDrawer.toggleDrawer();
-}
 </script>
 
 <div class="flex-row gap-x-2 hidden sm:flex">
-	<Button size="sm" variant="border" color="light" on:click={() => jsonSetterDrawer.toggleDrawer()}>
-		<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
-		Import JSON
-	</Button>
-	<Button size="sm" variant="border" color="light" on:click={() => jsonViewerDrawer.toggleDrawer()}>
+	<Button
+		btnClasses="mr-2"
+		size="sm"
+		variant="border"
+		color="light"
+		on:click={() => jsonViewerDrawer.toggleDrawer()}
+	>
 		<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
 		Export JSON
 	</Button>
 </div>
 
-<Drawer bind:this={jsonSetterDrawer} size="800px">
-	<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
-		<Button slot="submission" size="sm" on:click={importJson}>Import</Button>
-		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
-	</DrawerContent>
-</Drawer>
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		{#if $flowStore}

package/components/flows/header/FlowImportExportMenu.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowImportExportMenuProps = typeof __propDef.props;
-export declare type FlowImportExportMenuEvents = typeof __propDef.events;
-export declare type FlowImportExportMenuSlots = typeof __propDef.slots;
+export type FlowImportExportMenuProps = typeof __propDef.props;
+export type FlowImportExportMenuEvents = typeof __propDef.events;
+export type FlowImportExportMenuSlots = typeof __propDef.slots;
 export default class FlowImportExportMenu extends SvelteComponentTyped<FlowImportExportMenuProps, FlowImportExportMenuEvents, FlowImportExportMenuSlots> {
 }
 export {};

package/components/flows/header/FlowPreviewButtons.svelte

@@ -1,4 +1,5 @@
-<script>import Button from '../../common/button/Button.svelte';
+<script>import { Badge } from '../../common';
+import Button from '../../common/button/Button.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import FlowPreviewContent from '../../FlowPreviewContent.svelte';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
@@ -6,14 +7,17 @@ import { getContext } from 'svelte';
 const { selectedId } = getContext('FlowEditorContext');
 let previewOpen = false;
 let previewMode = 'whole';
-$: upToDisabled = [
-    'settings',
-    'settings-schedule',
-    'settings-retries',
-    'inputs',
-    'schedules',
-    'failure'
-].includes($selectedId);
+$: upToDisabled =
+    [
+        'settings',
+        'settings-schedule',
+        'settings-retries',
+        'settings-same-worker',
+        'settings-graph',
+        'inputs',
+        'schedules',
+        'failure'
+    ].includes($selectedId) || $selectedId.includes('branch');
 </script>
 
 <div class="flex flex-row-reverse justify-between items-center gap-x-2">
@@ -23,7 +27,7 @@ $: upToDisabled = [
 			previewOpen = !previewOpen
 		}}
 		size="sm"
-		endIcon={{ icon: faPlay }}
+		startIcon={{ icon: faPlay }}
 	>
 		Test flow
 	</Button>
@@ -37,17 +41,17 @@ $: upToDisabled = [
 				previewMode = 'upTo'
 				previewOpen = !previewOpen
 			}}
-			endIcon={{ icon: faPlay }}
+			startIcon={{ icon: faPlay }}
 		>
-			Test up to step {$selectedId
-				.split('-')
-				.map((x) => (Number.isNaN(Number(x)) ? x : Number(x) + 1))
-				.join(' ')}
+			Test up to
+			<Badge baseClass="ml-1" color="indigo">
+				{$selectedId}
+			</Badge>
 		</Button>
 	{/if}
 </div>
 
-<Drawer bind:open={previewOpen} size="800px">
+<Drawer bind:open={previewOpen} size="1200px">
 	<FlowPreviewContent
 		open={previewOpen}
 		bind:previewMode

package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowPreviewButtonsProps = typeof __propDef.props;
-export declare type FlowPreviewButtonsEvents = typeof __propDef.events;
-export declare type FlowPreviewButtonsSlots = typeof __propDef.slots;
+export type FlowPreviewButtonsProps = typeof __propDef.props;
+export type FlowPreviewButtonsEvents = typeof __propDef.events;
+export type FlowPreviewButtonsSlots = typeof __propDef.slots;
 export default class FlowPreviewButtons extends SvelteComponentTyped<FlowPreviewButtonsProps, FlowPreviewButtonsEvents, FlowPreviewButtonsSlots> {
 }
 export {};

package/components/flows/map/FlowBranchAllMap.svelte

@@ -1,15 +1,13 @@
 <script>import { getContext } from 'svelte';
 import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
 import { slide } from 'svelte/transition';
-import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faTimesCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '../../common';
 import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
-import { emptyFlowModuleState } from '../utils';
-import { flowStateStore } from '../flowState';
-export let module;
 let selectedBranch = 0;
+export let module;
 const { select, selectedId } = getContext('FlowEditorContext');
 async function addBranch() {
     await idMutex.runExclusive(async () => {
@@ -18,10 +16,9 @@ async function addBranch() {
             module.value.branches.splice(module.value.branches.length, 0, {
                 summary: '',
                 skip_failure: false,
-                modules: [newModule]
+                modules: []
             });
             module = module;
-            $flowStateStore[newModule.id] = emptyFlowModuleState();
         }
     });
 }
@@ -37,45 +34,53 @@ function removeBranch(index) {
 </script>
 
 {#if module.value.type === 'branchall'}
-	<div class="flex text-xs">
+	<div class="flex text-xs px-2">
 		<div
-			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+			class="w-full space-y-2 pb-2 flex flex-col border bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2 relative"
 		>
 			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					on:click={() => {
-						selectedBranch = branchIndex
-						select(`${module.id}-branch-${branchIndex}`)
-					}}
-					class={classNames(
-						'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
-						$selectedId === `${module.id}-branch-${branchIndex}`
-							? 'outline outline-offset-1 outline-2  outline-slate-900'
-							: ''
-					)}
-				>
-					<Icon data={faCodeBranch} class="mr-2" />
-					<span
-						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+				<div transition:slide|local>
+					<div
+						on:click={() => {
+							selectedBranch = branchIndex
+							select(`${module.id}-branch-${branchIndex}`)
+						}}
+						class={classNames(
+							`border-b ${
+								branchIndex > 0 ? 'border-t' : ''
+							} w-full p-2 bg-white border-gray-500 text-sm cursor-pointer flex items-center relative module`,
+							$selectedId === `${module.id}-branch-${branchIndex}`
+								? 'outline outline-2  outline-slate-900'
+								: ''
+						)}
 					>
-						{branch.summary || `Branch ${branchIndex}`}
-						<Button
-							iconOnly
-							size="xs"
-							startIcon={{ icon: faTrashAlt }}
-							color="light"
-							variant="border"
-							on:click={() => removeBranch(branchIndex)}
-						/>
-					</span>
-				</div>
+						<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
+						<span
+							class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+						>
+							{branch.summary || `Branch ${branchIndex}`}
+							<button
+								class="absolute -top-2 -right-1 rounded-full h-4 w-4 bg-white center-center {$selectedId ===
+								`${module.id}-branch-${branchIndex}`
+									? ''
+									: '!hidden'} trash"
+								on:click={() => removeBranch(branchIndex)}
+								><Icon
+									data={faTimesCircle}
+									class="text-gray-600 hover:text-red-600"
+									scale={0.9}
+								/></button
+							>
+						</span>
+					</div>
 
-				<div>
-					<FlowModuleSchemaMap bind:modules={branch.modules} color="indigo" />
+					<div>
+						<FlowModuleSchemaMap bind:modules={branch.modules} />
+					</div>
 				</div>
 			{/each}
-			<div class="overflow-clip">
+			<div class="overflow-clip ml-2 mt-2">
 				<Button
 					size="xs"
 					color="dark"
@@ -88,3 +93,8 @@ function removeBranch(index) {
 		</div>
 	</div>
 {/if}
+
+<style>
+	.module:hover .trash {
+		display: flex !important;
+	}</style>

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowBranchAllMapProps = typeof __propDef.props;
-export declare type FlowBranchAllMapEvents = typeof __propDef.events;
-export declare type FlowBranchAllMapSlots = typeof __propDef.slots;
+export type FlowBranchAllMapProps = typeof __propDef.props;
+export type FlowBranchAllMapEvents = typeof __propDef.events;
+export type FlowBranchAllMapSlots = typeof __propDef.slots;
 export default class FlowBranchAllMap extends SvelteComponentTyped<FlowBranchAllMapProps, FlowBranchAllMapEvents, FlowBranchAllMapSlots> {
 }
 export {};

package/components/flows/map/FlowBranchOneMap.svelte

@@ -1,27 +1,25 @@
 <script>import { getContext } from 'svelte';
 import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
-import { slide } from 'svelte/transition';
-import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faTimesCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '../../common';
 import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
 import { emptyFlowModuleState } from '../utils';
 import { flowStateStore } from '../flowState';
+import { slide } from 'svelte/transition';
 export let module;
 let selectedBranch = 0;
 const { select, selectedId } = getContext('FlowEditorContext');
 async function addBranch() {
     await idMutex.runExclusive(async () => {
         if (module.value.type === 'branchone') {
-            const newModule = emptyModule();
             module.value.branches.splice(module.value.branches.length, 0, {
                 summary: '',
-                expr: '',
-                modules: [newModule]
+                expr: 'false',
+                modules: []
             });
             module = module;
-            $flowStateStore[newModule.id] = emptyFlowModuleState();
         }
     });
 }
@@ -37,9 +35,9 @@ function removeBranch(index) {
 </script>
 
 {#if module.value.type === 'branchone'}
-	<div class="flex text-xs">
+	<div class="flex text-xs px-2">
 		<div
-			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+			class="w-full space-y-2 pb-2 flex flex-col border bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2 relative"
 		>
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div
@@ -48,13 +46,13 @@ function removeBranch(index) {
 					select(`${module.id}-branch-default`)
 				}}
 				class={classNames(
-					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
+					`border-b w-full p-2 bg-white border-gray-500 text-sm cursor-pointer flex items-center relative module`,
 					$selectedId === `${module.id}-branch-default`
-						? 'outline outline-offset-1 outline-2  outline-slate-900'
+						? 'outline outline-2  outline-slate-900'
 						: ''
 				)}
 			>
-				<Icon data={faCodeBranch} class="mr-2" />
+				<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
 				<span
 					class="truncate text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center"
 				>
@@ -62,45 +60,50 @@ function removeBranch(index) {
 				</span>
 			</div>
 			<div>
-				<FlowModuleSchemaMap bind:modules={module.value.default} color="indigo" />
+				<FlowModuleSchemaMap bind:modules={module.value.default} />
 			</div>
 
 			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					on:click={() => {
-						selectedBranch = branchIndex + 1
-						select(`${module.id}-branch-${branchIndex}`)
-					}}
-					class={classNames(
-						'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
-						$selectedId === `${module.id}-branch-${branchIndex}`
-							? 'outline outline-offset-1 outline-2  outline-slate-900'
-							: ''
-					)}
-				>
-					<Icon data={faCodeBranch} class="mr-2" />
-					<span
-						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+				<div transition:slide|local>
+					<div
+						on:click={() => {
+							selectedBranch = branchIndex + 1
+							select(`${module.id}-branch-${branchIndex}`)
+						}}
+						class={classNames(
+							`border-b border-t w-full p-2 bg-white border-gray-500 text-sm cursor-pointer flex items-center relative module`,
+							$selectedId === `${module.id}-branch-${branchIndex}`
+								? 'outline outline-2  outline-slate-900'
+								: ''
+						)}
 					>
-						{branch.summary || `Branch ${branchIndex}`}
+						<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
+						<span
+							class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+						>
+							{branch.summary || `Branch ${branchIndex}`}
+							<button
+								class="absolute -top-2 -right-2 rounded-full bg-white h-4 w-4 center-center trash {$selectedId ===
+								`${module.id}-branch-${branchIndex}`
+									? ''
+									: '!hidden'}"
+								on:click={() => removeBranch(branchIndex)}
+								><Icon
+									data={faTimesCircle}
+									class="text-gray-600 hover:text-red-600"
+									scale={0.9}
+								/></button
+							>
+						</span>
+					</div>
 
-						<Button
-							iconOnly
-							size="xs"
-							startIcon={{ icon: faTrashAlt }}
-							color="light"
-							variant="border"
-							on:click={() => removeBranch(branchIndex)}
-						/>
-					</span>
-				</div>
-
-				<div>
-					<FlowModuleSchemaMap bind:modules={branch.modules} color="indigo" />
+					<div>
+						<FlowModuleSchemaMap bind:modules={branch.modules} />
+					</div>
 				</div>
 			{/each}
-			<div class="overflow-clip">
+			<div class="overflow-clip ml-2">
 				<Button
 					btnClasses=""
 					size="xs"
@@ -114,3 +117,8 @@ function removeBranch(index) {
 		</div>
 	</div>
 {/if}
+
+<style>
+	.module:hover .trash {
+		display: flex !important;
+	}</style>

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowBranchOneMapProps = typeof __propDef.props;
-export declare type FlowBranchOneMapEvents = typeof __propDef.events;
-export declare type FlowBranchOneMapSlots = typeof __propDef.slots;
+export type FlowBranchOneMapProps = typeof __propDef.props;
+export type FlowBranchOneMapEvents = typeof __propDef.events;
+export type FlowBranchOneMapSlots = typeof __propDef.slots;
 export default class FlowBranchOneMap extends SvelteComponentTyped<FlowBranchOneMapProps, FlowBranchOneMapEvents, FlowBranchOneMapSlots> {
 }
 export {};

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -38,16 +38,18 @@ function onToggle() {
 		}
 	}}
 	class={classNames(
-		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden  bottom-0 z-10 sticky',
+		'border rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex flex-col overflow-x-hidden ',
 		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >
 	<div class=" flex justify-between items-center flex-wrap">
 		<div>
 			<Icon data={faBug} class="mr-2" />
-			<span class="font-bold">Error handler</span>
+			<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>
-		<Toggle checked={Boolean($flowStore.value.failure_module)} on:change={onToggle} />
 	</div>
 
 	<div class="w-full truncate block">

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

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowErrorHandlerItemProps = typeof __propDef.props;
-export declare type FlowErrorHandlerItemEvents = typeof __propDef.events;
-export declare type FlowErrorHandlerItemSlots = typeof __propDef.slots;
+export type FlowErrorHandlerItemProps = typeof __propDef.props;
+export type FlowErrorHandlerItemEvents = typeof __propDef.events;
+export type FlowErrorHandlerItemSlots = typeof __propDef.slots;
 export default class FlowErrorHandlerItem extends SvelteComponentTyped<FlowErrorHandlerItemProps, FlowErrorHandlerItemEvents, FlowErrorHandlerItemSlots> {
 }
 export {};

package/components/flows/map/FlowInputsItem.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import Icon from 'svelte-awesome';
-import { faPen } from '@fortawesome/free-solid-svg-icons';
+import { faFlagCheckered, faPen } from '@fortawesome/free-solid-svg-icons';
 const { select, selectedId } = getContext('FlowEditorContext');
 </script>
 
@@ -12,8 +12,9 @@ const { select, selectedId } = getContext('FlowEditorContext');
 	selected={$selectedId === 'inputs'}
 	bold
 	label="Flow Input"
+	id={'flow_input'}
 >
 	<div slot="icon">
-		<Icon data={faPen} scale={0.8} />
+		<Icon data={faFlagCheckered} scale={0.8} />
 	</div>
 </FlowModuleSchemaItem>

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

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowInputsItemProps = typeof __propDef.props;
-export declare type FlowInputsItemEvents = typeof __propDef.events;
-export declare type FlowInputsItemSlots = typeof __propDef.slots;
+export type FlowInputsItemProps = typeof __propDef.props;
+export type FlowInputsItemEvents = typeof __propDef.events;
+export type FlowInputsItemSlots = typeof __propDef.slots;
 export default class FlowInputsItem extends SvelteComponentTyped<FlowInputsItemProps, FlowInputsItemEvents, FlowInputsItemSlots> {
 }
 export {};