Merge pull request #709 from objectstack-ai/copilot/update-navigation-drag-reorder

Author: hotlong

ROADMAP.md

@@ -117,6 +117,9 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Search within sidebar navigation
 - [x] Console integration: Navigation search filtering (`filterNavigationItems` + `SidebarInput`)
 - [x] Console integration: Badge indicators on navigation items (`badge` + `badgeVariant`)
+- [x] Console integration: Drag reorder upgrade — replace HTML5 DnD with `@dnd-kit` via `NavigationRenderer`
+- [x] Console integration: Navigation pin — `useNavPins` hook + `NavigationRenderer` `enablePinning`/`onPinToggle`
+- [x] Console integration: `AppSchemaRenderer` slot system — `sidebarHeader`, `sidebarExtra`, `sidebarFooter` slots for Console customization
 
 ### P1.8 Console — View Config Panel (Phase 20)
 

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

@@ -72,6 +72,16 @@ vi.mock('../hooks/useFavorites', () => ({
   useFavorites: () => ({ favorites: [], removeFavorite: vi.fn() }),
 }));
 
+vi.mock('../hooks/useNavPins', () => ({
+  useNavPins: () => ({
+    pinnedIds: [],
+    togglePin: vi.fn(),
+    isPinned: () => false,
+    applyPins: (items: any[]) => items,
+    clearPins: vi.fn(),
+  }),
+}));
+
 vi.mock('../utils', () => ({
   resolveI18nLabel: (label: any) => (typeof label === 'string' ? label : label?.en || ''),
 }));
@@ -251,4 +261,57 @@ describe('AppSidebar', () => {
       expect(badges?.length ?? 0).toBe(0);
     });
   });
