diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx index 9d563ab6c1..b997ab139c 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx @@ -170,6 +170,14 @@ const EnvironmentTypographyHeader = styled(Typography)(({ theme }) => ({ color: theme.palette.text.secondary, })); +const StyledTab = styled(Tab)(({ theme }) => ({ + width: '100px', +})); + +const StyledBadge = styled(Badge)(({ theme }) => ({ + marginLeft: theme.spacing(1), +})); + const feedbackCategory = 'newStrategyForm'; export const NewFeatureStrategyForm = ({ @@ -324,6 +332,13 @@ export const NewFeatureStrategyForm = ({ setTab(newValue); }; + const getTargetingCount = () => { + const constraintCount = strategy.constraints?.length || 0; + const segmentCount = segments.length || 0; + + return constraintCount + segmentCount; + }; + return ( <> @@ -357,9 +372,25 @@ export const NewFeatureStrategyForm = ({ ) : null} - - - + + + Targeting + {getTargetingCount()} + + } + /> + + Variants + + {strategy.variants?.length} + + + } + />