fix: improve resource picker handling of objects

frontend/src/lib/components/ArgInput.svelte

@@ -407,8 +407,24 @@
 															enum_={itemsType?.enum ?? []}
 															enumLabels={extra['enumLabels']}
 														/>
-													{:else if itemsType?.type == 'resource' && itemsType?.resourceType}
-														<ResourcePicker bind:value={v} resourceType={itemsType?.resourceType} />
+													{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
+														<ObjectResourceInput
+															bind:value={v}
+															format={'resource-' + itemsType?.resourceType}
+															defaultValue={undefined}
+														/>
+													{:else if itemsType?.type == 'resource'}
+														<JsonEditor
+															bind:editor
+															on:focus={(e) => {
+																dispatch('focus')
+															}}
+															on:blur={(e) => {
+																dispatch('blur')
+															}}
+															code={JSON.stringify(v, null, 2)}
+															bind:value={v}
+														/>
 													{:else if itemsType?.type === 'object' && itemsType?.properties}
 														<div class="p-8 border rounded-md w-full">
 															<SchemaForm
@@ -455,7 +471,20 @@
 										if (value == undefined || !Array.isArray(value)) {
 											value = []
 										}
-										value = value.concat('')
+										if (itemsType?.type == 'number') {
+											value = value.concat(0)
+										} else if (
+											itemsType?.type == 'object' ||
+											(itemsType?.type == 'resource' &&
+												!(
+													itemsType?.resourceType &&
+													resourceTypes?.includes(itemsType?.resourceType)
+												))
+										) {
+											value = value.concat({})
+										} else {
+											value = value.concat('')
+										}
 									}}
 									id="arg-input-add-item"
 									startIcon={{ icon: Plus }}
@@ -495,6 +524,7 @@
 					{disablePortal}
 					{format}
 					bind:value
+					bind:editor
 					{showSchemaExplorer}
 				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format

frontend/src/lib/components/ModulePreviewForm.svelte

@@ -50,7 +50,9 @@
 	}
 
 	function plugIt(argName: string) {
-		args[argName] = evalValue(argName, mod, testStepStore, pickableProperties, true)
+		args[argName] = structuredClone(
+			evalValue(argName, mod, testStepStore, pickableProperties, true)
+		)
 		try {
 			editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4))
 		} catch {

frontend/src/lib/components/ObjectResourceInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
 	import ResourcePicker from './ResourcePicker.svelte'
 	import S3ObjectPicker from './S3ObjectPicker.svelte'
+	import SimpleEditor from './SimpleEditor.svelte'
 
 	export let format: string
 	export let value: any
@@ -8,6 +10,7 @@
 	export let showSchemaExplorer = false
 	export let selectFirst = false
 	export let defaultValue: any
+	export let editor: SimpleEditor | undefined = undefined
 
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
@@ -39,7 +42,7 @@
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	{#if format === 'resource-s3_object'}
 		<S3ObjectPicker bind:value />
-	{:else}
+	{:else if value == undefined || typeof value === 'string'}
 		<ResourcePicker
 			{selectFirst}
 			{disablePortal}
@@ -52,5 +55,7 @@
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>
+	{:else}
+		<JsonEditor bind:editor code={JSON.stringify(value, null, 2)} bind:value />
 	{/if}
 </div>

frontend/src/lib/components/ResourcePicker.svelte

@@ -10,6 +10,7 @@
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Pen, Plus, RotateCw } from 'lucide-svelte'
 	import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'
+	import { sendUserToast } from '$lib/toast'
 
 	const dispatch = createEventDispatcher()
 
@@ -42,30 +43,38 @@
 		appConnect?.open?.(resourceType, expressOAuthSetup)
 	}
 
+	let loading = true
 	async function loadResources(resourceType: string | undefined) {
-		const nc = (
-			await ResourceService.listResource({
-				workspace: $workspaceStore!,
-				resourceType
-			})
-		)
-			.filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
-			.map((x) => ({
-				value: x.path,
-				label: x.path,
-				type: x.resource_type
-			}))
+		loading = true
+		try {
+			const nc = (
+				await ResourceService.listResource({
+					workspace: $workspaceStore!,
+					resourceType
+				})
+			)
+				.filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
+				.map((x) => ({
+					value: x.path,
+					label: x.path,
+					type: x.resource_type
+				}))
 
-		// TODO check if this is needed
-		if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-			nc.push({ value: value ?? initialValue!, label: value ?? initialValue!, type: '' })
-		}
-		collection = nc
-		if (collection.length == 1 && selectFirst && valueSelect == undefined) {
-			value = collection[0].value
-			valueType = collection[0].type
-			valueSelect = collection[0]
+			// TODO check if this is needed
+			if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+				nc.push({ value: value ?? initialValue!, label: value ?? initialValue!, type: '' })
+			}
+			collection = nc
+			if (collection.length == 1 && selectFirst && valueSelect == undefined) {
+				value = collection[0].value
+				valueType = collection[0].type
+				valueSelect = collection[0]
+			}
+		} catch (e) {
+			sendUserToast('Failed to load resource types', true)
+			console.error(e)
 		}
+		loading = false
 	}
 
 	$: $workspaceStore && loadResources(resourceType)
@@ -131,46 +140,48 @@
 					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
 					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
-		{:else}
+		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
 		{/if}
 
-		{#if value && value != ''}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => resourceEditor?.initEdit?.(value ?? '')}
-				startIcon={{ icon: Pen }}
-				iconOnly
-			/>
-		{/if}
-
-		{#if resourceType?.includes(',')}
-			{#each resourceType.split(',') as rt}
+		{#if !loading}
+			{#if value && value != ''}
 				<Button
 					{disabled}
 					color="light"
 					variant="border"
 					size="xs"
-					on:click={() => appConnect?.open?.(rt)}
-					startIcon={{ icon: Plus }}>{rt}</Button
+					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					startIcon={{ icon: Pen }}
+					iconOnly
+				/>
+			{/if}
+
+			{#if resourceType?.includes(',')}
+				{#each resourceType.split(',') as rt}
+					<Button
+						{disabled}
+						color="light"
+						variant="border"
+						size="xs"
+						on:click={() => appConnect?.open?.(rt)}
+						startIcon={{ icon: Plus }}>{rt}</Button
+					>
+				{/each}
+			{:else}
+				<Button
+					{disabled}
+					color="light"
+					variant="border"
+					size="xs"
+					on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
+					startIcon={{ icon: Plus }}
+					iconOnly={collection?.length > 0}
+					>{#if collection?.length == 0}
+						Add a {resourceType} resource
+					{/if}</Button
 				>
-			{/each}
-		{:else}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
-				startIcon={{ icon: Plus }}
-				iconOnly={collection?.length > 0}
-				>{#if collection?.length == 0}
-					Add a {resourceType} resource
-				{/if}</Button
-			>
+			{/if}
 		{/if}
 
 		<Button