windmill-components 1.623.1 → 1.642.0

package/package/components/workspaceSettings/StorageSettings.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">import { enterpriseLicense, workspaceStore } from '../../stores';
-import { emptyString, sendUserToast } from '../../utils';
+import { emptyString, pick, sendUserToast } from '../../utils';
 import { ChevronDown, Plus, Shield } from 'lucide-svelte';
 import Alert from '../common/alert/Alert.svelte';
 import Button from '../common/button/Button.svelte';
-import Tab from '../common/tabs/Tab.svelte';
-import Tabs from '../common/tabs/Tabs.svelte';
-import Description from '../Description.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
+import SettingsFooter from './SettingsFooter.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
 import Tooltip from '../Tooltip.svelte';
@@ -19,7 +18,15 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import CloseButton from '../common/CloseButton.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
-let { s3ResourceSettings = $bindable(), onSave = undefined } = $props();
+import DataTable from '../table/DataTable.svelte';
+import Head from '../table/Head.svelte';
+import Cell from '../table/Cell.svelte';
+import Row from '../table/Row.svelte';
+import { deepEqual } from 'fast-equals';
+import ExploreAssetButton from '../ExploreAssetButton.svelte';
+import Modal2 from '../common/modal/Modal2.svelte';
+let { s3ResourceSettings = $bindable(), s3ResourceSavedSettings, onSave = undefined, onDiscard = undefined } = $props();
+let advancedPermissionModalState = $state({ open: false });
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
     const large_file_storage = convertFrontendToBackendSetting(s3ResourceSettings);
@@ -33,26 +40,48 @@ async function editWindmillLFSSettings() {
     sendUserToast(`Large file storage settings changed`);
     onSave?.();
 }
+let tableHeadNames = ['Name', 'Storage resource', '', ''];
+let tableHeadTooltips = {
+    'Storage resource': 'Which resource the workspace storage will point to. Note that all users of the workspace will be able to access the workspace storage regardless of the resource visibility.'
+};
+let tableRows = $derived([
+    [null, s3ResourceSettings],
+    ...(s3ResourceSettings.secondaryStorage ?? [])
+]);
+let secondaryStorageIsDirty = $derived(Object.fromEntries(s3ResourceSettings.secondaryStorage?.map((d) => {
+    const saved = s3ResourceSavedSettings.secondaryStorage?.find((saved) => saved[0] === d[0]);
+    return [d[0], !deepEqual(saved?.[1], d[1])];
+}) ?? []));
+let primaryStorageIsDirty = $derived.by(() => {
+    const fields = [
+        'resourcePath',
+        'resourceType',
+        'publicResource',
+        'advancedPermissions'
+    ];
+    return !deepEqual(pick(s3ResourceSavedSettings, fields), pick(s3ResourceSettings, fields));
+});
+function isDirty(name) {
+    return name === null ? primaryStorageIsDirty : secondaryStorageIsDirty[name];
+}
+function isPermissionsNonDefault(storage) {
+    const defaultPerms = defaultS3AdvancedPermissions(!!$enterpriseLicense);
+    return !deepEqual(storage.advancedPermissions, defaultPerms);
+}
+let hasUnsavedChanges = $derived.by(() => {
+    return !deepEqual(s3ResourceSettings, s3ResourceSavedSettings);
+});
 </script>
 
 <Portal name="workspace-settings">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={false} fromWorkspaceSettings={true} />
 </Portal>
 
