Merge pull request #799 from objectstack-ai/copilot/add-listview-tab-bar

hotlong · web-flow · commit bb108b84ebb5 · 2026-02-23T22:07:11.000+08:00
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -715,6 +715,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] Column `summary`: `summary` property added to ListViewSchema column type. Bridge passes through for aggregation rendering. ObjectGrid renders summary footer with count/sum/avg/min/max aggregations via `useColumnSummary` hook. Zod schema updated with `summary` field.
 - [x] Column `link`: ObjectGrid renders click-to-navigate buttons on link-type columns with `navigation.handleClick`. Primary field auto-linked.
 - [x] Column `action`: ObjectGrid renders action dispatch buttons via `executeAction` on action-type columns.
+- [x] `tabs` (ViewTabSchema): TabBar component renders view tabs above the ListView toolbar. Supports icon (Lucide), pinned (always visible), isDefault (auto-selected), visible filtering, order sorting, and active tab state. Tab switch applies filter config. Extracted as reusable `TabBar` component in `packages/plugin-list/src/components/TabBar.tsx`. i18n keys added for all 10 locales.
 
 **P2 — Advanced Features:**
 - [x] `rowActions`: Row-level dropdown action menu per row in ObjectGrid. `schema.rowActions` string array items rendered as dropdown menu items, dispatched via `executeAction`.
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
@@ -344,6 +344,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
             virtualScroll: viewDef.virtualScroll ?? listSchema.virtualScroll,
             emptyState: viewDef.emptyState ?? listSchema.emptyState,
             aria: viewDef.aria ?? listSchema.aria,
