windmill-components 1.109.8 → 1.121.0

package/package/components/DiffDrawer.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        button?: {
+            text: string;
+            onClick: () => void;
+        } | undefined;
+        openDrawer?: (() => void) | undefined;
+        setDiff?: ((local: string, remote: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DiffDrawerProps = typeof __propDef.props;
+export type DiffDrawerEvents = typeof __propDef.events;
+export type DiffDrawerSlots = typeof __propDef.slots;
+export default class DiffDrawer extends SvelteComponentTyped<DiffDrawerProps, DiffDrawerEvents, DiffDrawerSlots> {
+    get openDrawer(): () => void;
+    get setDiff(): (local: string, remote: string) => void;
+}
+export {};

package/package/components/DisplayResult.svelte

@@ -3,8 +3,7 @@ import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
 import { copyToClipboard, truncate } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
-import autosize from 'svelte-autosize';
-import { ClipboardCopy } from 'lucide-svelte';
+import { ClipboardCopy, Download, Expand } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let result;
@@ -87,8 +86,8 @@ function inferResultKind(result) {
     }
     return 'json';
 }
-let payload = '';
 let jsonViewer;
+$: jsonStr = JSON.stringify(result, null, 4);
 </script>
 
 <div class="inline-highlight">
@@ -97,11 +96,11 @@ let jsonViewer;
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 w-full text-sm text-gray-700 relative"
+				class="mb-2 w-full text-sm relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				{#if !disableExpand}
-					<div class="text-gray-500 text-xs absolute top-5 right-0">
-						<button on:click={jsonViewer.openDrawer}>Expand</button>
+					<div class="text-gray-500 text-xs absolute top-5.5 right-0">
+						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					</div>
 				{/if}
 			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
@@ -200,14 +199,14 @@ let jsonViewer;
 				>
 				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
 			</div>
-		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
+		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-8 mx-4">
 				<Button
 					color="green"
 					variant="border"
 					on:click={() =>
 						fetch(result['resume'], {
 							method: 'POST',
-							body: JSON.stringify(payload),
+							body: JSON.stringify({}),
 							headers: { 'Content-Type': 'application/json' }
 						})}
 				>
@@ -215,18 +214,11 @@ let jsonViewer;
 				>
 				<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}>Cancel</Button
 				>
-				<div>
-					<h3>Payload</h3>
-					<div class="border border-black">
-						<input type="text" bind:value={payload} use:autosize />
-					</div>
-				</div>
 				<div class="center-center"
 					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
 				>
 			</div>
 		{:else}
