diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index dea56ac990f..ec219da14e5 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -200,6 +200,19 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
     return <div>Page not found: {page}</div>;
   }
 
+  renderAlertDetails() {
+    const { testingStatus } = this.props;
+
+    return (
+      <>
+        {testingStatus?.details?.message}
+        {testingStatus?.details?.verboseMessage ? (
+          <details style={{ whiteSpace: 'pre-wrap' }}>{testingStatus?.details?.verboseMessage}</details>
+        ) : null}
+      </>
+    );
+  }
+
   renderSettings() {
     const { dataSourceMeta, setDataSourceName, setIsDefault, dataSource, plugin, testingStatus } = this.props;
 
@@ -233,20 +246,17 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
           />
         )}
 
-        <div className="gf-form-group p-t-2">
-          {testingStatus?.message && (
+        {testingStatus?.message && (
+          <div className="gf-form-group p-t-2">
             <Alert
               severity={testingStatus.status === 'error' ? 'error' : 'success'}
               title={testingStatus.message}
               aria-label={selectors.pages.DataSource.alert}
             >
-              {testingStatus.details?.message ?? null}
-              {testingStatus.details?.verboseMessage ? (
-                <details style={{ whiteSpace: 'pre-wrap' }}>{testingStatus.details?.verboseMessage}</details>
-              ) : null}
+              {testingStatus.details && this.renderAlertDetails()}
             </Alert>
-          )}
-        </div>
+          </div>
+        )}
 
         <ButtonRow
           onSubmit={(event) => this.onSubmit(event)}