mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): create ndv store (#4409)

Browse source 
* refactor ndv module out

* update active node in root state

* simplify

* fix conflict

* fix dragging
This commit is contained in:
Mutasem Aldmour 2022-10-24 11:35:03 +02:00 committed by GitHub
parent f6733cff9d
commit 127f988400
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 331 additions and 308 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/editor-ui/src/Interface.ts
View file

@ -856,7 +856,6 @@ export interface IRootState {
activeWorkflows: string[]; activeWorkflows: string[];
activeActions: string[]; activeActions: string[];
activeCredentialType: string | null; activeCredentialType: string | null;
activeNode: string | null;
baseUrl: string; baseUrl: string;
defaultLocale: string; defaultLocale: string;
endpointWebhook: string; endpointWebhook: string;
@ -936,16 +935,9 @@ export interface TargetItem {
outputIndex: number; outputIndex: number;
} }
export interface IUiState { export interface NDVState {
sidebarMenuCollapsed: boolean; activeNodeName: string | null;
modalStack: string[];
modals: {
[key: string]: IModalState;
};
mainPanelDimensions: {[key: string]: {[key: string]: number}}; mainPanelDimensions: {[key: string]: {[key: string]: number}};
isPageLoading: boolean;
currentView: string;
ndv: {
sessionId: string; sessionId: string;
input: { input: {
displayMode: IRunDataDisplayMode; displayMode: IRunDataDisplayMode;
@ -970,8 +962,6 @@ export interface IUiState {
focusedMappableInput: string; focusedMappableInput: string;
mappingTelemetry: {[key: string]: string | number | boolean}; mappingTelemetry: {[key: string]: string | number | boolean};
hoveringItem: null | TargetItem; hoveringItem: null | TargetItem;
};
mainPanelPosition: number;
draggable: { draggable: {
isDragging: boolean; isDragging: boolean;
type: string; type: string;
@ -979,6 +969,17 @@ export interface IUiState {
canDrop: boolean; canDrop: boolean;
stickyPosition: null | XYPosition; stickyPosition: null | XYPosition;
}; };
}
export interface IUiState {
sidebarMenuCollapsed: boolean;
modalStack: string[];
modals: {
[key: string]: IModalState;
};
isPageLoading: boolean;
currentView: string;
fakeDoorFeatures: IFakeDoor[]; fakeDoorFeatures: IFakeDoor[];
} }

2
packages/editor-ui/src/components/CodeEdit.vue
View file

@ -52,7 +52,7 @@ export default mixins(
const executedWorkflow: IExecutionResponse | null = this.$store.getters.getWorkflowExecution; const executedWorkflow: IExecutionResponse | null = this.$store.getters.getWorkflowExecution;
const workflow = this.getCurrentWorkflow(); const workflow = this.getCurrentWorkflow();
const activeNode: INodeUi | null = this.$store.getters.activeNode; const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
const parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1); const parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1);
const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || { const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || {
sourceIndex: 0, sourceIndex: 0,

2
packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
View file

@ -206,7 +206,7 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
getInputNodeName() { getInputNodeName() {
try { try {
const activeNode = this.$store.getters.activeNode; const activeNode = this.$store.getters['ndv/activeNode'];
const workflow = this.getCurrentWorkflow(); const workflow = this.getCurrentWorkflow();
const input = workflow.connectionsByDestinationNode[activeNode.name]; const input = workflow.connectionsByDestinationNode[activeNode.name];

2
packages/editor-ui/src/components/CollectionParameter.vue
View file

@ -95,7 +95,7 @@ export default mixins(
}); });
}, },
node (): INodeUi { node (): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
// Returns all the options which did not get added already // Returns all the options which did not get added already
parameterOptions (): Array<INodePropertyOptions | INodeProperties> { parameterOptions (): Array<INodePropertyOptions | INodeProperties> {

2
packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
View file

@ -195,7 +195,7 @@ export default mixins(restApi).extend({
}, },
documentationUrl(): string { documentationUrl(): string {
const type = this.credentialType as ICredentialType; const type = this.credentialType as ICredentialType;
const activeNode = this.$store.getters.activeNode; const activeNode = this.$store.getters['ndv/activeNode'];
const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false; const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
if (!type || !type.documentationUrl) { if (!type || !type.documentationUrl) {

8
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View file

@ -236,7 +236,7 @@ export default mixins(showMessage, nodeHelpers).extend({
this.$externalHooks().run('credentialsEdit.credentialModalOpened', { this.$externalHooks().run('credentialsEdit.credentialModalOpened', {
credentialType: this.credentialTypeName, credentialType: this.credentialTypeName,
isEditingCredential: this.mode === 'edit', isEditingCredential: this.mode === 'edit',
activeNode: this.$store.getters.activeNode, activeNode: this.$store.getters['ndv/activeNode'],
}); });
setTimeout(() => { setTimeout(() => {
@ -561,7 +561,7 @@ export default mixins(showMessage, nodeHelpers).extend({
this.activeTab = tab; this.activeTab = tab;
const tabName: string = tab.replaceAll('coming-soon/', ''); const tabName: string = tab.replaceAll('coming-soon/', '');
const credType: string = this.credentialType ? this.credentialType.name : ''; const credType: string = this.credentialType ? this.credentialType.name : '';
const activeNode: INode | null = this.$store.getters.activeNode; const activeNode: INode | null = this.$store.getters['ndv/activeNode'];
this.$telemetry.track('User viewed credential tab', { this.$telemetry.track('User viewed credential tab', {
credential_type: credType, credential_type: credType,
@ -777,8 +777,8 @@ export default mixins(showMessage, nodeHelpers).extend({
trackProperties.is_valid = !!this.testedSuccessfully; trackProperties.is_valid = !!this.testedSuccessfully;
} }
if (this.$store.getters.activeNode) { if (this.$store.getters['ndv/activeNode']) {
trackProperties.node_type = this.$store.getters.activeNode.type; trackProperties.node_type = this.$store.getters['ndv/activeNode'].type;
} }
if (this.authError && this.authError !== '') { if (this.authError && this.authError !== '') {

8
packages/editor-ui/src/components/Draggable.vue
View file

@ -67,10 +67,10 @@ export default Vue.extend({
}, },
computed: { computed: {
canDrop(): boolean { canDrop(): boolean {
return this.$store.getters['ui/canDraggableDrop']; return this.$store.getters['ndv/canDraggableDrop'];
}, },
stickyPosition(): XYPosition | null { stickyPosition(): XYPosition | null {
return this.$store.getters['ui/draggableStickyPos']; return this.$store.getters['ndv/draggableStickyPos'];
}, },
}, },
methods: { methods: {
@ -111,7 +111,7 @@ export default Vue.extend({
this.isDragging = true; this.isDragging = true;
const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || ''); const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
this.$store.commit('ui/draggableStartDragging', {type: this.type, data }); this.$store.commit('ndv/draggableStartDragging', {type: this.type, data });
this.$emit('dragstart', this.draggingEl); this.$emit('dragstart', this.draggingEl);
document.body.style.cursor = 'grabbing'; document.body.style.cursor = 'grabbing';
@ -141,7 +141,7 @@ export default Vue.extend({
this.$emit('dragend', this.draggingEl); this.$emit('dragend', this.draggingEl);
this.isDragging = false; this.isDragging = false;
this.draggingEl = null; this.draggingEl = null;
this.$store.commit('ui/draggableStopDragging'); this.$store.commit('ndv/draggableStopDragging');
}, 0); }, 0);
}, },
}, },

10
packages/editor-ui/src/components/DraggableTarget.vue
View file

@ -38,10 +38,10 @@ export default Vue.extend({
}, },
computed: { computed: {
isDragging(): boolean { isDragging(): boolean {
return this.$store.getters['ui/isDraggableDragging']; return this.$store.getters['ndv/isDraggableDragging'];
}, },
draggableType(): string { draggableType(): string {
return this.$store.getters['ui/draggableType']; return this.$store.getters['ndv/draggableType'];
}, },
droppable(): boolean { droppable(): boolean {
return !this.disabled && this.isDragging && this.draggableType === this.type; return !this.disabled && this.isDragging && this.draggableType === this.type;
@ -60,20 +60,20 @@ export default Vue.extend({
this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom; this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
if (!this.disabled && this.sticky && this.hovering) { if (!this.disabled && this.sticky && this.hovering) {
this.$store.commit('ui/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]); this.$store.commit('ndv/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
} }
} }
}, },
onMouseUp(e: MouseEvent) { onMouseUp(e: MouseEvent) {
if (this.activeDrop) { if (this.activeDrop) {
const data = this.$store.getters['ui/draggableData']; const data = this.$store.getters['ndv/draggableData'];
this.$emit('drop', data); this.$emit('drop', data);
} }
}, },
}, },
watch: { watch: {
activeDrop(active) { activeDrop(active) {
this.$store.commit('ui/setDraggableCanDrop', active); this.$store.commit('ndv/setDraggableCanDrop', active);
}, },
}, },
}); });

2
packages/editor-ui/src/components/Error/NodeErrorView.vue
View file

@ -126,7 +126,7 @@ export default mixins(
return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE; return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
}, },
parameters (): INodeProperties[] { parameters (): INodeProperties[] {
const node = this.$store.getters.activeNode; const node = this.$store.getters['ndv/activeNode'];
if (!node) { if (!node) {
return []; return [];
} }

8
packages/editor-ui/src/components/ExpressionEdit.vue
View file

@ -120,11 +120,11 @@ export default mixins(
node_name: string; node_name: string;
} = { } = {
event_version: '2', event_version: '2',
node_type_dest: this.$store.getters.activeNode.type, node_type_dest: this.$store.getters['ndv/activeNode'].type,
parameter_name_dest: this.parameter.displayName, parameter_name_dest: this.parameter.displayName,
is_immediate_input: false, is_immediate_input: false,
variable_expression: eventData.variable, variable_expression: eventData.variable,
node_name: this.$store.getters.activeNode.name, node_name: this.$store.getters['ndv/activeNode'].name,
}; };
if (eventData.variable) { if (eventData.variable) {
@ -144,7 +144,7 @@ export default mixins(
const sourceNodeName = splitVar[0].split('"')[1]; const sourceNodeName = splitVar[0].split('"')[1];
trackProperties.node_type_source = this.$store.getters.getNodeByName(sourceNodeName).type; trackProperties.node_type_source = this.$store.getters.getNodeByName(sourceNodeName).type;
const nodeConnections: Array<Array<{ node: string }>> = this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName).main; const nodeConnections: Array<Array<{ node: string }>> = this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName).main;
trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.$store.getters.activeNode.name)) ? true : false; trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.$store.getters['ndv/activeNode'].name)) ? true : false;
if (splitVar[1].startsWith('parameter')) { if (splitVar[1].startsWith('parameter')) {
trackProperties.parameter_name_source = splitVar[1].split('"')[1]; trackProperties.parameter_name_source = splitVar[1].split('"')[1];
@ -175,7 +175,7 @@ export default mixins(
empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value, empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
workflow_id: this.$store.getters.workflowId, workflow_id: this.$store.getters.workflowId,
source: this.eventSource, source: this.eventSource,
session_id: this.$store.getters['ui/ndvSessionId'], session_id: this.$store.getters['ndv/ndvSessionId'],
has_parameter: this.value.includes('$parameter'), has_parameter: this.value.includes('$parameter'),
has_mapping: hasExpressionMapping(this.value), has_mapping: hasExpressionMapping(this.value),
}; };

2
packages/editor-ui/src/components/ImportCurlModal.vue
View file

@ -65,7 +65,7 @@ export default mixins(showMessage).extend({
}, },
computed: { computed: {
node(): INodeUi { node(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
}, },
methods: { methods: {

4
packages/editor-ui/src/components/InputPanel.vue
View file

@ -112,7 +112,7 @@ export default mixins(
}, },
computed: { computed: {
focusedMappableInput(): string { focusedMappableInput(): string {
return this.$store.getters['ui/focusedMappableInput']; return this.$store.getters['ndv/focusedMappableInput'];
}, },
isUserOnboarded(): boolean { isUserOnboarded(): boolean {
return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true'; return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
@ -147,7 +147,7 @@ export default mixins(
return this.workflow as Workflow; return this.workflow as Workflow;
}, },
activeNode (): INodeUi | null { activeNode (): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
currentNode (): INodeUi | null { currentNode (): INodeUi | null {
return this.$store.getters.getNodeByName(this.currentNodeName); return this.$store.getters.getNodeByName(this.currentNodeName);

2
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -37,7 +37,7 @@ export default mixins(
return this.$route.name === VIEWS.EXECUTION; return this.$route.name === VIEWS.EXECUTION;
}, },
activeNode (): INodeUi | null { activeNode (): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
hideMenuBar(): boolean { hideMenuBar(): boolean {
return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE); return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);

10
packages/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -121,7 +121,7 @@ export default mixins(debounceHelper).extend({
relativeLeft: number, relativeLeft: number,
relativeRight: number relativeRight: number
} { } {
return this.$store.getters['ui/mainPanelDimensions'](this.currentNodePaneType); return this.$store.getters['ndv/mainPanelDimensions'](this.currentNodePaneType);
}, },
supportedResizeDirections() { supportedResizeDirections() {
const supportedDirections = ['right']; const supportedDirections = ['right'];
@ -244,7 +244,7 @@ export default mixins(debounceHelper).extend({
setMainPanelWidth(relativeWidth?: number) { setMainPanelWidth(relativeWidth?: number) {
const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]); const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
this.$store.commit('ui/setMainPanelDimensions', { this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType, panelType: this.currentNodePaneType,
dimensions: { dimensions: {
relativeWidth: mainPanelRelativeWidth, relativeWidth: mainPanelRelativeWidth,
@ -260,7 +260,7 @@ export default mixins(debounceHelper).extend({
const isInputless = this.currentNodePaneType === 'inputless'; const isInputless = this.currentNodePaneType === 'inputless';
if(isMinLeft) { if(isMinLeft) {
this.$store.commit('ui/setMainPanelDimensions', { this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType, panelType: this.currentNodePaneType,
dimensions: { dimensions: {
relativeLeft: this.minimumLeftPosition, relativeLeft: this.minimumLeftPosition,
@ -271,7 +271,7 @@ export default mixins(debounceHelper).extend({
} }
if(isMaxRight) { if(isMaxRight) {
this.$store.commit('ui/setMainPanelDimensions', { this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType, panelType: this.currentNodePaneType,
dimensions: { dimensions: {
relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition, relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition,
@ -281,7 +281,7 @@ export default mixins(debounceHelper).extend({
return; return;
} }
this.$store.commit('ui/setMainPanelDimensions', { this.$store.commit('ndv/setMainPanelDimensions', {
panelType: this.currentNodePaneType, panelType: this.currentNodePaneType,
dimensions: { dimensions: {
relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft, relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft,

2
packages/editor-ui/src/components/Node.vue
View file

@ -442,7 +442,7 @@ export default mixins(
}, },
setNodeActive () { setNodeActive () {
this.$store.commit('setActiveNode', this.data.name); this.$store.commit('ndv/setActiveNodeName', this.data.name);
this.pinDataDiscoveryTooltipVisible = false; this.pinDataDiscoveryTooltipVisible = false;
}, },
touchStart () { touchStart () {

36
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -177,7 +177,7 @@ export default mixins(
}; };
}, },
mounted() { mounted() {
this.$store.commit('ui/setNDVSessionId'); this.$store.commit('ndv/setNDVSessionId');
dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => { dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
this.pinDataDiscoveryTooltipVisible = isTooltipVisible; this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
@ -189,7 +189,7 @@ export default mixins(
computed: { computed: {
...mapGetters(['executionWaitingForWebhook']), ...mapGetters(['executionWaitingForWebhook']),
sessionId(): string { sessionId(): string {
return this.$store.getters['ui/ndvSessionId']; return this.$store.getters['ndv/ndvSessionId'];
}, },
workflowRunning(): boolean { workflowRunning(): boolean {
return this.$store.getters.isActionActive('workflowRunning'); return this.$store.getters.isActionActive('workflowRunning');
@ -204,7 +204,7 @@ export default mixins(
); );
}, },
activeNode(): INodeUi | null { activeNode(): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
inputNodeName(): string | undefined { inputNodeName(): string | undefined {
return this.selectedInput || this.parentNode; return this.selectedInput || this.parentNode;
@ -256,7 +256,7 @@ export default mixins(
}, },
isActiveStickyNode(): boolean { isActiveStickyNode(): boolean {
return ( return (
!!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE !!this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].type === STICKY_NODE_TYPE
); );
}, },
workflowExecution(): IExecutionResponse | null { workflowExecution(): IExecutionResponse | null {
@ -339,7 +339,7 @@ export default mixins(
return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`; return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
}, },
outputPanelEditMode(): { enabled: boolean; value: string; } { outputPanelEditMode(): { enabled: boolean; value: string; } {
return this.$store.getters['ui/outputPanelEditMode']; return this.$store.getters['ndv/outputPanelEditMode'];
}, },
}, },
watch: { watch: {
@ -354,7 +354,7 @@ export default mixins(
this.avgInputRowHeight = 0; this.avgInputRowHeight = 0;
setTimeout(() => { setTimeout(() => {
this.$store.commit('ui/setNDVSessionId'); this.$store.commit('ndv/setNDVSessionId');
}, 0); }, 0);
this.$externalHooks().run('dataDisplay.nodeTypeChanged', { this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()), nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
@ -375,8 +375,8 @@ export default mixins(
output_first_connector_runs: this.maxOutputRun, output_first_connector_runs: this.maxOutputRun,
selected_view_inputs: this.isTriggerNode selected_view_inputs: this.isTriggerNode
? 'trigger' ? 'trigger'
: this.$store.getters['ui/inputPanelDisplayMode'], : this.$store.getters['ndv/inputPanelDisplayMode'],
selected_view_outputs: this.$store.getters['ui/outputPanelDisplayMode'], selected_view_outputs: this.$store.getters['ndv/outputPanelDisplayMode'],
input_connectors: this.parentNodes.length, input_connectors: this.parentNodes.length,
output_connectors: output_connectors:
outogingConnections && outogingConnections.main && outogingConnections.main.length, outogingConnections && outogingConnections.main && outogingConnections.main.length,
@ -401,12 +401,12 @@ export default mixins(
}, },
inputNodeName(nodeName: string | undefined) { inputNodeName(nodeName: string | undefined) {
setTimeout(() => { setTimeout(() => {
this.$store.commit('ui/setInputNodeName', nodeName); this.$store.commit('ndv/setInputNodeName', nodeName);
}, 0); }, 0);
}, },
inputRun() { inputRun() {
setTimeout(() => { setTimeout(() => {
this.$store.commit('ui/setInputRunIndex', this.inputRun); this.$store.commit('ndv/setInputRunIndex', this.inputRun);
}, 0); }, 0);
}, },
}, },
@ -416,7 +416,7 @@ export default mixins(
return; return;
} }
if (e === null) { if (e === null) {
this.$store.commit('ui/setHoveringItem', null); this.$store.commit('ndv/setHoveringItem', null);
return; return;
} }
@ -426,11 +426,11 @@ export default mixins(
outputIndex: e.outputIndex, outputIndex: e.outputIndex,
itemIndex: e.itemIndex, itemIndex: e.itemIndex,
}; };
this.$store.commit('ui/setHoveringItem', item); this.$store.commit('ndv/setHoveringItem', item);
}, },
onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) { onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) {
if (e === null || !this.activeNode) { if (e === null || !this.activeNode) {
this.$store.commit('ui/setHoveringItem', null); this.$store.commit('ndv/setHoveringItem', null);
return; return;
} }
@ -440,7 +440,7 @@ export default mixins(
outputIndex: e.outputIndex, outputIndex: e.outputIndex,
itemIndex: e.itemIndex, itemIndex: e.itemIndex,
}; };
this.$store.commit('ui/setHoveringItem', item); this.$store.commit('ndv/setHoveringItem', item);
}, },
onInputTableMounted(e: { avgRowHeight: number }) { onInputTableMounted(e: { avgRowHeight: number }) {
this.avgInputRowHeight = e.avgRowHeight; this.avgInputRowHeight = e.avgRowHeight;
@ -449,7 +449,7 @@ export default mixins(
this.avgOutputRowHeight = e.avgRowHeight; this.avgOutputRowHeight = e.avgRowHeight;
}, },
onWorkflowActivate() { onWorkflowActivate() {
this.$store.commit('setActiveNode', null); this.$store.commit('ndv/setActiveNodeName', null);
setTimeout(() => { setTimeout(() => {
this.activateCurrentWorkflow('ndv'); this.activateCurrentWorkflow('ndv');
}, 1000); }, 1000);
@ -558,7 +558,7 @@ export default mixins(
this.$store.commit('pinData', { node: this.activeNode, data: jsonParse(value) }); this.$store.commit('pinData', { node: this.activeNode, data: jsonParse(value) });
} }
this.$store.commit('ui/setOutputPanelEditModeEnabled', false); this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
} }
this.$externalHooks().run('dataDisplay.nodeEditingFinished'); this.$externalHooks().run('dataDisplay.nodeEditingFinished');
@ -568,8 +568,8 @@ export default mixins(
workflow_id: this.$store.getters.workflowId, workflow_id: this.$store.getters.workflowId,
}); });
this.triggerWaitingWarningEnabled = false; this.triggerWaitingWarningEnabled = false;
this.$store.commit('setActiveNode', null); this.$store.commit('ndv/setActiveNodeName', null);
this.$store.commit('ui/resetNDVSessionId'); this.$store.commit('ndv/resetNDVSessionId');
}, },
onRunOutputIndexChange(run: number) { onRunOutputIndexChange(run: number) {
this.runOutputIndex = run; this.runOutputIndex = run;

2
packages/editor-ui/src/components/NodeExecuteButton.vue
View file

@ -111,7 +111,7 @@ export default mixins(
} }
if (this.isTriggerNode && this.hasIssues) { if (this.isTriggerNode && this.hasIssues) {
if (this.$store.getters.activeNode && this.$store.getters.activeNode.name !== this.nodeName) { if (this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].name !== this.nodeName) {
return this.$locale.baseText('ndv.execute.fixPrevious'); return this.$locale.baseText('ndv.execute.fixPrevious');
} }

4
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -198,7 +198,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({
}; };
}, },
node(): INodeUi { node(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
parametersSetting(): INodeProperties[] { parametersSetting(): INodeProperties[] {
return this.parameters.filter((item) => { return this.parameters.filter((item) => {
@ -218,7 +218,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({
return this.nodeType.properties; return this.nodeType.properties;
}, },
outputPanelEditMode(): { enabled: boolean; value: string } { outputPanelEditMode(): { enabled: boolean; value: string } {
return this.$store.getters['ui/outputPanelEditMode']; return this.$store.getters['ndv/outputPanelEditMode'];
}, },
isCommunityNode(): boolean { isCommunityNode(): boolean {
return isCommunityPackageName(this.node.type); return isCommunityPackageName(this.node.type);

2
packages/editor-ui/src/components/NodeSettingsTabs.vue
View file

@ -27,7 +27,7 @@ export default mixins(
}, },
computed: { computed: {
activeNode(): INodeUi { activeNode(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
documentationUrl (): string { documentationUrl (): string {
const nodeType = this.nodeType as INodeTypeDescription | null; const nodeType = this.nodeType as INodeTypeDescription | null;

4
packages/editor-ui/src/components/OutputPanel.vue
View file

@ -112,7 +112,7 @@ export default mixins(
}, },
computed: { computed: {
node(): INodeUi { node(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
nodeType (): INodeTypeDescription | null { nodeType (): INodeTypeDescription | null {
if (this.node) { if (this.node) {
@ -202,7 +202,7 @@ export default mixins(
return updatedAt > runAt; return updatedAt > runAt;
}, },
outputPanelEditMode(): { enabled: boolean; value: string; } { outputPanelEditMode(): { enabled: boolean; value: string; } {
return this.$store.getters['ui/outputPanelEditMode']; return this.$store.getters['ndv/outputPanelEditMode'];
}, },
canPinData(): boolean { canPinData(): boolean {
return this.isPinDataNodeType && !this.isReadOnly; return this.isPinDataNodeType && !this.isReadOnly;

10
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -497,7 +497,7 @@ export default mixins(
} }
// Get the resolved parameter values of the current node // Get the resolved parameter values of the current node
const currentNodeParameters = this.$store.getters.activeNode.parameters; const currentNodeParameters = this.$store.getters['ndv/activeNode'].parameters;
try { try {
const resolvedNodeParameters = this.resolveParameter(currentNodeParameters); const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
@ -512,7 +512,7 @@ export default mixins(
} }
}, },
node (): INodeUi | null { node (): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
displayTitle (): string { displayTitle (): string {
const interpolation = { interpolate: { shortPath: this.shortPath } }; const interpolation = { interpolate: { shortPath: this.shortPath } };
@ -782,7 +782,7 @@ export default mixins(
// Get the resolved parameter values of the current node // Get the resolved parameter values of the current node
try { try {
const currentNodeParameters = (this.$store.getters.activeNode as INodeUi).parameters; const currentNodeParameters = (this.$store.getters['ndv/activeNode'] as INodeUi).parameters;
const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters; const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined; const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined; const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
@ -826,7 +826,7 @@ export default mixins(
parameter_field_type: this.parameter.type, parameter_field_type: this.parameter.type,
new_expression: !this.isValueExpression, new_expression: !this.isValueExpression,
workflow_id: this.$store.getters.workflowId, workflow_id: this.$store.getters.workflowId,
session_id: this.$store.getters['ui/ndvSessionId'], session_id: this.$store.getters['ndv/ndvSessionId'],
source: this.eventSource || 'ndv', source: this.eventSource || 'ndv',
}); });
} }
@ -958,7 +958,7 @@ export default mixins(
node_type: this.node && this.node.type, node_type: this.node && this.node.type,
resource: this.node && this.node.parameters.resource, resource: this.node && this.node.parameters.resource,
is_custom: value === CUSTOM_API_CALL_KEY, is_custom: value === CUSTOM_API_CALL_KEY,
session_id: this.$store.getters['ui/ndvSessionId'], session_id: this.$store.getters['ndv/ndvSessionId'],
parameter: this.parameter.name, parameter: this.parameter.name,
}); });
} }

12
packages/editor-ui/src/components/ParameterInputFull.vue
View file

@ -121,7 +121,7 @@ export default mixins(
}, },
computed: { computed: {
node (): INodeUi | null { node (): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
hint (): string | null { hint (): string | null {
return this.$locale.nodeText().hint(this.parameter, this.path); return this.$locale.nodeText().hint(this.parameter, this.path);
@ -136,10 +136,10 @@ export default mixins(
return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true; return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
}, },
isInputDataEmpty (): boolean { isInputDataEmpty (): boolean {
return this.$store.getters['ui/getNDVDataIsEmpty']('input'); return this.$store.getters['ndv/getNDVDataIsEmpty']('input');
}, },
displayMode(): IRunDataDisplayMode { displayMode(): IRunDataDisplayMode {
return this.$store.getters['ui/inputPanelDisplayMode']; return this.$store.getters['ndv/inputPanelDisplayMode'];
}, },
showMappingTooltip (): boolean { showMappingTooltip (): boolean {
return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'; return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
@ -149,13 +149,13 @@ export default mixins(
onFocus() { onFocus() {
this.focused = true; this.focused = true;
if (!this.parameter.noDataExpression) { if (!this.parameter.noDataExpression) {
this.$store.commit('ui/setMappableNDVInputFocus', this.parameter.displayName); this.$store.commit('ndv/setMappableNDVInputFocus', this.parameter.displayName);
} }
}, },
onBlur() { onBlur() {
this.focused = false; this.focused = false;
if (!this.parameter.noDataExpression) { if (!this.parameter.noDataExpression) {
this.$store.commit('ui/setMappableNDVInputFocus', ''); this.$store.commit('ndv/setMappableNDVInputFocus', '');
} }
}, },
onMenuExpanded(expanded: boolean) { onMenuExpanded(expanded: boolean) {
@ -232,7 +232,7 @@ export default mixins(
window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true'); window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
} }
this.$store.commit('ui/setMappingTelemetry', { this.$store.commit('ndv/setMappingTelemetry', {
dest_node_type: this.node.type, dest_node_type: this.node.type,
dest_parameter: this.path, dest_parameter: this.path,
dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed', dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed',

4
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -157,7 +157,7 @@ export default mixins(
return this.filteredParameters.map(parameter => parameter.name); return this.filteredParameters.map(parameter => parameter.name);
}, },
node (): INodeUi { node (): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
indexToShowSlotAt (): number { indexToShowSlotAt (): number {
let index = 0; let index = 0;
@ -320,7 +320,7 @@ export default mixins(
if (!newValue.includes(parameter)) { if (!newValue.includes(parameter)) {
const parameterData = { const parameterData = {
name: `${this.path}.${parameter}`, name: `${this.path}.${parameter}`,
node: this.$store.getters.activeNode.name, node: this.$store.getters['ndv/activeNode'].name,
value: undefined, value: undefined,
}; };
this.$emit('valueChanged', parameterData); this.$emit('valueChanged', parameterData);

12
packages/editor-ui/src/components/ParameterInputWrapper.vue
View file

@ -104,7 +104,7 @@ export default mixins(
return isValueExpression(this.parameter, this.value); return isValueExpression(this.parameter, this.value);
}, },
activeNode(): INodeUi | null { activeNode(): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
selectedRLMode(): INodePropertyMode | undefined { selectedRLMode(): INodePropertyMode | undefined {
if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) { if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) {
@ -129,17 +129,17 @@ export default mixins(
return this.hint; return this.hint;
}, },
targetItem(): TargetItem | null { targetItem(): TargetItem | null {
return this.$store.getters['ui/hoveringItem']; return this.$store.getters['ndv/hoveringItem'];
}, },
expressionValueComputed (): string | null { expressionValueComputed (): string | null {
const inputNodeName: string | undefined = this.$store.getters['ui/ndvInputNodeName']; const inputNodeName: string | undefined = this.$store.getters['ndv/ndvInputNodeName'];
const value = isResourceLocatorValue(this.value)? this.value.value: this.value; const value = isResourceLocatorValue(this.value)? this.value.value: this.value;
if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') { if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
return null; return null;
} }
const inputRunIndex: number | undefined = this.$store.getters['ui/ndvInputRunIndex']; const inputRunIndex: number | undefined = this.$store.getters['ndv/ndvInputRunIndex'];
const inputBranchIndex: number | undefined = this.$store.getters['ui/ndvInputBranchIndex']; const inputBranchIndex: number | undefined = this.$store.getters['ndv/ndvInputBranchIndex'];
let computedValue: NodeParameterValue; let computedValue: NodeParameterValue;
try { try {
@ -160,7 +160,7 @@ export default mixins(
}, },
expressionOutput(): string | null { expressionOutput(): string | null {
if (this.isValueExpression && this.expressionValueComputed) { if (this.isValueExpression && this.expressionValueComputed) {
const inputData = this.$store.getters['ui/ndvInputData']; const inputData = this.$store.getters['ndv/ndvInputData'];
if (!inputData || (inputData && inputData.length <= 1)) { if (!inputData || (inputData && inputData.length <= 1)) {
return this.expressionValueComputed; return this.expressionValueComputed;
} }

6
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View file

@ -279,7 +279,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
return this.selectedMode === 'list'; return this.selectedMode === 'list';
}, },
hasCredential(): boolean { hasCredential(): boolean {
const node = this.$store.getters.activeNode as INodeUi | null; const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
if (!node) { if (!node) {
return false; return false;
} }
@ -440,7 +440,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
}, },
setWidthOnMainPanelResize(mutation: { type: string }) { setWidthOnMainPanelResize(mutation: { type: string }) {
// Update the width when main panel dimension change // Update the width when main panel dimension change
if(mutation.type === 'ui/setMainPanelDimensions') this.setWidth(); if(mutation.type === 'ndv/setMainPanelDimensions') this.setWidth();
}, },
getLinkAlt(entity: string) { getLinkAlt(entity: string) {
if (this.selectedMode === 'list' && entity) { if (this.selectedMode === 'list' && entity) {
@ -479,7 +479,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
return parameter.typeOptions[argumentName]; return parameter.typeOptions[argumentName];
}, },
openCredential(): void { openCredential(): void {
const node = this.$store.getters.activeNode as INodeUi | null; const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
if (!node || !node.credentials) { if (!node || !node.credentials) {
return; return;
} }

32
packages/editor-ui/src/components/RunData.vue
View file

@ -145,7 +145,7 @@
:value="editMode.value" :value="editMode.value"
:options="{ scrollBeyondLastLine: false }" :options="{ scrollBeyondLastLine: false }"
type="json" type="json"
@input="$store.commit('ui/setOutputPanelEditModeValue', $event)" @input="$store.commit('ndv/setOutputPanelEditModeValue', $event)"
/> />
</div> </div>
<div :class="$style['edit-mode-footer']"> <div :class="$style['edit-mode-footer']">
@ -470,7 +470,7 @@ export default mixins(
this.showPinDataDiscoveryTooltip(this.jsonData); this.showPinDataDiscoveryTooltip(this.jsonData);
} }
} }
this.$store.commit('ui/setNDVBranchIndex', { this.$store.commit('ndv/setNDVBranchIndex', {
pane: this.paneType, pane: this.paneType,
branchIndex: this.currentOutputIndex, branchIndex: this.currentOutputIndex,
}); });
@ -482,7 +482,7 @@ export default mixins(
}, },
computed: { computed: {
activeNode(): INodeUi { activeNode(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
dataPinningDocsUrl(): string { dataPinningDocsUrl(): string {
return DATA_PINNING_DOCS_URL; return DATA_PINNING_DOCS_URL;
@ -491,7 +491,7 @@ export default mixins(
return DATA_EDITING_DOCS_URL; return DATA_EDITING_DOCS_URL;
}, },
displayMode(): IRunDataDisplayMode { displayMode(): IRunDataDisplayMode {
return this.$store.getters['ui/getPanelDisplayMode'](this.paneType); return this.$store.getters['ndv/getPanelDisplayMode'](this.paneType);
}, },
node(): INodeUi | null { node(): INodeUi | null {
return (this.nodeUi as INodeUi | null) || null; return (this.nodeUi as INodeUi | null) || null;
@ -675,7 +675,7 @@ export default mixins(
editMode(): { enabled: boolean; value: string; } { editMode(): { enabled: boolean; value: string; } {
return this.isPaneTypeInput return this.isPaneTypeInput
? { enabled: false, value: '' } ? { enabled: false, value: '' }
: this.$store.getters['ui/outputPanelEditMode']; : this.$store.getters['ndv/outputPanelEditMode'];
}, },
isPaneTypeInput(): boolean { isPaneTypeInput(): boolean {
return this.paneType === 'input'; return this.paneType === 'input';
@ -737,8 +737,8 @@ export default mixins(
? inputData ? inputData
: TEST_PIN_DATA; : TEST_PIN_DATA;
this.$store.commit('ui/setOutputPanelEditModeEnabled', true); this.$store.commit('ndv/setOutputPanelEditModeEnabled', true);
this.$store.commit('ui/setOutputPanelEditModeValue', JSON.stringify(data, null, 2)); this.$store.commit('ndv/setOutputPanelEditModeValue', JSON.stringify(data, null, 2));
this.$telemetry.track('User opened ndv edit state', { this.$telemetry.track('User opened ndv edit state', {
node_type: this.activeNode.type, node_type: this.activeNode.type,
@ -751,8 +751,8 @@ export default mixins(
}); });
}, },
onClickCancelEdit() { onClickCancelEdit() {
this.$store.commit('ui/setOutputPanelEditModeEnabled', false); this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
this.$store.commit('ui/setOutputPanelEditModeValue', ''); this.$store.commit('ndv/setOutputPanelEditModeValue', '');
this.onExitEditMode({ type: 'cancel' }); this.onExitEditMode({ type: 'cancel' });
}, },
onClickSaveEdit() { onClickSaveEdit() {
@ -770,7 +770,7 @@ export default mixins(
return; return;
} }
this.$store.commit('ui/setOutputPanelEditModeEnabled', false); this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) }); this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) });
this.onDataPinningSuccess({ source: 'save-edit' }); this.onDataPinningSuccess({ source: 'save-edit' });
@ -935,7 +935,7 @@ export default mixins(
}, },
onDisplayModeChange(displayMode: IRunDataDisplayMode) { onDisplayModeChange(displayMode: IRunDataDisplayMode) {
const previous = this.displayMode; const previous = this.displayMode;
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: displayMode}); this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
const dataContainer = this.$refs.dataContainer; const dataContainer = this.$refs.dataContainer;
if (dataContainer) { if (dataContainer) {
@ -1007,10 +1007,10 @@ export default mixins(
this.refreshDataSize(); this.refreshDataSize();
this.closeBinaryDataDisplay(); this.closeBinaryDataDisplay();
if (this.binaryData.length > 0) { if (this.binaryData.length > 0) {
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'}); this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
} }
else if (this.displayMode === 'binary') { else if (this.displayMode === 'binary') {
this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'table'}); this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
} }
}, },
closeBinaryDataDisplay () { closeBinaryDataDisplay () {
@ -1096,7 +1096,7 @@ export default mixins(
}, },
goToErroredNode() { goToErroredNode() {
if (this.node) { if (this.node) {
this.$store.commit('setActiveNode', this.node.name); this.$store.commit('ndv/setActiveNodeName', this.node.name);
} }
}, },
}, },
@ -1107,7 +1107,7 @@ export default mixins(
inputData:{ inputData:{
handler(data: INodeExecutionData[]) { handler(data: INodeExecutionData[]) {
if(this.paneType && data){ if(this.paneType && data){
this.$store.commit('ui/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) }); this.$store.commit('ndv/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) });
} }
}, },
immediate: true, immediate: true,
@ -1130,7 +1130,7 @@ export default mixins(
} }
}, },
currentOutputIndex(branchIndex: number) { currentOutputIndex(branchIndex: number) {
this.$store.commit('ui/setNDVBranchIndex', { this.$store.commit('ndv/setNDVBranchIndex', {
pane: this.paneType, pane: this.paneType,
branchIndex, branchIndex,
}); });

4
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -165,13 +165,13 @@ export default mixins(externalHooks).extend({
this.draggingPath = el.dataset.path; this.draggingPath = el.dataset.path;
} }
this.$store.commit('ui/resetMappingTelemetry'); this.$store.commit('ndv/resetMappingTelemetry');
}, },
onDragEnd(el: HTMLElement) { onDragEnd(el: HTMLElement) {
this.draggingPath = null; this.draggingPath = null;
setTimeout(() => { setTimeout(() => {
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry']; const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
const telemetryPayload = { const telemetryPayload = {
src_node_type: this.node.type, src_node_type: this.node.type,
src_field_name: el.dataset.name || '', src_field_name: el.dataset.name || '',

2
packages/editor-ui/src/components/RunDataJsonActions.vue
View file

@ -84,7 +84,7 @@ export default mixins(
}, },
computed: { computed: {
activeNode(): INodeUi { activeNode(): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
normalisedJsonPath(): string { normalisedJsonPath(): string {
const isNotSelected = this.selectedJsonPath === nonExistingJsonPath; const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;

10
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -140,7 +140,7 @@
<script lang="ts"> <script lang="ts">
/* eslint-disable prefer-spread */ /* eslint-disable prefer-spread */
import { INodeUi, IRootState, ITableData, IUiState } from '@/Interface'; import { INodeUi, IRootState, ITableData, IUiState, NDVState } from '@/Interface';
import { getPairedItemId } from '@/pairedItemUtils'; import { getPairedItemId } from '@/pairedItemUtils';
import Vue, { PropType } from 'vue'; import Vue, { PropType } from 'vue';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
@ -202,8 +202,8 @@ export default mixins(externalHooks).extend({
} }
}, },
computed: { computed: {
hoveringItem(): IUiState['ndv']['hoveringItem'] { hoveringItem(): NDVState['ndv']['hoveringItem'] {
return this.$store.getters['ui/hoveringItem']; return this.$store.getters['ndv/hoveringItem'];
}, },
pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] { pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] {
return this.$store.getters['workflowExecutionPairedItemMappings']; return this.$store.getters['workflowExecutionPairedItemMappings'];
@ -346,7 +346,7 @@ export default mixins(externalHooks).extend({
onDragStart() { onDragStart() {
this.draggedColumn = true; this.draggedColumn = true;
this.$store.commit('ui/resetMappingTelemetry'); this.$store.commit('ndv/resetMappingTelemetry');
}, },
onCellDragStart(el: HTMLElement) { onCellDragStart(el: HTMLElement) {
if (el && el.dataset.value) { if (el && el.dataset.value) {
@ -369,7 +369,7 @@ export default mixins(externalHooks).extend({
}, },
onDragEnd(column: string, src: string, depth = '0') { onDragEnd(column: string, src: string, depth = '0') {
setTimeout(() => { setTimeout(() => {
const mappingTelemetry = this.$store.getters['ui/mappingTelemetry']; const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
const telemetryPayload = { const telemetryPayload = {
src_node_type: this.node.type, src_node_type: this.node.type,
src_field_name: column, src_field_name: column,

4
packages/editor-ui/src/components/Sticky.vue
View file

@ -142,10 +142,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
}, },
onEdit(edit: boolean) { onEdit(edit: boolean) {
if (edit && !this.isActive && this.node) { if (edit && !this.isActive && this.node) {
this.$store.commit('setActiveNode', this.node.name); this.$store.commit('ndv/setActiveNodeName', this.node.name);
} }
else if (this.isActive && !edit) { else if (this.isActive && !edit) {
this.$store.commit('setActiveNode', null); this.$store.commit('ndv/setActiveNodeName', null);
} }
}, },
onMarkdownClick ( link:HTMLAnchorElement, event: Event ) { onMarkdownClick ( link:HTMLAnchorElement, event: Event ) {

2
packages/editor-ui/src/components/TriggerPanel.vue
View file

@ -369,7 +369,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
pane: 'input', pane: 'input',
type: 'open-executions-log', type: 'open-executions-log',
}); });
this.$store.commit('setActiveNode', null); this.$store.commit('ndv/setActiveNodeName', null);
this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY); this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
} else if (target.dataset.key === 'settings') { } else if (target.dataset.key === 'settings') {
this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY); this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);

4
packages/editor-ui/src/components/VariableSelector.vue
View file

@ -406,7 +406,7 @@ export default mixins(
const runIndex = 0; const runIndex = 0;
const returnData: IVariableSelectorOption[] = []; const returnData: IVariableSelectorOption[] = [];
const activeNode: INodeUi | null = this.$store.getters.activeNode; const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
if (activeNode === null) { if (activeNode === null) {
return returnData; return returnData;
@ -486,7 +486,7 @@ export default mixins(
getFilterResults (filterText: string, itemIndex: number): IVariableSelectorOption[] { getFilterResults (filterText: string, itemIndex: number): IVariableSelectorOption[] {
const inputName = 'main'; const inputName = 'main';
const activeNode: INodeUi | null = this.$store.getters.activeNode; const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
if (activeNode === null) { if (activeNode === null) {
return []; return [];

2
packages/editor-ui/src/components/mixins/workflowHelpers.ts
View file

@ -534,7 +534,7 @@ export const workflowHelpers = mixins(
let itemIndex = opts?.targetItem?.itemIndex || 0; let itemIndex = opts?.targetItem?.itemIndex || 0;
const inputName = 'main'; const inputName = 'main';
const activeNode = this.$store.getters.activeNode; const activeNode = this.$store.getters['ndv/activeNode'];
const workflow = this.getCurrentWorkflow(); const workflow = this.getCurrentWorkflow();
const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null; const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null;
let parentNode = workflow.getParentNodes(activeNode.name, inputName, 1); let parentNode = workflow.getParentNodes(activeNode.name, inputName, 1);

170
packages/editor-ui/src/modules/ndv.ts Normal file
View file

@ -0,0 +1,170 @@
import Vue from 'vue';
import { Module } from 'vuex';
import {
IRootState,
IRunDataDisplayMode,
NDVState,
XYPosition,
IExecutionResponse,
INodeUi,
} from '../Interface';
const module: Module<NDVState, IRootState> = {
namespaced: true,
state: {
activeNodeName: null,
mainPanelDimensions: {},
sessionId: '',
input: {
displayMode: 'table',
nodeName: undefined,
run: undefined,
branch: undefined,
data: {
isEmpty: true,
},
},
output: {
displayMode: 'table',
branch: undefined,
data: {
isEmpty: true,
},
editMode: {
enabled: false,
value: '',
},
},
focusedMappableInput: '',
mappingTelemetry: {},
hoveringItem: null,
draggable: {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
},
getters: {
activeNodeName: (state: NDVState) => state.activeNodeName,
activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
return rootGetters.getNodeByName(state.activeNodeName);
},
ndvInputData: (state: NDVState, getters, rootState: IRootState, rootGetters) => {
const executionData = rootGetters.getWorkflowExecution as IExecutionResponse | null;
const inputNodeName: string | undefined = state.input.nodeName;
const inputRunIndex: number = state.input.run ?? 0;
const inputBranchIndex: number = state.input.branch?? 0;
if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
return [];
}
return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
},
ndvSessionId: (state: NDVState): string => state.sessionId,
getPanelDisplayMode: (state: NDVState) => {
return (panel: 'input' | 'output') => state[panel].displayMode;
},
inputPanelDisplayMode: (state: NDVState) => state.input.displayMode,
outputPanelDisplayMode: (state: NDVState) => state.output.displayMode,
outputPanelEditMode: (state: NDVState): NDVState['output']['editMode'] => state.output.editMode,
focusedMappableInput: (state: NDVState) => state.focusedMappableInput,
isDraggableDragging: (state: NDVState) => state.draggable.isDragging,
draggableType: (state: NDVState) => state.draggable.type,
draggableData: (state: NDVState) => state.draggable.data,
canDraggableDrop: (state: NDVState) => state.draggable.canDrop,
mainPanelDimensions: (state: NDVState) => (panelType: string) => {
const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
return {...defaults, ...state.mainPanelDimensions[panelType]};
},
draggableStickyPos: (state: NDVState) => state.draggable.stickyPosition,
mappingTelemetry: (state: NDVState) => state.mappingTelemetry,
hoveringItem: (state: NDVState) => state.hoveringItem,
ndvInputNodeName: (state: NDVState) => state.input.nodeName,
ndvInputRunIndex: (state: NDVState) => state.input.run,
ndvInputBranchIndex: (state: NDVState) => state.input.branch,
getNDVDataIsEmpty: (state: NDVState) => (panel: 'input' | 'output'): boolean => state[panel].data.isEmpty,
},
mutations: {
setActiveNodeName(state, nodeName: string) {
state.activeNodeName = nodeName;
},
setInputNodeName: (state: NDVState, name: string | undefined) => {
Vue.set(state.input, 'nodeName', name);
},
setInputRunIndex: (state: NDVState, run?: string) => {
Vue.set(state.input, 'run', run);
},
setMainPanelDimensions: (state: NDVState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
Vue.set(
state.mainPanelDimensions,
params.panelType,
{...state.mainPanelDimensions[params.panelType], ...params.dimensions },
);
},
setNDVSessionId: (state: NDVState) => {
Vue.set(state, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
},
resetNDVSessionId: (state: NDVState) => {
Vue.set(state, 'sessionId', '');
},
setPanelDisplayMode: (state: NDVState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
Vue.set(state[params.pane], 'displayMode', params.mode);
},
setOutputPanelEditModeEnabled: (state: NDVState, payload: boolean) => {
Vue.set(state.output.editMode, 'enabled', payload);
},
setOutputPanelEditModeValue: (state: NDVState, payload: string) => {
Vue.set(state.output.editMode, 'value', payload);
},
setMappableNDVInputFocus(state: NDVState, paramName: string) {
Vue.set(state, 'focusedMappableInput', paramName);
},
draggableStartDragging(state: NDVState, {type, data}: {type: string, data: string}) {
state.draggable = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(state: NDVState) {
state.draggable = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(state: NDVState, position: XYPosition | null) {
Vue.set(state.draggable, 'stickyPosition', position);
},
setDraggableCanDrop(state: NDVState, canDrop: boolean) {
Vue.set(state.draggable, 'canDrop', canDrop);
},
setMappingTelemetry(state: NDVState, telemetry: {[key: string]: string | number | boolean}) {
state.mappingTelemetry = {...state.mappingTelemetry, ...telemetry};
},
resetMappingTelemetry(state: NDVState) {
state.mappingTelemetry = {};
},
setHoveringItem(state: NDVState, item: null | NDVState['hoveringItem']) {
Vue.set(state, 'hoveringItem', item);
},
setNDVBranchIndex(state: NDVState, e: {pane: 'input' | 'output', branchIndex: number}) {
Vue.set(state[e.pane], 'branch', e.branchIndex);
},
setNDVPanelDataIsEmpty(state: NDVState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
Vue.set(state[payload.panel].data, 'isEmpty', payload.isEmpty);
},
},
actions: {
},
};
export default module;

149
packages/editor-ui/src/modules/ui.ts
View file

@ -22,7 +22,6 @@ import {
ONBOARDING_CALL_SIGNUP_MODAL_KEY, ONBOARDING_CALL_SIGNUP_MODAL_KEY,
FAKE_DOOR_FEATURES, FAKE_DOOR_FEATURES,
COMMUNITY_PACKAGE_MANAGE_ACTIONS, COMMUNITY_PACKAGE_MANAGE_ACTIONS,
ALL_NODE_FILTER,
IMPORT_CURL_MODAL_KEY, IMPORT_CURL_MODAL_KEY,
} from '@/constants'; } from '@/constants';
import Vue from 'vue'; import Vue from 'vue';
@ -30,10 +29,8 @@ import { ActionContext, Module } from 'vuex';
import { import {
IFakeDoorLocation, IFakeDoorLocation,
IRootState, IRootState,
IRunDataDisplayMode,
IUiState, IUiState,
INodeFilterType, IFakeDoor,
XYPosition,
} from '../Interface'; } from '../Interface';
const module: Module<IUiState, IRootState> = { const module: Module<IUiState, IRootState> = {
@ -109,41 +106,6 @@ const module: Module<IUiState, IRootState> = {
sidebarMenuCollapsed: false, sidebarMenuCollapsed: false,
isPageLoading: true, isPageLoading: true,
currentView: '', currentView: '',
mainPanelDimensions: {},
ndv: {
sessionId: '',
input: {
displayMode: 'table',
nodeName: undefined,
run: undefined,
branch: undefined,
data: {
isEmpty: true,
},
},
output: {
displayMode: 'table',
branch: undefined,
data: {
isEmpty: true,
},
editMode: {
enabled: false,
value: '',
},
},
focusedMappableInput: '',
mappingTelemetry: {},
hoveringItem: null,
},
mainPanelPosition: 0.5,
draggable: {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
},
fakeDoorFeatures: [ fakeDoorFeatures: [
{ {
id: FAKE_DOOR_FEATURES.ENVIRONMENTS, id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
@ -176,18 +138,6 @@ const module: Module<IUiState, IRootState> = {
], ],
}, },
getters: { getters: {
ndvInputData: (state: IUiState, getters, rootState: IRootState, rootGetters) => {
const executionData = rootGetters.getWorkflowExecution as IExecutionResponse | null;
const inputNodeName: string | undefined = state.ndv.input.nodeName;
const inputRunIndex: number = state.ndv.input.run ?? 0;
const inputBranchIndex: number = state.ndv.input.branch?? 0;
if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
return [];
}
return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
},
isVersionsOpen: (state: IUiState) => { isVersionsOpen: (state: IUiState) => {
return state.modals[VERSIONS_MODAL_KEY].open; return state.modals[VERSIONS_MODAL_KEY].open;
}, },
@ -213,14 +163,6 @@ const module: Module<IUiState, IRootState> = {
return (name: string) => state.modals[name].data; return (name: string) => state.modals[name].data;
}, },
sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed, sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
getPanelDisplayMode: (state: IUiState) => {
return (panel: 'input' | 'output') => state.ndv[panel].displayMode;
},
inputPanelDisplayMode: (state: IUiState) => state.ndv.input.displayMode,
outputPanelDisplayMode: (state: IUiState) => state.ndv.output.displayMode,
outputPanelEditMode: (state: IUiState): IUiState['ndv']['output']['editMode'] => state.ndv.output.editMode,
mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
getFakeDoorFeatures: (state: IUiState): IFakeDoor[] => { getFakeDoorFeatures: (state: IUiState): IFakeDoor[] => {
return state.fakeDoorFeatures; return state.fakeDoorFeatures;
}, },
@ -230,40 +172,11 @@ const module: Module<IUiState, IRootState> = {
getFakeDoorById: (state: IUiState, getters) => (id: string) => { getFakeDoorById: (state: IUiState, getters) => (id: string) => {
return getters.getFakeDoorFeatures.find((fakeDoor: IFakeDoor) => fakeDoor.id.toString() === id); return getters.getFakeDoorFeatures.find((fakeDoor: IFakeDoor) => fakeDoor.id.toString() === id);
}, },
focusedMappableInput: (state: IUiState) => state.ndv.focusedMappableInput,
isDraggableDragging: (state: IUiState) => state.draggable.isDragging,
draggableType: (state: IUiState) => state.draggable.type,
draggableData: (state: IUiState) => state.draggable.data,
canDraggableDrop: (state: IUiState) => state.draggable.canDrop,
mainPanelDimensions: (state: IUiState) => (panelType: string) => {
const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
return {...defaults, ...state.mainPanelDimensions[panelType]};
},
draggableStickyPos: (state: IUiState) => state.draggable.stickyPosition,
mappingTelemetry: (state: IUiState) => state.ndv.mappingTelemetry,
getCurrentView: (state: IUiState) => state.currentView, getCurrentView: (state: IUiState) => state.currentView,
isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView), isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
hoveringItem: (state: IUiState) => state.ndv.hoveringItem,
ndvInputNodeName: (state: IUiState) => state.ndv.input.nodeName,
ndvInputRunIndex: (state: IUiState) => state.ndv.input.run,
ndvInputBranchIndex: (state: IUiState) => state.ndv.input.branch,
getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty, getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty,
}, },
mutations: { mutations: {
setInputNodeName: (state: IUiState, name: string | undefined) => {
Vue.set(state.ndv.input, 'nodeName', name);
},
setInputRunIndex: (state: IUiState, run?: string) => {
Vue.set(state.ndv.input, 'run', run);
},
setMainPanelDimensions: (state: IUiState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
Vue.set(
state.mainPanelDimensions,
params.panelType,
{...state.mainPanelDimensions[params.panelType], ...params.dimensions },
);
},
setMode: (state: IUiState, params: {name: string, mode: string}) => { setMode: (state: IUiState, params: {name: string, mode: string}) => {
const { name, mode } = params; const { name, mode } = params;
Vue.set(state.modals[name], 'mode', mode); Vue.set(state.modals[name], 'mode', mode);
@ -318,66 +231,6 @@ const module: Module<IUiState, IRootState> = {
setCurrentView: (state: IUiState, currentView: string) => { setCurrentView: (state: IUiState, currentView: string) => {
state.currentView = currentView; state.currentView = currentView;
}, },
setNDVSessionId: (state: IUiState) => {
Vue.set(state.ndv, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
},
resetNDVSessionId: (state: IUiState) => {
Vue.set(state.ndv, 'sessionId', '');
},
setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
},
setOutputPanelEditModeEnabled: (state: IUiState, payload: boolean) => {
Vue.set(state.ndv.output.editMode, 'enabled', payload);
},
setOutputPanelEditModeValue: (state: IUiState, payload: string) => {
Vue.set(state.ndv.output.editMode, 'value', payload);
},
setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
state.mainPanelPosition = relativePosition;
},
setMappableNDVInputFocus(state: IUiState, paramName: string) {
Vue.set(state.ndv, 'focusedMappableInput', paramName);
},
draggableStartDragging(state: IUiState, {type, data}: {type: string, data: string}) {
state.draggable = {
isDragging: true,
type,
data,
canDrop: false,
stickyPosition: null,
};
},
draggableStopDragging(state: IUiState) {
state.draggable = {
isDragging: false,
type: '',
data: '',
canDrop: false,
stickyPosition: null,
};
},
setDraggableStickyPos(state: IUiState, position: XYPosition | null) {
Vue.set(state.draggable, 'stickyPosition', position);
},
setDraggableCanDrop(state: IUiState, canDrop: boolean) {
Vue.set(state.draggable, 'canDrop', canDrop);
},
setMappingTelemetry(state: IUiState, telemetry: {[key: string]: string | number | boolean}) {
state.ndv.mappingTelemetry = {...state.ndv.mappingTelemetry, ...telemetry};
},
resetMappingTelemetry(state: IUiState) {
state.ndv.mappingTelemetry = {};
},
setHoveringItem(state: IUiState, item: null | IUiState['ndv']['hoveringItem']) {
Vue.set(state.ndv, 'hoveringItem', item);
},
setNDVBranchIndex(state: IUiState, e: {pane: 'input' | 'output', branchIndex: number}) {
Vue.set(state.ndv[e.pane], 'branch', e.branchIndex);
},
setNDVPanelDataIsEmpty(state: IUiState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
Vue.set(state.ndv[payload.panel].data, 'isEmpty', payload.isEmpty);
},
}, },
actions: { actions: {
openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => { openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {

2
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -189,7 +189,7 @@ export class I18nClass {
* except for `eventTriggerDescription`. * except for `eventTriggerDescription`.
*/ */
nodeText () { nodeText () {
const activeNode = this.$store.getters.activeNode; const activeNode = this.$store.getters['ndv/activeNode'];
const nodeType = activeNode ? this.shortNodeType(activeNode.type) : ''; // unused in eventTriggerDescription const nodeType = activeNode ? this.shortNodeType(activeNode.type) : ''; // unused in eventTriggerDescription
const initialKey = `n8n-nodes-base.nodes.${nodeType}.nodeView`; const initialKey = `n8n-nodes-base.nodes.${nodeType}.nodeView`;
const context = this; const context = this;

21
packages/editor-ui/src/store.ts
View file

@ -37,6 +37,7 @@ import {
} from './Interface'; } from './Interface';
import nodeTypes from './modules/nodeTypes'; import nodeTypes from './modules/nodeTypes';
import ndv from './modules/ndv';
import credentials from './modules/credentials'; import credentials from './modules/credentials';
import settings from './modules/settings'; import settings from './modules/settings';
import tags from './modules/tags'; import tags from './modules/tags';
@ -59,7 +60,6 @@ const state: IRootState = {
activeExecutions: [], activeExecutions: [],
activeWorkflows: [], activeWorkflows: [],
activeActions: [], activeActions: [],
activeNode: null,
activeCredentialType: null, activeCredentialType: null,
// @ts-ignore // @ts-ignore
baseUrl: import.meta.env.VUE_APP_URL_BASE_API ?? window.BASE_PATH ?? '/', baseUrl: import.meta.env.VUE_APP_URL_BASE_API ?? window.BASE_PATH ?? '/',
@ -122,6 +122,7 @@ const modules = {
ui, ui,
communityNodes, communityNodes,
nodeCreator, nodeCreator,
ndv,
}; };
export const store = new Vuex.Store({ export const store = new Vuex.Store({
@ -656,13 +657,9 @@ export const store = new Vuex.Store({
setIsNpmAvailable(state, isNpmAvailable: boolean) { setIsNpmAvailable(state, isNpmAvailable: boolean) {
Vue.set(state, 'isNpmAvailable', isNpmAvailable); Vue.set(state, 'isNpmAvailable', isNpmAvailable);
}, },
setActiveNode(state, nodeName: string) {
state.activeNode = nodeName;
},
setActiveCredentialType(state, activeCredentialType: string) { setActiveCredentialType(state, activeCredentialType: string) {
state.activeCredentialType = activeCredentialType; state.activeCredentialType = activeCredentialType;
}, },
setLastSelectedNode(state, nodeName: string) { setLastSelectedNode(state, nodeName: string) {
state.lastSelectedNode = nodeName; state.lastSelectedNode = nodeName;
}, },
@ -949,7 +946,6 @@ export const store = new Vuex.Store({
/** /**
* Pin data * Pin data
*/ */
pinData: (state): IPinData | undefined => { pinData: (state): IPinData | undefined => {
return state.workflow.pinData; return state.workflow.pinData;
}, },
@ -958,10 +954,11 @@ export const store = new Vuex.Store({
return state.workflow.pinData[nodeName].map(item => item.json); return state.workflow.pinData[nodeName].map(item => item.json);
}, },
pinDataSize: (state) => { pinDataSize: (state, getters, rootState, rootGetters) => {
const activeNode = rootGetters['ndv/activeNodeName'];
return state.workflow.nodes return state.workflow.nodes
.reduce((acc, node) => { .reduce((acc, node) => {
if (typeof node.pinData !== 'undefined' && node.name !== state.activeNode) { if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
acc += stringSizeInBytes(node.pinData); acc += stringSizeInBytes(node.pinData);
} }
@ -969,6 +966,11 @@ export const store = new Vuex.Store({
}, 0); }, 0);
}, },
activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
// kept here for FE hooks
return rootGetters['ndv/activeNode'];
},
/** /**
* Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc. * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
*/ */
@ -982,9 +984,6 @@ export const store = new Vuex.Store({
return acc; return acc;
}, []); }, []);
}, },
activeNode: (state, getters): INodeUi | null => {
return getters.getNodeByName(state.activeNode);
},
lastSelectedNode: (state, getters): INodeUi | null => { lastSelectedNode: (state, getters): INodeUi | null => {
return getters.getNodeByName(state.lastSelectedNode); return getters.getNodeByName(state.lastSelectedNode);
}, },

10
packages/editor-ui/src/views/NodeView.vue
View file

@ -327,7 +327,7 @@ export default mixins(
}, },
...mapGetters(['nativelyNumberSuffixedDefaults']), ...mapGetters(['nativelyNumberSuffixedDefaults']),
activeNode(): INodeUi | null { activeNode(): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters['ndv/activeNode'];
}, },
executionWaitingForWebhook(): boolean { executionWaitingForWebhook(): boolean {
return this.$store.getters.executionWaitingForWebhook; return this.$store.getters.executionWaitingForWebhook;
@ -817,7 +817,7 @@ export default mixins(
this.createNodeActive = false; this.createNodeActive = false;
if (this.activeNode) { if (this.activeNode) {
this.$externalHooks().run('dataDisplay.nodeEditingFinished'); this.$externalHooks().run('dataDisplay.nodeEditingFinished');
this.$store.commit('setActiveNode', null); this.$store.commit('ndv/setActiveNodeName', null);
} }
return; return;
@ -904,7 +904,7 @@ export default mixins(
if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) { if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
return; return;
} }
this.$store.commit('setActiveNode', lastSelectedNode.name); this.$store.commit('ndv/setActiveNodeName', lastSelectedNode.name);
} }
} else if (e.key === 'ArrowRight' && e.shiftKey === true) { } else if (e.key === 'ArrowRight' && e.shiftKey === true) {
// Select all downstream nodes // Select all downstream nodes
@ -1510,7 +1510,7 @@ export default mixins(
this.newNodeInsertPosition = null; this.newNodeInsertPosition = null;
if (setActive === true) { if (setActive === true) {
this.$store.commit('setActiveNode', node.name); this.$store.commit('ndv/setActiveNodeName', node.name);
} }
}, },
showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) { showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
@ -2694,7 +2694,7 @@ export default mixins(
this.nodeSelectedByName(newName); this.nodeSelectedByName(newName);
if (isActive) { if (isActive) {
this.$store.commit('setActiveNode', newName); this.$store.commit('ndv/setActiveNodeName', newName);
this.renamingActive = false; this.renamingActive = false;
} }
}, },