windmill-components 1.382.1 → 1.382.7

package/package/components/ScriptBuilder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type NewScript, type NewScriptWithDraft } from '../gen';
 import type DiffDrawer from './DiffDrawer.svelte';
+import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         script: NewScript;
@@ -10,11 +11,13 @@ declare const __propDef: {
         initialArgs?: Record<string, any> | undefined;
         lockedLanguage?: boolean | undefined;
         showMeta?: boolean | undefined;
+        neverShowMeta?: boolean | undefined;
         diffDrawer?: DiffDrawer | undefined;
         savedScript?: NewScriptWithDraft | undefined;
         searchParams?: URLSearchParams | undefined;
         disableHistoryChange?: boolean | undefined;
         replaceStateFn?: ((url: string) => void) | undefined;
+        customUi?: ScriptBuilderWhitelabelCustomUi | undefined;
         setCode?: ((code: string) => void) | undefined;
     };
     events: {

package/package/components/ScriptEditor.svelte

@@ -38,6 +38,7 @@ export let edit = true;
 export let noHistory = false;
 export let saveToWorkspace = false;
 export let watchChanges = false;
+export let customUi = {};
 let websocketAlive = {
     pyright: false,
     deno: false,
@@ -204,6 +205,7 @@ function collabUrl() {
 					setCollaborationMode()
 				}
 			}}
+			customUi={customUi?.editorBar}
 			collabLive={wsProvider?.shouldConnect}
 			{collabMode}
 			{validCode}
@@ -221,7 +223,7 @@ function collabUrl() {
 			{noHistory}
 			{saveToWorkspace}
 		/>
-		{#if !noSyncFromGithub}
+		{#if !noSyncFromGithub && customUi?.editorBar?.useVsCode != false}
 			<div class="py-1">
 				<Button
 					target="_blank"

package/package/components/ScriptEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Schema, SupportedLanguage } from '../common';
 import { type Preview } from '../gen';
 import Editor from './Editor.svelte';
 import DiffEditor from './DiffEditor.svelte';
+import type { ScriptEditorWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         schema?: Schema | any;
@@ -22,6 +23,7 @@ declare const __propDef: {
         noHistory?: boolean | undefined;
         saveToWorkspace?: boolean | undefined;
         watchChanges?: boolean | undefined;
+        customUi?: ScriptEditorWhitelabelCustomUi | undefined;
         inferSchema?: ((code: string, nlang?: SupportedLanguage) => Promise<void>) | undefined;
         setCollaborationMode?: (() => Promise<void>) | undefined;
         disableCollaboration?: (() => void) | undefined;

package/package/components/apps/components/display/AppText.svelte

@@ -21,6 +21,11 @@ export let customCss = undefined;
 export let render;
 export let editorMode = false;
 let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
+$: editorMode && onEditorMode();
+function onEditorMode() {
+    autosize();
+    setTimeout(() => autosize(), 50);
+}
 const { app, worldStore, mode, componentControl } = getContext('AppViewerContext');
 let css = initCss($app.css?.textcomponent, customCss);
 let result = undefined;
@@ -105,6 +110,7 @@ function autosize() {
             el.style.cssText = 'height:auto; padding:0';
             el.style.cssText = 'height:' + el.scrollHeight + 'px';
         }
+        // console.log(el, el?.scrollHeight)
     }, 0);
 }
 </script>
@@ -137,7 +143,6 @@ function autosize() {
 			if (!editorMode) {
 				editorMode = true
 				document.getElementById(`text-${id}`)?.focus()
-				autosize()
 			}
 		}}
 		on:keydown|stopPropagation
@@ -146,7 +151,7 @@ function autosize() {
 			<AlignWrapper {verticalAlignment}>
 				<textarea
 					class={twMerge(
-						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0',
+						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !ring-0 !p-0',
 						css?.text?.class,
 						'wm-text',
 						classes,
@@ -188,7 +193,7 @@ function autosize() {
 						class="flex flex-wrap gap-2 pb-0.5 w-full {$mode === 'dnd' &&
 						(componentInput?.type == 'template' || componentInput?.type == 'templatev2')
 							? 'cursor-text'
-							: ''}"
+							: 'overflow-auto'}"
 					>
 						<svelte:element
 							this={component}

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -101,6 +101,11 @@ function onChange(e) {
         onSelect.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()));
     }
 }
