@adecore/database 0.21.0 → 0.21.2

package/src/ddl/create.ts

@@ -43,7 +43,7 @@ export const mysqlOptionsSql = (options: TableOptions, against?: TableOptions):
 
 const sqliteOptionsSql = (options: TableOptions): string[] => [...(options.strict ? ['STRICT'] : []), ...(options.withoutRowid ? ['WITHOUT ROWID'] : [])];
 
-const inlineIndexSql = (dialect: Dialect, index: IndexDraft): string =>
+export const inlineIndexSql = (dialect: Dialect, index: IndexDraft): string =>
     [index.unique ? 'UNIQUE INDEX' : 'INDEX', ...(index.name === '' ? [] : [quote(dialect, index.name)]), `(${columnList(dialect, index.columns)})`].join(' ');
 
 /* `CREATE [UNIQUE] INDEX name ON table (columns)`. */

package/src/ddl/diff.ts

@@ -73,13 +73,10 @@ const OPTION_FIELDS: readonly (keyof TableOptions)[] = ['engine', 'charset', 'co
 const matches = (original: { readonly name: string; readonly key: string }, draft: { readonly originalName: string | null; readonly key: string }): boolean =>
     draft.originalName !== null && (original.name === '' ? draft.key === original.key : draft.originalName === original.name);
 
-/* What a draft changes in the table it came from, told apart by the names items kept. */
-export const diffOf = (dialect: Dialect, original: TableDraft, draft: TableDraft): TableDiff => {
-    const survivors = draft.columns.filter((column) => column.originalName !== null);
-    const renames = new Map(survivors.map((column) => [column.originalName!, column.name]));
-    const project = (names: readonly string[]): string[] => names.map((name) => renames.get(name) ?? name);
-    const originalOf = (name: string): ColumnDraft | undefined => original.columns.find((column) => column.name === name);
+type Project = (names: readonly string[]) => string[];
 
+const columnChanges = (dialect: Dialect, original: TableDraft, draft: TableDraft) => {
+    const survivors = draft.columns.filter((column) => column.originalName !== null);
     const positions = survivors.map((column) => original.columns.findIndex((candidate) => candidate.name === column.originalName));
     const staying = longestRun(positions);
     let survivor = 0;
@@ -92,7 +89,7 @@ export const diffOf = (dialect: Dialect, original: TableDraft, draft: TableDraft
             return;
         }
         const rank = survivor++;
-        const before = originalOf(column.originalName);
+        const before = original.columns.find((candidate) => candidate.name === column.originalName);
         if (before === undefined) {
             return;
         }
@@ -107,7 +104,10 @@ export const diffOf = (dialect: Dialect, original: TableDraft, draft: TableDraft
     });
 
     const droppedColumns = original.columns.filter((column) => !survivors.some((kept) => kept.originalName === column.name));
+    return { droppedColumns, keptColumns, addedColumns };
+};
 
+const indexChanges = (original: TableDraft, draft: TableDraft, project: Project) => {
     const droppedIndexes: IndexDraft[] = [];
     const addedIndexes = draft.indexes.filter((index) => index.originalName === null);
     const renamedIndexes: RenamedIndex[] = [];
@@ -122,39 +122,44 @@ export const diffOf = (dialect: Dialect, original: TableDraft, draft: TableDraft
             renamedIndexes.push({ from: before, to: after });
         }
     }
+    return { droppedIndexes, addedIndexes, renamedIndexes };
+};
 
