All updates
ProductionQAFrontend

Document Sidebar UX Overhaul, Searchable Resolution Dropdowns, and Default Inbox Landing (QA)

PR #400shoumikssahuSep 12, 2025 · 09:03 UTC
QASep 12, 2025
ProductionSep 12, 2025

Executive summary

This QA promotion bundles a batch of front-end improvements: a redesigned Document Types sidebar with faster, in-browser search; searchable dropdowns on the mail resolution panel; a fix for the mail documents sync controls; and a new default landing on the Inbox when users open the app root.

Why this was needed

The Document Types sidebar previously loaded its System and Custom lists separately with infinite-scroll, which made browsing and searching feel slow and inconsistent. The mail resolution dropdowns had no type-to-filter, making long entity lists hard to navigate. Opening the app at the root URL did not land users anywhere useful, and the mail documents sync icons contained a markup defect.

Client / user impact

  • Internal users browsing a batch can find document types faster: search now filters the already-loaded list instantly and only calls the server when needed.
  • Resolution-tab dropdowns can be filtered by typing, speeding up entity selection.
  • Clicking an already-selected document type now deselects it (toggle behavior), and clearer empty-state messages appear when no types exist.
  • Visiting the app root now redirects straight to the Inbox.
  • The mail documents 'Synced' and 'Sync to PTP' buttons render correctly after the markup fix.

Technical scope

Front-end only (DSM_Frontend), promoted from dev to qa; bundles feature PRs #397, #398, and #399 (DA-80). Notable changes grounded in the diff:

  • Document Types sidebar refactor (DocumentTypeSidebar.tsx): parent now fetches System and Custom types once each (limit 50, include_document_count), combines them, and does client-side search filtering with a 500ms debounce; falls back to the API search list (SearchedDocumentTypeList) only when local results are empty and more server data exists. Adds toggle-to-deselect on the active type.
  • List components (SystemDocumentTypeList.tsx, CustomDocumentTypeList.tsx): converted to presentational components receiving documentTypes/isLoading props; removed per-list IntersectionObserver infinite-scroll and the 'Show All Documents' button; added richer empty-state UI.
  • Layout tweaks (DocumentContents.tsx x2): sidebar narrowed (col-span 3→2, content 9→10), padding reduced (p-6→p-4), fixed-width aside set to 220px.
  • Root redirect (next.config.ts): added redirects() mapping //inbox (non-permanent).
  • Mail documents (MailDocuments.tsx): restructured the synced / sync-to-PTP button JSX and fixed a stray brace defect; no functional change to sync behavior.
  • Resolution panel (ToBeResolved.tsx): added searchable to two dropdowns.

Risk & mitigation

Low to moderate, scoped to QA. The sidebar now loads up to 50 system and 50 custom types in two upfront calls instead of paginating, so environments with more than 50 of either category could omit the overflow from the local list (the API search path partially mitigates this). The non-permanent / redirect avoids the browser caching issue a permanent redirect would create. The MailDocuments change is a refactor plus brace fix and should be behavior-neutral. Mitigation: validate in QA with realistic document-type counts before promoting to production.

QA validation focus

  • Open the Document Types sidebar and confirm both System and Custom lists populate with correct document counts.
  • Search for a type that exists in the loaded list (instant filter) and one that does not, in an account with >50 types, to confirm the API search fallback triggers.
  • Click an already-selected type and confirm it deselects (shows all documents again).
  • Verify empty-state messages render when no system/custom types exist.
  • Navigate to the app root URL and confirm redirect to /inbox.
  • In mail details, confirm the 'Synced by' tooltip and the spinning 'Sync to PTP' button render and work.
  • On the mail resolution tab, confirm both dropdowns accept typed search and clear correctly.
  • Check sidebar layout/widths on desktop and mobile (overlay drawer).