diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index a9da09ae141e..da3c0b75b346 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -1,5 +1,5 @@ import { styled } from '@mui/material'; -import { FeatureLifecycleStageIcon } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon'; +import { FeatureLifecycleStageIcon } from 'component/common/FeatureLifecycle/FeatureLifecycleStageIcon'; import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus'; import useLoading from 'hooks/useLoading'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; @@ -9,10 +9,13 @@ import type { ProjectStatusSchemaLifecycleSummary } from 'openapi'; import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; import { lifecycleMessages } from './LifecycleMessages'; import InfoIcon from '@mui/icons-material/Info'; +import { useUiFlag } from 'hooks/useUiFlag'; +import { getFeatureLifecycleName } from 'component/common/FeatureLifecycle/getFeatureLifecycleName'; const LifecycleBoxContent = styled('div')(({ theme }) => ({ padding: theme.spacing(2), - gap: theme.spacing(4), + gap: theme.spacing(2), + minHeight: '100%', display: 'flex', flexFlow: 'column', justifyContent: 'space-between', @@ -96,6 +99,10 @@ const Stats = styled('dl')(({ theme }) => ({ }, })); +const StyledStageTitle = styled('span')(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, +})); + const NoData = styled('span')({ fontWeight: 'normal', }); @@ -134,21 +141,41 @@ const BigNumber: FC<{ value?: number }> = ({ value }) => { ); }; + export const ProjectLifecycleSummary = () => { const projectId = useRequiredPathParam('projectId'); const { data, loading } = useProjectStatus(projectId); + const isLifecycleImprovementsEnabled = useUiFlag('lifecycleImprovements'); const loadingRef = useLoading( loading, '[data-loading-project-lifecycle-summary=true]', ); + const flagWord = (stage: keyof ProjectStatusSchemaLifecycleSummary) => { - if (data?.lifecycleSummary[stage].currentFlags === 1) { - return 'flag'; - } else { - return 'flags'; + const hasOneFlag = data?.lifecycleSummary[stage].currentFlags === 1; + + if (hasOneFlag) { + return isLifecycleImprovementsEnabled ? 'Flag' : 'flag'; } + + return isLifecycleImprovementsEnabled ? 'Flags' : 'flags'; + }; + + const stageName = (stage: keyof ProjectStatusSchemaLifecycleSummary) => { + if (!isLifecycleImprovementsEnabled) { + return `${flagWord('initial')} in ${stage}`; + } + + const lifecycleStageName = stage === 'preLive' ? 'pre-live' : stage; + return ( + + {flagWord(stage)} in{' '} + {getFeatureLifecycleName(lifecycleStageName)} stage + + ); }; + return ( @@ -163,7 +190,7 @@ export const ProjectLifecycleSummary = () => { stage={{ name: 'initial' }} /> - {flagWord('initial')} in initial + {stageName('initial')}

{ stage={{ name: 'pre-live' }} /> - {flagWord('preLive')} in pre-live + {stageName('preLive')}

{ stage={{ name: 'live' }} /> - {flagWord('live')} in live + {stageName('live')}

{ stage={{ name: 'completed' }} /> - {flagWord('completed')} in completed + {stageName('completed')}

{ stage={{ name: 'archived' }} /> - {flagWord('archived')} in archived + {stageName('archived')}

Last 30 days