feat(editor): mapping expressions from input table (#3864)

* implement tree render

* update styles

* implement slots

* fix recursive tree rendering

* make not recursive

* Revert "make not recursive"

f064fc14f4aa78573a8b978887076f5dfdb80d83

* enable dragging

* fix dragging name

* fix col bug

* update values and styles

* update style

* update colors

* update design

* add hover state

* add dragging behavior

* format file

* update pill text

* add depth field

* typo

* add avg height

* update event name

* update expr at distance

* add right margin always

* add space

* handle long values

* update types

* update messages

* update keys styling

* update spacing size

* fix hover bug

* update switch spacing

* fix wrap issue

* update spacing issues

* remove br

* update hoverable

* reduce event

* replace tree

* update prop name

* update tree story

* update tree

* refactor run data

* add unit tests

* add test for nodeclass

* remove number check

* bring back hook

* address review comments

* update margin

* update tests

* address max's feedback

* update tslint issues

* if empty, remove min width

* update spacing back

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

@@ -3,23 +3,44 @@
 		<table :class="$style.table" v-if="tableData.columns && tableData.columns.length === 0">
 			<tr>
 				<th :class="$style.emptyCell"></th>
+				<th :class="$style.tableRightMargin"></th>
 			</tr>
 			<tr v-for="(row, index1) in tableData.data" :key="index1">
 				<td>
 					<n8n-text>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-text>
 				</td>
+				<td :class="$style.tableRightMargin"></td>
 			</tr>
 		</table>
 		<table :class="$style.table" v-else>
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled || showHintWithDelay" :open-delay="1000">
-							<div slot="content" v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"></div>
-							<Draggable type="mapping" :data="getExpression(column)" :disabled="!mappingEnabled" @dragstart="onDragStart" @dragend="(column) => onDragEnd(column)">
+						<n8n-tooltip
+							placement="bottom-start"
+							:disabled="!mappingEnabled || showHintWithDelay"
+							:open-delay="1000"
+						>
+							<div
+								slot="content"
+								v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"
+							></div>
+							<Draggable
+								type="mapping"
+								:data="getExpression(column)"
+								:disabled="!mappingEnabled"
+								@dragstart="onDragStart"
+								@dragend="(column) => onDragEnd(column, 'column')"
+							>
 								<template v-slot:preview="{ canDrop }">
-									<div :class="[$style.dragPill, canDrop ? $style.droppablePill: $style.defaultPill]">
-										{{ $locale.baseText('dataMapping.mapSpecificColumnToField', { interpolate: { name: shorten(column, 16, 2) } }) }}
+									<div
+										:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
+									>
+										{{
+											$locale.baseText('dataMapping.mapSpecificColumnToField', {
+												interpolate: { name: shorten(column, 16, 2) },
+											})
+										}}
 									</div>
 								</template>
 								<template v-slot="{ isDragging }">
@@ -27,14 +48,32 @@
 										:class="{
 											[$style.header]: true,
 											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.activeHeader]:
+												(i === activeColumn || forceShowGrip) && mappingEnabled,
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
-										<span>{{ column || "&nbsp;" }}</span>
-										<n8n-tooltip v-if="mappingEnabled" placement="bottom-start" :manual="true" :value="i === 0 && showHintWithDelay">
-											<div v-if="focusedMappableInput" slot="content" v-html="$locale.baseText('dataMapping.tableHint', { interpolate: { name: focusedMappableInput } })"></div>
-											<div v-else slot="content" v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"></div>
+										<span>{{ column || '&nbsp;' }}</span>
+										<n8n-tooltip
+											v-if="mappingEnabled"
+											placement="bottom-start"
+											:manual="true"
+											:value="i === 0 && showHintWithDelay"
+										>
+											<div
+												v-if="focusedMappableInput"
+												slot="content"
+												v-html="
+													$locale.baseText('dataMapping.tableHint', {
+														interpolate: { name: focusedMappableInput },
+													})
+												"
+											></div>
+											<div
+												v-else
+												slot="content"
+												v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"
+											></div>
 											<div :class="$style.dragButton">
 												<font-awesome-icon icon="grip-vertical" />
 											</div>
@@ -44,19 +83,74 @@
 							</Draggable>
 						</n8n-tooltip>
 					</th>
