mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
fix: long descriptions should have tooltips (#6202)
This commit is contained in:
parent
ef8d2edcc0
commit
c2b1fd20e5
@ -1,8 +1,9 @@
|
|||||||
import { VFC } from 'react';
|
import React, { VFC } from 'react';
|
||||||
import { Highlighter } from 'component/common/Highlighter/Highlighter';
|
import { Highlighter } from 'component/common/Highlighter/Highlighter';
|
||||||
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
||||||
import { Box, styled } from '@mui/material';
|
import { Box, styled } from '@mui/material';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
|
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
|
||||||
|
|
||||||
interface IHighlightCellProps {
|
interface IHighlightCellProps {
|
||||||
value: string;
|
value: string;
|
||||||
@ -45,6 +46,26 @@ export const HighlightCell: VFC<IHighlightCellProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { searchQuery } = useSearchHighlightContext();
|
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 (
|
return (
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledTitle
|
<StyledTitle
|
||||||
@ -59,13 +80,7 @@ export const HighlightCell: VFC<IHighlightCellProps> = ({
|
|||||||
</StyledTitle>
|
</StyledTitle>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={Boolean(subtitle)}
|
condition={Boolean(subtitle)}
|
||||||
show={() => (
|
show={renderSubtitle}
|
||||||
<StyledSubtitle data-loading>
|
|
||||||
<Highlighter search={searchQuery}>
|
|
||||||
{subtitle}
|
|
||||||
</Highlighter>
|
|
||||||
</StyledSubtitle>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
);
|
);
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
@ -1,8 +1,9 @@
|
|||||||
import { FC } from 'react';
|
import React from 'react';
|
||||||
import { Link as RouterLink } from 'react-router-dom';
|
import { Link as RouterLink } from 'react-router-dom';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { Highlighter } from 'component/common/Highlighter/Highlighter';
|
import { Highlighter } from 'component/common/Highlighter/Highlighter';
|
||||||
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
||||||
|
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
|
||||||
import {
|
import {
|
||||||
StyledWrapper,
|
StyledWrapper,
|
||||||
StyledLink,
|
StyledLink,
|
||||||
@ -18,7 +19,7 @@ interface ILinkCellProps {
|
|||||||
subtitle?: string;
|
subtitle?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LinkCell: FC<ILinkCellProps> = ({
|
export const LinkCell: React.FC<ILinkCellProps> = ({
|
||||||
title,
|
title,
|
||||||
to,
|
to,
|
||||||
onClick,
|
onClick,
|
||||||
@ -27,6 +28,26 @@ export const LinkCell: FC<ILinkCellProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { searchQuery } = useSearchHighlightContext();
|
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 = (
|
const content = (
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledTitle
|
<StyledTitle
|
||||||
@ -41,28 +62,26 @@ export const LinkCell: FC<ILinkCellProps> = ({
|
|||||||
</StyledTitle>
|
</StyledTitle>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={Boolean(subtitle)}
|
condition={Boolean(subtitle)}
|
||||||
show={
|
show={renderSubtitle}
|
||||||
<>
|
|
||||||
<StyledDescription data-loading>
|
|
||||||
<Highlighter search={searchQuery}>
|
|
||||||
{subtitle}
|
|
||||||
</Highlighter>
|
|
||||||
</StyledDescription>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
);
|
);
|
||||||
|
|
||||||
return to ? (
|
if (to) {
|
||||||
|
return (
|
||||||
<StyledLink component={RouterLink} to={to} underline='hover'>
|
<StyledLink component={RouterLink} to={to} underline='hover'>
|
||||||
{content}
|
{content}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
) : onClick ? (
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onClick) {
|
||||||
|
return (
|
||||||
<StyledLink onClick={onClick} underline='hover'>
|
<StyledLink onClick={onClick} underline='hover'>
|
||||||
{content}
|
{content}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
) : (
|
|
||||||
<StyledWrapper>{content}</StyledWrapper>
|
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <StyledWrapper>{content}</StyledWrapper>;
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user