Merge pull request #866 from objectstack-ai/copilot/evaluate-view-config-panel

Author: hotlong

ROADMAP.md

@@ -511,6 +511,29 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] 136 ViewConfigPanel interaction tests pass (removed tests for deleted fields)
 - [x] 10 config-sync integration tests pass
 
+**Phase 7 — Section Restructure & Field Selector Upgrade (Airtable UX Parity):**
+- [x] Split monolithic `pageConfig` section into 5 clear sub-sections: General, Toolbar, Navigation, Records, Export & Print
+- [x] General section: label, description, viewType (always expanded, non-collapsible)
+- [x] Toolbar section: showSearch, showSort, showFilters, showHideFields, showGroup, showColor, showDensity (collapsible)
+- [x] Navigation section: navigation mode, width, openNewTab (collapsible)
+- [x] Records section: selection mode, addRecord sub-editor (collapsible)
+- [x] Export & Print section: allowExport + sub-config, showRecordCount, allowPrinting (collapsible, defaultCollapsed)
+- [x] Field selector upgrade: eye/eye-off toggle for visibility (replacing checkboxes), search input for field filtering, Show All/Hide All batch operations, grip handles for visual reorder hints
+- [x] i18n keys added for all 11 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko, + ar)
+- [x] 110 schema tests pass (+7 new section tests)
+- [x] 136 ViewConfigPanel interaction tests pass (updated for eye toggles, section expansion)
+- [x] 31 ObjectView integration tests pass (updated for section expansion)
+- [x] 10 config-sync integration tests pass
+
+**Phase 8 — Tab Gear Icon, Panel Animation & UX Polish:**
+- [x] Add `onConfigView` prop to ViewTabBar with Settings2 gear icon on active tab
+- [x] Wire gear icon in ObjectView: click opens ViewConfigPanel for that view's settings
+- [x] Panel slide-in/slide-out animation: CSS transition on max-width + opacity (300ms ease-in-out)
+- [x] Auto-sync panel content on view tab switch (ViewConfigPanel resets draft when activeView.id changes)
+- [x] 5 new ViewTabBar gear icon tests (show on active, hide on inactive, callback, event isolation)
+- [x] 3 new ViewConfigPanel tests (search input, Show All, Hide All)
+- [x] 49 ViewTabBar tests pass, 139 ViewConfigPanel tests pass, 31 ObjectView tests pass
+
 **Code Reduction:** ~1655 lines imperative → ~170 lines declarative wrapper + ~1100 lines schema factory + ~180 lines shared utils = **>50% net reduction in component code** with significantly improved maintainability
 
 ### P1.9 Console — Content Area Layout & Responsiveness

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

