fix: call metadata.refresh() after dashboard save, persist editSchema after panel close

- DashboardView: saveSchema now calls refresh() after successful save
- DashboardView: previewSchema uses editSchema even after panel close (until metadata refreshes)
- DashboardView: useEffect clears stale editSchema on metadata refresh while panel is closed
- DashboardView: clear editSchema on dashboard navigation
- DashboardDesignPage: saveSchema now calls refresh() after successful save
- Add 5 new tests verifying metadata refresh after save operations

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

Author: Copilot

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(