feat: label variant key UI

[Zaimwa9]

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 UI to set a label on multivariate variants (maps to the backend key field) and revamps the variants section of the feature modal's Value tab.

Variant labels

• Each variant shows an inline-editable label (slug characters only, max 255, control reserved, unique per feature).
• New variants get a default label (Variant_n, first free number) that is persisted on save; existing variants with no key fall back to a display-only placeholder.
• No save-flow changes — the key persists through the existing writable /mv-options/ endpoint.

Improvements

• Added error management at the MV option level (returning invalid key or duplicated one)
• Error message appears in card
• Success response from MV options update only are also showing a success toast and updating the edition colorswatch

Variants UI revamp

• Each variant renders in a bordered, shadowed card: label header with a "Not saved" chip + delete icon.
• "Variants" section header with a primary "+ Add variant" button (outline "Create A/B/n Test" when none exist), and a tooltip explaining labels are required for experiments (behind experimental_flags).
• Control Value title shows the control percentage as a chip.
• Input gains reusable underline and centered props; aligned the value editor height with adjacent inputs.

Experiment setup page

• The variations table shows the variant label/key as the name and drops the unused Description column; ContentCard gains a description prop used by the setup step.

How did you test this code?

• Extended the E2E flag test: editVariantLabel edits a variant's label via the new UI, saves, reopens the modal, and asserts persistence. Audited existing selectors (add-variation, featureVariationValue*, featureVariationWeight*, delete-multivariate) for compatibility with the new layout.
• Added Storybook stories for the new Input variants (Underline, UnderlineCentered).
• Manually, against a local API:
  1. Create a multivariate feature; add variants — they default to Variant_1, Variant_2…
  2. Rename a label; verify validation (spaces, control, duplicates rejected with inline errors) and the "Not saved" chip appearing only on edited variants.
  3. Save, reopen — labels persist; clear a label — it saves as null and the placeholder returns.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jun 12, 2026 11:55am
flagsmith-frontend-staging	Ready	Preview, Comment	Jun 12, 2026 11:55am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jun 12, 2026 11:55am

[github-actions]

Docker builds report

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

[github-actions]

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

 1 passed

Details

 1 test across 1 suite
 40.6 seconds
 63dab47
 🔄 Run: #17381 (attempt 1)

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

 1 failed

Details

 1 test across 1 suite
 22 seconds
 63dab47
 📦 Artifacts: View test results and HTML report
🔄 Run: #17381 (attempt 1)

Failed tests

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-16)

 2 passed

Details

 2 tests across 2 suites
 31.5 seconds
 63dab47
 🔄 Run: #17381 (attempt 1)

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

 3 passed

Details

 3 tests across 3 suites
 41.7 seconds
 63dab47
 🔄 Run: #17381 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 44.8 seconds
 63dab47
 🔄 Run: #17381 (attempt 2)

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

 1 passed

Details

 1 test across 1 suite
 38 seconds
 385dfbe
 🔄 Run: #17394 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 41.8 seconds
 385dfbe
 🔄 Run: #17394 (attempt 1)

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

 3 passed

Details

 3 tests across 3 suites
 44 seconds
 385dfbe
 🔄 Run: #17394 (attempt 1)

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

 2 passed

Details

 2 tests across 2 suites
 39.1 seconds
 385dfbe
 🔄 Run: #17394 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 37 seconds
 b50a56d
 🔄 Run: #17395 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 43.6 seconds
 b50a56d
 🔄 Run: #17395 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 42.5 seconds
 b50a56d
 🔄 Run: #17395 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 46.1 seconds
 b50a56d
 🔄 Run: #17395 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 39.7 seconds
 b50a56d
 🔄 Run: #17396 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 34.5 seconds
 b50a56d
 🔄 Run: #17396 (attempt 1)

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

 3 failed

Details

 3 tests across 3 suites
 22.7 seconds
 b50a56d
 📦 Artifacts: View test results and HTML report
🔄 Run: #17396 (attempt 1)

Failed tests

firefox › tests/change-request-test.pw.ts › Change Request Tests › Change requests can be created, approved, and published with 4-eyes approval @enterprise
firefox › tests/roles-test.pw.ts › Roles Tests › Roles can be created with project and environment permissions @enterprise
firefox › tests/sso-test.pw.ts › SCIM Tests › SCIM configuration can be created, regenerated, and deleted @enterprise

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

 1 passed

