windmill-components 1.89.0 → 1.103.0

package/package/components/flows/content/BranchPredicateEditor.svelte

@@ -2,30 +2,43 @@
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import { getStepPropPicker } from '../previousResults';
+import Button from '../../common/button/Button.svelte';
+import { faPen } from '@fortawesome/free-solid-svg-icons';
 export let branch;
 export let parentModule;
 export let previousModule;
 const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 let editor = undefined;
+let open = false;
 $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false);
 </script>
 
-<PropPickerWrapper
-	notSelectable
-	pickableProperties={stepPropPicker.pickableProperties}
-	on:select={({ detail }) => {
-		editor?.insertAtCursor(detail)
-		editor?.focus()
-	}}
->
-	<div class="border border-gray-400">
-		<SimpleEditor
-			bind:this={editor}
-			lang="javascript"
-			bind:code={branch.expr}
-			class="small-editor border "
-			shouldBindKey={false}
-			extraLib={stepPropPicker.extraLib}
-		/>
+{#if open}
+	<PropPickerWrapper
+		notSelectable
+		pickableProperties={stepPropPicker.pickableProperties}
+		on:select={({ detail }) => {
+			editor?.insertAtCursor(detail)
+			editor?.focus()
+		}}
+	>
+		<div class="border border-gray-400">
+			<SimpleEditor
+				bind:this={editor}
+				lang="javascript"
+				bind:code={branch.expr}
+				class="small-editor border "
+				shouldBindKey={false}
+				extraLib={stepPropPicker.extraLib}
+			/>
+		</div>
+	</PropPickerWrapper>
+{:else}
+	<div class="flex justify-between gap-4 p-2">
+		<div><pre class="text-sm">{branch.expr}</pre></div><div
+			><Button startIcon={{ icon: faPen }} variant="border" on:click={() => (open = !open)}
+				>Edit Predicate</Button
+			></div
+		>
 	</div>
-</PropPickerWrapper>
+{/if}

package/package/components/flows/content/CapturePayload.svelte

@@ -1,4 +1,4 @@
-<script>import { page } from '$app/stores';
+<script>import { BROWSER } from 'esm-env';
 import { Button } from '../../common';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
@@ -35,6 +35,7 @@ async function getCaptureInput() {
     captureInput = capture;
     jsonSchema = { required: [], properties: {}, ...convert(capture) };
 }
+let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
 </script>
 
 <Drawer
@@ -54,14 +55,10 @@ async function getCaptureInput() {
 				class="text-2xl"
 				on:click={(e) => {
 					e.preventDefault()
-					copyToClipboard(
-						`${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path}`
-					)
+					copyToClipboard(`${hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path}`)
 				}}
-				href="{$page.url.protocol}//{$page.url
-					.hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}"
-				>{$page.url.protocol}//{$page.url
-					.hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}
+				href="{hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}"
+				>{hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}
 				<Icon data={faClipboard} /></a
 			>
 		</div>
