Skip to content

fix: ListView config panel live preview — remove remount gate and fix navigation priority#834

Merged
hotlong merged 4 commits intomainfrom
copilot/fix-listview-live-preview
Feb 24, 2026
Merged

fix: ListView config panel live preview — remove remount gate and fix navigation priority#834
hotlong merged 4 commits intomainfrom
copilot/fix-listview-live-preview

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 24, 2026

Config panel property changes (showRecordCount, allowPrinting, addRecord, selection, navigation mode, etc.) required clicking Save to take effect. The data flow viewDraft → activeView → mergedViews → PluginObjectView was correct, but two issues blocked live preview.

key={refreshKey} on PluginObjectView

refreshKey only incremented on save/create. React keying forced a full remount as the only update path, making prop-driven re-rendering a no-op between saves.

- <PluginObjectView
-     key={refreshKey}
-     schema={objectViewSchema}
+ <PluginObjectView
+     schema={objectViewSchema}

Navigation overlay ignoring view-level config

Detail overlay only consumed objectDef.navigation, so switching navigation mode (drawer/modal/split/popover) in the config panel had no effect.

- const detailNavigation: ViewNavigationConfig = objectDef.navigation ?? { mode: 'drawer' };
+ const detailNavigation: ViewNavigationConfig = activeView?.navigation ?? objectDef.navigation ?? { mode: 'drawer' };

Tests

  • Added ListView mock to isolate data-flow assertions from ListView's async internals
  • Added comprehensive live preview tests covering all config panel properties mentioned in the issue:
    • showRecordCount and allowPrinting toggles propagate to ListView schema in real-time
    • selection mode change propagates to ListView schema in real-time
    • addRecord toggle propagates both addRecord and addRecordViaForm to ListView
    • navigation mode change from config panel propagates to ListView schema live
    • Navigation priority verified: ListView receives view-level navigation (activeView.navigation > objectDef.navigation)
    • Label changes reflect immediately in breadcrumb
    • Multiple simultaneous config changes all propagate without save
    • Grid persists after config changes (no remount)
  • ROADMAP updated with root causes [WIP] Enhance every detail of the designer #10 and [WIP] Update documentation for project #11
Original prompt

This section details on the original issue you should resolve

<issue_title>【列表视图】配置面板属性变更后未实时生效(需点击保存)/ 导航与部分属性未正确同步</issue_title>
<issue_description>### 问题列表(结合详细排查后已合并):

1. 列表视图(ListView)配置面板中的大部分属性变更(如"显示记录数"、"允许打印"、"添加记录按钮"、选择模式等),仅在点击保存后才会生效,无法实时预览。

  • 预期:修改任何配置应立即反映到主视图组件,达到实时(Live Preview)效果。
  • 实际表现:侧边栏切换/勾选各种选项后,主表格、工具栏等内容未实时刷新,只有保存后才体现。
  • 主要原因:配置变更只更新了viewDraft,但PluginObjectView用了key={refreshKey},只有保存/创建时才会re-mount,普通变动(onViewUpdate)不触发key更换,导致视图不更新。
  • 建议修复方案:
    1. 移除key={refreshKey},或通过依赖viewDraft/activeView保证主组件可以响应props变化重新渲染;
    2. 或在onViewUpdate时同步刷新key(不推荐,性能差,且用户体验差);
    3. 优化数据流:让Live Preview不需要重挂载即可响应配置变更。

2. 导航模式(如Page/Drawer/Modal/Split/Popover)等设置面板切换无效,Overlay详情弹窗的导航配置未能和View配置实时同步。

  • 预期:切换不同的导航模式,应随即生效,改变弹窗/分屏表现。
  • 实际:导航配置(如mode: drawer/modal/...)实际取自objectDef.navigation,只在对象级用,视图级别的navigation未被消费。
  • 建议修复方案:
    • 让详情Overlay支持消费当前视图的navigation(activeView.navigation)或嵌套优先级 objectDef < activeView。

3. 各种Toolbar和Actions属性未实时生效,例如:

  • 添加记录按钮(addRecord/addRecordViaForm)
  • 允许打印(allowPrinting)
  • 显示记录数(showRecordCount)
  • 选择模式(selection)等
  • 相关代码流上,很多prop已经透传到主ListView schema,但因为主视图未及时re-render,所以未生效。

4. 代码一致性与最佳实践建议:

  • PluginObjectView建议React式解耦key依赖,利用useMemo等响应变化。
  • 子组件/Overlay建议向下消费viewDraft或activeView内的所有控制项。

附问题截图��

列表属性变动无效示例

复现步骤

  1. 打开Contacts模块,右侧列表视图配置面板
  2. 切换如添加记录、显示记录数、打印等选项
  3. 观察主表主体和Toolbar无实时响应,需等到点击"保存"才刷新配置
  4. 导航模式切换无效,始终是Drawer/未变成Split/Modal等

期望行为

  • 切换任意面板属性后能立刻在列表中反映出来(Live Preview效果,无需保存)
  • 导航模式等变更能及时同步到Overlay

相关代码位置:

  • apps/console/src/components/ObjectView.tsx (handleViewUpdate, renderListView等)
  • apps/console/src/components/ViewConfigPanel.tsx
  • packages/plugin-list/src/ListView.tsx
  • ...等

