This is an automated email from the ASF dual-hosted git repository.

hugh pushed a commit to branch pexdax/enable-connect
in repository https://gitbox.apache.org/repos/asf/superset.git

commit b1bc8f49313870c80633d04b440401b25c87dc93
Author: hughhhh <[email protected]>
AuthorDate: Fri Jun 4 11:54:56 2021 -0400

    fix add bug and set disable on connect button
---
 .../DatabaseModal/DatabaseConnectionForm.tsx       | 12 +++----
 .../CRUD/data/database/DatabaseModal/index.tsx     | 42 +++++++++++++---------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git 
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
 
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index 6f6cc70..0005cf2 100644
--- 
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ 
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -56,7 +56,7 @@ const hostField = ({
   <ValidatedInput
     id="host"
     name="host"
-    value={db?.parameters?.host || ''}
+    value={db?.parameters?.host}
     required={required}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.host}
@@ -77,7 +77,7 @@ const portField = ({
     id="port"
     name="port"
     required={required}
-    value={db?.parameters?.port || ''}
+    value={db?.parameters?.port}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.port}
     placeholder="e.g. 5432"
@@ -97,7 +97,7 @@ const databaseField = ({
     id="database"
     name="database"
     required={required}
-    value={db?.parameters?.database || ''}
+    value={db?.parameters?.database}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.database}
     placeholder="e.g. world_population"
@@ -117,7 +117,7 @@ const usernameField = ({
     id="username"
     name="username"
     required={required}
-    value={db?.parameters?.username || ''}
+    value={db?.parameters?.username}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.username}
     placeholder="e.g. Analytics"
@@ -137,7 +137,7 @@ const passwordField = ({
     name="password"
     required={required}
     type="password"
-    value={db?.parameters?.password || ''}
+    value={db?.parameters?.password}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.password}
     placeholder="e.g. ********"
@@ -156,7 +156,7 @@ const displayField = ({
     id="database_name"
     name="database_name"
     required={required}
-    value={db?.database_name || ''}
+    value={db?.database_name}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.database_name}
     placeholder=""
diff --git 
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx 
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index 9527518..6391566 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -132,6 +132,7 @@ function dbReducer(
   const trimmedState = {
     ...(state || {}),
   };
+
   switch (action.type) {
     case ActionType.inputChange:
       if (action.payload.type === 'checkbox') {
@@ -346,6 +347,24 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> 
= ({
     </div>
   );
 
+  const dbModel: DatabaseForm =
+    availableDbs?.databases?.find(
+      (available: { engine: string | undefined }) =>
+        // TODO: we need a centralized engine in one place
+        available.engine === db?.engine || db?.backend,
+    ) || {};
+
+  const disableSave =
+    !hasConnectedDb &&
+    (useSqlAlchemyForm
+      ? !(db?.database_name?.trim() && db?.sqlalchemy_uri)
+      : // disable the button if there is no dbModel.parameters or if
+        // any required fields are falsy
+        !dbModel?.parameters ||
+        !!dbModel.parameters.required.filter(field =>
+          FALSY_FORM_VALUES.includes(db?.parameters?.[field]),
+        ).length);
+
   const renderModalFooter = () =>
     db // if db show back + connect
       ? [
@@ -358,7 +377,12 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> 
= ({
             Back
           </Button>,
           !hasConnectedDb ? ( // if hasConnectedDb show back + finish
-            <Button key="submit" type="primary" onClick={onSave}>
+            <Button
+              key="submit"
+              type="primary"
+              onClick={onSave}
+              disabled={disableSave}
+            >
               Connect
             </Button>
           ) : (
@@ -400,22 +424,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> 
= ({
     setTabKey(key);
   };
 
-  const dbModel: DatabaseForm =
-    availableDbs?.databases?.find(
-      (available: { engine: string | undefined }) =>
-        // TODO: we need a centralized engine in one place
-        available.engine === db?.engine || db?.backend,
-    ) || {};
-  const disableSave =
-    !hasConnectedDb &&
-    (useSqlAlchemyForm
-      ? !(db?.database_name?.trim() && db?.sqlalchemy_uri)
-      : // disable the button if there is no dbModel.parameters or if
-        // any required fields are falsy
-        !dbModel?.parameters ||
-        !!dbModel.parameters.required.filter(field =>
-          FALSY_FORM_VALUES.includes(db?.parameters?.[field]),
-        ).length);
   return useTabLayout ? (
     <Modal
       css={(theme: SupersetTheme) => [

Reply via email to