Skip to content
Permalink
Browse files Browse the repository at this point in the history
[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 9aed364)

Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>
  • Loading branch information
grafanabot and wbrowne committed Jan 3, 2023
1 parent 0404d07 commit db83d5f
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 70 deletions.
2 changes: 1 addition & 1 deletion pkg/api/plugins.go
Expand Up @@ -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)
}
Expand Down
85 changes: 17 additions & 68 deletions 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 }} />;
}
2 changes: 1 addition & 1 deletion public/app/features/query/components/QueryGroup.tsx
Expand Up @@ -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>
)}
</>
Expand Down

0 comments on commit db83d5f

Please sign in to comment.