mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +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
324
packages/editor-ui/src/components/RunDataJson.vue
Normal file
324
packages/editor-ui/src/components/RunDataJson.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div :class="$style.jsonDisplay">
|
||||
<run-data-json-actions
|
||||
v-if="!editMode.enabled"
|
||||
:node="node"
|
||||
:sessioId="sessionId"
|
||||
:displayMode="displayMode"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:selectedJsonPath="selectedJsonPath"
|
||||
:jsonData="jsonData"
|
||||
:paneType="paneType"
|
||||
/>
|
||||
<draggable
|
||||
type="mapping"
|
||||
targetDataKey="mappable"
|
||||
:disabled="!mappingEnabled"
|
||||
@dragstart="onDragStart"
|
||||
@dragend="onDragEnd"
|
||||
ref="draggable"
|
||||
>
|
||||
<template #preview="{ canDrop, el }">
|
||||
<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
|
||||
{{ $locale.baseText('dataMapping.mapKeyToField', { interpolate: { name: getShortKey(el) } }) }}
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<vue-json-pretty
|
||||
:data="jsonData"
|
||||
:deep="10"
|
||||
:showLength="true"
|
||||
:selected-value.sync="selectedJsonPath"
|
||||
rootPath=""
|
||||
selectableType="single"
|
||||
class="json-data"
|
||||
>
|
||||
<template #nodeKey="{ node }">
|
||||
<span
|
||||
data-target="mappable"
|
||||
:data-value="getJsonParameterPath(node.path)"
|
||||
:data-name="node.key"
|
||||
:data-path="node.path"
|
||||
:data-depth="node.level"
|
||||
:class="{
|
||||
[$style.mappable]: mappingEnabled,
|
||||
[$style.dragged]: draggingPath === node.path,
|
||||
}"
|
||||
>"{{ node.key }}"</span>
|
||||
</template>
|
||||
<template #nodeValue="{ node }">
|
||||
<span>{{ getContent(node.content) }}</span>
|
||||
</template>
|
||||
</vue-json-pretty>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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 { convertPath, executionDataToJson, isString, isStringNumber } from "@/components/helpers";
|
||||
import { INodeUi } from "@/Interface";
|
||||
import { shorten } from './helpers';
|
||||
import { externalHooks } from "@/components/mixins/externalHooks";
|
||||
|
||||
const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
|
||||
|
||||
export default mixins(externalHooks).extend({
|
||||
name: 'run-data-json',
|
||||
components: {
|
||||
VueJsonPretty,
|
||||
Draggable,
|
||||
runDataJsonActions,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Object as () => { enabled?: boolean; value?: string; },
|
||||
},
|
||||
currentOutputIndex: {
|
||||
type: Number,
|
||||
},
|
||||
sessionId: {
|
||||
type: String,
|
||||
},
|
||||
paneType: {
|
||||
type: String,
|
||||
},
|
||||
node: {
|
||||
type: Object as PropType<INodeUi>,
|
||||
},
|
||||
inputData: {
|
||||
type: Array as PropType<INodeExecutionData[]>,
|
||||
},
|
||||
mappingEnabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
distanceFromActive: {
|
||||
type: Number,
|
||||
},
|
||||
showMappingHint: {
|
||||
type: Boolean,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
},
|
||||
totalRuns: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
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: {
|
||||
jsonData(): IDataObject[] {
|
||||
return executionDataToJson(this.inputData as INodeExecutionData[]);
|
||||
},
|
||||
showHint(): boolean {
|
||||
return (
|
||||
!this.draggingPath &&
|
||||
((this.showMappingHint && this.mappingHintVisible) ||
|
||||
window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true')
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getShortKey(el: HTMLElement): string {
|
||||
if (!el) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return shorten(el.dataset.name || '', 16, 2);
|
||||
},
|
||||
getJsonParameterPath(path: string): string {
|
||||
const convertedPath = convertPath(path);
|
||||
return `{{ ${ convertedPath.replace(/^(\["?\d"?])/, this.distanceFromActive === 1 ? '$json' : `$node["${ this.node!.name }"].json`) } }}`;
|
||||
},
|
||||
onDragStart(el: HTMLElement) {
|
||||
if (el && el.dataset.path) {
|
||||
this.draggingPath = el.dataset.path;
|
||||
}
|
||||
|
||||
this.$store.commit('ui/resetMappingTelemetry');
|
||||
},
|
||||
onDragEnd(el: HTMLElement) {
|
||||
this.draggingPath = null;
|
||||
|
||||
setTimeout(() => {
|
||||
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry'];
|
||||
const telemetryPayload = {
|
||||
src_node_type: this.node.type,
|
||||
src_field_name: el.dataset.name || '',
|
||||
src_nodes_back: this.distanceFromActive,
|
||||
src_run_index: this.runIndex,
|
||||
src_runs_total: this.totalRuns,
|
||||
src_field_nest_level: el.dataset.depth || 0,
|
||||
src_view: 'json',
|
||||
src_element: el,
|
||||
success: false,
|
||||
...mappingTelemetry,
|
||||
};
|
||||
|
||||
this.$externalHooks().run('runDataJson.onDragEnd', telemetryPayload);
|
||||
|
||||
this.$telemetry.track('User dragged data for mapping', telemetryPayload);
|
||||
}, 1000); // ensure dest data gets set if drop
|
||||
},
|
||||
getContent(value: string): string {
|
||||
return isString(value) && !isStringNumber(value) ? `"${ value }"` : value;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.jsonDisplay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-left: var(--spacing-s);
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
line-height: 1.5;
|
||||
word-break: normal;
|
||||
height: 100%;
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
background-color: var(--color-background-base);
|
||||
padding-top: var(--spacing-s);
|
||||
|
||||
&:hover {
|
||||
/* Shows .actionsGroup element from <run-data-json-actions /> child component */
|
||||
> div:first-child {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mappable {
|
||||
cursor: grab;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-json-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.dragged {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: var(--color-primary-tint-2);
|
||||
}
|
||||
}
|
||||
|
||||
.dragPill {
|
||||
padding: var(--spacing-4xs) var(--spacing-4xs) var(--spacing-3xs) var(--spacing-4xs);
|
||||
color: var(--color-text-xlight);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-2xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.droppablePill {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
.defaultPill {
|
||||
background-color: var(--color-primary);
|
||||
transform: translate(-50%, -100%);
|
||||
box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.vjs-tree {
|
||||
color: var(--color-json-default);
|
||||
}
|
||||
|
||||
.vjs-tree-node {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-highlight {
|
||||
background-color: var(--color-json-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-key {
|
||||
> span {
|
||||
color: var(--color-text-dark);
|
||||
line-height: 1.7;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: 0 var(--spacing-5xs) 0 var(--spacing-5xs);
|
||||
margin-right: var(--spacing-5xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vjs-tree .vjs-value-null {
|
||||
&, span {
|
||||
color: var(--color-json-null);
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value-boolean {
|
||||
&, span {
|
||||
color: var(--color-json-boolean);
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value-number {
|
||||
&, span {
|
||||
color: var(--color-json-number);
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-value-string {
|
||||
&, span {
|
||||
color: var(--color-json-string);
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-key {
|
||||
color: var(--color-json-key);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-tree__brackets {
|
||||
color: var(--color-json-brackets);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-tree__brackets:hover {
|
||||
color: var(--color-json-brackets-hover);
|
||||
}
|
||||
|
||||
.vjs-tree .vjs-tree__content.has-line {
|
||||
border-left: 1px dotted var(--color-json-line);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user