windmill-components 1.623.2 → 1.655.0

package/package/components/dbManagerDrawerModel.svelte.js

@@ -0,0 +1,182 @@
+import { z } from 'zod';
+import { useSearchParams } from '../svelte5UtilsKit.svelte';
+import { isDbType } from './dbTypes';
+/**
+ * Single URL param `dbm` encodes the full DB manager state:
+ *   firstSegment~path~schema.table
+ *
+ * firstSegment:
+ *   datatable              – database with datatable:// resource (resourceType always postgresql)
+ *   ducklake               – ducklake connection
+ *   postgresql, mysql, …   – regular database (the segment IS the resource type)
+ *
+ * schema.table (third segment, optional):
+ *   schema.table  – both
+ *   .table        – table only
+ *   schema.       – schema only
+ *   (omitted)     – neither
+ *
+ * Default schemas (omitted from URL, restored on parse):
+ *   datatable → public
+ *   ducklake  → main
+ *
+ * Examples:
+ *   datatable~main~.customers          (schema "public" implied)
+ *   ducklake~main~.orders              (schema "main" implied)
+ *   postgresql~$res:u/user/my_pg~public.customers
+ */
+const dbManagerSchema = z.object({
+    dbm: z.string().nullable()
+});
+function parseDbm(raw) {
+    if (!raw || typeof raw !== 'string')
+        return null;
+    const parts = raw.split('~');
+    if (parts.length < 2 || !parts[1])
+        return null;
+    const firstSeg = parts[0];
+    const path = parts[1];
+    const schemaTable = parts[2] ?? '';
+    let type;
+    let resType;
+    if (firstSeg === 'datatable') {
+        type = 'datatable';
+    }
+    else if (firstSeg === 'ducklake') {
+        type = 'ducklake';
+    }
+    else if (isDbType(firstSeg)) {
+        type = 'database';
+        resType = firstSeg;
+    }
+    else {
+        return null;
+    }
+    let schema;
+    let table;
+    if (schemaTable) {
+        const dotIdx = schemaTable.indexOf('.');
+        if (dotIdx === 0) {
+            table = schemaTable.slice(1) || undefined;
+        }
+        else if (dotIdx === schemaTable.length - 1) {
+            schema = schemaTable.slice(0, -1) || undefined;
+        }
+        else if (dotIdx > 0) {
+            schema = schemaTable.slice(0, dotIdx);
+            table = schemaTable.slice(dotIdx + 1);
+        }
+    }
+    // Restore default schema when omitted for datatable/ducklake
+    if (!schema && table && type in defaultSchemas) {
+        schema = defaultSchemas[type];
+    }
+    return { type, path, resType, schema, table };
+}
+const defaultSchemas = { datatable: 'public', ducklake: 'main' };
+function buildDbm(p) {
+    const firstSeg = p.type === 'database' ? p.resType : p.type;
+    const schema = p.schema === defaultSchemas[p.type] ? undefined : p.schema;
+    let schemaTable = '';
+    if (schema && p.table) {
+        schemaTable = `${schema}.${p.table}`;
+    }
+    else if (p.table) {
+        schemaTable = `.${p.table}`;
+    }
+    else if (schema) {
+        schemaTable = `${schema}.`;
+    }
+    return schemaTable ? `${firstSeg}~${p.path}~${schemaTable}` : `${firstSeg}~${p.path}`;
+}
+export function useDbManagerUriState() {
+    const params = useSearchParams(dbManagerSchema);
+    const parsed = $derived(parseDbm(params.dbm));
+    let input = $derived.by(() => {
+        if (!parsed)
+            return undefined;
+        if (parsed.type === 'ducklake') {
+            return {
+                type: 'ducklake',
+                ducklake: parsed.path,
+                specificTable: parsed.table
+            };
+        }
+        // datatable or database
+        const resType = parsed.type === 'datatable' ? 'postgresql' : parsed.resType;
+        if (!isDbType(resType ?? undefined))
+            return undefined;
+        return {
+            type: 'database',
+            resourceType: resType,
+            resourcePath: parsed.type === 'datatable' ? `datatable://${parsed.path}` : parsed.path,
+            specificSchema: parsed.schema,
+            specificTable: parsed.table
+        };
+    });
+    const isDatatableInput = $derived(parsed?.type === 'datatable');
+    function updateField(updates) {
+        const p = parseDbm(params.dbm);
+        if (!p)
+            return;
+        Object.assign(p, updates);
+        params.dbm = buildDbm(p);
+    }
+    function openDrawer(nInput) {
+        if (nInput.type === 'database') {
+            const isDatatable = nInput.resourcePath.startsWith('datatable://');
+            params.dbm = buildDbm({
+                type: isDatatable ? 'datatable' : 'database',
+                path: isDatatable ? nInput.resourcePath.slice('datatable://'.length) : nInput.resourcePath,
+                resType: isDatatable ? undefined : nInput.resourceType,
+                schema: nInput.specificSchema,
+                table: nInput.specificTable
+            });
+        }
+        else {
+            params.dbm = buildDbm({
+                type: 'ducklake',
+                path: nInput.ducklake,
+                table: nInput.specificTable
+            });
+        }
+    }
+    function closeDrawer() {
+        params.dbm = null;
+    }
+    return {
+        get input() {
+            return input;
+        },
+        get effectiveInput() {
+            return input;
+        },
+        get isDatatableInput() {
+            return isDatatableInput;
+        },
+        get selectedDatatable() {
+            return parsed?.type === 'datatable' ? parsed.path : undefined;
+        },
+        set selectedDatatable(v) {
+            if (v)
+                updateField({ path: v });
+        },
+        get selectedSchema() {
+            return parsed?.schema;
+        },
+        set selectedSchema(v) {
+            updateField({ schema: v });
+        },
+        get selectedTable() {
+            return parsed?.table;
+        },
+        set selectedTable(v) {
+            updateField({ table: v });
+        },
+        get open() {
+            return !!input;
+        },
+        openDrawer,
+        closeDrawer
+    };
+}

