From 42bcc0a9c5af0a61dcb7cb5636de3c40d2e362a3 Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Tue, 17 May 2022 06:34:22 -0400
Subject: [PATCH 1/8] fix(database): make to display validation error msg when
 all cases

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 392df834dd7b2..24066ce1cbfa3 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1088,7 +1088,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     let alertErrors: string[] = [];
     if (isEmpty(dbErrors) === false) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
-    } else if (db?.engine === Engines.Snowflake) {
+    } else if (isEmpty(validationErrors) === false) {
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
           ? [validationErrors?.description]

From 5c6bd51d2508203d6ee9de636c4a0b4aa2957321 Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Tue, 17 May 2022 16:15:51 -0400
Subject: [PATCH 2/8] fix(db): make to update the alert error condition

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 24066ce1cbfa3..138021422c2d4 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1088,7 +1088,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     let alertErrors: string[] = [];
     if (isEmpty(dbErrors) === false) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
-    } else if (isEmpty(validationErrors) === false) {
+    } else if (!isEmpty(validationErrors)) {
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
           ? [validationErrors?.description]

From 5644890ef7a8986b118753f2d3375204f7aa24a1 Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Fri, 20 May 2022 14:08:29 -0400
Subject: [PATCH 3/8] fix(db): make to add error detail display

---
 .../data/database/DatabaseModal/index.tsx     | 54 ++++++++++++++++---
 1 file changed, 46 insertions(+), 8 deletions(-)

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 138021422c2d4..0fea63671c4da 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -30,6 +30,7 @@ import React, {
   useState,
   useReducer,
   Reducer,
+  ReactElement,
 } from 'react';
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
 import Tabs from 'src/components/Tabs';
@@ -447,6 +448,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [confirmedOverwrite, setConfirmedOverwrite] = useState<boolean>(false);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [importingModal, setImportingModal] = useState<boolean>(false);
+  const [errorDetailModal, setErrorDetailModal] = useState<boolean>(false);
 
   const conf = useCommonConf();
   const dbImages = getDatabaseImages();
@@ -818,9 +820,23 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     return false;
   };
 
