fix: improve schema editor

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.362.0",
+	"version": "1.362.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

frontend/src/lib/components/EditableSchemaForm.svelte

@@ -87,7 +87,6 @@
 				hasChanged = hasChanged || alignOrderWithProperties(schema.properties[k])
 			}
 			if (!norder.includes(k)) {
-				console.log('adding', k, index)
 				norder = [...norder.slice(0, index), k, ...norder.slice(index)]
 			}
 			index += 1
@@ -100,21 +99,23 @@
 		return hasChanged
 	}
 	function onSchemaChange() {
-		dispatch('change', schema)
+		let editSchema = false
 		if (alignOrderWithProperties(schema)) {
-			schema = schema
+			editSchema = true
 		}
 		let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {})
 		if (schema?.properties && !deepEqual(lkeys, keys)) {
 			keys = [...lkeys]
-			schema = schema
+			editSchema = true
 			if (opened == undefined) {
 				opened = keys[0]
 			}
 		}
+		if (editSchema) {
+			schema = schema
+		}
 	}
 
-	let renderCount: number = 0
 	let opened: string | undefined = keys[0]
 	let selected = ''
 
@@ -194,25 +195,25 @@
 		{#if !noPreview}
 			<Pane size={50} minSize={20}>
 				<div class="p-4">
-					{#key renderCount}
-						<SchemaFormDnd
-							{schema}
-							{dndType}
-							bind:args
-							on:click={(e) => {
-								opened = e.detail
-							}}
-							on:reorder={(e) => {
-								schema.order = e.detail
-							}}
-							on:change={() => {
-								schema = schema
-								dispatch('change', schema)
-							}}
-							{lightweightMode}
-							prettifyHeader={isAppInput}
-						/>
-					{/key}
+					<SchemaFormDnd
+						{schema}
+						{dndType}
+						bind:args
+						on:click={(e) => {
+							opened = e.detail
+						}}
+						on:reorder={(e) => {
+							schema.order = e.detail
+							schema = schema
+							dispatch('change', schema)
+						}}
+						on:change={() => {
+							schema = schema
+							dispatch('change', schema)
+						}}
+						{lightweightMode}
+						prettifyHeader={isAppInput}
+					/>
 				</div>
 			</Pane>
 		{/if}
@@ -468,8 +469,9 @@
 																	schema.required = schema.required?.filter((x) => x !== argName)
 																}
 															}}
-															on:schemaChange={() => {
-																renderCount++
+															on:schemaChange={(e) => {
+																schema = schema
+																dispatch('change', schema)
 															}}
 														/>
 													{/if}

frontend/src/lib/components/schema/EditableSchemaDrawer.svelte

@@ -172,9 +172,10 @@
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
 		<DrawerContent noPadding title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
 			<svelte:fragment slot="actions">
-				<AddProperty bind:schema />
+				<AddProperty on:change bind:schema />
 			</svelte:fragment>
 			<EditableSchemaForm
+				on:change
 				bind:this={editableSchemaForm}
 				bind:schema
 				isAppInput

frontend/src/lib/components/schema/EditableSchemaWrapper.svelte

@@ -3,7 +3,6 @@
 	import { twMerge } from 'tailwind-merge'
 	import EditableSchemaForm from '../EditableSchemaForm.svelte'
 	import AddProperty from './AddProperty.svelte'
-	import { createEventDispatcher } from 'svelte'
 
 	export let schema: Schema | undefined | any
 	export let offset: number = 0
@@ -11,21 +10,17 @@
 	export let noPreview: boolean = false
 	export let fullHeight: boolean = true
 	export let lightweightMode: boolean = false
-	export let watchChanges: boolean = false
-
-	const dispatch = createEventDispatcher()
-
-	$: watchChanges && dispatch('change', { schema })
 
 	let addProperty: AddProperty | undefined = undefined
 </script>
 
 <div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
 	<div class="p-4 border-b">
-		<AddProperty bind:schema bind:this={addProperty} />
+		<AddProperty on:change bind:schema bind:this={addProperty} />
 	</div>
 	<EditableSchemaForm
 		bind:schema
+		on:change
 		isFlowInput
 		on:edit={(e) => {
 			addProperty?.openDrawer(e.detail)

frontend/src/lib/components/schema/FlowPropertyEditor.svelte

@@ -20,7 +20,7 @@
 	import Popup from '../common/popup/Popup.svelte'
 	import { deepEqual } from 'fast-equals'
 
-	export let format: string = ''
+	export let format: string | undefined = undefined
 	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
 	export let type: string | undefined = undefined
 	export let oneOf: SchemaProperty[] | undefined = undefined
@@ -74,9 +74,11 @@
 			) {
 				// update schema if not exists or order changed
 				schema.oneOf = getOneOfWithoutLabel(oneOf)
+				schema = schema
 			}
 		} else if (!oneOf) {
 			schema.oneOf = undefined
+			schema = schema
 		}
 	}
 	$: oneOfUpdate(oneOf)
@@ -85,6 +87,7 @@
 		if (order && !deepEqual(order, schema.order)) {
 			// update from external reordering
 			schema.order = order
+			schema = schema
 		}
 	}
 	$: orderUpdate(order)
