windmill-components 1.503.1 → 1.503.4

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type FlowModule } from '../../gen';
+import { type FlowModule, type Job } from '../../gen';
 import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
@@ -28,6 +28,15 @@ interface Props {
     editMode?: boolean;
     allowSimplifiedPoll?: boolean;
     expandedSubflows?: Record<string, FlowModule[]>;
+    isOwner?: boolean;
+    isRunning?: boolean;
+    individualStepTests?: boolean;
+    flowJob?: Job | undefined;
+    showJobStatus?: boolean;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
     onDelete?: (id: string) => void;
     onInsert?: (detail: {
         sourceId?: string;
@@ -70,7 +79,14 @@ interface Props {
     onTestUpTo?: ((id: string) => void) | undefined;
     onSelectedIteration?: onSelectedIteration;
     onEditInput?: (moduleId: string, key: string) => void;
+    onTestFlow?: () => void;
+    onCancelTestFlow?: () => void;
+    onOpenPreview?: () => void;
+    onHideJobStatus?: () => void;
+    flowHasChanged?: boolean;
 }
-declare const FlowGraphV2: import("svelte").Component<Props, {}, "expandedSubflows">;
+declare const FlowGraphV2: import("svelte").Component<Props, {
+    isNodeVisible: (nodeId: string) => boolean;
+}, "expandedSubflows">;
 type FlowGraphV2 = ReturnType<typeof FlowGraphV2>;
 export default FlowGraphV2;

package/package/components/graph/ViewportResizer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { useSvelteFlow } from '@xyflow/svelte';
 import { untrack } from 'svelte';
-let { width } = $props();
+import { NODE } from './util';
+let { width, nodes, height } = $props();
 const { setViewport, getViewport } = useSvelteFlow();
 $effect(() => {
     ;
@@ -19,4 +20,35 @@ function onWidthChange(width) {
         x: viewport.x + diff / 2
     });
 }
+/**
+ * Check if a node is fully visible in the current viewport with margin
+ * @param nodeId - The ID of the node to check
+ * @returns boolean - true if node is fully visible with 20px margin, false otherwise
+ */
+export function isNodeVisible(nodeId) {
+    const node = nodes.find((n) => n.id === nodeId);
+    const viewport = getViewport();
+    if (!node || !viewport)
+        return false;
+    const { x, y, zoom } = viewport;
+    const nodeX = node.position.x;
+    const nodeY = node.position.y;
+    // 20px margin scaled by zoom level
+    const margin = 20 / zoom;
+    // Calculate viewport bounds with margin
+    const viewportLeft = -x / zoom + margin;
+    const viewportTop = -y / zoom + margin;
+    const viewportRight = viewportLeft + width / zoom - 2 * margin;
+    const viewportBottom = viewportTop + height / zoom - 2 * margin;
+    // Calculate node bounds
+    const nodeLeft = nodeX;
+    const nodeTop = nodeY;
+    const nodeRight = nodeX + NODE.width;
+    const nodeBottom = nodeY + NODE.height;
+    // Node is visible only if it's completely within viewport bounds with margin
+    return (nodeLeft > viewportLeft &&
+        nodeRight < viewportRight &&
+        nodeTop > viewportTop &&
+        nodeBottom < viewportBottom);
+}
 </script>

package/package/components/graph/ViewportResizer.svelte.d.ts

@@ -1,5 +1,9 @@
 declare const ViewportResizer: import("svelte").Component<{
     width: any;
-}, {}, "">;
+    nodes: any;
+    height: any;
+}, {
+    isNodeVisible: (nodeId: string) => boolean;
+}, "">;
 type ViewportResizer = ReturnType<typeof ViewportResizer>;
 export default ViewportResizer;

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { FlowModule, RawScript, Script } from '../../gen';
+import type { FlowModule, Job, RawScript, Script } from '../../gen';
 import { type Edge } from '@xyflow/svelte';
 import type { GraphModuleState } from './model';
+import type { Writable } from 'svelte/store';
 export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end';
 export type InlineScript = {
     language: RawScript['language'];
@@ -55,6 +56,10 @@ export type GraphEventHandlers = {
     }) => void;
     testUpTo: (id: string) => void;
     editInput: (moduleId: string, key: string) => void;
+    testFlow: () => void;
+    cancelTestFlow: () => void;
+    openPreview: () => void;
+    hideJobStatus: () => void;
 };
 export type SimplifiableFlow = {
     simplifiedFlow: boolean;
@@ -77,6 +82,11 @@ export type InputN = {
         cache: boolean;
         earlyStop: boolean;
         editMode: boolean;
+        isRunning: boolean;
+        individualStepTests: boolean;
+        flowJob: Job | undefined;
+        showJobStatus: boolean;
+        flowHasChanged: boolean;
     };
 };
 export type ModuleN = {
@@ -91,6 +101,8 @@ export type ModuleN = {
         flowModuleStates: Record<string, GraphModuleState> | undefined;
         insertable: boolean;
         editMode: boolean;
+        flowJob: Job | undefined;
+        isOwner: boolean;
     };
 };
 export type BranchAllStartN = {
@@ -143,6 +155,9 @@ export type ResultN = {
     data: {
         success: boolean | undefined;
         eventHandlers: GraphEventHandlers;
+        editMode: boolean;
+        job: Job | undefined;
+        showJobStatus: boolean;
     };
 };
 export type WhileLoopStartN = {
@@ -227,6 +242,16 @@ export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
     cache: boolean;
     earlyStop: boolean;
     editMode: boolean;
+    isOwner: boolean;
+    isRunning: boolean;
+    individualStepTests: boolean;
+    flowJob: Job | undefined;
+    showJobStatus: boolean;
+    suspendStatus: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    flowHasChanged: boolean;
 }, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined, simplifiableFlow: SimplifiableFlow | undefined, flowPathForTriggerNode: string | undefined, expandedSubflows: Record<string, FlowModule[]>): {
     nodes: NodeLayout[];
     edges: Edge[];

package/package/components/graph/graphBuilder.svelte.js

@@ -57,7 +57,9 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     moving: moving,
                     flowModuleStates: extra.flowModuleStates,
                     insertable: extra.insertable,
-                    editMode: extra.editMode
+                    editMode: extra.editMode,
+                    isOwner: extra.isOwner,
+                    flowJob: extra.flowJob
                 },
                 type: 'module'
             });
