@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/designer/TableDesigner.tsx

@@ -0,0 +1,186 @@
+import { useMemo, useRef, useState, type Ref } from 'react';
+import clsx from 'clsx';
+import { CircleAlert, RefreshCw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Banner, Button, Spinner, messageOf } from '@adecore/ui';
+import { useDatabaseAction, useDatabaseClient } from '../client-context.ts';
+import type { Connection, ExecuteResult } from '../client/types.ts';
+import { dialectOf, draftOf, emptyDraft, type Dialect, type TableDraft } from '../ddl/index.ts';
+import type { TableStructure } from '../protocol/index.ts';
+import { useLoaded } from '../table/useLoaded.ts';
+import { useSchemaChange } from '../use-schema-change.ts';
+import { DesignerView } from './DesignerView.tsx';
+import { planOf } from './plan.ts';
+import { recoverFrom } from './recover.ts';
+import { useReferenceColumns } from './useReferenceColumns.ts';
+
+export interface TableDesignerProps {
+    connection: Connection;
+    schema: string;
+    /* The table to modify; without one the designer makes a new table. */
+    table?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* What the designer starts from. */
+interface Snapshot {
+    readonly dialect: Dialect;
+    /* `null` for a table that does not exist yet. */
+    readonly structure: TableStructure | null;
+    readonly tables: readonly string[];
+}
+
+interface Editing {
+    readonly snapshot: Snapshot | null;
+    /* The draft Revert goes back to; the draft is this very object until something is edited. */
+    readonly baseline: TableDraft;
+    readonly draft: TableDraft;
+}
+
+/* Creates a table or modifies one: its columns, indexes, foreign keys and options, with the SQL it will run shown before it runs. */
+export function TableDesigner({ connection, schema, table, className, ref }: TableDesignerProps) {
+    const { t } = useTranslation('database');
+    const client = useDatabaseClient();
+    const onAction = useDatabaseAction();
+    const [subject, setSubject] = useState({ requested: table, current: table ?? null });
+    const [editing, setEditing] = useState<Editing>({ snapshot: null, baseline: emptyDraft(), draft: emptyDraft() });
+    const [confirming, setConfirming] = useState(false);
+    const [failure, setFailure] = useState<string | null>(null);
+    const [shapeChanged, setShapeChanged] = useState(false);
+    const applying = useRef(false);
+
+    if (subject.requested !== table) {
+        setSubject({ requested: table, current: table ?? null });
+    }
+
+    const loaded = useLoaded<Snapshot>(
+        async (signal) => {
+            const session = client.session(connection);
+            const [server, structure, tables] = await Promise.all([
+                session.server({ signal }),
+                subject.current === null ? Promise.resolve(null) : session.structure(schema, subject.current, { signal }),
+                session.tables(schema, { signal })
+            ]);
+            return { dialect: dialectOf(server), structure, tables: tables.filter((info) => info.kind === 'table').map((info) => info.name) };
+        },
+        JSON.stringify([connection.id, schema, subject.current])
+    );
+    const snapshot = loaded.value;
+
+    // The apply of this designer reloads by itself; a change from elsewhere replaces an untouched draft and warns about an edited one.
+    useSchemaChange(connection.id, schema, () => {
+        if (applying.current) {
+            return;
+        }
+
+        if (editing.draft === editing.baseline) {
+            loaded.reload();
+        } else {
+            setShapeChanged(true);
+        }
+    });
+
+    // A new snapshot, after a load or an apply, starts a fresh draft.
+    if (snapshot !== null && editing.snapshot !== snapshot) {
+        const baseline = snapshot.structure === null ? emptyDraft() : draftOf(snapshot.structure);
+        setEditing({ snapshot, baseline, draft: baseline });
+        setShapeChanged(false);
+    }
+    const draft = editing.draft;
+
+    const plan = useMemo(() => (snapshot === null ? null : planOf(snapshot.dialect, schema, snapshot.structure, draft)), [snapshot, schema, draft]);
+    const referenceColumns = useReferenceColumns(client, connection, schema, draft);
+
+    const readOnlyReason =
+        connection.config.readOnly === true ? t('designer.readOnly.connection') : snapshot?.structure?.kind === 'view' ? t('designer.readOnly.view') : null;
+
+    async function apply(): Promise<void> {
+        if (snapshot === null || plan === null) {
+            return;
+        }
+        const session = client.session(connection);
+        const statements = plan.statements;
+        const wasNew = snapshot.structure === null;
+        let outcome: ExecuteResult;
+        applying.current = true;
+        try {
+            outcome = await session.execute(statements.join(';\n'), { schema });
+        } catch (e) {
+            setFailure(messageOf(e, t('designer.failed')));
+            setConfirming(false);
+            return;
+        } finally {
+            applying.current = false;
+        }
+        const failed = outcome.results.find((result) => result.kind === 'error');
+        if (failed?.kind === 'error') {
+            await recoverFrom(session, statements, failed.sql, outcome.inTransaction);
+            setFailure(failed.error.message);
+            setConfirming(false);
+            return;
+        }
+        setFailure(null);
+        setConfirming(false);
+        // The client has told its listeners already: `execute` does for a statement that creates, alters or drops.
+        if (wasNew || draft.name !== draft.originalName) {
+            setSubject({ requested: table, current: draft.name });
+            onAction?.({ kind: 'edit-table', ref: { connectionId: connection.id, schema, table: draft.name } });
+        } else {
+            loaded.reload();
+        }
+    }
+
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 min-w-0 flex-col', className)}>
+            {(loaded.loading || snapshot === null) && loaded.error === null && (
+                <div className="grid grow place-items-center py-8 text-text-muted">
+                    <Spinner size={20} label={t('designer.loading')} />
+                </div>
+            )}
+            {loaded.error !== null && snapshot === null && (
+                <div className="p-3">
+                    <Banner icon={CircleAlert} tone="error" className="w-full" message={loaded.error}>
+                        <Button variant="secondary" size="sm" onClick={loaded.reload}>
+                            {t('designer.retry')}
+                        </Button>
+                    </Banner>
+                </div>
+            )}
+            {shapeChanged && (
+                <div className="shrink-0 px-3 pt-3">
+                    <Banner icon={RefreshCw} tone="neutral" className="w-full" message={t('designer.changed')}>
+                        <Button variant="secondary" size="sm" onClick={loaded.reload}>
+                            {t('designer.reload')}
+                        </Button>
+                    </Banner>
+                </div>
+            )}
+            {!loaded.loading && snapshot !== null && plan !== null && (
+                <DesignerView
+                    className="grow"
+                    dialect={snapshot.dialect}
+                    schema={schema}
+                    draft={draft}
+                    isNew={snapshot.structure === null}
+                    changed={draft !== editing.baseline}
+                    tables={snapshot.tables}
+                    plan={plan}
+                    readOnlyReason={readOnlyReason}
+                    failure={failure}
+                    confirming={confirming}
+                    referenceColumns={referenceColumns}
+                    onChange={(next) => setEditing({ ...editing, draft: next })}
+                    onRequestApply={() => setConfirming(true)}
+                    onConfirm={apply}
+                    onCancelConfirm={() => setConfirming(false)}
+                    onRevert={() => {
+                        setEditing({ ...editing, draft: editing.baseline });
+                        setFailure(null);
+                    }}
+                    onDismissFailure={() => setFailure(null)}
+                />
+            )}
+        </div>
+    );
+}

