windmill-components 1.37.0 → 1.46.2

package/components/flows/content/FlowBranchesWrapper.svelte

@@ -0,0 +1,140 @@
+<script>import { Alert, Badge, Button, Tab } from '../../common';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import HighlightCode from '../../HighlightCode.svelte';
+import Toggle from '../../Toggle.svelte';
+import { language } from '../../../sql';
+import { getContext } from 'svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+// import FlowRetries from './FlowRetries.svelte'
+const { selectedId } = getContext('FlowEditorContext');
+export let flowModule;
+export let parentModule;
+export let previousModule;
+let selected = 'early-stop';
+let branches = [];
+$: if (flowModule.value.type === 'branchone') {
+    branches = flowModule.value.branches.map((branch, i) => ({
+        id: `${flowModule.id}-branch-${i}`,
+        summary: branch.summary,
+        expr: branch.expr
+    }));
+}
+else if (flowModule.value.type === 'branchall') {
+    branches = flowModule.value.branches.map((branch, i) => ({
+        id: `${flowModule.id}-branch-${i}`,
+        summary: branch.summary,
+        expr: undefined
+    }));
+}
+</script>
+
+<div class="h-full flex flex-col">
+	<FlowCard title={flowModule.value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
+		<div class="flex flex-col h-full">
+			<div class="border">
+				{#if flowModule.value.type == 'branchall'}
+					<Alert type="info" title="All branches will be run">
+						Configure branches to skip errors and to not result in that step itself failing.
+						<br />
+						<br />
+						The result of this step is the list of the result of each branch.
+					</Alert>
+				{:else}
+					<Alert type="info" title="Only one branch will be run">
+						Only one branch is ran, the first one that match its predicate, if none do, the default
+						branch is chosen.
+						<br />
+						<br />
+						The result of this step is the result of the branch.
+					</Alert>
+				{/if}
+
+				<div class="p-2">
+					<h3
+						>{branches.length + (flowModule.value.type === 'branchone' ? 1 : 0)} branch{branches.length +
+							(flowModule.value.type === 'branchone' ? 1 : 0) >
+						1
+							? 'es'
+							: ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2">
+						{#if flowModule.value.type === 'branchone'}
+							<div class="flex flex-row">
+								<Badge large={true} color="blue">Default branch</Badge>
+							</div>
+						{/if}
+						{#each branches as branch, i}
+							{#if flowModule.value.type === 'branchone'}
+								<div class="flex flex-row gap-x-2 items-center">
+									<div class="max-w-sm w-full text-sm text-gray-600">
+										{branch.summary && branch.summary != '' ? branch.summary : 'No summary'}</div
+									>
+									<div>
+										<Button size="sm" on:click={() => ($selectedId = branch.id)}>
+											Set branch {i} predicate</Button
+										>
+									</div>
+									<div class="w-full text-2xs">
+										<HighlightCode language="deno" code={branch.expr} />
+									</div>
+								</div>
+							{:else}
+								<div class="flex flex-row gap-x-2">
+									<div class="max-w-sm w-full text-sm text-gray-600">
+										{branch.summary && branch.summary != '' ? branch.summary : 'No summary'}
+									</div>
+									<div>
+										<Button size="sm" on:click={() => ($selectedId = branch.id)}>
+											Set branch {i} summary</Button
+										>
+									</div>
+								</div>
+							{/if}
+						{/each}
+					</div>
+					{#if flowModule.value.type == 'branchall'}
+						<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+						<Toggle
+							bind:checked={flowModule.value.parallel}
+							options={{
+								right: 'All branches run in parallel'
+							}}
+						/>
+					{/if}
+				</div>
+			</div>
+			{#if flowModule}
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop</Tab>
+					<Tab value="suspend">Sleep/Suspend</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			{/if}
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        parentModule: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowBranchesWrapperProps = typeof __propDef.props;
+export declare type FlowBranchesWrapperEvents = typeof __propDef.events;
+export declare type FlowBranchesWrapperSlots = typeof __propDef.slots;
+export default class FlowBranchesWrapper extends SvelteComponentTyped<FlowBranchesWrapperProps, FlowBranchesWrapperEvents, FlowBranchesWrapperSlots> {
+}
+export {};

package/components/flows/content/FlowEditorPanel.svelte

@@ -3,7 +3,7 @@ import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
-import FlowLoopWrapper from './FlowLoopWrapper.svelte';
+import { flowStore } from '../flowStore';
 export let initialPath;
 const { selectedId } = getContext('FlowEditorContext');
 </script>
@@ -11,15 +11,17 @@ const { selectedId } = getContext('FlowEditorContext');
 {#key $selectedId}
 	{#if $selectedId === 'settings'}
 		<FlowSettings {initialPath} />
-	{:else if $selectedId === 'settings-schedule'}
-		<FlowSettings {initialPath} defaultTab="schedule" />
-	{:else if $selectedId.includes('loop')}
-		<FlowLoopWrapper />
 	{:else if $selectedId === 'inputs'}
 		<FlowInput />
+	{:else if $selectedId === 'settings-schedule'}
+		<FlowSettings {initialPath} defaultTab="schedule" />
+	{:else if $selectedId === 'settings-same-worker'}
+		<FlowSettings {initialPath} defaultTab="same-worker" />
 	{:else if $selectedId === 'failure'}
 		<FlowFailureModule />
 	{:else}
-		<FlowModuleWrapper />
+		{#each $flowStore.value.modules as flowModule, index (flowModule.id ?? index)}
+			<FlowModuleWrapper bind:flowModule previousModule={$flowStore.value.modules[index - 1]} />
+		{/each}
 	{/if}
 {/key}

package/components/flows/content/FlowFailureModule.svelte

@@ -1,15 +1,13 @@
-<script>import { flowStateStore } from '../flowState';
-import { flowStore } from '../flowStore';
-import FlowModule from './FlowModule.svelte';
+<script>import { flowStore } from '../flowStore';
+import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 </script>
 
 {#if $flowStore.value.failure_module}
-	<FlowModule
+	<FlowModuleWrapper
 		bind:flowModule={$flowStore.value.failure_module}
-		bind:flowModuleState={$flowStateStore.failureModule}
 		on:delete={() => {
 			$flowStore.value.failure_module = undefined
 		}}
-		failureModule={true}
+		previousModule={undefined}
 	/>
 {/if}

package/components/flows/content/FlowInput.svelte

@@ -1,21 +1,47 @@
-<script>import { flowStore } from '../flowStore';
+<script>import { Button } from '../../common';
 import SchemaEditor from '../../SchemaEditor.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
 import FlowCard from '../common/FlowCard.svelte';
-import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
+import { copyFirstStepSchema, flowStore } from '../flowStore';
+import { isEmptyFlowModule } from '../utils';
+import CapturePayload from './CapturePayload.svelte';
+let capturePayload;
 </script>
 
-<FlowCard title="Flow Inputs">
+<CapturePayload bind:this={capturePayload} />
+<FlowCard title="Flow Input">
 	<div slot="header">
-		<CopyFirstStepSchema />
+		<div class="flex flex-row space-x-4">
+			<Button
+				color="light"
+				size="sm"
+				on:click={() => {
+					capturePayload.openDrawer()
+				}}
+				variant="border"
+			>
+				Capture from a request to seed inputs
+			</Button>
+			<Button
+				color="light"
+				size="sm"
+				disabled={$flowStore.value.modules.length === 0 ||
+					isEmptyFlowModule($flowStore.value.modules[0])}
+				on:click={copyFirstStepSchema}
+				variant="border"
+			>
+				Copy from first step schema {#if $flowStore.value.modules.length === 0 || isEmptyFlowModule($flowStore.value.modules[0])}
+					(no steps to copy from!){/if}
+			</Button>
+		</div>
 	</div>
 	<div>
 		<div class="p-6">
 			<SchemaEditor
+				bind:schema={$flowStore.schema}
 				on:change={() => {
 					$flowStore = $flowStore
 				}}
-				bind:schema={$flowStore.schema}
 			/>
 		</div>
 	</div>

package/components/flows/content/FlowInputs.svelte

@@ -1,91 +1,160 @@
-<script>import { RawScript, Script } from '../../../gen';
-import { faCode, faRepeat } from '@fortawesome/free-solid-svg-icons';
+<script>import Tooltip from '../../Tooltip.svelte';
+import { RawScript, Script } from '../../../gen';
+import { faCode, faCodeBranch, faRepeat } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
 import PickScript from '../pickers/PickScript.svelte';
-export let shouldDisableLoopCreation = false;
-export let shouldDisableTriggerScripts = false;
 export let failureModule;
+export let shouldDisableTriggerScripts = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="space-y-4 p-4">
-	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Scripts</div>
-	{/if}
-
-	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
-		<PickScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
-		<PickHubScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
-
+	<div class="text-sm font-bold">{failureModule ? 'Error handler' : 'Common script'}</div>
+	<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 		<FlowScriptPicker
-			label={`Create a for-loop here`}
-			disabled={shouldDisableLoopCreation}
-			icon={faRepeat}
-			iconColor="text-blue-500"
-			on:click={() => dispatch('loop')}
-		/>
-
-		{#if !failureModule}
-			<FlowScriptPicker
-				label={`New PostgreSQL query`}
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() =>
-					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
-			/>
-		{/if}
-
-		<FlowScriptPicker
-			label="New Python script (3.10)"
+			label="Inline Python (3.10)"
 			icon={faCode}
 			iconColor="text-green-500"
-			on:click={() =>
+			on:click={() => {
 				dispatch('new', {
 					language: RawScript.language.PYTHON3,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
+					kind: failureModule ? 'failure' : 'script',
+					subkind: 'flow'
+				})
+			}}
 		/>
 
 		<FlowScriptPicker
-			label="New Typescript script (Deno)"
+			label="Inline Typescript (Deno)"
 			icon={faCode}
 			iconColor="text-blue-800"
-			on:click={() =>
+			on:click={() => {
 				dispatch('new', {
 					language: RawScript.language.DENO,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
+					kind: failureModule ? 'failure' : 'script',
+					subkind: 'flow'
+				})
+			}}
 		/>
 
 		<FlowScriptPicker
-			label="New Go script"
+			label="Inline Go"
 			icon={faCode}
 			iconColor="text-blue-700"
-			on:click={() =>
+			on:click={() => {
 				dispatch('new', {
 					language: RawScript.language.GO,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
+					kind: failureModule ? 'failure' : 'script',
+					subkind: 'flow'
+				})
+			}}
+		/>
+
+		<FlowScriptPicker
+			label="Inline Bash"
+			icon={faCode}
+			iconColor="text-green-700"
+			on:click={() => {
+				dispatch('new', {
+					language: RawScript.language.BASH,
+					kind: failureModule ? 'failure' : 'script',
+					subkind: 'flow'
+				})
+			}}
+		/>
+
+		{#if !failureModule}
+			<FlowScriptPicker
+				label={`Inline PostgreSQL`}
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() =>
+					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
+			/>
+		{/if}
+
+		<PickScript
+			customText={failureModule ? 'Error Handler from workspace' : undefined}
+			kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT}
+			on:pick
+		/>
+		<PickHubScript
+			customText={failureModule ? 'Error Handler from Hub' : undefined}
+			kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT}
+			on:pick
 		/>
 	</div>
 
 	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Trigger scripts</div>
+		<div class="text-sm font-bold pt-8">
+			Trigger script
+			<Tooltip>
+				Used as a first step most commonly with an internal state and a schedule to watch for
+				changes on an external system, compute the diff since last time, set the new state. The
+				diffs are then treated one by one with a for-loop.
+			</Tooltip>
+		</div>
 
-		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
-			<PickScript kind={Script.kind.TRIGGER} on:pick />
-			<PickHubScript kind={Script.kind.TRIGGER} on:pick />
+		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			<PickScript customText="Trigger script from workspace" kind={Script.kind.TRIGGER} on:pick />
+			<PickHubScript customText="Trigger script from Hub" kind={Script.kind.TRIGGER} on:pick />
 			<FlowScriptPicker
-				label="New Typescript script (Deno)"
+				label="Inline Typescript (Deno)"
 				icon={faCode}
 				iconColor="text-blue-800"
 				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'trigger' })}
 			/>
 		</div>
 	{/if}
+	{#if !failureModule}
+		<div class="text-sm font-bold pt-8">
+			Approval step
+			<Tooltip>
+				Inlined common scripts can be turned into approval step by changing their suspend settings.
+				An approval step will suspend the execution of a flow until it has been approved through the
+				resume endpoints or the approval page by and solely by the recipients of those secret urls.
+				Use getResumeEndpoints from the wmill client to generate those URLs.
+			</Tooltip>
+		</div>
+		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			<PickScript customText="Approval step from workspace" kind={Script.kind.APPROVAL} on:pick />
+			<PickHubScript
+				customText={'Approval step from the Hub'}
+				kind={Script.kind.APPROVAL}
+				on:pick
+			/>
+			<FlowScriptPicker
+				label="Inline Typescript (Deno)"
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'approval' })}
+			/>
+		</div>
+
+		<div class="text-sm font-bold pt-8">Flow primitive</div>
+
+		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			<FlowScriptPicker
+				label={`Branches and switch to one`}
+				icon={faCodeBranch}
+				iconColor="text-blue-500"
+				on:click={() => dispatch('branchone')}
+			/>
+			<FlowScriptPicker
+				label={`Branches and run them all`}
+				icon={faCodeBranch}
+				iconColor="text-blue-500"
+				on:click={() => dispatch('branchall')}
+			/>
+
+			<FlowScriptPicker
+				label={`For loop`}
+				icon={faRepeat}
+				iconColor="text-blue-500"
+				on:click={() => dispatch('loop')}
+			/>
+		</div>
+	{/if}
 </div>

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

@@ -1,14 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        shouldDisableLoopCreation?: boolean | undefined;
-        shouldDisableTriggerScripts?: boolean | undefined;
         failureModule: boolean;
+        shouldDisableTriggerScripts?: boolean | undefined;
     };
     events: {
-        pick: CustomEvent<any>;
-        loop: CustomEvent<any>;
+        pick: any;
         new: CustomEvent<any>;
+        branchone: CustomEvent<any>;
+        branchall: CustomEvent<any>;
+        loop: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };