Merge pull request #855 from objectstack-ai/copilot/fix-dashboard-refresh-issue

Author: hotlong

ROADMAP.md

@@ -19,7 +19,7 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete
 2. **Designer Interaction** — ViewDesigner and DataModelDesigner have undo/redo, field type selectors, inline editing, Ctrl+S save, column drag-to-reorder with dnd-kit ✅
 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).
+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).
 5. **Console Advanced Polish** — Remaining upgrades for forms, import/export, automation, comments
 6. **PWA Sync** — Background sync is simulated only
 
@@ -435,6 +435,14 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Support data-table construction from `widget.object` when no data provider exists (table widgets created via config panel)
 - [x] Add 7 new Vitest tests: scatter chart (2), widget-level field fallbacks (2), object-chart from widget fields, data-table from widget.object, DashboardWithConfig live preview
 
+**Phase 11 — Dashboard Save/Refresh Metadata Sync:**
+- [x] Fix: `saveSchema` in `DashboardView` did not call `metadata.refresh()` after PATCH — closing config panel showed stale data from cached metadata
+- [x] Fix: `previewSchema` only used `editSchema` when `configPanelOpen=true` — changed to `editSchema || dashboard` so edits remain visible after panel close until metadata refreshes
+- [x] Add `useEffect` to clear stale `editSchema` when metadata refreshes while config panel is closed (seamless transition)
+- [x] Clear `editSchema` and config panel state on dashboard navigation (`dashboardName` change)
+- [x] Fix: `DashboardDesignPage.saveSchema` did not call `metadata.refresh()` — other pages saw stale dashboard data after save
+- [x] Add 5 new Vitest tests: metadata refresh after widget save (2), metadata refresh after widget delete (2), metadata refresh after DashboardDesignPage save (1)
+
 ### P1.11 Console — Schema-Driven View Config Panel Migration
 
 > Migrated the Console ViewConfigPanel from imperative implementation (~1655 lines) to Schema-Driven architecture using `ConfigPanelRenderer` + `useConfigDraft` + `ConfigPanelSchema`, reducing to ~170 lines declarative wrapper + schema factory.
@@ -1004,6 +1012,6 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 
 ---
 
-**Roadmap Status:** 🎯 Active — AppShell · Designer Interaction · View Config Live Preview Sync (P1.8.1) · Dashboard Config Panel (widget live preview & scatter type switch ✅ fixed) · Schema-Driven View Config Panel ✅ · Right-Side Visual Editor Drawer ✅ · Airtable UX Parity
+**Roadmap Status:** 🎯 Active — AppShell · Designer Interaction · View Config Live Preview Sync (P1.8.1) · Dashboard Config Panel (widget live preview & scatter type switch ✅ fixed, save/refresh metadata sync ✅ fixed) · Schema-Driven View Config Panel ✅ · Right-Side Visual Editor Drawer ✅ · Airtable UX Parity
 **Next Review:** March 15, 2026
 **Contact:** hello@objectui.org | https://github.com/objectstack-ai/objectui

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

@@ -14,7 +14,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { DashboardView } from '../components/DashboardView';
 
 // Track props passed to mocked components
-const { rendererCalls, dashboardConfigCalls, widgetConfigCalls } = vi.hoisted(() => ({
+const { rendererCalls, dashboardConfigCalls, widgetConfigCalls, mockRefresh } = vi.hoisted(() => ({
   rendererCalls: {
     designMode: false,
     selectedWidgetId: null as string | null,
@@ -32,6 +32,7 @@ const { rendererCalls, dashboardConfigCalls, widgetConfigCalls } = vi.hoisted(()
     onSave: null as ((config: Record<string, any>) => void) | null,
     onFieldChange: null as ((field: string, value: any) => void) | null,
   },
+  mockRefresh: vi.fn().mockResolvedValue(undefined),
 }));
 
 // Mock MetadataProvider with a dashboard
@@ -57,7 +58,7 @@ vi.mock('../context/MetadataProvider', () => ({
     pages: [],
     loading: false,
     error: null,
-    refresh: vi.fn(),
+    refresh: mockRefresh,
   }),
 }));
 
@@ -132,6 +133,7 @@ vi.mock('sonner', () => ({
 
 beforeEach(() => {
   mockUpdate.mockClear();
+  mockRefresh.mockClear();
   rendererCalls.designMode = false;
   rendererCalls.selectedWidgetId = null;
   rendererCalls.onWidgetClick = null;
@@ -308,4 +310,21 @@ describe('Dashboard Design Mode — Inline Config Panel', () => {
     // Config panel should still show the widget (not reset or disappear)
     expect(screen.getByTestId('widget-config-panel')).toBeInTheDocument();
   });
+
+  it('should call metadata refresh after widget deletion (save)', async () => {
+    await renderDashboardView();
+    await openConfigPanel();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    mockRefresh.mockClear();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('widget-delete-button'));
+    });
+
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalled();
+  });
 });

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

@@ -10,6 +10,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { DashboardDesignPage } from '../pages/DashboardDesignPage';
 
 // Mock MetadataProvider
+const { mockRefresh } = vi.hoisted(() => ({ mockRefresh: vi.fn().mockResolvedValue(undefined) }));
 vi.mock('../context/MetadataProvider', () => ({
   useMetadata: () => ({
     apps: [],
@@ -30,7 +31,7 @@ vi.mock('../context/MetadataProvider', () => ({
     pages: [],
     loading: false,
     error: null,
-    refresh: vi.fn(),
+    refresh: mockRefresh,
   }),
 }));
 
@@ -118,4 +119,28 @@ describe('DashboardDesignPage', () => {
     // Should call dataSource.update with the dashboard schema
     expect(mockUpdate).toHaveBeenCalledWith('sys_dashboard', 'sales-dashboard', expect.objectContaining({ type: 'dashboard' }));
   });
+
+  it('should refresh metadata after save via onChange', async () => {
+    renderWithRouter('sales-dashboard');
+    mockRefresh.mockClear();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('trigger-change'));
+    });
+
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalled();
+  });
+
+  it('should refresh metadata after Ctrl+S save', async () => {
+    renderWithRouter('sales-dashboard');
+    mockRefresh.mockClear();
+
+    await act(async () => {
+      fireEvent.keyDown(window, { key: 's', ctrlKey: true });
+    });
+
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalled();
+  });
 });

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

