chore: refactor AceEditorWrapper to functional component (#21532)

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

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from 'spec/helpers/testing-library';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
@@ -48,6 +49,13 @@ import {
   defaultQueryEditor,
 } from 'src/SqlLab/fixtures';
 
+jest.mock('src/components/AsyncAceEditor', () => ({
+  ...jest.requireActual('src/components/AsyncAceEditor'),
+  FullSQLEditor: props => (
+    <div data-test="react-ace">{JSON.stringify(props)}</div>
+  ),
+}));
+
 const MOCKED_SQL_EDITOR_HEIGHT = 500;
 
 fetchMock.get('glob:*/api/v1/database/*', { result: [] });
@@ -79,6 +87,12 @@ const store = mockStore({
   },
 });
 
+const setup = (props = {}, store) =>
+  render(<SqlEditor {...props} />, {
+    useRedux: true,
+    ...(store && { store }),
+  });
+
 describe('SqlEditor', () => {
   const mockedProps = {
     actions: {
@@ -118,21 +132,61 @@ describe('SqlEditor', () => {
     const wrapper = buildWrapper(updatedProps);
     expect(wrapper.find(EmptyStateBig)).toExist();
   });
+
   it('render a SqlEditorLeftBar', async () => {
     const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(SqlEditorLeftBar)).toExist();
   });
+
   it('render an AceEditorWrapper', async () => {
     const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(AceEditorWrapper)).toExist();
   });
+
+  it('renders sql from unsaved change', () => {
+    const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
+    const { getByTestId } = setup(
+      mockedProps,
+      mockStore({
+        ...initialState,
+        sqlLab: {
+          ...initialState.sqlLab,
+          databases: {
+            dbid1: {
+              allow_ctas: false,
+              allow_cvas: false,
+              allow_dml: false,
+              allow_file_upload: false,
+              allow_run_async: false,
+              backend: 'postgresql',
+              database_name: 'examples',
+              expose_in_sqllab: true,
+              force_ctas_schema: null,
+              id: 1,
+            },
+          },
+          unsavedQueryEditor: {
+            id: defaultQueryEditor.id,
+            dbId: 'dbid1',
+            sql: expectedSql,
+          },
+        },
+      }),
+    );
+
+    expect(getByTestId('react-ace')).toHaveTextContent(
+      JSON.stringify({ value: expectedSql }).slice(1, -1),
+    );
+  });
+
   it('render a SouthPane', async () => {
     const wrapper = buildWrapper();
     await waitForComponentToPaint(wrapper);
     expect(wrapper.find(ConnectedSouthPane)).toExist();
   });
+
   // TODO eschutho convert tests to RTL
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('does not overflow the editor window', async () => {
@@ -146,6 +200,7 @@ describe('SqlEditor', () => {
       SQL_EDITOR_GUTTER_HEIGHT;
     expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
   });
+
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('does not overflow the editor window after resizing', async () => {
     const wrapper = buildWrapper();
@@ -159,6 +214,7 @@ describe('SqlEditor', () => {
       SQL_EDITOR_GUTTER_HEIGHT;
     expect(totalSize).toEqual(450);
   });
+
   it('render a Limit Dropdown', async () => {
     const defaultQueryLimit = 101;
     const updatedProps = { ...mockedProps, defaultQueryLimit };

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

@@ -163,8 +163,13 @@ const SqlEditor = ({
   const theme = useTheme();
   const dispatch = useDispatch();
 
-  const { database, latestQuery, hideLeftBar } = useSelector(
-    ({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
+  const { currentQueryEditor, database, latestQuery, hideLeftBar } =
+    useSelector(({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
+      const currentQueryEditor = {
+        ...queryEditor,
+        ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
+      };
+
       let { dbId, latestQueryId, hideLeftBar } = queryEditor;
       if (unsavedQueryEditor.id === queryEditor.id) {
         dbId = unsavedQueryEditor.dbId || dbId;
@@ -172,12 +177,12 @@ const SqlEditor = ({
         hideLeftBar = unsavedQueryEditor.hideLeftBar || hideLeftBar;
       }
       return {
+        currentQueryEditor,
         database: databases[dbId],
         latestQuery: queries[latestQueryId],
         hideLeftBar,
       };
-    },
-  );
+    });
 
   const queryEditors = useSelector(({ sqlLab }) => sqlLab.queryEditors);
 
@@ -608,11 +613,10 @@ const SqlEditor = ({
       >
         <div ref={northPaneRef} className="north-pane">
           <AceEditorWrapper
-            actions={actions}
             autocomplete={autocompleteEnabled}
             onBlur={setQueryEditorAndSaveSql}
             onChange={onSqlChanged}
-            queryEditor={queryEditor}
+            queryEditor={currentQueryEditor}
             database={database}
             extendedTables={tables}
             height={`${aceEditorHeight}px`}