feat: replace clickable rows with inline FilterBuilder, SortBuilder, and column checkboxes in ViewConfigPanel

Copilot · hotlong · Copilot · commit 64c532b2c897 · 2026-02-21T04:39:54.000Z
- Integrate FilterBuilder for inline filter editing (with data bridge to flat filter array)
- Integrate SortBuilder for inline sort editing (with data bridge to SortItem[])
- Add column selector with Checkbox for each objectDef field
- Use crypto.randomUUID() for stable fallback IDs
- Update tests: mock FilterBuilder/SortBuilder/Checkbox, add tests for inline editing

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/apps/console/src/__tests__/ViewConfigPanel.test.tsx b/apps/console/src/__tests__/ViewConfigPanel.test.tsx
@@ -43,6 +43,42 @@ vi.mock('@object-ui/components', () => ({
             {...props}
         />
     ),
+    Checkbox: ({ checked, onCheckedChange, ...props }: any) => (
+        <input
+            type="checkbox"
+            checked={!!checked}
+            onChange={() => onCheckedChange?.(!checked)}
+            {...props}
+        />
+    ),
+    FilterBuilder: ({ fields, value, onChange, ...props }: any) => {
+        let counter = 0;
+        return (
+        <div data-testid="mock-filter-builder" data-field-count={fields?.length || 0} data-condition-count={value?.conditions?.length || 0}>
+            <button data-testid="filter-builder-add" onClick={() => {
+                const newConditions = [...(value?.conditions || []), { id: `mock-filter-${Date.now()}-${++counter}`, field: fields?.[0]?.value || '', operator: 'equals', value: '' }];
+                onChange?.({ ...value, conditions: newConditions });
+            }}>Add filter</button>
+            {value?.conditions?.map((c: any, i: number) => (
+                <span key={c.id || i} data-testid={`filter-condition-${i}`}>{c.field} {c.operator} {String(c.value)}</span>
+            ))}
+        </div>
+        );
+    },
+    SortBuilder: ({ fields, value, onChange, ...props }: any) => {
+        let counter = 0;
+        return (
+        <div data-testid="mock-sort-builder" data-field-count={fields?.length || 0} data-sort-count={value?.length || 0}>
+            <button data-testid="sort-builder-add" onClick={() => {
+                const newItems = [...(value || []), { id: `mock-sort-${Date.now()}-${++counter}`, field: fields?.[0]?.value || '', order: 'asc' }];
+                onChange?.(newItems);
+            }}>Add sort</button>
+            {value?.map((s: any, i: number) => (
+                <span key={s.id || i} data-testid={`sort-item-${i}`}>{s.field} {s.order}</span>
+            ))}
+        </div>
+        );
+    },
 }));
 
 const mockActiveView = {
@@ -140,7 +176,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByText('console.objectView.noDescription')).toBeInTheDocument();
     });
 
