From ae7317f0cc299209c303a273c1c93ee8a423b1a6 Mon Sep 17 00:00:00 2001
From: Axel Baudot <74733630+axelbdt@users.noreply.github.com>
Date: Tue, 18 Jul 2023 03:23:54 -0400
Subject: [PATCH] Add schema editor for object advanced properties (#1860)

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../src/lib/components/SchemaEditor.svelte    |  3 +-
 .../src/lib/components/SchemaModal.svelte     | 37 +++++++++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index a6a186d951..7c00971798 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -61,7 +61,8 @@
 			enum: schema.enum_,
 			items: schema.items,
 			contentEncoding: schema.contentEncoding,
-			format: schema.format
+			format: schema.format,
+			properties: schema.schema?.properties
 		}
 	}
 	function handleAddOrEditArgument(modalProperty: ModalSchemaProperty): void {
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 99b77cae1b..23663d1ea8 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -1,5 +1,9 @@
 <script lang="ts" context="module">
-	import type { SchemaProperty } from '$lib/common'
+	import type { SchemaProperty, Schema } from '$lib/common'
+	import Tab from './common/tabs/Tab.svelte'
+	import TabContent from './common/tabs/TabContent.svelte'
+	import Tabs from './common/tabs/Tabs.svelte'
+	import SchemaEditor from './SchemaEditor.svelte'
 
 	export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'] as const
 	export type ArgType = (typeof ARG_TYPES)[number]
@@ -15,6 +19,7 @@
 		default?: any
 		items?: { type?: 'string' | 'number' }
 		contentEncoding?: 'base64' | 'binary'
+		schema?: Schema
 	}
 
 	export function schemaToModal(
@@ -31,7 +36,16 @@
 			contentEncoding: schema.contentEncoding,
 			format: schema.format,
 			enum_: schema.enum,
-			required
+			required,
+			schema:
+				schema.type == 'object'
+					? {
+							$schema: undefined,
+							type: schema.type,
+							properties: schema.properties ?? {},
+							required: schema.required ?? []
+					  }
+					: undefined
 		}
 	}
 
@@ -91,6 +105,7 @@
 		property.required = DEFAULT_PROPERTY.required
 		property.selectedType = DEFAULT_PROPERTY.selectedType
 		property.format = undefined
+		property.schema = undefined
 
 		drawer.closeDrawer()
 	}
@@ -212,8 +227,22 @@
 					{:else if property.selectedType == 'array'}
 						<ArrayTypeNarrowing bind:itemsType={property.items} />
 					{:else if property.selectedType == 'object'}
-						<h3 class="mb-2 font-bold mt-4">Resource type</h3>
-						<ObjectTypeNarrowing bind:format={property.format} />
+						<Tabs selected="custom-object">
+							<Tab value="custom-object">Custom Object</Tab>
+							<Tab value="resource">Resource</Tab>
+							<svelte:fragment slot="content">
+								<div class="overflow-auto pt-2">
+									<TabContent value="custom-object">
+										<SchemaEditor bind:schema={property.schema} />
+									</TabContent>
+
+									<TabContent value="resource">
+										<h3 class="mb-2 font-bold mt-4">Resource type</h3>
+										<ObjectTypeNarrowing bind:format={property.format} />
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
 					{:else}
 						<p>No advanced configuration for this type</p>
 					{/if}