[explore] improve metric(s) and groupby(s) controls (#2921)

* [explore] improve metric(s) and groupby(s) controls

- surface verbose_name, description & expression in controls
- [table viz] surface verbose name in table header

* Fixing tests

* Addressing comments

* Fixing tests (once more)

superset/assets/javascripts/components/ColumnOption.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+
+const propTypes = {
+  column: PropTypes.object.isRequired,
+};
+
+export default function ColumnOption({ column }) {
+  return (
+    <span>
+      <span className="m-r-5 option-label">
+        {column.verbose_name || column.column_name}
+      </span>
+      {column.description &&
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="info"
+          tooltip={column.description}
+          label={`descr-${column.column_name}`}
+        />
+      }
+      {column.expression && column.expression !== column.column_name &&
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="question-circle-o"
+          tooltip={column.expression}
+          label={`expr-${column.column_name}`}
+        />
+      }
+    </span>);
+}
+ColumnOption.propTypes = propTypes;

superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx

@@ -6,17 +6,23 @@ import { slugify } from '../modules/utils';
 const propTypes = {
   label: PropTypes.string.isRequired,
   tooltip: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  className: PropTypes.string,
+};
+const defaultProps = {
+  icon: 'question-circle-o',
 };
 
-export default function InfoTooltipWithTrigger({ label, tooltip }) {
+export default function InfoTooltipWithTrigger({ label, tooltip, icon, className }) {
   return (
     <OverlayTrigger
       placement="right"
       overlay={<Tooltip id={`${slugify(label)}-tooltip`}>{tooltip}</Tooltip>}
     >
-      <i className="fa fa-question-circle-o" />
+      <i className={`fa fa-${icon} ${className}`} />
     </OverlayTrigger>
   );
 }
 
 InfoTooltipWithTrigger.propTypes = propTypes;
+InfoTooltipWithTrigger.defaultProps = defaultProps;

superset/assets/javascripts/components/MetricOption.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
+
+const propTypes = {
+  metric: PropTypes.object.isRequired,
+};
+
+export default function MetricOption({ metric }) {
+  return (
+    <div>
+      <span className="m-r-5 option-label">
+        {metric.verbose_name || metric.metric_name}
+      </span>
+      {metric.description &&
+        <InfoTooltipWithTrigger
+          className="m-r-5 text-muted"
+          icon="info"
+          tooltip={metric.description}
+          label={`descr-${metric.metric_name}`}
+        />
+      }
+      <InfoTooltipWithTrigger
+        className="m-r-5 text-muted"
+        icon="question-circle-o"
+        tooltip={metric.expression}
+        label={`expr-${metric.metric_name}`}
+      />
+    </div>);
+}
+MetricOption.propTypes = propTypes;