From 02b7fd81f855d92ff9963f9e5a0d09b7f123eae1 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:18:59 +0200
Subject: [PATCH] feat(editor): Support newlines in node errors

---
 .../src/components/Error/NodeErrorView.vue    |  5 ++--
 .../MultiLineText/MultiLineText.vue           | 23 +++++++++++++++++++
 .../__tests__/MultiLineText.test.ts           | 15 ++++++++++++
 .../__snapshots__/MultiLineText.test.ts.snap  | 18 +++++++++++++++
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor-ui/src/components/MultiLineText/MultiLineText.vue
 create mode 100644 packages/editor-ui/src/components/MultiLineText/__tests__/MultiLineText.test.ts
 create mode 100644 packages/editor-ui/src/components/MultiLineText/__tests__/__snapshots__/MultiLineText.test.ts.snap

diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 76965f0632..a3eace5e1c 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -24,6 +24,7 @@ import InlineAskAssistantButton from 'n8n-design-system/components/InlineAskAssi
 import { useUIStore } from '@/stores/ui.store';
 import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
 import { useAIAssistantHelpers } from '@/composables/useAIAssistantHelpers';
+import MultiLineText from '../MultiLineText/MultiLineText.vue';
 
 type Props = {
 	// TODO: .node can be undefined
@@ -423,9 +424,7 @@ async function onAskAssistantClick() {
 	<div class="node-error-view">
 		<div class="node-error-view__header">
 			<div class="node-error-view__header-message" data-test-id="node-error-message">
-				<div>
-					{{ getErrorMessage() }}
-				</div>
+				<MultiLineText :text="getErrorMessage()" />
 			</div>
 			<div
 				v-if="error.description || error.context?.descriptionKey"
diff --git a/packages/editor-ui/src/components/MultiLineText/MultiLineText.vue b/packages/editor-ui/src/components/MultiLineText/MultiLineText.vue
new file mode 100644
index 0000000000..87a50ac7db
--- /dev/null
+++ b/packages/editor-ui/src/components/MultiLineText/MultiLineText.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+/**
+ * Component that splits the given text by new lines and renders
+ * each line in a separate span element joined by a line break.
+ */
+import { computed } from 'vue';
+
+const props = defineProps<{
+	text: string;
+}>();
+
+const lines = computed(() => {
+	return props.text ? props.text.split('\n') : [];
+});
+</script>
+
+<template>
+	<div>
+		<span v-for="(line, index) in lines" :key="index">
+			{{ line }}<br v-if="index < lines.length - 1" />
+		</span>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/MultiLineText/__tests__/MultiLineText.test.ts b/packages/editor-ui/src/components/MultiLineText/__tests__/MultiLineText.test.ts
new file mode 100644
index 0000000000..dcd1f66873
--- /dev/null
+++ b/packages/editor-ui/src/components/MultiLineText/__tests__/MultiLineText.test.ts
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/vue';
+
+import MultiLineText from '../MultiLineText.vue';
+
+describe('MultiLineText', () => {
+	it('renders multiline text correctly', () => {
+		const { container } = render(MultiLineText, {
+			props: {
+				text: 'The quick brown fox\njumps over the lazy dog',
+			},
+		});
+
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/editor-ui/src/components/MultiLineText/__tests__/__snapshots__/MultiLineText.test.ts.snap b/packages/editor-ui/src/components/MultiLineText/__tests__/__snapshots__/MultiLineText.test.ts.snap
new file mode 100644
index 0000000000..997af7b8f1
--- /dev/null
+++ b/packages/editor-ui/src/components/MultiLineText/__tests__/__snapshots__/MultiLineText.test.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MultiLineText > renders multiline text correctly 1`] = `
+<div>
+  <div>
+    
+    <span>
+      The quick brown fox
+      <br />
+    </span>
+    <span>
+      jumps over the lazy dog
+      <!--v-if-->
+    </span>
+    
+  </div>
+</div>
+`;