feat: add a tooltip to clarify metric_name in the DatasetEditor (#24348)

superset-frontend/src/components/Datasource/CollectionTable.tsx

@@ -18,7 +18,10 @@
  */
 import React, { ReactNode } from 'react';
 import shortid from 'shortid';
+
+import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { t, styled } from '@superset-ui/core';
+
 import Button from 'src/components/Button';
 import Icons from 'src/components/Icons';
 import Fieldset from './Fieldset';
@@ -29,6 +32,7 @@ interface CRUDCollectionProps {
   allowDeletes?: boolean;
   collection: Array<object>;
   columnLabels?: object;
+  columnLabelTooltips?: object;
   emptyMessage?: ReactNode;
   expandFieldset?: ReactNode;
   extraButtons?: ReactNode;
@@ -222,6 +226,11 @@ export default class CRUDCollection extends React.PureComponent<
     return label;
   }
 
+  getTooltip(col: string) {
+    const { columnLabelTooltips } = this.props;
+    return columnLabelTooltips?.[col];
+  }
+
   changeCollection(collection: any, newItem?: object) {
     this.setState({ collection });
     if (this.props.onChange) {
@@ -311,6 +320,25 @@ export default class CRUDCollection extends React.PureComponent<
     return <Icons.Sort onClick={this.sortColumn(col, 1)} />;
   }
 
+  renderTH(col: string, sortColumns: Array<string>) {
+    const tooltip = this.getTooltip(col);
+    return (
+      <th key={col} className="no-wrap">
+        {this.getLabel(col)}
+        {tooltip && (
+          <>
+            {' '}
+            <InfoTooltipWithTrigger
+              label={t('description')}
+              tooltip={tooltip}
+            />
+          </>
+        )}
+        {sortColumns?.includes(col) && this.renderSortIcon(col)}
+      </th>
+    );
+  }
+
   renderHeaderRow() {
     const cols = this.effectiveTableColumns();
     const { allowDeletes, expandFieldset, extraButtons, sortColumns } =
@@ -319,12 +347,7 @@ export default class CRUDCollection extends React.PureComponent<
       <thead>
         <tr>
           {expandFieldset && <th aria-label="Expand" className="tiny-cell" />}
-          {cols.map(col => (
-            <th key={col}>
-              {this.getLabel(col)}
-              {sortColumns?.includes(col) && this.renderSortIcon(col)}
-            </th>
-          ))}
+          {cols.map(col => this.renderTH(col, sortColumns))}
           {extraButtons}
           {allowDeletes && (
             <th key="delete-item" aria-label="Delete" className="tiny-cell" />

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -182,10 +182,10 @@ function ColumnCollectionTable({
   allowAddItem,
   allowEditDataType,
   itemGenerator,
+  columnLabelTooltips,
 }) {
   return (
     <CollectionTable
-      collection={columns}
       tableColumns={
         isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)
           ? [
@@ -229,6 +229,8 @@ function ColumnCollectionTable({
       allowDeletes
       allowAddItem={allowAddItem}
       itemGenerator={itemGenerator}
+      collection={columns}
+      columnLabelTooltips={columnLabelTooltips}
       stickyHeader
       expandFieldset={
         <FormContainer>
@@ -1194,10 +1196,17 @@ class DatasourceEditor extends React.PureComponent {
         tableColumns={['metric_name', 'verbose_name', 'expression']}
         sortColumns={['metric_name', 'verbose_name', 'expression']}
         columnLabels={{
-          metric_name: t('Metric'),
+          metric_name: t('Metric Key'),
           verbose_name: t('Label'),
           expression: t('SQL expression'),
         }}
+        columnLabelTooltips={{
+          metric_name: t(
+            'This field is used as a unique identifier to attach ' +
+              'the metric to charts. It is also used as the alias in the ' +
+              'SQL query.',
+          ),
+        }}
         expandFieldset={
           <FormContainer>
             <Fieldset compact>
@@ -1417,6 +1426,13 @@ class DatasourceEditor extends React.PureComponent {
                 onColumnsChange={calculatedColumns =>
                   this.setColumns({ calculatedColumns })
                 }
+                columnLabelTooltips={{
+                  column_name: t(
+                    'This field is used as a unique identifier to attach ' +
+                      'the calculated dimension to charts. It is also used ' +
+                      'as the alias in the SQL query.',
+                  ),
+                }}
                 onDatasourceChange={this.onDatasourceChange}
                 datasource={datasource}
                 editableColumnName

superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx

@@ -29,6 +29,12 @@ const props = {
   addSuccessToast: () => {},
   addDangerToast: () => {},
   onChange: () => {},
+  columnLabels: {
+    state: 'State',
+  },
+  columnLabelTooltips: {
+    state: 'This is a tooltip for `state`',
+  },
 };
 const DATASOURCE_ENDPOINT = 'glob:*/datasource/external_metadata_by_name/*';