From 92c94710cdfd24590ed823ab13091d82c35dd1f4 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Fri, 7 Jul 2023 15:22:52 +0200
Subject: [PATCH] Loki/Elasticsearch config: Add DataSourceDescription
 component (#71206)

* Loki config: add data source description component

* Elastic config: add data source description component
---
 .../elasticsearch/configuration/ConfigEditor.tsx          | 7 ++++++-
 .../datasource/loki/configuration/ConfigEditor.tsx        | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
index 85fc4a440d2..7161d28a673 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { Alert, DataSourceHttpSettings } from '@grafana/ui';
 import { Divider } from 'app/core/components/Divider';
 import { config } from 'app/core/config';
@@ -38,6 +38,11 @@ export const ConfigEditor = (props: Props) => {
           Browser access mode in the Elasticsearch datasource is no longer available. Switch to server access mode.
         </Alert>
       )}
+      <DataSourceDescription
+        dataSourceName="Elasticsearch"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/elasticsearch"
+        hasRequiredFields={false}
+      />
 
       <Divider />
 
diff --git a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
index 2050e8e4b1a..ada9b47a498 100644
--- a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { config, reportInteraction } from '@grafana/runtime';
 import { DataSourceHttpSettings } from '@grafana/ui';
 import { Divider } from 'app/core/components/Divider';
@@ -43,6 +43,12 @@ export const ConfigEditor = (props: Props) => {
 
   return (
     <>
+      <DataSourceDescription
+        dataSourceName="Loki"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/loki"
+        hasRequiredFields={false}
+      />
+
       <Divider />
 
       <DataSourceHttpSettings