Details

 1 test across 1 suite
 36.9 seconds
 b50a56d
 🔄 Run: #17396 (attempt 2)

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

 1 passed

Details

 1 test across 1 suite
 43.6 seconds
 b50a56d
 🔄 Run: #17396 (attempt 3)

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

 2 passed

Details

 2 tests across 2 suites
 31.9 seconds
 b50a56d
 🔄 Run: #17396 (attempt 3)

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

 2 passed

Details

 2 tests across 2 suites
 58.3 seconds
 b50a56d
 🔄 Run: #17396 (attempt 3)

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

 1 passed

Details

 1 test across 1 suite
 40.4 seconds
 5df610c
 🔄 Run: #17398 (attempt 1)

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

 3 failed

Details

 3 tests across 3 suites
 23.1 seconds
 5df610c
 📦 Artifacts: View test results and HTML report
🔄 Run: #17398 (attempt 1)

Failed tests

firefox › tests/change-request-test.pw.ts › Change Request Tests › Change requests can be created, approved, and published with 4-eyes approval @enterprise
firefox › tests/roles-test.pw.ts › Roles Tests › Roles can be created with project and environment permissions @enterprise
firefox › tests/sso-test.pw.ts › SCIM Tests › SCIM configuration can be created, regenerated, and deleted @enterprise

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

 1 passed

Details

 1 test across 1 suite
 38.2 seconds
 1adfffb
 🔄 Run: #17399 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 42.2 seconds
 0450804
 🔄 Run: #17422 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 30.9 seconds
 0450804
 🔄 Run: #17422 (attempt 1)

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

 2 passed

Details

 2 tests across 2 suites
 36.9 seconds
 0450804
 🔄 Run: #17422 (attempt 1)

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

 1 failed

Details

 1 test across 1 suite
 25.5 seconds
 0450804
 📦 Artifacts: View test results and HTML report
🔄 Run: #17422 (attempt 1)

Failed tests

firefox › tests/flag-tests.pw.ts › Flag Tests › Feature flags can be created, toggled, edited, and deleted across environments @oss

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

 3 passed

Details

 3 tests across 3 suites
 33.9 seconds
 2e97970
 🔄 Run: #17432 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 42.9 seconds
 2e97970
 🔄 Run: #17432 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 37.1 seconds
 2e97970
 🔄 Run: #17432 (attempt 1)

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

 2 passed

Details

 2 tests across 2 suites
 41.3 seconds
 2e97970
 🔄 Run: #17432 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 41.2 seconds
 ccbbed9
 🔄 Run: #17464 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 43.3 seconds
 ccbbed9
 🔄 Run: #17464 (attempt 1)

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

 2 passed

Details

 2 tests across 2 suites
 59.9 seconds
 ccbbed9
 🔄 Run: #17464 (attempt 1)

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

 1 passed

Details

 1 test across 1 suite
 53.7 seconds
 ccbbed9
 🔄 Run: #17464 (attempt 1)

[github-actions]

Visual Regression

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

[Zaimwa9]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces the ability to define and edit stable, human-readable keys (labels) for multivariate feature variations in the UI. It refactors the feature modal's variation tab to display variants as cards, adds inline editing for variant labels, and tracks unsaved changes with a 'Not saved' badge. Additionally, it updates the Input and ContentCard components, adds corresponding Storybook stories, and includes Playwright E2E tests. The review feedback highlights three key improvements: ensuring unique default variant names by accounting for fallback display names, normalizing null and undefined values to prevent false positives on the 'Not saved' badge, and falling back to an empty string for cleared weight inputs to avoid React controlled-to-uncontrolled warnings.

[Zaimwa9]

/gemini review

[Zaimwa9]

@gemini can you please have a thorough look of the data flow from the creation of a multivariate option, it's initial creation (POST) request and a direct update (PUT) without any full refresh

[talissoncosta]

Looks pretty @Zaimwa9 .

Thanks for addressing the new design and writing the stories.
I caught this on storybook:

1. The input underlined variant does not work well on dark mode yet. Do you mind double check that ?

Overall looks great!