参考:

  • ROADMAP 已有相关Phase 2, Phase 3优化记录,但本问题为实际体验断层
  • [ ListView 属性和Live Preview 代码文档与测试用例详见 repo 搜索 ]

需要关注/修复标签:

bug, 配置, live preview


补充说明:建议修复后,务必补充自动化测试,覆盖所有toolbar、显示行为props的变更场景。


请开发修复后:记得运行test、确保所有相关场景通过,必要时补充ROADMAP进度注记。


</issue_description>

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


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 24, 2026

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

Project Deployment Actions Updated (UTC)
objectui Ready Ready Preview, Comment Feb 24, 2026 1:04pm
objectui-demo Ready Ready Preview, Comment Feb 24, 2026 1:04pm
objectui-storybook Ready Ready Preview, Comment Feb 24, 2026 1:04pm

Request Review

… priority for live preview

- Remove key={refreshKey} from PluginObjectView to allow config changes to propagate
  without requiring component remount (save). Props changes now flow naturally.
- Fix navigation overlay to use activeView.navigation with priority over objectDef.navigation,
  enabling view-level navigation mode changes to take effect immediately.
- Mock ListView in tests to isolate data flow verification from async rendering effects.
- Add tests for live preview of showRecordCount, allowPrinting, and label changes.

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix live preview for ListView configuration changes fix: ListView config panel live preview — remove remount gate and fix navigation priority Feb 24, 2026
Copilot AI requested a review from hotlong February 24, 2026 12:48
@hotlong
Copy link
Copy Markdown
Contributor

hotlong commented Feb 24, 2026

@copilot 仔细评估是否已经完成了任务中要求的所有开发

…and navigation mode

- Enhance ListView mock to render selection.type, addRecord.enabled, and addRecordViaForm
- Add test: selection mode change propagates to ListView schema in real-time
- Add test: addRecord toggle propagates both addRecord and addRecordViaForm to ListView
- Add test: navigation mode change from config panel propagates to ListView schema live
- Strengthen navigation priority test to verify ListView receives view-level navigation

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Feb 24, 2026

@copilot 仔细评估是否已经完成了任务中要求的所有开发

经过仔细评估,已完成补充。以下是完整的完成状态:

Issue 要求 1 — 配置面板属性实时生效(Live Preview):✅ 已完成

  • 移除了 PluginObjectView 上的 key={refreshKey},使 viewDraft → activeView → mergedViews → PluginObjectView 的 props 变更可以直接触发 re-render,无需 remount

Issue 要求 2 — 导航模式(navigation)实时同步:✅ 已完成

  • 修改优先级链为 activeView?.navigation ?? objectDef.navigation ?? { mode: 'drawer' },视图级导航配置优先于对象级

Issue 要求 3 — Toolbar/Actions 属性实时生效:✅ 已完成

  • 所有属性(addRecord、allowPrinting、showRecordCount、selection 等)已通过 renderListView 中的 fullSchema 正确传递,移除 key 后即可实时生效

Issue 要求 4 — 自动化测试覆盖所有场景:✅ 已在 aa7b14b 补充完善

  • showRecordCount toggle → 实时传递到 ListView schema
  • allowPrinting toggle → 实时传递到 ListView schema
  • selection mode 切换 → 实时传递到 ListView schema
  • addRecord toggle → 同时传递 addRecord 和 addRecordViaForm
  • navigation mode 切换 → 实时传递到 ListView schema
  • navigation 优先级 → 验证 activeView.navigation 优先于 objectDef.navigation
  • label 变更 → breadcrumb 实时更新
  • 多属性同时变更 → 无需保存全部生效
  • grid 持久化 → config 变更后不 remount

ROADMAP 更新:✅ 已完成(root causes #10#11

全部 31 个测试通过,0 回归。

@hotlong hotlong marked this pull request as ready for review February 24, 2026 13:23
Copilot AI review requested due to automatic review settings February 24, 2026 13:23
@hotlong hotlong merged commit df7deed into main Feb 24, 2026
5 checks passed
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a critical UX issue where ListView config panel property changes required clicking "Save" to take effect. The root cause was twofold: (1) key={refreshKey} on PluginObjectView forced full remounts only on save/create, preventing prop-driven re-rendering, and (2) detail overlay navigation ignored view-level config in favor of object-level config.

Changes:

  • Removed key={refreshKey} from PluginObjectView to enable natural React prop-based updates
  • Added navigation priority chain: activeView.navigation > objectDef.navigation > default drawer
  • Added comprehensive test coverage (8 new tests) validating live preview for all config properties

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
apps/console/src/components/ObjectView.tsx Removed key={refreshKey} from PluginObjectView (line 576); Added view-level navigation priority in detailNavigation (line 234)
apps/console/src/tests/ObjectView.test.tsx Added ListView mock isolating data flow assertions; Added 8 comprehensive live preview tests covering showRecordCount, allowPrinting, selection, addRecord, navigation mode, label changes, multiple simultaneous changes, and navigation priority
ROADMAP.md Documented root causes #10 (key={refreshKey} blocking live preview) and #11 (navigation not consuming activeView.navigation)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

【列表视图】配置面板属性变更后未实时生效(需点击保存)/ 导航与部分属性未正确同步

3 participants