fix: hide s3 catalog picker in anonymous apps (#6204)

* fix: hide s3 catalog picker in anonymous apps

* nit reactivity upload text

* no signed s3 object warning

* remove warning

* fix check

frontend/src/lib/components/DisplayResult.svelte

@@ -38,6 +38,7 @@
 	import type { DisplayResultUi } from './custom_ui'
 	import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte'
 	import { toJsonStr } from '$lib/utils'
+	import { userStore } from '$lib/stores'
 
 	const IMG_MAX_SIZE = 10000000
 	const TABLE_MAX_SIZE = 5000000
@@ -779,34 +780,38 @@
 									language={json}
 									code={toJsonStr(result).replace(/\\n/g, '\n')}
 								/>
-								<button
-									class="text-secondary underline text-2xs whitespace-nowrap"
-									onclick={() => {
-										s3FileViewer?.open?.(result)
-									}}
-									><span class="flex items-center gap-1"
-										><PanelRightOpen size={12} />object store explorer<Tooltip
-											>Require admin privilege or "S3 resource details and content can be accessed
-											by all users of this workspace" of S3 Storage to be set in the workspace
-											settings</Tooltip
-										></span
-									>
-								</button>
+								{#if $userStore}
+									<button
+										class="text-secondary underline text-2xs whitespace-nowrap"
+										onclick={() => {
+											s3FileViewer?.open?.(result)
+										}}
+										><span class="flex items-center gap-1"
+											><PanelRightOpen size={12} />object store explorer<Tooltip
+												>Require admin privilege or "S3 resource details and content can be accessed
+												by all users of this workspace" of S3 Storage to be set in the workspace
+												settings</Tooltip
+											></span
+										>
+									</button>
+								{/if}
 							{:else if !result?.disable_download}
 								<FileDownload {workspaceId} s3object={result} {appPath} />
-								<button
-									class="text-secondary underline text-2xs whitespace-nowrap"
-									onclick={() => {
-										s3FileViewer?.open?.(result)
-									}}
-									><span class="flex items-center gap-1"
-										><PanelRightOpen size={12} />object store explorer<Tooltip
-											>Require admin privilege or "S3 resource details and content can be accessed
-											by all users of this workspace" of S3 Storage to be set in the workspace
-											settings</Tooltip
-										></span
-									>
-								</button>
+								{#if $userStore}
+									<button
+										class="text-secondary underline text-2xs whitespace-nowrap"
+										onclick={() => {
+											s3FileViewer?.open?.(result)
+										}}
+										><span class="flex items-center gap-1"
+											><PanelRightOpen size={12} />object store explorer<Tooltip
+												>Require admin privilege or "S3 resource details and content can be accessed
+												by all users of this workspace" of S3 Storage to be set in the workspace
+												settings</Tooltip
+											></span
+										>
+									</button>
+								{/if}
 							{/if}
 						</div>
 						{#if typeof result?.s3 === 'string'}

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

@@ -58,11 +58,7 @@
 		allowMultiple = true,
 		allowDelete = true,
 		folderOnly = false,
-		containerText = folderOnly
-			? 'Drag and drop a folder here or click to browse'
-			: allowMultiple
-				? 'Drag and drop files here or click to browse'
-				: 'Drag and drop a file here or click to browse',
+		containerText: customContainerText = undefined,
 		customResourcePath = undefined,
 		customResourceType = undefined,
 		customClass = '',
@@ -80,6 +76,15 @@
 		computeForceViewerPolicies = undefined
 	}: Props = $props()
 
+	const containerText = $derived(
+		customContainerText ??
+			(folderOnly
+				? 'Drag and drop a folder here or click to browse'
+				: allowMultiple
+					? 'Drag and drop files here or click to browse'
+					: 'Drag and drop a file here or click to browse')
+	)
+
 	const dispatch = createEventDispatcher<{
 		addition: { path?: string; filename?: string }
 		deletion: { path: string }

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

@@ -5,6 +5,7 @@
 	import FileUpload from './FileUpload.svelte'
 	import type SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import Button from '../button/Button.svelte'
+	import { userStore } from '$lib/stores'
 
 	let {
 		multiple,
@@ -45,24 +46,26 @@
 	let fileUpload: FileUpload | undefined = $state(undefined)
 </script>
 
-<S3FilePicker
-	bind:this={s3FilePicker}
-	on:selectAndClose={(ev) => {
-		if (multiple) {
-			if (Array.isArray(value)) {
-				value.push(ev.detail)
+{#if $userStore}
+	<S3FilePicker
+		bind:this={s3FilePicker}
+		on:selectAndClose={(ev) => {
+			if (multiple) {
+				if (Array.isArray(value)) {
+					value.push(ev.detail)
+				} else {
+					value = [ev.detail]
+				}
+				fileUpload?.addUpload(ev.detail)
 			} else {
-				value = [ev.detail]
+				value = ev.detail
+				fileUpload?.setUpload(value)
 			}
-			fileUpload?.addUpload(ev.detail)
-		} else {
-			value = ev.detail
-			fileUpload?.setUpload(value)
-		}
-		editor?.setCode(JSON.stringify(value))
-	}}
-	readOnlyMode={false}
-/>
+			editor?.setCode(JSON.stringify(value))
+		}}
+		readOnlyMode={false}
+	/>
+{/if}
 
 <div class="flex flex-col w-full gap-1">
 	<Toggle
@@ -127,16 +130,18 @@
 			initialValue={value}
 		/>
 	{/if}
-	<Button
-		variant="border"
-		color="light"
-		size="xs"
-		btnClasses="mt-1"
-		on:click={() => {
-			s3FilePicker?.open?.(value)
-		}}
-		startIcon={{ icon: Pipette }}
-	>
-		{multiple ? 'Add' : 'Choose'} an object from the catalog
-	</Button>
+	{#if $userStore}
+		<Button
+			variant="border"
+			color="light"
+			size="xs"
+			btnClasses="mt-1"
+			on:click={() => {
+				s3FilePicker?.open?.(value)
+			}}
+			startIcon={{ icon: Pipette }}
+		>
+			{multiple ? 'Add' : 'Choose'} an object from the catalog
+		</Button>
+	{/if}
 </div>