IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Suggestion: render documentation as markdown in suggestion's info (#25953)

Browse Source 
* Panel: render documentation as markdown in TypeaheadInfo

* Modify TypeaheadInfo to sanitize markdown output
This commit is contained in:
Zoltán Bedi 2020-07-15 19:05:51 +02:00 committed by GitHub
parent 9d8ae39108
commit 5046e54918
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { mount } from 'enzyme';
import { TypeaheadInfo } from './TypeaheadInfo';
import { CompletionItem } from '../../types';
describe('TypeaheadInfo component', () => {
it('should show documentation as rendered markdown if passed as a markdown', () => {
const item: CompletionItem = { label: 'markdown', documentation: '**bold**' };
const wrapper = mount(<TypeaheadInfo item={item} height={100} />);
expect(wrapper.find('div>div').html()).toMatch('strong');
});
});

6
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
View File

@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { css, cx } from 'emotion';
import { CompletionItem, selectThemeVariant, ThemeContext } from '../..';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme, renderMarkdown, textUtil } from '@grafana/data';
const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
return {
@ -41,7 +41,7 @@ interface Props {
export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
const visible = item && !!item.documentation;
const label = item ? item.label : '';
const documentation = item && item.documentation ? item.documentation : '';
const documentation = textUtil.sanitize(renderMarkdown(item?.documentation));
const theme = useContext(ThemeContext);
const styles = getStyles(theme, height, visible);
@ -49,7 +49,7 @@ export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
<div className={cx([styles.typeaheadItem])}>
<b>{label}</b>
<hr />
<span>{documentation}</span>
<div dangerouslySetInnerHTML={{ __html: documentation }} />
</div>
);
};