feat: better tooltip links (#2891)

https://linear.app/unleash/issue/2-576/improve-how-text-that-has-tooltip-should-look-so-they-are-not


![image](https://user-images.githubusercontent.com/14320932/212140467-46d4f7f9-b5c1-40ea-9748-4a6ccc7950bb.png)


![image](https://user-images.githubusercontent.com/14320932/212140316-d6e88bc0-c26e-436b-855f-5f6e8697aed8.png)

- Adapts the existing `HtmlTooltip` component to support setting
`maxHeight` and `maxWidth` properties;
- Introduces a new common component: `TooltipLink`;
- Adapts SA (tokens), features (tags), variants (overrides, payloads)
and project access (role and role description);
- Role description in project access now uses this component instead of
the old jankier popover component;

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokensCell/ServiceAccountTokensCell.tsx

@@ -1,22 +1,16 @@
 import { VFC } from 'react';
-import { Link, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { IServiceAccount } from 'interfaces/service-account';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 
 const StyledItem = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
 }));
 
-const StyledLink = styled(Link, {
-    shouldForwardProp: prop => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
-    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
-}));
-
 interface IServiceAccountTokensCellProps {
     serviceAccount: IServiceAccount;
     value: string;
@@ -35,8 +29,8 @@ export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
 
     return (
         <TextCell>
-            <HtmlTooltip
+            <TooltipLink
-                title={
+                tooltip={
                     <>
                         {serviceAccount.tokens?.map(({ id, description }) => (
                             <StyledItem key={id}>
@@ -47,19 +41,15 @@ export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
                         ))}
                     </>
                 }
+                highlighted={
+                    searchQuery.length > 0 &&
+                    value.toLowerCase().includes(searchQuery.toLowerCase())
+                }
             >
-                <StyledLink
+                {serviceAccount.tokens?.length === 1
-                    underline="always"
+                    ? '1 token'
-                    highlighted={
+                    : `${serviceAccount.tokens?.length} tokens`}
-                        searchQuery.length > 0 &&
+            </TooltipLink>
-                        value.toLowerCase().includes(searchQuery.toLowerCase())
-                    }
-                >
-                    {serviceAccount.tokens?.length === 1
-                        ? '1 token'
-                        : `${serviceAccount.tokens?.length} tokens`}
-                </StyledLink>
-            </HtmlTooltip>
         </TextCell>
     );
 };

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

@@ -1,29 +1,44 @@
 import { styled, Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
+import { SpacingArgument } from '@mui/system/createTheme/createSpacing';
 
-const StyledHtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+const StyledHtmlTooltip = styled(
-    <Tooltip {...props} classes={{ popper: className }} />
+    ({ className, maxWidth, maxHeight, ...props }: IHtmlTooltipProps) => (
-))(({ theme }) => ({
+        <Tooltip {...props} classes={{ popper: className }} />
-    maxWidth: theme.spacing(37.5),
+    ),
-    [`& .${tooltipClasses.tooltip}`]: {
+    {
-        display: 'flex',
+        shouldForwardProp: prop => prop !== 'maxWidth' && prop !== 'maxHeight',
-        flexDirection: 'column',
+    }
-        backgroundColor: theme.palette.background.paper,
+)<{ maxWidth?: SpacingArgument; maxHeight?: SpacingArgument }>(
-        padding: theme.spacing(1, 1.5),
+    ({ theme, maxWidth, maxHeight }) => ({
-        borderRadius: theme.shape.borderRadiusMedium,
+        maxWidth: maxWidth || theme.spacing(37.5),
-        boxShadow: theme.shadows[2],
+        [`& .${tooltipClasses.tooltip}`]: {
-        color: theme.palette.text.primary,
+            display: 'flex',
-        fontWeight: theme.fontWeight.medium,
+            flexDirection: 'column',
-        maxWidth: 'inherit',
+            backgroundColor: theme.palette.background.paper,
-        border: `1px solid ${theme.palette.lightBorder}`,
+            padding: theme.spacing(1, 1.5),
-    },
+            borderRadius: theme.shape.borderRadiusMedium,
-    [`& .${tooltipClasses.arrow}`]: {
+            boxShadow: theme.shadows[2],
-        '&:before': {
+            color: theme.palette.text.primary,
+            fontWeight: theme.fontWeight.medium,
+            maxWidth: 'inherit',
             border: `1px solid ${theme.palette.lightBorder}`,
+            maxHeight: maxHeight || theme.spacing(37.5),
+            overflow: 'auto',
         },
-        color: theme.palette.background.paper,
+        [`& .${tooltipClasses.arrow}`]: {
-    },
+            '&:before': {
-}));
+                border: `1px solid ${theme.palette.lightBorder}`,
+            },
+            color: theme.palette.background.paper,
+        },
+    })
+);
 
-export const HtmlTooltip = (props: TooltipProps) => (
+export interface IHtmlTooltipProps extends TooltipProps {
+    maxWidth?: SpacingArgument;
+    maxHeight?: SpacingArgument;
+}
+
+export const HtmlTooltip = (props: IHtmlTooltipProps) => (
     <StyledHtmlTooltip {...props}>{props.children}</StyledHtmlTooltip>
 );

frontend/src/component/common/Table/cells/FeatureTagCell/FeatureTagCell.tsx

@@ -1,21 +1,15 @@
 import { VFC } from 'react';
 import { FeatureSchema } from 'openapi';
-import { Link, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { TextCell } from '../TextCell/TextCell';
-import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 
 const StyledTag = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
 }));
 