package/src/designer/edit.ts

@@ -0,0 +1,137 @@
+import { emptyColumn, nextKey, type ColumnDraft, type ForeignKeyDraft, type IndexDraft, type TableDraft, type TableOptions } from '../ddl/index.ts';
+
+/* The editing steps of a draft. Each returns a new draft and leaves the one it was given alone. */
+
+const replaceAt = <T extends { readonly key: string }>(items: readonly T[], key: string, change: (item: T) => T): T[] =>
+    items.map((item) => (item.key === key ? change(item) : item));
+
+const toggled = (names: readonly string[], name: string): string[] =>
+    names.includes(name) ? names.filter((candidate) => candidate !== name) : [...names, name];
+
+export const renameTable = (draft: TableDraft, name: string): TableDraft => ({ ...draft, name });
+
+export const addColumn = (draft: TableDraft, type: string): TableDraft => ({
+    ...draft,
+    columns: [...draft.columns, { ...emptyColumn(), type, name: `column_${draft.columns.length + 1}` }]
+});
+
+/* A rename carries along every key, index and foreign key that names the column. */
+export const patchColumn = (draft: TableDraft, key: string, patch: Partial<ColumnDraft>): TableDraft => {
+    const before = draft.columns.find((column) => column.key === key);
+    if (before === undefined) {
+        return draft;
+    }
+    const inKey = draft.primaryKey.includes(before.name);
+    const applied: Partial<ColumnDraft> = inKey && patch.nullable === true ? { ...patch, nullable: false } : patch;
+    const after = { ...before, ...applied };
+    const follow = (names: readonly string[]): string[] => names.map((name) => (name === before.name ? after.name : name));
+    return {
+        ...draft,
+        columns: replaceAt(draft.columns, key, () => after),
+        primaryKey: follow(draft.primaryKey),
+        indexes: draft.indexes.map((index) => ({ ...index, columns: follow(index.columns) })),
+        foreignKeys: draft.foreignKeys.map((foreignKey) => ({ ...foreignKey, columns: follow(foreignKey.columns) }))
+    };
+};
+
+/* What names the column goes with it: an index keeps its other columns, a foreign key on it is dropped. */
+export const removeColumn = (draft: TableDraft, key: string): TableDraft => {
+    const gone = draft.columns.find((column) => column.key === key);
+    if (gone === undefined) {
+        return draft;
+    }
+    return {
+        ...draft,
+        columns: draft.columns.filter((column) => column.key !== key),
+        primaryKey: draft.primaryKey.filter((name) => name !== gone.name),
+        indexes: draft.indexes
+            .map((index) => ({ ...index, columns: index.columns.filter((name) => name !== gone.name) }))
+            .filter((index) => index.columns.length > 0),
+        foreignKeys: draft.foreignKeys.filter((foreignKey) => !foreignKey.columns.includes(gone.name))
+    };
+};
+
+export const moveColumn = (draft: TableDraft, key: string, offset: -1 | 1): TableDraft => {
+    const from = draft.columns.findIndex((column) => column.key === key);
+    const to = from + offset;
+    if (from < 0 || to < 0 || to >= draft.columns.length) {
+        return draft;
+    }
+    const columns = [...draft.columns];
+    [columns[from], columns[to]] = [columns[to]!, columns[from]!];
+    return { ...draft, columns };
+};
+
+/* A column in the primary key cannot be null, so putting it there says so. */
+export const togglePrimaryKey = (draft: TableDraft, key: string): TableDraft => {
+    const column = draft.columns.find((candidate) => candidate.key === key);
+    if (column === undefined) {
+        return draft;
+    }
+    const joining = !draft.primaryKey.includes(column.name);
+    const toggledKey = { ...draft, primaryKey: toggled(draft.primaryKey, column.name) };
+    return joining ? patchColumn(toggledKey, key, { nullable: false }) : toggledKey;
+};
+
+export const addIndex = (draft: TableDraft): TableDraft => ({
+    ...draft,
+    indexes: [
+        ...draft.indexes,
+        { key: nextKey(), originalName: null, name: `idx_${draft.name || 'table'}_${draft.indexes.length + 1}`, columns: [], unique: false }
+    ]
+});
+
+export const patchIndex = (draft: TableDraft, key: string, patch: Partial<IndexDraft>): TableDraft => ({
+    ...draft,
+    indexes: replaceAt(draft.indexes, key, (index) => ({ ...index, ...patch }))
+});
+
+export const toggleIndexColumn = (draft: TableDraft, key: string, column: string): TableDraft => ({
+    ...draft,
+    indexes: replaceAt(draft.indexes, key, (index) => ({ ...index, columns: toggled(index.columns, column) }))
+});
+
+export const removeIndex = (draft: TableDraft, key: string): TableDraft => ({ ...draft, indexes: draft.indexes.filter((index) => index.key !== key) });
+
+export const addForeignKey = (draft: TableDraft, schema: string): TableDraft => ({
+    ...draft,
+    foreignKeys: [
+        ...draft.foreignKeys,
+        {
+            key: nextKey(),
+            originalName: null,
+            name: `fk_${draft.name || 'table'}_${draft.foreignKeys.length + 1}`,
+            columns: [],
+            referencedSchema: schema,
+            referencedTable: '',
+            referencedColumns: [],
+            onUpdate: null,
+            onDelete: null
+        }
+    ]
+});
+
+export const patchForeignKey = (draft: TableDraft, key: string, patch: Partial<ForeignKeyDraft>): TableDraft => ({
+    ...draft,
+    foreignKeys: replaceAt(draft.foreignKeys, key, (foreignKey) => ({ ...foreignKey, ...patch }))
+});
+
+/* Another table has other columns, so the old pick is forgotten. */
+export const setReferencedTable = (draft: TableDraft, key: string, schema: string, table: string): TableDraft =>
+    patchForeignKey(draft, key, { referencedSchema: schema, referencedTable: table, referencedColumns: [] });
+
+export const toggleForeignKeyColumn = (draft: TableDraft, key: string, side: 'columns' | 'referencedColumns', column: string): TableDraft => ({
+    ...draft,
+    foreignKeys: replaceAt(draft.foreignKeys, key, (foreignKey) => ({ ...foreignKey, [side]: toggled(foreignKey[side], column) }))
+});
+
+export const removeForeignKey = (draft: TableDraft, key: string): TableDraft => ({
+    ...draft,
+    foreignKeys: draft.foreignKeys.filter((foreignKey) => foreignKey.key !== key)
+});
+
+/* A collation belongs to a character set, so choosing another set empties it. */
+export const patchOptions = (draft: TableDraft, patch: Partial<TableOptions>): TableDraft => {
+    const charsetChanged = patch.charset !== undefined && patch.charset !== draft.options.charset;
+    return { ...draft, options: { ...draft.options, ...(charsetChanged ? { collation: '' } : {}), ...patch } };
+};

