windmill-components 1.655.2 → 1.665.0

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -1,5 +1,5 @@
 import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
-import { type Job, type FlowModuleValue, type CompletedJob } from '../gen';
+import { type Job, type FlowModuleValue, type CompletedJob, type FlowNote, type FlowValue } from '../gen';
 import { type DurationStatus, type GraphModuleState } from './graph';
 interface Props {
     jobId: string;
@@ -67,6 +67,9 @@ interface Props {
     };
     showLogsWithResult?: boolean;
     showJobDetailHeader?: boolean;
+    hideFlowResult?: boolean;
+    notes?: FlowNote[];
+    groups?: FlowValue['groups'];
 }
 export type FlowModuleForTimeline = {
     id: string;

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -9,10 +9,8 @@ import { Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
 import { twMerge } from 'tailwind-merge';
 import { untrack } from 'svelte';
-let { isOwner, workspaceId, job, light = false } = $props();
+let { isOwner: _isOwner, workspaceId, job, light = false } = $props();
 let default_payload = $state({});
-let resumeUrl = $state(undefined);
-let cancelUrl = $state(undefined);
 let description = $state(undefined);
 let hide_cancel = $state(false);
 let defaultValues = $state({});
@@ -35,70 +33,27 @@ async function getDefaultArgs() {
     description = job_result?.description;
     defaultValues = JSON.parse(JSON.stringify(args));
     default_payload = args;
-    resumeUrl = job_result?.['resume'];
-    cancelUrl = job_result?.['cancel'];
     hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
     schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
 }
 let loading = $state(false);
 async function continu(approve) {
     loading = true;
-    if ((resumeUrl && approve) || (cancelUrl && !approve)) {
-        let split = (approve ? resumeUrl : cancelUrl).split('/');
-        let signatureUrl = split.pop() ?? '';
-        const regex = /([^?]+)(?:\?[^=]+=(\w+))?/;
-        const matches = signatureUrl.match(regex);
-        const signature = matches?.[1];
-        if (!signature) {
-            sendUserToast(`Could not parse signature: ${signatureUrl}`, true);
-            return;
-        }
-        const approver = matches?.[2] || undefined;
-        let resumeId = -1;
-        let parsedResumeId = split.pop() ?? '';
-        try {
-            resumeId = new Number(parsedResumeId).valueOf();
-        }
-        catch (e) {
-            console.error(`Could not parse resume id: ${parsedResumeId}`);
-        }
-        let jobId = split.pop() ?? '';
-        if (approve) {
-            await JobService.resumeSuspendedJobPost({
-                workspace: workspaceId ?? $workspaceStore ?? '',
-                id: jobId,
-                requestBody: default_payload,
-                resumeId,
-                signature,
-                approver
-            });
-        }
-        else {
-            await JobService.cancelSuspendedJobPost({
-                workspace: workspaceId ?? $workspaceStore ?? '',
-                id: jobId,
-                resumeId,
-                signature,
-                approver,
-                requestBody: {}
-            });
-        }
+    try {
+        await JobService.resumeSuspended({
+            workspace: workspaceId ?? $workspaceStore ?? '',
+            jobId: job?.id ?? '',
+            requestBody: {
+                payload: approve ? default_payload : undefined,
+                approved: approve
+            }
+        });
     }
-    else {
-        if (approve) {
-            await JobService.resumeSuspendedFlowAsOwner({
-                workspace: workspaceId ?? $workspaceStore ?? '',
-                id: job?.id ?? '',
-                requestBody: default_payload
-            });
-        }
-        else {
-            await JobService.cancelQueuedJob({
-                workspace: workspaceId ?? $workspaceStore ?? '',
-                id: job?.id ?? '',
-                requestBody: {}
-            });
-        }
+    catch (e) {
+        sendUserToast(e?.body ?? e?.message ?? 'Failed', true);
+    }
+    finally {
+        loading = false;
     }
 }
 let approvalStep = $derived((job?.flow_status?.step ?? 1) - 1);
@@ -113,51 +68,41 @@ $effect(() => {
 		<div class="mt-2"></div>
 	{/if}
 	<div>
-		{#if isOwner || resumeUrl}
-			<div class={twMerge('flex gap-2', light ? 'flex-col' : 'flex-row ')}>
-				{#if !hide_cancel}
-					<div>
-						<Button
-							title="Cancel the step"
-							{loading}
-							iconOnly
-							startIcon={{ icon: X }}
-							variant="default"
-							disabled={!cancelUrl}
-							destructive
-							unifiedSize="md"
-							on:click={() => continu(false)}
-						/>
-					</div>
-				{/if}
+		<div class={twMerge('flex gap-2', light ? 'flex-col' : 'flex-row ')}>
+			{#if !hide_cancel}
 				<div>
-					<Button variant="accent" onClick={() => continu(true)} {loading} unifiedSize="md">
-						Resume
-						<Tooltip class="text-white">
-							Since you are an owner of this flow, you can send resume events without necessarily
-							knowing the resume id sent by the approval step
-						</Tooltip>
-					</Button>
+					<Button
+						title="Cancel the step"
+						iconOnly
+						startIcon={{ icon: X }}
+						variant="default"
+						disabled={loading}
+						destructive
+						unifiedSize="md"
+						on:click={() => continu(false)}
+					/>
 				</div>
-
-				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
-					<div
-						class={twMerge(
-							'w-full border rounded-lg p-2',
-							light ? 'min-w-96 max-h-svh overflow-y-auto' : ''
-						)}
-					>
-						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
-					</div>
-					<Tooltip>
-						The payload is optional, it is passed to the following step through the `resume`
-						variable
-					</Tooltip>
-				{/if}
+			{/if}
+			<div>
+				<Button variant="accent" onClick={() => continu(true)} disabled={loading} unifiedSize="md">
+					Resume
+					<Tooltip class="text-white">Resume or approve this suspended step</Tooltip>
+				</Button>
 			</div>
-		{:else}
-			You cannot resume the flow yourself without receiving the resume secret since you are not an
-			owner of {job.script_path} and the approval step did not contain the resume url at key `resume`
-		{/if}
+
+			{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
+				<div
+					class={twMerge(
+						'w-full border rounded-lg p-2',
+						light ? 'min-w-96 max-h-svh overflow-y-auto' : ''
+					)}
+				>
+					<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
+				</div>
+				<Tooltip>
+					The payload is optional, it is passed to the following step through the `resume` variable
+				</Tooltip>
+			{/if}
+		</div>
 	</div>
 </div>

package/package/components/FlowTimeline.svelte

@@ -42,36 +42,31 @@ const barHeight = 32;
 	}}
 />
 {#if items}
-	<div class="divide-y border-b">
-		<div class="px-2 py-2 grid grid-cols-12 w-full"
-			><div></div>
-			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
-				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
-						class="hidden lg:block">{msToSec(max - min, 1)}s</div
-					>
-				{/if}<div class="flex gap-1 items-center font-mono"
-					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
-							{msToSec(now - min, 1)}s
-						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
-				></div
-			>
-		</div>
-		<div class="flex flex-row-reverse items-center text-sm text-secondary p-2">
-			<div class="flex gap-4 items-center text-2xs">
-				<div class="flex gap-2 items-center">
-					<div>Waiting for executor/Suspend</div>
-					<div class="h-4 w-4 bg-gray-500"></div>
+	<div class="divide-y">
+		<div class="px-3 py-1.5 flex items-center justify-between text-2xs text-secondary">
+			<div class="flex gap-1 items-center font-mono">
+				{min ? displayDate(new Date(min), true) : ''}
+			</div>
+			<div class="flex gap-3 items-center">
+				<div class="flex gap-1.5 items-center">
+					<div class="h-2.5 w-2.5 rounded-sm bg-gray-400 dark:bg-gray-500"></div>
+					<span>Wait</span>
 				</div>
-
-				<div class="flex gap-2 items-center">
-					<div>Execution</div>
-					<div class="h-4 w-4 bg-blue-500/90"></div>
+				<div class="flex gap-1.5 items-center">
+					<div class="h-2.5 w-2.5 rounded-sm bg-blue-500/90"></div>
+					<span>Execution</span>
 				</div>
+				{#if max && min}
+					<span class="font-mono">{msToSec(max - min, 1)}s</span>
+				{/if}
+				{#if !max && min}{#if now}
+						<span class="font-mono">{msToSec(now - min, 1)}s</span>
+					{/if}<Loader2 size={14} class="animate-spin" />{/if}
 			</div>
 		</div>
 		{#if selfWaitTime}
-			<div class="px-2 py-2 grid grid-cols-6 w-full">
-				root:
+			<div class="px-3 py-1.5 flex items-center gap-2">
+				<span class="text-xs text-secondary">root:</span>
 				<WaitTimeWarning
 					self_wait_time_ms={selfWaitTime}
 					aggregate_wait_time_ms={aggregateWaitTime}
@@ -81,9 +76,9 @@ const barHeight = 32;
 		{/if}
 		{#each flowModules as { id: k, type: typ } (k)}
 			{@const subItems = items?.[k]?.filter((x) => x.created_at && x.started_at)}
-			<div class="shadow-inner dark:shadow-gray-700 relative">
-				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div class="truncate"
+			<div class="relative px-3 py-1.5">
+				<div class="flex items-center justify-between mb-0.5">
+					<div class="text-xs font-medium"
 						>{k.startsWith('subflow:') ? k.substring(8) : k}
 						{#if localModuleStates[k]?.selectedForloop && (typ == 'forloopflow' || typ == 'whileloopflow')}
 							<span class="text-xs font-mono font-medium inline-flex items-center -my-2">
@@ -102,70 +97,67 @@ const barHeight = 32;
 							</span>
 						{/if}
 					</div>
-					<div class="col-span-5 flex">
-						{#if subItems?.length > 1}
-							<div class="text-xs text-secondary absolute top-1 right-2">
-								{subItems?.length} jobs
-							</div>
-						{/if}
-						{#if min && total}
-							<VirtualList
-								width="100%"
-								height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
-								itemCount={subItems?.length ?? 0}
-								itemSize={barHeight}
-								getKey={(index) => subItems?.[index]?.id}
-							>
-								{#snippet item({ index, style })}
-									{@const b = subItems?.[index]}
-									{#if b?.created_at}
-										<!-- <div class="text-xs text-secondary">{JSON.stringify(b)}</div> -->
-										{@const waitingLen = b?.created_at
-											? b.started_at
-												? b.started_at - b?.created_at
-												: b.duration_ms
-													? 0
-													: now - b?.created_at
-											: 0}
-										<div class="flex w-full p-1 pb-2 pl-12" {style}>
+					{#if subItems?.length > 1}
+						<span class="text-2xs text-secondary bg-surface-hover px-1.5 py-0.5 rounded-full">
+							{subItems?.length} jobs
+						</span>
+					{/if}
+				</div>
+				<div class="w-full">
+					{#if min && total}
+						<VirtualList
+							width="100%"
+							height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
+							itemCount={subItems?.length ?? 0}
+							itemSize={barHeight}
+							getKey={(index) => subItems?.[index]?.id}
+						>
+							{#snippet item({ index, style })}
+								{@const b = subItems?.[index]}
+								{#if b?.created_at}
+									{@const waitingLen = b?.created_at
+										? b.started_at
+											? b.started_at - b?.created_at
+											: b.duration_ms
+												? 0
+												: now - b?.created_at
+										: 0}
+									<div class="flex w-full py-0.5 items-center" {style}>
+										<TimelineBar
+											position="left"
+											id={b?.id}
+											{total}
+											{min}
+											gray
+											spacerClass="bg-gray-100 dark:bg-gray-800/50 rounded-l-md"
+											started_at={b.created_at}
+											len={waitingLen < 100 ? 0 : waitingLen - 100}
+											running={b?.started_at == undefined}
+										/>
+										{#if b.started_at}
 											<TimelineBar
-												position="left"
+												position={waitingLen < 100 ? 'center' : 'right'}
 												id={b?.id}
 												{total}
 												{min}
-												gray
-												started_at={b.created_at}
-												len={waitingLen < 100 ? 0 : waitingLen - 100}
-												running={b?.started_at == undefined}
+												concat
+												started_at={b.started_at}
+												len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
+												running={b?.duration_ms == undefined}
 											/>
-											{#if b.started_at}
-												<TimelineBar
-													position={waitingLen < 100 ? 'center' : 'right'}
-													id={b?.id}
-													{total}
-													{min}
-													concat
-													started_at={b.started_at}
-													len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
-													running={b?.duration_ms == undefined}
-												/>
-											{/if}
-										</div>
-									{:else}
-										<div class="flex w-full p-1 pb-2 pl-12">
-											<div class="text-xs text-secondary">
-												<!-- Waiting for executor/Suspend {JSON.stringify(b)} -->
-											</div>
-										</div>
-									{/if}
-								{/snippet}
-							</VirtualList>
-						{/if}</div
-					></div
-				>
+										{/if}
+									</div>
+								{:else}
+									<div class="flex w-full py-0.5"></div>
+								{/if}
+							{/snippet}
+						</VirtualList>
+					{/if}
+				</div>
 			</div>
 		{/each}
 	</div>
+
 {:else}
 	<Loader2 class="animate-spin" />
 {/if}

package/package/components/FlowViewer.svelte

@@ -10,7 +10,7 @@ import { watch } from 'runed';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
-let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, noSummary = false, noGraphDownload = false, selectedVersionId = undefined } = $props();
+let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, selectedTab = $bindable(), hideTabs = false, noSummary = false, noInput = false, hideDefaultInputs = false, showStepHint = false, noGraphDownload = false, selectedVersionId = undefined, graphContent = undefined } = $props();
 let open = {};
 const untrackedInitialOpen = untrack(() => initialOpen);
 if (untrackedInitialOpen) {
@@ -18,7 +18,10 @@ if (untrackedInitialOpen) {
 }
 let previousVersionId = $state(undefined);
 let previousFlow = $state(undefined);
-let tab = $state(untrack(() => initTab) ?? 'diff');
+const tabControlledExternally = selectedTab !== undefined;
+if (!tabControlledExternally) {
+    selectedTab = initTab ?? 'diff';
+}
 let previousFlowCache = {};
 async function loadPreviousFlow(version) {
     try {
@@ -47,18 +50,18 @@ $effect.pre(() => {
     }
 });
 $effect.pre(() => {
-    if (initTab) {
+    if (initTab || tabControlledExternally) {
         return;
     }
     if (availableVersions && availableVersions.length > 0) {
-        tab = 'diff';
+        selectedTab = 'diff';
     }
     else {
         if (noGraph) {
-            tab = 'schema';
+            selectedTab = 'schema';
         }
         else {
-            tab = 'ui';
+            selectedTab = 'ui';
         }
     }
 });
@@ -85,7 +88,7 @@ let previousFlowYaml = $derived.by(() => {
 
 <HighlightTheme />
 
-<Tabs bind:selected={tab}>
+<Tabs bind:selected={selectedTab as string} {hideTabs}>
 	{#if availableVersions && availableVersions.length > 0}
 		<Tab value="diff" label="Diff" />
 	{/if}
@@ -125,23 +128,38 @@ let previousFlowYaml = $derived.by(() => {
 			</TabContent>
 		{/if}
 		<TabContent value="ui">
-			<div class="flow-root w-full pb-4">
-				{#if !noSummary}
-					<h2 class="my-4">{flow.summary}</h2>
-					<div>{flow.description ?? ''}</div>
-				{/if}
+			{#if graphContent}
+				{@render graphContent()}
+			{:else}
+				<div class="flow-root w-full pb-4">
+					{#if showStepHint}
+						<p class="text-2xs text-tertiary py-1">Click on a step to see its details</p>
+					{/if}
+					{#if !noSummary}
+						<h2 class="my-4">{flow.summary}</h2>
+						<div>{flow.description ?? ''}</div>
+					{/if}
 
-				<p class="font-black text-lg w-full my-4">
-					<span>Flow Input</span>
-				</p>
-				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
-					<FlowInputViewer schema={flow.schema} />
-				{:else}
-					<div class="text-secondary text-xs italic mb-4">No inputs</div>
-				{/if}
+					{#if !noInput}
+						<p class="font-black text-lg w-full my-4">
+							<span>Flow Input</span>
+						</p>
+						{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+							<FlowInputViewer schema={flow.schema} />
+						{:else}
+							<div class="text-secondary text-xs italic mb-4">No inputs</div>
+						{/if}
+					{/if}
 
-				<FlowGraphViewer download={!noGraphDownload} {noSide} {flow} overflowAuto />
-			</div>
+					<FlowGraphViewer
+						download={!noGraphDownload}
+						{noSide}
+						{hideDefaultInputs}
+						{flow}
+						overflowAuto
+					/>
+				</div>
+			{/if}
 		</TabContent>
 		<TabContent value="raw">
 			<FlowViewerInner {flow} />

package/package/components/FlowViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type FlowValue } from '../gen';
-type TabValue = 'ui' | 'raw' | 'schema' | 'diff';
+export type TabValue = 'ui' | 'raw' | 'schema' | 'diff';
 interface Props {
     flow: {
         summary: string;
@@ -11,14 +11,20 @@ interface Props {
     noSide?: boolean;
     noGraph?: boolean;
     initTab?: TabValue;
+    selectedTab?: TabValue;
+    hideTabs?: boolean;
     noSummary?: boolean;
+    noInput?: boolean;
+    hideDefaultInputs?: boolean;
+    showStepHint?: boolean;
     noGraphDownload?: boolean;
     availableVersions?: Array<{
         id: number;
         deployment_msg?: string;
     }>;
     selectedVersionId?: number;
+    graphContent?: import('svelte').Snippet;
 }
-declare const FlowViewer: import("svelte").Component<Props, {}, "">;
+declare const FlowViewer: import("svelte").Component<Props, {}, "selectedTab">;
 type FlowViewer = ReturnType<typeof FlowViewer>;
 export default FlowViewer;

package/package/components/GroupEditor.svelte

@@ -97,9 +97,9 @@ let reloadHistory = $state(0);
 <div class="flex flex-col gap-6">
 	{#if name === 'wm_deployers'}
 		<Alert type="info" title="Deployer permissions">
-			Members of this group can preserve the original author (on_behalf_of / edited_by) when
-			deploying scripts, flows, apps, and triggers to this workspace. Without this permission,
-			deployed items will be reassigned to the deploying user.
+			Members of this group can preserve the original author (on_behalf_of / permissioned_as) when
+			deploying scripts, flows, apps, triggers, and schedules to this workspace. Without this
+			permission, deployed items will be reassigned to the deploying user.
 		</Alert>
 	{/if}
 	<Label label="Summary" for="summary">
@@ -137,14 +137,13 @@ let reloadHistory = $state(0);
 		{/if}
 		{#if members}
 			<TableCustom>
-
 				{#snippet headerRow()}
-								<tr >
+					<tr>
 						<th>user</th>
 						<th></th>
 						<th></th>
 					</tr>
-							{/snippet}
+				{/snippet}
 				{#snippet body()}
 					<tbody>
 						{#each members ?? [] as { member_name, role }}<tr>
@@ -281,12 +280,11 @@ let reloadHistory = $state(0);
 			{#if instance_group?.emails}
 				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
 				<TableCustom>
-	
 					{#snippet headerRow()}
-										<tr >
+						<tr>
 							<th>user</th>
 						</tr>
-									{/snippet}
+					{/snippet}
 					{#snippet body()}
 						<tbody>
 							{#each instance_group?.emails ?? [] as email}<tr>

package/package/components/HistoricList.svelte

@@ -38,18 +38,19 @@ function initLoadInputs() {
             args: searchArgs ? JSON.stringify(searchArgs) : undefined
         });
         const inputsWithPayload = await Promise.all(inputs.map(async (input) => {
+            const isPreview = !!input.is_preview;
             if (cachedArgs[input.id]) {
                 return {
                     ...input,
                     payloadData: cachedArgs[input.id]
                 };
             }
-            const payloadData = await loadArgsFromHistory(input.id, undefined, false);
+            const payloadData = await loadArgsFromHistory(input.id, undefined, false, isPreview);
             if (payloadData === 'WINDMILL_TOO_BIG') {
                 return {
                     ...input,
                     payloadData: 'WINDMILL_TOO_BIG',
-                    getFullPayload: () => loadArgsFromHistory(input.id, undefined, true)
+                    getFullPayload: () => loadArgsFromHistory(input.id, undefined, true, isPreview)
                 };
             }
             cachedArgs[input.id] = payloadData;
@@ -65,7 +66,13 @@ function initLoadInputs() {
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
-async function loadArgsFromHistory(id, input, allowLarge) {
+function filterPreviewArgs(args, isPreview) {
+    if (!isPreview || !args || typeof args !== 'object' || Array.isArray(args))
+        return args;
+    const { _MODULES, ...rest } = args;
+    return rest;
+}
+async function loadArgsFromHistory(id, input, allowLarge, isPreview = false) {
     if (!id)
         return;
     const payloadData = await InputService.getArgsFromHistoryOrSavedInput({
@@ -74,7 +81,7 @@ async function loadArgsFromHistory(id, input, allowLarge) {
         input,
         allowLarge
     });
-    return payloadData;
+    return filterPreviewArgs(payloadData, isPreview);
 }
 function updateViewerOpenState(itemId, isOpen) {
     openStates[itemId] = isOpen;
@@ -98,6 +105,7 @@ $effect(() => {
 			job={item}
 			hovering={hover}
 			payloadData={item.payloadData}
+			isPreview={!!item.is_preview}
 			{showAuthor}
 			{placement}
 			{viewerOpen}