From 5b1b8858242a09cd5e689a205edcf039ec29e3ef Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 31 May 2023 22:07:33 +0200
Subject: [PATCH] fix edit of resource type in schema editor

---
 .../lib/components/ObjectTypeNarrowing.svelte | 13 ++++++++---
 .../lib/components/ResourceTypePicker.svelte  |  2 +-
 .../src/lib/components/SchemaEditor.svelte    | 14 +++++-------
 .../src/lib/components/SchemaModal.svelte     | 22 +++++++------------
 4 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/ObjectTypeNarrowing.svelte b/frontend/src/lib/components/ObjectTypeNarrowing.svelte
index 7175646a8b..7a1a4d62ac 100644
--- a/frontend/src/lib/components/ObjectTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ObjectTypeNarrowing.svelte
@@ -6,9 +6,16 @@
 	let resource: string | undefined = format?.startsWith('resource-')
 		? format.substring('resource-'.length)
 		: undefined
-
-	$: format = resource != undefined ? `resource-${resource}` : undefined
 </script>
 
+{format}
+{resource}
 <div class="mt-2" />
-<ResourceTypePicker bind:value={resource} nonePickable={true} />
+<ResourceTypePicker
+	on:click={(e) => {
+		resource = e.detail
+		format = resource != undefined ? `resource-${resource}` : undefined
+	}}
+	value={resource}
+	nonePickable={true}
+/>
diff --git a/frontend/src/lib/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte
index 0b5e9daba2..bf311d0f0c 100644
--- a/frontend/src/lib/components/ResourceTypePicker.svelte
+++ b/frontend/src/lib/components/ResourceTypePicker.svelte
@@ -21,7 +21,7 @@
 
 	function onClick(resource: string | undefined) {
 		value = resource
-		dispatch('click')
+		dispatch('click', resource)
 	}
 
 	$: if ($workspaceStore) {
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 8acfb521bf..cbc813ba9e 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -31,7 +31,6 @@
 	let schemaString: string = ''
 
 	// Internal state: bound to args builder modal
-	let modalProperty: ModalSchemaProperty = Object.assign({}, DEFAULT_PROPERTY)
 	let argError = ''
 	let editing = false
 	let oldArgName: string | undefined // when editing argument and changing name
@@ -65,7 +64,7 @@
 			format: schema.format
 		}
 	}
-	function handleAddOrEditArgument(): void {
+	function handleAddOrEditArgument(modalProperty: ModalSchemaProperty): void {
 		// If editing the arg's name, oldName containing the old argument name must be provided
 		argError = ''
 		if (modalProperty.name.length === 0) {
@@ -107,13 +106,14 @@
 		argError = ''
 		if (Object.keys(schema.properties).includes(argName)) {
 			editing = true
-			modalProperty = schemaToModal(
+			const modalProperty = schemaToModal(
 				schema.properties[argName],
 				argName,
 				schema.required.includes(argName)
 			)
+			console.log(modalProperty.format)
 			oldArgName = argName
-			schemaModal.openDrawer()
+			schemaModal.openDrawer(modalProperty)
 		} else {
 			sendUserToast(`This argument does not exist and can't be edited`, true)
 		}
@@ -233,8 +233,7 @@
 				size="sm"
 				startIcon={{ icon: faPlus }}
 				on:click={() => {
-					modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-					schemaModal.openDrawer()
+					schemaModal.openDrawer(Object.assign({}, DEFAULT_PROPERTY))
 				}}
 			>
 				Add Property
@@ -320,9 +319,8 @@
 	<SchemaModal
 		{isFlowInput}
 		bind:this={schemaModal}
-		bind:property={modalProperty}
 		bind:error={argError}
-		on:save={handleAddOrEditArgument}
+		on:save={(e) => handleAddOrEditArgument(e.detail)}
 		bind:editing
 		bind:oldArgName
 	/>
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index b648597e3d..8b33cc129f 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -54,27 +54,26 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Drawer from './common/drawer/Drawer.svelte'
 
-	export let property: ModalSchemaProperty = DEFAULT_PROPERTY
 	export let error = ''
 	export let editing = false
 	export let oldArgName: string | undefined = undefined
 	export let isFlowInput = false
 
-	let resource_type: string | undefined = undefined
-
 	const dispatch = createEventDispatcher()
 	let drawer: Drawer
 
+	let property: ModalSchemaProperty = DEFAULT_PROPERTY
+
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
 		if (key === 'Enter') {
-			dispatch('save')
+			dispatch('save', property)
 		}
 	}
 
-	export function openDrawer(): void {
+	export function openDrawer(nproperty: ModalSchemaProperty): void {
 		drawer.openDrawer()
-		resource_type = property.format?.substring(5)
+		property = nproperty
 	}
 
 	export function closeDrawer(): void {
@@ -91,15 +90,10 @@
 		property.required = DEFAULT_PROPERTY.required
 		property.selectedType = DEFAULT_PROPERTY.selectedType
 		property.format = undefined
-		resource_type = undefined
 
 		drawer.closeDrawer()
 	}
 
-	$: if (property.selectedType == 'object' && resource_type) {
-		property.format = resource_type ? `$res:${resource_type}` : undefined
-	}
-
 	$: if (property.name == '') {
 		error = 'Name is required'
 	} else {
@@ -175,7 +169,7 @@
 				</div>
 			</div>
 			<div>
-				<div class="flex flex-row gap-x-4">
+				<div class="flex flex-row gap-x-4 items-center">
 					<ArgInput
 						label="Default"
 						bind:value={property.default}
@@ -184,7 +178,7 @@
 					/>
 					<Toggle
 						options={{ right: 'Required' }}
-						class="mt-5 !justify-start"
+						class="!justify-start"
 						bind:checked={property.required}
 					/>
 				</div>
@@ -227,7 +221,7 @@
 				color="blue"
 				disabled={!property.name || !property.selectedType || error != ''}
 				on:click={() => {
-					dispatch('save')
+					dispatch('save', property)
 				}}
 			>
 				Save