windmill-components 1.511.0 → 1.522.0

package/package/components/AppConnectInner.svelte.d.ts

@@ -30,6 +30,6 @@ declare const AppConnectInner: $$__sveltets_2_IsomorphicComponent<Props, {
     loadResourceTypes: () => Promise<void>;
     next: () => Promise<void>;
     back: () => Promise<void>;
-}, "step" | "disabled" | "resourceType" | "manual" | "isGoogleSignin">;
+}, "step" | "disabled" | "manual" | "resourceType" | "isGoogleSignin">;
 type AppConnectInner = InstanceType<typeof AppConnectInner>;
 export default AppConnectInner;

package/package/components/ArgInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
-import { DollarSign, Plus, X, Check, Loader2 } from 'lucide-svelte';
+import { DollarSign, Plus, X, Check, Loader2, ExternalLink } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 import { Button, SecondsInput } from './common';
@@ -27,6 +27,7 @@ import DynSelect from './DynSelect.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
+import { base } from '../base';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -156,7 +157,7 @@ function evalValueToRaw() {
     }
     const newRawValue = value == undefined || value == null
         ? ''
-        : isObjectCat(inputCat)
+        : isObjectCat(inputCat) || (inputCat == 'list' && isListJson)
             ? JSON.stringify(value, null, 2)
             : isRawStringEditor(inputCat)
                 ? typeof value == 'string'
@@ -323,6 +324,32 @@ onDestroy(() => {
 });
 </script>
 
