add support for expandable error message (#33189)

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
  */

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();
+  });
 });

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>