+            tabs: listSchema.tabs,
             // Propagate filter/sort as default filters/sort for data flow
             ...(viewDef.filter?.length ? { filters: viewDef.filter } : {}),
             ...(viewDef.sort?.length ? { sort: viewDef.sort } : {}),
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
@@ -102,6 +102,8 @@ const ar = {
     recordCount: '{{count}} سجلات',
     recordCountOne: '{{count}} سجل',
     addRecord: 'إضافة سجل',
+    tabs: 'علامات التبويب',
+    allRecords: 'جميع السجلات',
   },
   kanban: {
     addCard: 'إضافة بطاقة',
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
@@ -101,6 +101,8 @@ const de = {
     recordCount: '{{count}} Datensätze',
     recordCountOne: '{{count}} Datensatz',
     addRecord: 'Datensatz hinzufügen',
+    tabs: 'Tabs',
+    allRecords: 'Alle Datensätze',
   },
   kanban: {
     addCard: 'Karte hinzufügen',
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
@@ -101,6 +101,8 @@ const en = {
     recordCount: '{{count}} records',
     recordCountOne: '{{count}} record',
     addRecord: 'Add record',
+    tabs: 'Tabs',
+    allRecords: 'All Records',
   },
   kanban: {
     addCard: 'Add card',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
@@ -101,6 +101,8 @@ const es = {
     recordCount: '{{count}} registros',
     recordCountOne: '{{count}} registro',
     addRecord: 'Agregar registro',
+    tabs: 'Pestañas',
+    allRecords: 'Todos los registros',
   },
   kanban: {
     addCard: 'Añadir tarjeta',
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
@@ -101,6 +101,8 @@ const fr = {
     recordCount: '{{count}} enregistrements',
     recordCountOne: '{{count}} enregistrement',
     addRecord: 'Ajouter un enregistrement',
+    tabs: 'Onglets',
+    allRecords: 'Tous les enregistrements',
   },
   kanban: {
     addCard: 'Ajouter une carte',
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
@@ -101,6 +101,8 @@ const ja = {
     recordCount: '{{count}} 件のレコード',
     recordCountOne: '{{count}} 件のレコード',
     addRecord: 'レコードを追加',
+    tabs: 'タブ',
+    allRecords: 'すべてのレコード',
   },
   kanban: {
     addCard: 'カードを追加',
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
@@ -101,6 +101,8 @@ const ko = {
     recordCount: '{{count}}개 레코드',
     recordCountOne: '{{count}}개 레코드',
     addRecord: '레코드 추가',
+    tabs: '탭',
+    allRecords: '전체 레코드',
   },
   kanban: {
     addCard: '카드 추가',
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
@@ -101,6 +101,8 @@ const pt = {
     recordCount: '{{count}} registros',
     recordCountOne: '{{count}} registro',
     addRecord: 'Adicionar registro',
+    tabs: 'Abas',
+    allRecords: 'Todos os registros',
   },
   kanban: {
     addCard: 'Adicionar cartão',
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
@@ -101,6 +101,8 @@ const ru = {
     recordCount: '{{count}} записей',
     recordCountOne: '{{count}} запись',
     addRecord: 'Добавить запись',
+    tabs: 'Вкладки',
+    allRecords: 'Все записи',
   },
   kanban: {
     addCard: 'Добавить карточку',
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
@@ -101,6 +101,8 @@ const zh = {
     recordCount: '{{count}} 条记录',
     recordCountOne: '{{count}} 条记录',
     addRecord: '添加记录',
+    tabs: '标签页',
+    allRecords: '全部记录',
   },
   kanban: {
     addCard: '添加卡片',
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
@@ -12,6 +12,8 @@ import type { SortItem } from '@object-ui/components';
 import { Search, SlidersHorizontal, ArrowUpDown, X, EyeOff, Group, Paintbrush, Ruler, Inbox, Download, AlignJustify, Share2, Printer, Plus, icons, type LucideIcon } from 'lucide-react';
 import type { FilterGroup } from '@object-ui/components';
 import { ViewSwitcher, ViewType } from './ViewSwitcher';
+import { TabBar } from './components/TabBar';
+import type { ViewTab } from './components/TabBar';
 import { UserFilters } from './UserFilters';
 import { SchemaRenderer, useNavigationOverlay } from '@object-ui/react';
 import { useDensityMode } from '@object-ui/react';
@@ -203,6 +205,8 @@ const LIST_DEFAULT_TRANSLATIONS: Record<string, string> = {
   'list.refreshing': 'Refreshing…',
   'list.dataLimitReached': 'Showing first {{limit}} records. More data may be available.',
   'list.addRecord': 'Add record',
+  'list.tabs': 'Tabs',
+  'list.allRecords': 'All Records',
 };
 
 /**
@@ -317,6 +321,34 @@ export const ListView: React.FC<ListViewProps> = ({
     conditions: []
   });
 
+  // Tab State
+  const [activeTab, setActiveTab] = React.useState<string | undefined>(() => {
+    if (!schema.tabs || schema.tabs.length === 0) return undefined;
+    const defaultTab = schema.tabs.find(t => t.isDefault);
+    return defaultTab?.name ?? schema.tabs[0]?.name;
+  });
+
+  const handleTabChange = React.useCallback(
+    (tab: ViewTab) => {
+      setActiveTab(tab.name);
+      // Apply tab filter if defined
+      if (tab.filter) {
+        const tabFilters: FilterGroup = {
+          id: `tab-filter-${tab.name}`,
+          logic: tab.filter.logic || 'and',
+          conditions: tab.filter.conditions || [],
+        };
+        setCurrentFilters(tabFilters);
+        onFilterChange?.(tabFilters);
+      } else {
+        const emptyFilters: FilterGroup = { id: 'root', logic: 'and', conditions: [] };
+        setCurrentFilters(emptyFilters);
+        onFilterChange?.(emptyFilters);
+      }
+    },
+    [onFilterChange],
+  );
+
   // Data State
   const dataSource = props.dataSource;
   const [data, setData] = React.useState<any[]>([]);
@@ -965,31 +997,11 @@ export const ListView: React.FC<ListViewProps> = ({
 
       {/* View Tabs */}
       {schema.tabs && schema.tabs.length > 0 && (
-        <div className="border-b px-2 sm:px-4 py-1 flex items-center gap-1 bg-background" data-testid="view-tabs">
-          {schema.tabs
-            // Spec defines visible as string (expression), but also handle boolean false for convenience
-            .filter(tab => tab.visible !== 'false' && tab.visible !== (false as any))
-            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-            .map(tab => {
-              const TabIcon: LucideIcon | null = tab.icon
-                ? ((icons as Record<string, LucideIcon>)[
-                    tab.icon.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('')
-                  ] ?? null)
-                : null;
-              return (
-                <Button
-                  key={tab.name}
-                  variant={tab.isDefault ? 'default' : 'ghost'}
-                  size="sm"
-                  className="h-7 px-3 text-xs"
-                  data-testid={`view-tab-${tab.name}`}
-                >
-                  {TabIcon && <TabIcon className="h-3 w-3 mr-1.5" />}
-                  {tab.label}
-                </Button>
-              );
-            })}
-        </div>
+        <TabBar
+          tabs={schema.tabs}
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+        />
       )}
 
       {/* View Description */}
diff --git a/packages/plugin-list/src/__tests__/TabBar.test.tsx b/packages/plugin-list/src/__tests__/TabBar.test.tsx
@@ -0,0 +1,199 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TabBar } from '../components/TabBar';
+import type { ViewTab } from '../components/TabBar';
+
+describe('TabBar', () => {
+  const baseTabs: ViewTab[] = [
+    { name: 'all', label: 'All Records', isDefault: true },
+    { name: 'active', label: 'Active' },
+    { name: 'archived', label: 'Archived' },
+  ];
+
+  it('should render tab bar with tabs', () => {
+    render(<TabBar tabs={baseTabs} />);
+    expect(screen.getByTestId('view-tabs')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-all')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-active')).toBeInTheDocument();
+    expect(screen.getByTestId('view-tab-archived')).toBeInTheDocument();
+  });
+
+  it('should render tab labels', () => {
+    render(<TabBar tabs={baseTabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(screen.getByText('Archived')).toBeInTheDocument();
+  });
+
+  it('should not render when tabs array is empty', () => {
+    const { container } = render(<TabBar tabs={[]} />);
+    expect(container.innerHTML).toBe('');
+    expect(screen.queryByTestId('view-tabs')).not.toBeInTheDocument();
+  });
+
+  // isDefault tab should be selected by default
+  it('should select isDefault tab initially', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const defaultTab = screen.getByTestId('view-tab-all');
+    expect(defaultTab).toHaveAttribute('aria-selected', 'true');
+    const otherTab = screen.getByTestId('view-tab-active');
+    expect(otherTab).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should select first tab when no isDefault is set', () => {
+    const tabs: ViewTab[] = [
+      { name: 'alpha', label: 'Alpha' },
+      { name: 'beta', label: 'Beta' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByTestId('view-tab-alpha')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-beta')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  // Tab click changes active tab
+  it('should switch active tab on click', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const activeTab = screen.getByTestId('view-tab-active');
+    fireEvent.click(activeTab);
+    expect(activeTab).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-all')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should call onTabChange callback on click', () => {
+    const onTabChange = vi.fn();
+    render(<TabBar tabs={baseTabs} onTabChange={onTabChange} />);
+    fireEvent.click(screen.getByTestId('view-tab-active'));
+    expect(onTabChange).toHaveBeenCalledTimes(1);
+    expect(onTabChange).toHaveBeenCalledWith(expect.objectContaining({ name: 'active', label: 'Active' }));
+  });
+
+  // Pinned tabs always visible
+  it('should always show pinned tabs even if visible is false', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All', isDefault: true },
+      { name: 'pinned-tab', label: 'Pinned', pinned: true, visible: 'false' },
+      { name: 'hidden', label: 'Hidden', visible: 'false' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByTestId('view-tab-pinned-tab')).toBeInTheDocument();
+    expect(screen.queryByTestId('view-tab-hidden')).not.toBeInTheDocument();
+  });
+
+  // Hidden tabs filtered out
+  it('should filter out hidden tabs (visible: "false")', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All Records' },
+      { name: 'hidden', label: 'Hidden Tab', visible: 'false' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.queryByText('Hidden Tab')).not.toBeInTheDocument();
+  });
+
+  it('should filter out tabs with visible: boolean false', () => {
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All Records' },
+      { name: 'hidden', label: 'Hidden Tab', visible: false as any },
+    ];
+    render(<TabBar tabs={tabs} />);
+    expect(screen.getByText('All Records')).toBeInTheDocument();
+    expect(screen.queryByText('Hidden Tab')).not.toBeInTheDocument();
+  });
+
+  // Order sorting
+  it('should sort tabs by order property', () => {
+    const tabs: ViewTab[] = [
+      { name: 'c', label: 'Third', order: 3 },
+      { name: 'a', label: 'First', order: 1 },
+      { name: 'b', label: 'Second', order: 2 },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tabContainer = screen.getByTestId('view-tabs');
+    const buttons = tabContainer.querySelectorAll('button');
+    expect(buttons[0]).toHaveTextContent('First');
+    expect(buttons[1]).toHaveTextContent('Second');
+    expect(buttons[2]).toHaveTextContent('Third');
+  });
+
+  // Icon rendering
+  it('should render Lucide icon when icon prop is provided', () => {
+    const tabs: ViewTab[] = [
+      { name: 'starred', label: 'Starred', icon: 'star' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-starred');
+    // Lucide icons render as SVG elements
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('should handle kebab-case icon names', () => {
+    const tabs: ViewTab[] = [
+      { name: 'test', label: 'Test', icon: 'arrow-right' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-test');
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('should not render icon when icon is not provided', () => {
+    const tabs: ViewTab[] = [
+      { name: 'noicon', label: 'No Icon' },
+    ];
+    render(<TabBar tabs={tabs} />);
+    const tab = screen.getByTestId('view-tab-noicon');
+    const svg = tab.querySelector('svg');
+    expect(svg).toBeFalsy();
+  });
+
+  // Controlled activeTab
+  it('should respect controlled activeTab prop', () => {
+    render(<TabBar tabs={baseTabs} activeTab="archived" />);
+    expect(screen.getByTestId('view-tab-archived')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('view-tab-all')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  // Tab role attributes
+  it('should have proper ARIA attributes', () => {
+    render(<TabBar tabs={baseTabs} />);
+    const tabBar = screen.getByTestId('view-tabs');
+    expect(tabBar).toHaveAttribute('role', 'tablist');
+    const tab = screen.getByTestId('view-tab-all');
+    expect(tab).toHaveAttribute('role', 'tab');
+  });
+
+  // Tab with filter config
+  it('should pass tab with filter to onTabChange', () => {
+    const onTabChange = vi.fn();
+    const tabs: ViewTab[] = [
+      { name: 'all', label: 'All', isDefault: true },
+      {
+        name: 'active',
+        label: 'Active',
+        filter: { logic: 'and', conditions: [{ field: 'status', operator: 'eq', value: 'active' }] },
+      },
+    ];
+    render(<TabBar tabs={tabs} onTabChange={onTabChange} />);
+    fireEvent.click(screen.getByTestId('view-tab-active'));
+    expect(onTabChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'active',
+        filter: expect.objectContaining({
+          logic: 'and',
+          conditions: expect.arrayContaining([
+            expect.objectContaining({ field: 'status' }),
+          ]),
+        }),
+      }),
+    );
+  });
+});
diff --git a/packages/plugin-list/src/components/TabBar.tsx b/packages/plugin-list/src/components/TabBar.tsx
diff --git a/packages/plugin-list/src/index.tsx b/packages/plugin-list/src/index.tsx
diff --git a/packages/plugin-view/src/ObjectView.tsx b/packages/plugin-view/src/ObjectView.tsx
diff --git a/packages/plugin-view/src/__tests__/config-sync-integration.test.tsx b/packages/plugin-view/src/__tests__/config-sync-integration.test.tsx
