fix: Links in tooltips of dashboard chart cards (#24846)

apache · Aug 1, 2023 · ea17dd6 · ea17dd6
1 parent 7f9b038
commit ea17dd6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git 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
@@ -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>