diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index d799e82fdd..6d56eaad97 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -1119,6 +1119,7 @@ export interface NDVState { canDrop: boolean; stickyPosition: null | XYPosition; }; + isMappingOnboarded: boolean; } export interface UIState { diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue index 5ed330d808..589ccb95e6 100644 --- a/packages/editor-ui/src/components/InputPanel.vue +++ b/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 = [ diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue index d6d8e809bd..515e7e6660 100644 --- a/packages/editor-ui/src/components/ParameterInputFull.vue +++ b/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.localStorageMappingFlag + !this.isInputDataEmpty ); }, }, @@ -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({ diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index d44ddd8c79..cc33d9936c 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/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, diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue index 97f5d365a9..eb85ce9524 100644 --- a/packages/editor-ui/src/components/RunDataJson.vue +++ b/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 { diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts index f058b7a2ab..8dc8124244 100644 --- a/packages/editor-ui/src/constants.ts +++ b/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='; diff --git a/packages/editor-ui/src/stores/ndv.ts b/packages/editor-ui/src/stores/ndv.ts index 79d0550c19..f9b8497810 100644 --- a/packages/editor-ui/src/stores/ndv.ts +++ b/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'); + }, }, });