+const sameForeignKey = (before: ForeignKeyDraft, after: ForeignKeyDraft, project: Project): boolean =>
+    before.name === after.name &&
+    sameList(project(before.columns), after.columns) &&
+    before.referencedSchema === after.referencedSchema &&
+    before.referencedTable === after.referencedTable &&
+    sameList(before.referencedColumns, after.referencedColumns) &&
+    before.onUpdate === after.onUpdate &&
+    before.onDelete === after.onDelete;
+
+const foreignKeyChanges = (original: TableDraft, draft: TableDraft, project: Project) => {
     const droppedForeignKeys: ForeignKeyDraft[] = [];
     const addedForeignKeys = draft.foreignKeys.filter((key) => key.originalName === null);
     for (const before of original.foreignKeys) {
         const after = draft.foreignKeys.find((key) => matches(before, key));
-        const same =
-            after !== undefined &&
-            before.name === after.name &&
-            sameList(project(before.columns), after.columns) &&
-            before.referencedSchema === after.referencedSchema &&
-            before.referencedTable === after.referencedTable &&
-            sameList(before.referencedColumns, after.referencedColumns) &&
-            before.onUpdate === after.onUpdate &&
-            before.onDelete === after.onDelete;
-        if (!same) {
+        if (after === undefined || !sameForeignKey(before, after, project)) {
             droppedForeignKeys.push(before);
             if (after !== undefined) {
                 addedForeignKeys.push(after);
             }
         }
     }
+    return { droppedForeignKeys, addedForeignKeys };
+};
+
+/* What a draft changes in the table it came from, told apart by the names items kept. */
+export const diffOf = (dialect: Dialect, original: TableDraft, draft: TableDraft): TableDiff => {
+    const renames = new Map(draft.columns.filter((column) => column.originalName !== null).map((column) => [column.originalName!, column.name]));
+    const project: Project = (names) => names.map((name) => renames.get(name) ?? name);
 
     return {
         renamed: original.name !== draft.name,
-        droppedColumns,
-        keptColumns,
-        addedColumns,
+        ...columnChanges(dialect, original, draft),
         primaryKeyChanged: !sameList(project(original.primaryKey), draft.primaryKey),
-        droppedIndexes,
-        addedIndexes,
-        renamedIndexes,
-        droppedForeignKeys,
-        addedForeignKeys,
+        ...indexChanges(original, draft, project),
+        ...foreignKeyChanges(original, draft, project),
         optionsChanged: OPTION_FIELDS.some((field) => original.options[field] !== draft.options[field])
     };
 };

package/src/designer/ColumnsEditor.tsx

@@ -4,7 +4,7 @@ import { ArrowDown, ArrowUp, KeyRound, Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonGroup, Checkbox, EmptyState, Icon, IconButton, Input, Pill } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
-import { typeSuggestionsOf } from '../ddl/index.ts';
+import { typeSuggestionsOf, type ColumnDraft } from '../ddl/index.ts';
 import type { EditorProps } from './editor-props.ts';
 import { addColumn, moveColumn, patchColumn, removeColumn, togglePrimaryKey } from './edit.ts';
 
@@ -65,130 +65,18 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
                             </tr>
                         </thead>
                         <tbody>
-                            {draft.columns.map((column, at) => {
-                                const keyAt = draft.primaryKey.indexOf(column.name);
-                                const locked = disabled || column.generated;
-                                const patch = (change: Parameters<typeof patchColumn>[2]): void => onChange(patchColumn(draft, column.key, change));
-                                return (
-                                    <tr key={column.key}>
-                                        <td className={clsx(TD, 'whitespace-nowrap')}>
-                                            <ButtonGroup>
-                                                <IconButton
-                                                    icon={ArrowUp}
-                                                    size="xs"
-                                                    label={t('designer.columns.moveUp')}
-                                                    disabled={disabled || at === 0}
-                                                    onClick={() => onChange(moveColumn(draft, column.key, -1))}
-                                                />
-                                                <IconButton
-                                                    icon={ArrowDown}
-                                                    size="xs"
-                                                    label={t('designer.columns.moveDown')}
-                                                    disabled={disabled || at === draft.columns.length - 1}
-                                                    onClick={() => onChange(moveColumn(draft, column.key, 1))}
-                                                />
-                                            </ButtonGroup>
-                                        </td>
-                                        <td className={clsx(TD, 'min-w-40')}>
-                                            <Input
-                                                size="sm"
-                                                className="w-full"
-                                                aria-label={t('designer.columns.name')}
-                                                spellCheck={false}
-                                                value={column.name}
-                                                disabled={locked}
-                                                onChange={(event) => patch({ name: event.target.value })}
-                                            />
-                                        </td>
-                                        <td className={clsx(TD, 'min-w-36')}>
-                                            <Input
-                                                size="sm"
-                                                mono
-                                                className="w-full"
-                                                aria-label={t('designer.columns.type')}
-                                                list={listId}
-                                                spellCheck={false}
-                                                value={column.type}
-                                                disabled={locked}
-                                                onChange={(event) => patch({ type: event.target.value })}
-                                            />
-                                        </td>
-                                        <td className={TD}>
-                                            <Checkbox
-                                                className="mx-auto"
-                                                label={t('designer.columns.notNullFor', { name: column.name })}
-                                                checked={!column.nullable}
-                                                disabled={locked}
-                                                onCheckedChange={(checked) => patch({ nullable: !checked })}
-                                            />
-                                        </td>
-                                        <td className={clsx(TD, 'min-w-36')}>
-                                            {column.generated ? (
-                                                <Pill mono>{column.generatedClause ?? t('designer.columns.generated')}</Pill>
-                                            ) : (
-                                                <Input
-                                                    size="sm"
-                                                    mono
-                                                    className="w-full"
-                                                    aria-label={t('designer.columns.default')}
-                                                    placeholder={t('designer.columns.noDefault')}
-                                                    spellCheck={false}
-                                                    value={column.defaultValue ?? ''}
-                                                    disabled={disabled}
-                                                    onChange={(event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value })}
-                                                />
-                                            )}
-                                        </td>
-                                        {mysql && (
-                                            <td className={TD}>
-                                                <Checkbox
-                                                    className="mx-auto"
-                                                    label={t('designer.columns.autoIncrementFor', { name: column.name })}
-                                                    checked={column.autoIncrement}
-                                                    disabled={locked}
-                                                    onCheckedChange={(checked) => patch({ autoIncrement: checked })}
-                                                />
-                                            </td>
-                                        )}
-                                        <td className={clsx(TD, 'whitespace-nowrap')}>
-                                            <span className="flex items-center gap-1">
-                                                <IconButton
-                                                    icon={KeyRound}
-                                                    size="xs"
-                                                    label={keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey')}
-                                                    aria-pressed={keyAt >= 0}
-                                                    disabled={locked}
-                                                    onClick={() => onChange(togglePrimaryKey(draft, column.key))}
-                                                />
-                                                {keyAt >= 0 && draft.primaryKey.length > 1 && (
-                                                    <span className="text-xs text-text-muted">{formatNumber(keyAt + 1)}</span>
-                                                )}
-                                            </span>
-                                        </td>
-                                        {mysql && (
-                                            <td className={clsx(TD, 'min-w-40')}>
-                                                <Input
-                                                    size="sm"
-                                                    className="w-full"
-                                                    aria-label={t('designer.columns.comment')}
-                                                    value={column.comment}
-                                                    disabled={locked}
-                                                    onChange={(event) => patch({ comment: event.target.value })}
-                                                />
-                                            </td>
-                                        )}
-                                        <td className={TD}>
-                                            <IconButton
-                                                icon={Trash2}
-                                                size="xs"
-                                                label={t('designer.columns.remove')}
-                                                disabled={disabled}
-                                                onClick={() => onChange(removeColumn(draft, column.key))}
-                                            />
-                                        </td>
-                                    </tr>
-                                );
-                            })}
+                            {draft.columns.map((column, at) => (
+                                <ColumnRow
+                                    key={column.key}
+                                    draft={draft}
+                                    column={column}
+                                    at={at}
+                                    mysql={mysql}
+                                    listId={listId}
+                                    disabled={disabled}
+                                    onChange={onChange}
+                                />
+                            ))}
                         </tbody>
                     </table>
                 </div>
@@ -202,3 +90,135 @@ export function ColumnsEditor({ draft, dialect, disabled, onChange, className, r
         </div>
     );
 }
+
+interface ColumnRowProps extends Pick<EditorProps, 'draft' | 'disabled' | 'onChange'> {
+    column: ColumnDraft;
+    at: number;
+    mysql: boolean;
+    /* The id of the datalist with the suggested types. */
+    listId: string;
+}
+
+function ColumnRow({ draft, column, at, mysql, listId, disabled, onChange }: ColumnRowProps) {
+    const { t } = useTranslation('database');
+    const keyAt = draft.primaryKey.indexOf(column.name);
+    const locked = disabled || column.generated;
+    const patch = (change: Partial<ColumnDraft>): void => onChange(patchColumn(draft, column.key, change));
+    return (
+        <tr>
+            <td className={clsx(TD, 'whitespace-nowrap')}>
+                <ButtonGroup>
+                    <IconButton
+                        icon={ArrowUp}
+                        size="xs"
+                        label={t('designer.columns.moveUp')}
+                        disabled={disabled || at === 0}
+                        onClick={() => onChange(moveColumn(draft, column.key, -1))}
+                    />
+                    <IconButton
+                        icon={ArrowDown}
+                        size="xs"
+                        label={t('designer.columns.moveDown')}
+                        disabled={disabled || at === draft.columns.length - 1}
+                        onClick={() => onChange(moveColumn(draft, column.key, 1))}
+                    />
+                </ButtonGroup>
+            </td>
+            <td className={clsx(TD, 'min-w-40')}>
+                <Input
+                    size="sm"
+                    className="w-full"
+                    aria-label={t('designer.columns.name')}
+                    spellCheck={false}
+                    value={column.name}
+                    disabled={locked}
+                    onChange={(event) => patch({ name: event.target.value })}
+                />
+            </td>
+            <td className={clsx(TD, 'min-w-36')}>
+                <Input
+                    size="sm"
+                    mono
+                    className="w-full"
+                    aria-label={t('designer.columns.type')}
+                    list={listId}
+                    spellCheck={false}
+                    value={column.type}
+                    disabled={locked}
+                    onChange={(event) => patch({ type: event.target.value })}
+                />
+            </td>
+            <td className={TD}>
+                <Checkbox
+                    className="mx-auto"
+                    label={t('designer.columns.notNullFor', { name: column.name })}
+                    checked={!column.nullable}
+                    disabled={locked}
+                    onCheckedChange={(checked) => patch({ nullable: !checked })}
+                />
+            </td>
+            <td className={clsx(TD, 'min-w-36')}>
+                {column.generated ? (
+                    <Pill mono>{column.generatedClause ?? t('designer.columns.generated')}</Pill>
+                ) : (
+                    <Input
+                        size="sm"
+                        mono
+                        className="w-full"
+                        aria-label={t('designer.columns.default')}
+                        placeholder={t('designer.columns.noDefault')}
+                        spellCheck={false}
+                        value={column.defaultValue ?? ''}
+                        disabled={disabled}
+                        onChange={(event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value })}
+                    />
+                )}
+            </td>
+            {mysql && (
+                <td className={TD}>
+                    <Checkbox
+                        className="mx-auto"
+                        label={t('designer.columns.autoIncrementFor', { name: column.name })}
+                        checked={column.autoIncrement}
+                        disabled={locked}
+                        onCheckedChange={(checked) => patch({ autoIncrement: checked })}
+                    />
+                </td>
+            )}
+            <td className={clsx(TD, 'whitespace-nowrap')}>
+                <span className="flex items-center gap-1">
+                    <IconButton
+                        icon={KeyRound}
+                        size="xs"
+                        label={keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey')}
+                        aria-pressed={keyAt >= 0}
+                        disabled={locked}
+                        onClick={() => onChange(togglePrimaryKey(draft, column.key))}
+                    />
+                    {keyAt >= 0 && draft.primaryKey.length > 1 && <span className="text-xs text-text-muted">{formatNumber(keyAt + 1)}</span>}
+                </span>
+            </td>
+            {mysql && (
+                <td className={clsx(TD, 'min-w-40')}>
+                    <Input
+                        size="sm"
+                        className="w-full"
+                        aria-label={t('designer.columns.comment')}
+                        value={column.comment}
+                        disabled={locked}
+                        onChange={(event) => patch({ comment: event.target.value })}
+                    />
+                </td>
+            )}
+            <td className={TD}>
+                <IconButton
+                    icon={Trash2}
+                    size="xs"
+                    label={t('designer.columns.remove')}
+                    disabled={disabled}
+                    onClick={() => onChange(removeColumn(draft, column.key))}
+                />
+            </td>
+        </tr>
+    );
+}

package/src/designer/ForeignKeysEditor.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Button, EmptyState, Field, Icon, IconButton, Input, Select, Spinner } from '@adecore/ui';
+import { Button, EmptyState, Field, Icon, IconButton, Input, Select, Spinner, type SelectItem } from '@adecore/ui';
 import { FOREIGN_KEY_ACTIONS } from '../ddl/index.ts';
 import type { EditorProps } from './editor-props.ts';
 import { NamePicker } from './NamePicker.tsx';
