From 252cf375b717b2c95b93dea4a4be26d466bf7fb5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 6 Nov 2022 16:31:50 +0100
Subject: [PATCH] add autofocus for run page

---
 frontend/src/lib/components/ArgInput.svelte      | 12 +++++++++---
 frontend/src/lib/components/RunForm.svelte       |  3 ++-
 frontend/src/lib/components/SchemaForm.svelte    |  5 ++++-
 frontend/src/lib/components/SchemaViewer.svelte  |  2 +-
 frontend/src/routes/flows/run/[...path].svelte   |  9 ++++++++-
 frontend/src/routes/scripts/run/[...hash].svelte |  1 +
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 685f6704c2..3786667456 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -37,6 +37,7 @@
 		| undefined = undefined
 	export let displayHeader = true
 	export let properties: { [name: string]: SchemaProperty } | undefined = undefined
+	export let autofocus = false
 
 	let seeEditable: boolean = enum_ != undefined || pattern != undefined
 	const dispatch = createEventDispatcher()
@@ -189,6 +190,7 @@
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
+					{autofocus}
 					on:focus
 					{disabled}
 					type="number"
@@ -216,16 +218,17 @@
 						{#each value ?? [] as v, i}
 							<div class="flex flex-row max-w-md mt-1">
 								{#if itemsType?.type == 'number'}
-									<input type="number" bind:value={v} />
+									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
 								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 									<input
+										autofocus={autofocus && i == 0}
 										type="file"
 										class="my-6"
 										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 										multiple={false}
 									/>
 								{:else}
-									<input type="text" bind:value={v} />
+									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
 								{/if}
 								<Button
 									variant="border"
@@ -277,6 +280,7 @@
 					<textarea
 						bind:this={el}
 						on:focus
+						{autofocus}
 						{disabled}
 						use:autosize
 						style="max-height: {maxHeight}"
@@ -297,7 +301,7 @@
 					{/each}
 				</select>
 			{:else if inputCat == 'date'}
-				<input class="inline-block" type="datetime-local" bind:value />
+				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql'}
 				<div class="border rounded mb-4 w-full border-gray-700">
 					<SimpleEditor
@@ -314,6 +318,7 @@
 				</div>
 			{:else if inputCat == 'base64'}
 				<input
+					{autofocus}
 					type="file"
 					class="my-6"
 					on:change={(x) => fileChanged(x, (val) => (value = val))}
@@ -328,6 +333,7 @@
 				/>
 			{:else if inputCat == 'string'}
 				<textarea
+					{autofocus}
 					rows="1"
 					bind:this={el}
 					on:focus={() => dispatch('focus')}
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 0b30ff8fde..14a058f0a0 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -35,6 +35,7 @@
 	export let buttonText = 'Run'
 	export let schedulable = true
 	export let detailed = true
+	export let autofocus = false
 
 	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
@@ -97,7 +98,7 @@
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm schema={runnable.schema} bind:isValid bind:args />
+			<SchemaForm {autofocus} schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
 		<div class="text-sm">No schema</div>
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 0a3a6ba49c..d5f9ee3afc 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -12,6 +12,8 @@
 	export let isValid: boolean = true
 	export let extraLib: string = 'missing extraLib'
 	export let importPath: string | undefined = undefined
+	export let autofocus = false
+
 	let clazz: string = ''
 	export { clazz as class }
 
@@ -36,7 +38,7 @@
 
 <div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName}
+		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
 			{#if inputTransform}
 				<InputTransformForm
 					bind:arg={args[argName]}
@@ -48,6 +50,7 @@
 				/>
 			{:else}
 				<ArgInput
+					autofocus={i == 0 && autofocus}
 					label={argName}
 					bind:description={schema.properties[argName].description}
 					bind:value={args[argName]}
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index afe4580818..35345ddfd3 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -64,7 +64,7 @@
 						</TableCustom>
 					</div>
 				{:else}
-					<div class="text-gray-700 text-xs italic">This script has no arguments</div>
+					<div class="text-gray-700 text-xs italic m-1">No arguments</div>
 				{/if}
 			</TabContent>
 			<TabContent value="advanced">
diff --git a/frontend/src/routes/flows/run/[...path].svelte b/frontend/src/routes/flows/run/[...path].svelte
index 5d9907d227..b82e38bfd2 100644
--- a/frontend/src/routes/flows/run/[...path].svelte
+++ b/frontend/src/routes/flows/run/[...path].svelte
@@ -128,5 +128,12 @@
 			</div>
 		</div>
 	{/if}
-	<RunForm bind:this={runForm} bind:isValid detailed={false} runnable={flow} runAction={runFlow} />
+	<RunForm
+		autofocus
+		bind:this={runForm}
+		bind:isValid
+		detailed={false}
+		runnable={flow}
+		runAction={runFlow}
+	/>
 </CenteredPage>
diff --git a/frontend/src/routes/scripts/run/[...hash].svelte b/frontend/src/routes/scripts/run/[...hash].svelte
index ec6d100a54..ec72cd3d82 100644
--- a/frontend/src/routes/scripts/run/[...hash].svelte
+++ b/frontend/src/routes/scripts/run/[...hash].svelte
@@ -165,6 +165,7 @@
 		</div>
 	{:else}
 		<RunForm
+			autofocus
 			detailed={false}
 			bind:isValid
 			bind:this={runForm}