mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
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
This commit is contained in:
Csaba Tuncsik
@@ -27,21 +27,30 @@
|
||||
@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="left"
|
||||
:manual="true"
|
||||
:value="showMappingTooltip"
|
||||
:buttons="dataMappingTooltipButtons"
|
||||
>
|
||||
<span 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)" />
|
||||
@@ -53,7 +62,9 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import {
|
||||
IN8nButton,
|
||||
INodeUi,
|
||||
IRunDataDisplayMode,
|
||||
IUpdateInformation,
|
||||
} from '@/Interface';
|
||||
|
||||
@@ -68,6 +79,7 @@ import { hasExpressionMapping } from './helpers';
|
||||
import { hasOnlyListMode } from './ResourceLocator/helpers';
|
||||
import { INodePropertyMode } from 'n8n-workflow';
|
||||
import { isResourceLocatorValue } from '@/typeGuards';
|
||||
import { BaseTextKey } from "@/plugins/i18n";
|
||||
|
||||
export default mixins(
|
||||
showMessage,
|
||||
@@ -85,6 +97,7 @@ export default mixins(
|
||||
focused: false,
|
||||
menuExpanded: false,
|
||||
forceShowExpression: false,
|
||||
dataMappingTooltipButtons: [] as IN8nButton[],
|
||||
};
|
||||
},
|
||||
props: [
|
||||
@@ -95,6 +108,19 @@ export default mixins(
|
||||
'value',
|
||||
'hideLabel',
|
||||
],
|
||||
created() {
|
||||
const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
|
||||
this.dataMappingTooltipButtons = [
|
||||
{
|
||||
attrs: {
|
||||
label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
|
||||
},
|
||||
listeners: {
|
||||
click: mappingTooltipDismissHandler,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
computed: {
|
||||
node (): INodeUi | null {
|
||||
return this.$store.getters.activeNode;
|
||||
@@ -108,6 +134,15 @@ export default mixins(
|
||||
showExpressionSelector (): boolean {
|
||||
return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
|
||||
},
|
||||
isInputDataEmpty (): boolean {
|
||||
return this.$store.getters['ui/getNDVDataIsEmpty']('input');
|
||||
},
|
||||
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() {
|
||||
@@ -208,6 +243,16 @@ export default mixins(
|
||||
this.forceShowExpression = false;
|
||||
}, 200);
|
||||
},
|
||||
onMappingTooltipDismissed() {
|
||||
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showMappingTooltip(newValue: boolean) {
|
||||
if (!newValue) {
|
||||
this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user