@@ -605,6 +605,9 @@ describe('ObjectView Component', () => {
         fireEvent.click(screen.getByTitle('console.objectView.designTools'));
         fireEvent.click(screen.getByText('console.objectView.editView'));
 
+        // Expand the Export & Print section (defaultCollapsed)
+        fireEvent.click(screen.getByTestId('section-header-exportPrint'));
+
         // Toggle showRecordCount on
         const recordCountSwitch = screen.getByTestId('toggle-showRecordCount');
         fireEvent.click(recordCountSwitch);
@@ -628,6 +631,9 @@ describe('ObjectView Component', () => {
         fireEvent.click(screen.getByTitle('console.objectView.designTools'));
         fireEvent.click(screen.getByText('console.objectView.editView'));
 
+        // Expand the Export & Print section (defaultCollapsed)
+        fireEvent.click(screen.getByTestId('section-header-exportPrint'));
+
         // Toggle allowPrinting on
         const printSwitch = screen.getByTestId('toggle-allowPrinting');
         fireEvent.click(printSwitch);

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

@@ -336,13 +336,9 @@ describe('ViewConfigPanel', () => {
 
         // 3 fields → 3 checkboxes
         expect(screen.getByTestId('column-selector')).toBeInTheDocument();
-        expect(screen.getByTestId('col-checkbox-name')).toBeInTheDocument();
-        expect(screen.getByTestId('col-checkbox-stage')).toBeInTheDocument();
-        expect(screen.getByTestId('col-checkbox-amount')).toBeInTheDocument();
-        // Columns in activeView should be checked
-        expect(screen.getByTestId('col-checkbox-name')).toBeChecked();
-        expect(screen.getByTestId('col-checkbox-stage')).toBeChecked();
-        expect(screen.getByTestId('col-checkbox-amount')).toBeChecked();
+        expect(screen.getByTestId('col-eye-name')).toBeInTheDocument();
+        expect(screen.getByTestId('col-eye-stage')).toBeInTheDocument();
+        expect(screen.getByTestId('col-eye-amount')).toBeInTheDocument();
     });
 
     it('displays object source name', () => {
@@ -541,6 +537,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         const exportSwitch = screen.getByTestId('toggle-allowExport');
         fireEvent.click(exportSwitch);
         expect(onViewUpdate).toHaveBeenCalledWith('allowExport', true);
@@ -692,7 +689,7 @@ describe('ViewConfigPanel', () => {
         fireEvent.click(screen.getByText('console.objectView.fields'));
 
         // Uncheck the 'stage' column
-        fireEvent.click(screen.getByTestId('col-checkbox-stage'));
+        fireEvent.click(screen.getByTestId('col-eye-stage'));
         expect(onViewUpdate).toHaveBeenCalledWith('columns', ['name', 'amount']);
     });
 
@@ -783,8 +780,9 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByTestId('toggle-showSearch')).toHaveAttribute('aria-checked', 'false');
         expect(screen.getByTestId('toggle-showFilters')).toHaveAttribute('aria-checked', 'true');
         expect(screen.getByTestId('toggle-showSort')).toHaveAttribute('aria-checked', 'false');
-        expect(screen.getByTestId('toggle-allowExport')).toHaveAttribute('aria-checked', 'false');
         expect(screen.getByTestId('toggle-addRecord-enabled')).toHaveAttribute('aria-checked', 'true');
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
+        expect(screen.getByTestId('toggle-allowExport')).toHaveAttribute('aria-checked', 'false');
     });
 
     // ── Real-time draft propagation tests (issue fix) ──
@@ -1534,8 +1532,7 @@ describe('ViewConfigPanel', () => {
         fireEvent.click(screen.getByText('console.objectView.fields'));
 
         // 'amount' should have a checkbox but no move buttons
-        expect(screen.getByTestId('col-checkbox-amount')).toBeInTheDocument();
-        expect(screen.getByTestId('col-checkbox-amount')).not.toBeChecked();
+        expect(screen.getByTestId('col-eye-amount')).toBeInTheDocument();
         expect(screen.queryByTestId('col-move-up-amount')).not.toBeInTheDocument();
         expect(screen.queryByTestId('col-move-down-amount')).not.toBeInTheDocument();
     });
@@ -1555,7 +1552,7 @@ describe('ViewConfigPanel', () => {
         fireEvent.click(screen.getByText('console.objectView.fields'));
 
         // Click checkbox for 'amount' to add it
-        fireEvent.click(screen.getByTestId('col-checkbox-amount'));
+        fireEvent.click(screen.getByTestId('col-eye-amount'));
         expect(onViewUpdate).toHaveBeenCalledWith('columns', ['name', 'stage', 'amount']);
     });
 
@@ -1584,6 +1581,59 @@ describe('ViewConfigPanel', () => {
         expect(onViewUpdate).toHaveBeenCalledTimes(2);
     });
 
+    it('renders column search input and show/hide all buttons', () => {
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+            />
+        );
+
+        fireEvent.click(screen.getByText('console.objectView.fields'));
+
+        expect(screen.getByTestId('column-search-input')).toBeInTheDocument();
+        expect(screen.getByTestId('column-show-all')).toBeInTheDocument();
+        expect(screen.getByTestId('column-hide-all')).toBeInTheDocument();
+    });
+
+    it('clicking Show All selects all fields and calls onViewUpdate', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={{ ...mockActiveView, columns: ['name'] }}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        fireEvent.click(screen.getByText('console.objectView.fields'));
+        fireEvent.click(screen.getByTestId('column-show-all'));
+
+        expect(onViewUpdate).toHaveBeenCalledWith('columns', ['name', 'stage', 'amount']);
+    });
+
+    it('clicking Hide All removes all fields and calls onViewUpdate', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        fireEvent.click(screen.getByText('console.objectView.fields'));
+        fireEvent.click(screen.getByTestId('column-hide-all'));
+
+        expect(onViewUpdate).toHaveBeenCalledWith('columns', []);
+    });
+
     // ── Section Layout Tests: Page vs ListView Config ──
 
     it('renders page-level config items in the Page section (showSearch, showFilters, showSort, navigation, addRecord, allowExport)', () => {
@@ -1606,6 +1656,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByTestId('toggle-showSort')).toBeInTheDocument();
         expect(screen.getByTestId('select-navigation-mode')).toBeInTheDocument();
         expect(screen.getByTestId('toggle-addRecord-enabled')).toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         expect(screen.getByTestId('toggle-allowExport')).toBeInTheDocument();
     });
 
@@ -1619,7 +1670,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        expect(screen.getByText('console.objectView.pageConfigHint')).toBeInTheDocument();
+        expect(screen.getByText('console.objectView.generalHint')).toBeInTheDocument();
         expect(screen.getByText('console.objectView.listConfigHint')).toBeInTheDocument();
     });
 
@@ -1673,6 +1724,7 @@ describe('ViewConfigPanel', () => {
         expect(onViewUpdate).toHaveBeenCalledWith('addRecordViaForm', true);
 
         // Toggle allowExport on (starts unchecked by default)
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         fireEvent.click(screen.getByTestId('toggle-allowExport'));
         expect(onViewUpdate).toHaveBeenCalledWith('allowExport', true);
     });
@@ -1719,6 +1771,7 @@ describe('ViewConfigPanel', () => {
         );
 
         // allowExport toggle should be unchecked (false) when allowExport is undefined
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         const exportSwitch = screen.getByTestId('toggle-allowExport');
         expect(exportSwitch).toHaveAttribute('aria-checked', 'false');
     });
@@ -1880,6 +1933,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         expect(screen.getByTestId('export-formats')).toBeInTheDocument();
         expect(screen.getByTestId('input-export-maxRecords')).toBeInTheDocument();
         expect(screen.getByTestId('toggle-export-includeHeaders')).toBeInTheDocument();
@@ -1896,6 +1950,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         expect(screen.getByTestId('toggle-showRecordCount')).toBeInTheDocument();
     });
 
@@ -1909,6 +1964,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         expect(screen.getByTestId('toggle-allowPrinting')).toBeInTheDocument();
     });
 
@@ -2383,6 +2439,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         fireEvent.click(screen.getByTestId('toggle-showRecordCount'));
         expect(onViewUpdate).toHaveBeenCalledWith('showRecordCount', true);
     });
@@ -2399,6 +2456,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-exportPrint'));
         fireEvent.click(screen.getByTestId('toggle-allowPrinting'));
         expect(onViewUpdate).toHaveBeenCalledWith('allowPrinting', true);
     });