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

* Panel: render documentation as markdown in TypeaheadInfo

* Modify TypeaheadInfo to sanitize markdown output

packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx

+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');
+  });
+});

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>
   );
 };