From 08c1123144a27477a182b08c46cf82bce28e1f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 19 Jan 2023 13:46:26 +0000
Subject: [PATCH] fix: tooltip arrow regression after last scroll max size feat
 (#2935)

Fixes an issue where the `HtmlTooltip` arrow would no longer work after
a regression included with https://github.com/Unleash/unleash/pull/2891

Also adds the arrow prop to most usages of the tooltip to keep
consistency.
---
 .../component/common/HtmlTooltip/HtmlTooltip.tsx   | 14 +++++++++++---
 .../component/common/TooltipLink/TooltipLink.tsx   |  4 ++--
 .../EnvironmentNameCell/EnvironmentNameCell.tsx    |  3 ++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx b/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
index d36f2eaf1d..c9f90995c5 100644
--- a/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
+++ b/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
@@ -1,9 +1,18 @@
 import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
 import { SpacingArgument } from '@mui/system/createTheme/createSpacing';
 
+const StyledHtmlTooltipBody = styled('div')(({ theme }) => ({
+    overflow: 'auto',
+    padding: theme.spacing(1, 1.5),
+}));
+
 const StyledHtmlTooltip = styled(
     ({ className, maxWidth, maxHeight, ...props }: IHtmlTooltipProps) => (
-        <Tooltip {...props} classes={{ popper: className }} />
+        <Tooltip
+            {...props}
+            title={<StyledHtmlTooltipBody>{props.title}</StyledHtmlTooltipBody>}
+            classes={{ popper: className }}
+        />
     ),
     {
         shouldForwardProp: prop => prop !== 'maxWidth' && prop !== 'maxHeight',
@@ -15,7 +24,7 @@ const StyledHtmlTooltip = styled(
             display: 'flex',
             flexDirection: 'column',
             backgroundColor: theme.palette.background.paper,
-            padding: theme.spacing(1, 1.5),
+            padding: 0,
             borderRadius: theme.shape.borderRadiusMedium,
             boxShadow: theme.shadows[2],
             color: theme.palette.text.primary,
@@ -23,7 +32,6 @@ const StyledHtmlTooltip = styled(
             maxWidth: 'inherit',
             border: `1px solid ${theme.palette.lightBorder}`,
             maxHeight: maxHeight || theme.spacing(37.5),
-            overflow: 'auto',
         },
         [`& .${tooltipClasses.arrow}`]: {
             '&:before': {
diff --git a/frontend/src/component/common/TooltipLink/TooltipLink.tsx b/frontend/src/component/common/TooltipLink/TooltipLink.tsx
index 6ab5494865..23d1c2fbf9 100644
--- a/frontend/src/component/common/TooltipLink/TooltipLink.tsx
+++ b/frontend/src/component/common/TooltipLink/TooltipLink.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Link, LinkProps, styled, TooltipProps } from '@mui/material';
+import { Link, LinkProps, styled } from '@mui/material';
 import { HtmlTooltip, IHtmlTooltipProps } from '../HtmlTooltip/HtmlTooltip';
 
 const StyledLink = styled(Link, {
@@ -26,7 +26,7 @@ export const TooltipLink = ({
     children,
     ...props
 }: ITooltipLinkProps) => (
-    <HtmlTooltip title={tooltip} {...tooltipProps}>
+    <HtmlTooltip title={tooltip} {...tooltipProps} arrow>
         <StyledLink highlighted={highlighted} {...props}>
             {children}
         </StyledLink>
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
index 7f81601dba..21bf80e305 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
@@ -46,7 +46,7 @@ export const EnvironmentNameCell = ({
                 condition={!environment.enabled}
                 show={
                     <HtmlTooltip
-                        sx={{ maxWidth: '270px' }}
+                        maxWidth="270px"
                         title={
                             <>
                                 <StyledTooltipTitle>
@@ -60,6 +60,7 @@ export const EnvironmentNameCell = ({
                             </>
                         }
                         describeChild
+                        arrow
                     >
                         <StyledBadge color="neutral">Deprecated</StyledBadge>
                     </HtmlTooltip>