feat: new lifecycle icons (#9098)

- Feature flag added - New assets
2025-01-25 00:07:47 +01:00 · 2025-01-15 08:53:07 +01:00 · 2025-01-15 08:53:07 +01:00 · a2b78df0ad
commit a2b78df0ad
parent 65aeb904c3
10 changed files with 69 additions and 16 deletions
--- a/frontend/src/assets/icons/lifecycle/stage-1.svg
+++ b/frontend/src/assets/icons/lifecycle/stage-1.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" fill="none">
+    <path fill="#F7F7FA" d="M0 4a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />
+    <path fill="#9F9FA1" stroke="#F7F7FA" stroke-width="2"
+        d="M24.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+</svg>
--- a/frontend/src/assets/icons/lifecycle/stage-2.svg
+++ b/frontend/src/assets/icons/lifecycle/stage-2.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" fill="none">
+    <path fill="#EBF7FF" d="M0 4a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />
+    <path fill="#96D2FA" stroke="#EBF7FF" stroke-width="2"
+        d="M21.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#0087E0" stroke="#EBF7FF" stroke-width="2"
+        d="M27.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+</svg>
--- a/frontend/src/assets/icons/lifecycle/stage-3.svg
+++ b/frontend/src/assets/icons/lifecycle/stage-3.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" fill="none">
+    <path fill="#F4FAEB" d="M0 4a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />
+    <path fill="#B0D182" stroke="#F4FAEB" stroke-width="2"
+        d="M18.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.556 5.556 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#B0D182" stroke="#F4FAEB" stroke-width="2"
+        d="M24.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#68A611" stroke="#F4FAEB" stroke-width="2"
+        d="M30.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+</svg>
--- a/frontend/src/assets/icons/lifecycle/stage-4.svg
+++ b/frontend/src/assets/icons/lifecycle/stage-4.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" fill="none">
+    <path fill="#FFF2F3" d="M0 4a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />
+    <path fill="#FEB0B7" d="M8.541 7.035a4.556 4.556 0 1 1 6.918 5.93 4.556 4.556 0 0 1-6.918-5.93Z" />
+    <path fill="#FEB0B7" stroke="#FFF2F3" stroke-width="2"
+        d="M21.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#FEB0B7" stroke="#FFF2F3" stroke-width="2"
+        d="M26.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#D93644" stroke="#FFF2F3" stroke-width="2"
+        d="M31.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+</svg>
--- a/frontend/src/assets/icons/lifecycle/stage-5.svg
+++ b/frontend/src/assets/icons/lifecycle/stage-5.svg
@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" fill="none">
+    <path fill="#F3F3FD" d="M0 4a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />
+    <path fill="#9F9FA1" d="M6.541 7.035a4.556 4.556 0 1 1 6.918 5.93 4.556 4.556 0 0 1-6.918-5.93Z" />
+    <path fill="#9F9FA1" stroke="#F7F7FA" stroke-width="2"
+        d="M19.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.556 5.556 0 1 0 8.436 0Z" />
+    <path fill="#9F9FA1" stroke="#F7F7FA" stroke-width="2"
+        d="M24.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#9F9FA1" stroke="#F7F7FA" stroke-width="2"
+        d="M29.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+    <path fill="#6E6E70" stroke="#F7F7FA" stroke-width="2"
+        d="M34.218 6.385c-2.217-2.587-6.219-2.587-8.436 0a5.555 5.555 0 0 0 0 7.23c2.217 2.587 6.219 2.587 8.436 0a5.555 5.555 0 0 0 0-7.23Z" />
+</svg>
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon.tsx
+++ b/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 />;
    }
 };
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
+++ b/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>
    );
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@ -91,6 +91,7 @@ export type UiFlags = {
    flagOverviewRedesign?: boolean;
    granularAdminPermissions?: boolean;
    sortProjectRoles?: boolean;
+    lifecycleImprovements?: boolean;
 };

 export interface IVersionInfo {
--- a/src/lib/types/experimental.ts
+++ b/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 = {
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@ -57,6 +57,7 @@ process.nextTick(async () => {
                        sortProjectRoles: true,
                        deltaApi: true,
                        uniqueSdkTracking: true,
+                        lifecycleImprovements: true,
                    },
                },
                authentication: {