From 3ac9ba3491c0dc1de283bc4285a243e02747f971 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 21 Nov 2022 13:00:21 +0100
Subject: [PATCH] fix(editor): Table view column limit tooltip (#4655)

* fix(editor): Table view column limit tooltip

* fix(editor): lint fix

* fix(editor): fix max column limit

* fix(editor): code formatting
---
 .../ResourceLocator/ResourceLocator.vue       | 24 +++++++++----------
 .../editor-ui/src/components/RunDataTable.vue |  6 ++++-
 .../src/plugins/i18n/locales/en.json          |  4 ++--
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 0b0c6c9725..a011930c3f 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -69,8 +69,7 @@
 						:stickyOffset="4"
 						@drop="onDrop"
 					>
-						<!-- eslint-disable-next-line vue/v-slot-style -->
-						<template v-slot="{ droppable, activeDrop }">
+						<template #default="{ droppable, activeDrop }">
 							<div
 								:class="{
 									[$style.listModeInputContainer]: isListMode,
@@ -104,17 +103,16 @@
 									@focus="onInputFocus"
 									@blur="onInputBlur"
 								>
-								<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-									<div v-if="isListMode" slot="suffix">
-											<i
-												:class="{
-													['el-input__icon']: true,
-													['el-icon-arrow-down']: true,
-													[$style.selectIcon]: true,
-													[$style.isReverse]: showResourceDropdown,
-												}"
-											></i>
-										</div>
+									<template v-if="isListMode" #suffix>
+										<i
+											:class="{
+												['el-input__icon']: true,
+												['el-icon-arrow-down']: true,
+												[$style.selectIcon]: true,
+												[$style.isReverse]: showResourceDropdown,
+											}"
+										/>
+										</template>
 								</n8n-input>
 							</div>
 						</template>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 771972c15e..9be436d892 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -73,7 +73,10 @@
 							<template #content>
 								<div>
 									<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
-										<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
+										<template #columnLimit>{{ columnLimit }}</template>
+										<template #link>
+										  <a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
+										</template>
 									</i18n>
 								</div>
 							</template>
@@ -212,6 +215,7 @@ export default mixins(externalHooks).extend({
 			hoveringPath: null as null | string,
 			mappingHintVisible: false,
 			activeRow: null as number | null,
+			columnLimit: MAX_COLUMNS_LIMIT,
 			columnLimitExceeded: false,
 		};
 	},
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 445402cf63..8900502d9c 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -364,8 +364,8 @@
 	"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
 	"dataMapping.mapKeyToField": "Map '{name}' to a field",
 	"dataMapping.mapAllKeysToField": "Map every '{name}' to a field",
-	"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden.",
-	"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {0} to see all data.",
+	"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
+	"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",
 	"displayWithChange.cancelEdit": "Cancel Edit",
 	"displayWithChange.clickToChange": "Click to Change",