feat: context values - implement multi-select dropdown on envs #6239

talissoncosta · 2025-11-04T01:30:11Z

Contributes to #5835

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

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?
I have used a Conventional Commit title for this Pull Request

Changes

Please describe.

How did you test this code?

Please describe.

Note

Adds multi-select for environment names (IN) and single-select (EQUAL/NOT_EQUAL) in segment rules, with cached condition values and minor UI/style tweaks.

Segments: Rules
- Input types: RuleConditionValueInput now uses MultiSelect for IN on $.environment.name and EnvironmentSelectDropdown for EQUAL/NOT_EQUAL; loads environment options via useGetEnvironmentsQuery and parses arrays with safeParseArray.
- State handling: Introduces useConditionCache to cache/restore condition values when changing operator/property; integrated into Rule.tsx.
- Hooks: Adds useConditionInputType and exports via hooks/index.ts; simplifies useRuleContext (removes env dropdown logic).
- UI: Refactors RuleConditionRow layout (grid classes), passes property to value input.
Components
- MultiSelect: Styling/behavior tweaks (24px chip height, w-100, smaller gaps, conditional components, className handling).
- Select wrapper: Preserves className on container.
Modals
- CreateSegmentRulesTabForm, CreateSegment, CreateSegmentUsersTabContent, AssociatedSegmentOverrides: Layout adjustments (responsive columns, col-4 env selects) and spacing tweaks.
Styles
- react-select: Use min-height for control; extensible value container unchanged; segment rule select width set to 100%.

^{Written by Cursor Bugbot for commit 006eb98. This will update automatically on new commits. Configure here.}

vercel · 2025-11-04T01:30:16Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview	Comment	Nov 6, 2025 1:16pm
flagsmith-frontend-staging	Ready	Preview	Comment	Nov 6, 2025 1:16pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ignored	Preview		Nov 6, 2025 1:16pm

talissoncosta · 2025-11-04T22:03:05Z

