feat: userActions drives toolbar visibility + AddRecord button positioning#794
feat: userActions drives toolbar visibility + AddRecord button positioning#794
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…osition support - Gate addRecord button with userActions.addRecordForm !== false - Support addRecord.position (top/bottom) for button placement - Use i18n key list.addRecord for button label - Add addRecord i18n key to all 10 locale files - Add 3 new unit tests for addRecordForm and position Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…plication Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR implements user-configurable toolbar visibility and add-record button positioning for ListView. It completes the userActions integration story by wiring userActions.addRecordForm (which was defined in types but not connected) and implements position control for the add-record button (top or bottom).
Changes:
- Added
showAddRecordandaddRecordPositionflags to ListView'stoolbarFlagsmemo, with logic that respects bothaddRecord.enabledanduserActions.addRecordFormsettings - Implemented conditional rendering of add-record button in two positions: within the top toolbar (default) or in a separate bottom bar
- Added
list.addRecordi18n key to all 10 locale files plus the fallback dictionary
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/plugin-list/src/ListView.tsx | Extended toolbarFlags to include showAddRecord/addRecordPosition; added conditional rendering for add-record button in top/bottom positions; added i18n fallback for 'list.addRecord' |
| packages/plugin-list/src/tests/ListView.test.tsx | Added 3 tests: userActions.addRecordForm=false hides button, position='bottom' renders in border-t wrapper, position='top' renders in toolbar border-b wrapper |
| packages/i18n/src/locales/*.ts | Added 'addRecord' translation key to all 10 locale files (ar, de, en, es, fr, ja, ko, pt, ru, zh) |
| ROADMAP.md | Updated issue #737 reference to document that userActions.addRecordForm is now wired |
| addRecordPosition: (schema.addRecord?.position === 'bottom' ? 'bottom' : 'top') as 'top' | 'bottom', | ||
| }; | ||
| }, [schema.userActions, schema.showSearch, schema.showSort, schema.showFilters, schema.showDensity, schema.showHideFields, schema.showGroup, schema.showColor]); | ||
| }, [schema.userActions, schema.showSearch, schema.showSort, schema.showFilters, schema.showDensity, schema.showHideFields, schema.showGroup, schema.showColor, schema.addRecord, schema.userActions?.addRecordForm]); |
There was a problem hiding this comment.
The useMemo dependency array includes schema.userActions?.addRecordForm which is redundant since schema.userActions is already included. When schema.userActions changes, the memo will recalculate regardless of whether addRecordForm changed. Remove schema.userActions?.addRecordForm from the dependency array to avoid confusion and follow React best practices.
| }, [schema.userActions, schema.showSearch, schema.showSort, schema.showFilters, schema.showDensity, schema.showHideFields, schema.showGroup, schema.showColor, schema.addRecord, schema.userActions?.addRecordForm]); | |
| }, [schema.userActions, schema.showSearch, schema.showSort, schema.showFilters, schema.showDensity, schema.showHideFields, schema.showGroup, schema.showColor, schema.addRecord]); |
userActions.addRecordFormwas defined in types but not wired into the toolbar rendering logic. TheaddRecord.positionfield had no effect—button always rendered in the top toolbar.Changes
ListView.tsx— Centralized addRecord visibility intotoolbarFlagsmemo (showAddRecord,addRecordPosition), gated byaddRecord.enabled && userActions.addRecordForm !== false. Button renders top (default) or bottom based onaddRecord.position.list.addRecordkey to all 10 locale files +LIST_DEFAULT_TRANSLATIONSfallback.addRecordForm: falsehides button,position: 'bottom'/'top'placement.Usage
userActions.search/sort/filter/rowHeightwere already wired in a prior PR—this PR completes the story by connectingaddRecordFormand implementing position control.Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.