-    it('displays column count', () => {
+    it('displays column checkboxes for each field', () => {
         render(
             <ViewConfigPanel
                 open={true}
@@ -150,8 +186,15 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        // 3 columns configured
-        expect(screen.getByText('console.objectView.columnsConfigured'.replace('{{count}}', '3'))).toBeInTheDocument();
+        // 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();
     });
 
     it('displays object source name', () => {
@@ -225,7 +268,7 @@ describe('ViewConfigPanel', () => {
         expect(screen.getByTestId('view-type-select')).toHaveValue('kanban');
     });
 
-    it('shows "None" for empty filters and columns', () => {
+    it('shows inline builders with zero items for empty view', () => {
         render(
             <ViewConfigPanel
                 open={true}
@@ -235,9 +278,10 @@ describe('ViewConfigPanel', () => {
             />
         );
 
-        // Should show "None" for columns, filters
-        const noneTexts = screen.getAllByText('console.objectView.none');
-        expect(noneTexts.length).toBeGreaterThanOrEqual(2);
+        // FilterBuilder should have 0 conditions
+        expect(screen.getByTestId('mock-filter-builder')).toHaveAttribute('data-condition-count', '0');
+        // SortBuilder should have 0 items
+        expect(screen.getByTestId('mock-sort-builder')).toHaveAttribute('data-sort-count', '0');
     });
 
     it('has correct ARIA attributes when open', () => {
@@ -403,62 +447,85 @@ describe('ViewConfigPanel', () => {
         expect(onViewUpdate).toHaveBeenCalledWith('type', 'kanban');
     });
 
-    it('calls onOpenEditor when clicking columns row', () => {
-        const onOpenEditor = vi.fn();
+    it('renders inline FilterBuilder with correct conditions from activeView', () => {
         render(
             <ViewConfigPanel
                 open={true}
                 onClose={vi.fn()}
                 activeView={mockActiveView}
                 objectDef={mockObjectDef}
-                onOpenEditor={onOpenEditor}
             />
         );
 
-        // Click the columns row — it's a button with the columns label
-        const columnsRow = screen.getByText('console.objectView.columns').closest('button');
-        expect(columnsRow).toBeTruthy();
-        fireEvent.click(columnsRow!);
-
-        expect(onOpenEditor).toHaveBeenCalledWith('columns');
+        const fb = screen.getByTestId('mock-filter-builder');
+        expect(fb).toHaveAttribute('data-condition-count', '1');
+        expect(fb).toHaveAttribute('data-field-count', '3');
+        expect(screen.getByTestId('filter-condition-0')).toHaveTextContent('stage = active');
     });
 
-    it('calls onOpenEditor when clicking filters row', () => {
-        const onOpenEditor = vi.fn();
+    it('renders inline SortBuilder with correct items from activeView', () => {
         render(
             <ViewConfigPanel
                 open={true}
                 onClose={vi.fn()}
                 activeView={mockActiveView}
                 objectDef={mockObjectDef}
-                onOpenEditor={onOpenEditor}
             />
         );
 
-        const filterRow = screen.getByText('console.objectView.filterBy').closest('button');
-        expect(filterRow).toBeTruthy();
-        fireEvent.click(filterRow!);
+        const sb = screen.getByTestId('mock-sort-builder');
+        expect(sb).toHaveAttribute('data-sort-count', '1');
+        expect(sb).toHaveAttribute('data-field-count', '3');
+        expect(screen.getByTestId('sort-item-0')).toHaveTextContent('name asc');
+    });
 
-        expect(onOpenEditor).toHaveBeenCalledWith('filters');
+    it('updates draft when adding a filter via FilterBuilder', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={{ id: 'empty', label: 'Empty', type: 'grid' }}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
+
+        fireEvent.click(screen.getByTestId('filter-builder-add'));
+        expect(onViewUpdate).toHaveBeenCalledWith('filter', expect.any(Array));
     });
 
-    it('calls onOpenEditor when clicking sort row', () => {
-        const onOpenEditor = vi.fn();
+    it('updates draft when adding a sort via SortBuilder', () => {
+        const onViewUpdate = vi.fn();
         render(
             <ViewConfigPanel
                 open={true}
                 onClose={vi.fn()}
-                activeView={mockActiveView}
+                activeView={{ id: 'empty', label: 'Empty', type: 'grid' }}
                 objectDef={mockObjectDef}
-                onOpenEditor={onOpenEditor}
+                onViewUpdate={onViewUpdate}
             />
         );
 
-        const sortRow = screen.getByText('console.objectView.sortBy').closest('button');
-        expect(sortRow).toBeTruthy();
-        fireEvent.click(sortRow!);
+        fireEvent.click(screen.getByTestId('sort-builder-add'));
+        expect(onViewUpdate).toHaveBeenCalledWith('sort', expect.any(Array));
+    });
+
+    it('toggles column checkbox and calls onViewUpdate with updated columns', () => {
+        const onViewUpdate = vi.fn();
+        render(
+            <ViewConfigPanel
+                open={true}
+                onClose={vi.fn()}
+                activeView={mockActiveView}
+                objectDef={mockObjectDef}
+                onViewUpdate={onViewUpdate}
+            />
+        );
 
-        expect(onOpenEditor).toHaveBeenCalledWith('sort');
+        // Uncheck the 'stage' column
+        fireEvent.click(screen.getByTestId('col-checkbox-stage'));
+        expect(onViewUpdate).toHaveBeenCalledWith('columns', ['name', 'amount']);
     });
 
     it('saves draft via onSave when Save button is clicked', () => {
diff --git a/apps/console/src/components/ViewConfigPanel.tsx b/apps/console/src/components/ViewConfigPanel.tsx
@@ -13,8 +13,9 @@
  */
 
 import { useMemo, useEffect, useRef, useState, useCallback } from 'react';
-import { Button, Switch, Input } from '@object-ui/components';
-import { X, ChevronRight, Save, RotateCcw } from 'lucide-react';
+import { Button, Switch, Input, Checkbox, FilterBuilder, SortBuilder } from '@object-ui/components';
+import type { FilterGroup, SortItem } from '@object-ui/components';
+import { X, Save, RotateCcw } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
 
 /** View type labels for display */
@@ -147,9 +148,6 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef, onViewUp
 
     const viewLabel = draft.label || draft.id || activeView.id;
     const viewType = draft.type || 'grid';
-    const columnCount = draft.columns?.length || 0;
-    const filterCount = Array.isArray(draft.filter) ? draft.filter.length : 0;
-    const sortCount = Array.isArray(draft.sort) ? draft.sort.length : 0;
 
     const hasSearch = draft.showSearch !== false;
     const hasFilter = draft.showFilters !== false;
@@ -158,17 +156,69 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef, onViewUp
     const hasAddForm = draft.addRecordViaForm === true;
     const hasShowDescription = draft.showDescription !== false;
 
-    // Format filter summary
-    const filterSummary = useMemo(() => {
-        if (filterCount === 0) return t('console.objectView.none');
-        return `${filterCount} ${t('console.objectView.filterBy').toLowerCase()}`;
-    }, [filterCount, t]);
+    // Derive field options from objectDef for FilterBuilder/SortBuilder
+    const fieldOptions = useMemo(() => {
+        if (!objectDef.fields) return [];
+        return Object.entries(objectDef.fields).map(([key, field]: [string, any]) => ({
+            value: key,
+            label: field.label || key,
+            type: field.type || 'text',
+            options: field.options,
+        }));
+    }, [objectDef.fields]);
 
-    // Format sort summary
-    const sortSummary = useMemo(() => {
-        if (sortCount === 0) return t('console.objectView.none');
-        return draft.sort?.map((s: any) => `${s.field} ${s.order || s.direction || 'asc'}`).join(', ') || t('console.objectView.none');
-    }, [draft.sort, sortCount, t]);
+    // Bridge: view filter array → FilterGroup
+    const filterGroupValue = useMemo<FilterGroup>(() => {
+        const conditions = (Array.isArray(draft.filter) ? draft.filter : []).map((f: any) => ({
+            id: f.id || crypto.randomUUID(),
+            field: f.field || '',
+            operator: f.operator || 'equals',
+            value: f.value ?? '',
+        }));
+        return { id: 'root', logic: 'and' as const, conditions };
+    }, [draft.filter]);
+
+    // Bridge: view sort array → SortItem[]
+    const sortItemsValue = useMemo<SortItem[]>(() => {
+        return (Array.isArray(draft.sort) ? draft.sort : []).map((s: any) => ({
+            id: s.id || crypto.randomUUID(),
+            field: s.field || '',
+            order: (s.order || s.direction || 'asc') as 'asc' | 'desc',
+        }));
+    }, [draft.sort]);
+
+    /** Handle FilterBuilder changes → update draft.filter */
+    const handleFilterChange = useCallback((group: FilterGroup) => {
+        const filters = group.conditions.map(c => ({
+            id: c.id,
+            field: c.field,
+            operator: c.operator,
+            value: c.value,
+        }));
+        updateDraft('filter', filters);
+    }, [updateDraft]);
+
+    /** Handle SortBuilder changes → update draft.sort */
+    const handleSortChange = useCallback((items: SortItem[]) => {
+        const sortArr = items.map(s => ({
+            id: s.id,
+            field: s.field,
+            order: s.order,
+        }));
+        updateDraft('sort', sortArr);
+    }, [updateDraft]);
+
+    /** Handle column checkbox toggle */
+    const handleColumnToggle = useCallback((fieldName: string, checked: boolean) => {
+        const currentCols: string[] = Array.isArray(draft.columns) ? [...draft.columns] : [];
+        if (checked && !currentCols.includes(fieldName)) {
+            currentCols.push(fieldName);
+        } else if (!checked) {
+            const idx = currentCols.indexOf(fieldName);
+            if (idx >= 0) currentCols.splice(idx, 1);
+        }
+        updateDraft('columns', currentCols);
+    }, [draft.columns, updateDraft]);
 
     if (!open) return null;
 
@@ -219,26 +269,56 @@ export function ViewConfigPanel({ open, onClose, activeView, objectDef, onViewUp
 
                 {/* Data Section */}
                 <SectionHeader title={t('console.objectView.data')} />
-                <div className="space-y-0.5">
+                <div className="space-y-2">
                     <ConfigRow label={t('console.objectView.source')} value={objectDef.label || objectDef.name} />
-                    <ConfigRow label={t('console.objectView.columns')} onClick={() => onOpenEditor?.('columns')}>
-                        <span className="text-xs text-foreground flex items-center gap-1">
-                            {columnCount > 0 ? t('console.objectView.columnsConfigured', { count: columnCount }) : t('console.objectView.none')}
-                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                        </span>
-                    </ConfigRow>
-                    <ConfigRow label={t('console.objectView.filterBy')} onClick={() => onOpenEditor?.('filters')}>
-                        <span className="text-xs text-foreground flex items-center gap-1">
-                            {filterSummary}
-                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                        </span>
-                    </ConfigRow>
-                    <ConfigRow label={t('console.objectView.sortBy')} onClick={() => onOpenEditor?.('sort')}>
-                        <span className="text-xs text-foreground flex items-center gap-1 truncate max-w-[140px]">
-                            {sortSummary}
-                            <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
-                        </span>
-                    </ConfigRow>
+
+                    {/* Columns — inline checkbox list */}
+                    <div className="pt-1">
+                        <span className="text-xs text-muted-foreground">{t('console.objectView.columns')}</span>
+                        <div data-testid="column-selector" className="mt-1 space-y-1 max-h-36 overflow-auto">
+                            {fieldOptions.map((f) => {
+                                const checked = Array.isArray(draft.columns) ? draft.columns.includes(f.value) : false;
+                                return (
+                                    <label key={f.value} className="flex items-center gap-2 text-xs cursor-pointer hover:bg-accent/50 rounded-sm py-0.5 px-1 -mx-1">
+                                        <Checkbox
+                                            data-testid={`col-checkbox-${f.value}`}
+                                            checked={checked}
+                                            onCheckedChange={(c: boolean) => handleColumnToggle(f.value, c)}
+                                            className="h-3.5 w-3.5"
+                                        />
+                                        <span className="truncate">{f.label}</span>
+                                    </label>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Filters — inline FilterBuilder */}
+                    <div className="pt-1">
+                        <span className="text-xs text-muted-foreground">{t('console.objectView.filterBy')}</span>
+                        <div data-testid="inline-filter-builder" className="mt-1">
+                            <FilterBuilder
+                                fields={fieldOptions}
+                                value={filterGroupValue}
+                                onChange={handleFilterChange}
+                                className="[&_button]:h-7 [&_button]:text-xs [&_input]:h-7 [&_input]:text-xs"
+                                showClearAll
+                            />
+                        </div>
+                    </div>
+
+                    {/* Sort — inline SortBuilder */}
+                    <div className="pt-1">
+                        <span className="text-xs text-muted-foreground">{t('console.objectView.sortBy')}</span>
+                        <div data-testid="inline-sort-builder" className="mt-1">
+                            <SortBuilder
+                                fields={fieldOptions.map(f => ({ value: f.value, label: f.label }))}
+                                value={sortItemsValue}
+                                onChange={handleSortChange}
+                                className="[&_button]:h-7 [&_button]:text-xs"
+                            />
+                        </div>
+                    </div>
                 </div>
 
                 {/* Appearance Section */}