-<div class="flex flex-col gap-4 my-8">
-	<div class="flex flex-col gap-1">
-		<div class="text-sm font-semibold text-emphasis"
-			>Workspace Object Storage (S3/Azure Blob/GCS)</div
-		>
-		<Description
-			link="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#workspace-object-storage"
-		>
-			Connect your Windmill workspace to your S3 bucket, Azure Blob storage, or Google Cloud Storage
-			to enable users to read and write from object storage without having to have access to the
-			credentials.
-		</Description>
-	</div>
-</div>
+<SettingsPageHeader
+	title="Workspace object storage (S3/Azure Blob/GCS)"
+	description="Connect your Windmill workspace to your S3 bucket, Azure Blob storage, or Google Cloud Storage to enable users to read and write from object storage without having to have access to the credentials."
+	link="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#workspace-object-storage"
+/>
 {#if !$enterpriseLicense}
 	<Alert type="info" title="S3 storage is limited to 20 files in Windmill CE">
 		Windmill S3 bucket browser will not work for buckets containing more than 20 files and uploads
@@ -70,246 +99,273 @@ async function editWindmillLFSSettings() {
 	</Alert>
 {/if}
 {#if s3ResourceSettings}
-	<div class="mt-5">
-		<div class="w-full">
-			<!-- this can be removed once parent moves to runes -->
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<Tabs bind:selected={s3ResourceSettings.resourceType}>
-				<Tab exact label="S3" value="s3" />
-				<Tab value="azure_blob" label="Azure Blob" />
-				<Tab exact value="s3_aws_oidc" label="AWS OIDC" />
-				<Tab value="azure_workload_identity" label="Azure Workload Identity" />
-				<Tab exact value="gcloud_storage" label="Google Cloud Storage" />
-			</Tabs>
-		</div>
-		<div class="w-full flex gap-1 mt-4 whitespace-nowrap">
-			<!-- this can be removed once parent moves to runes -->
-			<!-- svelte-ignore binding_property_non_reactive -->
-			<ResourcePicker
-				resourceType={s3ResourceSettings.resourceType}
-				bind:value={s3ResourceSettings.resourcePath}
-			/>
-			{@render permissionBtn(s3ResourceSettings)}
-			<Button
-				size="sm"
-				variant="accent"
-				disabled={emptyString(s3ResourceSettings.resourcePath)}
-				on:click={async () => {
-					if ($workspaceStore) {
-						s3FileViewer?.open?.(undefined)
-					}
-				}}>Browse content (save first)</Button
-			>
-		</div>
-	</div>
-
-	<div class="mt-6">
-		<div class="flex mt-2 flex-col gap-y-4 max-w-5xl">
-			{#each s3ResourceSettings.secondaryStorage ?? [] as _, idx}
-				<div class="flex gap-1 relative whitespace-nowrap">
-					<TextInput
-						class="max-w-[200px]"
-						inputProps={{ type: 'text', placeholder: 'Storage name' }}
-						bind:value={
-							() => s3ResourceSettings.secondaryStorage?.[idx]?.[0] || '',
-							(v) => {
-								if (s3ResourceSettings.secondaryStorage?.[idx]) {
-									s3ResourceSettings.secondaryStorage[idx][0] = v
-								}
-							}
-						}
-					/>
-					<Select
-						class="max-w-[125px]"
-						inputClass="h-full"
-						bind:value={
-							() => s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourceType || 's3',
-							(v) => {
-								if (s3ResourceSettings.secondaryStorage?.[idx]) {
-									s3ResourceSettings.secondaryStorage[idx][1].resourceType = v
-								}
-							}
-						}
-						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' }
-						]}
-					/>
-
-					<ResourcePicker
-						resourceType={s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourceType || 's3'}
-						bind:value={
-							() => s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourcePath || undefined,
-							(v) => {
-								if (s3ResourceSettings.secondaryStorage?.[idx]) {
-									s3ResourceSettings.secondaryStorage[idx][1].resourcePath = v
-								}
-							}
-						}
-					/>
-					{@render permissionBtn(s3ResourceSettings.secondaryStorage![idx][1])}
-					<Button
-						size="sm"
-						variant="accent"
-						disabled={emptyString(s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourcePath)}
-						on:click={async () => {
-							if ($workspaceStore) {
-								s3FileViewer?.open?.({
-									s3: '',
-									storage: s3ResourceSettings.secondaryStorage?.[idx]?.[0] || ''
-								})
-							}
-						}}>Browse content (save first)</Button
-					>
-					<CloseButton
-						class="my-auto"
-						small
-						on:close={() => {
-							if (s3ResourceSettings.secondaryStorage) {
-								s3ResourceSettings.secondaryStorage.splice(idx, 1)
-								s3ResourceSettings.secondaryStorage = [...s3ResourceSettings.secondaryStorage]
-							}
-						}}
-					/>
-				</div>
-			{/each}
-			<div class="flex gap-1">
-				<Button
-					size="xs"
-					variant="default"
-					on:click={() => {
-						if (s3ResourceSettings.secondaryStorage === undefined) {
-							s3ResourceSettings.secondaryStorage = []
-						}
-						s3ResourceSettings.secondaryStorage.push([
-							`storage_${s3ResourceSettings.secondaryStorage.length + 1}`,
-							{
-								resourcePath: '',
-								resourceType: 's3',
-								publicResource: false,
-								advancedPermissions: defaultS3AdvancedPermissions(!!$enterpriseLicense)
-							}
-						])
-						s3ResourceSettings.secondaryStorage = s3ResourceSettings.secondaryStorage
-					}}><Plus size={14} />Add secondary storage</Button
-				>
-				<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>
-			</div>
-		</div>
-	</div>
-	<div class="flex mt-5 mb-5 gap-1">
-		<Button
-			variant="accent"
-			size="xl"
-			on:click={() => {
-				editWindmillLFSSettings()
-				console.log('Saving S3 settings', s3ResourceSettings)
-			}}>Save storage settings</Button
-		>
-	</div>
-{/if}
-
-{#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
-	<Popover closeOnOtherPopoverOpen placement="left">
-		<svelte:fragment slot="trigger">
-			<Button variant="default" wrapperClasses="h-full" btnClasses="px-2.5" size="sm">
-				<Shield size={16} /> Permissions <ChevronDown size={14} />
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="flex flex-col gap-3 mx-4 pb-4 pt-5 w-[48rem]">
-				{#if !$enterpriseLicense}
-					<Alert
-						type={storage.advancedPermissions ? 'error' : 'info'}
-						title="Advanced permission rules are an Enterprise feature"
-					>
-						Consider upgrading to Windmill EE to use advanced permission rules to control access to
-						your object storage at a more granular level.</Alert
-					>
-				{/if}
-				<Toggle
-					bind:checked={
-						() => !!storage.advancedPermissions,
-						(v) => {
-							storage.advancedPermissions = v
-								? defaultS3AdvancedPermissions(!!$enterpriseLicense)
-								: undefined
-							if (v) storage.publicResource = false
-						}
-					}
-					options={{
-						right: 'Enable advanced permission rules',
-						rightTooltip: 'Control precisely which paths are allowed to your users.'
-					}}
-					disabled={!storage.advancedPermissions && !$enterpriseLicense}
-				/>
-				{#if storage.advancedPermissions}
-					{@render advancedPermissionsEditor(storage.advancedPermissions)}
-				{/if}
-				{#if !storage.advancedPermissions}
-					{#if storage.resourceType == 's3'}
-						<div class="flex flex-col mt-2 mb-1 gap-1">
-							<Toggle
-								disabled={emptyString(storage.resourcePath)}
-								bind:checked={storage.publicResource}
-								options={{
-									right:
-										'S3 resource details and content can be accessed by all users of this workspace',
-									rightTooltip:
-										'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
-								}}
+	<DataTable containerClass="storage-settings-table mt-4">
+		<Head>
+			<tr>
+				{#each tableHeadNames as name, i}
+					<Cell head first={i == 0} last={i == tableHeadNames.length - 1}>
+						{name}
+						{#if tableHeadTooltips[name]}
+							<Tooltip>{@html tableHeadTooltips[name]}</Tooltip>
+						{/if}
+					</Cell>
+				{/each}
+			</tr>
+		</Head>
+		<tbody class="divide-y bg-surface-tertiary">
+			{#each tableRows as tableRow, idx}
+				<Row>
+					<Cell first class="w-48 relative">
+						{#if tableRow[0] === null}
+							<TextInput inputProps={{ placeholder: 'Primary storage', disabled: true }} />
+						{:else}
+							<TextInput
+								bind:value={tableRow[0]}
+								inputProps={{ placeholder: 'Name' }}
+								class="secondary-storage-name-input"
 							/>
-							{#if storage.publicResource === true}
-								<div class="pt-2"></div>
+						{/if}
+					</Cell>
+					<Cell>
+						<div class="flex gap-2">
+							<div class="relative">
+								<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"
+								/>
+							</div>
+							<div class="flex flex-1">
+								<ResourcePicker
+									class="flex-1"
+									bind:value={tableRow[1].resourcePath}
+									resourceType={tableRow[1].resourceType}
+								/>
+							</div>
+						</div>
+					</Cell>
 
-								<Alert
-									type="warning"
-									title="(Legacy) S3 bucket content and resource details are shared"
+					<Cell class="w-12">
+						<div class="flex gap-2">
+							<Button
+								variant="default"
+								btnClasses="px-2.5 relative"
+								size="sm"
+								onClick={() =>
+									(advancedPermissionModalState = { open: true, storage: tableRow[1] })}
+							>
+								<Shield size={16} /> Permissions <ChevronDown size={14} />
+								{#if isPermissionsNonDefault(tableRow[1])}
+									<span class="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-accent"
+									></span>
+								{/if}
+							</Button>
+							{#if emptyString(tableRow[1].resourcePath) || isDirty(tableRow[0])}
+								<Popover
+									openOnHover
+									contentClasses="p-2 text-xs text-secondary"
+									class="cursor-not-allowed"
 								>
-									S3 resource public access is ON, which means that the entire content of the S3
-									bucket will be accessible to all the users of this workspace regardless of whether
-									they have access the resource or not. Similarly, certain Windmill SDK endpoints
-									can be used in scripts to access the resource details, including public and
-									private keys.
-								</Alert>
+									<svelte:fragment slot="trigger">
+										<ExploreAssetButton asset={{ kind: 's3object', path: '' }} disabled />
+									</svelte:fragment>
+									<svelte:fragment slot="content">
+										{#if emptyString(tableRow[1].resourcePath)}
+											Please select a storage resource
+										{:else if isDirty(tableRow[0])}
+											Please save your changes
+										{/if}
+									</svelte:fragment>
+								</Popover>
+							{:else}
+								<ExploreAssetButton
+									asset={{ kind: 's3object', path: (tableRow[0] ?? '') + '/' }}
+									s3FilePicker={s3FileViewer}
+								/>
 							{/if}
 						</div>
-					{:else}
-						<div class="flex flex-col mt-5 mb-1 gap-1 max-w-[40rem]">
-							<Toggle
-								disabled={emptyString(storage.resourcePath)}
-								bind:checked={storage.publicResource}
-								options={{
-									right: 'object storage content can be accessed by all users of this workspace',
-									rightTooltip:
-										'If set, all users of this workspace will have access the to entire content of the object storage.'
+					</Cell>
+					<Cell class="w-12">
+						{#if tableRow[0] !== null}
+							<CloseButton
+								small
+								on:close={() => {
+									if (s3ResourceSettings.secondaryStorage) {
+										s3ResourceSettings.secondaryStorage.splice(idx - 1, 1)
+										s3ResourceSettings.secondaryStorage = [...s3ResourceSettings.secondaryStorage]
+									}
 								}}
 							/>
-							{#if storage.publicResource === true}
-								<div class="pt-2"></div>
-								<Alert
-									type="warning"
-									title="(Legacy) Object storage content and resource details are shared"
-								>
-									object public access is ON, which means that the entire content of the object
-									store will be accessible to all the users of this workspace regardless of whether
-									they have access the resource or not.
-								</Alert>
+						{/if}
+					</Cell>
+				</Row>
+			{/each}
+			<Row class="!border-0">
+				<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
+					{#snippet addSecondaryStorageBtn()}
+						<Button
+							size="sm"
+							btnClasses="max-w-fit"
+							variant="default"
+							disabled={!s3ResourceSettings.resourcePath}
+							on:click={() => {
+								if (s3ResourceSettings.secondaryStorage === undefined) {
+									s3ResourceSettings.secondaryStorage = []
+								}
+								s3ResourceSettings.secondaryStorage.push([
+									`storage_${s3ResourceSettings.secondaryStorage.length + 1}`,
+									{
+										resourcePath: '',
+										resourceType: 's3',
+										publicResource: false,
+										advancedPermissions: defaultS3AdvancedPermissions(!!$enterpriseLicense)
+									}
+								])
+								s3ResourceSettings.secondaryStorage = s3ResourceSettings.secondaryStorage
+							}}
+						>
+							<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}
-						</div>
+						</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}
+							{@render addSecondaryStorageBtn()}
+						{/if}
+					</div>
+				</Cell>
+			</Row>
+		</tbody>
+	</DataTable>
+
+	<SettingsFooter
+		class="mt-5 mb-5"
+		inline
+		{hasUnsavedChanges}
+		onSave={editWindmillLFSSettings}
+		onDiscard={() => onDiscard?.()}
+		saveLabel="Save storage settings"
+	/>
+{/if}
+
+<Modal2
+	target="#content"
+	title={'Permission settings'}
+	contentClasses="flex flex-col gap-3"
+	fixedWidth="md"
+	fixedHeight="lg"
+	isOpen={advancedPermissionModalState.open}
+>
+	{#if advancedPermissionModalState.open}
+		{@const storage = advancedPermissionModalState.storage}
+		{#if !$enterpriseLicense}
+			<Alert
+				type={storage.advancedPermissions ? 'error' : 'info'}
+				title="Advanced permission rules are an Enterprise feature"
+			>
+				Consider upgrading to Windmill EE to use advanced permission rules to control access to your
+				object storage at a more granular level.</Alert
+			>
+		{/if}
+		<Toggle
+			bind:checked={
+				() => !!storage.advancedPermissions,
+				(v) => {
+					storage.advancedPermissions = v
+						? defaultS3AdvancedPermissions(!!$enterpriseLicense)
+						: undefined
+					if (v) storage.publicResource = false
+				}
+			}
+			options={{
+				right: 'Enable advanced permission rules',
+				rightTooltip: 'Control precisely which paths are allowed to your users.'
+			}}
+			disabled={!storage.advancedPermissions && !$enterpriseLicense}
+		/>
+		{#if storage.advancedPermissions}
+			{@render advancedPermissionsEditor(storage.advancedPermissions)}
+		{/if}
+		{#if !storage.advancedPermissions}
+			{#if storage.resourceType == 's3'}
+				<div class="flex flex-col mt-2 mb-1 gap-1">
+					<Toggle
+						disabled={emptyString(storage.resourcePath)}
+						bind:checked={storage.publicResource}
+						options={{
+							right:
+								'S3 resource details and content can be accessed by all users of this workspace',
+							rightTooltip:
+								'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
+						}}
+					/>
+					{#if storage.publicResource === true}
+						<div class="pt-2"></div>
+
+						<Alert
+							type="warning"
+							title="(Legacy) S3 bucket content and resource details are shared"
+						>
+							S3 resource public access is ON, which means that the entire content of the S3 bucket
+							will be accessible to all the users of this workspace regardless of whether they have
+							access the resource or not. Similarly, certain Windmill SDK endpoints can be used in
+							scripts to access the resource details, including public and private keys.
+						</Alert>
 					{/if}
-				{/if}
-			</div>
-		</svelte:fragment>
-	</Popover>
-{/snippet}
+				</div>
+			{:else}
+				<div class="flex flex-col mt-5 mb-1 gap-1 max-w-[40rem]">
+					<Toggle
+						disabled={emptyString(storage.resourcePath)}
+						bind:checked={storage.publicResource}
+						options={{
+							right: 'object storage content can be accessed by all users of this workspace',
+							rightTooltip:
+								'If set, all users of this workspace will have access the to entire content of the object storage.'
+						}}
+					/>
+					{#if storage.publicResource === true}
+						<div class="pt-2"></div>
+						<Alert
+							type="warning"
+							title="(Legacy) Object storage content and resource details are shared"
+						>
+							object public access is ON, which means that the entire content of the object store
+							will be accessible to all the users of this workspace regardless of whether they have
+							access the resource or not.
+						</Alert>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	{/if}
+</Modal2>
 
 {#snippet advancedPermissionsEditor(rules: S3ResourceSettingsItem['advancedPermissions'])}
 	<Alert title="Standard Unix-style glob syntax is supported">
@@ -323,20 +379,22 @@ async function editWindmillLFSSettings() {
 		<br />
 		Note that changes may take up to 1 minute to propagate due to cache invalidation
 	</Alert>
-	{#each rules ?? [] as item, idx}
-		<div class="flex gap-2">
-			<ClearableInput bind:value={item.pattern} placeholder="Pattern" />
-			<MultiSelect
-				items={[{ value: 'read' }, { value: 'write' }, { value: 'delete' }, { value: 'list' }]}
-				bind:value={item.allow}
-				disablePortal
-				class="w-[20rem]"
-				placeholder="Deny all access"
-				hideMainClearBtn
-			/>
-			<CloseButton onClick={() => rules?.splice(idx, 1)} />
-		</div>
-	{/each}
+
+	<div class="flex-1 overflow-y-auto gap-3 flex flex-col">
+		{#each rules ?? [] as item, idx}
+			<div class="flex gap-2">
+				<ClearableInput bind:value={item.pattern} placeholder="Pattern" />
+				<MultiSelect
+					items={[{ value: 'read' }, { value: 'write' }, { value: 'delete' }, { value: 'list' }]}
+					bind:value={item.allow}
+					class="w-[20rem]"
+					placeholder="Deny all access"
+					hideMainClearBtn
+				/>
+				<CloseButton onClick={() => rules?.splice(idx, 1)} />
+			</div>
+		{/each}
+	</div>
 	<Button size="xs" variant="default" on:click={() => rules?.push({ pattern: '', allow: [] })}>
 		<Plus size={14} />
 		Add permission rule

package/package/components/workspaceSettings/StorageSettings.svelte.d.ts

@@ -1,7 +1,9 @@
 import { type S3ResourceSettings } from '../../workspace_settings';
 type $$ComponentProps = {
     s3ResourceSettings: S3ResourceSettings;
+    s3ResourceSavedSettings: S3ResourceSettings;
     onSave?: () => void;
+    onDiscard?: () => void;
 };
 declare const StorageSettings: import("svelte").Component<$$ComponentProps, {}, "s3ResourceSettings">;
 type StorageSettings = ReturnType<typeof StorageSettings>;