package/package/components/dedicated_worker.d.ts

@@ -0,0 +1,7 @@
+export declare function dedicatedWorkerTag(workspaceId: string, path: string): Promise<string>;
+export declare function parseTag(tag: string): {
+    workspace: string;
+    type: 'script' | 'flow';
+    path: string;
+} | null;
+export declare function computeHashedTag(rawTag: string): Promise<string>;

package/package/components/dedicated_worker.js

@@ -0,0 +1,36 @@
+const MAX_TAG_LEN = 50;
+const HASH_SUFFIX_LEN = 16;
+// IMPORTANT: This implementation must stay in sync with the Rust backend
+// `dedicated_worker_tag()` in backend/windmill-common/src/worker.rs.
+// The frontend version is used for display; the backend version is authoritative.
+export async function dedicatedWorkerTag(workspaceId, path) {
+    const fullTag = `${workspaceId}:${path}`;
+    if (fullTag.length <= MAX_TAG_LEN)
+        return fullTag;
+    const encoded = new TextEncoder().encode(fullTag);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', encoded);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hexHash = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    const prefixLen = MAX_TAG_LEN - 1 - HASH_SUFFIX_LEN;
+    return `${fullTag.substring(0, prefixLen)}#${hexHash.substring(0, HASH_SUFFIX_LEN)}`;
+}
+export function parseTag(tag) {
+    const colonIndex = tag.indexOf(':');
+    if (colonIndex === -1)
+        return null;
+    const workspace = tag.substring(0, colonIndex);
+    const rest = tag.substring(colonIndex + 1);
+    if (rest.startsWith('flow/')) {
+        return { workspace, type: 'flow', path: rest.substring(5) };
+    }
+    else {
+        return { workspace, type: 'script', path: rest };
+    }
+}
+export async function computeHashedTag(rawTag) {
+    const parsed = parseTag(rawTag);
+    if (!parsed)
+        return rawTag;
+    const fullPath = parsed.type === 'flow' ? `flow/${parsed.path}` : parsed.path;
+    return dedicatedWorkerTag(parsed.workspace, fullPath);
+}

package/package/components/details/ClipboardPanel.svelte

@@ -2,27 +2,24 @@
 import { Copy } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { inputSizeClasses } from '../text_input/TextInput.svelte';