package/src/designer/editor-props.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'react';
+import type { Dialect, TableDraft } from '../ddl/index.ts';
+
+/* What every tab of the designer is given: the draft it edits, and a way to hand back the next one. */
+export interface EditorProps {
+    draft: TableDraft;
+    dialect: Dialect;
+    /* Nothing can be edited, such as on a connection that is read only. */
+    disabled: boolean;
+    onChange(draft: TableDraft): void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}

package/src/designer/plan.ts

@@ -0,0 +1,25 @@
+import type { TableStructure } from '../protocol/index.ts';
+import { alterTableSql, createTableSql, dropsColumns, draftOf, validateDraft, type Dialect, type DraftProblem, type TableDraft } from '../ddl/index.ts';
+
+/* What applying a draft would do. */
+export interface Plan {
+    readonly problems: readonly DraftProblem[];
+    /* Empty while there are problems, since a draft that does not hold together has no SQL. */
+    readonly statements: readonly string[];
+    /* Whether the statements remove a column and the data in it. */
+    readonly destructive: boolean;
+}
+
+export const planOf = (dialect: Dialect, schema: string, structure: TableStructure | null, draft: TableDraft): Plan => {
+    const problems = validateDraft(dialect, draft);
+    if (problems.length > 0) {
+        return { problems, statements: [], destructive: false };
+    }
+    if (structure === null) {
+        return { problems, statements: createTableSql(dialect, schema, draft), destructive: false };
+    }
+    return { problems, statements: alterTableSql(dialect, schema, structure, draft), destructive: dropsColumns(draftOf(structure), draft) };
+};
+
+/* The statements as a person reads them and as a script runs them. */
+export const scriptOf = (statements: readonly string[]): string => statements.map((statement) => `${statement};`).join('\n');

