From 30484a0615c90525fa0604b8b0df16159f18a6d4 Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Fri, 28 Jul 2023 16:59:06 +0200
Subject: [PATCH] fix(editor): Resolve vue 3 related console-warnings (#6779)

* fix(editor): Resolve vue 3 related console-warnings

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Use span as component wrapper instead of div

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Wrap popover component in span

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 .../src/components/N8nPopover/Popover.vue     | 14 ++++----
 .../src/components/NodeExecuteButton.vue      | 36 ++++++++++---------
 .../src/components/WarningTooltip.vue         | 14 ++++----
 .../src/plugins/i18n/locales/en.json          |  2 +-
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/design-system/src/components/N8nPopover/Popover.vue b/packages/design-system/src/components/N8nPopover/Popover.vue
index 352eb6053c..c853e7ab80 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.vue
+++ b/packages/design-system/src/components/N8nPopover/Popover.vue
@@ -14,10 +14,12 @@ export default defineComponent({
 </script>
 
 <template>
-	<el-popover v-bind="{ ...$props, ...$attrs }">
-		<template #reference>
-			<slot name="reference" />
-		</template>
-		<slot />
-	</el-popover>
+	<span>
+		<el-popover v-bind="{ ...$props, ...$attrs }">
+			<template #reference>
+				<slot name="reference" />
+			</template>
+			<slot />
+		</el-popover>
+	</span>
 </template>
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 9aa382044d..62ad18cc14 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -1,21 +1,23 @@
 <template>
-	<n8n-tooltip placement="bottom" :disabled="!disabledHint">
-		<template #content>
-			<div>{{ disabledHint }}</div>
-		</template>
-		<div>
-			<n8n-button
-				v-bind="$attrs"
-				:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"
-				:disabled="disabled || !!disabledHint"
-				:label="buttonLabel"
-				:type="type"
-				:size="size"
-				:transparentBackground="transparent"
-				@click="onClick"
-			/>
-		</div>
-	</n8n-tooltip>
+	<span>
+		<n8n-tooltip placement="bottom" :disabled="!disabledHint">
+			<template #content>
+				<div>{{ disabledHint }}</div>
+			</template>
+			<div>
+				<n8n-button
+					v-bind="$attrs"
+					:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"
+					:disabled="disabled || !!disabledHint"
+					:label="buttonLabel"
+					:type="type"
+					:size="size"
+					:transparentBackground="transparent"
+					@click="onClick"
+				/>
+			</div>
+		</n8n-tooltip>
+	</span>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/WarningTooltip.vue b/packages/editor-ui/src/components/WarningTooltip.vue
index e314fc8775..a6e7198057 100644
--- a/packages/editor-ui/src/components/WarningTooltip.vue
+++ b/packages/editor-ui/src/components/WarningTooltip.vue
@@ -1,10 +1,12 @@
 <template>
-	<n8n-tooltip content=" " placement="top">
-		<template #content>
-			<slot />
-		</template>
-		<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
-	</n8n-tooltip>
+	<span>
+		<n8n-tooltip content=" " placement="top">
+			<template #content>
+				<slot />
+			</template>
+			<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
+		</n8n-tooltip>
+	</span>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index b2f36ac139..0306926480 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -731,7 +731,7 @@
 	"node.waitingForYouToCreateAnEventIn": "Waiting for you to create an event in {nodeType}",
 	"node.discovery.pinData.canvas": "You can pin this output instead of waiting for a test event. Open node to do so.",
 	"node.discovery.pinData.ndv": "You can pin this output instead of waiting for a test event.",
-	"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node<br />or drag to connect",
+	"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node \n or drag to connect",
 	"nodeCreator.actionsPlaceholderNode.scheduleTrigger": "On a Schedule",
 	"nodeCreator.actionsPlaceholderNode.webhook": "On a Webhook call",
 	"nodeCreator.actionsCategory.actions": "Actions",