You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2023/06/13 01:32:23 UTC
[superset] branch master updated: feat: add a tooltip to clarify metric_name in the DatasetEditor (#24348)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new dd77aacc51 feat: add a tooltip to clarify metric_name in the DatasetEditor (#24348)
dd77aacc51 is described below
commit dd77aacc513679caafe029964a3ef0d81cef3a9e
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon Jun 12 18:32:15 2023 -0700
feat: add a tooltip to clarify metric_name in the DatasetEditor (#24348)
---
.../src/components/Datasource/CollectionTable.tsx | 35 ++++++++++++++++++----
.../src/components/Datasource/DatasourceEditor.jsx | 20 +++++++++++--
.../Datasource/DatasourceEditor.test.jsx | 6 ++++
3 files changed, 53 insertions(+), 8 deletions(-)
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index baa53264c7..f1a1422287 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<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" />
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index 34a702077a..89ad141809 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 (
<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
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index 7b211a086a..f598290ba8 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/*';