@@ -58,32 +58,20 @@ export function ForeignKeysEditor({ draft, schema, tables, referenceColumns, dis
                                         onValueChange={(table) => onChange(setReferencedTable(draft, foreignKey.key, schema, table))}
                                     />
                                 </Field>
-                                <Field label={t('designer.foreignKeys.onUpdate')} group className="w-40">
-                                    <Select
-                                        size="sm"
-                                        className="w-full"
-                                        label={t('designer.foreignKeys.onUpdate')}
-                                        value={foreignKey.onUpdate ?? DEFAULT_ACTION}
-                                        disabled={disabled}
-                                        items={actions}
-                                        onValueChange={(action) =>
-                                            onChange(patchForeignKey(draft, foreignKey.key, { onUpdate: action === DEFAULT_ACTION ? null : action }))
-                                        }
-                                    />
-                                </Field>
-                                <Field label={t('designer.foreignKeys.onDelete')} group className="w-40">
-                                    <Select
-                                        size="sm"
-                                        className="w-full"
-                                        label={t('designer.foreignKeys.onDelete')}
-                                        value={foreignKey.onDelete ?? DEFAULT_ACTION}
-                                        disabled={disabled}
-                                        items={actions}
-                                        onValueChange={(action) =>
-                                            onChange(patchForeignKey(draft, foreignKey.key, { onDelete: action === DEFAULT_ACTION ? null : action }))
-                                        }
-                                    />
-                                </Field>
+                                <ActionField
+                                    label={t('designer.foreignKeys.onUpdate')}
+                                    value={foreignKey.onUpdate}
+                                    items={actions}
+                                    disabled={disabled}
+                                    onValueChange={(action) => onChange(patchForeignKey(draft, foreignKey.key, { onUpdate: action }))}
+                                />
+                                <ActionField
+                                    label={t('designer.foreignKeys.onDelete')}
+                                    value={foreignKey.onDelete}
+                                    items={actions}
+                                    disabled={disabled}
+                                    onValueChange={(action) => onChange(patchForeignKey(draft, foreignKey.key, { onDelete: action }))}
+                                />
                                 <IconButton
                                     icon={Trash2}
                                     size="xs"
@@ -130,3 +118,32 @@ export function ForeignKeysEditor({ draft, schema, tables, referenceColumns, dis
         </div>
     );
 }
+
+/* What a key does on an update or a delete; `null` is the engine's default. */
+function ActionField({
+    label,
+    value,
+    items,
+    disabled,
+    onValueChange
+}: {
+    label: string;
+    value: string | null;
+    items: SelectItem<string>[];
+    disabled: boolean;
+    onValueChange(action: string | null): void;
+}) {
+    return (
+        <Field label={label} group className="w-40">
+            <Select
+                size="sm"
+                className="w-full"
+                label={label}
+                value={value ?? DEFAULT_ACTION}
+                disabled={disabled}
+                items={items}
+                onValueChange={(action) => onValueChange(action === DEFAULT_ACTION ? null : action)}
+            />
+        </Field>
+    );
+}