show verbose name and ds name

apache · Feb 7, 2022 · c6dc69c · c6dc69c
1 parent cc2b81c
commit c6dc69c
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 36 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
@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, ReactNode } from 'react';
 import { styled } from '@superset-ui/core';
 import { Tooltip } from './Tooltip';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
 import { ColumnMeta } from '../types';
-import { getColumnLabelText, getColumnTooltipText } from './labelUtils';
+import { getColumnLabelText, getColumnTooltipNode } from './labelUtils';
 
 export type ColumnOptionProps = {
   column: ColumnMeta;
@@ -45,10 +45,10 @@ export function ColumnOption({
   const { expression, column_name, type_generic } = column;
   const hasExpression = expression && expression !== column_name;
   const type = hasExpression ? 'expression' : type_generic;
-  const [tooltipText, setTooltipText] = useState(column.column_name);
+  const [tooltipText, setTooltipText] = useState<ReactNode>(column.column_name);
 
   useEffect(() => {
-    setTooltipText(getColumnTooltipText(column, labelRef));
+    setTooltipText(getColumnTooltipNode(column, labelRef));
   }, [labelRef, column]);
 
   return (

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, ReactNode } from 'react';
 import { styled, Metric, SafeMarkdown } from '@superset-ui/core';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import { ColumnTypeLabel } from './ColumnTypeLabel';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
 import Tooltip from './Tooltip';
-import { getMeticTooltipText } from './labelUtils';
+import { getMeticTooltipNode } from './labelUtils';
 
 const FlexRowContainer = styled.div`
   align-items: center;
@@ -61,10 +61,10 @@ export function MetricOption({
 
   const warningMarkdown = metric.warning_markdown || metric.warning_text;
 
-  const [tooltipText, setTooltipText] = useState(metric.metric_name);
+  const [tooltipText, setTooltipText] = useState<ReactNode>(metric.metric_name);
 
   useEffect(() => {
-    setTooltipText(getMeticTooltipText(metric, labelRef));
+    setTooltipText(getMeticTooltipNode(metric, labelRef));
   }, [labelRef, metric]);
 
   return (

diff --git a/...art-controls/src/components/labelUtils.ts → ...rt-controls/src/components/labelUtils.tsx b/...art-controls/src/components/labelUtils.ts → ...rt-controls/src/components/labelUtils.tsx
@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, { ReactNode } from 'react';
+
 import { t } from '@superset-ui/core';
 import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
 
@@ -29,35 +31,46 @@ export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
 export const getColumnLabelText = (column: ColumnMeta): string =>
   column.verbose_name || column.column_name;
 
-export const getColumnTooltipText = (
+export const getColumnTooltipNode = (
   column: ColumnMeta,
   labelRef?: React.RefObject<any>,
-): string => {
+): ReactNode => {
   // don't show tooltip if it hasn't verbose_name and hasn't truncated
   if (!column.verbose_name && !isLabelTruncated(labelRef)) {
-    return '';
+    return null;
   }
 
-  if (isLabelTruncated(labelRef) && column.verbose_name) {
-    return t('verbose name: %s', column.verbose_name);
+  if (column.verbose_name) {
+    return (
+      <>
+        <div>{t('column name: %s', column.column_name)}</div>
+        <div>{t('verbose name: %s', column.verbose_name)}</div>
+      </>
+    );
   }
 
+  // show column name in tooltip when column truncated
   return t('column name: %s', column.column_name);
 };
 
 type MetricType = Omit<Metric, 'id'> & { label?: string };
 
-export const getMeticTooltipText = (
+export const getMeticTooltipNode = (
   metric: MetricType,
   labelRef?: React.RefObject<any>,
-): string => {
+): ReactNode => {
   // don't show tooltip if it hasn't verbose_name, label and hasn't truncated
   if (!metric.verbose_name && !metric.label && !isLabelTruncated(labelRef)) {
-    return '';
+    return null;
   }
 
-  if (isLabelTruncated(labelRef) && metric.verbose_name) {
-    return t('verbose name: %s', metric.verbose_name);
+  if (metric.verbose_name) {
+    return (
+      <>
+        <div>{t('metric name: %s', metric.metric_name)}</div>
+        <div>{t('verbose name: %s', metric.verbose_name)}</div>
+      </>
+    );
   }
 
   if (isLabelTruncated(labelRef) && metric.label) {

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
@@ -16,10 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
+
 import {
   getColumnLabelText,
-  getColumnTooltipText,
-  getMeticTooltipText,
+  getColumnTooltipNode,
+  getMeticTooltipNode,
 } from '../../src/components/labelUtils';
 
 test("should get column name when column doesn't have verbose_name", () => {
@@ -42,38 +44,45 @@ test('should get verbose name when column have verbose_name', () => {
   ).toBe('verbose name');
 });
 
-test('should get empty string as tooltip', () => {
+test('should get null as tooltip', () => {
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   expect(
-    getColumnTooltipText(
+    getColumnTooltipNode(
       {
         id: 123,
         column_name: 'column name',
         verbose_name: '',
       },
       ref,
     ),
-  ).toBe('');
+  ).toBe(null);
 });
 
 test('should get column name as tooltip when it verbose name', () => {
+  const rvNode = (
+    <>
+      <div>column name: column name</div>
+      <div>verbose name: verbose name</div>
+    </>
+  );
+
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   expect(
-    getColumnTooltipText(
+    getColumnTooltipNode(
       {
         id: 123,
         column_name: 'column name',
         verbose_name: 'verbose name',
       },
       ref,
     ),
-  ).toBe('column name: column name');
+  ).toStrictEqual(rvNode);
 });
 
 test('should get column name as tooltip if it overflowed', () => {
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
   expect(
-    getColumnTooltipText(
+    getColumnTooltipNode(
       {
         id: 123,
         column_name: 'long long long long column name',
@@ -85,65 +94,86 @@ test('should get column name as tooltip if it overflowed', () => {
 });
 
 test('should get verbose name as tooltip if it overflowed', () => {
+  const rvNode = (
+    <>
+      <div>column name: long long long long column name</div>
+      <div>verbose name: long long long long verbose name</div>
+    </>
+  );
+
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
   expect(
-    getColumnTooltipText(
+    getColumnTooltipNode(
       {
         id: 123,
         column_name: 'long long long long column name',
         verbose_name: 'long long long long verbose name',
       },
       ref,
     ),
-  ).toBe('verbose name: long long long long verbose name');
+  ).toStrictEqual(rvNode);
 });
 
-test('should get empty string as tooltip in metric', () => {
+test('should get null as tooltip in metric', () => {
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   expect(
-    getMeticTooltipText(
+    getMeticTooltipNode(
       {
         metric_name: 'count',
         label: '',
         verbose_name: '',
       },
       ref,
     ),
-  ).toBe('');
+  ).toBe(null);
 });
 
 test('should get metric name(sql alias) as tooltip in metric', () => {
+  const rvNode = (
+    <>
+      <div>metric name: count</div>
+      <div>verbose name: count(*)</div>
+    </>
+  );
+
   const ref = { current: { scrollWidth: 100, clientWidth: 100 } };
   expect(
-    getMeticTooltipText(
+    getMeticTooltipNode(
       {
         metric_name: 'count',
         label: 'count(*)',
         verbose_name: 'count(*)',
       },
       ref,
     ),
-  ).toBe('metric name: count');
+  ).toStrictEqual(rvNode);
 });
 
 test('should get verbose name as tooltip in metric if it overflowed', () => {
+  const rvNode = (
+    <>
+      <div>metric name: count</div>
+      <div>verbose name: longlonglonglonglong verbose metric</div>
+    </>
+  );
+
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
   expect(
-    getMeticTooltipText(
+    getMeticTooltipNode(
       {
         metric_name: 'count',
         label: '',
         verbose_name: 'longlonglonglonglong verbose metric',
       },
       ref,
     ),
-  ).toBe('verbose name: longlonglonglonglong verbose metric');
+  ).toStrictEqual(rvNode);
 });
 
 test('should get label name as tooltip in metric if it overflowed', () => {
   const ref = { current: { scrollWidth: 200, clientWidth: 100 } };
   expect(
-    getMeticTooltipText(
+    getMeticTooltipNode(
       {
         metric_name: 'count',
         label: 'longlonglonglonglong metric label',