@@ -11,7 +11,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { DashboardView } from '../components/DashboardView';
 
 // Track the latest props passed to mocked components
-const { rendererCalls, dashboardConfigCalls, widgetConfigCalls } = vi.hoisted(() => ({
+const { rendererCalls, dashboardConfigCalls, widgetConfigCalls, mockRefresh } = vi.hoisted(() => ({
   rendererCalls: {
     designMode: false,
     selectedWidgetId: null as string | null,
@@ -31,6 +31,7 @@ const { rendererCalls, dashboardConfigCalls, widgetConfigCalls } = vi.hoisted(()
     onFieldChange: null as ((field: string, value: any) => void) | null,
     onClose: null as (() => void) | null,
   },
+  mockRefresh: vi.fn().mockResolvedValue(undefined),
 }));
 
 // Mock MetadataProvider with a dashboard
@@ -55,7 +56,7 @@ vi.mock('../context/MetadataProvider', () => ({
     pages: [],
     loading: false,
     error: null,
-    refresh: vi.fn(),
+    refresh: mockRefresh,
   }),
 }));
 
@@ -136,6 +137,7 @@ vi.mock('sonner', () => ({
 
 beforeEach(() => {
   mockUpdate.mockClear();
+  mockRefresh.mockClear();
   rendererCalls.designMode = false;
   rendererCalls.selectedWidgetId = null;
   rendererCalls.onWidgetClick = null;
@@ -360,4 +362,43 @@ describe('DashboardView — Selection Sync Integration', () => {
     // Widget config panel should still be visible
     expect(screen.getByTestId('widget-config-panel')).toBeInTheDocument();
   });
+
+  it('should call metadata refresh after widget config save', async () => {
+    await renderDashboardView();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('dashboard-edit-button'));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    mockRefresh.mockClear();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('widget-config-save'));
+    });
+
+    // Backend save should trigger metadata refresh
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalled();
+  });
+
+  it('should call metadata refresh after widget deletion', async () => {
+    await renderDashboardView();
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('dashboard-edit-button'));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('renderer-widget-w1'));
+    });
+
+    mockRefresh.mockClear();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('widget-delete-button'));
+    });
+
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalled();
+  });
 });

apps/console/src/components/DashboardView.tsx

@@ -138,27 +138,41 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
 
   useEffect(() => {
     setIsLoading(true);
+    setEditSchema(null);
+    setConfigPanelOpen(false);
+    setSelectedWidgetId(null);
     queueMicrotask(() => setIsLoading(false));
   }, [dashboardName]);
 
-  const { dashboards, objects: metadataObjects } = useMetadata();
+  const { dashboards, objects: metadataObjects, refresh } = useMetadata();
   const dashboard = dashboards?.find((d: any) => d.name === dashboardName);
 
   // Local schema state for live preview — initialized from metadata
   const [editSchema, setEditSchema] = useState<DashboardSchema | null>(null);
 
+  // When metadata refreshes (dashboard reference changes), discard stale
+  // editSchema if the config panel is already closed.
+  useEffect(() => {
+    if (!configPanelOpen) {
+      setEditSchema(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboard]);
+
   // ---- Save helper --------------------------------------------------------
   const saveSchema = useCallback(
     async (schema: DashboardSchema) => {
       try {
         if (adapter) {
           await adapter.update('sys_dashboard', dashboardName!, schema);
+          // Refresh metadata cache so closing the config panel shows saved data
+          refresh().catch(() => {});
         }
       } catch (err) {
         console.warn('[DashboardView] Auto-save failed:', err);
       }
     },
-    [adapter, dashboardName],
+    [adapter, dashboardName, refresh],
   );
 
   // ---- Open / close config panel ------------------------------------------
@@ -360,7 +374,7 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
     );
   }
 
-  const previewSchema = configPanelOpen && editSchema ? editSchema : dashboard;
+  const previewSchema = editSchema || dashboard;
 
   return (
     <div className="flex flex-col h-full overflow-hidden bg-background">

apps/console/src/pages/DashboardDesignPage.tsx

@@ -19,7 +19,7 @@ export function DashboardDesignPage() {
   const navigate = useNavigate();
   const { dashboardName } = useParams<{ dashboardName: string }>();
   const dataSource = useAdapter();
-  const { dashboards } = useMetadata();
+  const { dashboards, refresh } = useMetadata();
 
   const dashboard = dashboards?.find((d: any) => d.name === dashboardName);
 
@@ -41,14 +41,16 @@ export function DashboardDesignPage() {
       try {
         if (dataSource) {
           await dataSource.update('sys_dashboard', dashboardName!, toSave);
+          // Refresh metadata cache so other pages see saved changes
+          refresh().catch(() => {});
           return true;
         }
       } catch {
         // Save errors are non-blocking; user can retry via export
       }
       return false;
     },
-    [dataSource, dashboardName],
+    [dataSource, dashboardName, refresh],
   );
 
   const handleChange = useCallback(