From 61bb069da3d24a547403234c29dd243eb147a529 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 10 Jun 2024 15:38:24 +0200
Subject: [PATCH] fix: fix reorder of args in schema form

---
 .../components/LightweightSchemaForm.svelte   | 43 +++++++++------
 frontend/src/lib/components/SchemaForm.svelte | 52 ++++++++++---------
 .../helpers/RunnableComponent.svelte          |  4 +-
 3 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/LightweightSchemaForm.svelte b/frontend/src/lib/components/LightweightSchemaForm.svelte
index b2f86a1445..b26278380b 100644
--- a/frontend/src/lib/components/LightweightSchemaForm.svelte
+++ b/frontend/src/lib/components/LightweightSchemaForm.svelte
@@ -4,6 +4,7 @@
 	import LightweightArgInput from './LightweightArgInput.svelte'
 	import type { ComponentCustomCSS } from './apps/types'
 	import { allTrue, computeShow } from '$lib/utils'
+	import { deepEqual } from 'fast-equals'
 
 	export let css: ComponentCustomCSS<'schemaformcomponent'> | undefined = undefined
 
@@ -24,8 +25,6 @@
 		args = {}
 	}
 
-	reorder()
-
 	export function invalidate(key: string, error: string) {
 		inputCheck[key] = false
 		errors[key] = error
@@ -41,29 +40,39 @@
 		errors = Object.fromEntries(Object.entries(errors).map((x) => [x[0], '']))
 	}
 
+	let keys: string[] = Array.isArray(schema?.order)
+		? schema?.order
+		: Object.keys(schema?.properties ?? {})
+
+	$: schema && reorder()
+
 	function reorder() {
-		console.log('reorder')
-		if (schema?.order && Array.isArray(schema.order)) {
-			const n = {}
+		let lkeys = Object.keys(schema?.properties ?? {})
+		if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+			console.debug('reorder')
+			if (schema?.order && Array.isArray(schema.order)) {
+				const n = {}
 
-			;(schema.order as string[]).forEach((x) => {
-				if (schema.properties && schema.properties[x] != undefined) {
-					n[x] = schema.properties[x]
-				}
-			})
-
-			Object.keys(schema.properties ?? {})
-				.filter((x) => !schema.order?.includes(x))
-				.forEach((x) => {
-					n[x] = schema.properties[x]
+				;(schema.order as string[]).forEach((x) => {
+					if (schema.properties && schema.properties[x] != undefined) {
+						n[x] = schema.properties[x]
+					}
 				})
-			schema.properties = n
+
+				Object.keys(schema.properties ?? {})
+					.filter((x) => !schema.order?.includes(x))
+					.forEach((x) => {
+						n[x] = schema.properties[x]
+					})
+				schema.properties = n
+			}
+			keys = Object.keys(schema.properties ?? {})
 		}
 	}
 </script>
 
 <div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
-	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
+	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
 			<LightweightArgInput
 				render={computeShow(argName, schema?.properties[argName].showExpr, args)}
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 6ce8eb72ab..ee517e760d 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -11,6 +11,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { getResourceTypes } from './resourceTypesStore'
 	import { Plus } from 'lucide-svelte'
+	import { deepEqual } from 'fast-equals'
 
 	export let schema: Schema | any
 	export let schemaSkippedValues: string[] = []
@@ -55,7 +56,9 @@
 		args = nargs
 	}
 
-	let keys: string[] = []
+	let keys: string[] = Array.isArray(schema?.order)
+		? schema?.order
+		: Object.keys(schema?.properties ?? {})
 
 	function removeExtraKey() {
 		const nargs = {}
@@ -71,16 +74,6 @@
 	let itemPicker: ItemPicker | undefined = undefined
 	let variableEditor: VariableEditor | undefined = undefined
 
-	$: {
-		let lkeys = Object.keys(schema?.properties ?? {})
-		if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
-			keys = lkeys
-			if (!noDelete) {
-				removeExtraKey()
-			}
-		}
-	}
-
 	$: isValid = allTrue(inputCheck ?? {})
 
 	let resourceTypes: string[] | undefined = undefined
@@ -93,24 +86,35 @@
 
 	$: schema && reorder()
 
+	function hasExtraKeys() {
+		return Object.keys(args ?? {}).some((x) => !keys.includes(x))
+	}
 	function reorder() {
-		if (schema?.order && Array.isArray(schema.order)) {
-			const n = {}
+		let lkeys = Object.keys(schema?.properties ?? {})
+		if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+			console.debug('reorder')
+			if (schema?.order && Array.isArray(schema.order)) {
+				const n = {}
 
-			;(schema.order as string[]).forEach((x) => {
-				if (schema.properties && schema.properties[x] != undefined) {
-					n[x] = schema.properties[x]
-				}
-			})
-
-			Object.keys(schema.properties ?? {})
-				.filter((x) => !schema.order?.includes(x))
-				.forEach((x) => {
-					n[x] = schema.properties[x]
+				;(schema.order as string[]).forEach((x) => {
+					if (schema.properties && schema.properties[x] != undefined) {
+						n[x] = schema.properties[x]
+					}
 				})
-			schema.properties = n
+
+				Object.keys(schema.properties ?? {})
+					.filter((x) => !schema.order?.includes(x))
+					.forEach((x) => {
+						n[x] = schema.properties[x]
+					})
+				schema.properties = n
+			}
 			keys = Object.keys(schema.properties ?? {})
 		}
+
+		if (!noDelete && hasExtraKeys()) {
+			removeExtraKey()
+		}
 	}
 </script>
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index e950f6e9aa..3b98e1b677 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -434,7 +434,7 @@
 				)
 			}
 		} catch (e) {
-			let error = e.body ?? e.message
+			let error = e?.body ?? e?.message
 			updateResult({ error })
 			$errorByComponent[id] = { error }
 		}
@@ -593,7 +593,7 @@
 						},
 						error: (e) => {
 							console.error(e)
-							reject()
+							reject(e)
 						}
 					}).catch(reject)
 				})