mirror of https://github.com/apache/superset.git
feat(explore): Make metric title respond to changes immediately (#12747)
* Make metric title respond to changes immediately * Bug fix * Change type to Metric * Bug fix
This commit is contained in:
parent
41b990f72d
commit
14de7b4791
|
@ -56,6 +56,7 @@ function setup(overrides) {
|
|||
onChange,
|
||||
onClose,
|
||||
onResize: () => {},
|
||||
getCurrentLabel: () => {},
|
||||
columns,
|
||||
...overrides,
|
||||
};
|
||||
|
|
|
@ -42,14 +42,11 @@ const propTypes = {
|
|||
onClose: PropTypes.func.isRequired,
|
||||
onResize: PropTypes.func.isRequired,
|
||||
getCurrentTab: PropTypes.func,
|
||||
getCurrentLabel: PropTypes.func,
|
||||
columns: PropTypes.arrayOf(columnType),
|
||||
savedMetricsOptions: PropTypes.arrayOf(savedMetricType),
|
||||
savedMetric: savedMetricType,
|
||||
datasourceType: PropTypes.string,
|
||||
title: PropTypes.shape({
|
||||
label: PropTypes.string,
|
||||
hasCustomLabel: PropTypes.bool,
|
||||
}),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
@ -72,7 +69,7 @@ export const SAVED_TAB_KEY = 'SAVED';
|
|||
const startingWidth = 320;
|
||||
const startingHeight = 240;
|
||||
|
||||
export default class AdhocMetricEditPopover extends React.Component {
|
||||
export default class AdhocMetricEditPopover extends React.PureComponent {
|
||||
// "Saved" is a default tab unless there are no saved metrics for dataset
|
||||
defaultActiveTabKey =
|
||||
(this.props.savedMetric.metric_name || this.props.adhocMetric.isNew) &&
|
||||
|
@ -110,20 +107,31 @@ export default class AdhocMetricEditPopover extends React.Component {
|
|||
this.props.getCurrentTab(this.defaultActiveTabKey);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (
|
||||
prevState.adhocMetric?.sqlExpression !==
|
||||
this.state.adhocMetric?.sqlExpression ||
|
||||
prevState.adhocMetric?.aggregate !== this.state.adhocMetric?.aggregate ||
|
||||
prevState.adhocMetric?.column?.column_name !==
|
||||
this.state.adhocMetric?.column?.column_name ||
|
||||
prevState.savedMetric?.metric_name !== this.state.savedMetric?.metric_name
|
||||
) {
|
||||
this.props.getCurrentLabel({
|
||||
savedMetricLabel:
|
||||
this.state.savedMetric?.verbose_name ||
|
||||
this.state.savedMetric?.metric_name,
|
||||
adhocMetricLabel: this.state.adhocMetric?.getDefaultLabel(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('mouseup', this.onMouseUp);
|
||||
document.removeEventListener('mousemove', this.onMouseMove);
|
||||
}
|
||||
|
||||
onSave() {
|
||||
const { title } = this.props;
|
||||
const { hasCustomLabel } = title;
|
||||
let { label } = title;
|
||||
const { adhocMetric, savedMetric } = this.state;
|
||||
const metricLabel = adhocMetric.label;
|
||||
if (!hasCustomLabel) {
|
||||
label = metricLabel;
|
||||
}
|
||||
|
||||
const metric = savedMetric?.metric_name ? savedMetric : adhocMetric;
|
||||
const oldMetric = this.props.savedMetric?.metric_name
|
||||
|
@ -132,8 +140,6 @@ export default class AdhocMetricEditPopover extends React.Component {
|
|||
this.props.onChange(
|
||||
{
|
||||
...metric,
|
||||
label,
|
||||
hasCustomLabel,
|
||||
},
|
||||
oldMetric,
|
||||
);
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Metric } from '@superset-ui/core';
|
||||
import Popover from 'src/common/components/Popover';
|
||||
import AdhocMetricEditPopoverTitle from 'src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle';
|
||||
import AdhocMetricEditPopover, {
|
||||
|
@ -27,7 +28,7 @@ import { savedMetricType } from './types';
|
|||
|
||||
export type AdhocMetricPopoverTriggerProps = {
|
||||
adhocMetric: AdhocMetric;
|
||||
onMetricEdit: () => void;
|
||||
onMetricEdit(newMetric: Metric, oldMetric: Metric): void;
|
||||
columns: { column_name: string; type: string }[];
|
||||
savedMetricsOptions: savedMetricType[];
|
||||
savedMetric: savedMetricType;
|
||||
|
@ -39,6 +40,7 @@ export type AdhocMetricPopoverTriggerProps = {
|
|||
export type AdhocMetricPopoverTriggerState = {
|
||||
popoverVisible: boolean;
|
||||
title: { label: string; hasCustomLabel: boolean };
|
||||
currentLabel: string;
|
||||
labelModified: boolean;
|
||||
isTitleEditDisabled: boolean;
|
||||
};
|
||||
|
@ -53,26 +55,38 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
|||
this.onLabelChange = this.onLabelChange.bind(this);
|
||||
this.closePopover = this.closePopover.bind(this);
|
||||
this.togglePopover = this.togglePopover.bind(this);
|
||||
this.getCurrentTab = this.getCurrentTab.bind(this);
|
||||
this.getCurrentLabel = this.getCurrentLabel.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
popoverVisible: false,
|
||||
title: {
|
||||
label: props.adhocMetric.label,
|
||||
hasCustomLabel: props.adhocMetric.hasCustomLabel,
|
||||
},
|
||||
currentLabel: '',
|
||||
labelModified: false,
|
||||
isTitleEditDisabled: false,
|
||||
};
|
||||
}
|
||||
|
||||
onLabelChange(e: any) {
|
||||
const { verbose_name, metric_name } = this.props.savedMetric;
|
||||
const defaultMetricLabel = this.props.adhocMetric?.getDefaultLabel();
|
||||
const label = e.target.value;
|
||||
this.setState({
|
||||
this.setState(state => ({
|
||||
title: {
|
||||
label: label || this.props.adhocMetric.label,
|
||||
label:
|
||||
label ||
|
||||
state.currentLabel ||
|
||||
verbose_name ||
|
||||
metric_name ||
|
||||
defaultMetricLabel,
|
||||
hasCustomLabel: !!label,
|
||||
},
|
||||
labelModified: true,
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
onPopoverResize() {
|
||||
|
@ -92,13 +106,51 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
|||
});
|
||||
}
|
||||
|
||||
getCurrentTab(tab: string) {
|
||||
this.setState({
|
||||
isTitleEditDisabled: tab === SAVED_TAB_KEY,
|
||||
});
|
||||
}
|
||||
|
||||
getCurrentLabel({
|
||||
savedMetricLabel,
|
||||
adhocMetricLabel,
|
||||
}: {
|
||||
savedMetricLabel: string;
|
||||
adhocMetricLabel: string;
|
||||
}) {
|
||||
const currentLabel = savedMetricLabel || adhocMetricLabel;
|
||||
this.setState({
|
||||
currentLabel,
|
||||
labelModified: true,
|
||||
});
|
||||
if (savedMetricLabel || !this.state.title.hasCustomLabel) {
|
||||
this.setState({
|
||||
title: {
|
||||
label: currentLabel,
|
||||
hasCustomLabel: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onChange(newMetric: Metric, oldMetric: Metric) {
|
||||
this.props.onMetricEdit({ ...newMetric, ...this.state.title }, oldMetric);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { adhocMetric, savedMetric } = this.props;
|
||||
const { verbose_name, metric_name } = savedMetric;
|
||||
const { label, hasCustomLabel } = adhocMetric;
|
||||
const { hasCustomLabel, label } = adhocMetric;
|
||||
const adhocMetricLabel = hasCustomLabel
|
||||
? label
|
||||
: adhocMetric.getDefaultLabel();
|
||||
const title = this.state.labelModified
|
||||
? this.state.title
|
||||
: { label: verbose_name || metric_name || label, hasCustomLabel };
|
||||
: {
|
||||
label: verbose_name || metric_name || adhocMetricLabel,
|
||||
hasCustomLabel,
|
||||
};
|
||||
|
||||
const overlayContent = (
|
||||
<AdhocMetricEditPopover
|
||||
|
@ -110,12 +162,9 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
|
|||
datasourceType={this.props.datasourceType}
|
||||
onResize={this.onPopoverResize}
|
||||
onClose={this.closePopover}
|
||||
onChange={this.props.onMetricEdit}
|
||||
getCurrentTab={(tab: string) =>
|
||||
this.setState({
|
||||
isTitleEditDisabled: tab === SAVED_TAB_KEY,
|
||||
})
|
||||
}
|
||||
onChange={this.onChange}
|
||||
getCurrentTab={this.getCurrentTab}
|
||||
getCurrentLabel={this.getCurrentLabel}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue