fix: make ViewConfigPanel draft changes reactive in ObjectView main view

- Fix objectViewSchema to read showSearch/showFilters from activeView instead of hardcoded true
- Add handleViewUpdate callback for real-time field-by-field draft propagation
- Wire onViewUpdate prop to ViewConfigPanel for live preview
- Pass draft-aware views to PluginObjectView
- Fix ViewConfigPanel useEffect to depend on activeView.id (prevents draft reset loop)
- Add tests for draft persistence and real-time propagation

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

Author: Copilot

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

@@ -551,4 +551,87 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByTestId('toggle-allowExport')).toHaveAttribute('aria-checked', 'false');
         expect(screen.getByTestId('toggle-addRecordViaForm')).toHaveAttribute('aria-checked', 'true');
     });
+
+    // ── Real-time draft propagation tests (issue fix) ──
+
+    it('keeps dirty state when re-rendered with same view ID but updated activeView', () => {
+        const onViewUpdate = vi.fn();
+        const { rerender } = render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        // Toggle showSearch — panel becomes dirty
+        fireEvent.click(screen.getByTestId('toggle-showSearch'));
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+
+        // Simulate parent re-rendering with the same view ID but merged draft
+        // (this happens when onViewUpdate propagates to parent viewDraft → activeView)
+        rerender(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={{ ...mockActiveView, showSearch: false }}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        // Draft footer should still be visible (isDirty should NOT reset for same view ID)
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+    });
+
+    it('resets dirty state when activeView changes to a different view ID', () => {
+        const { rerender } = render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+            />
+        );
+
+        // Make the panel dirty
+        fireEvent.click(screen.getByTestId('toggle-showSearch'));
+        expect(screen.getByTestId('view-config-footer')).toBeInTheDocument();
+
+        // Switch to a completely different view
+        rerender(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={{ id: 'pipeline', label: 'Pipeline', type: 'kanban', columns: ['name'] }}
+                objectDef={mockObjectDef}
+            />
+        );
+
+        // Draft should reset — footer should be gone
+        expect(screen.queryByTestId('view-config-footer')).not.toBeInTheDocument();
+    });
+
+    it('calls onViewUpdate for each real-time field change to enable live preview', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        // Toggle multiple switches
+        fireEvent.click(screen.getByTestId('toggle-showSearch'));
+        fireEvent.click(screen.getByTestId('toggle-showFilters'));
+
+        expect(onViewUpdate).toHaveBeenCalledTimes(2);
+        expect(onViewUpdate).toHaveBeenCalledWith('showSearch', false);
+        expect(onViewUpdate).toHaveBeenCalledWith('showFilters', false);
+    });
 });

apps/console/src/components/ObjectView.tsx

@@ -134,6 +134,15 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
         ? { ...baseView, ...viewDraft }
         : baseView;
 
+    /** Real-time draft field update — propagates each toggle/input change immediately */
+    const handleViewUpdate = useCallback((field: string, value: any) => {
+        setViewDraft(prev => ({
+            ...(prev || {}),
+            id: baseView?.id,
+            [field]: value,
+        }));
+    }, [baseView?.id]);
+
     const handleViewChange = (newViewId: string) => {
         // The plugin ObjectView returns the view ID directly via onViewChange
         const matchedView = views.find((v: any) => v.id === newViewId);
@@ -324,21 +333,21 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
         );
     }, [activeView, objectDef, objectName, refreshKey]);
 
-    // Build the ObjectViewSchema for the plugin
+    // Build the ObjectViewSchema for the plugin — reads from activeView (which merges draft)
     const objectViewSchema = useMemo(() => ({
         type: 'object-view' as const,
         objectName: objectDef.name,
         layout: 'page' as const,
-        showSearch: true,
-        showFilters: true,
+        showSearch: activeView?.showSearch !== false,
+        showFilters: activeView?.showFilters !== false,
         showCreate: false, // We render our own create button in the header
         showRefresh: true,
         onNavigate: (recordId: string | number, mode: 'view' | 'edit') => {
             if (mode === 'edit') {
                 onEdit?.({ _id: recordId, id: recordId });
             }
         },
-    }), [objectDef.name, onEdit]);
+    }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters]);
 
     return (
         <div className="h-full flex flex-col bg-background">
@@ -471,7 +480,11 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                             key={refreshKey}
                             schema={objectViewSchema}
                             dataSource={dataSource}
-                            views={views}
+                            views={views.map((v: any) =>
+                                v.id === activeViewId && viewDraft && viewDraft.id === v.id
+                                    ? { ...v, ...viewDraft }
+                                    : v
+                            )}
                             activeViewId={activeViewId}
                             onViewChange={handleViewChange}
                             onEdit={(record: any) => onEdit?.(record)}
@@ -503,6 +516,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                     recordCount={recordCount}
                     onOpenEditor={handleOpenEditor}
                     onSave={handleViewConfigSave}
+                    onViewUpdate={handleViewUpdate}
                 />
              </div>
 

apps/console/src/components/ViewConfigPanel.tsx

@@ -110,11 +110,14 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef, onViewUp
     const [draft, setDraft] = useState<Record<string, any>>({});
     const [isDirty, setIsDirty] = useState(false);
 
-    // Reset draft when activeView changes (e.g. switching views)
+    // Reset draft when switching to a different view (by ID change only).
+    // We intentionally depend on activeView.id rather than the full activeView
+    // object so that real-time draft propagation (via onViewUpdate → parent
+    // setViewDraft → merged activeView) does not reset isDirty to false.
     useEffect(() => {
         setDraft({ ...activeView });
         setIsDirty(false);
-    }, [activeView]);
+    }, [activeView.id]);
 
     // Focus the panel when it opens for keyboard accessibility
     useEffect(() => {