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>

pkg/api/plugins.go

@@ -271,7 +271,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)
 		}

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: {
+  pluginId: string;
-    name: string;
-    id: string;
-  };
-  type: string;
 }
 
-interface State {
+export function PluginHelp({ pluginId }: Props) {
-  isError: boolean;
+  const { value, loading, error } = useAsync(async () => {
-  isLoading: boolean;
+    return getBackendSrv().get(`/api/plugins/${pluginId}/markdown/query_help`);
-  help: string;
+  }, []);
+
+  const renderedMarkdown = renderMarkdown(value);
+
+  if (loading) {
+    return <LoadingPlaceholder text="Loading help..." />;
   }
 
-export class PluginHelp extends PureComponent<Props, State> {
+  if (error) {
-  state = {
+    return <h3>An error occurred when loading help.</h3>;
-    isError: false,
-    isLoading: false,
-    help: '',
-  };
-
-  componentDidMount(): void {
-    this.loadHelp();
   }
 
-  constructPlaceholderInfo() {
+  if (value === '') {
-    return 'No plugin help or readme markdown file was found';
+    return <h3>No query help could be found.</h3>;
   }
 
-  loadHelp = () => {
+  return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />;
-    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 }} />;
-  }
 }

public/app/features/query/components/QueryGroup.tsx

@@ -466,7 +466,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>
               )}
             </>