feat(platform): documents table UI polish and filters#745
Conversation
- Add RAG status, source, and teams filter popover to documents table
- Fix delete dialog to match Pencil design (bold filename, simplified copy)
- Use abbreviated month format (ll LT) in date columns with timezone
- Add customFormat prop to CopyableTimestamp component
- Show source column as text labels instead of icons
- Left-align size column
- Fix filter button to show icon + "Filter" text label
- Fix i18n interpolation bug ({{count}} → {count}) in nSelected translation
- Remove uppercase from filter section titles
- Update selected count badge to neutral gray style
- Clean up design comments files
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
📝 WalkthroughWalkthroughThis pull request introduces a comprehensive update to the document management system's UI and filtering capabilities. Key changes include: removal of design documentation (design/comments.md), addition of a Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
services/platform/app/components/ui/filters/filter-button.tsx (1)
23-39:⚠️ Potential issue | 🟡 MinorAlign the button's accessible name with the visible label.
Line 25 still sets
aria-labelto the plural form, so the new visible"Filter"text on Lines 37-39 is ignored by screen readers and voice-control tooling. Remove the override or use the same string for both.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@services/platform/app/components/ui/filters/filter-button.tsx` around lines 23 - 39, The Button's aria-label currently uses the plural t('labels.filters') which conflicts with the visible text t('labels.filter'); update the aria-label prop on the Button component (remove the override or set it to t('labels.filter')) so the accessible name matches the visible label, ensuring screen readers and voice control announce the same "Filter" text as rendered by the ListFilter/Loader2Icon and the t('labels.filter') string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@services/platform/app/features/documents/components/document-delete-dialog.tsx`:
- Around line 28-34: The delete confirmation currently concatenates three
translation calls around a <strong> element in the DocumentDeleteDialog
component, which breaks localization; change it to use a single translation key
(via tDocuments or a rich-text helper like Trans) that accepts an
interpolated/rich-text placeholder for the emphasized file name (fileName or
fallback tDocuments('deleteFile.thisDocument')) so the entire sentence—including
punctuation and word order—comes from one localization string and the file name
is rendered in bold.
In
`@services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx`:
- Around line 124-127: The date cell using formatDate(new
Date(row.original.lastModified), 'long', { customFormat: 'll LT' }) needs to
append the short timezone like the CopyableTimestamp component does; update the
rendering for the lastModified column to compute timezoneShort (e.g., from
Intl.DateTimeFormat().resolvedOptions().timeZone or reuse the helper used in
services/platform/app/components/ui/data-display/copyable-timestamp.tsx) and
concatenate it to the formatted string so the column shows the abbreviated
month/time plus the timezone label.
In
`@services/platform/app/features/documents/hooks/use-documents-table-config.tsx`:
- Around line 246-253: The cell renderer uses CopyableTimestamp with both
preset="long" and customFormat="ll LT", which is redundant because customFormat
takes precedence; either remove the preset prop to avoid confusion (update the
cell renderer that returns <CopyableTimestamp ... customFormat="ll LT"
alignRight />) or, if the intent is to force appending the timezone
abbreviation, explicitly make that intention clear by keeping preset and/or
using the dedicated timezone flag (e.g., showTimezone or similar) in
CopyableTimestamp — adjust the props in the cell renderer accordingly (refer to
CopyableTimestamp, the cell: ({ row }) => (...) renderer, and the
preset/customFormat props).
---
Outside diff comments:
In `@services/platform/app/components/ui/filters/filter-button.tsx`:
- Around line 23-39: The Button's aria-label currently uses the plural
t('labels.filters') which conflicts with the visible text t('labels.filter');
update the aria-label prop on the Button component (remove the override or set
it to t('labels.filter')) so the accessible name matches the visible label,
ensuring screen readers and voice control announce the same "Filter" text as
rendered by the ListFilter/Loader2Icon and the t('labels.filter') string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5f24c10a-8e23-4525-b2d0-df9daa04ad5b
⛔ Files ignored due to path filters (1)
design/images/comments/knowledge-import-button.pngis excluded by!**/*.png
📒 Files selected for processing (12)
design/comments.mdservices/platform/app/components/ui/data-display/copyable-timestamp.tsxservices/platform/app/components/ui/data-table/data-table-filters.tsxservices/platform/app/components/ui/dialog/view-dialog.stories.tsxservices/platform/app/components/ui/filters/filter-button.tsxservices/platform/app/components/ui/filters/filter-section.test.tsxservices/platform/app/components/ui/filters/filter-section.tsxservices/platform/app/features/documents/components/document-delete-dialog.tsxservices/platform/app/features/documents/components/documents-table.tsxservices/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsxservices/platform/app/features/documents/hooks/use-documents-table-config.tsxservices/platform/messages/en.json
💤 Files with no reviewable changes (1)
- design/comments.md
- Fix filter button aria-label to match visible "Filter" text
- Use single i18n key with {name} placeholder for delete confirmation
- Append timezone abbreviation to OneDrive file table date column
- Add clarifying comment for preset="long" in CopyableTimestamp usage
- Add timezoneShort to useMemo dependency array in OneDrive file table - Update filter button test to match new singular aria-label
Summary
ll LT) in date columns with timezone displaycustomFormatprop toCopyableTimestampcomponent{{count}}→{count}) in filter selected countTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style
Chores