From ca2b35b41e4d9f90e844436e8e47cfa699e30ff8 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 5 Nov 2022 10:02:00 +0100
Subject: [PATCH] edit script preload same args

---
 frontend/src/lib/components/ArgInfo.svelte        |  2 +-
 frontend/src/lib/components/FlowBuilder.svelte    |  3 ++-
 frontend/src/lib/components/RunForm.svelte        | 15 ++-------------
 frontend/src/lib/components/ScriptBuilder.svelte  |  2 ++
 frontend/src/lib/components/ScriptEditor.svelte   |  3 ++-
 frontend/src/lib/utils.ts                         | 13 +++++++++++++
 frontend/src/routes/flows/edit/[...path].svelte   |  5 +++--
 frontend/src/routes/run/[...run].svelte           |  6 +++++-
 frontend/src/routes/scripts/edit/[...hash].svelte |  7 ++++---
 frontend/tailwind.config.cjs                      |  3 +++
 10 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index 23a9e12cea..3026ef001f 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -55,7 +55,7 @@
 	{/if}
 {:else}
 	<div class="max-h-40 overflow-auto">
-		<ObjectViewer topBrackets={true} pureViewer={true} json={value} />
+		<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
 	</div>
 	{#if JSON.stringify(value).length > 120}
 		<button
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index e330012172..311caf641e 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -29,6 +29,7 @@
 
 	export let initialPath: string = ''
 	export let selectedId: string | undefined
+	export let initialArgs: Record<string, any> = {}
 
 	let pathError = ''
 
@@ -146,7 +147,7 @@
 
 	const selectedIdStore = writable<string>('settings')
 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
-	const previewArgsStore = writable<Record<string, any>>({})
+	const previewArgsStore = writable<Record<string, any>>(initialArgs)
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 58b9515d01..b17f110792 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	import { decodeState, getToday } from '$lib/utils'
+	import { decodeArgs, decodeState, getToday } from '$lib/utils'
 	import { slide } from 'svelte/transition'
 
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
@@ -16,21 +16,10 @@
 	export let schedulable = true
 	export let detailed = true
 
-	export let args: Record<string, any> = {}
+	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
 	let isValid = true
 
-	let queryArgs = $page.url.searchParams.get('args')
-	if (queryArgs) {
-		const parsed = decodeState(queryArgs)
-		Object.entries(parsed).forEach(([k, v]) => {
-			if (v == '<function call>') {
-				parsed[k] = undefined
-			}
-		})
-		args = parsed
-	}
-
 	// Run later
 	let viewOptions = false
 	let scheduledForStr: string | undefined
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 2e91ac86fc..2bde7cecf0 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -23,6 +23,7 @@
 	export let script: Script
 	export let initialPath: string = ''
 	export let template: 'pgsql' | 'script' = 'script'
+	export let initialArgs: Record<string, any> = {}
 
 	let viewScriptKind = script.kind !== Script.kind.SCRIPT
 	let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO
@@ -287,6 +288,7 @@
 			path={script.path}
 			bind:code={script.content}
 			lang={script.language}
+			{initialArgs}
 		/>
 	{:else if step === 3}
 		<CenteredPage>
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 42d259d1fe..2746a668c4 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -24,6 +24,7 @@
 	export let code: string
 	export let path: string | undefined
 	export let lang: Preview.language
+	export let initialArgs: Record<string, any> = {}
 
 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 
@@ -35,7 +36,7 @@
 	let testJobLoader: TestJobLoader
 
 	// Test args input
-	let args: Record<string, any> = {}
+	let args: Record<string, any> = initialArgs
 	let isValid: boolean = true
 
 	// Test
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 5c73d063ec..885255dc78 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -226,6 +226,19 @@ export function decodeState(query: string): any {
 	return JSON.parse(decodeURIComponent(atob(query)))
 }
 
+export function decodeArgs(queryArgs: string | undefined): any {
+	if (queryArgs) {
+		const parsed = decodeState(queryArgs)
+		Object.entries(parsed).forEach(([k, v]) => {
+			if (v == '<function call>') {
+				parsed[k] = undefined
+			}
+		})
+		return parsed
+	}
+	return {}
+}
+
 export async function setQuery(url: URL, key: string, value: string): Promise<void> {
 	url.searchParams.set(key, value)
 	await goto(`?${url.searchParams.toString()}`)
diff --git a/frontend/src/routes/flows/edit/[...path].svelte b/frontend/src/routes/flows/edit/[...path].svelte
index a4ac322820..44dfbd5ef3 100644
--- a/frontend/src/routes/flows/edit/[...path].svelte
+++ b/frontend/src/routes/flows/edit/[...path].svelte
@@ -12,12 +12,13 @@
 	import { page } from '$app/stores'
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { decodeState, emptySchema } from '$lib/utils'
+	import { decodeArgs, decodeState, emptySchema } from '$lib/utils'
 	import { initFlow } from '$lib/components/flows/flowStore'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 
 	const initialState = $page.url.searchParams.get('state')
 	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
+	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
 	let selectedId: string | undefined = undefined
 
@@ -58,4 +59,4 @@
 	}
 </script>
 
-<FlowBuilder {initialPath} {selectedId} />
+<FlowBuilder {initialPath} {selectedId} {initialArgs} />
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index 6b3202dfb3..a8006123d2 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -111,7 +111,11 @@
 			{@const runHref = `${stem}/run/${route}${
 				job?.args ? '?args=' + encodeURIComponent(encodeState(job?.args)) : ''
 			}`}
-			{@const editHref = `${stem}/edit/${route}${isScript ? '?step=2' : ''}`}
+			{@const editHref = `${stem}/edit/${route}${
+				isScript
+					? `?step=2${job?.args ? `&args=${encodeURIComponent(encodeState(job?.args))}` : ''}`
+					: `${job?.args ? `?args=${encodeURIComponent(encodeState(job?.args))}` : ''}`
+			}`}
 			{@const isRunning = job && 'running' in job && job.running}
 			{@const runsHref = `/runs/${job?.script_path}${!isScript ? '?jobKind=flow' : ''}`}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
diff --git a/frontend/src/routes/scripts/edit/[...hash].svelte b/frontend/src/routes/scripts/edit/[...hash].svelte
index 823538a787..2071c6eb28 100644
--- a/frontend/src/routes/scripts/edit/[...hash].svelte
+++ b/frontend/src/routes/scripts/edit/[...hash].svelte
@@ -12,10 +12,12 @@
 	import { page } from '$app/stores'
 	import { workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
-	import { decodeState } from '$lib/utils'
+	import { decodeArgs, decodeState } from '$lib/utils'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 
 	const initialState = $page.url.searchParams.get('state')
+	const initialArgs = decodeArgs($page.url.searchParams.get('args') ?? undefined)
+
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
 	let script: Script | undefined
@@ -39,9 +41,8 @@
 			loadScript()
 		}
 	}
-
 </script>
 
 {#if script}
-	<ScriptBuilder {initialPath} {script} />
+	<ScriptBuilder {initialPath} {script} {initialArgs} />
 {/if}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 11f5668e06..e2bbd5deb7 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -42,10 +42,13 @@ const config = {
 			},
 			orange: {
 				100: '#ffedd5',
+				200: '#ffedd5',
 				400: '#fb923c',
 				500: '#f97316',
 				600: '#ea580c',
 				700: '#c2410c',
+				800: '#c2410c',
+
 			},
 			yellow: {
 				50: '#fefce8',