-const StyledLink = styled(Link, {
-    shouldForwardProp: prop => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
-    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
-}));
-
 interface IFeatureTagCellProps {
     row: {
         original: FeatureSchema;
@@ -31,8 +25,12 @@ export const FeatureTagCell: VFC<IFeatureTagCellProps> = ({ row, value }) => {
 
     return (
         <TextCell>
-            <HtmlTooltip
+            <TooltipLink
-                title={
+                highlighted={
+                    searchQuery.length > 0 &&
+                    value.toLowerCase().includes(searchQuery.toLowerCase())
+                }
+                tooltip={
                     <>
                         {row.original.tags?.map(tag => (
                             <StyledTag key={tag.type + tag.value}>
@@ -44,18 +42,10 @@ export const FeatureTagCell: VFC<IFeatureTagCellProps> = ({ row, value }) => {
                     </>
                 }
             >
-                <StyledLink
+                {row.original.tags?.length === 1
-                    underline="always"
+                    ? '1 tag'
-                    highlighted={
+                    : `${row.original.tags?.length} tags`}
-                        searchQuery.length > 0 &&
+            </TooltipLink>
-                        value.toLowerCase().includes(searchQuery.toLowerCase())
-                    }
-                >
-                    {row.original.tags?.length === 1
-                        ? '1 tag'
-                        : `${row.original.tags?.length} tags`}
-                </StyledLink>
-            </HtmlTooltip>
         </TextCell>
     );
 };

frontend/src/component/common/TooltipLink/TooltipLink.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { Link, LinkProps, styled, TooltipProps } from '@mui/material';
+import { HtmlTooltip, IHtmlTooltipProps } from '../HtmlTooltip/HtmlTooltip';
+
+const StyledLink = styled(Link, {
+    shouldForwardProp: prop => prop !== 'highlighted',
+})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
+    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
+    color: theme.palette.text.primary,
+    textDecorationColor: theme.palette.text.disabled,
+    textDecorationStyle: 'dashed',
+    textUnderlineOffset: theme.spacing(0.5),
+}));
+
+interface ITooltipLinkProps extends LinkProps {
+    tooltip: ReactNode;
+    highlighted?: boolean;
+    tooltipProps?: Omit<IHtmlTooltipProps, 'title' | 'children'>;
+    children: ReactNode;
+}
+
+export const TooltipLink = ({
+    tooltip,
+    highlighted,
+    tooltipProps,
+    children,
+    ...props
+}: ITooltipLinkProps) => (
+    <HtmlTooltip title={tooltip} {...tooltipProps}>
+        <StyledLink highlighted={highlighted} {...props}>
+            {children}
+        </StyledLink>
+    </HtmlTooltip>
+);

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/OverridesCell/OverridesCell.tsx

@@ -1,20 +1,14 @@
-import { Link, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
-import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { IOverride } from 'interfaces/featureToggle';
 
 const StyledItem = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
 }));
 
-const StyledLink = styled(Link, {
-    shouldForwardProp: prop => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
-    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
-}));
-
 interface IOverridesCellProps {
     value?: IOverride[];
 }
@@ -29,8 +23,8 @@ export const OverridesCell = ({ value: overrides }: IOverridesCellProps) => {
 
     return (
         <TextCell>
-            <HtmlTooltip
+            <TooltipLink
-                title={
+                tooltip={
                     <>
                         {overrides.map((override, index) => (
                             <StyledItem key={override.contextName + index}>
@@ -41,23 +35,19 @@ export const OverridesCell = ({ value: overrides }: IOverridesCellProps) => {
                         ))}
                     </>
                 }
+                highlighted={
+                    searchQuery.length > 0 &&
+                    overrides
+                        ?.map(overrideToString)
+                        .join('\n')
+                        .toLowerCase()
+                        .includes(searchQuery.toLowerCase())
+                }
             >
-                <StyledLink
+                {overrides.length === 1
-                    underline="always"
+                    ? '1 override'
-                    highlighted={
+                    : `${overrides.length} overrides`}
-                        searchQuery.length > 0 &&
+            </TooltipLink>
-                        overrides
-                            ?.map(overrideToString)
-                            .join('\n')
-                            .toLowerCase()
-                            .includes(searchQuery.toLowerCase())
-                    }
-                >
-                    {overrides.length === 1
-                        ? '1 override'
-                        : `${overrides.length} overrides`}
-                </StyledLink>
-            </HtmlTooltip>
         </TextCell>
     );
 };

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/PayloadCell/PayloadCell.tsx

@@ -1,8 +1,8 @@
-import { Link, styled, Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
-import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { IPayload } from 'interfaces/featureToggle';
 
 const StyledItem = styled(Typography)(({ theme }) => ({
@@ -10,12 +10,6 @@ const StyledItem = styled(Typography)(({ theme }) => ({
     whiteSpace: 'pre-wrap',
 }));
 
-const StyledLink = styled(Link, {
-    shouldForwardProp: prop => prop !== 'highlighted',
-})<{ highlighted?: boolean }>(({ theme, highlighted }) => ({
-    backgroundColor: highlighted ? theme.palette.highlight : 'transparent',
-}));
-
 interface IPayloadCellProps {
     value?: IPayload;
 }
@@ -35,8 +29,8 @@ export const PayloadCell = ({ value: payload }: IPayloadCellProps) => {
 
     return (
         <TextCell>
-            <HtmlTooltip
+            <TooltipLink
-                title={
+                tooltip={
                     <>
                         <StyledItem>
                             <Highlighter search={searchQuery}>
@@ -45,19 +39,15 @@ export const PayloadCell = ({ value: payload }: IPayloadCellProps) => {
                         </StyledItem>
                     </>
                 }
+                highlighted={
+                    searchQuery.length > 0 &&
+                    payload.value
+                        .toLowerCase()
+                        .includes(searchQuery.toLowerCase())
+                }
             >
-                <StyledLink
+                {payload.type}
-                    underline="always"
+            </TooltipLink>
-                    highlighted={
-                        searchQuery.length > 0 &&
-                        payload.value
-                            .toLowerCase()
-                            .includes(searchQuery.toLowerCase())
-                    }
-                >
-                    {payload.type}
-                </StyledLink>
-            </HtmlTooltip>
         </TextCell>
     );
 };

frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions.tsx

@@ -8,12 +8,19 @@ export const ProjectRoleDescriptionEnvironmentPermissions = ({
     permissions,
 }: IProjectRoleDescriptionEnvironmentPermissionsProps) => (
     <>
-        {permissions
+        {[
-            .filter((permission: any) => permission.environment === environment)
+            ...new Set(
-            .map((permission: any) => permission.displayName)
+                permissions
+                    .filter(
+                        (permission: any) =>
+                            permission.environment === environment
+                    )
+                    .map((permission: any) => permission.displayName)
+            ),
+        ]
             .sort()
             .map((permission: any) => (
-                <p key={permission}>{permission}</p>
+                <p key={`${environment}-${permission}`}>{permission}</p>
             ))}
     </>
 );

frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessRoleCell/ProjectAccessRoleCell.tsx

@@ -1,19 +1,7 @@
-import { Link, Popover, styled } from '@mui/material';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import React from 'react';
 import { VFC } from 'react';
 import { ProjectRoleDescription } from 'component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription';
-
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
-const StyledLink = styled(Link)(() => ({
-    textDecoration: 'none',
-    '&:hover, &:focus': {
-        textDecoration: 'underline',
-    },
-}));
-
-const StyledPopover = styled(Popover)(() => ({
-    pointerEvents: 'none',
-}));
 
 interface IProjectAccessRoleCellProps {
     roleId: number;
@@ -28,49 +16,25 @@ export const ProjectAccessRoleCell: VFC<IProjectAccessRoleCellProps> = ({
     value,
     emptyText,
 }) => {
-    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-
-    const onPopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const onPopoverClose = () => {
-        setAnchorEl(null);
-    };
-
     if (!value) return <TextCell>{emptyText}</TextCell>;
 
     return (
-        <>
+        <TextCell>
-            <TextCell>
+            <TooltipLink
-                <StyledLink
+                tooltip={
-                    onMouseEnter={event => {
+                    <ProjectRoleDescription
-                        onPopoverOpen(event);
+                        roleId={roleId}
-                    }}
+                        projectId={projectId}
-                    onMouseLeave={onPopoverClose}
+                        popover
-                >
+                    />
-                    {value}
+                }
-                </StyledLink>
+                tooltipProps={{
-            </TextCell>
+                    maxWidth: 500,
-            <StyledPopover
+                    maxHeight: 600,
-                open={Boolean(anchorEl)}
-                anchorEl={anchorEl}
-                onClose={onPopoverClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }}
-                transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'left',
                 }}
             >
-                <ProjectRoleDescription
+                {value}
-                    roleId={roleId}
+            </TooltipLink>
-                    projectId={projectId}
+        </TextCell>
-                    popover
-                />
-            </StyledPopover>
-        </>
     );
 };