You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat: show dependency status in Value tab and Dependencies tab badge - #8916
When a feature flag is served off because one or more of its prerequisites are not met, nothing in the Value tab indicates why. This PR addresses both items from the issue.
1. Warning banner in the Value tab
A Banner (type warning) appears at the top of the Value tab whenever the flag is blocked by unmet prerequisites. It directs the user to the Dependencies tab.
2. x/n met-count badge on the Dependencies tab
A small pill badge shows how many prerequisites are currently satisfied (e.g. 1/2). The badge only appears when there is at least one judged (system-segment) prerequisite. Hand-written segment edges whose operator cannot be inferred are excluded from the count.
How
prerequisiteState.ts - new countMetPrerequisites(rows) helper, counts judged rows only.
useDependencies.ts - optional skip param threads through to the RTK Query calls so the hook can be called safely before a feature is saved.
index.tsx (feature modal) - calls useDependencies with skip: !projectFlag.id. RTK Query serves both callers (modal and FeatureDependenciesTab) from the same cache with no extra request. Derives isBlockedByDependencies and prerequisitesMet, passes them to FeatureValueTab and the Dependencies TabItem.
FeatureValueTab.tsx - new optional isBlockedByDependencies prop; renders a Banner when true.
TabItem.tsx / TabButton.tsx - new optional tabBadge prop; rendered as a pill span next to the label, alongside the existing isDirty dot.
_tabs.scss - .btn-tab__badge pill style using existing tab design tokens.
When a flag is forced off by unmet prerequisites, show a warning
banner in the Value tab explaining why. Add an x/n met-count badge
to the Dependencies tab label so the status is visible without
opening the tab.
- Add `countMetPrerequisites` to prerequisiteState (judged rows only)
- Add optional `skip` to `useDependencies` for pre-create guards
- Add `tabBadge` prop to `TabItem` / `TabButton` with pill styling
- Add `isBlockedByDependencies` prop to `FeatureValueTab`
- Call `useDependencies` in the feature modal (RTK Query cache hit,
no extra request) to derive both signals and wire them up
ClosesFlagsmith#8855
The feature modal queries dependency rows for the current environment and feature. It derives the met prerequisite count and whether unmet prerequisites block the feature. The Value tab displays a warning when the feature is blocked. The Dependencies tab displays the met and total prerequisite count when available. The dependency hook can skip both dependency queries and feature-state loading.
The status display is mergeable with bounded follow-up: large projects can receive incorrect prerequisite warnings, and some warning paths lead to unavailable details. Initial loading no longer produces false warnings.
- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 5 remain after this review.
p=frontend/web/components/modals/create-feature
rg -n 'isDependenciesTabEnabled|return \(|isLoading|isError|FeatureDependenciesTab'"$p/index.tsx""$p/tabs/FeatureDependenciesTab/FeatureDependenciesTab.tsx""$p/tabs/FeatureValueTab.tsx"
nl -ba "$p/index.tsx"| sed -n '210,330p;580,665p;670,720p;745,810p;940,1035p'
nl -ba "$p/tabs/FeatureDependenciesTab/FeatureDependenciesTab.tsx"| sed -n '1,210p'
nl -ba "$p/tabs/FeatureDependenciesTab/prerequisiteState.ts"| sed -n '1,100p'
nl -ba "$p/tabs/FeatureDependenciesTab/__tests__/prerequisiteState.test.ts"| sed -n '1,125p'
Repository: Flagsmith/flagsmith
Length of output: 38576
Script executed:
nl -ba frontend/web/components/modals/create-feature/index.tsx | sed -n '450,590p'
nl -ba frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx | sed -n '245,275p;330,375p'
nl -ba frontend/web/components/navigation/TabMenu/TabItem.tsx
nl -ba frontend/web/components/navigation/TabMenu/TabButton.tsx | sed -n '1,100p'
Repository: Flagsmith/flagsmith
Length of output: 11204
Hide prerequisite status until the feature list is available.
If dependency edges load before the feature list, or the feature-list request fails, the modal can show 0/n and claim the flag is forced off even when its prerequisites are enabled. Suppress the badge and warning while prerequisite states are loading or unavailable.
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 0 remain after this review.
The reason will be displayed to describe this comment to others. Learn more.
Minor · Functional Correctness · Low value
Supported by static analysis
Script executed:
sed -n '85,145p' frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/FeatureDependenciesTab.tsx; sed -n '28,55p' frontend/web/components/modals/create-feature/tabs/FeatureDependenciesTab/hooks/usePrerequisites.tsx
Keep prerequisite details available when dependents fail.
When the dependents request fails, the Value tab can direct users to details that the Dependencies tab replaces with an error. Handle dependents loading and errors separately from prerequisite details, while keeping actions that require dependents gated.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Fixes #8855.
What
When a feature flag is served off because one or more of its prerequisites are not met, nothing in the Value tab indicates why. This PR addresses both items from the issue.
1. Warning banner in the Value tab
A
Banner(typewarning) appears at the top of the Value tab whenever the flag is blocked by unmet prerequisites. It directs the user to the Dependencies tab.2. x/n met-count badge on the Dependencies tab
A small pill badge shows how many prerequisites are currently satisfied (e.g.
1/2). The badge only appears when there is at least one judged (system-segment) prerequisite. Hand-written segment edges whose operator cannot be inferred are excluded from the count.How
prerequisiteState.ts- newcountMetPrerequisites(rows)helper, counts judged rows only.useDependencies.ts- optionalskipparam threads through to the RTK Query calls so the hook can be called safely before a feature is saved.index.tsx(feature modal) - callsuseDependencieswithskip: !projectFlag.id. RTK Query serves both callers (modal andFeatureDependenciesTab) from the same cache with no extra request. DerivesisBlockedByDependenciesandprerequisitesMet, passes them toFeatureValueTaband the DependenciesTabItem.FeatureValueTab.tsx- new optionalisBlockedByDependenciesprop; renders aBannerwhen true.TabItem.tsx/TabButton.tsx- new optionaltabBadgeprop; rendered as a pill span next to the label, alongside the existingisDirtydot._tabs.scss-.btn-tab__badgepill style using existing tab design tokens.