Remove breadcrumb and Add Filter button; simplify ViewTabBar to read-only; restructure toolbar layout by Copilot · Pull Request #981 · objectstack-ai/objectui

Copilot · 2026-03-03T02:32:50Z

Removes design-mode UI elements from the main content area that duplicate AppHeader functionality or belong in the right-side config panel. Restructures the toolbar to an Airtable Interfaces-style split layout.

ObjectView (`apps/console/src/components/ObjectView.tsx`)

Remove inline breadcrumb ("Opportunity > All Opportunities") — redundant with AppHeader global breadcrumb
Simplify ViewTabBar to read-only view switcher — tabs remain visible for switching between views, but design-mode features are removed: drag-to-reorder is disabled (config={{ reorderable: false }}), the "+" add view button is removed, and context menu actions (rename, duplicate, delete, set default, share, pin, reorder, change type) are removed. These features are now accessible only via ViewConfigPanel (right sidebar).
Clean up unused imports and constants (AVAILABLE_VIEW_TYPES, ChevronRight, etc.)

UserFilters (`packages/plugin-list/src/UserFilters.tsx`)

Remove + Add filter button from DropdownFilters mode. Tab mode's allowAddTab button is preserved (different feature).

ListView toolbar (`packages/plugin-list/src/ListView.tsx`)

Split toolbar into left/right regions: UserFilter chips on the left, tool buttons (filter, sort, group, search, export, etc.) on the right

Before: [UserFilters | HideFields | Filter | Sort | Group | ... | Search]  [AddRecord]
After:  [UserFilters]  [HideFields | Filter | Sort | Group | ... | Search | AddRecord]

Tests

Updated assertions in ObjectView.test.tsx, ViewSwitching.test.tsx, ListView.test.tsx, UserFilters.test.tsx to reflect the changes

Original prompt

This section details on the original issue you should resolve

<issue_title>移除画圈的视图设计功能（面包屑/顶部标签栏/过滤器按钮），将其迁移到右侧配置面板</issue_title>
<issue_description>### 需求背景
在"商机（Opportunities）"等对象列表页，部分设计及管理功能应只出现在右侧属性配置面板，而不是主界面顶部或工具栏。当前版本存在如下 UI 冗余（见下方截图）：

具体要求如下：

1. 移除不必要的面包屑显示

移除主内容区 ObjectView 内部的路径面包屑（如 "Opportunity > All Opportunities"），避免和顶部全局 AppHeader 面包屑重复。

只保留页面头部（AppHeader）里的统一面包屑导航。

2. 移除顶部的视图标签栏

UI 区块：视图拖动换位置，新增 + 应该作为"设计模式"下的配置功能，移除

3. 工具栏

去掉主工具栏上的 + Add Filter 按钮。

参考airtable interfaces，左侧过滤区块靠左，右侧的筛选排序分组搜索等按钮靠右</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes 移除画圈的视图设计功能（面包屑/顶部标签栏/过滤器按钮），将其迁移到右侧配置面板 #979

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2026-03-03T02:32:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Mar 3, 2026 3:33am
objectui-demo	Ready	Preview, Comment	Mar 3, 2026 3:33am
objectui-storybook	Ready	Preview, Comment	Mar 3, 2026 3:33am

