All updates
ProductionQAFrontend

Inbox grid: view-all-labels modal and truncated long names in detail headers

PR #414shoumikssahuSep 16, 2025 · 07:13 UTC
QASep 16, 2025
ProductionSep 16, 2025

Executive summary

The inbox grid now renders multi-value columns (such as labels) through a shared badge component whose overflow indicator opens a 'view all' dialog, so users can see every value behind a +N chip instead of just the first two. Document- and mail-detail headers also now truncate long document and file names cleanly. This reached the QA/testing environment.

Why this was needed

Previously the inbox grid clipped multi-value (array) columns to the first two badges with a bare +N indicator that did nothing, so any additional values were hidden with no way to reveal them. The badge rendering was also duplicated inline in the grid rather than reusing the existing shared ArrayBadges component. Separately, very long document and file names overflowed their badge/header areas in the detail views.

Client / user impact

Users can now click the +N chip on inbox grid columns (e.g. labels) to open a dialog listing all values for that row, rather than only seeing the first two. Clicks inside that dialog no longer leak through to the underlying grid row. Long document names (Document Details) and attachment file names (Mail Details) are now truncated to a readable length, keeping the detail headers tidy.

Technical scope

  • Merges feature branch DA-108 ("Add modal to view all labels in InboxGrid", PR #413) into the QA line.
  • InboxGrid/columns.tsx: replaces the inline two-badge + +N markup for array columns with the shared ArrayBadges component (maxItems={2}, dialog title derived from the column header), preserving overdue/unread styling via badgeClassName/countBadgeClassName.
  • common/array-badges.tsx: count chip switched to secondary variant, new countBadgeClassName prop (replaces removed showMoreText; chip now shows just +N); added stopPropagation on the dialog content (onClick/onPointerDown) and Close button so interactions don't bubble to the grid row.
  • documents/[id]/page.tsx and mails/[id]/page.tsx: wrap document name and selected file name in a TruncatedText component with maxChars={50}.
  • Minor type chore: loosens NavItem.onModuleSelect and UserMenu.user props to any and adds no-explicit-any eslint-disable headers on two detail pages.

Risk & mitigation

Low risk and UI-only; no API or data-flow changes. The main regression surface is the reworked array-column rendering in the inbox grid and the new event-propagation guards. The loosening of two prop types to any slightly reduces type safety but does not alter runtime behavior. Mitigation: focused QA on grid label columns and the detail headers; the change is isolated to frontend presentation.

QA validation focus

  • In the inbox grid, confirm columns with more than two values show two badges plus a +N chip, and clicking the chip opens a dialog listing all values.
  • Verify clicking inside the dialog or its Close button does not also trigger the row's click action (e.g. navigation/selection).
  • Check badge styling still reflects overdue (red) and unread (bold/primary) states.
  • Open a document with a long name (Document Details) and a mail with a long attachment file name (Mail Details); confirm names truncate cleanly without breaking the header layout.
  • Regression-check sidebar nav items and the user menu still render and function normally.