mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-20 06:47:32 -07:00
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
This commit is contained in:
parent
aa2beaa800
commit
eac4275a7e
|
@ -1119,6 +1119,7 @@ export interface NDVState {
|
|||
canDrop: boolean;
|
||||
stickyPosition: null | XYPosition;
|
||||
};
|
||||
isMappingOnboarded: boolean;
|
||||
}
|
||||
|
||||
export interface UIState {
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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=';
|
||||
|
|
|
@ -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');
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue