admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Add drag and drop data mapping (#3708)

Browse Source 
* commit package lock

* refactor param options out

* use action toggle

* handle click on toggle

* update color toggle

* fix toggle

* show options

* update expression color

* update pointer

* fix readonly

* fix readonly

* fix expression spacing

* refactor input label

* show icon for headers

* center icon

* fix multi params

* add credential options

* increase spacing

* update expression view

* update transition

* update el padding

* rename side to options

* fix label overflow

* fix bug with unnessary lines

* add overlay

* fix bug affecting other pages

* clean up spacing

* rename

* update icon size

* fix toggle in users

* clean up func

* clean up css

* use css var

* fix overlay bug

* clean up input

* clean up input

* clean up unnessary css

* revert

* update quotes

* rename method

* remove console errors

* refactor data table

* add drag button

* make hoverable cells

* add drag hint

* disabel for output panel

* add drag

* disable for readonly

* Add dragging

* add draggable pill

* add mapping targets

* remove font color

* Transferable

* fix linting issue

* teleport component

* fix line

* disable for readonly

* fix position of data pill

* fix position of data pill

* ignore import

* add droppable state

* remove draggable key

* update bg color

* add value drop

* use direct input

* remove transition

* add animation

* shorten name

* handle empty value

* fix switch bug

* fix up animation

* add notification

* add hint

* add tooltip

* show draggable hintm

* fix multiple expre

* fix hoverable

* keep options on focus

* increase timeouts

* fix bug in set node

* add transition on hover out

* fix tooltip onboarding bug

* only update expression if changes

* add open delay

* fix header highlight issue

* update text

* dont show tooltip always

* update docs url

* update ee border

* add sticky behav

* hide error highlight if dropping

* switch out grip icon

* increase timeout

* add delay

* show hint on execprev

* add telemetry event

* add telemetry event

* add telemetry event

* fire event on hint showing

* fix telemetry event

* add path

* fix drag hint issue

* decrease bottom margin

* update mapping keys

* remove file

* hide overflow

* sort params

* add space

* prevent scrolling

* remove dropshadow

* force cursor

* address some comments

* add thead tbody

* add size opt
This commit is contained in:
Mutasem Aldmour
2022-07-20 13:32:51 +02:00
committed by GitHub
parent 2997711e00
commit 577c73ee25
33 changed files with 1490 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/editor-ui/src/components/InputPanel.vue
View File

@@ -10,6 +10,9 @@
:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
:sessionId="sessionId"
:overrideOutputs="connectedCurrentNodeOutputs"
:mappingEnabled="!readOnly"
:showMappingHint="draggableHintShown"
:distanceFromActive="currentNodeDepth"
paneType="input"
@linkRun="onLinkRun"
@unlinkRun="onUnlinkRun"
@@ -32,8 +35,11 @@
<template v-slot:node-not-run>
<div :class="$style.noOutputData" v-if="parentNodes.length">
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
<NodeExecuteButton v-if="!readOnly" type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
<n8n-text v-if="!readOnly" tag="div" size="small">
<n8n-tooltip v-if="!readOnly" :manual="true" :value="showDraggableHint && showDraggableHintWithDelay">
<div slot="content" v-html="$locale.baseText('dataMapping.dragFromPreviousHint', { interpolate: { name: focusedMappableInput } })"></div>
<NodeExecuteButton type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
</n8n-tooltip>
<n8n-text v-if="!readOnly" tag="div" size="small">
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
</n8n-text>
</div>
@@ -65,6 +71,7 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import mixins from 'vue-typed-mixins';
import NodeExecuteButton from './NodeExecuteButton.vue';
import WireMeUp from './WireMeUp.vue';
import { CRON_NODE_TYPE, INTERVAL_NODE_TYPE, LOCAL_STORAGE_MAPPING_FLAG, START_NODE_TYPE } from '@/constants';
export default mixins(
workflowHelpers,
@@ -93,7 +100,27 @@ export default mixins(
type: Boolean,
},
},
data() {
return {
showDraggableHintWithDelay: false,
draggableHintShown: false,
};
},
computed: {
focusedMappableInput(): string {
return this.$store.getters['ui/focusedMappableInput'];
},
isUserOnboarded(): boolean {
return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
},
showDraggableHint(): boolean {
const toIgnore = [START_NODE_TYPE, CRON_NODE_TYPE, INTERVAL_NODE_TYPE];
if (toIgnore.includes(this.currentNode.type)) {
return false;
}
return !!this.focusedMappableInput && !this.isUserOnboarded;
},
isExecutingPrevious(): boolean {
if (!this.workflowRunning) {
return false;
@@ -136,6 +163,10 @@ export default mixins(
return nodes.filter(({name}, i) => (this.activeNode && (name !== this.activeNode.name)) && nodes.findIndex((node) => node.name === name) === i);
},
currentNodeDepth (): number {
const node = this.parentNodes.find((node) => node.name === this.currentNode.name);
return node ? node.depth: -1;
},
},
methods: {
onNodeExecute() {
@@ -182,6 +213,26 @@ export default mixins(
return truncated;
},
},
watch: {
showDraggableHint(curr: boolean, prev: boolean) {
if (curr && !prev) {
setTimeout(() => {
if (this.draggableHintShown) {
return;
}
this.showDraggableHintWithDelay = this.showDraggableHint;
if (this.showDraggableHintWithDelay) {
this.draggableHintShown = true;
this.$telemetry.track('User viewed data mapping tooltip', { type: 'unexecuted input pane' });
}
}, 1000);
}
else if (!curr) {
this.showDraggableHintWithDelay = false;
}
},
},
});
</script>