@@ -106,8 +109,6 @@
 		oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
 	}
 
-	console.log('initial schema', schema)
-
 	function schemaUpdate(changedSchema: typeof schema) {
 		if (
 			!deepEqual(changedSchema, {
@@ -117,9 +118,9 @@
 				oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
 			})
 		) {
-			properties = changedSchema.properties
-			order = changedSchema.order
-			requiredProperty = changedSchema.required
+			properties = structuredClone(changedSchema.properties)
+			order = structuredClone(changedSchema.order)
+			requiredProperty = structuredClone(changedSchema.required)
 			oneOf = changedSchema.oneOf?.map((v) => {
 				return {
 					...v,
@@ -132,8 +133,7 @@
 					}
 				}
 			})
-
-			dispatch('schemaChange')
+			dispatch('schemaChange', { properties, order, requiredProperty, oneOf })
 		}
 	}
 
@@ -174,6 +174,9 @@
 			variantName = ''
 		}
 	}
+
+	let initialObjectSelected =
+		Object.keys(schema?.properties ?? {}).length == 0 ? 'resource' : 'custom-object'
 </script>
 
 <div class="flex flex-col gap-2">
@@ -297,7 +300,7 @@
 		{/if}
 	{:else if type === 'object' && format !== 'resource-s3_object'}
 		<Tabs
-			selected="resource"
+			selected={initialObjectSelected}
 			on:selected={(e) => {
 				if (e.detail === 'custom-object') {
 					format = ''

frontend/src/lib/components/schema/PropertyEditor.svelte

@@ -16,7 +16,7 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 
 	export let description: string = ''
-	export let format: string = ''
+	export let format: string | undefined = undefined
 	export let contentEncoding: 'base64' | 'binary' | undefined = undefined
 	export let type: string | undefined = undefined
 	export let oneOf: SchemaProperty[] | undefined = undefined

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -480,7 +480,14 @@
 					</div>
 				</div>
 			</div>
-			<EditableSchemaWrapper bind:schema={newResourceType.schema} fullHeight />
+			<EditableSchemaWrapper
+				watchChanges
+				on:change={() => {
+					console.log('change')
+				}}
+				bind:schema={newResourceType.schema}
+				fullHeight
+			/>
 		</div>
 	</DrawerContent>
 </Drawer>

frontend/src/routes/test_dev_page/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import EditableSchemaWrapper from '$lib/components/schema/EditableSchemaWrapper.svelte'
+
+	let schema = {
+		type: 'object',
+		properties: {
+			foo: {
+				type: 'string'
+			}
+		}
+	}
+</script>
+
+<EditableSchemaWrapper on:change={() => console.log('FOO')} {schema} />