feat: reset metrics on dataset change

superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -81,6 +81,9 @@ class AnnotationLayerControl extends React.PureComponent {
     if (!Object.keys(annotationError).length && validationErrors.length) {
       this.props.actions.setControlValue(name, value, []);
     }
+    if (nextProps.datasource !== this.props.datasource) {
+      this.props.onChange([]);
+    }
   }
 
   addAnnotationLayer(originalAnnotation, newAnnotation) {
@@ -157,7 +160,6 @@ class AnnotationLayerControl extends React.PureComponent {
   render() {
     const { addedAnnotationIndex } = this.state;
     const addedAnnotation = this.props.value[addedAnnotationIndex];
-
     const annotations = this.props.value.map((anno, i) => (
       <Popover
         key={i}

superset-frontend/src/explore/components/controls/CheckboxControl.jsx

@@ -35,6 +35,12 @@ const defaultProps = {
 const checkboxStyle = { paddingRight: '5px' };
 
 export default class CheckboxControl extends React.Component {
+  componentDidUpdate(prevProps) {
+    if (prevProps.datasource !== this.props.datasource) {
+      this.props.onChange(false);
+    }
+  }
+
   onChange() {
     this.props.onChange(!this.props.value);
   }

superset-frontend/src/explore/components/controls/CollectionControl.jsx

@@ -69,6 +69,12 @@ export default class CollectionControl extends React.Component {
     this.onAdd = this.onAdd.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.datasource.name !== this.props.datasource.name) {
+      this.props.onChange([]);
+    }
+  }
+
   onChange(i, value) {
     Object.assign(this.props.value[i], value);
     this.props.onChange(this.props.value);

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx

@@ -155,6 +155,10 @@ class AdhocFilterControl extends React.Component {
         ),
       });
     }
+
+    if (this.props.datasource !== nextProps.datasource) {
+      this.setState({ values: [] });
+    }
   }
 
   onRemoveFilter(index) {

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

@@ -61,14 +61,17 @@ class AdhocMetricOption extends React.PureComponent {
       onMoveLabel,
       onDropLabel,
       index,
+      datasource,
     } = this.props;
+
     return (
       <AdhocMetricPopoverTrigger
         adhocMetric={adhocMetric}
         onMetricEdit={onMetricEdit}
         columns={columns}
         savedMetricsOptions={savedMetricsOptions}
         savedMetric={savedMetric}
+        datasource={datasource}
         datasourceType={datasourceType}
       >
         <Tooltip

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

@@ -140,6 +140,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,
@@ -183,6 +184,10 @@ class MetricsControl extends React.PureComponent {
     if (value !== nextProps.value) {
       this.setState({ value: coerceAdhocMetrics(nextProps.value) });
     }
+
+    if (this.props.datasource !== nextProps.datasource) {
+      this.setState({ value: [] });
+    }
   }
 
   onNewMetric(newMetric) {
@@ -286,6 +291,7 @@ class MetricsControl extends React.PureComponent {
           this.props.savedMetrics,
           this.props.value,
         )}
+        datasource={this.props.datasource}
         savedMetric={{}}
         datasourceType={this.props.datasourceType}
         createNew
@@ -369,7 +375,6 @@ class MetricsControl extends React.PureComponent {
 
   render() {
     const { theme } = this.props;
-
     return (
       <div className="metrics-select">
         <HeaderContainer>

superset-frontend/src/explore/components/controls/SelectControl.jsx

@@ -82,7 +82,10 @@ const defaultProps = {
 export default class SelectControl extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { options: this.getOptions(props) };
+    this.state = {
+      options: this.getOptions(props),
+      value: this.props.value,
+    };
     this.onChange = this.onChange.bind(this);
     this.createMetaSelectAllOption = this.createMetaSelectAllOption.bind(this);
     this.select = null; // pointer to the react-select instance
@@ -98,6 +101,9 @@ export default class SelectControl extends React.PureComponent {
       const options = this.getOptions(nextProps);
       this.setState({ options });
     }
+    if (nextProps.datasource !== this.props.datasource) {
+      this.props.onChange([]);
+    }
   }
 
   // Beware: This is acting like an on-click instead of an on-change
@@ -240,7 +246,12 @@ export default class SelectControl extends React.PureComponent {
     const isMulti = this.props.isMulti || this.props.multi;
 
     let assistiveText;
-    if (isMulti && optionsRemaining && Array.isArray(value) && !!value.length) {
+    if (
+      isMulti &&
+      optionsRemaining &&
+      Array.isArray(this.state.value) &&
+      !!value.length
+    ) {
       assistiveText = optionRemaingText;
     }
 
@@ -262,12 +273,12 @@ export default class SelectControl extends React.PureComponent {
       onChange: this.onChange,
       onFocus,
       optionRenderer,
+      value,
       options: this.state.options,
       placeholder,
       assistiveText,
       promptTextCreator,
       selectRef: this.getSelectRef,
-      value,
       valueKey,
       valueRenderer,
     };

superset-frontend/src/explore/components/controls/TextControl.tsx

@@ -32,6 +32,7 @@ interface TextControlProps {
   value?: string | number;
   controlId?: string;
   renderTrigger?: boolean;
+  datasource?: string;
 }
 
 interface TextControlState {
@@ -61,6 +62,17 @@ export default class TextControl extends React.Component<
     };
   }
 
+  componentDidUpdate(prevProps: TextControlProps) {
+    if (prevProps.datasource !== this.props.datasource) {
+      this.props.onChange?.('', []);
+      this.defaultInput();
+    }
+  }
+
+  defaultInput = () => {
+    this.setState({ value: '' });
+  };
+
   onChange = (inputValue: string) => {
     let parsedValue: string | number = inputValue;
     // Validation & casting
@@ -103,7 +115,6 @@ export default class TextControl extends React.Component<
       typeof rawValue !== 'undefined' && rawValue !== null
         ? rawValue.toString()
         : '';
-
     return (
       <div>
         <ControlHeader {...this.props} />