From 725afc3848dd6e109adcaca9ac85ce833fcf080e Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Tue, 18 Jun 2024 11:45:09 -0700
Subject: [PATCH] fix(sqllab): invalid empty state on switch tab (#29278)

---
 .../src/SqlLab/components/SqlEditor/index.tsx        | 12 ++++--------
 .../src/SqlLab/components/SqlEditorLeftBar/index.tsx | 12 +-----------
 .../src/SqlLab/reducers/getInitialState.ts           |  1 +
 3 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 1650968455b08..dd22442deffeb 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/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>
           )}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index f09403506867b..c91036a7251f2 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -16,14 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  useEffect,
-  useCallback,
-  useMemo,
-  useState,
-  Dispatch,
-  SetStateAction,
-} from 'react';
+import { useEffect, useCallback, useMemo, useState } 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));
   };
 
diff --git a/superset-frontend/src/SqlLab/reducers/getInitialState.ts b/superset-frontend/src/SqlLab/reducers/getInitialState.ts
index 6052daedbd633..ad0cbd8033079 100644
--- a/superset-frontend/src/SqlLab/reducers/getInitialState.ts
+++ b/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 = {