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/SqlEditorLeftBar/index.tsx

@@ -32,7 +32,7 @@ import Collapse from 'src/components/Collapse';
 import Icons from 'src/components/Icons';
 import { TableSelectorMultiple } from 'src/components/TableSelector';
 import { IconTooltip } from 'src/components/IconTooltip';
-import { QueryEditor } from 'src/SqlLab/types';
+import { QueryEditor, SchemaOption } from 'src/SqlLab/types';
 import { DatabaseObject } from 'src/components/DatabaseSelector';
 import { EmptyStateSmall } from 'src/components/EmptyState';
 import {
@@ -55,7 +55,10 @@ interface actionsTypes {
   setDatabases: (arg0: any) => {};
   addDangerToast: (msg: string) => void;
   queryEditorSetSchema: (queryEditor: QueryEditor, schema?: string) => void;
-  queryEditorSetSchemaOptions: () => void;
+  queryEditorSetSchemaOptions: (
+    queryEditor: QueryEditor,
+    options: SchemaOption[],
+  ) => void;
   queryEditorSetTableOptions: (
     queryEditor: QueryEditor,
     options: Array<any>,
@@ -70,7 +73,6 @@ interface SqlEditorLeftBarProps {
   actions: actionsTypes & TableElementProps['actions'];
   database: DatabaseObject;
   setEmptyState: Dispatch<SetStateAction<boolean>>;
-  showDisabled: boolean;
 }
 
 const StyledScrollbarContainer = styled.div`
@@ -239,6 +241,15 @@ export default function SqlEditorLeftBar({
     [actions],
   );
 
+  const handleSchemasLoad = React.useCallback(
+    (options: Array<any>) => {
+      if (queryEditorRef.current) {
+        actions.queryEditorSetSchemaOptions(queryEditorRef.current, options);
+      }
+    },
+    [actions],
+  );
+
   return (
     <div className="SqlEditorLeftBar">
       <TableSelectorMultiple
@@ -249,7 +260,7 @@ export default function SqlEditorLeftBar({
         handleError={actions.addDangerToast}
         onDbChange={onDbChange}
         onSchemaChange={handleSchemaChange}
-        onSchemasLoad={actions.queryEditorSetSchemaOptions}
+        onSchemasLoad={handleSchemasLoad}
         onTableSelectChange={onTablesChange}
         onTablesLoad={handleTablesLoad}
         schema={queryEditor.schema}