From c327cb911ee9b390b9954160da99225fb8a9a9f1 Mon Sep 17 00:00:00 2001
From: Yongjie Zhao <yongjie.zhao@gmail.com>
Date: Mon, 11 Jan 2021 09:42:38 +0800
Subject: [PATCH] fix(explore): long metric name display (#12387)

* fix(explore): long metric name display

* add tooltip to control
---
 .../components/AdhocMetricEditPopover.jsx     | 12 +++++++-
 .../explore/components/AdhocMetricOption.jsx  | 28 +++++++++++--------
 .../src/explore/components/OptionControls.tsx |  3 ++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
index fe6b0194fc405..a6218b3f489e2 100644
--- a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx
@@ -58,6 +58,12 @@ const ResizeIcon = styled.i`
   margin-left: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
+const ColumnOptionStyle = styled.span`
+  .option-label {
+    display: inline;
+  }
+`;
+
 const SAVED_TAB_KEY = 'SAVED';
 
 const startingWidth = 320;
@@ -220,7 +226,11 @@ export default class AdhocMetricEditPopover extends React.Component {
     if (column.metric_name && !column.verbose_name) {
       column.verbose_name = column.metric_name;
     }
-    return <ColumnOption column={column} showType />;
+    return (
+      <ColumnOptionStyle>
+        <ColumnOption column={column} showType />
+      </ColumnOptionStyle>
+    );
   }
 
   render() {
diff --git a/superset-frontend/src/explore/components/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
index 270db912ff3e6..77eab7c2d306b 100644
--- a/superset-frontend/src/explore/components/AdhocMetricOption.jsx
+++ b/superset-frontend/src/explore/components/AdhocMetricOption.jsx
@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from 'src/common/components/Tooltip';
 import AdhocMetric from '../AdhocMetric';
 import columnType from '../propTypes/columnType';
 import savedMetricType from '../propTypes/savedMetricType';
@@ -70,17 +71,22 @@ class AdhocMetricOption extends React.PureComponent {
         savedMetric={savedMetric}
         datasourceType={datasourceType}
       >
-        <DraggableOptionControlLabel
-          savedMetric={savedMetric}
-          label={adhocMetric.label}
-          onRemove={this.onRemoveMetric}
-          onMoveLabel={onMoveLabel}
-          onDropLabel={onDropLabel}
-          index={index}
-          type={OPTION_TYPES.metric}
-          isAdhoc
-          isFunction
-        />
+        <Tooltip
+          placement="top"
+          title={savedMetric.expression || adhocMetric.label}
+        >
+          <DraggableOptionControlLabel
+            savedMetric={savedMetric}
+            label={adhocMetric.label}
+            onRemove={this.onRemoveMetric}
+            onMoveLabel={onMoveLabel}
+            onDropLabel={onDropLabel}
+            index={index}
+            type={OPTION_TYPES.metric}
+            isAdhoc
+            isFunction
+          />
+        </Tooltip>
       </AdhocMetricPopoverTrigger>
     );
   }
diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx
index 31de6ae36cbd4..8e3121d824c54 100644
--- a/superset-frontend/src/explore/components/OptionControls.tsx
+++ b/superset-frontend/src/explore/components/OptionControls.tsx
@@ -60,6 +60,9 @@ const Label = styled.div`
   svg {
     margin-right: ${({ theme }) => theme.gridUnit}px;
   }
+  .option-label {
+    display: inline;
+  }
 `;
 
 const CaretContainer = styled.div`