refactor: typing for explore Control and messageToasts (#11416)

superset-frontend/src/explore/components/Control.tsx

@@ -16,52 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './Control.less';
+import React, { ReactNode } from 'react';
+import { ControlType } from '@superset-ui/chart-controls';
+import { JsonValue, QueryFormData } from '@superset-ui/core';
+import { ExploreActions } from '../actions/exploreActions';
 import controlMap from './controls';
 
-const controlTypes = Object.keys(controlMap);
+import './Control.less';
 
-const propTypes = {
-  actions: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf(controlTypes).isRequired,
-    PropTypes.func.isRequired,
-  ]),
-  hidden: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  choices: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.array),
-    PropTypes.func,
-  ]),
-  description: PropTypes.string,
-  tooltipOnClick: PropTypes.func,
-  places: PropTypes.number,
-  validationErrors: PropTypes.array,
-  renderTrigger: PropTypes.bool,
-  rightNode: PropTypes.node,
-  formData: PropTypes.object,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.object,
-    PropTypes.bool,
-    PropTypes.array,
-    PropTypes.func,
-  ]),
+export type ControlProps = {
+  // the actual action dispatcher (via bindActionCreators) has identical
+  // signature to the original action factory.
+  actions: ExploreActions;
+  type: ControlType;
+  label: string;
+  name: string;
+  description?: string;
+  tooltipOnClick?: () => ReactNode;
+  places?: number;
+  rightNode?: ReactNode;
+  formData?: QueryFormData | null;
+  value?: JsonValue;
+  validationErrors?: any[];
+  hidden?: boolean;
+  renderTrigger?: boolean;
 };
 
-const defaultProps = {
-  renderTrigger: false,
-  hidden: false,
-  validationErrors: [],
-};
+export default class Control extends React.PureComponent<
+  ControlProps,
+  { hovered: boolean }
+> {
+  onMouseEnter: () => void;
 
-export default class Control extends React.PureComponent {
-  constructor(props) {
+  onMouseLeave: () => void;
+
+  constructor(props: ControlProps) {
     super(props);
     this.state = { hovered: false };
     this.onChange = this.onChange.bind(this);
@@ -69,11 +58,11 @@ export default class Control extends React.PureComponent {
     this.onMouseLeave = this.setHover.bind(this, false);
   }
 
-  onChange(value, errors) {
+  onChange(value: any, errors: any[]) {
     this.props.actions.setControlValue(this.props.name, value, errors);
   }
 
-  setHover(hovered) {
+  setHover(hovered: boolean) {
     this.setState({ hovered });
   }
 
@@ -98,6 +87,3 @@ export default class Control extends React.PureComponent {
     );
   }
 }
-
-Control.propTypes = propTypes;
-Control.defaultProps = defaultProps;

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

@@ -28,7 +28,7 @@ import ControlPanelSection from './ControlPanelSection';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import { sectionsToRender } from '../controlUtils';
-import * as exploreActions from '../actions/exploreActions';
+import { exploreActions } from '../actions/exploreActions';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -106,8 +106,8 @@ class ControlPanelsContainer extends React.Component {
 
     return (
       <Control
-        name={name}
         key={`control-${name}`}
+        name={name}
         validationErrors={validationErrors}
         actions={actions}
         formData={provideFormDataToProps ? formData : null}

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
   Modal,
   Row,
@@ -31,18 +31,10 @@ import { OptionsType } from 'react-select/src/types';
 import { AsyncSelect } from 'src/components/Select';
 import rison from 'rison';
 import { t, SupersetClient } from '@superset-ui/core';
-import Chart from 'src/types/Chart';
+import Chart, { Slice } from 'src/types/Chart';
 import FormLabel from 'src/components/FormLabel';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 
-export type Slice = {
-  id?: number;
-  slice_id: number;
-  slice_name: string;
-  description: string | null;
-  cache_timeout: number | null;
-};
-
 type InternalProps = {
   slice: Slice;
   onHide: () => void;
@@ -81,28 +73,31 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
     });
   }
 
-  async function fetchChartData() {
-    try {
-      const response = await SupersetClient.get({
-        endpoint: `/api/v1/chart/${slice.slice_id}`,
-      });
-      const chart = response.json.result;
-      setOwners(
-        chart.owners.map((owner: any) => ({
-          value: owner.id,
-          label: `${owner.first_name} ${owner.last_name}`,
-        })),
-      );
-    } catch (response) {
-      const clientError = await getClientErrorObject(response);
-      showError(clientError);
-    }
-  }
+  const fetchChartData = useCallback(
+    async function fetchChartData() {
+      try {
+        const response = await SupersetClient.get({
+          endpoint: `/api/v1/chart/${slice.slice_id}`,
+        });
+        const chart = response.json.result;
+        setOwners(
+          chart.owners.map((owner: any) => ({
+            value: owner.id,
+            label: `${owner.first_name} ${owner.last_name}`,
+          })),
+        );
+      } catch (response) {
+        const clientError = await getClientErrorObject(response);
+        showError(clientError);
+      }
+    },
+    [slice.slice_id],
+  );
 
   // get the owners of this slice
   useEffect(() => {
     fetchChartData();
-  }, []);
+  }, [fetchChartData]);
 
   const loadOptions = (input = '') => {
     const query = rison.encode({