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 3cc872b2e1..80d490b570 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
@@ -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 0 strategies added;
+ }
+
+ 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 {text};
+};
+
export const EnvironmentHeader: FC<
PropsWithChildren
-> = ({ environmentId, children, expandable = true, ...props }) => {
+> = ({
+ environmentId,
+ children,
+ expandable = true,
+ environmentMetadata,
+ ...props
+}) => {
const id = useId();
return (
{environmentId}
+ {environmentMetadata ? (
+
+ ) : null}
{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 3d46d26eac..8ba0dbb1c9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/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)}
>