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>
apache · Nov 26, 2021 · 83c0efe · 83c0efe
1 parent 0c06163
commit 83c0efe
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 18 deletions.
diff --git a/...ontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/package.json b/...ontend/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/...perset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/...perset_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-ui/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx b/...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/...ry_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/components/Tooltip.tsx b/...ry_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/...et-ui/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx b/...et-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', () => {