windmill-components 1.394.8 → 1.405.5

package/package/components/flows/FlowEditor.svelte

@@ -11,12 +11,14 @@ export let disableStaticInputs = false;
 export let disableTutorials = false;
 export let disableAi = false;
 export let disableSettings = false;
+export let disabledFlowInputs = false;
 export let smallErrorHandler = false;
-let size = 40;
+let size = 50;
 const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext');
 </script>
 
 <div
+	id="flow-editor"
 	class={classNames(
 		'h-full overflow-hidden transition-colors duration-[400ms] ease-linear border-t',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : ''
@@ -52,7 +54,7 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel enableAi={!disableAi} />
+				<FlowEditorPanel {disabledFlowInputs} enableAi={!disableAi} />
 			{/if}
 		</Pane>
 	</Splitpanes>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         disableTutorials?: boolean | undefined;
         disableAi?: boolean | undefined;
         disableSettings?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
         smallErrorHandler?: boolean | undefined;
     };
     events: {

package/package/components/flows/FlowHistory.svelte

@@ -1,76 +1,13 @@
-<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
-import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
-import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
-import { FlowService } from '../../gen';
-import { workspaceStore } from '../../stores';
-import { Skeleton } from '../common';
+<script>import { createEventDispatcher } from 'svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import Button from '../common/button/Button.svelte';
-import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import FlowHistoryInner from './FlowHistoryInner.svelte';
 export let path;
 let drawer;
-let loading = false;
-let versions = [];
-let selectedVersion = undefined;
-let selected = undefined;
-let deploymentMsgUpdateMode = false;
-let deploymentMsgUpdate = undefined;
 export function open() {
-    loadVersions();
     drawer.openDrawer();
 }
-async function loadFlow(version) {
-    selected = await FlowService.getFlowVersion({
-        workspace: $workspaceStore,
-        version,
-        path
-    });
-}
-async function loadVersions() {
-    loading = true;
-    versions = await FlowService.getFlowHistory({
-        workspace: $workspaceStore,
-        path: path
-    });
-    loading = false;
-}
-async function updateDeploymentMsg(version) {
-    if (selectedVersion === undefined ||
-        version === undefined ||
-        emptyString(deploymentMsgUpdate)) {
-        return;
-    }
-    await FlowService.updateFlowHistory({
-        workspace: $workspaceStore,
-        version,
-        path,
-        requestBody: {
-            deployment_msg: deploymentMsgUpdate
-        }
-    });
-    selectedVersion.deployment_msg = deploymentMsgUpdate;
-    deploymentMsgUpdateMode = false;
-    loadVersions();
-}
 const dispatch = createEventDispatcher();
-async function restoreVersion(flow) {
-    if (!flow)
-        return;
-    await FlowService.updateFlow({
-        workspace: $workspaceStore,
-        requestBody: {
-            ...flow,
-            path
-        },
-        path
-    });
-    dispatch('historyRestore');
-    drawer?.closeDrawer();
-    sendUserToast('Flow restored from previous deployment');
-}
-$: selectedVersion !== undefined && loadFlow(selectedVersion.id);
 </script>
 
 <Drawer bind:this={drawer} size="1200px">
@@ -79,136 +16,14 @@ $: selectedVersion !== undefined && loadFlow(selectedVersion.id);
 			drawer?.closeDrawer()
 		}}
 		noPadding
+		title="Deployment History"
 	>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={20}>
