From d61d6f520bd52df23f020cd12cbaf666cfe0097b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 6 Apr 2024 15:00:49 +0200
Subject: [PATCH] fix: improve list static input

---
 frontend/src/lib/components/ArgInput.svelte   | 229 ++++++++++--------
 .../lib/components/InputTransformForm.svelte  |  27 ++-
 frontend/src/lib/components/flows/utils.ts    |   4 +-
 3 files changed, 154 insertions(+), 106 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 0fb4e8d256..212a823c40 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -80,6 +80,7 @@
 
 	let s3FilePicker: S3FilePicker
 	let s3FileUploadRawMode: false
+	let isListJson = false
 
 	let el: HTMLTextAreaElement | undefined = undefined
 
@@ -125,7 +126,7 @@
 
 	function evalValueToRaw() {
 		rawValue =
-			inputCat === 'object' || inputCat === 'resource-object'
+			inputCat === 'object' || inputCat === 'resource-object' || (inputCat == 'list' && !isListJson)
 				? JSON.stringify(value, null, 2)
 				: undefined
 	}
@@ -303,7 +304,6 @@
 			{/if}
 			<span class="text-2xs font-semibold">Preview:</span>
 		{/if}
-
 		{#if description}
 			<div class="text-xs italic pb-1 text-secondary">
 				<pre class="font-main">{description}</pre>
@@ -370,107 +370,121 @@
 				{#if type == 'boolean' && value == undefined}
 					<span>&nbsp; Not set</span>
 				{/if}
-			{:else if inputCat == 'list'}
-				<div class="w-full">
-					{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
-						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								{disabled}
-								bind:selected={value}
-								options={itemsType?.multiselect ?? []}
-								selectedOptionsDraggable={true}
-							/>
-						</div>
-					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
-						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								{disabled}
-								bind:selected={value}
-								options={itemsType?.enum ?? []}
-								selectedOptionsDraggable={true}
-							/>
-						</div>
-					{:else}
-						<div class="w-full">
-							{#key redraw}
-								{#if Array.isArray(value)}
-									{#each value ?? [] as v, i}
-										{#if i < itemsLimit}
-											<div class="flex max-w-md mt-1 w-full items-center">
-												{#if itemsType?.type == 'number'}
-													<input type="number" bind:value={v} id="arg-input-number-array" />
-												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-													<input
-														type="file"
-														class="my-6"
-														on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-														multiple={false}
-													/>
-												{:else if itemsType?.type == 'object'}
-													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-												{:else if Array.isArray(itemsType?.enum)}
-													<ArgEnum
-														required
-														create={extra['disableCreate'] != true}
-														on:focus={() => {
-															dispatch('focus')
+			{:else if inputCat == 'list' && !isListJson}
+				<div class="w-full flex gap-4">
+					<div class="w-full">
+						{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
+							<div class="items-start">
+								<Multiselect
+									ulOptionsClass={'p-2 !bg-surface-secondary'}
+									{disabled}
+									bind:selected={value}
+									options={itemsType?.multiselect ?? []}
+									selectedOptionsDraggable={true}
+								/>
+							</div>
+						{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
+							<div class="items-start">
+								<Multiselect
+									ulOptionsClass={'p-2 !bg-surface-secondary'}
+									{disabled}
+									bind:selected={value}
+									options={itemsType?.enum ?? []}
+									selectedOptionsDraggable={true}
+								/>
+							</div>
+						{:else}
+							<div class="w-full">
+								{#key redraw}
+									{#if Array.isArray(value)}
+										{#each value ?? [] as v, i}
+											{#if i < itemsLimit}
+												<div class="flex max-w-md mt-1 w-full items-center">
+													{#if itemsType?.type == 'number'}
+														<input type="number" bind:value={v} id="arg-input-number-array" />
+													{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+														<input
+															type="file"
+															class="my-6"
+															on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+															multiple={false}
+														/>
+													{:else if itemsType?.type == 'object'}
+														<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+													{:else if Array.isArray(itemsType?.enum)}
+														<ArgEnum
+															required
+															create={extra['disableCreate'] != true}
+															on:focus={() => {
+																dispatch('focus')
+															}}
+															on:blur={(e) => {
+																dispatch('blur')
+															}}
+															{defaultValue}
+															{valid}
+															{disabled}
+															{autofocus}
+															bind:value={v}
+															enum_={itemsType?.enum ?? []}
+														/>
+													{:else}
+														<input type="text" bind:value={v} id="arg-input-array" />
+													{/if}
+													<button
+														transition:fade|local={{ duration: 100 }}
+														class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
+														aria-label="Clear"
+														on:click={() => {
+															value.splice(i, 1)
+															redraw += 1
 														}}
-														on:blur={(e) => {
-															dispatch('blur')
-														}}
-														{defaultValue}
-														{valid}
-														{disabled}
-														{autofocus}
-														bind:value={v}
-														enum_={itemsType?.enum ?? []}
-													/>
-												{:else}
-													<input type="text" bind:value={v} id="arg-input-array" />
-												{/if}
-												<button
-													transition:fade|local={{ duration: 100 }}
-													class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
-													aria-label="Clear"
-													on:click={() => {
-														value.splice(i, 1)
-														redraw += 1
-													}}
-												>
-													<X size={14} />
-												</button>
-											</div>
+													>
+														<X size={14} />
+													</button>
+												</div>
+											{/if}
+										{/each}
+										{#if value.length > itemsLimit}
+											<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+												>{itemsLimit}/{value.length}: Load 50 more...</button
+											>
 										{/if}
-									{/each}
-									{#if value.length > itemsLimit}
-										<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
-											>{itemsLimit}/{value.length}: Load 50 more...</button
-										>
 									{/if}
-								{/if}
-							{/key}
-						</div>
-						<div class="flex mt-2">
-							<Button
-								variant="border"
-								color="light"
-								size="xs"
-								btnClasses="mt-1"
-								on:click={() => {
-									if (value == undefined || !Array.isArray(value)) {
-										value = []
-									}
-									value = value.concat('')
-								}}
-								id="arg-input-add-item"
-								startIcon={{ icon: Plus }}
-							>
-								Add item
-							</Button>
-						</div>
-					{/if}
+								{/key}
+							</div>
+							<div class="flex mt-2 gap-20 items-baseline">
+								<Button
+									variant="border"
+									color="light"
+									size="xs"
+									btnClasses="mt-1"
+									on:click={() => {
+										if (value == undefined || !Array.isArray(value)) {
+											value = []
+										}
+										value = value.concat('')
+									}}
+									id="arg-input-add-item"
+									startIcon={{ icon: Plus }}
+								>
+									Add item
+								</Button>
+							</div>
+						{/if}
+					</div>
+					<div class="mt-2 mr-4">
+						<Toggle
+							on:change={(e) => {
+								evalValueToRaw()
+								isListJson = !isListJson
+							}}
+							checked={isListJson}
+							textClass="text-secondary"
+							size="xs"
+							options={{ right: 'json' }}
+						/>
+					</div>
 				</div>
 			{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 				<span class="text-2xs text-tertiary">Loading resource types...</span>
@@ -529,7 +543,7 @@
 						/>
 					{/if}
 				</div>
-			{:else if inputCat == 'object' || inputCat == 'resource-object'}
+			{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
@@ -554,6 +568,19 @@
 						bind:value
 					/>
 				{/if}
+				{#if inputCat == 'list'}
+					<div class="block">
+						<Toggle
+							on:change={(e) => {
+								isListJson = !isListJson
+							}}
+							checked={isListJson}
+							textClass="text-secondary"
+							size="xs"
+							options={{ right: 'json' }}
+						/>
+					</div>
+				{/if}
 			{:else if inputCat == 'enum'}
 				<div class="flex flex-row w-full gap-1">
 					<ArgEnum
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 3794b00fc4..fdf6329a22 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -23,6 +23,7 @@
 	import type { FlowCopilotContext } from './copilot/flow'
 	import StepInputGen from './copilot/StepInputGen.svelte'
 	import type { PickableProperties } from './flows/previousResults'
+	import { startsWith } from 'lodash'
 
 	export let schema: Schema
 	export let arg: InputTransform | any
@@ -257,7 +258,7 @@
 											staticTemplate
 												? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 												: arg.value
-												? JSON.stringify(arg?.value, null, 4)
+												? '(' + JSON.stringify(arg?.value, null, 4) + ')'
 												: ''
 										)
 									}
@@ -273,6 +274,19 @@
 											arg.expr = undefined
 										}
 										setPropertyType(arg?.value)
+									} else if (inputCat == 'list' || inputCat == 'object') {
+										if (arg) {
+											try {
+												let newExpr = arg.expr
+												if (newExpr.startsWith('(') && newExpr.endsWith(')')) {
+													newExpr = newExpr.slice(1, -1)
+												}
+												arg.value = JSON.parse(newExpr)
+											} catch (e) {
+												arg.value = undefined
+											}
+											arg.expr = undefined
+										}
 									} else {
 										if (arg) {
 											arg.type = 'static'
@@ -329,7 +343,7 @@
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
+				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
 				: ''}"
 			on:keyup={stepInputGen?.onKeyUp}
 		>
@@ -419,6 +433,15 @@
 				<div class="mb-2" />
 			{:else}
 				Not recognized input type {argName} ({arg.expr}, {propertyType})
+				<div class="flex mt-2">
+					<Button
+						variant="border"
+						size="xs"
+						on:click={() => {
+							arg.expr = ''
+						}}>Set expr to empty string</Button
+					></div
+				>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index 19852e8e77..0c35ce9c60 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -68,9 +68,7 @@ export function evalValue(
 	return v
 }
 
-export function cleanInputs(
-	flow: OpenFlow | any
-): OpenFlow & {
+export function cleanInputs(flow: OpenFlow | any): OpenFlow & {
 	tag?: string
 	ws_error_handler_muted?: boolean
 	dedicated_worker?: boolean