feat(Segment membership inspection PoC): Surface identity counts in segments UI by khvn26 · Pull Request #7467 · Flagsmith/flagsmith

khvn26 · 2026-05-09T02:07:05Z

Thanks for submitting a PR! Please check the boxes below:

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

Contributes to #7464 (backend merged).

Surfaces the new Segment.memberships field on three places in the existing UI:

Project segments list — total-identity chip on each row.
Identities tab on the segment edit page — same chip next to the tab label.
Inside the Identities tab — per-env chip beside each option in the environment select; selecting an env reveals the full last_synced_at timestamp underneath.

Chip is count-only; a tooltip on hover surfaces N identities — last synced ~Xd ago.

Two small enabling changes outside the segments folder:

Shared Option in project-components.js now honours selectProps.formatOptionLabel when callers pass one (falls back to the existing label/description layout).
Drops !important on the global .chip align-self so the badge can opt into vertical centering inline.

Screenshots

Identity count chips in the Segments list:

Identity count chip on the Identities tab in the Segment page:

Per-environment chips:

Last sync date for selected environment:

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 memberships arrays into the segments responses. Verified the total badge on each row, the badge next to the Identities tab label, per-env chips inside the select options, the tooltip text on hover, and the full timestamp display on selection — including the Last synced: — placeholder before any selection.

Added one Playwright spec (e2e/tests/segment-membership-test.pw.ts) using page.route to stub memberships end-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.

claude

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.}

vercel · 2026-05-09T02:07:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	May 22, 2026 3:15pm
flagsmith-frontend-staging	Ready	Preview, Comment	May 22, 2026 3:15pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	May 22, 2026 3:15pm

github-actions · 2026-05-09T02:08:05Z

Docker builds report

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-api-test:pr-7467`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-e2e:pr-7467`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-api:pr-7467`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith:pr-7467`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-private-cloud:pr-7467`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-frontend:pr-7467`	Finished ✅	Results ✅

github-actions · 2026-05-09T02:14:48Z

Playwright Test Results (oss - depot-ubuntu-latest-16)

3 failed

Details

3 tests across 2 suites
41 seconds
a757fd1
📦 Artifacts: View test results and HTML report
🔄 Run: #16624 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

### Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

3 failed
1 passed

Details

4 tests across 3 suites
51.3 seconds
a757fd1
📦 Artifacts: View test results and HTML report
🔄 Run: #16624 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

### Playwright Test Results (oss - depot-ubuntu-latest-16)

3 failed

Details

3 tests across 2 suites
3.9 seconds
52bf43f
📦 Artifacts: View test results and HTML report
🔄 Run: #16945 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

### Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

3 failed

Details

3 tests across 2 suites
54.3 seconds
52bf43f
📦 Artifacts: View test results and HTML report
🔄 Run: #16945 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

github-actions · 2026-05-09T02:15:42Z

Visual Regression

19 screenshots compared. See report for details.
View full report

kyle-ssg · 2026-05-11T08:21:23Z

I feel like we could neaten up the badges by putting the word identities and ~x days ago into a descriptive tooltip like we do for override badges. Other than that it looks great!

khvn26 · 2026-05-11T08:28:40Z

@kyle-ssg The tooltips worked really badly with the tab and the environment select; that's how I came to dumping everything in the chip label. Besides that, I feel like last sync time is important info to surface before we switch to CDC / pure Snowflake lookups for counts.

Zaimwa9

2 comments on my side:

A subjective one related to the verbosity of the chip
As environments are central to those components, it looks to me that we have some room for typing improvements, if you agree on it we could have another pass there sooner than later

Zaimwa9 · 2026-05-11T08:21:08Z

+      <UsersIcon className='chip-svg-icon' />
+      <span>
+        {count}
+        {compact ? '' : ` ${noun}`}


I would either just get rid of mentioning "identities" as this badge has been already used or use compact everywhere (but it becomes dead code).
Regarding the last sync, this could be a tooltip on hover to not overload the UI

I'm also thinking that we'll need to display the breakdown per environment for the identities. Could be through the tooltip but we can discuss the obstacles you had implementing it

Addressed in f87b4eb — chip is now count-only, with N identities — last synced ~Xd ago in a hover tooltip.

Holding off on per-env breakdown in the tooltip — that breakdown is already one click away inside the Identities tab (each env option carries its own chip + tooltip), and a tooltip on the list row would grow unbounded with env count.

Zaimwa9 · 2026-05-11T08:28:45Z

