@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/connections/ConnectionForm.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'react';
+import type { Connection } from '../client/types.ts';
+export interface ConnectionFormProps {
+    value: Connection;
+    onValueChange(next: Connection): void;
+    onBrowse?(purpose: 'database' | 'identity'): Promise<string | null>;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ConnectionForm({ value, onValueChange, onBrowse, className, ref }: ConnectionFormProps): import("react").JSX.Element;

package/dist/connections/ConnectionForm.js

@@ -0,0 +1,145 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Container, Network, Plug, RefreshCw, Terminal } from 'lucide-react';
+import { Button, Field, IconButton, Input, Segmented, Select, Switch, useAsyncAction } from '@adecore/ui';
+import { CONNECT_MODES, DEFAULT_HOST, DEFAULT_MYSQL_PORT, configProblems, modeOf, withEngine, withMode } from './connection-config.js';
+import { composeNameOf, containerPortOf, isMysqlContainer, publishedPortOf, withContainer } from './docker.js';
+import { ENGINE_ICONS } from './engine-icons.js';
+import { useDockerContainers } from './use-docker-containers.js';
+const TLS_MODES = ['disable', 'prefer', 'require', 'verify'];
+const MODE_ICONS = { tcp: Network, socket: Plug, ssh: Terminal, docker: Container };
+/* A text field that is empty means "not set" for the optional fields of a config. */
+const optionalText = (text) => (text === '' ? undefined : text);
+/* One form for one saved connection. Every edit goes out whole through `onValueChange`. */
+export function ConnectionForm({ value, onValueChange, onBrowse, className, ref }) {
+    const { t } = useTranslation('database');
+    const [touched, setTouched] = useState(new Set());
+    const config = value.config;
+    const options = [
+        { id: 'sqlite', label: t('engine.sqlite'), icon: ENGINE_ICONS.sqlite },
+        { id: 'mysql', label: t('engine.mysql'), icon: ENGINE_ICONS.mysql }
+    ];
+    const touch = (field) => {
+        setTouched((current) => new Set(current).add(field));
+    };
+    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col gap-4', className), children: [_jsx(Field, { label: t('connections.form.name'), orientation: "horizontal", children: _jsx(Input, { value: value.name, placeholder: t('connections.untitled'), onChange: (e) => onValueChange({ ...value, name: e.target.value }) }) }), _jsx(Field, { label: t('connections.form.engine'), orientation: "horizontal", group: true, children: _jsx(Segmented, { value: config.engine, label: t('connections.form.engine'), options: options, onValueChange: (engine) => {
+                        onValueChange(withEngine(value, engine));
+                        setTouched(new Set());
+                    } }) }), config.engine === 'sqlite' ? (_jsx(SqliteFields, { config: config, onConfigChange: (next) => onValueChange({ ...value, config: next }), touched: touched, touch: touch, onBrowse: onBrowse })) : (_jsx(MysqlFields, { config: config, onConfigChange: (next) => onValueChange({ ...value, config: next }), touched: touched, touch: touch, onBrowse: onBrowse })), _jsx(Field, { label: t('connections.form.readOnly'), hint: t('connections.form.readOnlyHint'), orientation: "horizontal", group: true, children: _jsx(Switch, { checked: config.readOnly === true, label: t('connections.form.readOnly'), onCheckedChange: (readOnly) => onValueChange({ ...value, config: { ...config, readOnly } }) }) })] }));
+}
+/* The sentence for a problem, once the field has something to answer for. */
+function useProblem(problem, field, touched, filled) {
+    const { t } = useTranslation('database');
+    if (problem === undefined || !(touched.has(field) || filled)) {
+        return undefined;
+    }
+    return t(`connections.form.problems.${problem}`);
+}
+function SqliteFields({ config, onConfigChange, touched, touch, onBrowse }) {
+    const { t } = useTranslation('database');
+    const browsing = useAsyncAction();
+    const problem = configProblems(config).path;
+    const error = useProblem(problem, 'path', touched, config.path !== '') ?? browsing.failure ?? undefined;
+    const browse = async () => {
+        await browsing.run(async () => {
+            const picked = await onBrowse?.('database');
+            if (picked !== null && picked !== undefined) {
+                onConfigChange({ ...config, path: picked });
+            }
+        });
+        touch('path');
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.path'), hint: t('connections.form.pathHint'), error: error, orientation: "horizontal", group: onBrowse !== undefined, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { mono: true, value: config.path, placeholder: "/path/to/database.sqlite", spellCheck: false, "aria-label": onBrowse === undefined ? undefined : t('connections.form.path'), onBlur: () => touch('path'), onChange: (e) => onConfigChange({ ...config, path: e.target.value }) }), onBrowse !== undefined && (_jsx(Button, { variant: "secondary", disabled: browsing.busy, onClick: () => void browse(), children: t('connections.form.browse') }))] }) }), _jsx(Field, { label: t('connections.form.create'), hint: t('connections.form.createHint'), orientation: "horizontal", group: true, children: _jsx(Switch, { checked: config.create === true, label: t('connections.form.create'), onCheckedChange: (create) => onConfigChange({ ...config, create }) }) })] }));
+}
+function PortField({ label, hint, error, value, placeholder, onBlur, onValueChange }) {
+    return (_jsx(Field, { label: label, hint: hint, error: error, orientation: "horizontal", children: _jsx(Input, { type: "number", min: 1, max: 65535, className: "max-w-32", value: value === undefined ? '' : String(value), placeholder: String(placeholder), onBlur: onBlur, onChange: (e) => onValueChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }));
+}
+function MysqlFields({ config, onConfigChange, touched, touch, onBrowse }) {
+    const { t } = useTranslation('database');
+    const mode = modeOf(config);
+    const tunnel = config.tunnel;
+    const modes = CONNECT_MODES.map((id) => ({ id, label: t(`connections.form.mode.${id}`), icon: MODE_ICONS[id] }));
+    const tlsItems = TLS_MODES.map((tls) => ({
+        value: tls,
+        label: t(`connections.form.tls.${tls}`),
+        description: t(`connections.form.tls.${tls}Hint`)
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.mode.label'), orientation: "horizontal", group: true, children: _jsx(Segmented, { value: mode, label: t('connections.form.mode.label'), options: modes, onValueChange: (next) => onConfigChange(withMode(config, next)) }) }), mode === 'tcp' && _jsx(ServerFields, { config: config, onConfigChange: onConfigChange, touched: touched, touch: touch }), mode === 'socket' && _jsx(SocketField, { config: config, onConfigChange: onConfigChange, touched: touched, touch: touch }), tunnel?.kind === 'ssh' && (_jsx(SshFields, { config: config, tunnel: tunnel, onConfigChange: onConfigChange, touched: touched, touch: touch, onBrowse: onBrowse })), tunnel?.kind === 'docker' && _jsx(DockerFields, { config: config, tunnel: tunnel, onConfigChange: onConfigChange, touched: touched, touch: touch }), _jsx(Field, { label: t('connections.form.user'), orientation: "horizontal", children: _jsx(Input, { value: config.user, autoComplete: "off", spellCheck: false, onChange: (e) => onConfigChange({ ...config, user: e.target.value }) }) }), _jsx(Field, { label: t('connections.form.password'), orientation: "horizontal", children: _jsx(Input, { type: "password", value: config.password ?? '', autoComplete: "off", onChange: (e) => onConfigChange({ ...config, password: optionalText(e.target.value) }) }) }), _jsx(Field, { label: t('connections.form.database'), hint: t('connections.form.databaseHint'), orientation: "horizontal", children: _jsx(Input, { value: config.database ?? '', spellCheck: false, onChange: (e) => onConfigChange({ ...config, database: optionalText(e.target.value) }) }) }), _jsx(Field, { label: t('connections.form.tls.label'), orientation: "horizontal", group: true, children: _jsx(Select, { value: config.tls ?? 'prefer', label: t('connections.form.tls.label'), items: tlsItems, onValueChange: (tls) => onConfigChange({ ...config, tls }) }) })] }));
+}
+/* The host and the port of a server reached directly, or, through SSH, as the SSH host sees it. */
+function ServerFields({ config, onConfigChange, touched, touch }) {
+    const { t } = useTranslation('database');
+    const problems = configProblems(config);
+    const viaSsh = config.tunnel?.kind === 'ssh';
+    const hostError = useProblem(problems.host, 'host', touched, config.host !== '');
+    const portError = useProblem(problems.port, 'port', touched, config.port !== undefined);
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t(viaSsh ? 'connections.form.ssh.serverHost' : 'connections.form.host'), hint: viaSsh ? t('connections.form.ssh.serverHint') : undefined, error: hostError, orientation: "horizontal", children: _jsx(Input, { value: config.host, placeholder: DEFAULT_HOST, spellCheck: false, onBlur: () => touch('host'), onChange: (e) => onConfigChange({ ...config, host: e.target.value }) }) }), _jsx(PortField, { label: t(viaSsh ? 'connections.form.ssh.serverPort' : 'connections.form.port'), error: portError, value: config.port, placeholder: DEFAULT_MYSQL_PORT, onBlur: () => touch('port'), onValueChange: (port) => onConfigChange({ ...config, port }) })] }));
+}
+function SocketField({ config, onConfigChange, touched, touch }) {
+    const { t } = useTranslation('database');
+    const error = useProblem(configProblems(config).socket, 'socket', touched, (config.socket ?? '') !== '');
+    return (_jsx(Field, { label: t('connections.form.socket'), hint: t('connections.form.socketHint'), error: error, orientation: "horizontal", children: _jsx(Input, { mono: true, value: config.socket ?? '', placeholder: "/tmp/mysql.sock", spellCheck: false, onBlur: () => touch('socket'), onChange: (e) => onConfigChange({ ...config, socket: e.target.value }) }) }));
+}
+function SshFields({ config, tunnel, onConfigChange, touched, touch, onBrowse }) {
+    const { t } = useTranslation('database');
+    const browsing = useAsyncAction();
+    const problems = configProblems(config);
+    const hostError = useProblem(problems.sshHost, 'sshHost', touched, tunnel.host !== '');
+    const portError = useProblem(problems.sshPort, 'sshPort', touched, tunnel.port !== undefined);
+    const update = (patch) => onConfigChange({ ...config, tunnel: { ...tunnel, ...patch } });
+    const browse = async () => {
+        await browsing.run(async () => {
+            const picked = await onBrowse?.('identity');
+            if (picked !== null && picked !== undefined) {
+                update({ identityFile: picked });
+            }
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.ssh.host'), hint: t('connections.form.ssh.hostHint'), error: hostError, orientation: "horizontal", children: _jsx(Input, { value: tunnel.host, placeholder: "bastion.example.com", spellCheck: false, onBlur: () => touch('sshHost'), onChange: (e) => update({ host: e.target.value }) }) }), _jsx(PortField, { label: t('connections.form.ssh.port'), error: portError, value: tunnel.port, placeholder: 22, onBlur: () => touch('sshPort'), onValueChange: (port) => update({ port }) }), _jsx(Field, { label: t('connections.form.ssh.user'), orientation: "horizontal", children: _jsx(Input, { value: tunnel.user ?? '', autoComplete: "off", spellCheck: false, onChange: (e) => update({ user: optionalText(e.target.value) }) }) }), _jsx(Field, { label: t('connections.form.ssh.identityFile'), hint: t('connections.form.ssh.keyHint'), error: browsing.failure ?? undefined, orientation: "horizontal", group: onBrowse !== undefined, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { mono: true, value: tunnel.identityFile ?? '', placeholder: "~/.ssh/id_ed25519", spellCheck: false, "aria-label": onBrowse === undefined ? undefined : t('connections.form.ssh.identityFile'), onChange: (e) => update({ identityFile: optionalText(e.target.value) }) }), onBrowse !== undefined && (_jsx(Button, { variant: "secondary", disabled: browsing.busy, onClick: () => void browse(), children: t('connections.form.browse') }))] }) }), _jsx(ServerFields, { config: config, onConfigChange: onConfigChange, touched: touched, touch: touch })] }));
+}
+/* What a container offers a person in a list: its image, its Compose name and the port it publishes. */
+function containerDescription(container, published) {
+    return [container.image, composeNameOf(container), published].filter((part) => part !== null).join(' \u00b7 ');
+}
+function DockerFields({ config, tunnel, onConfigChange, touched, touch }) {
+    const { t } = useTranslation('database');
+    const docker = useDockerContainers();
+    const problems = configProblems(config);
+    const containers = docker.state.status === 'ready' ? docker.state.containers.filter(isMysqlContainer) : [];
+    const picked = containers.find((container) => container.name === tunnel.container);
+    const containerError = useProblem(problems.container, 'container', touched, tunnel.container !== '');
+    const portError = useProblem(problems.containerPort, 'containerPort', touched, tunnel.port !== undefined);
+    const publishedText = (container, port) => {
+        const host = publishedPortOf(container, port);
+        return host === null ? t('connections.form.docker.notPublished') : t('connections.form.docker.published', { port: host });
+    };
+    const items = containers.map((container) => ({
+        value: container.name,
+        label: container.name,
+        description: containerDescription(container, publishedText(container, containerPortOf(container)))
+    }));
+    if (tunnel.container !== '' && picked === undefined) {
+        items.unshift({ value: tunnel.container, label: tunnel.container, description: t('connections.form.docker.notRunning') });
+    }
+    const status = (() => {
+        switch (docker.state.status) {
+            case 'loading':
+                return { hint: t('connections.form.docker.loading') };
+            case 'unsupported':
+                return { hint: `${t('connections.form.docker.unsupported')} ${docker.state.message}` };
+            case 'error':
+                return { error: docker.state.message };
+            case 'ready':
+                return containers.length === 0 ? { hint: t('connections.form.docker.empty') } : {};
+        }
+    })();
+    const pick = (name) => {
+        const container = containers.find((candidate) => candidate.name === name);
+        if (container !== undefined) {
+            onConfigChange(withContainer(config, container));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('connections.form.docker.container'), hint: status.hint, error: status.error ?? containerError, orientation: "horizontal", group: true, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Select, { value: tunnel.container === '' ? null : tunnel.container, label: t('connections.form.docker.container'), placeholder: t('connections.form.docker.pick'), items: items, truncateValue: true, disabled: items.length === 0, onValueChange: pick }), _jsx(IconButton, { icon: RefreshCw, label: t('connections.form.docker.refresh'), busy: docker.state.status === 'loading', onClick: docker.reload, onBlur: () => touch('container') })] }) }), _jsx(PortField, { label: t('connections.form.docker.port'), hint: picked === undefined ? undefined : publishedText(picked, tunnel.port ?? DEFAULT_MYSQL_PORT), error: portError, value: tunnel.port, placeholder: DEFAULT_MYSQL_PORT, onBlur: () => touch('containerPort'), onValueChange: (port) => onConfigChange({ ...config, tunnel: { ...tunnel, port } }) })] }));
+}

package/dist/connections/ConnectionManager.d.ts

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

package/dist/connections/ConnectionManager.js

@@ -0,0 +1,93 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+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 { 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 { 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 }) {
+    const { t } = useTranslation('database');
+    const [own, setOwn] = useState(null);
+    const [deleting, setDeleting] = useState(false);
+    const client = useDatabaseClient();
+    const pickedId = selected === undefined ? own : selected;
+    const current = value.find((connection) => connection.id === pickedId) ?? value[0] ?? null;
+    const select = (id) => {
+        if (selected === undefined) {
+            setOwn(id);
+        }
+        onSelectedChange?.(id);
+    };
+    const add = (engine) => {
+        const connection = { id: crypto.randomUUID(), name: t('connections.newName'), config: defaultConfig(engine) };
+        onValueChange([...value, connection]);
+        select(connection.id);
+    };
+    const addFromContainer = (container) => {
+        const connection = connectionFromContainer(crypto.randomUUID(), container);
+        onValueChange([...value, connection]);
+        select(connection.id);
+    };
+    const change = (next) => {
+        onValueChange(value.map((connection) => (connection.id === next.id ? next : connection)));
+    };
+    const remove = async (connection) => {
+        await client.disconnect(connection.id).catch(() => undefined);
+        const index = value.findIndex((entry) => entry.id === connection.id);
+        const rest = value.filter((entry) => entry.id !== connection.id);
+        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 () => {
+                    await remove(current);
+                    setDeleting(false);
+                } })] }));
+    return _jsx(MasterDetail, { ref: ref, className: className, list: list, listWidth: 280, listLabel: t('connections.list'), detail: 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 }) {
+    const { t } = useTranslation('database');
+    const { state, reload } = useDockerContainers();
+    if (state.status === 'loading') {
+        return (_jsxs(Menu.Label, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: 12 }), t('connections.fromDocker.loading')] }));
+    }
+    if (state.status !== 'ready') {
+        return (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { className: "max-w-64 break-words", children: state.status === 'unsupported' ? `${t('connections.fromDocker.unsupported')} ${state.message}` : state.message }), _jsx(Menu.Item, { closeOnClick: false, onClick: reload, children: t('connections.fromDocker.retry') })] }));
+    }
+    const containers = state.containers.filter(isMysqlContainer);
+    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)));
+}
+/* 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 }) {
+    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) });
+        }
+        catch (e) {
+            setOutcome({ 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 })] }));
+}

package/dist/connections/EngineIcon.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import type { Engine } from '../protocol/index.ts';
+export interface EngineIconProps {
+    engine: Engine;
+    size?: number;
+    className?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+export declare function EngineIcon({ engine, size, className, ref }: EngineIconProps): import("react").JSX.Element;

package/dist/connections/EngineIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@adecore/ui';
+import { ENGINE_ICONS } from './engine-icons.js';
+/* A file on disk for SQLite, a server for MySQL and MariaDB. */
+export function EngineIcon({ engine, size = 16, className, ref }) {
+    return _jsx(Icon, { ref: ref, icon: ENGINE_ICONS[engine], size: size, className: className });
+}

