windmill-components 1.623.1 → 1.642.0

package/package/components/CustomSso.svelte

@@ -24,7 +24,7 @@ $: if (!login_config) {
 }
 </script>
 
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Auth URL</span>
 	<input
 		type="text"
@@ -32,7 +32,7 @@ $: if (!login_config) {
 		bind:value={login_config.auth_url}
 	/>
 </label>
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Token URL</span>
 	<input
 		type="text"
@@ -40,7 +40,7 @@ $: if (!login_config) {
 		bind:value={login_config.token_url}
 	/>
 </label>
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Userinfo URL</span>
 	<input
 		type="text"
@@ -49,12 +49,12 @@ $: if (!login_config) {
 	/>
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
 			>Not needed in most cases. Examples of uses: google apis require the 2 extra args
@@ -64,14 +64,14 @@ $: if (!login_config) {
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label class="block pb-2">
+<label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
 			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using

package/package/components/DBManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import {} from '../stores';
-import { ChevronDownIcon, MoreVertical, Plus, Table2, Trash2Icon } from 'lucide-svelte';
+import { ChevronDownIcon, EditIcon, Loader2, Plus, Table2, Trash2Icon } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { ClearableInput, Drawer, DrawerContent } from './common';
 import { sendUserToast } from '../toast';
@@ -12,7 +12,11 @@ import DbTableEditor from './DBTableEditor.svelte';
 import Portal from './Portal.svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
-let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, getColDefs, dbSupportsSchemas, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
+import { dbSupportsTransactionalDdl, diffTableEditorValues } from './apps/components/display/dbtable/queries/alterTable';
+import { resource } from 'runed';
+import { capitalize, onlyAlphaNumAndUnderscore, pluralize } from '../utils';
+import Star from './Star.svelte';
+let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features, asset } = $props();
 // Helper to check if a table is selected in multi-select mode
 function isTableSelected(schema, table) {
     return selectedTables.some((t) => t.schema === schema && t.table === table);
@@ -119,15 +123,34 @@ let tableKey = $derived(dbSupportsSchemas && selected.schemaKey
     ? `${selected.schemaKey}.${selected.tableKey}`
     : selected.tableKey);
 let askingForConfirmation = $state();
-let dbTableEditorState = $state({ open: false });
+let dbTableEditorState = $state({
+    open: false
+});
+let dbTableEditorAlterTableData = resource([() => dbTableEditorState.alterTableKey, () => colDefs], async ([table]) => {
+    if (!table)
+        return;
+    let tableKey2 = dbSupportsSchemas && selected.schemaKey ? `${selected.schemaKey}.${table}` : table;
+    if (!colDefs?.[tableKey2])
+        return;
+    return await dbSchemaOps.onFetchTableEditorDefinition({
+        table: table,
+        schema: selected.schemaKey,
+        colDefs: colDefs[tableKey2]
+    });
+});
 let newSchemaDialogOpen = $state(false);
 let newSchemaName = $state('');
 // Check if the sanitized schema name already exists
-const sanitizedNewSchemaName = $derived(newSchemaName
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-zA-Z0-9_]/g, ''));
-const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys.includes(sanitizedNewSchemaName));
+const sanitizedNewSchemaName = $derived.by(() => {
+    let s = newSchemaName.trim().replace(/[^a-zA-Z0-9_]/g, '');
+    if (dbType === 'snowflake')
+        s = s.toUpperCase();
+    return s;
+});
+const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' &&
+    schemaKeys.map((s) => s.toLowerCase()).includes(sanitizedNewSchemaName.toLowerCase()));
+let _dbTable = $state();
+export const dbTable = () => _dbTable;
 </script>
 
 <Splitpanes>
@@ -140,20 +163,20 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 				<Select
 					bind:value={selected.schemaKey}
 					items={safeSelectItems(schemaKeys)}
