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

* fix(editor): Resolve vue 3 related console-warnings Signed-off-by: Oleg Ivaniv <[email protected]> * Use span as component wrapper instead of div Signed-off-by: Oleg Ivaniv <[email protected]> * Wrap popover component in span Signed-off-by: Oleg Ivaniv <[email protected]> --------- Signed-off-by: Oleg Ivaniv <[email protected]>
n8n-io · Aug 3, 2023 · 5b81126 · 5b81126
1 parent 5140bcd
commit 5b81126
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -749,7 +749,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",