refactor: Explore SaveModal to typescript (#11997)

* Explore SaveModal to typescript

* Fix test

* Fix

* Fix lint

* update SaveModal without any type

* Update

* Fix lint

* Fix lint

* Fix test

* Fix

* Fix

* Fix lint

* Refactor

* Fix

superset-frontend/src/components/Button/index.tsx

@@ -34,6 +34,7 @@ export interface DropdownItemProps {
 }
 
 export interface ButtonProps {
+  id?: string;
   className?: string;
   tooltip?: string;
   placement?:

superset-frontend/src/explore/actions/saveModalActions.js

@@ -71,7 +71,10 @@ export function saveSlice(formData, requestParams) {
     });
 
     return SupersetClient.post({ url, postPayload: { form_data: formData } })
-      .then(({ json }) => dispatch(saveSliceSuccess(json)))
+      .then(response => {
+        dispatch(saveSliceSuccess(response.json));
+        return response;
+      })
       .catch(() => dispatch(saveSliceFailed()));
   };
 }

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

@@ -18,35 +18,45 @@
  */
 /* eslint camelcase: 0 */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Alert, FormControl, FormGroup, Radio } from 'react-bootstrap';
-import { t } from '@superset-ui/core';
+import { JsonObject, t } from '@superset-ui/core';
 import ReactMarkdown from 'react-markdown';
 import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import FormLabel from 'src/components/FormLabel';
 import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
-
-const propTypes = {
-  can_overwrite: PropTypes.bool,
-  onHide: PropTypes.func.isRequired,
-  actions: PropTypes.object.isRequired,
-  form_data: PropTypes.object,
-  userId: PropTypes.string.isRequired,
-  dashboards: PropTypes.array.isRequired,
-  alert: PropTypes.string,
-  slice: PropTypes.object,
-  datasource: PropTypes.object,
-  dashboardId: PropTypes.number,
-};
+import { connect } from 'react-redux';
 
 // Session storage key for recent dashboard
 const SK_DASHBOARD_ID = 'save_chart_recent_dashboard';
 const SELECT_PLACEHOLDER = t('**Select** a dashboard OR **create** a new one');
 
