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)} >