From 8bdd707e55c60701d3e19aa8db22763dd40d9d9e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 4 Jan 2023 10:37:13 +0100
Subject: [PATCH] feat: add support for yaml format as a string format

---
 frontend/src/lib/components/ArgInput.svelte   |  8 ++--
 .../lib/components/InputTransformForm.svelte  |  2 +-
 .../src/lib/components/SimpleEditor.svelte    | 11 ++++++
 .../lib/components/StringTypeNarrowing.svelte | 39 +++++++++++++++----
 frontend/src/lib/editorUtils.ts               |  2 +
 frontend/src/lib/infer.ts                     |  3 ++
 frontend/src/lib/utils.ts                     |  3 ++
 7 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 281de1069e..79360ff3eb 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -183,7 +183,7 @@
 								bind:value={description}
 								placeholder="Field description"
 							/>
-							{#if type == 'string' && !contentEncoding && format != 'date-time'}
+							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
@@ -326,13 +326,13 @@
 				</select>
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
-			{:else if inputCat == 'sql'}
-				<div class="border rounded mb-4 w-full border-gray-700">
+			{:else if inputCat == 'sql' || inputCat == 'yaml'}
+				<div class="border mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
-						lang="sql"
+						lang={inputCat}
 						bind:code={value}
 						class="few-lines-editor"
 						on:change={async () => {
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 627a3443b0..74bdc6ad06 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -74,7 +74,7 @@
 	}
 
 	function isStaticTemplate(inputCat: InputCat) {
-		return inputCat === 'string' || inputCat === 'sql'
+		return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml'
 	}
 
 	function connectProperty(rawValue: string) {
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 872a056aee..8e1af88a60 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -14,6 +14,17 @@
 
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 
+	meditor.defineTheme('myTheme', {
+		base: 'vs',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editorLineNumber.foreground': '#999',
+			'editorGutter.background': '#F9FAFB'
+		}
+	})
+	meditor.setTheme('myTheme')
+
 	languages.typescript.javascriptDefaults.setCompilerOptions({
 		target: languages.typescript.ScriptTarget.Latest,
 		allowNonTsExtensions: true,
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 74df9fef38..8306b24b15 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -8,7 +8,7 @@
 	export let format: string | undefined
 	export let contentEncoding: 'base64' | 'binary' | undefined
 
-	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' = 'none'
+	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' = computeKind()
 	let patternStr: string = pattern ?? ''
 
 	let resource: string | undefined
@@ -18,7 +18,9 @@
 		'hostname',
 		'uri',
 		'uuid',
-		'ipv4'
+		'ipv4',
+		'yaml',
+		'sql'
 		// 'time',
 		// 'date',
 		// 'duration',
@@ -41,6 +43,25 @@
 			enum_ = undefined
 		}
 	}
+
+	function computeKind(): 'base64' | 'none' | 'pattern' | 'enum' | 'resource' | 'format' {
+		if (enum_ != undefined) {
+			return 'enum'
+		}
+		if (contentEncoding == 'base64') {
+			return 'base64'
+		}
+		if (pattern != undefined) {
+			return 'pattern'
+		}
+		if (format != undefined) {
+			if (format.startsWith('resource')) {
+				return 'resource'
+			}
+			return 'format'
+		}
+		return 'none'
+	}
 </script>
 
 <RadioButton
@@ -81,12 +102,14 @@
 {:else if kind == 'enum'}
 	<label for="input" class="mb-2 text-gray-700 text-xs">
 		Enums
-		{#each enum_ || [] as e}
-			<div class="flex flex-row max-w-md">
-				<input id="input" type="text" bind:value={e} />
-				<Button size="sm" btnClasses="ml-6" on:click={() => remove(e)}>-</Button>
-			</div>
-		{/each}
+		<div class="flex flex-col gap-1">
+			{#each enum_ || [] as e}
+				<div class="flex flex-row max-w-md">
+					<input id="input" type="text" bind:value={e} />
+					<Button size="sm" btnClasses="ml-6" on:click={() => remove(e)}>-</Button>
+				</div>
+			{/each}
+		</div>
 		<div class="flex flex-row my-1">
 			<Button size="sm" on:click={add}>+</Button>
 			<Button variant="border" size="sm" btnClasses="ml-2" on:click={() => (enum_ = undefined)}>
diff --git a/frontend/src/lib/editorUtils.ts b/frontend/src/lib/editorUtils.ts
index 05b9d6ebe5..30993deb06 100644
--- a/frontend/src/lib/editorUtils.ts
+++ b/frontend/src/lib/editorUtils.ts
@@ -41,6 +41,8 @@ export function langToExt(lang: string): string {
             return 'json'
         case 'sql':
             return 'sql'
+        case 'yaml':
+            return 'yaml'
         case 'typescript':
             return 'ts'
         case 'python':
diff --git a/frontend/src/lib/infer.ts b/frontend/src/lib/infer.ts
index 346d1b3c18..c2550ca3f1 100644
--- a/frontend/src/lib/infer.ts
+++ b/frontend/src/lib/infer.ts
@@ -81,6 +81,9 @@ function argSigToJsonSchemaType(
 	} else if (t === 'sql') {
 		newS.type = 'string'
 		newS.format = 'sql'
+	} else if (t === 'yaml') {
+		newS.type = 'string'
+		newS.format = 'yaml'
 	} else if (t === 'bytes') {
 		newS.type = 'string'
 		newS.contentEncoding = 'base64'
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 1ecaff8d08..41f778b4b7 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -434,6 +434,7 @@ export type InputCat =
 	| 'resource-string'
 	| 'object'
 	| 'sql'
+	| 'yaml'
 
 export function setInputCat(
 	type: string | undefined,
@@ -458,6 +459,8 @@ export function setInputCat(
 		return 'date'
 	} else if (type == 'string' && format == 'sql') {
 		return 'sql'
+	} else if (type == 'string' && format == 'yaml') {
+		return 'yaml'
 	} else if (type == 'string' && contentEncoding == 'base64') {
 		return 'base64'
 	} else if (type == 'string' && format?.startsWith('resource')) {