Fix plan upgrade tooltip (#2549)

Related: https://github.com/Unleash/unleash/pull/2544
From:
https://linear.app/unleash/issue/1-414/add-a-badge-for-oss-users-on-the-projects-page-to-see-that-extra

Includes some fixes and suggestions:
 - Should only show when OSS (icon was showing every time);
 - Link now works correctly, opens on new tab;
- Improves styling to be more aligned with original design:
https://www.figma.com/file/qdwpPfuitJUNinm6mvmCmG/Unleash-application?node-id=6961%3A38443&t=zsXNAnOurapoLm9j-0;
 - Fixes text to be like in the design;
- Improves `HtmlTooltip` look and behaviour: white arrow, custom width,
etc;
 - Some refactoring and cleanup;
 
Let me know if I should change anything 👍

frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx

@@ -3,14 +3,24 @@ import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
 const StyledHtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
+    maxWidth: theme.spacing(37.5),
     [`& .${tooltipClasses.tooltip}`]: {
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: theme.palette.background.paper,
         padding: theme.spacing(1, 1.5),
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: theme.shape.borderRadiusMedium,
         boxShadow: theme.shadows[2],
         color: theme.palette.text.primary,
+        fontWeight: theme.fontWeight.medium,
+        maxWidth: 'inherit',
+        border: `1px solid ${theme.palette.lightBorder}`,
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        '&:before': {
+            border: `1px solid ${theme.palette.lightBorder}`,
+        },
+        color: theme.palette.background.paper,
     },
 }));
 

frontend/src/component/common/ProFeatureTooltip/ProFeatureTooltip.tsx

@@ -2,41 +2,47 @@ import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-featu
 import { Box, Link, styled, Typography } from '@mui/material';
 
 export interface ProFeatureTooltipProps {
-    text: string;
+    children: React.ReactNode;
 }
 
 const ProFeatureTooltipWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(1, 0.5),
-    padding: theme.spacing(1, 1.5),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.text.primary,
-    width: '100%',
 }));
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
     display: 'inline-flex',
-    justifyContent: 'flex-start',
+    alignItems: 'center',
-    flexDirection: 'row',
+    fontWeight: theme.fontWeight.bold,
-    marginBottom: theme.spacing(1),
+    fontSize: theme.fontSizes.smallBody,
+    gap: theme.spacing(1),
 }));
 
-export const ProFeatureTooltip = ({ text }: ProFeatureTooltipProps) => {
+const StyledBody = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    margin: theme.spacing(1, 0),
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallBody,
+    width: 'fit-content',
+}));
+
+export const ProFeatureTooltip = ({ children }: ProFeatureTooltipProps) => {
     return (
         <ProFeatureTooltipWrapper>
             <StyledTitle>
                 <ProPlanIcon />
-                <span style={{ marginLeft: '4px' }}>
+                Pro & Enterprise feature
-                    Pro & Enterprise feature
-                </span>
             </StyledTitle>
-            <Typography sx={{ alignContent: 'center' }}>{text}</Typography>
+            <StyledBody>{children}</StyledBody>
-            <Typography sx={{ alignContent: 'center' }}>
+            <StyledLink
-                <Link target={'https://www.getunleash.io/plans'}>
+                href={'https://www.getunleash.io/plans'}
-                    Upgrade now
+                target="_blank"
-                </Link>
+            >
-            </Typography>
+                Upgrade now
+            </StyledLink>
         </ProFeatureTooltipWrapper>
     );
 };

frontend/src/component/common/TooltipResolver/TooltipResolver.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Tooltip, TooltipProps } from '@mui/material';
 import { HtmlTooltip } from '../HtmlTooltip/HtmlTooltip';
 
 export interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
-    title?: string | undefined;
+    title?: string;
-    titleComponent?: ReactNode | undefined;
+    titleComponent?: ReactNode;
-    variant?: 'default' | 'white';
+    variant?: 'default' | 'custom';
 }
 
 export const TooltipResolver = ({
@@ -19,7 +19,7 @@ export const TooltipResolver = ({
         return children;
     }
 
-    if (variant === 'white') {
+    if (variant === 'custom') {
         return (
             <HtmlTooltip {...rest} title={title || titleComponent} arrow>
                 {children}

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -21,8 +21,8 @@ import { TablePlaceholder } from 'component/common/Table';
 import { useMediaQuery } from '@mui/material';
 import theme from 'themes/theme';
 import { Search } from 'component/common/Search/Search';
-import { ProFeatureTooltip } from '../../common/ProFeatureTooltip/ProFeatureTooltip';
+import { ProFeatureTooltip } from 'component/common/ProFeatureTooltip/ProFeatureTooltip';
-import { ITooltipResolverProps } from '../../common/TooltipResolver/TooltipResolver';
+import { ITooltipResolverProps } from 'component/common/TooltipResolver/TooltipResolver';
 import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
 
 type PageQueryType = Partial<Record<'search', string>>;
@@ -34,6 +34,7 @@ type projectMap = {
 interface ICreateButtonData {
     disabled: boolean;
     tooltip?: Omit<ITooltipResolverProps, 'children'>;
+    endIcon?: React.ReactNode;
 }
 
 function resolveCreateButtonData(
@@ -45,14 +46,15 @@ function resolveCreateButtonData(
             disabled: true,
             tooltip: {
                 titleComponent: (
-                    <ProFeatureTooltip
+                    <ProFeatureTooltip>
-                        text={
+                        To be able to add more projects you need to upgrade to
-                            'To be able to add more projects you need to upgrade to Pro version'
+                        Pro or Enterprise plan
-                        }
+                    </ProFeatureTooltip>
-                    />
                 ),
-                variant: 'white',
+                sx: { maxWidth: '320px' },
+                variant: 'custom',
             },
+            endIcon: <ProPlanIcon />,
         };
     } else if (!hasAccess) {
         return {
@@ -196,7 +198,7 @@ export const ProjectListNew = () => {
                                 />
                                 <ResponsiveButton
                                     Icon={Add}
-                                    endIcon={<ProPlanIcon />}
+                                    endIcon={createButtonData.endIcon}
                                     onClick={() => navigate('/projects/create')}
                                     maxWidth="700px"
                                     permission={CREATE_PROJECT}