From c07fb589a72eae7086826522529f033da97299b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 7 Feb 2025 14:33:25 +0000 Subject: [PATCH] chore: add release management to new in unleash (#9257) https://linear.app/unleash/issue/2-3244/add-release-management-to-new-in-unleash Adds release management to "New in Unleash". ![image](https://github.com/user-attachments/assets/5bbfc502-f730-4cd4-bf5e-747f1fe9e773) --- .../assets/img/releaseManagementPreview.svg | 22 ++++++++++++++ .../component/common/Truncator/Truncator.tsx | 28 +++++++++-------- .../NewInUnleash/NewInUnleash.tsx | 30 +++++++++++++++++++ .../NewInUnleash/NewInUnleashItem.tsx | 9 +++++- 4 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 frontend/src/assets/img/releaseManagementPreview.svg diff --git a/frontend/src/assets/img/releaseManagementPreview.svg b/frontend/src/assets/img/releaseManagementPreview.svg new file mode 100644 index 0000000000..4416fd606c --- /dev/null +++ b/frontend/src/assets/img/releaseManagementPreview.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/component/common/Truncator/Truncator.tsx b/frontend/src/component/common/Truncator/Truncator.tsx index 5d989f74a0..42c4415b4b 100644 --- a/frontend/src/component/common/Truncator/Truncator.tsx +++ b/frontend/src/component/common/Truncator/Truncator.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, type CSSProperties } from 'react'; import { Box, type BoxProps, @@ -8,18 +8,20 @@ import { } from '@mui/material'; const StyledTruncatorContainer = styled(Box, { - shouldForwardProp: (prop) => prop !== 'lines', -})<{ lines: number }>(({ lines }) => ({ - lineClamp: `${lines}`, - WebkitLineClamp: lines, - display: '-webkit-box', - boxOrient: 'vertical', - textOverflow: 'ellipsis', - overflow: 'hidden', - alignItems: 'flex-start', - WebkitBoxOrient: 'vertical', - wordBreak: 'break-word', -})); + shouldForwardProp: (prop) => prop !== 'lines' && prop !== 'wordBreak', +})<{ lines: number; wordBreak?: CSSProperties['wordBreak'] }>( + ({ lines, wordBreak = 'break-all' }) => ({ + lineClamp: `${lines}`, + WebkitLineClamp: lines, + display: '-webkit-box', + boxOrient: 'vertical', + textOverflow: 'ellipsis', + overflow: 'hidden', + alignItems: 'flex-start', + WebkitBoxOrient: 'vertical', + wordBreak, + }), +); type OverridableTooltipProps = Omit; diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx index 6c7dabc292..e072fb2c9b 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx @@ -22,6 +22,8 @@ import LifecycleStagesImage from 'assets/img/lifecycle-stages.png'; import MonitorHeartIcon from '@mui/icons-material/MonitorHeartOutlined'; import { useNavigate } from 'react-router-dom'; import { formatAssetPath } from 'utils/formatPath'; +import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined'; +import { ReactComponent as ReleaseManagementPreview } from 'assets/img/releaseManagementPreview.svg'; const StyledNewInUnleash = styled('div')(({ theme }) => ({ margin: theme.spacing(2, 0, 1, 0), @@ -73,6 +75,12 @@ const StyledSignalsIcon = styled(Signals)(({ theme }) => ({ color: theme.palette.primary.main, })); +const StyledReleaseManagementIcon = styled(FactCheckOutlinedIcon)( + ({ theme }) => ({ + color: theme.palette.primary.main, + }), +); + const StyledImg = styled('img')(() => ({ maxWidth: '100%', })); @@ -94,6 +102,7 @@ export const NewInUnleash = ({ ); const { isEnterprise } = useUiConfig(); const signalsEnabled = useUiFlag('signals'); + const releasePlansEnabled = useUiFlag('releasePlans'); const items: NewInUnleashItemDetails[] = [ { @@ -154,6 +163,27 @@ export const NewInUnleash = ({ ), }, + { + label: 'Release management', + summary: 'Save time with release plans', + icon: , + preview: , + onCheckItOut: () => navigate('/release-management'), + show: isEnterprise() && releasePlansEnabled, + longDescription: ( + <> +

+ Instead of having to set up the same strategies again + and again, you can now create templates with milestones + of how you want to rollout features to your users. +

+

+ Once you have set it up, just apply your release plan to + a flag, and you are ready to rollout! +

+ + ), + }, ]; const visibleItems = items.filter( diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx index 7de61ab86a..ce95e916ee 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx @@ -12,6 +12,7 @@ import Close from '@mui/icons-material/Close'; import { NewInUnleashTooltip } from './NewInUnleashTooltip'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Badge } from 'component/common/Badge/Badge'; +import { Truncator } from 'component/common/Truncator/Truncator'; export type NewInUnleashItemDetails = { label: string; @@ -34,6 +35,10 @@ const StyledItemButton = styled(ListItemButton)(({ theme }) => ({ alignItems: 'start', gap: theme.spacing(1), fontSize: theme.fontSizes.smallBody, + '& > svg': { + width: theme.spacing(3), + height: theme.spacing(3), + }, })); const LabelWithSummary = styled('div')(({ theme }) => ({ @@ -114,7 +119,9 @@ export const NewInUnleashItem = ({ - {label} + + {label} +