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

@@ -24,15 +24,20 @@ import Button from 'src/components/Button';
 import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import { detectOS } from 'src/utils/common';
-import { QueryButtonProps } from 'src/SqlLab/types';
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  QueryEditor,
+  SqlLabRootState,
+  QueryButtonProps,
+} from 'src/SqlLab/types';
+import { getUpToDateQuery } from 'src/SqlLab/actions/sqlLab';
 
-interface Props {
+export interface Props {
+  queryEditor: QueryEditor;
   allowAsync: boolean;
   queryState?: string;
   runQuery: (c?: boolean) => void;
-  selectedText?: string;
   stopQuery: () => void;
-  sql: string;
   overlayCreateAsMenu: typeof Menu | null;
 }
 
@@ -83,16 +88,27 @@ const StyledButton = styled.span`
 
 const RunQueryActionButton = ({
   allowAsync = false,
+  queryEditor,
   queryState,
-  selectedText,
-  sql = '',
   overlayCreateAsMenu,
   runQuery,
   stopQuery,
 }: Props) => {
   const theme = useTheme();
-
   const userOS = detectOS();
+  const { selectedText, sql } = useSelector<
+    SqlLabRootState,
+    Pick<QueryEditor, 'selectedText' | 'sql'>
+  >(rootState => {
+    const currentQueryEditor = getUpToDateQuery(
+      rootState,
+      queryEditor,
+    ) as unknown as QueryEditor;
+    return {
+      selectedText: currentQueryEditor.selectedText,
+      sql: currentQueryEditor.sql,
+    };
+  }, shallowEqual);
 
   const shouldShowStopBtn =
     !!queryState && ['running', 'pending'].indexOf(queryState) > -1;
@@ -101,7 +117,7 @@ const RunQueryActionButton = ({
     ? (DropdownButton as React.FC)
     : Button;
 
-  const isDisabled = !sql.trim();
+  const isDisabled = !sql || !sql.trim();
 
   const stopButtonTooltipText = useMemo(
     () =>