fix(ENG-2728): format connector categories the way the connectors page does - #206
Merged
adefreitas merged 3 commits intoSep 18, 2026
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
adefreitas
force-pushed
the
ENG-2728/category-filters-and-truncation
branch
from
September 18, 2026 13:55
4a137fc to
c00395c
Compare
…e does A long category wrapped the row onto two lines: `Project Management` is a provider-defined value and nothing capped it. The column is capped now and uses malachite's TruncatedTooltip, so the ellipsis is pure CSS and truncation is measured on hover rather than at mount. The dimmed colour sits outside the tooltip because text-overflow paints the ellipsis in the colour of the element carrying it, not of the text inside. The filter labels were a 68-line table of the categories we own, with anything absent falling through to its raw spelling. Connectors carry provider-defined categories, so that table could only ever be incomplete. Both the chips and the rows now format whatever the API reports, mirroring the connectors page in unified-cloud: compare on a normalised key, display an uppercased label. unified-cloud consults a CATEGORIES_MAP first, but every entry uppercases to the same string the formatter produces, so it is left out rather than copied as a no-op. That also collapses the duplicate filters. The API reports `hris` on two connectors and `HRIS` on a third, so the picker offered two identical HRIS chips, each filtering only its own spelling. One difference from unified-cloud is deliberate: its key only lowercases, which leaves `project_management` and `Project Management` as two keys rendering one label — the same bug in another spelling. The key here splits on separators first. The chips were also built from every integration while the list renders only those with `active` and a name, so a category carried solely by unrenderable connectors offered a filter that matched nothing. Both derive from one predicate now. The `unknown` category that prompted this is an API bug (ENG-2727) and is not fixed here; deriving chips from renderable connectors only stops it surfacing.
Through SecondaryText's own `size` prop rather than a font-size in the consumer, so it stays on the design system's scale: 14px to 12px. Side effect worth noting: at 12px `PROJECT MANAGEMENT` fits the capped column outright, so only the longer values truncate now. The tooltip still appears exactly where the text is cut off, which is the point of measuring rather than guessing at a character count.
PillButton's own `size` prop, 13px down to 11px and 28px down to 22px tall, so the strip takes less room and fits more categories before it scrolls. This is why the branch now sits on the malachite bump: `xsmall` reached PillButton in 2.22.0 and does not exist in the 0.67.2 this branch was cut against, where it fails to typecheck rather than silently rendering unstyled.
adefreitas
force-pushed
the
ENG-2728/category-filters-and-truncation
branch
from
September 18, 2026 13:59
c00395c to
9ec0b3f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes ENG-2728.
Three problems in the picker's category handling, all visible in the dev sandbox.
A long category wrapped the row.
Project Managementrendered over two lines and pushed the row out of shape.Filter labels were hardcoded.
shared/categories.tscarried a 68-lineCATEGORIES_WITH_LABELStable; anything absent fell through to its raw spelling. Connectors carry provider-defined categories now, so that table can only ever be incomplete.Case variants produced duplicate filters. The API reports
hrison Deel and Hibob butHRISon HiBob (with Webhooks) — two identicalHRISchips, each filtering only its own spelling, so neither showed the full set.Approach
Aligned with the connectors page in unified-cloud (
shared/utils/categories.ts), which already solved this: compare and group on a normalised key, display an uppercased label. Net −39 lines.unified-cloud consults a
CATEGORIES_MAPbefore formatting, but every entry there uppercases to the same string the formatter already produces (hris → 'HRIS' → 'HRIS'), so it is a no-op and is left out rather than duplicated here.One difference is deliberate: unified-cloud's key only lowercases, which leaves
project_managementandProject Managementas two keys rendering one label — the same duplicate-filter bug in another spelling. The key here splits on separators first, so those fold together. Worth mirroring upstream.Truncation uses malachite's
TruncatedTooltiprather than hand-rolled CSS: the ellipsis is pure CSS and the truncation check runs on hover, not at mount. The dimmed colour sits outside the tooltip, becausetext-overflowpaints the ellipsis in the colour of the element carrying it rather than the text within — nesting it the other way gave a two-tone ellipsis.Also fixed
The chips were built from every integration while the list renders only those passing
active && name. A category carried solely by unrenderable connectors offered a filter that matched nothing — clicking it gave "No integrations found". Both now derive from one shared predicate.Not fixed here
The
unknowncategory that prompted this is an API bug, tracked in ENG-2727. Deriving the chips from renderable connectors stops it surfacing in the picker; it does not fix the ten connectors the API returns with no name, type or logo.Verification
Driven in the dev sandbox, not just built: 19 rows unfiltered, filtering returns the right subsets (HRIS → 5, IAM → 3, STORAGE → 1), the tooltip shows the full value only when the text is actually cut off, and the console is clean.
Independent of the malachite bump in #205 —
TruncatedTooltipalready exists in 0.67.2, and this branch builds, typechecks and runs against it.Sizing (added after review feedback)
Row category 14px → 12px via
SecondaryText size="xsmall", and the filter chips 13px → 11px (28px → 22px tall) viaPillButton size="xsmall". Both through the components' own size props rather than font sizes in the consumer.At 12px
PROJECT MANAGEMENTfits the capped column outright, so only longer values such asKNOWLEDGE MANAGEMENTstill truncate. Verified by measuringscrollWidth > clientWidthper row — the same comparisonTruncatedTooltip'sshouldShowmakes — rather than by eye.12px is the floor of
SecondaryText's scale (FontSizestarts atxsmall), so anything smaller for the row text would need either a font size hard-coded in the consumer or a new size added to malachite.