diff --git a/frontend/src/assets/img/signals.svg b/frontend/src/assets/img/signals.svg
new file mode 100644
index 0000000000..db1c78cea5
--- /dev/null
+++ b/frontend/src/assets/img/signals.svg
@@ -0,0 +1,21 @@
+
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index f94cb8c028..2cef50f83c 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/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: ,
+ preview: ,
link: '/integrations/signals',
docsLink: 'https://docs.getunleash.io/reference/signals',
show: isEnterprise() && signalsEnabled,
@@ -164,7 +167,14 @@ export const NewInUnleash = ({
{visibleItems.map(
- ({ label, icon, link, longDescription, docsLink }) => (
+ ({
+ label,
+ icon,
+ link,
+ longDescription,
+ docsLink,
+ preview,
+ }) => (
{
trackEvent('new-in-unleash-click', {
@@ -184,6 +194,7 @@ export const NewInUnleash = ({
label={label}
icon={icon}
link={link}
+ preview={preview}
longDescription={longDescription}
docsLink={docsLink}
/>
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
index 4384ad5e63..ec412328ec 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
+++ b/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}
>
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
index 1a07f6145f..027087763f 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx
+++ b/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<{
-
+ {preview ? (
+ {preview}
+ ) : (
+
+
+
+ )}
{title}