From 62e8cf444f84124ee06153f73f194dbfb63cf5e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 7 Oct 2024 11:16:36 +0100
Subject: [PATCH 1/3] chore: add beta badge to event timeline in new in unleash

---
 .../NewInUnleash/NewInUnleash.tsx             |  4 ++++
 .../NewInUnleash/NewInUnleashItem.tsx         | 23 ++++++++++++++++---
 .../NewInUnleash/NewInUnleashTooltip.tsx      |  8 +++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index b4813f449f60..f8bad0510b02 100644
--- 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
index cf79f1fb6420..ca16630328c4 100644
--- 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/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
index 761f994dfb18..ef203071ca31 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
+++ b/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,
@@ -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>

From 496638c06640f5fd68f72c91d2711de46e864532 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 7 Oct 2024 11:28:25 +0100
Subject: [PATCH 2/3] fix: badge on the right side of the title

---
 .../NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
index ca16630328c4..743e0c3a0582 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
@@ -106,13 +106,13 @@ export const NewInUnleashItem = ({
                     {icon}
                     <LabelWithSummary>
                         <StyledItemTitle>
+                            <Typography fontWeight='bold' fontSize='small'>
+                                {label}
+                            </Typography>
                             <ConditionallyRender
                                 condition={beta}
                                 show={<Badge color='secondary'>Beta</Badge>}
                             />
-                            <Typography fontWeight='bold' fontSize='small'>
-                                {label}
-                            </Typography>
                         </StyledItemTitle>
                         <Typography fontSize='small'>{summary}</Typography>
                     </LabelWithSummary>

From 68b5c32efdff49420ee601a1f34569369d273207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 7 Oct 2024 11:41:03 +0100
Subject: [PATCH 3/3] fix: badge on the right of tooltip title

---
 .../NewInUnleash/NewInUnleashTooltip.tsx        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
index ef203071ca31..c2491ab9e3b1 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
@@ -69,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,
 }));
@@ -123,11 +126,13 @@ export const NewInUnleashTooltip: FC<{
                         )}
                     </Header>
                     <Body>
-                        <ConditionallyRender
-                            condition={beta}
-                            show={<Badge color='secondary'>Beta</Badge>}
-                        />
-                        <Title>{title}</Title>
+                        <StyledTitle>
+                            <Typography>{title}</Typography>
+                            <ConditionallyRender
+                                condition={beta}
+                                show={<Badge color='secondary'>Beta</Badge>}
+                            />
+                        </StyledTitle>
                         <LongDescription>{longDescription}</LongDescription>
                         <ReadMore>
                             <StyledLink