ESLint: Re-enable rule no-access-state-in-setstate (#10870)

* Re-enable rule no-access-state-in-setstate

* Move accessing event values out of async functions

superset-frontend/.eslintrc.js

@@ -124,7 +124,6 @@ module.exports = {
         'react/jsx-fragments': 1,
         'react/jsx-no-bind': 0,
         'react/jsx-props-no-spreading': 0, // re-enable up for discussion
-        'react/no-access-state-in-setstate': 0, // disabled temporarily
         'react/no-array-index-key': 0,
         'react/no-string-refs': 0,
         'react/no-unescaped-entities': 0,
@@ -236,7 +235,6 @@ module.exports = {
     'react/jsx-fragments': 1,
     'react/jsx-no-bind': 0,
     'react/jsx-props-no-spreading': 0, // re-enable up for discussion
-    'react/no-access-state-in-setstate': 0, // disabled temporarily
     'react/no-array-index-key': 0,
     'react/no-string-refs': 0,
     'react/no-unescaped-entities': 0,

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -150,12 +150,12 @@ export default class CRUDCollection extends React.PureComponent<
 
   toggleExpand(id: any) {
     this.onCellChange(id, '__expanded', false);
-    this.setState({
+    this.setState(prevState => ({
       expandedColumns: {
-        ...this.state.expandedColumns,
-        [id]: !this.state.expandedColumns[id],
+        ...prevState.expandedColumns,
+        [id]: !prevState.expandedColumns[id],
       },
-    });
+    }));
   }
 
   renderHeaderRow() {

superset-frontend/src/SqlLab/components/LimitControl.tsx

@@ -77,7 +77,7 @@ export default class LimitControl extends React.PureComponent<
   }
 
   handleToggle() {
-    this.setState({ showOverlay: !this.state.showOverlay });
+    this.setState(prevState => ({ showOverlay: !prevState.showOverlay }));
   }
 
   handleHide() {

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -129,9 +129,9 @@ export default class ResultSet extends React.PureComponent<
   }
 
   toggleExploreResultsButton() {
-    this.setState({
-      showExploreResultsButton: !this.state.showExploreResultsButton,
-    });
+    this.setState(prevState => ({
+      showExploreResultsButton: !prevState.showExploreResultsButton,
+    }));
   }
 
   changeSearch(event: React.ChangeEvent<HTMLInputElement>) {

superset-frontend/src/SqlLab/components/SaveQuery.jsx

@@ -91,7 +91,7 @@ class SaveQuery extends React.PureComponent {
   }
 
   toggleSave() {
-    this.setState({ showSave: !this.state.showSave });
+    this.setState(prevState => ({ showSave: !prevState.showSave }));
   }
 
   renderModalBody() {

superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx

@@ -133,7 +133,7 @@ class ScheduleQueryButton extends React.PureComponent {
   }
 
   toggleSchedule() {
-    this.setState({ showSchedule: !this.state.showSchedule });
+    this.setState(prevState => ({ showSchedule: !prevState.showSchedule }));
   }
 
   renderModalBody() {

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -260,7 +260,9 @@ class SqlEditor extends React.PureComponent {
   }
 
   handleToggleAutocompleteEnabled = () => {
-    this.setState({ autocompleteEnabled: !this.state.autocompleteEnabled });
+    this.setState(prevState => ({
+      autocompleteEnabled: !prevState.autocompleteEnabled,
+    }));
   };
 
   handleWindowResize() {

superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx

@@ -278,7 +278,7 @@ class TabbedSqlEditors extends React.PureComponent {
   }
 
   toggleLeftBar() {
-    this.setState({ hideLeftBar: !this.state.hideLeftBar });
+    this.setState(prevState => ({ hideLeftBar: !prevState.hideLeftBar }));
   }
 
   render() {

superset-frontend/src/SqlLab/components/TableElement.jsx

@@ -85,7 +85,7 @@ class TableElement extends React.PureComponent {
   }
 
   toggleSortColumns() {
-    this.setState({ sortColumns: !this.state.sortColumns });
+    this.setState(prevState => ({ sortColumns: !prevState.sortColumns }));
   }
 
   removeFromStore() {

superset-frontend/src/components/OmniContainer.jsx

@@ -70,7 +70,7 @@ class OmniContainer extends React.Component {
           show_omni: !this.state.showOmni,
         });
 
-        this.setState({ showOmni: !this.state.showOmni });
+        this.setState(prevState => ({ showOmni: !prevState.showOmni }));
 
         document.getElementsByClassName('Omnibar')[0].focus();
       }

superset-frontend/src/dashboard/components/SaveModal.jsx

@@ -75,7 +75,9 @@ class SaveModal extends React.PureComponent {
   }
 
   toggleDuplicateSlices() {
-    this.setState({ duplicateSlices: !this.state.duplicateSlices });
+    this.setState(prevState => ({
+      duplicateSlices: !prevState.duplicateSlices,
+    }));
   }
 
   handleSaveTypeChange(event) {

superset-frontend/src/dashboard/components/SliceAdder.jsx

@@ -135,23 +135,23 @@ class SliceAdder extends React.Component {
   }
 
   searchUpdated(searchTerm) {
-    this.setState({
+    this.setState(prevState => ({
       searchTerm,
       filteredSlices: this.getFilteredSortedSlices(
         searchTerm,
-        this.state.sortBy,
+        prevState.sortBy,
       ),
-    });
+    }));
   }
 
   handleSelect(sortBy) {
-    this.setState({
+    this.setState(prevState => ({
       sortBy,
       filteredSlices: this.getFilteredSortedSlices(
-        this.state.searchTerm,
+        prevState.searchTerm,
         sortBy,
       ),
-    });
+    }));
   }
 
   rowRenderer({ key, index, style }) {

superset-frontend/src/dashboard/components/SliceHeaderControls.jsx

@@ -103,9 +103,9 @@ class SliceHeaderControls extends React.PureComponent {
   }
 
   toggleControls() {
-    this.setState({
-      showControls: !this.state.showControls,
-    });
+    this.setState(prevState => ({
+      showControls: !prevState.showControls,
+    }));
   }
 
   handleToggleFullSize() {

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

@@ -163,7 +163,7 @@ class ChartHolder extends React.Component {
   }
 
   handleToggleFullSize() {
-    this.setState(() => ({ isFullSize: !this.state.isFullSize }));
+    this.setState(prevState => ({ isFullSize: !prevState.isFullSize }));
   }
 
   render() {

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -289,7 +289,10 @@ class DatasourceEditor extends React.PureComponent {
 
   onDatasourcePropChange(attr, value) {
     const datasource = { ...this.state.datasource, [attr]: value };
-    this.setState({ datasource }, this.onDatasourceChange(datasource));
+    this.setState(
+      prevState => ({ datasource: { ...prevState.datasource, [attr]: value } }),
+      this.onDatasourceChange(datasource),
+    );
   }
 
   setColumns(obj) {

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

@@ -88,40 +88,41 @@ export default class AdhocMetricEditPopover extends React.Component {
   }
 
   onColumnChange(column) {
-    this.setState({
-      adhocMetric: this.state.adhocMetric.duplicateWith({
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
         column,
         expressionType: EXPRESSION_TYPES.SIMPLE,
       }),
-    });
+    }));
   }
 
   onAggregateChange(aggregate) {
     // we construct this object explicitly to overwrite the value in the case aggregate is null
-    this.setState({
-      adhocMetric: this.state.adhocMetric.duplicateWith({
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
         aggregate,
         expressionType: EXPRESSION_TYPES.SIMPLE,
       }),
-    });
+    }));
   }
 
   onSqlExpressionChange(sqlExpression) {
-    this.setState({
-      adhocMetric: this.state.adhocMetric.duplicateWith({
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
         sqlExpression,
         expressionType: EXPRESSION_TYPES.SQL,
       }),
-    });
+    }));
   }
 
   onLabelChange(e) {
-    this.setState({
-      adhocMetric: this.state.adhocMetric.duplicateWith({
-        label: e.target.value,
+    const label = e.target.value;
+    this.setState(prevState => ({
+      adhocMetric: prevState.adhocMetric.duplicateWith({
+        label,
         hasCustomLabel: true,
       }),
-    });
+    }));
   }
 
   onDragDown(e) {

superset-frontend/src/explore/components/ControlPanelSection.jsx

@@ -44,7 +44,7 @@ export default class ControlPanelSection extends React.Component {
   }
 
   toggleExpand() {
-    this.setState({ expanded: !this.state.expanded });
+    this.setState(prevState => ({ expanded: !prevState.expanded }));
   }
 
   renderHeader() {

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -281,7 +281,7 @@ class ExploreViewContainer extends React.Component {
   }
 
   toggleModal() {
-    this.setState({ showModal: !this.state.showModal });
+    this.setState(prevState => ({ showModal: !prevState.showModal }));
   }
 
   hasErrors() {

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

@@ -333,7 +333,7 @@ export default class AnnotationLayer extends React.PureComponent {
       annotation.color =
         annotation.color === AUTOMATIC_COLOR ? null : annotation.color;
       this.props.addAnnotationLayer(annotation);
-      this.setState({ isNew: false, oldName: this.state.name });
+      this.setState(prevState => ({ isNew: false, oldName: prevState.name }));
     }
   }
 

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

@@ -47,19 +47,21 @@ export default class BoundsControl extends React.Component {
   }
 
   onMinChange(event) {
+    const min = event.target.value;
     this.setState(
-      {
-        minMax: [event.target.value, this.state.minMax[1]],
-      },
+      prevState => ({
+        minMax: [min, prevState.minMax[1]],
+      }),
       this.onChange,
     );
   }
 
   onMaxChange(event) {
+    const max = event.target.value;
     this.setState(
-      {
-        minMax: [this.state.minMax[0], event.target.value],
-      },
+      prevState => ({
+        minMax: [prevState.minMax[0], max],
+      }),
       this.onChange,
     );
   }

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

@@ -259,14 +259,14 @@ class DateFilterControl extends React.Component {
     const closeCalendar =
       (key === 'since' && this.state.sinceViewMode === 'days') ||
       (key === 'until' && this.state.untilViewMode === 'days');
-    this.setState({
+    this.setState(prevState => ({
       type: TYPES.CUSTOM_START_END,
       [key]: typeof value === 'string' ? value : value.format(MOMENT_FORMAT),
-      showSinceCalendar: this.state.showSinceCalendar && !closeCalendar,
-      showUntilCalendar: this.state.showUntilCalendar && !closeCalendar,
-      sinceViewMode: closeCalendar ? 'days' : this.state.sinceViewMode,
-      untilViewMode: closeCalendar ? 'days' : this.state.untilViewMode,
-    });
+      showSinceCalendar: prevState.showSinceCalendar && !closeCalendar,
+      showUntilCalendar: prevState.showUntilCalendar && !closeCalendar,
+      sinceViewMode: closeCalendar ? 'days' : prevState.sinceViewMode,
+      untilViewMode: closeCalendar ? 'days' : prevState.untilViewMode,
+    }));
   }
 
   setTypeCustomRange() {

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

@@ -90,10 +90,9 @@ export default class FixedOrMetricControl extends React.Component {
   }
 
   toggle() {
-    const expanded = !this.state.expanded;
-    this.setState({
-      expanded,
-    });
+    this.setState(prevState => ({
+      expanded: !prevState.expanded,
+    }));
   }
 
   render() {

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

@@ -114,7 +114,7 @@ export default class SpatialControl extends React.Component {
 
   toggleCheckbox() {
     this.setState(
-      { reverseCheckbox: !this.state.reverseCheckbox },
+      prevState => ({ reverseCheckbox: !prevState.reverseCheckbox }),
       this.onChange,
     );
   }

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

@@ -120,7 +120,7 @@ export default class VizTypeControl extends React.PureComponent {
   }
 
   toggleModal() {
-    this.setState({ showModal: !this.state.showModal });
+    this.setState(prevState => ({ showModal: !prevState.showModal }));
   }
 
   changeSearch(event) {

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -176,16 +176,21 @@ class FilterBox extends React.Component {
         vals = options;
       }
     }
-    const selectedValues = {
-      ...this.state.selectedValues,
-      [fltr]: vals,
-    };
 
-    this.setState({ selectedValues, hasChanged: true }, () => {
-      if (this.props.instantFiltering) {
-        this.props.onChange({ [fltr]: vals }, false);
-      }
-    });
+    this.setState(
+      prevState => ({
+        selectedValues: {
+          ...prevState.selectedValues,
+          [fltr]: vals,
+        },
+        hasChanged: true,
+      }),
+      () => {
+        if (this.props.instantFiltering) {
+          this.props.onChange({ [fltr]: vals }, false);
+        }
+      },
+    );
   }
 
   /**