windmill-components 1.558.3 → 1.596.0

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -7,23 +7,22 @@ let cachedIntegrations = [];
 import { sendUserToast } from '../../../toast';
 import FlowScriptPickerQuick from '../pickers/FlowScriptPickerQuick.svelte';
 import { defaultScriptLanguages, processLangs } from '../../../scripts';
-import { defaultScripts, enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { defaultScripts, enterpriseLicense, hubBaseUrlStore, userStore, workspaceStore } from '../../../stores';
 import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
 import {} from '../../../gen';
 import ListFiltersQuick from '../../home/ListFiltersQuick.svelte';
-import { Folder, User } from 'lucide-svelte';
-import { twMerge } from 'tailwind-merge';
+import { ExternalLink, Folder, User, X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
 import { flip } from 'svelte/animate';
-import Scrollable from '../../Scrollable.svelte';
 import { Button } from '../../common';
 import { SettingsIcon } from 'lucide-svelte';
 import DefaultScriptsInner from '../../DefaultScriptsInner.svelte';
 import GenAiQuick from './GenAiQuick.svelte';
 import FlowToplevelNode from '../pickers/FlowToplevelNode.svelte';
 import { copilotInfo } from '../../../aiStore';
+import { canHavePreprocessor, canHaveTrigger, canHaveApproval, canHaveFailure } from '../../../script_helpers';
 const dispatch = createEventDispatcher();
-let { summary = undefined, filter = $bindable(''), disableAi = false, preFilter = 'hub', funcDesc, owners = $bindable([]), loading = $bindable(false), small = false, kind, selectedKind = kind, displayPath = false, refreshCount = 0 } = $props();
+let { summary = undefined, filter = $bindable(''), disableAi = false, preFilter = 'hub', funcDesc, owners = $bindable([]), loading = $bindable(false), kind, selectedKind = kind, displayPath = false, refreshCount = 0 } = $props();
 if ($workspaceStore && cachedOwners?.[$workspaceStore]) {
     owners = cachedOwners[$workspaceStore];
 }
@@ -36,22 +35,22 @@ let integrations = $state(cachedIntegrations);
 let customUi = getContext('customUi');
 function displayLang(lang, kind) {
     if (kind == 'trigger') {
-        return ['python3', 'bun', 'deno', 'go'].includes(lang);
+        return canHaveTrigger(lang);
     }
     else if (kind == 'script') {
         return true;
     }
     else if (kind == 'approval') {
-        return ['python3', 'bun', 'deno'].includes(lang);
+        return canHaveApproval(lang);
     }
     else if (kind == 'flow') {
         return false;
     }
     else if (kind == 'preprocessor') {
-        return ['python3', 'bun', 'deno'].includes(lang);
+        return canHavePreprocessor(lang);
     }
     else if (kind == 'failure') {
-        return ['python3', 'bun', 'deno', 'go'].includes(lang);
+        return canHaveFailure(lang);
     }
 }
 async function onGenerate() {
@@ -126,12 +125,12 @@ function onKeyDown(e) {
         hubCompletions.length;
     if (e.key === 'ArrowDown') {
         selectedByKeyboard = (selectedByKeyboard + 1) % length;
-        scrollable?.scrollIntoView(selectedByKeyboard * 32);
+        scrollable?.scrollTo({ top: selectedByKeyboard * 32, behavior: 'smooth' });
         e.preventDefault();
     }
     else if (e.key === 'ArrowUp') {
         selectedByKeyboard = (selectedByKeyboard - 1 + length) % length;
-        scrollable?.scrollIntoView(selectedByKeyboard * 32);
+        scrollable?.scrollTo({ top: selectedByKeyboard * 32, behavior: 'smooth' });
         e.preventDefault();
     }
 }
@@ -166,13 +165,13 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
-<div class="flex flex-row grow min-w-0 divide-x relative {!small ? 'shadow-inset' : ''}">
+<div class="flex flex-row grow min-w-0 divide-x relative bg-surface-tertiary rounded-md">
 	{#if selectedKind != 'preprocessor'}
-		<Scrollable shiftedShadow scrollableClass="w-32 grow-0 shrink-0 ">
+		<div class="h-full overflow-auto p-2 w-36 shrink-0 gap-1 flex flex-col">
 			{#if ['script', 'trigger', 'approval', 'preprocessor', 'failure'].includes(selectedKind)}
 				{#if (preFilter === 'all' && owners.length > 0) || preFilter === 'workspace'}
 					{#if preFilter !== 'workspace'}
-						<div class="pb-0 text-2xs font-light text-secondary ml-2">Folders</div>
+						<div class="pb-0 text-2xs font-normal text-secondary ml-2">Folders</div>
 					{/if}
 
 					{#if owners.length > 0}
@@ -182,27 +181,26 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 								animate:flip={{ duration: 100 }}
 								class="w-full px-0.5"
 							>
-								<button
-									class={twMerge(
-										'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
-										owner === selected?.name ? 'bg-surface-hover' : ''
-									)}
-									onclick={() => {
+								<Button
+									selected={owner === selected?.name}
+									onClick={() => {
 										selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
 									}}
+									variant="subtle"
+									unifiedSize="sm"
+									btnClasses="justify-start"
+									startIcon={{
+										icon: owner.startsWith('f/') ? Folder : User,
+										props: { width: 14, height: 14 }
+									}}
 								>
-									{#if owner.startsWith('f/')}
-										<Folder class="mr-0.5" size={14} />
-									{:else}
-										<User class="mr-0.5" size={14} />
-									{/if}
 									{owner.slice(2)}
-								</button>
+								</Button>
 							</div>
 						{/each}
-						<div class="pb-1.5"></div>
+						<div class="pb-1"></div>
 					{:else}
-						<div class="text-2xs text-tertiary font-light text-center py-3 px-3 items-center">
+						<div class="text-2xs text-primary font-normal text-center py-3 px-3 items-center">
 							No items found.
 						</div>
 					{/if}
@@ -210,7 +208,7 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 
 				{#if preFilter === 'hub' || preFilter === 'all'}
 					{#if preFilter == 'all'}
-						<div class="pb-0 text-2xs font-light text-secondary ml-2 pt-0.5">Integrations</div>
+						<div class="pb-0 text-2xs font-normal text-secondary ml-2 pt-1">Integrations</div>
 					{/if}
 					<ListFiltersQuick
 						on:selected={() => {
@@ -221,34 +219,46 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 						bind:selectedFilter={selected}
 						resourceType
 					/>
+					{#if !selected}
+						<div class="pl-2 py-1">
+							<a
+								href={`${$hubBaseUrlStore}?suggest_integration=true`}
+								target="_blank"
+								class="text-2xs flex flex-row items-center gap-1"
+								>Suggest integration <ExternalLink class="size-3" />
+							</a>
+						</div>
+					{/if}
 				{/if}
 			{:else if selectedKind === 'flow'}
 				{#if owners.length > 0}
 					{#each owners as owner (owner)}
 						<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
-							<button
-								class={twMerge(
-									'w-full text-left text-2xs text-primary font-normal py-2 px-3 hover:bg-surface-hover transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
-									owner === selected?.name ? 'bg-surface-hover' : ''
-								)}
-								onclick={() => {
+							<Button
+								selected={owner === selected?.name}
+								variant="subtle"
+								unifiedSize="sm"
+								btnClasses="justify-start"
+								startIcon={{
+									icon: owner.startsWith('f/') ? Folder : User
+								}}
+								onClick={() => {
 									selected = selected?.name == owner ? undefined : { kind: 'owner', name: owner }
 								}}
 							>
-								{#if owner.startsWith('f/')}
-									<Folder class="mr-0.5" size={14} />
-								{:else}
-									<User class="mr-0.5" size={14} />
-								{/if}
 								{owner.slice(2)}
-							</button>
+							</Button>
 						</div>
 					{/each}
 				{/if}
 			{/if}
-		</Scrollable>
+		</div>
 	{/if}
-	<Scrollable id="flow-editor-flow-atoms" bind:this={scrollable} scrollableClass="grow min-w-0">
+	<div
+		bind:this={scrollable}
+		id="flow-editor-flow-atoms"
+		class="h-full overflow-auto grow min-w-0 p-2 gap-1 flex flex-col"
+	>
 		{#if kind == 'script'}
 			{#each topLevelNodes as [label, kind], i (label)}
 				<FlowToplevelNode
@@ -262,28 +272,27 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 		{/if}
 
 		{#if inlineScripts?.length > 0}
-			<div class="pb-0 flex flex-row items-center gap-2 -mt-[3px]">
-				<div class=" text-2xs font-light text-secondary ml-2"
+			<div class="pb-0 flex flex-row items-center gap-2">
+				<div class="text-2xs font-normal text-secondary ml-2"
 					>New {selectedKind != 'script' ? selectedKind + ' ' : ''}script</div
 				>
 				{#if $userStore?.is_admin || $userStore?.is_super_admin}
 					{#if !openScriptSettings}
 						<Button
-							on:click={() => (openScriptSettings = true)}
+							onClick={() => (openScriptSettings = true)}
 							startIcon={{ icon: SettingsIcon }}
-							color="light"
-							size="xs2"
-							btnClasses="!text-tertiary"
-							variant="contained"
+							unifiedSize="sm"
+							variant="subtle"
 							title="Edit global default scripts"
+							btnClasses="-my-3"
 						/>
 					{:else}
 						<Button
-							on:click={() => (openScriptSettings = false)}
-							startIcon={{ icon: SettingsIcon }}
-							color="dark"
-							size="xs2"
-							variant="contained"
+							onClick={() => (openScriptSettings = false)}
+							startIcon={{ icon: X }}
+							variant="accent"
+							unifiedSize="sm"
+							btnClasses="-my-3"
 						>
 							Close
 						</Button>
@@ -369,7 +378,7 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 
 		{#if (!selected || selected?.kind === 'owner') && (preFilter === 'workspace' || preFilter === 'all')}
 			{#if !selected && (preFilter !== 'workspace' || funcDesc?.length > 0)}
-				<div class="pt-2 pb-0 text-2xs font-light text-secondary ml-2">Workspace</div>
+				<div class="pt-2 pb-0 text-2xs font-normal text-secondary ml-2">Workspace</div>
 			{/if}
 			{#await import('../pickers/WorkspaceScriptPickerQuick.svelte') then Module}
 				<Module.default
@@ -391,11 +400,12 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 					{refreshCount}
 				/>
 			{/await}
+			<div class="pb-1"></div>
 		{/if}
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			{#if (!selected || selected?.kind === 'integrations') && (preFilter === 'hub' || preFilter === 'all')}
 				{#if !selected && preFilter !== 'hub'}
-					<div class=" pb-0 text-2xs font-light text-secondary ml-2">Hub</div>
+					<div class=" pb-0 text-2xs font-normal text-secondary ml-2">Hub</div>
 				{/if}
 				{#await import('../pickers/PickHubScriptQuick.svelte') then Module}
 					<Module.default
@@ -423,17 +433,5 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 				{/await}
 			{/if}
 		{/if}
-	</Scrollable>
+	</div>
 </div>
-
-<style>
-	.shadow-inset::before {
-		box-shadow: inset 25px 0px 12px -30px rgba(94, 129, 172, 0.5);
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		content: '';
-		pointer-events: none;
-	}</style>

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

@@ -6,7 +6,6 @@ interface Props {
     funcDesc: string;
     owners?: string[];
     loading?: boolean;
-    small?: boolean;
     kind: 'trigger' | 'script' | 'preprocessor' | 'failure' | 'approval';
     selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure';
     displayPath?: boolean;

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

@@ -25,6 +25,7 @@ import { emptySchema } from '../../../utils';
 import { slide } from 'svelte/transition';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import Badge from '../../common/badge/Badge.svelte';
 const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
 let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
 let editor = $state(undefined);
@@ -76,6 +77,7 @@ function setExpr(code) {
 $effect(() => {
     editor && currentEditor.set({ type: 'iterator', editor, stepId: mod.id });
 });
+let suggestion = $state(undefined);
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
@@ -108,7 +110,7 @@ $effect(() => {
 					<Button
 						on:click={() => (previewOpen = true)}
 						startIcon={{ icon: Play }}
-						color="dark"
+						variant="accent"
 						size="sm">Test an iteration</Button
 					>
 				</div>
@@ -137,14 +139,47 @@ $effect(() => {
 							class="whitespace-nowrap"
 						/>
 					</div>
+					<div class="flex-shrink-0">
+						<div class="mb-2 text-sm font-bold"
+							>Squash
+
+							<Badge
+								>Beta <Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
+									<span class="font-semibold"
+										>This can result in unexpected behavior, use at your own risk for now.</span
+									><br />
+									Squashing a for loop runs all iterations on the same worker, using a single runner
+									per step for the entire loop. This eliminates cold starts between iterations for supported
+									languages (Bun, Deno, and Python).
+								</Tooltip>
+							</Badge>
+						</div>
+						<Toggle
+							bind:checked={mod.value.squash}
+							on:change={({ detail }) => {
+								;(mod.value as ForloopFlow).squash = detail
+							}}
+							options={{
+								right: 'Squash'
+							}}
+							class="whitespace-nowrap"
+							disabled={mod.value.parallel}
+						/>
+					</div>
 					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold">Run in parallel</div>
 						<Toggle
 							bind:checked={mod.value.parallel}
+							on:change={({ detail }) => {
+								if (detail === false) {
+									;(mod.value as ForloopFlow).parallelism = undefined
+								}
+							}}
 							options={{
 								right: 'All iterations run in parallel'
 							}}
 							class="whitespace-nowrap"
+							disabled={mod.value.squash}
 						/>
 					</div>
 					<div class="flex-shrink-0">
@@ -201,11 +236,10 @@ $effect(() => {
 								class="h-6"
 							>
 								{#snippet children({ item })}
-									<ToggleButton light small label="static" value="static" {item} />
+									<ToggleButton small label="static" value="static" {item} />
 
 									<ToggleButton
 										small
-										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
 										value="javascript"
 										icon={FunctionSquare}
@@ -229,12 +263,13 @@ $effect(() => {
 					</div>
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="border w-full mb-2 h-full max-h-[250px]"
+						class="border rounded-md overflow-auto w-full mb-2 h-full max-h-[250px]"
 						id="flow-editor-parallel-expression"
 						transition:slide={{ duration: 300 }}
 					>
 						<PropPickerWrapper
 							notSelectable
+							noPadding
 							flow_input={stepPropPicker.pickableProperties.flow_input}
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
@@ -261,7 +296,7 @@ $effect(() => {
 										}
 									}
 								}
-								class="small-editor"
+								class="h-full"
 								shouldBindKey={false}
 								extraLib={stepPropPicker.extraLib}
 							/>
@@ -302,9 +337,7 @@ $effect(() => {
 							bind:this={iteratorGen}
 							focused={iteratorFieldFocused}
 							arg={mod.value.iterator}
-							on:showExpr={(e) => {
-								editor?.setSuggestion(e.detail)
-							}}
+							on:showExpr={(e) => (suggestion = e.detail || undefined)}
 							on:setExpr={(e) => {
 								setExpr(e.detail)
 							}}
@@ -316,12 +349,11 @@ $effect(() => {
 				{#if mod.value.iterator.type == 'javascript'}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="border w-full"
+						class="border rounded-md overflow-auto w-full"
 						id="flow-editor-iterator-expression"
 						onkeyup={iteratorGen?.onKeyUp}
 					>
 						<PropPickerWrapper
-							alwaysOn
 							notSelectable
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
@@ -335,21 +367,25 @@ $effect(() => {
 							}}
 							noPadding
 						>
-							<SimpleEditor
-								bind:this={editor}
-								on:focus={() => {
-									iteratorFieldFocused = true
-								}}
-								on:blur={() => {
-									iteratorFieldFocused = false
-								}}
-								autofocus
-								lang="javascript"
-								bind:code={mod.value.iterator.expr}
-								class="small-editor"
-								shouldBindKey={false}
-								extraLib={stepPropPicker.extraLib}
-							/>
+							<div class="relative w-full h-full overflow-clip">
+								<SimpleEditor
+									small
+									bind:this={editor}
+									on:focus={() => {
+										iteratorFieldFocused = true
+									}}
+									on:blur={() => {
+										iteratorFieldFocused = false
+									}}
+									autofocus
+									lang="javascript"
+									bind:code={mod.value.iterator.expr}
+									class="h-full"
+									shouldBindKey={false}
+									extraLib={stepPropPicker.extraLib}
+									{suggestion}
+								/>
+							</div>
 						</PropPickerWrapper>
 					</div>
 				{:else}
@@ -364,12 +400,12 @@ $effect(() => {
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
 			<TabsV2 bind:selected>
 				<!-- <Tab value="retries">Retries</Tab> -->
-				<Tab value="early-stop">Early Stop/Break</Tab>
-				<Tab value="skip">Skip</Tab>
-				<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-				<Tab value="sleep">Sleep</Tab>
-				<Tab value="mock">Mock</Tab>
-				<Tab value="lifetime">Lifetime</Tab>
+				<Tab value="early-stop" label="Early Stop/Break" />
+				<Tab value="skip" label="Skip" />
+				<Tab value="suspend" label="Suspend/Approval/Prompt" />
+				<Tab value="sleep" label="Sleep" />
+				<Tab value="mock" label="Mock" />
+				<Tab value="lifetime" label="Lifetime" />
 
 				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">

package/package/components/flows/content/FlowModuleCache.svelte

@@ -17,10 +17,10 @@ let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 	{/snippet}
 
 	{#if flowModule.value.type != 'rawscript'}
-		<p
-			>The cache settings need to be set in the referenced script/flow settings directly. Cache for
-			hub scripts is not available yet.</p
-		>
+		<p class="text-xs text-secondary">
+			The cache settings need to be set in the referenced script/flow settings directly. Cache for
+			hub scripts is not available yet.
+		</p>
 	{:else}
 		<Toggle
 			checked={isCacheEnabled}
@@ -35,12 +35,24 @@ let isCacheEnabled = $derived(Boolean(flowModule.cache_ttl));
 				right: 'Cache the results for each possible inputs'
 			}}
 		/>
-		<Label label="How long to keep cache valid">
-			{#if flowModule.cache_ttl}
-				<SecondsInput bind:seconds={flowModule.cache_ttl} />
-			{:else}
-				<SecondsInput disabled />
-			{/if}
-		</Label>
+		{#if flowModule.cache_ttl}
+			<Label label="How long to keep cache valid">
+				<div class="-mt-5">
+					<SecondsInput bind:seconds={flowModule.cache_ttl} />
+				</div>
+			</Label>
+			<Toggle
+				size="2xs"
+				bind:checked={
+					() => flowModule.cache_ignore_s3_path,
+					(v) => (flowModule.cache_ignore_s3_path = v || undefined)
+				}
+				options={{
+					right: 'Ignore S3 Object paths for caching purposes',
+					rightTooltip:
+						'If two S3 objects passed as input have the same content, they will hit the same cache entry, regardless of their path.'
+				}}
+			/>
+		{/if}
 	{/if}
 </Section>