windmill-components 1.623.2 → 1.655.0

package/package/components/DBManagerDrawer.svelte

@@ -7,13 +7,9 @@ import Select from './select/Select.svelte';
 import { ArrowLeft, Expand, LoaderCircle, Minimize, RefreshCcw } from 'lucide-svelte';
 import DBManagerContent from './DBManagerContent.svelte';
 import { resource } from 'runed';
-let { offset = 0 } = $props();
-let input = $state();
-let open = $derived(!!input);
-// For datatable inputs, track the selected datatable separately
-let selectedDatatable = $state(undefined);
-// Check if input is a datatable type
-const isDatatableInput = $derived(input?.type === 'database' && input.resourcePath.startsWith('datatable://'));
+import { untrack } from 'svelte';
+let { uriState, offset = 0 } = $props();
+let open = $derived(uriState.open);
 // Load available datatables when drawer opens with datatable input
 const datatables = resource([], async () => {
     if (!$workspaceStore)
@@ -26,45 +22,27 @@ const datatables = resource([], async () => {
         return [];
     }
 });
-// Computed input that updates when selectedDatatable changes
-const effectiveInput = $derived.by(() => {
-    if (!input)
-        return undefined;
-    if (!isDatatableInput || !selectedDatatable)
-        return input;
-    return {
-        ...input,
-        resourcePath: `datatable://${selectedDatatable}`
-    };
-});
 const datatableItems = $derived(datatables.current.map((dt) => ({
     value: dt,
     label: dt
 })));
-export function openDrawer(nInput) {
-    input = nInput;
-    if (isDatatableInput) {
-        datatables.refetch();
-    }
-    // If it's a datatable input, extract the datatable name for the selector
-    if (nInput.type === 'database' && nInput.resourcePath.startsWith('datatable://')) {
-        selectedDatatable = nInput.resourcePath.replace('datatable://', '');
-        datatables.refetch();
-    }
-    else {
-        selectedDatatable = undefined;
+// Refetch datatables when switching to a datatable input
+$effect(() => {
+    if (uriState.isDatatableInput) {
+        untrack(() => datatables.refetch());
     }
-}
-export function closeDrawer() {
-    input = undefined;
-    selectedDatatable = undefined;
+});
+function handleClose() {
+    uriState.closeDrawer();
     dbManagerContent?.clearReplResult();
 }
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);
 $effect(() => {
-    if (!open)
+    if (!open) {
         expand = false;
+        uriState.closeDrawer();
+    }
 });
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
@@ -77,7 +55,7 @@ let hasReplResult = $state(false);
 	size={expand ? `${windowWidth}px` : '1200px'}
 	preventEscape
 	{offset}
-	on:close={closeDrawer}
+	on:close={handleClose}
 >
 	<DrawerContent
 		title={hasReplResult ? 'Query Result' : 'Database Manager'}
@@ -85,18 +63,24 @@ let hasReplResult = $state(false);
 			if (hasReplResult) {
 				dbManagerContent?.clearReplResult()
 			} else {
-				closeDrawer()
+				handleClose()
 			}
 		}}
 		CloseIcon={hasReplResult ? ArrowLeft : undefined}
 		noPadding
 		id="db-manager-drawer"
 	>
