@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/explorer/DatabaseExplorer.tsx

@@ -0,0 +1,450 @@
+import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
+import clsx from 'clsx';
+import { ChevronRight, CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import type { ExplorerSelection } from '../actions.ts';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.ts';
+import type { Connection } from '../client/types.ts';
+import { EngineIcon } from '../connections/EngineIcon.tsx';
+import { RowMenu } from './RowMenu.tsx';
+import { TableDialog, type TableRequest } from './TableDialog.tsx';
+import {
+    connectionKey,
+    flattenTree,
+    hasMenu,
+    isExpandable,
+    isFolderKey,
+    isSelectable,
+    navigate,
+    neededLoads,
+    selectionKey,
+    selectionOf,
+    tabStop,
+    tableOf,
+    type ErrorRow,
+    type LoadTarget,
+    type ExpandableRow,
+    type TreeRow
+} from './tree.ts';
+import { useExplorerLoads } from './use-explorer-loads.ts';
+import { usePopupPress } from '../use-popup-press.ts';
+import { useStoredExpansion } from './use-stored-expansion.ts';
+
+const INDENT = 16;
+/* Where the chevron slot of the first level starts inside a row. */
+const BASE_INDENT = 4;
+const CHEVRON_SIZE = 16;
+
+export interface DatabaseExplorerProps {
+    connections: readonly Connection[];
+    /* The selected connection, schema or table. Without it the explorer keeps the selection itself, starting at `defaultValue`. */
+    value?: ExplorerSelection | null;
+    defaultValue?: ExplorerSelection | null;
+    onValueChange?(selection: ExplorerSelection | null): void;
+    showSystemSchemas?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/*
+ * The connections, their schemas and their tables as a tree, loaded as each node opens. Every row
+ * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`.
+ */
+export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, className, ref }: DatabaseExplorerProps) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const loads = useExplorerLoads(connections);
+    const [own, setOwn] = useState<ExplorerSelection | null>(defaultValue);
+    const [request, setRequest] = useState<TableRequest | null>(null);
+    const { expanded, collapsed, setExpanded, setCollapsed } = useStoredExpansion(connections);
+    const pressedInPopup = usePopupPress();
+    const [filter, setFilter] = useState('');
+    const [activeKey, setActiveKey] = useState<string | null>(null);
+    const rowElements = useRef(new Map<string, HTMLElement>());
+    const focusAfterRender = useRef(false);
+    const selected = value === undefined ? own : value;
+    const selectedKey = selected === null ? null : selectionKey(selected);
+
+    const input = {
+        connections,
+        expanded,
+        collapsed,
+        showSystemSchemas,
+        schemas: loads.schemas,
+        tables: loads.tables,
+        structures: loads.structures,
+        versions: loads.versions
+    };
+    const rows = flattenTree({ ...input, filter });
+    const stop = tabStop(rows, activeKey, selectedKey);
+
+    useEffect(() => {
+        for (const target of neededLoads(input)) {
+            loads.start(target);
+        }
+    });
+
+    useEffect(() => {
+        if (focusAfterRender.current && activeKey !== null) {
+            focusAfterRender.current = false;
+            rowElements.current.get(activeKey)?.focus();
+        }
+    }, [activeKey]);
+
+    const setOpen = (key: string, open: boolean): void => {
+        // A folder is open until the person closes it, everything else is closed until they open it.
+        const folder = isFolderKey(key);
+        const toggle = (current: ReadonlySet<string>): ReadonlySet<string> => {
+            const next = new Set(current);
+            if (open !== folder) {
+                next.add(key);
+            } else {
+                next.delete(key);
+            }
+            return next;
+        };
+        (folder ? setCollapsed : setExpanded)(toggle);
+    };
+
+    const toggle = (row: ExpandableRow): void => {
+        setOpen(row.key, !row.expanded);
+    };
+
+    const select = (selection: ExplorerSelection): void => {
+        if (value === undefined) {
+            setOwn(selection);
+        }
+        onValueChange?.(selection);
+    };
+
+    const pick = (row: TreeRow): void => {
+        const selection = selectionOf(row);
+        if (selection !== null) {
+            select(selection);
+        }
+    };
+
+    const open = (row: TreeRow): void => {
+        const ref = tableOf(row);
+        if (ref !== null) {
+            pick(row);
+            act?.({ kind: 'open-table', ref, view: 'data' });
+        }
+    };
+
+    const activate = (row: TreeRow): void => {
+        switch (row.kind) {
+            case 'table':
+            case 'column':
+                open(row);
+                break;
+            case 'connection':
+            case 'schema':
+            case 'folder':
+                pick(row);
+                toggle(row);
+                break;
+            case 'error':
+                loads.reset(row.retry);
+                break;
+        }
+    };
+
+    const onKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+        if ((e.target as HTMLElement).tagName === 'BUTTON') {
+            return;
+        }
+        const action = navigate(rows, activeKey ?? stop, e.key);
+        if (action === null) {
+            return;
+        }
+        e.preventDefault();
+        if (action.type === 'focus') {
+            focusAfterRender.current = true;
+            setActiveKey(action.key);
+        } else if (action.type === 'activate') {
+            const row = rows.find((candidate) => candidate.key === action.key);
+            if (row !== undefined) {
+                activate(row);
+            }
+        } else {
+            setOpen(action.key, action.type === 'expand');
+        }
+    };
+
+    const click = (row: TreeRow): void => {
+        if (pressedInPopup()) {
+            return;
+        }
+        setActiveKey(row.key);
+        pick(row);
+        if (row.kind !== 'table' && isExpandable(row)) {
+            toggle(row);
+        } else if (row.kind === 'error') {
+            loads.reset(row.retry);
+        }
+    };
+
+    const refresh = (target: LoadTarget): void => {
+        loads.reset(target);
+    };
+
+    const disconnect = (connection: Connection): void => {
+        void client.disconnect(connection.id).catch(() => undefined);
+        loads.reset({ connectionId: connection.id });
+        setOpen(connectionKey(connection.id), false);
+    };
+
+    const finish = (done: TableRequest, to: string | undefined): void => {
+        setRequest(null);
+        const { connectionId, schema, table } = done.ref;
+        if (selected?.connectionId === connectionId && selected.schema === schema && selected.table === table) {
+            select(to === undefined ? { connectionId, schema } : { connectionId, schema, table: to });
+        }
+    };
+
+    const connectionOf = (row: TreeRow): Connection | undefined => {
+        const selection = selectionOf(row);
+        return selection === null ? undefined : connections.find((entry) => entry.id === selection.connectionId);
+    };
+
+    const isSelected = (row: TreeRow | undefined): boolean => row !== undefined && isSelectable(row) && row.key === selectedKey;
+
+    const renderRow = (row: TreeRow, index: number): ReactNode => {
+        const connection = connectionOf(row);
+        const menu =
+            connection !== undefined && hasMenu(row) ? (
+                <RowMenu row={row} connection={connection} onRefresh={refresh} onDisconnect={disconnect} onRequest={setRequest} />
+            ) : null;
+        const selectedRow = isSelected(row);
+        const props = {
+            role: 'treeitem',
+            'aria-level': row.level,
+            'aria-setsize': row.setSize,
+            'aria-posinset': row.posInSet,
+            'aria-expanded': isExpandable(row) ? row.expanded : undefined,
+            'aria-selected': isSelectable(row) ? selectedRow : undefined,
+            'aria-busy': row.kind === 'loading' ? true : undefined,
+            tabIndex: row.focusable ? (row.key === stop ? 0 : -1) : undefined,
+            className: clsx(
+                // The line box is the row's height, so the text lands on whole pixels in a row of an odd height.
+                'focus-ring relative mx-2 flex h-[25px] min-w-0 items-center gap-1.5 rounded-md pr-2 text-xs leading-[25px] text-text focus-visible:-outline-offset-2',
+                selectedRow ? 'bg-surface-active' : row.focusable && 'hover:bg-surface-hover',
+                selectedRow && isSelected(rows[index - 1]) && 'rounded-t-none',
+                selectedRow && isSelected(rows[index + 1]) && 'rounded-b-none'
+            ),
+            style: { paddingInlineStart: BASE_INDENT + (row.level - 1) * INDENT },
+            ref: (element: HTMLElement | null) => {
+                if (element === null) {
+                    rowElements.current.delete(row.key);
+                } else {
+                    rowElements.current.set(row.key, element);
+                }
+            },
+            onClick: () => click(row),
+            onDoubleClick: tableOf(row) === null ? undefined : () => open(row),
+            onFocus: () => {
+                if (row.focusable) {
+                    setActiveKey(row.key);
+                }
+            }
+        };
+        const content = (
+            <>
+                {Array.from({ length: row.level - 1 }, (_, i) => (
+                    <span
+                        key={i}
+                        aria-hidden
+                        className="pointer-events-none absolute inset-y-0 w-px bg-border"
+                        style={{ insetInlineStart: BASE_INDENT + i * INDENT + CHEVRON_SIZE / 2 - 1 }}
+                    />
+                ))}
+                <RowContent row={row} onToggle={isExpandable(row) ? () => toggle(row) : undefined} />
+            </>
+        );
+        if (menu === null) {
+            return (
+                <div key={row.key} {...props}>
+                    {content}
+                </div>
+            );
+        }
+        return (
+            <ContextMenu.Root key={row.key}>
+                <ContextMenu.Trigger render={<div {...props} />}>{content}</ContextMenu.Trigger>
+                <ContextMenu.Popup>{menu}</ContextMenu.Popup>
+            </ContextMenu.Root>
+        );
+    };
+
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 min-w-0 flex-col', className)}>
+            <div className="shrink-0 border-b border-border p-2">
+                <Input
+                    size="sm"
+                    icon={Search}
+                    type="search"
+                    value={filter}
+                    placeholder={t('explorer.filter')}
+                    aria-label={t('explorer.filter')}
+                    spellCheck={false}
+                    onChange={(e) => setFilter(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Escape') {
+                            setFilter('');
+                        }
+                    }}
+                />
+            </div>
+            {connections.length === 0 ? (
+                <EmptyState icon={Database}>{t('explorer.noConnections')}</EmptyState>
+            ) : rows.length === 0 ? (
+                <EmptyState icon={Search}>{t('explorer.noMatches', { query: filter.trim() })}</EmptyState>
+            ) : (
+                <div role="tree" aria-label={t('explorer.label')} className="min-h-0 grow overflow-y-auto py-2" onKeyDown={onKeyDown}>
+                    {rows.map(renderRow)}
+                </div>
+            )}
+            {request !== null && <TableDialog request={request} onClose={() => setRequest(null)} onDone={finish} />}
+        </div>
+    );
+}
+
+function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void }) {
+    const { t } = useTranslation('database');
+    switch (row.kind) {
+        case 'connection':
+            return (
+                <>
+                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <EngineIcon engine={row.connection.config.engine} size={16} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{row.connection.name || t('connections.untitled')}</span>
+                    {row.connection.config.readOnly === true && (
+                        <Tooltip label={t('explorer.readOnly')}>
+                            <span className="inline-flex shrink-0 text-text-faint">
+                                <Icon icon={Lock} size={12} />
+                            </span>
+                        </Tooltip>
+                    )}
+                    {row.version !== null && <span className="min-w-0 shrink-[2] truncate text-text-faint">{row.version}</span>}
+                    {row.schemaCount !== null && <SchemaCount shown={row.schemaCount.shown} total={row.schemaCount.total} />}
+                </>
+            );
+        case 'schema':
+            return (
+                <>
+                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Icon icon={Database} size={16} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{row.schema}</span>
+                </>
+            );
+        case 'folder':
+            return (
+                <>
+                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{t(row.group === 'view' ? 'explorer.views' : 'explorer.tables')}</span>
+                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
+                </>
+            );
+        case 'table':
+            return (
+                <>
+                    <Chevron open={row.expanded} onToggle={onToggle} />
+                    <Icon icon={row.table.kind === 'view' ? Eye : Table} size={16} className="shrink-0 text-text-muted" />
+                    <span className="min-w-0 truncate">{row.table.name}</span>
+                </>
+            );
+        case 'column':
+            return (
+                <>
+                    <ChevronSlot />
+                    <ColumnIcon primaryKey={row.primaryKey} foreignKey={row.foreignKey} />
+                    <span className="min-w-0 truncate">{row.column.name}</span>
+                    {row.column.type !== '' && <span className="min-w-0 shrink-[2] truncate text-text-faint">{row.column.type}</span>}
+                </>
+            );
+        case 'loading':
+            return (
+                <>
+                    <ChevronSlot />
+                    <Spinner size={12} />
+                    <span className="text-text-faint">{t('explorer.loading')}</span>
+                </>
+            );
+        case 'error':
+            return <ErrorContent row={row} />;
+        case 'empty':
+            return (
+                <>
+                    <ChevronSlot />
+                    <span className="text-text-faint">{t(EMPTY_WORDS[row.of])}</span>
+                </>
+            );
+    }
+}
+
+const EMPTY_WORDS = { schemas: 'explorer.noSchemas', tables: 'explorer.noTables', columns: 'explorer.noColumns' } as const;
+
+/* Where a chevron would be, so a row without one lines up with its siblings that have one. */
+function ChevronSlot() {
+    return <span className="size-4 shrink-0" />;
+}
+
+function Chevron({ open, onToggle }: { open: boolean; onToggle?: () => void }) {
+    return (
+        <span
+            className="grid size-4 shrink-0 place-items-center text-text-muted"
+            onClick={(e) => {
+                e.stopPropagation();
+                onToggle?.();
+            }}
+            onDoubleClick={(e) => e.stopPropagation()}
+        >
+            <Icon icon={ChevronRight} size={12} className={clsx('transition-transform', open && 'rotate-90')} />
+        </span>
+    );
+}
+
+function SchemaCount({ shown, total }: { shown: number; total: number }) {
+    const { t } = useTranslation('database');
+    const counts = { shown: formatNumber(shown), total: formatNumber(total) };
+    return (
+        <Tooltip label={t('explorer.schemaCountHint', { count: total, ...counts })}>
+            <span className="shrink-0 text-text-faint tabular-nums">{t('explorer.schemaCount', counts)}</span>
+        </Tooltip>
+    );
+}
+
+function ColumnIcon({ primaryKey, foreignKey }: { primaryKey: boolean; foreignKey: boolean }) {
+    const { t } = useTranslation('database');
+    if (!primaryKey && !foreignKey) {
+        return <Icon icon={RectangleVertical} size={16} className="shrink-0 text-text-faint" />;
+    }
+    return (
+        <Tooltip label={t(primaryKey ? 'explorer.primaryKey' : 'explorer.foreignKey')}>
+            <span className="inline-flex shrink-0 text-text-muted">
+                <Icon icon={primaryKey ? KeyRound : Link2} size={16} />
+            </span>
+        </Tooltip>
+    );
+}
+
+function ErrorContent({ row }: { row: ErrorRow }) {
+    const { t } = useTranslation('database');
+    return (
+        <>
+            <ChevronSlot />
+            <Icon icon={CircleAlert} size={16} className="shrink-0 text-status-error" />
+            <Tooltip label={row.message}>
+                <span className="min-w-0 truncate text-status-error">{row.message}</span>
+            </Tooltip>
+            <Button size="xs" variant="ghost" className="ml-auto" tabIndex={-1}>
+                {t('explorer.retry')}
+            </Button>
+        </>
+    );
+}

