From 3e940ca5d0341e7946b98a5f3c7c8de7ced6d487 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 4 Aug 2022 21:31:07 +0200
Subject: [PATCH] Bug fix for whole flow preview (#335)

* Fix connect a ressource + preview on pull mode

* Remove code duplication
---
 frontend/src/lib/components/AppConnect.svelte | 28 ++++++++++++-------
 .../src/lib/components/FlowBuilder.svelte     |  1 -
 .../src/lib/components/FlowPreview.svelte     | 14 +++-------
 .../lib/components/FlowPreviewContent.svelte  | 21 +++++---------
 frontend/src/lib/components/flows/utils.ts    | 26 +++++++++++++++--
 5 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index da71c4efca..dc905fd0e8 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -13,20 +13,20 @@
 </script>
 
 <script lang="ts">
+	import { oauthStore, userStore, workspaceStore } from '$lib/stores'
+	import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import PageHeader from './PageHeader.svelte'
-	import { workspaceStore, userStore, oauthStore } from '$lib/stores'
-	import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
 
 	import { OauthService, ResourceService, VariableService, type TokenResponse } from '$lib/gen'
 
-	import { createEventDispatcher } from 'svelte'
-	import Modal from './Modal.svelte'
-	import Icon from 'svelte-awesome'
-	import Path from './Path.svelte'
-	import Password from './Password.svelte'
-	import { sendUserToast, truncateRev } from '$lib/utils'
 	import { page } from '$app/stores'
+	import { sendUserToast, truncateRev } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
+	import Icon from 'svelte-awesome'
+	import Modal from './Modal.svelte'
+	import Password from './Password.svelte'
+	import Path from './Path.svelte'
 
 	let manual = false
 	let value: string = ''
@@ -50,12 +50,19 @@
 
 	let pathError = ''
 
-	export function open(rt?: string) {
+	export async function open(rt?: string) {
 		step = 1
 		value = ''
-		resource_type = ''
 		no_back = false
 		resource_type = rt ?? ''
+
+		await loadConnects()
+
+		const connect = connects[resource_type]
+		if (connect) {
+			scopes = connect.scopes
+			extra_params = Object.entries(connect.extra_params ?? {})
+		}
 		modal.openModal()
 	}
 
@@ -193,6 +200,7 @@
 							resource_type = key
 							scopes = values.scopes
 							extra_params = Object.entries(values.extra_params ?? {})
+
 							dispatch('click')
 						}}
 					>
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 5ccd468b19..61d31d120e 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -214,7 +214,6 @@
 		<div class="absolute top-0 h-full">
 			<div class="fixed border-l-2 right-0 h-screen w-1/3">
 				<FlowPreviewContent
-					flow={$flowStore}
 					bind:args={scheduleArgs}
 					on:close={() => (previewOpen = !previewOpen)}
 					on:change={(e) => {
diff --git a/frontend/src/lib/components/FlowPreview.svelte b/frontend/src/lib/components/FlowPreview.svelte
index 316755fab3..0b586ce7f9 100644
--- a/frontend/src/lib/components/FlowPreview.svelte
+++ b/frontend/src/lib/components/FlowPreview.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
-	import { type InputTransform, Job, JobService, type Flow } from '$lib/gen'
+	import { Job, JobService, type Flow } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast, truncateRev } from '$lib/utils'
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
@@ -8,7 +8,7 @@
 	import Icon from 'svelte-awesome'
 	import FlowJobResult from './FlowJobResult.svelte'
 	import type { FlowMode } from './flows/flowStore'
-	import { flowToMode } from './flows/utils'
+	import { flowToMode, runFlowPreview } from './flows/utils'
 	import FlowStatusViewer from './FlowStatusViewer.svelte'
 	import RunForm from './RunForm.svelte'
 	import Tabs from './Tabs.svelte'
@@ -40,14 +40,8 @@
 		intervalId && clearInterval(intervalId)
 		let newFlow = flowToMode(flow, mode)
 		newFlow = tab == 'upto' ? truncateFlow(newFlow) : extractStep(newFlow)
-		jobId = await JobService.runFlowPreview({
-			workspace: $workspaceStore ?? '',
-			requestBody: {
-				args,
-				value: newFlow.value,
-				path: newFlow.path
-			}
-		})
+		jobId = await runFlowPreview(args, newFlow)
+
 		jobs = []
 		intervalId = setInterval(loadJob, 1000)
 		sendUserToast(`started preview ${truncateRev(jobId, 10)}`)
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 98467e57dc..72fd9fa410 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Job, JobService, type Flow } from '$lib/gen'
+	import { Job, JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast, truncateRev } from '$lib/utils'
 	import { faClose } from '@fortawesome/free-solid-svg-icons'
@@ -7,12 +7,13 @@
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import FlowJobResult from './FlowJobResult.svelte'
+	import { flowStore } from './flows/flowStore'
+	import { runFlowPreview } from './flows/utils'
 	import FlowStatusViewer from './FlowStatusViewer.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 
 	const dispatch = createEventDispatcher()
 
-	export let flow: Flow
 	export let args: Record<string, any> = {}
 
 	let intervalId: NodeJS.Timer
@@ -25,15 +26,7 @@
 
 	export async function runPreview(args: Record<string, any>) {
 		intervalId && clearInterval(intervalId)
-
-		jobId = await JobService.runFlowPreview({
-			workspace: $workspaceStore ?? '',
-			requestBody: {
-				args,
-				value: flow.value,
-				path: flow.path
-			}
-		})
+		jobId = await runFlowPreview(args, $flowStore)
 		jobs = []
 		intervalId = setInterval(loadJob, 1000)
 		sendUserToast(`started preview ${truncateRev(jobId, 10)}`)
@@ -64,9 +57,9 @@
 				<Icon data={faClose} />
 			</Button>
 		</div>
-		<SchemaForm schema={flow.schema} bind:isValid bind:args />
-		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md"
-			>Preview
+		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
+		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
+			Preview
 		</Button>
 	</div>
 	<div class="h-full overflow-y-auto mb-16">
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index fd440e2bd1..b27bea5e72 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -1,10 +1,20 @@
 import type { Schema } from '$lib/common'
-import type { Flow, FlowModule, FlowModuleValue, InputTransform, Job, RawScript } from '$lib/gen'
+import {
+	JobService,
+	type Flow,
+	type FlowModule,
+	type FlowModuleValue,
+	type InputTransform,
+	type Job,
+	type RawScript
+} from '$lib/gen'
 import { inferArgs } from '$lib/infer'
 import { loadSchema } from '$lib/scripts'
+import { workspaceStore } from '$lib/stores'
 import { emptySchema, getScriptByPath, schemaToObject } from '$lib/utils'
+import { get } from 'svelte/store'
 
-import type { FlowMode } from './flowStore'
+import { mode, type FlowMode } from './flowStore'
 
 export function flowToMode(flow: Flow | any, mode: FlowMode): Flow {
 	const newFlow: Flow = JSON.parse(JSON.stringify(flow))
@@ -218,3 +228,15 @@ export function jobsToResults(jobs: Job[]) {
 		}
 	})
 }
+
+export async function runFlowPreview(args: Record<string, any>, flow: Flow) {
+	const newFlow = flowToMode(flow, get(mode))
+	return await JobService.runFlowPreview({
+		workspace: get(workspaceStore) ?? '',
+		requestBody: {
+			args,
+			value: newFlow.value,
+			path: newFlow.path
+		}
+	})
+}