+					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
-			<tbody>
-				<tr v-for="(row, index1) in tableData.data" :key="index1">
-					<td
-						v-for="(data, index2) in row"
-						:key="index2"
-						:data-col="index2"
-						@mouseenter="onMouseEnterCell"
-						@mouseleave="onMouseLeaveCell"
-					>{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</td>
-				</tr>
-			</tbody>
+			<Draggable
+				tag="tbody"
+				type="mapping"
+				targetDataKey="mappable"
+				:disabled="!mappingEnabled"
+				@dragstart="onCellDragStart"
+				@dragend="onCellDragEnd"
+				ref="draggable"
+			>
+				<template v-slot:preview="{ canDrop, el }">
+					<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
+						{{
+							$locale.baseText(
+								tableData.data.length > 1
+									? 'dataMapping.mapAllKeysToField'
+									: 'dataMapping.mapSpecificColumnToField',
+								{
+									interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
+								},
+							)
+						}}
+					</div>
+				</template>
+				<template>
+					<tr v-for="(row, index1) in tableData.data" :key="index1">
+						<td
+							v-for="(data, index2) in row"
+							:key="index2"
+							:data-col="index2"
+							@mouseenter="onMouseEnterCell"
+							@mouseleave="onMouseLeaveCell"
+							:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
+						>
+							<span v-if="isSimple(data)" :class="$style.value">{{
+								[null, undefined].includes(data) ? '&nbsp;' : data
+							}}</span>
+							<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
+								<template v-slot:label="{ label, path }">
+									<span
+										@mouseenter="() => onMouseEnterKey(path, index2)"
+										@mouseleave="onMouseLeaveKey"
+										:class="{
+											[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
+											[$style.draggingKey]: isDraggingKey(path, index2),
+											[$style.dataKey]: true,
+											[$style.mappable]: mappingEnabled,
+										}"
+										data-target="mappable"
+										:data-name="getCellPathName(path, index2)"
+										:data-value="getCellExpression(path, index2)"
+										:data-depth="path.length"
+										>{{ label || $locale.baseText('runData.unnamedField') }}</span
+									>
+								</template>
+								<template v-slot:value="{ value }">
+									<span :class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }">{{
+										getValueToRender(value)
+									}}</span>
+								</template>
+							</n8n-tree>
+						</td>
+						<td :class="$style.tableRightMargin"></td>
+					</tr>
+				</template>
+			</Draggable>
 		</table>
 	</div>
 </template>
