feat(frontend): hide add-secondary-storage button until primary storage is set

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/ResourcePicker.svelte

@@ -31,6 +31,7 @@
 		datatableAsPgResource?: boolean
 		workspace?: string | undefined
 		disableChatOffset?: boolean
+		error?: boolean
 	}
 
 	let {
@@ -51,7 +52,8 @@
 		excludedValues = undefined,
 		datatableAsPgResource = false,
 		workspace = undefined,
-		disableChatOffset = false
+		disableChatOffset = false,
+		error = false
 	}: Props = $props()
 
 	let effectiveWorkspace = $derived(workspace ?? $workspaceStore!)
@@ -221,6 +223,7 @@
 		<Select
 			{disabled}
 			{disablePortal}
+			{error}
 			bind:value={
 				() => value,
 				(v) => {

frontend/src/lib/components/workspaceSettings/StorageSettings.svelte

@@ -161,27 +161,27 @@
 						<div class="flex gap-2">
 							<div class="relative">
 								{#if tableRow[1].resourceType === 'filesystem'}
-								<Select
-									items={[{ value: 'filesystem', label: 'Filesystem' }]}
-									value={'filesystem'}
-									disabled
-									id="storage-resource-type-select"
-									class="w-40"
-								/>
-							{:else}
-								<Select
-									items={[
-										{ value: 's3', label: 'S3' },
-										{ value: 'azure_blob', label: 'Azure Blob' },
-										{ value: 's3_aws_oidc', label: 'AWS OIDC' },
-										{ value: 'azure_workload_identity', label: 'Azure Workload Identity' },
-										{ value: 'gcloud_storage', label: 'Google Cloud Storage' }
-									]}
-									bind:value={tableRow[1].resourceType}
-									id="storage-resource-type-select"
-									class="w-40"
-								/>
-							{/if}
+									<Select
+										items={[{ value: 'filesystem', label: 'Filesystem' }]}
+										value={'filesystem'}
+										disabled
+										id="storage-resource-type-select"
+										class="w-40"
+									/>
+								{:else}
+									<Select
+										items={[
+											{ value: 's3', label: 'S3' },
+											{ value: 'azure_blob', label: 'Azure Blob' },
+											{ value: 's3_aws_oidc', label: 'AWS OIDC' },
+											{ value: 'azure_workload_identity', label: 'Azure Workload Identity' },
+											{ value: 'gcloud_storage', label: 'Google Cloud Storage' }
+										]}
+										bind:value={tableRow[1].resourceType}
+										id="storage-resource-type-select"
+										class="w-40"
+									/>
+								{/if}
 							</div>
 							<div class="flex flex-1">
 								{#if tableRow[1].resourceType === 'filesystem'}
@@ -195,6 +195,7 @@
 										class="flex-1"
 										bind:value={tableRow[1].resourcePath}
 										resourceType={tableRow[1].resourceType}
+										error={tableRow[0] === null && emptyString(tableRow[1].resourcePath)}
 									/>
 								{/if}
 							</div>
@@ -223,19 +224,15 @@
 									class="cursor-not-allowed"
 								>
 									{#snippet trigger()}
-
-											<ExploreAssetButton asset={{ kind: 's3object', path: '' }} disabled />
-
-																	{/snippet}
+										<ExploreAssetButton asset={{ kind: 's3object', path: '' }} disabled />
+									{/snippet}
 									{#snippet content()}
-
-											{#if emptyString(tableRow[1].resourcePath)}
-												Please select a storage resource
-											{:else if isDirty(tableRow[0])}
-												Please save your changes
-											{/if}
-
-																	{/snippet}
+										{#if emptyString(tableRow[1].resourcePath)}
+											Please select a storage resource
+										{:else if isDirty(tableRow[0])}
+											Please save your changes
+										{/if}
+									{/snippet}
 								</Popover>
 							{:else}
 								<ExploreAssetButton
@@ -267,7 +264,6 @@
 							size="sm"
 							btnClasses="max-w-fit"
 							variant="default"
-							disabled={!s3ResourceSettings.resourcePath}
 							on:click={() => {
 								if (s3ResourceSettings.secondaryStorage === undefined) {
 									s3ResourceSettings.secondaryStorage = []
@@ -285,30 +281,15 @@
 							}}
 						>
 							<Plus /> Add secondary storage
-							{#if s3ResourceSettings.resourcePath}
-								<Tooltip>
-									Secondary storage is a feature that allows you to read and write from storage that
-									isn't your main storage by specifying it in the s3 object as "secondary_storage"
-									with the name of it
-								</Tooltip>
-							{/if}
+							<Tooltip>
+								Secondary storage is a feature that allows you to read and write from storage that
+								isn't your main storage by specifying it in the s3 object as "secondary_storage"
+								with the name of it
+							</Tooltip>
 						</Button>
 					{/snippet}
 					<div class="flex justify-center w-full">
-						{#if !s3ResourceSettings.resourcePath}
-							<Popover
-								class="cursor-not-allowed"
-								openOnHover
-								contentClasses="p-2 text-xs text-secondary"
-							>
-								{#snippet trigger()}
-									{@render addSecondaryStorageBtn()}
-								{/snippet}
-								{#snippet content()}
-									Setup a primary storage to use secondary storages
-								{/snippet}
-							</Popover>
-						{:else}
+						{#if s3ResourceSettings.resourcePath}
 							{@render addSecondaryStorageBtn()}
 						{/if}
 					</div>