mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: Links in tooltips of dashboard chart cards (#24846)
This commit is contained in:
parent
7f9b0380e0
commit
ea17dd637c
@ -19,7 +19,8 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FeatureFlag } from '@superset-ui/core';
|
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 '.';
|
import AddSliceCard from '.';
|
||||||
|
|
||||||
jest.mock('src/components/DynamicPlugins', () => ({
|
jest.mock('src/components/DynamicPlugins', () => ({
|
||||||
@ -60,3 +61,21 @@ test('render thumbnail if feature flag is set', async () => {
|
|||||||
|
|
||||||
expect(screen.queryByTestId('thumbnail')).toBeInTheDocument();
|
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();
|
||||||
|
});
|
||||||
|
@ -24,6 +24,7 @@ import React, {
|
|||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
|
PropsWithChildren,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { t, isFeatureEnabled, FeatureFlag, css } from '@superset-ui/core';
|
import { t, isFeatureEnabled, FeatureFlag, css } from '@superset-ui/core';
|
||||||
import ImageLoader from 'src/components/ListViewCard/ImageLoader';
|
import ImageLoader from 'src/components/ListViewCard/ImageLoader';
|
||||||
@ -34,8 +35,15 @@ import { Theme } from '@emotion/react';
|
|||||||
|
|
||||||
const FALLBACK_THUMBNAIL_URL = '/static/assets/images/chart-card-fallback.svg';
|
const FALLBACK_THUMBNAIL_URL = '/static/assets/images/chart-card-fallback.svg';
|
||||||
|
|
||||||
const TruncatedTextWithTooltip: React.FC = ({ children, ...props }) => {
|
const TruncatedTextWithTooltip = ({
|
||||||
const [isTruncated, setIsTruncated] = useState(false);
|
children,
|
||||||
|
tooltipText,
|
||||||
|
...props
|
||||||
|
}: PropsWithChildren<{
|
||||||
|
tooltipText?: string;
|
||||||
|
}>) => {
|
||||||
|
// Uses React.useState for testing purposes
|
||||||
|
const [isTruncated, setIsTruncated] = React.useState(false);
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsTruncated(
|
setIsTruncated(
|
||||||
@ -58,13 +66,18 @@ const TruncatedTextWithTooltip: React.FC = ({ children, ...props }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
return isTruncated ? <Tooltip title={children}>{div}</Tooltip> : div;
|
return isTruncated ? (
|
||||||
|
<Tooltip title={tooltipText || children}>{div}</Tooltip>
|
||||||
|
) : (
|
||||||
|
div
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const MetadataItem: React.FC<{
|
const MetadataItem: React.FC<{
|
||||||
label: ReactNode;
|
label: ReactNode;
|
||||||
value: ReactNode;
|
value: ReactNode;
|
||||||
}> = ({ label, value }) => (
|
tooltipText?: string;
|
||||||
|
}> = ({ label, value, tooltipText }) => (
|
||||||
<div
|
<div
|
||||||
css={(theme: Theme) => css`
|
css={(theme: Theme) => css`
|
||||||
font-size: ${theme.typography.sizes.s}px;
|
font-size: ${theme.typography.sizes.s}px;
|
||||||
@ -89,7 +102,9 @@ const MetadataItem: React.FC<{
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<TruncatedTextWithTooltip>{value}</TruncatedTextWithTooltip>
|
<TruncatedTextWithTooltip tooltipText={tooltipText}>
|
||||||
|
{value}
|
||||||
|
</TruncatedTextWithTooltip>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -273,6 +288,7 @@ const AddSliceCard: React.FC<{
|
|||||||
datasourceName
|
datasourceName
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
tooltipText={datasourceName}
|
||||||
/>
|
/>
|
||||||
<MetadataItem label={t('Modified')} value={lastModified} />
|
<MetadataItem label={t('Modified')} value={lastModified} />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user