Add undo/redo to useConfigDraft, drag-and-drop column sorting via @dnd-kit, and tests

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -17,7 +17,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 
 **What Remains:** The gap to **Airtable-level UX** is primarily in:
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
-2. **Designer Interaction** — DataModelDesigner has undo/redo, field type selectors, inline editing, Ctrl+S save. ViewDesigner has been removed; its capabilities are now part of ViewConfigPanel (right-side config panel) ✅
+2. **Designer Interaction** — DataModelDesigner has undo/redo, field type selectors, inline editing, Ctrl+S save. ViewDesigner has been removed; its capabilities (drag-to-reorder columns via @dnd-kit, undo/redo via useConfigDraft history) are now integrated into ViewConfigPanel (right-side config panel) ✅
 3. **View Config Live Preview Sync** — Config panel changes sync in real-time for Grid, but `showSort`/`showSearch`/`showFilters`/`striped`/`bordered` not yet propagated to Kanban/Calendar/Timeline/Gallery/Map/Gantt (see P1.8.1)
 4. **Dashboard Config Panel** — Airtable-style right-side configuration panel for dashboards (data source, layout, widget properties, sub-editors, type definitions). Widget config live preview sync and scatter chart type switch ✅ fixed (P1.10 Phase 10). Dashboard save/refresh metadata sync ✅ fixed (P1.10 Phase 11). Data provider field override for live preview ✅ fixed (P1.10 Phase 12).
 5. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
@@ -99,6 +99,8 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Add field type selector dropdown with icons from `DESIGNER_FIELD_TYPES`
 - [x] Column width validation (min/max/pattern check)
 - [x] Removed: ViewDesigner replaced by ViewConfigPanel (right-side config panel)
+- [x] ViewConfigPanel upgraded: undo/redo integrated into `useConfigDraft` hook
+- [x] ViewConfigPanel upgraded: drag-and-drop column sorting via `@dnd-kit/sortable`
 
 **DataModelDesigner:**
 - [x] Entity drag-to-move on canvas

apps/console/package.json

@@ -33,6 +33,9 @@
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/auth": "workspace:*",
     "@object-ui/collaboration": "workspace:*",
     "@object-ui/components": "workspace:*",

apps/console/src/__tests__/ViewConfigPanel.test.tsx

