fix(sqllab): invalid empty state on switch tab (#29278)

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

@@ -303,7 +303,10 @@ const SqlEditor: FC<Props> = ({
   );
   const [showCreateAsModal, setShowCreateAsModal] = useState(false);
   const [createAs, setCreateAs] = useState('');
-  const [showEmptyState, setShowEmptyState] = useState(false);
+  const showEmptyState = useMemo(
+    () => !database || isEmpty(database),
+    [database],
+  );
 
   const sqlEditorRef = useRef<HTMLDivElement>(null);
   const northPaneRef = useRef<HTMLDivElement>(null);
@@ -562,12 +565,6 @@ const SqlEditor: FC<Props> = ({
     // TODO: Remove useEffectEvent deps once https://github.com/facebook/react/pull/25881 is released
   }, [onBeforeUnload, loadQueryEditor, isActive]);
 
-  useEffect(() => {
-    if (!database || isEmpty(database)) {
-      setShowEmptyState(true);
-    }
-  }, [database]);
-
   useEffect(() => {
     // setup hotkeys
     const hotkeys = getHotkeyConfig();
@@ -911,7 +908,6 @@ const SqlEditor: FC<Props> = ({
               <SqlEditorLeftBar
                 database={database}
                 queryEditorId={queryEditor.id}
-                setEmptyState={bool => setShowEmptyState(bool)}
               />
             </StyledSidebar>
           )}

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

@@ -16,14 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
+import { useEffect, useCallback, useMemo, useState } from 'react';
-  useEffect,
-  useCallback,
-  useMemo,
-  useState,
-  Dispatch,
-  SetStateAction,
-} from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import querystring from 'query-string';
 
@@ -60,7 +53,6 @@ export interface SqlEditorLeftBarProps {
   queryEditorId: string;
   height?: number;
   database?: DatabaseObject;
-  setEmptyState?: Dispatch<SetStateAction<boolean>>;
 }
 
 const StyledScrollbarContainer = styled.div`
@@ -108,7 +100,6 @@ const SqlEditorLeftBar = ({
   database,
   queryEditorId,
   height = 500,
-  setEmptyState,
 }: SqlEditorLeftBarProps) => {
   const tables = useSelector<SqlLabRootState, Table[]>(
     ({ sqlLab }) =>
@@ -148,7 +139,6 @@ const SqlEditorLeftBar = ({
   }, []);
 
   const onDbChange = ({ id: dbId }: { id: number }) => {
-    setEmptyState?.(false);
     dispatch(queryEditorSetDb(queryEditor, dbId));
   };
 

superset-frontend/src/SqlLab/reducers/getInitialState.ts

@@ -102,6 +102,7 @@ export default function getInitialState({
         id: id.toString(),
         loaded: false,
         name: label,
+        dbId: undefined,
       };
     }
     queryEditors = {