@@ -132,7 +134,12 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 disableAi: extra.disableAi,
                 cache: extra.cache,
                 earlyStop: extra.earlyStop,
-                editMode: extra.editMode
+                editMode: extra.editMode,
+                isRunning: extra.isRunning,
+                individualStepTests: extra.individualStepTests,
+                flowJob: extra.flowJob,
+                showJobStatus: extra.showJobStatus,
+                flowHasChanged: extra.flowHasChanged
             }
         };
         let triggerNode = undefined;
@@ -165,7 +172,10 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
             id: 'result',
             data: {
                 eventHandlers: eventHandlers,
-                success: success
+                success: success,
+                editMode: extra.editMode,
+                job: extra.flowJob,
+                showJobStatus: extra.showJobStatus
             },
             type: 'result'
         };

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 import { getBezierPath, BaseEdge, EdgeLabel } from '@xyflow/svelte';
-import { ClipboardCopy } from 'lucide-svelte';
+import { ClipboardCopy, Hourglass } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
+import { workspaceStore } from '../../../../stores';
+import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 const { useDataflow } = getContext('FlowGraphContext');
 let { 
 // id,
@@ -22,10 +24,15 @@ let [edgePath] = $derived(getBezierPath({
 let completeEdge = $derived(targetY - sourceY > 100
     ? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
     : edgePath);
+// TODO: this is a hack to show the waiting for events indicator on the edge a proper way would be to have a edge state
+// and handle the edge state in the graph builder
+let waitingForEvents = $derived(data?.flowModuleStates?.[data.targetId]?.type === 'WaitingForEvents' ||
+    data?.flowModuleStates?.[`${data.sourceId}-v`]?.type === 'WaitingForEvents');
+const suspendStatus = $derived(data?.suspendStatus);
 </script>
 
 <EdgeLabel x={sourceX} y={sourceY + 28} class="base-edge" style="">
-	{#if data?.insertable && !$useDataflow && !data?.moving}
+	{#if data?.insertable && !$useDataflow && !data?.moving && !waitingForEvents}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}
 			style:transform="translate(-50%, -50%)"
@@ -95,6 +102,42 @@ let completeEdge = $derived(targetY - sourceY > 100
 			{/if}
 		</div>
 	{/if}
+
+	{#if waitingForEvents && data.flowJob && data.flowJob.type === 'QueuedJob'}
+		<div
+			class="px-2 py-0.5 rounded-md bg-surface shadow-md text-violet-700 dark:text-violet-400 text-xs flex items-center gap-1"
+		>
+			<Hourglass size={12} />
+			<div class="flex">
+				<span class="dot">.</span>
+				<span class="dot">.</span>
+				<span class="dot">.</span>
+			</div>
+		</div>
+		<div
+			class={'fixed top-1/2 -translate-y-1/2 left-[170px] h-fit w-fit rounded-md bg-surface flex items-center justify-center p-2 ml-2 shadow-md'}
+		>
+			{#if data?.flowJob && data.flowJob.flow_status?.modules?.[data.flowJob.flow_status?.step]?.type === 'WaitingForEvents'}
+				<FlowStatusWaitingForEvents
+					job={data.flowJob}
+					workspaceId={$workspaceStore!}
+					isOwner={data.isOwner}
+					light
+				/>
+			{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}
+				<div class="flex gap-2 flex-col">
+					{#each Object.values($suspendStatus) as suspendCount (suspendCount.job.id)}
+						<FlowStatusWaitingForEvents
+							job={suspendCount.job}
+							workspaceId={$workspaceStore!}
+							isOwner={data.isOwner}
+							light
+						/>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
 </EdgeLabel>
 
 <BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />
@@ -106,4 +149,28 @@ let completeEdge = $derived(targetY - sourceY > 100
 		/* everything inside EdgeLabelRenderer has no pointer events by default */
 		/* if you have an interactive element, set pointer-events: all */
 		pointer-events: all;
+	}
+
+	.dot {
+		opacity: 0;
+		animation: dotFade 1.5s infinite;
+		letter-spacing: 1px;
+	}
+
+	.dot:nth-child(2) {
+		animation-delay: 0.5s;
+	}
+
+	.dot:nth-child(3) {
+		animation-delay: 1s;
+	}
+
+	@keyframes dotFade {
+		0%,
+		100% {
+			opacity: 0;
+		}
+		50% {
+			opacity: 1;
+		}
 	}</style>

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -1,5 +1,8 @@
 import { BaseEdge, type EdgeProps } from '@xyflow/svelte';
+import type { Writable } from 'svelte/store';
 import type { GraphEventHandlers } from '../../graphBuilder.svelte';
+import type { Job } from '../../../../gen';
+import type { GraphModuleState } from '../../model';
 type $$ComponentProps = EdgeProps & {
     data: {
         insertable: boolean;
@@ -12,6 +15,13 @@ type $$ComponentProps = EdgeProps & {
         enableTrigger: boolean;
         disableAi: boolean;
         disableMoveIds: string[];
+        flowModuleStates: Record<string, GraphModuleState> | undefined;
+        isOwner: boolean;
+        flowJob: Job | undefined;
+        suspendStatus?: Writable<Record<string, {
+            job: Job;
+            nb: number;
+        }>>;
     };
 };
 declare const BaseEdge: import("svelte").Component<$$ComponentProps, {}, "">;

package/package/components/graph/renderers/nodes/InputNode.svelte

@@ -54,11 +54,29 @@ let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.sch
 			}}
 			inputJson={topFlowInput}
 			prefix="flow_input"
-			alwaysPluggable
+			nodeKind="input"
 			cache={data.cache}
 			earlyStop={data.earlyStop}
 			editMode={data.editMode}
 			onEditInput={data.eventHandlers.editInput}
+			onTestFlow={() => {
+				data.eventHandlers.testFlow()
+			}}
+			isRunning={data.isRunning}
+			onCancelTestFlow={() => {
+				data.eventHandlers.cancelTestFlow()
+			}}
+			onOpenPreview={() => {
+				data.eventHandlers.openPreview()
+			}}
+			onHideJobStatus={() => {
+				data.eventHandlers.hideJobStatus()
+			}}
+			individualStepTests={data.individualStepTests}
+			job={data.flowJob}
+			showJobStatus={data.showJobStatus}
+			flowHasChanged={data.flowHasChanged}
+			{darkMode}
 		/>
 	{/snippet}
 </NodeWrapper>

package/package/components/graph/renderers/nodes/ModuleNode.svelte

@@ -53,8 +53,18 @@ let type = $derived.by(() => {
 					'/' +
 					(moduleState?.iteration_total ?? '?')
 				: ''}
-			bgColor={getStateColor(type, darkMode, true, moduleState?.skipped)}
-			bgHoverColor={getStateHoverColor(type, darkMode, true, moduleState?.skipped)}
+			bgColor={getStateColor(
+				data.editMode ? undefined : type,
+				darkMode,
+				true,
+				moduleState?.skipped
+			)}
+			bgHoverColor={getStateHoverColor(
+				data.editMode ? undefined : type,
+				darkMode,
+				true,
+				moduleState?.skipped
+			)}
 			moving={data.moving}
 			duration_ms={moduleState?.duration_ms}
 			retries={moduleState?.retries}
@@ -82,6 +92,11 @@ let type = $derived.by(() => {
 				data.eventHandlers.updateMock(detail)
 			}}
 			onEditInput={data.eventHandlers.editInput}
+			flowJob={data.flowJob}
+			isOwner={data.isOwner}
+			{type}
+			{darkMode}
+			skipped={moduleState?.skipped}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">

package/package/components/graph/renderers/nodes/ResultNode.svelte

@@ -4,6 +4,7 @@ import { getStateColor, getStateHoverColor } from '../../util';
 import { getContext } from 'svelte';
 let { data } = $props();
 const { selectedId } = getContext('FlowGraphContext');
+const type = $derived(data.success == undefined ? undefined : data.success ? 'Success' : 'Failure');
 </script>
 
 <NodeWrapper enableSourceHandle={false}>
@@ -14,17 +15,17 @@ const { selectedId } = getContext('FlowGraphContext');
 			selectable={true}
 			selected={$selectedId === 'Result'}
 			hideId={true}
-			bgColor={getStateColor(
-				data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
-				darkMode
-			)}
-			bgHoverColor={getStateHoverColor(
-				data.success == undefined ? undefined : data.success ? 'Success' : 'Failure',
-				darkMode
-			)}
+			bgColor={getStateColor(type, darkMode)}
+			bgHoverColor={getStateHoverColor(type, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
+			nodeKind="result"
+			editMode={data.editMode}
+			job={data.job}
+			{type}
+			showJobStatus={data.showJobStatus}
+			{darkMode}
 		/>
 	{/snippet}
 </NodeWrapper>

package/package/components/modulesTest.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Job } from '../gen';
+type moduleTestState = {
+    loading: boolean;
+    cancel?: () => Promise<void>;
+    testJob?: Job;
+};
+export declare class ModulesTestStates {
+    states: Record<string, moduleTestState>;
+    runTestCb?: (moduleId: string) => void;
+    constructor(runTestCb?: (moduleId: string) => void);
+}
+export {};

package/package/components/modulesTest.svelte.js

@@ -0,0 +1,8 @@
+export class ModulesTestStates {
+    states = $state({});
+    runTestCb;
+    constructor(runTestCb) {
+        this.states = {};
+        this.runTestCb = runTestCb;
+    }
+}

package/package/components/preview/FlowPreviewStatus.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">import { base } from '../../base';
 import JobStatus from '../JobStatus.svelte';
 import { ExternalLinkIcon } from 'lucide-svelte';
-import { getContext } from 'svelte';
 import { truncateRev } from '../../utils';
-export let job;
-let { hideJobId } = getContext('FlowStatusViewer');
+import { twMerge } from 'tailwind-merge';
+let { job, hideJobId = false, extra } = $props();
 </script>
 
-<div class="grid grid-cols-2 gap-4 mb-1 text-tertiary dark:text-gray-400">
+<div
+	class={twMerge(
+		'grid grid-cols-2 gap-4 mb-1 text-tertiary dark:text-gray-400',
+		extra && job && !hideJobId ? 'grid-cols-3' : 'grid-cols-2'
+	)}
+>
 	<JobStatus {job} />
 	{#if job && !hideJobId}
 		<div>
@@ -24,4 +28,5 @@ let { hideJobId } = getContext('FlowStatusViewer');
 			</div>
 		</div>
 	{/if}
+	{@render extra?.()}
 </div>

package/package/components/preview/FlowPreviewStatus.svelte.d.ts

@@ -1,21 +1,9 @@
 import type { CompletedJob, QueuedJob } from '../../gen';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowPreviewStatus: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     job: QueuedJob | CompletedJob;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowPreviewStatus = InstanceType<typeof FlowPreviewStatus>;
+    hideJobId?: boolean;
+    extra?: import('svelte').Snippet;
+}
+declare const FlowPreviewStatus: import("svelte").Component<Props, {}, "">;
+type FlowPreviewStatus = ReturnType<typeof FlowPreviewStatus>;
 export default FlowPreviewStatus;

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
 let { schema: oldSchema, ...props } = $props();
 let schema = $state(oldSchema);
+$effect(() => {
+    schema = oldSchema;
+});
 </script>
 
 <EditableSchemaWrapper {schema} {...props} />

package/package/components/workspaceSettings/AISettings.svelte

@@ -163,6 +163,7 @@ async function onAiProviderChange(provider) {
 								<!-- this can be removed once the parent component moves to runes -->
 								<!-- svelte-ignore binding_property_non_reactive -->
 								<ResourcePicker
+									selectFirst
 									resourceType={provider === 'openai' && usingOpenaiClientCredentialsOauth
 										? 'openai_client_credentials_oauth'
 										: provider}

package/package/gen/schemas.gen.d.ts

@@ -1630,9 +1630,6 @@ export declare const $AuditLog: {
         readonly parameters: {
             readonly type: "object";
         };
-        readonly span: {
-            readonly type: "string";
-        };
     };
     readonly required: readonly ["id", "timestamp", "username", "operation", "action_kind"];
 };

package/package/gen/schemas.gen.js

@@ -1664,9 +1664,6 @@ export const $AuditLog = {
         },
         parameters: {
             type: 'object'
-        },
-        span: {
-            type: 'string'
         }
     },
     required: ['id', 'timestamp', 'username', 'operation', 'action_kind']

package/package/gen/types.gen.d.ts

@@ -518,7 +518,6 @@ export type AuditLog = {
     parameters?: {
         [key: string]: unknown;
     };
-    span?: string;
 };
 export type MainArgSignature = {
     type: 'Valid' | 'Invalid';

package/package/utils.js

@@ -322,6 +322,8 @@ export function pointerDownOutside(node, options) {
                     event.stopPropagation();
                 }
                 node.dispatchEvent(new CustomEvent('pointerdown_outside', { detail: event }));
+                if (typeof options === 'object')
+                    options.onClickOutside?.(event);
                 return false;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.503.1",
+	"version": "1.503.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

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

@@ -1,26 +0,0 @@
-interface Props {
-    loading?: boolean;
-}
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowPreviewButtons: $$__sveltets_2_IsomorphicComponent<Props, {
-    openTriggers: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    openPreview: (test?: boolean) => Promise<void>;
-    testUpTo: () => void;
-}, "">;
-type FlowPreviewButtons = InstanceType<typeof FlowPreviewButtons>;
-export default FlowPreviewButtons;