From 71470d7da9d3c7a52d7c5a206849f2e63ac4fa02 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 2 Sep 2024 15:13:42 +0200
Subject: [PATCH] feat: add yaml editor in flow builder

---
 .../src/lib/components/FlowBuilder.svelte     |  8 +++
 .../src/lib/components/FlowViewerInner.svelte |  8 +--
 .../src/lib/components/WorkerTagPicker.svelte |  5 +-
 .../flows/content/FlowSettings.svelte         |  6 +-
 .../flows/header/FlowYamlEditor.svelte        | 62 +++++++++++++++++++
 frontend/src/lib/components/flows/types.ts    | 16 ++---
 frontend/src/lib/components/flows/utils.ts    | 23 +++++++
 7 files changed, 108 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/header/FlowYamlEditor.svelte

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index cf870d4332..3b29507f41 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -81,6 +81,7 @@
 	import CustomPopover from './CustomPopover.svelte'
 	import Summary from './Summary.svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from './custom_ui'
+	import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte'
 
 	export let initialPath: string = ''
 	export let pathStoreInit: string | undefined = undefined
@@ -1007,6 +1008,7 @@
 	let flowTutorials: FlowTutorials | undefined = undefined
 
 	let jsonViewerDrawer: Drawer | undefined = undefined
+	let yamlEditorDrawer: Drawer | undefined = undefined
 	let flowHistory: FlowHistory | undefined = undefined
 
 	export function triggerTutorial() {
@@ -1049,6 +1051,11 @@
 							displayName: 'Export',
 							icon: FileJson,
 							action: () => jsonViewerDrawer?.openDrawer()
+						},
+						{
+							displayName: 'Edit in YAML',
+							icon: FileJson,
+							action: () => yamlEditorDrawer?.openDrawer()
 						}
 				  ]
 				: [])
