Skip to content

feat(experimentation): rollout configuration step in experiment wizard#7859

Open
Zaimwa9 wants to merge 13 commits into
mainfrom
feat/implement-audience-gradual-rollout
Open

feat(experimentation): rollout configuration step in experiment wizard#7859
Zaimwa9 wants to merge 13 commits into
mainfrom
feat/implement-audience-gradual-rollout

Conversation

@Zaimwa9

@Zaimwa9 Zaimwa9 commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

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

Adds the Rollout configuration step to the Create Experiment wizard (before Metrics). Frontend only, pairs with the backend experiment_rollout contract in #7851.

  • Sample Size: a centred slider setting the percentage of eligible identities that enter the experiment.
  • Variation Split: editable per-variant weights (control takes the remainder, plus a "Split evenly" action). Weights default to the feature's live environment values, falling back to project defaults.
  • Rollout summary: a distribution bar (scaled variant arms plus a hatched "not released" area) with a legend, shown in the step and the Review step.
  • Wires the experiment_rollout payload into create: maps the control value to the backend's { type, value } shape; variant splits pass through as multivariate_feature_state_values.
  • Adds a reusable DistributionBar component and a pure, unit-tested rollout.ts util module.

How did you test this code?

  • Unit: rollout.test.ts covers split defaults, even split, control percentage, summary rows, traffic segments, and the control-value mapper.
  • Manual: walked the wizard end-to-end (slider, split editor with even split and weight cap enforced, summary and distribution bar, and the Review step), and confirmed experiment_rollout is posted on create.
image

Zaimwa9 added 13 commits June 22, 2026 12:07
- Slider: primary fill up to the handle, 50% width centred, floating value
  above the handle (removes the large readout)
- Variation split: row cards, Split evenly button, weight distribution bar,
  per-arm colours; drop variant value display; smaller weight inputs
- Derive initial split weights from the environment feature state, not just
  the project default allocation
- Add opt-in white prop to ContentCard and apply to wizard cards; add
  title/description spacing
- Copy: Choose -> Select
- Fix initial split weights: a zero environment override no longer masks the
  feature default (match the | | fallback used elsewhere)
- Slider track now 70% width; widen weight inputs so full numbers show
- ContentCard titles semi-bold
- Summary becomes a titleless grey callout with a people icon and bold
  variation names
- Update Sample Size copy; drop em dash from the bucketing note
… state and refine rollout step UX

- Fetch live environment feature state via getFeatureStates so variation weights seed from the per-environment allocations (the feature-list serializer omits multivariate_feature_state_values)
- Redesign rollout summary: coloured swatches per arm, time-to-significance note, line breaks
- Rework rollout slider: editable percentage input with inline % suffix, +/-5% steppers, clickable 0/25/50/75/100 ticks
- Update sample size copy
- Extract shared DistributionBar component (control/variation arms + hatched not-released area)
- Fold the traffic preview into the rollout summary as 'Rollout configuration': scaled bar with legend positioned under each segment showing the configured variant weight
- Simplify the slider: borderless percentage input with inline % suffix, remove +/-5% steppers
- Tidy sample size and summary copy
@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jun 24, 2026 9:15am
flagsmith-frontend-staging Ready Ready Preview, Comment Jun 24, 2026 9:15am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Jun 24, 2026 9:15am

Request Review

@Zaimwa9 Zaimwa9 requested a review from a team as a code owner June 24, 2026 09:14
@Zaimwa9 Zaimwa9 requested review from kyle-ssg and removed request for a team June 24, 2026 09:14
@Zaimwa9 Zaimwa9 requested a review from talissoncosta June 24, 2026 09:14
@Zaimwa9 Zaimwa9 removed the request for review from kyle-ssg June 24, 2026 09:14
@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jun 24, 2026
@github-actions github-actions Bot added the feature New feature or request label Jun 24, 2026
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Docker builds report

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

@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  33.1 seconds
commit  f327728
info  🔄 Run: #17764 (attempt 1)

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

passed  2 passed

Details

stats  2 tests across 2 suites
duration  43.7 seconds
commit  f327728
info  🔄 Run: #17764 (attempt 1)

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

passed  2 passed

Details

stats  2 tests across 2 suites
duration  33.4 seconds
commit  f327728
info  🔄 Run: #17764 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 3 suites
duration  57.6 seconds
commit  f327728
info  🔄 Run: #17764 (attempt 1)

@github-actions

Copy link
Copy Markdown
Contributor

Visual Regression

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants