windmill-components 1.623.2 → 1.655.0

package/package/components/workspaceSettings/StorageSettings.svelte

@@ -3,7 +3,8 @@ 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 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';
@@ -24,7 +25,7 @@ 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 } = $props();
+let { s3ResourceSettings = $bindable(), s3ResourceSavedSettings, onSave = undefined, onDiscard = undefined } = $props();
 let advancedPermissionModalState = $state({ open: false });
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
@@ -67,26 +68,32 @@ function isPermissionsNonDefault(storage) {
     const defaultPerms = defaultS3AdvancedPermissions(!!$enterpriseLicense);
     return !deepEqual(storage.advancedPermissions, defaultPerms);
 }
+let hasUnsavedChanges = $derived.by(() => {
+    return !deepEqual(s3ResourceSettings, s3ResourceSavedSettings);
+});
+let volumeStorageItems = $derived.by(() => {
+    const items = [{ value: '', label: 'Disabled' }];
+    if (!emptyString(s3ResourceSettings.resourcePath)) {
+        items.push({ value: 'primary', label: 'Primary storage' });
+    }
+    for (const [name, s] of s3ResourceSettings.secondaryStorage ?? []) {
+        if (!emptyString(s.resourcePath)) {
+            items.push({ value: name, label: name });
+        }
+    }
+    return items;
+});
 </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
