feat: lifecycle column extracted (#7049)

frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx

@@ -53,11 +53,6 @@ export const FeatureLifecycleCell: VFC<IFeatureLifecycleProps> = ({
 
     return (
         <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <FeatureEnvironmentSeen
-                featureLastSeen={feature.lastSeenAt || undefined}
-                environments={environments}
-                {...rest}
-            />
             <FeatureLifecycle
                 onArchive={onArchive}
                 onComplete={onComplete}

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

@@ -3,7 +3,6 @@ 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 type { LifecycleStage } from './LifecycleStage';
 
@@ -19,7 +18,7 @@ export const FeatureLifecycleStageIcon: FC<{ stage: LifecycleStage }> = ({
     } else if (stage.name === 'completed' && stage.status === 'kept') {
         return <CompletedStageIcon />;
     } else if (stage.name === 'completed' && stage.status === 'discarded') {
-        return <CompletedDiscardedStageIcon />;
+        return <CompletedStageIcon />;
     } else {
         return <InitialStageIcon />;
     }

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

@@ -7,7 +7,6 @@ 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 CloudCircle from '@mui/icons-material/CloudCircle';
 import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg';
@@ -184,11 +183,7 @@ const StageTimeline: FC<{
                 data-after-content='Completed'
                 active={stage.name === 'completed'}
             >
-                {stage.name === 'completed' && stage.status === 'discarded' ? (
+                <CompletedStageIcon />
-                    <CompletedDiscardedStageIcon />
-                ) : (
-                    <CompletedStageIcon />
-                )}
             </StageBox>
 
             <Line />

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -202,30 +202,9 @@ export const ProjectFeatureToggles = ({
                 id: 'lastSeenAt',
                 header: 'Last seen',
                 cell: ({ row: { original } }) => (
-                    <ConditionallyRender
+                    <MemoizedFeatureEnvironmentSeenCell
-                        condition={featureLifecycleEnabled}
+                        feature={original}
-                        show={
+                        data-loading
-                            <FeatureLifecycleCell
-                                feature={original}
-                                onComplete={() => {
-                                    setShowMarkCompletedDialogue({
-                                        featureId: original.name,
-                                        open: true,
-                                    });
-                                }}
-                                onUncomplete={refetch}
-                                onArchive={() =>
-                                    setFeatureArchiveState(original.name)
-                                }
-                                data-loading
-                            />
-                        }
-                        elseShow={
-                            <MemoizedFeatureEnvironmentSeenCell
-                                feature={original}
-                                data-loading
-                            />
-                        }
                     />
                 ),
                 size: 50,
@@ -234,6 +213,36 @@ export const ProjectFeatureToggles = ({
                     width: '1%',
                 },
             }),
+            ...(featureLifecycleEnabled
+                ? [
+                      columnHelper.accessor('lifecycle', {
+                          id: 'lifecycle',
+                          header: 'Lifecycle',
+                          cell: ({ row: { original } }) => (
+                              <FeatureLifecycleCell
+                                  feature={original}
+                                  onComplete={() => {
+                                      setShowMarkCompletedDialogue({
+                                          featureId: original.name,
+                                          open: true,
+                                      });
+                                  }}
+                                  onUncomplete={refetch}
+                                  onArchive={() =>
+                                      setFeatureArchiveState(original.name)
+                                  }
+                                  data-loading
+                              />
+                          ),
+                          enableSorting: false,
+                          size: 50,
+                          meta: {
+                              align: 'center',
+                              width: '1%',
+                          },
+                      }),
+                  ]
+                : []),
             ...environments.map((name: string) => {
                 const isChangeRequestEnabled = isChangeRequestConfigured(name);
 
@@ -314,6 +323,7 @@ export const ProjectFeatureToggles = ({
             tableState.favoritesFirst,
             refetch,
             isPlaceholder,
+            featureLifecycleEnabled,
         ],
     );
 
@@ -430,6 +440,16 @@ export const ProjectFeatureToggles = ({
                                         id: 'lastSeenAt',
                                         isVisible: columnVisibility.lastSeenAt,
                                     },
+                                    ...(featureLifecycleEnabled
+                                        ? [
+                                              {
+                                                  header: 'Lifecycle',
+                                                  id: 'lifecycle',
+                                                  isVisible:
+                                                      columnVisibility.lifecycle,
+                                              },
+                                          ]
+                                        : []),
                                     {
                                         id: 'divider',
                                     },