From eb433185a126ac5a43757bf37b5f014a35149657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 14 Dec 2022 08:51:41 +0000
Subject: [PATCH] fix: remove tooltip from favorites cell, some refactoring
 (#2687)

https://linear.app/unleash/issue/2-510/favorite-cell-tooltips-is-buggy-when-pinned-remove-tooltips

Tooltips were buggy when using the pinned feature, so I aligned with
@NicolaeUnleash and decided to remove them for now:
<img width="407" alt="image"
src="https://user-images.githubusercontent.com/14320932/207380515-476a4bec-c1c0-43af-adb8-f7001ae75e9c.png">

Also includes a slight refactor on this component.
---
 .../FavoriteIconCell/FavoriteIconCell.tsx     | 57 +++++++++----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
index 537c9a84ee..ad28a4cd0a 100644
--- a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
+++ b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
@@ -5,49 +5,46 @@ import {
     StarBorder as StarBorderIcon,
 } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
+
+const StyledCell = styled(Box)(({ theme }) => ({
+    paddingLeft: theme.spacing(1.25),
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+    color: theme.palette.primary.main,
+    padding: theme.spacing(1.25),
+}));
+
+const StyledIconButtonInactive = styled(StyledIconButton)({
+    opacity: 0,
+});
 
 interface IFavoriteIconCellProps {
     value?: boolean;
     onClick?: () => void;
 }
 
-const InactiveIconButton = styled(IconButton)(({ theme }) => ({
-    color: theme.palette.primary.main,
-    opacity: 0,
-}));
-
 export const FavoriteIconCell: VFC<IFavoriteIconCellProps> = ({
-    value = false,
+    value,
     onClick,
 }) => (
-    <Box sx={{ pl: 1.25, display: 'inline-flex' }}>
+    <StyledCell>
         <ConditionallyRender
-            condition={value}
+            condition={Boolean(value)}
             show={
-                <TooltipResolver title={'Remove from favorites'}>
-                    <IconButton
-                        onClick={onClick}
-                        color="primary"
-                        size="small"
-                        sx={{ padding: 1.25 }}
-                    >
-                        <StarIcon fontSize="small" />
-                    </IconButton>
-                </TooltipResolver>
+                <StyledIconButton onClick={onClick} size="small">
+                    <StarIcon fontSize="small" />
+                </StyledIconButton>
             }
             elseShow={
-                <TooltipResolver title={'Add to favorites'}>
-                    <InactiveIconButton
-                        className="show-row-hover"
-                        onClick={onClick}
-                        size="small"
-                        sx={{ padding: 1.25 }}
-                    >
-                        <StarBorderIcon fontSize="small" />
-                    </InactiveIconButton>
-                </TooltipResolver>
+                <StyledIconButtonInactive
+                    className="show-row-hover"
+                    onClick={onClick}
+                    size="small"
+                >
+                    <StarBorderIcon fontSize="small" />
+                </StyledIconButtonInactive>
             }
         />
-    </Box>
+    </StyledCell>
 );