chore(1-3516): add release plan / strategy count to env header (#9589)

Adds an optional `environmentMetadata` property to the env header
component, which is used to populate the release plan / strategy
counter. If no env metadata is passed (such as for default strategy
configuration) nothing is rendered.


![image](https://github.com/user-attachments/assets/9be29a7a-aa11-46a4-87b4-4596c12552f6)

With long env names, the project name will be cut off before the chip:


![image](https://github.com/user-attachments/assets/0711972b-66d6-4874-9c47-0c4c768807ff)

There's some issues with narrow screens, but I'll handle that in a
follow-up:

![image](https://github.com/user-attachments/assets/0de8aeae-1025-4c7e-9fcb-86dd22952f97)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentHeader/EnvironmentHeader.tsx

@@ -36,15 +36,17 @@ const StyledHeader = styled('header')(({ theme }) => ({
 }));
 
 const StyledHeaderTitle = styled('hgroup')(({ theme }) => ({
-    display: 'flex',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
     flexDirection: 'column',
     flex: 1,
+    columnGap: theme.spacing(1),
 }));
 
 const StyledHeaderTitleLabel = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.text.secondary,
-    margin: 0,
+    gridColumn: '1/-1',
 }));
 
 const StyledTruncator = styled(Truncator)(({ theme }) => ({
@@ -52,14 +54,68 @@ const StyledTruncator = styled(Truncator)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightMedium,
 }));
 
+const StyledStrategyCount = styled('p')(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+    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;
+    environmentMetadata?: EnvironmentMetadata;
 } & AccordionSummaryProps;
 
+const MetadataChip = ({
+    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, ...props }) => {
+> = ({
+    environmentId,
+    children,
+    expandable = true,
+    environmentMetadata,
+    ...props
+}) => {
     const id = useId();
     return (
         <StyledAccordionSummary
@@ -79,6 +135,9 @@ export const EnvironmentHeader: FC<
                     <StyledTruncator component='h2'>
                         {environmentId}
                     </StyledTruncator>
+                    {environmentMetadata ? (
+                        <MetadataChip {...environmentMetadata} />
+                    ) : null}
                 </StyledHeaderTitle>
                 {children}
             </StyledHeader>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -66,7 +66,7 @@ export const FeatureOverviewEnvironment = ({
     metrics = { yes: 0, no: 0 },
     otherEnvironments = [],
 }: FeatureOverviewEnvironmentProps) => {
-    const [isOpen, setIsOopen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const { isOss } = useUiConfig();
@@ -83,9 +83,13 @@ export const FeatureOverviewEnvironment = ({
                 data-testid={`${FEATURE_ENVIRONMENT_ACCORDION}_${environment.name}`}
                 expanded={isOpen && hasActivations}
                 disabled={!hasActivations}
-                onChange={() => setIsOopen(isOpen ? !isOpen : hasActivations)}
+                onChange={() => setIsOpen(isOpen ? !isOpen : hasActivations)}
             >
                 <EnvironmentHeader
+                    environmentMetadata={{
+                        strategyCount: environment.strategies?.length ?? 0,
+                        releasePlanCount: environment.releasePlans?.length ?? 0,
+                    }}
                     environmentId={environment.name}
                     expandable={hasActivations}
                 >