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/ControlPanelsContainer.jsx

@@ -92,6 +92,28 @@ class ControlPanelsContainer extends React.Component {
     this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      actions: { setControlValue },
+    } = this.props;
+    if (this.props.form_data.datasource !== prevProps.form_data.datasource) {
+      const defaultValues = [
+        'MetricsControl',
+        'AdhocFilterControl',
+        'TextControl',
+        'SelectControl',
+        'CheckboxControl',
+        'AnnotationLayerControl',
+      ];
+      Object.entries(this.props.controls).forEach(([controlName, control]) => {
+        const { type, default: defaultValue } = control;
+        if (defaultValues.includes(type)) {
+          setControlValue(controlName, defaultValue);
+        }
+      });
+    }
+  }
+
   sectionsToRender() {
     return sectionsToRender(
       this.props.form_data.viz_type,
@@ -253,7 +275,6 @@ class ControlPanelsContainer extends React.Component {
     const expandedCustomSections = this.sectionsToExpand(
       displaySectionsToRender,
     );
-
     return (
       <Styles>
         {this.props.alert && (

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/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>

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
@@ -240,7 +243,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 +270,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 {
@@ -50,6 +51,16 @@ export default class TextControl extends React.Component<
     this.onChange(inputValue);
   }, 500);
 
+  static getDerivedStateFromProps(
+    props: TextControlProps,
+    state: TextControlState,
+  ) {
+    if (props.value !== state.value) {
+      return { value: props.value };
+    }
+    return null;
+  }
+
   constructor(props: TextControlProps) {
     super(props);
 
@@ -61,6 +72,10 @@ export default class TextControl extends React.Component<
     };
   }
 
+  defaultInput = () => {
+    this.setState({ value: '' });
+  };
+
   onChange = (inputValue: string) => {
     let parsedValue: string | number = inputValue;
     // Validation & casting
@@ -103,7 +118,6 @@ export default class TextControl extends React.Component<
       typeof rawValue !== 'undefined' && rawValue !== null
         ? rawValue.toString()
         : '';
-
     return (
       <div>
         <ControlHeader {...this.props} />