windmill-components 1.60.4 → 1.83.1

package/components/flows/map/InsertModuleButton.svelte

@@ -1,21 +1,24 @@
 <script>import { Menu } from '../../common';
-import { faCode, faCodeBranch, faPlus, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCodeBranch, faBarsStaggered, faBolt, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { Repeat } from 'lucide-svelte';
+import { Cross, Repeat, Square } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let trigger = false;
+export let stop = false;
+export let open = undefined;
 </script>
 
-<Menu noMinW placement="bottom-start" let:close>
+<Menu bind:show={open} noMinW placement="bottom-center" let:close>
 	<button
+		title="Add step"
 		slot="trigger"
 		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"
+		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} />
+		<Cross size={12} />
 	</button>
-	<div class="divide-y divide-gray-100 text-xs w-40">
+	<div class="font-mono divide-y divide-gray-100 text-xs w-40">
 		<button
 			class="w-full text-left p-2 hover:bg-gray-100"
 			on:click={() => {
@@ -25,8 +28,8 @@ export let trigger = false;
 			role="menuitem"
 			tabindex="-1"
 		>
-			<Icon data={faCode} scale={0.8} class="mr-1" />
-			Action (Script)
+			<Icon data={faCode} scale={0.8} class="mr-2" />
+			Action
 		</button>
 		{#if trigger}
 			<button
@@ -38,12 +41,12 @@ export let trigger = false;
 				role="menuitem"
 				tabindex="-1"
 			>
-				<Icon data={faBolt} scale={0.8} class="mr-1" />
-				Trigger (Script)
+				<Icon data={faBolt} scale={0.8} class="mr-2" />
+				Trigger
 			</button>
 		{/if}
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left gap-1 p-2 hover:bg-gray-100"
 			on:click={() => {
 				close()
 				dispatch('new', 'approval')
@@ -51,18 +54,18 @@ export let trigger = false;
 			role="menuitem"
 			tabindex="-1"
 		>
-			<Icon data={faCheck} scale={0.8} class="mr-1" />
-			Approval (Script)
+			<Icon data={faCheck} class="mr-1.5" scale={0.8} />
+			Approval
 		</button>
 		<button
-			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"
+			class="w-full inline-flex text-left p-2 hover:bg-gray-100"
 			on:click={() => {
 				close()
 				dispatch('new', 'forloop')
 			}}
 			role="menuitem"
 		>
-			<span>
+			<span class="mr-3">
 				<Repeat size={14} />
 			</span>
 
@@ -77,7 +80,7 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			<Icon data={faCodeBranch} scale={0.8} class="mr-2" />
 			Branch to one
 		</button>
 
@@ -89,7 +92,7 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			<Icon data={faCodeBranch} scale={0.8} class="mr-2" />
 			Branch to all
 		</button>
 
@@ -101,8 +104,21 @@ export let trigger = false;
 			}}
 			role="menuitem"
 		>
-			<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+			<Icon data={faBarsStaggered} scale={0.8} class="mr-2" />
 			Flow
 		</button>
+		{#if stop}
+			<button
+				class="w-full text-left p-2 hover:bg-gray-100 inline-flex gap-2.5"
+				on:click={() => {
+					close()
+					dispatch('new', 'end')
+				}}
+				role="menuitem"
+			>
+				<Square size={14} />
+				End Flow
+			</button>
+		{/if}
 	</div>
 </Menu>

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

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         trigger?: boolean | undefined;
+        stop?: boolean | undefined;
+        open?: boolean | undefined;
     };
     events: {
         new: CustomEvent<any>;

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 } 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,104 +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.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 {};