fix: Stop showing mapping hint after mapping (#5586)

* fix: Stop showing mapping hint after mapping

* fix: set value correctly

* chore: clean up mapping hint code

packages/editor-ui/src/Interface.ts

@@ -1119,6 +1119,7 @@ export interface NDVState {
 		canDrop: boolean;
 		stickyPosition: null | XYPosition;
 	};
+	isMappingOnboarded: boolean;
 }
 
 export interface UIState {

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

@@ -11,7 +11,6 @@
 		:sessionId="sessionId"
 		:overrideOutputs="connectedCurrentNodeOutputs"
 		:mappingEnabled="!readOnly"
-		:showMappingHint="draggableHintShown"
 		:distanceFromActive="currentNodeDepth"
 		:isProductionExecutionPreview="isProductionExecutionPreview"
 		paneType="input"
@@ -142,9 +141,7 @@ import WireMeUp from './WireMeUp.vue';
 import {
 	CRON_NODE_TYPE,
 	INTERVAL_NODE_TYPE,
-	LOCAL_STORAGE_MAPPING_FLAG,
 	MANUAL_TRIGGER_NODE_TYPE,
-	SCHEDULE_TRIGGER_NODE_TYPE,
 	START_NODE_TYPE,
 } from '@/constants';
 import { mapStores } from 'pinia';
@@ -192,7 +189,7 @@ export default mixins(workflowHelpers).extend({
 			return this.ndvStore.focusedMappableInput;
 		},
 		isUserOnboarded(): boolean {
-			return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
+			return this.ndvStore.isMappingOnboarded;
 		},
 		showDraggableHint(): boolean {
 			const toIgnore = [

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

@@ -77,7 +77,6 @@ import ParameterOptions from '@/components/ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
-import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import {
 	hasExpressionMapping,
 	isResourceLocatorValue,
@@ -106,7 +105,6 @@ export default mixins(showMessage, externalHooks).extend({
 			forceShowExpression: false,
 			dataMappingTooltipButtons: [] as IN8nButton[],
 			mappingTooltipEnabled: false,
-			localStorageMappingFlag: window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true',
 		};
 	},
 	props: {
@@ -187,10 +185,10 @@ export default mixins(showMessage, externalHooks).extend({
 		showMappingTooltip(): boolean {
 			return (
 				this.mappingTooltipEnabled &&
+				!this.ndvStore.isMappingOnboarded &&
 				this.focused &&
 				this.isInputTypeString &&
-				!this.isInputDataEmpty &&
+				!this.isInputDataEmpty
-				!this.localStorageMappingFlag
 			);
 		},
 	},
@@ -306,14 +304,14 @@ export default mixins(showMessage, externalHooks).extend({
 
 					this.$emit('valueChanged', parameterData);
 
-					if (window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true') {
+					if (!this.ndvStore.isMappingOnboarded) {
 						this.$showMessage({
 							title: this.$locale.baseText('dataMapping.success.title'),
 							message: this.$locale.baseText('dataMapping.success.moreInfo'),
 							type: 'success',
 						});
 
-						window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
+						this.ndvStore.disableMappingHint();
 					}
 
 					this.ndvStore.setMappingTelemetry({

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

@@ -295,7 +295,6 @@
 				:inputData="inputData"
 				:mappingEnabled="mappingEnabled"
 				:distanceFromActive="distanceFromActive"
-				:showMappingHint="showMappingHint"
 				:runIndex="runIndex"
 				:pageOffset="currentPageOffset"
 				:totalRuns="maxRunIndex"
@@ -315,7 +314,6 @@
 				:inputData="inputData"
 				:mappingEnabled="mappingEnabled"
 				:distanceFromActive="distanceFromActive"
-				:showMappingHint="showMappingHint"
 				:runIndex="runIndex"
 				:totalRuns="maxRunIndex"
 			/>
@@ -565,9 +563,6 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 		distanceFromActive: {
 			type: Number,
 		},
-		showMappingHint: {
-			type: Boolean,
-		},
 		blockUI: {
 			type: Boolean,
 			default: false,

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

@@ -70,7 +70,6 @@
 import { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 import VueJsonPretty from 'vue-json-pretty';
-import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
 import { executionDataToJson, isString, shorten } from '@/utils';
@@ -114,9 +113,6 @@ export default mixins(externalHooks).extend({
 		distanceFromActive: {
 			type: Number,
 		},
-		showMappingHint: {
-			type: Boolean,
-		},
 		runIndex: {
 			type: Number,
 		},
@@ -127,40 +123,15 @@ export default mixins(externalHooks).extend({
 	data() {
 		return {
 			selectedJsonPath: null as null | string,
-			mappingHintVisible: false,
-			showHintWithDelay: false,
 			draggingPath: null as null | string,
 			displayMode: 'json',
 		};
 	},
-	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 JSON mapping tooltip', { type: 'param focus' });
-			}, 500);
-		}
-	},
 	computed: {
 		...mapStores(useNDVStore, useWorkflowsStore),
 		jsonData(): IDataObject[] {
 			return executionDataToJson(this.inputData);
 		},
-		showHint(): boolean {
-			return (
-				!this.draggingPath &&
-				((this.showMappingHint && this.mappingHintVisible) ||
-					window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true')
-			);
-		},
 	},
 	methods: {
 		getShortKey(el: HTMLElement): string {

packages/editor-ui/src/constants.ts

@@ -306,7 +306,7 @@ export const VALID_EMAIL_REGEX =
 export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
 export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG = 'N8N_PIN_DATA_DISCOVERY_NDV';
 export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG = 'N8N_PIN_DATA_DISCOVERY_CANVAS';
-export const LOCAL_STORAGE_MAPPING_FLAG = 'N8N_MAPPING_ONBOARDED';
+export const LOCAL_STORAGE_MAPPING_IS_ONBOARDED = 'N8N_MAPPING_ONBOARDED';
 export const LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH = 'N8N_MAIN_PANEL_RELATIVE_WIDTH';
 export const LOCAL_STORAGE_THEME = 'N8N_THEME';
 export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';

packages/editor-ui/src/stores/ndv.ts

@@ -1,4 +1,4 @@
-import { STORES } from '@/constants';
+import { LOCAL_STORAGE_MAPPING_IS_ONBOARDED, STORES } from '@/constants';
 import { INodeUi, IRunDataDisplayMode, NDVState, NodePanelType, XYPosition } from '@/Interface';
 import { IRunData } from 'n8n-workflow';
 import { defineStore } from 'pinia';
@@ -40,6 +40,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 			canDrop: false,
 			stickyPosition: null,
 		},
+		isMappingOnboarded: window.localStorage.getItem(LOCAL_STORAGE_MAPPING_IS_ONBOARDED) === 'true',
 	}),
 	getters: {
 		activeNode(): INodeUi | null {
@@ -184,5 +185,9 @@ export const useNDVStore = defineStore(STORES.NDV, {
 		setNDVPanelDataIsEmpty(payload: { panel: 'input' | 'output'; isEmpty: boolean }): void {
 			Vue.set(this[payload.panel].data, 'isEmpty', payload.isEmpty);
 		},
+		disableMappingHint() {
+			this.isMappingOnboarded = true;
+			window.localStorage.setItem(LOCAL_STORAGE_MAPPING_IS_ONBOARDED, 'true');
+		},
 	},
 });