package/dist/connections/connection-config.d.ts

@@ -0,0 +1,16 @@
+import type { ConnectionConfig, Engine, MysqlConnectionConfig } from '../protocol/index.ts';
+import type { Connection } from '../client/types.ts';
+export declare const DEFAULT_MYSQL_PORT = 3306;
+export declare const DEFAULT_HOST = "127.0.0.1";
+export type ConnectMode = 'tcp' | 'socket' | 'ssh' | 'docker';
+export declare const CONNECT_MODES: readonly ConnectMode[];
+export type ConfigProblem = 'path-required' | 'path-relative' | 'host-required' | 'port-range' | 'socket-required' | 'ssh-host-required' | 'ssh-port-range' | 'container-required' | 'container-port-range';
+export type ConfigProblems = Partial<Record<'path' | 'host' | 'port' | 'socket' | 'sshHost' | 'sshPort' | 'container' | 'containerPort', ConfigProblem>>;
+export declare const defaultConfig: (engine: Engine) => ConnectionConfig;
+export declare const isAbsolutePath: (path: string) => boolean;
+export declare const modeOf: (config: MysqlConnectionConfig) => ConnectMode;
+export declare const configProblems: (config: ConnectionConfig) => ConfigProblems;
+export declare const isValidConfig: (config: ConnectionConfig) => boolean;
+export declare const targetOf: (connection: Connection) => string;
+export declare const withMode: (config: MysqlConnectionConfig, mode: ConnectMode) => MysqlConnectionConfig;
+export declare const withEngine: (connection: Connection, engine: Engine) => Connection;

