feat: Signals preview img (#7993)

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

@@ -15,6 +15,7 @@ import Signals from '@mui/icons-material/Sensors';
 import type { NavigationMode } from 'component/layout/MainLayout/NavigationSidebar/NavigationMode';
 import { NewInUnleashItem } from './NewInUnleashItem';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { ReactComponent as SignalsPreview } from 'assets/img/signals.svg';
 
 const StyledNewInUnleash = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 0, 1, 0),
@@ -73,6 +74,7 @@ type NewItem = {
     docsLink: string;
     show: boolean;
     longDescription: ReactNode;
+    preview?: ReactNode;
 };
 
 interface INewInUnleashProps {
@@ -98,6 +100,7 @@ export const NewInUnleash = ({
         {
             label: 'Signals & Actions',
             icon: <StyledSignalsIcon />,
+            preview: <SignalsPreview />,
             link: '/integrations/signals',
             docsLink: 'https://docs.getunleash.io/reference/signals',
             show: isEnterprise() && signalsEnabled,
@@ -164,7 +167,14 @@ export const NewInUnleash = ({
             </StyledNewInUnleashHeader>
             <StyledNewInUnleashList>
                 {visibleItems.map(
-                    ({ label, icon, link, longDescription, docsLink }) => (
+                    ({
+                        label,
+                        icon,
+                        link,
+                        longDescription,
+                        docsLink,
+                        preview,
+                    }) => (
                         <NewInUnleashItem
                             onClick={() => {
                                 trackEvent('new-in-unleash-click', {
@@ -184,6 +194,7 @@ export const NewInUnleash = ({
                             label={label}
                             icon={icon}
                             link={link}
+                            preview={preview}
                             longDescription={longDescription}
                             docsLink={docsLink}
                         />

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

@@ -36,6 +36,7 @@ interface INewInUnleashItemProps {
     longDescription: ReactNode;
     link: string;
     docsLink: string;
+    preview?: ReactNode;
 }
 
 const useTooltip = () => {
@@ -60,6 +61,7 @@ export const NewInUnleashItem = ({
     longDescription,
     link,
     docsLink,
+    preview,
 }: INewInUnleashItemProps) => {
     const { open, handleTooltipOpen, handleTooltipClose } = useTooltip();
 
@@ -83,6 +85,7 @@ export const NewInUnleashItem = ({
                 longDescription={longDescription}
                 link={link}
                 docsLink={docsLink}
+                preview={preview}
             >
                 <StyledItemButton>
                     <StyledItemButtonContent>

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

@@ -17,12 +17,7 @@ const Header = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.primary.contrastText,
     borderRadius: `${theme.shape.borderRadiusMedium}px ${theme.shape.borderRadiusMedium}px 0 0`, // has to match the parent tooltip container
-    margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container
-    padding: theme.spacing(2, 3),
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: '120px',
+    margin: theme.spacing(-1, -1.5, 0, -1.5), // has to match the parent tooltip container
 }));
 
 const Body = styled(Box)(({ theme }) => ({
@@ -45,7 +40,21 @@ const StyledOpenInNew = styled(OpenInNew)(({ theme }) => ({
     fontSize: theme.spacing(2.25),
 }));
 
-const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' });
+const BottomPreview = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3, 2, 0, 2),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    '> svg': { display: 'block', width: '100%', height: 'auto' },
+}));
+
+const CenteredPreview = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(4),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '> svg': { display: 'block', width: '70%', height: 'auto' },
+}));
 
 const LongDescription = styled(Box)(({ theme }) => ({
     ul: {
@@ -54,11 +63,11 @@ const LongDescription = styled(Box)(({ theme }) => ({
 }));
 
 const Title = styled(Typography)(({ theme }) => ({
-    margin: theme.spacing(2, 0),
+    padding: theme.spacing(1, 0, 2, 0),
 }));
 
 const ReadMore = styled(Box)(({ theme }) => ({
-    margin: theme.spacing(3, 0),
+    padding: theme.spacing(2, 0, 4, 0),
 }));
 
 export const NewInUnleashTooltip: FC<{
@@ -68,8 +77,18 @@ export const NewInUnleashTooltip: FC<{
     docsLink: string;
     link: string;
     open: boolean;
+    preview?: ReactNode;
     onClose: () => void;
-}> = ({ children, title, longDescription, link, docsLink, open, onClose }) => {
+}> = ({
+    children,
+    title,
+    longDescription,
+    link,
+    docsLink,
+    preview,
+    open,
+    onClose,
+}) => {
     const navigate = useNavigate();
 
     return (
@@ -88,7 +107,13 @@ export const NewInUnleashTooltip: FC<{
                 <ClickAwayListener onClickAway={onClose}>
                     <Box>
                         <Header>
-                            <StyledUnleashLogo />
+                            {preview ? (
+                                <BottomPreview>{preview}</BottomPreview>
+                            ) : (
+                                <CenteredPreview>
+                                    <UnleashLogo />
+                                </CenteredPreview>
+                            )}
                         </Header>
                         <Body>
                             <Title>{title}</Title>