chore: Remove actions prop and refactor code in SQL Lab (#22231)

superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx

@@ -25,13 +25,11 @@ import TableView from 'src/components/TableView';
 import TableCollection from 'src/components/TableCollection';
 import { Provider } from 'react-redux';
 import { queries, user } from 'src/SqlLab/fixtures';
-import * as actions from 'src/SqlLab/actions/sqlLab';
 
 describe('QueryTable', () => {
   const mockedProps = {
     queries,
     displayLimit: 100,
-    actions,
     latestQueryId: 'ryhMUZCGb',
   };
   it('is valid', () => {

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

@@ -22,7 +22,15 @@ import Card from 'src/components/Card';
 import ProgressBar from 'src/components/ProgressBar';
 import Label from 'src/components/Label';
 import { t, useTheme, QueryResponse } from '@superset-ui/core';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  queryEditorSetAndSaveSql,
+  cloneQueryToNewTab,
+  fetchQueryResults,
+  clearQueryResults,
+  removeQuery,
+} from 'src/SqlLab/actions/sqlLab';
 import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
 import { fDuration } from 'src/utils/dates';
@@ -45,13 +53,6 @@ interface QueryTableQuery
 
 interface QueryTableProps {
   columns?: string[];
-  actions: {
-    queryEditorSetAndSaveSql: Function;
-    cloneQueryToNewTab: Function;
-    fetchQueryResults: Function;
-    clearQueryResults: Function;
-    removeQuery: Function;
-  };
   queries?: QueryResponse[];
   onUserClicked?: Function;
   onDbClicked?: Function;
@@ -66,7 +67,6 @@ const openQuery = (id: number) => {
 
 const QueryTable = ({
   columns = ['started', 'duration', 'rows'],
-  actions,
   queries = [],
   onUserClicked = () => undefined,
   onDbClicked = () => undefined,
@@ -74,6 +74,7 @@ const QueryTable = ({
   latestQueryId,
 }: QueryTableProps) => {
   const theme = useTheme();
+  const dispatch = useDispatch();
 
   const setHeaders = (column: string) => {
     if (column === 'sql') {
@@ -93,25 +94,17 @@ const QueryTable = ({
 
   const user = useSelector<SqlLabRootState, User>(state => state.sqlLab.user);
 
-  const {
-    queryEditorSetAndSaveSql,
-    cloneQueryToNewTab,
-    fetchQueryResults,
-    clearQueryResults,
-    removeQuery,
-  } = actions;
-
   const data = useMemo(() => {
     const restoreSql = (query: QueryResponse) => {
-      queryEditorSetAndSaveSql({ id: query.sqlEditorId }, query.sql);
+      dispatch(queryEditorSetAndSaveSql({ id: query.sqlEditorId }, query.sql));
     };
 
     const openQueryInNewTab = (query: QueryResponse) => {
-      cloneQueryToNewTab(query, true);
+      dispatch(cloneQueryToNewTab(query, true));
     };
 
     const openAsyncResults = (query: QueryResponse, displayLimit: number) => {
-      fetchQueryResults(query, displayLimit);
+      dispatch(fetchQueryResults(query, displayLimit));
     };
 
     const statusAttributes = {
@@ -239,7 +232,7 @@ const QueryTable = ({
               }
               modalTitle={t('Data preview')}
               beforeOpen={() => openAsyncResults(query, displayLimit)}
-              onExit={() => clearQueryResults(query)}
+              onExit={() => dispatch(clearQueryResults(query))}
               modalBody={
                 <ResultSet
                   showSql
@@ -293,7 +286,7 @@ const QueryTable = ({
             {q.id !== latestQueryId && (
               <StyledTooltip
                 tooltip={t('Remove query from log')}
-                onClick={() => removeQuery(query)}
+                onClick={() => dispatch(removeQuery(query))}
               >
                 <Icons.Trash iconSize="xl" />
               </StyledTooltip>
@@ -303,19 +296,7 @@ const QueryTable = ({
         return q;
       })
       .reverse();
-  }, [
-    queries,
-    onUserClicked,
-    onDbClicked,
-    user,
-    displayLimit,
-    actions,
-    clearQueryResults,
-    cloneQueryToNewTab,
-    fetchQueryResults,
-    queryEditorSetAndSaveSql,
-    removeQuery,
-  ]);
+  }, [queries, onUserClicked, onDbClicked, user, displayLimit]);
 
   return (
     <div className="QueryTable">