1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

feat: rename lifecycle stages (#9102)

Name names for "lifecycle" stages, and aligning frontend types.
This commit is contained in:
Tymoteusz Czech 2025-01-16 09:41:11 +01:00 committed by GitHub
parent 846dae66bd
commit 50ab2c9d61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 651 additions and 44 deletions

View File

@ -9,23 +9,39 @@ import { ReactComponent as Stage2 } from 'assets/icons/lifecycle/stage-2.svg';
import { ReactComponent as Stage3 } from 'assets/icons/lifecycle/stage-3.svg';
import { ReactComponent as Stage4 } from 'assets/icons/lifecycle/stage-4.svg';
import { ReactComponent as Stage5 } from 'assets/icons/lifecycle/stage-5.svg';
import type { LifecycleStage } from './LifecycleStage';
import type { LifecycleStage } from '../../feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage';
import { useUiFlag } from 'hooks/useUiFlag';
export const FeatureLifecycleStageIcon: FC<{
stage: Pick<LifecycleStage, 'name'>;
}> = ({ stage }) => {
}> = ({ stage, ...props }) => {
const newIcons = useUiFlag('lifecycleImprovements');
if (stage.name === 'archived') {
return newIcons ? <Stage5 /> : <ArchivedStageIcon />;
return newIcons ? (
<Stage5 {...props} />
) : (
<ArchivedStageIcon {...props} />
);
} else if (stage.name === 'pre-live') {
return newIcons ? <Stage2 /> : <PreLiveStageIcon />;
return newIcons ? (
<Stage2 {...props} />
) : (
<PreLiveStageIcon {...props} />
);
} else if (stage.name === 'live') {
return newIcons ? <Stage3 /> : <LiveStageIcon />;
return newIcons ? <Stage3 {...props} /> : <LiveStageIcon {...props} />;
} else if (stage.name === 'completed') {
return newIcons ? <Stage4 /> : <CompletedStageIcon />;
return newIcons ? (
<Stage4 {...props} />
) : (
<CompletedStageIcon {...props} />
);
} else {
return newIcons ? <Stage1 /> : <InitialStageIcon />;
return newIcons ? (
<Stage1 {...props} />
) : (
<InitialStageIcon {...props} />
);
}
};

View File

@ -0,0 +1,21 @@
import type { Lifecycle } from 'interfaces/featureToggle';
export const getFeatureLifecycleName = (stage: Lifecycle['stage']): string => {
if (stage === 'initial') {
return 'Define';
}
if (stage === 'pre-live') {
return 'Develop';
}
if (stage === 'live') {
return 'Production';
}
if (stage === 'completed') {
return 'Cleanup';
}
if (stage === 'archived') {
return 'Archived';
}
return stage;
};

View File

@ -1,10 +1,12 @@
import { FeatureLifecycleStageIcon } from './FeatureLifecycleStageIcon';
import { FeatureLifecycleStageIcon } from 'component/common/FeatureLifecycle/FeatureLifecycleStageIcon';
import { FeatureLifecycleTooltip as LegacyFeatureLifecycleTooltip } from './LegacyFeatureLifecycleTooltip';
import { FeatureLifecycleTooltip } from './FeatureLifecycleTooltip';
import useFeatureLifecycleApi from 'hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi';
import { populateCurrentStage } from './populateCurrentStage';
import type { FC } from 'react';
import type { Lifecycle } from 'interfaces/featureToggle';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useUiFlag } from 'hooks/useUiFlag';
export interface LifecycleFeature {
lifecycle?: Lifecycle;
@ -25,10 +27,9 @@ export const FeatureLifecycle: FC<{
feature: LifecycleFeature;
}> = ({ feature, onComplete, onUncomplete, onArchive }) => {
const currentStage = populateCurrentStage(feature);
const { markFeatureUncompleted, loading } = useFeatureLifecycleApi();
const { trackEvent } = usePlausibleTracker();
const isLifecycleImprovementsEnabled = useUiFlag('lifecycleImprovements');
const onUncompleteHandler = async () => {
await markFeatureUncompleted(feature.name, feature.project);
@ -40,8 +41,23 @@ export const FeatureLifecycle: FC<{
});
};
if (isLifecycleImprovementsEnabled) {
return currentStage ? (
<FeatureLifecycleTooltip
stage={currentStage!}
project={feature.project}
onArchive={onArchive}
onComplete={onComplete}
onUncomplete={onUncompleteHandler}
loading={loading}
>
<FeatureLifecycleStageIcon stage={currentStage} />
</FeatureLifecycleTooltip>
) : null;
}
return currentStage ? (
<FeatureLifecycleTooltip
<LegacyFeatureLifecycleTooltip
stage={currentStage!}
project={feature.project}
onArchive={onArchive}
@ -49,7 +65,7 @@ export const FeatureLifecycle: FC<{
onUncomplete={onUncompleteHandler}
loading={loading}
>
<FeatureLifecycleStageIcon stage={currentStage!} />
</FeatureLifecycleTooltip>
<FeatureLifecycleStageIcon stage={currentStage} />
</LegacyFeatureLifecycleTooltip>
) : null;
};

View File

@ -51,7 +51,7 @@ test('render initial stage', async () => {
renderOpenTooltip({ name: 'initial', enteredStageAt });
await screen.findByText('initial');
await screen.findByText('Define');
await screen.findByText('2 minutes');
await screen.findByText(
'This feature flag is currently in the initial phase of its lifecycle.',
@ -69,7 +69,7 @@ test('render pre-live stage', async () => {
enteredStageAt,
});
await screen.findByText('pre-live');
await screen.findByText('Develop');
await screen.findByText('development');
await screen.findByText('1 hour ago');
});
@ -86,8 +86,8 @@ test('render live stage', async () => {
});
await screen.findByText('Is this feature complete?');
await screen.findByText('live');
await screen.findByText('production');
await screen.findByText('Production');
// await screen.findByText('production');
await screen.findByText('2 hours ago');
});
@ -103,7 +103,7 @@ test('render completed stage with still active', async () => {
enteredStageAt,
});
await screen.findByText('completed');
await screen.findByText('Cleanup');
await screen.findByText('production');
await screen.findByText('2 hours ago');
expect(screen.queryByText('Archive feature')).not.toBeInTheDocument();
@ -127,7 +127,7 @@ test('render completed stage safe to archive', async () => {
onArchive,
);
await screen.findByText('completed');
await screen.findByText('Cleanup');
const button = await screen.findByText('Archive feature');
button.click();
@ -153,7 +153,7 @@ test('mark completed button gets activated', async () => {
onComplete,
);
await screen.findByText('live');
await screen.findByText('Production');
const button = await screen.findByText('Mark completed');
button.click();

View File

@ -1,11 +1,10 @@
import { Box, styled, Typography } from '@mui/material';
import { Badge } from 'component/common/Badge/Badge';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
import type * as React from 'react';
import type { FC } from 'react';
import CloudCircle from '@mui/icons-material/CloudCircle';
import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg';
import { FeatureLifecycleStageIcon } from './FeatureLifecycleStageIcon';
import { FeatureLifecycleStageIcon } from 'component/common/FeatureLifecycle/FeatureLifecycleStageIcon';
import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
import { StyledIconWrapper } from '../../FeatureEnvironmentSeen/FeatureEnvironmentSeen';
import { useLastSeenColors } from '../../FeatureEnvironmentSeen/useLastSeenColors';
@ -20,6 +19,7 @@ import { isSafeToArchive } from './isSafeToArchive';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMDHMS } from 'utils/formatDate';
import { formatDistanceToNow, parseISO } from 'date-fns';
import { getFeatureLifecycleName } from 'component/common/FeatureLifecycle/getFeatureLifecycleName';
const TimeLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
@ -472,9 +472,9 @@ export const FeatureLifecycleTooltip: FC<{
gap: 1,
}}
>
<Badge sx={{ textTransform: 'capitalize' }}>
{stage.name}
</Badge>
<Typography variant='body2'>
{getFeatureLifecycleName(stage.name)}
</Typography>
<FeatureLifecycleStageIcon stage={stage} />
</Box>
</MainLifecycleRow>
@ -487,7 +487,6 @@ export const FeatureLifecycleTooltip: FC<{
<TimeLabel>Time spent in stage</TimeLabel>
<FormatElapsedTime time={stage.enteredStageAt} />
</TimeLifecycleRow>
<StageTimeline stage={stage} />
</Box>
<ColorFill>
{stage.name === 'initial' && <InitialStageDescription />}

View File

@ -0,0 +1,526 @@
import { Box, styled, Typography } from '@mui/material';
import { Badge } from 'component/common/Badge/Badge';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
import type * as React from 'react';
import type { FC } from 'react';
import CloudCircle from '@mui/icons-material/CloudCircle';
import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg';
import { FeatureLifecycleStageIcon } from 'component/common/FeatureLifecycle/FeatureLifecycleStageIcon';
import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
import { StyledIconWrapper } from '../../FeatureEnvironmentSeen/FeatureEnvironmentSeen';
import { useLastSeenColors } from '../../FeatureEnvironmentSeen/useLastSeenColors';
import type { LifecycleStage } from './LifecycleStage';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import {
DELETE_FEATURE,
UPDATE_FEATURE,
} from 'component/providers/AccessProvider/permissions';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { isSafeToArchive } from './isSafeToArchive';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMDHMS } from 'utils/formatDate';
import { formatDistanceToNow, parseISO } from 'date-fns';
const TimeLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
}));
const InfoText = styled('p')(({ theme }) => ({
paddingBottom: theme.spacing(1),
}));
const MainLifecycleRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
}));
const TimeLifecycleRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(1.5),
}));
const IconsRow = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
marginTop: theme.spacing(4),
marginBottom: theme.spacing(6),
}));
const Line = styled(Box)(({ theme }) => ({
height: '1px',
background: theme.palette.divider,
flex: 1,
}));
const StageBox = styled(Box, {
shouldForwardProp: (prop) => prop !== 'active',
})<{
active?: boolean;
}>(({ theme, active }) => ({
position: 'relative',
// speech bubble triangle for active stage
...(active && {
'&:before': {
content: '""',
position: 'absolute',
display: 'block',
borderStyle: 'solid',
borderColor: `${theme.palette.primary.light} transparent`,
borderWidth: '0 6px 6px',
top: theme.spacing(3.25),
left: theme.spacing(1.75),
},
}),
// stage name text
'&:after': {
content: 'attr(data-after-content)',
display: 'block',
position: 'absolute',
top: theme.spacing(4),
left: theme.spacing(-1.25),
right: theme.spacing(-1.25),
textAlign: 'center',
whiteSpace: 'nowrap',
fontSize: theme.spacing(1.25),
padding: theme.spacing(0.25, 0),
color: theme.palette.text.secondary,
// active wrapper for stage name text
...(active && {
backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
fontWeight: theme.typography.fontWeightBold,
borderRadius: theme.spacing(0.5),
}),
},
}));
const ColorFill = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
borderRadius: `0 0 ${theme.shape.borderRadiusMedium}px ${theme.shape.borderRadiusMedium}px`, // has to match the parent tooltip container
margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container
padding: theme.spacing(2, 3),
}));
const LastSeenIcon: FC<{
lastSeen: string;
}> = ({ lastSeen }) => {
const getColor = useLastSeenColors();
const { text, background } = getColor(lastSeen);
return (
<StyledIconWrapper style={{ background }}>
<UsageRate stroke={text} />
</StyledIconWrapper>
);
};
const InitialStageDescription: FC = () => {
return (
<>
<InfoText>
This feature flag is currently in the initial phase of its
lifecycle.
</InfoText>
<InfoText>
This means that the flag has been created, but it has not yet
been seen in any environment.
</InfoText>
<InfoText>
Once we detect metrics for a non-production environment it will
move into pre-live.
</InfoText>
</>
);
};
const StageTimeline: FC<{
stage: LifecycleStage;
}> = ({ stage }) => {
return (
<IconsRow>
<StageBox
data-after-content='Initial'
active={stage.name === 'initial'}
>
<FeatureLifecycleStageIcon stage={{ name: 'initial' }} />
</StageBox>
<Line />
<StageBox
data-after-content='Pre-live'
active={stage.name === 'pre-live'}
>
<FeatureLifecycleStageIcon stage={{ name: 'pre-live' }} />
</StageBox>
<Line />
<StageBox data-after-content='Live' active={stage.name === 'live'}>
<FeatureLifecycleStageIcon stage={{ name: 'live' }} />
</StageBox>
<Line />
<StageBox
data-after-content='Completed'
active={stage.name === 'completed'}
>
<FeatureLifecycleStageIcon stage={{ name: 'completed' }} />
</StageBox>
<Line />
<StageBox
data-after-content='Archived'
active={stage.name === 'archived'}
>
<FeatureLifecycleStageIcon stage={{ name: 'archived' }} />
</StageBox>
</IconsRow>
);
};
const EnvironmentLine = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: theme.spacing(1),
marginBottom: theme.spacing(2),
}));
const CenteredBox = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
}));
const Environments: FC<{
environments: Array<{
name: string;
lastSeenAt: string;
}>;
}> = ({ environments }) => {
return (
<Box>
{environments.map((environment) => {
return (
<EnvironmentLine key={environment.name}>
<CenteredBox>
<CloudCircle />
<Box>{environment.name}</Box>
</CenteredBox>
<CenteredBox>
<TimeAgo date={environment.lastSeenAt} />
<LastSeenIcon lastSeen={environment.lastSeenAt} />
</CenteredBox>
</EnvironmentLine>
);
})}
</Box>
);
};
const PreLiveStageDescription: FC<{ children?: React.ReactNode }> = ({
children,
}) => {
return (
<>
<InfoText>
We've seen the feature flag in the following environments:
</InfoText>
{children}
</>
);
};
const ArchivedStageDescription = () => {
return (
<InfoText>
Your feature has been archived, it is now safe to delete it.
</InfoText>
);
};
const BoldTitle = styled(Typography)(({ theme }) => ({
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
fontSize: theme.typography.body2.fontSize,
fontWeight: theme.typography.fontWeightBold,
}));
const LiveStageDescription: FC<{
onComplete: () => void;
loading: boolean;
children?: React.ReactNode;
project: string;
}> = ({ children, onComplete, loading, project }) => {
return (
<>
<BoldTitle>Is this feature complete?</BoldTitle>
<InfoText sx={{ mb: 1 }}>
Marking the feature flag as complete does not affect any
configuration; however, it moves the feature flag to its next
lifecycle stage and indicates that you have learned what you
needed in order to progress with the feature. It serves as a
reminder to start cleaning up the feature flag and removing it
from the code.
</InfoText>
<PermissionButton
color='inherit'
variant='outlined'
permission={UPDATE_FEATURE}
size='small'
onClick={onComplete}
disabled={loading}
projectId={project}
>
Mark completed
</PermissionButton>
<InfoText sx={{ mt: 3 }}>
Users have been exposed to this feature in the following
production environments:
</InfoText>
{children}
</>
);
};
const SafeToArchive: FC<{
onArchive: () => void;
onUncomplete: () => void;
loading: boolean;
project: string;
}> = ({ onArchive, onUncomplete, loading, project }) => {
return (
<>
<BoldTitle>Safe to archive</BoldTitle>
<InfoText
sx={{
mt: 2,
mb: 1,
}}
>
We havent seen this feature flag in any environment for at
least two days. Its likely that its safe to archive this flag.
</InfoText>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 2,
}}
>
<PermissionButton
color='inherit'
variant='outlined'
permission={UPDATE_FEATURE}
size='small'
onClick={onUncomplete}
disabled={loading}
projectId={project}
>
Revert to live
</PermissionButton>
<PermissionButton
color='inherit'
variant='outlined'
permission={DELETE_FEATURE}
size='small'
sx={{ mb: 2 }}
onClick={onArchive}
projectId={project}
>
Archive feature
</PermissionButton>
</Box>
</>
);
};
const ActivelyUsed: FC<{
onUncomplete: () => void;
loading: boolean;
children?: React.ReactNode;
}> = ({ children, onUncomplete, loading }) => (
<>
<InfoText
sx={{
mt: 1,
mb: 1,
}}
>
This feature has been successfully completed, but we are still
seeing usage. Clean up the feature flag from your code before
archiving it:
</InfoText>
{children}
<InfoText
sx={{
mt: 1,
mb: 1,
}}
>
If you think this feature was completed too early you can revert to
the live stage:
</InfoText>
<PermissionButton
color='inherit'
variant='outlined'
permission={UPDATE_FEATURE}
size='small'
sx={{ mb: 2 }}
onClick={onUncomplete}
disabled={loading}
>
Revert to live
</PermissionButton>
</>
);
const CompletedStageDescription: FC<{
onArchive: () => void;
onUncomplete: () => void;
loading: boolean;
environments: Array<{
name: string;
lastSeenAt: string;
}>;
children?: React.ReactNode;
project: string;
}> = ({
children,
environments,
onArchive,
onUncomplete,
loading,
project,
}) => {
return (
<ConditionallyRender
condition={isSafeToArchive(environments)}
show={
<SafeToArchive
onArchive={onArchive}
onUncomplete={onUncomplete}
loading={loading}
project={project}
/>
}
elseShow={
<ActivelyUsed onUncomplete={onUncomplete} loading={loading}>
{children}
</ActivelyUsed>
}
/>
);
};
const FormatTime: FC<{
time: string;
}> = ({ time }) => {
const { locationSettings } = useLocationSettings();
return <span>{formatDateYMDHMS(time, locationSettings.locale)}</span>;
};
const FormatElapsedTime: FC<{
time: string;
}> = ({ time }) => {
const pastTime = parseISO(time);
const elapsedTime = formatDistanceToNow(pastTime, { addSuffix: false });
return <span>{elapsedTime}</span>;
};
export const FeatureLifecycleTooltip: FC<{
children: React.ReactElement<any, any>;
stage: LifecycleStage;
project: string;
onArchive: () => void;
onComplete: () => void;
onUncomplete: () => void;
loading: boolean;
}> = ({
children,
stage,
project,
onArchive,
onComplete,
onUncomplete,
loading,
}) => (
<HtmlTooltip
maxHeight={800}
maxWidth={350}
arrow
tabIndex={0}
title={
<Box>
<Box sx={(theme) => ({ padding: theme.spacing(2) })}>
<MainLifecycleRow>
<Typography variant='h3'>Lifecycle</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
<Badge sx={{ textTransform: 'capitalize' }}>
{stage.name}
</Badge>
<FeatureLifecycleStageIcon stage={stage} />
</Box>
</MainLifecycleRow>
<TimeLifecycleRow>
<TimeLabel>Stage entered at</TimeLabel>
<FormatTime time={stage.enteredStageAt} />
</TimeLifecycleRow>
<TimeLifecycleRow>
<TimeLabel>Time spent in stage</TimeLabel>
<FormatElapsedTime time={stage.enteredStageAt} />
</TimeLifecycleRow>
<StageTimeline stage={stage} />
</Box>
<ColorFill>
{stage.name === 'initial' && <InitialStageDescription />}
{stage.name === 'pre-live' && (
<PreLiveStageDescription>
<Environments environments={stage.environments} />
</PreLiveStageDescription>
)}
{stage.name === 'live' && (
<LiveStageDescription
onComplete={onComplete}
loading={loading}
project={project}
>
<Environments environments={stage.environments} />
</LiveStageDescription>
)}
{stage.name === 'completed' && (
<CompletedStageDescription
environments={stage.environments}
onArchive={onArchive}
onUncomplete={onUncomplete}
loading={loading}
project={project}
>
<Environments environments={stage.environments} />
</CompletedStageDescription>
)}
{stage.name === 'archived' && <ArchivedStageDescription />}
</ColorFill>
</Box>
}
>
<CenteredBox>{children}</CenteredBox>
</HtmlTooltip>
);

