Skip to content

Comments

ConfigPanel UI Spec alignment: ObjectGrid 5-value rowHeight + comprehensive section tests + ROADMAP#763

Merged
hotlong merged 5 commits intomainfrom
copilot/fix-configpanel-ui-spec
Feb 23, 2026
Merged

ConfigPanel UI Spec alignment: ObjectGrid 5-value rowHeight + comprehensive section tests + ROADMAP#763
hotlong merged 5 commits intomainfrom
copilot/fix-configpanel-ui-spec

Conversation

Copy link
Contributor

Copilot AI commented Feb 23, 2026

Completes all development tasks from the ConfigPanel UI Spec alignment issue. ObjectGrid hardcoded only 3 of 5 spec rowHeight values (compact/medium/tall), and test coverage for section field interactions, conditional rendering, and boundary values was incomplete.

Changes

1. ObjectGrid rowHeight — full 5-enum rendering (ObjectGrid.tsx)

  • Extended rowHeightMode state, cellClassName styles, cycleRowHeight toggle, and icon mapping to cover all 5 values
    • short: py-1 leading-normal (between compact and medium)
    • extra_tall: py-3.5 leading-relaxed (beyond tall)
    • Icon mapping via object lookup: { compact: Rows4, short: Rows3, medium: Rows2, tall: AlignJustify, extra_tall: AlignJustify }
  • Added Rows2 icon import for medium mode
// Before: 3-value cycle
const cycleRowHeight = () => {
  setRowHeightMode(prev => {
    if (prev === 'compact') return 'medium';
    if (prev === 'medium') return 'tall';
    return 'compact';
  });
};

// After: full 5-value cycle
const cycleRowHeight = () => {
  setRowHeightMode(prev => {
    if (prev === 'compact') return 'short';
    if (prev === 'short') return 'medium';
    if (prev === 'medium') return 'tall';
    if (prev === 'tall') return 'extra_tall';
    return 'compact';
  });
};

Zod schema (objectql.zod.ts) already had the correct 5-value z.enum — no changes needed there.

2. Section field Spec coverage verification & interaction tests (ViewConfigPanel.test.tsx)

  • Toggle interactions: collapseAllByDefault, showDescription, clickIntoRecordDetails, addDeleteRecordsInline — all verified to trigger onViewUpdate
  • Conditional rendering: Sharing visibility hidden when sharing.enabled is false/undefined; navigation width hidden when mode is page; navigation openNewTab hidden when mode is drawer
  • All 5 rowHeight buttons: Click each value and verify onViewUpdate call
  • Boundary values: Empty bulkActions/rowActions input, long labels (200 chars), special characters in emptyState, invalid pageSizeOptions (NaN, negative, zero filtered out)
  • Enum cycling: All densityMode values (compact/comfortable/spacious), all ARIA live values (polite/assertive/off), sharing visibility select change
  • Conditional sub-editors: addRecord sub-editor hidden when addRecordViaForm is false

3. Schema-level spec alignment tests (view-config-schema.test.tsx)

  • Accessibility section field ordering (ariaLabel < ariaDescribedBy < ariaLive)
  • EmptyState compound field structure verification
  • Switch field default conventions (collapseAllByDefault explicitTrue, showDescription/inlineEdit defaultOn)
  • Comprehensive visibleWhen predicates for sharing visibility, navigation width, and navigation openNewTab

4. ObjectGrid rowHeight tests (row-height.test.tsx)

  • 14 tests: initialization for all 5 values, full 5-step cycle, label display, toggle visibility

5. ROADMAP update

  • Updated Phase 4 test counts
  • Added Phase 5 spec alignment completion section documenting all changes

Test Results

  • 141 ViewConfigPanel tests (122 existing + 19 new)
  • 72 schema tests (64 existing + 8 new)
  • 186 plugin-grid tests (172 existing + 14 new)
  • 894 total tests pass across 64 test files
  • CodeQL: 0 security alerts
Original prompt

This section details on the original issue you should resolve

<issue_title>设置面板(ConfigPanel)UI Spec 对齐完善 & 遗留问题补全清单</issue_title>
<issue_description>## 背景
近期已对 Console 设置面板(ConfigPanel)进行了严格 schema-driven 和协议(spec)映射整改,但仍存在部分实现细节和测试覆盖未完全达标。此 issue 作为补全所有遗留问题的追踪清单,确保实现与 NamedListView/ListViewSchema 规格协议一一对齐,并消除所有遗留瑕疵。

待完善开发细节