package/dist/connections/connection-config.js

@@ -0,0 +1,107 @@
+export const DEFAULT_MYSQL_PORT = 3306;
+export const DEFAULT_HOST = '127.0.0.1';
+export const CONNECT_MODES = ['tcp', 'socket', 'ssh', 'docker'];
+/* A config of this engine with every field at what a new connection starts with. */
+export const defaultConfig = (engine) => engine === 'sqlite'
+    ? { engine: 'sqlite', path: '', create: false, readOnly: false }
+    : { engine: 'mysql', host: DEFAULT_HOST, port: DEFAULT_MYSQL_PORT, user: '', password: '', tls: 'prefer', readOnly: false };
+/* A POSIX path, a Windows drive path or a UNC path. A relative one would resolve against the helper's working directory. */
+export const isAbsolutePath = (path) => /^(?:\/|[A-Za-z]:[\\/]|\\\\)/.test(path);
+const sqliteProblems = (config) => {
+    const path = config.path.trim();
+    if (path === '') {
+        return { path: 'path-required' };
+    }
+    return isAbsolutePath(path) ? {} : { path: 'path-relative' };
+};
+const isPort = (port) => Number.isInteger(port) && port >= 1 && port <= 65535;
+/* The mode is in the config: a socket means the socket mode, even while its path is still empty, and a tunnel names its own. */
+export const modeOf = (config) => {
+    if (config.tunnel !== undefined) {
+        return config.tunnel.kind;
+    }
+    return config.socket === undefined ? 'tcp' : 'socket';
+};
+const mysqlProblems = (config) => {
+    const problems = {};
+    const tunnel = config.tunnel;
+    const mode = modeOf(config);
+    if (mode === 'socket' && (config.socket ?? '').trim() === '') {
+        problems.socket = 'socket-required';
+    }
+    if ((mode === 'tcp' || mode === 'ssh') && config.host.trim() === '') {
+        problems.host = 'host-required';
+    }
+    if ((mode === 'tcp' || mode === 'ssh') && config.port !== undefined && !isPort(config.port)) {
+        problems.port = 'port-range';
+    }
+    if (tunnel?.kind === 'ssh') {
+        if (tunnel.host.trim() === '') {
+            problems.sshHost = 'ssh-host-required';
+        }
+        if (tunnel.port !== undefined && !isPort(tunnel.port)) {
+            problems.sshPort = 'ssh-port-range';
+        }
+    }
+    if (tunnel?.kind === 'docker') {
+        if (tunnel.container.trim() === '') {
+            problems.container = 'container-required';
+        }
+        if (tunnel.port !== undefined && !isPort(tunnel.port)) {
+            problems.containerPort = 'container-port-range';
+        }
+    }
+    return problems;
+};
+export const configProblems = (config) => (config.engine === 'sqlite' ? sqliteProblems(config) : mysqlProblems(config));
+export const isValidConfig = (config) => Object.keys(configProblems(config)).length === 0;
+const lastSegment = (path) => {
+    const segments = path.split(/[\\/]/).filter((segment) => segment !== '');
+    return segments[segments.length - 1] ?? path;
+};
+const targetWhere = (config) => {
+    const tunnel = config.tunnel;
+    if (tunnel?.kind === 'docker') {
+        return tunnel.container === '' ? 'Docker' : `${tunnel.container} (Docker)`;
+    }
+    if (tunnel?.kind === 'ssh') {
+        return tunnel.host === '' ? config.host : `${config.host} via ${tunnel.host}`;
+    }
+    if (config.socket !== undefined) {
+        return lastSegment(config.socket);
+    }
+    return `${config.host}:${config.port ?? DEFAULT_MYSQL_PORT}`;
+};
+/* The short line under a connection's name: the file name of a database file, or `user@host:port`, `user@host via <ssh host>` and `user@container (Docker)`. */
+export const targetOf = (connection) => {
+    const config = connection.config;
+    if (config.engine === 'sqlite') {
+        return lastSegment(config.path);
+    }
+    const where = targetWhere(config);
+    return config.user === '' || where === '' ? where : `${config.user}@${where}`;
+};
+/* Moves to another way of reaching the server. What the person typed for the user, the password and the database stays. */
+export const withMode = (config, mode) => {
+    if (modeOf(config) === mode) {
+        return config;
+    }
+    const base = {
+        ...config,
+        host: config.host.trim() === '' ? DEFAULT_HOST : config.host,
+        socket: undefined,
+        tunnel: undefined
+    };
+    switch (mode) {
+        case 'tcp':
+            return base;
+        case 'socket':
+            return { ...base, socket: '' };
+        case 'ssh':
+            return { ...base, tunnel: { kind: 'ssh', host: '' } };
+        case 'docker':
+            return { ...base, tunnel: { kind: 'docker', container: '', port: DEFAULT_MYSQL_PORT } };
+    }
+};
+/* Moves to another engine, which keeps who the connection is and drops how it connects. */
+export const withEngine = (connection, engine) => connection.config.engine === engine ? connection : { id: connection.id, name: connection.name, config: defaultConfig(engine) };

