[embeddable] fix PresentationPanelError component throws when error.message is empty string (#186098)

Closes https://github.com/elastic/kibana/issues/186080

PR resolves issue by updating `Markdown` component to not throw when
`readOnly` and `content` is empty. Components should only throw on
catastrophic errors. In this case, Markdown can safely render an empty
markdown. This is a better out come then crashing an application.

### Test instructions
Follow steps from https://github.com/elastic/kibana/issues/186095 and
verify dashboard does not crash

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2024-06-13 09:03:26 -06:00 committed by GitHub
parent 4093f4cfbc
commit bd16e7e8e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 30 additions and 5 deletions

View file

@ -84,9 +84,6 @@ export const Markdown = ({
// Render EuiMarkdownFormat when readOnly set to true
if (readOnly) {
if (!children && !markdownContent) {
throw new Error('Markdown content is required in [readOnly] mode');
}
return (
<EuiMarkdownFormat
textSize={'relative'}
@ -99,7 +96,7 @@ export const Markdown = ({
// There was a trick to pass style as a part of props in the legacy React <Markdown> component
style={restProps.style}
>
{children ?? markdownContent!}
{children ?? markdownContent ?? ''}
</EuiMarkdownFormat>
);
}

View file

@ -0,0 +1,23 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { PresentationPanelError } from './presentation_panel_error';
describe('PresentationPanelError', () => {
test('should display error', async () => {
render(<PresentationPanelError error={new Error('Simulated error')} />);
await waitFor(() => screen.getByTestId('errorMessageMarkdown'));
});
test('should display error with empty message', async () => {
render(<PresentationPanelError error={new Error('')} />);
await waitFor(() => screen.getByTestId('errorMessageMarkdown'));
});
});

View file

@ -14,6 +14,7 @@ import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
import { renderSearchError } from '@kbn/search-errors';
import { Markdown } from '@kbn/shared-ux-markdown';
import { Subscription } from 'rxjs';
import { i18n } from '@kbn/i18n';
import { editPanelAction } from '../panel_actions/panel_actions';
import { getErrorCallToAction } from './presentation_panel_strings';
import { DefaultPresentationPanelApi } from './types';
@ -82,7 +83,11 @@ export const PresentationPanelError = ({
searchErrorDisplay?.body ?? (
<EuiText size="s">
<Markdown data-test-subj="errorMessageMarkdown" readOnly>
{error.message}
{error.message?.length
? error.message
: i18n.translate('presentationPanel.emptyErrorMessage', {
defaultMessage: 'Error',
})}
</Markdown>
</EuiText>
)