+					id="db-schema-select"
 					transformInputSelectedText={(s) => `Schema: ${s}`}
 					RightIcon={ChevronDownIcon}
 					placeholder="Search or create schema..."
 					showPlaceholderOnOpen
 					onCreateItem={(schema) => {
-						schema = schema
-							.trim()
-							.toLowerCase()
-							.replace(/[^a-zA-Z0-9_]/g, '')
+						schema = schema.trim().replace(/[^a-zA-Z0-9_]/g, '')
+						if (dbType === 'snowflake') schema = schema.toUpperCase()
 						askingForConfirmation = {
 							confirmationText: `Create ${schema}`,
 							type: 'reload',
 							title: `This will run 'CREATE SCHEMA ${schema}' on your database. Are you sure ?`,
 							open: true,
+							id: 'db-create-schema-confirmation-modal',
 							onConfirm: async () => {
 								askingForConfirmation && (askingForConfirmation.loading = true)
 								try {
@@ -224,7 +247,9 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 						<span class="truncate text-ellipsis grow text-left text-tertiary text-xs"
 							>{schemaKey}</span
 						>
-						<span class="text-2xs text-tertiary mr-2 group-hover:hidden">{schemaTables.length}</span>
+						<span class="text-2xs text-tertiary mr-2 group-hover:hidden">
+							{schemaTables.length}
+						</span>
 						<!-- Delete schema button (on hover) -->
 						<button
 							class="hidden group-hover:flex p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors mr-1"
@@ -258,7 +283,8 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 					{#each schemaTables as tableKey}
 						{@const isDisabled = isTableDisabled(schemaKey, tableKey)}
 						{@const isChecked = isTableSelected(schemaKey, tableKey) || isDisabled}
-						{@const isCurrentPreview = selected.schemaKey === schemaKey && selected.tableKey === tableKey}
+						{@const isCurrentPreview =
+							selected.schemaKey === schemaKey && selected.tableKey === tableKey}
 						<div
 							class={'group w-full text-sm font-normal flex gap-2 items-center h-8 cursor-pointer pl-7 pr-1 ' +
 								(isCurrentPreview ? 'bg-gray-500/25' : 'hover:bg-gray-500/10') +
@@ -335,13 +361,26 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 			{:else}
 				<!-- Normal mode: show tables for selected schema -->
 				{#each filteredTableKeys as tableKey}
+					<!-- PLACEHOLDER -->
 					<button
 						class={'w-full text-sm font-normal flex gap-2 items-center h-10 cursor-pointer pl-3 pr-1 ' +
-							(selected.tableKey === tableKey ? 'bg-gray-500/25' : 'hover:bg-gray-500/10')}
+							(selected.tableKey === tableKey ? 'bg-surface-secondary' : 'hover:bg-surface-hover')}
 						onclick={() => (selected.tableKey = tableKey)}
 					>
-						<Table2 class="text-primary shrink-0" size={16} />
-						<p class="truncate text-ellipsis grow text-left text-emphasis text-xs">{tableKey}</p>
+						{#if asset}
+							<Star
+								kind="asset"
+								path={`${asset.kind}://${asset.path == 'main' ? '' : asset.path}/${selected.schemaKey}.${tableKey}`}
+							/>
+						{:else}
+							<Table2 class="text-primary shrink-0" size={14} />
+						{/if}
+
+						<p
+							class="db-manager-table-key truncate text-ellipsis grow text-left text-emphasis text-xs"
+						>
+							{tableKey}
+						</p>
 						<DropdownV2
 							items={() => [
 								{
@@ -352,6 +391,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 											title: `Are you sure you want to delete ${tableKey} ? This action is irreversible`,
 											confirmationText: 'Delete permanently',
 											open: true,
+											id: 'db-manager-delete-table-confirmation-modal',
 											onConfirm: async () => {
 												askingForConfirmation && (askingForConfirmation.loading = true)
 												try {
@@ -366,17 +406,21 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 												askingForConfirmation = undefined
 											}
 										})
+								},
+								{
+									displayName: 'Alter table',
+									icon: EditIcon,
+									action: () => {
+										dbTableEditorState = {
+											open: true,
+											alterTableKey: tableKey
+										}
+									}
 								}
 							]}
 							class="w-fit"
-						>
-							<svelte:fragment slot="buttonReplacement">
-								<MoreVertical
-									size={8}
-									class="w-8 h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
-								/>
-							</svelte:fragment>
-						</DropdownV2>
+							btnId={'db-manager-table-actions-' + onlyAlphaNumAndUnderscore(tableKey)}
+						/>
 					</button>
 				{/each}
 			{/if}
@@ -393,13 +437,9 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 		{/if}
 	</Pane>
 	<Pane class="p-3 pt-1">
-		{#if tableKey}
-			{#await getColDefs(tableKey) then colDefs}
-				{#if colDefs && colDefs?.length}
-					{@const dbTableOps = dbTableOpsFactory({ colDefs, tableKey })}
-					<DBTable {dbTableOps} />
-				{/if}
-			{/await}
+		{#if tableKey && colDefs?.[tableKey]?.length}
+			{@const dbTableOps = dbTableOpsFactory({ colDefs: colDefs[tableKey], tableKey })}
+			<DBTable {dbTableOps} bind:this={_dbTable} />
 		{/if}
 	</Pane>
 </Splitpanes>
@@ -417,18 +457,79 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 	open={dbTableEditorState.open}
 	on:close={() => (dbTableEditorState = { open: false })}
 >
-	<DrawerContent on:close={() => (dbTableEditorState = { open: false })} title="Create a new table">
-		<DbTableEditor
-			{dbSchema}
-			currentSchema={selected.schemaKey}
-			onConfirm={async (values) => {
-				await dbSchemaOps.onCreate({ values, schema: selected.schemaKey })
-				refresh?.()
-				dbTableEditorState = { open: false }
-			}}
-			{dbType}
-			previewSql={(values) => dbSchemaOps.previewCreateSql({ values, schema: selected.schemaKey })}
-		/>
+	<DrawerContent
+		id="db-table-editor-drawer"
+		on:close={() => (dbTableEditorState = { open: false })}
+		title={dbTableEditorState.alterTableKey
+			? `Alter ${dbTableEditorState.alterTableKey}`
+			: 'Create a new table'}
+	>
+		{#key dbTableEditorState.alterTableKey}
+			{#if !dbTableEditorState.alterTableKey || dbTableEditorAlterTableData.current}
+				<DbTableEditor
+					{features}
+					{dbSchema}
+					currentSchema={selected.schemaKey}
+					initialValues={dbTableEditorAlterTableData.current}
+					onConfirm={async ({ values }) => {
+						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
+							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
+							await dbSchemaOps.onAlter({ schema: selected.schemaKey, values: diff })
+						} else {
+							await dbSchemaOps.onCreate({ values, schema: selected.schemaKey })
+						}
+						refresh?.()
+						sendUserToast(
+							dbTableEditorState.alterTableKey
+								? dbTableEditorState.alterTableKey + ' updated!'
+								: values.name + ' created!'
+						)
+						dbTableEditorState = { open: false }
+					}}
+					{dbType}
+					computePreview={({ values }) => {
+						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
+							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
+							let queries = dbSchemaOps.previewAlterSql({
+								values: diff,
+								schema: selected.schemaKey
+							})
+							let alert = !dbSupportsTransactionalDdl(dbType)
+								? {
+										title: capitalize(dbType) + ' does not support transactional DDL',
+										body: 'Any of these statements failing may leave your database in an intermediate state.'
+									}
+								: undefined
+							return { sql: queries.join('\n'), ...(alert ? { alert } : {}) }
+						} else {
+							return { sql: dbSchemaOps.previewCreateSql({ values, schema: selected.schemaKey }) }
+						}
+					}}
+					computeBtnProps={({ values }) => {
+						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
+							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
+							let queries = dbSchemaOps.previewAlterSql({
+								values: diff,
+								schema: selected.schemaKey
+							})
+							if (!queries.length) {
+								return { text: 'No changes detected', disabled: true }
+							}
+							return {
+								text: `Alter table (${pluralize(queries.length, 'change')} detected)`
+							}
+						} else {
+							return { text: 'Create table' }
+						}
+					}}
+				/>
+			{:else if dbTableEditorAlterTableData.loading || !colDefs}
+				<Loader2 class="animate-spin" size={32} />
+			{:else}
+				<p class="text-sm text-tertiary">Failed to load table definition.</p>
+				<p>{dbTableEditorAlterTableData.error}</p>
+			{/if}
+		{/key}
 	</DrawerContent>
 </Drawer>
 
@@ -463,6 +564,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 								type: 'reload',
 								title: `This will run 'CREATE SCHEMA ${sanitizedNewSchemaName}' on your database. Are you sure?`,
 								open: true,
+								id: 'db-create-schema-confirmation-modal',
 								onConfirm: async () => {
 									askingForConfirmation && (askingForConfirmation.loading = true)
 									try {
@@ -500,6 +602,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 						type: 'reload',
 						title: `This will run 'CREATE SCHEMA ${sanitizedNewSchemaName}' on your database. Are you sure?`,
 						open: true,
+						id: 'db-create-schema-confirmation-modal',
 						onConfirm: async () => {
 							askingForConfirmation && (askingForConfirmation.loading = true)
 							try {

package/package/components/DBManager.svelte.d.ts

@@ -3,6 +3,8 @@ import { type ColumnDef } from './apps/components/display/dbtable/utils';
 import type { IDbSchemaOps, IDbTableOps } from './dbOps';
 import type { DbType } from './dbTypes';
 import type { Snippet } from 'svelte';
+import type { DbFeatures } from './apps/components/display/dbtable/dbFeatures';
+import type { Asset } from '../gen';
 /** Represents a selected table with its schema */
 export interface SelectedTable {
     schema: string;
@@ -12,7 +14,7 @@ type Props = {
     dbType: DbType;
     dbSchema: DBSchema;
     dbSupportsSchemas: boolean;
-    getColDefs: (tableKey: string) => Promise<ColumnDef[]>;
+    colDefs: Record<string, ColumnDef[]> | undefined;
     dbTableOpsFactory: (params: {
         colDefs: ColumnDef[];
         tableKey: string;
@@ -30,7 +32,18 @@ type Props = {
     selectedTables?: SelectedTable[];
     /** Tables that are already added and should show as disabled */
     disabledTables?: SelectedTable[];
+    features?: DbFeatures;
+    asset?: Asset;
 };
-declare const DBManager: import("svelte").Component<Props, {}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables">;
+declare const DBManager: import("svelte").Component<Props, {
+    dbTable: () => ({
+        $on?(type: string, callback: (e: any) => void): () => void;
+        $set?(props: Partial<{
+            dbTableOps: IDbTableOps;
+        }>): void;
+    } & {
+        refresh: () => number;
+    }) | undefined;
+}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables">;
 type DBManager = ReturnType<typeof DBManager>;
 export default DBManager;

package/package/components/DBManagerContent.svelte

@@ -7,10 +7,12 @@ import { dbSchemaOpsWithPreviewScripts, dbTableOpsWithPreviewScripts, getDbType,
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SqlRepl from './SqlRepl.svelte';
 import SimpleAgTable from './SimpleAgTable.svelte';
-import { untrack } from 'svelte';
-import { getDbSchemas, loadAllTablesMetaData, loadTableMetaData } from './apps/components/display/dbtable/metadata';
-let { input, showRepl = true, hasReplResult = $bindable(false), isRefreshing = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
-let dbSchema = $derived($dbSchemas[getDbSchemasPath(input)]);
+import {} from 'svelte';
+import { getDbSchemas, loadAllTablesMetaData } from './apps/components/display/dbtable/metadata';
+import { getDbFeatures } from './apps/components/display/dbtable/dbFeatures';
+import { resource } from 'runed';
+let { input, showRepl = true, hasReplResult = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
+let dbSchema = $derived(input && $dbSchemas[getDbSchemasPath(input)]);
 function getDbSchemasPath(input) {
     switch (input.type) {
         case 'database':
@@ -19,39 +21,17 @@ function getDbSchemasPath(input) {
             return 'ducklake://' + input.ducklake;
     }
 }
-// `refreshCount` is a derived state. `refreshing` is the source of truth
-let refreshCount = $state(0);
-$effect(() => {
-    if (refreshing)
-        untrack(() => (refreshCount += 1));
-});
-let refreshing = $state(false);
-$effect(() => {
-    if (refreshing)
-        getSchema();
-});
-// Sync refreshing state with bindable prop
-$effect(() => {
-    isRefreshing = refreshing;
-});
-export const refresh = () => !refreshing && (refreshing = true);
-// Initial schema load
-$effect(() => {
-    if (input) {
-        untrack(() => getSchema());
-    }
+let colDefs = resource(() => [input], async () => {
+    if (!input)
+        return;
+    return await loadAllTablesMetaData($workspaceStore, input);
 });
-async function getSchema() {
+let dbSchemasPromise = resource(() => [input], async () => {
     if (!input)
         return;
     const dbSchemasPath = getDbSchemasPath(input);
-    if ($dbSchemas[dbSchemasPath] && !refreshing)
-        return;
-    const oldDbSchema = $dbSchemas[dbSchemasPath];
     if (input.type == 'database') {
-        await getDbSchemas(input.resourceType, input.resourcePath, $workspaceStore, $dbSchemas, (message) => {
-            sendUserToast(message, true);
-        });
+        $dbSchemas[dbSchemasPath] = await getDbSchemas(input.resourceType, input.resourcePath, $workspaceStore, (message) => sendUserToast(message, true));
     }
     else if (input.type == 'ducklake') {
         $dbSchemas[dbSchemasPath] = await getDucklakeSchema({
@@ -59,11 +39,13 @@ async function getSchema() {
             ducklake: input.ducklake
         });
     }
-    // avoid infinite loop on error due to the way getDbSchemas is implemented
-    // and relying on an assignement side effect
-    if (oldDbSchema !== $dbSchemas[dbSchemasPath])
-        $dbSchemas = $dbSchemas;
-    refreshing = false;
+});
+export const refresh = () => {
+    colDefs.refetch();
+    dbSchemasPromise.refetch();
+};
+export function isLoading() {
+    return colDefs.loading || dbSchemasPromise.loading;
 }
 let replPanelSize = $state(36);
 const REPL_MIN_SIZE = 1.5;
@@ -72,34 +54,12 @@ let replResultData = $state(undefined);
 $effect(() => {
     hasReplResult = !!replResultData;
 });
-let cachedColDefs = {};
-let cachedLastRefreshCount = 0;
-async function getColDefs(tableKey) {
-    if (cachedLastRefreshCount !== refreshCount)
-        cachedColDefs = {};
-    cachedLastRefreshCount = refreshCount;
-    if (cachedColDefs[tableKey])
-        return cachedColDefs[tableKey];
-    if (!input)
-        return [];
-    try {
-        cachedColDefs = (await loadAllTablesMetaData($workspaceStore, input)) ?? cachedColDefs;
-        return cachedColDefs[tableKey];
-    }
-    catch (e) {
-        if (input?.type == 'ducklake')
-            throw 'Impossible that loadAllTablesMetaData fails for Ducklake';
-        // Query is not implemented for all dbs, need a fallback
-        const result = await loadTableMetaData(input, $workspaceStore, tableKey);
-        if (result)
-            cachedColDefs[tableKey] = result;
-        return result ?? [];
-    }
-}
 // Export for parent components
 export function clearReplResult() {
     replResultData = undefined;
 }
+let _dbManager = $state();
+export const dbManager = () => _dbManager;
 </script>
 
 <svelte:window
@@ -138,9 +98,9 @@ export function clearReplResult() {
 				{/if}
 			</div>
 			<DbManager
-				dbSupportsSchemas={input.type == 'database' && dbSupportsSchemas(input.resourceType)}
+				dbSupportsSchemas={input?.type == 'database' && dbSupportsSchemas(input.resourceType)}
 				{dbSchema}
-				{getColDefs}
+				colDefs={colDefs.current}
 				dbTableOpsFactory={({ colDefs, tableKey }) =>
 					dbTableOpsWithPreviewScripts({
 						colDefs,
@@ -154,6 +114,11 @@ export function clearReplResult() {
 				})}
 				initialTableKey={input.specificTable}
 				initialSchemaKey={input.type == 'database' ? input.specificSchema : undefined}
+				asset={_input.type == 'ducklake'
+					? { kind: 'ducklake', path: _input.ducklake }
+					: _input.resourcePath.startsWith('datatable://')
+						? { kind: 'datatable', path: _input.resourcePath.substring('datatable://'.length) }
+						: undefined}
 				{dbType}
 				refresh={() => refresh()}
 				{dbSelector}
@@ -161,7 +126,9 @@ export function clearReplResult() {
 				bind:selectedTableKey
 				{multiSelectMode}
 				bind:selectedTables
+				bind:this={_dbManager}
 				{disabledTables}
+				features={getDbFeatures(input)}
 			/>
 		</Pane>
 		{#if showRepl}

package/package/components/DBManagerContent.svelte.d.ts

@@ -1,11 +1,11 @@
+import { type DBSchema } from '../stores';
 import { type Snippet } from 'svelte';
 import type { DbInput } from './dbTypes';
 import type { SelectedTable } from './DBManager.svelte';
 interface Props {
-    input: DbInput;
+    input?: DbInput;
     showRepl?: boolean;
     hasReplResult?: boolean;
-    isRefreshing?: boolean;
     selectedSchemaKey?: string | undefined;
     selectedTableKey?: string | undefined;
     dbSelector?: Snippet<[]>;
@@ -17,8 +17,43 @@ interface Props {
     disabledTables?: SelectedTable[];
 }
 declare const DBManagerContent: import("svelte").Component<Props, {
-    refresh: () => boolean;
+    refresh: () => void;
+    isLoading: () => boolean;
     clearReplResult: () => void;
-}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables" | "hasReplResult" | "isRefreshing">;
+    dbManager: () => ({
+        $on?(type: string, callback: (e: any) => void): () => void;
+        $set?(props: Partial<{
+            dbType: import("./dbTypes").DbType;
+            dbSchema: DBSchema;
+            dbSupportsSchemas: boolean;
+            colDefs: Record<string, import("./apps/components/display/dbtable/utils").ColumnDef[]> | undefined;
+            dbTableOpsFactory: (params: {
+                colDefs: import("./apps/components/display/dbtable/utils").ColumnDef[];
+                tableKey: string;
+            }) => import("./dbOps").IDbTableOps;
+            dbSchemaOps: import("./dbOps").IDbSchemaOps;
+            refresh?: () => void;
+            initialSchemaKey?: string;
+            initialTableKey?: string;
+            selectedSchemaKey?: string | undefined;
+            selectedTableKey?: string | undefined;
+            dbSelector?: Snippet<[]>;
+            multiSelectMode?: boolean;
+            selectedTables?: SelectedTable[];
+            disabledTables?: SelectedTable[];
+            features?: import("./apps/components/display/dbtable/dbFeatures").DbFeatures;
+            asset?: import("../gen").Asset;
+        }>): void;
+    } & {
+        dbTable: () => ({
+            $on?(type: string, callback: (e: any) => void): () => void;
+            $set?(props: Partial<{
+                dbTableOps: import("./dbOps").IDbTableOps;
+            }>): void;
+        } & {
+            refresh: () => number;
+        }) | undefined;
+    }) | undefined;
+}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables" | "hasReplResult">;
 type DBManagerContent = ReturnType<typeof DBManagerContent>;
 export default DBManagerContent;

package/package/components/DBManagerDrawer.svelte

@@ -59,6 +59,8 @@ export function closeDrawer() {
     input = undefined;
     selectedDatatable = undefined;
     dbManagerContent?.clearReplResult();
+    if (window.location.hash.startsWith('#dbmanager:'))
+        history.replaceState('', document.title, window.location.href.replace(/#dbmanager:.*$/, ''));
 }
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);
@@ -68,7 +70,6 @@ $effect(() => {
 });
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
-let isRefreshing = $state(false);
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -91,15 +92,11 @@ let isRefreshing = $state(false);
 		}}
 		CloseIcon={hasReplResult ? ArrowLeft : undefined}
 		noPadding
+		id="db-manager-drawer"
 	>
 		{#if effectiveInput && $workspaceStore}
 			{#key selectedDatatable}
-				<DBManagerContent
-					bind:this={dbManagerContent}
-					input={effectiveInput}
-					bind:hasReplResult
-					bind:isRefreshing
-				>
+				<DBManagerContent bind:this={dbManagerContent} input={effectiveInput} bind:hasReplResult>
 					{#snippet dbSelector()}
 						{#if isDatatableInput}
 							{#if datatables.loading}
@@ -123,8 +120,11 @@ let isRefreshing = $state(false);
 		{/if}
 		{#snippet actions()}
 			<Button
-				loading={isRefreshing}
-				on:click={() => dbManagerContent?.refresh()}
+				loading={dbManagerContent?.isLoading() ?? false}
+				on:click={() => {
+					dbManagerContent?.refresh()
+					dbManagerContent?.dbManager()?.dbTable()?.refresh()
+				}}
 				startIcon={{ icon: RefreshCcw }}
 				size="xs"
 				color="light"

package/package/components/DBTable.svelte

@@ -37,7 +37,7 @@ let datasource = {
 };
 let rowCount = $state(0);
 let refreshCount = $state(0);
-const refresh = () => (refreshCount += 1);
+export const refresh = () => (refreshCount += 1);
 $effect(() => eGui && untrack(() => mountGrid()));
 function mountGrid() {
     if (eGui && !api) {

package/package/components/DBTable.svelte.d.ts

@@ -5,6 +5,8 @@ import './apps/components/display/table/theme/windmill-theme.css';
 type Props = {
     dbTableOps: IDbTableOps;
 };
-declare const DBTable: import("svelte").Component<Props, {}, "">;
+declare const DBTable: import("svelte").Component<Props, {
+    refresh: () => number;
+}, "">;
 type DBTable = ReturnType<typeof DBTable>;
 export default DBTable;