package/src/designer/recover.ts

@@ -0,0 +1,20 @@
+import type { DatabaseSession } from '../client/types.ts';
+
+const REBUILD_START = 'PRAGMA foreign_keys=OFF';
+
+/*
+ * A failed rebuild leaves SQLite with a transaction it began and foreign keys it switched off.
+ * Only a transaction this script began is rolled back, since one the person had open is theirs.
+ */
+export async function recoverFrom(session: DatabaseSession, statements: readonly string[], failedSql: string, inTransaction: boolean): Promise<void> {
+    try {
+        if (inTransaction && statements.includes('BEGIN') && failedSql.trim().toUpperCase() !== 'BEGIN') {
+            await session.transaction('rollback');
+        }
+        if (statements[0] === REBUILD_START) {
+            await session.execute('PRAGMA foreign_keys=ON');
+        }
+    } catch {
+        // The error of the statement that failed is the one worth showing.
+    }
+}

package/src/designer/useReferenceColumns.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import type { Connection, DatabaseClient } from '../client/types.ts';
+import type { TableDraft } from '../ddl/index.ts';
+
+interface Cache {
+    readonly scope: string;
+    readonly columns: Readonly<Record<string, readonly string[]>>;
+}
+
+/*
+ * The columns of the tables the draft's foreign keys point at, loaded as they are picked. `scope`
+ * is the connection and the schema, so a cache never answers for another. A table that fails to
+ * load has no columns to pick from, which stops the wait.
+ */
+export function useReferenceColumns(
+    client: DatabaseClient,
+    connection: Connection,
+    schema: string,
+    draft: TableDraft
+): (table: string) => readonly string[] | null {
+    const scope = `${connection.id}\u0000${schema}`;
+    const [cache, setCache] = useState<Cache>({ scope, columns: {} });
+    const known = cache.scope === scope ? cache.columns : {};
+    const wanted = [...new Set(draft.foreignKeys.map((foreignKey) => foreignKey.referencedTable))]
+        .filter((table) => table !== '' && table !== draft.name && !(table in known))
+        .sort();
+    const wantedKey = wanted.join('\u0000');
+
+    useEffect(() => {
+        if (wantedKey === '') {
+            return undefined;
+        }
+        let current = true;
+        const session = client.session(connection);
+        for (const table of wantedKey.split('\u0000')) {
+            session
+                .structure(schema, table)
+                .then(
+                    (structure) => structure.columns.map((column) => column.name),
+                    () => []
+                )
+                .then((names) => {
+                    if (current) {
+                        setCache((now) => ({ scope, columns: { ...(now.scope === scope ? now.columns : {}), [table]: names } }));
+                    }
+                });
+        }
+        return () => {
+            current = false;
+        };
+    }, [client, connection, schema, scope, wantedKey]);
+
+    return (table) => (table === draft.name ? draft.columns.map((column) => column.name) : (known[table] ?? null));
+}