feat(segment_membership): Surface identity counts in segments UI#7467
feat(segment_membership): Surface identity counts in segments UI#7467khvn26 wants to merge 1 commit intofeat/segment-membership-countsfrom
Conversation
Adds two reusable badges sourced from the Segment.memberships field: - SegmentMembershipTotalBadge: aggregates counts across environments and shows the most recent sync time as a relative interval. Rendered on each segment row in the project segments list (with the "identities" noun) and next to the Identities tab label on the segment edit page (compact, count + sync only). - SegmentMembershipEnvBadge: per-env count, rendered as the option label inside the Identities tab's environment select. Selecting an environment in the Identities tab displays the full last_synced_at timestamp underneath the select; before any selection the row stays in place as a placeholder. The shared Option component in project-components now honours selectProps.formatOptionLabel when callers provide one, falling back to the existing label/description layout. Drops the !important on the chip's align-self so badges can opt into vertical centering inline. beep boop
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
front-end
Docker builds report
|
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Failed testsfirefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
Details
Failed testsfirefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss |
Visual Regression16 screenshots compared. See report for details. |
1 participant
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #7464 (stacked on top — review after backend PR).
Surfaces the new
Segment.membershipsfield on three places in the existing UI:last_synced_attimestamp underneath.Two small enabling changes outside the segments folder:
Optioninproject-components.jsnow honoursselectProps.formatOptionLabelwhen callers pass one (falls back to the existing label/description layout).!importanton the global.chipalign-selfso the badge can opt into vertical centering inline.How did you test this code?
Manually drove the segments list, segment edit page, and the Identities tab in a local dev server pointed at staging, with a fetch interceptor injecting synthetic
membershipsarrays into the segments responses (since the backend gate is off). Verified the total badge on each row, the compact badge next to the Identities tab label vertically centered with the label text, per-env chips inside the select options, and the full timestamp display on selection — including theLast synced: —placeholder before any selection.Added one Playwright spec (
e2e/tests/segment-membership-test.pw.ts) usingpage.routeto stubmembershipsend-to-end against a real seeded segment, asserting the total badge in the list, the badge on the tab, per-env badges in the select, and the full-timestamp line on selection.