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

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { useState, useEffect } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
 import { Row, Col } from 'src/components';
 import { Input, TextArea } from 'src/components/Input';
 import { t, styled } from '@superset-ui/core';
@@ -25,12 +26,16 @@ import { Menu } from 'src/components/Menu';
 import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
 import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';
-import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
+import {
+  SaveDatasetModal,
+  ISaveableDatasource,
+} from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
+import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
 
 interface SaveQueryProps {
-  query: QueryPayload;
-  defaultLabel: string;
+  queryEditor: QueryEditor;
+  columns: ISaveableDatasource['columns'];
   onSave: (arg0: QueryPayload) => void;
   onUpdate: (arg0: QueryPayload) => void;
   saveQueryWarning: string | null;
@@ -76,13 +81,22 @@ const Styles = styled.span`
 `;
 
 export default function SaveQuery({
-  query,
-  defaultLabel = t('Undefined'),
+  queryEditor,
   onSave = () => {},
   onUpdate,
   saveQueryWarning = null,
   database,
+  columns,
 }: SaveQueryProps) {
+  const query = useSelector<SqlLabRootState, QueryEditor>(
+    ({ sqlLab: { unsavedQueryEditor } }) => ({
+      ...queryEditor,
+      ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
+      columns,
+    }),
+    shallowEqual,
+  );
+  const defaultLabel = query.name || query.description || t('Undefined');
   const [description, setDescription] = useState<string>(
     query.description || '',
   );
@@ -100,11 +114,12 @@ export default function SaveQuery({
     </Menu>
   );
 
-  const queryPayload = () => ({
-    ...query,
-    name: label,
-    description,
-  });
+  const queryPayload = () =>
+    ({
+      ...query,
+      name: label,
+      description,
+    } as any as QueryPayload);
 
   useEffect(() => {
     if (!isSaved) setLabel(defaultLabel);