fix(sqllab): async query broken due to #21320 (#21667)

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

@@ -120,6 +120,7 @@ const RunQueryActionButton: React.FC<Props> = ({
   return (
     <StyledButton>
       <ButtonComponent
+        data-test="run-query-action"
         onClick={() =>
           onClick(shouldShowStopBtn, allowAsync, runQuery, stopQuery)
         }

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from 'spec/helpers/testing-library';
+import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
@@ -33,7 +33,6 @@ import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
 import ConnectedSouthPane from 'src/SqlLab/components/SouthPane/state';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 import QueryProvider from 'src/views/QueryProvider';
-import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import { AntdDropdown } from 'src/components';
 import {
   queryEditorSetFunctionNames,
@@ -55,10 +54,15 @@ jest.mock('src/components/AsyncAceEditor', () => ({
     <div data-test="react-ace">{JSON.stringify(props)}</div>
   ),
 }));
+jest.mock('src/SqlLab/components/SqlEditorLeftBar', () => () => (
+  <div data-test="mock-sql-editor-left-bar" />
+));
 
 const MOCKED_SQL_EDITOR_HEIGHT = 500;
 
 fetchMock.get('glob:*/api/v1/database/*', { result: [] });
+fetchMock.get('glob:*/superset/tables/*', { options: [] });
+fetchMock.post('glob:*/sql_json/*', { result: [] });
 
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
@@ -134,9 +138,10 @@ describe('SqlEditor', () => {
   });
 
   it('render a SqlEditorLeftBar', async () => {
-    const wrapper = buildWrapper();
+    const { getByTestId } = setup(mockedProps, store);
-    await waitForComponentToPaint(wrapper);
+    await waitFor(() =>
-    expect(wrapper.find(SqlEditorLeftBar)).toExist();
+      expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
+    );
   });
 
   it('render an AceEditorWrapper', async () => {
@@ -187,6 +192,46 @@ describe('SqlEditor', () => {
     expect(wrapper.find(ConnectedSouthPane)).toExist();
   });
 
+  it('runs query action with ctas false', async () => {
+    const expectedStore = mockStore({
+      ...initialState,
+      sqlLab: {
+        ...initialState.sqlLab,
+        databases: {
+          5667: {
+            allow_ctas: false,
+            allow_cvas: false,
+            allow_dml: false,
+            allow_file_upload: false,
+            allow_run_async: true,
+            backend: 'postgresql',
+            database_name: 'examples',
+            expose_in_sqllab: true,
+            force_ctas_schema: null,
+            id: 1,
+          },
+        },
+        unsavedQueryEditor: {
+          id: defaultQueryEditor.id,
+          dbId: 5667,
+          sql: 'expectedSql',
+        },
+      },
+    });
+    const { findByTestId } = setup(mockedProps, expectedStore);
+    const runButton = await findByTestId('run-query-action');
+    fireEvent.click(runButton);
+    await waitFor(() =>
+      expect(expectedStore.getActions()).toContainEqual({
+        type: 'START_QUERY',
+        query: expect.objectContaining({
+          ctas: false,
+          sqlEditorId: defaultQueryEditor.id,
+        }),
+      }),
+    );
+  });
+
   // TODO eschutho convert tests to RTL
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('does not overflow the editor window', async () => {

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -224,13 +224,19 @@ const SqlEditor = ({
     }
   };
 
-  useState(() => {
+  const runQuery = () => {
+    if (database) {
+      startQuery();
+    }
+  };
+
+  useEffect(() => {
     if (autorun) {
       setAutorun(false);
       dispatch(queryEditorSetAutorun(queryEditor, false));
       startQuery();
     }
-  });
+  }, []);
 
   // One layer of abstraction for easy spying in unit tests
   const getSqlEditorHeight = () =>
@@ -537,7 +543,7 @@ const SqlEditor = ({
               allowAsync={database ? database.allow_run_async : false}
               queryEditorId={queryEditor.id}
               queryState={latestQuery?.state}
-              runQuery={startQuery}
+              runQuery={runQuery}
               stopQuery={stopQuery}
               overlayCreateAsMenu={showMenu ? runMenuBtn : null}
             />