package/src/explorer/RowMenu.tsx

@@ -0,0 +1,134 @@
+import { Fragment, type ReactNode } from 'react';
+import {
+    Copy,
+    Eraser,
+    PencilRuler,
+    Pencil,
+    Plus,
+    RefreshCw,
+    Settings2,
+    SquareTerminal,
+    Table,
+    TableProperties,
+    Trash2,
+    Unplug,
+    type LucideIcon
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, copyText, Icon } from '@adecore/ui';
+import type { DatabaseAction } from '../actions.ts';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.ts';
+import type { Connection, TableRef } from '../client/types.ts';
+import type { TableKind } from '../protocol/index.ts';
+import type { TableRequest } from './TableDialog.tsx';
+import { selectAllSql, type LoadTarget, type TreeRow } from './tree.ts';
+
+export interface RowMenuProps {
+    row: TreeRow;
+    connection: Connection;
+    onRefresh(target: LoadTarget): void;
+    onDisconnect(connection: Connection): void;
+    onRequest(request: TableRequest): void;
+}
+
+/* The items of a row's context menu. An item whose action has nowhere to go, or that writes to a read only connection, is left out. */
+export function RowMenu({ row, connection, onRefresh, onDisconnect, onRequest }: RowMenuProps) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const act = useDatabaseAction();
+    const writable = connection.config.readOnly !== true;
+
+    const consoleAction = (schema?: string, sql?: string): DatabaseAction => ({
+        kind: 'open-console',
+        connectionId: connection.id,
+        ...(schema === undefined ? {} : { schema }),
+        ...(sql === undefined ? {} : { sql })
+    });
+
+    const copyDdl = async (ref: TableRef): Promise<void> => {
+        const structure = await client.session(connection).structure(ref.schema, ref.table);
+        if (structure.ddl !== null) {
+            copyText(structure.ddl);
+        }
+    };
+
+    const item = (key: string, icon: LucideIcon, label: string, onClick: () => void, destructive = false): ReactNode => (
+        <ContextMenu.Item key={key} className={destructive ? 'text-status-error' : undefined} onClick={onClick}>
+            <Icon icon={icon} size={14} />
+            {label}
+        </ContextMenu.Item>
+    );
+
+    const actionItem = (key: string, icon: LucideIcon, label: string, action: DatabaseAction): ReactNode =>
+        act === undefined ? null : item(key, icon, label, () => act(action));
+
+    const tableGroups = (ref: TableRef, kind: TableKind): ReactNode[][] => {
+        const request = (change: TableRequest['change']) => (): void => onRequest({ change, connection, ref, kind });
+        return [
+            [
+                actionItem('open-data', Table, t('explorer.openData'), { kind: 'open-table', ref, view: 'data' }),
+                actionItem('open-structure', TableProperties, t('explorer.openStructure'), { kind: 'open-table', ref, view: 'structure' }),
+                kind === 'table' && writable ? actionItem('edit-table', PencilRuler, t('explorer.editTable'), { kind: 'edit-table', ref }) : null,
+                actionItem('console', SquareTerminal, t('explorer.newConsoleHere'), consoleAction(ref.schema, selectAllSql(connection.config.engine, ref)))
+            ],
+            [
+                item('copy-name', Copy, t('explorer.copyName'), () => copyText(ref.table)),
+                item('copy-ddl', Copy, t('explorer.copyDdl'), () => void copyDdl(ref).catch(() => undefined))
+            ],
+            writable
+                ? [
+                      kind === 'table' ? item('rename', Pencil, t('explorer.rename.action'), request('rename')) : null,
+                      kind === 'table' ? item('truncate', Eraser, t('explorer.truncate.action'), request('truncate'), true) : null,
+                      item('drop', Trash2, t(kind === 'view' ? 'explorer.drop.view.action' : 'explorer.drop.table.action'), request('drop'), true)
+                  ]
+                : []
+        ];
+    };
+
+    const groupsOf = (): ReactNode[][] => {
+        switch (row.kind) {
+            case 'connection':
+                return [
+                    [
+                        actionItem('console', SquareTerminal, t('explorer.newConsole'), consoleAction()),
+                        item('refresh', RefreshCw, t('explorer.refresh'), () => onRefresh({ connectionId: connection.id })),
+                        actionItem('manage', Settings2, t('explorer.editConnection'), { kind: 'manage-connection', connectionId: connection.id })
+                    ],
+                    [item('disconnect', Unplug, t('explorer.disconnect'), () => onDisconnect(connection))]
+                ];
+            case 'schema':
+            case 'folder':
+                return [
+                    [
+                        writable
+                            ? actionItem('new-table', Plus, t('explorer.newTable'), { kind: 'new-table', connectionId: connection.id, schema: row.schema })
+                            : null,
+                        actionItem('console', SquareTerminal, t('explorer.newConsoleHere'), consoleAction(row.schema)),
+                        item('refresh', RefreshCw, t('explorer.refresh'), () => onRefresh({ connectionId: connection.id, schema: row.schema }))
+                    ]
+                ];
+            case 'table':
+                return tableGroups(row.ref, row.table.kind);
+            case 'column':
+                return [
+                    [
+                        actionItem('open-data', Table, t('explorer.open'), { kind: 'open-table', ref: row.ref, view: 'data' }),
+                        item('copy-name', Copy, t('explorer.copyName'), () => copyText(row.column.name))
+                    ]
+                ];
+            default:
+                return [];
+        }
+    };
+
+    const groups = groupsOf()
+        .map((items) => items.filter((entry) => entry !== null))
+        .filter((items) => items.length > 0);
+
+    return groups.map((items, i) => (
+        <Fragment key={i}>
+            {i > 0 && <ContextMenu.Separator />}
+            {items}
+        </Fragment>
+    ));
+}

