From 8d2938144674e0f29fba2cb13a4d62b9d08feb03 Mon Sep 17 00:00:00 2001
From: Moriah Kreeger <moar.riah@gmail.com>
Date: Wed, 16 Dec 2020 14:38:29 -0800
Subject: [PATCH] reset active tab on open (#12048)

---
 .../views/CRUD/data/database/DatabaseModal.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index b8f061c1b..9f14afe7b 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -39,6 +39,8 @@ interface DatabaseModalProps {
   database?: DatabaseObject | null; // If included, will go into edit mode
 }
 
+const DEFAULT_TAB_KEY = '1';
+
 const StyledIcon = styled(Icon)`
   margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
 `;
@@ -129,6 +131,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [disableSave, setDisableSave] = useState<boolean>(true);
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
+  const [tabKey, setTabKey] = useState<string>(DEFAULT_TAB_KEY);
 
   const isEditMode = database !== null;
   const defaultExtra =
@@ -291,12 +294,14 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   ) {
     if (database && database.id !== null && !dbLoading) {
       const id = database.id || 0;
+      setTabKey(DEFAULT_TAB_KEY);
 
       fetchResource(id).then(() => {
         setDB(dbFetched);
       });
     }
   } else if (!isEditMode && (!db || db.id || (isHidden && show))) {
+    setTabKey(DEFAULT_TAB_KEY);
     setDB({
       database_name: '',
       sqlalchemy_uri: '',
@@ -313,6 +318,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setIsHidden(false);
   }
 
+  const tabChange = (key: string) => {
+    setTabKey(key);
+  };
+
   return (
     <Modal
       name="database"
@@ -330,7 +339,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         </h4>
       }
     >
-      <Tabs defaultActiveKey="1">
+      <Tabs
+        defaultActiveKey={DEFAULT_TAB_KEY}
+        activeKey={tabKey}
+        onTabClick={tabChange}
+      >
         <Tabs.TabPane
           tab={
             <span>