@@ -117,7 +124,7 @@ function isPermissionsNonDefault(storage) {
 				{/each}
 			</tr>
 		</Head>
-		<tbody class="divide-y bg-surface">
+		<tbody class="divide-y bg-surface-tertiary">
 			{#each tableRows as tableRow, idx}
 				<Row>
 					<Cell first class="w-48 relative">
@@ -134,6 +141,15 @@ function isPermissionsNonDefault(storage) {
 					<Cell>
 						<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' },
@@ -146,13 +162,22 @@ function isPermissionsNonDefault(storage) {
 									id="storage-resource-type-select"
 									class="w-40"
 								/>
+							{/if}
 							</div>
 							<div class="flex flex-1">
-								<ResourcePicker
-									class="flex-1"
-									bind:value={tableRow[1].resourcePath}
-									resourceType={tableRow[1].resourceType}
-								/>
+								{#if tableRow[1].resourceType === 'filesystem'}
+									<TextInput
+										class="flex-1"
+										value={tableRow[1].resourcePath ?? ''}
+										inputProps={{ disabled: true, placeholder: 'Filesystem path' }}
+									/>
+								{:else}
+									<ResourcePicker
+										class="flex-1"
+										bind:value={tableRow[1].resourcePath}
+										resourceType={tableRow[1].resourceType}
+									/>
+								{/if}
 							</div>
 						</div>
 					</Cell>
@@ -175,19 +200,23 @@ function isPermissionsNonDefault(storage) {
 							{#if emptyString(tableRow[1].resourcePath) || isDirty(tableRow[0])}
 								<Popover
 									openOnHover
-									contentClasses="p-2 text-sm text-secondary italic"
+									contentClasses="p-2 text-xs text-secondary"
 									class="cursor-not-allowed"
 								>
-									<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>
+									{#snippet trigger()}
+																	
+											<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}
 								</Popover>
 							{:else}
 								<ExploreAssetButton
@@ -214,11 +243,12 @@ function isPermissionsNonDefault(storage) {
 			{/each}
 			<Row class="!border-0">
 				<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
-					<div class="flex justify-center">
+					{#snippet addSecondaryStorageBtn()}
 						<Button
 							size="sm"
 							btnClasses="max-w-fit"
 							variant="default"
+							disabled={!s3ResourceSettings.resourcePath}
 							on:click={() => {
 								if (s3ResourceSettings.secondaryStorage === undefined) {
 									s3ResourceSettings.secondaryStorage = []
@@ -236,28 +266,65 @@ function isPermissionsNonDefault(storage) {
 							}}
 						>
 							<Plus /> Add secondary storage
-							<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 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}
 						</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>
 
-	<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 class="mt-6 mb-2">
+		<SettingsPageHeader
+			title="Volume storage"
+			description="Select which storage volumes should use. If disabled, scripts with volumes will fail with an error."
+			link="https://www.windmill.dev/docs/core_concepts/persistent_storage/volumes"
+		/>
+		<div class="max-w-sm mt-2">
+			<Select
+				items={volumeStorageItems}
+				bind:value={
+					() => s3ResourceSettings.volumeStorage ?? '',
+					(v) => {
+						s3ResourceSettings.volumeStorage = v || undefined
+					}
+				}
+			/>
+		</div>
 	</div>
+
+	<SettingsFooter
+		class="mt-5 mb-5"
+		inline
+		{hasUnsavedChanges}
+		onSave={editWindmillLFSSettings}
+		onDiscard={() => onDiscard?.()}
+		saveLabel="Save storage settings"
+	/>
 {/if}
 
 <Modal2

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

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

package/package/components/workspaceSettings/WorkspaceDependenciesSettings.svelte

@@ -16,7 +16,7 @@ import { WorkspaceDependenciesService, WorkspaceService } from '../../gen';
 import { untrack } from 'svelte';
 import { sendUserToast } from '../../toast';
 import TimeAgo from '../TimeAgo.svelte';
-import Description from '../Description.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
 let filter = $state('');
 let workspaceDependencies = $state();
 let filteredItems = $state();
@@ -184,7 +184,10 @@ function getLanguageForHighlighting(language) {
 }
 </script>
 
-<WorkspaceDependenciesEditor bind:this={workspaceDependenciesEditor} on:create={loadWorkspaceDependencies} />
+<WorkspaceDependenciesEditor
+	bind:this={workspaceDependenciesEditor}
+	on:create={loadWorkspaceDependencies}
+/>
 
 <SearchItems
 	{filter}
@@ -193,20 +196,22 @@ function getLanguageForHighlighting(language) {
 	f={(x) => (x.name || 'Default') + ' ' + (x.language || '') + ' ' + (x.content || '')}
 />
 
-<div class="flex flex-col gap-4 my-8">
-	<div class="flex flex-col gap-1">
-		<div class="text-sm font-semibold text-emphasis">Enforced Dependencies</div>
-		<Description link="https://www.windmill.dev/docs/">
-			Enforced Dependencies define dependency specifications for scripts by language. Unnamed dependencies serve as workspace defaults, while named dependencies can be referenced by scripts using #raw_reqs annotations.
-		</Description>
-	</div>
-
-	<div class="flex flex-row justify-end">
-		<Button size="md" startIcon={{ icon: Plus }} on:click={createNewWorkspaceDependencies}>
+<SettingsPageHeader
+	title="Enforced Dependencies"
+	description="Enforced Dependencies define dependency specifications for scripts by language. Unnamed dependencies serve as workspace defaults, while named dependencies can be referenced by scripts using #raw_reqs annotations."
+	link="https://www.windmill.dev/docs/core_concepts/workspace_dependencies"
+>
+	{#snippet actions()}
+		<Button
+			unifiedSize="md"
+			variant="accent"
+			startIcon={{ icon: Plus }}
+			onClick={createNewWorkspaceDependencies}
+		>
 			New&nbsp;enforced&nbsp;dependencies
 		</Button>
-	</div>
-</div>
+	{/snippet}
+</SettingsPageHeader>
 
 <div class="pt-2">
 	<div class="relative text-tertiary">
@@ -268,11 +273,14 @@ function getLanguageForHighlighting(language) {
 										{#if deps.marked}
 											{@html deps.marked}
 										{:else}
-											{workspaceDependenciesEditor?.getDisplayName(deps) || (deps.name || `Default (${deps.language})`)}
+											{workspaceDependenciesEditor?.getDisplayName(deps) ||
+												deps.name ||
+												`Default (${deps.language})`}
 										{/if}
 									</button>
 									<span class="text-xs text-tertiary font-mono">
-										{workspaceDependenciesEditor?.getFullFilename(deps.language, deps.name ?? null)} • {deps.language}
+										{workspaceDependenciesEditor?.getFullFilename(deps.language, deps.name ?? null)}
+										• {deps.language}
 									</span>
 								</div>
 							</div>
@@ -291,11 +299,12 @@ function getLanguageForHighlighting(language) {
 							</span>
 						</Cell>
 						<Cell>
-							<span class="text-xs px-1.5 py-0.5 rounded bg-opacity-50 font-medium"
-								class:bg-blue-100="{deps.name === null}"
-								class:text-blue-700="{deps.name === null}"
-								class:bg-gray-100="{deps.name !== null}"
-								class:text-gray-600="{deps.name !== null}"
+							<span
+								class="text-xs px-1.5 py-0.5 rounded bg-opacity-50 font-medium"
+								class:bg-blue-100={deps.name === null}
+								class:text-blue-700={deps.name === null}
+								class:bg-gray-100={deps.name !== null}
+								class:text-gray-600={deps.name !== null}
 							>
 								{deps.name === null ? 'Default' : 'Named'}
 							</span>
@@ -307,23 +316,53 @@ function getLanguageForHighlighting(language) {
 						</Cell>
 						<Cell last>
 							<div class="flex gap-1 flex-wrap">
-								<Button size="xs" variant="border" color="light" startIcon={{ icon: Eye }} on:click={() => viewWorkspaceDependencies(deps)}>
+								<Button
+									size="xs"
+									variant="border"
+									color="light"
+									startIcon={{ icon: Eye }}
+									on:click={() => viewWorkspaceDependencies(deps)}
+								>
 									View
 								</Button>
-								<Button size="xs" variant="border" color="light" startIcon={{ icon: Edit }} on:click={() => editWorkspaceDependencies(deps)}>
+								<Button
+									size="xs"
+									variant="border"
+									color="light"
+									startIcon={{ icon: Edit }}
+									on:click={() => editWorkspaceDependencies(deps)}
+								>
 									Edit
 								</Button>
 								<!-- Placeholder buttons -->
-								<Button size="xs" variant="border" color="gray" on:click={() => archiveWorkspaceDependencies(deps)} title="Archive">
+								<Button
+									size="xs"
+									variant="border"
+									color="gray"
+									on:click={() => archiveWorkspaceDependencies(deps)}
+									title="Archive"
+								>
 									Archive
 								</Button>
-								<Button size="xs" variant="border" color="red" on:click={() => deleteWorkspaceDependencies(deps)} title="Delete">
+								<Button
+									size="xs"
+									variant="border"
+									color="red"
+									on:click={() => deleteWorkspaceDependencies(deps)}
+									title="Delete"
+								>
 									Delete
 								</Button>
-								<Button size="xs" variant="border" color="gray" on:click={() => viewReferencedFrom(deps)} title="Referenced From">
+								<Button
+									size="xs"
+									variant="border"
+									color="gray"
+									on:click={() => viewReferencedFrom(deps)}
+									title="Referenced From"
+								>
 									Refs
 								</Button>
-						</div>
+							</div>
 						</Cell>
 					</Row>
 				{/each}