From 624f99414f7c81da8883e8a842879927bd3c97e8 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Thu, 18 Feb 2021 08:48:05 -1000
Subject: [PATCH 01/18] refactor(explore): convert ControlPanelsContainer to
 typescript

---
 .../src/explore/actions/exploreActions.ts     |   8 +-
 .../src/explore/components/Control.tsx        |   3 +-
 ...ntainer.jsx => ControlPanelsContainer.tsx} | 155 +++++++++---------
 .../{ControlRow.jsx => ControlRow.tsx}        |  19 +--
 .../components/ExploreViewContainer.jsx       |   3 -
 .../DateFilterControl/DateFilterControl.tsx   |  12 +-
 superset-frontend/src/explore/controls.jsx    |   5 +-
 .../src/explore/reducers/exploreReducer.js    |   6 -
 ...{getInitialState.js => getInitialState.ts} |  23 ++-
 superset-frontend/src/types/Chart.ts          |   3 +-
 superset-frontend/src/types/bootstrapTypes.ts |   9 +
 11 files changed, 137 insertions(+), 109 deletions(-)
 rename superset-frontend/src/explore/components/{ControlPanelsContainer.jsx => ControlPanelsContainer.tsx} (73%)
 rename superset-frontend/src/explore/components/{ControlRow.jsx => ControlRow.tsx} (76%)
 rename superset-frontend/src/explore/reducers/{getInitialState.js => getInitialState.ts} (79%)

diff --git a/superset-frontend/src/explore/actions/exploreActions.ts b/superset-frontend/src/explore/actions/exploreActions.ts
index 4923ae3174d0..7ebfc45e4263 100644
--- a/superset-frontend/src/explore/actions/exploreActions.ts
+++ b/superset-frontend/src/explore/actions/exploreActions.ts
@@ -99,7 +99,7 @@ export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
 export function setControlValue(
   controlName: string,
   value: any,
-  validationErrors: any[],
+  validationErrors?: any[],
 ) {
   return { type: SET_FIELD_VALUE, controlName, value, validationErrors };
 }
@@ -109,11 +109,6 @@ export function setExploreControls(formData: QueryFormData) {
   return { type: SET_EXPLORE_CONTROLS, formData };
 }
 