-			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			{#if jsonStr.length > 10000}
 				<div class="text-sm mb-2 text-gray-600">
 					<a
@@ -241,7 +233,7 @@ let jsonViewer;
 			{/if}
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
+		<div class="text-gray-500 text-sm">No result: {jsonStr}</div>
 	{/if}
 </div>
 
@@ -250,25 +242,26 @@ let jsonViewer;
 		<Drawer bind:this={jsonViewer} size="900px">
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				<svelte:fragment slot="actions">
-					<Button
-						on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-						color="light"
-						size="xs"
+					<a
+						class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+						download="{filename ?? 'result'}.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+						>Download <Download size={14} /></a
 					>
+					<Button on:click={() => copyToClipboard(jsonStr)} color="light" size="xs">
 						<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
 					</Button>
 				</svelte:fragment>
-				{@const str = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
-				{#if str.length > 100000}
+				{#if jsonStr.length > 100000}
 					<div class="text-sm mb-2 text-gray-600">
 						<a
 							download="{filename ?? 'result'}.json"
-							href="data:text/json;charset=utf-8,{encodeURIComponent(str)}">Download</a
+							href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
 						>
 						JSON is too large to be displayed in full.
 					</div>
 				{:else}
-					<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+					<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
 				{/if}
 			</DrawerContent>
 		</Drawer>

package/package/components/DraftBadge.svelte

@@ -13,7 +13,7 @@ export let draft_only = false;
 	{:else}
 		<Popover notClickable>
 			<svelte:fragment slot="text">Is deployed and has a draft</svelte:fragment>
-			<Badge color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
+			<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
 		</Popover>
 	{/if}
 {/if}

package/package/components/Editor.svelte

@@ -591,10 +591,6 @@ onDestroy(() => {
 
 <style global>
 	:global(.editor) {
-		border-radius: 0.375rem;
-		border-width: 1px;
-		--tw-border-opacity: 1;
-		border-color: rgb(249 250 251 / var(--tw-border-opacity));
 		padding: 0px;
 }
 	:global(.yRemoteSelection) {

package/package/components/EditorBar.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script>import { ResourceService, VariableService } from '../gen';
-import { faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBook, faCube, faDollarSign, faHistory, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -10,7 +10,7 @@ import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Badge, Drawer } from './common';
+import { Drawer } from './common';
 import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte';
 import PickHubScript from './flows/pickers/PickHubScript.svelte';
 import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
@@ -21,6 +21,8 @@ import { sendUserToast } from '../toast';
 import { getScriptByPath } from '../scripts';
 import Toggle from './Toggle.svelte';
 import { Link, Users } from 'lucide-svelte';
+import { capitalize } from '../utils';
+import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -30,9 +32,11 @@ export let kind = 'script';
 export let collabMode = false;
 export let collabLive = false;
 export let collabUsers = [];
+export let scriptPath = undefined;
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
+let resourceTypePicker;
 let variableEditor;
 let resourceEditor;
 let codeViewer;
@@ -64,8 +68,45 @@ async function onScriptPick(e) {
 }
 let version = __pkg__.version;
 const dispatch = createEventDispatcher();
+function compile(schema) {
+    function rec(x, root = false) {
+        let res = '{\n';
+        const entries = Object.entries(x);
+        let i = 0;
+        for (let [name, prop] of entries) {
+            if (prop.type == 'object') {
+                res += `${name}: ${rec(prop.properties ?? {})}`;
+            }
+            else if (prop.type == 'array') {
+                res += `${name}: ${prop?.items?.type ?? 'any'}[]`;
+            }
+            else {
+                let typ = prop?.type ?? 'any';
+                if (typ == 'integer') {
+                    typ = 'number';
+                }
+                res += `${name}: ${typ}`;
+            }
+            i++;
+            if (i < entries.length) {
+                res += ',\n';
+            }
+        }
+        return res;
+    }
+    return rec(schema.properties, true);
+}
+let historyBrowserDrawerOpen = false;
 </script>
 
+{#if scriptPath}
+	<Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
+		<DrawerContent title="Versions History" on:close={() => (historyBrowserDrawerOpen = false)}>
+			<ScriptVersionHistory {scriptPath} />
+		</DrawerContent>
+	</Drawer>
+{/if}
+
 <Drawer bind:this={scriptPicker} size="900px">
 	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
 		{#if pick_existing == 'hub'}
@@ -219,19 +260,48 @@ const dispatch = createEventDispatcher();
 	</div>
 </ItemPicker>
 
+{#if lang == 'deno'}
+	<ItemPicker
+		bind:this={resourceTypePicker}
+		pickCallback={async (_, name) => {
+			if (!editor) return
+			const toCamel = (s) => {
+				return s.replace(/([-_][a-z])/gi, ($1) => {
+					return $1.toUpperCase().replace('-', '').replace('_', '')
+				})
+			}
+			const resourceType = await ResourceService.getResourceType({
+				workspace: $workspaceStore ?? 'NO_W',
+				path: name
+			})
+
+			const tsSchema = compile(resourceType.schema)
+			console.log(tsSchema)
+			editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}\n`)
+			sendUserToast(`${name} inserted at cursor`)
+		}}
+		tooltip="Resources Types are the schemas associated with a Resource. They define the structure of the data that is returned from a Resource."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/resources_and_types"
+		itemName="Resource Type"
+		extraField="name"
+		loadItems={async () =>
+			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
+	/>
+{/if}
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
-<div class="flex justify-between items-center overflow-y-auto w-full p-1">
+<div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
 	<div class="flex items-center">
-		<Badge color={validCode ? 'green' : 'red'} class="min-w-[60px] mr-3">
-			{validCode ? 'Valid' : 'Invalid'}
-		</Badge>
-		<div class="flex items-center divide-x">
+		<div
+			title={validCode ? 'Main function parsable' : 'Main function not parsable'}
+			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
+		/>
+		<div class="flex items-center">
 			<Button
 				title="Add context variable"
 				color="light"
-				btnClasses="!font-medium !h-full"
+				btnClasses="!font-medium text-gray-600"
 				on:click={contextualVariablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
@@ -244,7 +314,7 @@ const dispatch = createEventDispatcher();
 			<Button
 				title="Add variable"
 				color="light"
-				btnClasses="!font-medium !h-full"
+				btnClasses="!font-medium text-gray-600"
 				on:click={variablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
@@ -256,7 +326,7 @@ const dispatch = createEventDispatcher();
 
 			<Button
 				title="Add resource"
-				btnClasses="!font-medium !h-full"
+				btnClasses="!font-medium text-gray-600"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -267,9 +337,24 @@ const dispatch = createEventDispatcher();
 				+Resource
 			</Button>
 
+			{#if lang == 'deno'}
+				<Button
+					title="Add resource"
+					btnClasses="!font-medium text-gray-600"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={resourceTypePicker.openDrawer}
+					{iconOnly}
+					startIcon={{ icon: faCube }}
+				>
+					+Resource Type
+				</Button>
+			{/if}
+
 			<Button
 				title="Reset Content"
-				btnClasses="!font-medium !h-full"
+				btnClasses="!font-medium text-gray-600"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -281,7 +366,7 @@ const dispatch = createEventDispatcher();
 			</Button>
 
 			<Button
-				btnClasses="!font-medium !h-full"
+				btnClasses="!font-medium text-gray-600"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -366,20 +451,36 @@ const dispatch = createEventDispatcher();
 		</div>
 	</div>
 
-	{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
-		<Button
-			btnClasses="!font-medium"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={scriptPicker.openDrawer}
-			{iconOnly}
-			startIcon={{ icon: faEye }}
-			title="Explore other scripts"
-		>
-			Explore other scripts
-		</Button>
-	{/if}
+	<div class="flex flex-row items-center gap-2">
+		{#if scriptPath}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={() => (historyBrowserDrawerOpen = true)}
+				{iconOnly}
+				startIcon={{ icon: faHistory }}
+				title="See history"
+			>
+				History
+			</Button>
+		{/if}
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openDrawer}
+				{iconOnly}
+				startIcon={{ icon: faBook }}
+				title="Explore other scripts"
+			>
+				Library
+			</Button>
+		{/if}
+	</div>
 </div>
 
 <style>

package/package/components/EditorBar.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         collabUsers?: {
             name: string;
         }[] | undefined;
+        scriptPath?: string | undefined;
     };
     events: {
         toggleCollabMode: CustomEvent<any>;

package/package/components/FieldHeader.svelte

@@ -23,11 +23,11 @@ export let prettify = false;
 
 	{#if displayType}
 		{#if format && format != ''}
-			<span class="text-sm italic ml-1 text-indigo-800">
+			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
 				({format})
 			</span>
 		{:else}
-			<span class="text-sm italic ml-1 text-indigo-800">
+			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
 				({type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
 					: ''})

package/package/components/FlowBuilder.svelte

@@ -20,6 +20,7 @@ import { Pen } from 'lucide-svelte';
 import { loadHubScripts } from '../scripts';
 import { createEventDispatcher } from 'svelte';
 import Awareness from './Awareness.svelte';
+import { getAllModules } from './flows/flowExplorer';
 export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
@@ -83,10 +84,18 @@ async function saveDraft() {
     }
     loadingDraft = false;
 }
+export function computeUnlockedSteps(flow) {
+    return Object.fromEntries(getAllModules(flow.value.modules, flow.value.failure_module)
+        .filter((m) => m.value.type == 'script' && m.value.hash == null)
+        .map((m) => [m.id, m.value.path]));
+}
 async function saveFlow() {
     loadingSave = true;
     try {
         const flow = cleanInputs($flowStore);
+        // console.log('flow', computeUnlockedSteps(flow)) // del
+        // loadingSave = false // del
+        // return
         const { cron, timezone, args, enabled } = $scheduleStore;
         $dirtyStore = false;
         if (initialPath === '') {

package/package/components/FlowBuilder.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         loading?: boolean | undefined;
         flowStore: Writable<Flow>;
         flowStateStore: Writable<FlowState>;
+        computeUnlockedSteps?: ((flow: Flow) => {
+            [k: string]: string;
+        }) | undefined;
         getSelectedId?: (() => string) | undefined;
     };
     events: {
@@ -25,6 +28,9 @@ export type FlowBuilderProps = typeof __propDef.props;
 export type FlowBuilderEvents = typeof __propDef.events;
 export type FlowBuilderSlots = typeof __propDef.slots;
 export default class FlowBuilder extends SvelteComponentTyped<FlowBuilderProps, FlowBuilderEvents, FlowBuilderSlots> {
+    get computeUnlockedSteps(): (flow: Flow) => {
+        [k: string]: string;
+    };
     get getSelectedId(): () => string;
 }
 export {};

package/package/components/FlowJobResult.svelte

@@ -7,11 +7,12 @@ export let col = false;
 export let noBorder = false;
 export let loading;
 export let filename = undefined;
+export let jobId = undefined;
 </script>
 
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full max-h-screen"
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border-gray-400 h-full max-h-screen"
 >
 	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
@@ -24,6 +25,6 @@ export let filename = undefined;
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
-		<LogViewer content={logs ?? ''} isLoading={false} />
+		<LogViewer content={logs ?? ''} {jobId} isLoading={false} />
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         noBorder?: boolean | undefined;
         loading: any;
         filename?: string | undefined;
+        jobId?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowStatusViewer.svelte

@@ -13,9 +13,8 @@ import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
 import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
-import Tooltip from './Tooltip.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 import { Loader2 } from 'lucide-svelte';
+import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let workspaceId = undefined;
@@ -129,7 +128,6 @@ function loadOwner(path) {
     is_owner = isOwner(path, $userStore, workspaceId ?? $workspaceStore);
 }
 $: selected = isListJob ? 'sequence' : 'graph';
-let payload = '"a test payload in json"';
 function isSuccess(arg) {
     if (arg == undefined) {
         return undefined;
@@ -185,47 +183,14 @@ function onJobsLoaded(mod, job) {
 				{#if `result` in job}
 					<div class="w-full h-full">
 						<FlowJobResult
+							jobId={job?.id}
 							loading={job['running'] == true}
 							result={job.result}
 							logs={job.logs ?? ''}
 						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
-					<div class="w-full h-full mt-2 text-sm text-gray-600">
-						<p>Waiting to be resumed</p>
-						<div>
-							{#if is_owner}
-								<div class="flex flex-row gap-2 mt-2">
-									<div>
-										<Button
-											color="green"
-											variant="border"
-											on:click={async () =>
-												await JobService.resumeSuspendedFlowAsOwner({
-													workspace: workspaceId ?? $workspaceStore ?? '',
-													id: job?.id ?? '',
-													requestBody: JSON.parse(payload)
-												})}
-											>Resume <Tooltip
-												>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
-										>
-									</div>
-									<div class="w-full border rounded-lg border-gray-600 p-2">
-										<SimpleEditor automaticLayout lang="json" bind:code={payload} autoHeight />
-									</div>
-									<Tooltip
-										>The payload is optional, it is passed to the following step through the
-										`resume` variable</Tooltip
-									>
-								</div>
-							{:else}
-								You cannot resume the flow yourself without receiving the resume secret since you
-								are not an owner of {job.script_path}
-							{/if}
-						</div>
-					</div>
+					<FlowStatusWaitingForEvents {workspaceId} {job} {is_owner} />
 				{:else if job.logs}
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
@@ -456,11 +421,12 @@ function onJobsLoaded(mod, job) {
 							failureModule={job.raw_flow?.failure_module}
 						/>
 					</div>
-					<div class="border-l border-gray-400 pt-1 overflow-hidden">
+					<div class="border-l border-gray-400 pt-1 overflow-auto min-h-[800px] flex flex-col">
 						{#if selectedNode}
 							{@const node = localFlowModuleStates[selectedNode]}
 							{#if selectedNode == 'end'}
 								<FlowJobResult
+									jobId={job?.id}
 									filename={job.id}
 									loading={job['running']}
 									noBorder
@@ -499,6 +465,7 @@ function onJobsLoaded(mod, job) {
 								</div>
 
 								<FlowJobResult
+									jobId={job?.id}
 									loading={job['running'] == true}
 									noBorder
 									col

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -0,0 +1,64 @@
+<script>import { Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import SchemaForm from './SchemaForm.svelte';
+import Tooltip from './Tooltip.svelte';
+import { Button } from './common';
+export let is_owner;
+export let workspaceId;
+export let job;
+let payload = {};
+$: approvalStep = (job?.flow_status?.step ?? 1) - 1;
+$: job && getDefaultArgs();
+async function getDefaultArgs() {
+    let jobId = job.flow_status?.modules?.[approvalStep]?.job;
+    if (!jobId) {
+        return {};
+    }
+    let job_result = await JobService.getCompletedJobResult({
+        workspace: workspaceId ?? $workspaceStore ?? '',
+        id: jobId
+    });
+    payload = job_result?.default_args ?? {};
+}
+</script>
+
+<div class="w-full h-full mt-2 text-sm text-gray-600">
+	<p>Waiting to be resumed</p>
+	<div>
+		{#if is_owner}
+			<div class="flex flex-row gap-2 mt-2">
+				<div>
+					<Button
+						color="green"
+						variant="border"
+						on:click={async () =>
+							await JobService.resumeSuspendedFlowAsOwner({
+								workspace: workspaceId ?? $workspaceStore ?? '',
+								id: job?.id ?? '',
+								requestBody: payload
+							})}
+						>Resume <Tooltip
+							>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
+					>
+				</div>
+				{#if job.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
+					<div class="w-full border rounded-lg p-2">
+						<SchemaForm
+							noVariablePicker
+							bind:args={payload}
+							schema={job.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
+						/>
+					</div>
+				{/if}
+				<Tooltip
+					>The payload is optional, it is passed to the following step through the `resume` variable</Tooltip
+				>
+			</div>
+		{:else}
+			You cannot resume the flow yourself without receiving the resume secret since you are not an
+			owner of {job.script_path}
+		{/if}
+	</div>
+</div>