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}
+
+
+ }
+ />