Inbox grid: view-all-labels modal and truncated long names in detail headers
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 ++Nmarkup for array columns with the sharedArrayBadgescomponent (maxItems={2}, dialog title derived from the column header), preserving overdue/unread styling viabadgeClassName/countBadgeClassName.common/array-badges.tsx: count chip switched tosecondaryvariant, newcountBadgeClassNameprop (replaces removedshowMoreText; chip now shows just+N); addedstopPropagationon the dialog content (onClick/onPointerDown) and Close button so interactions don't bubble to the grid row.documents/[id]/page.tsxandmails/[id]/page.tsx: wrap document name and selected file name in aTruncatedTextcomponent withmaxChars={50}.- Minor type chore: loosens
NavItem.onModuleSelectandUserMenu.userprops toanyand addsno-explicit-anyeslint-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
+Nchip, 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.