-class SaveModal extends React.Component {
-  constructor(props) {
+type SaveModalProps = {
+  can_overwrite?: boolean;
+  onHide: () => void;
+  actions: Record<string, any>;
+  form_data?: Record<string, any>;
+  userId: string;
+  dashboards: Array<any>;
+  alert?: string;
+  sliceName?: string;
+  slice?: Record<string, any>;
+  datasource?: Record<string, any>;
+  dashboardId: '' | number | null;
+};
+
+type ActionType = 'overwrite' | 'saveas';
+
+type SaveModalState = {
+  saveToDashboardId: number | string | null;
+  newSliceName?: string;
+  newDashboardName?: string;
+  alert: string | null;
+  action: ActionType;
+};
+
+class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
+  constructor(props: SaveModalProps) {
     super(props);
     this.state = {
       saveToDashboardId: null,
@@ -56,6 +66,8 @@ class SaveModal extends React.Component {
     };
     this.onDashboardSelectChange = this.onDashboardSelectChange.bind(this);
     this.onSliceNameChange = this.onSliceNameChange.bind(this);
+    this.changeAction = this.changeAction.bind(this);
+    this.saveOrOverwrite = this.saveOrOverwrite.bind(this);
   }
 
   componentDidMount() {
@@ -63,8 +75,8 @@ class SaveModal extends React.Component {
       const dashboardIds = this.props.dashboards.map(
         dashboard => dashboard.value,
       );
-      let recentDashboard = sessionStorage.getItem(SK_DASHBOARD_ID);
-      recentDashboard = recentDashboard && parseInt(recentDashboard, 10);
+      const lastDashboard = sessionStorage.getItem(SK_DASHBOARD_ID);
+      let recentDashboard = lastDashboard && parseInt(lastDashboard, 10);
 
       if (!recentDashboard && this.props.dashboardId) {
         recentDashboard = this.props.dashboardId;
@@ -81,25 +93,27 @@ class SaveModal extends React.Component {
     });
   }
 
-  onSliceNameChange(event) {
+  onSliceNameChange(
+    event: React.FormEvent<FormControl> & { target: HTMLInputElement },
+  ) {
     this.setState({ newSliceName: event.target.value });
   }
 
-  onDashboardSelectChange(event) {
+  onDashboardSelectChange(event: Record<string, any>) {
     const newDashboardName = event ? event.label : null;
     const saveToDashboardId =
       event && typeof event.value === 'number' ? event.value : null;
     this.setState({ saveToDashboardId, newDashboardName });
   }
 
-  changeAction(action) {
+  changeAction(action: ActionType) {
     this.setState({ action });
   }
 
-  saveOrOverwrite(gotodash) {
+  saveOrOverwrite(gotodash: boolean) {
     this.setState({ alert: null });
     this.props.actions.removeSaveModalAlert();
-    const sliceParams = {};
+    const sliceParams: Record<string, any> = {};
 
     if (this.props.slice && this.props.slice.slice_id) {
       sliceParams.slice_id = this.props.slice.slice_id;
@@ -117,7 +131,7 @@ class SaveModal extends React.Component {
 
     this.props.actions
       .saveSlice(this.props.form_data, sliceParams)
-      .then(({ data }) => {
+      .then(({ data }: JsonObject) => {
         if (data.dashboard_id === null) {
           sessionStorage.removeItem(SK_DASHBOARD_ID);
         } else {
@@ -155,7 +169,7 @@ class SaveModal extends React.Component {
                 !this.state.newSliceName ||
                 (!this.state.saveToDashboardId && !this.state.newDashboardName)
               }
-              onClick={this.saveOrOverwrite.bind(this, true)}
+              onClick={() => this.saveOrOverwrite(true)}
             >
               {t('Save & go to dashboard')}
             </Button>
@@ -163,7 +177,7 @@ class SaveModal extends React.Component {
               id="btn_modal_save"
               buttonSize="sm"
               buttonStyle="primary"
-              onClick={this.saveOrOverwrite.bind(this, false)}
+              onClick={() => this.saveOrOverwrite(false)}
               disabled={!this.state.newSliceName}
               data-test="btn-modal-save"
             >
@@ -194,7 +208,7 @@ class SaveModal extends React.Component {
               inline
               disabled={!(this.props.can_overwrite && this.props.slice)}
               checked={this.state.action === 'overwrite'}
-              onChange={this.changeAction.bind(this, 'overwrite')}
+              onChange={() => this.changeAction('overwrite')}
               data-test="save-overwrite-radio"
             >
               {t('Save (Overwrite)')}
@@ -204,7 +218,7 @@ class SaveModal extends React.Component {
               data-test="saveas-radio"
               inline
               checked={this.state.action === 'saveas'}
-              onChange={this.changeAction.bind(this, 'saveas')}
+              onChange={() => this.changeAction('saveas')}
             >
               {' '}
               {t('Save as ...')} &nbsp;
@@ -233,9 +247,10 @@ class SaveModal extends React.Component {
               creatable
               onChange={this.onDashboardSelectChange}
               autoSize={false}
-              value={
-                this.state.saveToDashboardId || this.state.newDashboardName
-              }
+              value={{
+                value:
+                  this.state.saveToDashboardId || this.state.newDashboardName,
+              }}
               placeholder={
                 // Using markdown to allow for good i18n
                 <ReactMarkdown
@@ -251,9 +266,10 @@ class SaveModal extends React.Component {
   }
 }
 
-SaveModal.propTypes = propTypes;
-
-function mapStateToProps({ explore, saveModal }) {
+function mapStateToProps({
+  explore,
+  saveModal,
+}: Record<string, any>): Partial<SaveModalProps> {
   return {
     datasource: explore.datasource,
     slice: explore.slice,