Remove breadcrumb, ViewTabBar, Add Filter button; restructure toolbar layout

Copilot · hotlong · Copilot · commit 881f3d4bc4fc · 2026-03-03T02:37:44.000Z
- Remove ObjectView breadcrumb (Opportunity &gt; All Opportunities)
- Remove ViewTabBar from ObjectView (view switching via config panel)
- Remove Add Filter button from UserFilters component
- Restructure ListView toolbar: UserFilters left, tool buttons right
- Update tests to match new UI

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/apps/console/src/__tests__/ObjectView.test.tsx b/apps/console/src/__tests__/ObjectView.test.tsx
@@ -167,14 +167,9 @@ describe('ObjectView Component', () => {
         
         render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
         
-        // Check Header (appears in breadcrumb and h1)
+        // Check Header (h1 only, breadcrumb removed)
         const headers = screen.getAllByText('Opportunity');
         expect(headers.length).toBeGreaterThanOrEqual(1);
-        
-        // Check Tabs exist (also appears in breadcrumb)
-        const allOppTexts = screen.getAllByText('All Opportunities');
-        expect(allOppTexts.length).toBeGreaterThanOrEqual(1);
-        expect(screen.getByText('Pipeline')).toBeInTheDocument();
 
         // Check Grid is rendered (default)
         expect(screen.getByTestId('object-grid')).toBeInTheDocument();
@@ -284,14 +279,14 @@ describe('ObjectView Component', () => {
         expect(screen.getByTestId('view-config-panel')).toBeInTheDocument();
     });
 
-    it('shows breadcrumb with object and view name', () => {
+    it('does not show breadcrumb in ObjectView (removed to avoid duplication with AppHeader)', () => {
         mockUseParams.mockReturnValue({ objectName: 'opportunity' });
         
         render(<ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />);
         
-        // Breadcrumb should show object label and active view label (may appear in tabs too)
-        const allOppTexts = screen.getAllByText('All Opportunities');
-        expect(allOppTexts.length).toBeGreaterThanOrEqual(2); // breadcrumb + tab
+        // Breadcrumb removed — "All Opportunities" should not appear in the header area
+        // The h1 title should still show the object label
+        expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Opportunity');
     });
 
     it('shows object description when present', () => {
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
@@ -14,14 +14,14 @@ import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 import { ObjectChart } from '@object-ui/plugin-charts';
 import { ListView } from '@object-ui/plugin-list';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
-import { ObjectView as PluginObjectView, ViewTabBar } from '@object-ui/plugin-view';
-import type { ViewTabItem, AvailableViewType } from '@object-ui/plugin-view';
+import { ObjectView as PluginObjectView } from '@object-ui/plugin-view';
+import type { AvailableViewType } from '@object-ui/plugin-view';
 // Import plugins for side-effects (registration)
 import '@object-ui/plugin-grid';
 import '@object-ui/plugin-kanban';
 import '@object-ui/plugin-calendar';
 import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
-import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3, ChevronRight } from 'lucide-react';
+import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
 import type { ListViewSchema, ViewNavigationConfig, FeedItem } from '@object-ui/types';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
@@ -697,12 +697,6 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                         <TableIcon className="h-4 w-4 text-primary" />
                     </div>
                     <div className="min-w-0">
-                        {/* Breadcrumb: Object > View */}
-                        <div className="flex items-center gap-1 text-xs text-muted-foreground mb-0.5">
-                            <span className="truncate">{objectLabel(objectDef)}</span>
-                            <ChevronRight className="h-3 w-3 shrink-0" />
-                            <span className="truncate font-medium text-foreground">{activeView?.label || t('console.objectView.allRecords')}</span>
-                        </div>
                         <h1 className="text-base sm:text-lg font-semibold tracking-tight text-foreground truncate">{objectLabel(objectDef)}</h1>
                         {objectDef.description && (
                             <p className="text-xs text-muted-foreground truncate hidden sm:block max-w-md">{objectDesc(objectDef)}</p>
@@ -763,56 +757,7 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                  </div>
              </div>
 
-             {/* View Tabs — Airtable-style named-view switcher with management UX */}
-             {views.length > 1 && (
-               <div className="border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0">
-                 <ViewTabBar
-                   views={views.map((view: { id: string; label: string; type: string; filter?: any[]; sort?: any[] }) => ({
-                     id: view.id,
-                     label: view.label,
-                     type: view.type,
-                     hasActiveFilters: Array.isArray((view as any).filter) && (view as any).filter.length > 0,
-                     hasActiveSort: Array.isArray((view as any).sort) && (view as any).sort.length > 0,
-                   } as ViewTabItem))}
-                   activeViewId={activeViewId}
-                   onViewChange={handleViewChange}
-                   viewTypeIcons={VIEW_TYPE_ICONS}
-                   config={{ ...objectDef.viewTabBar, reorderable: isAdmin ? true : objectDef.viewTabBar?.reorderable }}
-                   onAddView={isAdmin ? () => { setViewConfigPanelMode('create'); setShowViewConfigPanel(true); } : undefined}
-                   onRenameView={(id: any, newName: any) => {
-                     // Rename is wired for future backend integration
-                     console.info('[ViewTabBar] Rename view:', id, newName);
-                   }}
-                   onDuplicateView={(id: any) => {
-                     console.info('[ViewTabBar] Duplicate view:', id);
-                   }}
-                   onDeleteView={(id: any) => {
-                     console.info('[ViewTabBar] Delete view:', id);
-                   }}
-                   onSetDefaultView={(id: any) => {
-                     console.info('[ViewTabBar] Set default view:', id);
-                   }}
-                   onShareView={(id: any) => {
-                     console.info('[ViewTabBar] Share view:', id);
-                   }}
-                   onPinView={(id: any, pinned: any) => {
-                     console.info('[ViewTabBar] Pin view:', id, pinned);
-                   }}
-                   onReorderViews={(viewIds: any) => {
-                     console.info('[ViewTabBar] Reorder views:', viewIds);
-                   }}
-                   onChangeViewType={(id: any, newType: any) => {
-                     console.info('[ViewTabBar] Change view type:', id, newType);
-                   }}
-                   onConfigView={isAdmin ? (id: any) => {
-                     handleViewChange(id);
-                     setViewConfigPanelMode('edit');
-                     setShowViewConfigPanel(true);
-                   } : undefined}
-                   availableViewTypes={AVAILABLE_VIEW_TYPES}
-                 />
-               </div>
-             )}
+             {/* View Tabs removed — view switching is handled via ViewConfigPanel (right sidebar) */}
 
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
@@ -1071,12 +1071,11 @@ export const ListView: React.FC<ListViewProps> = ({
         </div>
       )}
 
-      {/* Airtable-style Toolbar — Merged: UserFilter badges (left) + Tool buttons (right) */}
+      {/* Airtable-style Toolbar — UserFilter badges (left) + Tool buttons (right) */}
       <div className="border-b px-2 sm:px-4 py-1 flex items-center justify-between gap-1 sm:gap-2 bg-background">
-        <div className="flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0">
+        <div className="flex items-center gap-0.5 overflow-x-auto min-w-0">
           {/* User Filters — inline in toolbar (Airtable Interfaces-style) */}
           {resolvedUserFilters && (
-            <>
               <div className="shrink-0 min-w-0" data-testid="user-filters">
                 <UserFilters
                   config={resolvedUserFilters}
@@ -1086,10 +1085,10 @@ export const ListView: React.FC<ListViewProps> = ({
                   maxVisible={3}
                 />
               </div>
-              <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
-            </>
           )}
+        </div>
 
+        <div className="flex items-center gap-0.5 shrink-0">
           {/* Hide Fields */}
           {toolbarFlags.showHideFields && (
           <Popover open={showHideFields} onOpenChange={setShowHideFields}>
@@ -1480,10 +1479,7 @@ export const ListView: React.FC<ListViewProps> = ({
               </PopoverContent>
             </Popover>
           )}
-        </div>
 
-        {/* Right: Add Record */}
-        <div className="flex items-center gap-1">
           {/* Add Record (top position) */}
           {toolbarFlags.showAddRecord && toolbarFlags.addRecordPosition === 'top' && (
             <Button
diff --git a/packages/plugin-list/src/UserFilters.tsx b/packages/plugin-list/src/UserFilters.tsx
@@ -303,14 +303,6 @@ function DropdownFilters({ fields, objectDef, data, onFilterChange, maxVisible,
           )}
         </>
       )}
-      <button
-        className="inline-flex items-center gap-1 h-7 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors shrink-0"
-        data-testid="user-filters-add"
-        title="Add filter"
-      >
-        <Plus className="h-3.5 w-3.5" />
-        <span className="hidden sm:inline">Add filter</span>
-      </button>
     </div>
   );
 }
diff --git a/packages/plugin-list/src/__tests__/ListView.test.tsx b/packages/plugin-list/src/__tests__/ListView.test.tsx
@@ -540,7 +540,7 @@ describe('ListView', () => {
       expect(screen.getByTestId('filter-badge-is_active')).toBeInTheDocument();
     });
 
-    it('should show Add filter button in userFilters', () => {
+    it('should not show Add filter button in userFilters (removed from UI)', () => {
       const schema: ListViewSchema = {
         type: 'list-view',
         objectName: 'contacts',
@@ -555,7 +555,7 @@ describe('ListView', () => {
       };
 
       renderWithProvider(<ListView schema={schema} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
+      expect(screen.queryByTestId('user-filters-add')).not.toBeInTheDocument();
     });
 
     it('should not render userFilters when objectDef has no filterable fields', async () => {
diff --git a/packages/plugin-list/src/__tests__/UserFilters.test.tsx b/packages/plugin-list/src/__tests__/UserFilters.test.tsx
@@ -369,10 +369,10 @@ describe('UserFilters', () => {
   });
 
   // ============================================
-  // Add Filter Entry Point
+  // Add Filter Entry Point (removed)
   // ============================================
   describe('Add filter entry', () => {
-    it('renders "Add filter" button in dropdown mode', () => {
+    it('does not render "Add filter" button (removed from UI)', () => {
       const config = {
         element: 'dropdown' as const,
         fields: [
@@ -387,15 +387,7 @@ describe('UserFilters', () => {
       };
       const onChange = vi.fn();
       render(<UserFilters config={config} onFilterChange={onChange} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
-      expect(screen.getByText('Add filter')).toBeInTheDocument();
-    });
-
-    it('renders "Add filter" button even when no fields are provided', () => {
-      const config = { element: 'dropdown' as const };
-      const onChange = vi.fn();
-      render(<UserFilters config={config} onFilterChange={onChange} />);
-      expect(screen.getByTestId('user-filters-add')).toBeInTheDocument();
+      expect(screen.queryByTestId('user-filters-add')).not.toBeInTheDocument();
     });
   });
 
