From 83c0efe0bc56eaeea7606afdb2500cf052c6b889 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 29 Jan 2021 14:28:03 +0100
Subject: [PATCH] fix(chart-controls): add a tooltip to span in ColumnOption,
 refactor RB Tooltips to Antd (#914)

* fix(chart-controls): add a tooltip to span in ColumnOption

* Fix unit test

* Change placement of tooltip to top

* Change Tooltip placement type

* Allow to override tooltip color and style

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@polidea.com>
---
 .../superset-ui-chart-controls/package.json   |  1 +
 .../src/components/ColumnOption.tsx           | 13 ++++++++++--
 .../src/components/InfoTooltipWithTrigger.tsx | 20 ++++++-------------
 .../src/components/Tooltip.tsx                | 16 +++++++++++++++
 .../InfoTooltipWithTrigger.test.tsx           |  4 ++--
 5 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
index d9c55b2ec0de..09a3889f334f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json
@@ -33,6 +33,7 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-bootstrap": "*",
+    "antd": "^4.9.1",
     "react": "^16.13.1",
     "react-bootstrap": "^0.33.1"
   }
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
index f5c6ca4186ce..8403ba38d61d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-
+import { Tooltip } from './Tooltip';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import { ColumnMeta } from '../types';
@@ -40,13 +40,21 @@ export function ColumnOption({ column, showType = false }: ColumnOptionProps) {
   return (
     <span>
       {showType && columnType && <ColumnTypeLabel type={columnType} />}
-      <span className="m-r-5 option-label">{column.verbose_name || column.column_name}</span>
+      <Tooltip
+        id="metric-name-tooltip"
+        title={column.verbose_name || column.column_name}
+        trigger={['hover']}
+        placement="top"
+      >
+        <span className="m-r-5 option-label">{column.verbose_name || column.column_name}</span>
+      </Tooltip>
       {column.description && (
         <InfoTooltipWithTrigger
           className="m-r-5 text-muted"
           icon="info"
           tooltip={column.description}
           label={`descr-${column.column_name}`}
+          placement="top"
         />
       )}
       {hasExpression && (
@@ -55,6 +63,7 @@ export function ColumnOption({ column, showType = false }: ColumnOptionProps) {
           icon="question-circle-o"
           tooltip={column.expression}
           label={`expr-${column.column_name}`}
+          placement="top"
         />
       )}
     </span>
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 8b89270a6ea4..ec78e1c9afad 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -16,19 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { kebabCase } from 'lodash';
-import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import { TooltipPlacement } from 'antd/lib/tooltip';
 import { t } from '@superset-ui/core';
-
-const tooltipStyle: CSSProperties = { wordWrap: 'break-word' };
+import { Tooltip } from './Tooltip';
 
 export interface InfoTooltipWithTriggerProps {
   label?: string;
   tooltip?: string;
   icon?: string;
   onClick?: () => void;
-  placement?: string;
+  placement?: TooltipPlacement;
   bsStyle?: string;
   className?: string;
 }
@@ -65,16 +64,9 @@ export function InfoTooltipWithTrigger({
     return iconEl;
   }
   return (
-    <OverlayTrigger
-      placement={placement}
-      overlay={
-        <Tooltip id={`${kebabCase(label)}-tooltip`} style={tooltipStyle}>
-          {tooltip}
-        </Tooltip>
-      }
-    >
+    <Tooltip id={`${kebabCase(label)}-tooltip`} title={tooltip} placement={placement}>
       {iconEl}
-    </OverlayTrigger>
+    </Tooltip>
   );
 }
 
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
new file mode 100644
index 000000000000..71b73a683423
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTheme } from '@superset-ui/core';
+import { Tooltip as BaseTooltip } from 'antd';
+import { TooltipProps } from 'antd/lib/tooltip';
+
+export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
+  const theme = useTheme();
+  const defaultColor = `${theme.colors.grayscale.dark2}e6`;
+  return (
+    <BaseTooltip
+      overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6', ...overlayStyle }}
+      color={defaultColor || color}
+      {...props}
+    />
+  );
+};
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
index 3c5a406c832b..9e0dacc1c77d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
@@ -18,13 +18,13 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { OverlayTrigger } from 'react-bootstrap';
+import { Tooltip } from '../../src/components/Tooltip';
 import { InfoTooltipWithTrigger } from '../../src';
 
 describe('InfoTooltipWithTrigger', () => {
   it('renders a tooltip', () => {
     const wrapper = shallow(<InfoTooltipWithTrigger label="test" tooltip="this is a test" />);
-    expect(wrapper.find(OverlayTrigger)).toHaveLength(1);
+    expect(wrapper.find(Tooltip)).toHaveLength(1);
   });
 
   it('renders an info icon', () => {