package/src/explorer/TableDialog.tsx

@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next';
+import { PromptDialog } from '@adecore/ui';
+import { dialectOf } from '../ddl/index.ts';
+import { useDatabaseClient } from '../client-context.ts';
+import type { Connection, TableRef } from '../client/types.ts';
+import type { TableKind } from '../protocol/index.ts';
+import { statementOf, type TableChange } from './table-statements.ts';
+
+export interface TableRequest {
+    readonly change: TableChange;
+    readonly connection: Connection;
+    readonly ref: TableRef;
+    readonly kind: TableKind;
+}
+
+export interface TableDialogProps {
+    request: TableRequest;
+    onClose(): void;
+    /* After the statement ran; `to` is the new name of a rename. */
+    onDone(request: TableRequest, to: string | undefined): void;
+}
+
+/* The question behind Rename, Truncate and Drop: it runs the statement, keeps a failure in the dialog and sees to it that the listeners hear the shape changed. */
+export function TableDialog({ request, onClose, onDone }: TableDialogProps) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const { change, connection, ref, kind } = request;
+    const words = change === 'drop' ? `explorer.drop.${kind === 'view' ? 'view' : 'table'}` : `explorer.${change}`;
+
+    const run = async (to?: string): Promise<void> => {
+        const session = client.session(connection);
+        const dialect = dialectOf(await session.server());
+        const { results } = await session.execute(statementOf(dialect, change, ref, kind, to));
+        const failed = results.find((result) => result.kind === 'error');
+        if (failed !== undefined && failed.kind === 'error') {
+            throw new Error(failed.error.message);
+        }
+        // The client tells its listeners after a `RENAME`, a `DROP` and a `TRUNCATE`, but not after a SQLite emptying, which is a `DELETE FROM`.
+        if (change === 'truncate' && dialect.engine === 'sqlite') {
+            client.notifySchemaChange({ connectionId: ref.connectionId, schema: ref.schema });
+        }
+        onDone(request, to);
+    };
+
+    const confirm = async (typed: string): Promise<void> => {
+        if (change === 'rename') {
+            if (typed === ref.table) {
+                onClose();
+                return;
+            }
+            await run(typed);
+        } else if (change === 'drop') {
+            if (typed !== ref.table) {
+                throw new Error(t('explorer.drop.mismatch'));
+            }
+            await run();
+        } else {
+            await run();
+        }
+    };
+
+    return (
+        <PromptDialog
+            open
+            danger={change !== 'rename'}
+            title={t(`${words}.title`, { name: ref.table })}
+            description={change === 'rename' ? undefined : t(`${words}.description`, { name: ref.table })}
+            field={
+                change === 'truncate'
+                    ? undefined
+                    : change === 'rename'
+                      ? { label: t('explorer.rename.field'), initial: ref.table, mono: true }
+                      : { label: t('explorer.drop.field', { name: ref.table }), placeholder: ref.table, mono: true }
+            }
+            confirmLabel={t(`${words}.confirm`)}
+            onConfirm={confirm}
+            onOpenChange={onClose}
+        />
+    );
+}