fix: long descriptions should have tooltips (#6202)

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={() => (
+                show={renderSubtitle}
-                    <StyledSubtitle data-loading>
-                        <Highlighter search={searchQuery}>
-                            {subtitle}
-                        </Highlighter>
-                    </StyledSubtitle>
-                )}
             />
         </StyledContainer>
     );

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);
+    });
+});

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={
+                show={renderSubtitle}
-                    <>
-                        <StyledDescription data-loading>
-                            <Highlighter search={searchQuery}>
-                                {subtitle}
-                            </Highlighter>
-                        </StyledDescription>
-                    </>
-                }
             />
         </StyledContainer>
     );
 
-    return to ? (
+    if (to) {
-        <StyledLink component={RouterLink} to={to} underline='hover'>
+        return (
-            {content}
+            <StyledLink component={RouterLink} to={to} underline='hover'>
-        </StyledLink>
+                {content}
-    ) : onClick ? (
+            </StyledLink>
-        <StyledLink onClick={onClick} underline='hover'>
+        );
-            {content}
+    }
-        </StyledLink>
+
-    ) : (
+    if (onClick) {
-        <StyledWrapper>{content}</StyledWrapper>
+        return (
-    );
+            <StyledLink onClick={onClick} underline='hover'>
+                {content}
+            </StyledLink>
+        );
+    }
+
+    return <StyledWrapper>{content}</StyledWrapper>;
 };