From 87bf8d55ceb85a94e5e232a82479af6e5fc40eb9 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 29 Jul 2022 11:40:28 +0200
Subject: [PATCH] feat: base64 support in schema editor

---
 deno-client/mod.ts                                   |  2 +-
 frontend/src/lib/components/ArgInput.svelte          |  4 ++--
 frontend/src/lib/components/SchemaEditor.svelte      | 12 +++++++-----
 frontend/src/lib/components/SchemaModal.svelte       |  6 +++++-
 frontend/src/lib/components/SchemaViewer.svelte      |  5 ++++-
 .../src/lib/components/StringTypeNarrowing.svelte    | 12 ++++++++----
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/deno-client/mod.ts b/deno-client/mod.ts
index c3d4fc40c9..916ac29d7a 100644
--- a/deno-client/mod.ts
+++ b/deno-client/mod.ts
@@ -75,7 +75,7 @@ export async function setResource(path: string, value: any, initializeToTypeIfNo
     } else if (initializeToTypeIfNotExist) {
         await resourceApi.createResource(conf.workspace_id, { path, value, resourceType: initializeToTypeIfNotExist })
     } else {
-        throw Error(`Resoucr at path ${path} does not exist and no type was provided to initialize it`)
+        throw Error(`Resource at path ${path} does not exist and no type was provided to initialize it`)
     }
 }
 
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index e86d64aa7a..dedf93d371 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -19,7 +19,7 @@
 	export let defaultValue: any = undefined
 	export let description: string = ''
 	export let format: string = ''
-	export let contentEncoding = ''
+	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
 	export let type: string | undefined = undefined
 	export let required = false
 	export let pattern: undefined | string = undefined
@@ -156,7 +156,7 @@
 							>Description
 							<textarea rows="1" bind:value={description} placeholder="Edit description" />
 							{#if type == 'string' && !contentEncoding && format != 'date-time'}
-								<StringTypeNarrowing bind:format bind:pattern bind:enum_ />
+								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
 							{:else if type == 'array'}
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 4559ba7ba2..44827ba79e 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -3,7 +3,7 @@
 	import type { ModalSchemaProperty } from './SchemaModal.svelte'
 	import type { Schema } from '$lib/common'
 	import Editor from './Editor.svelte'
-	import { emptySchema, sendUserToast } from '$lib/utils'
+	import { emptySchema, sendUserToast, truncate } from '$lib/utils'
 	import Tooltip from './Tooltip.svelte'
 	import TableCustom from './TableCustom.svelte'
 	import { createEventDispatcher } from 'svelte'
@@ -162,10 +162,12 @@
 								<tr>
 									<td>{name}</td>
 									<td
-										>{#if !property.type} any {:else} {property.type} {/if}</td
-									>
-									<td>{property.description}</td>
-									<td>{JSON.stringify(property.default) ?? ''}</td>
+										>{property.type ?? 'any'}
+										{property.format ? `(format: ${property.format})` : ''}
+										{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}
+									</td>
+									<td>{truncate(property.description, 20)}</td>
+									<td>{truncate(JSON.stringify(property.default) ?? '', 20)}</td>
 									<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
 									<td class="">
 										<button class="mr-2" on:click={() => handleDeleteArgument(name)}
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 801d93fa6c..988827b4a8 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -15,6 +15,7 @@
 		enum_?: string[]
 		default?: any
 		items?: { type?: 'string' | 'number' }
+		contentEncoding?: 'base64' | 'binary'
 	}
 
 	export function modalToSchema(schema: ModalSchemaProperty): SchemaProperty {
@@ -24,7 +25,8 @@
 			pattern: schema.pattern,
 			default: schema.default,
 			enum: schema.enum_,
-			items: schema.items
+			items: schema.items,
+			contentEncoding: schema.contentEncoding
 		}
 	}
 
@@ -39,6 +41,7 @@
 			description: schema.description,
 			pattern: schema.pattern,
 			default: schema.default,
+			contentEncoding: schema.contentEncoding,
 			required
 		}
 	}
@@ -142,6 +145,7 @@
 						bind:format={property.format}
 						bind:pattern={property.pattern}
 						bind:enum_={property.enum_}
+						bind:contentEncoding={property.contentEncoding}
 					/>
 				{:else if property.selectedType == 'array'}
 					<select bind:value={property.items}>
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index 3963486c5a..473d9bfc5d 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -64,7 +64,10 @@
 										? JSON.stringify(property.default)
 										: ''}</td
 								>
-								<td>{property.format ?? ''}</td>
+								<td
+									>{property.format ?? ''}
+									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
+								>
 								<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
 							</tr>
 						{/each}
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index c70075e464..f664b905e7 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -5,8 +5,9 @@
 	export let pattern: string | undefined
 	export let enum_: string[] | undefined
 	export let format: string | undefined
+	export let contentEncoding: 'base64' | 'binary' | undefined
 
-	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' = 'none'
+	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' = 'none'
 	let patternStr: string = pattern ?? ''
 
 	let resource: string | undefined
@@ -27,6 +28,7 @@
 	$: format =
 		kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined
 	$: pattern = patternStr == '' ? undefined : patternStr
+	$: contentEncoding = kind == 'base64' ? 'base64' : undefined
 </script>
 
 <RadioButton
@@ -34,6 +36,7 @@
 	small={true}
 	options={[
 		['None', 'none'],
+		['File (base64)', 'base64'],
 		['Enum', 'enum'],
 		['Resource Path', 'resource'],
 		['Format', 'format'],
@@ -43,10 +46,11 @@
 />
 
 {#if kind == 'pattern'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<label for="input" class="mb-2 text-gray-700 text-xs"
 		>Pattern (Regex)
 		<div class="flex flex-row">
 			<input
+				id="input"
 				type="text"
 				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
 				bind:value={patternStr}
@@ -60,11 +64,11 @@
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<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 type="text" bind:value={e} />
+				<input id="input" type="text" bind:value={e} />
 				<button
 					class="default-button mx-6"
 					on:click={() => {