feat: Browse s3 bucket content from workspace settings page (#3013)

.gitignore

@@ -5,3 +5,4 @@ local/
 frontend/src/routes/test.svelte
 CaddyfileRemoteMalo
 *.swp
+**/.idea/

frontend/src/lib/components/S3FilePicker.svelte

@@ -38,6 +38,7 @@
 
 	let workspaceSettingsInitialized = true
 
+	export let fromWorkspaceSettings: boolean = false
 	export let readOnlyMode: boolean
 
 	export let initialFileKey: { s3: string } | undefined = undefined
@@ -431,22 +432,32 @@
 		documentationLink="https://www.windmill.dev/docs/integrations/s3"
 	>
 		{#if workspaceSettingsInitialized === false}
-			<Alert type="error" title="Workspace not connected to any S3 storage">
-				<div class="flex flex-row gap-x-1 w-full items-center">
-					<p class="text-clip grow min-w-0">
-						The workspace needs to be connected to an S3 storage to use this feature. You can <a
-							target="_blank"
-							href="/workspace_settings?tab=windmill_lfs">configure it here</a
-						>.
-					</p>
-					<Button
-						variant="border"
-						color="light"
-						on:click={reloadContent}
-						startIcon={{ icon: RotateCw }}
-					/>
-				</div>
-			</Alert>
+			{#if fromWorkspaceSettings}
+				<Alert type="error" title="Connection to remote S3 bucket unsuccessful">
+					<div class="flex flex-row gap-x-1 w-full items-center">
+						<p class="text-clip grow min-w-0">
+							Double check the S3 resource fields and try again.
+						</p>
+					</div>
+				</Alert>
+			{:else}
+				<Alert type="error" title="Workspace not connected to any S3 storage">
+					<div class="flex flex-row gap-x-1 w-full items-center">
+						<p class="text-clip grow min-w-0">
+							The workspace needs to be connected to an S3 storage to use this feature. You can <a
+								target="_blank"
+								href="/workspace_settings?tab=windmill_lfs">configure it here</a
+							>.
+						</p>
+						<Button
+							variant="border"
+							color="light"
+							on:click={reloadContent}
+							startIcon={{ icon: RotateCw }}
+						/>
+					</div>
+				</Alert>
+			{/if}
 		{:else}
 			<div class="flex flex-row border rounded-md h-full" bind:clientHeight={listDivHeight}>
 				<div class="min-w-[30%] border-r">
@@ -629,10 +640,12 @@
 						uploadModalOpen = true
 					}}>Upload File</Button
 				>
-				<Button
-					disable={selectedFileKey === undefined || emptyString(selectedFileKey.s3)}
-					on:click={selectAndClose}>Select</Button
-				>
+				{#if !fromWorkspaceSettings}
+					<Button
+						disable={selectedFileKey === undefined || emptyString(selectedFileKey.s3)}
+						on:click={selectAndClose}>Select</Button
+					>
+				{/if}
 			{/if}
 		</div>
 	</DrawerContent>
@@ -702,6 +715,10 @@
 	on:confirmed={() => {
 		uploadFileToS3()
 	}}
+	on:close={() => {
+		fileUploadCancelled = true
+		uploadModalOpen = false
+	}}
 	bind:progressPct={fileUploadProgress}
 	bind:errorMsg={fileUploadErrorMsg}
 />

frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte

@@ -3,7 +3,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
-	import { FileUp, Loader2 } from 'lucide-svelte'
+	import { FileUp, Loader2, X } from 'lucide-svelte'
 
 	export let title: string
 	export let open: boolean = false
@@ -44,9 +44,19 @@
 					)}
 				>
 					<div class="flex flex-col gap-2">
-						<h3 class="text-lg font-medium text-primary">
-							{title}
-						</h3>
+						<div class="flex justify-between">
+							<h3 class="text-lg font-medium text-primary">
+								{title}
+							</h3>
+							<Button
+								on:click={() => dispatch('close')}
+								title="Close - This will cancel any upload in progress"
+								color="light"
+								size="sm"
+								iconOnly={true}
+								startIcon={{ icon: X }}
+							/>
+						</div>
 						<div class="flex items-center gap-2">
 							<span>Key: </span>
 							<input

frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte

@@ -10,6 +10,7 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
+	import S3FilePicker from '$lib/components/S3FilePicker.svelte'
 
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import WorkspaceUserSettings from '$lib/components/settings/WorkspaceUserSettings.svelte'
@@ -19,7 +20,6 @@
 		OauthService,
 		Script,
 		WorkspaceService,
-		HelpersService,
 		JobService,
 		ResourceService
 	} from '$lib/gen'
@@ -39,6 +39,9 @@
 	import PremiumInfo from '$lib/components/settings/PremiumInfo.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import TestOpenaiKey from '$lib/components/copilot/TestOpenaiKey.svelte'
+	import Portal from 'svelte-portal'
+
+	let s3FileViewer: S3FilePicker
 
 	let initialPath: string
 	let scriptPath: string
@@ -372,6 +375,10 @@
 	}
 </script>
 
+<Portal>
+	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={false} fromWorkspaceSettings={true} />
+</Portal>
+
 <CenteredPage>
 	{#if $userStore?.is_admin || $superadmin}
 		<PageHeader title="Workspace settings: {$workspaceStore}"
@@ -746,12 +753,9 @@
 					disabled={!s3ResourceInitialPath}
 					on:click={async () => {
 						if ($workspaceStore) {
-							await HelpersService.datasetStorageTestConnection({
-								workspace: $workspaceStore
-							})
-							sendUserToast('Connection successful')
+							s3FileViewer?.open?.(undefined)
 						}
-					}}>Test Connection</Button
+					}}>Browse content</Button
 				>
 			</div>
 		{:else if tab == 'git_sync'}