perf(sqllab): Rendering perf improvement using immutable state (#20877)

* perf(sqllab): Rendering perf improvement using immutable state

- keep queryEditors immutable during active state
- add unsavedQueryEditor to store all active changes
- refactor each component to subscribe the related unsaved editor state only

* revert ISaveableDatasource type cast

* missing trigger prop

* a default of an empty object and optional operator

superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { render, waitFor } from 'spec/helpers/testing-library';
+import { QueryEditor } from 'src/SqlLab/types';
+import { Store } from 'redux';
+import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
+import {
+  queryEditorSetSelectedText,
+  queryEditorSetFunctionNames,
+  addTable,
+} from 'src/SqlLab/actions/sqlLab';
+import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
+import { AsyncAceEditorProps } from 'src/components/AsyncAceEditor';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+jest.mock('src/components/Select', () => () => (
+  <div data-test="mock-deprecated-select" />
+));
+jest.mock('src/components/Select/Select', () => () => (
+  <div data-test="mock-deprecated-select-select" />
+));
+jest.mock('src/components/Select/AsyncSelect', () => () => (
+  <div data-test="mock-deprecated-async-select" />
+));
+
+jest.mock('src/components/AsyncAceEditor', () => ({
+  FullSQLEditor: (props: AsyncAceEditorProps) => (
+    <div data-test="react-ace">{JSON.stringify(props)}</div>
+  ),
+}));
+
+const setup = (queryEditor: QueryEditor, store?: Store) =>
+  render(
+    <AceEditorWrapper
+      queryEditor={queryEditor}
+      actions={{
+        queryEditorSetSelectedText,
+        queryEditorSetFunctionNames,
+        addTable,
+      }}
+      height="100px"
+      hotkeys={[]}
+      database={{}}
+      onChange={jest.fn()}
+      onBlur={jest.fn()}
+      autocomplete
+    />,
+    {
+      useRedux: true,
+      ...(store && { store }),
+    },
+  );
+
+describe('AceEditorWrapper', () => {
+  it('renders ace editor including sql value', async () => {
+    const { getByTestId } = setup(defaultQueryEditor, mockStore(initialState));
+    await waitFor(() => expect(getByTestId('react-ace')).toBeInTheDocument());
+
+    expect(getByTestId('react-ace')).toHaveTextContent(
+      JSON.stringify({ value: defaultQueryEditor.sql }).slice(1, -1),
+    );
+  });
+
+  it('renders sql from unsaved change', () => {
+    const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
+    const { getByTestId } = setup(
+      defaultQueryEditor,
+      mockStore({
+        ...initialState,
+        sqlLab: {
+          ...initialState.sqlLab,
+          unsavedQueryEditor: {
+            id: defaultQueryEditor.id,
+            sql: expectedSql,
+          },
+        },
+      }),
+    );
+
+    expect(getByTestId('react-ace')).toHaveTextContent(
+      JSON.stringify({ value: expectedSql }).slice(1, -1),
+    );
+  });
+
+  it('renders current sql for unrelated unsaved changes', () => {
+    const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
+    const { getByTestId } = setup(
+      defaultQueryEditor,
+      mockStore({
+        ...initialState,
+        sqlLab: {
+          ...initialState.sqlLab,
+          unsavedQueryEditor: {
+            id: `${defaultQueryEditor.id}-other`,
+            sql: expectedSql,
+          },
+        },
+      }),
+    );
+
+    expect(getByTestId('react-ace')).not.toHaveTextContent(
+      JSON.stringify({ value: expectedSql }).slice(1, -1),
+    );
+    expect(getByTestId('react-ace')).toHaveTextContent(
+      JSON.stringify({ value: defaultQueryEditor.sql }).slice(1, -1),
+    );
+  });
+});

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

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React from 'react';
+import { connect } from 'react-redux';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import {
@@ -30,7 +31,7 @@ import {
   AceCompleterKeyword,
   FullSQLEditor as AceEditor,
 } from 'src/components/AsyncAceEditor';
-import { QueryEditor } from 'src/SqlLab/types';
+import { QueryEditor, SchemaOption, SqlLabRootState } from 'src/SqlLab/types';
 
 type HotKey = {
   key: string;
@@ -39,7 +40,13 @@ type HotKey = {
   func: () => void;
 };
 
-interface Props {
+type OwnProps = {
+  queryEditor: QueryEditor;
+  extendedTables: Array<{ name: string; columns: any[] }>;
+  autocomplete: boolean;
+  onChange: (sql: string) => void;
+  onBlur: (sql: string) => void;
+  database: any;
   actions: {
     queryEditorSetSelectedText: (edit: any, text: null | string) => void;
     queryEditorSetFunctionNames: (queryEditor: object, dbId: number) => void;
@@ -50,19 +57,19 @@ interface Props {
       schema: any,
     ) => void;
   };
-  autocomplete: boolean;
-  onBlur: (sql: string) => void;
+  hotkeys: HotKey[];
+  height: string;
+};
+
+type ReduxProps = {
+  queryEditor: QueryEditor;
   sql: string;
-  database: any;
-  schemas: any[];
+  schemas: SchemaOption[];
   tables: any[];
   functionNames: string[];
-  extendedTables: Array<{ name: string; columns: any[] }>;
-  queryEditor: QueryEditor;
-  height: string;
-  hotkeys: HotKey[];
-  onChange: (sql: string) => void;
-}
+};
+
+type Props = ReduxProps & OwnProps;
 
 interface State {
   sql: string;
@@ -286,4 +293,22 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
   }
 }
 
-export default AceEditorWrapper;
+function mapStateToProps(
+  { sqlLab: { unsavedQueryEditor } }: SqlLabRootState,
+  { queryEditor }: OwnProps,
+) {
+  const currentQueryEditor = {
+    ...queryEditor,
+    ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
+  };
+  return {
+    queryEditor: currentQueryEditor,
+    sql: currentQueryEditor.sql,
+    schemas: currentQueryEditor.schemaOptions || [],
+    tables: currentQueryEditor.tableOptions,
+    functionNames: currentQueryEditor.functionNames,
+  };
+}
+export default connect<ReduxProps, {}, OwnProps>(mapStateToProps)(
+  AceEditorWrapper,
+);