chore: add beta badge to event timeline in new in unleash (#8377)

https://linear.app/unleash/issue/2-2750/add-beta-badge-to-event-timeline-in-the-new-in-unleash-section

Adds a beta badge to the event timeline item in "New in Unleash".


![image](https://github.com/user-attachments/assets/3db04c83-e34b-439a-b9be-8214df78f165)

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

@@ -84,6 +84,7 @@ type NewItem = {
     show: boolean;
     longDescription: ReactNode;
     preview?: ReactNode;
+    beta?: boolean;
 };
 
 interface INewInUnleashProps {
@@ -174,6 +175,7 @@ export const NewInUnleash = ({
                     </p>
                 </>
             ),
+            beta: true,
         },
     ];
 
@@ -218,6 +220,7 @@ export const NewInUnleash = ({
                         docsLink,
                         preview,
                         summary,
+                        beta = false,
                     }) => (
                         <NewInUnleashItem
                             key={label}
@@ -243,6 +246,7 @@ export const NewInUnleash = ({
                             longDescription={longDescription}
                             docsLink={docsLink}
                             summary={summary}
+                            beta={beta}
                         />
                     ),
                 )}

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

@@ -10,6 +10,8 @@ import {
 } from '@mui/material';
 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';
 
 const StyledItemButton = styled(ListItemButton)(({ theme }) => ({
     outline: `1px solid ${theme.palette.divider}`,
@@ -26,6 +28,12 @@ const LabelWithSummary = styled('div')(({ theme }) => ({
     flex: 1,
 }));
 
+const StyledItemTitle = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+}));
+
 const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({
     padding: theme.spacing(0.25),
 }));
@@ -40,6 +48,7 @@ interface INewInUnleashItemProps {
     docsLink: string;
     preview?: ReactNode;
     summary: string;
+    beta: boolean;
 }
 
 const useTooltip = () => {
@@ -66,6 +75,7 @@ export const NewInUnleashItem = ({
     docsLink,
     preview,
     summary,
+    beta,
 }: INewInUnleashItemProps) => {
     const { open, handleTooltipOpen, handleTooltipClose } = useTooltip();
 
@@ -90,13 +100,20 @@ export const NewInUnleashItem = ({
                 onCheckItOut={onCheckItOut}
                 docsLink={docsLink}
                 preview={preview}
+                beta={beta}
             >
                 <StyledItemButton>
                     {icon}
                     <LabelWithSummary>
-                        <Typography fontWeight='bold' fontSize='small'>
-                            {label}
-                        </Typography>
+                        <StyledItemTitle>
+                            <Typography fontWeight='bold' fontSize='small'>
+                                {label}
+                            </Typography>
+                            <ConditionallyRender
+                                condition={beta}
+                                show={<Badge color='secondary'>Beta</Badge>}
+                            />
+                        </StyledItemTitle>
                         <Typography fontSize='small'>{summary}</Typography>
                     </LabelWithSummary>
                     <Tooltip title='Dismiss' arrow sx={{ marginLeft: 'auto' }}>

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

@@ -12,6 +12,8 @@ import {
 import type { Link as RouterLink } from 'react-router-dom';
 import OpenInNew from '@mui/icons-material/OpenInNew';
 import { ReactComponent as UnleashLogo } from 'assets/img/logoWithWhiteText.svg';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Badge } from 'component/common/Badge/Badge';
 
 const Header = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.primary.light,
@@ -67,7 +69,10 @@ const LongDescription = styled(Box)(({ theme }) => ({
     },
 }));
 
-const Title = styled(Typography)(({ theme }) => ({
+const StyledTitle = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
     padding: theme.spacing(1, 0, 2, 0),
     lineHeight: 1.5,
 }));
@@ -85,6 +90,7 @@ export const NewInUnleashTooltip: FC<{
     open: boolean;
     preview?: ReactNode;
     onClose: () => void;
+    beta: boolean;
 }> = ({
     children,
     title,
@@ -94,6 +100,7 @@ export const NewInUnleashTooltip: FC<{
     preview,
     open,
     onClose,
+    beta,
 }) => (
     <HtmlTooltip
         disableFocusListener
@@ -119,7 +126,13 @@ export const NewInUnleashTooltip: FC<{
                         )}
                     </Header>
                     <Body>
-                        <Title>{title}</Title>
+                        <StyledTitle>
+                            <Typography>{title}</Typography>
+                            <ConditionallyRender
+                                condition={beta}
+                                show={<Badge color='secondary'>Beta</Badge>}
+                            />
+                        </StyledTitle>
                         <LongDescription>{longDescription}</LongDescription>
                         <ReadMore>
                             <StyledLink