windmill-components 1.542.5 → 1.555.0

package/package/components/workspaceSettings/StorageSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { enterpriseLicense, workspaceStore } from '../../stores';
 import { emptyString, sendUserToast } from '../../utils';
-import { ChevronDown, Plus, Shield, X } from 'lucide-svelte';
+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';
@@ -9,12 +9,16 @@ import Description from '../Description.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
 import Tooltip from '../Tooltip.svelte';
-import { convertFrontendToBackendSetting } from '../../workspace_settings';
+import { convertFrontendToBackendSetting, defaultS3AdvancedPermissions } from '../../workspace_settings';
 import { WorkspaceService } from '../../gen';
 import S3FilePicker from '../S3FilePicker.svelte';
 import Portal from '../Portal.svelte';
-import { fade } from 'svelte/transition';
 import Popover from '../meltComponents/Popover.svelte';
+import ClearableInput from '../common/clearableInput/ClearableInput.svelte';
+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() } = $props();
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
@@ -102,10 +106,10 @@ async function editWindmillLFSSettings() {
 	<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 items-center">
-					<input
+				<div class="flex gap-1 relative">
+					<TextInput
 						class="max-w-[200px]"
-						type="text"
+						inputProps={{ type: 'text', placeholder: 'Storage name' }}
 						bind:value={
 							() => s3ResourceSettings.secondaryStorage?.[idx]?.[0] || '',
 							(v) => {
@@ -114,10 +118,10 @@ async function editWindmillLFSSettings() {
 								}
 							}
 						}
-						placeholder="Storage name"
 					/>
-					<select
+					<Select
 						class="max-w-[125px]"
+						inputClass="h-full"
 						bind:value={
 							() => s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourceType || 's3',
 							(v) => {
@@ -126,19 +130,19 @@ async function editWindmillLFSSettings() {
 								}
 							}
 						}
-					>
-						<option value="s3">S3</option>
-						<option value="azure_blob">Azure Blob</option>
-						<option value="s3_aws_oidc">AWS OIDC</option>
-						<option value="azure_workload_identity">Azure Workload Identity</option>
-						<option value="gcloud_storage">Google Cloud Storage</option>
-					</select>
-					<!-- this can be removed once parent moves to runes -->
-					<!-- svelte-ignore binding_property_non_reactive -->
+						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 || '',
+							() => s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourcePath || undefined,
 							(v) => {
 								if (s3ResourceSettings.secondaryStorage?.[idx]) {
 									s3ResourceSettings.secondaryStorage[idx][1].resourcePath = v
@@ -161,19 +165,16 @@ async function editWindmillLFSSettings() {
 							}
 						}}>Browse content (save first)</Button
 					>
-					<button
-						transition:fade|local={{ duration: 100 }}
-						class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
-						aria-label="Clear"
-						onclick={() => {
+					<CloseButton
+						class="my-auto"
+						small
+						on:close={() => {
 							if (s3ResourceSettings.secondaryStorage) {
 								s3ResourceSettings.secondaryStorage.splice(idx, 1)
 								s3ResourceSettings.secondaryStorage = [...s3ResourceSettings.secondaryStorage]
 							}
 						}}
-					>
-						<X size={14} />
-					</button>
+					/>
 				</div>
 			{/each}
 			<div class="flex gap-1">
@@ -186,7 +187,12 @@ async function editWindmillLFSSettings() {
 						}
 						s3ResourceSettings.secondaryStorage.push([
 							`storage_${s3ResourceSettings.secondaryStorage.length + 1}`,
-							{ resourcePath: '', resourceType: 's3', publicResource: false }
+							{
+								resourcePath: '',
+								resourceType: 's3',
+								publicResource: false,
+								advancedPermissions: defaultS3AdvancedPermissions(!!$enterpriseLicense)
+							}
 						])
 						s3ResourceSettings.secondaryStorage = s3ResourceSettings.secondaryStorage
 					}}><Plus size={14} />Add secondary storage</Button
@@ -210,64 +216,128 @@ async function editWindmillLFSSettings() {
 {/if}
 
 {#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
-	<Popover closeOnOtherPopoverOpen>
+	<Popover closeOnOtherPopoverOpen placement="left">
 		<svelte:fragment slot="trigger">
-			<Button variant="border" btnClasses="px-2.5" color="dark" size="sm">
+			<Button variant="border" wrapperClasses="h-full" btnClasses="px-2.5" color="dark" 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 w-[40rem]">
-				{#if storage.resourceType == 's3'}
-					<div class="flex flex-col mt-5 mb-1 gap-1">
-						<!-- this can be removed once parent moves to runes -->
-						<!-- svelte-ignore binding_property_non_reactive -->
-						<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>
+			<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.'
+								}}
+							/>
+							{#if storage.publicResource === true}
+								<div class="pt-2"></div>
 
-							<Alert type="warning" title="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}
-					</div>
-				{:else}
-					<div class="flex flex-col mt-5 mb-1 gap-1">
-						<!-- this can be removed once parent moves to runes -->
-						<!-- svelte-ignore binding_property_non_reactive -->
-						<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="object content">
-								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>
+								<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}
+						</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}
 			</div>
 		</svelte:fragment>
 	</Popover>
 {/snippet}
+
+{#snippet advancedPermissionsEditor(rules: S3ResourceSettingsItem['advancedPermissions'])}
+	<Alert title="Standard Unix-style glob syntax is supported">
+		The following will be interpolated :
+		<ul class="list-disc pl-6">
+			<li><code>{'{username}'}</code> : Nickname of the user doing the request</li>
+			<li><code>{'{group}'}</code> : Any group that the user belongs to</li>
+			<li><code>{'{folder_read}'}</code> : Any folder that the user has read access to</li>
+			<li><code>{'{folder_write}'}</code> : Any folder that the user has write access to</li>
+		</ul>
+		<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}
+	<Button size="xs" variant="border" on:click={() => rules?.push({ pattern: '', allow: [] })}>
+		<Plus size={14} />
+		Add permission rule
+	</Button>
+{/snippet}

package/package/editorUtils.d.ts

@@ -7,7 +7,7 @@ export declare function editorConfig(code: string, lang: string, automaticLayout
     fixedOverflowWidgets: boolean;
     lineDecorationsWidth: number;
     lineNumbersMinChars: number;
-    lineNumbers: "on" | "relative";
+    lineNumbers: "relative" | "on";
     scrollbar: {
         alwaysConsumeMouseWheel: boolean;
     };

package/package/gen/core/OpenAPI.js

@@ -21,7 +21,7 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.542.0',
+    VERSION: '1.554.1',
     WITH_CREDENTIALS: false,
     interceptors: {
         request: new Interceptors(),