new lifecycle tooltip

Unleash · Jan 15, 2025 · 4aebe71 · 4aebe71
1 parent 3a83475
commit 4aebe71
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/...d/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx b/...d/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
@@ -1,10 +1,12 @@
-import { FeatureLifecycleStageIcon } from './FeatureLifecycleStageIcon';
+import { FeatureLifecycleStageIcon } from '../../../../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,16 +41,31 @@ 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}
             onComplete={onComplete}
             onUncomplete={onUncompleteHandler}
             loading={loading}
         >
-            <FeatureLifecycleStageIcon stage={currentStage!} />
-        </FeatureLifecycleTooltip>
+            <FeatureLifecycleStageIcon stage={currentStage} />
+        </LegacyFeatureLifecycleTooltip>
     ) : null;
 };
diff --git a/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
@@ -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 />}

diff --git a/...end/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx b/...end/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx
@@ -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'] }
     );