feat(editor-ui): JSON mapping (#4270)

* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour (#4152)

* fix(editor-ui): export interface to solve 'TS4082: Default export of the module has or is using private name' error temporarily

* refactor(editor-ui): update 'vue-json-pretty' and adjust component to preserve same behaviour

* refactor(editor-ui): move json data view into its own component (#4158)

* refactor(editor-ui): move json data view into its own component

* fix(editor-ui): make JSON data component work again

* fix(editor-ui): JSON data component type issues

* fix(editor-ui): JSON data component prop 'inputData'

* refactor(editor-ui): rename helper function

* fix(editor-ui): add declaration to `vue-json-pretty` component

* refactor(editor-ui): JSON mapping move more logic to new component

* refactor(editor-ui): some cleanup in JSON mapping component

* refactor(editor-ui): changing key mapping translation

* refactor(editor-ui): add basic drag'n'drop functionality to JSON view

* refactor(editor-ui): moving JSON view actions into separate components

* fix(editor-ui): JSON view action copy default selected path

* fix(editor-ui): refactor draggable to play nicer with other (3rd party) components

* fix(editor-ui): improve draggable performance

* fix(editor-ui): add disable user selection class to body

* fix(editor-ui): reduce click handler cognitive load in JSON view copy actions

* fix(editor-ui): JSON view mapped path

* fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue

* fix(editor-ui): respect input node distance when json parameter path is copied

* fix(editor-ui): JSON mapping property highlight

* fix(editor-ui): block event only on mousemove for draggable to not select content

* refactor(editor-ui): fixing prop types and organising imports

* fix(editor-ui): JSON view use double quotes where appropriate

* fix(editor-ui): fix new package additions after merge conflict

* fix(editor-ui): fix package update after merge conflict

* fix(editor-ui): JSON view prop names text break

* fix(editor-ui): use kebab-case name for component

* fix(editor-ui): calling convertPath on draggable node path

* feat(editor-ui): add mapping discoverability tooltip to mappable inputs (#4227)

* refactor(editor-ui): move json data view into its own component

* fix(editor-ui): make JSON data component work again

* fix(editor-ui): JSON data component type issues

* fix(editor-ui): JSON data component prop 'inputData'

* refactor(editor-ui): rename helper function

* fix(editor-ui): add declaration to `vue-json-pretty` component

* refactor(editor-ui): JSON mapping move more logic to new component

* refactor(editor-ui): some cleanup in JSON mapping component

* refactor(editor-ui): changing key mapping translation

* refactor(editor-ui): add basic drag'n'drop functionality to JSON view

* refactor(editor-ui): moving JSON view actions into separate components

* fix(editor-ui): JSON view action copy default selected path

* fix(editor-ui): refactor draggable to play nicer with other (3rd party) components

* fix(editor-ui): improve draggable performance

* fix(editor-ui): add disable user selection class to body

* fix(editor-ui): reduce click handler cognitive load in JSON view copy actions

* fix(editor-ui): JSON view mapped path

* fix(editor-ui): remove unnecessary wrapper around RunDataTable.vue

* fix(editor-ui): respect input node distance when json parameter path is copied

* fix(editor-ui): JSON mapping property highlight

* fix(editor-ui): block event only on mousemove for draggable to not select content

* refactor(editor-ui): fixing prop types and organising imports

* fix(editor-ui): JSON view use double quotes where appropriate

* fix(editor-ui): fix new package additions after merge conflict

* fix(editor-ui): fix package update after merge conflict

* fix(editor-ui): JSON view prop names text break

* fix(editor-ui): update helper after merge conflict

* refactor(editor-ui): cleanup RunaDataTable tooltips

* refactor(editor-ui): add temporary static tooltip to input with mapping

* fix(editor-ui): input mapping tooltip proper input name

* fix(editor-ui): show input mapping tooltip when conditions are met

* fix(editor-ui): show different input mapping tooltip for different view types (table, json)

* fix(editor-ui): drop lodash isEmpty

* fix(editor-ui): using and keeping only getter function

* fix(editor-ui): check `INodeExecutionData[]` array emptyness (still needs some improvement)

* feat(editor-ui): add telemetry calls to data mapping (#4250)

* fix(editor-ui): add types package for jsonpath

* fix(editor-ui): JSON view drag'n'drop telemetry call

* fix(editor-ui): add data mapping tooltip close telemetry to parameter input

* fix(editor-ui): execute previous node tooltip linebreak

* fix(editor-ui): input data mapping tooltip show-hide logic

* fix(editor-ui): input data mapping tooltip position

* fix(editor-ui): using a placeholder gif in mapping discoverability tooltip

* refactor(design-system): adding optional configurable buttons to tooltip (#4260)

* refactor(design-system): unbreaking wrapper around element ui tooltip

* fix(design-system): update test snapshot

* refactor(design-system): adding buttons to tooltip

* fix(design-system): update test snapshot

* fix(design-system): change tooltip props and some cleanup

* fix(design-system): update test snapshot

* chore: fix package lock file after merge

* fix(editor-ui): modifications according to Max's review (#4273)

* fix(editor-ui): modifications according to Max's review

* fix(editor-ui): JSON prop names should not be written bold

* fix(editor-ui): use proper animated gif in JSON data mapping discoverability tooltip

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

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="$style.dataDisplay">
 		<table :class="$style.table" v-if="tableData.columns && tableData.columns.length === 0">
 			<tr>
 				<th :class="$style.emptyCell"></th>
@@ -18,14 +18,14 @@
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
 						<n8n-tooltip
 							placement="bottom-start"
-							:disabled="!mappingEnabled || showHintWithDelay"
+							:disabled="!mappingEnabled"
 							:open-delay="1000"
 						>
 							<div slot="content">
 								<img src='/static/data-mapping-gif.gif'/>
 								{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
 							</div>
-							<Draggable
+							<draggable
 								type="mapping"
 								:data="getExpression(column)"
 								:disabled="!mappingEnabled"
@@ -37,7 +37,7 @@
 										:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
 									>
 										{{
-											$locale.baseText('dataMapping.mapSpecificColumnToField', {
+											$locale.baseText('dataMapping.mapKeyToField', {
 												interpolate: { name: shorten(column, 16, 2) },
 											})
 										}}
@@ -48,43 +48,23 @@
 										:class="{
 											[$style.header]: true,
 											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.activeHeader]: i === activeColumn && 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">
-												<img src='/static/data-mapping-gif.gif'/>
-												{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-											</div>
-											<div :class="$style.dragButton">
-												<font-awesome-icon icon="grip-vertical" />
-											</div>
-										</n8n-tooltip>
+										<div :class="$style.dragButton">
+											<font-awesome-icon icon="grip-vertical" />
+										</div>
 									</div>
 								</template>
-							</Draggable>
+							</draggable>
 						</n8n-tooltip>
 					</th>
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
-			<Draggable
+			<draggable
 				tag="tbody"
 				type="mapping"
 				targetDataKey="mappable"
@@ -99,7 +79,7 @@
 							$locale.baseText(
 								tableData.data.length > 1
 									? 'dataMapping.mapAllKeysToField'
-									: 'dataMapping.mapSpecificColumnToField',
+									: 'dataMapping.mapKeyToField',
 								{
 									interpolate: { name: shorten(getPathNameFromTarget(el) || '', 16, 2) },
 								},
@@ -148,7 +128,7 @@
 						<td :class="$style.tableRightMargin"></td>
 					</tr>
 				</template>
-			</Draggable>
+			</draggable>
 		</table>
 	</div>
 </template>
@@ -156,24 +136,23 @@
 <script lang="ts">
 /* eslint-disable prefer-spread */
 
-import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
+import Vue, { PropType } from 'vue';
+import mixins from 'vue-typed-mixins';
 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';
 import { shorten } from './helpers';
 import { externalHooks } from './mixins/externalHooks';
 
 export default mixins(externalHooks).extend({
-	name: 'RunDataTable',
+	name: 'run-data-table',
 	components: { Draggable },
 	props: {
 		node: {
-			type: Object as () => INodeUi,
+			type: Object as PropType<INodeUi>,
 		},
 		inputData: {
-			type: Array as () => INodeExecutionData[],
+			type: Array as PropType<INodeExecutionData[]>,
 		},
 		mappingEnabled: {
 			type: Boolean,
@@ -181,9 +160,6 @@ export default mixins(externalHooks).extend({
 		distanceFromActive: {
 			type: Number,
 		},
-		showMappingHint: {
-			type: Boolean,
-		},
 		runIndex: {
 			type: Number,
 		},
@@ -194,8 +170,6 @@ export default mixins(externalHooks).extend({
 	data() {
 		return {
 			activeColumn: -1,
-			showHintWithDelay: false,
-			forceShowGrip: false,
 			draggedColumn: false,
 			draggingPath: null as null | string,
 			hoveringPath: null as null | string,
@@ -203,21 +177,6 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	mounted() {
-		if (this.showMappingHint) {
-			this.mappingHintVisible = true;
-
-			setTimeout(() => {
-				this.mappingHintVisible = false;
-			}, 6000);
-		}
-
-		if (this.showMappingHint && this.showHint) {
-			setTimeout(() => {
-				this.showHintWithDelay = this.showHint;
-				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) {
@@ -231,17 +190,6 @@ export default mixins(externalHooks).extend({
 		tableData(): ITableData {
 			return this.convertToTable(this.inputData);
 		},
-		focusedMappableInput(): string {
-			return this.$store.getters['ui/focusedMappableInput'];
-		},
-		showHint(): boolean {
-			return (
-				!this.draggedColumn &&
-				((this.showMappingHint && this.mappingHintVisible) ||
-					(!!this.focusedMappableInput &&
-						window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'))
-			);
-		},
 	},
 	methods: {
 		shorten,
@@ -459,32 +407,23 @@ export default mixins(externalHooks).extend({
 			};
 		},
 	},
-	watch: {
-		focusedMappableInput(curr: boolean) {
-			setTimeout(
-				() => {
-					this.forceShowGrip = !!this.focusedMappableInput;
-				},
-				curr ? 300 : 150,
-			);
-		},
-		showHint(curr: boolean, prev: boolean) {
-			if (curr) {
-				setTimeout(() => {
-					this.showHintWithDelay = this.showHint;
-					if (this.showHintWithDelay) {
-						this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
-					}
-				}, 1000);
-			} else {
-				this.showHintWithDelay = false;
-			}
-		},
-	},
 });
 </script>
 
 <style lang="scss" module>
+.dataDisplay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding-left: var(--spacing-s);
+	right: 0;
+	overflow-y: auto;
+	line-height: 1.5;
+	word-break: normal;
+	height: 100%;
+	padding-bottom: var(--spacing-3xl);
+}
+
 .table {
 	border-collapse: separate;
 	text-align: left;