From db83d5f398caffe35c5846cfa7727d1a2a414165 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 3 Jan 2023 15:11:50 +0100
Subject: [PATCH] [v9.3.x] Plugins: Fix plugin query help markdown  (#60907)

Plugins: Fix plugin query help markdown  (#60485)

* refactor(pluginhelp): rewrite as functional component with useAsync

* mimic old behaviour

* feat(pluginhelp): display message if backend returned an empty string

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
(cherry picked from commit 9aed3648987263a7ad986b38632095abfed872a6)

Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>
---
 pkg/api/plugins.go                            |  2 +-
 .../core/components/PluginHelp/PluginHelp.tsx | 85 ++++---------------
 .../features/query/components/QueryGroup.tsx  |  2 +-
 3 files changed, 19 insertions(+), 70 deletions(-)

diff --git a/pkg/api/plugins.go b/pkg/api/plugins.go
index 141ef9df14e..16567eed21b 100644
--- a/pkg/api/plugins.go
+++ b/pkg/api/plugins.go
@@ -270,7 +270,7 @@ func (hs *HTTPServer) GetPluginMarkdown(c *models.ReqContext) response.Response
 
 	// fallback try readme
 	if len(content) == 0 {
-		content, err = hs.pluginMarkdown(c.Req.Context(), pluginID, "help")
+		content, err = hs.pluginMarkdown(c.Req.Context(), pluginID, "readme")
 		if err != nil {
 			return response.Error(501, "Could not get markdown file", err)
 		}
diff --git a/public/app/core/components/PluginHelp/PluginHelp.tsx b/public/app/core/components/PluginHelp/PluginHelp.tsx
index 7ead1046e22..4531abca50a 100644
--- a/public/app/core/components/PluginHelp/PluginHelp.tsx
+++ b/public/app/core/components/PluginHelp/PluginHelp.tsx
@@ -1,83 +1,32 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
+import { useAsync } from 'react-use';
 
 import { renderMarkdown } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
+import { LoadingPlaceholder } from '@grafana/ui';
 
 interface Props {
-  plugin: {
-    name: string;
-    id: string;
-  };
-  type: string;
+  pluginId: string;
 }
 
-interface State {
-  isError: boolean;
-  isLoading: boolean;
-  help: string;
-}
+export function PluginHelp({ pluginId }: Props) {
+  const { value, loading, error } = useAsync(async () => {
+    return getBackendSrv().get(`/api/plugins/${pluginId}/markdown/query_help`);
+  }, []);
 
-export class PluginHelp extends PureComponent<Props, State> {
-  state = {
-    isError: false,
-    isLoading: false,
-    help: '',
-  };
+  const renderedMarkdown = renderMarkdown(value);
 
-  componentDidMount(): void {
-    this.loadHelp();
+  if (loading) {
+    return <LoadingPlaceholder text="Loading help..." />;
   }
 
-  constructPlaceholderInfo() {
-    return 'No plugin help or readme markdown file was found';
+  if (error) {
+    return <h3>An error occurred when loading help.</h3>;
   }
 
-  loadHelp = () => {
-    const { plugin, type } = this.props;
-    this.setState({ isLoading: true });
-
-    getBackendSrv()
-      .get(`/api/plugins/${plugin.id}/markdown/${type}`)
-      .then((response: string) => {
-        const helpHtml = renderMarkdown(response);
-
-        if (response === '' && type === 'help') {
-          this.setState({
-            isError: false,
-            isLoading: false,
-            help: this.constructPlaceholderInfo(),
-          });
-        } else {
-          this.setState({
-            isError: false,
-            isLoading: false,
-            help: helpHtml,
-          });
-        }
-      })
-      .catch(() => {
-        this.setState({
-          isError: true,
-          isLoading: false,
-        });
-      });
-  };
-
-  render() {
-    const { type } = this.props;
-    const { isError, isLoading, help } = this.state;
-
-    if (isLoading) {
-      return <h2>Loading help...</h2>;
-    }
-
-    if (isError) {
-      return <h3>&apos;Error occurred when loading help&apos;</h3>;
-    }
-
-    if (type === 'panel_help' && help === '') {
-    }
-
-    return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: help }} />;
+  if (value === '') {
+    return <h3>No query help could be found.</h3>;
   }
+
+  return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />;
 }
diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index 579a9306430..efba9ac397c 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -364,7 +364,7 @@ export class QueryGroup extends PureComponent<Props, State> {
               {this.renderAddQueryRow(dsSettings, styles)}
               {isHelpOpen && (
                 <Modal title="Data source help" isOpen={true} onDismiss={this.onCloseHelp}>
-                  <PluginHelp plugin={dsSettings.meta} type="query_help" />
+                  <PluginHelp pluginId={dsSettings.meta.id} />
                 </Modal>
               )}
             </>