From baacf46ae23671feea6b3f23c1ae269f912eeaa7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 28 Jul 2023 01:02:45 +0200
Subject: [PATCH] UX nits

---
 frontend/src/lib/components/Editor.svelte     |   4 +-
 .../src/lib/components/SupabaseConnect.svelte |  26 +++++
 .../InlineScriptEditor.svelte                 | 110 +++++++++---------
 .../components/details/WebhooksPanel.svelte   |   4 +-
 .../(root)/(logged)/resources/+page.svelte    |  14 ++-
 5 files changed, 99 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/lib/components/SupabaseConnect.svelte

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 0ea9586339..6023fd6c06 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -105,9 +105,11 @@
 
 	const uri =
 		lang == 'typescript'
-			? `file:///${filePath}.${langToExt(lang)}`
+			? `file:///${filePath ?? rHash}.${langToExt(lang)}`
 			: `file:///tmp/monaco/${randomHash()}.${langToExt(lang)}`
 
+	console.log('uri', uri)
+
 	buildWorkerDefinition('../../../workers', import.meta.url, false)
 
 	export function getCode(): string {
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
new file mode 100644
index 0000000000..19d1fced63
--- /dev/null
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	// import { oauthStore, workspaceStore } from '$lib/stores'
+	import { DrawerContent } from './common'
+	import Drawer from './common/drawer/Drawer.svelte'
+	// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+
+	let drawer: Drawer
+	export async function open() {
+		drawer.openDrawer?.()
+		step = 'init'
+	}
+
+	let step: 'init' | 'resource' = 'init'
+
+	// let token = 'foo'
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Connect or Create a Supabase Database" on:close={drawer.closeDrawer}>
+		{#if step === 'init'}
+			<h2>Connect an existing database</h2>
+			<h2>Create a new database</h2>
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index c52d6abaad..8d83785586 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -211,64 +211,66 @@
 		<!-- {inlineScript.content} -->
 
 		<div class="border-y h-full">
-			{#if inlineScript.language != 'frontend' && !drawerIsOpen}
-				<Editor
-					deno={inlineScript.language == 'deno'}
-					path={inlineScript.path}
-					bind:this={editor}
-					class="flex flex-1 grow h-full"
-					lang={scriptLangToEditorLang(inlineScript?.language)}
-					bind:code={inlineScript.content}
-					fixedOverflowWidgets={true}
-					cmdEnterAction={async () => {
-						if (inlineScript) {
-							inlineScript.content = editor?.getCode() ?? ''
-						}
-						runLoading = true
-						await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? [])
-						runLoading = false
-					}}
-					on:change={async (e) => {
-						if (inlineScript && inlineScript.language != 'frontend') {
-							const oldSchema = JSON.stringify(inlineScript.schema)
-							if (inlineScript.schema == undefined) {
-								inlineScript.schema = emptySchema()
+			{#if !drawerIsOpen}
+				{#if inlineScript.language != 'frontend'}
+					<Editor
+						deno={inlineScript.language == 'deno'}
+						path={inlineScript.path}
+						bind:this={editor}
+						class="flex flex-1 grow h-full"
+						lang={scriptLangToEditorLang(inlineScript?.language)}
+						bind:code={inlineScript.content}
+						fixedOverflowWidgets={true}
+						cmdEnterAction={async () => {
+							if (inlineScript) {
+								inlineScript.content = editor?.getCode() ?? ''
 							}
-							await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-							if (JSON.stringify(inlineScript.schema) != oldSchema) {
-								inlineScript = inlineScript
-								loadSchemaAndInputsByName()
+							runLoading = true
+							await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? [])
+							runLoading = false
+						}}
+						on:change={async (e) => {
+							if (inlineScript && inlineScript.language != 'frontend') {
+								const oldSchema = JSON.stringify(inlineScript.schema)
+								if (inlineScript.schema == undefined) {
+									inlineScript.schema = emptySchema()
+								}
+								await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+								if (JSON.stringify(inlineScript.schema) != oldSchema) {
+									inlineScript = inlineScript
+									loadSchemaAndInputsByName()
+								}
 							}
-						}
-						$app = $app
-					}}
-				/>
-			{:else}
-				<SimpleEditor
-					bind:this={simpleEditor}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
-					cmdEnterAction={async () => {
-						runLoading = true
-						await await Promise.all(
-							$runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined))
-						)
-						runLoading = false
-					}}
-					on:change={() => {
-						$app = $app
-					}}
+							$app = $app
+						}}
+					/>
+				{:else}
+					<SimpleEditor
+						bind:this={simpleEditor}
+						class="h-full"
+						{extraLib}
+						bind:code={inlineScript.content}
+						lang="javascript"
+						cmdEnterAction={async () => {
+							runLoading = true
+							await await Promise.all(
+								$runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined))
+							)
+							runLoading = false
+						}}
+						on:change={() => {
+							$app = $app
+						}}
+					/>
+				{/if}
+
+				<DiffEditor
+					bind:this={diffEditor}
+					class="hidden h-full"
+					automaticLayout
+					fixedOverflowWidgets
 				/>
 			{/if}
-
-			<DiffEditor
-				bind:this={diffEditor}
-				class="hidden h-full"
-				automaticLayout
-				fixedOverflowWidgets
-			/>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/details/WebhooksPanel.svelte b/frontend/src/lib/components/details/WebhooksPanel.svelte
index 8183985a9d..46677b140e 100644
--- a/frontend/src/lib/components/details/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/details/WebhooksPanel.svelte
@@ -61,12 +61,12 @@ fetch(${tokenType === 'query' ? `\`${url}?token=${token}\`` : `\`${url}\``}, {
 	},
 	${requestType !== 'get_path' ? `body: body` : ''}
 }).then(
-	response => response.json()
+	response => response.${webhookType === 'sync' ? 'json' : 'text'}()
 ).then(data => {
 	${
 		webhookType === 'sync'
 			? 'console.log(data)'
-			: `let UUID = data.uuid;
+			: `let UUID = data;
     let checkCompletion = setInterval(() => {
 		fetch(\`${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\$\{UUID\}\`, {
 			method: 'GET',
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 0b801ee5c6..c1d4224a9b 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -21,6 +21,7 @@
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import SupabaseConnect from '$lib/components/SupabaseConnect.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -78,6 +79,7 @@
 	let resourceEditor: ResourceEditor | undefined
 	let shareModal: ShareModal
 	let appConnect: AppConnect
+	let supabaseConnect: SupabaseConnect
 	let deleteConfirmedCallback: (() => void) | undefined = undefined
 	let loading = {
 		resources: true,
@@ -233,8 +235,15 @@
 		if ($oauthStore && resource_type) {
 			appConnect.openFromOauth?.(resource_type)
 		}
-		if ($page.url.searchParams.get('connect_app')) {
-			const rt = $page.url.searchParams.get('connect_app') ?? undefined
+
+		const callback = $page.url.searchParams.get('callback')
+		if (callback == 'supabase') {
+			supabaseConnect.open?.()
+		}
+
+		const connect_app = $page.url.searchParams.get('connect_app')
+		if (connect_app) {
+			const rt = connect_app ?? undefined
 			if (rt == 'undefined') {
 				appConnect.open?.()
 			} else {
@@ -778,6 +787,7 @@
 	{/if}
 </CenteredPage>
 
+<SupabaseConnect bind:this={supabaseConnect} on:refresh={loadResources} />
 <AppConnect bind:this={appConnect} on:refresh={loadResources} />
 <ResourceEditor bind:this={resourceEditor} on:refresh={loadResources} />