Replace markdown factory with markdown component

src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -29,13 +29,13 @@ test('ErrorEmbeddable renders an embeddable', async () => {
   expect(
     component.getDOMNode().querySelectorAll('[data-test-subj="embeddableStackError"]').length
   ).toBe(1);
-  expect(component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageDiv"]').length).toBe(
-    1
-  );
+  expect(
+    component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageMarkdown"]').length
+  ).toBe(1);
   expect(
     component
       .getDOMNode()
-      .querySelectorAll('[data-test-subj="errorMessageDiv"]')[0]
+      .querySelectorAll('[data-test-subj="errorMessageMarkdown"]')[0]
       .innerHTML.includes('some error occurred')
   ).toBe(true);
 });
@@ -47,13 +47,15 @@ test('ErrorEmbeddable renders an embeddable with markdown message', async () =>
   expect(
     component.getDOMNode().querySelectorAll('[data-test-subj="embeddableStackError"]').length
   ).toBe(1);
-  expect(component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageDiv"]').length).toBe(
-    1
-  );
+  expect(
+    component.getDOMNode().querySelectorAll('[data-test-subj="errorMessageMarkdown"]').length
+  ).toBe(1);
   expect(
     component
       .getDOMNode()
-      .querySelectorAll('[data-test-subj="errorMessageDiv"]')[0]
-      .innerHTML.includes('<a href="http://localhost:5601/takeMeThere">some link</a>')
+      .querySelectorAll('[data-test-subj="errorMessageMarkdown"]')[0]
+      .innerHTML.includes(
+        '<a href="http://localhost:5601/takeMeThere" target="_blank" rel="noopener noreferrer">some link</a>'
+      )
   ).toBe(true);
 });

src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx

@@ -20,7 +20,7 @@
 import { EuiText, EuiIcon, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { markdownFactory } from '../../../../kibana_react/public';
+import { Markdown } from '../../../../kibana_react/public';
 import { Embeddable } from './embeddable';
 import { EmbeddableInput, EmbeddableOutput, IEmbeddable } from './i_embeddable';
 import { IContainer } from '../containers';
@@ -48,17 +48,16 @@ export class ErrorEmbeddable extends Embeddable<EmbeddableInput, EmbeddableOutpu
   public render(dom: HTMLElement) {
     const title = typeof this.error === 'string' ? this.error : this.error.message;
     this.dom = dom;
-    const markdownRenderer = markdownFactory();
-    const renderedMarkdown = markdownRenderer(title);
     ReactDOM.render(
       // @ts-ignore
       <div className="embPanel__error embPanel__content" data-test-subj="embeddableStackError">
         <EuiText color="subdued" size="xs">
           <EuiIcon type="alert" color="danger" />
           <EuiSpacer size="s" />
-          <div /* eslint-disable-next-line react/no-danger */
-            dangerouslySetInnerHTML={{ __html: renderedMarkdown }}
-            data-test-subj="errorMessageDiv"
+          <Markdown
+            markdown={title}
+            openLinksInNewTab={true}
+            data-test-subj="errorMessageMarkdown"
           />
         </EuiText>
       </div>,

src/plugins/kibana_react/public/index.ts

@@ -27,7 +27,7 @@ export * from './table_list_view';
 export * from './split_panel';
 export { ValidatedDualRange } from './validated_range';
 export * from './notifications';
-export { Markdown, MarkdownSimple, markdownFactory } from './markdown';
+export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
 export { toMountPoint } from './util';

src/plugins/kibana_react/public/markdown/index.tsx

@@ -19,4 +19,3 @@
 
 export { MarkdownSimple } from './markdown_simple';
 export { Markdown } from './markdown';
-export { markdownFactory } from './markdown';

src/plugins/kibana_utils/public/errors/errors.ts

@@ -48,7 +48,6 @@ export class SavedObjectNotFound extends KbnError {
     let message = `Could not locate that ${type}${idMsg}`;
 
     if (link) {
-      // message += `<a href=${link}>click here to re-create it</a>`
       message += `, [click here to re-create it](${link})`;
     }