From c0e85e8476b6cde8208cd4214bc89e82e208d516 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 1 Nov 2022 23:48:04 +0100
Subject: [PATCH] UI improvements

---
 frontend/src/lib/components/ArgInfo.svelte    | 35 +++++++++++--------
 .../components/common/drawer/Drawer.svelte    |  4 ++-
 .../flows/content/FlowModuleWrapper.svelte    |  7 +++-
 .../src/routes/scripts/get/[...hash].svelte   |  4 +--
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index 22f802127c..6ba7149161 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -1,33 +1,34 @@
 <script lang="ts">
 	import { truncate } from '$lib/utils'
-	import Modal from './Modal.svelte'
 	import Tooltip from './Tooltip.svelte'
 	import json from 'svelte-highlight/languages/json'
 	import { Highlight } from 'svelte-highlight'
-	import { ResourceService, type Resource } from '$lib/gen'
+	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
+	import Drawer from './common/drawer/Drawer.svelte'
+	import { DrawerContent } from './common'
 
 	export let value: any
-	let resourceViewer: Modal
-	let resource: Resource
+	let jsonViewer: Drawer
+	let jsonViewerContent: any | undefined
 
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
 	}
 
 	async function getResource(path: string) {
-		resource = await ResourceService.getResource({ workspace: $workspaceStore!, path })
+		jsonViewerContent = (await ResourceService.getResource({ workspace: $workspaceStore!, path }))
+			.value
 	}
 
-	let asJson: string = JSON.stringify(value, null, 4)
+	$: asJson = JSON.stringify(value, null, 4)
 </script>
 
-<Modal bind:this={resourceViewer}>
-	<div slot="title">{resource.path}</div>
-	<div slot="content">
-		<Highlight language={json} code={JSON.stringify(resource.value, null, 4)} />
-	</div>
-</Modal>
+<Drawer bind:this={jsonViewer} size="400px">
+	<DrawerContent title="See JSON" on:close={jsonViewer.toggleDrawer}>
+		<Highlight language={json} code={JSON.stringify(jsonViewerContent, null, 4)} />
+	</DrawerContent>
+</Drawer>
 
 {#if value == '<function call>'}
 	{'<function call>'}<Tooltip
@@ -39,10 +40,16 @@
 		class="text-xs text-blue-500"
 		on:click={async () => {
 			await getResource(value.substring('$res:'.length))
-			resourceViewer.openModal()
+			jsonViewer.openModal()
 		}}>{value}</button
 	>{:else if asJson.length > 40}
-	{truncate(asJson, 40)}<Tooltip>{asJson}</Tooltip>
+	{truncate(asJson, 40)}<a
+		href="#json"
+		on:click|preventDefault={() => {
+			jsonViewerContent = value
+			jsonViewer.toggleDrawer()
+		}}>(+)</a
+	>
 {:else}
 	{asJson}
 {/if}
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 961546ee1f..f605cf6a03 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -43,7 +43,9 @@
 	<div class="overlay" on:click={handleClickAway} />
 
 	<div class="panel {placement}" class:size>
-		<slot />
+		{#if open}
+			<slot />
+		{/if}
 	</div>
 </aside>
 
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index c980fafd39..d6a76b2772 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -71,8 +71,13 @@
 				$flowStateStore[module.id] = state
 			}}
 			on:pick={async ({ detail }) => {
-				const { path, summary } = detail
+				const { path, summary, kind } = detail
 				const [module, state] = await pickScript(path, summary, flowModule.id)
+
+				if (kind == Script.kind.APPROVAL) {
+					module.suspend = { required_events: 1, timeout: 1800 }
+				}
+
 				flowModule = module
 				$flowStateStore[module.id] = state
 			}}
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 391db4c3b9..21fa121bf9 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -341,7 +341,7 @@
 												{@const url = webhooks[key][type]}
 												<li class="flex justify-between items-center mt-2">
 													<a
-														href={'//' + url}
+														href={$page.url.protocol + '//' + url}
 														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 													>
 														{url}
@@ -351,7 +351,7 @@
 															{type}
 														</Badge>
 														<Button
-															on:click={() => copyToClipboard(url)}
+															on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
 															color="blue"
 															size="xs"
 															startIcon={{ icon: faClipboard }}