feat: add Back button to extra options

superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx

@@ -50,6 +50,7 @@ const ModalHeader = ({
   db,
   dbName,
   dbModel,
+  editNewDb,
 }: {
   isLoading: boolean;
   isEditMode: boolean;
@@ -58,6 +59,7 @@ const ModalHeader = ({
   db: Partial<DatabaseObject> | null;
   dbName: string;
   dbModel: DatabaseForm;
+  editNewDb?: boolean;
 }) => {
   const isEditHeader = (
     <>
@@ -102,7 +104,14 @@ const ModalHeader = ({
       <p className="helper"> Step 2 of 3 </p>
       <h4>Enter the required {dbModel.name} credentials</h4>
       <p className="helper">
-        Need help? Learn more about connecting to {dbModel.name}.
+        Need help? Learn more about{' '}
+        <a
+          href={documentationLink(db?.engine)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          connecting to {dbModel.name}.
+        </a>
       </p>
     </StyledFormHeader>
   );
@@ -122,10 +131,10 @@ const ModalHeader = ({
   if (useSqlAlchemyForm) {
     return useSqlAlchemyFormHeader;
   }
-  if (hasConnectedDb) {
+  if (hasConnectedDb && !editNewDb) {
     return hasConnectedDbHeader;
   }
-  if (db) {
+  if (db || editNewDb) {
     return hasDbHeader;
   }
   return noDbHeader;

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -296,6 +296,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   ] = useDatabaseValidation();
   const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false);
   const [dbName, setDbName] = useState('');
+  const [editNewDb, setEditNewDb] = useState<boolean>(false);
   const [isLoading, setLoading] = useState<boolean>(false);
   const conf = useCommonConf();
   const dbImages = getDatabaseImages();
@@ -350,6 +351,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setDB({ type: ActionType.reset });
     setHasConnectedDb(false);
     setValidationErrors(null); // reset validation errors on close
+    setEditNewDb(false);
     onHide();
   };
 
@@ -405,7 +407,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         if (onDatabaseAdd) {
           onDatabaseAdd();
         }
-        onClose();
+        if (!editNewDb) {
+          onClose();
+        }
       }
     } else if (db) {
       // Create
@@ -438,6 +442,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         }
       }
     }
+    setEditNewDb(false);
     setLoading(false);
   };
 
@@ -537,10 +542,19 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     </div>
   );
 
-  const renderModalFooter = () =>
-    db // if db show back + connect
-      ? [
-          !hasConnectedDb && (
+  const handleBackButton = () => {
+    if (dbFetched) {
+      fetchResource(dbFetched.id as number);
+    }
+    setEditNewDb(true);
+  };
+
+  const renderModalFooter = () => {
+    if (db) {
+      // if db show back + connenct
+      if (!hasConnectedDb || editNewDb) {
+        return (
+          <>
             <StyledFooterButton
               key="back"
               onClick={() => {
@@ -549,26 +563,34 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             >
               Back
             </StyledFooterButton>
-          ),
-          !hasConnectedDb ? ( // if hasConnectedDb show back + finish
             <StyledFooterButton
               key="submit"
               buttonStyle="primary"
               onClick={onSave}
             >
               Connect
             </StyledFooterButton>
-          ) : (
-            <StyledFooterButton
-              key="submit"
-              buttonStyle="primary"
-              onClick={onClose}
-            >
-              Finish
-            </StyledFooterButton>
-          ),
-        ]
-      : [];
+          </>
+        );
+      }
+
+      return (
+        <>
+          <StyledFooterButton key="back" onClick={handleBackButton}>
+            Back
+          </StyledFooterButton>
+          <StyledFooterButton
+            key="submit"
+            buttonStyle="primary"
+            onClick={onClose}
+          >
+            Finish
+          </StyledFooterButton>
+        </>
+      );
+    }
+    return [];
+  };
 
   const renderEditModalFooter = () => (
     <>
@@ -613,6 +635,68 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     setTabKey(key);
   };
 
+  const renderExtraOptions = () => {
+    if (!editNewDb) {
+      return (
+        <ExtraOptions
+          db={db as DatabaseObject}
+          onInputChange={({ target }: { target: HTMLInputElement }) =>
+            onChange(ActionType.inputChange, {
+              type: target.type,
+              name: target.name,
+              checked: target.checked,
+              value: target.value,
+            })
+          }
+          onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
+            onChange(ActionType.textChange, {
+              name: target.name,
+              value: target.value,
+            })
+          }
+          onEditorChange={(payload: { name: string; json: any }) =>
+            onChange(ActionType.editorChange, payload)
+          }
+          onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
+            onChange(ActionType.extraInputChange, {
+              type: target.type,
+              name: target.name,
+              checked: target.checked,
+              value: target.value,
+            });
+          }}
+          onExtraEditorChange={(payload: { name: string; json: any }) =>
+            onChange(ActionType.extraEditorChange, payload)
+          }
+        />
+      );
+    }
+    return (
+      <DatabaseConnectionForm
+        isEditMode
+        sslForced={sslForced}
+        dbModel={dbModel}
+        db={dbFetched as DatabaseObject}
+        onParametersChange={({ target }: { target: HTMLInputElement }) =>
+          onChange(ActionType.parametersChange, {
+            type: target.type,
+            name: target.name,
+            checked: target.checked,
+            value: target.value,
+          })
+        }
+        onChange={({ target }: { target: HTMLInputElement }) =>
+          onChange(ActionType.textChange, {
+            name: target.name,
+            value: target.value,
+          })
+        }
+        getValidation={() => getValidation(db)}
+        validationErrors={validationErrors}
+      />
+    );
+  };
+
   const isDynamic = (engine: string | undefined) =>
     availableDbs?.databases.filter(
       (DB: DatabaseObject) => DB.backend === engine || DB.engine === engine,
@@ -807,39 +891,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             db={db}
             dbName={dbName}
             dbModel={dbModel}
+            editNewDb={editNewDb}
           />
-
-          <ExtraOptions
-            db={db as DatabaseObject}
-            onInputChange={({ target }: { target: HTMLInputElement }) =>
-              onChange(ActionType.inputChange, {
-                type: target.type,
-                name: target.name,
-                checked: target.checked,
-                value: target.value,
-              })
-            }
-            onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-              onChange(ActionType.textChange, {
-                name: target.name,
-                value: target.value,
-              })
-            }
-            onEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.editorChange, payload)
-            }
-            onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-              onChange(ActionType.extraInputChange, {
-                type: target.type,
-                name: target.name,
-                checked: target.checked,
-                value: target.value,
-              });
-            }}
-            onExtraEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.extraEditorChange, payload)
-            }
-          />
+          {renderExtraOptions()}
         </>
       ) : (
         <>
@@ -875,8 +929,8 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     css={(theme: SupersetTheme) => antDAlertStyles(theme)}
                     type="info"
                     showIcon
-                    message={t('Whitelisting IPs')}
-                    description={connectionAlert.WHITELISTED_IPS}
+                    message={t('IP Allowlist')}
+                    description={connectionAlert.ALLOWED_IPS}
                   />
                 )}
                 <DatabaseConnectionForm

superset/db_engine_specs/base.py

@@ -1445,6 +1445,17 @@ def validate_parameters(
         port = parameters.get("port", None)
         if not port:
             return errors
+        try:
+            port = int(port)
+        except (ValueError, TypeError):
+            errors.append(
+                SupersetError(
+                    message="Port must be a valid integer",
+                    error_type=SupersetErrorType.CONNECTION_INVALID_PORT_ERROR,
+                    level=ErrorLevel.ERROR,
+                    extra={"invalid": ["port"]},
+                ),
+            )
         if not (isinstance(port, int) and 0 <= port < 2 ** 16):
             errors.append(
                 SupersetError(