windmill-components 1.379.4 → 1.382.3

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

@@ -1,13 +1,16 @@
-<script>import HighlightCode from '../../HighlightCode.svelte';
+<script>import DiffEditor from '../../DiffEditor.svelte';
+import HighlightCode from '../../HighlightCode.svelte';
 import TimeAgo from '../../TimeAgo.svelte';
 import { ScriptService } from '../../../gen';
-import { getScriptByPath } from '../../../scripts';
+import { getScriptByPath, scriptLangToEditorLang } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
 export let path;
 export let hash = undefined;
+export let previousHash = undefined;
 export let showDate = false;
 export let showAllCode = true;
 let code;
+let previousCode;
 let language;
 let lock = undefined;
 let date = undefined;
@@ -28,10 +31,24 @@ async function loadCode(path, hash) {
         console.error(e);
     }
 }
+async function loadPreviousCode(previousHash) {
+    try {
+        const previousScript = await ScriptService.getScriptByHash({
+            workspace: $workspaceStore,
+            hash: previousHash
+        });
+        previousCode = previousScript.content;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
 $: path && loadCode(path, hash);
+$: path && previousHash && loadPreviousCode(previousHash);
 function toggleShowAll() {
     showAllCode = !showAllCode;
 }
+export let showDiff = false;
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -41,7 +58,20 @@ function toggleShowAll() {
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
-		<HighlightCode {language} {code} />
+		{#if showDiff}
+			{#key previousCode + code}
+				<DiffEditor
+					class="h-screen"
+					readOnly
+					automaticLayout
+					defaultLang={scriptLangToEditorLang(language)}
+					defaultOriginal={previousCode}
+					defaultModified={code}
+				/>
+			{/key}
+		{:else}
+			<HighlightCode {language} {code} />
+		{/if}
 	{:else}
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />

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

@@ -3,8 +3,10 @@ declare const __propDef: {
     props: {
         path: string;
         hash?: string | undefined;
+        previousHash?: string | undefined;
         showDate?: boolean | undefined;
         showAllCode?: boolean | undefined;
+        showDiff?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -106,6 +106,21 @@ let jsonView = false;
 					<SecondsInput disabled />
 				{/if}
 			</Label>
+
+			<Toggle
+				options={{
+					right: 'Continue on disapproval/timeout',
+					rightTooltip:
+						'Instead of failing the flow and bubbling up the error, continue to the next step which would allow to put a branchone right after to handle both cases separately. If any disapproval/timeout event is received, the resume payload will be similar to every error result in Winmdill, an object containing an `error` field which you can use to distinguish between approvals and disapproval/timeouts'
+				}}
+				checked={Boolean(flowModule.suspend?.continue_on_disapprove_timeout)}
+				disabled={!Boolean(flowModule.suspend)}
+				on:change={(e) => {
+					if (flowModule.suspend) {
+						flowModule.suspend.continue_on_disapprove_timeout = e.detail
+					}
+				}}
+			/>
 		</div>
 	{:else if suspendTabSelected === 'permissions'}
 		<div class="flex flex-col mt-4 gap-4">

package/package/components/flows/content/FlowSettings.svelte

@@ -23,7 +23,7 @@ import ErrorHandlerToggleButton from '../../details/ErrorHandlerToggleButton.sve
 import WorkerTagPicker from '../../WorkerTagPicker.svelte';
 import MetadataGen from '../../copilot/MetadataGen.svelte';
 export let noEditor;
-const { selectedId, flowStore, initialPath, previewArgs, pathStore, schedule } = getContext('FlowEditorContext');
+const { selectedId, flowStore, initialPath, previewArgs, pathStore, schedule, customUi } = getContext('FlowEditorContext');
 let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
 $: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$pathStore}`;
 $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$pathStore}`;
@@ -42,22 +42,33 @@ let dirtyPath = false;
 		<div class="h-full flex-1">
 			<Tabs bind:selected={$selectedId}>
 				<Tab value="settings-metadata">Metadata</Tab>
-				{#if !noEditor}
+				{#if !noEditor && customUi?.settingsTabs?.schedule != false}
 					<Tab value="settings-schedule" active={$schedule.enabled}>Schedule</Tab>
 				{/if}
-				<Tab value="settings-same-worker" active={$flowStore.value.same_worker}>
-					Shared Directory
-				</Tab>
-				<Tab value="settings-early-stop" active={Boolean($flowStore.value.skip_expr)}>
-					Early Stop
-				</Tab>
-				<Tab value="settings-early-return" active={Boolean($flowStore.value.early_return)}>
-					Early Return
-				</Tab>
-				<Tab value="settings-worker-group">Worker Group</Tab>
-				<Tab value="settings-concurrency">Concurrency</Tab>
-				<Tab value="settings-cache" active={Boolean($flowStore.value.cache_ttl)}>Cache</Tab>
-
+				{#if customUi?.settingsTabs?.sharedDiretory != false}
+					<Tab value="settings-same-worker" active={$flowStore.value.same_worker}>
+						Shared Directory
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.earlyStop != false}
+					<Tab value="settings-early-stop" active={Boolean($flowStore.value.skip_expr)}>
+						Early Stop
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.earlyReturn != false}
+					<Tab value="settings-early-return" active={Boolean($flowStore.value.early_return)}>
+						Early Return
+					</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.workerGroup != false}
+					<Tab value="settings-worker-group">Worker Group</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.concurrency != false}
+					<Tab value="settings-concurrency">Concurrency</Tab>
+				{/if}
+				{#if customUi?.settingsTabs?.cache != false}
+					<Tab value="settings-cache" active={Boolean($flowStore.value.cache_ttl)}>Cache</Tab>
+				{/if}
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">
 						<Section label="Metadata">

package/package/components/flows/flowExplorer.js

@@ -72,6 +72,9 @@ function getModuleExprs(x) {
         if (x.stop_after_if?.expr) {
             exprs.push(x.stop_after_if.expr);
         }
+        if (x.stop_after_all_iters_if?.expr) {
+            exprs.push(x.stop_after_all_iters_if.expr);
+        }
         exprs.push(...getExpr(x.sleep));
     }
     return exprs;

package/package/components/flows/flowInfers.js

@@ -26,7 +26,7 @@ export async function loadSchemaFromModule(module) {
         if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
             input_transforms = keys.reduce((accu, key) => {
                 let nv = input_transforms[key] ??
-                    (module.id == 'failure' && ['message', 'name'].includes(key)
+                    (module.id == 'failure' && ['message', 'name', 'step_id'].includes(key)
                         ? { type: 'javascript', expr: `error.${key}` }
                         : {
                             type: 'static',

package/package/components/flows/map/FlowJobsMenu.svelte

@@ -1,6 +1,7 @@
-<script>import { Menu } from '../../common';
+<script>import Menu from '../../common/menu/MenuV2.svelte';
 import { createEventDispatcher } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
 const dispatch = createEventDispatcher();
 export let open = undefined;
 export let index;
@@ -20,50 +21,44 @@ function onKeydown(event) {
 }
 </script>
 
-<Menu
-	transitionDuration={0}
-	pointerDown
-	bind:show={open}
-	noMinW
-	placement="bottom-center"
-	let:close
->
-	<button
-		title="Pick an iteration"
-		slot="trigger"
-		id={`flow-editor-iteration picker-${index}`}
-		type="button"
-		class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
+<Menu>
+	<div slot="trigger">
+		<button
+			title="Pick an iteration"
+			id={`flow-editor-iteration picker-${index}`}
+			type="button"
+			class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
 		hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]
 		flex items-center justify-center {flowJobsSuccess?.[selected] == false
-			? 'text-red-400'
-			: 'text-secondary'}"
-	>
-		#{selected == -1 ? '?' : selected + 1}
-		<ListFilter size={15} />
-	</button>
-	<div id="flow-editor-insert-module">
-		<div class="font-mono divide-y text-xs w-full text-secondary max-h-[200px] overflow-auto">
-			<input autofocus type="number" bind:value={filter} on:keydown={onKeydown} />
-			{#each flowJobs ?? [] as id, idx (id)}
-				{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
-					<button
-						class="w-full text-left py-1 pl-2 min-w-20 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
-							idx
-						] == false
-							? 'text-red-400'
-							: ''}"
-						on:pointerdown={() => {
-							close()
-							dispatch('selectedIteration', { index: idx, id })
-						}}
-						role="menuitem"
-						tabindex="-1"
-					>
-						#{idx + 1}
-					</button>
-				{/if}
-			{/each}
-		</div>
+				? 'text-red-400'
+				: 'text-secondary'}"
+		>
+			#{selected == -1 ? '?' : selected + 1}
+			<ListFilter size={15} />
+		</button>
 	</div>
+	<MenuItem disabled>
+		<input type="number" bind:value={filter} on:keydown={onKeydown} />
+	</MenuItem>
+	{#each flowJobs ?? [] as id, idx (id)}
+		{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
+			<MenuItem>
+				<button
+					class="text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
+						idx
+					] == false
+						? 'text-red-400'
+						: ''}"
+					on:pointerdown={() => {
+						//close()
+						dispatch('selectedIteration', { index: idx, id })
+					}}
+					role="menuitem"
+					tabindex="-1"
+				>
+					#{idx + 1}
+				</button>
+			</MenuItem>
+		{/if}
+	{/each}
 </Menu>

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -126,9 +126,8 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
-			<span class="mr-2" />
 		{/if}
-		<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+		<div class="truncate" class:font-bold={bold}>{label}</div>
 		<div class="flex items-center space-x-2">
 			{#if id}
 				<Badge color="indigo">{id}</Badge>

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -4,7 +4,6 @@ import { emptyFlowModuleState, initFlowStepWarnings } from '../utils';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowConstantsItem from './FlowConstantsItem.svelte';
 import { dfs } from '../dfs';
-import { FlowGraph } from '../../graph';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import { push } from '../../../history';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
@@ -15,6 +14,7 @@ import { copilotInfo, tutorialsToDo } from '../../../stores';
 import FlowTutorials from '../../FlowTutorials.svelte';
 import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../tutorialUtils';
+import FlowGraphV2 from '../../graph/FlowGraphV2.svelte';
 export let modules;
 export let sidebarSize = undefined;
 export let disableStaticInputs = false;
@@ -203,13 +203,12 @@ async function updateFlowInputsStore() {
 	</div>
 
 	<div class="z-10 flex-auto grow" bind:clientHeight={minHeight}>
-		<FlowGraph
+		<FlowGraphV2
 			{disableAi}
 			insertable
 			scroll
 			{minHeight}
 			moving={$moving?.module.id}
-			rebuildOnChange={$flowStore}
 			maxHeight={minHeight}
 			modules={$flowStore.value?.modules}
 			{selectedId}
@@ -219,7 +218,9 @@ async function updateFlowInputsStore() {
 				dependents = getDependentComponents(e.id, $flowStore)
 				const cb = () => {
 					push(history, $flowStore)
+
 					selectNextId(e.id)
+
 					removeAtId($flowStore.value.modules, e.id)
 
 					if ($flowInputsStore) {

package/package/components/flows/map/InsertModuleButton.svelte

@@ -3,6 +3,7 @@ import { createEventDispatcher, getContext } from 'svelte';
 import { CheckCircle2, Code, Cross, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
 import StepGen from '../../copilot/StepGen.svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let trigger = false;
 export let stop = false;
@@ -23,15 +24,21 @@ let customUi = getContext('customUi');
 	placement="bottom-center"
 	let:close
 >
-	<button
-		title="Add step"
-		slot="trigger"
-		id={`flow-editor-add-step-${index}`}
-		type="button"
-		class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-	>
-		<Cross class="mx-[5px]" size={15} />
-	</button>
+	<svelte:fragment slot="trigger">
+		<button
+			title="Add step"
+			id={`flow-editor-add-step-${index}`}
+			type="button"
+			class={twMerge(
+				'w-6 h-6 flex items-center justify-center',
+				'border border-gray-300 dark:border-gray-500',
+				'text-primary text-sm',
+				'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
+			)}
+		>
+			<Cross size={14} />
+		</button>
+	</svelte:fragment>
 	<div id="flow-editor-insert-module">
 		<StepGen on:insert {index} bind:funcDesc bind:open {close} {modules} {disableAi} />
 

package/package/components/flows/map/MapItem.svelte

@@ -1,26 +1,20 @@
 <script>import { Button } from '../../common';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 import IconedResourceType from '../../IconedResourceType.svelte';
-import { Building, ClipboardCopy, GitBranchPlus, Repeat, Square, ArrowDown, GitBranch } from 'lucide-svelte';
+import { Building, Repeat, Square, ArrowDown, GitBranch } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
-import InsertModuleButton from './InsertModuleButton.svelte';
 import { prettyLanguage } from '../../../common';
 import { msToSec } from '../../../utils';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
 export let mod;
-export let trigger;
 export let insertable;
-export let insertableEnd = false;
 export let annotation = undefined;
-export let branchable = false;
 export let bgColor = '';
 export let modules;
 export let moving = undefined;
 export let duration_ms = undefined;
-export let disableAi = false;
-export let wrapperId = undefined;
 export let retries = undefined;
 export let flowJobs;
 $: idx = modules.findIndex((m) => m.id === mod.id);
@@ -29,7 +23,7 @@ const dispatch = createEventDispatcher();
 $: itemProps = {
     selected: $selectedId === mod.id,
     retry: mod.retry?.constant != undefined || mod.retry?.exponential != undefined,
-    earlyStop: mod.stop_after_if != undefined,
+    earlyStop: mod.stop_after_if != undefined || mod.stop_after_all_iters_if != undefined,
     suspend: Boolean(mod.suspend),
     sleep: Boolean(mod.sleep),
     cache: Boolean(mod.cache_ttl),
@@ -39,46 +33,9 @@ $: itemProps = {
 function onDelete(event) {
     dispatch('delete', event);
 }
-let openMenu = undefined;
-let openMenu2 = undefined;
 </script>
 
 {#if mod}
-	{#if insertable}
-		<div
-			class="{openMenu
-				? 'z-20'
-				: ''} w-[27px] absolute -top-[35px] left-[50%] right-[50%] -translate-x-1/2"
-		>
-			{#if moving}
-				<button
-					title="Add branch"
-					on:click={() => {
-						dispatch('insert', { modules, index: idx, detail: 'move' })
-					}}
-					type="button"
-					disabled={wrapperId === moving}
-					class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-				>
-					<ClipboardCopy class="m-[5px]" size={15} />
-				</button>
-			{:else}
-				<InsertModuleButton
-					{disableAi}
-					bind:open={openMenu}
-					{trigger}
-					on:insert={(e) => {
-						dispatch('insert', { modules, index: idx + 1, detail: 'script', script: e.detail })
-					}}
-					on:new={(e) => {
-						dispatch('insert', { modules, index: idx, detail: e.detail })
-					}}
-					index={idx}
-					{modules}
-				/>
-			{/if}
-		</div>
-	{/if}
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
@@ -98,8 +55,8 @@ let openMenu2 = undefined;
 				{annotation}
 			</div>
 		{/if}
-		{#if flowJobs && !insertable}
-			<div class="absolute z-10 right-8 -top-5">
+		{#if flowJobs && !insertable && (mod.value.type === 'forloopflow' || mod.value.type === 'whileloopflow')}
+			<div class="absolute right-8 z-50 -top-5">
 				<FlowJobsMenu
 					on:selectedIteration={(e) => {
 						dispatch('selectedIteration', e.detail)
@@ -212,55 +169,4 @@ let openMenu2 = undefined;
 			{/if}
 		</div>
 	</div>
-	{#if insertable && insertableEnd}
-		<div
-			class="{openMenu2
-				? 'z-20'
-				: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
-		>
-			{#if moving}
-				<button
-					title="Add branch"
-					on:click={() => {
-						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
-					}}
-					type="button"
-					disabled={wrapperId === moving}
-					class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-				>
-					<ClipboardCopy class="m-[5px]" size={15} />
-				</button>
-			{:else}
-				<InsertModuleButton
-					{disableAi}
-					bind:open={openMenu2}
-					{trigger}
-					on:insert={(e) => {
-						dispatch('insert', { modules, index: idx + 1, detail: 'script', script: e.detail })
-					}}
-					on:new={(e) => {
-						dispatch('insert', { modules, index: idx + 1, detail: e.detail })
-					}}
-					index={idx + 1}
-					{modules}
-				/>
-			{/if}
-		</div>
-	{/if}
-
-	{#if insertable && branchable}
-		<div class="w-[27px] absolute top-[45px] left-[60%] right-[40%] -translate-x-1/2">
-			<button
-				title="Add branch"
-				on:click={() => {
-					dispatch('newBranch', { module: mod })
-				}}
-				type="button"
-				id="add-branch-button"
-				class=" text-primary bg-surface border mx-[1px] rotate-180 dark:border-gray-500 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-			>
-				<GitBranchPlus class="m-[5px]" size={15} />
-			</button>
-		</div>
-	{/if}
 {/if}

package/package/components/flows/map/MapItem.svelte.d.ts

@@ -3,17 +3,12 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;
-        trigger: boolean;
         insertable: boolean;
-        insertableEnd?: boolean | undefined;
         annotation?: string | undefined;
-        branchable?: boolean | undefined;
         bgColor?: string | undefined;
         modules: FlowModule[];
         moving?: string | undefined;
         duration_ms?: number | undefined;
-        disableAi?: boolean | undefined;
-        wrapperId?: string | undefined;
         retries?: number | undefined;
         flowJobs: {
             flowJobs: string[];