feat: add schema form to approval steps

backend/windmill-common/src/flows.rs

@@ -152,6 +152,8 @@ pub struct Suspend {
     pub required_events: Option<u32>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub timeout: Option<u32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub resume_form: Option<serde_json::Value>,
 }
 
 #[derive(Deserialize, Serialize, Debug, Clone)]

frontend/src/lib/components/DisplayResult.svelte

@@ -4,7 +4,6 @@
 	import TableCustom from './TableCustom.svelte'
 	import { copyToClipboard, truncate } from '$lib/utils'
 	import { Button, Drawer, DrawerContent } from './common'
-	import autosize from 'svelte-autosize'
 	import { ClipboardCopy } from 'lucide-svelte'
 	import Portal from 'svelte-portal'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
@@ -105,7 +104,6 @@
 		}
 		return 'json'
 	}
-	let payload = ''
 
 	let jsonViewer: Drawer
 </script>
@@ -219,14 +217,14 @@
 				>
 				<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' }
 						})}
 				>
@@ -234,12 +232,6 @@
 				>
 				<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
 				>

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -16,8 +16,8 @@
 	import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '$lib/utils'
 	import JobArgs from './JobArgs.svelte'
 	import Tooltip from './Tooltip.svelte'
-	import SimpleEditor from './SimpleEditor.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import SchemaForm from './SchemaForm.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -165,7 +165,7 @@
 
 	$: selected = isListJob ? 'sequence' : 'graph'
 
-	let payload: string = '"a test payload in json"'
+	let payload: any = {}
 
 	function isSuccess(arg: any): boolean | undefined {
 		if (arg == undefined) {
@@ -248,9 +248,16 @@
 											></Button
 										>
 									</div>
-									<div class="w-full border rounded-lg border-gray-600 p-2">
-										<SimpleEditor automaticLayout lang="json" bind:code={payload} autoHeight />
-									</div>
+									{#if job.raw_flow?.modules?.[job?.flow_status?.step - 1]?.suspend?.resume_form?.schema}
+										<div class="w-full border rounded-lg p-2">
+											<SchemaForm
+												noVariablePicker
+												bind:args={payload}
+												schema={job.raw_flow?.modules?.[job?.flow_status?.step - 1]?.suspend
+													?.resume_form?.schema}
+											/>
+										</div>
+									{/if}
 									<Tooltip
 										>The payload is optional, it is passed to the following step through the
 										`resume` variable</Tooltip
@@ -492,7 +499,7 @@
 							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'}

frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	import type { FlowModule } from '$lib/gen'
+	import { emptySchema } from '$lib/utils'
 	import { SecondsInput } from '../../common'
 
 	export let flowModule: FlowModule
@@ -50,4 +52,28 @@
 	{:else}
 		<SecondsInput disabled />
 	{/if}
+	{#if flowModule.suspend}
+		<div class="mt-4" />
+		<Toggle
+			checked={Boolean(flowModule.suspend.resume_form)}
+			options={{
+				right: 'Add a form to the approval page'
+			}}
+			on:change={(e) => {
+				if (flowModule.suspend) {
+					if (e.detail) {
+						flowModule.suspend.resume_form = {
+							schema: emptySchema()
+						}
+					} else {
+						flowModule.suspend.resume_form = undefined
+					}
+				}
+			}}
+		/>
+		<div class="mt-2" />
+	{/if}
+	{#if flowModule.suspend?.resume_form}
+		<SchemaEditor bind:schema={flowModule.suspend.resume_form.schema} />
+	{/if}
 </div>

frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte

@@ -9,7 +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'
+	import SchemaForm from '$lib/components/SchemaForm.svelte'
 
 	let job: Job | undefined = undefined
 	let currentApprovers: { resume_id: number; approver: string }[] = []
@@ -21,9 +21,11 @@
 		.map((x) => x.resume_id)
 		.includes(new Number($page.params.resume).valueOf())
 
+	$: schema =
+		job?.raw_flow?.modules?.[(job?.flow_status?.step ?? 1) - 1]?.suspend?.resume_form?.schema
 	let timeout: NodeJS.Timer | undefined = undefined
 	let error: string | undefined = undefined
-	let message = ''
+	let payload: any = {}
 
 	onMount(() => {
 		getJob()
@@ -70,7 +72,7 @@
 			resumeId: new Number($page.params.resume).valueOf(),
 			signature: $page.params.hmac,
 			approver,
-			requestBody: { message }
+			requestBody: payload
 		})
 		sendUserToast('Flow approved')
 		getJob()
@@ -142,6 +144,10 @@
 		<div class="my-2"><p><b>You have already approved this flow to be resumed</b></p></div>
 	{/if}
 
+	{#if schema}
+		<SchemaForm {schema} bind:args={payload} noVariablePicker />
+	{/if}
+
 	<div class="w-max-md flex flex-row gap-x-4 gap-y-4 justify-between w-full flex-wrap mt-2">
 		<Button
 			btnClasses="grow"
@@ -158,10 +164,6 @@
 			disabled={completed || alreadyResumed}>Approve/Resume</Button
 		>
 	</div>
-	<div>
-		<h3 class="mt-2">message (optional)</h3>
-		<input type="text" bind:value={message} use:autosize />
-	</div>
 
 	<div class="mt-4 flex flex-row flex-wrap justify-between"
 		><a href="https://windmill.dev">Learn more about Windmill</a>

openflow.openapi.yaml

@@ -99,6 +99,11 @@ components:
               type: integer
             timeout:
               type: integer
+            resume_form:
+              type: object
+              properties:
+                schema:
+                  type: object
         retry:
           $ref: "#/components/schemas/Retry"
       required: