chore: add beta badge to event timeline in new in unleash

Unleash · Oct 7, 2024 · 62e8cf4 · 62e8cf4
1 parent e1f3315
commit 62e8cf4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/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}
                         />
                     ),
                 )}

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx b/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>
+                            <ConditionallyRender
+                                condition={beta}
+                                show={<Badge color='secondary'>Beta</Badge>}
+                            />
+                            <Typography fontWeight='bold' fontSize='small'>
+                                {label}
+                            </Typography>
+                        </StyledItemTitle>
                         <Typography fontSize='small'>{summary}</Typography>
                     </LabelWithSummary>
                     <Tooltip title='Dismiss' arrow sx={{ marginLeft: 'auto' }}>

diff --git a/...nd/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx b/...nd/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,
@@ -85,6 +87,7 @@ export const NewInUnleashTooltip: FC<{
     open: boolean;
     preview?: ReactNode;
     onClose: () => void;
+    beta: boolean;
 }> = ({
     children,
     title,
@@ -94,6 +97,7 @@ export const NewInUnleashTooltip: FC<{
     preview,
     open,
     onClose,
+    beta,
 }) => (
     <HtmlTooltip
         disableFocusListener
@@ -119,6 +123,10 @@ export const NewInUnleashTooltip: FC<{
                         )}
                     </Header>
                     <Body>
+                        <ConditionallyRender
+                            condition={beta}
+                            show={<Badge color='secondary'>Beta</Badge>}
+                        />
                         <Title>{title}</Title>
                         <LongDescription>{longDescription}</LongDescription>
                         <ReadMore>