allow passing payload to approval method

frontend/src/lib/components/DisplayResult.svelte

@@ -3,6 +3,8 @@
 	import { json } from 'svelte-highlight/languages'
 	import TableCustom from './TableCustom.svelte'
 	import { truncate } from '$lib/utils'
+	import { Button } from './common'
+	import autosize from 'svelte-autosize'
 
 	export let result: any
 
@@ -15,6 +17,7 @@
 		| 'jpeg'
 		| 'gif'
 		| 'error'
+		| 'approval'
 		| undefined = inferResultKind(result)
 
 	let forceJson = false
@@ -57,11 +60,19 @@
 					return 'file'
 				} else if (keys.length == 1 && keys[0] == 'error' && typeof result['error'] == 'string') {
 					return 'error'
+				} else if (
+					keys.length == 3 &&
+					keys.includes('resume') &&
+					keys.includes('cancel') &&
+					keys.includes('approvalPage')
+				) {
+					return 'approval'
 				}
 			} catch (err) {}
 		}
 		return 'json'
 	}
+	let payload = ''
 </script>
 
 <div class="inline-highlight">
@@ -132,6 +143,31 @@
 		{:else if !forceJson && resultKind == 'error'}<div
 				><pre class="text-sm text-red-500 whitespace-pre-wrap">{result.error}</pre>
 			</div>
+		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
+				<Button
+					color="green"
+					variant="border"
+					on:click={() =>
+						fetch(result['resume'], {
+							method: 'POST',
+							body: JSON.stringify(payload),
+							headers: { 'Content-Type': 'application/json' }
+						})}
+				>
+					Resume</Button
+				>
+				<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}<Highlight
 				language={json}
 				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}

frontend/src/lib/components/flows/previousResults.ts

@@ -6,7 +6,8 @@ import type { FlowState } from './flowState'
 export type PickableProperties = {
 	flow_input: Object
 	priorIds: Record<string, any>
-	previousId: string | undefined
+	previousId: string | undefined,
+	hasResume: boolean
 }
 
 type StepPropPicker = {
@@ -118,9 +119,12 @@ export function getStepPropPicker(
 	const pickableProperties = {
 		flow_input: flowInput,
 		priorIds: priorIds,
-		previousId: previousIds[0]
+		previousId: previousIds[0],
+		hasResume: previousModule?.suspend != undefined,
 	}
 
+
+
 	if (approvers && ((previousModule?.suspend?.required_events ?? 0) > 0)) {
 		pickableProperties["approvers"] = "The list of approvers"
 	}

frontend/src/lib/components/propertyPicker/PropPicker.svelte

@@ -121,6 +121,22 @@
 					/>
 				</div>
 			{/if}
+			{#if pickableProperties.hasResume}
+				<span class="font-bold text-sm">Resume payloads</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						json={{
+							resume: 'The resume payload',
+							resumes: 'All resume payloads from all approvers'
+						}}
+						on:select={(e) => {
+							dispatch('select', `${e.detail}`)
+						}}
+					/>
+				</div>
+			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				<span class="font-bold text-sm">All Results</span>
 				<div class="overflow-y-auto mb-2">

frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]@none.svelte

@@ -9,6 +9,7 @@
 	import { onDestroy, onMount } from 'svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import FlowGraph from '$lib/components/graph/FlowGraph.svelte'
+	import autosize from 'svelte-autosize'
 
 	let job: Job | undefined = undefined
 	let currentApprovers: { resume_id: number; approver: string }[] = []
@@ -22,6 +23,7 @@
 
 	let timeout: NodeJS.Timer | undefined = undefined
 	let error: string | undefined = undefined
+	let payload = ''
 
 	getJob()
 
@@ -69,7 +71,7 @@
 			resumeId: new Number($page.params.resume).valueOf(),
 			signature: $page.params.hmac,
 			approver,
-			requestBody: {}
+			requestBody: payload
 		})
 		sendUserToast('Flow approved')
 		getJob()
@@ -160,6 +162,10 @@
 				disabled={completed || alreadyResumed}>Approve/Resume</Button
 			>
 		</div>
+		<div>
+			<h3>Payload (optional)</h3>
+			<input type="text" bind:value={payload} use:autosize />
+		</div>
 
 		<div class="mt-4 flex flex-row flex-wrap justify-between"
 			><a href="https://windmill.dev">Learn more about Windmill</a>