From 5fcdf12ef567f1e58580593eef2d81d668ae64ee Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 4 Dec 2023 20:59:51 +0100
Subject: [PATCH] nit webhook panel

---
 .../details/DetailPageDetailPanel.svelte          |  5 +++--
 .../components/details/DetailPageLayout.svelte    |  5 +++--
 .../lib/components/details/WebhooksPanel.svelte   | 15 +++++----------
 .../(logged)/flows/get/[...path]/+page.svelte     |  4 ++++
 .../(logged)/scripts/get/[...hash]/+page.svelte   |  7 +++++--
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index 3d9d80f4de..ee820bacbe 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -14,7 +14,8 @@
 
 	export let isOperator: boolean = false
 
-	let selected = 'saved_inputs'
+	export let selected: string
+
 	let rawType: 'json' | 'yaml' = 'yaml'
 
 	$: if (hasStepDetails) {
@@ -27,7 +28,7 @@
 
 <Splitpanes horizontal class="h-full">
 	<Pane size={100}>
-		<Tabs {selected}>
+		<Tabs bind:selected>
 			<Tab value="saved_inputs">Saved inputs</Tab>
 			{#if !isOperator}
 				<Tab value="details">Details & Triggers</Tab>
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index 65f5066a6c..b93b32ffe4 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -7,6 +7,7 @@
 	export let isOperator: boolean = false
 	export let flow_json: any | undefined = undefined
 	export let hasStepDetails: boolean = false
+	export let selected: string
 
 	let mobileTab: 'form' | 'detail' = 'form'
 
@@ -23,7 +24,7 @@
 						<slot name="form" />
 					</Pane>
 					<Pane size={35} minSize={15}>
-						<DetailPageDetailPanel {isOperator} {flow_json} {hasStepDetails}>
+						<DetailPageDetailPanel bind:selected {isOperator} {flow_json} {hasStepDetails}>
 							<slot slot="webhooks" name="webhooks" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />
@@ -46,7 +47,7 @@
 						<slot name="form" />
 					</TabContent>
 					<TabContent value="detail" class="flex flex-col flex-1 h-full">
-						<DetailPageDetailPanel {isOperator} {hasStepDetails}>
+						<DetailPageDetailPanel bind:selected {isOperator} {hasStepDetails}>
 							<slot slot="webhooks" name="webhooks" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />
diff --git a/frontend/src/lib/components/details/WebhooksPanel.svelte b/frontend/src/lib/components/details/WebhooksPanel.svelte
index ac5f3684a3..7278b5e2fb 100644
--- a/frontend/src/lib/components/details/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/details/WebhooksPanel.svelte
@@ -31,6 +31,7 @@
 			get_path?: string
 		}
 	}
+	export let token: string
 	export let args: any
 	export let scopes: string[] = []
 	export let isFlow: boolean = false
@@ -44,8 +45,6 @@
 		requestType = 'hash'
 	}
 
-	let token = 'TOKEN_TO_CREATE'
-
 	$: url =
 		webhooks[webhookType][requestType] +
 		(tokenType === 'query'
@@ -155,12 +154,8 @@ function waitForJobCompletion(UUID) {
 	}
 
 	function curlCode() {
-		return `${
-			requestType !== 'get_path'
-				? `TOKEN='${token}'
-BODY='${JSON.stringify(args)}'`
-				: ''
-		}
+		return `TOKEN='${token}'
+${requestType !== 'get_path' ? `BODY='${JSON.stringify(args)}'` : ''}
 URL='${url}'
 ${webhookType === 'sync' ? 'RESULT' : 'UUID'}=$(curl -s ${
 			requestType != 'get_path' ? "-H 'Content-Type: application/json'" : ''
@@ -214,12 +209,12 @@ done`
 				<ToggleButton
 					label="Async"
 					value="async"
-					tooltip="Jobs can be triggered in asynchronous mode, meaning that the webhook is triggered, and the returning value is the uuid of the job assigned to execute the underlying code."
+					tooltip="The returning value is the uuid of the job assigned to execute the job."
 				/>
 				<ToggleButton
 					label="Sync"
 					value="sync"
-					tooltip="The second type of autogenerated endpoint is the synchronous webhook. This webhook triggers the execution, automatically extracts the underlying code's return value and returns it as the response."
+					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
 				/>
 			</ToggleButtonGroup>
 		</div>
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 4fd668cf5b..70de5ab883 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -229,6 +229,8 @@
 		}
 	}
 	let stepDetail: FlowModule | string | undefined = undefined
+	let token = 'TOKEN_TO_CREATE'
+	let detailSelected = 'saved_inputs'
 </script>
 
 <Skeleton
@@ -249,6 +251,7 @@
 
 {#if flow}
 	<DetailPageLayout
+		bind:selected={detailSelected}
 		isOperator={$userStore?.operator}
 		flow_json={{
 			value: flow.value,
@@ -374,6 +377,7 @@
 		</svelte:fragment>
 		<svelte:fragment slot="webhooks">
 			<WebhooksPanel
+				bind:token
 				scopes={[`run:flow/${flow?.path}`]}
 				webhooks={{
 					async: {
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 2387555fcf..7a4fab5cae 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -378,6 +378,9 @@
 				break
 		}
 	}
+
+	let token = 'TOKEN_TO_CREATE'
+	let detailSelected = 'saved_inputs'
 </script>
 
 <MoveDrawer
@@ -408,7 +411,7 @@
 			/>
 		</DrawerContent>
 	</Drawer>
-	<DetailPageLayout isOperator={$userStore?.operator}>
+	<DetailPageLayout bind:selected={detailSelected} isOperator={$userStore?.operator}>
 		<svelte:fragment slot="header">
 			<DetailPageHeader
 				{mainButtons}
@@ -541,7 +544,7 @@
 			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="webhooks">
-			<WebhooksPanel scopes={[`run:script/${script?.path}`]} {webhooks} {args} />
+			<WebhooksPanel bind:token scopes={[`run:script/${script?.path}`]} {webhooks} {args} />
 		</svelte:fragment>
 		<svelte:fragment slot="schedule">
 			<RunPageSchedules isFlow={false} path={script.path ?? ''} {can_write} />