windmill-components 1.70.0 → 1.77.0

package/components/flows/map/MapItem.svelte

@@ -1,17 +1,23 @@
 <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';
-import { faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons';
+import { faBarsStaggered, faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import IconedResourceType from '../../IconedResourceType.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
-import { Building, Repeat, Square } from 'lucide-svelte';
+import { Building, ClipboardCopy, GitBranchPlus, Move, Repeat, Square } from 'lucide-svelte';
+import { Button } from '../../common';
 export let mod;
-export let index;
-const { select, selectedId } = getContext('FlowEditorContext');
+export let trigger;
+export let insertable;
+export let insertableEnd = false;
+export let annotation = undefined;
+export let branchable = false;
+export let bgColor = '';
+export let modules;
+export let moving = undefined;
+$: idx = modules.findIndex((m) => m.id === mod.id);
+const { selectedId } = getContext('FlowGraphContext');
 const dispatch = createEventDispatcher();
 $: itemProps = {
     selected: $selectedId === mod.id,
@@ -23,106 +29,173 @@ $: itemProps = {
 function onDelete(event) {
     dispatch('delete', event);
 }
+let openMenu = undefined;
+let openMenu2 = undefined;
 </script>
 
 {#if mod}
-	<InsertModuleButton trigger={index == 0} on:new={(e) => dispatch('insert', e.detail)} />
-	{#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">
-					<Repeat size={16} />
-				</div>
-			</FlowModuleSchemaItem>
-			<div class="flex flex-row w-full">
-				<div class="w-7 shrink-0 line" />
-				<div class="grow my-1 min-w-0">
-					<div class="w-full">
-						<FlowModuleSchemaMap bind:modules={mod.value.modules} />
-					</div>
-				</div>
+	{#if insertable}
+		<div
+			class="{openMenu ? 'z-10' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
+		>
+			{#if moving}
+				<button
+					title="Add branch"
+					on:click={() => {
+						dispatch('insert', { modules, index: idx, detail: 'move' })
+					}}
+					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"
+				>
+					<ClipboardCopy size={12} />
+				</button>
+			{:else}
+				<InsertModuleButton
+					bind:open={openMenu}
+					{trigger}
+					on:new={(e) => {
+						dispatch('insert', { modules, index: idx, detail: e.detail })
+					}}
+				/>
+			{/if}
+		</div>
+	{/if}
+	<div class="relative">
+		{#if moving == mod.id}
+			<div class="absolute z-10 right-20 top-0.5 center-center">
+				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border"
+					>Cancel move</Button
+				>
 			</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">
-					<Icon data={faCodeBranch} scale={1} />
-				</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">
-					<Icon data={faCodeBranch} scale={1} />
-				</div>
-			</FlowModuleSchemaItem>
-			<FlowBranchAllMap bind:module={mod} />
-		</li>
-	{:else}
-		<li>
-			<FlowModuleSchemaItem
-				on:click={() => select(mod.id)}
-				on:delete={onDelete}
-				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">
-					{#if mod.value.type === 'rawscript'}
-						<LanguageIcon lang={mod.value.language} width={16} height={16} />
-					{:else if mod.summary == 'Terminate flow'}
-						<Square size={16} />
-					{:else if mod.value.type === 'identity'}
-						<Icon data={faLongArrowDown} scale={1.1} />
-					{:else if mod.value.type === 'script'}
-						{#if mod.value.path.startsWith('hub/')}
-							<div>
-								<IconedResourceType
-									width="20px"
-									height="20px"
-									name={mod.value.path.split('/')[2]}
-									silent={true}
-								/>
-							</div>
-						{:else}
-							<Building size={14} />
+		{/if}
+
+		<div class={moving == mod.id ? 'opacity-50' : ''}>
+			{#if mod.value.type === 'forloopflow'}
+				<FlowModuleSchemaItem
+					deletable={insertable}
+					label={mod.summary || 'For loop'}
+					id={mod.id}
+					on:move={() => dispatch('move')}
+					on:delete={onDelete}
+					on:click={() => dispatch('select', mod.id)}
+					{...itemProps}
+					{bgColor}
+				>
+					<div slot="icon">
+						<Repeat size={16} />
+					</div>
+				</FlowModuleSchemaItem>
+			{:else if mod.value.type === 'branchone'}
+				<FlowModuleSchemaItem
+					deletable={insertable}
+					on:delete={onDelete}
+					on:move={() => dispatch('move')}
+					on:click={() => dispatch('select', mod.id)}
+					{...itemProps}
+					id={mod.id}
+					label={mod.summary || 'Run one branch'}
+					{bgColor}
+				>
+					<div slot="icon">
+						<Icon data={faCodeBranch} scale={1} />
+					</div>
+				</FlowModuleSchemaItem>
+			{:else if mod.value.type === 'branchall'}
+				<FlowModuleSchemaItem
+					deletable={insertable}
+					on:delete={onDelete}
+					on:move={() => dispatch('move')}
+					on:click={() => dispatch('select', mod.id)}
+					id={mod.id}
+					{...itemProps}
+					label={mod.summary || 'Run all branches'}
+					{bgColor}
+				>
+					<div slot="icon">
+						<Icon data={faCodeBranch} scale={1} />
+					</div>
+				</FlowModuleSchemaItem>
+			{:else}
+				<FlowModuleSchemaItem
+					on:click={() => dispatch('select', mod.id)}
+					on:delete={onDelete}
+					on:move={() => dispatch('move')}
+					deletable={insertable}
+					id={mod.id}
+					{...itemProps}
+					modType={mod.value.type}
+					{bgColor}
+					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">
+						{#if mod.value.type === 'rawscript'}
+							<LanguageIcon lang={mod.value.language} width={16} height={16} />
+						{:else if mod.summary == 'Terminate flow'}
+							<Square size={16} />
+						{:else if mod.value.type === 'identity'}
+							<Icon data={faLongArrowDown} scale={1.1} />
+						{:else if mod.value.type === 'flow'}
+							<Icon data={faBarsStaggered} scale={1.0} />
+						{:else if mod.value.type === 'script'}
+							{#if mod.value.path.startsWith('hub/')}
+								<div>
+									<IconedResourceType
+										width="20px"
+										height="20px"
+										name={mod.value.path.split('/')[2]}
+										silent={true}
+									/>
+								</div>
+							{:else}
+								<Building size={14} />
+							{/if}
 						{/if}
-					{/if}
-				</div>
-			</FlowModuleSchemaItem>
-		</li>
+					</div>
+				</FlowModuleSchemaItem>
+			{/if}
+		</div>
+	</div>
+	{#if insertable && insertableEnd}
+		<div
+			class="{openMenu2 ? 'z-10' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
+		>
+			{#if moving}
+				<button
+					title="Add branch"
+					on:click={() => {
+						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
+					}}
+					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"
+				>
+					<ClipboardCopy size={12} />
+				</button>
+			{:else}
+				<InsertModuleButton
+					bind:open={openMenu2}
+					{trigger}
+					on:new={(e) => {
+						dispatch('insert', { modules, index: idx + 1, detail: e.detail })
+					}}
+				/>
+			{/if}
+		</div>
 	{/if}
-{/if}
 
-<style>
-	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
-			50%/1px 100% no-repeat;
-	}</style>
+	{#if insertable && branchable}
+		<div class="w-7 absolute top-11 left-[60%] right-[40%] -translate-x-1/2">
+			<button
+				title="Add branch"
+				on:click={() => {
+					dispatch('newBranch', { module: mod })
+				}}
+				type="button"
+				class=" text-gray-900 bg-white border mx-0.5 rotate-180 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"
+			>
+				<GitBranchPlus size={12} />
+			</button>
+		</div>
+	{/if}
+{/if}

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

@@ -3,11 +3,29 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;
-        index: number;
+        trigger: boolean;
+        insertable: boolean;
+        insertableEnd?: boolean | undefined;
+        annotation?: string | undefined;
+        branchable?: boolean | undefined;
+        bgColor?: string | undefined;
+        modules: FlowModule[];
+        moving?: string | undefined;
     };
     events: {
         delete: CustomEvent<CustomEvent<MouseEvent>>;
-        insert: CustomEvent<"branchone" | "script" | "branchall" | "forloop">;
+        insert: CustomEvent<{
+            modules: FlowModule[];
+            index: number;
+            detail: 'script' | 'forloop' | 'branchone' | 'branchall' | 'move';
+        }>;
+        select: CustomEvent<string>;
+        newBranch: CustomEvent<{
+            module: FlowModule;
+        }>;
+        move: CustomEvent<{
+            module: FlowModule;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/map/VirtualItem.svelte

@@ -0,0 +1,129 @@
+<script>import { Badge } from '../../common';
+import { classNames } from '../../../utils';
+import { faBolt } from '@fortawesome/free-solid-svg-icons';
+import { ClipboardCopy, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Icon } from 'svelte-awesome';
+import InsertModuleButton from './InsertModuleButton.svelte';
+export let label;
+export let modules;
+export let index;
+export let insertable;
+export let bgColor = '';
+export let selected;
+export let selectable;
+export let whereInsert = 'after';
+export let deleteBranch = undefined;
+export let id = undefined;
+export let moving = undefined;
+const dispatch = createEventDispatcher();
+let openMenu = false;
+</script>
+
+{#if insertable && deleteBranch}
+	<div class="w-7 absolute -top-10 left-[50%] right-[50%] -translate-x-1/2">
+		<button
+			title="Delete branch"
+			on:click|stopPropagation={() => {
+				dispatch('deleteBranch', deleteBranch)
+			}}
+			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"
+		>
+			<X size={14} />
+		</button>
+	</div>
+{/if}
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	class={classNames(
+		'w-full flex relative overflow-hidden rounded-sm ',
+		selectable ? 'cursor-pointer' : '',
+		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
+	)}
+	style="min-width: 275px; height: 34px; background-color: {bgColor};"
+	on:click={() => {
+		if (selectable) {
+			if (id) {
+				dispatch('select', id)
+			} else {
+				dispatch('select', label)
+			}
+		}
+	}}
+>
+	<div
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+			border border-gray-400 p-2 text-2xs module"
+	>
+		{#if $$slots.icon}
+			<slot name="icon" />
+			<span class="mr-2" />
+		{/if}
+		<div />
+		<div class="flex-1 truncate">{label}</div>
+		<div class="flex items-center space-x-2">
+			{#if id}
+				<Badge color="indigo">{id}</Badge>
+			{/if}
+		</div>
+	</div>
+</div>
+
+{#if insertable && modules && (label != 'Input' || modules.length == 0)}
+	<div
+		class="{openMenu ? 'z-10' : ''} w-7 absolute {whereInsert == 'after'
+			? 'top-12'
+			: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
+	>
+		{#if moving}
+			<button
+				title="Add branch"
+				on:click={() => {
+					if (modules) {
+						dispatch('insert', {
+							modules,
+							index,
+							detail: 'move'
+						})
+					}
+				}}
+				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"
+			>
+				<ClipboardCopy size={12} />
+			</button>
+		{:else}
+			<InsertModuleButton
+				bind:open={openMenu}
+				trigger={label == 'Input'}
+				on:new={(e) => {
+					if (modules) {
+						dispatch('insert', {
+							modules,
+							index: whereInsert == 'after' ? index : index - 1,
+							detail: e.detail
+						})
+					}
+				}}
+			/>
+		{/if}
+	</div>
+{/if}
+
+{#if insertable && modules && label == 'Input'}
+	<div class="w-7 absolute top-12 left-[65%] right-[35%] -translate-x-1/2">
+		<button
+			title="Add a Trigger"
+			on:click={() => {
+				if (modules) {
+					dispatch('insert', { modules, index: 0, detail: 'trigger' })
+				}
+			}}
+			type="button"
+			class=" text-gray-900 bg-white border mx-0.5 rotate-180 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={faBolt} scale={0.8} />
+		</button>
+	</div>
+{/if}

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

@@ -0,0 +1,44 @@
+/// <reference types="node" />
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        label: string;
+        modules: FlowModule[] | undefined;
+        index: number;
+        insertable: boolean;
+        bgColor?: string | undefined;
+        selected: boolean;
+        selectable: boolean;
+        whereInsert?: "before" | "after" | undefined;
+        deleteBranch?: {
+            module: FlowModule;
+            index: number;
+        } | undefined;
+        id?: string | undefined;
+        moving?: string | undefined;
+    };
+    events: {
+        insert: CustomEvent<{
+            detail: 'script' | 'forloop' | 'branchone' | 'branchall' | 'trigger' | 'move';
+            modules: FlowModule[];
+            index: number;
+        }>;
+        select: CustomEvent<string>;
+        deleteBranch: CustomEvent<{
+            module: FlowModule;
+            index: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+    };
+};
+export type VirtualItemProps = typeof __propDef.props;
+export type VirtualItemEvents = typeof __propDef.events;
+export type VirtualItemSlots = typeof __propDef.slots;
+export default class VirtualItem extends SvelteComponentTyped<VirtualItemProps, VirtualItemEvents, VirtualItemSlots> {
+}
+export {};

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         label: string;
-        lang?: SupportedLanguage | 'pgsql' | 'mysql' | undefined;
+        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | undefined;
         icon?: IconDefinition | undefined;
         iconColor?: string | undefined;
     };

package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -67,7 +67,7 @@ let lockHash = false;
 			</div>
 		{/if}
 		{#if displayLock}
-			<div class="flex flex-row-reverse">
+			<div class="flex flex-row-reverse mb-1">
 				<Toggle
 					bind:checked={lockHash}
 					options={{ left: 'Latest version', right: 'Lock current hash permanently' }}

package/components/flows/previousResults.d.ts

@@ -10,6 +10,6 @@ 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 getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: Flow, args: any, include_node: boolean): StepPropPicker;
 export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean): string;
 export {};

package/components/flows/previousResults.js

@@ -1,23 +1,30 @@
 import { schemaToObject } from '../../utils';
+function getSubModules(flowModule) {
+    if (flowModule.value.type === 'forloopflow') {
+        return [flowModule.value.modules];
+    }
+    else if (flowModule.value.type === 'branchall') {
+        return flowModule.value.branches.map((branch) => branch.modules);
+    }
+    else if (flowModule.value.type == 'branchone') {
+        return [
+            ...flowModule.value.branches.map((branch) => branch.modules),
+            flowModule.value.default
+        ];
+    }
+    return [];
+}
+function getAllSubmodules(flowModule) {
+    return getSubModules(flowModule).map((modules) => {
+        return modules.map((module) => {
+            return [module, ...getAllSubmodules(module).flat()];
+        }).flat();
+    });
+}
 function dfs(id, flow, getParents = true) {
     if (id === undefined) {
         return [];
     }
-    function getSubModules(flowModule) {
-        if (flowModule.value.type === 'forloopflow') {
-            return [flowModule.value.modules];
-        }
-        else if (flowModule.value.type === 'branchall') {
-            return flowModule.value.branches.map((branch) => branch.modules);
-        }
-        else if (flowModule.value.type == 'branchone') {
-            return [
-                ...flowModule.value.branches.map((branch) => branch.modules),
-                flowModule.value.default
-            ];
-        }
-        return [];
-    }
     function rec(id, moduleBranches) {
         for (let modules of moduleBranches) {
             for (const [i, module] of modules.entries()) {
@@ -66,9 +73,17 @@ function getFlowInput(parentModules, flowState, args, schema) {
         return schemaToObject(schema, args);
     }
 }
-export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node, approvers = false) {
+export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node) {
     const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
-    const previousIds = dfs(id, flow, false).map((x) => x.id);
+    const previousIds = dfs(id, flow, false).map((x) => {
+        let submodules = getAllSubmodules(x).flat().map((x) => x.id);
+        if (submodules.includes(id)) {
+            return [x.id];
+        }
+        else {
+            return [x.id, ...submodules];
+        }
+    }).flat();
     if (!include_node) {
         previousIds.shift();
     }

package/components/flows/types.d.ts

@@ -1,8 +1,20 @@
+import type { Flow, FlowModule } from '../../gen';
+import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
+import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
+import type { FlowState } from './flowState';
 import type { Schedule } from './scheduleUtils';
 export type FlowEditorContext = {
     selectedId: Writable<string>;
-    select: (id: string) => void;
+    moving: Writable<{
+        module: FlowModule;
+        modules: FlowModule[];
+    } | undefined>;
     schedule: Writable<Schedule>;
     previewArgs: Writable<Record<string, any>>;
+    scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>;
+    history: History<Flow>;
+    flowStore: Writable<Flow>;
+    flowStateStore: Writable<FlowState>;
+    testStepStore: Writable<Record<string, any>>;
 };

package/components/flows/utils.js

@@ -53,7 +53,7 @@ export async function loadSchemaFromModule(module) {
             await inferArgs(mod.language, mod.content ?? '', schema);
         }
         else if (mod.type == 'script' && mod.path && mod.path != '') {
-            schema = await loadSchema(mod.path);
+            schema = await loadSchema(mod.path, mod.hash);
         }
         else if (mod.type == 'flow' && mod.path && mod.path != '') {
             schema = await loadSchemaFlow(mod.path);