mirror of https://github.com/apache/superset.git
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 { 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', () => ({
|
||||
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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';
|
||||
|
@ -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(
|
||||
|
@ -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;
|
||||
|
@ -89,7 +102,9 @@ const MetadataItem: React.FC<{
|
|||
min-width: 0;
|
||||
`}
|
||||
>
|
||||
<TruncatedTextWithTooltip>{value}</TruncatedTextWithTooltip>
|
||||
<TruncatedTextWithTooltip tooltipText={tooltipText}>
|
||||
{value}
|
||||
</TruncatedTextWithTooltip>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
@ -273,6 +288,7 @@ const AddSliceCard: React.FC<{
|
|||
datasourceName
|
||||
)
|
||||
}
|
||||
tooltipText={datasourceName}
|
||||
/>
|
||||
<MetadataItem label={t('Modified')} value={lastModified} />
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue