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/SqlEditor/SqlEditor.test.jsx

@@ -40,7 +40,12 @@ import {
 } from 'src/SqlLab/actions/sqlLab';
 import { EmptyStateBig } from 'src/components/EmptyState';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
-import { initialState, queries, table } from 'src/SqlLab/fixtures';
+import {
+  initialState,
+  queries,
+  table,
+  defaultQueryEditor,
+} from 'src/SqlLab/fixtures';
 
 const MOCKED_SQL_EDITOR_HEIGHT = 500;
 
@@ -48,7 +53,31 @@ fetchMock.get('glob:*/api/v1/database/*', { result: [] });
 
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
-const store = mockStore(initialState);
+const store = mockStore({
+  ...initialState,
+  sqlLab: {
+    ...initialState.sqlLab,
+    databases: {
+      dbid1: {
+        allow_ctas: false,
+        allow_cvas: false,
+        allow_dml: false,
+        allow_file_upload: false,
+        allow_multi_schema_metadata_fetch: 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',
+    },
+  },
+});
 
 describe('SqlEditor', () => {
   const mockedProps = {
@@ -57,21 +86,9 @@ describe('SqlEditor', () => {
       queryEditorSetSelectedText,
       queryEditorSetSchemaOptions,
       addDangerToast: jest.fn(),
+      removeDataPreview: jest.fn(),
     },
-    database: {
-      allow_ctas: false,
-      allow_cvas: false,
-      allow_dml: false,
-      allow_file_upload: false,
-      allow_multi_schema_metadata_fetch: false,
-      allow_run_async: false,
-      backend: 'postgresql',
-      database_name: 'examples',
-      expose_in_sqllab: true,
-      force_ctas_schema: null,
-      id: 1,
-    },
-    queryEditorId: initialState.sqlLab.queryEditors[0].id,
+    queryEditor: initialState.sqlLab.queryEditors[0],
     latestQuery: queries[0],
     tables: [table],
     getHeight: () => '100px',
@@ -94,8 +111,8 @@ describe('SqlEditor', () => {
     );
 
   it('does not render SqlEditor if no db selected', () => {
-    const database = {};
-    const updatedProps = { ...mockedProps, database };
+    const queryEditor = initialState.sqlLab.queryEditors[1];
+    const updatedProps = { ...mockedProps, queryEditor };
     const wrapper = buildWrapper(updatedProps);
     expect(wrapper.find(EmptyStateBig)).toExist();
   });