From 4aebe71811a8250311f57a0ac17fb89e9ae94eb7 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Wed, 15 Jan 2025 14:58:13 +0100
Subject: [PATCH] new lifecycle tooltip

---
 .../FeatureLifecycle/FeatureLifecycle.tsx     | 28 +++++++++++++++----
 .../FeatureLifecycleTooltip.tsx               | 11 ++++----
 .../FeatureLifecycle/LifecycleStage.tsx       | 12 ++++----
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
index 3df3893dce8f..83c0665fc737 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
+++ b/frontend/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,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;
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
index 4cd4c9545217..11551d728cc1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
+++ b/frontend/src/component/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/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx
index e3d14f0a1e83..2a994dead7e3 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx
+++ b/frontend/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'] }
     );