feat: add badges to the new strategy configuration form (#5773)

This PR adds badges to display the amount of variants and constraints /
segments.

<img width="778" alt="Skjermbilde 2024-01-05 kl 10 12 39"
src="https://github.com/Unleash/unleash/assets/16081982/3a188d46-7d2f-4fa2-b2a9-e64a59d5ef09">

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 (
         <>
             <StyledHeaderBox>
@@ -357,9 +372,25 @@ export const NewFeatureStrategyForm = ({
                 ) : null}
             </StyledHeaderBox>
             <StyledTabs value={tab} onChange={handleChange}>
-                <Tab label='General' />
+                <StyledTab label='General' />
-                <Tab label='Targeting' />
+                <Tab
-                <Tab label='Variants' />
+                    label={
+                        <Typography>
+                            Targeting
+                            <StyledBadge>{getTargetingCount()}</StyledBadge>
+                        </Typography>
+                    }
+                />
+                <Tab
+                    label={
+                        <Typography>
+                            Variants
+                            <StyledBadge>
+                                {strategy.variants?.length}
+                            </StyledBadge>
+                        </Typography>
+                    }
+                />
             </StyledTabs>
             <StyledForm onSubmit={onSubmitWithValidation}>
                 <ConditionallyRender