package/dist/connections/docker.d.ts

@@ -0,0 +1,9 @@
+import type { Connection } from '../client/types.ts';
+import type { DockerContainer, MysqlConnectionConfig } from '../protocol/index.ts';
+export declare const isMysqlContainer: (container: DockerContainer) => boolean;
+export declare const composeNameOf: (container: DockerContainer) => string | null;
+export declare const containerTitle: (container: DockerContainer) => string;
+export declare const containerPortOf: (container: DockerContainer) => number;
+export declare const publishedPortOf: (container: DockerContainer, port: number) => number | null;
+export declare const withContainer: (config: MysqlConnectionConfig, container: DockerContainer) => MysqlConnectionConfig;
+export declare const connectionFromContainer: (id: string, container: DockerContainer) => Connection;

package/dist/connections/docker.js

@@ -0,0 +1,38 @@
+import { DEFAULT_MYSQL_PORT, defaultConfig, withMode } from './connection-config.js';
+/* A container a MySQL connection can point at: what `discover` found, minus a file engine, which no container serves. */
+export const isMysqlContainer = (container) => container.engine !== 'sqlite';
+/* The Compose `project/service` of a container, when it has both. */
+export const composeNameOf = (container) => container.project !== null && container.service !== null ? `${container.project}/${container.service}` : null;
+/* What names a container to a person: its Compose name, else its own. */
+export const containerTitle = (container) => composeNameOf(container) ?? container.name;
+/* The port to connect to inside the container: MySQL's own when the container lists it or lists nothing, else the first it lists. */
+export const containerPortOf = (container) => {
+    const ports = container.ports.map((entry) => entry.container);
+    return ports.length === 0 || ports.includes(DEFAULT_MYSQL_PORT) ? DEFAULT_MYSQL_PORT : ports[0];
+};
+/* The host port a container publishes a port on, or `null` when it does not. */
+export const publishedPortOf = (container, port) => container.ports.find((entry) => entry.container === port)?.host ?? null;
+const isEmpty = (text) => text === undefined || text === '';
+/* Points a config at a container. The user, the password and the database come from the container's environment only where the config has none. */
+export const withContainer = (config, container) => {
+    const docker = withMode(config, 'docker');
+    const { user, password, database } = container.suggested;
+    return {
+        ...docker,
+        user: isEmpty(docker.user) && user !== undefined ? user : docker.user,
+        password: isEmpty(docker.password) && password !== undefined ? password : docker.password,
+        database: isEmpty(docker.database) && database !== undefined ? database : docker.database,
+        tunnel: {
+            kind: 'docker',
+            container: container.name,
+            port: containerPortOf(container),
+            ...(docker.tunnel?.kind === 'docker' && docker.tunnel.context !== undefined ? { context: docker.tunnel.context } : {})
+        }
+    };
+};
+/* A new MySQL connection to a container, named after its Compose `project/service` or its own name. */
+export const connectionFromContainer = (id, container) => ({
+    id,
+    name: containerTitle(container),
+    config: withContainer(defaultConfig('mysql'), container)
+});

