fix: Array of S3 files now shows links to the S3 explorer (#2783)

* fix: array of s3 object result

* Add more text file extensions

* Fix bug when adding a s3object param

backend/windmill-api/src/job_helpers.rs

@@ -548,11 +548,12 @@ async fn load_file_preview(
             .await
         }
         mt_opt => {
+            let lowercased_file_key = file_key.to_lowercase();
             // sometimes S3 doesn't infer the content type on upload. Guess it from the file extension
-            if file_key.to_lowercase().ends_with(".parquet") {
+            if lowercased_file_key.ends_with(".parquet") {
                 content_type = WindmillContentType::Parquet;
                 read_s3_parquet_object_head(&s3_resource, &file_key).await
-            } else if file_key.to_lowercase().ends_with(".csv") {
+            } else if lowercased_file_key.ends_with(".csv") {
                 content_type = WindmillContentType::Csv;
                 csv_file_preview_with_fallback(
                     &s3_client,
@@ -563,6 +564,22 @@ async fn load_file_preview(
                     query.csv_has_header,
                 )
                 .await
+            } else if lowercased_file_key.ends_with(".json")
+                || lowercased_file_key.ends_with(".yaml")
+                || lowercased_file_key.ends_with(".yml")
+                || lowercased_file_key.ends_with(".xml")
+                || lowercased_file_key.ends_with(".txt")
+                || lowercased_file_key.ends_with(".log")
+            {
+                content_type = WindmillContentType::RawText;
+                read_s3_text_object_head(
+                    &s3_client,
+                    &s3_bucket,
+                    &file_key,
+                    query.read_bytes_from,
+                    file_chunk_length,
+                )
+                .await
             } else {
                 content_type = WindmillContentType::Unknown;
                 let msg = match mt_opt {

frontend/src/lib/components/ArgInput.svelte

@@ -195,7 +195,6 @@
 
 <S3FilePicker
 	bind:this={s3FilePicker}
-	initialFileKey={value}
 	bind:selectedFileKey={value}
 	on:close={() => {
 		rawValue = JSON.stringify(value, null, 2)
@@ -458,9 +457,8 @@
 						size="xs"
 						btnClasses="mt-1"
 						on:click={() => {
-							s3FilePicker?.open?.()
+							s3FilePicker?.open?.(value)
 						}}
-						id="arg-input-file-picker"
 						startIcon={{ icon: Pipette }}
 					>
 						Choose an object from the catalog

frontend/src/lib/components/DisplayResult.svelte

@@ -30,6 +30,7 @@
 		| 'svg'
 		| 'filename'
 		| 's3object'
+		| 's3object-list'
 		| undefined
 
 	$: resultKind = inferResultKind(result)
@@ -127,6 +128,11 @@
 					return 'approval'
 				} else if (keys.length === 1 && keys.includes('s3')) {
 					return 's3object'
+				} else if (
+					Array.isArray(result) &&
+					result.every((elt) => inferResultKind(elt) === 's3object')
+				) {
+					return 's3object-list'
 				}
 			} catch (err) {}
 		}
@@ -151,7 +157,7 @@
 
 <div class="inline-highlight relative grow min-h-[200px]">
 	{#if result != undefined && length != undefined && largeObject != undefined}
-		{#if resultKind && !['json', 's3object'].includes(resultKind)}
+		{#if resultKind && !['json', 's3object', 's3object-list'].includes(resultKind)}
 			<div class="top-0 flex flex-row w-full justify-between items-center"
 				><div class="mb-2 text-tertiary text-sm">
 					as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
@@ -304,11 +310,24 @@
 				<button
 					class="text-secondary underline text-2xs whitespace-nowrap"
 					on:click={() => {
-						s3FileViewer?.open?.()
+						s3FileViewer?.open?.(result)
 					}}
 					>s3 explorer
 				</button>
 			</div>
+		{:else if !forceJson && resultKind == 's3object-list'}
+			<div class="absolute top-1 h-full w-full">
+				{#each result as s3object}
+					<Highlight class="" language={json} code={toJsonStr(s3object).replace(/\\n/g, '\n')} />
+					<button
+						class="text-secondary underline text-2xs whitespace-nowrap"
+						on:click={() => {
+							s3FileViewer?.open?.(s3object)
+						}}
+						>s3 explorer
+					</button>
+				{/each}
+			</div>
 		{:else if largeObject}<div class="text-sm text-tertiary"
 				><a
 					download="{filename ?? 'result'}.json"
@@ -383,11 +402,6 @@
 	</Portal>
 
 	<Portal>
-		<S3FilePicker
-			bind:this={s3FileViewer}
-			initialFileKey={result}
-			selectedFileKey={result}
-			readOnlyMode={true}
-		/>
+		<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 	</Portal>
 {/if}

frontend/src/lib/components/S3FilePicker.svelte

@@ -14,7 +14,7 @@
 
 	export let readOnlyMode: boolean
 
-	export let initialFileKey: { s3: string }
+	export let initialFileKey: { s3: string } | undefined = undefined
 	let initialFileKeyInternalCopy: { s3: string }
 	export let selectedFileKey: { s3: string } | undefined = undefined
 
@@ -64,7 +64,6 @@
 			maxKeys: 1000, // fixed pages of 1000 files for now
 			marker: paginationMarker
 		})
-
 		for (let file_path of availableFiles.windmill_large_files) {
 			let split_path = file_path.s3.split('/')
 			let parent_path: string | undefined = undefined
@@ -99,7 +98,6 @@
 		if (availableFiles.next_marker !== undefined) {
 			paginationMarker = availableFiles.next_marker
 		}
-
 		// before returning, un-collapse the folders containing the selected file (if any)
 		if (selectedFileKey !== undefined && !emptyString(selectedFileKey.s3)) {
 			let split_path = selectedFileKey.s3.split('/')
@@ -173,13 +171,22 @@
 		filePreviewLoading = false
 	}
 
-	export async function open() {
+	export async function open(preSelectedFileKey: { s3: string } | undefined = undefined) {
+		if (preSelectedFileKey !== undefined) {
+			initialFileKey = { ...preSelectedFileKey }
+			selectedFileKey = { ...preSelectedFileKey }
+		}
+		displayedFileKeys = []
+		allFilesByKey = {}
+		paginationMarker = undefined
 		reloadContent()
 		drawer.openDrawer?.()
 	}
 
 	async function reloadContent() {
-		initialFileKeyInternalCopy = { ...initialFileKey }
+		if (initialFileKey !== undefined) {
+			initialFileKeyInternalCopy = { ...initialFileKey }
+		}
 		try {
 			await HelpersService.datasetStorageTestConnection({ workspace: $workspaceStore! })
 		} catch (e) {

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -58,12 +58,7 @@
 </script>
 
 <Portal>
-	<S3FilePicker
-		bind:this={s3FileViewer}
-		initialFileKey={json}
-		selectedFileKey={json}
-		readOnlyMode={true}
-	/>
+	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 </Portal>
 
 {#if keys.length > 0}
@@ -140,7 +135,7 @@
 					<button
 						class="text-secondary underline text-2xs whitespace-nowrap ml-1"
 						on:click={() => {
-							s3FileViewer?.open?.()
+							s3FileViewer?.open?.(json)
 						}}
 						>s3 explorer
 					</button>