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 index 0b05a53d3..4ea519acf 100644 --- 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 index 5fd49efa0..1db90b196 100644 --- 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 index d41d00727..52285b6dd 100644 --- 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/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx index 2f9e12761..5551e94a8 100644 --- 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; 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 index 042434d16..e89944121 100644 --- 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 */} - - - + ); }; 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 index 54aece391..84c5d39f0 100644 --- 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 index e5f307753..613fa5dbe 100644 --- 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 }) => ( { 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 index d8e24420f..8944ef7b8 100644 --- 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; diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx index 1f160e47a..8437251de 100644 --- 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; + 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 index 76f7e02e5..2fd04d5cb 100644 --- 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 index f7729aa21..25f2ba827 100644 --- 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 index 72d586bb1..b195a3544 100644 --- 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 index ec56561cd..f38d94524 100644 --- 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( - + , ); 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 index 86c616bf9..66f0d8cc4 100644 --- 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 ( - <> - - - ); -}; +export const Tooltip = (props: TooltipProps) => ( + <> + + +); diff --git a/superset-frontend/src/components/TooltipParagraph/index.tsx b/superset-frontend/src/components/TooltipParagraph/index.tsx index 837c89582..f891c2282 100644 --- 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 = ({ children, diff --git a/superset-frontend/src/components/TruncatedList/index.tsx b/superset-frontend/src/components/TruncatedList/index.tsx index ccfea582c..ec764bfb2 100644 --- 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 index b02c6eee3..b281ff320 100644 --- 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 index 50f4135ca..695b48d4f 100644 --- 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/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx index 51ebd3899..4e3d887cd 100644 --- 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 = ({ diff --git a/superset-frontend/src/dashboard/styles.ts b/superset-frontend/src/dashboard/styles.ts index bbe7b9d14..7881dbda1 100644 --- 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 index a14df21a2..73d61143e 100644 --- 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} > { {({ css }) => ( 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 index 052983484..4b84351da 100644 --- 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; } diff --git a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx index 714528994..5d42862a2 100644 --- 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(); }); }); diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts index 0716749b9..858f92fe7 100644 --- 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, + }, }, }; diff --git a/superset-frontend/src/types/Action.ts b/superset-frontend/src/types/Action.ts new file mode 100644 index 000000000..7efe166e5 --- /dev/null +++ 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';