From 241be4897eb3377ccce097404fcd176e746c3015 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Thu, 24 Jul 2025 23:20:48 +0000
Subject: [PATCH] fix: fix webhook panel reactivity

---
 .../webhook/WebhooksConfigSection.svelte      | 65 +++++++++----------
 .../triggers/webhook/WebhooksPanel.svelte     | 17 +----
 .../(logged)/flows/get/[...path]/+page.svelte |  1 +
 .../scripts/get/[...hash]/+page.svelte        |  2 +
 4 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index fa700addcc..311108dc92 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import Label from '../../Label.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
@@ -16,7 +14,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import { typescript } from 'svelte-highlight/languages'
 	import ClipboardPanel from '../../details/ClipboardPanel.svelte'
-	import { copyToClipboard, isObject } from '$lib/utils'
+	import { copyToClipboard, isObject, readFieldsRecursively } from '$lib/utils'
 	// import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import TriggerTokens from '../TriggerTokens.svelte'
@@ -57,7 +55,36 @@
 	} = $derived(isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path))
 	let selectedTab: string = $state('rest')
 	let userSettings: UserSettings | undefined = $state()
-	let url: string = $state('')
+	let webhookType = $state(DEFAULT_WEBHOOK_TYPE) as 'async' | 'sync'
+	let requestType = $state(isFlow ? 'path' : 'path') as 'hash' | 'path' | 'get_path'
+	let tokenType = $state('headers') as 'query' | 'headers'
+
+	$effect(() => {
+		if (webhookType === 'async' && requestType === 'get_path') {
+			requestType = hash ? 'hash' : 'path'
+		}
+	})
+
+	let cleanedRunnableArgs = $derived.by(() => {
+		readFieldsRecursively(runnableArgs)
+		return isObject(runnableArgs) && 'wm_trigger' in runnableArgs
+			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
+			: runnableArgs
+	})
+	let url: string = $derived(
+		webhooks[webhookType][requestType] +
+			(tokenType === 'query'
+				? `?token=${token}${
+						requestType === 'get_path'
+							? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+							: ''
+					}`
+				: `${
+						requestType === 'get_path'
+							? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
+							: ''
+					}`)
+	)
 
 	function computeScriptWebhooks(hash: string | undefined, path: string) {
 		let webhookBase = `${location.origin}${base}/api/w/${$workspaceStore}/jobs`
@@ -90,10 +117,6 @@
 		}
 	}
 
-	let webhookType: 'async' | 'sync' = $state(DEFAULT_WEBHOOK_TYPE)
-	let requestType: 'hash' | 'path' | 'get_path' = $state(isFlow ? 'path' : 'path')
-	let tokenType: 'query' | 'headers' = $state('headers')
-
 	function headers() {
 		const headers = {}
 		if (requestType != 'get_path') {
@@ -222,32 +245,6 @@ while true; do
 done`
 }`
 	}
-
-	run(() => {
-		if (webhookType === 'async' && requestType === 'get_path') {
-			requestType = hash ? 'hash' : 'path'
-		}
-	})
-	let cleanedRunnableArgs = $derived(
-		isObject(runnableArgs) && 'wm_trigger' in runnableArgs
-			? Object.fromEntries(Object.entries(runnableArgs).filter(([key]) => key !== 'wm_trigger'))
-			: runnableArgs
-	)
-	run(() => {
-		url =
-			webhooks[webhookType][requestType] +
-			(tokenType === 'query'
-				? `?token=${token}${
-						requestType === 'get_path'
-							? `&payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-							: ''
-					}`
-				: `${
-						requestType === 'get_path'
-							? `?payload=${encodeURIComponent(btoa(JSON.stringify(cleanedRunnableArgs ?? {})))}`
-							: ''
-					}`)
-	})
 </script>
 
 <UserSettings
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
index 5893ee2a17..c339f3c758 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte
@@ -24,13 +24,6 @@
 		path,
 		newItem = false
 	}: Props = $props()
-
-	let data = $derived({
-		hash,
-		token,
-		scopes,
-		args
-	})
 </script>
 
 <HighlightTheme />
@@ -46,13 +39,5 @@
 			{isFlow ? 'flow' : 'script'}.
 		</Alert>
 	{/if}
-
-	<WebhooksConfigSection
-		{isFlow}
-		{path}
-		hash={data?.hash}
-		token={data?.token}
-		runnableArgs={data?.args}
-		scopes={data?.scopes}
-	/>
+	<WebhooksConfigSection {isFlow} {path} {hash} {token} runnableArgs={args} {scopes} />
 </Section>
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 91ef9eeedf..2a997703b9 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -639,6 +639,7 @@
 	{#snippet triggers()}
 		{#if flow}
 			<TriggersEditor
+				{args}
 				initialPath={flow.path}
 				currentPath={flow.path}
 				noEditor={true}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 6ab97be015..4bc75a65d5 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -789,6 +789,8 @@
 		{#snippet triggers()}
 			{#if script}
 				<TriggersEditor
+					{args}
+					hash={script.hash}
 					initialPath={script.path}
 					currentPath={script.path}
 					noEditor={true}