windmill-components 1.503.1 → 1.503.4

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

@@ -1,5 +1,7 @@
-import type { Flow } from '../../../gen';
+import type { Flow, Job } from '../../../gen';
 import { type Trigger } from '../../triggers/utils';
+import type { Writable } from 'svelte/store';
+import type { DurationStatus } from '../../graph';
 interface Props {
     noEditor?: boolean;
     enableAi?: boolean;
@@ -11,7 +13,15 @@ interface Props {
     onDeployTrigger?: (trigger: Trigger) => void;
     forceTestTab?: Record<string, boolean>;
     highlightArg?: Record<string, string | undefined>;
-    onRunPreview?: () => void;
+    onTestFlow?: () => void;
+    job?: Job;
+    isOwner?: boolean;
+    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    onOpenDetails?: () => void;
 }
 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/FlowInput.svelte

@@ -21,7 +21,7 @@ import SideBarTab from '../../meltComponents/SideBarTab.svelte';
 import CaptureTable from '../../triggers/CaptureTable.svelte';
 import { isObjectTooBig } from '../../../utils';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
-let { noEditor, disabled, onRunPreview } = $props();
+let { noEditor, disabled, onTestFlow } = $props();
 const { flowStore, previewArgs, pathStore, initialPathStore, fakeInitialPath, flowInputEditorState } = getContext('FlowEditorContext');
 let addPropertyV2 = $state(undefined);
 let previewSchema = $state(undefined);
@@ -159,7 +159,7 @@ function runPreview() {
     if (previewArguments) {
         previewArgs.val = structuredClone($state.snapshot(previewArguments));
     }
-    onRunPreview?.();
+    onTestFlow?.();
 }
 function updatePreviewSchemaAndArgs(payload) {
     if (isObjectTooBig(payload)) {

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

@@ -1,7 +1,7 @@
 interface Props {
     noEditor: boolean;
     disabled: boolean;
-    onRunPreview?: () => void;
+    onTestFlow?: () => void;
 }
 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/FlowResult.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import FlowPreviewResult from '../../FlowPreviewResult.svelte';
+import { workspaceStore } from '../../../stores';
+import FlowCard from '../common/FlowCard.svelte';
+import Button from '../../common/button/Button.svelte';
+let { job, isOwner, localDurationStatuses, suspendStatus, noEditor, onOpenDetails } = $props();
+</script>
+
+<FlowCard {noEditor} title="Flow result">
+	{#if job && isOwner !== undefined && localDurationStatuses && suspendStatus}
+		<div class="px-4 py-2">
+			<FlowPreviewResult
+				{job}
+				workspaceId={$workspaceStore}
+				{isOwner}
+				hideFlowResult={false}
+				hideDownloadLogs={false}
+				{localDurationStatuses}
+				innerModules={[]}
+				{suspendStatus}
+				{extra}
+				hideJobId
+			/>
+		</div>
+	{:else}
+		<p class="p-4 text-secondary">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
+		>
+	</div>
+{/snippet}

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

@@ -0,0 +1,17 @@
+import type { DurationStatus } from '../../graph';
+import type { Job } from '../../../gen';
+import type { Writable } from 'svelte/store';
+interface Props {
+    job?: Job;
+    isOwner?: boolean;
+    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    noEditor: boolean;
+    onOpenDetails?: () => void;
+}
+declare const FlowResult: import("svelte").Component<Props, {}, "">;
+type FlowResult = ReturnType<typeof FlowResult>;
+export default FlowResult;

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -4,12 +4,20 @@ import FlowPreviewContent from '../../FlowPreviewContent.svelte';
 import { createEventDispatcher, tick } from 'svelte';
 import { getContext } from 'svelte';
 import { Play } from 'lucide-svelte';
-import { writable } from 'svelte/store';
 import { aiChatManager } from '../../copilot/chat/AIChatManager.svelte';
-let { loading = false } = $props();
+let { loading = false, onRunPreview, onJobDone } = $props();
 const { selectedId } = getContext('FlowEditorContext');
-let previewOpen = $state(false);
+let flowPreviewContent = $state(undefined);
+let preventEscape = $state(false);
+let selectedJobStep = $state(undefined);
+let selectedJobStepIsTopLevel = $state(undefined);
+let selectedJobStepType = $state('single');
+let branchOrIterationN = $state(0);
+let scrollTop = $state(0);
 let previewMode = $state('whole');
+let upToId = $state(undefined);
+let previewOpen = $state(false);
+let deferContent = $state(false);
 export async function openPreview(test = false) {
     if (!previewOpen) {
         previewOpen = true;
@@ -18,50 +26,75 @@ export async function openPreview(test = false) {
         if (!test)
             return;
     }
+    previewMode = 'whole';
     flowPreviewContent?.test();
 }
+export async function runPreview() {
+    if (!previewOpen) {
+        deferContent = true;
+        await tick();
+    }
+    previewMode = 'whole';
+    flowPreviewContent?.refresh();
+    flowPreviewContent?.test();
+}
+export function cancelTest() {
+    flowPreviewContent?.cancelTest();
+}
 const dispatch = createEventDispatcher();
-let flowPreviewContent = $state(undefined);
-let jobId = $state(undefined);
-let job = $state(undefined);
-let preventEscape = $state(false);
-let selectedJobStep = $state(undefined);
-let selectedJobStepIsTopLevel = $state(undefined);
-let selectedJobStepType = $state('single');
-let branchOrIterationN = $state(0);
-let scrollTop = $state(0);
 let rightColumnSelect = $state('timeline');
-let localModuleStates = $state(writable({}));
-let localDurationStatuses = $state(writable({}));
-let upToDisabled = $derived($selectedId == undefined ||
-    [
-        'settings',
-        'settings-metadata',
-        'settings-schedule',
-        'settings-retries',
-        'settings-same-worker',
-        'settings-graph',
-        'settings-worker-group',
-        'settings-cache',
-        'settings-concurrency',
-        'settings-early-stop',
-        'settings-early-return',
-        'inputs',
-        'schedules',
-        'failure',
-        'preprocessor',
-        'constants',
-        'Result',
-        'Input',
-        'triggers'
-    ].includes($selectedId) ||
-    $selectedId?.includes('branch') ||
-    aiChatManager.flowAiChatHelpers?.getModuleAction($selectedId) === 'removed');
-export function testUpTo() {
+let upToDisabled = $derived.by(() => {
+    const upToSelected = upToId ?? $selectedId;
+    return (upToSelected == undefined ||
+        [
+            'settings',
+            'settings-metadata',
+            'settings-schedule',
+            'settings-retries',
+            'settings-same-worker',
+            'settings-graph',
+            'settings-worker-group',
+            'settings-cache',
+            'settings-concurrency',
+            'settings-early-stop',
+            'settings-early-return',
+            'inputs',
+            'schedules',
+            'failure',
+            'preprocessor',
+            'constants',
+            'Result',
+            'Input',
+            'triggers'
+        ].includes(upToSelected) ||
+        upToSelected?.includes('branch') ||
+        aiChatManager.flowAiChatHelpers?.getModuleAction(upToSelected) === 'removed');
+});
+export async function testUpTo(id, openPreview = false) {
+    upToId = id;
     if (upToDisabled)
         return;
+    if (openPreview) {
+        previewOpen = true;
+    }
+    else if (!previewOpen) {
+        deferContent = true;
+        await tick();
+    }
     previewMode = 'upTo';
-    previewOpen = true;
+    flowPreviewContent?.refresh();
+    if (!openPreview) {
+        flowPreviewContent?.test();
+    }
+}
+export function getPreviewMode() {
+    return previewMode;
+}
+export function getPreviewOpen() {
+    return previewOpen;
+}
+export function getFlowPreviewContent() {
+    return flowPreviewContent;
 }
 </script>
 
@@ -81,7 +114,7 @@ export function testUpTo() {
 		? [
 				{
 					label: 'Test up to ' + $selectedId,
-					onClick: testUpTo
+					onClick: () => testUpTo($selectedId, true)
 				}
 			]
 		: undefined}
@@ -90,22 +123,20 @@ export function testUpTo() {
 </Button>
 
 {#if !loading}
-	<Drawer bind:open={previewOpen} size="75%" {preventEscape}>
+	<Drawer bind:open={previewOpen} size="75%" {preventEscape} alwaysOpen={deferContent}>
 		<FlowPreviewContent
 			bind:this={flowPreviewContent}
-			bind:localModuleStates
-			bind:localDurationStatuses
 			open={previewOpen}
 			bind:scrollTop
 			bind:previewMode
-			bind:job
-			bind:jobId
 			bind:selectedJobStep
 			bind:selectedJobStepIsTopLevel
 			bind:selectedJobStepType
 			bind:branchOrIterationN
 			bind:rightColumnSelect
 			on:close={() => {
+				// keep the data in the preview content
+				deferContent = true
 				previewOpen = false
 			}}
 			on:openTriggers={(e) => {
@@ -113,6 +144,10 @@ export function testUpTo() {
 				dispatch('openTriggers', e.detail)
 			}}
 			bind:preventEscape
+			{onRunPreview}
+			render={previewOpen}
+			{onJobDone}
+			{upToId}
 		/>
 	</Drawer>
 {/if}

package/package/components/flows/map/FlowGraphPreviewButton.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { Button } from '../../common';
+import { fade } from 'svelte/transition';
+import { Loader2, Play, X } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import Popover from '../../Popover.svelte';
+let { isRunning, hover, selected, individualStepTests, job, showJobStatus, flowHasChanged, onTestFlow, onCancelTestFlow, onOpenPreview, onHideJobStatus } = $props();
+const flowPreviewJob = $derived(showJobStatus ? job : undefined);
+const wide = $derived(hover || selected || flowPreviewJob || individualStepTests);
+</script>
+
+{#if !isRunning}
+	<Button
+		size="sm"
+		color="dark"
+		btnClasses={twMerge(
+			'relative p-1.5 h-[36px] transition-all duration-200',
+			wide ? 'w-[120px]' : 'w-[44.5px]'
+		)}
+		on:click={() => {
+			onTestFlow?.()
+		}}
+	>
+		{#if isRunning}
+			<Loader2 size={16} class="animate-spin" />
+		{:else}
+			<Play size={16} />
+		{/if}
+		{#if wide}
+			<span transition:fade={{ duration: 100 }} class="text-xs">Test flow</span>
+		{/if}
+	</Button>
+	{#if wide && (flowPreviewJob || individualStepTests)}
+		<div
+			class="flex flex-row items-center shadow-sm rounded-md mt-1"
+			in:fade={{ duration: 100, delay: 200 }}
+			style={`width: ${wide ? '120px' : '44.5px'}`}
+		>
+			<Popover class="grow min-w-0">
+				<button
+					class={twMerge(
+						'text-xs rounded-md rounded-r-none px-1.5 h-[24px] w-full bg-surface flex flex-row items-center gap-2 justify-center transition-all duration-200 ',
+						'hover:bg-surface-hover text-gray-400 hover:text-primary'
+					)}
+					onclick={onOpenPreview}
+				>
+					{#if flowPreviewJob && !flowHasChanged}
+						<div
+							class={twMerge(
+								'rounded-full h-2 w-2',
+								'success' in flowPreviewJob && flowPreviewJob.success
+									? 'bg-green-400'
+									: 'bg-red-400'
+							)}
+							title={'success' in flowPreviewJob && flowPreviewJob.success ? 'Success' : 'Failed'}
+						>
+						</div>
+					{/if}
+					<span class={twMerge('text-xs truncate', flowHasChanged && 'text-orange-600')} dir="rtl">
+						{!individualStepTests && !flowHasChanged && flowPreviewJob
+							? flowPreviewJob.id.slice(-5)
+							: '~'}
+					</span>
+				</button>
+				{#snippet text()}
+					{#if !individualStepTests && !flowHasChanged}
+						See run details
+					{:else}
+						Open preview
+					{/if}
+				{/snippet}
+			</Popover>
+			<button
+				class="h-[24px] px-1.5 bg-surface rounded-md rounded-l-none text-gray-400 hover:bg-red-500 hover:text-white"
+				title="Hide jobs status"
+				onclick={onHideJobStatus}
+			>
+				<X size={14} />
+			</button>
+		</div>
+	{/if}
+{:else}
+	<Button
+		size="xs"
+		color="red"
+		variant="contained"
+		btnClasses="h-[34px] w-[120px] p-1.5"
+		on:click={async () => {
+			onCancelTestFlow?.()
+		}}
+	>
+		<Loader2 size={16} class="animate-spin" />
+		<span transition:fade={{ duration: 100 }} class="text-xs">Cancel</span>
+	</Button>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Job } from '../../../gen';
+interface Props {
+    isRunning?: boolean;
+    hover?: boolean;
+    selected?: boolean;
+    individualStepTests?: boolean;
+    showJobStatus?: boolean;
+    job?: Job;
+    flowHasChanged?: boolean;
+    onTestFlow?: () => void;
+    onCancelTestFlow?: () => void;
+    onOpenPreview?: () => void;
+    onHideJobStatus?: () => void;
+}
+declare const FlowGraphPreviewButton: import("svelte").Component<Props, {}, "">;
+type FlowGraphPreviewButton = ReturnType<typeof FlowGraphPreviewButton>;
+export default FlowGraphPreviewButton;