package/dist/connections/engine-icons.d.ts

@@ -0,0 +1,3 @@
+import { type LucideIcon } from 'lucide-react';
+import type { Engine } from '../protocol/index.ts';
+export declare const ENGINE_ICONS: Record<Engine, LucideIcon>;

package/dist/connections/engine-icons.js

@@ -0,0 +1,3 @@
+import { HardDrive, Server } from 'lucide-react';
+/* A file on disk for SQLite, a server for MySQL and MariaDB. */
+export const ENGINE_ICONS = { sqlite: HardDrive, mysql: Server };

package/dist/connections/use-docker-containers.d.ts

@@ -0,0 +1,17 @@
+import type { DockerContainer } from '../protocol/index.ts';
+export type DockerState = {
+    readonly status: 'loading';
+} | {
+    readonly status: 'ready';
+    readonly containers: readonly DockerContainer[];
+} | {
+    readonly status: 'unsupported';
+    readonly message: string;
+} | {
+    readonly status: 'error';
+    readonly message: string;
+};
+export declare function useDockerContainers(): {
+    readonly state: DockerState;
+    reload(): void;
+};

package/dist/connections/use-docker-containers.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { messageOf } from '@adecore/ui';
+import { useDatabaseClient } from '../client-context.js';
+import { DatabaseRequestError } from '../client/types.js';
+/* The running containers that look like a database, asked for when the component mounts and again on `reload`. */
+export function useDockerContainers() {
+    const client = useDatabaseClient();
+    const [state, setState] = useState({ status: 'loading' });
+    const [attempt, setAttempt] = useState(0);
+    useEffect(() => {
+        const controller = new AbortController();
+        client.discover('docker', { signal: controller.signal }).then((containers) => setState({ status: 'ready', containers }), (e) => {
+            if (controller.signal.aborted) {
+                return;
+            }
+            const message = messageOf(e);
+            setState({ status: e instanceof DatabaseRequestError && e.code === 'unsupported' ? 'unsupported' : 'error', message });
+        });
+        return () => controller.abort();
+    }, [client, attempt]);
+    const reload = () => {
+        setState({ status: 'loading' });
+        setAttempt((current) => current + 1);
+    };
+    return { state, reload };
+}

