fix(frontend): fix payload query parameter in get by path webhook (#1875)

* fix(frontend): fix payload query parameter in get by path webhook

* feat(frontend): add missing get by path for flows

frontend/src/lib/components/common/table/AppRow.svelte

@@ -23,6 +23,8 @@
 	import { page } from '$app/stores'
 	import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import { DELETE } from '$lib/utils'
+	import AppExportButton from '$lib/components/apps/editor/AppExportButton.svelte'
+	import type { App } from '$lib/components/apps/types'
 
 	export let app: ListableApp & { has_draft?: boolean; draft_only?: boolean; canWrite: boolean }
 	export let marked: string | undefined
@@ -44,8 +46,20 @@
 	} = app
 
 	const dispatch = createEventDispatcher()
+
+	let appExport: AppExportButton
+
+	async function loadAppJson() {
+		const app: App = (await AppService.getAppByPath({
+			workspace: $workspaceStore!,
+			path
+		})) as unknown as App
+		appExport.open(app)
+	}
 </script>
 
+<AppExportButton bind:this={appExport} />
+
 <Row
 	href={`/apps/get/${path}`}
 	kind="app"
@@ -145,6 +159,13 @@
 							deploymentDrawer.openDrawer(path, 'app')
 						}
 					},
+					{
+						displayName: 'App JSON',
+						icon: faFileExport,
+						action: () => {
+							loadAppJson()
+						}
+					},
 					{
 						displayName: canWrite ? 'Share' : 'See Permissions',
 						icon: faShare,

frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte

@@ -17,13 +17,19 @@
 	const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
 </script>
 
-<Popover notClickable class="flex" disablePopup={tooltip === undefined} disappearTimeout={0}>
+<Popover
+	notClickable
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	disablePopup={tooltip === undefined}
+	disappearTimeout={0}
+>
 	<Tab
 		{disabled}
 		class={twMerge(
 			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
 			small ? 'px-1 py-0.5' : 'px-2 py-1',
 			$selected === value ? 'bg-white shadow-md text-gray-800' : 'text-gray-600 hover:bg-gray-200',
+
 			$$props.class
 		)}
 		on:click={() => select(value)}

frontend/src/lib/components/details/ClipboardPanel.svelte

@@ -16,6 +16,6 @@
 		copyToClipboard(content)
 	}}
 >
-	<div class="text-xs whitespace-pre-wrap">{content}</div>
-	<Clipboard size={14} />
+	<div class="text-xs truncate whitespace-pre-wrap w-11/12">{content}</div>
+	<Clipboard size={14} class="w-1/12" />
 </div>

frontend/src/lib/components/details/WebhooksPanel.svelte

@@ -80,33 +80,33 @@
 				/>
 			</ToggleButtonGroup>
 		</div>
-		{#if !isFlow}
-			<div class="flex flex-row justify-between">
-				<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
-					<ToggleButton
-						label="POST by path"
-						value="path"
-						icon={ArrowUpRight}
-						selectedColor="#fb923c"
-					/>
+		<div class="flex flex-row justify-between">
+			<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+				<ToggleButton
+					label="POST by path"
+					value="path"
+					icon={ArrowUpRight}
+					selectedColor="#fb923c"
+				/>
+				{#if !isFlow}
 					<ToggleButton
 						label="POST by hash"
 						value="hash"
 						icon={ArrowUpRight}
 						selectedColor="#fb923c"
 					/>
+				{/if}
 
-					<ToggleButton
-						label="GET by path"
-						value="get_path"
-						icon={ArrowDownRight}
-						disabled={webhookType !== 'sync'}
-						selectedColor="#14b8a6"
-					/>
-				</ToggleButtonGroup>
-			</div>
-		{/if}
+				<ToggleButton
+					label="GET by path"
+					value="get_path"
+					icon={ArrowDownRight}
+					disabled={webhookType !== 'sync'}
+					selectedColor="#14b8a6"
+				/>
+			</ToggleButtonGroup>
+		</div>
 		<div class="flex flex-row justify-between">
 			<div class="text-xs font-semibold flex flex-row items-center">Token configuration</div>
 			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
@@ -129,7 +129,17 @@
 				<div class="flex flex-col gap-2">
 					<ClipboardPanel
 						title="Url"
-						content={tokenType === 'query' ? `${url}?token=${token}` : url}
+						content={tokenType === 'query'
+							? `${url}?token=${token}${
+									requestType === 'get_path'
+										? `?paylod=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+										: ''
+							  }`
+							: `${url}${
+									requestType === 'get_path'
+										? `?paylod=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+										: ''
+							  }`}
 					/>
 
 					{#if requestType !== 'get_path'}

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -279,7 +279,8 @@
 						path: urlAsync
 					},
 					sync: {
-						path: urlSync
+						path: urlSync,
+						get_path: urlSync
 					}
 				}}
 				isFlow={true}