All updates
ProductionQAFrontend

DSM Frontend QA Batch: Rich-Text Email Composer, Sync-to-Payments, PDF Viewer & Grid Improvements

PR #386shoumikssahuSep 11, 2025 · 22:08 UTC
QASep 11, 2025
ProductionSep 11, 2025

Executive summary

This release promotes a large batch of DSM web app improvements from Dev to QA. Highlights include a full rich-text editor for composing shared emails, the ability to sync mail documents to the Payments (PTP) system individually or in bulk, a substantially upgraded in-app PDF viewer, a redesigned login experience, and numerous data-grid and loading-state refinements.

Why this was needed

Several gaps in the existing experience were addressed at once: emails shared from DSM could only be plain text, document-to-payments syncing was not available from the mail Documents tab, the PDF viewer lacked common controls (zoom/fit/rotate), long values in grids were hard to read, and loading states were inconsistent. The batch also standardizes API request URLs to reduce avoidable backend redirects.

Client / user impact

Users gain a formatted email composer (bold, lists, headings, colors, images) when sharing mail; can sync documents to Promise-to-Pay from the Documents tab with single and bulk actions plus a visible "synced by" indicator; get a more capable PDF viewer (inline zoom, fit-to-width, orientation toggle, tooltips, screen-reader labels); see truncated long fields with hover tooltips and searchable, cleaner column filters; and experience a refreshed, responsive login screen with consistent branded loaders during navigation.

Technical scope

  • Rich-text email composer: New src/components/ui/rich-text-editor.tsx wrapping CKEditor 5; ShareViaMailDialog now uses it instead of a contentEditable div, with email-body validation. Adds @ckeditor/ckeditor5-react + react-icons deps and transpilePackages: ["ckeditor5"] in next.config.ts (PR #376).
  • Sync to Payments (PTP): Single and bulk sync surfaced in MailDocuments.tsx with a sync icon and "Synced by {name}" tooltip; ptp.mutation.ts bulk hook now invalidates the mailDetails query cache after success (PRs #368, #375).
  • PDF viewer: PDFControls, PDFViewerCore, usePDFState reworked for inline -/100%/+ zoom (25%-300%), fit-to-width, orientation toggle, corrected page-nav icons, tooltips and aria-labels; viewer is dynamically imported in mail/document detail pages (PRs #369, #380).
  • Data grids: New truncated-text.tsx + useTruncateText for tooltip-on-truncate; debounced column-filter search; "N/A" shown for empty filter values; duplicate filter labels removed (PRs #364, #365, #367, #372).
  • Auth & shell: Redesigned responsive login page; new src/app/auth/redirect/page.tsx that waits for permissions before routing to /inbox; new BrandedLoader and route-level loading.tsx files unifying loading UI (PRs #379, #381, #382, #383, #385).
  • API URL standardization: Trailing slashes added to ~150 route definitions across 29 files in src/routes/ (query-string routes left unchanged) (PR #373).
  • Mail/Document detail tab state moved to URL search params; batch/mail/document add-and-edit modal UI refinements.

Risk & mitigation

Risk is moderate due to the breadth of changes (93 files, ~4,990 additions). The trailing-slash route change touches nearly every API call and could break any endpoint that does not tolerate a trailing slash; CKEditor adds a sizable client bundle and requires correct transpilation. Mitigation: changes are landing in QA (not production) for validation, query-string routes were deliberately excluded, the PDF viewer is dynamically imported to limit blast radius, and PTP bulk sync now invalidates cached mail details to avoid stale UI.

QA validation focus

  • Compose and send a shared email via the rich-text editor; verify formatting (bold/lists/headings/colors/image), required-body validation, and delivered content.
  • Sync documents to PTP from the mail Documents tab, single and bulk; confirm success toast, the "Synced by" indicator, and that mail details refresh without manual reload.
  • Exercise the PDF viewer: zoom in/out and exact %, fit-to-width, rotate/orientation, page navigation, tooltips, and keyboard/screen-reader labels.
  • Verify grid column filters: debounced search, empty values shown as "N/A", no duplicate filter labels; confirm long cell values truncate with a hover tooltip.
  • Smoke-test login and the new post-login redirect (permissions load before landing on Inbox; error path returns to login) and confirm branded loaders appear on slow navigations.
  • Regression-check core API calls across modules (mails, documents, batches, folders, resolution) to ensure trailing-slash URLs return data with no broken requests or redirect loops.