npm - windmill-components - Versions diffs - 1.613.5 → 1.623.1 - Mend

windmill-components 1.613.5 → 1.623.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (429) hide show

package/package/components/workspaceSettings/StorageSettings.svelte CHANGED Viewed

@@ -1,8 +1,10 @@
 <script lang="ts">import { enterpriseLicense, workspaceStore } from '../../stores';
-import { emptyString, pick, sendUserToast } from '../../utils';
+import { emptyString, 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 ResourcePicker from '../ResourcePicker.svelte';
 import Toggle from '../Toggle.svelte';
@@ -17,15 +19,7 @@ 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';
-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 } = $props();
-let advancedPermissionModalState = $state({ open: false });
+let { s3ResourceSettings = $bindable(), onSave = undefined } = $props();
 let s3FileViewer = $state();
 async function editWindmillLFSSettings() {
     const large_file_storage = convertFrontendToBackendSetting(s3ResourceSettings);
@@ -39,34 +33,6 @@ 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);
-}
 </script>
 <Portal name="workspace-settings">
@@ -104,145 +70,140 @@ function isPermissionsNonDefault(storage) {
 	</Alert>
 {/if}
 {#if s3ResourceSettings}
-	<DataTable containerClass="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">
-			{#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' }} />
-						{/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}
-									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>
+	<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>
-					<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-sm text-secondary italic"
-									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>
-								</Popover>
-							{:else}
-								<ExploreAssetButton
-									asset={{ kind: 's3object', path: (tableRow[0] ?? '') + '/' }}
-									s3FilePicker={s3FileViewer}
-								/>
-							{/if}
-						</div>
-					</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}
-					</Cell>
-				</Row>
-			{/each}
-			<Row class="!border-0">
-				<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
-					<div class="flex justify-center">
-						<Button
-							size="sm"
-							btnClasses="max-w-fit"
-							variant="default"
-							on:click={() => {
-								if (s3ResourceSettings.secondaryStorage === undefined) {
-									s3ResourceSettings.secondaryStorage = []
+	<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
 								}
-								s3ResourceSettings.secondaryStorage.push([
-									`storage_${s3ResourceSettings.secondaryStorage.length + 1}`,
-									{
-										resourcePath: '',
-										resourceType: 's3',
-										publicResource: false,
-										advancedPermissions: defaultS3AdvancedPermissions(!!$enterpriseLicense)
-									}
-								])
-								s3ResourceSettings.secondaryStorage = s3ResourceSettings.secondaryStorage
-							}}
-						>
-							<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>
-						</Button>
-					</div>
-				</Cell>
-			</Row>
-		</tbody>
-	</DataTable>
+							}
+						}
+						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"
@@ -255,98 +216,100 @@ function isPermissionsNonDefault(storage) {
 	</div>
 {/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>
+{#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.'
+								}}
+							/>
+							{#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}
-				</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>
+								<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}
-				</div>
-			{/if}
-		{/if}
-	{/if}
-</Modal2>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Popover>
+{/snippet}
 {#snippet advancedPermissionsEditor(rules: S3ResourceSettingsItem['advancedPermissions'])}
 	<Alert title="Standard Unix-style glob syntax is supported">
@@ -360,22 +323,20 @@ function isPermissionsNonDefault(storage) {
 		<br />
 		Note that changes may take up to 1 minute to propagate due to cache invalidation
 	</Alert>
-	<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>
+	{#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="default" on:click={() => rules?.push({ pattern: '', allow: [] })}>
 		<Plus size={14} />
 		Add permission rule

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

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

package/package/consts.js CHANGED Viewed

@@ -82,10 +82,7 @@ export const MYSQL_TYPES = [
     'enum',
     'set',
     'int',
-    'tinyint',
-    'smallint',
-    'mediumint',
-    'bigint',
+    'uint',
     'integer',
     'bool',
     'bit',

package/package/gen/core/OpenAPI.js CHANGED Viewed

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