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 25, 2026 3:28pm
flagsmith-frontend-staging	Ready	Preview, Comment	May 25, 2026 3:28pm

1 Skipped Deployment

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

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

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

3 failed

Details

3 tests across 2 suites
41 seconds
3b6c7d5
📦 Artifacts: View test results and HTML report
🔄 Run: #16950 (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
50.6 seconds
3b6c7d5
📦 Artifacts: View test results and HTML report
🔄 Run: #16950 (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)

2 failed

Details

2 tests across 2 suites
51.7 seconds
2dfbb7b
📦 Artifacts: View test results and HTML report
🔄 Run: #16951 (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

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

3 failed

Details

3 tests across 2 suites
44.3 seconds
2dfbb7b
📦 Artifacts: View test results and HTML report
🔄 Run: #16951 (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)

1 passed

Details

1 test across 1 suite
37.4 seconds
a4f7dff
🔄 Run: #16953 (attempt 1)

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

2 passed

Details

2 tests across 2 suites
38.9 seconds
a4f7dff
🔄 Run: #16953 (attempt 1)

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

1 passed

Details

1 test across 1 suite
43.6 seconds
a4f7dff
🔄 Run: #16953 (attempt 1)

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

1 passed

Details

1 test across 1 suite
1 minute, 6 seconds
a4f7dff
🔄 Run: #16953 (attempt 1)

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

1 passed

Details

1 test across 1 suite
35.4 seconds
a9f61b5
🔄 Run: #16954 (attempt 1)

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

1 passed

Details

1 test across 1 suite
43.9 seconds
a9f61b5
🔄 Run: #16954 (attempt 1)

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

2 passed

Details

2 tests across 2 suites
30 seconds
a9f61b5
🔄 Run: #16954 (attempt 1)

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

3 passed

Details

3 tests across 3 suites
40.6 seconds
a9f61b5
🔄 Run: #16954 (attempt 1)

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

1 passed

Details

1 test across 1 suite
32.2 seconds
9abd456
🔄 Run: #16983 (attempt 1)

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

1 passed

Details

1 test across 1 suite
44.1 seconds
9abd456
🔄 Run: #16983 (attempt 1)

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

3 passed

Details

3 tests across 3 suites
50.1 seconds
9abd456
🔄 Run: #16983 (attempt 1)

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

3 passed

Details

3 tests across 3 suites
37.3 seconds
9abd456
🔄 Run: #16983 (attempt 1)

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

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-22T18:10:26Z

@talissoncosta Sorry, not quite ready yet — I'd like to fix the backend on staging first so the E2E test is more honest.

talissoncosta · 2026-05-22T18:12:24Z

No rush, take your time, lmk when I can have a look on it.

The spec stubbed `memberships` into staging segment responses via `page.route`, so all the value of the test came from data the test itself injected. Dropping it removes the synthetic-data plumbing from CI and lets the real coverage land alongside the backend change that populates memberships for real. beep boop

khvn26 · 2026-05-22T18:38:01Z

@talissoncosta I've decided to remove the E2E test, thus unblocking this PR. This is now ready for a re-review.

500ms is the right default for tooltips on hover-as-help-text controls, but the membership chip carries the canonical count + sync time and people will hover it deliberately. 100ms feels responsive while still filtering pass-through hovers. Default stays at 500ms for every other caller. beep boop

talissoncosta

Looks pretty good @khvn26 ! Good job! Just some minor comments, not blocking at all, but If you can clarify them before moving forward I would really appreciate it.

Drops the `ProjectStore.getEnvs()` flux read in favour of `useGetEnvironmentsQuery`. The legacy store was the last caller-side holdout in this component; everything else already runs through RTK Query. beep boop

Comments have been addressed.

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 previously requested changes May 11, 2026

View reviewed changes

Comment thread frontend/web/components/segments/SegmentMembershipBadge.tsx Outdated

Comment thread frontend/web/components/modals/CreateSegmentUsersTabContent.tsx Outdated

Comment thread frontend/web/components/segments/SegmentMembershipBadge.tsx Outdated

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

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

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

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

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

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

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

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

talissoncosta reviewed May 22, 2026

View reviewed changes

Comment thread frontend/web/components/modals/CreateSegmentUsersTabContent.tsx Outdated

talissoncosta reviewed May 22, 2026

View reviewed changes

Comment thread frontend/web/components/segments/SegmentMembershipBadge.tsx

talissoncosta reviewed May 22, 2026

View reviewed changes

Comment thread frontend/web/components/modals/CreateSegmentUsersTabContent.tsx

talissoncosta reviewed May 22, 2026

View reviewed changes

refactor(CreateSegmentUsersTabContent): Resolve envs via RTK Query

9abd456

Drops the `ProjectStore.getEnvs()` flux read in favour of `useGetEnvironmentsQuery`. The legacy store was the last caller-side holdout in this component; everything else already runs through RTK Query. beep boop

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

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

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

khvn26 requested a review from talissoncosta May 25, 2026 15:30

talissoncosta approved these changes May 25, 2026

View reviewed changes

khvn26 merged commit f3c68f2 into main May 25, 2026
28 of 29 checks passed

khvn26 deleted the feat/segment-membership-counts-ui branch May 25, 2026 17:26

flagsmithdev mentioned this pull request May 25, 2026

chore(main): release 2.235.0 #7561

Open

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

Details

Details

Details

Details

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

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!

Uh oh!

Uh oh!

Uh oh!

talissoncosta commented May 22, 2026

Uh oh!

khvn26 commented May 22, 2026

Uh oh!

talissoncosta commented May 22, 2026

Uh oh!

khvn26 commented May 22, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

talissoncosta left a comment

Choose a reason for hiding this comment

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