+    return map
+  }, [memberships])
+
+  const renderEnvOption = (data: unknown) => {


We should be able to use data: EnvOption directly no ?

Addressed in edfb511 — lifted the option shape into EnvironmentSelectOption (exported from EnvironmentSelect.tsx) and renderEnvOption now takes it directly instead of casting from unknown. environment stays nullable on the shared type to match the showAll placeholder, with a guard in the segment renderer.

Zaimwa9 · 2026-05-11T08:35:55Z

+
+type EnvProps = {
+  membership: SegmentMembership
+  environment?: Environment


NIT typing: I feel like the environment should always be present in those components ? So it should be required here and cascaded in all these new components (e.g here)

Addressed in 8e80b52 — environment is now required on SegmentMembershipEnvBadge, dropping the ProjectStore.getEnvs() fallback. Both call sites already had the env in hand.

talissoncosta · 2026-05-22T14:18:09Z

is it ready for review @khvn26 ?

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

… tooltip Chip is now count-only; descriptive text (`N identities — last synced ~Xd ago`) lives in a tooltip on hover. The `compact` prop disappears since both call sites now render the same shape. beep boop

Env is always known at every call site, so drop the ProjectStore fallback that resolved it from `membership.environment`. The prop is now required. beep boop

…red option type Lifts the inline option shape out of EnvironmentSelect as EnvironmentSelectOption, then types the segment Identities-tab renderEnvOption argument directly instead of casting from `unknown`. beep boop

The previous regex required a literal '?', so the route mock never fired when RTK Query called /projects/<id>/environments/ with no params — the captured env list stayed empty and the test failed before its first assertion. beep boop

khvn26 · 2026-05-22T15:15:48Z

@kyle-ssg addressed in f87b4eb — chip is now count-only, identities + ~Xd ago live in a tooltip on hover (same style as the override badges you mentioned).

khvn26 requested a review from a team as a code owner May 9, 2026 02:07

khvn26 requested review from kyle-ssg and removed request for a team May 9, 2026 02:07

claude Bot reviewed May 9, 2026

View reviewed changes

github-actions Bot added front-end Issue related to the React Front End Dashboard feature New feature or request labels May 9, 2026

khvn26 changed the title ~~feat(segment_membership): Surface identity counts in segments UI~~ feat(Segment membership inspection PoC): Surface identity counts in segments UI May 9, 2026

talissoncosta mentioned this pull request May 10, 2026

exploratory-review(segment-membership-ui): proposed fixes for PR #7467 - #7475

Closed

4 tasks

khvn26 assigned khvn26 and kyle-ssg May 11, 2026

Zaimwa9 requested changes May 11, 2026

View reviewed changes

khvn26 force-pushed the feat/segment-membership-counts branch from 89e88f9 to 6e1584b Compare May 14, 2026 10:15

khvn26 requested review from a team as code owners May 14, 2026 10:15

khvn26 requested review from Zaimwa9 and removed request for a team May 14, 2026 10:15

Base automatically changed from feat/segment-membership-counts to main May 22, 2026 11:39

khvn26 added 5 commits May 22, 2026 16:13

refactor(Segment membership): Move identity noun and last-sync into a…

f87b4eb

… tooltip Chip is now count-only; descriptive text (`N identities — last synced ~Xd ago`) lives in a tooltip on hover. The `compact` prop disappears since both call sites now render the same shape. beep boop

refactor(Segment membership): Require environment on env badge

8e80b52

Env is always known at every call site, so drop the ProjectStore fallback that resolved it from `membership.environment`. The prop is now required. beep boop

khvn26 force-pushed the feat/segment-membership-counts-ui branch from a757fd1 to 52bf43f Compare May 22, 2026 15:15

vercel Bot deployed to Preview – flagsmith-frontend-staging May 22, 2026 15:15 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview May 22, 2026 15:15 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels May 22, 2026

Conversation

khvn26 commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

How did you test this code?

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

vercel Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

github-actions Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Details

Details

Details

Uh oh!

github-actions Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual Regression

Uh oh!

kyle-ssg commented May 11, 2026

Uh oh!

khvn26 commented May 11, 2026

Uh oh!

Zaimwa9 left a comment

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khvn26 May 22, 2026

Choose a reason for hiding this comment

Uh oh!

khvn26 May 22, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

khvn26 May 22, 2026

Choose a reason for hiding this comment

Uh oh!

Zaimwa9 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

khvn26 May 22, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta commented May 22, 2026

Uh oh!

khvn26 commented May 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

khvn26 commented May 9, 2026 •

edited

Loading

vercel Bot commented May 9, 2026 •

edited

Loading

github-actions Bot commented May 9, 2026 •

edited

Loading

github-actions Bot commented May 9, 2026 •

edited

Loading

github-actions Bot commented May 9, 2026 •

edited

Loading

Zaimwa9 May 11, 2026 •

edited

Loading