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

Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
2024-11-30 12:37:40 +02:00 · 2024-11-30 12:37:40 +02:00 · 3d3c09d299
parent 97dde8c485
commit 3d3c09d299
28 changed files with 105 additions and 105 deletions
--- 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();
--- 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');
  });
 });
--- 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',
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++ b/superset-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;
--- 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}
+    />
  );
 };

--- 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();
--- 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;
--- 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'];
    }
--- 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>;

--- 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;
--- 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;
--- 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;
      }

--- 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',
--- 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`,
  });
 });

--- 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}
+    />
+  </>
+);
--- 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,
--- 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;
    }
  }
--- 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;
      }
    }
--- 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;
    }
  `};
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
+++ b/superset-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 = ({
--- 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;
      }
    }
--- 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"
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
+++ b/superset-frontend/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;
--- 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}
    >
--- 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;
    }

--- a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
+++ b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
@ -340,13 +340,13 @@ describe('RTL', () => {
  it('renders an "Import Saved Query" tooltip under import button', async () => {
    const importButton = await screen.findByTestId('import-button');
    userEvent.hover(importButton);
+
    waitFor(() => {
-      expect(importButton).toHaveClass('ant-tooltip-open');
      screen.findByTestId('import-tooltip-test');
      const importTooltip = screen.getByRole('tooltip', {
        name: 'Import queries',
      });
-      expect(importTooltip).toBeInTheDocument();
+      expect(importTooltip).toBeVisible();
    });
  });

--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@ -109,6 +109,10 @@ const baseConfig: ThemeConfig = {
      colorPrimaryHover: supersetTheme.colors.primary.base,
      colorTextTertiary: supersetTheme.colors.grayscale.light1,
    },
+    Tooltip: {
+      fontSize: supersetTheme.typography.sizes.s,
+      lineHeight: 1.6,
+    },
  },
 };

--- a/superset-frontend/src/types/Action.ts
+++ b/superset-frontend/src/types/Action.ts
@ -0,0 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';