@@ -69,7 +66,7 @@ async function getCaptureInput() {
 
 		<div class="text-xs box mb-4 b">
 			<pre class="overflow-auto"
-				>{`curl -X POST ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path} \\
+				>{`curl -X POST ${hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path} \\
    -H 'Content-Type: application/json' \\
    -d '{"foo": 42}'`}</pre
 			>

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -24,12 +24,7 @@ $: opened = false;
 		role="alert"
 		id="dynamic-input-help-box"
 	>
-		the last line must always be the final expression.
-		<p>
-			If it is multiline, the statement before the final expression <b
-				>MUST END WITH ; and a newline</b
-			>
-		</p>
+		Single javascript expression. The following functions and objects are available:
 		<ul class="ml-4">
 			<li><b>{'results.<id>'}</b>: the result of step at id 'id'</li>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
@@ -42,5 +37,6 @@ $: opened = false;
 				<b>resource(path)</b>: the function returning the resource at a given path as an object
 			</li>
 		</ul>
+		If using multiple statements, the last statement shall finish with a return. e.g: `return x`
 	</div>
 {/if}

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -1,12 +1,13 @@
-<script>import { Alert, Tab } from '../../common';
+<script>import { Alert, Badge, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Toggle from '../../Toggle.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
-// import FlowRetries from './FlowRetries.svelte'
 export let flowModule;
 export let previousModule;
 let value = flowModule.value;
@@ -16,76 +17,73 @@ let selected = 'early-stop';
 
 <div class="h-full flex flex-col w-full">
 	<FlowCard title={value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
-		<div class="flex flex-col h-full w-full">
-			<div class="border w-full">
-				<Alert notRounded type="info" title="All branches will be run">
-					The result of this step is the list of the result of each branch.
-				</Alert>
+		<SplitPanesWrapper>
+			<Splitpanes horizontal>
+				<Pane size={flowModule ? 60 : 100}>
+					<Alert notRounded type="info" title="All branches will be run" class="m-2">
+						The result of this step is the list of the result of each branch.
+					</Alert>
 
-				<div class="p-4 mt-4 w-full">
-					<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
-					>
-					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
-						{#each value.branches as branch}
-							<div class="flex flex-row gap-x-4 w-full items-center">
-								<div class="grow">
-									<input type="text" bind:value={branch.summary} placeholder="Summary" />
+					<div class="p-4 mt-4 w-full">
+						<h3 class="mb-4"
+							>{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
+						>
+						<div class="flex flex-col gap-y-4 py-2 w-full">
+							{#each value.branches as branch, i}
+								<div class="flex flex-row gap-x-4 w-full items-center">
+									<div class="grow flex gap-2">
+										<Badge large={true} color="blue">Branch {i + 1}</Badge>
+										<input type="text" bind:value={branch.summary} placeholder="Summary" />
+									</div>
+									<div class="w-min-sm">
+										<Toggle
+											bind:checked={branch.skip_failure}
+											options={{
+												right: 'Skip failure'
+											}}
+										/>
+									</div>
 								</div>
-								<div class="w-min-sm">
-									<Toggle
-										bind:checked={branch.skip_failure}
-										options={{
-											right: 'Skip failure'
-										}}
-									/>
-								</div>
-							</div>
-						{/each}
+							{/each}
+						</div>
+						<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+						<Toggle
+							bind:checked={value.parallel}
+							options={{
+								right: 'All branches run in parallel'
+							}}
+						/>
 					</div>
-					<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
-					<Toggle
-						bind:checked={value.parallel}
-						options={{
-							right: 'All branches run in parallel'
-						}}
-					/>
-				</div>
-			</div>
-			{#if flowModule}
-				<Tabs bind:selected>
-					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop/Break</Tab>
-					<Tab value="suspend">Suspend</Tab>
-					<Tab value="sleep">Sleep</Tab>
-
-					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white">
-							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule />
-								</div>
-							</TabContent> -->
-
-							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule />
+				</Pane>
+				{#if flowModule}
+					<Pane size={40}>
+						<Tabs bind:selected>
+							<Tab value="early-stop">Early Stop/Break</Tab>
+							<Tab value="suspend">Suspend</Tab>
+							<Tab value="sleep">Sleep</Tab>
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white">
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+										</div>
+									</TabContent>
 								</div>
-							</TabContent>
-
-							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend bind:flowModule />
-								</div>
-							</TabContent>
-							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
-								</div>
-							</TabContent>
-						</div>
-					</svelte:fragment>
-				</Tabs>
-			{/if}
-		</div>
+							</svelte:fragment>
+						</Tabs>
+					</Pane>
+				{/if}
+			</Splitpanes>
+		</SplitPanesWrapper>
 	</FlowCard>
 </div>

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -1,11 +1,13 @@
 <script>import { Alert, Badge, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import FlowCard from '../common/FlowCard.svelte';
 import BranchPredicateEditor from './BranchPredicateEditor.svelte';
 import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 // import FlowRetries from './FlowRetries.svelte'
 export let flowModule;
 export let previousModule;
@@ -16,73 +18,72 @@ let selected = 'early-stop';
 
 <div class="h-full">
 	<FlowCard title="Run one branch">
-		<div class="flex flex-col h-full overflow-auto">
-			<div class="border">
-				<Alert notRounded type="info" title="Only one branch will be run">
-					The result of this step is the result of the branch.
-				</Alert>
-
-				<div class="p-2">
-					<h3 class="my-4"
-						>{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}</h3
-					>
-					<div class="flex flex-col gap-y-4 py-2">
-						<div class="flex flex-row gap-2 text-sm border border-gray-400 p-2">
-							<Badge large={true} color="blue">Default branch</Badge>
-							<p class="italic text-gray-600"
-								>If none of the predicates' expressions evaluated in-order match, this branch is
-								chosen</p
-							>
-						</div>
-						{#each value.branches as branch}
-							<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
-								<input
-									class="w-full"
-									type="text"
-									bind:value={branch.summary}
-									placeholder="Summary"
-								/>
-								<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+		<SplitPanesWrapper>
+			<Splitpanes horizontal>
+				<Pane size={flowModule ? 60 : 100}>
+					<Alert notRounded type="info" title="Only one branch will be run" class="m-2">
+						The result of this step is the result of the branch.
+					</Alert>
+					<div class="p-2">
+						<h3 class="my-4">
+							{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
+						</h3>
+						<div class="py-2">
+							<div class="flex flex-row gap-2 text-sm p-2">
+								<Badge large={true} color="blue">Default branch</Badge>
+								<p class="italic text-gray-600"
+									>If none of the predicates' expressions evaluated in-order match, this branch is
+									chosen</p
+								>
 							</div>
-						{/each}
-					</div>
-				</div>
-			</div>
-			{#if flowModule}
-				<Tabs bind:selected>
-					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop/Break</Tab>
-					<Tab value="suspend">Suspend</Tab>
-					<Tab value="sleep">Sleep</Tab>
-
-					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white">
-							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule />
-								</div>
-							</TabContent> -->
-
-							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule />
+							{#each value.branches as branch, i}
+								<div class="flex flex-col gap-x-2 items-center">
+									<div class="w-full flex gap-2 px-2 pt-4 pb-2">
+										<Badge large={true} color="blue">Branch {i + 1}</Badge>
+										<input
+											class="w-full"
+											type="text"
+											bind:value={branch.summary}
+											placeholder="Summary"
+										/>
+									</div>
+									<div class="w-full border">
+										<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+									</div>
 								</div>
-							</TabContent>
-
-							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend bind:flowModule />
-								</div>
-							</TabContent>
-							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
-								</div>
-							</TabContent>
+							{/each}
 						</div>
-					</svelte:fragment>
-				</Tabs>
-			{/if}
-		</div>
+					</div>
+				</Pane>
+				{#if flowModule}
+					<Pane size={40}>
+						<Tabs bind:selected>
+							<Tab value="early-stop">Early Stop/Break</Tab>
+							<Tab value="suspend">Suspend</Tab>
+							<Tab value="sleep">Sleep</Tab>
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white">
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+										</div>
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
+					</Pane>
+				{/if}
+			</Splitpanes>
+		</SplitPanesWrapper>
 	</FlowCard>
 </div>

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

@@ -4,12 +4,11 @@ import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
 import FlowConstants from './FlowConstants.svelte';
-export let initialPath;
 const { selectedId, flowStore } = getContext('FlowEditorContext');
 </script>
 
 {#if $selectedId?.startsWith('settings')}
-	<FlowSettings {initialPath} />
+	<FlowSettings />
 {:else if $selectedId === 'Input'}
 	<FlowInput />
 {:else if $selectedId === 'Result'}

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

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

package/package/components/flows/content/FlowInput.svelte

@@ -35,6 +35,7 @@ let capturePayload;
 		</div>
 		<div class="pt-6">
 			<SchemaEditor
+				isFlowInput
 				bind:schema={$flowStore.schema}
 				on:change={() => {
 					$flowStore = $flowStore

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

@@ -7,6 +7,8 @@ import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
+import { isCloudHosted } from '../../../cloud';
+import { sendUserToast } from '../../../toast';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
 export let summary = undefined;
@@ -44,19 +46,22 @@ let filter = '';
 								size="sm"
 								startIcon={{ icon: faBolt }}
 							>
-								Trigger &nbsp;<Tooltip>
+								Trigger &nbsp;<Tooltip
+									documentationLink="https://docs.windmill.dev/docs/flows/flow_trigger"
+								>
 									Used as a first step most commonly with a state and a schedule to watch for
-									changes on an external system, compute the diff since last time, set the new
+									changes on an external system, compute the diff since last time and set the new
 									state. The diffs are then treated one by one with a for-loop.
 								</Tooltip>
 							</ToggleButton>
 						{/if}
 						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip>
+							Approval &nbsp;<Tooltip
+								documentationLink="https://docs.windmill.dev/docs/flows/flow_approval"
+							>
 								An approval step will suspend the execution of a flow until it has been approved
 								through the resume endpoints or the approval page by and solely by the recipients of
-								those secret urls. Use `wmill.getResumeUrls()` in Typescript or
-								`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+								those secret urls.
 							</Tooltip>
 						</ToggleButton>
 					</ToggleButtonGroup>
@@ -72,7 +77,7 @@ let filter = '';
 		{/if}
 		<h3 class="pb-2 pt-4">
 			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip>
+			<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_error_handler">
 				Embed a script directly inside a flow instead of saving the script into your workspace for
 				reuse. You can always save an inline script to your workspace later.
 			</Tooltip>
@@ -137,6 +142,28 @@ let filter = '';
 							on:click={() =>
 								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
 						/>
+						<FlowScriptPicker
+							label={`Docker`}
+							lang="docker"
+							on:click={() => {
+								if (isCloudHosted() || true) {
+									sendUserToast(
+										'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+										true,
+										[
+											{
+												label: 'Learn more',
+												callback: () => {
+													window.open('https://docs.windmill.dev/docs/advanced/docker', '_blank')
+												}
+											}
+										]
+									)
+									return
+								}
+								dispatch('new', { language: RawScript.language.BASH, kind, subkind: 'docker' })
+							}}
+						/>
 
 						<!-- <FlowScriptPicker
 							label={`MySQL`}

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -8,7 +8,7 @@ import { createScriptFromInlineScript, fork } from '../flowStateUtils';
 import { RawScript } from '../../../gen';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowModuleHeader from './FlowModuleHeader.svelte';
-import { getLatestHashForScript, schemaToObject, scriptLangToEditorLang } from '../../../utils';
+import { getLatestHashForScript, scriptLangToEditorLang } from '../../../scripts';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { afterUpdate, getContext } from 'svelte';
 import { loadSchemaFromModule } from '../utils';
@@ -23,7 +23,8 @@ import Alert from '../../common/alert/Alert.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowPathViewer from './FlowPathViewer.svelte';
 import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
-const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
+import { schemaToObject } from '../../../schema';
+const { selectedId, previewArgs, flowStateStore, flowStore, saveDraft } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -32,7 +33,14 @@ let value = flowModule.value;
 $: value = flowModule.value;
 let editor;
 let modulePreview;
-let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let websocketAlive = {
+    pyright: false,
+    black: false,
+    deno: false,
+    go: false,
+    ruff: false,
+    shellcheck: false
+};
 let selected = 'inputs';
 let advancedSelected = 'retries';
 let wrapper;
@@ -170,11 +178,13 @@ let forceReload = 0;
 								automaticLayout={true}
 								cmdEnterAction={async () => {
 									selected = 'test'
-									if (value.type === 'rawscript') {
-										value.content = editor.getCode()
+									if ($selectedId == flowModule.id) {
+										if (value.type === 'rawscript') {
+											value.content = editor.getCode()
+										}
+										await reload(flowModule)
+										modulePreview?.runTestWithStepArgs()
 									}
-									await reload(flowModule)
-									modulePreview?.runTestWithStepArgs()
 								}}
 								on:change={async (event) => {
 									if (flowModule.value.type === 'rawscript') {
@@ -182,7 +192,10 @@ let forceReload = 0;
 									}
 									await reload(flowModule)
 								}}
-								formatAction={() => reload(flowModule)}
+								formatAction={() => {
+									reload(flowModule)
+									saveDraft()
+								}}
 								fixedOverflowWidgets={true}
 							/>
 						{:else if value.type === 'script'}
@@ -216,6 +229,7 @@ let forceReload = 0;
 								</div>
 							{:else if selected === 'test'}
 								<ModulePreview
+									pickableProperties={stepPropPicker.pickableProperties}
 									bind:this={modulePreview}
 									mod={flowModule}
 									schema={$flowStateStore[$selectedId]?.schema ?? {}}

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -2,8 +2,8 @@
 import Toggle from '../../Toggle.svelte';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { NEVER_TESTED_THIS_FAR } from '../utils';
 import { getContext } from 'svelte';
+import { NEVER_TESTED_THIS_FAR } from '../models';
 const { flowStateStore } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
@@ -14,11 +14,9 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 <div class="flex flex-col items-start space-y-2 {$$props.class}">
 	<h2>
 		Early stop/Break
-		<Tooltip>
+		<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/early_stop">
 			If defined, at the end of the step, the predicate expression will be evaluated to decide if
-			the flow should stop early. Skipped flows are just a label useful to not see them in the runs
-			page. If stop early is run within a forloop, it will just break the for-loop and have it stop
-			at that iteration instead of stopping the whole flow.
+			the flow should stop early.
 		</Tooltip>
 	</h2>
 	<Toggle