feat: new lifecycle icons (#9098)

- Feature flag added
- New assets

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

@@ -4,20 +4,28 @@ import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.
 import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
 import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
 import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
+import { ReactComponent as Stage1 } from 'assets/icons/lifecycle/stage-1.svg';
+import { ReactComponent as Stage2 } from 'assets/icons/lifecycle/stage-2.svg';
+import { ReactComponent as Stage3 } from 'assets/icons/lifecycle/stage-3.svg';
+import { ReactComponent as Stage4 } from 'assets/icons/lifecycle/stage-4.svg';
+import { ReactComponent as Stage5 } from 'assets/icons/lifecycle/stage-5.svg';
 import type { LifecycleStage } from './LifecycleStage';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 export const FeatureLifecycleStageIcon: FC<{
     stage: Pick<LifecycleStage, 'name'>;
 }> = ({ stage }) => {
+    const newIcons = useUiFlag('lifecycleImprovements');
+
     if (stage.name === 'archived') {
-        return <ArchivedStageIcon />;
+        return newIcons ? <Stage5 /> : <ArchivedStageIcon />;
     } else if (stage.name === 'pre-live') {
-        return <PreLiveStageIcon />;
+        return newIcons ? <Stage2 /> : <PreLiveStageIcon />;
     } else if (stage.name === 'live') {
-        return <LiveStageIcon />;
+        return newIcons ? <Stage3 /> : <LiveStageIcon />;
     } else if (stage.name === 'completed') {
-        return <CompletedStageIcon />;
+        return newIcons ? <Stage4 /> : <CompletedStageIcon />;
     } else {
-        return <InitialStageIcon />;
+        return newIcons ? <Stage1 /> : <InitialStageIcon />;
     }
 };

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

@@ -3,11 +3,6 @@ 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 { 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 ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
 import CloudCircle from '@mui/icons-material/CloudCircle';
 import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg';
 import { FeatureLifecycleStageIcon } from './FeatureLifecycleStageIcon';
@@ -150,7 +145,7 @@ const StageTimeline: FC<{
                 data-after-content='Initial'
                 active={stage.name === 'initial'}
             >
-                <InitialStageIcon />
+                <FeatureLifecycleStageIcon stage={{ name: 'initial' }} />
             </StageBox>
 
             <Line />
@@ -159,13 +154,13 @@ const StageTimeline: FC<{
                 data-after-content='Pre-live'
                 active={stage.name === 'pre-live'}
             >
-                <PreLiveStageIcon />
+                <FeatureLifecycleStageIcon stage={{ name: 'pre-live' }} />
             </StageBox>
 
             <Line />
 
             <StageBox data-after-content='Live' active={stage.name === 'live'}>
-                <LiveStageIcon />
+                <FeatureLifecycleStageIcon stage={{ name: 'live' }} />
             </StageBox>
 
             <Line />
@@ -174,7 +169,7 @@ const StageTimeline: FC<{
                 data-after-content='Completed'
                 active={stage.name === 'completed'}
             >
-                <CompletedStageIcon />
+                <FeatureLifecycleStageIcon stage={{ name: 'completed' }} />
             </StageBox>
 
             <Line />
@@ -183,7 +178,7 @@ const StageTimeline: FC<{
                 data-after-content='Archived'
                 active={stage.name === 'archived'}
             >
-                <ArchivedStageIcon />
+                <FeatureLifecycleStageIcon stage={{ name: 'archived' }} />
             </StageBox>
         </IconsRow>
     );

frontend/src/interfaces/uiConfig.ts

@@ -91,6 +91,7 @@ export type UiFlags = {
     flagOverviewRedesign?: boolean;
     granularAdminPermissions?: boolean;
     sortProjectRoles?: boolean;
+    lifecycleImprovements?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -61,7 +61,8 @@ export type IFlagKey =
     | 'etagVariant'
     | 'deltaApi'
     | 'uniqueSdkTracking'
-    | 'sortProjectRoles';
+    | 'sortProjectRoles'
+    | 'lifecycleImprovements';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -290,6 +291,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_SORT_PROJECT_ROLES,
         false,
     ),
+    lifecycleImprovements: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_LIFECYCLE_IMPROVEMENTS,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -57,6 +57,7 @@ process.nextTick(async () => {
                         sortProjectRoles: true,
                         deltaApi: true,
                         uniqueSdkTracking: true,
+                        lifecycleImprovements: true,
                     },
                 },
                 authentication: {