From 5046e54918d505281240574a26e714e2f8a28483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Wed, 15 Jul 2020 19:05:51 +0200
Subject: [PATCH] Suggestion: render documentation as markdown in suggestion's
 info (#25953)

* Panel: render documentation as markdown in TypeaheadInfo

* Modify TypeaheadInfo to sanitize markdown output
---
 .../src/components/Typeahead/TypeaheadInfo.test.tsx  | 12 ++++++++++++
 .../src/components/Typeahead/TypeaheadInfo.tsx       |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx

diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx
new file mode 100644
index 00000000000..0864fa79b84
--- /dev/null
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx
@@ -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');
+  });
+});
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
index c6d66e99fd1..235b1007c91 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
@@ -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>
   );
 };