+{#snippet variableInput()}
+	{#if variableEditor}
+		<div class="text-sm text-tertiary">
+			{#if value && typeof value == 'string' && value?.startsWith('$var:')}
+				Linked to variable <button
+					class="text-blue-500 underline"
+					onclick={() => variableEditor?.editVariable?.(value.slice(5))}>{value.slice(5)}</button
+				>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+{#snippet resourceInput()}
+	{#if variableEditor}
+		<div class="text-sm text-tertiary">
+			{#if value && typeof value == 'string' && value?.startsWith('$res:')}
+				Linked to resource <a
+					target="_blank"
+					href="{base}/resources#/resource/{value.slice(5)}"
+					class="text-blue-500 underline"
+					>{value.slice(5)} <span class="inline-block -mb-0.5"><ExternalLink size={14} /></span></a
+				>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
 <!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
@@ -510,7 +537,7 @@ onDestroy(() => {
 														onchange={(x) => fileChanged(x, (val) => (value[i] = val))}
 														multiple={false}
 													/>
-												{:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined}
+												{:else if itemsType?.type == 'object' && itemsType?.resourceType === undefined && itemsType?.properties === undefined && !(format?.startsWith('resource-') && resourceTypes?.includes(format.split('-')[1]))}
 													{#await import('./JsonEditor.svelte')}
 														<Loader2 class="animate-spin" />
 													{:then Module}
@@ -536,10 +563,16 @@ onDestroy(() => {
 														enum_={itemsType?.enum ?? []}
 														enumLabels={extra['enumLabels']}
 													/>
-												{:else if itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)}
+												{:else if (itemsType?.type == 'resource' && itemsType?.resourceType && resourceTypes?.includes(itemsType.resourceType)) || (format?.startsWith('resource-') && resourceTypes?.includes(format.split('-')[1]))}
+													{@const resourceFormat =
+														itemsType?.type == 'resource' &&
+														itemsType.resourceType &&
+														resourceTypes.includes(itemsType.resourceType)
+															? `resource-${itemsType.resourceType}`
+															: format!}
 													<ObjectResourceInput
 														bind:value={value[i]}
-														format={'resource-' + itemsType?.resourceType}
+														format={resourceFormat}
 														defaultValue={undefined}
 													/>
 												{:else if itemsType?.type == 'resource'}
@@ -591,6 +624,15 @@ onDestroy(() => {
 											>{itemsLimit}/{value.length}: Load 50 more...</button
 										>
 									{/if}
+								{:else if typeof value === 'string'}
+									{#if value.startsWith('$res:')}
+										{@render resourceInput()}
+									{:else}
+										<div class="text-red-500">
+											Invalid string value: "{value}", expected array. Click add item to turn it
+											into an array.
+										</div>
+									{/if}
 								{/if}
 							{/key}
 						</div>
@@ -607,7 +649,11 @@ onDestroy(() => {
 									if (itemsType?.type == 'number') {
 										value = value.concat(0)
 									} else if (
-										itemsType?.type == 'object' ||
+										(itemsType?.type == 'object' &&
+											!(
+												format?.startsWith('resource-') &&
+												resourceTypes?.includes(format.split('-')[1])
+											)) ||
 										(itemsType?.type == 'resource' &&
 											!(
 												itemsType?.resourceType && resourceTypes?.includes(itemsType?.resourceType)
@@ -647,7 +693,7 @@ onDestroy(() => {
 		{:else if inputCat == 'dynselect'}
 			<DynSelect
 				name={label}
-				args={otherArgs}
+				{otherArgs}
 				{helperScript}
 				bind:value
 				entrypoint={format?.substring('dynselect_'.length) ?? ''}
@@ -657,6 +703,7 @@ onDestroy(() => {
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
+				{disabled}
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst}
 				{disablePortal}
@@ -1057,17 +1104,8 @@ onDestroy(() => {
 						{/if}
 					{/if}
 				</div>
-				{#if variableEditor}
-					<div class="text-sm text-tertiary">
-						{#if value && typeof value == 'string' && value?.startsWith('$var:')}
-							Linked to variable <button
-								class="text-blue-500 underline"
-								onclick={() => variableEditor?.editVariable?.(value.slice(5))}
-								>{value.slice(5)}</button
-							>
-						{/if}
-					</div>
-				{/if}
+				{@render variableInput()}
+				{@render resourceInput()}
 			</div>
 		{/if}
 		{@render actions?.()}

package/package/components/ArgInput.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { EnumType, SchemaProperty } from '../common';
+import { type DynamicSelect } from '../utils';
 import type ItemPicker from './ItemPicker.svelte';
 import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
-import type { Script } from '../gen';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
 interface Props {
@@ -58,15 +58,7 @@ interface Props {
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
-    helperScript?: {
-        type: 'inline';
-        path?: string;
-        lang: Script['language'];
-        code: string;
-    } | {
-        type: 'hash';
-        hash: string;
-    } | undefined;
+    helperScript?: DynamicSelect.HelperScript;
     otherArgs?: Record<string, any>;
     lightHeader?: boolean;
     diffStatus?: SchemaDiff | undefined;

package/package/components/AssignableTagsInner.svelte

@@ -86,6 +86,11 @@ loadCustomTags();
 			>For tags specific to some workspaces, use <pre class="inline">tag(workspace1+workspace2)</pre
 			></span
 		>
+		<span class="text-2xs text-tertiary"
+			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre
+				class="inline">tag(^workspace1^workspace2)</pre
+			></span
+		>
 		<span class="text-2xs text-tertiary"
 			>For dynamic tags based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
 			<pre class="inline">tag-$workspace</pre></span

package/package/components/AuthSettings.svelte

@@ -10,13 +10,14 @@ import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
 import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
+import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
 import { capitalize } from '../utils';
 import Toggle from './Toggle.svelte';
 import { ExternalLink, Plus } from 'lucide-svelte';
 import AzureOauthSettings from './AzureOauthSettings.svelte';
 import Tooltip from './Tooltip.svelte';
-let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), scim } = $props();
+let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim } = $props();
 $effect(() => {
     if (snowflakeAccountIdentifier == undefined) {
         snowflakeAccountIdentifier = '';
@@ -97,8 +98,9 @@ let tab = $state('sso');
 				<AutheliaSetting bind:value={oauths['authelia']} />
 				<KanidmSetting bind:value={oauths['kanidm']} />
 				<ZitadelSetting bind:value={oauths['zitadel']} />
+				<NextcloudSetting bind:value={oauths['nextcloud']} {baseUrl} />
 				{#each Object.keys(oauths) as k}
-					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && 'login_config' in oauths[k]}
 						{#if oauths[k]}
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">

package/package/components/AuthSettings.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     snowflakeAccountIdentifier?: string;
     oauths?: Record<string, any>;
     requirePreexistingUserForOauth?: boolean;
+    baseUrl?: string;
     scim?: import('svelte').Snippet;
 }
 declare const AuthSettings: import("svelte").Component<Props, {}, "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;

package/package/components/DBManagerDrawer.svelte

@@ -6,28 +6,33 @@ import { sendUserToast, sortArray } from '../utils';
 import { ArrowLeft, Expand, Loader2, Minimize, RefreshCcw } from 'lucide-svelte';
 import { dbSupportsSchemas, getDbSchemas, getLanguageByResourceType, loadAllTablesMetaData, loadTableMetaData } from './apps/components/display/dbtable/utils';
 import DbManager from './DBManager.svelte';
-import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts } from './dbOps';
+import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts, getDucklakeSchema, wrapDucklakeQuery } from './dbOps';
 import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable';
 import { runScriptAndPollResult } from './jobs/utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SqlRepl from './SqlRepl.svelte';
 import SimpleAgTable from './SimpleAgTable.svelte';
 import { untrack } from 'svelte';
-let resourceType = $state(undefined);
-let resourcePath = $state(undefined);
-let open = $derived(resourcePath && resourceType);
-export function openDrawer(_resourceType, _resourcePath) {
-    resourceType = _resourceType;
-    resourcePath = _resourcePath;
+let input = $state();
+let open = $derived(!!input);
+export function openDrawer(nInput) {
+    input = nInput;
     getSchema();
 }
 export function closeDrawer() {
-    resourceType = undefined;
-    resourcePath = undefined;
+    input = undefined;
     refreshCount = 0;
     refreshing = false;
 }
-let dbSchema = $derived(resourcePath && resourcePath in $dbSchemas ? $dbSchemas[resourcePath] : undefined);
+let dbSchema = $derived(input && $dbSchemas[getDbSchemasPath(input)]);
+function getDbSchemasPath(input) {
+    switch (input.type) {
+        case 'database':
+            return input.resourcePath;
+        case 'ducklake':
+            return 'ducklake://' + input.ducklake;
+    }
+}
 // `refreshCount` is a derived state. `refreshing` is the source of truth
 let refreshCount = $state(0);
 $effect(() => {
@@ -46,25 +51,29 @@ $effect(() => {
         expand = false;
 });
 async function getSchema() {
-    if (!resourcePath || !resourceType || ($dbSchemas[resourcePath] && !refreshing))
+    if (!input)
         return;
-    try {
-        const oldDbSchema = $dbSchemas[resourcePath];
-        await getDbSchemas(resourceType, resourcePath, $workspaceStore, $dbSchemas, (message) => {
+    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) => {
             if (open)
                 sendUserToast(message, true);
         });
-        // avoid infinite loop on error due to the way getDbSchemas is implemented
-        // and relying on an assignement side effect
-        if (oldDbSchema !== $dbSchemas[resourcePath])
-            $dbSchemas = $dbSchemas;
     }
-    catch (e) {
-        console.error(e);
-    }
-    finally {
-        refreshing = false;
+    else if (input.type == 'ducklake') {
+        $dbSchemas[dbSchemasPath] = await getDucklakeSchema({
+            workspace: $workspaceStore,
+            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;
 }
 let windowWidth = $state(window.innerWidth);
 let replPanelSize = $state(36);
@@ -73,22 +82,22 @@ let replResultData = $state(undefined);
 let cachedColDefs = {};
 let cachedLastRefreshCount = 0;
 async function getColDefs(tableKey) {
-    if (!resourcePath || !resourceType)
-        return [];
     if (cachedLastRefreshCount !== refreshCount)
         cachedColDefs = {};
     cachedLastRefreshCount = refreshCount;
-    if (cachedColDefs[tableKey]) {
+    if (cachedColDefs[tableKey])
         return cachedColDefs[tableKey];
-    }
+    if (!input)
+        return [];
     try {
-        cachedColDefs =
-            (await loadAllTablesMetaData('$res:' + resourcePath, $workspaceStore, resourceType)) ??
-                cachedColDefs;
+        cachedColDefs = (await loadAllTablesMetaData($workspaceStore, input)) ?? cachedColDefs;
         return cachedColDefs[tableKey];
     }
     catch (e) {
-        const result = await loadTableMetaData('$res:' + resourcePath, $workspaceStore, tableKey, resourceType);
+        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 ?? [];
@@ -113,126 +122,120 @@ async function getColDefs(tableKey) {
 	preventEscape
 	on:close={closeDrawer}
 >
-	{#key [resourceType, resourcePath, dbSchema]}
-		<DrawerContent
-			title={replResultData ? 'Query Result' : 'Database Manager'}
-			on:close={() => {
-				if (replResultData) {
-					replResultData = undefined
-				} else {
-					closeDrawer()
-				}
-			}}
-			CloseIcon={replResultData ? ArrowLeft : undefined}
-			noPadding
-		>
-			{#if dbSchema && $workspaceStore && resourceType && resourcePath}
-				<Splitpanes horizontal>
-					<Pane class="relative">
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							class={'absolute inset-0 z-10 p-8 ' +
-								(replResultData
-									? 'bg-surface/90'
-									: 'transition-colors bg-transparent pointer-events-none select-none')}
-							onclick={(e) => {
-								// Only proceed if the click is directly on this div and not on the child elements
-								if (e.target === e.currentTarget) {
-									replResultData = undefined
-								}
-							}}
-						>
-							{#if replResultData}
-								{#key replResultData}
-									<SimpleAgTable data={replResultData} class="animate-zoom-in" />
-								{/key}
-							{/if}
-						</div>
-						<DbManager
-							dbSupportsSchemas={dbSupportsSchemas(resourceType)}
-							{dbSchema}
-							{getColDefs}
-							dbTableOpsFactory={({ colDefs, tableKey }) =>
-								dbTableOpsWithPreviewScripts({
-									colDefs,
-									tableKey,
-									resourcePath: resourcePath!,
-									resourceType: resourceType!,
-									workspace: $workspaceStore
-								})}
-							dbTableActionsFactory={[
-								dbDeleteTableActionWithPreviewScript({
-									resourcePath,
-									resourceType,
-									workspace: $workspaceStore
-								})
-							]}
-							{refresh}
-							dbTableEditorPropsFactory={({ selectedSchemaKey }) => ({
-								resourceType: resourceType!,
-								previewSql: (values) =>
-									makeCreateTableQuery(values, resourceType!, selectedSchemaKey),
-								async onConfirm(values) {
-									await runScriptAndPollResult({
-										workspace: $workspaceStore,
-										requestBody: {
-											args: { database: '$res:' + resourcePath },
-											content: makeCreateTableQuery(values, resourceType!, selectedSchemaKey),
-											language: getLanguageByResourceType(resourceType!)
-										}
-									})
-									refresh()
-								}
+	<DrawerContent
+		title={replResultData ? 'Query Result' : 'Database Manager'}
+		on:close={() => {
+			if (replResultData) {
+				replResultData = undefined
+			} else {
+				closeDrawer()
+			}
+		}}
+		CloseIcon={replResultData ? ArrowLeft : undefined}
+		noPadding
+	>
+		{#if dbSchema && $workspaceStore && input}
+			{@const _input = input}
+			{@const dbType = input.type == 'database' ? input.resourceType : 'duckdb'}
+			<Splitpanes horizontal>
+				<Pane class="relative">
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class={'absolute inset-0 z-10 p-8 ' +
+							(replResultData
+								? 'bg-surface/90'
+								: 'transition-colors bg-transparent pointer-events-none select-none')}
+						onclick={(e) => {
+							// Only proceed if the click is directly on this div and not on the child elements
+							if (e.target === e.currentTarget) {
+								replResultData = undefined
+							}
+						}}
+					>
+						{#if replResultData}
+							{#key replResultData}
+								<SimpleAgTable data={replResultData} class="animate-zoom-in" />
+							{/key}
+						{/if}
+					</div>
+					<DbManager
+						dbSupportsSchemas={input.type == 'database' && dbSupportsSchemas(input.resourceType)}
+						{dbSchema}
+						{getColDefs}
+						dbTableOpsFactory={({ colDefs, tableKey }) =>
+							dbTableOpsWithPreviewScripts({
+								colDefs,
+								tableKey,
+								input: _input,
+								workspace: $workspaceStore
 							})}
-						/>
-					</Pane>
-					<Pane bind:size={replPanelSize} minSize={REPL_MIN_SIZE} class="relative">
-						<SqlRepl
-							{resourcePath}
-							{resourceType}
-							onData={(data) => {
-								replResultData = data
-							}}
-							placeholderTableName={sortArray(
-								Object.keys(
-									dbSchema?.schema[
-										'public' in dbSchema?.schema
-											? 'public'
-											: 'dbo' in dbSchema?.schema
-												? 'dbo'
-												: Object.keys(dbSchema?.schema)?.[0]
-									]
-								)
-							)?.[0]}
-						/>
-					</Pane>
-				</Splitpanes>
-			{:else}
-				<Splitpanes>
-					<Pane class="relative flex justify-center items-center">
-						<Loader2 class="animate-spin" size={32} />
-					</Pane>
-				</Splitpanes>
-			{/if}
-			{#snippet actions()}
-				<Button
-					loading={refreshing}
-					on:click={() => refresh()}
-					startIcon={{ icon: RefreshCcw }}
-					size="xs"
-					color="light"
-				>
-					Refresh
-				</Button>
+						dbTableActionsFactory={[
+							dbDeleteTableActionWithPreviewScript({ input: _input, workspace: $workspaceStore })
+						]}
+						{refresh}
+						dbTableEditorPropsFactory={({ selectedSchemaKey }) => ({
+							dbType,
+							previewSql: (values) => makeCreateTableQuery(values, dbType, selectedSchemaKey),
+							async onConfirm(values) {
+								const dbArg =
+									input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {}
+								const language = getLanguageByResourceType(dbType)
+								let query = makeCreateTableQuery(values, dbType, selectedSchemaKey)
+								if (input?.type === 'ducklake') query = wrapDucklakeQuery(query, input.ducklake)
+								await runScriptAndPollResult({
+									workspace: $workspaceStore,
+									requestBody: { args: dbArg, content: query, language }
+								})
+								refresh()
+							}
+						})}
+					/>
+				</Pane>
+				<Pane bind:size={replPanelSize} minSize={REPL_MIN_SIZE} class="relative">
+					<SqlRepl
+						{input}
+						onData={(data) => {
+							replResultData = data
+						}}
+						placeholderTableName={sortArray(
+							Object.keys(
+								dbSchema?.schema[
+									'public' in dbSchema?.schema
+										? 'public'
+										: 'dbo' in dbSchema?.schema
+											? 'dbo'
+											: Object.keys(dbSchema?.schema)?.[0]
+								]
+							)
+						)?.[0]}
+					/>
+				</Pane>
+			</Splitpanes>
+		{:else}
+			<Splitpanes>
+				<Pane class="relative flex justify-center items-center">
+					<Loader2 class="animate-spin" size={32} />
+				</Pane>
+			</Splitpanes>
+		{/if}
+		{#snippet actions()}
+			<Button
+				loading={refreshing}
+				on:click={() => refresh()}
+				startIcon={{ icon: RefreshCcw }}
+				size="xs"
+				color="light"
+			>
+				Refresh
+			</Button>
 
-				<Button
-					on:click={() => (expand = !expand)}
-					startIcon={{ icon: expand ? Minimize : Expand }}
-					size="xs"
-					color="light"
-				/>
-			{/snippet}
-		</DrawerContent>
-	{/key}
+			<Button
+				on:click={() => (expand = !expand)}
+				startIcon={{ icon: expand ? Minimize : Expand }}
+				size="xs"
+				color="light"
+			/>
+		{/snippet}
+	</DrawerContent>
 </Drawer>

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

@@ -1,6 +1,6 @@
-import { type DbType } from './apps/components/display/dbtable/utils';
+import { type DbInput } from './dbOps';
 declare const DbManagerDrawer: import("svelte").Component<Record<string, never>, {
-    openDrawer: (_resourceType: DbType, _resourcePath: string) => void;
+    openDrawer: (nInput: DbInput) => void;
     closeDrawer: () => void;
 }, "">;
 type DbManagerDrawer = ReturnType<typeof DbManagerDrawer>;

package/package/components/DBTable.svelte

@@ -10,6 +10,7 @@ import DebouncedInput from './apps/components/helpers/DebouncedInput.svelte';
 import InsertRowDrawerButton from './apps/components/display/InsertRowDrawerButton.svelte';
 import { deepEqual } from 'fast-equals';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './apps/components/display/table/theme/windmill-theme.css';
 import { untrack } from 'svelte';
 let { dbTableOps } = $props();
@@ -46,7 +47,7 @@ function mountGrid() {
             ...(dbTableOps.onUpdate && {
                 defaultColDef: {
                     flex: 1,
-                    minWidth: 160,
+                    minWidth: 150,
                     editable: true,
                     onCellValueChanged: (e) => {
                         if (!$workspaceStore)
@@ -65,7 +66,6 @@ function mountGrid() {
                 }
             }),
             onViewportChanged: (e) => ([firstRow, lastRow] = [e.firstRow, e.lastRow]),
-            infiniteInitialRowCount: 100,
             cacheBlockSize: 100,
             cacheOverflowSize: 10,
             maxBlocksInCache: 20,
@@ -130,7 +130,7 @@ function updateGrid() {
 		{#if dbTableOps.onInsert}
 			<InsertRowDrawerButton
 				columnDefs={dbTableOps.colDefs ?? []}
-				dbType={dbTableOps.resourceType}
+				dbType={dbTableOps.dbType}
 				onInsert={(values) => {
 					if (!$workspaceStore) return
 					dbTableOps.onInsert?.({ values }).then((result) => {

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

@@ -1,5 +1,6 @@
 import type { IDbTableOps } from './dbOps';
 import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 import './apps/components/display/table/theme/windmill-theme.css';
 type Props = {
     dbTableOps: IDbTableOps;