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

apache · Dec 5, 2022 · f3bf3ec · f3bf3ec
1 parent b2d909f
commit f3bf3ec
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 245 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts
@@ -296,6 +296,7 @@ export type Query = {
   errorMessage: string | null;
   extra: {
     progress: string | null;
+    errors?: SupersetError[];
   };
   id: string;
   isDataPreview: boolean;

diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
@@ -20,16 +20,8 @@ import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import QueryHistory from 'src/SqlLab/components/QueryHistory';
 
-const NOOP = () => {};
 const mockedProps = {
   queries: [],
-  actions: {
-    queryEditorSetAndSaveSql: NOOP,
-    cloneQueryToNewTab: NOOP,
-    fetchQueryResults: NOOP,
-    clearQueryResults: NOOP,
-    removeQuery: NOOP,
-  },
   displayLimit: 1000,
   latestQueryId: 'yhMUZCGb',
 };

diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
@@ -23,13 +23,6 @@ import QueryTable from 'src/SqlLab/components/QueryTable';
 
 interface QueryHistoryProps {
   queries: QueryResponse[];
-  actions: {
-    queryEditorSetAndSaveSql: Function;
-    cloneQueryToNewTab: Function;
-    fetchQueryResults: Function;
-    clearQueryResults: Function;
-    removeQuery: Function;
-  };
   displayLimit: number;
   latestQueryId: string | undefined;
 }
@@ -47,7 +40,6 @@ const StyledEmptyStateWrapper = styled.div`
 
 const QueryHistory = ({
   queries,
-  actions,
   displayLimit,
   latestQueryId,
 }: QueryHistoryProps) =>
@@ -64,7 +56,6 @@ const QueryHistory = ({
         'actions',
       ]}
       queries={queries}
-      actions={actions}
       displayLimit={displayLimit}
       latestQueryId={latestQueryId}
     />

diff --git a/superset-frontend/src/SqlLab/components/QuerySearch/QuerySearch.test.jsx b/superset-frontend/src/SqlLab/components/QuerySearch/QuerySearch.test.jsx
@@ -43,7 +43,6 @@ fetchMock.get(DATABASE_ENDPOINT, []);
 
 describe('QuerySearch', () => {
   const mockedProps = {
-    actions: { addDangerToast: jest.fn() },
     displayLimit: 50,
   };
 

diff --git a/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx b/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx
@@ -17,6 +17,9 @@
  * under the License.
  */
 import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { setDatabases, addDangerToast } from 'src/SqlLab/actions/sqlLab';
 import Button from 'src/components/Button';
 import Select from 'src/components/DeprecatedSelect';
 import { styled, t, SupersetClient, QueryResponse } from '@superset-ui/core';
@@ -33,15 +36,6 @@ import { STATUS_OPTIONS, TIME_OPTIONS } from 'src/SqlLab/constants';
 import QueryTable from '../QueryTable';
 
 interface QuerySearchProps {
-  actions: {
-    addDangerToast: (msg: string) => void;
-    setDatabases: (data: Record<string, any>) => Record<string, any>;
-    queryEditorSetAndSaveSql: Function;
-    cloneQueryToNewTab: Function;
-    fetchQueryResults: Function;
-    clearQueryResults: Function;
-    removeQuery: Function;
-  };
   displayLimit: number;
 }
 
@@ -77,7 +71,10 @@ const TableStyles = styled.div`
 const StyledTableStylesContainer = styled.div`
   overflow: auto;
 `;
-function QuerySearch({ actions, displayLimit }: QuerySearchProps) {
+
+const QuerySearch = ({ displayLimit }: QuerySearchProps) => {
+  const dispatch = useDispatch();
+
   const [databaseId, setDatabaseId] = useState<string>('');
   const [userId, setUserId] = useState<string>('');
   const [searchText, setSearchText] = useState<string>('');
@@ -133,7 +130,7 @@ function QuerySearch({ actions, displayLimit }: QuerySearchProps) {
       const queries = Object.values(response.json);
       setQueriesArray(queries);
     } catch (err) {
-      actions.addDangerToast(t('An error occurred when refreshing queries'));
+      dispatch(addDangerToast(t('An error occurred when refreshing queries')));
     } finally {
       setQueriesLoading(false);
     }
@@ -178,10 +175,10 @@ function QuerySearch({ actions, displayLimit }: QuerySearchProps) {
       value: id,
       label: database_name,
     }));
-    actions.setDatabases(result);
+    dispatch(setDatabases(result));
     if (result.length === 0) {
-      actions.addDangerToast(
-        t("It seems you don't have access to any database"),
+      dispatch(
+        addDangerToast(t("It seems you don't have access to any database")),
       );
     }
     return options;
@@ -280,13 +277,13 @@ function QuerySearch({ actions, displayLimit }: QuerySearchProps) {
               onUserClicked={onUserClicked}
               onDbClicked={onDbClicked}
               queries={queriesArray}
-              actions={actions}
               displayLimit={displayLimit}
             />
           </TableStyles>
         )}
       </StyledTableStylesContainer>
     </TableWrapper>
   );
-}
+};
+
 export default QuerySearch;
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx b/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', () => {

diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/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,14 +67,14 @@ const openQuery = (id: number) => {
 
 const QueryTable = ({
   columns = ['started', 'duration', 'rows'],
-  actions,
   queries = [],
   onUserClicked = () => undefined,
   onDbClicked = () => undefined,
   displayLimit,
   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">

diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
@@ -23,15 +23,15 @@ import { DropdownButton } from 'src/components/DropdownButton';
 import Button from 'src/components/Button';
 import { DropdownButtonProps } from 'antd/lib/dropdown';
 
-interface Props {
+interface SaveDatasetActionButtonProps {
   setShowSave: (arg0: boolean) => void;
   overlayMenu: JSX.Element | null;
 }
 
-export default function SaveDatasetActionButton({
+const SaveDatasetActionButton = ({
   setShowSave,
   overlayMenu,
-}: Props) {
+}: SaveDatasetActionButtonProps) => {
   const theme = useTheme();
 
   const StyledDropdownButton = styled(
@@ -80,4 +80,6 @@ export default function SaveDatasetActionButton({
       {t('Save')}
     </StyledDropdownButton>
   );
-}
+};
+
+export default SaveDatasetActionButton;