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

* fix(explore): long metric name display * add tooltip to control
apache · Jan 11, 2021 · c327cb9 · c327cb9
1 parent 9acf48f
commit c327cb9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git 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
@@ -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
@@ -60,6 +60,9 @@ const Label = styled.div`
  svg {
  margin-right: ${({ theme }) => theme.gridUnit}px;
  }
+ .option-label {
+ display: inline;
+ }
 `;
 
 const CaretContainer = styled.div`