From bd16e7e8e32fce5c267e634d5089541ce3a82d97 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@elastic.co>
Date: Thu, 13 Jun 2024 09:03:26 -0600
Subject: [PATCH] [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>
---
 packages/shared-ux/markdown/impl/markdown.tsx |  5 +---
 .../presentation_panel_error.test.tsx         | 23 +++++++++++++++++++
 .../presentation_panel_error.tsx              |  7 +++++-
 3 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 src/plugins/presentation_panel/public/panel_component/presentation_panel_error.test.tsx

diff --git a/packages/shared-ux/markdown/impl/markdown.tsx b/packages/shared-ux/markdown/impl/markdown.tsx
index 954a69c5c67e6..1df0aff10648f 100644
--- a/packages/shared-ux/markdown/impl/markdown.tsx
+++ b/packages/shared-ux/markdown/impl/markdown.tsx
@@ -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>
     );
   }
diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.test.tsx b/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.test.tsx
new file mode 100644
index 0000000000000..82cdb97773c87
--- /dev/null
+++ b/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.test.tsx
@@ -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'));
+  });
+});
diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx b/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx
index 5b7de4ec05cc2..5eb20b7461f09 100644
--- a/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx
+++ b/src/plugins/presentation_panel/public/panel_component/presentation_panel_error.tsx
@@ -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>
         )