windmill-components 1.433.0 → 1.444.0

package/package/components/InstanceSettings.svelte.d.ts

@@ -6,8 +6,6 @@ declare const __propDef: {
         hideSave?: boolean | undefined;
         closeDrawer?: (() => void) | undefined;
         saveSettings?: (() => Promise<void>) | undefined;
-        renewLicenseKey?: (() => Promise<void>) | undefined;
-        openCustomerPortal?: (() => Promise<void>) | undefined;
     };
     events: {
         saved: CustomEvent<any>;
@@ -21,7 +19,5 @@ export type InstanceSettingsEvents = typeof __propDef.events;
 export type InstanceSettingsSlots = typeof __propDef.slots;
 export default class InstanceSettings extends SvelteComponent<InstanceSettingsProps, InstanceSettingsEvents, InstanceSettingsSlots> {
     get saveSettings(): () => Promise<void>;
-    get renewLicenseKey(): () => Promise<void>;
-    get openCustomerPortal(): () => Promise<void>;
 }
 export {};

package/package/components/Label.svelte

@@ -1,13 +1,23 @@
-<script>export let label = undefined;
+<script>import { twMerge } from 'tailwind-merge';
+import Required from './Required.svelte';
+export let label = undefined;
 export let primary = false;
+export let disabled = false;
+export let headless = false;
+export let required = false;
 </script>
 
-<div class={$$props.class}>
+<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
-		<div class="flex flex-row items-center gap-1">
-			<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-			<slot name="header" />
-		</div>
+		{#if !headless}
+			<div class="flex flex-row items-center gap-2">
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
+				{#if required}
+					<Required required={true} />
+				{/if}
+				<slot name="header" />
+			</div>
+		{/if}
 		<slot name="error" />
 		<slot name="action" />
 	</div>

package/package/components/Label.svelte.d.ts

@@ -4,6 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         label?: string | undefined;
         primary?: boolean | undefined;
+        disabled?: boolean | undefined;
+        headless?: boolean | undefined;
+        required?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Login.svelte

@@ -133,13 +133,21 @@ async function redirectUser() {
     }
 }
 async function loadLogins() {
-    const allLogins = await OauthService.listOauthLogins();
-    logins = allLogins.oauth.map((login) => ({
-        type: login.type,
-        displayName: login.display_name || login.type
-    }));
-    saml = allLogins.saml;
-    showPassword = (logins.length == 0 && !saml) || (email != undefined && email.length > 0);
+    try {
+        const allLogins = await OauthService.listOauthLogins();
+        logins = allLogins.oauth.map((login) => ({
+            type: login.type,
+            displayName: login.display_name || login.type
+        }));
+        saml = allLogins.saml;
+        showPassword = (logins.length == 0 && !saml) || (email != undefined && email.length > 0);
+    }
+    catch (e) {
+        logins = [];
+        saml = undefined;
+        showPassword = true;
+        console.error('Could not load logins', e);
+    }
 }
 loadLogins();
 function handleKeyUp(event) {
@@ -342,11 +350,11 @@ $: error && sendUserToast(error, true);
 				<p class="text-2xs text-tertiary italic mt-10 text-center">
 					By logging in, you agree to our
 					<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
-						Terms of Service
+						Terms of service
 					</a>
 					and
 					<a href="https://windmill.dev/privacy_policy" target="_blank" rel="noreferrer">
-						Privacy Policy
+						Privacy policy
 					</a>
 				</p>
 			{/if}

package/package/components/OAuthSetting.svelte

@@ -44,9 +44,10 @@ function changeTenantId(tenant) {
 }
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="flex flex-col">
 	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<label class="text-sm flex gap-4 items-center font-medium text-primary"
+	<label
+		class="text-sm flex gap-4 items-center font-medium text-primary {enabled ? 'rounded py-2' : ''}"
 		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
@@ -59,7 +60,7 @@ function changeTenantId(tenant) {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-2 rounded border">
+		<div class="p-2 rounded border mb-4">
 			{#if name != 'slack'}
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Custom Name</span>

package/package/components/OauthExtraParams.svelte

@@ -28,7 +28,7 @@ function sync() {
 <div class="flex items-center mt-1">
 	<Button
 		variant="border"
-		color="blue"
+		color="light"
 		hover="yo"
 		size="sm"
 		endIcon={{ icon: Plus }}

package/package/components/OauthScopes.svelte

@@ -9,7 +9,7 @@ export let scopes = [];
 			<input type="text" bind:value={v} />
 			<Button
 				variant="border"
-				color="red"
+				color="light"
 				size="xs"
 				btnClasses="mx-6"
 				on:click={() => {
@@ -25,7 +25,7 @@ export let scopes = [];
 <div class="flex items-center mt-1">
 	<Button
 		variant="border"
-		color="blue"
+		color="light"
 		hover="yo"
 		size="sm"
 		endIcon={{ icon: Plus }}

package/package/components/ObjectStoreConfigSettings.svelte

@@ -4,6 +4,7 @@ import { Button, Tab, Tabs } from './common';
 import { SettingService } from '../gen';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
+import { enterpriseLicense } from '../stores';
 export let bucket_config = undefined;
 $: bucket_config?.type == 'S3' &&
     bucket_config.allow_http == undefined &&
@@ -28,9 +29,10 @@ async function testConnection() {
 }
 </script>
 
-<div>
+<div class="my-0.5">
 	<Toggle
-		options={{ right: 'Enable' }}
+		disabled={!$enterpriseLicense}
+		options={{ right: bucket_config ? '' : 'set object store' }}
 		checked={Boolean(bucket_config)}
 		on:change={(e) => {
 			if (e.detail) {
@@ -49,134 +51,145 @@ async function testConnection() {
 	/>
 </div>
 {#if bucket_config}
-	<div class="flex gap-2 py-1">
-		<Button
-			spacingSize="sm"
-			size="xs"
-			btnClasses="h-8"
-			color="light"
-			variant="border"
-			on:click={testConnection}
-		>
-			{#if loading}
-				<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
-			{:else}
-				<Database class="mr-2 !h-4 !w-4" />
-			{/if}
-			Test from a server
-		</Button>
-		<TestConnection
-			args={bucket_config}
-			resourceType="s3_bucket"
-			workspaceOverride="admins"
-			buttonTextOverride="Test from a worker"
-		/>
-	</div>
-	<Tabs
-		bind:selected={bucket_config.type}
-		on:selected={(e) => {
-			if (e.detail === 'S3') {
-				bucket_config = {
-					type: 'S3',
-					bucket: '',
-					region: '',
-					access_key: '',
-					secret_key: '',
-					endpoint: ''
+	<div class="p-2">
+		<div class="flex gap-2 py-1">
+			<Button
+				spacingSize="sm"
+				size="xs"
+				btnClasses="h-8"
+				color="light"
+				variant="border"
+				on:click={testConnection}
+			>
+				{#if loading}
+					<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
+				{:else}
+					<Database class="mr-2 !h-4 !w-4" />
+				{/if}
+				Test from a server
+			</Button>
+			<TestConnection
+				args={bucket_config}
+				resourceType="s3_bucket"
+				workspaceOverride="admins"
+				buttonTextOverride="Test from a worker"
+			/>
+		</div>
+		<Tabs
+			bind:selected={bucket_config.type}
+			on:selected={(e) => {
+				if (e.detail === 'S3') {
+					bucket_config = {
+						type: 'S3',
+						bucket: '',
+						region: '',
+						access_key: '',
+						secret_key: '',
+						endpoint: ''
+					}
+				} else if (e.detail === 'Azure') {
+					bucket_config = {
+						type: 'Azure',
+						accountName: '',
+						containerName: '',
+						useSSL: false,
+						tenantId: '',
+						clientId: '',
+						accessKey: ''
+					}
 				}
-			} else if (e.detail === 'Azure') {
-				bucket_config = {
-					type: 'Azure',
-					accountName: '',
-					containerName: '',
-					useSSL: false,
-					tenantId: '',
-					clientId: '',
-					accessKey: ''
-				}
-			}
-		}}
-	>
-		<Tab size="sm" value="S3">S3</Tab>
-		<Tab size="sm" value="Azure">Azure Blob</Tab>
-	</Tabs>
-	<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
-		{#if bucket_config.type === 'S3'}
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Bucket</span>
-				<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
-			</label>
+			}}
+		>
+			<Tab size="sm" value="S3">S3</Tab>
+			<Tab size="sm" value="Azure">Azure Blob</Tab>
+		</Tabs>
+		<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
+			{#if bucket_config.type === 'S3'}
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
+				</label>
 
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Region</span>
-				<span class="text-tertiary text-2xs"
-					>If left empty, will be derived automatically from $AWS_REGION</span
-				>
-				<input type="text" bind:value={bucket_config.region} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Access key ID</span>
-				<span class="text-tertiary text-2xs"
-					>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2 profile</span
-				>
-				<input type="text" bind:value={bucket_config.access_key} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Secret key</span>
-				<span class="text-tertiary text-2xs"
-					>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
-				>
-				<input type="password" autocomplete="new-password" bind:value={bucket_config.secret_key} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Endpoint</span>
-				<span class="text-tertiary text-2xs"
-					>Only needed for non AWS S3 providers like R2 or MinIo</span
-				>
-				<input type="text" bind:value={bucket_config.endpoint} />
-			</label>
-			<div class="block pb-2">
-				<span class="text-tertiary text-2xs">Disable if using https only policy</span>
-				<div>
-					<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Region</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_REGION</span
+					>
+					<input type="text" bind:value={bucket_config.region} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Access key ID</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2
+						profile</span
+					>
+					<input type="text" bind:value={bucket_config.access_key} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Secret key</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
+					>
+					<input
+						type="password"
+						autocomplete="new-password"
+						bind:value={bucket_config.secret_key}
+					/>
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Endpoint</span>
+					<span class="text-tertiary text-2xs"
+						>Only needed for non AWS S3 providers like R2 or MinIo</span
+					>
+					<input type="text" bind:value={bucket_config.endpoint} />
+				</label>
+				<div class="block pb-2">
+					<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+					<div>
+						<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+					</div>
 				</div>
-			</div>
-		{:else if bucket_config.type === 'Azure'}
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Account name</span>
-				<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Container name</span>
-				<input type="text" placeholder="container-name" bind:value={bucket_config.containerName} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">Access key</span>
-				<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
-				>
-				<input type="text" bind:value={bucket_config.tenantId} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
-				>
-				<input type="text" bind:value={bucket_config.clientId} />
-			</label>
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm"
-					>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
-				>
-				<span class="text-tertiary text-2xs"
-					>Only needed for non Azure Blob providers like Azurite</span
-				>
-				<input type="text" bind:value={bucket_config.endpoint} />
-			</label>
-		{:else}
-			<div>Unknown bucket type {bucket_config['type']}</div>
-		{/if}
+			{:else if bucket_config.type === 'Azure'}
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Account name</span>
+					<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Container name</span>
+					<input
+						type="text"
+						placeholder="container-name"
+						bind:value={bucket_config.containerName}
+					/>
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Access key</span>
+					<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<input type="text" bind:value={bucket_config.tenantId} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<input type="text" bind:value={bucket_config.clientId} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<span class="text-tertiary text-2xs"
+						>Only needed for non Azure Blob providers like Azurite</span
+					>
+					<input type="text" bind:value={bucket_config.endpoint} />
+				</label>
+			{:else}
+				<div>Unknown bucket type {bucket_config['type']}</div>
+			{/if}
+		</div>
 	</div>
 {/if}

package/package/components/QueueMetricsDrawer.svelte

@@ -182,7 +182,7 @@ function addAllTags(alertIndex) {
 		documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups#queue-metrics"
 	>
 		<Section
-			label="Queue Alert Settings"
+			label="Queue alert settings"
 			collapsable={true}
 			tooltip="A critical alert is triggered when the number of jobs in the queue exceeds the set threshold and they have been waiting for at least the specified time. After an alert, no new alerts will be triggered during the cooldown period."
 			eeOnly={true}
@@ -193,7 +193,7 @@ function addAllTags(alertIndex) {
 				{/if}
 				<div class="flex gap-2 pb-2">
 					<Button color="blue" size="xs" on:click={applyConfig} disabled={!changesMade}>
-						<SaveIcon size={16} /> Apply Config
+						<SaveIcon size={16} /> Apply config
 					</Button>
 					<Button color="light" size="xs" on:click={cancelChanges} disabled={!changesMade}>
 						Cancel
@@ -248,7 +248,7 @@ function addAllTags(alertIndex) {
 																{tag}
 																<button
 																	on:click={() => removeTag(index, tag)}
-																	aria-label="Remove Tag"
+																	aria-label="Remove tag"
 																	class="ml-1 text-xs">x</button
 																>
 															</span>
@@ -263,7 +263,7 @@ function addAllTags(alertIndex) {
 															disabled={workerTags.length === alert.tags_to_monitor.length}
 															class="p-1 flex-grow mr-1"
 														/>
-														<button on:click={() => addTag(index, newTag)} aria-label="Add Tag">
+														<button on:click={() => addTag(index, newTag)} aria-label="Add tag">
 															<PlusCircle size={16} />
 														</button>
 													</div>
@@ -366,7 +366,7 @@ function addAllTags(alertIndex) {
 				<div class="flex">
 					<Button color="blue" size="xs" on:click={addNewAlert}>
 						<PlusCircle size={16} />
-						Add New Alert
+						Add new alert
 					</Button>
 				</div>
 			{:else}

package/package/components/ResourceEditor.svelte

@@ -20,6 +20,10 @@ export let path = '';
 export let newResource = false;
 export let hidePath = false;
 export let watchChanges = false;
+export let defaultValues = undefined;
+$: if (defaultValues && Object.keys(defaultValues).length > 0) {
+    args = defaultValues;
+}
 let isValid = true;
 let jsonError = '';
 let can_write = true;

package/package/components/ResourceEditor.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         newResource?: boolean | undefined;
         hidePath?: boolean | undefined;
         watchChanges?: boolean | undefined;
+        defaultValues?: Record<string, any> | undefined;
         editResource?: (() => Promise<void>) | undefined;
         createResource?: (() => Promise<void>) | undefined;
     };

package/package/components/ResourceEditorDrawer.svelte

@@ -4,6 +4,7 @@ import { Loader2, Save } from 'lucide-svelte';
 let drawer;
 let canSave = true;
 let resource_type = undefined;
+let defaultValues = undefined;
 let resourceEditor = undefined;
 let path = undefined;
 let newResource = false;
@@ -13,16 +14,22 @@ export async function initEdit(p) {
     path = p;
     drawer.openDrawer?.();
 }
-export async function initNew(resourceType) {
+export async function initNew(resourceType, nDefaultValues) {
     newResource = true;
     path = undefined;
     resource_type = resourceType;
+    defaultValues = nDefaultValues;
     drawer.openDrawer?.();
 }
+let mode = newResource ? 'new' : 'edit';
+$: path ? (mode = 'edit') : (mode = 'new');
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
+	<DrawerContent
+		title={mode == 'edit' ? 'Edit ' + path : 'Add a resourcee'}
+		on:close={drawer.closeDrawer}
+	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
@@ -30,6 +37,7 @@ export async function initNew(resourceType) {
 				{newResource}
 				{path}
 				{resource_type}
+				{defaultValues}
 				on:refresh
 				bind:this={resourceEditor}
 				bind:canSave
@@ -39,7 +47,11 @@ export async function initNew(resourceType) {
 			<Button
 				startIcon={{ icon: Save }}
 				on:click={() => {
-					resourceEditor?.editResource()
+					if (mode == 'edit') {
+						resourceEditor?.editResource()
+					} else {
+						resourceEditor?.createResource()
+					}
 					drawer.closeDrawer()
 				}}
 				disabled={!canSave}

package/package/components/ResourceEditorDrawer.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         initEdit?: ((p: string) => Promise<void>) | undefined;
-        initNew?: ((resourceType: string) => Promise<void>) | undefined;
+        initNew?: ((resourceType: string, nDefaultValues?: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {
         refresh: any;
@@ -16,6 +16,6 @@ export type ResourceEditorDrawerEvents = typeof __propDef.events;
 export type ResourceEditorDrawerSlots = typeof __propDef.slots;
 export default class ResourceEditorDrawer extends SvelteComponent<ResourceEditorDrawerProps, ResourceEditorDrawerEvents, ResourceEditorDrawerSlots> {
     get initEdit(): (p: string) => Promise<void>;
-    get initNew(): (resourceType: string) => Promise<void>;
+    get initNew(): (resourceType: string, nDefaultValues?: Record<string, any> | undefined) => Promise<void>;
 }
 export {};

package/package/components/ResourcePicker.svelte

@@ -1,6 +1,6 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onMount } from 'svelte';
 import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import AppConnect from './AppConnectDrawer.svelte';
@@ -20,6 +20,14 @@ export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let selectFirst = false;
 export let expressOAuthSetup = false;
+export let defaultValues = undefined;
+onMount(() => {
+    setTimeout(() => {
+        if (Object.keys(defaultValues ?? {}).length > 0 && resourceType) {
+            resourceEditor?.initNew?.(resourceType, defaultValues);
+        }
+    }, 500);
+});
 let valueSelect = initialValue || value
     ? {
         value: value ?? initialValue,
@@ -38,10 +46,13 @@ let loading = true;
 async function loadResources(resourceType) {
     loading = true;
     try {
-        const nc = (await ResourceService.listResource({
+        const resourceTypesToQuery = resourceType === 'snowflake' ? ['snowflake', 'snowflake_oauth'] : [resourceType];
+        const resources = await Promise.all(resourceTypesToQuery.map((rt) => ResourceService.listResource({
             workspace: $workspaceStore,
-            resourceType
-        }))
+            resourceType: rt
+        })));
+        const nc = resources
+            .flat()
             .filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
             .map((x) => ({
             value: x.path,
@@ -163,7 +174,7 @@ let darkMode = false;
 					{disabled}
 					color="light"
 					variant="border"
-					size="sm"
+					size="xs"
 					on:click={() => appConnect?.open?.(resourceType)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}

package/package/components/ResourcePicker.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         selectFirst?: boolean | undefined;
         expressOAuthSetup?: boolean | undefined;
+        defaultValues?: Record<string, any> | undefined;
         askNewResource?: (() => Promise<void>) | undefined;
     };
     events: {