mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
feat(editor): Add input panel to NDV (#3204)
* refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68dbffa0aa0d8189117e1a53381cb2c27608 * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * refactor header out * support different nodes * update selector * add immediate input * add branch overrides * split output input run index * clean up unnessary data * add missing keys * update key names * remove unnessary css/js * fix outputs panel * set max width on input selector * fix selector to show parent nodes * fix bug when switching between nodes * add linking and refactor * add linking * fix minor issues * hide linking when cannot link * fix type * fix error state * clean up import * fix linking edge cases * hide input panel for triggers * disable for start node * format file * refactor output panel * add empty input hint * update too much data view * update slot, message under branch * no input data view * add node not run/no output data views * add tooltip support on execute prev * fix spacing in view * address output views * fix run node hint view * fix spinner * center button * update message to use node name * update title of no output data message * implement loading states * fix sizes * fix sizes * update spinner * add wire me up image * update link * update panels design * fix unclickable area bug * revert change * fix clickable bg * fix up positioning * ensure bg is clickable * fix up borders * fix height * move border to wrapper * set box shadow * set box shadow * add drag button * add dragging for main panel * set max width of panels * set min width in js * keep showing drag while dragging * fix dragging leaving modal * update trigger position of main panel * move main panel position into store * clear metadata after changing workflow * center grid correctly * add drag arrows * add dragging hover * fix cursor behavior * update no output state * show last run on open * always set to latest run * fix padding * add I wish this node would * clean up unsued data * inject run info into run * refactor out drag button * fix dragging issue * fix arrow bug * increase width of panel * change run logic * set label font sizes * update radiobutton pos * address header issues * fix prev spacing bug * fix input order * set package lock * add close modal event * complete close modal event * add input change event * add dragging event * add event on view change * add page size event * rename event * add event on page change * add link click event * add linking event * rename var * add run change event * add button events * add branch event * add structure for open event * add input type * set session id * set sessionid/source for expression events * add params to expression events * make display modes global * add display mode to tracking * add more event tracking * add has_mapping param * make main panel position global * dedupe list * fix cursor while dragging * address feedback * reduce bottom scrim * remove empty option hint * add hint tooltip * add tritary button * update param names * update parameter buttons * center empty states * move feature request message * increase max width for inputs selector * fix error dispaly padding * remove immediate * refactor search logic to return object * fix console errors * fix console errors * add node distance * refactor how input nodes listed * remove console log * set package lock * refactor recursive logic * handle overrides * handle default case without inputs * fix bug width link * fix tabs arrow bug * handle binary data case * update node execution * fix merge logic * remove console log * delete func * update package lock * add hover area * switch first input node * keep recursive order * make breadth first traversal * fix overflow bug, add pluralization * update docs url * update drop shadow * set background color for button * update input * fix truncation * update index of input dropdown * fix binary background * update telemetry * fix binary data switching * check all parent connections for executed node * check current state for executing node * fix executing states * update loading states * use pluralization for items * rename modal * update pluralization * update package lock * update empty messagE * format file * refactor out dragging logic * refactor out dragging * add back panel position * add telemetry params * add survey url as const * remove extra space, add dot * rename tabs, update telemetery, fix telemetry bug * update execute prev button * rename workflow func * rename workflow func * delete unnessary component * fix build issue * add tests for workflow search * format + add tests * remove todo comment * update iconnection type to match workflows * Revert "update iconnection type to match workflows" 3772487d985f226acab7144c7672b5696deabb55 * update func comment * fix formatting issues * add tertiary story * add spinner story * remove todo comment * remove eslint check * update empty messagE
This commit is contained in:
Mutasem Aldmour
234
packages/editor-ui/src/components/InputPanel.vue
Normal file
234
packages/editor-ui/src/components/InputPanel.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<RunData
|
||||
:nodeUi="currentNode"
|
||||
:runIndex="runIndex"
|
||||
:linkedRuns="linkedRuns"
|
||||
:canLinkRuns="canLinkRuns"
|
||||
:tooMuchDataTitle="$locale.baseText('ndv.input.tooMuchData.title')"
|
||||
:noDataInBranchMessage="$locale.baseText('ndv.input.noOutputDataInBranch')"
|
||||
:isExecuting="isExecutingPrevious"
|
||||
:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
|
||||
:sessionId="sessionId"
|
||||
:overrideOutputs="connectedCurrentNodeOutputs"
|
||||
paneType="input"
|
||||
@linkRun="onLinkRun"
|
||||
@unlinkRun="onUnlinkRun"
|
||||
@runChange="onRunIndexChange">
|
||||
<template v-slot:header>
|
||||
<div :class="$style.titleSection">
|
||||
<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable>
|
||||
<template slot="prepend">
|
||||
<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
|
||||
</template>
|
||||
<n8n-option v-for="node in parentNodes" :value="node.name" :key="node.name" class="node-option">
|
||||
{{ truncate(node.name) }}
|
||||
<span >{{ $locale.baseText('ndv.input.nodeDistance', {adjustToNumber: node.depth}) }}</span>
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
|
||||
<n8n-text tag="div" size="small">
|
||||
{{ $locale.baseText('ndv.input.noOutputData.hint') }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.notConnected" v-else>
|
||||
<div>
|
||||
<WireMeUp />
|
||||
</div>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.notConnected.title') }}</n8n-text>
|
||||
<n8n-text tag="div">
|
||||
{{ $locale.baseText('ndv.input.notConnected.message') }}
|
||||
<a href="https://docs.n8n.io/workflows/connections/" target="_blank" @click="onConnectionHelpClick">
|
||||
{{$locale.baseText('ndv.input.notConnected.learnMore')}}
|
||||
</a>
|
||||
</n8n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:no-output-data>
|
||||
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
|
||||
</template>
|
||||
</RunData>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { INodeUi } from '@/Interface';
|
||||
import { IConnectedNode, Workflow } from 'n8n-workflow';
|
||||
import RunData from './RunData.vue';
|
||||
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import NodeExecuteButton from './NodeExecuteButton.vue';
|
||||
import WireMeUp from './WireMeUp.vue';
|
||||
|
||||
export default mixins(
|
||||
workflowHelpers,
|
||||
).extend({
|
||||
name: 'InputPanel',
|
||||
components: { RunData, NodeExecuteButton, WireMeUp },
|
||||
props: {
|
||||
currentNodeName: {
|
||||
type: String,
|
||||
},
|
||||
runIndex: {
|
||||
type: Number,
|
||||
},
|
||||
linkedRuns: {
|
||||
type: Boolean,
|
||||
},
|
||||
workflow: {
|
||||
},
|
||||
canLinkRuns: {
|
||||
type: Boolean,
|
||||
},
|
||||
sessionId: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isExecutingPrevious(): boolean {
|
||||
const triggeredNode = this.$store.getters.executedNode;
|
||||
const executingNode = this.$store.getters.executingNode;
|
||||
if (this.activeNode && triggeredNode === this.activeNode.name && this.activeNode.name !== executingNode) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (executingNode || triggeredNode) {
|
||||
return !!this.parentNodes.find((node) => node.name === executingNode || node.name === triggeredNode);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
currentWorkflow(): Workflow {
|
||||
return this.workflow as Workflow;
|
||||
},
|
||||
activeNode (): INodeUi | null {
|
||||
return this.$store.getters.activeNode;
|
||||
},
|
||||
currentNode (): INodeUi {
|
||||
return this.$store.getters.getNodeByName(this.currentNodeName);
|
||||
},
|
||||
connectedCurrentNodeOutputs(): number[] | undefined {
|
||||
const search = this.parentNodes.find(({name}) => name === this.currentNodeName);
|
||||
if (search) {
|
||||
return search.indicies;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
parentNodes (): IConnectedNode[] {
|
||||
if (!this.activeNode) {
|
||||
return [];
|
||||
}
|
||||
const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(this.activeNode.name);
|
||||
|
||||
return nodes.filter(({name}, i) => (this.activeNode && (name !== this.activeNode.name)) && nodes.findIndex((node) => node.name === name) === i);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onNodeExecute() {
|
||||
this.$emit('execute');
|
||||
if (this.activeNode) {
|
||||
this.$telemetry.track('User clicked ndv button', {
|
||||
node_type: this.activeNode.type,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
session_id: this.sessionId,
|
||||
pane: 'input',
|
||||
type: 'executePrevious',
|
||||
});
|
||||
}
|
||||
},
|
||||
onRunIndexChange(run: number) {
|
||||
this.$emit('runChange', run);
|
||||
},
|
||||
onLinkRun() {
|
||||
this.$emit('linkRun');
|
||||
},
|
||||
onUnlinkRun() {
|
||||
this.$emit('unlinkRun');
|
||||
},
|
||||
onSelect(value: string) {
|
||||
const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
|
||||
this.$emit('select', value, index);
|
||||
},
|
||||
onConnectionHelpClick() {
|
||||
if (this.activeNode) {
|
||||
this.$telemetry.track('User clicked ndv link', {
|
||||
node_type: this.activeNode.type,
|
||||
workflow_id: this.$store.getters.workflowId,
|
||||
session_id: this.sessionId,
|
||||
pane: 'input',
|
||||
type: 'not-connected-help',
|
||||
});
|
||||
}
|
||||
},
|
||||
truncate(nodeName: string) {
|
||||
const truncated = nodeName.substring(0, 30);
|
||||
if (truncated.length < nodeName.length) {
|
||||
return `${truncated}...`;
|
||||
}
|
||||
return truncated;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.titleSection {
|
||||
display: flex;
|
||||
max-width: 300px;
|
||||
|
||||
> * {
|
||||
margin-right: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.noOutputData {
|
||||
max-width: 180px;
|
||||
|
||||
> *:first-child {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.notConnected {
|
||||
max-width: 300px;
|
||||
|
||||
> *:first-child {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-light);
|
||||
letter-spacing: 3px;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node-option {
|
||||
font-weight: var(--font-weight-regular) !important;
|
||||
|
||||
span {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
&.selected > span {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user