fix(explore): display actual data type instead of "column" in column tooltip (#38554)

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx

@@ -59,7 +59,7 @@ export function ColumnOption({
   const type = hasExpression ? 'expression' : type_generic;
   const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
   const [columnTypeTooltipText, setcolumnTypeTooltipText] = useState<ReactNode>(
-    column.type,
+    getColumnTypeTooltipNode(column),
   );
 
   useLayoutEffect(() => {

superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx

@@ -20,6 +20,7 @@ import { ReactNode, RefObject } from 'react';
 
 import { t } from '@apache-superset/core/translation';
 import { css, styled } from '@apache-superset/core/theme';
+import { GenericDataType } from '@apache-superset/core/common';
 import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
 
 const TooltipSectionWrapper = styled.div`
@@ -64,11 +65,29 @@ export const getColumnLabelText = (column: ColumnMeta): string =>
   column.verbose_name || column.column_name;
 
 export const getColumnTypeTooltipNode = (column: ColumnMeta): ReactNode => {
-  if (!column.type) {
+  const rawType = typeof column.type === 'string' ? column.type.trim() : '';
+
+  let typeLabel: ReactNode | null = null;
+
+  if (rawType && rawType.toLowerCase() !== 'column') {
+    typeLabel = rawType;
+  } else if (typeof column.type_generic === 'number') {
+    if (column.type_generic === GenericDataType.String) {
+      typeLabel = t('string');
+    } else if (column.type_generic === GenericDataType.Numeric) {
+      typeLabel = t('numeric');
+    } else if (column.type_generic === GenericDataType.Temporal) {
+      typeLabel = t('timestamp');
+    } else if (column.type_generic === GenericDataType.Boolean) {
+      typeLabel = t('boolean');
+    }
+  }
+
+  if (!typeLabel) {
     return null;
   }
 
-  return <TooltipSection label={t('Column type')} text={column.type} />;
+  return <TooltipSection label={t('Column type')} text={typeLabel} />;
 };
 
 export const getColumnTooltipNode = (

superset-frontend/packages/superset-ui-chart-controls/test/components/labelUtils.test.tsx

@@ -24,6 +24,7 @@ import {
   getMetricTooltipNode,
   getColumnTypeTooltipNode,
 } from '../../src/components/labelUtils';
+import { GenericDataType } from '@apache-superset/core/common';
 
 test("should get column name when column doesn't have verbose_name", () => {
   expect(
@@ -89,6 +90,24 @@ test('should get column datatype rendered as tooltip when column has a type', ()
   expect(screen.getByText('text')).toBeVisible();
 });
 
+test('should fall back to generic data type label when type is "column"', () => {
+  render(
+    <>
+      {getColumnTypeTooltipNode({
+        id: 123,
+        column_name: 'column name',
+        verbose_name: '',
+        description: '',
+        type: 'column',
+        type_generic: GenericDataType.String,
+      })}
+    </>,
+  );
+
+  expect(screen.getByText('Column type')).toBeVisible();
+  expect(screen.getByText('string')).toBeVisible();
+});
+
 test('should get column name, verbose name and description when it has a verbose name', () => {
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   render(