fix(editor): limiting columns in table view to prevent unresponsive UI when opening NDV (#4480)

* fix(editor): limiting columns in table view

* fix(editor): adding ghost table column with tooltip to table view

* fix(editor): limit columns to 40

* fix(editor): show table columns if it doesn't exceed the limit

* fix(editor): rolling back globalLinkActions changes

* fix(editor): using i18n tag for having cleaner event handling

* fix(editor): emphasizing magic variable

* fix(editor): removing unused prop

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

@@ -229,6 +229,7 @@
 				:hasDefaultHoverState="paneType === 'input'"
 				@mounted="$emit('tableMounted', $event)"
 				@activeRowChanged="onItemHover"
+				@displayModeChange="onDisplayModeChange"
 			/>
 
 			<run-data-json

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

@@ -66,6 +66,19 @@
 							</draggable>
 						</n8n-tooltip>
 					</th>
+					<th v-if="columnLimitExceeded" :class="$style.header">
+						<n8n-tooltip placement="bottom-end">
+							<div slot="content">
+								<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
+									<a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
+								</i18n>
+							</div>
+							<span>
+								<font-awesome-icon :class="$style['warningTooltip']" icon="exclamation-triangle"></font-awesome-icon>
+								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
+							</span>
+						</n8n-tooltip>
+					</th>
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
@@ -129,6 +142,7 @@
 								</template>
 							</n8n-tree>
 						</td>
+						<td v-if="columnLimitExceeded"></td>
 						<td :class="$style.tableRightMargin"></td>
 					</tr>
 				</template>
@@ -138,16 +152,16 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable prefer-spread */
-
-import { INodeUi, IRootState, ITableData, IUiState, NDVState } from '@/Interface';
+import { INodeUi, IRootState, ITableData, NDVState } from '@/Interface';
 import { getPairedItemId } from '@/pairedItemUtils';
 import Vue, { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
-import Draggable from './Draggable.vue';
-import { shorten } from './helpers';
-import { externalHooks } from './mixins/externalHooks';
+import Draggable from '@/components/Draggable.vue';
+import { shorten } from '@/components/helpers';
+import { externalHooks } from '@/components/mixins/externalHooks';
+
+const MAX_COLUMNS_LIMIT = 40;
 
 export default mixins(externalHooks).extend({
 	name: 'run-data-table',
@@ -189,6 +203,7 @@ export default mixins(externalHooks).extend({
 			hoveringPath: null as null | string,
 			mappingHintVisible: false,
 			activeRow: null as number | null,
+			columnLimitExceeded: false,
 		};
 	},
 	mounted() {
@@ -202,7 +217,7 @@ export default mixins(externalHooks).extend({
 		}
 	},
 	computed: {
-		hoveringItem(): NDVState['ndv']['hoveringItem'] {
+		hoveringItem(): NDVState['hoveringItem'] {
 			return this.$store.getters['ndv/hoveringItem'];
 		},
 		pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] {
@@ -411,7 +426,14 @@ export default mixins(externalHooks).extend({
 
 				// Go over all keys of entry
 				entryRows = [];
-				leftEntryColumns = Object.keys(entry || {});
+				const entryColumns = Object.keys(entry || {});
+
+				if(entryColumns.length > MAX_COLUMNS_LIMIT) {
+					this.columnLimitExceeded = true;
+					leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
+				} else {
+					leftEntryColumns = entryColumns;
+				}
 
 				// Go over all the already existing column-keys
 				tableColumns.forEach((key) => {
@@ -450,8 +472,8 @@ export default mixins(externalHooks).extend({
 			// Make sure that all entry-rows have the same length
 			tableData.forEach((entryRows) => {
 				if (tableColumns.length > entryRows.length) {
-					// Has to less entries so add the missing ones
-					entryRows.push.apply(entryRows, new Array(tableColumns.length - entryRows.length));
+					// Has fewer entries so add the missing ones
+					entryRows.push(...new Array(tableColumns.length - entryRows.length));
 				}
 			});
 
@@ -461,6 +483,9 @@ export default mixins(externalHooks).extend({
 				data: tableData,
 			};
 		},
+		switchToJsonView(){
+			this.$emit('displayModeChange', 'json');
+		},
 	},
 });
 </script>
@@ -654,4 +679,9 @@ export default mixins(externalHooks).extend({
 		background-color: var(--color-secondary);
 	}
 }
+
+.warningTooltip {
+	color: var(--color-warning);
+}
+
 </style>

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -361,6 +361,9 @@
 	"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.tooltip.link": "JSON view",
 	"displayWithChange.cancelEdit": "Cancel Edit",
 	"displayWithChange.clickToChange": "Click to Change",
 	"displayWithChange.setValue": "Set Value",