View File

@ -1,19 +1,21 @@
import type { Lifecycle } from 'interfaces/featureToggle';
type TimedStage = { enteredStageAt: string };
export type LifecycleStage = TimedStage &
(
| { name: 'initial' }
| { name: 'initial' & Lifecycle['stage'] }
| {
name: 'pre-live';
name: 'pre-live' & Lifecycle['stage'];
environments: Array<{ name: string; lastSeenAt: string }>;
}
| {
name: 'live';
name: 'live' & Lifecycle['stage'];
environments: Array<{ name: string; lastSeenAt: string }>;
}
| {
name: 'completed';
name: 'completed' & Lifecycle['stage'];
environments: Array<{ name: string; lastSeenAt: string }>;
status: 'kept' | 'discarded';
}
| { name: 'archived' }
| { name: 'archived' & Lifecycle['stage'] }
);

View File

@ -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 }) => {
</BigText>
);
};
export const ProjectLifecycleSummary = () => {
const projectId = useRequiredPathParam('projectId');
const { data, loading } = useProjectStatus(projectId);
const isLifecycleImprovementsEnabled = useUiFlag('lifecycleImprovements');
const loadingRef = useLoading<HTMLUListElement>(
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 (
<StyledStageTitle>
{flagWord(stage)} in{' '}
{getFeatureLifecycleName(lifecycleStageName)} stage
</StyledStageTitle>
);
};
return (
<LifecycleList ref={loadingRef}>
<LifecycleBox tooltipText={lifecycleMessages.initial}>
@ -163,7 +190,7 @@ export const ProjectLifecycleSummary = () => {
stage={{ name: 'initial' }}
/>
</Counter>
<span>{flagWord('initial')} in initial</span>
<span>{stageName('initial')}</span>
</p>
<AverageDaysStat
averageDays={data?.lifecycleSummary.initial.averageDays}
@ -181,7 +208,7 @@ export const ProjectLifecycleSummary = () => {
stage={{ name: 'pre-live' }}
/>
</Counter>
<span>{flagWord('preLive')} in pre-live</span>
<span>{stageName('preLive')}</span>
</p>
<AverageDaysStat
averageDays={data?.lifecycleSummary.preLive.averageDays}
@ -199,7 +226,7 @@ export const ProjectLifecycleSummary = () => {
stage={{ name: 'live' }}
/>
</Counter>
<span>{flagWord('live')} in live</span>
<span>{stageName('live')}</span>
</p>
<AverageDaysStat
averageDays={data?.lifecycleSummary.live.averageDays}
@ -219,7 +246,7 @@ export const ProjectLifecycleSummary = () => {
stage={{ name: 'completed' }}
/>
</Counter>
<span>{flagWord('completed')} in completed</span>
<span>{stageName('completed')}</span>
</p>
<AverageDaysStat
averageDays={data?.lifecycleSummary.completed.averageDays}
@ -237,7 +264,7 @@ export const ProjectLifecycleSummary = () => {
stage={{ name: 'archived' }}
/>
</Counter>
<span>{flagWord('archived')} in archived</span>
<span>{stageName('archived')}</span>
</p>
<Stats>
<dt>Last 30 days</dt>

View File

@ -1,4 +1,4 @@
import type { CreateFeatureSchemaType } from 'openapi';
import type { CreateFeatureSchemaType, FeatureSchema } from 'openapi';
import type { IFeatureStrategy } from './strategy';
import type { ITag } from './tags';
@ -34,7 +34,7 @@ export type ILastSeenEnvironments = Pick<
>;
export type Lifecycle = {
stage: 'initial' | 'pre-live' | 'live' | 'completed' | 'archived';
stage: Required<FeatureSchema>['lifecycle']['stage'];
status?: string;
enteredStageAt: string;
};