fix(editor): Fix notification rendering HTML as text (#10642)

n8n-io · Sep 3, 2024 · 5eba534 · 5eba534
1 parent ce39933
commit 5eba534
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/packages/editor-ui/src/components/NodeViewUnfinishedWorkflowMessage.vue 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
@@ -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
@@ -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,
 				});