From e606e27cdb057e38431249e535cdcbb0dc0daed5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 5 May 2023 09:57:30 +0200
Subject: [PATCH] clarify default value for property editor of flows

---
 .../src/lib/components/SchemaEditor.svelte    |  3 ++
 .../src/lib/components/SchemaModal.svelte     | 37 ++++++++++++-------
 .../components/flows/content/FlowInput.svelte |  1 +
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 6efb098a8e..e16de7d4a5 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -14,6 +14,8 @@
 	import { flip } from 'svelte/animate'
 	import Portal from 'svelte-portal'
 
+	export let isFlowInput = false
+
 	const dispatch = createEventDispatcher()
 
 	export let schema: Schema = emptySchema()
@@ -286,6 +288,7 @@
 
 <Portal>
 	<SchemaModal
+		{isFlowInput}
 		bind:this={schemaModal}
 		bind:property={modalProperty}
 		bind:error={argError}
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 00c2826c09..b648597e3d 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -49,7 +49,7 @@
 	import StringTypeNarrowing from './StringTypeNarrowing.svelte'
 	import Required from './Required.svelte'
 	import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte'
-	import { Button } from './common'
+	import { Alert, Button } from './common'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Drawer from './common/drawer/Drawer.svelte'
@@ -58,6 +58,7 @@
 	export let error = ''
 	export let editing = false
 	export let oldArgName: string | undefined = undefined
+	export let isFlowInput = false
 
 	let resource_type: string | undefined = undefined
 
@@ -173,18 +174,28 @@
 					</Button>
 				</div>
 			</div>
-			<div class="flex flex-row gap-x-4">
-				<ArgInput
-					label="Default"
-					bind:value={property.default}
-					type={property.selectedType}
-					pattern={property.pattern}
-				/>
-				<Toggle
-					options={{ right: 'Required' }}
-					class="mt-5 !justify-start"
-					bind:checked={property.required}
-				/>
+			<div>
+				<div class="flex flex-row gap-x-4">
+					<ArgInput
+						label="Default"
+						bind:value={property.default}
+						type={property.selectedType}
+						pattern={property.pattern}
+					/>
+					<Toggle
+						options={{ right: 'Required' }}
+						class="mt-5 !justify-start"
+						bind:checked={property.required}
+					/>
+				</div>
+				{#if isFlowInput}
+					<Alert type="info" title="Default not used by webhooks">
+						If this flow is triggered by a webhook, the default value will not replace a missing
+						value from the payload. It will only be used as the default value in the autogenerated
+						UI. We recommend using default values in the signature of the steps where this value is
+						used (using `x=default`) to have the desired behavior.</Alert
+					>
+				{/if}
 			</div>
 			{#if property.selectedType !== 'boolean'}
 				<div>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 58ffd29501..248190e5db 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -40,6 +40,7 @@
 		</div>
 		<div class="pt-6">
 			<SchemaEditor
+				isFlowInput
 				bind:schema={$flowStore.schema}
 				on:change={() => {
 					$flowStore = $flowStore