From 0fea84619586ac69d183ffdf61f67d6e1f4b7552 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Fri, 17 Jan 2025 11:08:30 +0100 Subject: [PATCH 1/3] feat: New in Unleash - Lifecycle 2.0 --- frontend/src/assets/img/lifecycle-stages.png | Bin 0 -> 10637 bytes .../NewInUnleash/NewInUnleash.tsx | 29 ++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 frontend/src/assets/img/lifecycle-stages.png diff --git a/frontend/src/assets/img/lifecycle-stages.png b/frontend/src/assets/img/lifecycle-stages.png new file mode 100644 index 0000000000000000000000000000000000000000..0bf1db8535fcb0ceab222e6f4f64ee2970a89701 GIT binary patch literal 10637 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 R$xk;iXsPQzt5&s({2$Ug$MXOH literal 0 HcmV?d00001 diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index b5a5509cac30..812204f26f30 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx @@ -18,7 +18,9 @@ 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'; @@ -77,6 +79,10 @@ const StyledLinearScaleIcon = styled(LinearScaleIcon)(({ theme }) => ({ color: theme.palette.primary.main, })); +const StyledImg = styled('img')(() => ({ + maxWidth: '100%', +})); + interface INewInUnleashProps { mode?: NavigationMode; onMiniModeClick?: () => void; @@ -95,8 +101,31 @@ export const NewInUnleash = ({ ); const { isOss, 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 colours for the + different stages of the lifecycle for a feature flag. The + stages indicate the same as before just with some clearer + names of where in the lifecycle you are. +

+ ), + }, { label: 'Signals & Actions', summary: 'Listen to signals via Webhooks', From 3bd2524c22f05954bb1bfe0f72225770498ecaf3 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 20 Jan 2025 11:27:10 +0100 Subject: [PATCH 2/3] clean up timeline from new to unleash --- .../NewInUnleash/NewInUnleash.tsx | 33 +------------------ 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index 812204f26f30..879919c1cfa1 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx @@ -22,7 +22,6 @@ 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 }) => ({ @@ -99,7 +98,7 @@ 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'); @@ -162,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( From 72e37d8f5f2e5381bc8e193d9c788a5f43291a88 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Mon, 20 Jan 2025 12:46:31 +0100 Subject: [PATCH 3/3] update wording on lifecycle new in unleash --- .../NavigationSidebar/NewInUnleash/NewInUnleash.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index 879919c1cfa1..fb9774a2d5e0 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx @@ -118,10 +118,10 @@ export const NewInUnleash = ({ show: improvedLifecycleEnabled, longDescription: (

- We have updated the names, icons and colours for the - different stages of the lifecycle for a feature flag. The - stages indicate the same as before just with some clearer - names of where in the lifecycle you are. + 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.

), },