Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: long descriptions should have tooltips (#6202)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-15 14:17:55 +01:00 committed by GitHub
parent ef8d2edcc0
commit c2b1fd20e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 86 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
View File

@ -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>
);

22
frontend/src/component/common/Table/cells/LinkCell/LinkCell.test.tsx Normal file
View File

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

63
frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
View File

@ -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>;
};