feat(chart-controls): Show detailed data type tooltip when hovering t…

…ype icon (#23970)
apache · May 11, 2023 · 4497601 · 4497601
1 parent c8beaab
commit 4497601
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx
@@ -22,7 +22,11 @@ import { Tooltip } from './Tooltip';
 import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
 import { ColumnMeta } from '../types';
-import { getColumnLabelText, getColumnTooltipNode } from './labelUtils';
+import {
+  getColumnLabelText,
+  getColumnTooltipNode,
+  getColumnTypeTooltipNode,
+} from './labelUtils';
 import { SQLPopover } from './SQLPopover';
 
 export type ColumnOptionProps = {
@@ -48,14 +52,29 @@ export function ColumnOption({
   const hasExpression = expression && expression !== column_name;
   const type = hasExpression ? 'expression' : type_generic;
   const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
+  const [columnTypeTooltipText, setcolumnTypeTooltipText] = useState<ReactNode>(
+    column.type,
+  );
 
   useLayoutEffect(() => {
     setTooltipText(getColumnTooltipNode(column, labelRef));
+    setcolumnTypeTooltipText(getColumnTypeTooltipNode(column));
   }, [labelRef, column]);
 
   return (
     <StyleOverrides>
-      {showType && type !== undefined && <ColumnTypeLabel type={type} />}
+      {showType && type !== undefined && (
+        <Tooltip
+          id="metric-type-tooltip"
+          title={columnTypeTooltipText}
+          placement="bottomRight"
+          align={{ offset: [8, -2] }}
+        >
+          <span>
+            <ColumnTypeLabel type={type} />
+          </span>
+        </Tooltip>
+      )}
       <Tooltip id="metric-name-tooltip" title={tooltipText}>
         <span
           className="option-label column-option-label"

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
@@ -59,6 +59,19 @@ export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
 export const getColumnLabelText = (column: ColumnMeta): string =>
   column.verbose_name || column.column_name;
 
+export const getColumnTypeTooltipNode = (column: ColumnMeta): ReactNode => {
+  if (!column.type) {
+    return null;
+  }
+
+  return (
+    <TooltipSection
+      label={t('Column datatype')}
+      text={column.type.toLowerCase()}
+    />
+  );
+};
+
 export const getColumnTooltipNode = (
   column: ColumnMeta,
   labelRef?: React.RefObject<any>,

diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx
@@ -24,6 +24,7 @@ import {
   getColumnLabelText,
   getColumnTooltipNode,
   getMetricTooltipNode,
+  getColumnTypeTooltipNode,
 } from '../../src/components/labelUtils';
 
 const renderWithTheme = (ui: ReactElement) =>
@@ -64,6 +65,35 @@ test('should get null as tooltip', () => {
   ).toBe(null);
 });
 
+test('should get null for column datatype tooltip when type is blank', () => {
+  expect(
+    getColumnTypeTooltipNode({
+      id: 123,
+      column_name: 'column name',
+      verbose_name: '',
+      description: '',
+      type: '',
+    }),
+  ).toBe(null);
+});
+
+test('should get column datatype rendered as tooltip when column has a type', () => {
+  renderWithTheme(
+    <>
+      {getColumnTypeTooltipNode({
+        id: 123,
+        column_name: 'column name',
+        verbose_name: 'verbose name',
+        description: 'A very important column',
+        type: 'text',
+      })}
+    </>,
+  );
+
+  expect(screen.getByText('Column datatype')).toBeVisible();
+  expect(screen.getByText('text')).toBeVisible();
+});
+
 test('should get column name, verbose name and description when it has a verbose name', () => {
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   renderWithTheme(