windmill-components 1.623.2 → 1.655.0

package/package/components/MoveDrawer.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,14 +11,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MoveDrawer: $$__sveltets_2_IsomorphicComponent<{
-    openDrawer?: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app") => Promise<void>;
-}, {
+declare const MoveDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app") => Promise<void>;
-}, string>;
+    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule") => Promise<void>;
+}, "">;
 type MoveDrawer = InstanceType<typeof MoveDrawer>;
 export default MoveDrawer;

package/package/components/NextcloudSetting.svelte

@@ -2,6 +2,7 @@
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable(), baseUrl } = $props();
 function changeDomain(domain) {
     if (value && domain) {
@@ -50,7 +51,7 @@ $effect(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-4 rounded-md border flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Nextcloud Instance Domain</span>
 				<TextInput
@@ -96,6 +97,6 @@ $effect(() => {
 					5. Copy the Client ID and Client Secret to the fields above<br />
 				</div>
 			</CollapseLink>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/NoDirectDeployAlert.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { userStore } from '../stores';
+import { canUserBypassRuleKind, getActiveRulesetsForKind, isRuleActive } from '../workspaceProtectionRules.svelte';
+import { Alert } from './common';
+let activeDeployRulesets = $derived(getActiveRulesetsForKind('DisableDirectDeployment'));
+let canBypass = $derived(canUserBypassRuleKind('DisableDirectDeployment', $userStore));
+let overrideChecked = $state(false);
+let canEdit = $derived(!isRuleActive('DisableDirectDeployment') || (canBypass && overrideChecked));
+let { onUpdateCanEditStatus = (value) => { } } = $props();
+$effect(() => {
+    onUpdateCanEditStatus(canEdit);
+});
+</script>
+
+{#if !$userStore?.operator && activeDeployRulesets.length > 0}
+	<div class="my-2">
+		<Alert type="info" title="Workspace protection active">
+			<div class="flex flex-col gap-2">
+				<p>
+					The rule{activeDeployRulesets.length > 1 ? "s" : ""} <b>{activeDeployRulesets.map((r) => r.name).join(', ')}</b> restrict{activeDeployRulesets.length > 1 ? "" : "s"} direct edits to
+					this workspace. You will need to either fork the workspace, or make your changes locally and submit a PR to an authorized user.
+				</p>
+				{#if canBypass}
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input class="rounded max-w-4" type="checkbox" bind:checked={overrideChecked} />
+						<span class="text-xs">Bypass restriction</span>
+					</label>
+				{/if}
+			</div>
+		</Alert>
+	</div>
+{/if}

package/package/components/NoDirectDeployAlert.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onUpdateCanEditStatus?: (value: boolean) => void;
+};
+declare const NoDirectDeployAlert: import("svelte").Component<$$ComponentProps, {}, "">;
+type NoDirectDeployAlert = ReturnType<typeof NoDirectDeployAlert>;
+export default NoDirectDeployAlert;

package/package/components/NumberTypeNarrowing.svelte

@@ -1,78 +1,75 @@
 <script lang="ts">import Label from './Label.svelte';
-import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Select from './select/Select.svelte';
 import TextInput from './text_input/TextInput.svelte';
-let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
-let minChecked = $state(min != undefined);
-let maxChecked = $state(max != undefined);
+let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable(), seconds = $bindable() } = $props();
+let mode = $state(seconds ? 'seconds' : currency ? 'currency' : undefined);
+function onModeChange(newMode) {
+    mode = newMode;
+    if (newMode === 'seconds') {
+        seconds = true;
+        currency = undefined;
+        currencyLocale = undefined;
+    }
+    else if (newMode === 'currency') {
+        seconds = undefined;
+    }
+    else {
+        seconds = undefined;
+        currency = undefined;
+        currencyLocale = undefined;
+    }
+}
 </script>
 
-<div class="flex flex-col gap-2">
-	<div class="grid grid-cols-2 gap-4">
-		<Label label="Min" class="w-full col-span-1">
-			{#snippet header()}
-				<Tooltip light small>
-					Set a minimum value for the number. If both min and max are set, the input will render as
-					a range slider.
-				</Tooltip>
-			{/snippet}
-			{#snippet action()}
-				<Toggle
-					bind:checked={minChecked}
-					on:change={(e) => {
-						if (e.detail) {
-							min = 0
-						} else {
-							min = undefined
-						}
-					}}
-					options={{ right: 'Enabled' }}
-					size="xs"
-				/>
-			{/snippet}
-			<TextInput
-				inputProps={{ type: 'number', disabled: !minChecked }}
-				bind:value={() => min?.toString(), (v) => (min = v ? parseInt(v) : undefined)}
-			/>
-		</Label>
+<div class="grid grid-cols-2 gap-4 p-4 border rounded-md">
+	<Label label="Min" class="w-full">
+		{#snippet header()}
+			<Tooltip light small>
+				Set a minimum value for the number. If both min and max are set, the input will render as a
+				range slider.
+			</Tooltip>
+		{/snippet}
+		<TextInput
+			inputProps={{ type: 'number' }}
+			bind:value={() => min?.toString(), (v) => (min = v !== '' && v != null ? parseInt(v) : undefined)}
+		/>
+	</Label>
 
-		<Label label="Max" class="w-full col-span-1 ">
-			{#snippet header()}
-				<Tooltip light small>
-					Set a maximum value for the number. If both min and max are set, the input will render as
-					a range slider.
-				</Tooltip>
-			{/snippet}
-			{#snippet action()}
-				<Toggle
-					bind:checked={maxChecked}
-					on:change={(e) => {
-						if (e.detail) {
-							max = 42
-						} else {
-							max = undefined
-						}
-					}}
-					options={{ right: 'Enabled' }}
-					size="xs"
-				/>
-			{/snippet}
-			<TextInput
-				inputProps={{ type: 'number', disabled: !maxChecked }}
-				bind:value={() => max?.toString(), (v) => (max = v ? parseInt(v) : undefined)}
-			/>
-		</Label>
-	</div>
-	<div class="flex gap-2">
-		<Label label="Currency">
-			{#snippet header()}
-				<Tooltip light small>
-					Select a currency to display the number in. If a currency is selected, you can also select
-					a locale to format the number according to that locale.
-				</Tooltip>
+	<Label label="Max" class="w-full">
+		{#snippet header()}
+			<Tooltip light small>
+				Set a maximum value for the number. If both min and max are set, the input will render as a
+				range slider.
+			</Tooltip>
+		{/snippet}
+		<TextInput
+			inputProps={{ type: 'number' }}
+			bind:value={() => max?.toString(), (v) => (max = v !== '' && v != null ? parseInt(v) : undefined)}
+		/>
+	</Label>
+
+	<Label label="Format" class="w-full col-span-2">
+		{#snippet header()}
+			<Tooltip light small>Display the number as a currency or as a duration in seconds.</Tooltip>
+		{/snippet}
+		<ToggleButtonGroup
+			selected={mode ?? 'none'}
+			onSelected={(v) => onModeChange(v === 'none' ? undefined : v)}
+		>
+			{#snippet children({ item })}
+				<ToggleButton value="none" label="None" {item} size="sm" />
+				<ToggleButton value="currency" label="Currency" {item} size="sm" />
+				<ToggleButton value="seconds" label="Seconds" {item} size="sm" />
 			{/snippet}
+		</ToggleButtonGroup>
+	</Label>
+
+	{#if mode === 'currency'}
+		<Label label="Currency" class="w-full">
 			<Select
 				bind:value={
 					() => currency,
@@ -86,6 +83,7 @@ let maxChecked = $state(max != undefined);
 				clearable
 			/>
 		</Label>
+
 		<Label label="Currency locale" class="w-full">
 			<Select
 				bind:value={currencyLocale}
@@ -95,5 +93,5 @@ let maxChecked = $state(max != undefined);
 				clearable
 			/>
 		</Label>
-	</div>
+	{/if}
 </div>

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -3,7 +3,8 @@ interface Props {
     max: number | undefined;
     currency: string | undefined;
     currencyLocale: string | undefined;
+    seconds: boolean | undefined;
 }
-declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "max" | "min" | "currency" | "currencyLocale">;
+declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "max" | "min" | "seconds" | "currency" | "currencyLocale">;
 type NumberTypeNarrowing = ReturnType<typeof NumberTypeNarrowing>;
 export default NumberTypeNarrowing;

package/package/components/OAuthSetting.svelte

@@ -2,63 +2,70 @@
 import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
-import { onMount, untrack } from 'svelte';
+import { untrack } from 'svelte';
 import { enterpriseLicense } from '../stores';
 import Button from './common/button/Button.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { name, value = $bindable(), login = true, eeOnly = false } = $props();
-let tenant = $state('');
-onMount(() => {
-    try {
-        if (name == 'microsoft' &&
-            value &&
-            value['login_config'] &&
-            typeof value['login_config']['auth_url'] == 'string') {
-            tenant = value['login_config']['auth_url'].split('/')[3];
+// For Microsoft SSO, tenant is embedded in the login_config URLs, so we need
+// a local state + bidirectional sync. For Teams, we bind directly to
+// value['tenant'] in the template — no intermediate state, no effect loops.
+let microsoftTenant = $state('');
+// Sync microsoftTenant from value.login_config whenever value changes.
+// Uses untrack for the write to avoid circular dependencies with the
+// push effect below. Loop termination is guaranteed because
+// URL.split('/')[3] of a URL we constructed with tenant X always yields X.
+$effect(() => {
+    const v = value;
+    untrack(() => {
+        try {
+            if (!v) {
+                if (microsoftTenant !== '')
+                    microsoftTenant = '';
+                return;
+            }
+            if (name == 'microsoft' &&
+                v['login_config'] &&
+                typeof v['login_config']['auth_url'] == 'string') {
+                const urlTenant = v['login_config']['auth_url'].split('/')[3];
+                if (urlTenant !== microsoftTenant) {
+                    microsoftTenant = urlTenant;
+                }
+            }
         }
-        if (name === 'teams' && value?.tenant) {
-            tenant = value.tenant;
+        catch (e) {
+            console.error('Could not set tenantId', e);
         }
-    }
-    catch (e) {
-        console.error('Could not set tenantId', e);
-    }
+    });
 });
-function changeTenantId(tenant) {
-    if (value && tenant) {
-        if (tenant != '') {
-            if (name === 'teams') {
-                value = {
-                    ...value,
-                    tenant
-                };
-            }
-            else {
+// Push microsoftTenant edits back into value.login_config URLs.
+$effect(() => {
+    microsoftTenant;
+    if (name === 'microsoft') {
+        untrack(() => {
+            if (!value)
+                return;
+            if (microsoftTenant !== '') {
                 value = {
                     ...value,
                     login_config: {
-                        auth_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize`,
-                        token_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
+                        auth_url: `https://login.microsoftonline.com/${microsoftTenant}/oauth2/v2.0/authorize`,
+                        token_url: `https://login.microsoftonline.com/${microsoftTenant}/oauth2/v2.0/token`,
                         userinfo_url: `https://graph.microsoft.com/oidc/userinfo`,
                         scopes: ['openid', 'profile', 'email']
                     }
                 };
             }
-        }
-        else {
-            if (value['login_config']) {
-                delete value['login_config'];
+            else {
+                if (value['login_config']) {
+                    delete value['login_config'];
+                }
             }
-        }
-    }
-}
-let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
-$effect(() => {
-    tenant;
-    if (name == 'microsoft' || name == 'teams') {
-        untrack(() => changeTenantId(tenant));
+        });
     }
 });
+let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
 </script>
 
 <div class="flex flex-col gap-2">
@@ -71,7 +78,7 @@ $effect(() => {
 			disabled={eeOnly && !$enterpriseLicense}
 			on:change={(e) => {
 				if (e.detail) {
-					if (name === 'teams' || name === 'microsoft') {
+					if (name === 'teams') {
 						value = { id: '', secret: '', tenant: '' }
 					} else {
 						value = { id: '', secret: '' }
@@ -86,7 +93,7 @@ $effect(() => {
 		{/if}
 	</label>
 	{#if enabled}
-		<div class="p-4 rounded border mb-4 flex flex-col gap-6">
+		<SettingCard class="mb-4 flex flex-col gap-6">
 			{#if name != 'slack' && name != 'teams'}
 				<label class="flex flex-col gap-1">
 					<span class="text-emphasis font-semibold text-xs">Custom Name</span>
@@ -113,7 +120,17 @@ $effect(() => {
 			{#if name == 'microsoft' || name == 'teams'}
 				<label class="flex flex-col gap-1">
 					<span class="text-emphasis font-semibold text-xs">Tenant Id</span>
-					<TextInput inputProps={{ type: 'text', placeholder: 'Tenant Id' }} bind:value={tenant} />
+					{#if name === 'teams'}
+						<TextInput
+							inputProps={{ type: 'text', placeholder: 'Tenant Id' }}
+							bind:value={value['tenant']}
+						/>
+					{:else}
+						<TextInput
+							inputProps={{ type: 'text', placeholder: 'Tenant Id' }}
+							bind:value={microsoftTenant}
+						/>
+					{/if}
 				</label>
 			{:else if login}
 				<label class="flex flex-col gap-1">
@@ -162,7 +179,7 @@ $effect(() => {
 			{/if}
 			{#if name == 'google'}
 				<CollapseLink text="Instructions">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						Create a new OAuth 2.0 Client <a
 							href="https://console.cloud.google.com/apis/credentials"
 							target="_blank">in Google console</a
@@ -173,7 +190,7 @@ $effect(() => {
 				</CollapseLink>
 			{:else if name == 'slack'}
 				<CollapseLink text="Set up slack">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						To use Slack OAuth, create a new Slack app <a
 							href="https://api.slack.com/apps?new_app=1"
 							target="_blank"
@@ -252,7 +269,7 @@ $effect(() => {
 				</CollapseLink>
 			{:else if name == 'teams'}
 				<CollapseLink text="Instructions">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						Follow this guide on <a
 							href="https://www.windmill.dev/docs/misc/setup_oauth#microsoft-teams"
 							target="_blank">Windmill Docs</a
@@ -261,15 +278,6 @@ $effect(() => {
 					</div>
 				</CollapseLink>
 			{/if}
-		</div>
+		</SettingCard>
 	{/if}
 </div>
-
-<style>
-	.helper {
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1))
-}</style>

package/package/components/OauthExtraParams.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">import { Button } from './common';
 import { X, Plus } from 'lucide-svelte';
-export let extra_params = {};
-let extra_params_vec = Object.entries(extra_params);
+let { extra_params = $bindable() } = $props();
+$effect.pre(() => {
+    if (!extra_params) {
+        extra_params = {};
+    }
+});
+let extra_params_vec = $state(Object.entries(extra_params ?? {}));
 function sync() {
     extra_params = Object.fromEntries(extra_params_vec);
 }
@@ -9,8 +14,8 @@ function sync() {
 
 {#each extra_params_vec as o}
 	<div class="flex flex-row max-w-md mb-2 gap-2">
-		<input type="text" on:keyup={sync} bind:value={o[0]} />
-		<input type="text" on:keyup={sync} bind:value={o[1]} />
+		<input type="text" onkeyup={sync} bind:value={o[0]} />
+		<input type="text" onkeyup={sync} bind:value={o[1]} />
 		<Button
 			variant="subtle"
 			destructive

package/package/components/OauthExtraParams.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const OauthExtraParams: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     extra_params?: Record<string, string>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type OauthExtraParams = InstanceType<typeof OauthExtraParams>;
+}
+declare const OauthExtraParams: import("svelte").Component<Props, {}, "extra_params">;
+type OauthExtraParams = ReturnType<typeof OauthExtraParams>;
 export default OauthExtraParams;

package/package/components/OauthScopes.svelte

@@ -1,18 +1,23 @@
 <script lang="ts">import { Button } from './common';
 import { Minus, Plus } from 'lucide-svelte';
-export let scopes = [];
+let { scopes = $bindable() } = $props();
+$effect.pre(() => {
+    if (!scopes) {
+        scopes = [];
+    }
+});
 </script>
 
 {#if scopes && Array.isArray(scopes)}
-	{#each scopes as v}
+	{#each scopes as v, i}
 		<div class="flex flex-row max-w-md mb-2">
-			<input type="text" bind:value={v} />
+			<input type="text" bind:value={scopes[i]} />
 			<Button
 				variant="default"
 				size="xs"
 				btnClasses="mx-6"
 				on:click={() => {
-					scopes = scopes.filter((el) => el != v)
+					scopes = scopes?.filter((el) => el != v)
 				}}
 				startIcon={{ icon: Minus }}
 				iconOnly

package/package/components/OauthScopes.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const OauthScopes: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     scopes?: string[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type OauthScopes = InstanceType<typeof OauthScopes>;
+}
+declare const OauthScopes: import("svelte").Component<Props, {}, "scopes">;
+type OauthScopes = ReturnType<typeof OauthScopes>;
 export default OauthScopes;

package/package/components/ObjectResourceInput.svelte

@@ -4,14 +4,20 @@ import S3ObjectPicker from './S3ObjectPicker.svelte';
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
-let { format, value = $bindable(), disablePortal = false, showSchemaExplorer = false, selectFirst = false, defaultValue, editor = $bindable(undefined), disabled = false, onClear = undefined } = $props();
+let { format, value = $bindable(), disablePortal = false, showSchemaExplorer = false, selectFirst = false, defaultValue, editor = $bindable(undefined), disabled = false, datatableAsPgResource = false, onClear = undefined } = $props();
 function isResource() {
-    return isString(value) && value.length >= '$res:'.length;
+    return isString(value) && value.startsWith('$res:');
+}
+function isDatatable(val) {
+    return (isString(val) && val.startsWith('datatable://')) || val === 'datatable';
 }
 function valueToPath() {
     if (isResource()) {
         return value.substr('$res:'.length);
     }
+    else if (isDatatable(value)) {
+        return value;
+    }
 }
 </script>
 
@@ -21,6 +27,7 @@ function valueToPath() {
 		<S3ObjectPicker bind:value />
 	{:else if value == undefined || typeof value === 'string'}
 		<ResourcePicker
+			{datatableAsPgResource}
 			{disabled}
 			{selectFirst}
 			{disablePortal}
@@ -31,7 +38,7 @@ function valueToPath() {
 					if (v == undefined) {
 						value = undefined
 					} else {
-						value = `$res:${v}`
+						value = isDatatable(v) ? v : `$res:${v}`
 					}
 				}
 			}

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     editor?: SimpleEditor | undefined;
     path?: string;
     disabled?: boolean;
+    datatableAsPgResource?: boolean;
     onClear?: () => void;
 }
 declare const ObjectResourceInput: import("svelte").Component<Props, {}, "value" | "editor">;