DataSourceSettings: use details from HealthCheckResult (#32759)

* add custom HealthCheckError

* allow details from HealthCheckResult to be passed in the error

* pass in details.message from testing status into Alert component

* add chance

* add aria label to read only message

* update tests and add error message tests

* extract HealthCheckResultDetails type out and add comment

* extract TestingStatus interface out

* remove chance from test

* remove chance

packages/grafana-runtime/src/utils/DataSourceWithBackend.ts

@@ -15,6 +15,16 @@ import { BackendDataSourceResponse, toDataQueryResponse } from './queryResponse'
 
 const ExpressionDatasourceID = '__expr__';
 
+class HealthCheckError extends Error {
+  details: HealthCheckResultDetails;
+
+  constructor(message: string, details: HealthCheckResultDetails) {
+    super(message);
+    this.details = details;
+    this.name = 'HealthCheckError';
+  }
+}
+
 /**
  * Describes the current health status of a data source plugin.
  *
@@ -26,6 +36,16 @@ export enum HealthStatus {
   Error = 'ERROR',
 }
 
+/**
+ * Describes the details in the payload returned when checking the health of a data source
+ * plugin.
+ *
+ * If the 'message' key exists, this will be displayed in the error message in DataSourceSettingsPage
+ *
+ * @public
+ */
+export type HealthCheckResultDetails = Record<string, any> | undefined;
+
 /**
  * Describes the payload returned when checking the health of a data source
  * plugin.
@@ -35,7 +55,7 @@ export enum HealthStatus {
 export interface HealthCheckResult {
   status: HealthStatus;
   message: string;
-  details?: Record<string, any>;
+  details: HealthCheckResultDetails;
 }
 
 /**
@@ -183,7 +203,8 @@ class DataSourceWithBackend<
           message: res.message,
         };
       }
-      throw new Error(res.message);
+
+      throw new HealthCheckError(res.message, res.details);
     });
   }
 }