@adecore/database 0.17.0 → 0.18.1

package/src/explorer/DatabaseExplorer.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref } from 'react';
+import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 import clsx from 'clsx';
-import { CircleAlert, Database, Eye, Folder, KeyRound, Link2, Lock, RectangleVertical, Search, Table } from 'lucide-react';
+import { CircleAlert, Columns2, Database, Eye, Folder, KeyRound, ListOrdered, Lock, Search, ShieldCheck, Table, Zap, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, ContextMenu, EmptyState, Icon, Input, Spinner, Tooltip, Tree } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
@@ -8,6 +8,9 @@ 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 { keyLabelOf, type ColumnKeys } from '../column-keys.ts';
+import { KeyIcon } from '../KeyIcon.tsx';
+import type { ExplorerFolder } from './folders.ts';
 import { RowMenu } from './RowMenu.tsx';
 import { TableDialog, type TableRequest } from './TableDialog.tsx';
 import {
@@ -15,14 +18,17 @@ import {
     flattenTree,
     hasMenu,
     isExpandable,
-    isFolderKey,
+    startsOpen,
     isSelectable,
     navigate,
     neededLoads,
     selectionKey,
     selectionOf,
     tabStop,
+    openedTableOf,
+    tableKindIn,
     tableOf,
+    type EntryRow,
     type ErrorRow,
     type LoadTarget,
     type ExpandableRow,
@@ -39,15 +45,30 @@ export interface DatabaseExplorerProps {
     defaultValue?: ExplorerSelection | null;
     onValueChange?(selection: ExplorerSelection | null): void;
     showSystemSchemas?: boolean;
+    /* Opens a table on a click too, with `preview: true`; a double click or Enter then sends `preview: false`. */
+    openOnClick?: boolean;
+    /* The app's own folders under each connection, by connection id, after its schemas. */
+    folders?: Readonly<Record<string, readonly ExplorerFolder[]>>;
     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`.
+ * selects; a double click or Enter on a table asks the app to open it through `useDatabaseAction`,
+ * and on an item of a folder the app added opens it through the item's own `onOpen`.
  */
-export function DatabaseExplorer({ connections, value, defaultValue = null, onValueChange, showSystemSchemas = false, className, ref }: DatabaseExplorerProps) {
+export function DatabaseExplorer({
+    connections,
+    value,
+    defaultValue = null,
+    onValueChange,
+    showSystemSchemas = false,
+    openOnClick = false,
+    folders,
+    className,
+    ref
+}: DatabaseExplorerProps) {
     const { t } = useTranslation('database');
     const client = useDatabaseClient();
     const act = useDatabaseAction();
@@ -71,7 +92,8 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         schemas: loads.schemas,
         tables: loads.tables,
         structures: loads.structures,
-        versions: loads.versions
+        versions: loads.versions,
+        folders: (connectionId: string) => folders?.[connectionId] ?? []
     };
     const rows = flattenTree({ ...input, filter });
     const stop = tabStop(rows, activeKey, selectedKey);
@@ -90,8 +112,7 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
     }, [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 folder = startsOpen(key);
         const toggle = (current: ReadonlySet<string>): ReadonlySet<string> => {
             const next = new Set(current);
             if (open !== folder) {
@@ -122,23 +143,34 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         }
     };
 
-    const open = (row: TreeRow): void => {
-        const ref = tableOf(row);
-        if (ref !== null) {
-            pick(row);
-            act?.({ kind: 'open-table', ref, view: 'data' });
+    /* `preview` says a click opened it, which only an explorer that opens on a click tells the app. */
+    const open = (row: TreeRow, preview = false): void => {
+        if (row.kind === 'appItem') {
+            row.item.onOpen?.({ preview });
+            return;
+        }
+        const ref = openedTableOf(row);
+        if (ref === null) {
+            return;
         }
+        pick(row);
+        const tableKind = row.kind === 'table' && row.ref === ref ? row.table.kind : tableKindIn(loads.tables(ref.connectionId, ref.schema), ref.table);
+        act?.({ kind: 'open-table', ref, view: 'data', ...(tableKind === undefined ? {} : { tableKind }), ...(openOnClick ? { preview } : {}) });
     };
 
     const activate = (row: TreeRow): void => {
         switch (row.kind) {
             case 'table':
             case 'column':
+            case 'entry':
+            case 'appItem':
                 open(row);
                 break;
             case 'connection':
             case 'schema':
             case 'folder':
+            case 'part':
+            case 'appFolder':
                 pick(row);
                 toggle(row);
                 break;
@@ -170,11 +202,18 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
         }
     };
 
-    const click = (row: TreeRow): void => {
+    /* `count` is the click's `detail`: the second click of a double click leaves the opening to the double click. */
+    const click = (row: TreeRow, count: number): void => {
         if (pressedInPopup()) {
             return;
         }
         setActiveKey(row.key);
+        if (openOnClick && (row.kind === 'table' || row.kind === 'appItem')) {
+            if (count <= 1) {
+                open(row, true);
+            }
+            return;
+        }
         pick(row);
         if (row.kind !== 'table' && isExpandable(row)) {
             toggle(row);
@@ -211,7 +250,9 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
     const renderRow = (row: TreeRow, index: number): ReactNode => {
         const connection = connectionOf(row);
         const menu =
-            connection !== undefined && hasMenu(row) ? (
+            row.kind === 'appItem' ? (
+                (row.item.menu ?? null)
+            ) : connection !== undefined && hasMenu(row) ? (
                 <RowMenu row={row} connection={connection} onRefresh={refresh} onDisconnect={disconnect} onRequest={setRequest} />
             ) : null;
         const selectedRow = isSelected(row);
@@ -234,8 +275,8 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
                     rowElements.current.set(row.key, element);
                 }
             },
-            onClick: () => click(row),
-            onDoubleClick: tableOf(row) === null ? undefined : () => open(row),
+            onClick: (event: MouseEvent) => click(row, event.detail),
+            onDoubleClick: tableOf(row) === null && row.kind !== 'appItem' ? undefined : () => open(row),
             onFocus: () => {
                 if (row.focusable) {
                     setActiveKey(row.key);
@@ -282,7 +323,7 @@ export function DatabaseExplorer({ connections, value, defaultValue = null, onVa
             ) : rows.length === 0 ? (
                 <EmptyState icon={Search}>{t('explorer.noMatches', { query: filter.trim() })}</EmptyState>
             ) : (
-                <Tree.Root aria-label={t('explorer.label')} className="min-h-0 grow overflow-y-auto py-2" onKeyDown={onKeyDown}>
+                <Tree.Root aria-label={t('explorer.label')} overflow="scroll" className="min-h-0 grow overflow-y-auto pt-2" onKeyDown={onKeyDown}>
                     {rows.map(renderRow)}
                 </Tree.Root>
             )}
@@ -307,7 +348,7 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
                             </span>
                         </Tooltip>
                     )}
-                    {row.version !== null && <span className="min-w-0 shrink-[2] truncate text-text-faint">{row.version}</span>}
+                    {row.version !== null && <span className="text-text-faint">{row.version}</span>}
                     {row.schemaCount !== null && <SchemaCount shown={row.schemaCount.shown} total={row.schemaCount.total} />}
                 </>
             );
@@ -336,13 +377,41 @@ function RowContent({ row, onToggle }: { row: TreeRow; onToggle?: () => void })
                     <Tree.Label>{row.table.name}</Tree.Label>
                 </>
             );
+        case 'part':
+            return (
+                <>
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
+                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
+                    <Tree.Label>{t(`explorer.parts.${row.part}`)}</Tree.Label>
+                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
+                </>
+            );
+        case 'appFolder':
+            return (
+                <>
+                    <Tree.Chevron expanded={row.expanded} onExpandedChange={onToggle} />
+                    <Icon icon={Folder} size={16} className="shrink-0 text-text-muted" />
+                    <Tree.Label>{row.folder.label}</Tree.Label>
+                    <span className="shrink-0 text-text-faint tabular-nums">{formatNumber(row.count)}</span>
+                </>
+            );
+        case 'appItem':
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    <Icon icon={row.item.icon} size={16} className="shrink-0 text-text-muted" />
+                    <Tree.Label>{row.item.label}</Tree.Label>
+                </>
+            );
+        case 'entry':
+            return <EntryContent row={row} />;
         case 'column':
             return (
                 <>
                     <Tree.ChevronSlot />
                     <ColumnIcon primaryKey={row.primaryKey} foreignKey={row.foreignKey} />
                     <Tree.Label>{row.column.name}</Tree.Label>
-                    {row.column.type !== '' && <span className="min-w-0 shrink-[2] truncate text-text-faint">{row.column.type}</span>}
+                    {row.column.type !== '' && <span className="text-text-faint">{row.column.type}</span>}
                 </>
             );
         case 'loading':
@@ -377,20 +446,95 @@ function SchemaCount({ shown, total }: { shown: number; total: number }) {
     );
 }
 
-function ColumnIcon({ primaryKey, foreignKey }: { primaryKey: boolean; foreignKey: boolean }) {
+/* A step smaller than the icons of the rows above, in the same 16px slot, so the names stay in line. */
+const ENTRY_ICON_SLOT = 'inline-flex size-4 shrink-0 items-center justify-center';
+
+function ColumnIcon(keys: ColumnKeys) {
     const { t } = useTranslation('database');
-    if (!primaryKey && !foreignKey) {
-        return <Icon icon={RectangleVertical} size={16} className="shrink-0 text-text-faint" />;
+    if (!keys.primaryKey && !keys.foreignKey) {
+        return (
+            <span className={ENTRY_ICON_SLOT}>
+                <Icon icon={Columns2} size={14} className="text-text-faint" />
+            </span>
+        );
     }
     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} />
+        <Tooltip label={t(keyLabelOf(keys))}>
+            <span className={ENTRY_ICON_SLOT}>
+                <KeyIcon {...keys} size={14} />
             </span>
         </Tooltip>
     );
 }
 
+/* A key, a foreign key, an index, a check or a trigger of a table: its name, and what it covers in the quiet color of a column's type. */
+function EntryContent({ row }: { row: EntryRow }) {
+    const { t } = useTranslation('database');
+    const { entry } = row;
+    const icon = (glyph: LucideIcon, className: string): ReactNode => (
+        <span className={ENTRY_ICON_SLOT}>
+            <Icon icon={glyph} size={14} className={className} />
+        </span>
+    );
+    switch (entry.type) {
+        case 'key':
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    {icon(KeyRound, entry.primary ? 'text-(--file-icon-yellow)' : 'text-text-muted')}
+                    <Tree.Label>{entry.name ?? t('explorer.primaryKey')}</Tree.Label>
+                    <span className="text-text-faint">{entry.columns.join(', ')}</span>
+                </>
+            );
+        case 'foreignKey': {
+            const { foreignKey } = entry;
+            const columns = foreignKey.columns.join(', ');
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    {icon(KeyRound, 'text-(--file-icon-blue)')}
+                    <Tree.Label>{foreignKey.name ?? columns}</Tree.Label>
+                    <span className="text-text-faint">
+                        {t('explorer.references', {
+                            columns,
+                            table: foreignKey.referencedTable,
+                            referenced: foreignKey.referencedColumns.join(', ')
+                        })}
+                    </span>
+                </>
+            );
+        }
+        case 'index':
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    {icon(ListOrdered, 'text-text-faint')}
+                    <Tree.Label>{entry.index.name}</Tree.Label>
+                    <span className="text-text-faint">{entry.index.columns.join(', ')}</span>
+                    {entry.index.unique && <span className="text-text-faint">{t('explorer.unique')}</span>}
+                </>
+            );
+        case 'check':
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    {icon(ShieldCheck, 'text-text-faint')}
+                    <Tree.Label>{entry.check.name ?? t('explorer.check')}</Tree.Label>
+                    <span className="font-mono text-text-faint">{entry.check.expression}</span>
+                </>
+            );
+        case 'trigger':
+            return (
+                <>
+                    <Tree.ChevronSlot />
+                    {icon(Zap, 'text-text-faint')}
+                    <Tree.Label>{entry.trigger.name}</Tree.Label>
+                    <span className="text-text-faint">{`${entry.trigger.timing} ${entry.trigger.event}`}</span>
+                </>
+            );
+    }
+}
+
 function ErrorContent({ row }: { row: ErrorRow }) {
     const { t } = useTranslation('database');
     return (

package/src/explorer/RowMenu.tsx

@@ -66,8 +66,8 @@ export function RowMenu({ row, connection, onRefresh, onDisconnect, onRequest }:
         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' }),
+                actionItem('open-data', Table, t('explorer.openData'), { kind: 'open-table', ref, view: 'data', tableKind: kind }),
+                actionItem('open-structure', TableProperties, t('explorer.openStructure'), { kind: 'open-table', ref, view: 'structure', tableKind: kind }),
                 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)))
             ],

package/src/explorer/expansion.ts

@@ -1,11 +1,11 @@
-import { connectionOfKey, isFolderKey } from './tree.ts';
+import { connectionOfKey, startsOpen } from './tree.ts';
 
 const VERSION = 1;
 
 export interface Expansion {
-    /* Connections, schemas and tables the person opened. */
+    /* Connections, schemas, tables and the folders of a table the person opened. */
     readonly expanded: ReadonlySet<string>;
-    /* Folders the person closed, since a folder is open until then. */
+    /* What starts open and the person closed: the folders of a schema and the columns of a table. */
     readonly collapsed: ReadonlySet<string>;
 }
 
@@ -28,7 +28,7 @@ export const parseExpansion = (raw: string | null, connectionId: string): Expans
                 Array.isArray(keys)
                     ? keys.filter(
                           (key): key is string =>
-                              typeof key === 'string' && key.length > 2 && isFolderKey(key) === folders && connectionOfKey(key) === connectionId
+                              typeof key === 'string' && key.length > 2 && startsOpen(key) === folders && connectionOfKey(key) === connectionId
                       )
                     : []
             );

package/src/explorer/folders.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+
+/* Something of the app's own under a connection, such as a file that belongs to it. */
+export interface ExplorerItem {
+    /* Unique in its folder; it names the row. */
+    readonly id: string;
+    readonly label: string;
+    readonly icon: LucideIcon;
+    /*
+     * A double click or Enter, with `preview: false`. With `openOnClick` a click opens it too, with
+     * `preview: true`, the way a table opens.
+     */
+    onOpen?(options: { readonly preview: boolean }): void;
+    /* The items of its context menu, as `ContextMenu.Item`s. Without them the row has no menu. */
+    menu?: ReactNode;
+}
+
+/* A folder of the app's own under a connection, after its schemas. It shows only while it holds items. */
+export interface ExplorerFolder {
+    /* Unique among the folders of a connection; it keeps the folder open or closed across a remount. */
+    readonly id: string;
+    readonly label: string;
+    readonly items: readonly ExplorerItem[];
+}