Skip to content

Commit

Permalink
fix: Links in tooltips of dashboard chart cards (#24846)
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-s-molina authored Aug 1, 2023
1 parent 7f9b038 commit ea17dd6
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@

import React from 'react';
import { FeatureFlag } from '@superset-ui/core';
import { act, render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { act, render, screen, within } from 'spec/helpers/testing-library';
import AddSliceCard from '.';

jest.mock('src/components/DynamicPlugins', () => ({
Expand Down Expand Up @@ -60,3 +61,21 @@ test('render thumbnail if feature flag is set', async () => {

expect(screen.queryByTestId('thumbnail')).toBeInTheDocument();
});

test('does not render the tooltip with anchors', async () => {
const mock = jest
.spyOn(React, 'useState')
.mockImplementation(() => [true, jest.fn()]);
render(
<AddSliceCard
{...mockedProps}
datasourceUrl="http://test.com"
datasourceName="datasource-name"
/>,
);
userEvent.hover(screen.getByRole('link', { name: 'datasource-name' }));
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
const tooltip = await screen.findByRole('tooltip');
expect(within(tooltip).queryByRole('link')).not.toBeInTheDocument();
mock.mockRestore();
});
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import React, {
useMemo,
useRef,
useState,
PropsWithChildren,
} from 'react';
import { t, isFeatureEnabled, FeatureFlag, css } from '@superset-ui/core';
import ImageLoader from 'src/components/ListViewCard/ImageLoader';
Expand All @@ -34,8 +35,15 @@ import { Theme } from '@emotion/react';

const FALLBACK_THUMBNAIL_URL = '/static/assets/images/chart-card-fallback.svg';

const TruncatedTextWithTooltip: React.FC = ({ children, ...props }) => {
const [isTruncated, setIsTruncated] = useState(false);
const TruncatedTextWithTooltip = ({
children,
tooltipText,
...props
}: PropsWithChildren<{
tooltipText?: string;
}>) => {
// Uses React.useState for testing purposes
const [isTruncated, setIsTruncated] = React.useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
setIsTruncated(
Expand All @@ -58,13 +66,18 @@ const TruncatedTextWithTooltip: React.FC = ({ children, ...props }) => {
</div>
);

return isTruncated ? <Tooltip title={children}>{div}</Tooltip> : div;
return isTruncated ? (
<Tooltip title={tooltipText || children}>{div}</Tooltip>
) : (
div
);
};

const MetadataItem: React.FC<{
label: ReactNode;
value: ReactNode;
}> = ({ label, value }) => (
tooltipText?: string;
}> = ({ label, value, tooltipText }) => (
<div
css={(theme: Theme) => css`
font-size: ${theme.typography.sizes.s}px;
Expand All @@ -89,7 +102,9 @@ const MetadataItem: React.FC<{
min-width: 0;
`}
>
<TruncatedTextWithTooltip>{value}</TruncatedTextWithTooltip>
<TruncatedTextWithTooltip tooltipText={tooltipText}>
{value}
</TruncatedTextWithTooltip>
</span>
</div>
);
Expand Down Expand Up @@ -273,6 +288,7 @@ const AddSliceCard: React.FC<{
datasourceName
)
}
tooltipText={datasourceName}
/>
<MetadataItem label={t('Modified')} value={lastModified} />
</div>
Expand Down

0 comments on commit ea17dd6

Please sign in to comment.