diff --git a/frontend/src/assets/img/lifecycle-stages.png b/frontend/src/assets/img/lifecycle-stages.png
new file mode 100644
index 000000000000..0bf1db8535fc
Binary files /dev/null and b/frontend/src/assets/img/lifecycle-stages.png differ
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index b5a5509cac30..fb9774a2d5e0 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -18,9 +18,10 @@ import {
} from './NewInUnleashItem';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { ReactComponent as SignalsPreview } from 'assets/img/signals.svg';
+import LifecycleStagesImage from 'assets/img/lifecycle-stages.png';
import LinearScaleIcon from '@mui/icons-material/LinearScale';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeartOutlined';
import { useNavigate } from 'react-router-dom';
-import { ReactComponent as EventTimelinePreview } from 'assets/img/eventTimeline.svg';
import { useHighlightContext } from 'component/common/Highlight/HighlightContext';
const StyledNewInUnleash = styled('div')(({ theme }) => ({
@@ -77,6 +78,10 @@ const StyledLinearScaleIcon = styled(LinearScaleIcon)(({ theme }) => ({
color: theme.palette.primary.main,
}));
+const StyledImg = styled('img')(() => ({
+ maxWidth: '100%',
+}));
+
interface INewInUnleashProps {
mode?: NavigationMode;
onMiniModeClick?: () => void;
@@ -93,10 +98,33 @@ export const NewInUnleash = ({
'new-in-unleash-seen:v1',
new Set(),
);
- const { isOss, isEnterprise } = useUiConfig();
+ const { isEnterprise } = useUiConfig();
const signalsEnabled = useUiFlag('signals');
+ const improvedLifecycleEnabled = useUiFlag('lifecycleImprovements');
const items: NewInUnleashItemDetails[] = [
+ {
+ label: 'Lifecycle 2.0',
+ summary: 'Track progress of your feature flags',
+ icon:
+ We have updated the names, icons, and colors for the + different stages of a feature flag's lifecycle. The stages + convey the same meanings as before but now have clearer + names that better indicate where you are in the lifecycle. +
+ ), + }, { label: 'Signals & Actions', summary: 'Listen to signals via Webhooks', @@ -133,36 +161,6 @@ export const NewInUnleash = ({ > ), }, - { - label: 'Event timeline', - summary: 'Keep track of recent events across all your projects', - icon:- Monitor recent events across all your projects in one - unified timeline. -
- -- You can access the event timeline from the top menu to - get an overview of changes and quickly identify and - debug any issues. -
- > - ), - }, ]; const visibleItems = items.filter(