From e16fde88a1250e3d67b328ed79cb628f0ef6a9bd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 9 Jan 2024 06:48:52 +0100
Subject: [PATCH] small QoL improvements on input type args

---
 frontend/src/lib/components/ArgEnum.svelte    |  3 +-
 frontend/src/lib/components/ArgInput.svelte   | 74 ++++++++++++-------
 .../lib/components/ArrayTypeNarrowing.svelte  |  4 +-
 .../src/lib/components/SchemaModal.svelte     |  3 +-
 .../lib/components/StringTypeNarrowing.svelte | 57 +++++++++++++-
 5 files changed, 108 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/components/ArgEnum.svelte b/frontend/src/lib/components/ArgEnum.svelte
index b8379557d5..5fd8089be9 100644
--- a/frontend/src/lib/components/ArgEnum.svelte
+++ b/frontend/src/lib/components/ArgEnum.svelte
@@ -9,6 +9,7 @@
 	export let autofocus: boolean
 	export let defaultValue: string | undefined
 	export let valid: boolean
+	export let create: boolean
 
 	const dispatch = createEventDispatcher()
 
@@ -38,7 +39,7 @@
 	onFocus={() => {
 		dispatch('focus')
 	}}
-	create
+	{create}
 	{onCreate}
 	{disabled}
 	{autofocus}
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index a5d029227c..66ea1563b8 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -234,10 +234,14 @@
 
 			{#if type == 'array'}
 				<ArrayTypeNarrowing bind:itemsType />
-				<Label label="Display using multiselect">
-					<Toggle disabled={itemsType?.enum == undefined} bind:checked={extra.multiselect} />
+				<Label label="Display using multiselect (require enum)">
+					<Toggle
+						size="xs"
+						disabled={itemsType?.enum == undefined}
+						bind:checked={extra.multiselect}
+					/>
 				</Label>
-			{:else if (type == 'string' && format != 'date-time') || ['number', 'integer', 'object'].includes(type ?? '')}
+			{:else if type == 'string' || ['number', 'integer', 'object'].includes(type ?? '')}
 				<div class="p-2 my-1 text-xs border-solid border border-gray-200 rounded-lg">
 					<div class="w-min">
 						<Button
@@ -257,13 +261,16 @@
 
 					{#if seeEditable}
 						<div class="mt-2">
-							{#if type == 'string' && format != 'date-time'}
+							{#if type == 'string'}
 								<StringTypeNarrowing
 									bind:customErrorMessage
 									bind:format
 									bind:pattern
 									bind:enum_
 									bind:contentEncoding
+									bind:minRows={extra['minRows']}
+									bind:disableCreate={extra['disableCreate']}
+									bind:disableVariablePicker={extra['disableVariablePicker']}
 								/>
 							{:else if type == 'number' || type == 'integer'}
 								<NumberTypeNarrowing
@@ -352,15 +359,17 @@
 					{#if Array.isArray(itemsType?.multiselect)}
 						<div class="items-start">
 							<Multiselect
+								ulOptionsClass={'p-2 !bg-surface-secondary'}
 								{disabled}
 								bind:selected={value}
 								options={itemsType?.multiselect ?? []}
 								selectedOptionsDraggable={true}
 							/>
 						</div>
-					{:else if extra.multiselect}
+					{:else if extra.multiselect && itemsType?.enum != undefined}
 						<div class="items-start">
 							<Multiselect
+								ulOptionsClass={'p-2 !bg-surface-secondary'}
 								{disabled}
 								bind:selected={value}
 								options={itemsType?.enum ?? []}
@@ -387,6 +396,7 @@
 													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
+														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
 														}}
@@ -496,7 +506,15 @@
 				{/if}
 			{:else if inputCat == 'enum'}
 				<div class="flex flex-row w-full gap-1">
-					<ArgEnum {defaultValue} {valid} {disabled} bind:value {enum_} {autofocus} />
+					<ArgEnum
+						create={extra['disableCreate'] != true}
+						{defaultValue}
+						{valid}
+						{disabled}
+						bind:value
+						{enum_}
+						{autofocus}
+					/>
 				</div>
 			{:else if inputCat == 'date'}
 				<DateTimeInput {autofocus} bind:value />
@@ -551,27 +569,29 @@
 						{#if password}
 							<Password {disabled} bind:password={value} />
 						{:else}
-							<textarea
-								{autofocus}
-								rows="1"
-								bind:this={el}
-								on:focus={(e) => {
-									dispatch('focus')
-								}}
-								use:autosize
-								on:keydown={onKeyDown}
-								type="text"
-								{disabled}
-								class={twMerge(
-									'w-full',
-									valid
-										? ''
-										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
-								)}
-								placeholder={defaultValue ?? ''}
-								bind:value
-							/>
-							{#if !disabled && itemPicker}
+							{#key extra?.['minRows']}
+								<textarea
+									{autofocus}
+									rows={extra?.['minRows'] ? extra['minRows']?.toString() : '1'}
+									bind:this={el}
+									on:focus={(e) => {
+										dispatch('focus')
+									}}
+									use:autosize
+									on:keydown={onKeyDown}
+									type="text"
+									{disabled}
+									class={twMerge(
+										'w-full',
+										valid
+											? ''
+											: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
+									)}
+									placeholder={defaultValue ?? ''}
+									bind:value
+								/>
+							{/key}
+							{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
 								<button
 									class="absolute right-1 top-1 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index aa6478d125..2377a01415 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
@@ -67,7 +67,9 @@
 				size="sm"
 				on:click={() => {
 					if (itemsType?.enum) {
-						itemsType.enum = itemsType.enum ? itemsType.enum.concat('') : ['']
+						let enum_ = itemsType.enum
+						let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`
+						itemsType.enum = itemsType.enum ? itemsType.enum.concat(choice) : [choice]
 					}
 				}}>+</Button
 			>
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 1eed2379b6..2b85d6a6ea 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -244,11 +244,12 @@
 						bind:pattern={property.pattern}
 						bind:enum_={property.enum_}
 						bind:contentEncoding={property.contentEncoding}
+						noExtra
 					/>
 				{:else if property.selectedType == 'array'}
 					<ArrayTypeNarrowing bind:itemsType={property.items} />
 					<div class="mt-4" />
-					<Label label="Display using multiselect">
+					<Label label="Display using multiselect (require enum)">
 						<Toggle
 							disabled={property?.items?.enum == undefined}
 							bind:checked={property.multiselect}
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 0cde5d58b6..0752c30157 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -10,6 +10,11 @@
 	export let format: string | undefined
 	export let contentEncoding: 'base64' | 'binary' | undefined
 	export let customErrorMessage: string | undefined
+	export let minRows: number | undefined = undefined
+	export let disableCreate: boolean | undefined = false
+	export let disableVariablePicker: boolean | undefined = false
+
+	export let noExtra = false
 
 	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' = computeKind()
 	let patternStr: string = pattern ?? ''
@@ -31,7 +36,7 @@
 	]
 
 	$: format =
-		kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined
+		kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format
 	$: pattern = patternStr == '' ? undefined : patternStr
 	$: contentEncoding = kind == 'base64' ? 'base64' : undefined
 
@@ -42,7 +47,8 @@
 	}
 
 	function add() {
-		enum_ = enum_ ? enum_.concat('') : ['']
+		let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`
+		enum_ = enum_ ? enum_.concat(choice) : [choice]
 	}
 
 	function remove(item: string) {
@@ -62,7 +68,7 @@
 		if (pattern != undefined) {
 			return 'pattern'
 		}
-		if (format != undefined) {
+		if (format != undefined && format != '') {
 			if (format.startsWith('resource')) {
 				return 'resource'
 			}
@@ -86,6 +92,15 @@
 		if (e.detail != 'enum') {
 			enum_ = undefined
 		}
+		if (e.detail == 'none') {
+			pattern = undefined
+			format = undefined
+			contentEncoding = undefined
+			customErrorMessage = undefined
+			minRows = undefined
+			disableCreate = undefined
+			disableVariablePicker = undefined
+		}
 	}}
 />
 <div class="my-2" />
@@ -154,6 +169,20 @@
 			</Button>
 		</div>
 	</label>
+	{#if !noExtra}
+		<Toggle
+			size="sm"
+			options={{ right: 'Disallow creating custom values' }}
+			checked={disableCreate != undefined && disableCreate}
+			on:change={(e) => {
+				if (e.detail) {
+					disableCreate = true
+				} else {
+					disableCreate = undefined
+				}
+			}}
+		/>
+	{/if}
 {:else if kind == 'resource'}
 	<div class="mt-1" />
 	<ResourceTypePicker bind:value={resource} />
@@ -164,4 +193,26 @@
 			<option value={f}>{f}</option>
 		{/each}
 	</select>
+{:else if kind == 'none'}
+	{#if !noExtra}
+		<label
+			>min textarea rows:
+			<input type="number" bind:value={minRows} />
+		</label>
+	{/if}
+{/if}
+{#if (kind == 'none' || kind == 'pattern' || kind == 'format') && !noExtra}
+	<div class="mt-1" />
+	<Toggle
+		size="xs"
+		options={{ right: 'Disable variable picker' }}
+		checked={disableVariablePicker != undefined && disableVariablePicker}
+		on:change={(e) => {
+			if (e.detail) {
+				disableVariablePicker = true
+			} else {
+				disableVariablePicker = undefined
+			}
+		}}
+	/>
 {/if}