From 17337cb370eb13decaa766cf51fb071fd8d9bdc1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 20 May 2023 02:50:18 +0200
Subject: [PATCH] improve CURL helps

---
 .../(logged)/flows/get/[...path]/+page.svelte | 78 ++++++++++++-------
 .../scripts/get/[...hash]/+page.svelte        | 68 ++++++++--------
 2 files changed, 84 insertions(+), 62 deletions(-)

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 1eda42f160..5ca070fea6 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores'
 	import { FlowService, JobService, ScheduleService, type Flow, type Schedule } from '$lib/gen'
 	import {
-	canWrite,
+		canWrite,
 		copyToClipboard,
 		defaultIfEmptyString,
 		displayDaysAgo,
@@ -25,7 +25,7 @@
 
 	import { goto } from '$app/navigation'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { Alert, Badge, Button, Skeleton } from '$lib/components/common'
+	import { Alert, Badge, Button, Skeleton, Tab, TabContent, Tabs } from '$lib/components/common'
 	import CronInput from '$lib/components/CronInput.svelte'
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
@@ -135,11 +135,14 @@
 	let viewWebhookCommand = false
 
 	let args = undefined
-	$: curlCommand = `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
-		args
-	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${
-		flow?.path
-	}`
+
+	function curlCommand(async: boolean) {
+		return `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
+			args
+		)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run${
+			async ? '' : '_wait_result'
+		}/f/${flow?.path}`
+	}
 
 	let webhook: HTMLHeadElement
 	let moveDrawer: MoveDrawer
@@ -358,31 +361,46 @@
 					<div class="flex flex-row-reverse">
 						<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
 					</div>
+					<div class="flex flex-col gap-2 mt-2">
+						<div class="flex">
+							<Button
+								color="light"
+								size="lg"
+								endIcon={{ icon: viewWebhookCommand ? faChevronUp : faChevronDown }}
+								on:click={() => (viewWebhookCommand = !viewWebhookCommand)}
+							>
+								CURL
+							</Button>
+						</div>
+						{#if viewWebhookCommand}
+							<div transition:slide|local class="px-4">
+								<Tabs selected="async">
+									<Tab value="async">UUID/Async</Tab>
+									<Tab value="sync">Result/Sync</Tab>
+									<svelte:fragment slot="content">
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
+											><TabContent value="async"
+												>{curlCommand(true)} <span
+													on:click={() => copyToClipboard(curlCommand(true))}
+													class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
+												></TabContent
+											><TabContent value="sync"
+												>{curlCommand(false)} <span
+													on:click={() => copyToClipboard(curlCommand(false))}
+													class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
+												><br /><br />//^ returns an UUID. Fetch result until completed == true<br
+												/>curl -H "Authorization: Bearer $TOKEN" {$page.url.protocol}//{$page.url
+													.hostname}/api/w/{$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID</TabContent
+											></pre
+										>
+									</svelte:fragment>
+								</Tabs>
+							</div>
+						{/if}
+					</div>
 				</div>
 
-				<div class="flex flex-col gap-2 mt-2">
-					<div class="flex">
-						<Button
-							color="light"
-							size="sm"
-							endIcon={{ icon: viewWebhookCommand ? faChevronUp : faChevronDown }}
-							on:click={() => (viewWebhookCommand = !viewWebhookCommand)}
-						>
-							See example curl command
-						</Button>
-					</div>
-					{#if viewWebhookCommand}
-						<div transition:slide|local class="px-4">
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
-								>{curlCommand} <span
-									on:click={() => copyToClipboard(curlCommand)}
-									class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
-								></pre
-							>
-						</div>
-					{/if}
-				</div>
 				{#if schedule}
 					<div class="mt-10">
 						<h2
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 8883a9c9fa..ff6b5269df 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -8,9 +8,7 @@
 		copyToClipboard,
 		emptyString,
 		encodeState,
-
 		canWrite
-
 	} from '$lib/utils'
 	import {
 		faPlay,
@@ -190,11 +188,13 @@
 	let viewWebhookCommand = false
 
 	let args = undefined
-	$: curlCommand = `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
-		args
-	)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/p/${
-		script?.path
-	}`
+	function curlCommand(async: boolean) {
+		return `curl -H 'Content-Type: application/json' -H "Authorization: Bearer $TOKEN" -X POST -d '${JSON.stringify(
+			args
+		)}' ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run${
+			async ? '' : '_wait_result'
+		}/p/${script?.path}`
+	}
 	let moveDrawer: MoveDrawer
 </script>
 
@@ -461,7 +461,7 @@
 			</div>
 
 			<div class="max-w-2xl mt-12">
-				<h3 bind:this={webhookElem} id="webhooks">
+				<h3 class="mb-4" bind:this={webhookElem} id="webhooks">
 					Webhooks
 					<Tooltip>
 						{SCRIPT_VIEW_WEBHOOK_INFO_TIP}
@@ -520,35 +520,39 @@
 										<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
 									</div>
 								{/if}
+								{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
+									<div class="flex">
+										<Button
+											color="light"
+											size="lg"
+											endIcon={{ icon: viewWebhookCommand ? faChevronUp : faChevronDown }}
+											on:click={() => (viewWebhookCommand = !viewWebhookCommand)}
+										>
+											CURL
+										</Button>
+									</div>
+								{/if}
+								{#if viewWebhookCommand}
+									{@const command = curlCommand(key == 'async')}
+									<div transition:slide|local class="px-4">
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
+											>{command} <span
+												on:click={() => copyToClipboard(command)}
+												class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
+											>{#if key == 'async'}<br /><br
+												/>//^ returns an UUID. Fetch until completed == true<br
+												/>curl -H "Authorization: Bearer $TOKEN" {$page.url.protocol}//{$page.url
+													.hostname}/api/w/{$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID{/if}</pre
+										>
+									</div>
+								{/if}
 							</TabContent>
 						{/each}
-						{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
-							<div class="flex">
-								<Button
-									color="light"
-									size="sm"
-									endIcon={{ icon: viewWebhookCommand ? faChevronUp : faChevronDown }}
-									on:click={() => (viewWebhookCommand = !viewWebhookCommand)}
-								>
-									See example curl command
-								</Button>
-							</div>
-						{/if}
-						{#if viewWebhookCommand}
-							<div transition:slide|local class="px-4">
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap"
-									>{curlCommand} <span
-										on:click={() => copyToClipboard(curlCommand)}
-										class="cursor-pointer ml-2"><Icon data={faClipboard} /></span
-									></pre
-								>
-							</div>
-						{/if}
 					</svelte:fragment>
 				</Tabs>
 			</div>
-			<div class="mt-20">
+			<div class="mt-32">
 				{#if can_write}
 					<h3>Danger zone</h3>
 					<div class="flex gap-2">