Allow markdown in error embeddable

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

@@ -0,0 +1,59 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { ErrorEmbeddable } from './error_embeddable';
+import { EmbeddableRoot } from './embeddable_root';
+import { mount } from 'enzyme';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+test('ErrorEmbeddable renders an embeddable', async () => {
+  const embeddable = new ErrorEmbeddable('some error occurred', { id: '123', title: 'Error' });
+  const component = mount(<EmbeddableRoot embeddable={embeddable} />);
+  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="errorMessageDiv"]')[0]
+      .innerHTML.includes('some error occurred')
+  ).toBe(true);
+});
+
+test('ErrorEmbeddable renders an embeddable with markdown message', async () => {
+  const error = '[some link](http://localhost:5601/takeMeThere)';
+  const embeddable = new ErrorEmbeddable(error, { id: '123', title: 'Error' });
+  const component = mount(<EmbeddableRoot embeddable={embeddable} />);
+  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="errorMessageDiv"]')[0]
+      .innerHTML.includes('<a href="http://localhost:5601/takeMeThere">some link</a>')
+  ).toBe(true);
+});

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

@@ -20,6 +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 { Embeddable } from './embeddable';
 import { EmbeddableInput, EmbeddableOutput, IEmbeddable } from './i_embeddable';
 import { IContainer } from '../containers';
@@ -47,13 +48,18 @@ 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" />
-          {title}
+          <div /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML={{ __html: renderedMarkdown }}
+            data-test-subj="errorMessageDiv"
+          />
         </EuiText>
       </div>,
       dom

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 } from './markdown';
+export { Markdown, MarkdownSimple, markdownFactory } 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,3 +19,4 @@
 
 export { MarkdownSimple } from './markdown_simple';
 export { Markdown } from './markdown';
+export { markdownFactory } from './markdown';

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

@@ -48,6 +48,7 @@ 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})`;
     }