Skip to content

feat(platform): documents table UI polish and filters#745

Merged
Israeltheminer merged 3 commits into
mainfrom
feat/documents-table-ui-polish
Mar 10, 2026
Merged

feat(platform): documents table UI polish and filters#745
Israeltheminer merged 3 commits into
mainfrom
feat/documents-table-ui-polish

Conversation

@Israeltheminer
Copy link
Copy Markdown
Collaborator

@Israeltheminer Israeltheminer commented Mar 10, 2026

Summary

  • Add RAG status, source, and teams filter popover to the documents table
  • Fix delete dialog to match Pencil design system (bold filename, simplified description)
  • Use abbreviated month format (ll LT) in date columns with timezone display
  • Add customFormat prop to CopyableTimestamp component
  • Show source column as text labels instead of icons
  • Left-align size column
  • Update filter button to show icon + "Filter" text label (was icon-only)
  • Fix i18n interpolation bug ({{count}}{count}) in filter selected count
  • Remove uppercase styling and update selected count badge to neutral gray in filter sections
  • Clean up obsolete design comment files

Test plan

  • Verify documents table filters (RAG status, source, teams) work correctly
  • Verify delete dialog matches Pencil design with bold filename
  • Verify date columns show abbreviated month format (e.g. "Mar 10, 2026 8:29 AM EST")
  • Verify source column shows text labels (Upload, OneDrive, SharePoint)
  • Verify size column is left-aligned
  • Verify filter button shows icon + "Filter" text
  • Verify filter section titles are not uppercase
  • Verify selected count badge shows "{count} selected" (not raw template)

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added multi-criteria document filtering by status, source, and team
    • Filter button now displays with descriptive label and icon
  • Style

    • Updated date column label from "Modified" to "Updated" across tables
    • Simplified document source display
    • Refined filter section styling and badge appearance
    • Document delete dialog now highlights document names in bold
  • Chores

    • Removed internal design documentation

- 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
Copy link
Copy Markdown

@greptile-apps greptile-apps Bot left a comment

Choose a reason for hiding this comment

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

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 10, 2026

📝 Walkthrough

Walkthrough

This 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 customFormat prop to the CopyableTimestamp component for flexible date formatting, UI refinements to filter and badge components (font size, styling, label text changes), implementation of multi-criteria document filtering (RagStatus, Source, Teams) in the DocumentsTable component, simplification of source info rendering by removing icons, and expansion of internationalization messages with new filter labels and document-specific translations. The changes affect timestamp display consistency, filter UI presentation, and filtering functionality across the documents feature.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: UI polish (styling adjustments, icon removal, color/alignment changes) and filters (new filtering functionality for documents table).

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/documents-table-ui-polish

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

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 | 🟡 Minor

Align the button's accessible name with the visible label.

Line 25 still sets aria-label to 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

📥 Commits

Reviewing files that changed from the base of the PR and between 738a387 and fcd3f63.

⛔ Files ignored due to path filters (1)
  • design/images/comments/knowledge-import-button.png is excluded by !**/*.png
📒 Files selected for processing (12)
  • design/comments.md
  • services/platform/app/components/ui/data-display/copyable-timestamp.tsx
  • services/platform/app/components/ui/data-table/data-table-filters.tsx
  • services/platform/app/components/ui/dialog/view-dialog.stories.tsx
  • services/platform/app/components/ui/filters/filter-button.tsx
  • services/platform/app/components/ui/filters/filter-section.test.tsx
  • services/platform/app/components/ui/filters/filter-section.tsx
  • services/platform/app/features/documents/components/document-delete-dialog.tsx
  • services/platform/app/features/documents/components/documents-table.tsx
  • services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
  • services/platform/app/features/documents/hooks/use-documents-table-config.tsx
  • services/platform/messages/en.json
💤 Files with no reviewable changes (1)
  • design/comments.md

Comment thread services/platform/app/features/documents/components/document-delete-dialog.tsx Outdated
- 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
@Israeltheminer Israeltheminer merged commit 6ece211 into main Mar 10, 2026
16 checks passed
@Israeltheminer Israeltheminer deleted the feat/documents-table-ui-polish branch March 10, 2026 20:07
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.

1 participant