From 5eba5343191665cd4639632ba303464176c279c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Tue, 3 Sep 2024 10:41:59 +0200
Subject: [PATCH] fix(editor): Fix notification rendering HTML as text (#10642)

---
 .../NodeViewUnfinishedWorkflowMessage.vue      | 18 ++++++++++++++++++
 packages/editor-ui/src/views/NodeView.v2.vue   |  8 +++-----
 packages/editor-ui/src/views/NodeView.vue      | 11 +++--------
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 packages/editor-ui/src/components/NodeViewUnfinishedWorkflowMessage.vue

diff --git a/packages/editor-ui/src/components/NodeViewUnfinishedWorkflowMessage.vue b/packages/editor-ui/src/components/NodeViewUnfinishedWorkflowMessage.vue
new file mode 100644
index 0000000000000..e074d624eb0ba
--- /dev/null
+++ b/packages/editor-ui/src/components/NodeViewUnfinishedWorkflowMessage.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+const i18 = useI18n();
+</script>
+
+<template>
+	<div>
+		<a data-action="reload">{{ i18.baseText('nodeView.refresh') }}</a>
+		{{ i18.baseText('nodeView.toSeeTheLatestStatus') }}.
+		<br />
+		<a
+			href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/"
+			target="_blank"
+		>
+			{{ i18.baseText('nodeView.moreInfo') }}
+		</a>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 9446dc13910f1..04cd656e8d298 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -11,6 +11,7 @@ import {
 	ref,
 	useCssModule,
 	watch,
+	h,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
@@ -97,6 +98,7 @@ import type { PinDataSource } from '@/composables/usePinnedData';
 import { useClipboard } from '@/composables/useClipboard';
 import { useBeforeUnload } from '@/composables/useBeforeUnload';
 import { getResourcePermissions } from '@/permissions';
+import NodeViewUnfinishedWorkflowMessage from '@/components/NodeViewUnfinishedWorkflowMessage.vue';
 
 const LazyNodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
@@ -1062,11 +1064,7 @@ function onExecutionOpenedWithWaitTill(data: IExecutionResponse) {
 	if ((data as ExecutionSummary).waitTill) {
 		toast.showMessage({
 			title: i18n.baseText('nodeView.thisExecutionHasntFinishedYet'),
-			message: `<a data-action="reload">${i18n.baseText('nodeView.refresh')}</a> ${i18n.baseText(
-				'nodeView.toSeeTheLatestStatus',
-			)}.<br/> <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">${i18n.baseText(
-				'nodeView.moreInfo',
-			)}</a>`,
+			message: h(NodeViewUnfinishedWorkflowMessage),
 			type: 'warning',
 			duration: 0,
 		});
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 608d9cb82f494..7d95ed54f6653 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineAsyncComponent, defineComponent, nextTick, ref } from 'vue';
+import { defineAsyncComponent, defineComponent, nextTick, ref, h } from 'vue';
 import { mapStores, storeToRefs } from 'pinia';
 
 import type {
@@ -182,6 +182,7 @@ import { usePostHog } from '@/stores/posthog.store';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { getResourcePermissions } from '@/permissions';
 import { useBeforeUnload } from '@/composables/useBeforeUnload';
+import NodeViewUnfinishedWorkflowMessage from '@/components/NodeViewUnfinishedWorkflowMessage.vue';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -1063,13 +1064,7 @@ export default defineComponent({
 			if ((data as ExecutionSummary).waitTill) {
 				this.showMessage({
 					title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
-					message: `<a data-action="reload">${this.$locale.baseText(
-						'nodeView.refresh',
-					)}</a> ${this.$locale.baseText(
-						'nodeView.toSeeTheLatestStatus',
-					)}.<br/> <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText(
-						'nodeView.moreInfo',
-					)}</a>`,
+					message: h(NodeViewUnfinishedWorkflowMessage),
 					type: 'warning',
 					duration: 0,
 				});