+function onNativeChange(e) {
+    const target = e.target;
+    const value = target.value;
+    setValue(value);
+}
 function setValue(nvalue) {
     let result = undefined;
     try {
@@ -188,35 +193,46 @@ let filterText = '';
 		}}
 	>
 		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
-			<Select
-				inAppEditor={true}
-				--border-radius="0.250rem"
-				--clear-icon-color="#6b7280"
-				--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
-				bind:filterText
-				on:filter={handleFilter}
-				on:clear={onClear}
-				on:change={onChange}
-				items={listItems}
-				listAutoWidth={resolvedConfig.fullWidth}
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={($darkMode
-					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-				{value}
-				class={css?.input?.class}
-				placeholder={resolvedConfig.placeholder}
-				disabled={resolvedConfig.disabled}
-				on:focus={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-				}}
-			>
-				<svelte:fragment slot="item" let:item
-					>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-				</svelte:fragment>
-			</Select>
+			{#if resolvedConfig.nativeHtmlSelect}
+				<select class={css?.input?.class} style={css?.input?.style} on:change={onNativeChange}>
+					{#if resolvedConfig.placeholder}
+						<option value="" disabled selected>{resolvedConfig.placeholder}</option>
+					{/if}
+					{#each listItems as item (item.value)}
+						<option value={item.value} selected={item.value === value}>{item.label}</option>
+					{/each}
+				</select>
+			{:else}
+				<Select
+					inAppEditor={true}
+					--border-radius="0.250rem"
+					--clear-icon-color="#6b7280"
+					--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
+					bind:filterText
+					on:filter={handleFilter}
+					on:clear={onClear}
+					on:change={onChange}
+					items={listItems}
+					listAutoWidth={resolvedConfig.fullWidth}
+					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					containerStyles={($darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					{value}
+					class={css?.input?.class}
+					placeholder={resolvedConfig.placeholder}
+					disabled={resolvedConfig.disabled}
+					on:focus={() => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+						}
+					}}
+				>
+					<svelte:fragment slot="item" let:item
+						>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
+					</svelte:fragment>
+				</Select>
+			{/if}
 		{:else}
 			<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 				<div

package/package/components/apps/editor/component/components.d.ts

@@ -2388,6 +2388,12 @@ export declare const components: {
                     readonly fieldType: "boolean";
                     readonly tooltip: "Preselect first item in the options if no default value is set";
                 };
+                readonly nativeHtmlSelect: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "Use a native html select instead of the Windmill select component";
+                };
                 readonly fullWidth: {
                     readonly type: "static";
                     readonly fieldType: "boolean";

package/package/components/apps/editor/component/components.js

@@ -1625,6 +1625,12 @@ This is a paragraph.
                     fieldType: 'boolean',
                     tooltip: 'Preselect first item in the options if no default value is set'
                 },
+                nativeHtmlSelect: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Use a native html select instead of the Windmill select component'
+                },
                 fullWidth: {
                     type: 'static',
                     fieldType: 'boolean',

package/package/components/custom_ui.d.ts

@@ -1,5 +1,5 @@
 import type { SupportedLanguage } from '../common';
-export type WhitelabelCustomUi = {
+export type FlowBuilderWhitelabelCustomUi = {
     topBar?: {
         path?: boolean;
         export?: boolean;
@@ -7,8 +7,18 @@ export type WhitelabelCustomUi = {
         aiBuilder?: boolean;
         tutorials?: boolean;
         diff?: boolean;
+        extraDeployOptions?: boolean;
     };
     settingsPanel?: boolean;
+    settingsTabs?: {
+        schedule?: boolean;
+        sharedDiretory?: boolean;
+        earlyStop?: boolean;
+        earlyReturn?: boolean;
+        workerGroup?: boolean;
+        concurrency?: boolean;
+        cache?: boolean;
+    };
     triggers?: boolean;
     flowNode?: boolean;
     hub?: boolean;
@@ -22,4 +32,28 @@ export type WhitelabelCustomUi = {
     stepAdvancedSettings?: boolean;
     languages?: (SupportedLanguage | 'docker' | 'bunnative')[];
     scriptFork?: boolean;
+    editorBar?: EditorBarUi;
+};
+export type EditorBarUi = {
+    contextVar?: boolean;
+    variable?: boolean;
+    type?: boolean;
+    assistants?: boolean;
+    multiplayer?: boolean;
+    autoformatting?: boolean;
+    aiGen?: boolean;
+    aiFix?: boolean;
+    library?: boolean;
+    useVsCode?: boolean;
+};
+export type ScriptEditorWhitelabelCustomUi = {
+    editorBar?: EditorBarUi;
+};
+export type ScriptBuilderWhitelabelCustomUi = {
+    topBar?: {
+        path?: boolean;
+        settings?: boolean;
+        extraDeployOptions?: boolean;
+    };
+    editorBar?: EditorBarUi;
 };

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,18 +1,13 @@
-<script>import { Tabs, Tab, TabContent, Button } from '../common';
-import { copyToClipboard } from '../../utils';
-import { CalendarCheck2, Clipboard, MailIcon, Terminal, Webhook } from 'lucide-svelte';
-import { Highlight } from 'svelte-highlight';
-import { yaml } from 'svelte-highlight/languages';
-import json from 'svelte-highlight/languages/json';
+<script>import { Tabs, Tab, TabContent } from '../common';
+import { CalendarCheck2, MailIcon, Terminal, Webhook } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import YAML from 'yaml';
 import HighlightTheme from '../HighlightTheme.svelte';
+import FlowViewerInner from '../FlowViewerInner.svelte';
 export let triggerSelected = 'webhooks';
 export let flow_json = undefined;
 export let hasStepDetails = false;
 export let isOperator = false;
 export let selected;
-let rawType = 'yaml';
 $: if (hasStepDetails) {
     selected = 'flow_step';
 }
@@ -90,36 +85,7 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 						</Splitpanes>
 					</TabContent>
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto">
-						<Tabs bind:selected={rawType} wrapperClass="mt-4">
-							<Tab value="yaml">YAML</Tab>
-							<Tab value="json">JSON</Tab>
-							<svelte:fragment slot="content">
-								<div class="relative pt-2">
-									<Button
-										on:click={() =>
-											copyToClipboard(
-												rawType === 'yaml'
-													? YAML.stringify(flow_json)
-													: JSON.stringify(flow_json, null, 4)
-											)}
-										color="light"
-										variant="border"
-										size="xs"
-										startIcon={{ icon: Clipboard }}
-										btnClasses="absolute top-2 right-2 w-min"
-									>
-										Copy content
-									</Button>
-									<Highlight
-										class="overflow-auto px-1"
-										language={rawType === 'yaml' ? yaml : json}
-										code={rawType === 'yaml'
-											? YAML.stringify(flow_json)
-											: JSON.stringify(flow_json, null, 4)}
-									/>
-								</div>
-							</svelte:fragment>
-						</Tabs>
+						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
 						<slot name="flow_step" />

package/package/components/details/WebhooksPanel.svelte

@@ -39,9 +39,9 @@ function computeScriptWebhooks(hash, path) {
     };
 }
 function computeFlowWebhooks(path) {
-    let base = `${$page.url.origin}/api/w/${$workspaceStore}/jobs`;
-    let urlAsync = `${base}/run/f/${path}`;
-    let urlSync = `${base}/run_wait_result/f/${path}`;
+    let webhooksBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`;
+    let urlAsync = `${webhooksBase}/run/f/${path}`;
+    let urlSync = `${webhooksBase}/run_wait_result/f/${path}`;
     return {
         async: {
             path: urlAsync

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

@@ -41,7 +41,7 @@ import { loadSchemaFromModule } from '../flowInfers';
 import { computeFlowStepWarning, initFlowStepWarnings } from '../utils';
 import { debounce } from '../../../utils';
 import { dfs } from '../dfs';
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore, customUi } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -216,6 +216,7 @@ function setFlowInput(argName) {
 			{#if flowModule.value.type === 'rawscript' && !noEditor}
 				<div class="border-b-2 shadow-sm px-1">
 					<EditorBar
+						customUi={customUi?.editorBar}
 						{validCode}
 						{editor}
 						{diffEditor}
@@ -353,7 +354,12 @@ function setFlowInput(argName) {
 									{#if !$selectedId.includes('failure')}
 										<Tab value="runtime">Runtime</Tab>
 										<Tab value="cache" active={Boolean(flowModule.cache_ttl)}>Cache</Tab>
-										<Tab value="early-stop" active={Boolean(flowModule.stop_after_if)}>
+										<Tab
+											value="early-stop"
+											active={Boolean(
+												flowModule.stop_after_if || flowModule.stop_after_all_iters_if
+											)}
+										>
 											Early Stop
 										</Tab>
 										<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>

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

@@ -6,84 +6,211 @@ import { getContext } from 'svelte';
 import { NEVER_TESTED_THIS_FAR } from '../models';
 import Section from '../../Section.svelte';
 import { getStepPropPicker } from '../previousResults';
+import { dfs } from '../previousResults';
 const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
 $: stepPropPicker = getStepPropPicker($flowStateStore, undefined, undefined, flowModule.id, $flowStore, $previewArgs, false);
+function checkIfParentLoop(flowStore) {
+    const flow = JSON.parse(JSON.stringify(flowStore));
+    const parents = dfs(flowModule.id, flow, true);
+    for (const parent of parents.slice(1)) {
+        if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
+            return parent.id;
+        }
+    }
+    return null;
+}
+$: isLoop = flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow';
+$: isBranchAll = flowModule.value.type === 'branchall';
 $: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
+$: isStopAfterAllIterationsEnabled = Boolean(flowModule.stop_after_all_iters_if);
 $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
+$: parentLoopId = checkIfParentLoop($flowStore);
 </script>
 
 <div class="flex flex-col items-start space-y-2 {$$props.class}">
-	<Section label="Early stop/Break" class="w-full">
-		<svelte:fragment slot="header">
-			<Tooltip documentationLink="https://www.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.
-			</Tooltip>
-		</svelte:fragment>
+	{#if !isBranchAll}
+		<Section
+			label={(isLoop
+				? 'Break loop'
+				: parentLoopId
+				? 'Break parent loop module ' + parentLoopId
+				: 'Stop flow early') + (isLoop ? ' (evaluated after each iteration)' : '')}
+			class="w-full"
+		>
+			<svelte:fragment slot="header">
+				<Tooltip documentationLink="https://www.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 or break if inside a for/while loop.
+				</Tooltip>
+			</svelte:fragment>
 
-		<Toggle
-			checked={isStopAfterIfEnabled}
-			on:change={() => {
-				if (isStopAfterIfEnabled && flowModule.stop_after_if) {
-					flowModule.stop_after_if = undefined
-				} else {
-					flowModule.stop_after_if = {
-						expr: 'result == undefined',
-						skip_if_stopped: false
+			<Toggle
+				checked={isStopAfterIfEnabled}
+				on:change={() => {
+					if (isStopAfterIfEnabled && flowModule.stop_after_if) {
+						flowModule.stop_after_if = undefined
+					} else {
+						flowModule.stop_after_if = {
+							expr: 'result == undefined',
+							skip_if_stopped: false
+						}
 					}
-				}
-			}}
-			options={{
-				right: 'Early stop or Break if condition met'
-			}}
-		/>
+				}}
+				options={{
+					right: isLoop
+						? 'Break loop'
+						: parentLoopId
+						? 'Break parent loop module'
+						: 'Stop flow' + ' if condition met'
+				}}
+			/>
+
+			<div
+				class="w-full border p-2 flex flex-col {flowModule.stop_after_if
+					? ''
+					: 'bg-surface-secondary'}"
+			>
+				{#if flowModule.stop_after_if}
+					{@const earlyStopResult = isLoop
+						? Array.isArray(result) && result.length > 0
+							? result[result.length - 1]
+							: result === NEVER_TESTED_THIS_FAR
+							? result
+							: undefined
+						: result}
+					{#if !parentLoopId && !isLoop}
+						<Toggle
+							size="xs"
+							bind:checked={flowModule.stop_after_if.skip_if_stopped}
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<div class="border w-full">
+						<PropPickerWrapper
+							notSelectable
+							flow_input={stepPropPicker.pickableProperties.flow_input}
+							pickableProperties={undefined}
+							result={earlyStopResult}
+							extraResults={isLoop ? { all_iters: result } : undefined}
+							on:select={({ detail }) => {
+								editor?.insertAtCursor(detail)
+								editor?.focus()
+							}}
+						>
+							<SimpleEditor
+								bind:this={editor}
+								lang="javascript"
+								bind:code={flowModule.stop_after_if.expr}
+								class="few-lines-editor"
+								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};` +
+									(isLoop ? `\ndeclare const all_iters = ${JSON.stringify(result)};` : '')}
+							/>
+						</PropPickerWrapper>
+					</div>
+				{:else}
+					{#if !parentLoopId && !isLoop}
+						<Toggle
+							disabled
+							size="xs"
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<textarea disabled rows="3" class="min-h-[80px]" />
+				{/if}
+			</div>
+		</Section>
+	{/if}
 
-		<div
-			class="w-full border p-2 flex flex-col {flowModule.stop_after_if
-				? ''
-				: 'bg-surface-secondary'}"
+	{#if isLoop || isBranchAll}
+		<Section
+			label={(parentLoopId ? 'Break parent loop module ' + parentLoopId : 'Stop flow early') +
+				(isBranchAll
+					? ' (evaluated after all branches have been run)'
+					: ' (evaluated after all iterations)')}
+			class="w-full"
 		>
-			{#if flowModule.stop_after_if}
-				<Toggle
-					size="xs"
-					bind:checked={flowModule.stop_after_if.skip_if_stopped}
-					options={{
-						right: 'Label flow as "skipped" if stopped'
-					}}
-				/>
-				<span class="mt-2 text-xs font-bold">Stop condition expression</span>
-				<div class="border w-full">
-					<PropPickerWrapper
-						notSelectable
-						flow_input={stepPropPicker.pickableProperties.flow_input}
-						pickableProperties={undefined}
-						{result}
-						on:select={({ detail }) => {
-							editor?.insertAtCursor(detail)
-							editor?.focus()
-						}}
-					>
-						<SimpleEditor
-							bind:this={editor}
-							lang="javascript"
-							bind:code={flowModule.stop_after_if.expr}
-							class="few-lines-editor"
-							extraLib={`declare const result = ${JSON.stringify(result)};`}
+			<svelte:fragment slot="header">
+				<Tooltip documentationLink="https://www.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 or break if inside a for/while loop.
+				</Tooltip>
+			</svelte:fragment>
+
+			<Toggle
+				checked={isStopAfterAllIterationsEnabled}
+				on:change={() => {
+					if (isStopAfterAllIterationsEnabled && flowModule.stop_after_all_iters_if) {
+						flowModule.stop_after_all_iters_if = undefined
+					} else {
+						flowModule.stop_after_all_iters_if = {
+							expr: 'result == undefined',
+							skip_if_stopped: false
+						}
+					}
+				}}
+				options={{
+					right: (parentLoopId ? 'Break parent loop module' : 'Stop flow') + ' if condition met'
+				}}
+			/>
+
+			<div
+				class="w-full border p-2 flex flex-col {flowModule.stop_after_all_iters_if
+					? ''
+					: 'bg-surface-secondary'}"
+			>
+				{#if flowModule.stop_after_all_iters_if}
+					{#if !parentLoopId}
+						<Toggle
+							size="xs"
+							bind:checked={flowModule.stop_after_all_iters_if.skip_if_stopped}
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<div class="border w-full">
+						<PropPickerWrapper
+							notSelectable
+							flow_input={stepPropPicker.pickableProperties.flow_input}
+							pickableProperties={undefined}
+							{result}
+							on:select={({ detail }) => {
+								editor?.insertAtCursor(detail)
+								editor?.focus()
+							}}
+						>
+							<SimpleEditor
+								bind:this={editor}
+								lang="javascript"
+								bind:code={flowModule.stop_after_all_iters_if.expr}
+								class="few-lines-editor"
+								extraLib={`declare const result = ${JSON.stringify(result)};`}
+							/>
+						</PropPickerWrapper>
+					</div>
+				{:else}
+					{#if !parentLoopId}
+						<Toggle
+							disabled
+							size="xs"
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
 						/>
-					</PropPickerWrapper>
-				</div>
-			{:else}
-				<Toggle
-					disabled
-					size="xs"
-					options={{
-						right: 'Label flow as "skipped" if stopped'
-					}}
-				/> <span class="mt-2 text-xs font-bold">Stop condition expression</span>
-				<textarea disabled rows="3" class="min-h-[80px]" />
-			{/if}
-		</div>
-	</Section>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<textarea disabled rows="3" class="min-h-[80px]" />
+				{/if}
+			</div>
+		</Section>
+	{/if}
 </div>