@adecore/database 0.17.0 → 0.18.0

package/README.md

@@ -91,7 +91,7 @@ A `Connection` is `{ id, name, config }`. The app keeps the list, with the passw
 >
 ```
 
-`onAction` receives a `DatabaseAction` when a view wants a table, a console or the designer opened, so the app decides where it goes. `storage` keeps layouts, console history and open tabs across a remount. `files` holds the app's save and open dialogs for export and import.
+`onAction` receives a `DatabaseAction` when a view wants a table, a console or the designer opened, so the app decides where it goes. `storage` keeps layouts, console history and open tabs across a remount. `files` holds the app's save and open dialogs for export and import. A provider inside another needs none of them: it takes what it leaves out from the one above, so `<DatabaseProvider onAction={...}>` around one tab tells which tab an action came from.
 
 Tell Tailwind to scan the package for its classes, next to the `@source` line of `@adecore/ui`. The path is relative to the CSS file:
 

package/dist/DatabaseProvider.d.ts

@@ -1,13 +1,14 @@
 import { type ReactNode } from 'react';
-import type { DatabaseAction, DatabaseFiles, DatabaseStorage } from './actions.ts';
+import type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage } from './actions.ts';
 import type { DatabaseClient } from './client/types.ts';
 import type { NumberNotation } from './grid/display.ts';
 export interface DatabaseProviderProps {
-    client: DatabaseClient;
+    client?: DatabaseClient;
     onAction?(action: DatabaseAction): void;
+    onNotice?(notice: DatabaseNotice): void;
     storage?: DatabaseStorage;
     files?: DatabaseFiles;
     numberNotation?: NumberNotation;
     children: ReactNode;
 }
-export declare function DatabaseProvider({ client, onAction, storage, files, numberNotation, children }: DatabaseProviderProps): import("react").JSX.Element;
+export declare function DatabaseProvider({ client, onAction, onNotice, storage, files, numberNotation, children }: DatabaseProviderProps): import("react").JSX.Element;

package/dist/DatabaseProvider.js

@@ -1,17 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { use, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DatabaseContext } from './client-context.js';
 import { addDatabaseResources } from './locales.js';
 /* Hands every view below it the client and the app's hooks, and adds the package's words to the i18next the app's `UIProvider` was given. Mount it inside that provider. */
-export function DatabaseProvider({ client, onAction, storage, files, numberNotation = 'database', children }) {
+export function DatabaseProvider({ client, onAction, onNotice, storage, files, numberNotation, children }) {
     const { i18n } = useTranslation();
+    const outer = use(DatabaseContext);
     const [added, setAdded] = useState(null);
     // In render, as `UIProvider` does, so the first view already reads its words.
     if (added !== i18n) {
         addDatabaseResources(i18n);
         setAdded(i18n);
     }
-    const value = useMemo(() => ({ client, onAction, storage, files, numberNotation }), [client, onAction, storage, files, numberNotation]);
+    const ownClient = client ?? outer?.client;
+    const ownAction = onAction ?? outer?.onAction;
+    const ownNotice = onNotice ?? outer?.onNotice;
+    const ownStorage = storage ?? outer?.storage;
+    const ownFiles = files ?? outer?.files;
+    const ownNotation = numberNotation ?? outer?.numberNotation ?? 'database';
+    const value = useMemo(() => ownClient === undefined
+        ? null
+        : { client: ownClient, onAction: ownAction, onNotice: ownNotice, storage: ownStorage, files: ownFiles, numberNotation: ownNotation }, [ownClient, ownAction, ownNotice, ownStorage, ownFiles, ownNotation]);
+    if (value === null) {
+        throw new Error('A DatabaseProvider needs a client, or a DatabaseProvider above it to take one from.');
+    }
     return _jsx(DatabaseContext, { value: value, children: children });
 }

package/dist/KeyIcon.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnKeys } from './column-keys.ts';
+export declare function KeyIcon({ primaryKey, foreignKey, size }: ColumnKeys & {
+    size: 12 | 14;
+}): import("react").JSX.Element | null;

package/dist/KeyIcon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { KeyRound } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+/*
+ * The key of a column, yellow on a primary key and blue on a foreign key, the same in the tree and the
+ * grid. A column that is both shows the primary key, since that is what names its row; the tooltip says both.
+ */
+export function KeyIcon({ primaryKey, foreignKey, size }) {
+    if (!primaryKey && !foreignKey) {
+        return null;
+    }
+    return _jsx(Icon, { icon: KeyRound, size: size, className: clsx('shrink-0', primaryKey ? 'text-(--file-icon-yellow)' : 'text-(--file-icon-blue)') });
+}

package/dist/actions.d.ts

@@ -1,9 +1,12 @@
 import type { TableRef } from './client/types.ts';
+import type { TableKind } from './protocol/index.ts';
 export type DatabaseAction = {
     readonly kind: 'open-table';
     readonly ref: TableRef;
     readonly view: 'data' | 'structure';
     readonly where?: string;
+    readonly tableKind?: TableKind;
+    readonly preview?: boolean;
 } | {
     readonly kind: 'open-console';
     readonly connectionId: string;
@@ -20,6 +23,15 @@ export type DatabaseAction = {
     readonly kind: 'manage-connection';
     readonly connectionId: string;
 };
+export interface DatabaseNotice {
+    readonly tone: 'success' | 'error';
+    readonly title: string;
+    readonly description?: string;
+    readonly action?: {
+        readonly label: string;
+        run(): void;
+    };
+}
 export interface ExplorerSelection {
     readonly connectionId: string;
     readonly schema?: string;

package/dist/client-context.d.ts

@@ -1,9 +1,10 @@
-import type { DatabaseAction, DatabaseFiles, DatabaseStorage } from './actions.ts';
+import type { DatabaseAction, DatabaseFiles, DatabaseNotice, DatabaseStorage } from './actions.ts';
 import type { DatabaseClient } from './client/types.ts';
 import type { NumberNotation } from './grid/display.ts';
 export interface DatabaseContextValue {
     readonly client: DatabaseClient;
     readonly onAction: ((action: DatabaseAction) => void) | undefined;
+    readonly onNotice: ((notice: DatabaseNotice) => void) | undefined;
     readonly storage: DatabaseStorage | undefined;
     readonly files: DatabaseFiles | undefined;
     readonly numberNotation: NumberNotation;
@@ -11,6 +12,7 @@ export interface DatabaseContextValue {
 export declare const DatabaseContext: import("react").Context<DatabaseContextValue | null>;
 export declare const useDatabaseClient: () => DatabaseClient;
 export declare const useDatabaseAction: () => ((action: DatabaseAction) => void) | undefined;
+export declare const useDatabaseNotice: () => ((notice: DatabaseNotice) => void) | undefined;
 export declare const useDatabaseStorage: () => DatabaseStorage | undefined;
 export declare const useDatabaseFiles: () => DatabaseFiles | undefined;
 export declare const useNumberNotation: () => NumberNotation;

package/dist/client-context.js

@@ -10,6 +10,8 @@ const useDatabaseContext = () => {
 export const useDatabaseClient = () => useDatabaseContext().client;
 /* Hands an action to the app, or `undefined` when the app takes none, so a view can leave out what would go nowhere. */
 export const useDatabaseAction = () => useDatabaseContext().onAction;
+/* Hands a notice to the app, or `undefined` when the app takes none and the view shows it itself. */
+export const useDatabaseNotice = () => useDatabaseContext().onNotice;
 export const useDatabaseStorage = () => useDatabaseContext().storage;
 /* The app's file dialogs; export and import stay hidden without them. */
 export const useDatabaseFiles = () => useDatabaseContext().files;

package/dist/code-text.d.ts

@@ -0,0 +1 @@
+export declare const CODE_TEXT = "font-mono text-(length:--code-font-size) leading-(--code-line-height)";

package/dist/code-text.js

@@ -0,0 +1,2 @@
+/* Code a person reads as code (values, statements, DDL), at the size the app gives its code through `--code-font-size` and `--code-line-height`. */
+export const CODE_TEXT = 'font-mono text-(length:--code-font-size) leading-(--code-line-height)';

package/dist/column-keys.d.ts

@@ -0,0 +1,5 @@
+export interface ColumnKeys {
+    readonly primaryKey: boolean;
+    readonly foreignKey: boolean;
+}
+export declare const keyLabelOf: ({ primaryKey, foreignKey }: ColumnKeys) => 'explorer.primaryAndForeignKey' | 'explorer.primaryKey' | 'explorer.foreignKey';

package/dist/column-keys.js

@@ -0,0 +1,2 @@
+/* The words that name what a key column is, for its tooltip. */
+export const keyLabelOf = ({ primaryKey, foreignKey }) => primaryKey && foreignKey ? 'explorer.primaryAndForeignKey' : primaryKey ? 'explorer.primaryKey' : 'explorer.foreignKey';

package/dist/connections/ConnectionManager.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import type { Connection } from '../client/types.ts';
 export interface ConnectionManagerProps {
     value: readonly Connection[];
@@ -6,7 +6,8 @@ export interface ConnectionManagerProps {
     selected?: string | null;
     onSelectedChange?(id: string | null): void;
     onBrowse?(purpose: 'database' | 'identity'): Promise<string | null>;
+    renderFields?(connection: Connection): ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, className, ref }: ConnectionManagerProps): import("react").JSX.Element;
+export declare function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, renderFields, className, ref }: ConnectionManagerProps): import("react").JSX.Element;

package/dist/connections/ConnectionManager.js

@@ -1,25 +1,36 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import clsx from 'clsx';
 import { CircleAlert, CircleCheck, Container, Database, Plus, Trash2, Unplug } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Banner, Button, EmptyState, Icon, Menu, messageOf, PromptDialog, Spinner } from '@adecore/ui';
-import { DetailHeader, MasterDetail, MasterItem } from '@adecore/ui/settings';
+import { Banner, Button, CloseButton, EmptyState, Icon, Menu, messageOf, PromptDialog, Spinner } from '@adecore/ui';
+import { DetailHeader, MasterItem } from '@adecore/ui/settings';
 import { useDatabaseClient } from '../client-context.js';
 import { defaultConfig, isValidConfig, targetOf } from './connection-config.js';
 import { ConnectionForm } from './ConnectionForm.js';
-import { composeNameOf, connectionFromContainer, isMysqlContainer } from './docker.js';
+import { connectionFromContainer, containerTitle, isMysqlContainer } from './docker.js';
 import { useDockerContainers } from './use-docker-containers.js';
 import { ENGINE_ICONS } from './engine-icons.js';
 import { EngineIcon } from './EngineIcon.js';
 const ENGINES = ['sqlite', 'mysql'];
-/* The saved connections beside the form of the one picked, for a settings pane or a view of its own. */
-export function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, className, ref }) {
+/*
+ * The saved connections beside the form of the one picked, for a dialog, a settings pane or a view of its own. The list
+ * scrolls on its own with New connection under it, and the detail scrolls beside it; in a narrow window they stack.
+ */
+export function ConnectionManager({ value, onValueChange, selected, onSelectedChange, onBrowse, renderFields, className, ref }) {
     const { t } = useTranslation('database');
     const [own, setOwn] = useState(null);
     const [deleting, setDeleting] = useState(false);
+    const [outcome, setOutcome] = useState(null);
     const client = useDatabaseClient();
     const pickedId = selected === undefined ? own : selected;
     const current = value.find((connection) => connection.id === pickedId) ?? value[0] ?? null;
+    // The answer of one connection is gone once another is picked, so coming back does not bring it back.
+    if (outcome !== null && outcome.connectionId !== current?.id) {
+        setOutcome(null);
+    }
+    // An answer to an older config is never shown for a newer one.
+    const shown = outcome !== null && current !== null && outcome.config === current.config ? outcome : null;
     const select = (id) => {
         if (selected === undefined) {
             setOwn(id);
@@ -46,12 +57,14 @@ export function ConnectionManager({ value, onValueChange, selected, onSelectedCh
         onValueChange(rest);
         select(rest[Math.min(index, rest.length - 1)]?.id ?? null);
     };
-    const list = (_jsxs(_Fragment, { children: [_jsxs(Menu.Root, { children: [_jsxs(Menu.Trigger, { render: _jsx(Button, { variant: "secondary", size: "sm", className: "mb-2" }), children: [_jsx(Icon, { icon: Plus, size: 14 }), t('connections.new')] }), _jsxs(Menu.Popup, { children: [ENGINES.map((engine) => (_jsxs(Menu.Item, { onClick: () => add(engine), children: [_jsx(Icon, { icon: ENGINE_ICONS[engine], size: 14 }), t(`engine.${engine}`)] }, engine))), _jsx(Menu.Separator, {}), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Container, size: 14 }), t('connections.fromDocker.label')] }), _jsx(Menu.Popup, { children: _jsx(DockerMenuItems, { onPick: addFromContainer }) })] })] })] }), value.map((connection) => (_jsxs(MasterItem, { selected: connection.id === current?.id, onSelect: () => select(connection.id), children: [_jsx(EngineIcon, { engine: connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: connection.name || t('connections.untitled') }), _jsx("span", { className: "truncate text-xs text-text-faint", children: targetOf(connection) })] })] }, connection.id)))] }));
-    const detail = current === null ? (_jsx(EmptyState, { icon: Database, children: t('connections.empty') })) : (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx(EngineIcon, { engine: current.config.engine, size: 20, className: "mt-0.5 shrink-0 text-text-muted" }), title: current.name || t('connections.untitled'), subtitle: targetOf(current), actions: _jsxs(Button, { variant: "danger-outline", onClick: () => setDeleting(true), children: [_jsx(Icon, { icon: Trash2, size: 14 }), t('connections.delete.action')] }) }), _jsx(ConnectionForm, { value: current, onValueChange: change, onBrowse: onBrowse }), _jsx(ConnectionTest, { connection: current }, current.id), _jsx(PromptDialog, { open: deleting, danger: true, onOpenChange: setDeleting, title: t('connections.delete.title'), description: t('connections.delete.description', { name: current.name || t('connections.untitled') }), confirmLabel: t('connections.delete.confirm'), onConfirm: async () => {
+    const list = (_jsxs("div", { className: "flex w-56 shrink-0 flex-col border-r border-border max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b", children: [_jsxs("nav", { "aria-label": t('connections.list'), className: "flex min-h-0 grow flex-col gap-0.5 overflow-y-auto p-2", children: [value.length === 0 && _jsx("p", { className: "px-2 py-1.5 text-xs text-text-faint", children: t('connections.empty') }), value.map((connection) => (_jsxs(MasterItem, { selected: connection.id === current?.id, onSelect: () => select(connection.id), children: [_jsx(EngineIcon, { engine: connection.config.engine, size: 16, className: "shrink-0 text-text-muted" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: connection.name || t('connections.untitled') }), _jsx("span", { className: "truncate text-xs text-text-faint", children: targetOf(connection) })] })] }, connection.id)))] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1 border-t border-border p-2", children: _jsxs(Menu.Root, { children: [_jsxs(Menu.Trigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "justify-start" }), children: [_jsx(Icon, { icon: Plus, size: 14 }), t('connections.new')] }), _jsxs(Menu.Popup, { children: [ENGINES.map((engine) => (_jsxs(Menu.Item, { onClick: () => add(engine), children: [_jsx(Icon, { icon: ENGINE_ICONS[engine], size: 14 }), t(`engine.${engine}`)] }, engine))), _jsx(Menu.Separator, {}), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { children: [_jsx(Icon, { icon: Container, size: 14 }), t('connections.fromDocker.label')] }), _jsx(Menu.Popup, { children: _jsx(DockerMenuItems, { onPick: addFromContainer }) })] })] })] }) })] }));
+    const detail = current === null ? (_jsx(EmptyState, { icon: Database, children: t('connections.empty') })) : (_jsxs(_Fragment, { children: [shown !== null && (_jsx(Banner, { icon: 'info' in shown ? CircleCheck : CircleAlert, tone: 'info' in shown ? 'neutral' : 'error', className: "sticky top-0 z-10", message: 'info' in shown
+                    ? t('connections.test.success', { server: `${t(`engine.flavor.${shown.info.flavor}`)} ${shown.info.version}` })
+                    : shown.error, children: _jsx(CloseButton, { size: "sm", label: t('connections.test.dismiss'), onClick: () => setOutcome(null) }) })), _jsx(DetailHeader, { mark: _jsx(EngineIcon, { engine: current.config.engine, size: 20, className: "mt-0.5 shrink-0 text-text-muted" }), title: current.name || t('connections.untitled'), subtitle: targetOf(current), actions: _jsxs(Button, { variant: "danger-outline", onClick: () => setDeleting(true), children: [_jsx(Icon, { icon: Trash2, size: 14 }), t('connections.delete.action')] }) }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ConnectionForm, { value: current, onValueChange: change, onBrowse: onBrowse }), renderFields?.(current)] }), _jsx(ConnectionTest, { connection: current, onOutcome: setOutcome }, current.id), _jsx(PromptDialog, { open: deleting, danger: true, onOpenChange: setDeleting, title: t('connections.delete.title'), description: t('connections.delete.description', { name: current.name || t('connections.untitled') }), confirmLabel: t('connections.delete.confirm'), onConfirm: async () => {
                     await remove(current);
                     setDeleting(false);
                 } })] }));
-    return _jsx(MasterDetail, { ref: ref, className: className, list: list, listWidth: 280, listLabel: t('connections.list'), detail: detail });
+    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 grow max-[640px]:flex-col', className), children: [list, _jsx("div", { className: "min-h-0 min-w-0 grow overflow-y-auto", children: _jsx("div", { className: "flex min-w-0 flex-col gap-6 px-5 py-4", children: detail }) })] }));
 }
 /* The containers Docker is running as menu items. The submenu mounts this when it opens, so Docker is asked only then. */
 function DockerMenuItems({ onPick }) {
@@ -67,27 +80,25 @@ function DockerMenuItems({ onPick }) {
     if (containers.length === 0) {
         return _jsx(Menu.Label, { children: t('connections.fromDocker.empty') });
     }
-    return containers.map((container) => (_jsx(Menu.Item, { onClick: () => onPick(container), children: _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: composeNameOf(container) ?? container.name }), _jsx("span", { className: "truncate text-xs text-text-faint", children: container.image })] }) }, container.id)));
+    return containers.map((container) => (_jsx(Menu.Item, { onClick: () => onPick(container), children: _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: containerTitle(container) }), _jsx("span", { className: "truncate text-xs text-text-faint", children: container.image })] }) }, container.id)));
 }
-/* The button that asks the server who it is, and what it answered; an answer to an older config is not shown. */
-function ConnectionTest({ connection }) {
+/* The button that asks the server who it is. The manager shows the answer at the top of the detail. */
+function ConnectionTest({ connection, onOutcome }) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const [busy, setBusy] = useState(false);
-    const [outcome, setOutcome] = useState(null);
-    const shown = outcome !== null && outcome.config === connection.config ? outcome : null;
     const test = async () => {
         const config = connection.config;
         setBusy(true);
         try {
-            setOutcome({ config, info: await client.test(config) });
+            onOutcome({ connectionId: connection.id, config, info: await client.test(config) });
         }
         catch (e) {
-            setOutcome({ config, error: messageOf(e, t('connections.test.failed')) });
+            onOutcome({ connectionId: connection.id, config, error: messageOf(e, t('connections.test.failed')) });
         }
         finally {
             setBusy(false);
         }
     };
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { children: _jsxs(Button, { variant: "secondary", disabled: busy || !isValidConfig(connection.config), onClick: () => void test(), children: [busy ? _jsx(Spinner, { size: 14 }) : _jsx(Icon, { icon: Unplug, size: 14 }), t('connections.test.action')] }) }), shown !== null && 'info' in shown && (_jsx(Banner, { icon: CircleCheck, tone: "neutral", className: "w-full", message: t('connections.test.success', { server: `${t(`engine.flavor.${shown.info.flavor}`)} ${shown.info.version}` }) })), shown !== null && 'error' in shown && _jsx(Banner, { icon: CircleAlert, tone: "error", className: "w-full", message: shown.error })] }));
+    return (_jsx("div", { children: _jsxs(Button, { variant: "secondary", disabled: busy || !isValidConfig(connection.config), onClick: () => void test(), children: [busy ? _jsx(Spinner, { size: 14 }) : _jsx(Icon, { icon: Unplug, size: 14 }), t('connections.test.action')] }) }));
 }

package/dist/connections/connection-config.js

@@ -53,7 +53,9 @@ const mysqlProblems = (config) => {
     }
     return problems;
 };
+/* What is wrong with a config, field by field: the codes the form shows. Empty for a config with nothing to fix. */
 export const configProblems = (config) => (config.engine === 'sqlite' ? sqliteProblems(config) : mysqlProblems(config));
+/* Whether a connection can be saved, rather than a draft a person is still filling in. */
 export const isValidConfig = (config) => Object.keys(configProblems(config)).length === 0;
 const lastSegment = (path) => {
     const segments = path.split(/[\\/]/).filter((segment) => segment !== '');

package/dist/console/QueryConsole.d.ts

@@ -1,14 +1,19 @@
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import { type Connection } from '../client/types.ts';
+import type { QueryConsoleEditorProps } from './editor-slot.ts';
 export interface QueryConsoleProps {
-    connection: Connection;
+    connection?: Connection;
     schema?: string;
+    onSchemaChange?(schema: string): void;
     value?: string;
     defaultValue?: string;
     onValueChange?(sql: string): void;
     defaultHistoryOpen?: boolean;
     autoFocus?: boolean;
+    renderEditor?(editor: QueryConsoleEditorProps): ReactNode;
+    toolbarEnd?: ReactNode;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function QueryConsole({ connection, schema, value, defaultValue, onValueChange, defaultHistoryOpen, autoFocus, className, ref }: QueryConsoleProps): import("react").JSX.Element;
+export declare const RESULTS_HEIGHT_KEY = "database:console-results";
+export declare function QueryConsole({ connection, schema, onSchemaChange, value, defaultValue, onValueChange, defaultHistoryOpen, autoFocus, renderEditor, toolbarEnd, className, ref }: QueryConsoleProps): import("react").JSX.Element;