windmill-components 1.613.5 → 1.623.2

package/package/cancelable-promise-utils.js

@@ -29,8 +29,10 @@ export var CancelablePromiseUtils;
     }
     CancelablePromiseUtils.map = map;
     function pipe(promise, f) {
-        promise.then((value) => {
-            f(value);
+        promise
+            .then((value) => f(value))
+            .catch(() => {
+            // we are just piping, ignore errors
         });
         return promise;
     }

package/package/components/ApiConnectForm.svelte

@@ -11,6 +11,8 @@ import { Loader2 } from 'lucide-svelte';
 import { untrack } from 'svelte';
 import { base } from '../base';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
+import BedrockCredentialsCheck from './BedrockCredentialsCheck.svelte';
+import { isCloudHosted } from '../cloud';
 let { resourceType, resourceTypeInfo, args = $bindable({}), linkedSecret = $bindable(undefined), isValid = $bindable(true), linkedSecretCandidates = undefined, description = $bindable(undefined) } = $props();
 let schema = $state(emptySchema());
 let notFound = $state(false);
@@ -117,6 +119,7 @@ $effect(() => {
 			options={{
 				right: 'As JSON'
 			}}
+			class="as-json-toggle"
 		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
@@ -181,6 +184,9 @@ $effect(() => {
 			onDescriptionUpdate={(newDescription) => (description = newDescription)}
 		/>
 	</div>
+	{#if resourceType?.includes('bedrock') && !isCloudHosted()}
+		<BedrockCredentialsCheck />
+	{/if}
 {:else}
 	<p class="text-primary font-normal text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resourceType}. Define the value in

package/package/components/AppConnectDrawer.svelte

@@ -36,6 +36,7 @@ let darkMode = false;
 >
 	<DrawerContent
 		title="Add a resource"
+		id="add-resource-drawer"
 		on:close={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"

package/package/components/AppConnectInner.svelte

@@ -470,6 +470,7 @@ let hubRtSync = usePromise(async () => {
 				placeholder="Search resource type"
 				bind:value={filter}
 				class="text-2xl grow"
+				id="search-resource-type"
 			/>
 		</div>
 

package/package/components/AuthSettings.svelte

@@ -7,6 +7,7 @@ import KeycloakSetting from './KeycloakSetting.svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
+import PocketIdSetting from './PocketIdSetting.svelte';
 import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
@@ -223,11 +224,12 @@ function generateOAuthDropdownItems() {
 				<KeycloakSetting bind:value={oauths['keycloak']} />
 				<AuthentikSetting bind:value={oauths['authentik']} />
 				<AutheliaSetting bind:value={oauths['authelia']} />
+				<PocketIdSetting bind:value={oauths['pocketid']} />
 				<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', 'nextcloud'].includes(k) && oauths[k] && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud', 'pocketid'].includes(k) && oauths[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/BedrockCredentialsCheck.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { tryEvery } from '../utils';
+import { Check, LoaderCircle, Server, X, Cpu } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
+let apiStatus = $state('idle');
+let apiResult = $state(null);
+let workerStatus = $state('idle');
+let workerResult = $state(null);
+let isChecking = $state(false);
+async function checkApiCredentials() {
+    apiStatus = 'loading';
+    apiResult = null;
+    try {
+        const response = await fetch(`/api/w/${$workspaceStore}/ai/check_bedrock_credentials`);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        apiResult = await response.json();
+        apiStatus = apiResult?.available ? 'success' : 'error';
+    }
+    catch (err) {
+        apiResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        apiStatus = 'error';
+    }
+}
+async function checkWorkerCredentials() {
+    workerStatus = 'loading';
+    workerResult = null;
+    try {
+        // Create minimal flow with AI agent dry_run step
+        const flowValue = {
+            modules: [
+                {
+                    id: 'a',
+                    value: {
+                        type: 'aiagent',
+                        input_transforms: {
+                            provider: {
+                                type: 'static',
+                                value: {
+                                    kind: 'aws_bedrock',
+                                    resource: {
+                                        api_key: 'dry_run_placeholder',
+                                        region: 'us-east-1'
+                                    },
+                                    model: 'dry_run_placeholder'
+                                }
+                            },
+                            user_message: { type: 'static', value: 'dry_run_placeholder' },
+                            output_type: { type: 'static', value: 'text' },
+                            credentials_check: { type: 'static', value: true }
+                        },
+                        tools: []
+                    }
+                }
+            ]
+        };
+        const job = await JobService.runFlowPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: flowValue,
+                args: {}
+            }
+        });
+        tryEvery({
+            tryCode: async () => {
+                const testResult = await JobService.getCompletedJob({
+                    workspace: $workspaceStore,
+                    id: job
+                });
+                if (testResult.success && testResult.result) {
+                    const result = testResult.result;
+                    if (result?.credentials_check && result?.credentials) {
+                        workerResult = {
+                            ...result.credentials,
+                            source: 'worker_process',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = workerResult.available ? 'success' : 'error';
+                    }
+                    else {
+                        workerResult = {
+                            available: false,
+                            error: 'Unexpected response format',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = 'error';
+                    }
+                }
+                else {
+                    workerResult = {
+                        available: false,
+                        error: testResult.result?.['error']?.['message'] ?? 'Job failed',
+                        worker: testResult.worker ?? undefined
+                    };
+                    workerStatus = 'error';
+                }
+            },
+            timeoutCode: async () => {
+                workerResult = {
+                    available: false,
+                    error: 'Timeout: job did not complete within 10s'
+                };
+                workerStatus = 'error';
+                try {
+                    await JobService.cancelQueuedJob({
+                        workspace: $workspaceStore,
+                        id: job,
+                        requestBody: {
+                            reason: 'Timeout checking Bedrock credentials'
+                        }
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            },
+            interval: 500,
+            timeout: 10000
+        });
+    }
+    catch (err) {
+        workerResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        workerStatus = 'error';
+    }
+}
+async function checkBoth() {
+    if (isChecking)
+        return;
+    isChecking = true;
+    try {
+        await Promise.all([checkApiCredentials(), checkWorkerCredentials()]);
+    }
+    finally {
+        isChecking = false;
+    }
+}
+</script>
+
+<div class="flex flex-col gap-3 p-3 border rounded-md bg-surface-secondary">
+	<div class="flex items-center justify-between">
+		<h4 class="text-sm font-semibold">AWS Environment Credentials Check</h4>
+		<Button size="xs" variant="border" on:click={checkBoth} disabled={isChecking}>
+			{#if isChecking}
+				<LoaderCircle class="animate-spin mr-1.5 h-3.5 w-3.5" />
+			{/if}
+			Check Credentials
+		</Button>
+	</div>
+
+	<p class="text-xs text-secondary">
+		Check if AWS credentials are available from the environment. If available, you do not need to
+		configure credentials manually.
+	</p>
+
+	<div class="grid grid-cols-2 gap-3">
+		<!-- API Server Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Server class="h-3.5 w-3.5" />
+				<span>API Server</span>
+				{#if apiStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if apiStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if apiStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if apiResult}
+				<div class="text-xs">
+					{#if apiResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {apiResult.access_key_id_prefix}
+						</div>
+						{#if apiResult.region}
+							<div class="text-secondary">Region: {apiResult.region}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{apiResult.error ?? 'Not available'}
+						</div>
+					{/if}
+				</div>
+			{:else if apiStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+
+		<!-- Worker Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Cpu class="h-3.5 w-3.5" />
+				<span>Worker</span>
+				{#if workerStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if workerStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if workerStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if workerResult}
+				<div class="text-xs">
+					{#if workerResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {workerResult.access_key_id_prefix}
+						</div>
+						{#if workerResult.region}
+							<div class="text-secondary">Region: {workerResult.region}</div>
+						{/if}
+						{#if workerResult.source}
+							<div class="text-secondary">Source: {workerResult.source}</div>
+						{/if}
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{workerResult.error ?? 'Not available'}
+						</div>
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{/if}
+				</div>
+			{:else if workerStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/package/components/BedrockCredentialsCheck.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const BedrockCredentialsCheck: import("svelte").Component<Record<string, never>, {}, "">;
+type BedrockCredentialsCheck = ReturnType<typeof BedrockCredentialsCheck>;
+export default BedrockCredentialsCheck;

package/package/components/CenteredPage.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
-let { class: clazz = '', children, wrapperClasses = '', handleOverflow = true } = $props();
+let { class: clazz = '', id, children, wrapperClasses = '', handleOverflow = true } = $props();
 let width = $state(0);
 </script>
 
 <div
 	class={twMerge('pb-8', wrapperClasses, handleOverflow ? 'h-full overflow-y-auto' : '')}
 	style={handleOverflow ? 'scrollbar-gutter: stable both-edges;' : ''}
+	{id}
 >
 	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', clazz)} bind:clientWidth={width}
 		>{@render children?.({ width })}</div

package/package/components/CenteredPage.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     class?: string;
+    id?: string;
     children?: import('svelte').Snippet<[{
         width: number;
     }]>;

package/package/components/CompareWorkspaces.svelte

@@ -55,6 +55,10 @@ async function fetchSummary(kind, path, workspace) {
             const app = await AppService.getAppByPath({ workspace, path });
             return app.summary;
         }
+        else if (kind === 'folder') {
+            const folder = await FolderService.getFolder({ workspace, name: path.slice(2) });
+            return folder.summary;
+        }
     }
     catch (error) {
         console.error(`Failed to fetch summary for ${kind}:${path}`, error);
@@ -63,7 +67,7 @@ async function fetchSummary(kind, path, workspace) {
 }
 async function fetchSummaries(diffs) {
     // Only fetch summaries for scripts, flows, and apps
-    const itemsToFetch = diffs.filter((diff) => ['script', 'flow', 'app'].includes(diff.kind));
+    const itemsToFetch = diffs.filter((diff) => ['script', 'flow', 'app', 'folder'].includes(diff.kind));
     for (const diff of itemsToFetch) {
         const key = getItemKey(diff);
         // Skip if already cached or loading
@@ -367,21 +371,70 @@ async function deploy(kind, path, workspaceToDeployTo, workspaceFrom) {
                 path: path
             });
             if (alreadyExists) {
-                await AppService.updateApp({
-                    workspace: workspaceToDeployTo,
-                    path: path,
-                    requestBody: {
-                        ...app
-                    }
-                });
+                if (app.raw_app) {
+                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
+                        workspace: workspaceFrom,
+                        path: app.path
+                    });
+                    const js = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.js`,
+                        workspace: workspaceFrom
+                    });
+                    const css = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.css`,
+                        workspace: workspaceFrom
+                    });
+                    await AppService.updateAppRaw({
+                        workspace: workspaceToDeployTo,
+                        path: path,
+                        formData: {
+                            app,
+                            css,
+                            js
+                        }
+                    });
+                }
+                else {
+                    await AppService.updateApp({
+                        workspace: workspaceToDeployTo,
+                        path: path,
+                        requestBody: {
+                            ...app
+                        }
+                    });
+                }
             }
             else {
-                await AppService.createApp({
-                    workspace: workspaceToDeployTo,
-                    requestBody: {
-                        ...app
-                    }
-                });
+                if (app.raw_app) {
+                    const secret = await AppService.getPublicSecretOfLatestVersionOfApp({
+                        workspace: workspaceFrom,
+                        path: app.path
+                    });
+                    const js = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.js`,
+                        workspace: workspaceFrom
+                    });
+                    const css = await AppService.getRawAppData({
+                        secretWithExtension: `${secret}.css`,
+                        workspace: workspaceFrom
+                    });
+                    await AppService.createAppRaw({
+                        workspace: workspaceToDeployTo,
+                        formData: {
+                            app,
+                            css,
+                            js
+                        }
+                    });
+                }
+                else {
+                    await AppService.createApp({
+                        workspace: workspaceToDeployTo,
+                        requestBody: {
+                            ...app
+                        }
+                    });
+                }
             }
         }
         else if (kind == 'variable') {
@@ -746,7 +799,8 @@ $effect(() => {
 					This fork is ahead of its parent
 				{/if}
 				and some of the changes are not visible by you. Only a user with access to the whole context
-				may deploy or update this fork. You can share the link to this page to someone with proper permissions to get it deployed.
+				may deploy or update this fork. You can share the link to this page to someone with proper permissions
+				to get it deployed.
 			</Alert>
 		{/if}
 
@@ -792,7 +846,11 @@ $effect(() => {
 							disabled={!isSelectable}
 							selected={isSelected && !(deploymentStatus[key]?.status == 'deployed')}
 							onSelect={() => toggleItem(diff)}
-							path={diff.kind != 'resource' && diff.kind != 'variable' ? diff.path : ''}
+							path={diff.kind != 'resource' &&
+							diff.kind != 'variable' &&
+							diff.kind != 'resource_type'
+								? diff.path
+								: ''}
 							marked={undefined}
 							kind={diff.kind}
 							canFavorite={false}

package/package/components/DBManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import {} from '../stores';
-import { ChevronDownIcon, EditIcon, Loader2, 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';
@@ -14,8 +14,8 @@ import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import { dbSupportsTransactionalDdl, diffTableEditorValues } from './apps/components/display/dbtable/queries/alterTable';
 import { resource } from 'runed';
-import { capitalize, pluralize } from '../utils';
-let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, getColDefs, dbSupportsSchemas, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features } = $props();
+import { capitalize, onlyAlphaNumAndUnderscore, pluralize } from '../utils';
+let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, dbSupportsSchemas, colDefs, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features } = $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);
@@ -125,24 +125,31 @@ let askingForConfirmation = $state();
 let dbTableEditorState = $state({
     open: false
 });
-let dbTableEditorAlterTableData = resource(() => dbTableEditorState.alterTableKey, async (table) => {
+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,
-        getColDefs: () => getColDefs(tableKey2)
+        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>
@@ -155,20 +162,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 {
@@ -359,7 +366,10 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 						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>
+						<p
+							class="db-manager-table-key truncate text-ellipsis grow text-left text-emphasis text-xs"
+							>{tableKey}</p
+						>
 						<DropdownV2
 							items={() => [
 								{
@@ -370,6 +380,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 {
@@ -397,14 +408,8 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 								}
 							]}
 							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}
@@ -421,13 +426,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>
@@ -446,6 +447,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 	on:close={() => (dbTableEditorState = { open: false })}
 >
 	<DrawerContent
+		id="db-table-editor-drawer"
 		on:close={() => (dbTableEditorState = { open: false })}
 		title={dbTableEditorState.alterTableKey
 			? `Alter ${dbTableEditorState.alterTableKey}`
@@ -510,7 +512,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 						}
 					}}
 				/>
-			{:else if dbTableEditorAlterTableData.loading}
+			{:else if dbTableEditorAlterTableData.loading || !colDefs}
 				<Loader2 class="animate-spin" size={32} />
 			{:else}
 				<p class="text-sm text-tertiary">Failed to load table definition.</p>
@@ -551,6 +553,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 {
@@ -588,6 +591,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 {