Fix FileInput and S3 Arg Input

frontend/src/lib/components/ArgInput.svelte

@@ -121,6 +121,7 @@
 			| undefined
 		workspace?: string | undefined
 		actions?: import('svelte').Snippet
+		innerBottomSnippet?: import('svelte').Snippet
 	}
 
 	let {
@@ -177,7 +178,8 @@
 		appPath = undefined,
 		computeS3ForceViewerPolicies = undefined,
 		workspace = undefined,
-		actions
+		actions,
+		innerBottomSnippet
 	}: Props = $props()
 
 	$effect(() => {
@@ -684,6 +686,7 @@
 				bind:editor
 				{appPath}
 				{computeS3ForceViewerPolicies}
+				bottom={innerBottomSnippet}
 			/>
 		{:else if inputCat == 'object' && format == 'json-schema'}
 			{#await import('$lib/components/EditableSchemaForm.svelte')}

frontend/src/lib/components/EditableSchemaForm.svelte

@@ -522,7 +522,7 @@
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full p-3 flex gap-4 justify-end items-center">
+						<div class="w-full px-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
 								<AddPropertyV2
 									bind:schema
@@ -541,8 +541,8 @@
 									label="JSON View"
 									size="xs"
 									options={{
-										right: 'JSON editor',
-										rightTooltip:
+										left: 'JSON editor',
+										leftTooltip:
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode

frontend/src/lib/components/InputTransformForm.svelte

@@ -738,15 +738,17 @@
 							nullable={schema.properties[argName].nullable}
 							bind:title={schema.properties[argName].title}
 							bind:placeholder={schema.properties[argName].placeholder}
-						/>
-
-						{#if shouldShowS3ArrayHelper}
-							<S3ArrayHelperButton
-								{connecting}
-								onClick={() =>
-									switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
-							/>
-						{/if}
+						>
+							{#snippet innerBottomSnippet()}
+								{#if shouldShowS3ArrayHelper}
+									<S3ArrayHelperButton
+										{connecting}
+										onClick={() =>
+											switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+									/>
+								{/if}
+							{/snippet}
+						</ArgInput>
 					{:else if arg.expr != undefined}
 						<div
 							class={`bg-surface-secondary rounded-md min-h-[2.5rem] flex flex-col pl-4 ${inputBorderClass({ forceFocus: focused })}`}
@@ -778,12 +780,10 @@
 							/>
 							<!-- <input type="text" bind:value={arg.expr} /> -->
 						</div>
-						{#if !hideHelpButton}
-							<DynamicInputHelpBox />
-						{/if}
 
 						{#if shouldShowS3ArrayHelper}
 							<S3ArrayHelperButton
+								class="mt-2"
 								{connecting}
 								onClick={() =>
 									focusProp?.(argName, 'connect', (path) => {
@@ -793,6 +793,10 @@
 							/>
 						{/if}
 
+						{#if !hideHelpButton}
+							<DynamicInputHelpBox />
+						{/if}
+
 						<div class="mb-2"></div>
 					{:else}
 						Not recognized input type {argName} ({arg.expr}, {propertyType})

frontend/src/lib/components/S3ArrayHelperButton.svelte

@@ -6,15 +6,27 @@
 		label?: string
 		onClick: () => void
 		connecting?: boolean
+		class?: string
 	}
 
-	let { label = 'Add object from an expression', onClick, connecting = false }: Props = $props()
+	let {
+		label = 'Add object from an expression',
+		onClick,
+		connecting = false,
+		class: className = ''
+	}: Props = $props()
 </script>
 
 {#if !connecting}
-	<div class="mt-2 mb-2">
-		<Button variant="border" color="light" size="xs" startIcon={{ icon: Plug }} onclick={onClick}>
-			{label}
-		</Button>
-	</div>
+	<Button
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="font-normal text-tertiary"
+		startIcon={{ icon: Plug }}
+		onclick={onClick}
+		wrapperClasses={className}
+	>
+		{label}
+	</Button>
 {/if}

frontend/src/lib/components/common/fileInput/FileInput.svelte

@@ -15,7 +15,7 @@
 	export let multiple = false
 	export let convertTo: ReadFileAs | undefined = undefined
 	export let hideIcon = false
-	export let iconSize = 36
+	export let iconSize = 24
 	export let returnFileNames = false
 	export let submittedText: string | undefined = undefined
 	export let defaultFile: string | string[] | undefined = undefined
@@ -187,10 +187,11 @@
 
 <button
 	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-tertiary
-		border border-dashed border-gray-400 hover:border-blue-500
+		`relative center-center flex flex-col gap-x-2 gap-y-1 justify-center items-center flex-wrap text-center font-normal text-hint text-xs rounded-md
+		bg-surface-secondary
+		border border-dashed border-transparent hover:border-blue-500
 		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900
-		duration-200 rounded-component p-1`,
+		duration-200 px-1 py-8`,
 		c
 	)}
 	on:dragover={handleDragOver}
@@ -209,7 +210,7 @@
 	{disabled}
 >
 	{#if !hideIcon && !files}
-		<FileUp size={iconSize} class="mb-2" />
+		<FileUp size={iconSize} />
 	{/if}
 	{#if files}
 		<div class="w-full max-h-full overflow-auto px-6">

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

@@ -17,7 +17,8 @@
 		computeS3ForceViewerPolicies,
 		workspace,
 		editor = $bindable(),
-		appPath
+		appPath,
+		bottom
 	}: {
 		multiple: boolean
 		value: any
@@ -38,6 +39,7 @@
 		workspace: string | undefined
 		editor: SimpleEditor | undefined
 		appPath: string | undefined
+		bottom?: import('svelte').Snippet
 	} = $props()
 
 	let s3FileUploadRawMode: boolean = $state(false)
@@ -67,13 +69,7 @@
 	/>
 {/if}
 
-<div class="flex flex-col w-full gap-1">
-	<Toggle
-		class="flex justify-end"
-		bind:checked={s3FileUploadRawMode}
-		size="xs"
-		options={{ left: `Raw S3 object${multiple ? 's' : ''} input` }}
-	/>
+<div class="flex flex-col w-full gap-1 relative">
 	{#if s3FileUploadRawMode}
 		{#await import('$lib/components/JsonEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -135,7 +131,7 @@
 			variant="border"
 			color="light"
 			size="xs"
-			btnClasses="mt-1"
+			btnClasses="mt-1 font-normal text-tertiary"
 			on:click={() => {
 				s3FilePicker?.open?.(value)
 			}}
@@ -144,4 +140,12 @@
 			{multiple ? 'Add' : 'Choose'} an object from the catalog
 		</Button>
 	{/if}
+	{@render bottom?.()}
+	<Toggle
+		class="mt-1"
+		textClass="font-normal text-tertiary"
+		bind:checked={s3FileUploadRawMode}
+		size="xs"
+		options={{ right: `Raw S3 object${multiple ? 's' : ''} input` }}
+	/>
 </div>