feat: new in unleash summary text (#7996)

frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx

@@ -26,7 +26,7 @@ const CappedText = styled(Typography)({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    maxWidth: '160px',
+    width: '100%',
 });
 
 const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx

@@ -50,6 +50,7 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
     gap: theme.spacing(2),
     zIndex: 1,
     overflowAnchor: 'none',
+    maxWidth: theme.spacing(40),
 }));
 
 // This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -69,6 +69,7 @@ const StyledSignalsIcon = styled(Signals)(({ theme }) => ({
 
 type NewItem = {
     label: string;
+    summary: string;
     icon: ReactNode;
     link: string;
     docsLink: string;
@@ -99,6 +100,7 @@ export const NewInUnleash = ({
     const items: NewItem[] = [
         {
             label: 'Signals & Actions',
+            summary: 'Listen to signals via Webhooks',
             icon: <StyledSignalsIcon />,
             preview: <SignalsPreview />,
             link: '/integrations/signals',
@@ -174,6 +176,7 @@ export const NewInUnleash = ({
                         longDescription,
                         docsLink,
                         preview,
+                        summary,
                     }) => (
                         <NewInUnleashItem
                             onClick={() => {
@@ -197,6 +200,7 @@ export const NewInUnleash = ({
                             preview={preview}
                             longDescription={longDescription}
                             docsLink={docsLink}
+                            summary={summary}
                         />
                     ),
                 )}

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx

@@ -6,24 +6,26 @@ import {
     ListItemButton,
     styled,
     Tooltip,
+    Typography,
 } from '@mui/material';
 import Close from '@mui/icons-material/Close';
 import { NewInUnleashTooltip } from './NewInUnleashTooltip';
 
 const StyledItemButton = styled(ListItemButton)(({ theme }) => ({
-    justifyContent: 'space-between',
     outline: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
     padding: theme.spacing(1),
-}));
-
-const StyledItemButtonContent = styled('div')(({ theme }) => ({
+    width: '100%',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'start',
     gap: theme.spacing(1),
     fontSize: theme.fontSizes.smallBody,
 }));
 
+const LabelWithSummary = styled('div')(({ theme }) => ({
+    flex: 1,
+}));
+
 const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({
     padding: theme.spacing(0.25),
 }));
@@ -37,6 +39,7 @@ interface INewInUnleashItemProps {
     link: string;
     docsLink: string;
     preview?: ReactNode;
+    summary: string;
 }
 
 const useTooltip = () => {
@@ -62,6 +65,7 @@ export const NewInUnleashItem = ({
     link,
     docsLink,
     preview,
+    summary,
 }: INewInUnleashItemProps) => {
     const { open, handleTooltipOpen, handleTooltipClose } = useTooltip();
 
@@ -88,11 +92,14 @@ export const NewInUnleashItem = ({
                 preview={preview}
             >
                 <StyledItemButton>
-                    <StyledItemButtonContent>
-                        {icon}
-                        {label}
-                    </StyledItemButtonContent>
-                    <Tooltip title='Dismiss' arrow>
+                    {icon}
+                    <LabelWithSummary>
+                        <Typography fontWeight='bold' fontSize='small'>
+                            {label}
+                        </Typography>
+                        <Typography fontSize='small'>{summary}</Typography>
+                    </LabelWithSummary>
+                    <Tooltip title='Dismiss' arrow sx={{ marginLeft: 'auto' }}>
                         <StyledItemButtonClose
                             aria-label='dismiss'
                             onClick={onDismissClick}