1. ObjectGrid 行高 rowHeight 枚举与渲染支持

  • ObjectGridSchema.rowHeight 从 'compact' | 'medium' | 'tall' 扩展为 'compact' | 'short' | 'medium' | 'tall' | 'extra_tall' ,但 ObjectGrid 实现(例如:packages/plugin-grid/src/ObjectGrid.tsx:129, 804-808, 1031-1036)仅对 3 种进行了 hardcode,传入短值/超高值会 fallback,需增加 full 5 枚举的渲染/样式能力
  • ObjectGrid 的 Zod schema 目前无 rowHeight,需增加 rowHeight 字段对应 z.enum 保证 runtime 校验不脱节
  • 完成上述修复后需补充相关单测,确保 UI 层可用所有 rowHeight

2. 各 Section 字段 Spec 全覆盖与 UI 交互互测

  • Appearance/UserActions/Sharing/Accessibility 等 section 的所有 spec 字段是否有对应 UI 控件、默认值、排序和禁用逻辑,需再次自检与 spec 全量核查
  • 检查并补足 bulkActions、collapseAllByDefault、emptyState 等边界 case 的配置项及说明
  • 检查协议字段条件可见/禁用/默认值等约束逻辑是否全部体现

3. 测试 case 全覆盖

  • 测试用例除主路径外需覆盖所有界面交互异常、condictional rendering、协议边界值(如最长label、特殊枚举、隐藏字段等)
  • 针对 roadmap 更新、field顺序、appearance 细节补测,保持测试用例与 spec 变更同步

5. Issue/PR/roadmap 文档同步

  • 回溯上述所有开发和测试变动,更新 milestone/roadmap 相关进度说明,避免遗漏步骤

合并清单:如需二次补充,请继续在本 issue 讨论区按 checklist 形式更新。完成全部后需要运行 test,并同步更新 roadmap。

负责人: @hotlong
</issue_description>

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


🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

@vercel
Copy link

vercel bot commented Feb 23, 2026

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

Project Deployment Actions Updated (UTC)
objectui Canceled Canceled Feb 23, 2026 6:52am
objectui-demo Error Error Feb 23, 2026 6:52am
objectui-storybook Error Error Feb 23, 2026 6:52am

Request Review

…ADMAP update

- Update ObjectGrid.tsx: state type, cellClassName, cycleRowHeight, icons for all 5 rowHeight values (compact/short/medium/tall/extra_tall)
- Add 14 unit tests for row height initialization, cycle, label, toggle visibility
- Update ROADMAP.md to reflect ObjectGrid rendering support and new test count

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…mprove test assertions

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix ConfigPanel UI spec alignment and complete issues ObjectGrid: support all 5 rowHeight enum values Feb 23, 2026
Copilot AI requested a review from hotlong February 23, 2026 06:00
@hotlong
Copy link
Contributor

hotlong commented Feb 23, 2026

@copilot 仔细审查,要完成任务中列出的所有开发

…update

- ViewConfigPanel: 18 new tests for toggle interactions (collapseAllByDefault, showDescription, clickIntoRecordDetails, addDeleteRecordsInline), conditional rendering (sharing visibility, navigation width/openNewTab), all 5 rowHeight clicks, boundary values (empty actions, long labels, special chars), pageSizeOptions, densityMode/ARIA live enums
- view-config-schema: 8 new tests for accessibility field ordering, emptyState compound field, switch field defaults, comprehensive visibleWhen predicates
- ROADMAP: add Phase 5 spec alignment completion section

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…SizeOptions boundary test

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

Copilot AI commented Feb 23, 2026

@copilot 仔细审查,要完成任务中列出的所有开发

All issue tasks completed in commits 4f072c8–636fcd6:

Task 1 — ObjectGrid rowHeight: Extended from 3 to all 5 spec values (compact/short/medium/tall/extra_tall) — state type, cellClassName, cycleRowHeight, icon mapping. Zod schema already had 5 values ✅.

Task 2 — Section field Spec coverage: Verified all Appearance/UserActions/Sharing/Accessibility fields have UI controls, defaults, ordering, and conditional visibility. Added 19 ViewConfigPanel interaction tests covering toggle behaviors, conditional rendering (sharing visibility, navigation width/openNewTab), all 5 rowHeight clicks, boundary values (empty actions, long labels, special chars, invalid pageSizeOptions).

Task 3 — Test coverage: Added 41 total new tests: 14 ObjectGrid rowHeight, 19 ViewConfigPanel interactions, 8 schema spec alignment (accessibility ordering, emptyState, switch defaults, visibleWhen predicates). Full suite: 213 console tests, 186 plugin-grid tests, all passing.

Task 5 — ROADMAP: Updated with Phase 5 spec alignment completion section.