-				<PanelSection title="Past Deployments">
-					<div class="flex flex-col gap-2 w-full">
-						{#if !loading}
-							{#if versions.length > 0}
-								<div class="flex gap-2 flex-col">
-									{#each versions ?? [] as version}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<div
-											class={classNames(
-												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-												selectedVersion?.id == version.id ? 'bg-blue-100 text-blue-600' : ''
-											)}
-											role="button"
-											tabindex="0"
-											on:click={() => {
-												selectedVersion = version
-											}}
-										>
-											<span class="text-xs truncate">
-												{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
-											</span>
-										</div>
-									{/each}
-								</div>
-							{:else}
-								<div class="text-sm text-tertiary">No items</div>
-							{/if}
-						{:else}
-							<Skeleton layout={[[40], [40], [40], [40], [40]]} />
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={80}>
-				<div class="h-full w-full overflow-auto">
-					{#if selectedVersion}
-						{#if selected}
-							<div class="px-2 flex flex-col gap-2">
-								<span class="flex flex-row text-sm p-1 text-tertiary">
-									{#if deploymentMsgUpdateMode}
-										<div class="flex w-full">
-											<input
-												type="text"
-												bind:value={deploymentMsgUpdate}
-												class="!w-auto grow"
-												on:click|stopPropagation={() => {}}
-												on:keydown|stopPropagation
-												on:keypress|stopPropagation={({ key }) => {
-													if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
-												}}
-											/>
-											<Button
-												size="xs"
-												color="blue"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Save Deployment Message"
-												on:click={() => {
-													updateDeploymentMsg(selectedVersion?.id)
-												}}
-											>
-												<ArrowRight size={14} />
-											</Button>
-											<Button
-												size="xs"
-												color="light"
-												buttonType="button"
-												btnClasses="!p-1 !w-[34px] !ml-1"
-												aria-label="Abort"
-												on:click={() => {
-													deploymentMsgUpdateMode = false
-													deploymentMsgUpdate = undefined
-												}}
-											>
-												<X size={14} />
-											</Button>
-										</div>
-									{:else}
-										{#if selectedVersion.deployment_msg}
-											{selectedVersion.deployment_msg}
-										{:else}
-											Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
-										{/if}
-										<button
-											on:click={() => {
-												deploymentMsgUpdate = selectedVersion?.deployment_msg
-												deploymentMsgUpdateMode = true
-											}}
-											title="Update commit message"
-											class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
-											aria-label="Update commit message"
-										>
-											<Pencil size={14} />
-										</button>
-									{/if}
-								</span>
-								<div class="flex p-1 gap-2">
-									<Button
-										size="xs"
-										on:click={() =>
-											window.open(
-												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
-												'_blank'
-											)}
-									>
-										Restore as fork
-									</Button>
-									<Button size="xs" on:click={() => restoreVersion(selected)}
-										>Redeploy with that version
-									</Button>
-								</div>
-								{#await import('../FlowViewer.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default flow={selected} />
-								{/await}
-							</div>
-						{:else}
-							<Skeleton layout={[[40]]} />
-						{/if}
-					{:else}
-						<div class="text-sm p-2 text-tertiary"
-							>Select a deployment version to see its details</div
-						>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
+		<FlowHistoryInner
+			on:historyRestore={() => {
+				drawer.closeDrawer()
+				dispatch('historyRestore')
+			}}
+			{path}
+		/>
 	</DrawerContent>
 </Drawer>

package/package/components/flows/FlowHistory.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         open?: (() => void) | undefined;
     };
     events: {
-        keydown: KeyboardEvent;
         historyRestore: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/FlowHistoryInner.svelte

@@ -0,0 +1,200 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
+import { FlowService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import { Skeleton } from '../common';
+import Button from '../common/button/Button.svelte';
+import { ArrowRight, Loader2, Pencil, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+export let path;
+let loading = false;
+let versions = [];
+let selectedVersion = undefined;
+let selected = undefined;
+let deploymentMsgUpdateMode = false;
+let deploymentMsgUpdate = undefined;
+async function loadFlow(version) {
+    selected = await FlowService.getFlowVersion({
+        workspace: $workspaceStore,
+        version,
+        path
+    });
+}
+async function loadVersions() {
+    loading = true;
+    versions = await FlowService.getFlowHistory({
+        workspace: $workspaceStore,
+        path: path
+    });
+    loading = false;
+}
+async function updateDeploymentMsg(version) {
+    if (selectedVersion === undefined ||
+        version === undefined ||
+        emptyString(deploymentMsgUpdate)) {
+        return;
+    }
+    await FlowService.updateFlowHistory({
+        workspace: $workspaceStore,
+        version,
+        path,
+        requestBody: {
+            deployment_msg: deploymentMsgUpdate
+        }
+    });
+    selectedVersion.deployment_msg = deploymentMsgUpdate;
+    deploymentMsgUpdateMode = false;
+    loadVersions();
+}
+const dispatch = createEventDispatcher();
+async function restoreVersion(flow) {
+    if (!flow)
+        return;
+    await FlowService.updateFlow({
+        workspace: $workspaceStore,
+        requestBody: {
+            ...flow,
+            path
+        },
+        path
+    });
+    dispatch('historyRestore');
+    sendUserToast('Flow restored from previous deployment');
+}
+loadVersions();
+$: selectedVersion !== undefined && loadFlow(selectedVersion.id);
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<div class="flex flex-col gap-2 w-full px-2 py-2">
+			{#if !loading}
+				{#if versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each versions ?? [] as version}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-hover hover:text-primary',
+									selectedVersion?.id == version.id ? 'bg-surface-selected text-primary' : ''
+								)}
+								role="button"
+								tabindex="0"
+								on:click={() => {
+									selectedVersion = version
+								}}
+							>
+								<span class="text-xs truncate">
+									{#if emptyString(version.deployment_msg)}Version {version.id}{:else}{version.deployment_msg}{/if}
+								</span>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-sm text-tertiary">No items</div>
+				{/if}
+			{:else}
+				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+			{/if}
+		</div>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto pt-2">
+			{#if selectedVersion}
+				{#if selected}
+					<div class="px-2 flex flex-col gap-2">
+						<div class="flex justify-between">
+							<span class="flex flex-row text-sm p-1 text-tertiary">
+								{#if deploymentMsgUpdateMode}
+									<div class="flex w-full">
+										<input
+											type="text"
+											bind:value={deploymentMsgUpdate}
+											class="!w-auto grow"
+											on:click|stopPropagation={() => {}}
+											on:keydown|stopPropagation
+											on:keypress|stopPropagation={({ key }) => {
+												if (key === 'Enter') updateDeploymentMsg(selectedVersion?.id)
+											}}
+										/>
+										<Button
+											size="xs"
+											color="blue"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Save Deployment Message"
+											on:click={() => {
+												updateDeploymentMsg(selectedVersion?.id)
+											}}
+										>
+											<ArrowRight size={14} />
+										</Button>
+										<Button
+											size="xs"
+											color="light"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Abort"
+											on:click={() => {
+												deploymentMsgUpdateMode = false
+												deploymentMsgUpdate = undefined
+											}}
+										>
+											<X size={14} />
+										</Button>
+									</div>
+								{:else}
+									{#if selectedVersion.deployment_msg}
+										{selectedVersion.deployment_msg}
+									{:else}
+										Deployed {displayDate(selected.edited_at)} by {selected.edited_by}
+									{/if}
+									<button
+										on:click={() => {
+											deploymentMsgUpdate = selectedVersion?.deployment_msg
+											deploymentMsgUpdateMode = true
+										}}
+										title="Update commit message"
+										class="flex items-center px-1 rounded-sm hover:text-primary text-secondary h-5"
+										aria-label="Update commit message"
+									>
+										<Pencil size={14} />
+									</button>
+								{/if}
+							</span>
+							<div class="flex p-1 gap-2">
+								<div class="flex">
+									<Button
+										size="sm"
+										color="dark"
+										on:click={() =>
+											window.open(
+												`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
+												'_blank'
+											)}
+									>
+										Restore as fork
+									</Button>
+								</div>
+								<div class="flex">
+									<Button size="sm" color="dark" on:click={() => restoreVersion(selected)}
+										>Redeploy with that version
+									</Button>
+								</div>
+							</div>
+						</div>
+						{#await import('../FlowViewer.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default flow={selected} />
+						{/await}
+					</div>
+				{:else}
+					<Skeleton layout={[[40]]} />
+				{/if}
+			{:else}
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

package/package/components/flows/FlowHistoryInner.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        historyRestore: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowHistoryInnerProps = typeof __propDef.props;
+export type FlowHistoryInnerEvents = typeof __propDef.events;
+export type FlowHistoryInnerSlots = typeof __propDef.slots;
+export default class FlowHistoryInner extends SvelteComponent<FlowHistoryInnerProps, FlowHistoryInnerEvents, FlowHistoryInnerSlots> {
+}
+export {};

package/package/components/flows/FlowProgressBar.svelte

@@ -1,12 +1,14 @@
 <script>import {} from '../../gen';
 import ProgressBar from '../progressBar/ProgressBar.svelte';
 export let job = undefined;
+export let currentSubJobProgress = undefined;
 let error = undefined;
 let index = 0;
 let subIndex = undefined;
 let subLength = undefined;
 let length = 1;
 let nextInProgress = false;
+let subIndexIsPercent = false;
 $: if (job)
     updateJobProgress(job);
 function updateJobProgress(job) {
@@ -18,7 +20,7 @@ function updateJobProgress(job) {
     let subStepLength = undefined;
     let newError = undefined;
     let newNextInProgress = false;
-    let maxDone = job?.flow_status?.step ?? 0;
+    let maxDone = Math.max(job?.flow_status?.step ?? 0, 0);
     if (modules.length > maxDone) {
         const nextModule = modules[maxDone];
         if (nextModule.type === 'InProgress') {
@@ -32,6 +34,7 @@ function updateJobProgress(job) {
             maxDone = maxDone + 1;
         }
     }
+    subIndexIsPercent = false;
     // Loop is still iterating
     if (module?.iterator) {
         const stepIndex = module.iterator.index || 0;
@@ -45,6 +48,17 @@ function updateJobProgress(job) {
         subStepIndex = module.branchall.branch;
         subStepLength = module.branchall.len;
     }
+    else if (module?.progress) {
+        const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+        subStepIndex = clamp(module?.progress, subIndex ?? 0, 99);
+        //                  Jitter protection >^^^^^^^^
+        subStepLength = 100;
+        subIndexIsPercent = true;
+        currentSubJobProgress = subStepIndex;
+    }
+    else {
+        currentSubJobProgress = undefined;
+    }
     error = newError;
     subLength = subStepLength ? Math.max(subStepLength, 1) : undefined;
     subIndex = subStepIndex;
@@ -71,5 +85,6 @@ export function reset() {
 	{subLength}
 	{subIndex}
 	{error}
+	bind:subIndexIsPercent
 	class={$$props.class}
 />

package/package/components/flows/FlowProgressBar.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         job?: Job | undefined;
+        currentSubJobProgress?: number | undefined;
         reset?: (() => void) | undefined;
     };
     events: {

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -11,9 +11,11 @@ import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import FlowModuleMock from './FlowModuleMock.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import { enterpriseLicense } from '../../../stores';
+import FlowModuleSkip from './FlowModuleSkip.svelte';
 export let noEditor;
 export let flowModule;
 export let previousModule;
+export let parentModule;
 let value = flowModule.value;
 $: value = flowModule.value;
 let selected = 'early-stop';
@@ -71,6 +73,7 @@ let selected = 'early-stop';
 					<Pane size={40}>
 						<Tabs bind:selected>
 							<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>
@@ -82,6 +85,11 @@ let selected = 'early-stop';
 											<FlowModuleEarlyStop bind:flowModule />
 										</div>
 									</TabContent>
+									<TabContent value="skip" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSkip bind:flowModule {parentModule} {previousModule} />
+										</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 />

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         noEditor: boolean;
         flowModule: FlowModule;
         previousModule: FlowModule | undefined;
+        parentModule: FlowModule | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -11,9 +11,11 @@ import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import FlowModuleMock from './FlowModuleMock.svelte';
 import { enterpriseLicense } from '../../../stores';
+import FlowModuleSkip from './FlowModuleSkip.svelte';
 // import FlowRetries from './FlowRetries.svelte'
 export let flowModule;
 export let previousModule;
+export let parentModule;
 export let noEditor;
 export let enableAi = false;
 let value = flowModule.value;
@@ -83,6 +85,7 @@ let selected = 'early-stop';
 					<Pane size={40}>
 						<Tabs bind:selected>
 							<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>
@@ -94,6 +97,11 @@ let selected = 'early-stop';
 											<FlowModuleEarlyStop bind:flowModule />
 										</div>
 									</TabContent>
+									<TabContent value="skip" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSkip bind:flowModule {parentModule} {previousModule} />
+										</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 />

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         flowModule: FlowModule;
         previousModule: FlowModule | undefined;
+        parentModule: FlowModule | undefined;
         noEditor: boolean;
         enableAi?: boolean | undefined;
     };

package/package/components/flows/content/FlowConstants.svelte

@@ -94,7 +94,7 @@ setContext('PropPickerWrapper', {
 					</Alert>
 				{/if}
 			{/if}
-			{#each steps as [args, filter, m] (m.id)}
+			{#each steps as [args, filter, m], index (m.id + index)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -6,8 +6,10 @@ import FlowFailureModule from './FlowFailureModule.svelte';
 import FlowConstants from './FlowConstants.svelte';
 import { initFlowStepWarnings } from '../utils';
 import { dfs } from '../dfs';
+import FlowPreprocessorModule from './FlowPreprocessorModule.svelte';
 export let noEditor = false;
 export let enableAi = false;
+export let disabledFlowInputs = false;
 const { selectedId, flowStore, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
 function checkDup(modules) {
     let seenModules = [];
@@ -40,13 +42,15 @@ onMount(() => {
 {#if $selectedId?.startsWith('settings')}
 	<FlowSettings {noEditor} />
 {:else if $selectedId === 'Input'}
-	<FlowInput {noEditor} />
+	<FlowInput {noEditor} disabled={disabledFlowInputs} />
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants {noEditor} />
 {:else if $selectedId === 'failure'}
 	<FlowFailureModule {noEditor} />
+{:else if $selectedId === 'preprocessor'}
+	<FlowPreprocessorModule {noEditor} />
 {:else}
 	{@const dup = checkDup($flowStore.value.modules)}
 	{#if dup}

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         noEditor?: boolean | undefined;
         enableAi?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;