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)

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,8 +8,9 @@ import {
 } from '@mui/material';
 
 const StyledTruncatorContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'lines',
-})<{ lines: number }>(({ lines }) => ({
+    shouldForwardProp: (prop) => prop !== 'lines' && prop !== 'wordBreak',
+})<{ lines: number; wordBreak?: CSSProperties['wordBreak'] }>(
+    ({ lines, wordBreak = 'break-all' }) => ({
         lineClamp: `${lines}`,
         WebkitLineClamp: lines,
         display: '-webkit-box',
@@ -18,8 +19,9 @@ const StyledTruncatorContainer = styled(Box, {
         overflow: 'hidden',
         alignItems: 'flex-start',
         WebkitBoxOrient: 'vertical',
-    wordBreak: 'break-word',
-}));
+        wordBreak,
+    }),
+);
 
 type OverridableTooltipProps = Omit<TooltipProps, 'children'>;
 

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: <StyledReleaseManagementIcon />,
+            preview: <ReleaseManagementPreview />,
+            onCheckItOut: () => navigate('/release-management'),
+            show: isEnterprise() && releasePlansEnabled,
+            longDescription: (
+                <>
+                    <p>
+                        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.
+                    </p>
+                    <p>
+                        Once you have set it up, just apply your release plan to
+                        a flag, and you are ready to rollout!
+                    </p>
+                </>
+            ),
+        },
     ];
 
     const visibleItems = items.filter(

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 = ({
                     <LabelWithSummary>
                         <StyledItemTitle>
                             <Typography fontWeight='bold' fontSize='small'>
+                                <Truncator title={label} arrow>
                                     {label}
+                                </Truncator>
                             </Typography>
                             <ConditionallyRender
                                 condition={beta}