package/dist/console/DestructiveDialog.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import type { DestructiveStatement } from './destructive.ts';
+export interface DestructiveDialogProps {
+    statements: readonly DestructiveStatement[];
+    onConfirm(): void;
+    onCancel(): void;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function DestructiveDialog({ statements, onConfirm, onCancel, ref }: DestructiveDialogProps): import("react").JSX.Element;

package/dist/console/DestructiveDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { PromptDialog } from '@adecore/ui';
+/* Lists the statements that cannot be taken back and asks before they run. */
+export function DestructiveDialog({ statements, onConfirm, onCancel, ref }) {
+    const { t } = useTranslation('database');
+    return (_jsx(PromptDialog, { ref: ref, open: statements.length > 0, danger: true, title: t('console.destructive.title'), titleIcon: TriangleAlert, description: t('console.destructive.description', { count: statements.length }), confirmLabel: t('console.destructive.confirm'), onConfirm: onConfirm, onOpenChange: onCancel, children: _jsx("ul", { className: "mt-3 flex max-h-56 flex-col gap-2 overflow-auto", children: statements.map((statement, index) => (_jsxs("li", { className: "flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-sunken px-2.5 py-1.5", children: [_jsx("span", { className: "text-xs text-status-error", children: t(`console.destructive.${statement.kind}`) }), _jsx("span", { className: "truncate font-mono text-xs text-text", children: statement.sql.replace(/\s+/g, ' ') })] }, `${index}:${statement.sql}`))) }) }));
+}

package/dist/console/HistoryPanel.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'react';
+import { type HistoryEntry } from './history.ts';
+export interface HistoryPanelProps {
+    entries: readonly HistoryEntry[];
+    onPick(entry: HistoryEntry, run: boolean): void;
+    onClear(): void;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function HistoryPanel({ entries, onPick, onClear, className, ref }: HistoryPanelProps): import("react").JSX.Element;

package/dist/console/HistoryPanel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { Check, CircleAlert, Search, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon, IconButton, Input, isApplePlatform, isModHeld } from '@adecore/ui';
+import { formatMoment, formatNumber } from '@adecore/ui/format';
+import { searchHistory } from './history.js';
+/* The runs of this connection, newest first, with a search over their SQL. */
+export function HistoryPanel({ entries, onPick, onClear, className, ref }) {
+    const { t } = useTranslation('database');
+    const [query, setQuery] = useState('');
+    const shown = searchHistory(entries, query);
+    return (_jsxs("aside", { ref: ref, "aria-label": t('console.history.title'), className: clsx('flex w-72 shrink-0 flex-col border-l border-border', className), children: [_jsxs("div", { className: "flex shrink-0 items-center gap-2 p-2", children: [_jsx(Input, { size: "sm", type: "search", icon: Search, className: "min-w-0 flex-1", "aria-label": t('console.history.search'), placeholder: t('console.history.search'), value: query, onChange: (event) => setQuery(event.target.value) }), _jsx(IconButton, { icon: Trash2, size: "sm", label: t('console.history.clear'), disabled: entries.length === 0, onClick: onClear })] }), _jsx("div", { className: "relative min-h-24 flex-1 border-t border-border", children: shown.length === 0 ? (_jsx("p", { className: "p-3 text-xs text-text-muted", children: entries.length === 0 ? t('console.history.empty') : t('console.history.noMatches') })) : (_jsx("ul", { className: "absolute inset-0 overflow-auto", children: shown.map((entry) => (_jsx("li", { className: "border-b border-border-soft", children: _jsxs("button", { type: "button", className: "flex w-full min-w-0 flex-col gap-0.5 px-3 py-2 text-left hover:bg-surface-hover", onClick: (event) => onPick(entry, isModHeld(event, isApplePlatform())), onDoubleClick: () => onPick(entry, true), children: [_jsx("span", { className: "truncate font-mono text-xs text-text", children: entry.sql.replace(/\s+/g, ' ') }), _jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text-muted tabular-nums", children: [_jsx(Icon, { icon: entry.ok ? Check : CircleAlert, size: 12, className: entry.ok ? 'text-positive' : 'text-status-error' }), formatMoment(entry.at), entry.rows !== null && t('console.history.rows', { count: entry.rows, formatted: formatNumber(entry.rows) })] })] }) }, `${entry.at}:${entry.sql}`))) })) }), _jsx("p", { className: "shrink-0 border-t border-border px-3 py-2 text-xs text-text-faint", children: t('console.history.hint') })] }));
+}

package/dist/console/QueryConsole.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'react';
+import { type Connection } from '../client/types.ts';
+export interface QueryConsoleProps {
+    connection: Connection;
+    schema?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?(sql: string): void;
+    defaultHistoryOpen?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function QueryConsole({ connection, schema, value, defaultValue, onValueChange, defaultHistoryOpen, autoFocus, className, ref }: QueryConsoleProps): import("react").JSX.Element;