-export const REMOVE_CONTROL_PANEL_ALERT = 'REMOVE_CONTROL_PANEL_ALERT';
-export function removeControlPanelAlert() {
-  return { type: REMOVE_CONTROL_PANEL_ALERT };
-}
-
 export const UPDATE_CHART_TITLE = 'UPDATE_CHART_TITLE';
 export function updateChartTitle(sliceName: string) {
   return { type: UPDATE_CHART_TITLE, sliceName };
@@ -154,7 +149,6 @@ export const exploreActions = {
   saveFaveStar,
   setControlValue,
   setExploreControls,
-  removeControlPanelAlert,
   updateChartTitle,
   createNewSlice,
   sliceUpdated,
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index f1b6925bd693..6b1e7fa8b885 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { ReactNode } from 'react';
-import { ControlType } from '@superset-ui/chart-controls';
+import { ControlStateMapping, ControlType } from '@superset-ui/chart-controls';
 import { JsonValue, QueryFormData } from '@superset-ui/core';
 import { ExploreActions } from '../actions/exploreActions';
 import controlMap from './controls';
@@ -35,6 +35,7 @@ export type ControlProps = {
   tooltipOnClick?: () => ReactNode;
   places?: number;
   rightNode?: ReactNode;
+  controls?: ControlStateMapping;
   formData?: QueryFormData | null;
   value?: JsonValue;
   validationErrors?: any[];
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
similarity index 73%
rename from superset-frontend/src/explore/components/ControlPanelsContainer.jsx
rename to superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index cc61ab2f1ca7..9afd04a3c77d 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -18,30 +18,49 @@
  */
 /* eslint camelcase: 0 */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { t, styled, getChartControlPanelRegistry } from '@superset-ui/core';
+import {
+  t,
+  styled,
+  getChartControlPanelRegistry,
+  QueryFormData,
+  DatasourceType,
+} from '@superset-ui/core';
 
 import Tabs from 'src/common/components/Tabs';
 import Alert from 'src/components/Alert';
 import Collapse from 'src/common/components/Collapse';
 import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import {
+  ControlPanelSectionConfig,
+  ControlState,
+  CustomControlItem,
+  ExpandedControlItem,
+  InfoTooltipWithTrigger,
+} from '@superset-ui/chart-controls';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import { sectionsToRender } from '../controlUtils';
-import { exploreActions } from '../actions/exploreActions';
+import { ExploreActions, exploreActions } from '../actions/exploreActions';
+import { InitialExploreState } from '../reducers/getInitialState';
 
-const propTypes = {
-  actions: PropTypes.object.isRequired,
-  alert: PropTypes.string,
-  datasource_type: PropTypes.string.isRequired,
-  exploreState: PropTypes.object.isRequired,
-  controls: PropTypes.object.isRequired,
-  form_data: PropTypes.object.isRequired,
-  isDatasourceMetaLoading: PropTypes.bool.isRequired,
+type ControlPanelsContainerProps = {
+  actions: ExploreActions;
+  alert: string;
+  datasource_type: DatasourceType;
+  exploreState: Record<string, any>;
+  controls: Record<string, ControlState>;
+  form_data: QueryFormData;
+  isDatasourceMetaLoading: boolean;
+};
+
+type ExpandedControlPanelSectionConfig = Omit<
+  ControlPanelSectionConfig,
+  'controlSetRows'
+> & {
+  controlSetRows: ExpandedControlItem[][];
 };
 
 const Styles = styled.div`
@@ -80,19 +99,18 @@ const ControlPanelsTabs = styled(Tabs)`
     height: 100%;
   }
 `;
-class ControlPanelsContainer extends React.Component {
+
+class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps> {
   // trigger updates to the component when async plugins load
   static contextType = PluginContext;
 
-  constructor(props) {
+  constructor(props: ControlPanelsContainerProps) {
     super(props);
-
-    this.removeAlert = this.removeAlert.bind(this);
     this.renderControl = this.renderControl.bind(this);
     this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: ControlPanelsContainerProps) {
     const {
       actions: { setControlValue },
     } = this.props;
@@ -107,32 +125,29 @@ class ControlPanelsContainer extends React.Component {
       ];
       Object.entries(this.props.controls).forEach(([controlName, control]) => {
         const { type, default: defaultValue } = control;
-        if (defaultValues.includes(type)) {
+        if (typeof type === 'string' && defaultValues.includes(type)) {
           setControlValue(controlName, defaultValue);
         }
       });
     }
   }
 
-  sectionsToRender() {
+  sectionsToRender(): ExpandedControlPanelSectionConfig[] {
     return sectionsToRender(
       this.props.form_data.viz_type,
       this.props.datasource_type,
     );
   }
 
-  sectionsToExpand(sections) {
+  sectionsToExpand(sections: ControlPanelSectionConfig[]) {
     return sections.reduce(
-      (acc, cur) => (cur.expanded ? [...acc, cur.label] : acc),
-      [],
+      (acc, section) =>
+        section.expanded ? [...acc, String(section.label)] : acc,
+      [] as string[],
     );
   }
 
-  removeAlert() {
-    this.props.actions.removeControlPanelAlert();
-  }
-
-  renderControl({ name, config }) {
+  renderControl({ name, config }: CustomControlItem) {
     const { actions, controls, form_data: formData } = this.props;
     const { visibility } = config;
 
@@ -144,11 +159,9 @@ class ControlPanelsContainer extends React.Component {
       ...controls[name],
       name,
     };
-    const {
-      validationErrors,
-      provideFormDataToProps,
-      ...restProps
-    } = controlData;
+    const { validationErrors, ...restProps } = controlData as ControlState & {
+      validationErrors?: any[];
+    };
 
     // if visibility check says the config is not visible, don't render it
     if (visibility && !visibility.call(config, this.props, controlData)) {
@@ -160,30 +173,41 @@ class ControlPanelsContainer extends React.Component {
         name={name}
         validationErrors={validationErrors}
         actions={actions}
-        formData={provideFormDataToProps ? formData : null}
-        datasource={formData?.datasource}
+        controls={controls}
+        formData={formData}
         {...restProps}
       />
     );
   }
 
-  renderControlPanelSection(section) {
+  renderControlPanelSection(section: ExpandedControlPanelSectionConfig) {
     const { controls } = this.props;
     const { label, description } = section;
 
     const hasErrors = section.controlSetRows.some(rows =>
-      rows.some(
-        s =>
-          controls[s] &&
-          controls[s].validationErrors &&
-          controls[s].validationErrors.length > 0,
-      ),
+      rows.some(item => {
+        const controlName =
+          typeof item === 'string'
+            ? item
+            : item && 'name' in item
+            ? item.name
+            : null;
+        return (
+          controlName &&
+          controlName in controls &&
+          controls[controlName].validationErrors &&
+          controls[controlName].validationErrors.length > 0
+        );
+      }),
     );
     const PanelHeader = () => (
       <span>
         <span>{label}</span>{' '}
         {description && (
-          <InfoTooltipWithTrigger label={label} tooltip={description} />
+          <InfoTooltipWithTrigger
+            label={label as string}
+            tooltip={description as string}
+          />
         )}
         {hasErrors && (
           <InfoTooltipWithTrigger
@@ -199,7 +223,7 @@ class ControlPanelsContainer extends React.Component {
       <Collapse.Panel
         className="control-panel-section"
         header={PanelHeader()}
-        key={section.label}
+        key={String(section.label)}
       >
         {section.controlSetRows.map((controlSets, i) => {
           const renderedControls = controlSets
@@ -229,7 +253,6 @@ class ControlPanelsContainer extends React.Component {
           return (
             <ControlRow
               key={`controlsetrow-${i}`}
-              className="control-row"
               controls={renderedControls}
             />
           );
@@ -247,8 +270,8 @@ class ControlPanelsContainer extends React.Component {
       return <Loading />;
     }
 
-    const querySectionsToRender = [];
-    const displaySectionsToRender = [];
+    const querySectionsToRender: ExpandedControlPanelSectionConfig[] = [];
+    const displaySectionsToRender: ExpandedControlPanelSectionConfig[] = [];
     this.sectionsToRender().forEach(section => {
       // if at least one control in the section is not `renderTrigger`
       // or asks to be displayed at the Data tab
@@ -258,6 +281,7 @@ class ControlPanelsContainer extends React.Component {
           rows.some(
             control =>
               control &&
+              'config' in control &&
               control.config &&
               (!control.config.renderTrigger ||
                 control.config.tabOverride === 'data'),
@@ -277,14 +301,6 @@ class ControlPanelsContainer extends React.Component {
     );
     return (
       <Styles>
-        {this.props.alert && (
-          <Alert
-            type="warning"
-            message={this.props.alert}
-            closable
-            onClose={this.removeAlert}
-          />
-        )}
         <ControlPanelsTabs
           id="controlSections"
           data-test="control-tabs"
@@ -318,26 +334,19 @@ class ControlPanelsContainer extends React.Component {
   }
 }
 
-ControlPanelsContainer.propTypes = propTypes;
-
-function mapStateToProps({ explore }) {
-  return {
-    alert: explore.controlPanelAlert,
-    isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
-    controls: explore.controls,
-    exploreState: explore,
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(exploreActions, dispatch),
-  };
-}
-
 export { ControlPanelsContainer };
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
+  function mapStateToProps({ explore }: InitialExploreState) {
+    return {
+      isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
+      controls: explore.controls,
+      exploreState: explore,
+    };
+  },
+  function mapDispatchToProps(dispatch) {
+    return {
+      actions: bindActionCreators(exploreActions, dispatch),
+    };
+  },
 )(ControlPanelsContainer);
diff --git a/superset-frontend/src/explore/components/ControlRow.jsx b/superset-frontend/src/explore/components/ControlRow.tsx
similarity index 76%
rename from superset-frontend/src/explore/components/ControlRow.jsx
rename to superset-frontend/src/explore/components/ControlRow.tsx
index 47a0a70de4b1..5574af0ee723 100644
--- a/superset-frontend/src/explore/components/ControlRow.jsx
+++ b/superset-frontend/src/explore/components/ControlRow.tsx
@@ -16,20 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ExpandedControlItem } from '@superset-ui/chart-controls';
 import React from 'react';
-import PropTypes from 'prop-types';
 
 const NUM_COLUMNS = 12;
 
-const propTypes = {
-  controls: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-function ControlSetRow(props) {
-  const colSize = NUM_COLUMNS / props.controls.length;
+export default function ControlRow({
+  controls,
+}: {
+  controls: ExpandedControlItem[];
+}) {
+  const colSize = NUM_COLUMNS / controls.length;
   return (
     <div className="row space-1">
-      {props.controls.map((control, i) => (
+      {controls.map((control, i) => (
         <div className={`col-lg-${colSize} col-xs-12`} key={i}>
           {control}
         </div>
@@ -37,6 +37,3 @@ function ControlSetRow(props) {
     </div>
   );
 }
-
-ControlSetRow.propTypes = propTypes;
-export default ControlSetRow;
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 71d163aa7265..cd72ac7214cb 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -222,10 +222,7 @@ function ExploreViewContainer(props) {
   }
 
   function onQuery() {
-    // remove alerts when query
-    props.actions.removeControlPanelAlert();
     props.actions.triggerQuery(true, props.chart.id);
-
     addHistory();
   }
 
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
index 0e84bc3ee7b3..60b4c501d018 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
@@ -165,16 +165,22 @@ const IconWrapper = styled.span`
   }
 `;
 
-interface DateFilterLabelProps {
+interface DateFilterControlProps {
   name: string;
   onChange: (timeRange: string) => void;
   value?: string;
   endpoints?: TimeRangeEndpoints;
   datasource?: string;
+  formData?: { datasource: string };
 }
 
-export default function DateFilterControl(props: DateFilterLabelProps) {
-  const { value = 'Last week', endpoints, onChange, datasource } = props;
+export default function DateFilterControl(props: DateFilterControlProps) {
+  const {
+    value = 'Last week',
+    endpoints,
+    onChange,
+    formData: { datasource } = {},
+  } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index dfbfd21f567f..a133b51f16ef 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -355,8 +355,8 @@ export const controls = {
         "using the engine's local timezone. Note one can explicitly set the timezone " +
         'per the ISO 8601 format if specifying either the start and/or end time.',
     ),
-    mapStateToProps: state => ({
-      endpoints: state.form_data ? state.form_data.time_range_endpoints : null,
+    mapStateToProps: ({ form_data }) => ({
+      endpoints: form_data?.time_range_endpoints,
     }),
   },
 
@@ -474,7 +474,6 @@ export const controls = {
       savedMetrics: state.datasource ? state.datasource.metrics : [],
       datasource: state.datasource,
     }),
-    provideFormDataToProps: true,
   },
 
   color_scheme: {
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index 307672738975..aa79e8243050 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -85,12 +85,6 @@ export default function exploreReducer(state = {}, action) {
         datasources: action.datasources,
       };
     },
-    [actions.REMOVE_CONTROL_PANEL_ALERT]() {
-      return {
-        ...state,
-        controlPanelAlert: null,
-      };
-    },
     [actions.SET_FIELD_VALUE]() {
       const new_form_data = state.form_data;
       const { controlName, value, validationErrors } = action;
diff --git a/superset-frontend/src/explore/reducers/getInitialState.js b/superset-frontend/src/explore/reducers/getInitialState.ts
similarity index 79%
rename from superset-frontend/src/explore/reducers/getInitialState.js
rename to superset-frontend/src/explore/reducers/getInitialState.ts
index 07743401da15..632be593f94f 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.js
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -25,8 +25,26 @@ import {
   getFormDataFromControls,
   applyMapStateToPropsToControl,
 } from '../controlUtils';
+import { Datasource, DatasourceType, JsonObject, QueryFormData } from '@superset-ui/core';
+import { Slice } from 'src/types/Chart';
+import { CommonBootstrapData } from 'src/types/bootstrapTypes';
 
-export default function getInitialState(bootstrapData) {
+export interface ExlorePageBootstrapData extends JsonObject {
+  can_add: boolean;
+  can_download: boolean;
+  can_overwrite: boolean;
+  datasource: Datasource;
+  form_data: QueryFormData;
+  datasource_id: number;
+  datasource_type: DatasourceType;
+  slice: Slice | null;
+  standalone: boolean;
+  user_id: number;
+  forced_height: string | null;
+  common: CommonBootstrapData;
+}
+
+export default function getInitialState(bootstrapData: ExlorePageBootstrapData) {
   const { form_data: rawFormData } = bootstrapData;
   const { slice } = bootstrapData;
   const sliceName = slice ? slice.slice_name : null;
@@ -41,6 +59,7 @@ export default function getInitialState(bootstrapData) {
     filterColumnOpts: [],
     isDatasourceMetaLoading: false,
     isStarred: false,
+    controls: {},
   };
   const controls = getControlsState(bootstrappedState, rawFormData);
   bootstrappedState.controls = controls;
@@ -88,3 +107,5 @@ export default function getInitialState(bootstrapData) {
     ),
   };
 }
+
+export type InitialExploreState = ReturnType<typeof getInitialState>;
diff --git a/superset-frontend/src/types/Chart.ts b/superset-frontend/src/types/Chart.ts
index cf78dab43eb8..a2e9f7dbb516 100644
--- a/superset-frontend/src/types/Chart.ts
+++ b/superset-frontend/src/types/Chart.ts
@@ -21,6 +21,7 @@
  * The Chart model as returned from the API
  */
 
+import { QueryFormData } from '@superset-ui/core';
 import Owner from './Owner';
 
 export interface Chart {
@@ -45,7 +46,7 @@ export type Slice = {
   slice_name: string;
   description: string | null;
   cache_timeout: number | null;
-  url?: string;
+  form_data: QueryFormData;
 };
 
 export default Chart;
diff --git a/superset-frontend/src/types/bootstrapTypes.ts b/superset-frontend/src/types/bootstrapTypes.ts
index cb8fb1ef31a4..7ef7caaab482 100644
--- a/superset-frontend/src/types/bootstrapTypes.ts
+++ b/superset-frontend/src/types/bootstrapTypes.ts
@@ -1,3 +1,5 @@
+import { JsonObject, Locale } from '@superset-ui/core';
+
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -42,3 +44,10 @@ export type Dashboard = {
   creator?: string;
   creator_url?: string;
 };
+
+export interface CommonBootstrapData {
+  flash_messages: string[][];
+  conf: JsonObject;
+  locale: Locale;
+  feature_flags: Record<string, boolean>;
+}

From 2f00a4f7166f9d228c0a89ac51d5cf509193ba24 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Thu, 18 Feb 2021 08:54:13 -1000
Subject: [PATCH 02/18] Fix lint errors

---
 superset-frontend/.eslintrc.js                |  1 +
 superset-frontend/src/explore/controls.jsx    |  4 ++--
 .../src/explore/reducers/getInitialState.ts   | 23 ++++++++++++-------
 superset-frontend/src/types/Chart.ts          |  2 +-
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/.eslintrc.js b/superset-frontend/.eslintrc.js
index 469709528089..0d9531aa951b 100644
--- a/superset-frontend/.eslintrc.js
+++ b/superset-frontend/.eslintrc.js
@@ -226,6 +226,7 @@ module.exports = {
     'no-mixed-operators': 0,
     'no-multi-assign': 0,
     'no-multi-spaces': 0,
+    'no-nested-ternary': 0,
     'no-prototype-builtins': 0,
     'no-restricted-properties': 0,
     'no-restricted-imports': [
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index a133b51f16ef..659da282600b 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -355,8 +355,8 @@ export const controls = {
         "using the engine's local timezone. Note one can explicitly set the timezone " +
         'per the ISO 8601 format if specifying either the start and/or end time.',
     ),
-    mapStateToProps: ({ form_data }) => ({
-      endpoints: form_data?.time_range_endpoints,
+    mapStateToProps: ({ form_data: formData }) => ({
+      endpoints: formData?.time_range_endpoints,
     }),
   },
 
diff --git a/superset-frontend/src/explore/reducers/getInitialState.ts b/superset-frontend/src/explore/reducers/getInitialState.ts
index 632be593f94f..7979395bcaed 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.ts
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -17,17 +17,22 @@
  * under the License.
  */
 import shortid from 'shortid';
+import {
+  Datasource,
+  DatasourceType,
+  JsonObject,
+  QueryFormData,
+} from '@superset-ui/core';
+import { Slice } from 'src/types/Chart';
+import { CommonBootstrapData } from 'src/types/bootstrapTypes';
 
-import getToastsFromPyFlashMessages from '../../messageToasts/utils/getToastsFromPyFlashMessages';
-import { getChartKey } from '../exploreUtils';
-import { getControlsState } from '../store';
+import getToastsFromPyFlashMessages from 'src/messageToasts/utils/getToastsFromPyFlashMessages';
+import { getChartKey } from 'src/explore/exploreUtils';
+import { getControlsState } from 'src/explore/store';
 import {
   getFormDataFromControls,
   applyMapStateToPropsToControl,
-} from '../controlUtils';
-import { Datasource, DatasourceType, JsonObject, QueryFormData } from '@superset-ui/core';
-import { Slice } from 'src/types/Chart';
-import { CommonBootstrapData } from 'src/types/bootstrapTypes';
+} from 'src/explore/controlUtils';
 
 export interface ExlorePageBootstrapData extends JsonObject {
   can_add: boolean;
@@ -44,7 +49,9 @@ export interface ExlorePageBootstrapData extends JsonObject {
   common: CommonBootstrapData;
 }
 
-export default function getInitialState(bootstrapData: ExlorePageBootstrapData) {
+export default function getInitialState(
+  bootstrapData: ExlorePageBootstrapData,
+) {
   const { form_data: rawFormData } = bootstrapData;
   const { slice } = bootstrapData;
   const sliceName = slice ? slice.slice_name : null;
diff --git a/superset-frontend/src/types/Chart.ts b/superset-frontend/src/types/Chart.ts
index a2e9f7dbb516..02b9025c8387 100644
--- a/superset-frontend/src/types/Chart.ts
+++ b/superset-frontend/src/types/Chart.ts
@@ -46,7 +46,7 @@ export type Slice = {
   slice_name: string;
   description: string | null;
   cache_timeout: number | null;
-  form_data: QueryFormData;
+  form_data?: QueryFormData;
 };
 
 export default Chart;

From d01a7b9244da4017aee225ff38ad5be94f6650c9 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Thu, 18 Feb 2021 09:18:05 -1000
Subject: [PATCH 03/18] keep provideFormDataToProps to avoid re-render

---
 superset-frontend/src/explore/components/Control.tsx   |  1 -
 .../src/explore/components/ControlPanelsContainer.tsx  | 10 +++++++---
 superset-frontend/src/explore/controls.jsx             |  2 ++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 6b1e7fa8b885..119023e7bad8 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -35,7 +35,6 @@ export type ControlProps = {
   tooltipOnClick?: () => ReactNode;
   places?: number;
   rightNode?: ReactNode;
-  controls?: ControlStateMapping;
   formData?: QueryFormData | null;
   value?: JsonValue;
   validationErrors?: any[];
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 9afd04a3c77d..6cea44e2ff02 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -159,8 +159,13 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
       ...controls[name],
       name,
     };
-    const { validationErrors, ...restProps } = controlData as ControlState & {
+    const {
+      validationErrors,
+      provideFormDataToProps,
+      ...restProps
+    } = controlData as ControlState & {
       validationErrors?: any[];
+      provideFormDataToProps?: boolean;
     };
 
     // if visibility check says the config is not visible, don't render it
@@ -173,8 +178,7 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
         name={name}
         validationErrors={validationErrors}
         actions={actions}
-        controls={controls}
-        formData={formData}
+        formData={provideFormDataToProps ? formData : null}
         {...restProps}
       />
     );
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index 659da282600b..74e8dcaaf152 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -355,6 +355,7 @@ export const controls = {
         "using the engine's local timezone. Note one can explicitly set the timezone " +
         'per the ISO 8601 format if specifying either the start and/or end time.',
     ),
+    provideFormDataToProps: true,
     mapStateToProps: ({ form_data: formData }) => ({
       endpoints: formData?.time_range_endpoints,
     }),
@@ -467,6 +468,7 @@ export const controls = {
     label: t('Filters'),
     default: null,
     description: '',
+    provideFormDataToProps: true,
     mapStateToProps: state => ({
       columns: state.datasource
         ? state.datasource.columns.filter(c => c.filterable)

From 187bcafb77e377a3a7672619b4a29dec0f05cae1 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 19 Feb 2021 09:22:49 -1000
Subject: [PATCH 04/18] Fix lint errors

---
 superset-frontend/.eslintrc.js                       | 1 +
 superset-frontend/src/explore/components/Control.tsx | 2 +-
 superset-frontend/src/explore/controls.jsx           | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/.eslintrc.js b/superset-frontend/.eslintrc.js
index 0d9531aa951b..5b79778ef525 100644
--- a/superset-frontend/.eslintrc.js
+++ b/superset-frontend/.eslintrc.js
@@ -104,6 +104,7 @@ module.exports = {
         'no-mixed-operators': 0,
         'no-multi-assign': 0,
         'no-multi-spaces': 0,
+        'no-nested-ternary': 0,
         'no-prototype-builtins': 0,
         'no-restricted-properties': 0,
         'no-restricted-imports': [
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 119023e7bad8..f1b6925bd693 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { ReactNode } from 'react';
-import { ControlStateMapping, ControlType } from '@superset-ui/chart-controls';
+import { ControlType } from '@superset-ui/chart-controls';
 import { JsonValue, QueryFormData } from '@superset-ui/core';
 import { ExploreActions } from '../actions/exploreActions';
 import controlMap from './controls';
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index 74e8dcaaf152..ba4378560050 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -357,6 +357,7 @@ export const controls = {
     ),
     provideFormDataToProps: true,
     mapStateToProps: ({ form_data: formData }) => ({
+      // eslint-disable-next-line camelcase
       endpoints: formData?.time_range_endpoints,
     }),
   },

From dd8f2cc53cc910405287bca31ccadbcc0704f889 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 19 Feb 2021 14:01:39 -1000
Subject: [PATCH 05/18] Fix many typing errors

---
 .../components/ControlPanelsContainer.tsx     | 38 ++++----
 .../DateFilterControl/DateFilterControl.tsx   | 27 ++----
 .../FilterControl/AdhocFilterControl.jsx      | 16 +---
 .../components/controls/TextControl.tsx       | 88 ++++++++-----------
 superset-frontend/src/explore/controls.jsx    |  1 -
 5 files changed, 65 insertions(+), 105 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 6cea44e2ff02..011587785e57 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -114,21 +114,21 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
     const {
       actions: { setControlValue },
     } = this.props;
+    // reset controls using column info (metric, group by, sort by, filter, etc.)
+    // to default values when datasource changes.
     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 (typeof type === 'string' && defaultValues.includes(type)) {
-          setControlValue(controlName, defaultValue);
-        }
-      });
+      Object.entries(this.props.controls).forEach(
+        ([controlName, controlState]) => {
+          if (
+            // for direct column select controls
+            controlState.valueKey === 'column_name' ||
+            // for all other controls
+            'columns' in controlState
+          ) {
+            setControlValue(controlName, controlState.default);
+          }
+        },
+      );
     }
   }
 
@@ -148,7 +148,7 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
   }
 
   renderControl({ name, config }: CustomControlItem) {
-    const { actions, controls, form_data: formData } = this.props;
+    const { actions, controls } = this.props;
     const { visibility } = config;
 
     // If the control item is not an object, we have to look up the control data from
@@ -159,13 +159,8 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
       ...controls[name],
       name,
     };
-    const {
-      validationErrors,
-      provideFormDataToProps,
-      ...restProps
-    } = controlData as ControlState & {
+    const { validationErrors, ...restProps } = controlData as ControlState & {
       validationErrors?: any[];
-      provideFormDataToProps?: boolean;
     };
 
     // if visibility check says the config is not visible, don't render it
@@ -178,7 +173,6 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
         name={name}
         validationErrors={validationErrors}
         actions={actions}
-        formData={provideFormDataToProps ? formData : null}
         {...restProps}
       />
     );
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
index 60b4c501d018..9ccc404e08bf 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
@@ -25,6 +25,7 @@ import {
   t,
   TimeRangeEndpoints,
 } from '@superset-ui/core';
+import { DatasourceMeta } from '@superset-ui/chart-controls';
 import {
   buildTimeRangeString,
   formatTimeRange,
@@ -170,29 +171,21 @@ interface DateFilterControlProps {
   onChange: (timeRange: string) => void;
   value?: string;
   endpoints?: TimeRangeEndpoints;
-  datasource?: string;
-  formData?: { datasource: string };
+  datasource?: DatasourceMeta;
 }
 
 export default function DateFilterControl(props: DateFilterControlProps) {
-  const {
-    value = 'Last week',
-    endpoints,
-    onChange,
-    formData: { datasource } = {},
-  } = props;
+  const { value = 'Last week', endpoints, onChange, datasource } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
   const [frame, setFrame] = useState<FrameType>(guessFrame(value));
-  const [isMounted, setIsMounted] = useState<boolean>(false);
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
   const [tooltipTitle, setTooltipTitle] = useState<string>(value);
 
   useEffect(() => {
-    if (!isMounted) setIsMounted(true);
     fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
       if (error) {
         setEvalResponse(error || '');
@@ -227,12 +220,10 @@ export default function DateFilterControl(props: DateFilterControlProps) {
   }, [value]);
 
   useEffect(() => {
-    if (isMounted) {
-      onChange('Last week');
-      setTimeRangeValue('Last week');
-      setFrame(guessFrame('Last week'));
-    }
-  }, [datasource]);
+    onChange('Last week');
+    setTimeRangeValue('Last week');
+    setFrame(guessFrame('Last week'));
+  }, [datasource?.id, onChange]);
 
   useEffect(() => {
     fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
@@ -271,7 +262,7 @@ export default function DateFilterControl(props: DateFilterControlProps) {
     }
   };
 
-  function onFrame(option: SelectOptionType) {
+  function onChangeFrame(option: SelectOptionType) {
     if (option.value === 'No filter') {
       setTimeRangeValue('No filter');
     }
@@ -284,7 +275,7 @@ export default function DateFilterControl(props: DateFilterControlProps) {
       <Select
         options={FRAME_OPTIONS}
         value={FRAME_OPTIONS.filter(({ value }) => value === frame)}
-        onChange={onFrame}
+        onChange={onChangeFrame}
         className="frame-dropdown"
       />
       {frame !== 'No filter' && <Divider />}
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
index 9ae816a5a82b..308e326e6da8 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
@@ -46,12 +46,7 @@ const propTypes = {
   datasource: PropTypes.object,
   columns: PropTypes.arrayOf(columnType),
   savedMetrics: PropTypes.arrayOf(savedMetricType),
-  formData: PropTypes.shape({
-    metric: PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
-    metrics: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
-    ),
-  }),
+  selectedMetrics: PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
   isLoading: PropTypes.bool,
 };
 
@@ -60,7 +55,7 @@ const defaultProps = {
   onChange: () => {},
   columns: [],
   savedMetrics: [],
-  formData: {},
+  selectedMetrics: [],
 };
 
 function isDictionaryForAdhocFilter(value) {
@@ -141,10 +136,7 @@ class AdhocFilterControl extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      this.props.columns !== nextProps.columns ||
-      this.props.formData !== nextProps.formData
-    ) {
+    if (this.props.columns !== nextProps.columns) {
       this.setState({ options: this.optionsForSelect(nextProps) });
     }
     if (this.props.value !== nextProps.value) {
@@ -270,7 +262,7 @@ class AdhocFilterControl extends React.Component {
   optionsForSelect(props) {
     const options = [
       ...props.columns,
-      ...[...(props.formData?.metrics || []), props.formData?.metric].map(
+      ...[...(props.selectedMetrics || [])].map(
         metric =>
           metric &&
           (typeof metric === 'string'
diff --git a/superset-frontend/src/explore/components/controls/TextControl.tsx b/superset-frontend/src/explore/components/controls/TextControl.tsx
index 43c8c77d233a..93c69e5a8291 100644
--- a/superset-frontend/src/explore/components/controls/TextControl.tsx
+++ b/superset-frontend/src/explore/components/controls/TextControl.tsx
@@ -17,71 +17,55 @@
  * under the License.
  */
 import React from 'react';
-import { FormGroup, FormControl } from 'react-bootstrap';
+import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap';
 import { legacyValidateNumber, legacyValidateInteger } from '@superset-ui/core';
 import debounce from 'lodash/debounce';
-import ControlHeader from '../ControlHeader';
+import { FAST_DEBOUNCE } from 'src/constants';
+import ControlHeader from 'src/explore/components/ControlHeader';
 
-interface TextControlProps {
+type InputValueType = string | number;
+
+export interface TextControlProps<T extends InputValueType = InputValueType> {
   disabled?: boolean;
   isFloat?: boolean;
   isInt?: boolean;
-  onChange?: (value: any, errors: any) => {};
+  onChange?: (value: T, errors: any) => {};
   onFocus?: () => {};
   placeholder?: string;
-  value?: string | number;
+  value?: T | null;
   controlId?: string;
   renderTrigger?: boolean;
-  datasource?: string;
 }
 
-interface TextControlState {
+export interface TextControlState {
   controlId: string;
-  currentDatasource?: string;
-  value?: string | number;
+  value: string;
 }
 
 const generateControlId = (controlId?: string) =>
   `formInlineName_${controlId ?? (Math.random() * 1000000).toFixed()}`;
 
-export default class TextControl extends React.Component<
-  TextControlProps,
-  TextControlState
-> {
-  debouncedOnChange = debounce((inputValue: string) => {
-    this.onChange(inputValue);
-  }, 500);
+const safeStringify = (value?: InputValueType | null) =>
+  value == null ? '' : String(value);
 
-  static getDerivedStateFromProps(
-    props: TextControlProps,
-    state: TextControlState,
-  ) {
-    // reset value when datasource changes
-    // props.datasource and props.value don't update in the same re-render,
-    // so we need to synchronize them to update the state with correct values
-    if (
-      props.value !== state.value &&
-      props.datasource !== state.currentDatasource
-    ) {
-      return { value: props.value, currentDatasource: props.datasource };
-    }
-    return null;
-  }
+export default class TextControl<
+  T extends InputValueType = InputValueType
+> extends React.Component<TextControlProps<T>, TextControlState> {
+  initialValue?: TextControlProps['value'];
 
-  constructor(props: TextControlProps) {
+  constructor(props: TextControlProps<T>) {
     super(props);
-
-    // if there's no control id provided, generate a random
-    // number to prevent rendering elements with same ids
+    this.initialValue = props.value;
     this.state = {
+      // if there's no control id provided, generate a random
+      // number to prevent rendering elements with same ids
       controlId: generateControlId(props.controlId),
-      value: props.value,
-      currentDatasource: props.datasource,
+      value: safeStringify(this.initialValue),
     };
   }
 
   onChange = (inputValue: string) => {
-    let parsedValue: string | number = inputValue;
+    let parsedValue: InputValueType = inputValue;
     // Validation & casting
     const errors = [];
     if (inputValue !== '' && this.props.isFloat) {
@@ -102,26 +86,26 @@ export default class TextControl extends React.Component<
         parsedValue = parseInt(inputValue, 10);
       }
     }
-    this.props.onChange?.(parsedValue, errors);
+    this.props.onChange?.(parsedValue as T, errors);
   };
 
-  onChangeWrapper = (event: any) => {
-    const { value } = event.target;
-    this.setState({ value });
+  debouncedOnChange = debounce((inputValue: string) => {
+    this.onChange(inputValue);
+  }, FAST_DEBOUNCE);
 
-    // use debounce when change takes effect immediately after user starts typing
-    const onChange = this.props.renderTrigger
-      ? this.debouncedOnChange
-      : this.onChange;
-    onChange(value);
+  onChangeWrapper: FormControlProps['onChange'] = event => {
+    const { value } = event.target as HTMLInputElement;
+    this.setState({ value }, () => {
+      this.debouncedOnChange(value);
+    });
   };
 
   render = () => {
-    const { value: rawValue } = this.state;
-    const value =
-      typeof rawValue !== 'undefined' && rawValue !== null
-        ? rawValue.toString()
-        : '';
+    let { value } = this.state;
+    if (this.initialValue !== this.props.value) {
+      this.initialValue = this.props.value;
+      value = safeStringify(this.props.value);
+    }
     return (
       <div>
         <ControlHeader {...this.props} />
diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index ba4378560050..ac7c1c748fdf 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -355,7 +355,6 @@ export const controls = {
         "using the engine's local timezone. Note one can explicitly set the timezone " +
         'per the ISO 8601 format if specifying either the start and/or end time.',
     ),
-    provideFormDataToProps: true,
     mapStateToProps: ({ form_data: formData }) => ({
       // eslint-disable-next-line camelcase
       endpoints: formData?.time_range_endpoints,

From aa6be68669374bf71c75fa8b0e83e98f3463041e Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Fri, 19 Feb 2021 15:54:39 -1000
Subject: [PATCH 06/18] Clean up

---
 superset-frontend/src/explore/controls.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/explore/controls.jsx b/superset-frontend/src/explore/controls.jsx
index ac7c1c748fdf..c37f5e72bb81 100644
--- a/superset-frontend/src/explore/controls.jsx
+++ b/superset-frontend/src/explore/controls.jsx
@@ -468,7 +468,6 @@ export const controls = {
     label: t('Filters'),
     default: null,
     description: '',
-    provideFormDataToProps: true,
     mapStateToProps: state => ({
       columns: state.datasource
         ? state.datasource.columns.filter(c => c.filterable)

From 88eac59517601173d3cc85d812c5f72463796662 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 23 Feb 2021 15:44:49 -1000
Subject: [PATCH 07/18] Clean up dead import

---
 .../src/explore/components/ControlPanelsContainer.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 011587785e57..08918c6e1ce9 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -29,7 +29,6 @@ import {
 } from '@superset-ui/core';
 
 import Tabs from 'src/common/components/Tabs';
-import Alert from 'src/components/Alert';
 import Collapse from 'src/common/components/Collapse';
 import { PluginContext } from 'src/components/DynamicPlugins';
 import Loading from 'src/components/Loading';

From 25c509a0b66546c2c7742f4c1c8b6323a72163aa Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 23 Feb 2021 19:33:52 -1000
Subject: [PATCH 08/18] move getFormDataFromControls to ts

---
 ...ec.jsx => ControlPanelsContainer_spec.tsx} | 25 +++++++++-----
 .../components/ControlPanelsContainer.tsx     |  8 ++---
 .../controlUtils/getFormDataFromControls.ts   | 34 +++++++++++++++++++
 .../index.js}                                 | 13 ++-----
 4 files changed, 55 insertions(+), 25 deletions(-)
 rename superset-frontend/spec/javascripts/explore/components/{ControlPanelsContainer_spec.jsx => ControlPanelsContainer_spec.tsx} (81%)
 create mode 100644 superset-frontend/src/explore/controlUtils/getFormDataFromControls.ts
 rename superset-frontend/src/explore/{controlUtils.js => controlUtils/index.js} (95%)

diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
similarity index 81%
rename from superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.jsx
rename to superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
index 35de5b6c5b34..eb2d4bcd8f39 100644
--- a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
@@ -18,10 +18,17 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { getChartControlPanelRegistry, t } from '@superset-ui/core';
+import {
+  DatasourceType,
+  getChartControlPanelRegistry,
+  t,
+} from '@superset-ui/core';
 import { defaultControls } from 'src/explore/store';
 import { getFormDataFromControls } from 'src/explore/controlUtils';
-import { ControlPanelsContainer } from 'src/explore/components/ControlPanelsContainer';
+import {
+  ControlPanelsContainer,
+  ControlPanelsContainerProps,
+} from 'src/explore/components/ControlPanelsContainer';
 import Collapse from 'src/common/components/Collapse';
 
 describe('ControlPanelsContainer', () => {
@@ -77,15 +84,15 @@ describe('ControlPanelsContainer', () => {
     getChartControlPanelRegistry().remove('table');
   });
 
-  function getDefaultProps() {
+  function getDefaultProps(): ControlPanelsContainerProps {
+    const controls = defaultControls as ControlPanelsContainerProps['controls'];
     return {
-      datasource_type: 'table',
-      actions: {},
-      controls: defaultControls,
-      // Note: default viz_type is table
-      form_data: getFormDataFromControls(defaultControls),
+      datasource_type: DatasourceType.Table,
+      actions: {} as ControlPanelsContainerProps['actions'],
+      controls,
+      form_data: getFormDataFromControls(controls),
       isDatasourceMetaLoading: false,
-      exploreState: {},
+      exploreState: {} as ControlPanelsContainerProps['exploreState'],
     };
   }
 
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 08918c6e1ce9..d1541a90c4c5 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -45,9 +45,8 @@ import { sectionsToRender } from '../controlUtils';
 import { ExploreActions, exploreActions } from '../actions/exploreActions';
 import { InitialExploreState } from '../reducers/getInitialState';
 
-type ControlPanelsContainerProps = {
+export type ControlPanelsContainerProps = {
   actions: ExploreActions;
-  alert: string;
   datasource_type: DatasourceType;
   exploreState: Record<string, any>;
   controls: Record<string, ControlState>;
@@ -55,7 +54,7 @@ type ControlPanelsContainerProps = {
   isDatasourceMetaLoading: boolean;
 };
 
-type ExpandedControlPanelSectionConfig = Omit<
+export type ExpandedControlPanelSectionConfig = Omit<
   ControlPanelSectionConfig,
   'controlSetRows'
 > & {
@@ -68,9 +67,6 @@ const Styles = styled.div`
   overflow: auto;
   overflow-x: visible;
   overflow-y: auto;
-  .remove-alert {
-    cursor: pointer;
-  }
   #controlSections {
     min-height: 100%;
     overflow: visible;
diff --git a/superset-frontend/src/explore/controlUtils/getFormDataFromControls.ts b/superset-frontend/src/explore/controlUtils/getFormDataFromControls.ts
new file mode 100644
index 000000000000..f5ffa523c359
--- /dev/null
+++ b/superset-frontend/src/explore/controlUtils/getFormDataFromControls.ts
@@ -0,0 +1,34 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { QueryFormData } from '@superset-ui/core';
+import { ControlStateMapping } from '@superset-ui/chart-controls';
+
+export function getFormDataFromControls(
+  controlsState: ControlStateMapping,
+): QueryFormData {
+  const formData: QueryFormData = {
+    viz_type: 'table',
+    datasource: '',
+  };
+  Object.keys(controlsState).forEach(controlName => {
+    const control = controlsState[controlName];
+    formData[controlName] = control.value;
+  });
+  return formData;
+}
diff --git a/superset-frontend/src/explore/controlUtils.js b/superset-frontend/src/explore/controlUtils/index.js
similarity index 95%
rename from superset-frontend/src/explore/controlUtils.js
rename to superset-frontend/src/explore/controlUtils/index.js
index ae6dcc7717d4..4e1f0ac6ccc2 100644
--- a/superset-frontend/src/explore/controlUtils.js
+++ b/superset-frontend/src/explore/controlUtils/index.js
@@ -19,16 +19,9 @@
 import memoizeOne from 'memoize-one';
 import { getChartControlPanelRegistry } from '@superset-ui/core';
 import { expandControlConfig } from '@superset-ui/chart-controls';
-import * as SECTIONS from './controlPanels/sections';
-
-export function getFormDataFromControls(controlsState) {
-  const formData = {};
-  Object.keys(controlsState).forEach(controlName => {
-    const control = controlsState[controlName];
-    formData[controlName] = control.value;
-  });
-  return formData;
-}
+import * as SECTIONS from '../controlPanels/sections';
+
+export * from './getFormDataFromControls';
 
 export function validateControl(control, processedState) {
   const { validators } = control;

From 0b1d30176ea08d038cac0d5b5c5bb91ccdf527ae Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 23 Feb 2021 19:37:34 -1000
Subject: [PATCH 09/18] Fix tests

---
 .../explore/components/ControlPanelsContainer_spec.tsx    | 8 ++++----
 .../src/explore/components/ControlPanelsContainer.tsx     | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
index eb2d4bcd8f39..9b2fe59f56f9 100644
--- a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
+++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
@@ -84,16 +84,16 @@ describe('ControlPanelsContainer', () => {
     getChartControlPanelRegistry().remove('table');
   });
 
-  function getDefaultProps(): ControlPanelsContainerProps {
+  function getDefaultProps() {
     const controls = defaultControls as ControlPanelsContainerProps['controls'];
     return {
       datasource_type: DatasourceType.Table,
-      actions: {} as ControlPanelsContainerProps['actions'],
+      actions: {},
       controls,
       form_data: getFormDataFromControls(controls),
       isDatasourceMetaLoading: false,
-      exploreState: {} as ControlPanelsContainerProps['exploreState'],
-    };
+      exploreState: {},
+    } as ControlPanelsContainerProps;
   }
 
   it('renders ControlPanelSections', () => {
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index d1541a90c4c5..73487f4df2ab 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -274,6 +274,7 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
           rows.some(
             control =>
               control &&
+              typeof control === 'object' &&
               'config' in control &&
               control.config &&
               (!control.config.renderTrigger ||

From 1901dde2e19db37a79e6c290f97529fadb4d83fa Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 23 Feb 2021 23:03:12 -1000
Subject: [PATCH 10/18] Fix time range filter value reset

---
 .../visualizations/pivot_table.test.js        |  2 +-
 superset-frontend/src/constants.ts            |  1 -
 .../DateFilterControl/DateFilterControl.tsx   | 25 ++++++++-----------
 .../FilterControl/AdhocFilterControl.jsx      |  4 ++-
 .../explore/{constants.js => constants.ts}    | 10 +++-----
 .../src/explore/reducers/exploreReducer.js    | 13 +++++++---
 6 files changed, 29 insertions(+), 26 deletions(-)
 rename superset-frontend/src/explore/{constants.js => constants.ts} (94%)

diff --git a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pivot_table.test.js b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pivot_table.test.js
index 1346b89bebef..14de08da7936 100644
--- a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pivot_table.test.js
+++ b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/pivot_table.test.js
@@ -28,7 +28,7 @@ describe('Visualization > Pivot Table', () => {
     adhoc_filters: [],
     groupby: ['name'],
     columns: ['state'],
-    row_limit: 50000,
+    row_limit: 5000,
     pandas_aggfunc: 'sum',
     pivot_margins: true,
     number_format: '.3s',
diff --git a/superset-frontend/src/constants.ts b/superset-frontend/src/constants.ts
index 0a7f156099c2..ad7683681b93 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 export const DATETIME_WITH_TIME_ZONE = 'YYYY-MM-DD HH:mm:ssZ';
-
 export const TIME_WITH_MS = 'HH:mm:ss.SSS';
 
 export const BOOL_TRUE_DISPLAY = 'True';
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
index 9ccc404e08bf..f15da37b5d15 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import rison from 'rison';
 import {
   SupersetClient,
@@ -39,6 +39,8 @@ import { Divider } from 'src/common/components';
 import Icon from 'src/components/Icon';
 import { Select } from 'src/components/Select';
 import { Tooltip } from 'src/common/components/Tooltip';
+import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
+
 import { SelectOptionType, FrameType } from './types';
 import {
   COMMON_RANGE_VALUES_SET,
@@ -175,11 +177,12 @@ interface DateFilterControlProps {
 }
 
 export default function DateFilterControl(props: DateFilterControlProps) {
-  const { value = 'Last week', endpoints, onChange, datasource } = props;
+  const { value = DEFAULT_TIME_RANGE, endpoints, onChange } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
-  const [frame, setFrame] = useState<FrameType>(guessFrame(value));
+  const guessedFrame = useMemo(() => guessFrame(value), [value]);
+  const [frame, setFrame] = useState<FrameType>(guessedFrame);
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
@@ -204,9 +207,9 @@ export default function DateFilterControl(props: DateFilterControlProps) {
           +--------------+------+----------+--------+----------+-----------+
         */
         if (
-          frame === 'Common' ||
-          frame === 'Calendar' ||
-          frame === 'No filter'
+          guessedFrame === 'Common' ||
+          guessedFrame === 'Calendar' ||
+          guessedFrame === 'No filter'
         ) {
           setActualTimeRange(value);
           setTooltipTitle(actualRange || '');
@@ -219,12 +222,6 @@ export default function DateFilterControl(props: DateFilterControlProps) {
     });
   }, [value]);
 
-  useEffect(() => {
-    onChange('Last week');
-    setTimeRangeValue('Last week');
-    setFrame(guessFrame('Last week'));
-  }, [datasource?.id, onChange]);
-
   useEffect(() => {
     fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
       if (error) {
@@ -244,13 +241,13 @@ export default function DateFilterControl(props: DateFilterControlProps) {
 
   function onOpen() {
     setTimeRangeValue(value);
-    setFrame(guessFrame(value));
+    setFrame(guessedFrame);
     setShow(true);
   }
 
   function onHide() {
     setTimeRangeValue(value);
-    setFrame(guessFrame(value));
+    setFrame(guessedFrame);
     setShow(false);
   }
 
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
index 308e326e6da8..1e6634968a1e 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
@@ -46,7 +46,9 @@ const propTypes = {
   datasource: PropTypes.object,
   columns: PropTypes.arrayOf(columnType),
   savedMetrics: PropTypes.arrayOf(savedMetricType),
-  selectedMetrics: PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
+  selectedMetrics: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
+  ),
   isLoading: PropTypes.bool,
 };
 
diff --git a/superset-frontend/src/explore/constants.js b/superset-frontend/src/explore/constants.ts
similarity index 94%
rename from superset-frontend/src/explore/constants.js
rename to superset-frontend/src/explore/constants.ts
index d9f083bf927c..06fa62c314c4 100644
--- a/superset-frontend/src/explore/constants.js
+++ b/superset-frontend/src/explore/constants.ts
@@ -55,12 +55,7 @@ export const HAVING_OPERATORS = [
   OPERATORS['>='],
   OPERATORS['<='],
 ];
-export const MULTI_OPERATORS = new Set([
-  OPERATORS.in,
-  OPERATORS['not in'],
-  OPERATORS.IN,
-  OPERATORS['NOT IN'],
-]);
+export const MULTI_OPERATORS = new Set([OPERATORS.IN, OPERATORS['NOT IN']]);
 // CUSTOM_OPERATORS will show operator in simple mode,
 // but will generate customized sqlExpression
 export const CUSTOM_OPERATORS = new Set([OPERATORS['LATEST PARTITION']]);
@@ -103,3 +98,6 @@ export const TIME_FILTER_MAP = {
   druid_time_origin: '__time_origin',
   granularity: '__granularity',
 };
+
+// TODO: make this configurable per Superset installation
+export const DEFAULT_TIME_RANGE = 'Last week';
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index aa79e8243050..d3bb6a814c79 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -18,13 +18,14 @@
  */
 /* eslint camelcase: 0 */
 import { DYNAMIC_PLUGIN_CONTROLS_READY } from 'src/chart/chartAction';
-import { getControlsState } from '../store';
+import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
+import { getControlsState } from 'src/explore/store';
 import {
   getControlConfig,
   getFormDataFromControls,
   getControlStateFromControlConfig,
-} from '../controlUtils';
-import * as actions from '../actions/exploreActions';
+} from 'src/explore/controlUtils';
+import * as actions from 'src/explore/actions/exploreActions';
 
 export default function exploreReducer(state = {}, action) {
   const actionHandlers = {
@@ -61,6 +62,12 @@ export default function exploreReducer(state = {}, action) {
           delete newFormData.time_grain_sqla;
         }
       }
+      if (
+        action.datasource.id !== state.datasource.id ||
+        action.datasource.type !== state.datasource.type
+      ) {
+        newFormData.time_range = DEFAULT_TIME_RANGE;
+      }
       const newState = {
         ...state,
         datasource: action.datasource,

From fd188404512a48cd5c457c83be400a7da7549865 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Tue, 23 Feb 2021 23:23:13 -1000
Subject: [PATCH 11/18] more clean up for #12782

---
 .../src/explore/components/controls/CollectionControl.jsx   | 6 ------
 .../controls/MetricControl/AdhocMetricEditPopover.jsx       | 3 ---
 .../components/controls/MetricControl/AdhocMetricOption.jsx | 2 --
 .../controls/MetricControl/AdhocMetricPopoverTrigger.tsx    | 2 --
 .../controls/MetricControl/MetricDefinitionValue.jsx        | 3 ---
 5 files changed, 16 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/CollectionControl.jsx b/superset-frontend/src/explore/components/controls/CollectionControl.jsx
index 46b096605f16..198df6d5cc51 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl.jsx
@@ -69,12 +69,6 @@ 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);
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx
index 4d2e3a87c7eb..81405e57c216 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover.jsx
@@ -123,9 +123,6 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
         adhocMetricLabel: this.state.adhocMetric?.getDefaultLabel(),
       });
     }
-    if (prevProps.datasource !== this.props.datasource) {
-      this.props.onChange(null);
-    }
   }
 
   componentWillUnmount() {
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx
index 7d3e4c17eba4..bc5a78175666 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx
@@ -60,7 +60,6 @@ class AdhocMetricOption extends React.PureComponent {
       onMoveLabel,
       onDropLabel,
       index,
-      datasource,
     } = this.props;
 
     return (
@@ -70,7 +69,6 @@ class AdhocMetricOption extends React.PureComponent {
         columns={columns}
         savedMetricsOptions={savedMetricsOptions}
         savedMetric={savedMetric}
-        datasource={datasource}
         datasourceType={datasourceType}
       >
         <OptionControlLabel
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
index 9964861d6cef..dd7b4bf89454 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
@@ -33,7 +33,6 @@ export type AdhocMetricPopoverTriggerProps = {
   savedMetricsOptions: savedMetricType[];
   savedMetric: savedMetricType;
   datasourceType: string;
-  datasource: string;
   children: ReactNode;
   createNew?: boolean;
 };
@@ -160,7 +159,6 @@ 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}
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
index 6ef84a3c365c..3674e6acd434 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
@@ -38,7 +38,6 @@ const propTypes = {
   savedMetricsOptions: PropTypes.arrayOf(savedMetricType),
   multi: PropTypes.bool,
   datasourceType: PropTypes.string,
-  datasource: PropTypes.string,
 };
 
 export default function MetricDefinitionValue({
@@ -52,7 +51,6 @@ export default function MetricDefinitionValue({
   onMoveLabel,
   onDropLabel,
   index,
-  datasource,
 }) {
   const getSavedMetricByName = metricName =>
     savedMetrics.find(metric => metric.metric_name === metricName);
@@ -79,7 +77,6 @@ export default function MetricDefinitionValue({
       onDropLabel,
       index,
       savedMetric: savedMetric ?? {},
-      datasource,
     };
 
     return <AdhocMetricOption {...metricOptionProps} />;

From 4a3b616b2f2a126b12a24a982163c92b3558b985 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 09:04:44 -1000
Subject: [PATCH 12/18] Use reducer to reset control values

---
 .../components/ControlPanelsContainer.tsx     | 26 ++-----------------
 .../MetricControl/MetricDefinitionValue.jsx   |  6 ++---
 .../controls/MetricControl/MetricsControl.jsx |  8 +++---
 .../src/explore/reducers/exploreReducer.js    | 18 +++++++++++++
 .../src/explore/reducers/getInitialState.ts   | 10 ++++---
 5 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 73487f4df2ab..a6ad514291ab 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -43,7 +43,7 @@ import ControlRow from './ControlRow';
 import Control from './Control';
 import { sectionsToRender } from '../controlUtils';
 import { ExploreActions, exploreActions } from '../actions/exploreActions';
-import { InitialExploreState } from '../reducers/getInitialState';
+import { ExploreState } from '../reducers/getInitialState';
 
 export type ControlPanelsContainerProps = {
   actions: ExploreActions;
@@ -105,28 +105,6 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
     this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
   }
 
-  componentDidUpdate(prevProps: ControlPanelsContainerProps) {
-    const {
-      actions: { setControlValue },
-    } = this.props;
-    // reset controls using column info (metric, group by, sort by, filter, etc.)
-    // to default values when datasource changes.
-    if (this.props.form_data.datasource !== prevProps.form_data.datasource) {
-      Object.entries(this.props.controls).forEach(
-        ([controlName, controlState]) => {
-          if (
-            // for direct column select controls
-            controlState.valueKey === 'column_name' ||
-            // for all other controls
-            'columns' in controlState
-          ) {
-            setControlValue(controlName, controlState.default);
-          }
-        },
-      );
-    }
-  }
-
   sectionsToRender(): ExpandedControlPanelSectionConfig[] {
     return sectionsToRender(
       this.props.form_data.viz_type,
@@ -331,7 +309,7 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
 export { ControlPanelsContainer };
 
 export default connect(
-  function mapStateToProps({ explore }: InitialExploreState) {
+  function mapStateToProps({ explore }: ExploreState) {
     return {
       isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
       controls: explore.controls,
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
index 3674e6acd434..5abca1fe682e 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
@@ -56,10 +56,10 @@ export default function MetricDefinitionValue({
     savedMetrics.find(metric => metric.metric_name === metricName);
 
   let savedMetric;
-  if (option.metric_name) {
-    savedMetric = option;
-  } else if (typeof option === 'string') {
+  if (typeof option === 'string') {
     savedMetric = getSavedMetricByName(option);
+  } else if (option.metric_name) {
+    savedMetric = option;
   }
 
   if (option instanceof AdhocMetric || savedMetric) {
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
index 89bec2457a91..50591c3f7174 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
@@ -179,10 +179,10 @@ class MetricsControl extends React.PureComponent {
     ) {
       this.setState({ options: this.optionsForSelect(nextProps) });
 
-      // Remove metrics if selected value no longer a column
-      const containsAllMetrics = columnsContainAllMetrics(value, nextProps);
-
-      if (!containsAllMetrics) {
+      // Remove all metrics if selected value no longer a valid column
+      // in the dataset. Must use `nextProps` here because Redux reducers may
+      // have already updated the value for this control.
+      if (!columnsContainAllMetrics(nextProps.value, nextProps)) {
         this.props.onChange([]);
       }
     }
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index d3bb6a814c79..99cdf4db30a5 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -66,8 +66,26 @@ export default function exploreReducer(state = {}, action) {
         action.datasource.id !== state.datasource.id ||
         action.datasource.type !== state.datasource.type
       ) {
+        // reset time range filter to default
         newFormData.time_range = DEFAULT_TIME_RANGE;
+        // if a control use datasource columns, reset it to default
+        // TODO: filter out only invalid columns and keep others
+        Object.entries(state.controls).forEach(
+          ([controlName, controlState]) => {
+            if (
+              // for direct column select controls
+              controlState.valueKey === 'column_name' ||
+              // for all other controls
+              'columns' in controlState
+            ) {
+              // reset to `undefined`, let `getControlsState` to pick up the default
+              controlState.value = undefined;
+              newFormData[controlName] = undefined;
+            }
+          },
+        );
       }
+
       const newState = {
         ...state,
         datasource: action.datasource,
diff --git a/superset-frontend/src/explore/reducers/getInitialState.ts b/superset-frontend/src/explore/reducers/getInitialState.ts
index 7979395bcaed..e78b6399bc6d 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.ts
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -52,23 +52,25 @@ export interface ExlorePageBootstrapData extends JsonObject {
 export default function getInitialState(
   bootstrapData: ExlorePageBootstrapData,
 ) {
-  const { form_data: rawFormData } = bootstrapData;
+  const { form_data: initialFormData } = bootstrapData;
   const { slice } = bootstrapData;
   const sliceName = slice ? slice.slice_name : null;
+
   const bootstrappedState = {
+    // note this will add `form_data` to state,
+    // which will be manipulatable by future reducers.
     ...bootstrapData,
     sliceName,
     common: {
       flash_messages: bootstrapData.common.flash_messages,
       conf: bootstrapData.common.conf,
     },
-    rawFormData,
     filterColumnOpts: [],
     isDatasourceMetaLoading: false,
     isStarred: false,
     controls: {},
   };
-  const controls = getControlsState(bootstrappedState, rawFormData);
+  const controls = getControlsState(bootstrappedState, initialFormData);
   bootstrappedState.controls = controls;
 
   // apply initial mapStateToProps for all controls, must execute AFTER
@@ -115,4 +117,4 @@ export default function getInitialState(
   };
 }
 
-export type InitialExploreState = ReturnType<typeof getInitialState>;
+export type ExploreState = ReturnType<typeof getInitialState>;

From 3520efa8bf38698656ee9e81b2513bd9796d40f5 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 09:38:38 -1000
Subject: [PATCH 13/18] Fix JS error

---
 .../FilterControl/AdhocFilterControl.jsx      | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
index 1e6634968a1e..0fd25055d798 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl.jsx
@@ -18,7 +18,13 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t, logging, SupersetClient, withTheme } from '@superset-ui/core';
+import {
+  t,
+  logging,
+  SupersetClient,
+  withTheme,
+  ensureIsArray,
+} from '@superset-ui/core';
 
 import ControlHeader from 'src/explore/components/ControlHeader';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
@@ -39,6 +45,11 @@ import AdhocFilterOption from './AdhocFilterOption';
 import AdhocFilter, { CLAUSES, EXPRESSION_TYPES } from './AdhocFilter';
 import adhocFilterType from './adhocFilterType';
 
+const selectedMetricType = PropTypes.oneOfType([
+  PropTypes.string,
+  adhocMetricType,
+]);
+
 const propTypes = {
   name: PropTypes.string,
   onChange: PropTypes.func,
@@ -46,9 +57,10 @@ const propTypes = {
   datasource: PropTypes.object,
   columns: PropTypes.arrayOf(columnType),
   savedMetrics: PropTypes.arrayOf(savedMetricType),
-  selectedMetrics: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, adhocMetricType]),
-  ),
+  selectedMetrics: PropTypes.oneOfType([
+    selectedMetricType,
+    PropTypes.arrayOf(selectedMetricType),
+  ]),
   isLoading: PropTypes.bool,
 };
 
@@ -264,7 +276,7 @@ class AdhocFilterControl extends React.Component {
   optionsForSelect(props) {
     const options = [
       ...props.columns,
-      ...[...(props.selectedMetrics || [])].map(
+      ...ensureIsArray(props.selectedMetrics).map(
         metric =>
           metric &&
           (typeof metric === 'string'

From 634b84c681c87d979a1f928bbb1480835b42b7a8 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 10:05:20 -1000
Subject: [PATCH 14/18] Reset control value when initializing explore state

---
 superset-frontend/src/explore/reducers/getInitialState.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/superset-frontend/src/explore/reducers/getInitialState.ts b/superset-frontend/src/explore/reducers/getInitialState.ts
index e78b6399bc6d..8fd5c9475259 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.ts
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -73,6 +73,13 @@ export default function getInitialState(
   const controls = getControlsState(bootstrappedState, initialFormData);
   bootstrappedState.controls = controls;
 
+  // reset control values to initial form data value in case they are incorrectly
+  // updated by `mapStateToProps` based on other controls' empty state.
+  // E.g. Query Mode for table chart.
+  Object.keys(controls).forEach(key => {
+    controls[key].value = initialFormData[key];
+  });
+
   // apply initial mapStateToProps for all controls, must execute AFTER
   // bootstrappedState has initialized `controls`. Order of execution is not
   // guaranteed, so controls shouldn't rely on the each other's mapped state.

From ab8dfcee268877520d23627a90dbed933fac9c44 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 10:38:56 -1000
Subject: [PATCH 15/18] Refactor with clearer typing

---
 .../src/explore/reducers/getInitialState.ts   | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/explore/reducers/getInitialState.ts b/superset-frontend/src/explore/reducers/getInitialState.ts
index 8fd5c9475259..b672efc950a4 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.ts
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -33,6 +33,7 @@ import {
   getFormDataFromControls,
   applyMapStateToPropsToControl,
 } from 'src/explore/controlUtils';
+import { ControlStateMapping } from '@superset-ui/chart-controls';
 
 export interface ExlorePageBootstrapData extends JsonObject {
   can_add: boolean;
@@ -56,7 +57,7 @@ export default function getInitialState(
   const { slice } = bootstrapData;
   const sliceName = slice ? slice.slice_name : null;
 
-  const bootstrappedState = {
+  const exploreState = {
     // note this will add `form_data` to state,
     // which will be manipulatable by future reducers.
     ...bootstrapData,
@@ -65,36 +66,36 @@ export default function getInitialState(
       flash_messages: bootstrapData.common.flash_messages,
       conf: bootstrapData.common.conf,
     },
-    filterColumnOpts: [],
     isDatasourceMetaLoading: false,
     isStarred: false,
-    controls: {},
   };
-  const controls = getControlsState(bootstrappedState, initialFormData);
-  bootstrappedState.controls = controls;
 
-  // reset control values to initial form data value in case they are incorrectly
-  // updated by `mapStateToProps` based on other controls' empty state.
-  // E.g. Query Mode for table chart.
-  Object.keys(controls).forEach(key => {
-    controls[key].value = initialFormData[key];
-  });
+  // Initial control state will to skip `control.mapStateToProps`
+  // because `state.controls` is undefined.
+  const controls: ControlStateMapping = getControlsState(
+    exploreState,
+    initialFormData,
+  );
+  const exploreStateWithControls = {
+    ...exploreState,
+    controls,
+  };
 
   // apply initial mapStateToProps for all controls, must execute AFTER
-  // bootstrappedState has initialized `controls`. Order of execution is not
+  // bootstrapState has initialized `controls`. Order of execution is not
   // guaranteed, so controls shouldn't rely on the each other's mapped state.
   Object.entries(controls).forEach(([key, controlState]) => {
     controls[key] = applyMapStateToPropsToControl(
       controlState,
-      bootstrappedState,
+      exploreStateWithControls,
     );
   });
 
   const sliceFormData = slice
-    ? getFormDataFromControls(getControlsState(bootstrapData, slice.form_data))
+    ? getFormDataFromControls(getControlsState(exploreState, slice.form_data))
     : null;
 
-  const chartKey = getChartKey(bootstrappedState);
+  const chartKey: number = getChartKey(exploreState);
 
   return {
     charts: {
@@ -116,7 +117,7 @@ export default function getInitialState(
       dashboards: [],
       saveModalAlert: null,
     },
-    explore: bootstrappedState,
+    explore: exploreStateWithControls,
     impressionId: shortid.generate(),
     messageToasts: getToastsFromPyFlashMessages(
       (bootstrapData.common || {}).flash_messages || [],

From e4e6172362abca3257e8ee589db0aab6bfe07e9a Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 10:46:52 -1000
Subject: [PATCH 16/18] Simplify the code

---
 .../src/explore/reducers/getInitialState.ts   | 31 ++++++++-----------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/explore/reducers/getInitialState.ts b/superset-frontend/src/explore/reducers/getInitialState.ts
index b672efc950a4..9cb02a6c2edf 100644
--- a/superset-frontend/src/explore/reducers/getInitialState.ts
+++ b/superset-frontend/src/explore/reducers/getInitialState.ts
@@ -68,34 +68,29 @@ export default function getInitialState(
     },
     isDatasourceMetaLoading: false,
     isStarred: false,
-  };
-
-  // Initial control state will to skip `control.mapStateToProps`
-  // because `state.controls` is undefined.
-  const controls: ControlStateMapping = getControlsState(
-    exploreState,
-    initialFormData,
-  );
-  const exploreStateWithControls = {
-    ...exploreState,
-    controls,
+    // Initial control state will skip `control.mapStateToProps`
+    // because `bootstrapData.controls` is undefined.
+    controls: getControlsState(
+      bootstrapData,
+      initialFormData,
+    ) as ControlStateMapping,
   };
 
   // apply initial mapStateToProps for all controls, must execute AFTER
   // bootstrapState has initialized `controls`. Order of execution is not
   // guaranteed, so controls shouldn't rely on the each other's mapped state.
-  Object.entries(controls).forEach(([key, controlState]) => {
-    controls[key] = applyMapStateToPropsToControl(
+  Object.entries(exploreState.controls).forEach(([key, controlState]) => {
+    exploreState.controls[key] = applyMapStateToPropsToControl(
       controlState,
-      exploreStateWithControls,
+      exploreState,
     );
   });
 
   const sliceFormData = slice
-    ? getFormDataFromControls(getControlsState(exploreState, slice.form_data))
+    ? getFormDataFromControls(getControlsState(bootstrapData, slice.form_data))
     : null;
 
-  const chartKey: number = getChartKey(exploreState);
+  const chartKey: number = getChartKey(bootstrapData);
 
   return {
     charts: {
@@ -105,7 +100,7 @@ export default function getInitialState(
         chartStatus: null,
         chartUpdateEndTime: null,
         chartUpdateStartTime: 0,
-        latestQueryFormData: getFormDataFromControls(controls),
+        latestQueryFormData: getFormDataFromControls(exploreState.controls),
         sliceFormData,
         queryController: null,
         queriesResponse: null,
@@ -117,7 +112,7 @@ export default function getInitialState(
       dashboards: [],
       saveModalAlert: null,
     },
-    explore: exploreStateWithControls,
+    explore: exploreState,
     impressionId: shortid.generate(),
     messageToasts: getToastsFromPyFlashMessages(
       (bootstrapData.common || {}).flash_messages || [],

From 891fadcbd7ffec3bc5c3bcb7065667243a94dba5 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 24 Feb 2021 16:22:14 -1000
Subject: [PATCH 17/18] Fix annotation layer test

---
 ...ced.test.ts => advanced_analytics.test.ts} | 41 -------------
 .../integration/explore/annotations.test.ts   | 59 +++++++++++++++++++
 .../src/explore/reducers/exploreReducer.js    | 38 +++++++-----
 3 files changed, 81 insertions(+), 57 deletions(-)
 rename superset-frontend/cypress-base/cypress/integration/explore/{advanced.test.ts => advanced_analytics.test.ts} (63%)
 create mode 100644 superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts

diff --git a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/advanced_analytics.test.ts
similarity index 63%
rename from superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts
rename to superset-frontend/cypress-base/cypress/integration/explore/advanced_analytics.test.ts
index 066ae868a195..77ebfbe7f9a4 100644
--- a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/explore/advanced_analytics.test.ts
@@ -55,44 +55,3 @@ describe('Advanced analytics', () => {
       .contains('1 year');
   });
 });
-
-describe('Annotations', () => {
-  beforeEach(() => {
-    cy.login();
-    cy.intercept('GET', '/superset/explore_json/**').as('getJson');
-    cy.intercept('POST', '/superset/explore_json/**').as('postJson');
-  });
-
-  it('Create formula annotation y-axis goal line', () => {
-    cy.visitChartByName('Num Births Trend');
-    cy.verifySliceSuccess({ waitAlias: '@postJson' });
-
-    cy.get('[data-test=annotation_layers]').within(() => {
-      cy.get('button').click();
-    });
-
-    cy.get('[data-test="popover-content"]').within(() => {
-      cy.get('[data-test=annotation-layer-name-header]')
-        .siblings()
-        .first()
-        .within(() => {
-          cy.get('input').type('Goal line');
-        });
-      cy.get('[data-test=annotation-layer-value-header]')
-        .siblings()
-        .first()
-        .within(() => {
-          cy.get('input').type('y=1400000');
-        });
-      cy.get('button').contains('OK').click({ force: true });
-    });
-
-    cy.get('button[data-test="run-query-button"]').click();
-    cy.verifySliceSuccess({
-      waitAlias: '@postJson',
-      chartSelector: 'svg',
-    });
-
-    cy.get('.nv-legend-text').should('have.length', 2);
-  });
-});
diff --git a/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts
new file mode 100644
index 000000000000..ebbaddf72dbc
--- /dev/null
+++ b/superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts
@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+describe('Annotations', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.intercept('GET', '/superset/explore_json/**').as('getJson');
+    cy.intercept('POST', '/superset/explore_json/**').as('postJson');
+  });
+
+  it('Create formula annotation y-axis goal line', () => {
+    cy.visitChartByName('Num Births Trend');
+    cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
+    const layerLabel = 'Goal line';
+
+    cy.get('[data-test=annotation_layers] button').click();
+
+    cy.get('[data-test="popover-content"]').within(() => {
+      cy.get('[data-test=annotation-layer-name-header]')
+        .siblings()
+        .first()
+        .within(() => {
+          cy.get('input').type(layerLabel);
+        });
+      cy.get('[data-test=annotation-layer-value-header]')
+        .siblings()
+        .first()
+        .within(() => {
+          cy.get('input').type('y=1400000');
+        });
+      cy.get('button').contains('OK').click();
+    });
+
+    cy.get('button[data-test="run-query-button"]').click();
+    cy.get('[data-test=annotation_layers]').contains(layerLabel);
+
+    cy.verifySliceSuccess({
+      waitAlias: '@postJson',
+      chartSelector: 'svg',
+    });
+    cy.get('.nv-legend-text').should('have.length', 2);
+  });
+});
diff --git a/superset-frontend/src/explore/reducers/exploreReducer.js b/superset-frontend/src/explore/reducers/exploreReducer.js
index 99cdf4db30a5..7727049df9de 100644
--- a/superset-frontend/src/explore/reducers/exploreReducer.js
+++ b/superset-frontend/src/explore/reducers/exploreReducer.js
@@ -62,32 +62,38 @@ export default function exploreReducer(state = {}, action) {
           delete newFormData.time_grain_sqla;
         }
       }
+
+      const controls = { ...state.controls };
       if (
         action.datasource.id !== state.datasource.id ||
         action.datasource.type !== state.datasource.type
       ) {
         // reset time range filter to default
         newFormData.time_range = DEFAULT_TIME_RANGE;
-        // if a control use datasource columns, reset it to default
-        // TODO: filter out only invalid columns and keep others
-        Object.entries(state.controls).forEach(
-          ([controlName, controlState]) => {
-            if (
-              // for direct column select controls
-              controlState.valueKey === 'column_name' ||
-              // for all other controls
-              'columns' in controlState
-            ) {
-              // reset to `undefined`, let `getControlsState` to pick up the default
-              controlState.value = undefined;
-              newFormData[controlName] = undefined;
-            }
-          },
-        );
+
+        // reset control values for column/metric related controls
+        Object.entries(controls).forEach(([controlName, controlState]) => {
+          if (
+            // for direct column select controls
+            controlState.valueKey === 'column_name' ||
+            // for all other controls
+            'columns' in controlState
+          ) {
+            // if a control use datasource columns, reset its value to `undefined`,
+            // then `getControlsState` will pick up the default.
+            // TODO: filter out only invalid columns and keep others
+            controls[controlName] = {
+              ...controlState,
+              value: undefined,
+            };
+            newFormData[controlName] = undefined;
+          }
+        });
       }
 
       const newState = {
         ...state,
+        controls,
         datasource: action.datasource,
         datasource_id: action.datasource.id,
         datasource_type: action.datasource.type,

From 430874c184adaadd9cd6e47cd06ee3b45c331f40 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Thu, 25 Feb 2021 18:22:34 -1000
Subject: [PATCH 18/18] Better type enforcement

---
 .../explore/components/ControlPanelsContainer.tsx   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index a6ad514291ab..fc738e9d216c 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -155,6 +155,11 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
     const { controls } = this.props;
     const { label, description } = section;
 
+    // Section label can be a ReactNode but in some places we want to
+    // have a string ID. Using forced type conversion for now,
+    // should probably add a `id` field to sections in the future.
+    const sectionId = String(label);
+
     const hasErrors = section.controlSetRows.some(rows =>
       rows.some(item => {
         const controlName =
@@ -175,10 +180,8 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
       <span>
         <span>{label}</span>{' '}
         {description && (
-          <InfoTooltipWithTrigger
-            label={label as string}
-            tooltip={description as string}
-          />
+          // label is only used in tooltip id (should probably call this prop `id`)
+          <InfoTooltipWithTrigger label={sectionId} tooltip={description} />
         )}
         {hasErrors && (
           <InfoTooltipWithTrigger
@@ -194,7 +197,7 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
       <Collapse.Panel
         className="control-panel-section"
         header={PanelHeader()}
-        key={String(section.label)}
+        key={sectionId}
       >
         {section.controlSetRows.map((controlSets, i) => {
           const renderedControls = controlSets