From 493d2012a81e2d79ed1b3561a07cb5f8fd9fb9dd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 29 Feb 2024 12:39:41 +0100
Subject: [PATCH] fix: app forms change value on default value changes

---
 .../lib/components/LightweightArgInput.svelte | 40 +++++++++++--------
 .../components/LightweightSchemaForm.svelte   |  1 +
 .../InlineScriptEditorPanel.svelte            |  4 +-
 .../InlineScriptHiddenRunnable.svelte         |  4 +-
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index 9ac2fc0c94..c9def2458d 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { setInputCat as computeInputCat, emptyString } from '$lib/utils'
 	import { Badge, Button } from './common'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, tick } from 'svelte'
 	import FieldHeader from './FieldHeader.svelte'
 	import type { SchemaProperty } from '$lib/common'
 	import autosize from 'svelte-autosize'
@@ -51,15 +51,29 @@
 
 	const dispatch = createEventDispatcher()
 
-	$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`
-
 	export let error: string = ''
 
 	let el: HTMLTextAreaElement | undefined = undefined
 
 	let rawValue: string | undefined = undefined
 
+	$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`
+
+	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
+
+	$: changeDefaultValue(inputCat, defaultValue)
+
+	$: rawValue && evalRawValueToValue()
+
+	$: validateInput(pattern, value, required)
+
 	$: {
+		if (inputCat === 'object') {
+			evalValueToRaw()
+		}
+	}
+
+	function evalRawValueToValue() {
 		if (rawValue) {
 			try {
 				value = JSON.parse(rawValue)
@@ -70,12 +84,6 @@
 		}
 	}
 
-	$: {
-		if (inputCat === 'object') {
-			evalValueToRaw()
-		}
-	}
-
 	export function evalValueToRaw() {
 		if (value) {
 			rawValue = JSON.stringify(value, null, 4)
@@ -133,9 +141,9 @@
 		}
 	}
 
-	$: {
-		if (value == undefined || value == null) {
-			value = defaultValue
+	async function changeDefaultValue(inputCat, defaultValue) {
+		value = defaultValue
+		if (value == null || value == undefined) {
 			if (defaultValue === undefined || defaultValue === null) {
 				if (inputCat === 'string') {
 					value = ''
@@ -146,11 +154,11 @@
 				}
 			}
 		}
+
+		if (inputCat === 'object') {
+			evalValueToRaw()
+		}
 	}
-
-	$: validateInput(pattern, value, required)
-
-	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
diff --git a/frontend/src/lib/components/LightweightSchemaForm.svelte b/frontend/src/lib/components/LightweightSchemaForm.svelte
index 975efcfed7..6545488b3b 100644
--- a/frontend/src/lib/components/LightweightSchemaForm.svelte
+++ b/frontend/src/lib/components/LightweightSchemaForm.svelte
@@ -42,6 +42,7 @@
 	}
 
 	function reorder() {
+		console.log('reorder')
 		if (schema?.order && Array.isArray(schema.order)) {
 			const n = {}
 
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index fac3714bf0..aa375003b7 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -49,9 +49,9 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-tertiary">
+		<div class="px-2 pt-4 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
-		</span>
+		</div>
 	{/if}
 {:else if componentInput?.type == 'runnable'}
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
index 69e1769c3b..3a04c55389 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
@@ -43,9 +43,9 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-tertiary">
+		<div class="px-2 pt-4 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
-		</span>
+		</div>
 	{/if}
 {:else if runnable?.type === 'runnableByName' && runnable.inlineScript}
 	<InlineScriptEditor