You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2023/08/01 13:28:24 UTC
[superset] branch master updated: fix: Links in tooltips of dashboard chart cards (#24846)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new ea17dd637c fix: Links in tooltips of dashboard chart cards (#24846)
ea17dd637c is described below
commit ea17dd637c9259236292d7d81887e59f0f14eacc
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Tue Aug 1 10:28:10 2023 -0300
fix: Links in tooltips of dashboard chart cards (#24846)
---
.../components/AddSliceCard/AddSliceCard.test.tsx | 21 ++++++++++++++++-
.../components/AddSliceCard/AddSliceCard.tsx | 26 +++++++++++++++++-----
2 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
index 26cd7b945d..3aa22a8408 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
@@ -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();
+});
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
index bf008a359e..af824bf4c3 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
@@ -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>