chore: refactor ResultSet to functional component (apache#21186)

superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx

@@ -17,36 +17,35 @@
  * under the License.
  */
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { t } from '@superset-ui/core';
+import { useSelector, useDispatch } from 'react-redux';
+import { t, JsonObject } from '@superset-ui/core';
+import {
+  createCtasDatasource,
+  addInfoToast,
+  addDangerToast,
+} from 'src/SqlLab/actions/sqlLab';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import Button from 'src/components/Button';
 import { exploreChart } from 'src/explore/exploreUtils';
 import { SqlLabRootState } from 'src/SqlLab/types';
 
 interface ExploreCtasResultsButtonProps {
-  actions: {
-    createCtasDatasource: Function;
-    addInfoToast: Function;
-    addDangerToast: Function;
-  };
   table: string;
   schema?: string | null;
   dbId: number;
   templateParams?: string;
 }
 
 const ExploreCtasResultsButton = ({
-  actions,
   table,
   schema,
   dbId,
   templateParams,
 }: ExploreCtasResultsButtonProps) => {
-  const { createCtasDatasource, addInfoToast, addDangerToast } = actions;
   const errorMessage = useSelector(
     (state: SqlLabRootState) => state.sqlLab.errorMessage,
   );
+  const dispatch = useDispatch<(dispatch: any) => Promise<JsonObject>>();
 
   const buildVizOptions = {
     datasourceName: table,
@@ -56,7 +55,7 @@ const ExploreCtasResultsButton = ({
   };
 
   const visualize = () => {
-    createCtasDatasource(buildVizOptions)
+    dispatch(createCtasDatasource(buildVizOptions))
       .then((data: { table_id: number }) => {
         const formData = {
           datasource: `${data.table_id}__table`,
@@ -67,12 +66,14 @@ const ExploreCtasResultsButton = ({
           all_columns: [],
           row_limit: 1000,
         };
-        addInfoToast(t('Creating a data source and creating a new tab'));
+        dispatch(
+          addInfoToast(t('Creating a data source and creating a new tab')),
+        );
         // open new window for data visualization
         exploreChart(formData);
       })
       .catch(() => {
-        addDangerToast(errorMessage || t('An error occurred'));
+        dispatch(addDangerToast(errorMessage || t('An error occurred')));
       });
   };
 

superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx

@@ -39,6 +39,7 @@ const ExploreResultsButton = ({
       onClick={onClick}
       disabled={!allowsSubquery}
       tooltip={t('Explore the result set in the data exploration view')}
+      data-test="explore-results-button"
     >
       <InfoTooltipWithTrigger
         icon="line-chart"

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -245,7 +245,6 @@ const QueryTable = ({
                   showSql
                   user={user}
                   query={query}
-                  actions={actions}
                   height={400}
                   displayLimit={displayLimit}
                   defaultQueryLimit={1000}