From c2b1fd20e526e8e540c7b7c77e496e8c8f76a5ba Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 15 Feb 2024 14:17:55 +0100
Subject: [PATCH] fix: long descriptions should have tooltips (#6202)

---
 .../cells/HighlightCell/HighlightCell.tsx     | 31 ++++++---
 .../Table/cells/LinkCell/LinkCell.test.tsx    | 22 +++++++
 .../common/Table/cells/LinkCell/LinkCell.tsx  | 63 ++++++++++++-------
 3 files changed, 86 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/component/common/Table/cells/LinkCell/LinkCell.test.tsx

diff --git a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
index 1a7175333c..1a9d6c2060 100644
--- a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
+++ b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
@@ -1,8 +1,9 @@
-import { VFC } from 'react';
+import React, { VFC } from 'react';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 interface IHighlightCellProps {
     value: string;
@@ -45,6 +46,26 @@ export const HighlightCell: VFC<IHighlightCellProps> = ({
 }) => {
     const { searchQuery } = useSearchHighlightContext();
 
+    const renderSubtitle = (
+        <ConditionallyRender
+            condition={Boolean(subtitle && subtitle.length > 40)}
+            show={
+                <HtmlTooltip title={subtitle} placement='bottom-start' arrow>
+                    <StyledSubtitle data-loading>
+                        <Highlighter search={searchQuery}>
+                            {subtitle}
+                        </Highlighter>
+                    </StyledSubtitle>
+                </HtmlTooltip>
+            }
+            elseShow={
+                <StyledSubtitle data-loading>
+                    <Highlighter search={searchQuery}>{subtitle}</Highlighter>
+                </StyledSubtitle>
+            }
+        />
+    );
+
     return (
         <StyledContainer>
             <StyledTitle
@@ -59,13 +80,7 @@ export const HighlightCell: VFC<IHighlightCellProps> = ({
             </StyledTitle>
             <ConditionallyRender
                 condition={Boolean(subtitle)}
-                show={() => (
-                    <StyledSubtitle data-loading>
-                        <Highlighter search={searchQuery}>
-                            {subtitle}
-                        </Highlighter>
-                    </StyledSubtitle>
-                )}
+                show={renderSubtitle}
             />
         </StyledContainer>
     );
diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.test.tsx b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.test.tsx
new file mode 100644
index 0000000000..424e5f2f86
--- /dev/null
+++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import userEvent from '@testing-library/user-event';
+import { LinkCell } from './LinkCell';
+
+describe('LinkCell Component', () => {
+    it('renders the subtitle in an HtmlTooltip when length is greater than 40 characters', async () => {
+        const longSubtitle =
+            'This is a long subtitle that should trigger tooltip rendering.';
+        render(<LinkCell title='Test Title' subtitle={longSubtitle} />);
+
+        const subtitleElement = screen.getByText(longSubtitle);
+        expect(subtitleElement).toBeInTheDocument();
+
+        userEvent.hover(subtitleElement);
+
+        const tooltip = await screen.findByRole('tooltip');
+        expect(tooltip).toBeInTheDocument();
+        expect(tooltip).toHaveTextContent(longSubtitle);
+    });
+});
diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
index d23452ff3c..867d0d9ebf 100644
--- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
+++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import {
     StyledWrapper,
     StyledLink,
@@ -18,7 +19,7 @@ interface ILinkCellProps {
     subtitle?: string;
 }
 
-export const LinkCell: FC<ILinkCellProps> = ({
+export const LinkCell: React.FC<ILinkCellProps> = ({
     title,
     to,
     onClick,
@@ -27,6 +28,26 @@ export const LinkCell: FC<ILinkCellProps> = ({
 }) => {
     const { searchQuery } = useSearchHighlightContext();
 
+    const renderSubtitle = (
+        <ConditionallyRender
+            condition={Boolean(subtitle && subtitle.length > 40)}
+            show={
+                <HtmlTooltip title={subtitle} placement='bottom-start' arrow>
+                    <StyledDescription data-loading>
+                        <Highlighter search={searchQuery}>
+                            {subtitle}
+                        </Highlighter>
+                    </StyledDescription>
+                </HtmlTooltip>
+            }
+            elseShow={
+                <StyledDescription data-loading>
+                    <Highlighter search={searchQuery}>{subtitle}</Highlighter>
+                </StyledDescription>
+            }
+        />
+    );
+
     const content = (
         <StyledContainer>
             <StyledTitle
@@ -41,28 +62,26 @@ export const LinkCell: FC<ILinkCellProps> = ({
             </StyledTitle>
             <ConditionallyRender
                 condition={Boolean(subtitle)}
-                show={
-                    <>
-                        <StyledDescription data-loading>
-                            <Highlighter search={searchQuery}>
-                                {subtitle}
-                            </Highlighter>
-                        </StyledDescription>
-                    </>
-                }
+                show={renderSubtitle}
             />
         </StyledContainer>
     );
 
-    return to ? (
-        <StyledLink component={RouterLink} to={to} underline='hover'>
-            {content}
-        </StyledLink>
-    ) : onClick ? (
-        <StyledLink onClick={onClick} underline='hover'>
-            {content}
-        </StyledLink>
-    ) : (
-        <StyledWrapper>{content}</StyledWrapper>
-    );
+    if (to) {
+        return (
+            <StyledLink component={RouterLink} to={to} underline='hover'>
+                {content}
+            </StyledLink>
+        );
+    }
+
+    if (onClick) {
+        return (
+            <StyledLink onClick={onClick} underline='hover'>
+                {content}
+            </StyledLink>
+        );
+    }
+
+    return <StyledWrapper>{content}</StyledWrapper>;
 };