feat: reset metrics on dataset change (#12782)

* reset metrics on dataset change take one

* remove code

* part 2 or reseting adhoc controls

* update input controls and customize defaults

* remove conosles

* remove extra method

* simplify logic for controls reset and have them use their defaults

* remove consoles

* add annotation control to defaultvalues

* remove line

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx

@@ -123,6 +123,9 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
         adhocMetricLabel: this.state.adhocMetric?.getDefaultLabel(),
       });
     }
+    if (prevProps.datasource !== this.props.datasource) {
+      this.props.onChange(null);
+    }
   }
 
   componentWillUnmount() {
@@ -272,7 +275,6 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
       datasourceType,
       ...popoverProps
     } = this.props;
-
     const { adhocMetric, savedMetric } = this.state;
     const keywords = sqlKeywords.concat(
       columns.map(column => ({

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx

@@ -60,7 +60,9 @@ class AdhocMetricOption extends React.PureComponent {
       onMoveLabel,
       onDropLabel,
       index,
+      datasource,
     } = this.props;
+
     return (
       <AdhocMetricPopoverTrigger
         adhocMetric={adhocMetric}
@@ -68,6 +70,7 @@ class AdhocMetricOption extends React.PureComponent {
         columns={columns}
         savedMetricsOptions={savedMetricsOptions}
         savedMetric={savedMetric}
+        datasource={datasource}
         datasourceType={datasourceType}
       >
         <OptionControlLabel

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx

@@ -33,6 +33,7 @@ export type AdhocMetricPopoverTriggerProps = {
   savedMetricsOptions: savedMetricType[];
   savedMetric: savedMetricType;
   datasourceType: string;
+  datasource: string;
   children: ReactNode;
   createNew?: boolean;
 };
@@ -159,6 +160,7 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
         columns={this.props.columns}
         savedMetricsOptions={this.props.savedMetricsOptions}
         savedMetric={this.props.savedMetric}
+        datasource={this.props.datasource}
         datasourceType={this.props.datasourceType}
         onResize={this.onPopoverResize}
         onClose={this.closePopover}

superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx

@@ -38,6 +38,7 @@ const propTypes = {
   savedMetricsOptions: PropTypes.arrayOf(savedMetricType),
   multi: PropTypes.bool,
   datasourceType: PropTypes.string,
+  datasource: PropTypes.string,
 };
 
 export default function MetricDefinitionValue({
@@ -51,6 +52,7 @@ export default function MetricDefinitionValue({
   onMoveLabel,
   onDropLabel,
   index,
+  datasource,
 }) {
   const getSavedMetricByName = metricName =>
     savedMetrics.find(metric => metric.metric_name === metricName);
@@ -77,6 +79,7 @@ export default function MetricDefinitionValue({
       onDropLabel,
       index,
       savedMetric: savedMetric ?? {},
+      datasource,
     };
 
     return <AdhocMetricOption {...metricOptionProps} />;

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx

@@ -144,6 +144,7 @@ class MetricsControl extends React.PureComponent {
         onMetricEdit={this.onMetricEdit}
         onRemoveMetric={() => this.onRemoveMetric(index)}
         columns={this.props.columns}
+        datasource={this.props.datasource}
         savedMetrics={this.props.savedMetrics}
         savedMetricsOptions={getOptionsForSavedMetrics(
           this.props.savedMetrics,
@@ -292,6 +293,7 @@ class MetricsControl extends React.PureComponent {
           this.props.value,
           null,
         )}
+        datasource={this.props.datasource}
         savedMetric={{}}
         datasourceType={this.props.datasourceType}
         createNew
@@ -375,7 +377,6 @@ class MetricsControl extends React.PureComponent {
 
   render() {
     const { theme } = this.props;
-
     return (
       <div className="metrics-select">
         <HeaderContainer>