diff --git a/frontend/src/assets/icons/lifecycle/stage-1.svg b/frontend/src/assets/icons/lifecycle/stage-1.svg
new file mode 100644
index 000000000000..29e61d08e4ec
--- /dev/null
+++ b/frontend/src/assets/icons/lifecycle/stage-1.svg
@@ -0,0 +1,5 @@
+
diff --git a/frontend/src/assets/icons/lifecycle/stage-2.svg b/frontend/src/assets/icons/lifecycle/stage-2.svg
new file mode 100644
index 000000000000..32330a089b3d
--- /dev/null
+++ b/frontend/src/assets/icons/lifecycle/stage-2.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/src/assets/icons/lifecycle/stage-3.svg b/frontend/src/assets/icons/lifecycle/stage-3.svg
new file mode 100644
index 000000000000..382d107893ac
--- /dev/null
+++ b/frontend/src/assets/icons/lifecycle/stage-3.svg
@@ -0,0 +1,9 @@
+
diff --git a/frontend/src/assets/icons/lifecycle/stage-4.svg b/frontend/src/assets/icons/lifecycle/stage-4.svg
new file mode 100644
index 000000000000..6394368774e2
--- /dev/null
+++ b/frontend/src/assets/icons/lifecycle/stage-4.svg
@@ -0,0 +1,10 @@
+
diff --git a/frontend/src/assets/icons/lifecycle/stage-5.svg b/frontend/src/assets/icons/lifecycle/stage-5.svg
new file mode 100644
index 000000000000..66508902a192
--- /dev/null
+++ b/frontend/src/assets/icons/lifecycle/stage-5.svg
@@ -0,0 +1,12 @@
+
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon.tsx
index 0b0ed1bb3f7d..c3edba31e2b9 100644
--- 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;
}> = ({ stage }) => {
+ const newIcons = useUiFlag('lifecycleImprovements');
+
if (stage.name === 'archived') {
- return ;
+ return newIcons ? : ;
} else if (stage.name === 'pre-live') {
- return ;
+ return newIcons ? : ;
} else if (stage.name === 'live') {
- return ;
+ return newIcons ? : ;
} else if (stage.name === 'completed') {
- return ;
+ return newIcons ? : ;
} else {
- return ;
+ return newIcons ? : ;
}
};
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
index 3e39e9c81848..4cd4c9545217 100644
--- 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'}
>
-
+
@@ -159,13 +154,13 @@ const StageTimeline: FC<{
data-after-content='Pre-live'
active={stage.name === 'pre-live'}
>
-
+
-
+
@@ -174,7 +169,7 @@ const StageTimeline: FC<{
data-after-content='Completed'
active={stage.name === 'completed'}
>
-
+
@@ -183,7 +178,7 @@ const StageTimeline: FC<{
data-after-content='Archived'
active={stage.name === 'archived'}
>
-
+
);
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 6ea4a1f28097..258613173476 100644
--- 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 {
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 6f544cd08860..a217eba9bcc9 100644
--- 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 = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index cccf565f1a6d..073d8a8595f7 100644
--- 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: {