From de7f6e035e74fa3a89dc4cdf1df992184d351797 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 5 Jan 2024 10:28:27 +0100
Subject: [PATCH] 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">
---
 .../NewFeatureStrategyForm.tsx                | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

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