From 9696b412229d449b656e42e0368bc12d1431b224 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 21 Mar 2025 09:27:21 +0100
Subject: [PATCH] Set up count text

---
 .../EnvironmentHeader/EnvironmentHeader.tsx   | 59 ++++++++++++++-----
 .../FeatureOverviewEnvironment.tsx            |  5 +-
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx
index 613027248a..eddb506ec1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx
@@ -54,35 +54,66 @@ const StyledTruncator = styled(Truncator)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightMedium,
 }));
 
-const StyledStrategyCount = styled('p', {
-    shouldForwardProp: (prop) => prop !== 'count',
-})<{ count: number }>(({ theme, count }) => ({
+const StyledStrategyCount = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
-    color:
-        count > 0
-            ? theme.palette.info.contrastText
-            : theme.palette.text.secondary,
-    backgroundColor:
-        count > 0 ? theme.palette.info.light : theme.palette.neutral.light,
+    color: theme.palette.info.contrastText,
+    backgroundColor: theme.palette.info.light,
     whiteSpace: 'nowrap',
     width: 'min-content',
     borderRadius: theme.shape.borderRadiusExtraLarge,
     padding: theme.spacing(0.5, 1),
 }));
 
+const NeutralStrategyCount = styled(StyledStrategyCount)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.neutral.light,
+}));
+
+type EnvironmentMetadata = {
+    strategyCount: number;
+    releasePlanCount: number;
+};
+
 type EnvironmentHeaderProps = {
     environmentId: string;
     expandable?: boolean;
-    strategyCount?: number;
+    environmentMetadata: EnvironmentMetadata;
 } & AccordionSummaryProps;
 
+const StrategyCount = ({
+    strategyCount,
+    releasePlanCount,
+}: EnvironmentMetadata) => {
+    if (strategyCount === 0 && releasePlanCount === 0) {
+        return <NeutralStrategyCount>0 strategies added</NeutralStrategyCount>;
+    }
+
+    const releasePlanText = releasePlanCount > 0 ? 'Release plan' : undefined;
+
+    const strategyText = () => {
+        switch (strategyCount) {
+            case 0:
+                return undefined;
+            case 1:
+                return `1 strategy`;
+            default:
+                return `${strategyCount} strategies`;
+        }
+    };
+
+    const text = `${[releasePlanText, strategyText()].filter(Boolean).join(', ')} added`;
+
+    return <StyledStrategyCount>{text}</StyledStrategyCount>;
+};
+
 export const EnvironmentHeader: FC<
     PropsWithChildren<EnvironmentHeaderProps>
 > = ({
     environmentId,
     children,
     expandable = true,
-    strategyCount,
+    environmentMetadata,
     ...props
 }) => {
     const id = useId();
@@ -104,10 +135,8 @@ export const EnvironmentHeader: FC<
                     <StyledTruncator component='h2'>
                         {environmentId}
                     </StyledTruncator>
-                    {typeof strategyCount === 'number' ? (
-                        <StyledStrategyCount count={strategyCount}>
-                            {strategyCount} strategies added
-                        </StyledStrategyCount>
+                    {environmentMetadata ? (
+                        <StrategyCount {...environmentMetadata} />
                     ) : null}
                 </StyledHeaderTitle>
                 {children}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 5cd7cda22a..8ba0dbb1c9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -86,7 +86,10 @@ export const FeatureOverviewEnvironment = ({
                 onChange={() => setIsOpen(isOpen ? !isOpen : hasActivations)}
             >
                 <EnvironmentHeader
-                    strategyCount={environment.strategies?.length}
+                    environmentMetadata={{
+                        strategyCount: environment.strategies?.length ?? 0,
+                        releasePlanCount: environment.releasePlans?.length ?? 0,
+                    }}
                     environmentId={environment.name}
                     expandable={hasActivations}
                 >