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:
+ 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}
+