From 3411b5d0e82367d4e8fe4e2485f4f4e3064ed2db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 3 Dec 2021 11:28:39 +0100
Subject: [PATCH] :bug: Fix HTML rendering in read only component

---
 .../ExecutionDetails/ExecutionDetails.vue     | 16 +++++-------
 .../MainHeader/ExecutionDetails/ReadOnly.vue  | 26 +++++++++++++++++++
 packages/editor-ui/src/i18n/locales/de.json   |  6 +++--
 packages/editor-ui/src/i18n/locales/en.json   |  6 +++--
 4 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue

diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
index 0f3b3b6abd..7f19359650 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
@@ -36,15 +36,7 @@
 			</span>
 			{{ $baseText('executionDetails.workflow') }}
 		</span>
-		<n8n-tooltip class="read-only primary-color" placement="bottom-end" >
-			<div slot="content">
-				{{ $baseText('executionDetails.youreViewingTheLogOf') }}
-			</div>
-			<span>
-				<font-awesome-icon icon="exclamation-triangle" />
-				{{ $baseText('executionDetails.readOnly') }}
-			</span>
-		</n8n-tooltip>
+		<ReadOnly class="read-only" />
 	</div>
 </template>
 
@@ -57,11 +49,13 @@ import { titleChange } from "@/components/mixins/titleChange";
 
 import WorkflowNameShort from "@/components/WorkflowNameShort.vue";
 import { renderText } from "@/components/mixins/renderText";
+import ReadOnly from "@/components/MainHeader/ExecutionDetails/ReadOnly.vue";
 
 export default mixins(titleChange, renderText).extend({
 	name: "ExecutionDetails",
 	components: {
 		WorkflowNameShort,
+		ReadOnly,
 	},
 	computed: {
 		executionId(): string | undefined {
@@ -124,4 +118,8 @@ export default mixins(titleChange, renderText).extend({
 .read-only {
 	align-self: flex-end;
 }
+
+.el-tooltip.read-only div {
+	max-width: 400px;
+}
 </style>
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
new file mode 100644
index 0000000000..52b5d4ade8
--- /dev/null
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
@@ -0,0 +1,26 @@
+<template>
+	<n8n-tooltip class="primary-color" placement="bottom-end" >
+		<div slot="content">
+			<span v-html="$baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
+		</div>
+		<div>
+			<font-awesome-icon icon="exclamation-triangle" />
+			<span v-html="$baseText('executionDetails.readOnly.readOnly')"></span>
+		</div>
+	</n8n-tooltip>
+</template>
+
+<script lang="ts">
+import { renderText } from "@/components/mixins/renderText";
+import mixins from "vue-typed-mixins";
+
+export default mixins(renderText).extend({
+	name: "ReadOnly",
+});
+</script>
+
+<style scoped>
+svg {
+	margin-right: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/editor-ui/src/i18n/locales/de.json b/packages/editor-ui/src/i18n/locales/de.json
index 4caf52467a..2e3731ad41 100644
--- a/packages/editor-ui/src/i18n/locales/de.json
+++ b/packages/editor-ui/src/i18n/locales/de.json
@@ -182,8 +182,10 @@
 		"openWorkflow": "🇩🇪 Open Workflow",
 		"of": "🇩🇪 of",
 		"workflow": "🇩🇪 workflow",
-		"readOnly": "🇩🇪 Read only",
-		"youreViewingTheLogOf": "🇩🇪 You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left."
+		"readOnly": {
+			"readOnly": "🇩🇪 Read only",
+			"youreViewingTheLogOf": "🇩🇪 You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left."
+		}
 	},
 	"executionsList": {
 		"allWorkflows": "🇩🇪 All Workflows",
diff --git a/packages/editor-ui/src/i18n/locales/en.json b/packages/editor-ui/src/i18n/locales/en.json
index 85867aa158..110c6174b9 100644
--- a/packages/editor-ui/src/i18n/locales/en.json
+++ b/packages/editor-ui/src/i18n/locales/en.json
@@ -166,8 +166,10 @@
 		"openWorkflow": "Open Workflow",
 		"of": "of",
 		"workflow": "workflow",
-		"readOnly": "Read only",
-		"youreViewingTheLogOf": "You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left."
+		"readOnly": {
+			"readOnly": "Read only",
+			"youreViewingTheLogOf": "You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left."
+		}
 	},
 	"executionsList": {
 		"allWorkflows": "All Workflows",