fix(editor): Fix xss issues in toast usages (#10733)

packages/editor-ui/src/components/AiUpdatedCodeMessage.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+const i18n = useI18n();
+
+defineProps<{
+	nodeName: string;
+}>();
+</script>
+
+<template>
+	<div>
+		{{ i18n.baseText('aiAssistant.codeUpdated.message.body1') }}
+		<a data-action="openNodeDetail" :data-action-parameter-node="nodeName">{{ nodeName }}</a>
+		{{ i18n.baseText('aiAssistant.codeUpdated.message.body2') }}
+	</div>
+</template>

packages/editor-ui/src/components/NodeExecutionErrorMessage.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+const i18n = useI18n();
+
+defineProps<{
+	nodeName: string;
+	errorMessage?: string;
+}>();
+</script>
+
+<template>
+	<div>
+		{{ errorMessage }}<br />
+		<a data-action="openNodeDetail" :data-action-parameter-node="nodeName">{{
+			i18n.baseText('node.executionError.openNode')
+		}}</a>
+	</div>
+</template>

packages/editor-ui/src/components/WorkflowActivationErrorMessage.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+const i18n = useI18n();
+
+defineProps<{
+	message: string;
+}>();
+</script>
+
+<template>
+	<div>
+		{{
+			i18n.baseText(
+				'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
+			)
+		}}
+		<br /><i>{{ message }}</i>
+	</div>
+</template>

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -3,10 +3,12 @@ import { useToast } from '@/composables/useToast';
 import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
-import { computed } from 'vue';
+import type { VNode } from 'vue';
+import { computed, h } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import type { PermissionsRecord } from '@/permissions';
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import WorkflowActivationErrorMessage from './WorkflowActivationErrorMessage.vue';
 
 const props = defineProps<{
 	workflowActive: boolean;
@@ -61,7 +63,7 @@ async function activeChanged(newActiveState: boolean) {
 }
 
 async function displayActivationError() {
-	let errorMessage: string;
+	let errorMessage: string | VNode;
 	try {
 		const errorData = await workflowsStore.getActivationError(props.workflowId);
 
@@ -70,10 +72,9 @@ async function displayActivationError() {
 				'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
 			);
 		} else {
-			errorMessage = i18n.baseText(
-				'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
-				{ interpolate: { message: errorData } },
-			);
+			errorMessage = h(WorkflowActivationErrorMessage, {
+				message: errorData,
+			});
 		}
 	} catch (error) {
 		errorMessage = i18n.baseText(
@@ -86,7 +87,6 @@ async function displayActivationError() {
 		message: errorMessage,
 		type: 'warning',
 		duration: 0,
-		dangerouslyUseHTMLString: true,
 	});
 }
 </script>