@@ -1069,6 +1076,7 @@
 		{#if $pathStore}
 			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
 		{/if}
+		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<FlowCopilotInputsModal
 			on:confirmed={async () => {
diff --git a/frontend/src/lib/components/FlowViewerInner.svelte b/frontend/src/lib/components/FlowViewerInner.svelte
index 9961ca419a..7fd487ee43 100644
--- a/frontend/src/lib/components/FlowViewerInner.svelte
+++ b/frontend/src/lib/components/FlowViewerInner.svelte
@@ -9,6 +9,7 @@
 	import YAML from 'yaml'
 	import { yaml } from 'svelte-highlight/languages'
 	import HighlightTheme from './HighlightTheme.svelte'
+	import { filteredContentForExport } from './flows/utils'
 
 	export let flow: {
 		summary: string
@@ -17,12 +18,7 @@
 		schema?: any
 	}
 
-	$: flowFiltered = {
-		summary: flow.summary,
-		description: flow.description,
-		value: flow.value,
-		schema: flow.schema
-	}
+	$: flowFiltered = filteredContentForExport(flow)
 
 	let rawType: 'json' | 'yaml' = 'yaml'
 
diff --git a/frontend/src/lib/components/WorkerTagPicker.svelte b/frontend/src/lib/components/WorkerTagPicker.svelte
index 29fbbadfd7..a00278b780 100644
--- a/frontend/src/lib/components/WorkerTagPicker.svelte
+++ b/frontend/src/lib/components/WorkerTagPicker.svelte
@@ -18,7 +18,7 @@
 
 <div class="flex gap-2 items-center">
 	<div class="max-w-sm grow">
-		{#if workerTags}
+		{#if $workerTags}
 			{#if $workerTags?.length ?? 0 > 0}
 				<select
 					value={tag}
@@ -35,6 +35,9 @@
 					{:else}
 						<option value="" disabled selected>Worker Group Tag</option>
 					{/if}
+					{#if tag && tag != '' && !($workerTags ?? []).includes(tag)}
+						<option value={tag} selected>{tag}</option>
+					{/if}
 					{#each $workerTags ?? [] as tag (tag)}
 						<option value={tag}>{tag}</option>
 					{/each}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 46443d2b07..34ce8692b8 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -13,7 +13,7 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import Slider from '$lib/components/Slider.svelte'
-	import { enterpriseLicense, workerTags, workspaceStore } from '$lib/stores'
+	import { enterpriseLicense, workspaceStore } from '$lib/stores'
 	import { isCloudHosted } from '$lib/cloud'
 	import { copyToClipboard } from '$lib/utils'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -36,10 +36,6 @@
 	$: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$pathStore}`
 	$: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$pathStore}`
 
-	$: if ($selectedId == 'settings-worker-group') {
-		$workerTags = undefined
-	}
-
 	function asSchema(x: any) {
 		return x as Schema
 	}
diff --git a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
new file mode 100644
index 0000000000..e1f268c738
--- /dev/null
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
+	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
+	import { getContext } from 'svelte'
+	import type { FlowEditorContext } from '../types'
+	import { filteredContentForExport } from '../utils'
+	import YAML from 'yaml'
+
+	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import { Button } from '$lib/components/common'
+	import { sendUserToast } from '$lib/toast'
+
+	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+
+	export let drawer: Drawer | undefined
+
+	let code = ''
+
+	function reload() {
+		code = YAML.stringify(filteredContentForExport($flowStore))
+	}
+
+	function apply() {
+		try {
+			const parsed = YAML.parse(code)
+			if (parsed.summary && typeof parsed.summary === 'string') {
+				$flowStore.summary = parsed.summary
+			}
+			if (parsed.description && typeof parsed.description === 'string') {
+				$flowStore.description = parsed.description
+			}
+			if (parsed['ws_error_handler_muted'] !== undefined) {
+				$flowStore.ws_error_handler_muted = parsed['ws_error_handler_muted']
+			}
+			if (parsed['dedicated_worker'] !== undefined) {
+				$flowStore.dedicated_worker = parsed['dedicated_worker']
+			}
+			if (parsed['visible_to_runner_only'] !== undefined) {
+				$flowStore.visible_to_runner_only = parsed['visible_to_runner_only']
+			}
+			$flowStore.value = parsed.value
+			$flowStore.schema = parsed.schema
+			$flowStore.tag = parsed.tag
+			$flowStore = $flowStore
+		} catch (e) {
+			sendUserToast('Error parsing yaml: ' + e), true
+		}
+	}
+</script>
+
+<Drawer on:open={reload} bind:this={drawer} size="800px">
+	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
+		<svelte:fragment slot="actions">
+			<Button color="dark" size="sm" on:click={reload}>Reset code</Button>
+			<Button color="dark" size="sm" on:click={apply}>Apply changes</Button>
+		</svelte:fragment>
+
+		{#if $flowStore}
+			<SimpleEditor autoHeight bind:code lang="yaml" />
+		{/if}
+	</DrawerContent>
+</Drawer>
diff --git a/frontend/src/lib/components/flows/types.ts b/frontend/src/lib/components/flows/types.ts
index 6e5f830def..ba8ce95c5b 100644
--- a/frontend/src/lib/components/flows/types.ts
+++ b/frontend/src/lib/components/flows/types.ts
@@ -19,6 +19,13 @@ export type FlowInput = Record<
 	}
 >
 
+export type ExtendedOpenFlow = OpenFlow & {
+	tag?: string
+	ws_error_handler_muted?: boolean
+	dedicated_worker?: boolean
+	visible_to_runner_only?: boolean
+}
+
 export type FlowEditorContext = {
 	selectedId: Writable<string>
 	moving: Writable<{ module: FlowModule; modules: FlowModule[] } | undefined>
@@ -27,14 +34,7 @@ export type FlowEditorContext = {
 	scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>
 	history: History<OpenFlow>
 	pathStore: Writable<string>
-	flowStore: Writable<
-		OpenFlow & {
-			tag?: string
-			ws_error_handler_muted?: boolean
-			dedicated_worker?: boolean
-			visible_to_runner_only?: boolean
-		}
-	>
+	flowStore: Writable<ExtendedOpenFlow>
 	flowStateStore: Writable<FlowState>
 	testStepStore: Writable<Record<string, any>>
 	saveDraft: () => void
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index 545d553e8c..11cf2f4083 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -17,6 +17,7 @@ import { NEVER_TESTED_THIS_FAR } from './models'
 import { sendUserToast } from '$lib/toast'
 import type { Schema } from '$lib/common'
 import { parseOutputs } from '$lib/infer'
+import type { ExtendedOpenFlow } from './types'
 
 function create_context_function_template(eval_string: string, context: Record<string, any>) {
 	return `
@@ -71,6 +72,28 @@ export function evalValue(
 	return v
 }
 
+export function filteredContentForExport(flow: ExtendedOpenFlow) {
+	let o = {
+		summary: flow.summary,
+		description: flow.description,
+		value: flow.value,
+		schema: flow.schema
+	}
+	if (flow.dedicated_worker) {
+		o['dedicated_worker'] = flow.dedicated_worker
+	}
+	if (flow.visible_to_runner_only) {
+		o['visible_to_runner_only'] = flow.visible_to_runner_only
+	}
+	if (flow.ws_error_handler_muted) {
+		o['ws_error_handler_muted'] = flow.ws_error_handler_muted
+	}
+	if (flow.tag) {
+		o['tag'] = flow.tag
+	}
+	return o
+}
+
 export function cleanInputs(flow: OpenFlow | any): OpenFlow & {
 	tag?: string
 	ws_error_handler_muted?: boolean