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: , + preview: ( + + ), + docsLink: + 'https://docs.getunleash.io/reference/feature-toggles#feature-flag-lifecycle', + show: improvedLifecycleEnabled, + longDescription: ( +

+ 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: , - preview: , - onCheckItOut: () => { - highlight('eventTimeline'); - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }, - docsLink: - 'https://docs.getunleash.io/reference/events#event-timeline', - show: !isOss(), - longDescription: ( - <> -

- 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(