chore(Tooltip): Upgrade Tooltip to Ant Design 5 (#31182)

Co-authored-by: Diego Pucci <[email protected]>
apache · Nov 30, 2024 · 3d3c09d · 3d3c09d
1 parent 97dde8c
commit 3d3c09d
Show file tree

Hide file tree

Showing 28 changed files with 105 additions and 105 deletions.
diff --git a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
@@ -87,7 +87,7 @@ describe('Charts list', () => {
       visitChartList();
       cy.getBySel('count-crosslinks').should('be.visible');
       cy.getBySel('crosslinks').first().trigger('mouseover');
-      cy.get('.ant-tooltip')
+      cy.get('.antd5-tooltip')
         .contains('3 - Sample dashboard')
         .invoke('removeAttr', 'target')
         .click();

diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
@@ -99,16 +99,13 @@ describe('Color scheme control', () => {
     cy.get('.ant-select-selection-item .color-scheme-label').trigger(
       'mouseover',
     );
+    cy.get('.color-scheme-tooltip').should('be.visible');
     cy.get('.color-scheme-tooltip').contains('Superset Colors');
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
     cy.get('.Control[data-test="color_scheme"] input[type="search"]').focus();
-    cy.focused().type('lyftColors{enter}');
-    cy.get(
-      '.Control[data-test="color_scheme"] .ant-select-selection-item [data-test="lyftColors"]',
-    ).should('exist');
-    cy.get('.ant-select-selection-item .color-scheme-label').trigger(
-      'mouseover',
-    );
+    cy.focused().type('lyftColors');
+    cy.getBySel('lyftColors').should('exist');
+    cy.getBySel('lyftColors').trigger('mouseover');
     cy.get('.color-scheme-tooltip').should('not.exist');
   });
 });

diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -140,7 +140,7 @@ export const sqlLabView = {
   tabsNavList: "[class='ant-tabs-nav-list']",
   tab: "[class='ant-tabs-tab-btn']",
   addTabButton: dataTestLocator('add-tab-icon'),
-  tooltip: '.ant-tooltip-content',
+  tooltip: '.antd5-tooltip-content',
   tabName: '.css-1suejie',
   schemaInput: '[data-test=DatabaseSelector] > :nth-child(2)',
   loadingIndicator: '.Select__loading-indicator',

diff --git a/...et-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/...et-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -18,9 +18,8 @@
  */
 import { CSSProperties } from 'react';
 import { kebabCase } from 'lodash';
-import { TooltipPlacement } from 'antd/lib/tooltip';
 import { t } from '@superset-ui/core';
-import { Tooltip, TooltipProps } from './Tooltip';
+import { Tooltip, TooltipProps, TooltipPlacement } from './Tooltip';
 
 export interface InfoTooltipWithTriggerProps {
   label?: string;

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -17,48 +17,41 @@
  * under the License.
  */
 
-import { useTheme, css } from '@superset-ui/core';
-import { Tooltip as BaseTooltip } from 'antd';
-import type { TooltipProps } from 'antd/lib/tooltip';
-import { Global } from '@emotion/react';
+import { useTheme } from '@superset-ui/core';
+import { Tooltip as BaseTooltip } from 'antd-v5';
+import {
+  TooltipProps as BaseTooltipProps,
+  TooltipPlacement as BaseTooltipPlacement,
+} from 'antd-v5/lib/tooltip';
 
-export type { TooltipProps } from 'antd/lib/tooltip';
+export type TooltipProps = BaseTooltipProps;
+export type TooltipPlacement = BaseTooltipPlacement;
 
-export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
+export const Tooltip = ({
+  overlayStyle,
+  color,
+  ...props
+}: BaseTooltipProps) => {
   const theme = useTheme();
   const defaultColor = `${theme.colors.grayscale.dark2}e6`;
   return (
-    <>
-      {/* Safari hack to hide browser default tooltips */}
-      <Global
-        styles={css`
-          .ant-tooltip-open {
-            display: inline-block;
-            &::after {
-              content: '';
-              display: block;
-            }
-          }
-        `}
-      />
-      <BaseTooltip
-        overlayStyle={{
-          fontSize: theme.typography.sizes.s,
-          lineHeight: '1.6',
-          maxWidth: theme.gridUnit * 62,
-          minWidth: theme.gridUnit * 30,
-          ...overlayStyle,
-        }}
-        // make the tooltip display closer to the label
-        align={{ offset: [0, 1] }}
-        color={defaultColor || color}
-        trigger="hover"
-        placement="bottom"
-        // don't allow hovering over the tooltip
-        mouseLeaveDelay={0}
-        {...props}
-      />
-    </>
+    <BaseTooltip
+      overlayStyle={{
+        fontSize: theme.typography.sizes.s,
+        lineHeight: '1.6',
+        maxWidth: theme.gridUnit * 62,
+        minWidth: theme.gridUnit * 30,
+        ...overlayStyle,
+      }}
+      // make the tooltip display closer to the label
+      align={{ offset: [0, 1] }}
+      color={defaultColor || color}
+      trigger="hover"
+      placement="bottom"
+      // don't allow hovering over the tooltip
+      mouseLeaveDelay={0}
+      {...props}
+    />
   );
 };
 

diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx b/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx
@@ -53,7 +53,6 @@ describe('OptionDescription', () => {
     // Perform delayed mouse hovering so tooltip could pop out
     fireEvent.mouseOver(tooltipTrigger);
     act(() => jest.runAllTimers());
-    fireEvent.mouseOut(tooltipTrigger);
 
     const tooltip = screen.getByRole('tooltip');
     expect(tooltip).toBeInTheDocument();

diff --git a/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx b/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
@@ -28,7 +28,7 @@ const StyledTooltip = (props: any) => {
       {({ css }) => (
         <Tooltip
           overlayClassName={css`
-            .ant-tooltip-inner {
+            .antd5-tooltip-inner {
               max-width: ${theme.gridUnit * 125}px;
               word-wrap: break-word;
               text-align: center;

diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
@@ -42,6 +42,7 @@ import { IconTooltip } from 'src/components/IconTooltip';
 import ModalTrigger from 'src/components/ModalTrigger';
 import Loading from 'src/components/Loading';
 import useEffectEvent from 'src/hooks/useEffectEvent';
+import { ActionType } from 'src/types/Action';
 import ColumnElement, { ColumnKeyTypeType } from '../ColumnElement';
 import ShowSQL from '../ShowSQL';
 
@@ -326,7 +327,7 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
 
   const renderHeader = () => {
     const element: HTMLInputElement | null = tableNameRef.current;
-    let trigger: string[] = [];
+    let trigger = [] as ActionType[];
     if (element && element.offsetWidth < element.scrollWidth) {
       trigger = ['hover'];
     }

diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx
@@ -28,9 +28,8 @@ import { mix } from 'polished';
 import cx from 'classnames';
 import { Button as AntdButton } from 'antd';
 import { useTheme } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipProps } from 'src/components/Tooltip';
 import { ButtonProps as AntdButtonProps } from 'antd/lib/button';
-import { TooltipProps } from 'antd/lib/tooltip';
 
 export type OnClickHandler = MouseEventHandler<HTMLElement>;
 

diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -20,6 +20,7 @@
 import { styled, useTheme } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
+import { ActionType } from 'src/types/Action';
 
 export interface InfoTooltipProps {
   iconStyle?: React.CSSProperties;
@@ -38,7 +39,7 @@ export interface InfoTooltipProps {
     | 'rightTop'
     | 'rightBottom'
     | undefined;
-  trigger?: string | Array<string>;
+  trigger?: ActionType | ActionType[];
   overlayStyle?: any;
   bgColor?: string;
   viewBox?: string;

diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -18,9 +18,8 @@
  */
 import { ReactElement } from 'react';
 import { styled } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipPlacement } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
-import { TooltipPlacement } from 'antd/lib/tooltip';
 
 export type ActionProps = {
   label: string;

diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx b/superset-frontend/src/components/ListView/CrossLinks.tsx
@@ -38,7 +38,7 @@ const StyledCrossLinks = styled.div`
       width: 100%;
       display: flex;
 
-      .ant-tooltip-open {
+      .antd5-tooltip-open {
         display: inline;
       }
 

diff --git a/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx b/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
@@ -17,8 +17,7 @@
  * under the License.
  */
 import Button from 'src/components/Button';
-import { TooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
-import { Tooltip } from './index';
+import { Tooltip, TooltipPlacement, TooltipProps } from './index';
 
 export default {
   title: 'Tooltip',

diff --git a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
@@ -44,17 +44,13 @@ test('renders on hover', async () => {
 
 test('renders with theme', () => {
   render(
-    <Tooltip title="Simple tooltip" defaultVisible>
+    <Tooltip title="Simple tooltip" defaultOpen>
       <Button>Hover me</Button>
     </Tooltip>,
   );
   const tooltip = screen.getByRole('tooltip');
   expect(tooltip).toHaveStyle({
-    background: `${supersetTheme.colors.grayscale.dark2}e6`,
-  });
-  expect(tooltip.parentNode?.parentNode).toHaveStyle({
-    lineHeight: 1.6,
-    fontSize: 12,
+    'background-color': `${supersetTheme.colors.grayscale.dark2}e6`,
   });
 });
 

diff --git a/superset-frontend/src/components/Tooltip/index.tsx b/superset-frontend/src/components/Tooltip/index.tsx
@@ -16,31 +16,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useTheme } from '@superset-ui/core';
-import { Tooltip as AntdTooltip } from 'antd';
+import { supersetTheme } from '@superset-ui/core';
+import { Tooltip as AntdTooltip } from 'antd-v5';
 import {
-  TooltipProps,
+  TooltipProps as AntdTooltipProps,
   TooltipPlacement as AntdTooltipPlacement,
-} from 'antd/lib/tooltip';
+} from 'antd-v5/lib/tooltip';
 
 export type TooltipPlacement = AntdTooltipPlacement;
+export type TooltipProps = AntdTooltipProps;
 
-export const Tooltip = (props: TooltipProps) => {
-  const theme = useTheme();
-  return (
-    <>
-      <AntdTooltip
-        overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6' }}
-        overlayInnerStyle={{
-          display: '-webkit-box',
-          overflow: 'hidden',
-          WebkitLineClamp: 40,
-          WebkitBoxOrient: 'vertical',
-          textOverflow: 'ellipsis',
-        }}
-        color={`${theme.colors.grayscale.dark2}e6`}
-        {...props}
-      />
-    </>
-  );
-};
+export const Tooltip = (props: TooltipProps) => (
+  <>
+    <AntdTooltip
+      overlayInnerStyle={{
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}
+      color={`${supersetTheme.colors.grayscale.dark2}e6`}
+      {...props}
+    />
+  </>
+);
diff --git a/superset-frontend/src/components/TooltipParagraph/index.tsx b/superset-frontend/src/components/TooltipParagraph/index.tsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import { useState, FC } from 'react';
-
-import { Tooltip, Typography } from 'antd';
+import { Typography } from 'antd';
 import { ParagraphProps } from 'antd/es/typography/Paragraph';
+import { Tooltip } from '../Tooltip';
 
 const TooltipParagraph: FC<ParagraphProps> = ({
   children,

diff --git a/superset-frontend/src/components/TruncatedList/index.tsx b/superset-frontend/src/components/TruncatedList/index.tsx
@@ -56,7 +56,7 @@ const StyledTruncatedList = styled.div`
     width: 100%;
     display: flex;
 
-    .ant-tooltip-open {
+    .antd5-tooltip-open {
       display: inline;
     }
   }

diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -76,7 +76,7 @@ const ChartHeaderStyles = styled.div`
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
 
-      & > span.ant-tooltip-open {
+      & > span.antd5-tooltip-open {
         display: inline;
       }
     }

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
@@ -33,7 +33,7 @@ export const Row = styled.div`
       margin-bottom: 0;
     }
 
-    & .ant-tooltip-open {
+    & .antd5-tooltip-open {
       display: inline-flex;
     }
   `};

diff --git a/...rset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx b/...rset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TooltipProps } from 'antd/lib/tooltip';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipProps } from 'src/components/Tooltip';
 import { TooltipTrigger } from './Styles';
 
 export const TooltipWithTruncation = ({

diff --git a/superset-frontend/src/dashboard/styles.ts b/superset-frontend/src/dashboard/styles.ts
@@ -93,9 +93,9 @@ export const filterCardPopoverStyle = (theme: SupersetTheme) => css`
   }
 
   .filter-card-tooltip {
-    &.ant-tooltip-placement-bottom {
+    &.antd5-tooltip-placement-bottom {
       padding-top: 0;
-      & .ant-tooltip-arrow {
+      & .antd5-tooltip-arrow {
         top: -13px;
       }
     }

diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
@@ -82,7 +82,7 @@ export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
       overlayClassName="color-scheme-tooltip"
       title={tooltipContent}
       key={id}
-      visible={showTooltip}
+      open={showTooltip}
     >
       <span
         className="color-scheme-option"

diff --git a/...tend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx b/...tend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
@@ -110,12 +110,12 @@ const StyledTooltip = (props: any) => {
       {({ css }) => (
         <Tooltip
           overlayClassName={css`
-            .ant-tooltip-content {
+            .antd5-tooltip-content {
               min-width: ${theme.gridUnit * 125}px;
               max-height: 410px;
               overflow-y: scroll;
 
-              .ant-tooltip-inner {
+              .antd5-tooltip-inner {
                 max-width: ${theme.gridUnit * 125}px;
                 h3 {
                   font-size: ${theme.typography.sizes.m}px;

diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
@@ -80,8 +80,8 @@ export const VizTile = ({
   return (
     <Tooltip
       title={tooltipTitle}
-      onVisibleChange={visible => setTooltipVisible(visible)}
-      visible={tooltipVisible && !isTransitioning}
+      onOpenChange={visible => setTooltipVisible(visible)}
+      open={tooltipVisible && !isTransitioning}
       placement="top"
       mouseEnterDelay={0.4}
     >

diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -149,7 +149,7 @@ const StyledContainer = styled.div`
       }
     }
 
-    &&&& .ant-tooltip-open {
+    &&&& .antd5-tooltip-open {
       display: inline;
     }