windmill-components 1.37.0 → 1.46.2

package/components/flows/content/FlowModuleHeader.svelte

@@ -1,21 +1,19 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { isEmptyFlowModule } from '../flowStateUtils';
+import { EDITOR_BAR_WIDTH_THRESHOLD } from '../../EditorBar.svelte';
 import { classNames } from '../../../utils';
-import { faArrowRotateBack, faArrowRotateForward, faBed, faCodeBranch, faSave, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher, getContext } from 'svelte';
+import { faArrowRotateForward, faBed, faCodeBranch, faSave, faStop } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import RemoveStepConfirmationModal from './RemoveStepConfirmationModal.svelte';
+import { isEmptyFlowModule } from '../utils';
 export let module;
-let confirmationModalOpen = false;
-$: shouldPick = isEmptyFlowModule(module);
 const dispatch = createEventDispatcher();
-const { selectedId, select } = getContext('FlowEditorContext');
-const { width, threshold } = getContext('FlowModuleWidth');
-$: iconOnly = $width < threshold;
+let width = 0;
+$: shouldPick = isEmptyFlowModule(module);
+$: iconOnly = width < EDITOR_BAR_WIDTH_THRESHOLD;
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
-<div class="flex flex-row space-x-2">
+<div class="flex flex-row space-x-2" bind:clientWidth={width}>
 	{#if !shouldPick}
 		<span
 			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
@@ -61,35 +59,8 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			Save to workspace
 		</Button>
 	{/if}
-	<Button
-		size="xs"
-		color="light"
-		variant="border"
-		startIcon={{ icon: faTrashAlt }}
-		{iconOnly}
-		on:click={({ detail }) => {
-			if (detail.shiftKey || shouldPick) {
-				dispatch('delete')
-				select('settings')
-			} else {
-				confirmationModalOpen = true
-			}
-		}}
-	>
-		{$selectedId.includes('failure') ? 'Delete error handler' : 'Remove step'}
-	</Button>
 </div>
 
-<RemoveStepConfirmationModal
-	bind:open={confirmationModalOpen}
-	on:confirmed={() => {
-		dispatch('delete')
-		setTimeout(() => {
-			select('settings')
-		})
-	}}
-/>
-
 <style>
 	.badge {
 
@@ -124,18 +95,18 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 
     --tw-text-opacity: 1;
 
-    color: rgb(30 66 159 / var(--tw-text-opacity))
+    color: rgb(30 64 175 / var(--tw-text-opacity))
 }
 
 	.badge-on:hover {
 
     --tw-bg-opacity: 1;
 
-    background-color: rgb(195 221 253 / var(--tw-bg-opacity))
+    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
 }
 
 	.badge-off {

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

@@ -10,7 +10,6 @@ declare const __propDef: {
         toggleSuspend: CustomEvent<any>;
         fork: CustomEvent<any>;
         createScriptFromInlineScript: CustomEvent<any>;
-        delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowModuleScript.svelte

@@ -1,21 +1,16 @@
 <script>import HighlightCode from '../../HighlightCode.svelte';
 import { getScriptByPath } from '../../../utils';
-export let flowModule;
+export let path;
 let code;
 let language;
-async function loadCode(module) {
-    if (module.value.type == 'script') {
-        const script = await getScriptByPath(module.value.path);
-        code = script.content;
-        language = script.language;
-    }
-    else {
-        throw Error('Not a script');
-    }
+async function loadCode(path) {
+    const script = await getScriptByPath(path);
+    code = script.content;
+    language = script.language;
 }
-$: flowModule && loadCode(flowModule);
+$: path && loadCode(path);
 </script>
 
-<div class="flex flex-col flex-1 h-full overflow-auto">
+<div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	<HighlightCode {language} {code} />
 </div>

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

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        flowModule: FlowModule;
+        path: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,11 +1,12 @@
 <script>import InputTransformForm from '../../InputTransformForm.svelte';
 import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
 import { emptySchema } from '../../../utils';
 import { getContext } from 'svelte';
 import { flowStateStore } from '../flowState';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { selectedIdToModuleState } from '../utils';
 export let flowModule;
+export let previousModuleId;
 const { selectedId } = getContext('FlowEditorContext');
 let schema = emptySchema();
 schema.properties['sleep'] = {
@@ -13,13 +14,18 @@ schema.properties['sleep'] = {
     description: 'Sleep time in seconds'
 };
 let editor = undefined;
-let pickableProperties = {
-    result: selectedIdToModuleState($selectedId, $flowStateStore).previewResult
-};
+const result = $flowStateStore[$selectedId]?.previewResult ?? {};
 $: isSuspendEnabled = Boolean(flowModule.suspend);
 $: isSleepEnabled = Boolean(flowModule.sleep);
 </script>
 
+<h2 class="mt-2"
+	>Suspend<Tooltip>
+		If defined, at the end of the step, the flow will be suspended until it receives external
+		requests to be resumed or canceled. This is most useful to implement approval steps but can be
+		used flexibly for other purpose. To get the resume urls, use `wmill.getResumeEndpoints`.</Tooltip
+	></h2
+>
 <Toggle
 	checked={isSuspendEnabled}
 	on:change={() => {
@@ -33,11 +39,11 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 		}
 	}}
 	options={{
-		right: 'Suspend flow execution until events received'
+		right: 'Suspend flow execution until approvals received'
 	}}
 />
 <div class="mb-4">
-	<span class="text-xs font-bold">Number of events to wait for</span>
+	<span class="text-xs font-bold">Number of approvals required for resuming flow</span>
 
 	{#if flowModule.suspend}
 		<input bind:value={flowModule.suspend.required_events} type="number" min="1" placeholder="1" />
@@ -54,6 +60,12 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 	{/if}
 </div>
 
+<h2 class="mt-4"
+	>Sleep<Tooltip>
+		If defined, at the end of the step, the flow will sleep for a number of seconds before being
+		resumed. Sleeping is passive and does not consume any resources.</Tooltip
+	></h2
+>
 <Toggle
 	checked={isSleepEnabled}
 	on:change={() => {
@@ -74,15 +86,19 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 	<span class="text-xs font-bold">Sleep for duration (seconds)</span>
 
 	{#if flowModule.sleep && schema.properties['sleep']}
-		<PropPickerWrapper
-			displayContext={false}
-			{pickableProperties}
-			on:select={({ detail }) => {
-				editor?.insertAtCursor(detail)
-			}}
-		>
-			<InputTransformForm bind:arg={flowModule.sleep} argName="sleep" {schema} />
-		</PropPickerWrapper>
+		<div class="border">
+			<PropPickerWrapper
+				notSelectable
+				{result}
+				displayContext={false}
+				pickableProperties={undefined}
+				on:select={({ detail }) => {
+					editor?.insertAtCursor(detail)
+				}}
+			>
+				<InputTransformForm bind:arg={flowModule.sleep} argName="sleep" {schema} />
+			</PropPickerWrapper>
+		</div>
 	{:else}
 		<input type="number" disabled />
 	{/if}

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

@@ -3,6 +3,7 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         flowModule: FlowModule;
+        previousModuleId: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/content/FlowModuleWrapper.svelte

@@ -1,45 +1,145 @@
-<script>import { getContext } from 'svelte';
+<script>import { Script } from '../../../gen';
+import { getContext } from 'svelte';
+import FlowBranchesWrapper from './FlowBranchesWrapper.svelte';
+import FlowLoop from './FlowLoop.svelte';
+import FlowModuleComponent from './FlowModuleComponent.svelte';
+import FlowBranchAllWrapper from './FlowBranchAllWrapper.svelte';
+import FlowBranchOneWrapper from './FlowBranchOneWrapper.svelte';
+import { createInlineScriptModule, createLoop, createBranches, pickScript, createBranchAll } from '../flowStateUtils';
+import FlowInputs from './FlowInputs.svelte';
 import { flowStateStore } from '../flowState';
-import { flowStore } from '../flowStore';
-import { selectedIdToIndexes } from '../utils';
-import FlowModule from './FlowModule.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { Alert } from '../../common';
 const { selectedId } = getContext('FlowEditorContext');
-$: [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
+export let flowModule;
+// These pointers are used to easily access previewArgs of parent module, and previous module
+// Pointer to parent module, only defined within Branches or Loops.
+export let parentModule = undefined;
+// Pointer to previous module, for easy access to testing results
+export let previousModule = undefined;
 </script>
 
-{#if childIndex != undefined}
-	{#each [$flowStore.value.modules[parentIndex].value] as mod, index (index)}
-		{#each [$flowStateStore.modules[parentIndex].childFlowModules] as state}
-			{#if mod.type == 'forloopflow' && state != undefined}
-				<FlowModule
-					failureModule={false}
-					bind:flowModule={mod.modules[childIndex]}
-					bind:flowModuleState={state[childIndex]}
-					on:delete={() => {
-						$flowStateStore.modules[parentIndex].childFlowModules?.splice(childIndex, 1)
-						let mod = $flowStore.value.modules[parentIndex].value
-						if (mod.type === 'forloopflow') {
-							mod.modules.splice(childIndex, 1)
-						} else {
-							throw new Error('Expected forloop')
-						}
-					}}
-				/>
-			{:else}
-				<span>Incorrect state</span>
-			{/if}
+{#if flowModule.id === $selectedId}
+	{#if flowModule.value.type === 'forloopflow'}
+		<FlowLoop bind:mod={flowModule} {parentModule} {previousModule} />
+	{:else if flowModule.value.type === 'branchone' || flowModule.value.type === 'branchall'}
+		<FlowBranchesWrapper {previousModule} bind:flowModule {parentModule} />
+	{:else if flowModule.value.type === 'identity'}
+		{#if $selectedId == 'failure'}
+			<Alert type="info" title="Error handlers are triggered upon non recovered errors">
+				If defined, the error handler will take as input, the result of the step that errored (which
+				has its error in the 'error field').
+				<br />
+				<br />
+				Steps are retried until they succeed, or until the maximum number of retries defined for that
+				spec is reached, at which point the error handler is called.
+			</Alert>
+		{:else}
+			<h1 class="p-4"
+				>Select a step kind <Tooltip
+					>Until being defined, this step acts as an identify function, returning as result its
+					input and assigning it a key 'previous_result' if the input is not a json object</Tooltip
+				></h1
+			>
+		{/if}
+
+		<FlowInputs
+			shouldDisableTriggerScripts={parentModule !== undefined ||
+				previousModule !== undefined ||
+				$selectedId == 'failure'}
+			on:loop={async () => {
+				const [module, state] = await createLoop(flowModule.id)
+				flowModule = module
+				$flowStateStore[module.id] = state
+			}}
+			on:branchone={async () => {
+				const [module, state] = await createBranches(flowModule.id)
+				flowModule = module
+				$flowStateStore[module.id] = state
+			}}
+			on:branchall={async () => {
+				const [module, state] = await createBranchAll(flowModule.id)
+				flowModule = module
+				$flowStateStore[module.id] = state
+			}}
+			on:pick={async ({ detail }) => {
+				const { path, summary, kind } = detail
+				const [module, state] = await pickScript(path, summary, flowModule.id)
+
+				if (kind == Script.kind.APPROVAL) {
+					module.suspend = { required_events: 1, timeout: 1800 }
+				}
+
+				flowModule = module
+				$flowStateStore[module.id] = state
+			}}
+			on:new={async ({ detail }) => {
+				const { language, kind, subkind } = detail
+
+				const [module, state] = await createInlineScriptModule(
+					language,
+					kind,
+					subkind,
+					flowModule.id
+				)
+
+				if (kind == Script.kind.APPROVAL) {
+					module.suspend = { required_events: 1, timeout: 1800 }
+				}
+
+				flowModule = module
+				$flowStateStore[module.id] = state
+			}}
+			failureModule={$selectedId === 'failure'}
+		/>
+	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'}
+		<FlowModuleComponent bind:flowModule {parentModule} {previousModule} />
+	{/if}
+{:else if flowModule.value.type === 'forloopflow'}
+	{#each flowModule.value.modules as submodule, index (index)}
+		<svelte:self
+			bind:flowModule={submodule}
+			bind:parentModule={flowModule}
+			previousModule={flowModule.value.modules[index - 1]}
+		/>
+	{/each}
+{:else if flowModule.value.type === 'branchone'}
+	{#if $selectedId === `${flowModule?.id}-branch-default`}
+		<div class="p-4 text-sm truncate">Default branch</div>
+	{:else}
+		{#each flowModule.value.default as submodule, index}
+			<svelte:self
+				bind:flowModule={submodule}
+				bind:parentModule={flowModule}
+				previousModule={flowModule.value.default[index - 1]}
+			/>
 		{/each}
+	{/if}
+	{#each flowModule.value.branches as branch, branchIndex (branchIndex)}
+		{#if $selectedId === `${flowModule?.id}-branch-${branchIndex}`}
+			<FlowBranchOneWrapper bind:branch parentModule={flowModule} {previousModule} />
+		{:else}
+			{#each branch.modules as submodule, index}
+				<svelte:self
+					bind:flowModule={submodule}
+					bind:parentModule={flowModule}
+					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
+				/>
+			{/each}
+		{/if}
+	{/each}
+{:else if flowModule.value.type === 'branchall'}
+	{#each flowModule.value.branches as branch, branchIndex (branchIndex)}
+		{#if $selectedId === `${flowModule?.id}-branch-${branchIndex}`}
+			<FlowBranchAllWrapper bind:branch />
+		{:else}
+			{#each branch.modules as submodule, index}
+				<svelte:self
+					bind:flowModule={submodule}
+					bind:parentModule={flowModule}
+					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
+				/>
+			{/each}
+		{/if}
 	{/each}
-{:else if $flowStore.value.modules[parentIndex]}
-	<FlowModule
-		failureModule={false}
-		bind:flowModule={$flowStore.value.modules[parentIndex]}
-		bind:flowModuleState={$flowStateStore.modules[parentIndex]}
-		on:delete={() => {
-			$flowStateStore.modules.splice(parentIndex, 1)
-			$flowStateStore = $flowStateStore
-			$flowStore.value.modules.splice(parentIndex, 1)
-			$flowStore = $flowStore
-		}}
-	/>
 {/if}

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

@@ -1,6 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../../gen';
 declare const __propDef: {
-    props: {};
+    props: {
+        flowModule: FlowModule;
+        parentModule?: FlowModule | undefined;
+        previousModule?: FlowModule | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/content/FlowRetries.svelte

@@ -1,4 +1,6 @@
-<script>import Toggle from '../../Toggle.svelte';
+<script>import { Alert } from '../../common';
+import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
 export let flowModule;
 function setConstantRetries() {
     flowModule.retry = {
@@ -23,7 +25,16 @@ $: isConstantRetryEnabled = Boolean(flowModule.retry?.constant);
 $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 </script>
 
-<div class="flex flex-col items-start space-y-1">
+<div class="flex flex-col items-start space-y-1 {$$props.class}">
+	<h2 class="mt-2"
+		>Retries <Tooltip>
+			If defined, upon error this step will be retried with a delay and a maximum number of attempts
+			as defined below. If none of the retries succeed, the step job is a failure and the error will
+			propagate up in the case of a branch, and the error handler will be called ultimately if not
+			handled prior.</Tooltip
+		></h2
+	>
+
 	<Toggle
 		checked={isConstantRetryEnabled}
 		on:change={() => {

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         flowModule: FlowModule;
     };
     events: {

package/components/flows/content/FlowSchedules.svelte

@@ -7,9 +7,7 @@ const { schedule } = getContext('FlowEditorContext');
 </script>
 
 <CronInput bind:schedule={$schedule.cron} />
-
 <SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
-
 <Toggle
 	bind:checked={$schedule.enabled}
 	options={{