diff --git a/superset-frontend/spec/javascripts/components/FilterableTable/FilterableTable_spec.tsx b/superset-frontend/spec/javascripts/components/FilterableTable/FilterableTable_spec.tsx index 787fb723377..5690f5f9e1a 100644 --- a/superset-frontend/spec/javascripts/components/FilterableTable/FilterableTable_spec.tsx +++ b/superset-frontend/spec/javascripts/components/FilterableTable/FilterableTable_spec.tsx @@ -17,7 +17,8 @@ * under the License. */ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import { ReactWrapper } from 'enzyme'; +import { styledMount as mount } from 'spec/helpers/theming'; import FilterableTable, { MAX_COLUMNS_FOR_TABLE, } from 'src/components/FilterableTable/FilterableTable'; diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopoverTitle_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopoverTitle_spec.jsx index 78c94e458e3..9d9bbe229ad 100644 --- a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopoverTitle_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopoverTitle_spec.jsx @@ -20,7 +20,7 @@ import React from 'react'; import sinon from 'sinon'; import { shallow } from 'enzyme'; -import { OverlayTrigger } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; import AdhocMetricEditPopoverTitle from 'src/explore/components/AdhocMetricEditPopoverTitle'; @@ -43,16 +43,18 @@ function setup(overrides) { describe('AdhocMetricEditPopoverTitle', () => { it('renders an OverlayTrigger wrapper with the title', () => { const { wrapper } = setup(); - expect(wrapper.find(OverlayTrigger)).toExist(); - expect(wrapper.find(OverlayTrigger).find('span').text()).toBe( - 'My Metric\xa0', - ); + expect(wrapper.find(Tooltip)).toExist(); + expect( + wrapper.find('[data-test="AdhocMetricEditTitle#trigger"]').text(), + ).toBe('My Metric\xa0'); }); it('transfers to edit mode when clicked', () => { const { wrapper } = setup(); expect(wrapper.state('isEditable')).toBe(false); - wrapper.simulate('click'); + wrapper + .find('[data-test="AdhocMetricEditTitle#trigger"]') + .simulate('click'); expect(wrapper.state('isEditable')).toBe(true); }); }); diff --git a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx index 1a56b50fb05..aaa308fcb12 100644 --- a/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx @@ -18,10 +18,11 @@ */ /* eslint-disable no-unused-expressions */ import React from 'react'; -import { OverlayTrigger, Radio } from 'react-bootstrap'; +import { Radio } from 'react-bootstrap'; import sinon from 'sinon'; import { styledMount as mount } from 'spec/helpers/theming'; +import { Tooltip } from 'src/common/components/Tooltip'; import Popover from 'src/common/components/Popover'; import Tabs from 'src/common/components/Tabs'; import Label from 'src/components/Label'; @@ -115,17 +116,19 @@ describe('DateFilterControl', () => { const popoverContent = wrapper.find(Popover).first().props().content; const popoverContentWrapper = mount(popoverContent); const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first(); - const radioTrigger = defaultTab.find(OverlayTrigger); + const radioTooltip = defaultTab.find(Tooltip); - expect(radioTrigger).toExist(); - expect(radioTrigger).toHaveLength(6); + expect(radioTooltip).toExist(); + expect(radioTooltip).toHaveLength(6); }); it('renders the correct time range in tooltip', () => { const popoverContent = wrapper.find(Popover).first().props().content; const popoverContentWrapper = mount(popoverContent); const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first(); - const triggers = defaultTab.find(OverlayTrigger); + const tooltips = defaultTab.find(Tooltip); + + expect(tooltips).toHaveLength(6); const expectedLabels = { 'Last day': '2020-09-06 < col < 2020-09-07', @@ -136,13 +139,10 @@ describe('DateFilterControl', () => { 'No filter': '-∞ < col < ∞', }; - triggers.forEach(trigger => { - const { props } = trigger.props().overlay; - const label = props.id.split('tooltip-')[1]; + tooltips.forEach(tooltip => { + const label = tooltip.props().id.split('tooltip-')[1]; - expect(trigger.props().overlay.props.children).toEqual( - expectedLabels[label], - ); + expect(tooltip.props().title).toEqual(expectedLabels[label]); }); }); }); diff --git a/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx b/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx index e0c51beecd3..80201a5dba1 100644 --- a/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx @@ -18,6 +18,7 @@ */ import React from 'react'; import { shallow, mount } from 'enzyme'; +import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import Popover from 'src/common/components/Popover'; import sinon from 'sinon'; import { Provider } from 'react-redux'; @@ -50,12 +51,17 @@ describe('EmbedCodeButton', () => { const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl'); const spy2 = sinon.spy(common, 'getShortUrl'); - const wrapper = mount(, { - wrappingComponent: Provider, - wrappingComponentProps: { - store, + const wrapper = mount( + + + , + { + wrappingComponent: Provider, + wrappingComponentProps: { + store, + }, }, - }); + ).find(EmbedCodeButton); wrapper.setState({ height: '1000', width: '2000', diff --git a/superset-frontend/spec/javascripts/sqllab/ColumnElement_spec.tsx b/superset-frontend/spec/javascripts/sqllab/ColumnElement_spec.tsx index 8e35ed11ddc..0462301f8c4 100644 --- a/superset-frontend/spec/javascripts/sqllab/ColumnElement_spec.tsx +++ b/superset-frontend/spec/javascripts/sqllab/ColumnElement_spec.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { mount } from 'enzyme'; +import { styledMount as mount } from 'spec/helpers/theming'; import ColumnElement from 'src/SqlLab/components/ColumnElement'; import { mockedActions, table } from './fixtures'; diff --git a/superset-frontend/src/CRUD/Field.jsx b/superset-frontend/src/CRUD/Field.jsx index c901a9d82b2..006f253e3f3 100644 --- a/superset-frontend/src/CRUD/Field.jsx +++ b/superset-frontend/src/CRUD/Field.jsx @@ -18,14 +18,9 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { - FormGroup, - HelpBlock, - FormControl, - OverlayTrigger, - Tooltip, -} from 'react-bootstrap'; +import { FormGroup, HelpBlock, FormControl } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; import FormLabel from 'src/components/FormLabel'; import './crud.less'; @@ -72,16 +67,9 @@ export default class Field extends React.PureComponent { {label || fieldKey} {compact && description && ( - - {description} - - } - > + - + )} {' '} {hookedControl} diff --git a/superset-frontend/src/SqlLab/components/ColumnElement.tsx b/superset-frontend/src/SqlLab/components/ColumnElement.tsx index 6a01a1383b4..b9ead1e8bd4 100644 --- a/superset-frontend/src/SqlLab/components/ColumnElement.tsx +++ b/superset-frontend/src/SqlLab/components/ColumnElement.tsx @@ -18,13 +18,47 @@ */ import React from 'react'; import PropTypes from 'prop-types'; +import { ClassNames } from '@emotion/core'; +import { styled, useTheme } from '@superset-ui/core'; -import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; const propTypes = { column: PropTypes.object.isRequired, }; +const StyledTooltip = (props: any) => { + const theme = useTheme(); + return ( + + {({ css }) => ( + + )} + + ); +}; + +const Hr = styled.hr` + margin-top: ${({ theme }) => theme.gridUnit * 1.5}px; +`; + const iconMap = { pk: 'fa-key', fk: 'fa-link', @@ -53,20 +87,20 @@ export default function ColumnElement({ column }: ColumnElementProps) { columnName = {column.name}; icons = column.keys.map((key, i) => ( - + title={ + <> {tooltipTitleMap[key.type]} -
+ 
                 {JSON.stringify(key, null, '  ')}
- + } > - + )); } diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx index 14924b89478..689c4c46f34 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor.jsx @@ -19,19 +19,13 @@ import React from 'react'; import { CSSTransition } from 'react-transition-group'; import PropTypes from 'prop-types'; -import { - FormGroup, - InputGroup, - Form, - FormControl, - OverlayTrigger, - Tooltip, -} from 'react-bootstrap'; +import { FormGroup, InputGroup, Form, FormControl } from 'react-bootstrap'; import Split from 'react-split'; import { t } from '@superset-ui/core'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; +import { Tooltip } from 'src/common/components/Tooltip'; import Label from 'src/components/Label'; import Button from 'src/components/Button'; import Checkbox from 'src/components/Checkbox'; @@ -455,20 +449,19 @@ class SqlEditor extends React.PureComponent { this.props.latestQuery.results && this.props.latestQuery.results.displayLimitReached ) { - const tooltip = ( - - {t( + limitWarning = ( + - ); - limitWarning = ( - + > - + ); } const successful = diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index 53a82e21239..12d31624c69 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -475,19 +475,6 @@ a.Link { margin: 3px 5px; } -.tooltip pre { - background: transparent; - border: none; - text-align: left; - color: @lightest; - font-size: @font-size-xs; -} - -.tooltip-inner { - max-width: 500px; - word-wrap: break-word; -} - .SouthPane { width: 100%; diff --git a/superset-frontend/src/common/components/InfoTooltip.tsx b/superset-frontend/src/common/components/InfoTooltip.tsx index 1bf4bd1d53a..1be68889596 100644 --- a/superset-frontend/src/common/components/InfoTooltip.tsx +++ b/superset-frontend/src/common/components/InfoTooltip.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { styled } from '@superset-ui/core'; -import Tooltip from 'src/common/components/Tooltip'; +import { Tooltip } from 'src/common/components/Tooltip'; import Icon from 'src/components/Icon'; interface InfoTooltipProps { diff --git a/superset-frontend/src/common/components/Tooltip.tsx b/superset-frontend/src/common/components/Tooltip.tsx index 7e3c2a2f4d6..aecf19f9453 100644 --- a/superset-frontend/src/common/components/Tooltip.tsx +++ b/superset-frontend/src/common/components/Tooltip.tsx @@ -17,11 +17,17 @@ * under the License. */ import React from 'react'; +import { useTheme } from '@superset-ui/core'; import { Tooltip as BaseTooltip } from 'src/common/components'; import { TooltipProps } from 'antd/lib/tooltip'; -const Tooltip = (props: TooltipProps) => ( - -); - -export default Tooltip; +export const Tooltip = (props: TooltipProps) => { + const theme = useTheme(); + return ( + + ); +}; diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx index 7bdae996495..ddcbd739116 100644 --- a/superset-frontend/src/common/components/common.stories.tsx +++ b/superset-frontend/src/common/components/common.stories.tsx @@ -23,7 +23,7 @@ import Button from 'src/components/Button'; import Modal from './Modal'; import Tabs, { EditableTabs } from './Tabs'; import AntdPopover from './Popover'; -import AntdTooltip from './Tooltip'; +import { Tooltip as AntdTooltip } from './Tooltip'; import { Menu } from '.'; import { Dropdown } from './Dropdown'; import InfoTooltip from './InfoTooltip'; diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx index f9fa66d1ad5..a7fc0ba7552 100644 --- a/superset-frontend/src/components/Button/index.tsx +++ b/superset-frontend/src/components/Button/index.tsx @@ -20,12 +20,9 @@ import React, { CSSProperties } from 'react'; import { kebabCase } from 'lodash'; import { mix } from 'polished'; import cx from 'classnames'; -import { - Button as BootstrapButton, - Tooltip, - OverlayTrigger, -} from 'react-bootstrap'; +import { Button as BootstrapButton } from 'react-bootstrap'; import { styled } from '@superset-ui/core'; +import { Tooltip } from 'src/common/components/Tooltip'; import { Menu } from 'src/common/components'; export type OnClickHandler = React.MouseEventHandler; @@ -39,7 +36,19 @@ export interface DropdownItemProps { export interface ButtonProps { className?: string; tooltip?: string; - placement?: string; + placement?: + | 'bottom' + | 'left' + | 'right' + | 'top' + | 'topLeft' + | 'topRight' + | 'bottomLeft' + | 'bottomRight' + | 'leftTop' + | 'leftBottom' + | 'rightTop' + | 'rightBottom'; onClick?: OnClickHandler; disabled?: boolean; buttonStyle?: string; @@ -302,14 +311,13 @@ export default function Button({ if (tooltip) { return ( - {tooltip} - } + id={`${kebabCase(tooltip)}-tooltip`} + title={tooltip} > {button} - + ); } diff --git a/superset-frontend/src/components/CopyToClipboard.jsx b/superset-frontend/src/components/CopyToClipboard.jsx index abc7df60c8f..d6be031e01a 100644 --- a/superset-frontend/src/components/CopyToClipboard.jsx +++ b/superset-frontend/src/components/CopyToClipboard.jsx @@ -18,8 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { Tooltip, OverlayTrigger } from 'react-bootstrap'; import { t } from '@superset-ui/core'; +import { Tooltip } from 'src/common/components/Tooltip'; import withToasts from 'src/messageToasts/enhancers/withToasts'; const propTypes = { @@ -70,6 +70,18 @@ class CopyToClipboard extends React.Component { } } + getDecoratedCopyNode() { + return React.cloneElement( + this.props.copyNode, + { + style: { cursor: 'pointer' }, + onClick: this.onClick, + onMouseOut: this.onMouseOut, + }, + null, + ); + } + resetTooltipText() { this.setState({ hasCopied: false }); } @@ -119,19 +131,18 @@ class CopyToClipboard extends React.Component { } renderNotWrapped() { - const { copyNode } = this.props; return ( - - {copyNode} - + {this.getDecoratedCopyNode()} + ); } @@ -143,27 +154,18 @@ class CopyToClipboard extends React.Component { {this.props.text} )} - - {this.props.copyNode} - + {this.getDecoratedCopyNode()} + ); } - renderTooltip() { - return ( - {this.tooltipText()} - ); - } - render() { const { wrapped } = this.props; if (!wrapped) { diff --git a/superset-frontend/src/components/FacePile/index.tsx b/superset-frontend/src/components/FacePile/index.tsx index 6b0137daa26..3b5d41966b3 100644 --- a/superset-frontend/src/components/FacePile/index.tsx +++ b/superset-frontend/src/components/FacePile/index.tsx @@ -18,7 +18,8 @@ */ import React from 'react'; import { getCategoricalSchemeRegistry, styled } from '@superset-ui/core'; -import { Avatar, Tooltip } from 'src/common/components'; +import { Tooltip } from 'src/common/components/Tooltip'; +import { Avatar } from 'src/common/components'; import { getRandomColor } from './utils'; interface FacePileProps { diff --git a/superset-frontend/src/components/Link.tsx b/superset-frontend/src/components/Link.tsx index 6b75ff96b7b..cfe9fa04cb7 100644 --- a/superset-frontend/src/components/Link.tsx +++ b/superset-frontend/src/components/Link.tsx @@ -17,14 +17,26 @@ * under the License. */ import React, { ReactNode } from 'react'; -import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; interface Props { children?: ReactNode; className?: string; href?: string; onClick?: () => void; - placement?: string; + placement?: + | 'bottom' + | 'left' + | 'right' + | 'top' + | 'topLeft' + | 'topRight' + | 'bottomLeft' + | 'bottomRight' + | 'leftTop' + | 'leftBottom' + | 'rightTop' + | 'rightBottom'; style?: object; tooltip?: string | null; } @@ -50,14 +62,15 @@ const Link = ({ ); if (tooltip) { return ( - {tooltip}} + {link} - + ); } return link; diff --git a/superset-frontend/src/components/TooltipWrapper.jsx b/superset-frontend/src/components/TooltipWrapper.jsx index 20f58ef1140..d21f87bcc3a 100644 --- a/superset-frontend/src/components/TooltipWrapper.jsx +++ b/superset-frontend/src/components/TooltipWrapper.jsx @@ -19,7 +19,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { kebabCase } from 'lodash'; -import { Tooltip, OverlayTrigger } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; const propTypes = { label: PropTypes.string.isRequired, @@ -44,13 +44,14 @@ export default function TooltipWrapper({ trigger, }) { return ( - {tooltip}} + title={tooltip} trigger={trigger} > {children} - + ); } diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx index 609a8351b55..6586f755af5 100644 --- a/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx +++ b/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx @@ -18,7 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { FormControl, OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { FormControl } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; const propTypes = { title: PropTypes.shape({ @@ -70,10 +71,6 @@ export default class AdhocMetricEditPopoverTitle extends React.Component { render() { const { title, onChange } = this.props; - const editPrompt = ( - Click to edit label - ); - return this.state.isEditable ? ( ) : ( - + {title.hasCustomLabel ? title.label : 'My Metric'}   @@ -106,7 +101,7 @@ export default class AdhocMetricEditPopoverTitle extends React.Component { style={{ color: this.state.isHovered ? 'black' : 'grey' }} /> - + ); } } diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx index 7bc6a3a2eca..bac0b880546 100644 --- a/superset-frontend/src/explore/components/ControlHeader.jsx +++ b/superset-frontend/src/explore/components/ControlHeader.jsx @@ -20,7 +20,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { t } from '@superset-ui/core'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; -import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; import FormLabel from 'src/components/FormLabel'; const propTypes = { @@ -98,40 +98,35 @@ export default class ControlHeader extends React.Component { {' '} {this.props.warning && ( - {this.props.warning} - } + title={this.props.warning} > - {' '} + {' '} )} {this.props.danger && ( - {this.props.danger} - } + title={this.props.danger} > - {' '} + {' '} )} {this.props.validationErrors.length > 0 && ( - - {this.props.validationErrors.join(' ')} - - } + title={this.props.validationErrors.join(' ')} > - {' '} + {' '} )} {this.renderOptionalIcons()} diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index 25a51a59d74..81db38b66c0 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -18,9 +18,10 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { ButtonGroup } from 'react-bootstrap'; import { t, styled } from '@superset-ui/core'; +import { Tooltip } from 'src/common/components/Tooltip'; import Button from 'src/components/Button'; import Hotkeys from '../../components/Hotkeys'; @@ -123,14 +124,13 @@ export default function QueryAndSaveBtns({ {errorMessage && ( {' '} - {errorMessage} - } + title={errorMessage} > - + )} diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx index 47ab0d5941c..d7c2a5546a5 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl.jsx @@ -23,7 +23,7 @@ import { t, styled } from '@superset-ui/core'; import { ColumnOption, MetricOption } from '@superset-ui/chart-controls'; import { Dropdown, Menu } from 'src/common/components'; -import Tooltip from 'src/common/components/Tooltip'; +import { Tooltip } from 'src/common/components/Tooltip'; import Icon from 'src/components/Icon'; import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal'; import DatasourceModal from 'src/datasource/DatasourceModal'; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx index c951bd1b9eb..5b0f15a5e7e 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl.jsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl.jsx @@ -18,14 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { - FormControl, - FormGroup, - InputGroup, - OverlayTrigger, - Radio, - Tooltip, -} from 'react-bootstrap'; +import { FormControl, FormGroup, InputGroup, Radio } from 'react-bootstrap'; +import { Tooltip } from 'src/common/components/Tooltip'; import Popover from 'src/common/components/Popover'; import { Select, Input } from 'src/common/components'; import Button from 'src/components/Button'; @@ -427,14 +421,11 @@ class DateFilterControl extends React.Component { return ( - - {formatTimeRange(timeRange, this.props.endpoints)} - - } + title={formatTimeRange(timeRange, this.props.endpoints)} >
- + ); }); diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx b/superset-frontend/src/explore/components/controls/VizTypeControl.jsx index d659b465787..e952cc6d694 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl.jsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl.jsx @@ -18,14 +18,9 @@ */ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { - Row, - Col, - FormControl, - OverlayTrigger, - Tooltip, -} from 'react-bootstrap'; +import { Row, Col, FormControl } from 'react-bootstrap'; import { t, getChartMetadataRegistry } from '@superset-ui/core'; +import { Tooltip } from 'src/common/components/Tooltip'; import Modal from 'src/common/components/Modal'; import Label from 'src/components/Label'; import ControlHeader from '../ControlHeader'; @@ -181,13 +176,10 @@ const VizTypeControl = props => { return (
- - {t('Click to change visualization type')} - - } + title={t('Click to change visualization type')} > <>
)} - +