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

packages/editor-ui/src/Interface.ts

@@ -18,7 +18,6 @@ import {
 	IWorkflowSettings as IWorkflowSettingsWorkflow,
 	WorkflowExecuteMode,
 	PublicInstalledPackage,
-	IResourceLocatorResult,
 	INodeTypeNameVersion,
 	ILoadOptions,
 	INodeCredentials,
@@ -943,9 +942,15 @@ export interface IUiState {
 		sessionId: string;
 		input: {
 			displayMode: IRunDataDisplayMode;
+			data: {
+				isEmpty: boolean;
+			}
 		};
 		output: {
 			displayMode: IRunDataDisplayMode;
+			data: {
+				isEmpty: boolean;
+			}
 			editMode: {
 				enabled: boolean;
 				value: string;

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

@@ -27,21 +27,32 @@
 				@drop="onDrop"
 			>
 				<template v-slot="{ droppable, activeDrop }">
-					<parameter-input
-						ref="param"
-						:parameter="parameter"
-						:value="value"
-						:displayOptions="displayOptions"
-						:path="path"
-						:isReadOnly="isReadOnly"
-						:droppable="droppable"
-						:activeDrop="activeDrop"
-						:forceShowExpression="forceShowExpression"
-						@valueChanged="valueChanged"
-						@focus="onFocus"
-						@blur="onBlur"
-						@drop="onDrop"
-						inputSize="small" />
+					<n8n-tooltip
+						placement="bottom-start"
+						:manual="true"
+						:value="showMappingTooltip"
+					>
+						<div
+							slot="content"
+							v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })"
+						/>
+						<parameter-input
+							ref="param"
+							:parameter="parameter"
+							:value="value"
+							:displayOptions="displayOptions"
+							:path="path"
+							:isReadOnly="isReadOnly"
+							:droppable="droppable"
+							:activeDrop="activeDrop"
+							:forceShowExpression="forceShowExpression"
+							@valueChanged="valueChanged"
+							@focus="onFocus"
+							@blur="onBlur"
+							@drop="onDrop"
+							inputSize="small"
+						/>
+					</n8n-tooltip>
 				</template>
 			</draggable-target>
 			<input-hint :class="$style.hint" :hint="$locale.nodeText().hint(parameter, path)" />
@@ -54,6 +65,7 @@ import Vue from 'vue';
 
 import {
 	INodeUi,
+	IRunDataDisplayMode,
 	IUpdateInformation,
 } from '@/Interface';
 
@@ -108,6 +120,15 @@ export default mixins(
 			showExpressionSelector (): boolean {
 				return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
 			},
+			isInputDataEmpty (): boolean {
+				return this.$store.getters['ui/getNDVInputDataIsEmpty'];
+			},
+			displayMode(): IRunDataDisplayMode {
+				return this.$store.getters['ui/inputPanelDisplayMode'];
+			},
+			showMappingTooltip (): boolean {
+				return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
+			},
 		},
 		methods: {
 			onFocus() {

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

@@ -211,7 +211,7 @@
 				</n8n-text>
 			</div>
 
-			<RunDataTable
+			<run-data-table
 				v-else-if="hasNodeRun && displayMode === 'table'"
 				class="ph-no-capture"
 				:node="node"
@@ -322,6 +322,7 @@
 import { PropType } from "vue";
 import mixins from 'vue-typed-mixins';
 import { saveAs } from 'file-saver';
+import isEmpty from 'lodash/isEmpty';
 import {
 	IBinaryData,
 	IBinaryKeyData,
@@ -1068,6 +1069,16 @@ export default mixins(
 			node() {
 				this.init();
 			},
+			inputData:{
+				handler(data: INodeExecutionData[]) {
+					if(this.paneType && data){
+						const isDataEmpty = data.length === 0 || data.every(isEmpty) || data.every(item => isEmpty(item.json));
+						this.$store.commit('ui/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: isDataEmpty });
+					}
+				},
+				immediate: true,
+				deep: true,
+			},
 			jsonData (value: IDataObject[]) {
 				this.refreshDataSize();
 

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

@@ -18,7 +18,7 @@
 					<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">
@@ -48,34 +48,11 @@
 										: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>
 								</template>
 							</draggable>
@@ -158,15 +135,14 @@
 
 import Vue, { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
-import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { INodeUi, ITableData } from '@/Interface';
 import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
 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: {
@@ -181,9 +157,6 @@ export default mixins(externalHooks).extend({
 		distanceFromActive: {
 			type: Number,
 		},
-		showMappingHint: {
-			type: Boolean,
-		},
 		runIndex: {
 			type: Number,
 		},
@@ -194,30 +167,13 @@ 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,
 			mappingHintVisible: false,
 		};
 	},
 	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 +187,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,28 +404,6 @@ 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>
 

packages/editor-ui/src/modules/ui.ts

@@ -117,9 +117,15 @@ const module: Module<IUiState, IRootState> = {
 			sessionId: '',
 			input: {
 				displayMode: 'table',
+				data: {
+					isEmpty: true,
+				},
 			},
 			output: {
 				displayMode: 'table',
+				data: {
+					isEmpty: true,
+				},
 				editMode: {
 					enabled: false,
 					value: '',
@@ -224,6 +230,9 @@ const module: Module<IUiState, IRootState> = {
 		mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
 		getCurrentView: (state: IUiState) => state.currentView,
 		isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
+		getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty,
+		getNDVInputDataIsEmpty: (state: IUiState) => state.ndv.input.data.isEmpty,
+		getNDVOutputDataIsEmpty: (state: IUiState) => state.ndv.output.data.isEmpty,
 	},
 	mutations: {
 		setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
@@ -330,6 +339,9 @@ const module: Module<IUiState, IRootState> = {
 		resetMappingTelemetry(state: IUiState) {
 			state.ndv.mappingTelemetry = {};
 		},
+		setNDVPanelDataIsEmpty(state: IUiState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
+			Vue.set(state.ndv[payload.panel].data, 'isEmpty', payload.isEmpty);
+		},
 	},
 	actions: {
 		openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {

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

@@ -216,6 +216,7 @@
 	"dataMapping.success.title": "You just mapped some data!",
 	"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
 	"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
+	"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",
 	"displayWithChange.cancelEdit": "Cancel Edit",