@@ -29,24 +29,61 @@ vi.mock('@object-ui/components', () => {
     function useConfigDraft(source: any, options?: any) {
         const [draft, setDraft] = React.useState({ ...source });
         const [isDirty, setIsDirty] = React.useState(options?.mode === 'create');
+        const pastRef = React.useRef<any[]>([]);
+        const futureRef = React.useRef<any[]>([]);
+        const [, forceRender] = React.useState(0);
 
         React.useEffect(() => {
             setDraft({ ...source });
             setIsDirty(options?.mode === 'create');
+            pastRef.current = [];
+            futureRef.current = [];
         }, [source]); // eslint-disable-line react-hooks/exhaustive-deps
 
         const updateField = React.useCallback((field: string, value: any) => {
-            setDraft((prev: any) => ({ ...prev, [field]: value }));
+            setDraft((prev: any) => {
+                pastRef.current = [...pastRef.current.slice(-49), prev];
+                futureRef.current = [];
+                return { ...prev, [field]: value };
+            });
             setIsDirty(true);
+            forceRender((n: number) => n + 1);
             options?.onUpdate?.(field, value);
         }, [options?.onUpdate]);
 
+        const undo = React.useCallback(() => {
+            if (pastRef.current.length === 0) return;
+            setDraft((prev: any) => {
+                const past = [...pastRef.current];
+                const previous = past.pop()!;
+                pastRef.current = past;
+                futureRef.current = [prev, ...futureRef.current];
+                return previous;
+            });
+            forceRender((n: number) => n + 1);
+        }, []);
+
+        const redo = React.useCallback(() => {
+            if (futureRef.current.length === 0) return;
+            setDraft((prev: any) => {
+                const future = [...futureRef.current];
+                const next = future.shift()!;
+                futureRef.current = future;
+                pastRef.current = [...pastRef.current, prev];
+                return next;
+            });
+            forceRender((n: number) => n + 1);
+        }, []);
+
         const discard = React.useCallback(() => {
             setDraft({ ...source });
             setIsDirty(false);
+            pastRef.current = [];
+            futureRef.current = [];
+            forceRender((n: number) => n + 1);
         }, [source]);
 
-        return { draft, isDirty, updateField, discard, setDraft };
+        return { draft, isDirty, updateField, discard, setDraft, undo, redo, canUndo: pastRef.current.length > 0, canRedo: futureRef.current.length > 0 };
     }
 
     // ConfigPanelRenderer mock — renders schema sections with proper collapse/visibility

apps/console/src/utils/view-config-schema.tsx

@@ -16,6 +16,22 @@ import { Input, Switch, Checkbox, FilterBuilder, SortBuilder, ConfigRow } from '
 import type { ConfigPanelSchema, ConfigField } from '@object-ui/components';
 import type { FilterGroup, SortItem } from '@object-ui/components';
 import { Eye, EyeOff, GripVertical } from 'lucide-react';
+import {
+    DndContext,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+    useSortable,
+    arrayMove,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
     VIEW_TYPE_LABELS,
     VIEW_TYPE_OPTIONS,
@@ -43,6 +59,131 @@ function ExpandableWidget({ renderSummary, children }: {
     );
 }
 
+// ---------------------------------------------------------------------------
+// Sortable column item — drag-to-reorder within the field selector
+// ---------------------------------------------------------------------------
+
+/** Minimum drag distance in pixels to activate column reorder */
+const COLUMN_DRAG_ACTIVATION_DISTANCE = 5;
+
+function SortableColumnItem({ colName, label, idx, total, onToggle, onMove }: {
+    colName: string;
+    label: string;
+    idx: number;
+    total: number;
+    onToggle: (name: string, checked: boolean) => void;
+    onMove: (name: string, direction: 'up' | 'down') => void;
+}) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: colName });
+
+    const style: React.CSSProperties = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : undefined,
+        opacity: isDragging ? 0.5 : undefined,
+    };
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            data-field-name={colName}
+            data-field-label={label}
+            className="flex items-center gap-1 text-xs hover:bg-accent/50 rounded-sm py-0.5 px-1 -mx-1 group"
+        >
+            <span
+                {...attributes}
+                {...listeners}
+                className="shrink-0 cursor-grab touch-none"
+                data-testid={`col-drag-handle-${colName}`}
+            >
+                <GripVertical className="h-3 w-3 text-muted-foreground/50" />
+            </span>
+            <button
+                type="button"
+                data-testid={`col-eye-${colName}`}
+                className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent shrink-0"
+                onClick={() => onToggle(colName, false)}
+                aria-label={`Hide ${label}`}
+            >
+                <Eye className="h-3.5 w-3.5 text-primary" />
+            </button>
+            <span className="truncate flex-1">{label}</span>
+            <button
+                type="button"
+                data-testid={`col-move-up-${colName}`}
+                className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent disabled:opacity-30 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                disabled={idx === 0}
+                onClick={() => onMove(colName, 'up')}
+                aria-label={`Move ${label} up`}
+            >
+                <GripVertical className="h-3 w-3 rotate-90" />
+            </button>
+            <button
+                type="button"
+                data-testid={`col-move-down-${colName}`}
+                className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent disabled:opacity-30 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                disabled={idx === total - 1}
+                onClick={() => onMove(colName, 'down')}
+                aria-label={`Move ${label} down`}
+            >
+                <GripVertical className="h-3 w-3 -rotate-90" />
+            </button>
+        </div>
+    );
+}
+
+/** Wrapper component for drag-and-drop column selector (uses hooks for sensors) */
+function DraggableColumnList({ columns, fieldOptions, onToggle, onMove, onReorder }: {
+    columns: string[];
+    fieldOptions: FieldOption[];
+    onToggle: (name: string, checked: boolean) => void;
+    onMove: (name: string, direction: 'up' | 'down') => void;
+    onReorder: (newColumns: string[]) => void;
+}) {
+    const sensors = useSensors(
+        useSensor(PointerSensor, { activationConstraint: { distance: COLUMN_DRAG_ACTIVATION_DISTANCE } }),
+        useSensor(KeyboardSensor),
+    );
+
+    const handleDragEnd = React.useCallback((event: DragEndEvent) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id) return;
+        const oldIndex = columns.indexOf(String(active.id));
+        const newIndex = columns.indexOf(String(over.id));
+        if (oldIndex === -1 || newIndex === -1) return;
+        onReorder(arrayMove(columns, oldIndex, newIndex));
+    }, [columns, onReorder]);
+
+    return (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={columns} strategy={verticalListSortingStrategy}>
+                {columns.map((colName, idx) => {
+                    const field = fieldOptions.find(f => f.value === colName);
+                    return (
+                        <SortableColumnItem
+                            key={colName}
+                            colName={colName}
+                            label={field?.label || colName}
+                            idx={idx}
+                            total={columns.length}
+                            onToggle={onToggle}
+                            onMove={onMove}
+                        />
+                    );
+                })}
+            </SortableContext>
+        </DndContext>
+    );
+}
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -639,47 +780,16 @@ function buildDataSection(
                                     </button>
                                 </div>
                                 <div className="space-y-0.5 max-h-48 overflow-auto">
-                                    {/* Visible (selected) columns with drag handle + eye toggle */}
+                                    {/* Visible (selected) columns with drag-and-drop reorder */}
                                     {Array.isArray(draft.columns) && draft.columns.length > 0 && (
                                         <div data-testid="selected-columns" className="space-y-0.5 pb-1 mb-1 border-b border-border/50">
-                                            {draft.columns.map((colName: string, idx: number) => {
-                                                const field = fieldOptions.find(f => f.value === colName);
-                                                return (
-                                                    <div key={colName} data-field-name={colName} data-field-label={field?.label || colName} className="flex items-center gap-1 text-xs hover:bg-accent/50 rounded-sm py-0.5 px-1 -mx-1 group">
-                                                        <GripVertical className="h-3 w-3 text-muted-foreground/50 shrink-0 cursor-grab" />
-                                                        <button
-                                                            type="button"
-                                                            data-testid={`col-eye-${colName}`}
-                                                            className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent shrink-0"
-                                                            onClick={() => handleColumnToggle(colName, false)}
-                                                            aria-label={`Hide ${field?.label || colName}`}
-                                                        >
-                                                            <Eye className="h-3.5 w-3.5 text-primary" />
-                                                        </button>
-                                                        <span className="truncate flex-1">{field?.label || colName}</span>
-                                                        <button
-                                                            type="button"
-                                                            data-testid={`col-move-up-${colName}`}
-                                                            className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent disabled:opacity-30 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                                                            disabled={idx === 0}
-                                                            onClick={() => handleColumnMove(colName, 'up')}
-                                                            aria-label={`Move ${field?.label || colName} up`}
-                                                        >
-                                                            <GripVertical className="h-3 w-3 rotate-90" />
-                                                        </button>
-                                                        <button
-                                                            type="button"
-                                                            data-testid={`col-move-down-${colName}`}
-                                                            className="h-5 w-5 flex items-center justify-center rounded hover:bg-accent disabled:opacity-30 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                                                            disabled={idx === draft.columns.length - 1}
-                                                            onClick={() => handleColumnMove(colName, 'down')}
-                                                            aria-label={`Move ${field?.label || colName} down`}
-                                                        >
-                                                            <GripVertical className="h-3 w-3 -rotate-90" />
-                                                        </button>
-                                                    </div>
-                                                );
-                                            })}
+                                            <DraggableColumnList
+                                                columns={draft.columns}
+                                                fieldOptions={fieldOptions}
+                                                onToggle={handleColumnToggle}
+                                                onMove={handleColumnMove}
+                                                onReorder={(newCols) => updateField('columns', newCols)}
+                                            />
                                         </div>
                                     )}
                                     {/* Hidden (unselected) fields with eye-off toggle */}