From 9d5cfafb281c1cc7dd3eb18e5eb7bf9f7423957c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 9 Jul 2023 23:49:30 +0200
Subject: [PATCH] feat: add test connection to resource editor

---
 .../src/lib/components/ApiConnectForm.svelte  | 46 ++---------------
 .../src/lib/components/ResourceEditor.svelte  |  3 +-
 .../src/lib/components/TestConnection.svelte  | 51 +++++++++++++++++++
 .../scripts/get/[...hash]/+page.svelte        |  3 --
 4 files changed, 56 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/lib/components/TestConnection.svelte

diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
index 5a3bb3394a..fe9ddd85fa 100644
--- a/frontend/src/lib/components/ApiConnectForm.svelte
+++ b/frontend/src/lib/components/ApiConnectForm.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { JobService, Preview, ResourceService } from '$lib/gen'
+	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { emptySchema, emptyString } from '$lib/utils'
-	import { Loader2 } from 'lucide-svelte'
-	import Button from './common/button/Button.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
-	import { sendUserToast } from '$lib/toast'
+	import TestConnection from './TestConnection.svelte'
 
 	export let resource_type: string
 	export let args: Record<string, any> | any = {}
@@ -60,40 +58,6 @@
 			parseJson()
 		}
 	}
-
-	let loading = false
-	async function testConnection() {
-		loading = true
-		const job = await JobService.runScriptPreview({
-			workspace: $workspaceStore!,
-			requestBody: {
-				language: 'deno' as Preview.language,
-				content: `
-import { Client } from 'https://deno.land/x/postgres/mod.ts'
-export async function main(args: any) {
-	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + (args.port ?? 5432) + "/" + args.dbname + "?sslmode=" + args.sslmode)
-	await client.connect()
-	return 'Connection successful'
-}
-				`,
-				args: {
-					args
-				}
-			}
-		})
-		await new Promise((r) => setTimeout(r, 3000))
-		loading = false
-		const testResult = await JobService.getCompletedJob({
-			workspace: $workspaceStore!,
-			id: job
-		})
-		if (testResult) {
-			sendUserToast(
-				testResult.success ? testResult.result : testResult.result?.['error']?.['message'],
-				!testResult.success
-			)
-		}
-	}
 </script>
 
 {#if !notFound}
@@ -104,11 +68,7 @@ export async function main(args: any) {
 				right: 'As JSON'
 			}}
 		/>
-		{#if resource_type == 'postgresql'}
-			<Button size="sm" on:click={testConnection}
-				>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
-			>
-		{/if}
+		<TestConnection {resource_type} />
 	</div>
 {:else}
 	<p class="italic text-gray-500 text-xs mb-4"
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 5f816aa919..2e6b538448 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -15,6 +15,7 @@
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
 	import { sendUserToast } from '$lib/toast'
+	import TestConnection from './TestConnection.svelte'
 
 	let path = ''
 	let initialPath = ''
@@ -150,13 +151,13 @@
 					/>
 				</div>
 				<div class="flex w-full justify-between max-w-lg items-center mt-4">
-					<h3>Value</h3>
 					<Toggle
 						on:change={(e) => switchTab(e.detail)}
 						options={{
 							right: 'As JSON'
 						}}
 					/>
+					<TestConnection resource_type={resourceToEdit?.resource_type} {args} />
 				</div>
 				<div class="text-sm">
 					{#if loadingSchema}
diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte
new file mode 100644
index 0000000000..d0c58ba98b
--- /dev/null
+++ b/frontend/src/lib/components/TestConnection.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { JobService, Preview } from '$lib/gen'
+
+	import { Loader2 } from 'lucide-svelte'
+	import Button from './common/button/Button.svelte'
+	import { sendUserToast } from '$lib/toast'
+	import { workspaceStore } from '$lib/stores'
+
+	export let resource_type: string | undefined
+	export let args: Record<string, any> | any = {}
+
+	let loading = false
+	async function testConnection() {
+		loading = true
+		const job = await JobService.runScriptPreview({
+			workspace: $workspaceStore!,
+			requestBody: {
+				language: 'deno' as Preview.language,
+				content: `
+import { Client } from 'https://deno.land/x/postgres/mod.ts'
+export async function main(args: any) {
+	const client = new Client("postgres://" + args.user + ":" + args.password + "@" + args.host + ":" + (args.port ?? 5432) + "/" + args.dbname + "?sslmode=" + args.sslmode)
+	await client.connect()
+	return 'Connection successful'
+}
+				`,
+				args: {
+					args
+				}
+			}
+		})
+		await new Promise((r) => setTimeout(r, 3000))
+		loading = false
+		const testResult = await JobService.getCompletedJob({
+			workspace: $workspaceStore!,
+			id: job
+		})
+		if (testResult) {
+			sendUserToast(
+				testResult.success ? testResult.result : testResult.result?.['error']?.['message'],
+				!testResult.success
+			)
+		}
+	}
+</script>
+
+{#if resource_type == 'postgresql'}
+	<Button size="sm" on:click={testConnection}
+		>{#if loading}<Loader2 class="animate-spin mr-2" />{/if} Test connection</Button
+	>
+{/if}
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 9c93a0c6d9..29525af5cb 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -28,7 +28,6 @@
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
 	import { goto } from '$app/navigation'
-	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import MoveDrawer from '$lib/components/MoveDrawer.svelte'
 
 	import { sendUserToast } from '$lib/toast'
@@ -184,7 +183,6 @@
 			sendUserToast(`Could not create job: ${err.body}`, true)
 		}
 	}
-	let scheduleEditor: ScheduleEditor
 
 	let args = undefined
 	let moveDrawer: MoveDrawer
@@ -354,7 +352,6 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
-<ScheduleEditor bind:this={scheduleEditor} />
 <ShareModal bind:this={shareModal} />
 
 {#if script}