@@ -64,6 +158,7 @@
 <script lang="ts">
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { INodeUi, ITableData } from '@/Interface';
+import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 import Draggable from './Draggable.vue';
@@ -77,8 +172,8 @@ export default mixins(externalHooks).extend({
 		node: {
 			type: Object as () => INodeUi,
 		},
-		tableData: {
-			type: Object as () => ITableData,
+		inputData: {
+			type: Object as () => INodeExecutionData[],
 		},
 		mappingEnabled: {
 			type: Boolean,
@@ -102,6 +197,8 @@ export default mixins(externalHooks).extend({
 			showHintWithDelay: false,
 			forceShowGrip: false,
 			draggedColumn: false,
+			draggingPath: null as null | string,
+			hoveringPath: null as null | string,
 		};
 	},
 	mounted() {
@@ -111,13 +208,30 @@ export default mixins(externalHooks).extend({
 				this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
 			}, 500);
 		}
+
+		if (this.tableData && this.tableData.columns && this.$refs.draggable) {
+			const tbody = (this.$refs.draggable as Vue).$refs.wrapper as HTMLElement;
+			if (tbody) {
+				this.$emit('mounted', {
+					avgRowHeight: tbody.offsetHeight / this.tableData.data.length,
+				});
+			}
+		}
 	},
 	computed: {
-		focusedMappableInput (): string {
+		tableData(): ITableData {
+			return this.convertToTable(this.inputData);
+		},
+		focusedMappableInput(): string {
 			return this.$store.getters['ui/focusedMappableInput'];
 		},
-		showHint (): boolean {
-			return !this.draggedColumn && (this.showMappingHint || (!!this.focusedMappableInput && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'));
+		showHint(): boolean {
+			return (
+				!this.draggedColumn &&
+				(this.showMappingHint ||
+					(!!this.focusedMappableInput &&
+						window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'))
+			);
 		},
 	},
 	methods: {
@@ -134,6 +248,17 @@ export default mixins(externalHooks).extend({
 		onMouseLeaveCell() {
 			this.activeColumn = -1;
 		},
+		onMouseEnterKey(path: string[], colIndex: number) {
+			this.hoveringPath = this.getCellExpression(path, colIndex);
+		},
+		onMouseLeaveKey() {
+			this.hoveringPath = null;
+		},
+		isHovering(path: string[], colIndex: number) {
+			const expr = this.getCellExpression(path, colIndex);
+
+			return this.hoveringPath === expr;
+		},
 		getExpression(column: string) {
 			if (!this.node) {
 				return '';
@@ -145,12 +270,94 @@ export default mixins(externalHooks).extend({
 
 			return `{{ $node["${this.node.name}"].json["${column}"] }}`;
 		},
+		getPathNameFromTarget(el: HTMLElement) {
+			if (!el) {
+				return '';
+			}
+			return el.dataset.name;
+		},
+		getCellPathName(path: Array<string | number>, colIndex: number) {
+			const lastKey = path[path.length - 1];
+			if (typeof lastKey === 'string') {
+				return lastKey;
+			}
+			if (path.length > 1) {
+				const prevKey = path[path.length - 2];
+				return `${prevKey}[${lastKey}]`;
+			}
+			const column = this.tableData.columns[colIndex];
+			return `${column}[${lastKey}]`;
+		},
+		getCellExpression(path: Array<string | number>, colIndex: number) {
+			if (!this.node) {
+				return '';
+			}
+
+			const expr = path.reduce((accu: string, key: string | number) => {
+				if (typeof key === 'number') {
+					return `${accu}[${key}]`;
+				}
+
+				return `${accu}["${key}"]`;
+			}, '');
+			const column = this.tableData.columns[colIndex];
+
+			if (this.distanceFromActive === 1) {
+				return `{{ $json["${column}"]${expr} }}`;
+			}
+
+			return `{{ $node["${this.node.name}"].json["${column}"]${expr} }}`;
+		},
+		isEmpty(value: unknown) {
+			return (
+				value === '' ||
+				(Array.isArray(value) && value.length === 0) ||
+				(typeof value === 'object' && value !== null && Object.keys(value).length === 0)
+			);
+		},
+		getValueToRender(value: unknown) {
+			if (value === '') {
+				return this.$locale.baseText('runData.emptyString');
+			}
+			if (typeof value === 'string') {
+				return value.replaceAll('\n', '\\n');
+			}
+
+			if (Array.isArray(value) && value.length === 0) {
+				return this.$locale.baseText('runData.emptyArray');
+			}
+
+			if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
+				return this.$locale.baseText('runData.emptyObject');
+			}
+
+			return value;
+		},
 		onDragStart() {
 			this.draggedColumn = true;
 
 			this.$store.commit('ui/resetMappingTelemetry');
 		},
-		onDragEnd(column: string) {
+		onCellDragStart(el: HTMLElement) {
+			if (el && el.dataset.value) {
+				this.draggingPath = el.dataset.value;
+			}
+
+			this.onDragStart();
+		},
+		onCellDragEnd(el: HTMLElement) {
+			this.draggingPath = null;
+
+			this.onDragEnd(el.dataset.name || '', 'tree', el.dataset.depth || '0');
+		},
+		isDraggingKey(path: Array<string | number>, colIndex: number) {
+			if (!this.draggingPath) {
+				return;
+			}
+
+			return this.draggingPath === this.getCellExpression(path, colIndex);
+		},
+		onDragEnd(column: string, src: string, depth = '0') {
 			setTimeout(() => {
 				const mappingTelemetry = this.$store.getters['ui/mappingTelemetry'];
 				const telemetryPayload = {
@@ -159,8 +366,9 @@ export default mixins(externalHooks).extend({
 					src_nodes_back: this.distanceFromActive,
 					src_run_index: this.runIndex,
 					src_runs_total: this.totalRuns,
+					src_field_nest_level: parseInt(depth, 10),
 					src_view: 'table',
-					src_element: 'column',
+					src_element: src,
 					success: false,
 					...mappingTelemetry,
 				};
@@ -170,14 +378,82 @@ export default mixins(externalHooks).extend({
 				this.$telemetry.track('User dragged data for mapping', telemetryPayload);
 			}, 1000); // ensure dest data gets set if drop
 		},
+		isSimple(data: unknown): boolean {
+			return typeof data !== 'object';
+		},
+		hasJsonInColumn(colIndex: number): boolean {
+			return this.tableData.hasJson[this.tableData.columns[colIndex]];
+		},
+		convertToTable(inputData: INodeExecutionData[]): ITableData {
+			const tableData: GenericValue[][] = [];
+			const tableColumns: string[] = [];
+			let leftEntryColumns: string[], entryRows: GenericValue[];
+			// Go over all entries
+			let entry: IDataObject;
+			const hasJson: { [key: string]: boolean } = {};
+			inputData.forEach((data) => {
+				if (!data.hasOwnProperty('json')) {
+					return;
+				}
+				entry = data.json;
+
+				// Go over all keys of entry
+				entryRows = [];
+				leftEntryColumns = Object.keys(entry);
+
+				// Go over all the already existing column-keys
+				tableColumns.forEach((key) => {
+					if (entry.hasOwnProperty(key)) {
+						// Entry does have key so add its value
+						entryRows.push(entry[key]);
+						// Remove key so that we know that it got added
+						leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
+
+						hasJson[key] = typeof entry[key] === 'object' || hasJson[key] || false;
+					} else {
+						// Entry does not have key so add null
+						entryRows.push(null);
+					}
+				});
+
+				// Go over all the columns the entry has but did not exist yet
+				leftEntryColumns.forEach((key) => {
+					// Add the key for all runs in the future
+					tableColumns.push(key);
+					// Add the value
+					entryRows.push(entry[key]);
+					hasJson[key] = hasJson[key] || (entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0);
+				});
+
+				// Add the data of the entry
+				tableData.push(entryRows);
+			});
+
+			// 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));
+				}
+			});
+
+			return {
+				hasJson,
+				columns: tableColumns,
+				data: tableData,
+			};
+		},
 	},
 	watch: {
-		focusedMappableInput (curr: boolean) {
-			setTimeout(() => {
-				this.forceShowGrip = !!this.focusedMappableInput;
-			}, curr? 300: 150);
+		focusedMappableInput(curr: boolean) {
+			setTimeout(
+				() => {
+					this.forceShowGrip = !!this.focusedMappableInput;
+				},
+				curr ? 300 : 150,
+			);
 		},
-		showHint (curr: boolean, prev: boolean) {
+		showHint(curr: boolean, prev: boolean) {
 			if (curr) {
 				setTimeout(() => {
 					this.showHintWithDelay = this.showHint;
@@ -185,8 +461,7 @@ export default mixins(externalHooks).extend({
 						this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
 					}
 				}, 1000);
-			}
-			else {
+			} else {
 				this.showHintWithDelay = false;
 			}
 		},
@@ -198,8 +473,7 @@ export default mixins(externalHooks).extend({
 .table {
 	border-collapse: separate;
 	text-align: left;
-	width: calc(100% - var(--spacing-s));
-	margin-right: var(--spacing-s);
+	width: calc(100%);
 	font-size: var(--font-size-s);
 
 	th {
@@ -209,15 +483,15 @@ export default mixins(externalHooks).extend({
 		border-left: var(--border-base);
 		position: sticky;
 		top: 0;
-		max-width: 300px;
+		color: var(--color-text-dark);
 	}
 
 	td {
-		padding: var(--spacing-2xs);
+		vertical-align: top;
+		padding: var(--spacing-2xs) var(--spacing-2xs) var(--spacing-2xs) var(--spacing-3xs);
 		border-bottom: var(--border-base);
 		border-left: var(--border-base);
 		overflow-wrap: break-word;
-		max-width: 300px;
 		white-space: pre-wrap;
 	}
 
@@ -227,6 +501,10 @@ export default mixins(externalHooks).extend({
 	}
 }
 
+.nodeClass {
+	margin-bottom: var(--spacing-5xs);
+}
+
 .emptyCell {
 	height: 32px;
 }
@@ -288,4 +566,54 @@ export default mixins(externalHooks).extend({
 	transform: translate(-50%, -100%);
 	box-shadow: 0px 2px 6px rgba(68, 28, 23, 0.2);
 }
+
+.dataKey {
+	color: var(--color-text-dark);
+	line-height: 1.7;
+	font-weight: var(--font-weight-bold);
+	border-radius: var(--border-radius-base);
+	padding: 0 var(--spacing-5xs) 0 var(--spacing-5xs);
+	margin-right: var(--spacing-5xs);
+}
+
+.value {
+	line-height: var(--font-line-height-regular);
+}
+
+.nestedValue {
+	composes: value;
+	margin-left: var(--spacing-4xs);
+}
+
+.mappable {
+	cursor: grab;
+}
+
+.empty {
+	color: var(--color-danger);
+}
+
+.limitColWidth {
+	max-width: 300px;
+}
+
+.minColWidth {
+	min-width: 240px;
+}
+
+.hoveringKey {
+	background-color: var(--color-foreground-base);
+}
+
+.draggingKey {
+	background-color: var(--color-primary-tint-2);
+}
+
+.tableRightMargin {
+	// becomes necessary with large tables
+	width: var(--spacing-s);
+	border-right: none !important;
+	border-top: none !important;
+	border-bottom: none !important;
+}
 </style>