frontend/web/project/project-components.js


  render() {
-    const props = this.props
+    const { className, ...props } = this.props


We had an issue in here, className was being applied for the container and also for the Select component, passed as {...props}. Now I am extracting it to apply only for the container, that in my view was the goal in here.

frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx

cursor

Bug: Runtime error with undefined updates.value during split

Potential runtime error when changing to PERCENTAGE_SPLIT operator. If updates.value is undefined (when no prior conditions set it) or null (when hideValue was true), the expression updates.value?.toString().split(':')[0] will fail. The optional chaining updates.value?.toString() returns undefined when updates.value is null/undefined, and then calling .split(':') on undefined throws a TypeError. The code should check if updates.value exists before calling split, or handle the undefined case explicitly.

frontend/web/components/segments/Rule/Rule.tsx#L116-L117

flagsmith/frontend/web/components/segments/Rule/Rule.tsx

Lines 116 to 117 in 1af4e3e

…ptions

- Fix bug when change from IS_SET or IS_NOT_SET to Modulo, it was breaking the page

cursor

Bug: Guard Clause: Fix Nullo Value Split Failure

When changing operator to PERCENTAGE_SPLIT, if updates.value is null (which happens when changing from a hideValue operator), the expression updates.value?.toString().split(':')[0] will fail. The optional chaining ?. only short-circuits the toString() call, returning undefined, but then .split(':') is called on undefined which will throw a TypeError: "Cannot read property 'split' of undefined". The fix should chain the split call as well: updates.value?.toString()?.split(':')[0] or handle the null case explicitly before this block.

frontend/web/components/segments/Rule/Rule.tsx#L114-L115

flagsmith/frontend/web/components/segments/Rule/Rule.tsx

Lines 114 to 115 in c050b4c

    
           } else { 
        
             updates.value = updates.value?.toString().split(':')[0]

github-actions bot added front-end Issue related to the React Front End Dashboard feature New feature or request and removed feature New feature or request labels Nov 4, 2025

vercel bot deployed to Preview – flagsmith-frontend-staging November 4, 2025 21:43 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview November 4, 2025 21:43 View deployment

talissoncosta commented Nov 4, 2025

View reviewed changes

talissoncosta force-pushed the feat/multi-select-dropdown branch from 9b83d0f to de201f4 Compare November 4, 2025 22:21

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 4, 2025

vercel bot deployed to Preview – flagsmith-frontend-staging November 4, 2025 22:23 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview November 4, 2025 22:23 View deployment

talissoncosta force-pushed the feat/multi-select-dropdown branch from de201f4 to 1cd271f Compare November 4, 2025 22:41

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 4, 2025

vercel bot deployed to Preview – flagsmith-frontend-preview November 4, 2025 22:44 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 4, 2025 22:44 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 4, 2025

vercel bot deployed to Preview – flagsmith-frontend-preview November 4, 2025 23:08 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 4, 2025 23:08 View deployment

talissoncosta force-pushed the feat/multi-select-dropdown branch from 411d490 to 006eb98 Compare November 4, 2025 23:11

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 4, 2025

vercel bot deployed to Preview – flagsmith-frontend-preview November 4, 2025 23:14 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 4, 2025 23:14 View deployment

talissoncosta marked this pull request as ready for review November 4, 2025 23:17

talissoncosta requested a review from a team as a code owner November 4, 2025 23:17

talissoncosta removed the request for review from a team November 4, 2025 23:17

vercel bot deployed to Preview – flagsmith-frontend-staging November 5, 2025 23:27 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 5, 2025

cursor bot reviewed Nov 5, 2025

View reviewed changes

frontend/web/components/segments/Rule/components/RuleConditionValueInput.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – flagsmith-frontend-preview November 5, 2025 23:52 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 5, 2025 23:52 View deployment

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 5, 2025

vercel bot deployed to Preview – flagsmith-frontend-preview November 5, 2025 23:56 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 5, 2025 23:56 View deployment

talissoncosta force-pushed the feat/multi-select-dropdown branch from d000946 to 1af4e3e Compare November 6, 2025 00:23

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 6, 2025

cursor bot reviewed Nov 6, 2025

View reviewed changes

vercel bot deployed to Preview – flagsmith-frontend-preview November 6, 2025 00:25 View deployment

vercel bot deployed to Preview – flagsmith-frontend-staging November 6, 2025 00:25 View deployment

talissoncosta added 8 commits November 6, 2025 09:24

feat: add multi-select on envs and refactor layout

ceb8d2e

refactor: extract logic and clean up

faeb398

fix: prevent breaking input on multi-select

e73c3b3

refactor: split components into smaller files and keep the selected o…

690b450

…ptions

fix: fix operation transitions values

634ec1f

- Fix bug when change from IS_SET or IS_NOT_SET to Modulo, it was breaking the page

fix: use button to handle tag removal

df38578

feat: update placeholder

33cf11d

feat: add inline prop on multi-select and handle it as text

c050b4c

talissoncosta force-pushed the feat/multi-select-dropdown branch from 1af4e3e to c050b4c Compare November 6, 2025 13:13

github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 6, 2025

vercel bot deployed to Preview – flagsmith-frontend-staging November 6, 2025 13:16 View deployment

vercel bot deployed to Preview – flagsmith-frontend-preview November 6, 2025 13:16 View deployment

cursor bot reviewed Nov 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: context values - implement multi-select dropdown on envs #6239

feat: context values - implement multi-select dropdown on envs #6239

talissoncosta commented Nov 4, 2025 •

edited by cursor bot

Loading

Uh oh!

vercel bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

talissoncosta Nov 4, 2025

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	} else {
	updates.value = updates.value?.toString().split(':')[0]

feat: context values - implement multi-select dropdown on envs #6239

Are you sure you want to change the base?

feat: context values - implement multi-select dropdown on envs #6239

Conversation

talissoncosta commented Nov 4, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

vercel bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

talissoncosta Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Runtime error with undefined updates.value during split

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Guard Clause: Fix Nullo Value Split Failure

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

talissoncosta commented Nov 4, 2025 •

edited by cursor bot

Loading

vercel bot commented Nov 4, 2025 •

edited

Loading