reset active tab on open (#12048)

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>