fix(explore): long metric name display (#12387)

* fix(explore): long metric name display

* add tooltip to control

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() {

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';
@@ -69,6 +70,10 @@ class AdhocMetricOption extends React.PureComponent {
         savedMetrics={savedMetrics}
         savedMetric={savedMetric}
         datasourceType={datasourceType}
+      >
+        <Tooltip
+          placement="top"
+          title={savedMetric.expression || adhocMetric.label}
         >
           <DraggableOptionControlLabel
             savedMetric={savedMetric}
@@ -81,6 +86,7 @@ class AdhocMetricOption extends React.PureComponent {
             isAdhoc
             isFunction
           />
+        </Tooltip>
       </AdhocMetricPopoverTrigger>
     );
   }

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`