Copilot AI changed the title ObjectGrid: support all 5 rowHeight enum values ConfigPanel UI Spec alignment: ObjectGrid 5-value rowHeight + comprehensive section tests + ROADMAP Feb 23, 2026
@hotlong hotlong marked this pull request as ready for review February 23, 2026 08:05
Copilot AI review requested due to automatic review settings February 23, 2026 08:05
@hotlong hotlong merged commit 8ad9e41 into main Feb 23, 2026
2 of 4 checks passed
Copy link
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 completes the ConfigPanel UI Spec alignment by extending ObjectGrid to support all 5 rowHeight enum values (previously hardcoded to only 3) and adding comprehensive test coverage for ViewConfigPanel field interactions, conditional rendering, and boundary cases.

Changes:

  • Extended ObjectGrid rowHeight support from 3 values (compact/medium/tall) to all 5 spec-defined values (compact/short/medium/tall/extra_tall) with full rendering support including state management, cell styling, cycle toggle logic, and icon mapping
  • Added 19 new ViewConfigPanel interaction tests covering toggle interactions, conditional rendering (sharing visibility, navigation width/openNewTab, addRecord sub-editor), all 5 rowHeight button clicks, boundary values (empty actions, long labels, special chars, invalid pageSizeOptions), and enum cycling (densityMode, ARIA live)
  • Added 8 new schema-level spec alignment tests verifying field ordering, compound field structure, switch field defaults, and comprehensive visibleWhen predicates
  • Added 14 new ObjectGrid rowHeight tests validating initialization, full 5-step cycle, label display, and toggle visibility for all enum values

Reviewed changes

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

Show a summary per file
File Description
packages/plugin-grid/src/ObjectGrid.tsx Extended rowHeightMode state type to include all 5 values, updated cellClassName mapping with styles for short/extra_tall, modified cycleRowHeight to cycle through all 5 values, added Rows2 icon import, implemented icon mapping via object lookup
packages/plugin-grid/src/tests/row-height.test.tsx New test file with 14 comprehensive tests covering all 5 rowHeight enum values: toggle visibility, initialization, full cycle sequence, label display, and default behavior
apps/console/src/tests/ViewConfigPanel.test.tsx Added 19 interaction tests for spec alignment: toggle interactions (collapseAllByDefault, showDescription, clickIntoRecordDetails, addDeleteRecordsInline), conditional rendering (sharing, navigation, addRecord), rowHeight buttons, boundary cases, enum cycling
apps/console/src/tests/view-config-schema.test.tsx Added 8 schema-level tests: accessibility field ordering, emptyState compound field structure, switch field default conventions, comprehensive visibleWhen predicates for sharing and navigation
ROADMAP.md Updated Phase 4 test counts and added Phase 5 section documenting spec alignment completion with all changes
Comments suppressed due to low confidence (3)

ROADMAP.md:390

  • The count "18 new ViewConfigPanel interaction tests" is incorrect. There are actually 19 new tests added in this PR (lines 2439-2772 of ViewConfigPanel.test.tsx): 4 toggle tests, 4 conditional rendering tests, 1 all-rowHeight test, 2 empty actions tests, 3 boundary tests, 2 pageSizeOptions tests, 1 densityMode test, 1 addRecord conditional test, and 1 ARIA live test.
- [x] 18 new ViewConfigPanel interaction tests: collapseAllByDefault, showDescription, clickIntoRecordDetails, addDeleteRecordsInline toggles; sharing visibility conditional hide; navigation width/openNewTab conditional rendering; all 5 rowHeight button clicks; boundary tests (empty actions, long labels, special chars); pageSizeOptions input; densityMode/ARIA live enums; addRecord conditional sub-editor; sharing visibility select

ROADMAP.md:388

  • The issue reference is incorrect. The PR description states this PR "Fixes #762", but the ROADMAP references "Issue #745". These should match to ensure proper issue tracking and documentation consistency.
**Phase 5 — Spec Alignment Completion (Issue #745):**

packages/plugin-grid/src/tests/row-height.test.tsx:160

  • The test name "should default to 'medium' when rowHeight is defined but empty" doesn't match the test implementation. The test passes rowHeight: 'medium' explicitly, which is not testing a default or fallback scenario. The comment mentions that "when schema.rowHeight is undefined, no toggle is shown" which is already tested in the "Row height toggle visibility" describe block. Consider either removing this redundant test or modifying it to test an actual edge case, such as passing an invalid rowHeight value to verify fallback behavior.
describe('Row height default', () => {
  it('should default to "medium" when rowHeight is defined but empty', async () => {
    // When rowHeight is present (truthy or not), toggle shows.
    // When schema.rowHeight is undefined, no toggle is shown — default 'medium' is internal.
    renderGrid({ rowHeight: 'medium' });

    await waitFor(() => {
      expect(screen.getByText('Name')).toBeInTheDocument();
    });

    expect(screen.getByTitle('Row height: medium')).toBeInTheDocument();
  });
});

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.

设置面板(ConfigPanel)UI Spec 对齐完善 & 遗留问题补全清单

2 participants