-		{#if effectiveInput && $workspaceStore}
-			{#key selectedDatatable}
-				<DBManagerContent bind:this={dbManagerContent} input={effectiveInput} bind:hasReplResult>
+		{#if uriState.effectiveInput && $workspaceStore}
+			{#key uriState.selectedDatatable}
+				<DBManagerContent
+					bind:this={dbManagerContent}
+					input={uriState.effectiveInput}
+					bind:hasReplResult
+					bind:selectedSchemaKey={uriState.selectedSchema}
+					bind:selectedTableKey={uriState.selectedTable}
+				>
 					{#snippet dbSelector()}
-						{#if isDatatableInput}
+						{#if uriState.isDatatableInput}
 							{#if datatables.loading}
 								<div class="flex items-center gap-2 text-tertiary ml-2">
 									<LoaderCircle size={14} class="animate-spin" />
@@ -106,7 +90,7 @@ let hasReplResult = $state(false);
 								<Select
 									transformInputSelectedText={(s) => `Datatable: ${s}`}
 									items={datatableItems}
-									bind:value={selectedDatatable}
+									bind:value={uriState.selectedDatatable}
 									placeholder="Select data table"
 									size="md"
 								/>

package/package/components/DBManagerDrawer.svelte.d.ts

@@ -1,11 +1,9 @@
-import type { DbInput } from './dbTypes';
+import type { DbManagerUriState } from './dbManagerDrawerModel.svelte';
 interface Props {
+    uriState: DbManagerUriState;
     /** Z-index offset for the drawer, useful when opening from within modals */
     offset?: number;
 }
-declare const DBManagerDrawer: import("svelte").Component<Props, {
-    openDrawer: (nInput: DbInput) => void;
-    closeDrawer: () => void;
-}, "">;
+declare const DBManagerDrawer: import("svelte").Component<Props, {}, "">;
 type DBManagerDrawer = ReturnType<typeof DBManagerDrawer>;
 export default DBManagerDrawer;

package/package/components/DBSchemaExplorer.svelte

@@ -25,10 +25,10 @@ function handleSelected({ detail }) {
 	</ToggleButtonGroup>
 {/if}
 {#if dbSchema.lang === 'graphql'}
-	{#await import('./GraphqlSchemaViewer.svelte')}
+	{#await Promise.all([import('./GraphqlSchemaViewer.svelte'), formatGraphqlSchema(dbSchema.schema)])}
 		<Loader2 class="animate-spin" />
-	{:then Module}
-		<Module.default code={formatGraphqlSchema(dbSchema.schema)} class="h-full" />
+	{:then [Module, code]}
+		<Module.default {code} class="h-full" />
 	{/await}
 {:else}
 	<ObjectViewer json={formatSchema(dbSchema)} pureViewer collapseLevel={1} />

package/package/components/DBTableEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" module>"use strict";
+<script lang="ts" module>import { untrack } from 'svelte';
 function validate(values, dbSchema) {
     const columnNamesErrs = values.columns.flatMap((column) => {
         const isUnique = values.columns.filter((c) => c.name === column.name).length === 1;
@@ -51,7 +51,7 @@ import { datatypeDefaultLength } from './apps/components/display/dbtable/tableEd
 import Alert from './common/alert/Alert.svelte';
 import Label from './Label.svelte';
 const { dbType, dbSchema, currentSchema, initialValues, features, onConfirm, computeBtnProps, computePreview } = $props();
-const columnTypes = DB_TYPES[dbType];
+const columnTypes = DB_TYPES[untrack(() => dbType)];
 const defaultColumnType = {
     postgresql: 'BIGSERIAL',
     snowflake: 'varchar',
@@ -59,8 +59,8 @@ const defaultColumnType = {
     bigquery: 'string',
     mysql: 'varchar',
     duckdb: 'string'
-}[dbType];
-const values = $state($state.snapshot(initialValues) ?? {
+}[untrack(() => dbType)];
+const values = $state($state.snapshot(untrack(() => initialValues)) ?? {
     name: '',
     columns: [],
     foreignKeys: []
@@ -75,8 +75,8 @@ function addColumn({ name, primaryKey }) {
         ...(primaryKey && { primaryKey })
     });
 }
-if (!initialValues) {
-    addColumn({ name: 'id', primaryKey: features?.primaryKeys });
+if (!untrack(() => initialValues)) {
+    addColumn({ name: 'id', primaryKey: untrack(() => features)?.primaryKeys });
 }
 const errors = $derived(validate(values, dbSchema));
 let askingForConfirmation = $state();

package/package/components/DatatablePicker.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import { WorkspaceService } from '../gen';
+import { workspaceStore } from '../stores';
+import Select from './select/Select.svelte';
+import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
+import { usePromise } from '../svelte5Utils.svelte';
+let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
+let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' }));
+</script>
+
+<div class={className}>
+	<Select
+		items={datatables.value?.map((d) => ({ value: d })) ?? []}
+		bind:value
+		loading={datatables.status === 'loading'}
+		{disabled}
+		{disablePortal}
+		{placeholder}
+		inputClass={selectInputClass}
+		{onClear}
+	/>
+	{#if showSchemaExplorer && value && assetCanBeExplored({ kind: 'datatable', path: value })}
+		<ExploreAssetButton
+			class="mt-1 w-fit"
+			asset={{ kind: 'datatable', path: value }}
+		/>
+	{/if}
+</div>

package/package/components/DatatablePicker.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string | undefined;
+    disabled?: boolean;
+    disablePortal?: boolean;
+    showSchemaExplorer?: boolean;
+    placeholder?: string | undefined;
+    selectInputClass?: string;
+    class?: string;
+    onClear?: () => void;
+}
+declare const DatatablePicker: import("svelte").Component<Props, {}, "value">;
+type DatatablePicker = ReturnType<typeof DatatablePicker>;
+export default DatatablePicker;

package/package/components/DateInput.svelte

@@ -46,6 +46,7 @@ function updateValue(newDate) {
 let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full"
 	id={randomId}

package/package/components/DateTimeInput.svelte

@@ -76,6 +76,7 @@ function setTimeLater(mins) {
 let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full relative"
 	id={randomId}
@@ -141,13 +142,13 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 			unifiedSize="md"
 			wrapperClasses="h-full"
 			{disabled}
+			iconOnly
+			endIcon={{ icon: X }}
 			on:click={() => {
 				value = null
 				dispatch('clear')
 			}}
-		>
-			<X size={14} />
-		</Button>
+		></Button>
 	{/if}
 	<!-- <div>
 		<ToggleButtonGroup bind:selected={format} let:item>

package/package/components/DedicatedWorkersSelector.svelte

@@ -7,6 +7,7 @@ import Badge from './common/badge/Badge.svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { untrack } from 'svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
+import { parseTag } from './dedicated_worker';
 let { selectedTags = $bindable([]), disabled = false, onchange } = $props();
 let selectedWorkspace = $state(undefined);
 let runnables = $state([]);
@@ -16,21 +17,7 @@ let workspacesLoading = $state(true);
 let selectorExpanded = $state(false);
 let selectedTagsInfo = $state(new SvelteMap());
 // Languages that support dedicated workers
-const DEDICATED_WORKER_LANGUAGES = ['python3', 'bun', 'deno'];
-// Parse a tag to extract workspace, type (script/flow), and path
-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 };
-    }
-}
+const DEDICATED_WORKER_LANGUAGES = ['python3', 'bun', 'bunnative', 'deno'];
 // Resolve workspace script languages and filter to supported languages
 async function resolveAndFilterRunners(workspace, preliminaryRunners) {
     const runnersWithLanguage = await Promise.all(preliminaryRunners.map(async (runner) => {
@@ -362,25 +349,27 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 							{:else}
 								<div class="w-7"></div>
 							{/if}
-							<div class="flex-1 flex items-center gap-2 px-2 py-1.5 min-w-0">
-								{#if info}
-									{#if info.type === 'flow'}
-										<BarsStaggered size={14} class="flex-shrink-0 text-secondary" />
+							<div class="flex-1 flex flex-col gap-0.5 px-2 py-1.5 min-w-0">
+								<div class="flex items-center gap-2 min-w-0">
+									{#if info}
+										{#if info.type === 'flow'}
+											<BarsStaggered size={14} class="flex-shrink-0 text-secondary" />
+										{:else}
+											<CodeXml size={14} class="flex-shrink-0 text-secondary" />
+										{/if}
+										<span class="text-xs truncate flex-1 min-w-0">{info.path}</span>
+										<span class="text-xs text-tertiary flex-shrink-0">({info.workspace})</span>
+										{#if info.type === 'flow' && info.runners}
+											<Badge color="indigo" small>
+												{info.runners.length} runner{info.runners.length !== 1 ? 's' : ''}
+											</Badge>
+										{:else if info.type === 'script'}
+											<Badge color="blue" small>1 runner</Badge>
+										{/if}
 									{:else}
-										<CodeXml size={14} class="flex-shrink-0 text-secondary" />
+										<span class="text-xs text-tertiary truncate">{tag}</span>
 									{/if}
-									<span class="text-xs truncate flex-1">{info.path}</span>
-									<span class="text-xs text-tertiary flex-shrink-0">({info.workspace})</span>
-									{#if info.type === 'flow' && info.runners}
-										<Badge color="indigo" small>
-											{info.runners.length} runner{info.runners.length !== 1 ? 's' : ''}
-										</Badge>
-									{:else if info.type === 'script'}
-										<Badge color="blue" small>1 runner</Badge>
-									{/if}
-								{:else}
-									<span class="text-xs text-tertiary truncate">{tag}</span>
-								{/if}
+								</div>
 							</div>
 							{#if !disabled}
 								<button
@@ -398,10 +387,14 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 						{#if info?.type === 'flow' && info.expanded && info.runners}
 							<div class="bg-surface-secondary border-t">
 								{#each info.runners as runner (runner.stepId)}
-									<div class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0">
-										<span class="font-mono text-tertiary">{runner.stepId}</span>
+									<div
+										class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0 min-w-0"
+									>
+										<span class="font-mono text-tertiary flex-shrink-0">{runner.stepId}</span>
 										{#if runner.stepSummary}
-											<span class="text-secondary truncate flex-1">{runner.stepSummary}</span>
+											<span class="text-secondary truncate flex-1 min-w-0"
+												>{runner.stepSummary}</span
+											>
 										{/if}
 										<Badge color="gray" small>
 											{runner.isInline ? runner.language : runner.scriptPath}
@@ -501,7 +494,7 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 												<div class="w-7"></div>
 											{/if}
 											<button
-												class="flex-1 flex items-center gap-2 px-2 py-1.5 hover:bg-surface-hover transition-colors text-left"
+												class="flex-1 flex items-center gap-2 px-2 py-1.5 hover:bg-surface-hover transition-colors text-left min-w-0"
 												onclick={(e) => {
 													e.stopPropagation()
 													if (!disabled) toggleRunnable(runnable)
@@ -517,9 +510,11 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 														<Check class="h-3 w-3 text-white" />
 													{/if}
 												</div>
-												<span class="flex-1 text-xs truncate">{runnable.displayName}</span>
+												<span class="flex-1 text-xs truncate min-w-0"
+													>{runnable.displayName}</span
+												>
 												{#if runnable.type === 'flow' && runnable.runners}
-													<span class="text-xs text-tertiary">
+													<span class="text-xs text-tertiary flex-shrink-0">
 														{runnable.runners.length}
 													</span>
 												{/if}
@@ -533,16 +528,18 @@ let selectedCount = $derived(runnables.filter((r) => r.selected).length);
 											<div class="bg-surface-secondary border-t">
 												{#if runnable.runners.length === 0}
 													<div class="px-9 py-1.5 text-xs text-tertiary italic">
-														No eligible steps (python3/bun/deno)
+														No eligible steps (python3/bun/bunnative/deno)
 													</div>
 												{:else}
 													{#each runnable.runners as runner (runner.stepId)}
 														<div
-															class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0"
+															class="flex items-center gap-2 px-9 py-1 text-xs border-t first:border-t-0 min-w-0"
 														>
-															<span class="font-mono text-tertiary">{runner.stepId}</span>
+															<span class="font-mono text-tertiary flex-shrink-0"
+																>{runner.stepId}</span
+															>
 															{#if runner.stepSummary}
-																<span class="text-secondary truncate flex-1">
+																<span class="text-secondary truncate flex-1 min-w-0">
 																	{runner.stepSummary}
 																</span>
 															{/if}

package/package/components/DefaultScripts.svelte

@@ -4,15 +4,13 @@ import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
-let drawer;
-export let placement = 'left';
-export let size = 'xs2';
-export let noText = false;
+let { placement = 'left', size = 'xs2', noText = false } = $props();
+let drawer = $state();
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
 	<Drawer bind:this={drawer} {placement}>
-		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+		<DrawerContent title="Edit Default Scripts" on:close={drawer?.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
 	</Drawer>

package/package/components/DefaultScripts.svelte.d.ts

@@ -1,22 +1,8 @@
-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 DefaultScripts: $$__sveltets_2_IsomorphicComponent<{
-    placement?: "left" | "right";
-    size?: "xs3" | "xs2";
+interface Props {
+    placement?: 'left' | 'right';
+    size?: 'xs3' | 'xs2';
     noText?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DefaultScripts = InstanceType<typeof DefaultScripts>;
+}
+declare const DefaultScripts: import("svelte").Component<Props, {}, "">;
+type DefaultScripts = ReturnType<typeof DefaultScripts>;
 export default DefaultScripts;

package/package/components/DefaultScriptsInner.svelte

@@ -4,8 +4,7 @@ import { flip } from 'svelte/animate';
 import Toggle from './Toggle.svelte';
 import { defaultScriptLanguages } from '../scripts';
 import Alert from './common/alert/Alert.svelte';
-export let small = false;
-$: langs = computeLangs($defaultScripts);
+let { small = false } = $props();
 function computeLangs(defaultScripts) {
     const allLangs = Object.keys(defaultScriptLanguages);
     if (!defaultScripts || defaultScripts.order == undefined)
@@ -30,6 +29,7 @@ async function changePosition(i, up) {
         requestBody: $defaultScripts
     });
 }
+let langs = $derived(computeLangs($defaultScripts));
 </script>
 
 <Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
@@ -47,7 +47,7 @@ async function changePosition(i, up) {
 			<div>
 				{#if i > 0}
 					<button
-						on:click={() => changePosition(i ?? 0, true)}
+						onclick={() => changePosition(i ?? 0, true)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move up"
 					>
@@ -56,7 +56,7 @@ async function changePosition(i, up) {
 				{/if}
 				{#if i < langs.length - 1}
 					<button
-						on:click={() => changePosition(i ?? 0, false)}
+						onclick={() => changePosition(i ?? 0, false)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move down">&downarrow;</button
 					>

package/package/components/DefaultScriptsInner.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 DefaultScriptsInner: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     small?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DefaultScriptsInner = InstanceType<typeof DefaultScriptsInner>;
+}
+declare const DefaultScriptsInner: import("svelte").Component<Props, {}, "">;
+type DefaultScriptsInner = ReturnType<typeof DefaultScriptsInner>;
 export default DefaultScriptsInner;