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 = ({ }) => { const { searchQuery } = useSearchHighlightContext(); + const renderSubtitle = ( + 40)} + show={ + + + + {subtitle} + + + + } + elseShow={ + + {subtitle} + + } + /> + ); + return ( = ({ ( - - - {subtitle} - - - )} + show={renderSubtitle} /> ); 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(); + + 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 = ({ +export const LinkCell: React.FC = ({ title, to, onClick, @@ -27,6 +28,26 @@ export const LinkCell: FC = ({ }) => { const { searchQuery } = useSearchHighlightContext(); + const renderSubtitle = ( + 40)} + show={ + + + + {subtitle} + + + + } + elseShow={ + + {subtitle} + + } + /> + ); + const content = ( = ({ - - - {subtitle} - - - - } + show={renderSubtitle} /> ); - return to ? ( - - {content} - - ) : onClick ? ( - - {content} - - ) : ( - {content} - ); + if (to) { + return ( + + {content} + + ); + } + + if (onClick) { + return ( + + {content} + + ); + } + + return {content}; };