+
+  // --- Navigation Drag Reorder (@dnd-kit integration) ---
+
+  describe('Navigation Drag Reorder', () => {
+    it('renders navigation items via NavigationRenderer (no draggable HTML5 attributes)', async () => {
+      renderSidebar();
+
+      await waitFor(() => {
+        expect(screen.getByText('Accounts')).toBeInTheDocument();
+        expect(screen.getByText('Contacts')).toBeInTheDocument();
+      });
+
+      // Verify items are not using HTML5 draggable attribute (old DnD removed)
+      const accountsLink = screen.getByText('Accounts');
+      const menuItem = accountsLink.closest('[data-sidebar="menu-item"]');
+      // The old code set draggable="true" on SidebarMenuItem; the new code
+      // delegates to NavigationRenderer which uses @dnd-kit (no draggable attr on the item itself)
+      expect(menuItem?.getAttribute('draggable')).not.toBe('true');
+    });
+
+    it('persists reorder state to localStorage via useNavOrder', () => {
+      // useNavOrder uses localStorage key `objectui-nav-order-{appName}`
+      const storageKey = 'objectui-nav-order-crm';
+
+      // Simulate a saved order in localStorage
+      const savedOrder = { '__root__': ['nav-contacts', 'nav-accounts', 'nav-dash', 'nav-settings', 'nav-group-reports'] };
+      localStorage.setItem(storageKey, JSON.stringify(savedOrder));
+
+      renderSidebar();
+
+      // Items should render (order applied internally by useNavOrder + NavigationRenderer)
+      expect(screen.getByText('Accounts')).toBeInTheDocument();
+      expect(screen.getByText('Contacts')).toBeInTheDocument();
+    });
+  });
+
+  // --- Navigation Pin Integration ---
+
+  describe('Navigation Pin', () => {
+    it('renders navigation items with pin support enabled', async () => {
+      renderSidebar();
+
+      await waitFor(() => {
+        expect(screen.getByText('Accounts')).toBeInTheDocument();
+      });
+
+      // NavigationRenderer receives enablePinning=true
+      // Pin buttons are rendered by NavigationRenderer when enablePinning is set
+      // We verify the items render correctly with pin support enabled
+      expect(screen.getByText('Contacts')).toBeInTheDocument();
+      expect(screen.getByText('Monthly Dashboard')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -0,0 +1,147 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useNavPins } from '../hooks/useNavPins';
+import type { NavigationItem } from '@object-ui/types';
+
+describe('useNavPins', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('starts with empty pins', () => {
+    const { result } = renderHook(() => useNavPins());
+    expect(result.current.pinnedIds).toEqual([]);
+  });
+
+  it('pins a navigation item', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+    });
+
+    expect(result.current.pinnedIds).toContain('nav-accounts');
+    expect(result.current.isPinned('nav-accounts')).toBe(true);
+  });
+
+  it('unpins a navigation item', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+    });
+    expect(result.current.isPinned('nav-accounts')).toBe(true);
+
+    act(() => {
+      result.current.togglePin('nav-accounts', false);
+    });
+    expect(result.current.isPinned('nav-accounts')).toBe(false);
+    expect(result.current.pinnedIds).not.toContain('nav-accounts');
+  });
+
+  it('persists pins to localStorage', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-contacts', true);
+    });
+
+    const stored = JSON.parse(localStorage.getItem('objectui-nav-pins') || '[]');
+    expect(stored).toContain('nav-contacts');
+  });
+
+  it('loads pins from localStorage on mount', () => {
+    localStorage.setItem('objectui-nav-pins', JSON.stringify(['nav-accounts', 'nav-contacts']));
+
+    const { result } = renderHook(() => useNavPins());
+    expect(result.current.pinnedIds).toEqual(['nav-accounts', 'nav-contacts']);
+    expect(result.current.isPinned('nav-accounts')).toBe(true);
+    expect(result.current.isPinned('nav-contacts')).toBe(true);
+  });
+
+  it('handles corrupted localStorage gracefully', () => {
+    localStorage.setItem('objectui-nav-pins', 'not-valid-json');
+
+    const { result } = renderHook(() => useNavPins());
+    expect(result.current.pinnedIds).toEqual([]);
+  });
+
+  it('handles non-array localStorage gracefully', () => {
+    localStorage.setItem('objectui-nav-pins', JSON.stringify({ foo: 'bar' }));
+
+    const { result } = renderHook(() => useNavPins());
+    expect(result.current.pinnedIds).toEqual([]);
+  });
+
+  it('clears all pins', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+      result.current.togglePin('nav-contacts', true);
+    });
+    expect(result.current.pinnedIds.length).toBe(2);
+
+    act(() => {
+      result.current.clearPins();
+    });
+    expect(result.current.pinnedIds).toEqual([]);
+    expect(JSON.parse(localStorage.getItem('objectui-nav-pins') || '[]')).toEqual([]);
+  });
+
+  it('prevents duplicate pins', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+    });
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+    });
+
+    // Should only appear once
+    const count = result.current.pinnedIds.filter(id => id === 'nav-accounts').length;
+    expect(count).toBe(1);
+  });
+
+  it('applies pin state to navigation items', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-accounts', true);
+    });
+
+    const items: NavigationItem[] = [
+      { id: 'nav-accounts', label: 'Accounts', type: 'object', objectName: 'account' },
+      { id: 'nav-contacts', label: 'Contacts', type: 'object', objectName: 'contact' },
+    ];
+
+    const pinned = result.current.applyPins(items);
+    expect(pinned[0].pinned).toBe(true);
+    expect(pinned[1].pinned).toBeFalsy();
+  });
+
+  it('applies pin state to nested navigation items', () => {
+    const { result } = renderHook(() => useNavPins());
+
+    act(() => {
+      result.current.togglePin('nav-report-sales', true);
+    });
+
+    const items: NavigationItem[] = [
+      {
+        id: 'nav-group-reports',
+        label: 'Reports',
+        type: 'group',
+        children: [
+          { id: 'nav-report-sales', label: 'Sales Report', type: 'report', reportName: 'sales' },
+          { id: 'nav-report-inv', label: 'Inventory Report', type: 'report', reportName: 'inventory' },
+        ],
+      },
+    ];
+
+    const pinned = result.current.applyPins(items);
+    expect(pinned[0].children![0].pinned).toBe(true);
+    expect(pinned[0].children![1].pinned).toBeFalsy();
+  });
+});