From 99a04ed6120b26330902af25778a0e12d3dda9d8 Mon Sep 17 00:00:00 2001
From: Vicky Lee <36230812+vickyyyyyyy@users.noreply.github.com>
Date: Fri, 23 Apr 2021 10:37:47 +0100
Subject: [PATCH] add support for expandable error message (#33189)

---
 .../src/utils/DataSourceWithBackend.ts            |  1 +
 .../settings/DataSourceSettingsPage.test.tsx      | 15 +++++++++++++++
 .../settings/DataSourceSettingsPage.tsx           |  3 +++
 3 files changed, 19 insertions(+)

diff --git a/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts b/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts
index 3608bfb7979..d8066c814b0 100644
--- a/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts
+++ b/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts
@@ -45,6 +45,7 @@ export enum HealthStatus {
  * plugin.
  *
  * If the 'message' key exists, this will be displayed in the error message in DataSourceSettingsPage
+ * If the 'verboseMessage' key exists, this will be displayed in the expandable details in the error message in DataSourceSettingsPage
  *
  * @public
  */
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
index b46fadf7883..0b32d718c26 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx
@@ -139,4 +139,19 @@ describe('Render', () => {
 
     expect(screen.getByText(mockProps.testingStatus.message)).toBeInTheDocument();
   });
+
+  it('should render verbose error message with detailed verbose error message', () => {
+    const mockProps = {
+      ...getProps(),
+      testingStatus: {
+        message: 'message',
+        status: 'error',
+        details: { message: 'detailed message', verboseMessage: 'verbose message' },
+      },
+    };
+
+    render(<DataSourceSettingsPage {...mockProps} />);
+
+    expect(screen.getByText(mockProps.testingStatus.details.verboseMessage)).toBeInTheDocument();
+  });
 });
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index 3556abb2587..760b3acc539 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -241,6 +241,9 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
               aria-label={selectors.pages.DataSource.alert}
             >
               {testingStatus.details?.message ?? null}
+              {testingStatus.details?.verboseMessage ? (
+                <details style={{ whiteSpace: 'pre-wrap' }}>{testingStatus.details?.verboseMessage}</details>
+              ) : null}
             </Alert>
           )}
         </div>