From db82b29d3b59db93ee4641cb671b8286ebccf8e2 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 29 Jan 2024 11:41:04 +0100
Subject: [PATCH] feat(frontend): handle file default value (#3095)

---
 frontend/src/lib/components/ArgInput.svelte               | 3 ++-
 frontend/src/lib/components/S3ObjectPicker.svelte         | 3 ++-
 .../src/lib/components/common/fileInput/FileInput.svelte  | 8 ++++++++
 .../lib/components/common/fileUpload/FileUpload.svelte    | 4 +++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 0ee02246c5..2380b250de 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -489,7 +489,7 @@
 							on:focus={(e) => {
 								dispatch('focus')
 							}}
-							code={JSON.stringify({ s3: '' }, null, 2)}
+							code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)}
 							bind:value
 						/>
 						<Button
@@ -518,6 +518,7 @@
 									s3: ''
 								}
 							}}
+							defaultValue={defaultValue?.s3}
 						/>
 					{/if}
 				</div>
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index bfa185d776..ca1a8f7614 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -60,7 +60,7 @@
 			on:focus={(e) => {
 				dispatch('focus')
 			}}
-			code={JSON.stringify({ s3: '' }, null, 2)}
+			code={JSON.stringify(value ?? { s3: '' }, null, 2)}
 			bind:value
 		/>
 		<Button
@@ -89,6 +89,7 @@
 					s3: ''
 				}
 			}}
+			defaultValue={value?.s3}
 		/>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index cd9fe6e76e..5e98e34445 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -17,6 +17,8 @@
 	export let iconSize = 36
 	export let returnFileNames = false
 	export let submittedText: string | undefined = undefined
+	export let defaultFile: string | undefined = undefined
+
 	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement
 	let files: File[] | undefined = undefined
@@ -156,4 +158,10 @@
 		{multiple}
 		{...$$restProps}
 	/>
+
+	{#if defaultFile}
+		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-tertiary mt-2">
+			Default file: <span class="text-blue-500">{defaultFile}</span>
+		</div>
+	{/if}
 </button>
diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
index 29c518b6ac..a944937eea 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
@@ -21,6 +21,7 @@
 	export let randomFileKey: boolean = false
 	export let pathTransformer: any = undefined // function taking as input {file: File} and returning a string
 	export let forceDisplayUploads: boolean = false
+	export let defaultValue: string | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -174,7 +175,7 @@
 	}
 </script>
 
-<div class="w-full h-full p-2 flex">
+<div class="w-full h-full p-2 flex flex-col">
 	{#if $fileUploads.length > 0 && !forceDisplayUploads}
 		<div class="border rounded-md flex flex-col gap-1 divide-y h-full w-full p-1">
 			<div class="flex h-full overflow-y-auto flex-col">
@@ -362,6 +363,7 @@
 			}}
 			class={twMerge('w-full h-full', customClass, 'wm-file-input')}
 			style={customStyle}
+			defaultFile={defaultValue}
 		>
 			{containerText}
 		</FileInput>