fix(sqllab): perf regression on #21532 refactor (#21632)

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

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useEffect } from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Row, Col } from 'src/components';
 import { Input, TextArea } from 'src/components/Input';
 import { t, styled } from '@superset-ui/core';
@@ -31,10 +30,11 @@ import {
   ISaveableDatasource,
 } from 'src/SqlLab/components/SaveDatasetModal';
 import { getDatasourceAsSaveableDataset } from 'src/utils/datasourceUtils';
-import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
+import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
+import { QueryEditor } from 'src/SqlLab/types';
 
 interface SaveQueryProps {
-  queryEditor: QueryEditor;
+  queryEditorId: string;
   columns: ISaveableDatasource['columns'];
   onSave: (arg0: QueryPayload) => void;
   onUpdate: (arg0: QueryPayload) => void;
@@ -43,30 +43,22 @@ interface SaveQueryProps {
 }
 
 type QueryPayload = {
-  autorun: boolean;
-  dbId: number;
+  name: string;
   description?: string;
   id?: string;
-  latestQueryId: string;
-  queryLimit: number;
-  remoteId: number;
-  schema: string;
-  schemaOptions: Array<{
-    label: string;
-    title: string;
-    value: string;
-  }>;
-  selectedText: string | null;
-  sql: string;
-  tableOptions: Array<{
-    label: string;
-    schema: string;
-    title: string;
-    type: string;
-    value: string;
-  }>;
-  name: string;
-};
+} & Pick<
+  QueryEditor,
+  | 'autorun'
+  | 'dbId'
+  | 'schema'
+  | 'sql'
+  | 'selectedText'
+  | 'remoteId'
+  | 'latestQueryId'
+  | 'queryLimit'
+  | 'tableOptions'
+  | 'schemaOptions'
+>;
 
 const Styles = styled.span`
   span[role='img'] {
@@ -81,20 +73,33 @@ const Styles = styled.span`
 `;
 
 export default function SaveQuery({
-  queryEditor,
+  queryEditorId,
   onSave = () => {},
   onUpdate,
   saveQueryWarning = null,
   database,
   columns,
 }: SaveQueryProps) {
-  const query = useSelector<SqlLabRootState, QueryEditor>(
-    ({ sqlLab: { unsavedQueryEditor } }) => ({
+  const queryEditor = useQueryEditor(queryEditorId, [
+    'autorun',
+    'name',
+    'description',
+    'remoteId',
+    'dbId',
+    'latestQueryId',
+    'queryLimit',
+    'schema',
+    'schemaOptions',
+    'selectedText',
+    'sql',
+    'tableOptions',
+  ]);
+  const query = useMemo(
+    () => ({
       ...queryEditor,
-      ...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
       columns,
     }),
-    shallowEqual,
+    [queryEditor, columns],
   );
   const defaultLabel = query.name || query.description || t('Undefined');
   const [description, setDescription] = useState<string>(
@@ -114,12 +119,12 @@ export default function SaveQuery({
     </Menu>
   );
 
-  const queryPayload = () =>
-    ({
-      ...query,
-      name: label,
-      description,
-    } as any as QueryPayload);
+  const queryPayload = () => ({
+    ...query,
+    name: label,
+    description,
+    dbId: query.dbId ?? 0,
+  });
 
   useEffect(() => {
     if (!isSaved) setLabel(defaultLabel);