windmill-components 1.382.1 → 1.382.3

package/package/base.d.ts

@@ -1 +1 @@
-export declare const base: string;
+export declare let base: string;

package/package/base.js

@@ -1 +1 @@
-export const base = import.meta.env.VITE_BASE_URL ?? '';
+export let base = import.meta.env.VITE_BASE_URL ?? '';

package/package/components/EditorBar.svelte

@@ -43,6 +43,7 @@ export let diffEditor = undefined;
 export let args;
 export let noHistory = false;
 export let saveToWorkspace = false;
+export let customUi = {};
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
@@ -284,6 +285,7 @@ let historyBrowserDrawerOpen = false;
 		{/if}
 	</DrawerContent>
 </Drawer>
+
 <ItemPicker
 	bind:this={contextualVariablePicker}
 	pickCallback={(path, name) => {
@@ -484,7 +486,7 @@ $res = json_decode(curl_exec($ch));`)
 			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
 		/>
 		<div class="flex items-center gap-0.5">
-			{#if showContextVarPicker}
+			{#if showContextVarPicker && customUi?.contextVar != false}
 				<Button
 					title="Add context variable"
 					color="light"
@@ -497,7 +499,7 @@ $res = json_decode(curl_exec($ch));`)
 					>+Context Var
 				</Button>
 			{/if}
-			{#if showVarPicker}
+			{#if showVarPicker && customUi?.variable != false}
 				<Button
 					title="Add variable"
 					color="light"
@@ -527,7 +529,7 @@ $res = json_decode(curl_exec($ch));`)
 				</Button>
 			{/if}
 
-			{#if showResourceTypePicker}
+			{#if showResourceTypePicker && customUi?.type != false}
 				<Button
 					title="Add resource type"
 					btnClasses="!font-medium text-tertiary"
@@ -555,37 +557,41 @@ $res = json_decode(curl_exec($ch));`)
 				Reset
 			</Button>
 
-			{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash'}
-				<Button
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
-					on:click={() => editor?.reloadWebsocket()}
-					startIcon={{
-						icon: RotateCw,
-						classes: websocketAlive[lang] == false ? 'animate-spin' : ''
-					}}
-					title="Reload assistants"
-				>
-					{#if !iconOnly}
-						Assistants
-					{/if}
-					<span class="-my-1">
-						{#if lang == 'deno'}
-							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
-						{:else if lang == 'go'}
-							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
-						{:else if lang == 'python3'}
-							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-							<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
-						{:else if lang == 'bash'}
-							(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span>)
+			{#if customUi?.assistants != false}
+				{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash'}
+					<Button
+						btnClasses="!font-medium text-tertiary"
+						size="xs"
+						spacingSize="md"
+						color="light"
+						on:click={() => editor?.reloadWebsocket()}
+						startIcon={{
+							icon: RotateCw,
+							classes: websocketAlive[lang] == false ? 'animate-spin' : ''
+						}}
+						title="Reload assistants"
+					>
+						{#if !iconOnly}
+							Assistants
 						{/if}
-					</span>
-				</Button>
+						<span class="-my-1">
+							{#if lang == 'deno'}
+								(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+							{:else if lang == 'go'}
+								(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+							{:else if lang == 'python3'}
+								(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+								<span class={websocketAlive.ruff ? 'green' : 'text-red-700'}>Ruff</span>)
+							{:else if lang == 'bash'}
+								(<span class={websocketAlive.shellcheck ? 'green' : 'text-red-700'}>Shellcheck</span
+								>)
+							{/if}
+						</span>
+					</Button>
+				{/if}
 			{/if}
-			{#if collabMode}
+
+			{#if collabMode && customUi?.multiplayer != false}
 				<div class="flex items-center px-3">
 					<Toggle
 						options={{ right: '' }}
@@ -619,11 +625,15 @@ $res = json_decode(curl_exec($ch));`)
 				</div>
 			{/if}
 
-			<FormatOnSave />
-
-			<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
-
-			<CodeCompletionStatus />
+			{#if customUi?.autoformatting != false}
+				<FormatOnSave />
+			{/if}
+			{#if customUi?.aiGen != false}
+				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+			{/if}
+			{#if customUi?.aiFix != false}
+				<CodeCompletionStatus />
+			{/if}
 		</div>
 	</div>
 
@@ -642,7 +652,7 @@ $res = json_decode(curl_exec($ch));`)
 				History
 			</Button>
 		{/if}
-		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS && customUi?.library != false}
 			<Button
 				btnClasses="!font-medium text-tertiary"
 				size="xs"

package/package/components/EditorBar.svelte.d.ts

@@ -3,6 +3,7 @@ export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 import type Editor from './Editor.svelte';
 import type { SupportedLanguage } from '../common';
 import type DiffEditor from './DiffEditor.svelte';
+import type { EditorBarUi } from './custom_ui';
 declare const __propDef: {
     props: {
         lang: SupportedLanguage | 'bunnative' | undefined;
@@ -28,6 +29,7 @@ declare const __propDef: {
         args: Record<string, any>;
         noHistory?: boolean | undefined;
         saveToWorkspace?: boolean | undefined;
+        customUi?: EditorBarUi | undefined;
     };
     events: {
         toggleCollabMode: CustomEvent<any>;

package/package/components/FlowBuilder.svelte

@@ -330,7 +330,8 @@ setContext('FlowEditorContext', {
     testStepStore,
     saveDraft,
     initialPath,
-    flowInputsStore: writable({})
+    flowInputsStore: writable({}),
+    customUi
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -403,17 +404,19 @@ function generateIds() {
     ];
 }
 const dropdownItems = [];
-if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
-    dropdownItems.push({
-        label: 'Exit & see details',
-        onClick: () => dispatch('details', $pathStore)
-    });
-}
-if (!newFlow) {
-    dropdownItems.push({
-        label: 'Fork',
-        onClick: () => window.open(`/flows/add?template=${initialPath}`)
-    });
+if (customUi.topBar?.extraDeployOptions != false) {
+    if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
+        dropdownItems.push({
+            label: 'Exit & see details',
+            onClick: () => dispatch('details', $pathStore)
+        });
+    }
+    if (!newFlow) {
+        dropdownItems.push({
+            label: 'Fork',
+            onClick: () => window.open(`/flows/add?template=${initialPath}`)
+        });
+    }
 }
 let flowCopilotContext = {
     drawerStore: writable(undefined),

package/package/components/FlowBuilder.svelte.d.ts

@@ -3,7 +3,7 @@ import { type Flow, type OpenFlow } from '../gen';
 import { type Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import type DiffDrawer from './DiffDrawer.svelte';
-import type { WhitelabelCustomUi } from './custom_ui';
+import type { FlowBuilderWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
@@ -18,7 +18,7 @@ declare const __propDef: {
             draft?: Flow | undefined;
         }) | undefined;
         diffDrawer?: DiffDrawer | undefined;
-        customUi?: WhitelabelCustomUi | undefined;
+        customUi?: FlowBuilderWhitelabelCustomUi | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;

package/package/components/FlowStatusViewer.svelte

@@ -8,6 +8,9 @@ export let workspaceId = undefined;
 export let flowStateStore = writable({});
 export let selectedJobStep = undefined;
 export let hideFlowResult = false;
+export let hideTimeline = false;
+export let hideDownloadInGraph = false;
+export let hideNodeDefinition = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -16,7 +19,10 @@ let suspendStatus = writable({});
 setContext('FlowStatusViewer', {
     flowStateStore,
     suspendStatus,
-    retryStatus
+    retryStatus,
+    hideDownloadInGraph,
+    hideNodeDefinition,
+    hideTimeline
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -8,6 +8,9 @@ declare const __propDef: {
         flowStateStore?: Writable<FlowState> | undefined;
         selectedJobStep?: string | undefined;
         hideFlowResult?: boolean | undefined;
+        hideTimeline?: boolean | undefined;
+        hideDownloadInGraph?: boolean | undefined;
+        hideNodeDefinition?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -22,7 +22,7 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 const dispatch = createEventDispatcher();
-let { flowStateStore, retryStatus, suspendStatus } = getContext('FlowStatusViewer');
+let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition } = getContext('FlowStatusViewer');
 export let jobId;
 export let workspaceId = undefined;
 export let flowJobIds = undefined;
@@ -654,7 +654,7 @@ let wrapperHeight = 0;
 						{/if}
 					{/each}
 				</div>
-			{:else if innerModules.length > 0}
+			{:else if innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step
@@ -774,6 +774,8 @@ let wrapperHeight = 0;
 						</li>
 					{/each}
 				</ul>
+			{:else}
+				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
 	</div>
@@ -800,7 +802,7 @@ let wrapperHeight = 0;
 						</div>
 
 						<FlowGraphV2
-							download
+							download={!hideDownloadInGraph}
 							minHeight={wrapperHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
@@ -840,9 +842,14 @@ let wrapperHeight = 0;
 						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
-							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							{#if !hideTimeline}
+								<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							{/if}
 							<Tab value="node_status"><span class="font-semibold">Node status</span></Tab>
-							<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab>
+							{#if !hideNodeDefinition}
+								<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab
+								>
+							{/if}
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
 								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
 							{/if}

package/package/components/FlowViewer.svelte

@@ -21,6 +21,7 @@ $: flowFiltered = {
 export let noGraph = false;
 export let tab = noGraph ? 'schema' : 'ui';
 export let noSummary = false;
+export let noGraphDownload = false;
 let rawType = 'yaml';
 let open = {};
 if (initialOpen) {
@@ -73,7 +74,7 @@ function toAny(x) {
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
 
-				<FlowGraphViewer download {noSide} {flow} overflowAuto />
+				<FlowGraphViewer download={!noGraphDownload} {noSide} {flow} overflowAuto />
 			</div>
 		</TabContent>
 		<TabContent value="raw"

package/package/components/FlowViewer.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         noGraph?: boolean | undefined;
         tab?: "schema" | "ui" | "raw" | undefined;
         noSummary?: boolean | undefined;
+        noGraphDownload?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ScriptBuilder.svelte

@@ -43,6 +43,7 @@ export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
 export let disableHistoryChange = false;
 export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
+export let customUi = {};
 let metadataOpen = showMeta ||
     (initialPath == '' &&
         searchParams.get('state') == undefined &&
@@ -344,7 +345,7 @@ async function saveDraft(forceSave = false) {
     loadingDraft = false;
 }
 function computeDropdownItems(initialPath) {
-    let dropdownItems = initialPath != ''
+    let dropdownItems = initialPath != '' && customUi?.topBar?.extraDeployOptions != false
         ? [
             {
                 label: 'Deploy & Stay here',
@@ -965,32 +966,34 @@ function langToLanguage(lang) {
 							{$scheduleStore.cron ?? ''}
 						</Button>
 					{/if}
-					<div class="flex justify-start w-full border rounded-md overflow-hidden">
-						<div>
-							<button
-								on:click={async () => {
-									metadataOpen = true
-								}}
-							>
-								<Badge
-									color="gray"
-									class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+					{#if customUi?.topBar?.path != false}
+						<div class="flex justify-start w-full border rounded-md overflow-hidden">
+							<div>
+								<button
+									on:click={async () => {
+										metadataOpen = true
+									}}
 								>
-									<Pen size={12} class="mr-2" /> Path
-								</Badge>
-							</button>
+									<Badge
+										color="gray"
+										class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+									>
+										<Pen size={12} class="mr-2" /> Path
+									</Badge>
+								</button>
+							</div>
+							<input
+								type="text"
+								readonly
+								value={script.path}
+								size={script.path?.length || 50}
+								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
 						</div>
-						<input
-							type="text"
-							readonly
-							value={script.path}
-							size={script.path?.length || 50}
-							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
-							on:focus={({ currentTarget }) => {
-								currentTarget.select()
-							}}
-						/>
-					</div>
+					{/if}
 				</div>
 
 				{#if $enterpriseLicense && initialPath != ''}
@@ -1021,17 +1024,19 @@ function langToLanguage(lang) {
 							<span class="hidden lg:flex"> Diff </span>
 						</div>
 					</Button>
-					<Button
-						color="light"
-						variant="border"
-						size="xs"
-						on:click={() => {
-							metadataOpen = true
-						}}
-						startIcon={{ icon: Settings }}
-					>
-						<span class="hidden lg:flex"> Settings </span>
-					</Button>
+					{#if customUi?.topBar?.settings != false}
+						<Button
+							color="light"
+							variant="border"
+							size="xs"
+							on:click={() => {
+								metadataOpen = true
+							}}
+							startIcon={{ icon: Settings }}
+						>
+							<span class="hidden lg:flex"> Settings </span>
+						</Button>
+					{/if}
 					<Button
 						loading={loadingDraft}
 						size="xs"
@@ -1085,6 +1090,7 @@ function langToLanguage(lang) {
 		</div>
 
 		<ScriptEditor
+			{customUi}
 			collabMode
 			edit={initialPath != ''}
 			on:format={() => {

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;
@@ -15,6 +16,7 @@ declare const __propDef: {
         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/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>

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -51,7 +51,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 				<svelte:fragment slot="text">Cache</svelte:fragment>
 			</Popover>
 		{/if}
-		{#if module.stop_after_if}
+		{#if module.stop_after_if || module.stop_after_all_iters_if}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"

package/package/components/flows/content/FlowSettings.svelte

@@ -23,7 +23,7 @@ import ErrorHandlerToggleButton from '../../details/ErrorHandlerToggleButton.sve
 import WorkerTagPicker from '../../WorkerTagPicker.svelte';
 import MetadataGen from '../../copilot/MetadataGen.svelte';
 export let noEditor;
-const { selectedId, flowStore, initialPath, previewArgs, pathStore, schedule } = getContext('FlowEditorContext');
+const { selectedId, flowStore, initialPath, previewArgs, pathStore, schedule, customUi } = getContext('FlowEditorContext');
 let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
 $: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$pathStore}`;
 $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$pathStore}`;
@@ -42,22 +42,33 @@ let dirtyPath = false;
 		<div class="h-full flex-1">
 			<Tabs bind:selected={$selectedId}>
 				<Tab value="settings-metadata">Metadata</Tab>
-				{#if !noEditor}
+				{#if !noEditor && customUi?.settingsTabs?.schedule != false}
 					<Tab value="settings-schedule" active={$schedule.enabled}>Schedule</Tab>
 				{/if}
-				<Tab value="settings-same-worker" active={$flowStore.value.same_worker}>
-					Shared Directory
-				</Tab>
-				<Tab value="settings-early-stop" active={Boolean($flowStore.value.skip_expr)}>
-					Early Stop
-				</Tab>
-				<Tab value="settings-early-return" active={Boolean($flowStore.value.early_return)}>
-					Early Return
-				</Tab>
-				<Tab value="settings-worker-group">Worker Group</Tab>
-				<Tab value="settings-concurrency">Concurrency</Tab>
-				<Tab value="settings-cache" active={Boolean($flowStore.value.cache_ttl)}>Cache</Tab>
-
+				{#if customUi?.settingsTabs?.sharedDiretory != false}
+					<Tab value="settings-same-worker" active={$flowStore.value.same_worker}>
+						Shared Directory
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.earlyStop != false}
+					<Tab value="settings-early-stop" active={Boolean($flowStore.value.skip_expr)}>
+						Early Stop
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.earlyReturn != false}
+					<Tab value="settings-early-return" active={Boolean($flowStore.value.early_return)}>
+						Early Return
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.workerGroup != false}
+					<Tab value="settings-worker-group">Worker Group</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.concurrency != false}
+					<Tab value="settings-concurrency">Concurrency</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.cache != false}
+					<Tab value="settings-cache" active={Boolean($flowStore.value.cache_ttl)}>Cache</Tab>
+				{/if}
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">
 						<Section label="Metadata">

package/package/components/flows/flowExplorer.js

@@ -72,6 +72,9 @@ function getModuleExprs(x) {
         if (x.stop_after_if?.expr) {
             exprs.push(x.stop_after_if.expr);
         }
+        if (x.stop_after_all_iters_if?.expr) {
+            exprs.push(x.stop_after_all_iters_if.expr);
+        }
         exprs.push(...getExpr(x.sleep));
     }
     return exprs;

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

@@ -23,7 +23,7 @@ const dispatch = createEventDispatcher();
 $: itemProps = {
     selected: $selectedId === mod.id,
     retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
-    earlyStop: mod.stop_after_if != undefined,
+    earlyStop: mod.stop_after_if != undefined || mod.stop_after_all_iters_if != undefined,
     suspend: Boolean(mod.suspend),
     sleep: Boolean(mod.sleep),
     cache: Boolean(mod.cache_ttl),

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -10,6 +10,7 @@ import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 export let pickableProperties;
 export let result = undefined;
+export let extraResults = undefined;
 export let flow_input = undefined;
 export let error = false;
 export let displayContext = true;
@@ -53,6 +54,7 @@ setContext('PropPickerWrapper', {
 			{#if result}
 				<PropPickerResult
 					{result}
+					{extraResults}
 					{flow_input}
 					on:select={({ detail }) => {
 						if (!notSelectable && !$propPickerConfig) {

package/package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
     props: {
         pickableProperties: PickableProperties | undefined;
         result?: any;
+        extraResults?: any;
         flow_input?: any;
         error?: boolean | undefined;
         displayContext?: boolean | undefined;

package/package/components/flows/types.d.ts

@@ -5,6 +5,7 @@ import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { Schedule } from './scheduleUtils';
+import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
         message: string;
@@ -33,4 +34,5 @@ export type FlowEditorContext = {
     saveDraft: () => void;
     initialPath: string;
     flowInputsStore: Writable<FlowInput>;
+    customUi: FlowBuilderWhitelabelCustomUi;
 };

package/package/components/graph/model.d.ts

@@ -34,6 +34,9 @@ export type FlowStatusViewerContext = {
         nb: number;
         job: Job;
     }>>;
+    hideDownloadInGraph?: boolean;
+    hideTimeline?: boolean;
+    hideNodeDefinition?: boolean;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];

package/package/components/propertyPicker/PropPickerResult.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher } from 'svelte';
 import ObjectViewer from './ObjectViewer.svelte';
 export let result;
+export let extraResults = undefined;
 export let flow_input = undefined;
 const dispatch = createEventDispatcher();
 </script>
@@ -8,7 +9,11 @@ const dispatch = createEventDispatcher();
 <div class="w-full px-2">
 	<span class="font-bold text-sm">Result</span>
 	<div class="overflow-y-auto mb-2 w-full">
-		<ObjectViewer allowCopy={false} json={{ result }} on:select />
+		<ObjectViewer
+			allowCopy={false}
+			json={{ result, ...(extraResults ? extraResults : {}) }}
+			on:select
+		/>
 	</div>
 	{#if flow_input}
 		<span class="font-bold text-sm">Flow Input</span>

package/package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         result: any;
+        extraResults?: any;
         flow_input?: any;
     };
     events: {

package/package/components/sidebar/changelogs.js

@@ -1,4 +1,9 @@
 const changelogs = [
+    {
+        label: 'Continue on disapproval/timeout',
+        href: 'https://www.windmill.dev/changelog/continue-on-disapproval',
+        date: '2024-08-14'
+    },
     {
         label: 'Nativets runtime supports npm packages and relative imports',
         href: 'https://www.windmill.dev/changelog/native-runtime-imports',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.382.1",
+	"version": "1.382.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",