fix: surface connection error messages on the client (apache#11077)

* fix: surface connection error messages on the client

* typo

* lint

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

@@ -21,6 +21,7 @@ import { styled, t, SupersetClient } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
+import getClientErrorObject from 'src/utils/getClientErrorObject';
 import Icon from 'src/components/Icon';
 import Modal from 'src/common/components/Modal';
 import Tabs from 'src/common/components/Tabs';
@@ -163,11 +164,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       .then(() => {
         addSuccessToast(t('Connection looks good!'));
       })
-      .catch(() => {
-        addDangerToast(
-          t('ERROR: Connection failed, please check your connection settings'),
-        );
-      });
+      .catch(response =>
+        getClientErrorObject(response).then(error => {
+          addDangerToast(
+            t('ERROR: Connection failed. ') + error?.message || '',
+          );
+        }),
+      );
   };
 
   // Functions
@@ -551,7 +554,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 checked={db ? !!db.impersonate_user : false}
                 onChange={onInputChange}
               />
-              <div>{t('Impersonate Logged In User (Presto & Hive')}</div>
+              <div>{t('Impersonate Logged In User (Presto & Hive)')}</div>
               <InfoTooltipWithTrigger
                 label="impersonate"
                 tooltip={t(