From f26bf2b8d1bc20937144719a5d741ce6c5ec304a Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 9 Apr 2025 13:44:32 +0200
Subject: [PATCH] feat: lifecycle column text (#9731)

---
 .../FeatureEnvironmentSeenCell.tsx            |  3 ++
 .../FeatureToggleListTable.tsx                |  3 +-
 .../FeatureLifecycle/FeatureLifecycle.tsx     | 30 ++++++++++++-------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
index e3989f4863..6d4f5f54f8 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
@@ -38,6 +38,7 @@ interface IFeatureLifecycleProps {
     onComplete?: () => void;
     onUncomplete?: () => void;
     onArchive?: () => void;
+    expanded?: boolean;
 }
 
 export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
@@ -45,6 +46,7 @@ export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
     onComplete,
     onUncomplete,
     onArchive,
+    expanded,
     ...rest
 }) => {
     const environments = feature.environments
@@ -58,6 +60,7 @@ export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
                 onComplete={onComplete}
                 onUncomplete={onUncomplete}
                 feature={feature}
+                expanded={expanded}
             />
         </Box>
     );
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 95751cb6c5..5231e3458a 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -182,12 +182,13 @@ export const FeatureToggleListTable: FC = () => {
                           cell: ({ row: { original } }) => (
                               <FeatureLifecycleCell
                                   feature={original}
+                                  expanded
                                   data-loading
                               />
                           ),
                           enableSorting: false, // FIXME: enable sorting by lifecycle
                           size: 50,
-                          meta: { align: 'center', width: '1%' },
+                          meta: { width: '1%' },
                       }),
                       columnHelper.accessor('project', {
                           header: 'Project',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
index 6d873cedf8..191a8a507b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycle.tsx
@@ -5,6 +5,8 @@ import { populateCurrentStage } from './populateCurrentStage';
 import type { FC } from 'react';
 import type { Lifecycle } from 'interfaces/featureToggle';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { getFeatureLifecycleName } from 'component/common/FeatureLifecycle/getFeatureLifecycleName';
+import { Box } from '@mui/material';
 
 export interface LifecycleFeature {
     lifecycle?: Lifecycle;
@@ -23,7 +25,8 @@ export const FeatureLifecycle: FC<{
     onComplete?: () => void;
     onUncomplete?: () => void;
     feature: LifecycleFeature;
-}> = ({ feature, onComplete, onUncomplete, onArchive }) => {
+    expanded?: boolean;
+}> = ({ feature, expanded, onComplete, onUncomplete, onArchive }) => {
     const currentStage = populateCurrentStage(feature);
     const { markFeatureUncompleted, loading } = useFeatureLifecycleApi();
     const { trackEvent } = usePlausibleTracker();
@@ -39,15 +42,20 @@ export const FeatureLifecycle: FC<{
     };
 
     return currentStage ? (
-        <FeatureLifecycleTooltip
-            stage={currentStage!}
-            project={feature.project}
-            onArchive={onArchive}
-            onComplete={onComplete}
-            onUncomplete={onUncomplete ? onUncompleteHandler : undefined}
-            loading={loading}
-        >
-            <FeatureLifecycleStageIcon stage={currentStage} />
-        </FeatureLifecycleTooltip>
+        <Box sx={(theme) => ({ display: 'flex', gap: theme.spacing(0.5) })}>
+            <FeatureLifecycleTooltip
+                stage={currentStage!}
+                project={feature.project}
+                onArchive={onArchive}
+                onComplete={onComplete}
+                onUncomplete={onUncomplete ? onUncompleteHandler : undefined}
+                loading={loading}
+            >
+                <FeatureLifecycleStageIcon stage={currentStage} />
+            </FeatureLifecycleTooltip>{' '}
+            <p>
+                {expanded ? getFeatureLifecycleName(currentStage.name) : null}
+            </p>
+        </Box>
     ) : null;
 };