Uh oh!
There was an error while loading. Please reload this page.
ListView Spec Protocol Gap — Implement 18 unimplemented properties - #737
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- #39 showRecordCount: conditionally show/hide record count bar - #24 rowHeight: add short and extra_tall mapping in ListView + bridge - #7 sort: parse legacy string format "field desc" - #22 description: render view description below toolbar - #40 allowPrinting: add print button with window.print() - #31 virtualScroll: forward flag to grid view schema - #35 userActions: wire sort/search/filter/rowHeight to toolbar visibility - #38 addRecord: render "+ Add Record" button from spec config - #37 tabs: render tab bar UI for view tabs - #9 filterableFields: restrict FilterBuilder to whitelist fields - #8 searchableFields: scope search queries to specified fields - #36 appearance: wire showDescription and allowedVisualizations - #16 pageSizeOptions: add page size selector UI in status bar - #17-21: use spec kanban/calendar/gantt/gallery/timeline configs - #20 gallery: add typed GalleryConfig to ListViewSchema - #21 timeline: add typed TimelineConfig to ListViewSchema - Bridge: add short/extra_tall density mapping, filterableFields pass-through Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Add 32 new ListView tests covering: showRecordCount, rowHeight short/extra_tall, sort legacy string, description, allowPrinting, addRecord, tabs, userActions, appearance.allowedVisualizations, spec config usage (kanban/gallery/timeline/ calendar/gantt), pageSizeOptions, searchableFields scoping - Add 7 new bridge tests: short/extra_tall density mapping, filterableFields, resizable/striped/bordered, view-type configs, navigation - Update ROADMAP with P2.6 ListView Spec Protocol Gaps (remaining complex items) - Total: 81 ListView tests (was 49), 43 bridge tests (was 36) Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…t, use defaultValue for page size Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Pull request overview
Implements additional @objectstack/spec ListView protocol properties across types, the SpecBridge, and the ListView renderer, plus adds tests and documents remaining gaps in the roadmap.
Changes:
- Expanded
ListViewSchematyping (sort legacy strings, rowHeight enum, gallery/timeline configs). - Updated ListView renderer behaviors (toolbar flags via
userActions, search scoping, filterable fields restriction, tabs/description/printing/add-record/page-size UI). - Added SpecBridge passthrough + density mapping tests and new ListView unit tests; documented remaining gaps in ROADMAP.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/types/src/objectql.ts | Extends ListView schema types (sort, rowHeight, gallery/timeline configs). |
| packages/react/src/spec-bridge/bridges/list-view.ts | Bridges additional ListView properties and improves density mapping for new rowHeight values. |
| packages/react/src/spec-bridge/tests/P1SpecBridge.test.ts | Adds coverage for new bridge mappings and density conversion. |
| packages/plugin-list/src/ListView.tsx | Implements new UI/behavior for multiple spec properties (tabs, description, printing, add record, search scoping, pageSizeOptions, view-type config precedence). |
| packages/plugin-list/src/tests/ListView.test.tsx | Adds tests for newly implemented ListView behaviors. |
| ROADMAP.md | Updates exec summary and adds a new section documenting remaining ListView protocol gaps. |
| <select | ||
| className="ml-auto h-6 rounded border border-input bg-background px-1 text-xs" | ||
| defaultValue={schema.pagination.pageSize} | ||
| onChange={(e) => { | ||
| const newSize = Number(e.target.value); | ||
| if (props.onPageSizeChange) props.onPageSizeChange(newSize); | ||
| }} | ||
| data-testid="page-size-selector" | ||
| > | ||
| {schema.pagination.pageSizeOptions.map(size => ( | ||
| <option key={size} value={size}>{size} / page</option> | ||
| ))} | ||
| </select> |
There was a problem hiding this comment.
The page size <select> is uncontrolled (defaultValue) and has no accessible label. If schema.pagination.pageSize changes after mount, the UI won't reflect it; prefer a controlled value tied to state/props, and add an aria-label (or an associated <label>) so screen readers can identify the control.
| objectName: 'contacts', | ||
| viewType: 'grid', | ||
| fields: ['name', 'email'], | ||
| sort: ['name desc' as any], |
There was a problem hiding this comment.
The sort type now allows legacy string entries, so the as any cast in this test is no longer needed. Removing the cast will keep the test aligned with the public typing and catch regressions if the type changes again.
| sort: ['name desc'asany], | |
| sort: ['name desc'], |
| ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind + Shadcn. It renders JSON metadata from the @objectstack/spec protocol into pixel-perfect, accessible, and interactive enterprise interfaces. | ||
| **Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,618+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), and **Feed/Chatter UI** (P1.5) — all ✅ complete. | ||
| **Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,618+ tests, 78 Storybook stories, 42/42 builds passing, ~88% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), and **ListView Spec Protocol Gap Fixes** (P2.6 partial) — all ✅ complete. |
There was a problem hiding this comment.
ROADMAP claims "i18n (11 locales)", but packages/i18n/src/locales currently contains 10 locale files (en, zh, de, ru, ja, fr, ar, pt, es, ko). Update the locale count (or add the missing locale) to keep the executive summary accurate.
| **Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,618+ tests, 78 Storybook stories, 42/42 builds passing, ~88% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), and **ListView Spec Protocol Gap Fixes** (P2.6 partial) — all ✅ complete. | |
| **Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,618+ tests, 78 Storybook stories, 42/42 builds passing, ~88% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (10 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), and **ListView Spec Protocol Gap Fixes** (P2.6 partial) — all ✅ complete. |
| /** Sort order. Supports array of objects or legacy string format "field desc" */ | ||
| sort?: Array<{ field: string; order: 'asc' | 'desc' } | string>; |
There was a problem hiding this comment.
ListViewSchema type now allows legacy string sort items, but the corresponding Zod schema still validates sort as an array of SortConfig objects only. This will cause runtime validation/parsing to reject valid schemas using the new legacy sort format unless the Zod schema is updated to accept string entries as well.
| * Row height for list/grid view rows. | ||
| * Aligned with @objectstack/spec ListViewSchema.rowHeight. | ||
| * Aligned with @objectstack/spec RowHeight enum. | ||
| */ | ||
| rowHeight?: 'compact' | 'medium' | 'tall'; | ||
| rowHeight?: 'compact' | 'short' | 'medium' | 'tall' | 'extra_tall'; |
There was a problem hiding this comment.
ListViewSchema adds gallery/timeline typed configs and extends rowHeight to include short/extra_tall, but packages/types/src/zod/objectql.zod.ts ListViewSchema is still missing these properties/enum values. This creates a mismatch where TS accepts the schema but Zod validation will fail at runtime; please update the Zod ListViewSchema accordingly.
| {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)) |
There was a problem hiding this comment.
tabs[].visible is documented as an expression string, but the current filter only treats the literal string "false" (or boolean false) as hidden. Any other expression (e.g. "${user.role==='admin'}") will be treated as visible. Consider evaluating visible via useCondition/ExpressionEvaluator (with appropriate context) and also handling common literals like "true"/"false" robustly.
| variant="ghost" | ||
| size="sm" | ||
| className="h-7 px-2 text-muted-foreground hover:text-primary text-xs" | ||
| onClick={() => window.print()} |
There was a problem hiding this comment.
onClick={() => window.print()} will throw in non-browser environments (SSR) and can be undefined in some WebViews/test runners. Guard with typeof window !== 'undefined' and call window.print?.() (or route through a prop callback) so the button is safe across runtimes.
| onClick={()=>window.print()} | |
| onClick={()=>{ | |
| if(typeofwindow!=='undefined'){ | |
| window.print?.(); | |
| } | |
| }} |
Gap analysis identified 42 spec properties on ListView with only 33% fully implemented. This PR closes 18 of the typed-only/stub/missing items and adds a ROADMAP section for the remaining complex ones.
ListView.tsx — New rendering behaviors
showRecordCount— record count bar now conditionally hidden whenfalsedescription— rendered below toolbar, gated byappearance.showDescriptionallowPrinting— print button callswindow.print()addRecord— "+ Add Record" button fromaddRecord.enabledtabs— tab bar UI with icon resolution, ordering, visibility filteringpageSizeOptions— page size<select>in status barToolbar control via
userActionsuserActions.sort/search/filter/rowHeightnow overrideshowSort/showSearch/showFilters/showDensity:Spec config alignment (kanban/calendar/gantt/gallery/timeline)
All five view-type configs now read from spec-level typed properties with legacy
options.*fallback:gallery—coverField,coverFit,cardSize,titleField,visibleFieldstimeline—startDateField,endDateField,titleField,groupByField,colorField,scaleappearance.allowedVisualizations— restricts ViewSwitcher to whitelistData query improvements
searchableFields— passes$search+$searchFieldstodataSource.find()filterableFields— restricts FilterBuilder field list to whitelistvirtualScroll— forwarded to grid view schemaType changes (
objectql.ts)rowHeightexpanded:'compact' | 'short' | 'medium' | 'tall' | 'extra_tall'sortaccepts legacy string format:Array<{ field; order } | string>galleryandtimelineconfigs toListViewSchemaBridge (
list-view.ts)mapDensityhandlesshort→ compact,tall/extra_tall→ spaciousfilterableFields,resizable,striped,bordered,navigation, and all five view-type configsROADMAP P2.6
Remaining complex items deferred:
dataViewDataSchema provider,groupingrendering,rowColorrendering,quickFiltersstructure reconciliation, columnpinned/summary/link/action,rowActions/bulkActionsUI.Tests
39 new tests (32 ListView + 7 bridge), 522 total passing across 24 files.
Original prompt
This section details on the original issue you should resolve
<issue_title>ListView Spec Protocol Gap — Complete Unimplemented Properties Checklist</issue_title>
<issue_description>## ListView Spec Protocol — Complete Implementation Gap Analysis
A thorough comparison between
@objectstack/specView protocol (view.zod.ts) and the ObjectUI ListView implementation acrosspackages/types,packages/plugin-list,packages/plugin-grid, andpackages/react/src/spec-bridge.Legend
1. ListView Top-Level Properties (42 total)
namestring?labelI18nLabel?{ en, zh }is NOT resolved — only plainstringworkstypeenumviewTypedataViewDataSchema?ListView.tsxignoresdataentirely — always usesdataSource.find(objectName).provider: api/valuemodes not consumedcolumnsstring[] | ListColumn[]filterany[]?sortstring | SortConfig[]?"field desc"NOT parsedsearchableFieldsstring[]?filterableFieldsstring[]?quickFiltersQuickFilter[]?{ field, operator, value }, ObjectUI uses{ id, label, filters[] }resizableboolean?stripedboolean?borderedboolean?selectionSelectionConfig?navigationNavigationConfig?paginationPaginationConfig?pageSizeworks;pageSizeOptionshas no UI selector for users to switchkanbanKanbanConfig?schema.options?.kanban?.groupFieldinstead of speckanbanconfigcalendarCalendarConfig?schema.options?.calendarinstead of spec structureganttGanttConfig?schema.options?.ganttinstead of spec structuregalleryGalleryConfig?GalleryConfigSchema(coverField,coverFit,cardSize,titleField,visibleFields) is NOT typed or consumedtimelineTimelineConfig?TimelineConfigSchema(startDateField,endDateField,titleField,groupByField,colorField,scale) is NOT typed or consumeddescriptionI18nLabel?sharingViewSharing?{ type: personal/collaborative, lockedBy }vs ObjectUI:{ visibility, enabled }— Share button renders but is non-functionalrowHeightRowHeight enum?compact/medium/tallmapped; specshortandextra_tallare NOT handledgroupingGroupingConfig?disabled— zero grouping rendering logicrowColorRowColorConfig?disabled— zero row coloring logichiddenFieldsstring[]?fieldOrderstring[]?rowActionsstring[]?bulkActionsstring[]?virtualScrollboolean?conditionalFormattingArray<{condition, style}>?{ condition, style }, ObjectUI uses field/operator/value rulesinlineEditboolean?editableon ObjectGridexportOptionsenum[]?string[], ObjectUI:{ formats, maxRecords, includeHeaders, fileNamePrefix }object🔒 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.