grafana/public/app/core/components/PluginHelp/PluginHelp.tsx
Chi-Hsuan Huang 73518bf1e7
Chore: Enable remaining eslint-plugin-react rules (#29519)
* Chore: Enable eslint react/no-render-return-value rule

Eanble the rule and remove the unused render return

part of: #29201

* Chore: Enable eslint react/no-children-prop rule

Not linting issues after turning on this. No other file changes requried

part of: #29201

* Chore: Enable eslint react/no-unknown-property rule

Correct enable-background to enableBackground

part of: #29201

* Chore: Enable eslint react/no-unescaped-entities rule

Replaced " with " replaced ' with '

part of: #29201
2020-12-02 10:03:37 +01:00

83 lines
1.7 KiB
TypeScript

import React, { PureComponent } from 'react';
import { renderMarkdown } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
interface Props {
plugin: {
name: string;
id: string;
};
type: string;
}
interface State {
isError: boolean;
isLoading: boolean;
help: string;
}
export class PluginHelp extends PureComponent<Props, State> {
state = {
isError: false,
isLoading: false,
help: '',
};
componentDidMount(): void {
this.loadHelp();
}
constructPlaceholderInfo() {
return 'No plugin help or readme markdown file was found';
}
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 }} />;
}
}