From f32d32676d5202f10d277b6da451ee86ba5ba0e4 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 30 Nov 2021 13:17:42 -0500
Subject: [PATCH] Make console log outputs multiline. (#119675) (#119991)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
---
 .../components/synthetics/executed_step.test.tsx  | 15 +++++++++++++++
 .../components/synthetics/executed_step.tsx       |  9 +--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx b/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx
index f9876593a03db..e14b32fc8da9f 100644
--- a/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx
+++ b/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx
@@ -82,4 +82,19 @@ describe('ExecutedStep', () => {
     expect(getByText('Console output'));
     expect(getByText(browserConsole[0]));
   });
+
+  it('renders multi-line console output', () => {
+    const browserConsole = ['line1', 'line2', 'line3'];
+
+    const { getByText } = render(
+      <ExecutedStep browserConsoles={browserConsole} index={3} step={step} loading={false} />
+    );
+
+    expect(getByText('Console output'));
+
+    const codeBlock = getByText('line1 line2', { exact: false });
+    expect(codeBlock.innerHTML).toEqual(`line1
+line2
+line3`);
+  });
 });
diff --git a/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx b/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx
index 57b94544e5983..80786730505a9 100644
--- a/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx
+++ b/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx
@@ -88,14 +88,7 @@ export const ExecutedStep: FC<ExecutedStepProps> = ({ loading, step, index, brow
             language="javascript"
             initialIsOpen={!isSucceeded}
           >
-            <>
-              {browserConsoles?.map((browserConsole) => (
-                <>
-                  {browserConsole}
-                  <EuiSpacer />
-                </>
-              ))}
-            </>
+            {browserConsoles?.join('\n')}
           </CodeBlockAccordion>
           <EuiSpacer />
           <StepScreenshots step={step} />