-export let content;
-export let title = undefined;
-export let size = 'md';
-export let disabled = false;
+let { content, title = undefined, size = 'md', disabled = false, class: className = '' } = $props();
 </script>
 
 {#if title !== undefined}
 	<div class="text-xs font-semibold">{title}</div>
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={twMerge(
 		'grow min-w-0 w-full border flex items-center bg-surface-secondary hover:opacity-60 transition-opacity text-primary justify-between rounded-md',
 		inputSizeClasses[size],
-		$$props.class
+		className
 	)}
 	class:cursor-not-allowed={disabled}
 	class:cursor-pointer={!disabled}
-	on:click={(e) => {
+	onclick={(e) => {
 		if (disabled) {
 			return
 		}

package/package/components/details/ClipboardPanel.svelte.d.ts

@@ -1,24 +1,10 @@
-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 ClipboardPanel: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     content: string;
-    title?: string | undefined | undefined;
-    size?: "sm" | "md" | undefined;
-    disabled?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ClipboardPanel = InstanceType<typeof ClipboardPanel>;
+    title?: string | undefined;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    class?: string;
+}
+declare const ClipboardPanel: import("svelte").Component<Props, {}, "">;
+type ClipboardPanel = ReturnType<typeof ClipboardPanel>;
 export default ClipboardPanel;

package/package/components/details/DetailPageHeader.svelte

@@ -4,36 +4,21 @@ import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte';
 import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
 import { createEventDispatcher, getContext, tick } from 'svelte';
+import SummaryPathDisplay from '../SummaryPathDisplay.svelte';
 import { Calendar } from 'lucide-svelte';
-import { emptyString } from '../../utils';
 const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
-let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
+let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), onSaved, children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="border-b p-1">
+<div class="border-b">
 	<div class="mx-auto">
 		<div
-			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-10"
+			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-12"
 		>
-			<div class="grow px-4 inline-flex items-center gap-4 min-w-0">
-				<div
-					class={twMerge(
-						'min-w-24 text-emphasis truncate flex flex-col gap-0',
-						$userStore?.operator ? 'pl-10' : ''
-					)}
-				>
-					<span
-						class={twMerge(
-							'text-sm min-w-24 text-emphasis font-semibold truncate',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						{emptyString(summary) ? (path ?? '') : summary}
-					</span>
-					{#if !emptyString(summary)}
-						<span class="text-2xs text-secondary">{path}</span>
-					{/if}
+			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
+				<div class={twMerge('min-w-0', $userStore?.operator ? 'pl-10' : '')}>
+					<SummaryPathDisplay {summary} {path} {onSaved} kind={errorHandlerKind} />
 				</div>
 				{#if tag}
 					<Badge>tag: {tag}</Badge>
@@ -60,7 +45,7 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{@render trigger_badges?.()}
 			</div>
-			<div class="flex gap-1 items-center">
+			<div class="flex gap-1 items-center pr-4">
 				{#if menuItems.length > 0}
 					{#key menuItems}
 						<DropdownV2

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -19,6 +19,7 @@ interface Props {
     errorHandlerKind: 'flow' | 'script';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
+    onSaved?: (newPath: string) => void;
     children?: import('svelte').Snippet;
     trigger_badges?: import('svelte').Snippet;
 }

package/package/components/details/DetailPageLayout.svelte

@@ -63,7 +63,7 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 					{/if}
 
 					{#snippet content()}
-						<div class="grow min-h-0">
+						<div class="grow min-h-0 overflow-y-auto">
 							<TabContent value="form" class="flex flex-col flex-1 h-full">
 								{@render form?.()}
 							</TabContent>

package/package/components/details/ErrorHandlerToggleButton.svelte

@@ -4,10 +4,7 @@ import { FlowService, ScriptService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
 import Tooltip from '../Tooltip.svelte';
-export let kind;
-export let scriptOrFlowPath;
-export let errorHandlerMuted;
-export let iconOnly = true;
+let { kind, scriptOrFlowPath, errorHandlerMuted = $bindable(), iconOnly = true } = $props();
 async function toggleErrorHandler() {
     if ($workspaceStore !== undefined) {
         try {

package/package/components/details/ErrorHandlerToggleButton.svelte.d.ts

@@ -1,23 +1,9 @@
-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 ErrorHandlerToggleButton: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow";
+interface Props {
+    kind: 'script' | 'flow';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
     iconOnly?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ErrorHandlerToggleButton = InstanceType<typeof ErrorHandlerToggleButton>;
+}
+declare const ErrorHandlerToggleButton: import("svelte").Component<Props, {}, "errorHandlerMuted">;
+type ErrorHandlerToggleButton = ReturnType<typeof ErrorHandlerToggleButton>;
 export default ErrorHandlerToggleButton;

package/package/components/details/ErrorHandlerToggleButtonV2.svelte

@@ -2,12 +2,8 @@
 import { FlowService, ScriptService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
-export let kind;
-export let scriptOrFlowPath;
-export let errorHandlerMuted;
-export let textDisabled = false;
-let toggleState = errorHandlerMuted;
-export let color = undefined;
+let { kind, scriptOrFlowPath, errorHandlerMuted = $bindable(), textDisabled = false, color = undefined } = $props();
+let toggleState = $state(errorHandlerMuted);
 async function toggleErrorHandler() {
     toggleState = !toggleState;
     if ($workspaceStore !== undefined) {

package/package/components/details/ErrorHandlerToggleButtonV2.svelte.d.ts

@@ -1,24 +1,10 @@
-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 ErrorHandlerToggleButtonV2: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow";
+interface Props {
+    kind: 'script' | 'flow';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
     textDisabled?: boolean;
-    color?: "nord" | "red" | "blue" | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ErrorHandlerToggleButtonV2 = InstanceType<typeof ErrorHandlerToggleButtonV2>;
+    color?: 'nord' | 'red' | 'blue' | undefined;
+}
+declare const ErrorHandlerToggleButtonV2: import("svelte").Component<Props, {}, "errorHandlerMuted">;
+type ErrorHandlerToggleButtonV2 = ReturnType<typeof ErrorHandlerToggleButtonV2>;
 export default ErrorHandlerToggleButtonV2;