feat: pass lifecycle stage to tooltip (#6904)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import { ReactComponent as InitialStageIcon } from 'assets/icons/stage-initial.svg';
+import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.svg';
+import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
+import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
+import { ReactComponent as CompletedDiscardedStageIcon } from 'assets/icons/stage-completed-discarded.svg';
+import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
+
+export type LifecycleStage =
+    | { name: 'initial' }
+    | { name: 'pre-live' }
+    | { name: 'live' }
+    | {
+          name: 'completed';
+          status: 'kept' | 'discarded';
+      }
+    | { name: 'archived' };
+
+export const FeatureLifecycleStageIcon: FC<{ stage: LifecycleStage }> = ({
+    stage,
+}) => {
+    if (stage.name === 'archived') {
+        return <ArchivedStageIcon />;
+    } else if (stage.name === 'pre-live') {
+        return <PreLiveStageIcon />;
+    } else if (stage.name === 'live') {
+        return <LiveStageIcon />;
+    } else if (stage.name === 'completed' && stage.status === 'kept') {
+        return <CompletedStageIcon />;
+    } else if (stage.name === 'completed' && stage.status === 'discarded') {
+        return <CompletedDiscardedStageIcon />;
+    } else {
+        return <InitialStageIcon />;
+    }
+};

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx

@@ -7,7 +7,12 @@ import { ReactComponent as InitialStageIcon } from 'assets/icons/stage-initial.s
 import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.svg';
 import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
 import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
+import { ReactComponent as CompletedDiscardedStageIcon } from 'assets/icons/stage-completed-discarded.svg';
 import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
+import {
+    FeatureLifecycleStageIcon,
+    type LifecycleStage,
+} from './FeatureLifecycleStageIcon';
 
 const TimeLabel = styled('span')(({ theme }) => ({
     color: theme.palette.text.secondary,
@@ -92,7 +97,8 @@ const ColorFill = styled(Box)(({ theme }) => ({
 
 export const FeatureLifecycleTooltip: FC<{
     children: React.ReactElement<any, any>;
-}> = ({ children }) => (
+    stage: LifecycleStage;
+}> = ({ children, stage }) => (
     <HtmlTooltip
         maxHeight={800}
         maxWidth={350}
@@ -109,8 +115,10 @@ export const FeatureLifecycleTooltip: FC<{
                                 gap: 1,
                             }}
                         >
-                            <Badge>Initial</Badge>
+                            <Badge sx={{ textTransform: 'capitalize' }}>
-                            <InitialStageIcon />
+                                {stage.name}
+                            </Badge>
+                            <FeatureLifecycleStageIcon stage={stage} />
                         </Box>
                     </MainLifecycleRow>
                     <TimeLifecycleRow>
@@ -122,31 +130,51 @@ export const FeatureLifecycleTooltip: FC<{
                         <span>3 days</span>
                     </TimeLifecycleRow>
                     <IconsRow>
-                        <StageBox data-after-content='Initial' active={true}>
+                        <StageBox
+                            data-after-content='Initial'
+                            active={stage.name === 'initial'}
+                        >
                             <InitialStageIcon />
                         </StageBox>
 
                         <Line />
 
-                        <StageBox data-after-content='Pre-live'>
+                        <StageBox
+                            data-after-content='Pre-live'
+                            active={stage.name === 'pre-live'}
+                        >
                             <PreLiveStageIcon />
                         </StageBox>
 
                         <Line />
 
-                        <StageBox data-after-content='Live'>
+                        <StageBox
+                            data-after-content='Live'
+                            active={stage.name === 'live'}
+                        >
                             <LiveStageIcon />
                         </StageBox>
 
                         <Line />
 
-                        <StageBox data-after-content='Completed'>
+                        <StageBox
-                            <CompletedStageIcon />
+                            data-after-content='Completed'
+                            active={stage.name === 'completed'}
+                        >
+                            {stage.name === 'completed' &&
+                            stage.status === 'discarded' ? (
+                                <CompletedDiscardedStageIcon />
+                            ) : (
+                                <CompletedStageIcon />
+                            )}
                         </StageBox>
 
                         <Line />
 
-                        <StageBox data-after-content='Archived'>
+                        <StageBox
+                            data-after-content='Archived'
+                            active={stage.name === 'archived'}
+                        >
                             <ArchivedStageIcon />
                         </StageBox>
                     </IconsRow>
@@ -168,6 +196,6 @@ export const FeatureLifecycleTooltip: FC<{
             </Box>
         }
     >
-        {children}
+        <Box>{children}</Box>
     </HtmlTooltip>
 );

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -8,7 +8,8 @@ import PermissionIconButton from 'component/common/PermissionIconButton/Permissi
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useUiFlag } from 'hooks/useUiFlag';
-import { FeatureLifecycleTooltip } from '../FeatureLifecycleTooltip/FeatureLifecycleTooltip';
+import { FeatureLifecycleTooltip } from '../FeatureLifecycle/FeatureLifecycleTooltip';
+import { FeatureLifecycleStageIcon } from '../FeatureLifecycle/FeatureLifecycleStageIcon';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
@@ -94,10 +95,21 @@ const FeatureOverviewMetaData = () => {
                     <ConditionallyRender
                         condition={featureLifecycleEnabled}
                         show={
-                            <StyledBodyItem data-loading>
+                            <StyledBodyItem
-                                Lifecycle:{' '}
+                                sx={{
-                                <FeatureLifecycleTooltip>
+                                    display: 'flex',
-                                    <span>Initial</span>
+                                    gap: 1,
+                                    alignItems: 'start',
+                                }}
+                                data-loading
+                            >
+                                <span>Lifecycle:</span>
+                                <FeatureLifecycleTooltip
+                                    stage={{ name: 'initial' }}
+                                >
+                                    <FeatureLifecycleStageIcon
+                                        stage={{ name: 'initial' }}
+                                    />
                                 </FeatureLifecycleTooltip>
                             </StyledBodyItem>
                         }