diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx index baa53264c719f..f1a1422287f01 100644 --- a/superset-frontend/src/components/Datasource/CollectionTable.tsx +++ b/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; 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 ; } + renderTH(col: string, sortColumns: Array) { + const tooltip = this.getTooltip(col); + return ( + + {this.getLabel(col)} + {tooltip && ( + <> + {' '} + + + )} + {sortColumns?.includes(col) && this.renderSortIcon(col)} + + ); + } + renderHeaderRow() { const cols = this.effectiveTableColumns(); const { allowDeletes, expandFieldset, extraButtons, sortColumns } = @@ -319,12 +347,7 @@ export default class CRUDCollection extends React.PureComponent< {expandFieldset && } - {cols.map(col => ( - - {this.getLabel(col)} - {sortColumns?.includes(col) && this.renderSortIcon(col)} - - ))} + {cols.map(col => this.renderTH(col, sortColumns))} {extraButtons} {allowDeletes && ( diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx index 34a702077a0bc..89ad1418097cd 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx @@ -182,10 +182,10 @@ function ColumnCollectionTable({ allowAddItem, allowEditDataType, itemGenerator, + columnLabelTooltips, }) { return ( @@ -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={
@@ -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 diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx index 7b211a086abe3..f598290ba8608 100644 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx +++ b/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/*';