From 8dc2377680a35bd94b16104435f13ca10a744f92 Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Thu, 17 Feb 2022 23:54:36 +0300
Subject: [PATCH] refactor: migrate ExploreCtasResultsButton component to
 typescript (#18142)

* Move component to FC & tsx

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Fix type issue

* Fix type issue

* Fix ResultSet type issue

* Refactoring RootState
---
 .../{index.jsx => index.tsx}                  | 55 ++++++++-----------
 .../src/SqlLab/components/ResultSet/index.tsx |  2 +-
 superset-frontend/src/SqlLab/types.ts         |  1 +
 3 files changed, 25 insertions(+), 33 deletions(-)
 rename superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/{index.jsx => index.tsx} (71%)

diff --git a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
similarity index 71%
rename from superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx
rename to superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
index bcf5e279a4..9adb5dc402 100644
--- a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx
+++ b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
@@ -17,33 +17,37 @@
  * under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import Button from 'src/components/Button';
 import { exploreChart } from 'src/explore/exploreUtils';
-import * as actions from 'src/SqlLab/actions/sqlLab';
+import { RootState } from 'src/SqlLab/types';
 
-const propTypes = {
-  actions: PropTypes.object.isRequired,
-  table: PropTypes.string.isRequired,
-  schema: PropTypes.string,
-  dbId: PropTypes.number.isRequired,
-  errorMessage: PropTypes.string,
-  templateParams: PropTypes.string,
-};
+interface ExploreCtasResultsButtonProps {
+  actions: {
+    createCtasDatasource: Function;
+    addInfoToast: Function;
+    addDangerToast: Function;
+  };
+  table: string;
+  schema?: string | null;
+  dbId: number;
+  templateParams?: string;
+}
 
-function ExploreCtasResultsButton({
+const ExploreCtasResultsButton = ({
+  actions,
   table,
   schema,
   dbId,
   templateParams,
-  errorMessage,
-  actions,
-}) {
+}: ExploreCtasResultsButtonProps) => {
   const { createCtasDatasource, addInfoToast, addDangerToast } = actions;
+  const errorMessage = useSelector(
+    (state: RootState) => state.sqlLab.errorMessage,
+  );
+
   const buildVizOptions = {
     datasourceName: table,
     schema,
@@ -53,7 +57,7 @@ function ExploreCtasResultsButton({
 
   const visualize = () => {
     createCtasDatasource(buildVizOptions)
-      .then(data => {
+      .then((data: { table_id: number }) => {
         const formData = {
           datasource: `${data.table_id}__table`,
           metrics: ['count'],
@@ -86,19 +90,6 @@ function ExploreCtasResultsButton({
       {t('Explore')}
     </Button>
   );
-}
-ExploreCtasResultsButton.propTypes = propTypes;
+};
 
-const mapStateToProps = ({ sqlLab, common }) => ({
-  errorMessage: sqlLab.errorMessage,
-  timeout: common.conf?.SUPERSET_WEBSERVER_TIMEOUT,
-});
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ExploreCtasResultsButton);
+export default ExploreCtasResultsButton;
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index aa4abb9fe4..6fe38b61cd 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -726,10 +726,10 @@ export default class ResultSet extends React.PureComponent<
                   </Button>
                   <ExploreCtasResultsButton
                     // @ts-ignore Redux types are difficult to work with, ignoring for now
+                    actions={this.props.actions}
                     table={tempTable}
                     schema={tempSchema}
                     dbId={exploreDBId}
-                    actions={this.props.actions}
                   />
                 </ButtonGroup>
               </>
diff --git a/superset-frontend/src/SqlLab/types.ts b/superset-frontend/src/SqlLab/types.ts
index 27f08f5bbe..b60ca8604b 100644
--- a/superset-frontend/src/SqlLab/types.ts
+++ b/superset-frontend/src/SqlLab/types.ts
@@ -118,6 +118,7 @@ export type RootState = {
     tables: Record<string, any>[];
     queriesLastUpdate: number;
     user: UserWithPermissionsAndRoles;
+    errorMessage: string | null;
   };
   localStorageUsageInKilobytes: number;
   messageToasts: toastState[];