diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx index e509521d3fa3..cf2522b4e43c 100644 --- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx +++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx @@ -132,7 +132,7 @@ export default function ErrorAlert({ {description && (

{description}

- {!isExpandable && body && ( + {!isExpandable && ( <>

{subtitle}

-
+ {/* 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 &&
} {body} diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx index 3bee53480fe4..5f84aed90141 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.tsx +++ b/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(); }); }); }); 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 faa3f48cad0d..4e1c3b9dfb62 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx @@ -1191,23 +1191,26 @@ const DatabaseModal: FunctionComponent = ({ : 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 ( - + + + ); } return <>; @@ -1532,6 +1535,7 @@ const DatabaseModal: FunctionComponent = ({ /> )} + {showDBError && errorAlert()} {t('Advanced')}
} key="2"> = ({ onChange(ActionType.extraEditorChange, payload); }} /> - {showDBError && ( - {errorAlert()} - )} @@ -1742,9 +1743,7 @@ const DatabaseModal: FunctionComponent = ({ )}
{/* Step 2 */} - {showDBError && ( - {errorAlert()} - )} + {showDBError && errorAlert()} ))}