From c784089ac75bc548ac7818b958b33b1dec0f3e70 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 3 Apr 2020 12:29:47 +0100 Subject: [PATCH 1/2] Allow markdown in error embeddable --- .../lib/embeddables/error_embeddable.test.tsx | 59 +++++++++++++++++++ .../lib/embeddables/error_embeddable.tsx | 8 ++- src/plugins/kibana_react/public/index.ts | 2 +- .../kibana_react/public/markdown/index.tsx | 1 + .../kibana_utils/public/errors/errors.ts | 1 + 5 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx new file mode 100644 index 0000000000000..f598b6f11ca4f --- /dev/null +++ b/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(); + 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(); + 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 link') + ).toBe(true); +}); diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx index 2c2c47775369d..f1a01df404bd9 100644 --- a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx +++ b/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 - {title} +
, dom diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index e1689e38dbfe0..9c8c155887369 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/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'; diff --git a/src/plugins/kibana_react/public/markdown/index.tsx b/src/plugins/kibana_react/public/markdown/index.tsx index cacf223cf33ed..0ebacee29b545 100644 --- a/src/plugins/kibana_react/public/markdown/index.tsx +++ b/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'; diff --git a/src/plugins/kibana_utils/public/errors/errors.ts b/src/plugins/kibana_utils/public/errors/errors.ts index 5842457168d72..f6fd53fa8fabb 100644 --- a/src/plugins/kibana_utils/public/errors/errors.ts +++ b/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 += `click here to re-create it` message += `, [click here to re-create it](${link})`; } From c7e2e0c45eb262ea1307b2a246f82a9efd6a4548 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Fri, 3 Apr 2020 19:34:30 +0100 Subject: [PATCH 2/2] Replace markdown factory with markdown component --- .../lib/embeddables/error_embeddable.test.tsx | 20 ++++++++++--------- .../lib/embeddables/error_embeddable.tsx | 11 +++++----- src/plugins/kibana_react/public/index.ts | 2 +- .../kibana_react/public/markdown/index.tsx | 1 - .../kibana_utils/public/errors/errors.ts | 1 - 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx index f598b6f11ca4f..816001ba42ff1 100644 --- a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx +++ b/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('some link') + .querySelectorAll('[data-test-subj="errorMessageMarkdown"]')[0] + .innerHTML.includes( + 'some link' + ) ).toBe(true); }); diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx index f1a01df404bd9..cdbe7af98a4f4 100644 --- a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx +++ b/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 -
, diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index 9c8c155887369..e1689e38dbfe0 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/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'; diff --git a/src/plugins/kibana_react/public/markdown/index.tsx b/src/plugins/kibana_react/public/markdown/index.tsx index 0ebacee29b545..cacf223cf33ed 100644 --- a/src/plugins/kibana_react/public/markdown/index.tsx +++ b/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'; diff --git a/src/plugins/kibana_utils/public/errors/errors.ts b/src/plugins/kibana_utils/public/errors/errors.ts index f6fd53fa8fabb..5842457168d72 100644 --- a/src/plugins/kibana_utils/public/errors/errors.ts +++ b/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 += `click here to re-create it` message += `, [click here to re-create it](${link})`; }