fix: Display Error Messages in DB Connection Modal (#22200)

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -132,7 +132,7 @@ export default function ErrorAlert({
       {description && (
         <div className="error-body">
           <p>{description}</p>
-          {!isExpandable && body && (
+          {!isExpandable && (
             <span
               role="button"
               tabIndex={0}
@@ -213,7 +213,10 @@ export default function ErrorAlert({
         >
           <>
             <p>{subtitle}</p>
-            <br />
+            {/* This break was in the original design of the modal but
+            the spacing looks really off if there is only
+            subtitle or a body */}
+            {subtitle && body && <br />}
             {body}
           </>
         </ErrorModal>

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

@@ -1405,10 +1405,14 @@ describe('DatabaseModal', () => {
     test('Error displays when it is a string', async () => {
       const step2of3text = screen.getByText(/step 2 of 3/i);
       const errorTitleMessage = screen.getByText(/Database Creation Error/i);
+      const button = screen.getByText('See more');
+      userEvent.click(button);
       const errorMessage = screen.getByText(/Test Error With String/i);
+      expect(errorMessage).toBeVisible();
+      const closeButton = screen.getByText('Close');
+      userEvent.click(closeButton);
       expect(step2of3text).toBeVisible();
       expect(errorTitleMessage).toBeVisible();
-      expect(errorMessage).toBeVisible();
     });
   });
 });

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

@@ -1191,23 +1191,26 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           : typeof dbErrors === 'string'
           ? [dbErrors]
           : [];
-    } else if (!isEmpty(validationErrors)) {
-      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.',
-            ]
-          : [];
+    } else if (
+      !isEmpty(validationErrors) &&
+      validationErrors?.error_type === 'GENERIC_DB_ENGINE_ERROR'
+    ) {
+      alertErrors = [
+        validationErrors?.description || validationErrors?.message,
+      ];
     }
-
     if (alertErrors.length) {
       return (
-        <ErrorMessageWithStackTrace
-          title={t('Database Creation Error')}
-          description={alertErrors[0]}
-          subtitle={validationErrors?.description}
-          copyText={validationErrors?.description}
-        />
+        <ErrorAlertContainer>
+          <ErrorMessageWithStackTrace
+            title={t('Database Creation Error')}
+            description={t(
+              'We are unable to connect to your database. Click "See more" for database-provided information that may help troubleshoot the issue.',
+            )}
+            subtitle={alertErrors?.[0] || validationErrors?.description}
+            copyText={validationErrors?.description}
+          />
+        </ErrorAlertContainer>
       );
     }
     return <></>;
@@ -1532,6 +1535,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               />
             </StyledAlertMargin>
           )}
+          {showDBError && errorAlert()}
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
           <ExtraOptions
@@ -1565,9 +1569,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               onChange(ActionType.extraEditorChange, payload);
             }}
           />
-          {showDBError && (
-            <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
-          )}
         </Tabs.TabPane>
       </TabsStyled>
     </Modal>
@@ -1742,9 +1743,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   )}
                 </div>
                 {/* Step 2 */}
-                {showDBError && (
-                  <ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
-                )}
+                {showDBError && errorAlert()}
               </>
             ))}
         </>