From 8d8542e4cf4f1192ca7e59d9e9c398fe2d9e28a7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 10 May 2023 17:29:12 +0200
Subject: [PATCH] only prettify run forms and lightweight schema form

---
 frontend/src/lib/components/ArgInput.svelte   |  3 +-
 .../src/lib/components/FieldHeader.svelte     |  7 ++-
 .../lib/components/FlowPreviewContent.svelte  |  2 +-
 .../lib/components/LightweightArgInput.svelte |  1 +
 frontend/src/lib/components/RunForm.svelte    | 49 +++++++++++--------
 frontend/src/lib/components/SchemaForm.svelte |  3 ++
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 1797b8a92e..a899888153 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -58,6 +58,7 @@
 	export let noMargin = false
 	export let extra: Record<string, any> = {}
 	export let minW = true
+	export let prettifyHeader = false
 
 	let seeEditable: boolean = enum_ != undefined || pattern != undefined
 	const dispatch = createEventDispatcher()
@@ -175,7 +176,7 @@
 <div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+			<FieldHeader prettify={prettifyHeader} {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 8294cbe4ae..2b67f0a572 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -10,11 +10,16 @@
 	export let required = false
 	export let displayType: boolean = true
 	export let labelClass: string = ''
+	export let prettify = false
 </script>
 
 <div class="inline-flex flex-row items-center truncated">
 	<span class={twMerge('font-semibold', labelClass)}>
-		{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
+		{#if prettify}
+			{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
+		{:else}
+			{label}
+		{/if}
 	</span>
 	<Required {required} class="!ml-0" />
 
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index c631eadae7..bcacaaffda 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -165,7 +165,7 @@
 					variant="border"
 					on:click={() => {
 						inputLibraryDrawer?.openDrawer()
-					}}>Input library</Button
+					}}>Past Runs/Input library</Button
 				>
 			{/if}
 
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index a1f5c6b32d..751e5478e2 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -143,6 +143,7 @@
 	<div>
 		{#if displayHeader}
 			<FieldHeader
+				prettify
 				{label}
 				{required}
 				{type}
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 3547061131..dd5755d07e 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -132,7 +132,14 @@
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm {noVariablePicker} {autofocus} schema={runnable.schema} bind:isValid bind:args />
+			<SchemaForm
+				prettifyHeader
+				{noVariablePicker}
+				{autofocus}
+				schema={runnable.schema}
+				bind:isValid
+				bind:args
+			/>
 		{/if}
 	{:else}
 		<div class="text-xs text-gray-600">No schema</div>
@@ -143,16 +150,16 @@
 			<div class="flex flex-col gap-4 mt-2 border p-2">
 				<div class="flex flex-col gap-2">
 					{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
-					<div class="flex">
-						<Button
-							color="light"
-							size="sm"
-							endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
-							on:click={() => (viewOptions = !viewOptions)}
-						>
-							Schedule to run later
-						</Button>
-					</div>
+						<div class="flex">
+							<Button
+								color="light"
+								size="sm"
+								endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+								on:click={() => (viewOptions = !viewOptions)}
+							>
+								Schedule to run later
+							</Button>
+						</div>
 					{/if}
 					{#if viewOptions}
 						<div transition:slide|local class="mt-6">
@@ -226,16 +233,16 @@
 		<div>
 			<div class="my-20" />
 			{#if SCRIPT_VIEW_SHOW_RUN_FROM_CLI}
-			<div class="flex">
-				<Button
-					color="light"
-					size="xs"
-					endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
-					on:click={() => (viewCliOptions = !viewCliOptions)}
-				>
-					Run it from the CLI
-				</Button>
-			</div>
+				<div class="flex">
+					<Button
+						color="light"
+						size="xs"
+						endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+						on:click={() => (viewCliOptions = !viewCliOptions)}
+					>
+						Run it from the CLI
+					</Button>
+				</div>
 			{/if}
 			{#if viewCliOptions}
 				<div transition:slide|local class="mt-2 px-4 pt-2">
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index ba53faa716..c4da39b930 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -24,6 +24,7 @@
 	export let noVariablePicker = false
 	export let flexWrap = false
 	export let noDelete = false
+	export let prettifyHeader = false
 
 	let clazz: string = ''
 	export { clazz as class }
@@ -69,6 +70,7 @@
 					{#if typeof args == 'object' && schema?.properties[argName]}
 						{#if editableSchema}
 							<ArgInput
+								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}
 								bind:description={schema.properties[argName].description}
@@ -94,6 +96,7 @@
 							/>
 						{:else}
 							<ArgInput
+								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}
 								description={schema.properties[argName].description}