From ac44a679a724699cfe8c8857ac240b15da155eb8 Mon Sep 17 00:00:00 2001
From: Vicky Lee <36230812+vickyyyyyyy@users.noreply.github.com>
Date: Tue, 11 May 2021 12:56:48 +0100
Subject: [PATCH] align alert (#33919)

---
 .../settings/DataSourceSettingsPage.tsx       | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

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)}