windmill-components 1.558.3 → 1.596.0

package/package/components/flows/content/FlowModuleScript.svelte

@@ -86,10 +86,10 @@ $effect.pre(() => {
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
+		<span class="text-xs text-primary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
 	{#if tag}
-		<div class="text-xs text-tertiary mb-4">tag: {tag}</div>
+		<div class="text-xs text-primary mb-4">tag: {tag}</div>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>

package/package/components/flows/content/FlowModuleSkip.svelte

@@ -38,14 +38,15 @@ let isSkipEnabled = $derived(Boolean(flowModule.skip_if));
 		/>
 
 		<div
-			class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if
+			class="w-full border rounded-md p-2 mt-2 flex flex-col gap-1 {flowModule.skip_if
 				? ''
 				: 'bg-surface-secondary'}"
 		>
 			{#if flowModule.skip_if}
 				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
-				<div class="border w-full">
+				<div class="border rounded-md w-full overflow-auto">
 					<PropPickerWrapper
+						noPadding
 						notSelectable
 						pickableProperties={stepPropPicker.pickableProperties}
 						on:select={({ detail }) => {
@@ -57,7 +58,7 @@ let isSkipEnabled = $derived(Boolean(flowModule.skip_if));
 							bind:this={editor}
 							lang="javascript"
 							bind:code={flowModule.skip_if.expr}
-							class="few-lines-editor"
+							class="h-full"
 							extraLib={stepPropPicker.extraLib}
 						/>
 					</PropPickerWrapper>

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -9,14 +9,14 @@ import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
 import { getStepPropPicker } from '../previousResults';
 let { flowModule = $bindable(), previousModuleId } = $props();
-const { selectedId, flowStore, flowStateStore, previewArgs } = getContext('FlowEditorContext');
+const { selectionManager, flowStore, flowStateStore, previewArgs } = getContext('FlowEditorContext');
 let schema = $state(emptySchema());
 schema.properties['sleep'] = {
     type: 'number'
 };
 let editor = $state(undefined);
 let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false));
-const result = flowStateStore.val[$selectedId]?.previewResult ?? {};
+const result = flowStateStore.val[selectionManager.getSelectedId()]?.previewResult ?? {};
 let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 </script>
 
@@ -30,6 +30,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 
 	<Toggle
 		checked={isSleepEnabled}
+		class="mb-6"
 		on:change={() => {
 			if (isSleepEnabled && flowModule.sleep != undefined) {
 				flowModule.sleep = undefined
@@ -46,7 +47,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 	/>
 	<Label label="Sleep for duration">
 		{#if flowModule.sleep && schema.properties['sleep']}
-			<div class="border">
+			<div class="border rounded-md overflow-auto">
 				<PropPickerWrapper
 					noFlowPlugConnect={true}
 					flow_input={stepPropPicker.pickableProperties.flow_input}
@@ -71,7 +72,7 @@ let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 			</div>
 		{:else}
 			<SecondsInput disabled />
-			<div class="text-secondary">OR use a dynamic expression</div>
+			<div class="text-secondary text-xs">OR use a dynamic expression</div>
 		{/if}
 	</Label>
 </Section>

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -13,8 +13,8 @@ import Label from '../../Label.svelte';
 import SuspendDrawer from './SuspendDrawer.svelte';
 import EditableSchemaDrawer from '../../schema/EditableSchemaDrawer.svelte';
 import AddProperty from '../../schema/AddProperty.svelte';
-const { selectedId, flowStateStore } = getContext('FlowEditorContext');
-const result = flowStateStore.val[$selectedId]?.previewResult ?? {};
+const { selectionManager, flowStateStore } = getContext('FlowEditorContext');
+const result = flowStateStore.val[selectionManager.getSelectedId()]?.previewResult ?? {};
 let editor = $state(undefined);
 let { flowModule = $bindable(), previousModuleId } = $props();
 let schema = $state(emptySchema());
@@ -86,15 +86,9 @@ let jsonView = $state(false);
 
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>
-			<Tab size="xs" value="core" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Core</div>
-			</Tab>
-			<Tab size="xs" value="form" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Form</div>
-			</Tab>
-			<Tab size="xs" value="permissions" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Permissions</div>
-			</Tab>
+			<Tab value="core" disabled={!isSuspendEnabled} label="Core" />
+			<Tab value="form" disabled={!isSuspendEnabled} label="Form" />
+			<Tab value="permissions" disabled={!isSuspendEnabled} label="Permissions" />
 		</Tabs>
 	</div>
 
@@ -234,7 +228,6 @@ let jsonView = $state(false);
 					<div class="flex flex-col items-end mb-2 w-full">
 						<Toggle
 							checked={false}
-							label="JSON View"
 							size="xs"
 							options={{
 								right: 'JSON editor',

package/package/components/flows/content/FlowModuleTimeout.svelte

@@ -49,7 +49,7 @@ let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 			right: 'Add a custom timeout for this step'
 		}}
 	/>
-	<Label label="Timeout duration">
+	<Label label="Timeout duration" class="mt-2">
 		{#if flowModule.timeout && schema.properties['timeout']}
 			<div class="border">
 				<PropPickerWrapper
@@ -73,13 +73,13 @@ let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 			</div>
 		{:else}
 			<SecondsInput disabled />
-			<div class="text-secondary">OR use a dynamic expression</div>
+			<div class="text-secondary text-sm">OR use a dynamic expression</div>
 		{/if}
 	</Label>
 
 	<div class="mt-4">
 		<Alert title="Only used when testing the full flow" type="info">
-			<p class="text-sm"> The timeout will be ignored when running "Test this step" </p>
+			<p class="text-xs"> The timeout will be ignored when running "Test this step" </p>
 		</Alert>
 	</div>
 </Section>

package/package/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -2,8 +2,8 @@
 import { workerTags, workspaceStore } from '../../../stores';
 import { WorkerService } from '../../../gen';
 import WorkerTagSelect from '../../WorkerTagSelect.svelte';
-let { tag = $bindable(), nullTag, placeholder, noLabel } = $props();
-const { flowStore, selectedId } = getContext('FlowEditorContext');
+let { tag = $bindable(), nullTag, placeholder, noLabel, isPreprocessor } = $props();
+const { flowStore, selectionManager } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 loadWorkerGroups();
 async function loadWorkerGroups() {
@@ -16,7 +16,7 @@ async function loadWorkerGroups() {
 {#if $workerTags}
 	{#if $workerTags?.length > 0}
 		<div class="w-40">
-			{#if flowStore.val.tag == undefined}
+			{#if flowStore.val.tag == undefined || isPreprocessor}
 				<WorkerTagSelect
 					{noLabel}
 					{placeholder}
@@ -26,9 +26,9 @@ async function loadWorkerGroups() {
 				/>
 			{:else}
 				<button
-					title="Worker Group is defined at the flow level"
+					title="Worker group is defined at the flow level"
 					class="w-full text-left items-center font-normal p-1 py-2 border text-xs rounded"
-					onclick={() => ($selectedId = 'settings-worker-group')}
+					onclick={() => selectionManager.selectId('settings-worker-group')}
 				>
 					Flow's WG: {flowStore.val.tag}
 				</button>

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

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     nullTag?: string | undefined;
     placeholder?: string;
     noLabel?: boolean;
+    isPreprocessor: boolean;
 };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -13,7 +13,9 @@ import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 import FlowWhileLoop from './FlowWhileLoop.svelte';
 import { formatCron } from '../../../utils';
-const { selectedId, flowStateStore } = getContext('FlowEditorContext');
+import AgentToolWrapper from './AgentToolWrapper.svelte';
+const { selectionManager, flowStateStore } = getContext('FlowEditorContext');
+const selectedId = $derived(selectionManager.getSelectedId());
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let scriptKind = $state('script');
 let scriptTemplate = $state('script');
@@ -65,7 +67,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 }
 </script>
 
-{#if flowModule.id === $selectedId}
+{#if flowModule.id === selectedId}
 	{#if flowModule.value.type === 'forloopflow'}
 		<FlowLoop {noEditor} bind:mod={flowModule} {parentModule} {previousModule} {enableAi} />
 	{:else if flowModule.value.type === 'whileloopflow'}
@@ -75,13 +77,13 @@ async function createModuleFromScript(path, summary, kind, hash) {
 	{:else if flowModule.value.type === 'branchall'}
 		<FlowBranchesAllWrapper {noEditor} {previousModule} {parentModule} bind:flowModule />
 	{:else if flowModule.value.type === 'identity'}
-		{#if $selectedId == 'failure'}
+		{#if selectedId == 'failure'}
 			<div class="p-4">
 				<Alert type="info" title="Error handlers are triggered upon non recovered errors">
 					If defined, the error handler will take the error as input.
 				</Alert>
 			</div>
-		{:else if $selectedId == 'preprocessor'}
+		{:else if selectedId == 'preprocessor'}
 			<div class="p-4">
 				<Alert
 					type="info"
@@ -109,8 +111,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 				summary={flowModule.summary}
 				shouldDisableTriggerScripts={parentModule !== undefined ||
 					previousModule !== undefined ||
-					$selectedId == 'failure' ||
-					$selectedId == 'preprocessor'}
+					selectedId == 'failure' ||
+					selectedId == 'preprocessor'}
 				on:pick={async ({ detail }) => {
 					const { path, summary, kind, hash } = detail
 					createModuleFromScript(path, summary, kind, hash)
@@ -139,8 +141,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 					flowModule = module
 					flowStateStore.val[module.id] = state
 				}}
-				failureModule={$selectedId === 'failure'}
-				preprocessorModule={$selectedId === 'preprocessor'}
+				failureModule={selectedId === 'failure'}
+				preprocessorModule={selectedId === 'preprocessor'}
 			/>
 		{/if}
 	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script' || flowModule.value.type === 'flow' || flowModule.value.type === 'aiagent'}
@@ -149,8 +151,8 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			bind:flowModule
 			{parentModule}
 			{previousModule}
-			failureModule={$selectedId === 'failure'}
-			preprocessorModule={$selectedId === 'preprocessor'}
+			failureModule={selectedId === 'failure'}
+			preprocessorModule={selectedId === 'preprocessor'}
 			{scriptKind}
 			{scriptTemplate}
 			{enableAi}
@@ -177,7 +179,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		/>
 	{/each}
 {:else if flowModule.value.type === 'branchone'}
-	{#if $selectedId === `${flowModule?.id}-branch-default`}
+	{#if selectedId === `${flowModule?.id}-branch-default`}
 		<div class="p-2">
 			<h3 class="mb-4">Default branch</h3>
 			Nothing to configure, this is the default branch if none of the predicates are met.
@@ -199,7 +201,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		{/each}
 	{/if}
 	{#each flowModule.value.branches as branch, branchIndex (branchIndex)}
-		{#if $selectedId === `${flowModule?.id}-branch-${branchIndex}`}
+		{#if selectedId === `${flowModule?.id}-branch-${branchIndex}`}
 			<FlowBranchOneWrapper
 				{noEditor}
 				bind:branch={flowModule.value.branches[branchIndex]}
@@ -226,7 +228,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 	{/each}
 {:else if flowModule.value.type === 'branchall'}
 	{#each flowModule.value.branches as branch, branchIndex (branchIndex)}
-		{#if $selectedId === `${flowModule?.id}-branch-${branchIndex}`}
+		{#if selectedId === `${flowModule?.id}-branch-${branchIndex}`}
 			<FlowBranchAllWrapper {noEditor} bind:branch={flowModule.value.branches[branchIndex]} />
 		{:else}
 			{#each branch.modules as _, index}
@@ -246,12 +248,17 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		{/if}
 	{/each}
 {:else if flowModule.value.type === 'aiagent'}
-	{#each flowModule.value.tools as _, index (index)}
-		<FlowModuleWrapper
-			{noEditor}
-			bind:flowModule={flowModule.value.tools[index]}
-			bind:parentModule={flowModule}
-			isAgentTool
-		/>
+	{#each flowModule.value.tools as tool, toolIndex (toolIndex)}
+		{#if selectedId === tool.id}
+			<AgentToolWrapper
+				{noEditor}
+				bind:tool={flowModule.value.tools[toolIndex]}
+				parentModule={flowModule}
+				{previousModule}
+				{enableAi}
+				{forceTestTab}
+				{highlightArg}
+			/>
+		{/if}
 	{/each}
 {/if}

package/package/components/flows/content/FlowResult.svelte

@@ -21,14 +21,14 @@ let { job, isOwner, suspendStatus, noEditor, onOpenDetails } = $props();
 			/>
 		</div>
 	{:else}
-		<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
+		<p class="p-4 text-secondary text-xs">
+			The result of the flow will be the result of the last node.
+		</p>
 	{/if}
 </FlowCard>
 
 {#snippet extra()}
 	<div class="flex justify-end">
-		<Button variant="border" color="light" size="xs" on:click={() => onOpenDetails?.()}
-			>Open details</Button
-		>
+		<Button variant="default" size="xs" on:click={() => onOpenDetails?.()}>Open details</Button>
 	</div>
 {/snippet}

package/package/components/flows/content/FlowRetries.svelte

@@ -2,7 +2,6 @@
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import { enterpriseLicense } from '../../../stores';
-import { AlertTriangle } from 'lucide-svelte';
 import { untrack, getContext } from 'svelte';
 import Toggle from '../../Toggle.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
@@ -11,6 +10,8 @@ import Tooltip from '../../Tooltip.svelte';
 import Section from '../../Section.svelte';
 import { getStepPropPicker } from '../previousResults';
 import { NEVER_TESTED_THIS_FAR } from '../models';
+import { validateRetryConfig } from '../../../utils';
+import EEOnly from '../../EEOnly.svelte';
 let { flowModule = $bindable(), flowModuleRetry = $bindable(), disabled = false } = $props();
 const flowEditorContext = getContext('FlowEditorContext');
 const { flowStateStore, flowStore, previewArgs } = flowEditorContext || {
@@ -28,6 +29,9 @@ let isRetryConditionEnabled = $derived(Boolean(flowModuleRetry?.retry_if));
 let result = $derived(flowModule && flowStateStore?.val
     ? (flowStateStore.val[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR)
     : NEVER_TESTED_THIS_FAR);
+let validationError = $derived.by(() => {
+    return validateRetryConfig(flowModuleRetry);
+});
 function setConstantRetries() {
     flowModuleRetry = {
         ...flowModuleRetry,
@@ -72,7 +76,7 @@ const u32Max = 4294967295;
 <div class="h-full flex flex-col gap-4">
 	<ToggleButtonGroup
 		bind:selected={delayType}
-		class={`h-10 ${disabled ? 'disabled' : ''}`}
+		class={`${disabled ? 'disabled' : ''}`}
 		on:selected={(e) => {
 			flowModuleRetry = undefined
 			if (e.detail === 'constant') {
@@ -85,9 +89,9 @@ const u32Max = 4294967295;
 		}}
 	>
 		{#snippet children({ item })}
-			<ToggleButton light value="disabled" label="Disabled" {item} />
-			<ToggleButton light value="constant" label="Constant" {item} />
-			<ToggleButton light value="exponential" label="Exponential" {item} />
+			<ToggleButton value="disabled" label="Disabled" {item} />
+			<ToggleButton value="constant" label="Constant" {item} />
+			<ToggleButton value="exponential" label="Exponential" {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 
@@ -124,18 +128,19 @@ const u32Max = 4294967295;
 			/>
 
 			<div
-				class="w-full border p-2 mt-2 flex flex-col {flowModuleRetry?.retry_if
+				class="w-full border rounded-md p-2 mt-2 flex flex-col {flowModuleRetry?.retry_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>
 				{#if flowModuleRetry?.retry_if}
 					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
-					<span class="text-xs text-tertiary mb-2"
+					<span class="text-xs text-primary mb-2"
 						>Expression should return true to retry, false to skip retry</span
 					>
-					<div class="border w-full">
+					<div class="border rounded-md overflow-auto w-full">
 						{#if stepPropPicker}
 							<PropPickerWrapper
+								noPadding
 								notSelectable
 								pickableProperties={stepPropPicker.pickableProperties}
 								{result}
@@ -148,7 +153,7 @@ const u32Max = 4294967295;
 									bind:this={editor}
 									lang="javascript"
 									bind:code={flowModuleRetry.retry_if.expr}
-									class="few-lines-editor"
+									class="h-full"
 									extraLib={`declare const result = ${JSON.stringify(result)};` +
 										`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input || {})};`}
 								/>
@@ -165,7 +170,7 @@ const u32Max = 4294967295;
 					</div>
 				{:else}
 					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
-					<span class="text-xs text-tertiary mb-2"
+					<span class="text-xs text-primary mb-2"
 						>Expression should return true to retry, false to skip retry</span
 					>
 					<textarea disabled rows="3" class="min-h-[80px]"></textarea>
@@ -208,17 +213,28 @@ const u32Max = 4294967295;
 						>
 					</div>
 					<div class="text-xs font-bold !mt-2">Multiplier</div>
-					<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
+					<span class="text-xs text-primary">delay = multiplier * base ^ (number of attempt)</span>
 					<input bind:value={flowModuleRetry.exponential.multiplier} type="number" />
 					<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
-					<input bind:value={flowModuleRetry.exponential.seconds} type="number" step="1" />
+					<input
+						bind:value={flowModuleRetry.exponential.seconds}
+						type="number"
+						step="1"
+						min="0"
+						class={validationError ? 'border-red-500' : ''}
+					/>
+					{#if validationError}
+						<span class="text-xs text-red-500">{validationError}</span>
+					{:else}
+						<span class="text-xs text-tertiary"
+							>Must be ≥ 1. A base of 0 would cause immediate retries.</span
+						>
+					{/if}
 					<div class="text-xs font-bold !mt-2">Randomization factor (percentage)</div>
 					<div class="flex w-full gap-4">
 						{#if !$enterpriseLicense}
-							<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
-								<AlertTriangle size={16} />
-								EE only
-							</div>{/if}
+							<EEOnly />
+						{/if}
 						<input
 							disabled={!$enterpriseLicense}
 							type="range"

package/package/components/flows/content/FlowSelectionPanel.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import FlowCard from '../common/FlowCard.svelte';
+import { Button } from '../../common';
+import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
+import { StickyNote } from 'lucide-svelte';
+let { selectionManager, noEditor } = $props();
+const noteEditorContext = getNoteEditorContext();
+function addGroupNote() {
+    if (selectionManager.selectedIds.length > 0 && noteEditorContext?.noteEditor) {
+        // Create the group note
+        noteEditorContext.noteEditor.createGroupNote(selectionManager.selectedIds);
+    }
+}
+</script>
+
+<FlowCard {noEditor} title="Multiple Selection">
+	{#snippet action()}
+		<Button
+			onClick={addGroupNote}
+			disabled={!noteEditorContext?.noteEditor || selectionManager.selectedIds.length === 0}
+			startIcon={{ icon: StickyNote }}
+		>
+			Create group note
+		</Button>
+	{/snippet}
+	<div class="px-4">
+		<p class="text-xs text-secondary mb-4">{selectionManager.selectedIds.length} nodes selected</p>
+		<div class="space-y-2 mb-4">
+			{#each selectionManager.selectedIds as nodeId}
+				<div class="text-sm px-2 py-1 bg-surface rounded border">
+					{nodeId}
+				</div>
+			{/each}
+		</div>
+	</div>
+</FlowCard>

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

@@ -0,0 +1,8 @@
+import type { SelectionManager } from '../../graph/selectionUtils.svelte';
+interface Props {
+    selectionManager: SelectionManager;
+    noEditor: boolean;
+}
+declare const FlowSelectionPanel: import("svelte").Component<Props, {}, "">;
+type FlowSelectionPanel = ReturnType<typeof FlowSelectionPanel>;
+export default FlowSelectionPanel;