Skip to content

Commit

Permalink
fix: Display Error Messages in DB Connection Modal (#22200)
Browse files Browse the repository at this point in the history
  • Loading branch information
AAfghahi authored Dec 5, 2022
1 parent f3bf3ec commit aafb993
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 23 deletions.
7 changes: 5 additions & 2 deletions superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default function ErrorAlert({
{description && (
<div className="error-body">
<p>{description}</p>
{!isExpandable && body && (
{!isExpandable && (
<span
role="button"
tabIndex={0}
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 <></>;
Expand Down Expand Up @@ -1532,6 +1535,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
/>
</StyledAlertMargin>
)}
{showDBError && errorAlert()}
</Tabs.TabPane>
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
<ExtraOptions
Expand Down Expand Up @@ -1565,9 +1569,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
onChange(ActionType.extraEditorChange, payload);
}}
/>
{showDBError && (
<ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
)}
</Tabs.TabPane>
</TabsStyled>
</Modal>
Expand Down Expand Up @@ -1742,9 +1743,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
)}
</div>
{/* Step 2 */}
{showDBError && (
<ErrorAlertContainer>{errorAlert()}</ErrorAlertContainer>
)}
{showDBError && errorAlert()}
</>
))}
</>
Expand Down

0 comments on commit aafb993

Please sign in to comment.