… layout - Remove ObjectView breadcrumb (Opportunity > 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 <50353452+hotlong@users.noreply.github.com>

- Remove VIEW_TYPE_ICONS, AVAILABLE_VIEW_TYPES constants (unused after ViewTabBar removal) - Remove unused imports: ComponentType, AvailableViewType, icon imports - Fix ViewSwitching test to verify tabs are no longer rendered - Fix ObjectView tests that relied on breadcrumb for live preview verification Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

hotlong · 2026-03-03T03:15:12Z

@copilot ViewTabBar 还是需要显示，只是不需要拖动和新增功能

Per reviewer feedback, ViewTabBar should remain visible for view switching but without design-mode features (drag-to-reorder, +add, context menu actions). - config={{ reorderable: false }} disables drag - No onAddView, onRenameView, onDuplicateView, etc. callbacks - Restore VIEW_TYPE_ICONS and related imports - Update tests to verify tabs render without design features Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot · 2026-03-03T03:27:19Z

@copilot ViewTabBar 还是需要显示，只是不需要拖动和新增功能

Restored ViewTabBar as a read-only view switcher in b5b99b7. It now shows tabs for switching views but with config={{ reorderable: false }} and no onAddView/onRenameView/onDuplicateView/onDeleteView callbacks — so no drag, no "+", and no context menu design actions.

Copilot

Pull request overview

This PR removes design-mode UI affordances from the main ObjectView content area (breadcrumb, view management controls, and the “Add filter” entry point) and reshapes the ListView toolbar into a split left/right layout to match the intended design/config-panel-driven workflow.

Changes:

Remove the inline breadcrumb from Console ObjectView and simplify ViewTabBar to a read-only switcher.
Remove the “Add filter” button from UserFilters dropdown mode and update related tests.
Split the ListView toolbar into left (user filters) and right (tool buttons + add record) regions.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/console/src/components/ObjectView.tsx	Removes breadcrumb and strips ViewTabBar management handlers; sets tab bar to non-reorderable.
apps/console/src/tests/ObjectView.test.tsx	Updates test expectations to reflect breadcrumb removal and view tab changes.
apps/console/src/tests/ViewSwitching.test.tsx	Updates view tab rendering test wording for the simplified tab bar.
packages/plugin-list/src/UserFilters.tsx	Removes “Add filter” button from dropdown filters UI.
packages/plugin-list/src/ListView.tsx	Reworks toolbar layout into left/right regions and moves Add Record into right region.
packages/plugin-list/src/tests/UserFilters.test.tsx	Updates assertions for removed “Add filter” button.
packages/plugin-list/src/tests/ListView.test.tsx	Updates assertion to ensure “Add filter” button is not rendered.

Comments suppressed due to low confidence (1)

apps/console/src/components/ObjectView.tsx:752

ViewTabBar is fed from the base views array, so any draft edits (e.g. label changes coming from viewDraft/mergedViews) won't reflect in the tab labels during live preview. Consider using the merged view list (or merging the active draft into the tab items) so the tab bar reflects the same view state as PluginObjectView.

             {/* View Tabs — read-only view switcher (design features like drag/add are in ViewConfigPanel) */}
             {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[] }) => ({

Copilot · 2026-03-03T03:38:43Z

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

+    it('renders view tabs without drag or add features', () => {
        renderObjectView();

-        // "All Tasks" appears in breadcrumb and tab, so use getAllByText
+        // ViewTabBar should be present for switching views
        const allTasksElements = screen.getAllByText('All Tasks');


This test description says "without drag or add features", but it currently only asserts that tab labels render. Either add assertions that the management affordances are absent (e.g. view-tab-add / drag handles) or rename the test to match what it's actually verifying.

Copilot · 2026-03-03T03:38:44Z

apps/console/src/components/ObjectView.tsx

-                     setShowViewConfigPanel(true);
-                   } : undefined}
-                   availableViewTypes={AVAILABLE_VIEW_TYPES}
+                   config={{ reorderable: false }}


config={{ reorderable: false }} drops any other objectDef.viewTabBar settings (e.g. maxVisibleTabs, showIndicators, etc.) and leaves contextMenu enabled by default. Since no context-menu handlers are passed anymore, this can still wrap tabs in a context menu that opens with an empty menu. Consider merging the existing config while explicitly disabling design-mode affordances (e.g. contextMenu: false, inlineRename: false, showAddButton: false, reorderable: false).

Suggested change

config={{ reorderable: false }}

config={{

...(objectDef as any).viewTabBar,

contextMenu: false,

inlineRename: false,

showAddButton: false,

reorderable: false,

}}

Copilot · 2026-03-03T03:38:44Z

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

-        // 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


This test name/intent says the breadcrumb was removed, but the assertion only checks that the H1 still renders; it doesn't actually verify the breadcrumb is absent. Add an explicit negative assertion (e.g. only one occurrence of the active view label, or absence of a breadcrumb-specific element) so the test will fail if the breadcrumb UI regresses.

Suggested change

// Breadcrumb removed — "All Opportunities" should not appear in the header area

// Breadcrumb removed — "All Opportunities" should not appear in the header area

expect(screen.queryByText('All Opportunities')).not.toBeInTheDocument();

Copilot · 2026-03-03T03:38:44Z

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

+        // The label change propagates via mergedViews (live preview)
        await vi.waitFor(() => {
-            const breadcrumbItems = screen.getAllByText('Live Preview Test');
-            expect(breadcrumbItems.length).toBeGreaterThanOrEqual(1);
+            expect(titleInput).toHaveValue('Live Preview Test');
        });


The test title suggests it's validating mergedViews/live preview propagation, but the assertion only checks the input value changed (which doesn't exercise anything outside the config panel). To make this meaningful, assert a downstream effect of the draft label (e.g. the active tab label in ViewTabBar updates, or PluginObjectView receives the updated view label).

Initial plan

ae5d020

Copilot AI assigned Copilot and hotlong Mar 3, 2026

Copilot started work on behalf of hotlong March 3, 2026 02:32 View session

vercel bot deployed to Preview – objectui-demo March 3, 2026 02:34 View deployment

vercel bot had a problem deploying to Preview – objectui-demo March 3, 2026 02:38 Failure

vercel bot deployed to Preview – objectui-demo March 3, 2026 02:53 View deployment

Copilot AI changed the title ~~[WIP] Remove view design features and migrate to configuration panel~~ Remove breadcrumb, ViewTabBar, and Add Filter button; restructure toolbar layout Mar 3, 2026

Copilot finished work on behalf of hotlong March 3, 2026 02:55

Copilot started work on behalf of hotlong March 3, 2026 03:15 View session

vercel bot deployed to Preview – objectui-demo March 3, 2026 03:25 View deployment

Copilot AI changed the title ~~Remove breadcrumb, ViewTabBar, and Add Filter button; restructure toolbar layout~~ Remove breadcrumb and Add Filter button; simplify ViewTabBar to read-only; restructure toolbar layout Mar 3, 2026

Copilot finished work on behalf of hotlong March 3, 2026 03:28

vercel bot deployed to Preview – objectui March 3, 2026 03:32 View deployment

hotlong marked this pull request as ready for review March 3, 2026 03:33

Copilot AI review requested due to automatic review settings March 3, 2026 03:33

vercel bot deployed to Preview – objectui-storybook March 3, 2026 03:33 View deployment

Copilot started reviewing on behalf of hotlong March 3, 2026 03:33 View session

hotlong merged commit 4efcea7 into main Mar 3, 2026
6 checks passed

Copilot AI reviewed Mar 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove breadcrumb and Add Filter button; simplify ViewTabBar to read-only; restructure toolbar layout#981

Remove breadcrumb and Add Filter button; simplify ViewTabBar to read-only; restructure toolbar layout#981
hotlong merged 4 commits intomainfrom
copilot/remove-ui-elements-to-panel

Copilot AI commented Mar 3, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

hotlong commented Mar 3, 2026

Uh oh!

Copilot AI commented Mar 3, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Copilot AI Mar 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-                   config={{ reorderable: false }}
+                   config={{
+                     ...(objectDef as any).viewTabBar,
+                     contextMenu: false,
+                     inlineRename: false,
+                     showAddButton: false,
+                     reorderable: false,
+                   }}

	// Breadcrumb removed — "All Opportunities" should not appear in the header area
	// Breadcrumb removed — "All Opportunities" should not appear in the header area
	expect(screen.queryByText('All Opportunities')).not.toBeInTheDocument();

Conversation

Copilot AI commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ObjectView (apps/console/src/components/ObjectView.tsx)

UserFilters (packages/plugin-list/src/UserFilters.tsx)

ListView toolbar (packages/plugin-list/src/ListView.tsx)

Tests

1. 移除不必要的面包屑显示

2. 移除顶部的视图标签栏

3. 工具栏

Comments on the Issue (you are @copilot in this section)

Uh oh!

vercel bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hotlong commented Mar 3, 2026

Uh oh!

Copilot AI commented Mar 3, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 3, 2026 •

edited

Loading

ObjectView (`apps/console/src/components/ObjectView.tsx`)

UserFilters (`packages/plugin-list/src/UserFilters.tsx`)

ListView toolbar (`packages/plugin-list/src/ListView.tsx`)

vercel bot commented Mar 3, 2026 •

edited

Loading