windmill-components 1.35.43 → 1.36.0

package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         applyPageWidth?: boolean | undefined;
+        stickToTop?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/badge/Badge.svelte

@@ -24,16 +24,12 @@ const colors = {
     green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
     yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
     indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
     ['dark-gray']: 'bg-gray-500 text-gray-100',
     ['dark-blue']: 'bg-blue-500 text-blue-100',
     ['dark-red']: 'bg-red-500 text-white',
     ['dark-green']: 'bg-green-500 text-green-100',
     ['dark-yellow']: 'bg-yellow-300 text-yellow-800',
-    ['dark-indigo']: 'bg-indigo-500 text-indigo-100',
-    ['dark-purple']: 'bg-purple-500 text-purple-100',
-    ['dark-pink']: 'bg-pink-500 text-pink-100'
+    ['dark-indigo']: 'bg-indigo-500 text-indigo-100'
 };
 const hovers = {
     gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
@@ -41,9 +37,7 @@ const hovers = {
     red: 'hover:bg-red-200 dark:hover:bg-red-300',
     green: 'hover:bg-green-200 dark:hover:bg-green-300',
     yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
-    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300'
 };
 $: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
     (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', index

package/components/common/badge/model.d.ts

@@ -1,5 +1,5 @@
 import type { IconProps } from 'svelte-awesome/components/Icon.svelte';
-declare type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink';
+declare type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
 export declare const ColorModifier = "dark-";
 export declare type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
 export interface BadgeIconProps extends IconProps {

package/components/common/button/Button.svelte

@@ -10,6 +10,7 @@ export let disabled = false;
 export let href = undefined;
 export let target = '_self';
 export let iconOnly = false;
+export let id = '';
 export let startIcon = undefined;
 export let endIcon = undefined;
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
@@ -19,8 +20,8 @@ const colorVariants = {
         contained: 'bg-blue-500 hover:bg-blue-700 text-white focus:ring-blue-300'
     },
     red: {
-        border: 'border-red-500 hover:border-red-700 bg-white hover:bg-red-100 text-red-500 hover:text-red-700 focus:ring-red-300',
-        contained: 'bg-red-500 hover:bg-red-700 text-white focus:ring-red-300'
+        border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
+        contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300'
     },
     dark: {
         border: 'border-gray-800 hover:border-gray-900 bg-white hover:bg-gray-200 text-gray-800 hover:text-gray-900 focus:ring-gray-300',
@@ -46,7 +47,7 @@ const spacingClasses = {
     xl: 'px-4 py-2'
 };
 const iconScale = {
-    xs: 0.7,
+    xs: 0.6,
     sm: 0.8,
     md: 1,
     lg: 1.1,
@@ -56,10 +57,12 @@ $: buttonProps = {
     class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', fontSizeClasses[size], spacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
     disabled
 };
+$: isSmall = size === 'xs' || size === 'sm';
 </script>
 
 {#if href}
 	<button
+		{id}
 		type="button"
 		on:click|stopPropagation={() => goto(href ?? '#')}
 		{target}
@@ -85,7 +88,7 @@ $: buttonProps = {
 		{/if}
 	</button>
 {:else}
-	<button type="button" on:click|stopPropagation {...buttonProps}>
+	<button {id} type="button" on:click|stopPropagation {...buttonProps} {...$$restProps}>
 		{#if startIcon}
 			<Icon
 				data={startIcon.icon}

package/components/common/button/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Button } from './model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: Button.Size | undefined;
         spacingSize?: Button.Size | undefined;
         color?: Button.Color | undefined;
@@ -11,6 +12,7 @@ declare const __propDef: {
         href?: string | undefined;
         target?: Button.Target | undefined;
         iconOnly?: boolean | undefined;
+        id?: string | undefined;
         startIcon?: {
             icon: any;
             classes?: string;

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -4,12 +4,27 @@ import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
+import Badge from '../badge/Badge.svelte';
 export let title;
 export let confirmationText;
 export let open = false;
 const dispatch = createEventDispatcher();
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Enter':
+                dispatch('confirmed');
+                break;
+            case 'Escape':
+                dispatch('canceled');
+                break;
+        }
+    }
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 {#if open}
 	<div transition:fade={{ duration: 100 }} class={'relative  z-50'} role="dialog">
 		<div
@@ -44,9 +59,11 @@ const dispatch = createEventDispatcher();
 					</div>
 					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
 						<Button on:click={() => dispatch('confirmed')} color="red" size="sm">
-							{confirmationText}
+							<span>{confirmationText} <Badge>Enter</Badge></span>
+						</Button>
+						<Button on:click={() => dispatch('canceled')} color="light" size="sm">
+							<span>Cancel <Badge color="dark-gray">Escape</Badge></span>
 						</Button>
-						<Button on:click={() => dispatch('canceled')} color="light" size="sm">Cancel</Button>
 					</div>
 				</div>
 			</div>

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -0,0 +1,41 @@
+<script>import ConfirmationModal from './ConfirmationModal.svelte';
+import { beforeNavigate, goto } from '$app/navigation';
+import { onDestroy } from 'svelte/internal';
+import { dirtyStore } from './dirtyStore';
+let navigationState = undefined;
+$: open = Boolean(navigationState);
+beforeNavigate((newNavigationState) => {
+    if (!navigationState &&
+        $dirtyStore &&
+        newNavigationState.to?.pathname !== newNavigationState.from.pathname) {
+        navigationState = newNavigationState;
+        newNavigationState.cancel();
+    }
+});
+onDestroy(() => {
+    $dirtyStore = false;
+});
+</script>
+
+<ConfirmationModal
+	{open}
+	title="Unsaved changes detected"
+	confirmationText="Discard changes"
+	on:canceled={() => {
+		if (navigationState) {
+			navigationState.cancel()
+		}
+		navigationState = undefined
+	}}
+	on:confirmed={() => {
+		if (navigationState?.to) {
+			goto(navigationState.to)
+		}
+		$dirtyStore = false
+		navigationState = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to discard change you have made?</span>
+	</div>
+</ConfirmationModal>

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

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

package/components/common/confirmationModal/dirtyStore.d.ts

@@ -0,0 +1 @@
+export declare const dirtyStore: import("svelte/store").Writable<boolean>;

package/components/common/confirmationModal/dirtyStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const dirtyStore = writable(false);

package/components/flows/FlowEditor.svelte

@@ -1,18 +1,18 @@
 <!-- Flow Editor: Top level component -->
 <script>import { HSplitPane } from 'svelte-split-pane';
-import FlowEditorHeader from './header/FlowEditorHeader.svelte';
 import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
 import { flowStore } from './flowStore';
 import { flowStateStore } from './flowState';
+import FlowPreviewButtons from './header/FlowPreviewButtons.svelte';
+export let initialPath;
 </script>
 
-<FlowEditorHeader />
-
-<div class="h-full overflow-hidden">
+<div class="h-full overflow-hidden border-t">
 	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="40%">
-		<left slot="left" class="h-full ">
-			<div class="h-full overflow-auto p-4 bg-gray-50">
+		<left slot="left" class="h-full flex flex-col ">
+			<FlowPreviewButtons />
+			<div class="grow overflow-auto p-4 bg-gray-50">
 				{#if $flowStore.value.modules && $flowStateStore.modules}
 					<FlowModuleSchemaMap
 						bind:modules={$flowStore.value.modules}
@@ -23,7 +23,7 @@ import { flowStateStore } from './flowState';
 		</left>
 		<right slot="right" class="h-full">
 			<div class="h-full overflow-auto bg-white ">
-				<FlowEditorPanel />
+				<FlowEditorPanel {initialPath} />
 			</div>
 		</right>
 	</HSplitPane>

package/components/flows/FlowEditor.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        initialPath: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/common/FlowCardHeader.svelte

@@ -33,7 +33,7 @@ const languageColors = {
 		</span>
 	{/if}
 	{#if title}
-		<span class="text-xs font-bold text-gray-900 flex flex-col">{title}</span>
+		<div class="text-sm font-bold text-gray-900">{title}</div>
 	{/if}
 	<slot />
 </div>

package/components/flows/content/FlowEditorPanel.svelte

@@ -2,20 +2,19 @@
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
-import FlowLoop from './FlowLoop.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
+import FlowLoopWrapper from './FlowLoopWrapper.svelte';
+export let initialPath;
 const { selectedId } = getContext('FlowEditorContext');
 </script>
 
 {#key $selectedId}
 	{#if $selectedId === 'settings'}
-		<FlowSettings />
+		<FlowSettings {initialPath} />
 	{:else if $selectedId === 'settings-schedule'}
-		<FlowSettings defaultTab="schedule" />
-	{:else if $selectedId === 'settings-retries'}
-		<FlowSettings defaultTab="retries" />
+		<FlowSettings {initialPath} defaultTab="schedule" />
 	{:else if $selectedId.includes('loop')}
-		<FlowLoop />
+		<FlowLoopWrapper />
 	{:else if $selectedId === 'inputs'}
 		<FlowInput />
 	{:else if $selectedId === 'failure'}

package/components/flows/content/FlowEditorPanel.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        initialPath: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowFailureModule.svelte

@@ -1,17 +1,15 @@
-<script>import { getContext } from 'svelte';
-import { flowStateStore } from '../flowState';
+<script>import { flowStateStore } from '../flowState';
 import { flowStore } from '../flowStore';
 import FlowModule from './FlowModule.svelte';
-const { previewArgs } = getContext('FlowEditorContext');
 </script>
 
 {#if $flowStore.value.failure_module}
 	<FlowModule
-		previewArgs={previewArgs}
 		bind:flowModule={$flowStore.value.failure_module}
 		bind:flowModuleState={$flowStateStore.failureModule}
 		on:delete={() => {
 			$flowStore.value.failure_module = undefined
 		}}
+		failureModule={true}
 	/>
 {/if}

package/components/flows/content/FlowInput.svelte

@@ -1,5 +1,6 @@
 <script>import { flowStore } from '../flowStore';
 import SchemaEditor from '../../SchemaEditor.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
 import { emptySchema } from '../../../utils';
 import FlowCard from '../common/FlowCard.svelte';
 import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
@@ -15,8 +16,11 @@ import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
 				on:change={() => {
 					$flowStore = $flowStore
 				}}
-				schema={$flowStore?.schema ?? emptySchema()}
+				bind:schema={$flowStore.schema}
 			/>
 		</div>
 	</div>
+	<div class="p-6">
+		<SchemaForm bind:schema={$flowStore.schema} editableSchema={true} />
+	</div>
 </FlowCard>

package/components/flows/content/FlowInputs.svelte

@@ -6,6 +6,7 @@ import PickHubScript from '../pickers/PickHubScript.svelte';
 import PickScript from '../pickers/PickScript.svelte';
 export let shouldDisableLoopCreation = false;
 export let shouldDisableTriggerScripts = false;
+export let failureModule;
 const dispatch = createEventDispatcher();
 </script>
 
@@ -15,8 +16,8 @@ const dispatch = createEventDispatcher();
 	{/if}
 
 	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
-		<PickScript kind={Script.kind.SCRIPT} on:pick />
-		<PickHubScript kind={Script.kind.SCRIPT} on:pick />
+		<PickScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
+		<PickHubScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
 
 		<FlowScriptPicker
 			label={`Create a for-loop here`}
@@ -26,20 +27,26 @@ const dispatch = createEventDispatcher();
 			on:click={() => dispatch('loop')}
 		/>
 
-		<FlowScriptPicker
-			label={`New PostgreSQL query`}
-			icon={faCode}
-			iconColor="text-blue-800"
-			on:click={() =>
-				dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
-		/>
+		{#if !failureModule}
+			<FlowScriptPicker
+				label={`New PostgreSQL query`}
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() =>
+					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
+			/>
+		{/if}
 
 		<FlowScriptPicker
 			label="New Python script (3.10)"
 			icon={faCode}
 			iconColor="text-green-500"
 			on:click={() =>
-				dispatch('new', { language: RawScript.language.PYTHON3, kind: 'script', subkind: 'flow' })}
+				dispatch('new', {
+					language: RawScript.language.PYTHON3,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
 		/>
 
 		<FlowScriptPicker
@@ -47,7 +54,11 @@ const dispatch = createEventDispatcher();
 			icon={faCode}
 			iconColor="text-blue-800"
 			on:click={() =>
-				dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'flow' })}
+				dispatch('new', {
+					language: RawScript.language.DENO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
 		/>
 
 		<FlowScriptPicker
@@ -55,7 +66,11 @@ const dispatch = createEventDispatcher();
 			icon={faCode}
 			iconColor="text-blue-700"
 			on:click={() =>
-				dispatch('new', { language: RawScript.language.GO, kind: 'script', subkind: 'flow' })}
+				dispatch('new', {
+					language: RawScript.language.GO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
 		/>
 	</div>
 

package/components/flows/content/FlowInputs.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         shouldDisableLoopCreation?: boolean | undefined;
         shouldDisableTriggerScripts?: boolean | undefined;
+        failureModule: boolean;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/content/FlowLoop.svelte

@@ -4,35 +4,165 @@ import Toggle from '../../Toggle.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { flowStore } from '../flowStore';
-const { selectedId } = getContext('FlowEditorContext');
-const [prefix, index] = $selectedId.split('-');
+import { getStepPropPicker } from '../flowStateUtils';
+import { flowStateStore } from '../flowState';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { VSplitPane } from 'svelte-split-pane';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import FlowRetries from './FlowRetries.svelte';
+import { Button, Tab, TabContent, Tabs } from '../../common';
+const { previewArgs } = getContext('FlowEditorContext');
+export let mod;
+export let index;
+let editor = undefined;
+let monacos = {};
+let selected = 'retries';
+let inputTransformName = '';
+$: mod = $flowStore.value.modules[index];
+$: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
 </script>
 
 <FlowCard title="For loop">
+	<div slot="header" class="grow">
+		<input bind:value={mod.summary} placeholder={'Summary'} />
+	</div>
 	<div>
-		<div class="p-6 flex flex-col">
-			{#if $flowStore.value.modules[index].value.type === 'forloopflow'}
-				<span class="mb-2 text-sm font-bold"
-					>Iterator expression
-					<Tooltip>
-						List to iterate over. For more information see the
-						<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
-					</Tooltip>
-				</span>
-				<SimpleEditor
-					lang="javascript"
-					bind:code={$flowStore.value.modules[index].value.iterator.expr}
-					class="few-lines-editor"
-				/>
-				<span class="mb-2 text-sm font-bold">Skip failures</span>
-
-				<Toggle
-					bind:checked={$flowStore.value.modules[index].value.skip_failures}
-					options={{
-						right: 'Skip failures'
-					}}
-				/>
-			{/if}
+		<div class="overflow-hidden flex-grow">
+			<VSplitPane topPanelSize="50%" downPanelSize="40%" minTopPaneSize="20%" minDownPaneSize="20%">
+				<top slot="top">
+					<div class="p-6 flex flex-col">
+						{#if mod.value.type === 'forloopflow'}
+							<span class="mb-2 text-sm font-bold"
+								>Iterator expression
+								<Tooltip>
+									List to iterate over. For more information see the
+									<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
+								</Tooltip>
+							</span>
+
+							{#if mod.value.iterator.type == 'javascript'}
+								<div class="border w-full">
+									<PropPickerWrapper
+										{pickableProperties}
+										on:select={({ detail }) => {
+											editor?.insertAtCursor(detail)
+										}}
+									>
+										<SimpleEditor
+											bind:this={editor}
+											lang="javascript"
+											bind:code={mod.value.iterator.expr}
+											class="small-editor"
+											shouldBindKey={false}
+										/>
+									</PropPickerWrapper>
+								</div>
+							{:else}
+								<Button
+									on:click={() => {
+										if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
+									}}
+								/>
+							{/if}
+
+							<span class="my-2 text-sm font-bold">Skip failures</span>
+
+							<Toggle
+								bind:checked={mod.value.skip_failures}
+								options={{
+									right: 'Skip failures'
+								}}
+							/>
+							<span class="my-2 text-sm font-bold"
+								>Pass specific flow context as loop flow input</span
+							>
+							<div class="flex flex-row mt-4 w-80 max-w-full"
+								><input
+									bind:value={inputTransformName}
+									placeholder="Argument name"
+									type="text"
+									class="w-20"
+								/><Button
+									disabled={inputTransformName == ''}
+									btnClasses="ml-2"
+									on:click={() =>
+										(mod.input_transforms[inputTransformName] = { type: 'javascript', expr: '' })}
+									>+</Button
+								></div
+							>
+
+							{#each Object.keys(mod.input_transforms) as key}
+								<div class="flex flex-row my-2">
+									<span class="my-2 text-sm font-bold">{key}</span>
+
+									<Button
+										btnClasses="ml-4"
+										on:click={() => {
+											delete mod.input_transforms[key]
+											mod.input_transforms = mod.input_transforms
+										}}>-</Button
+									>
+								</div>
+								<div class="border w-full">
+									{#if mod.input_transforms[key].type == 'javascript'}
+										<PropPickerWrapper
+											{pickableProperties}
+											on:select={({ detail }) => {
+												monacos[key]?.insertAtCursor(detail)
+											}}
+										>
+											<SimpleEditor
+												bind:this={monacos[key]}
+												lang="javascript"
+												bind:code={mod.input_transforms[key]['expr']}
+												class="small-editor"
+												shouldBindKey={false}
+											/>
+										</PropPickerWrapper>
+									{:else}
+										<Button
+											on:click={() => {
+												mod.input_transforms[key].type = 'javascript'
+												mod.input_transforms[key]['expr'] = ''
+											}}
+										/>
+									{/if}
+								</div>
+							{/each}
+						{/if}
+					</div></top
+				>
+				<down slot="down" class="flex flex-col flex-1 h-full">
+					<Tabs bind:selected>
+						<Tab value="retries">Retries</Tab>
+						<Tab value="early-stop">Early Stop</Tab>
+						<Tab value="suspend">Suspend</Tab>
+
+						<svelte:fragment slot="content">
+							<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+								<TabContent value="retries" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowRetries bind:flowModule={mod} />
+									</div>
+								</TabContent>
+
+								<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowModuleEarlyStop bind:flowModule={mod} />
+									</div>
+								</TabContent>
+
+								<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowModuleSuspend bind:flowModule={mod} />
+									</div>
+								</TabContent>
+							</div>
+						</svelte:fragment>
+					</Tabs>
+				</down>
+			</VSplitPane>
 		</div>
 	</div>
 </FlowCard>

package/components/flows/content/FlowLoop.svelte.d.ts

@@ -1,6 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen/models/FlowModule';
 declare const __propDef: {
-    props: {};
+    props: {
+        mod: FlowModule;
+        index: number;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowLoopWrapper.svelte

@@ -0,0 +1,9 @@
+<script>import { getContext } from 'svelte';
+import { flowStore } from '../flowStore';
+import { selectedIdToIndexes } from '../utils';
+import FlowLoop from './FlowLoop.svelte';
+const { selectedId } = getContext('FlowEditorContext');
+$: index = selectedIdToIndexes($selectedId)[0];
+</script>
+
+<FlowLoop bind:mod={$flowStore.value.modules[index]} {index} />