+  const handleErrorDetailModal = () => {
+    setErrorDetailModal(!errorDetailModal);
+  };
+
   const renderModalFooter = () => {
     if (db) {
       // if db show back + connenct
+      if (errorDetailModal) {
+        return (
+          <>
+            <StyledFooterButton key="back" onClick={handleErrorDetailModal}>
+              {t('Back')}
+            </StyledFooterButton>
+          </>
+        );
+      }
+
       if (!hasConnectedDb || editNewDb) {
         return (
           <>
@@ -1085,13 +1101,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   // eslint-disable-next-line consistent-return
   const errorAlert = () => {
-    let alertErrors: string[] = [];
-    if (isEmpty(dbErrors) === false) {
+    let alertErrors: Array<ReactElement> = [];
+    if (isEmpty(dbErrors)) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
     } else if (!isEmpty(validationErrors)) {
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
-          ? [validationErrors?.description]
+          ? [
+              <>
+                {t('We are unable to connect to your database. Click ')}
+                <a
+                  className="additional-fields-alert-description"
+                  onClick={handleErrorDetailModal}
+                  role="button"
+                  tabIndex={0}
+                >
+                  {t('See more')}
+                </a>
+                {t(
+                  ' for database-provided information that may help troubleshoot the issue.',
+                )}
+              </>,
+            ]
           : [];
     }
 
@@ -1101,7 +1132,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           type="error"
           css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
           message={t('Database Creation Error')}
-          description={t(alertErrors[0])}
+          description={alertErrors[0]}
         />
       );
     }
@@ -1414,21 +1445,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     <Modal
       css={(theme: SupersetTheme) => [
         antDModalNoPaddingStyles,
-        antDModalStyles(theme),
+        !errorDetailModal && antDModalStyles(theme),
         formHelperStyles(theme),
         formStyles(theme),
       ]}
       name="database"
       onHandledPrimaryAction={onSave}
-      onHide={onClose}
+      onHide={errorDetailModal ? handleErrorDetailModal : onClose}
       primaryButtonName={hasConnectedDb ? t('Finish') : t('Connect')}
       width="500px"
       centered
       show={show}
-      title={<h4>{t('Connect a database')}</h4>}
+      title={errorDetailModal ? t('Error Detail') : t('Connect a database')}
       footer={renderModalFooter()}
     >
-      {hasConnectedDb ? (
+      {errorDetailModal ? (
+        <Alert
+          type="error"
+          css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
+          message={t('DB-Provided Error')}
+          description={t(validationErrors?.description)}
+        />
+      ) : hasConnectedDb ? (
         <>
           <ModalHeader
             isLoading={isLoading}

From 39f3243bc32c01dbd1a8084775a810ea7aef0ba8 Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Mon, 23 May 2022 11:12:45 -0400
Subject: [PATCH 4/8] fix(db): make to update error alert display by superset
 error style guide.

---
 .../ErrorMessage/ErrorAlert.test.tsx          |  6 ++
 .../components/ErrorMessage/ErrorAlert.tsx    |  7 ++
 .../ErrorMessageWithStackTrace.tsx            |  3 +
 .../data/database/DatabaseModal/index.tsx     | 72 ++++++-------------
 4 files changed, 38 insertions(+), 50 deletions(-)

diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
index 7133f25c9e5e5..d9fdf5efc8f71 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
@@ -31,6 +31,7 @@ const mockedProps = {
   subtitle: 'Error subtitle',
   title: 'Error title',
   source: 'dashboard' as ErrorSource,
+  description: 'we are unable to connect db.',
 };
 
 test('should render', () => {
@@ -63,6 +64,11 @@ test('should render the error title', () => {
   expect(screen.getByText('Error title')).toBeInTheDocument();
 });
 
+test('should render the error description', () => {
+  render(<ErrorAlert {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText('we are unable to connect db.')).toBeInTheDocument();
+});
+
 test('should render the error subtitle', () => {
   render(<ErrorAlert {...mockedProps} />, { useRedux: true });
   const button = screen.getByText('See more');
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index 3340c8ad6d3e7..b6203fd9b3185 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -87,6 +87,7 @@ interface ErrorAlertProps {
   source?: ErrorSource;
   subtitle: ReactNode;
   title: ReactNode;
+  description?: string;
 }
 
 export default function ErrorAlert({
@@ -96,6 +97,7 @@ export default function ErrorAlert({
   source = 'dashboard',
   subtitle,
   title,
+  description,
 }: ErrorAlertProps) {
   const theme = useTheme();
 
@@ -127,6 +129,11 @@ export default function ErrorAlert({
           </span>
         )}
       </div>
+      {description && (
+        <div className="error-body">
+          <p>{description}</p>
+        </div>
+      )}
       {isExpandable ? (
         <div className="error-body">
           <p>{subtitle}</p>
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
index c073cf0461b47..24117c444b9cd 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx
@@ -33,6 +33,7 @@ type Props = {
   copyText?: string;
   stackTrace?: string;
   source?: ErrorSource;
+  description?: string;
 };
 
 export default function ErrorMessageWithStackTrace({
@@ -43,6 +44,7 @@ export default function ErrorMessageWithStackTrace({
   link,
   stackTrace,
   source,
+  description,
 }: Props) {
   // Check if a custom error message component was registered for this message
   if (error) {
@@ -66,6 +68,7 @@ export default function ErrorMessageWithStackTrace({
       title={title}
       subtitle={subtitle}
       copyText={copyText}
+      description={description}
       source={source}
       body={
         link || stackTrace ? (
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 0fea63671c4da..9e47515d31c09 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -30,7 +30,6 @@ import React, {
   useState,
   useReducer,
   Reducer,
-  ReactElement,
 } from 'react';
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
 import Tabs from 'src/components/Tabs';
@@ -42,6 +41,7 @@ import IconButton from 'src/components/IconButton';
 import InfoTooltip from 'src/components/InfoTooltip';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import {
   testDatabaseConnection,
   useSingleViewResource,
@@ -63,7 +63,6 @@ import ExtraOptions from './ExtraOptions';
 import SqlAlchemyForm from './SqlAlchemyForm';
 import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
-  antDErrorAlertStyles,
   antDAlertStyles,
   antdWarningAlertStyles,
   StyledAlertMargin,
@@ -115,6 +114,10 @@ const TabsStyled = styled(Tabs)`
   }
 `;
 
+const ErrorAlertContainer = styled.div`
+  margin: 32px 16px;
+`;
+
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
@@ -448,7 +451,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [confirmedOverwrite, setConfirmedOverwrite] = useState<boolean>(false);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [importingModal, setImportingModal] = useState<boolean>(false);
-  const [errorDetailModal, setErrorDetailModal] = useState<boolean>(false);
 
   const conf = useCommonConf();
   const dbImages = getDatabaseImages();
@@ -820,23 +822,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     return false;
   };
 
-  const handleErrorDetailModal = () => {
-    setErrorDetailModal(!errorDetailModal);
-  };
-
   const renderModalFooter = () => {
     if (db) {
       // if db show back + connenct
-      if (errorDetailModal) {
-        return (
-          <>
-            <StyledFooterButton key="back" onClick={handleErrorDetailModal}>
-              {t('Back')}
-            </StyledFooterButton>
-          </>
-        );
-      }
-
       if (!hasConnectedDb || editNewDb) {
         return (
           <>
@@ -1101,38 +1089,25 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   // eslint-disable-next-line consistent-return
   const errorAlert = () => {
-    let alertErrors: Array<ReactElement> = [];
+    let alertErrors: string[] = [];
     if (isEmpty(dbErrors)) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
     } else if (!isEmpty(validationErrors)) {
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
           ? [
-              <>
-                {t('We are unable to connect to your database. Click ')}
-                <a
-                  className="additional-fields-alert-description"
-                  onClick={handleErrorDetailModal}
-                  role="button"
-                  tabIndex={0}
-                >
-                  {t('See more')}
-                </a>
-                {t(
-                  ' for database-provided information that may help troubleshoot the issue.',
-                )}
-              </>,
+              'We are unable to connect to your database. Click See more for database-provided information that may help troubleshoot the issue.',
             ]
           : [];
     }
 
     if (alertErrors.length) {
       return (
-        <Alert
-          type="error"
-          css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
-          message={t('Database Creation Error')}
-          description={alertErrors[0]}
+        <ErrorMessageWithStackTrace
+          title={t('Database Creation Error')}
+          description={t(alertErrors[0])}
+          subtitle={t(validationErrors?.description)}
+          copyText={t(validationErrors?.description)}
         />
       );
     }
@@ -1437,7 +1412,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               onChange(ActionType.extraEditorChange, payload);
             }}
           />
-          {showDBError && errorAlert()}
+          {showDBError && (
+            <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
+          )}
         </Tabs.TabPane>
       </TabsStyled>
     </Modal>
@@ -1445,28 +1422,21 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     <Modal
       css={(theme: SupersetTheme) => [
         antDModalNoPaddingStyles,
-        !errorDetailModal && antDModalStyles(theme),
+        antDModalStyles(theme),
         formHelperStyles(theme),
         formStyles(theme),
       ]}
       name="database"
       onHandledPrimaryAction={onSave}
-      onHide={errorDetailModal ? handleErrorDetailModal : onClose}
+      onHide={onClose}
       primaryButtonName={hasConnectedDb ? t('Finish') : t('Connect')}
       width="500px"
       centered
       show={show}
-      title={errorDetailModal ? t('Error Detail') : t('Connect a database')}
+      title={t('Connect a database')}
       footer={renderModalFooter()}
     >
-      {errorDetailModal ? (
-        <Alert
-          type="error"
-          css={(theme: SupersetTheme) => antDErrorAlertStyles(theme)}
-          message={t('DB-Provided Error')}
-          description={t(validationErrors?.description)}
-        />
-      ) : hasConnectedDb ? (
+      {hasConnectedDb ? (
         <>
           <ModalHeader
             isLoading={isLoading}
@@ -1603,7 +1573,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   )}
                 </div>
                 {/* Step 2 */}
-                {showDBError && errorAlert()}
+                {showDBError && (
+                  <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
+                )}
               </>
             ))}
         </>

From 19e8868aea910311140615034030349fd34061bd Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Mon, 23 May 2022 11:20:59 -0400
Subject: [PATCH 5/8] fix(db): make to style modal header title with h4

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9e47515d31c09..ef3a2d32590b9 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1433,7 +1433,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       width="500px"
       centered
       show={show}
-      title={t('Connect a database')}
+      title={<h4>{t('Connect a database')}</h4>}
       footer={renderModalFooter()}
     >
       {hasConnectedDb ? (

From 452768311762cb1b47b25e20940c421b8974432a Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Mon, 6 Jun 2022 13:58:46 -0400
Subject: [PATCH 6/8] fix(db): make to place see more on bottom instead of top

---
 .../src/components/ErrorMessage/ErrorAlert.tsx       | 12 +++++++++++-
 .../views/CRUD/data/database/DatabaseModal/index.tsx |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index b6203fd9b3185..7b8488a5b9267 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -118,7 +118,7 @@ export default function ErrorAlert({
           )}
           <strong>{title}</strong>
         </LeftSideContent>
-        {!isExpandable && (
+        {!isExpandable && !description && (
           <span
             role="button"
             tabIndex={0}
@@ -132,6 +132,16 @@ export default function ErrorAlert({
       {description && (
         <div className="error-body">
           <p>{description}</p>
+          {!isExpandable && (
+            <span
+              role="button"
+              tabIndex={0}
+              className="link"
+              onClick={() => setIsModalOpen(true)}
+            >
+              {t('See more')}
+            </span>
+          )}
         </div>
       )}
       {isExpandable ? (
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 ef3a2d32590b9..d8d922919281c 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -1096,7 +1096,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       alertErrors =
         validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
           ? [
-              'We are unable to connect to your database. Click See more for database-provided information that may help troubleshoot the issue.',
+              'We are unable to connect to your database. Click "See more" for database-provided information that may help troubleshoot the issue.',
             ]
           : [];
     }

From 0da5e3340d9645f2313a7aafd0ae8b36c26ff6de Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Thu, 9 Jun 2022 19:32:41 -0400
Subject: [PATCH 7/8] fix(db): make to fix shortly

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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 d8d922919281c..ee306af28652d 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -115,7 +115,9 @@ const TabsStyled = styled(Tabs)`
 `;
 
 const ErrorAlertContainer = styled.div`
-  margin: 32px 16px;
+  ${({ theme }) => `
+    margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 4}px;
+  `};
 `;
 
 interface DatabaseModalProps {
@@ -470,7 +472,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     )?.parameters !== undefined;
   const showDBError = validationErrors || dbErrors;
   const isEmpty = (data?: Object | null) =>
-    data && Object.keys(data).length === 0;
+    !data || data && Object.keys(data).length === 0;
 
   const dbModel: DatabaseForm =
     availableDbs?.databases?.find(
@@ -1090,7 +1092,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   // eslint-disable-next-line consistent-return
   const errorAlert = () => {
     let alertErrors: string[] = [];
-    if (isEmpty(dbErrors)) {
+    if (!isEmpty(dbErrors)) {
       alertErrors = typeof dbErrors === 'object' ? Object.values(dbErrors) : [];
     } else if (!isEmpty(validationErrors)) {
       alertErrors =

From 289ef3e879b0bf70944d962e177b77cffe1b23d8 Mon Sep 17 00:00:00 2001
From: Taylor <prosdev0107@outlook.com>
Date: Fri, 10 Jun 2022 12:37:52 -0400
Subject: [PATCH 8/8] fix(db): make to fix lint issue

---
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 ee306af28652d..bc05ab3190cbd 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -472,7 +472,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     )?.parameters !== undefined;
   const showDBError = validationErrors || dbErrors;
   const isEmpty = (data?: Object | null) =>
-    !data || data && Object.keys(data).length === 0;
+    !data || (data && Object.keys(data).length === 0);
 
   const dbModel: DatabaseForm =
     availableDbs?.databases?.find(