From 127f988400cc0ad975e0993a1278cac52e00ce10 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Date: Mon, 24 Oct 2022 11:35:03 +0200 Subject: [PATCH] refactor(editor): create ndv store (#4409) * refactor ndv module out * update active node in root state * simplify * fix conflict * fix dragging --- packages/editor-ui/src/Interface.ts | 71 ++++---- .../editor-ui/src/components/CodeEdit.vue | 2 +- .../completions/jsonField.completions.ts | 2 +- .../src/components/CollectionParameter.vue | 2 +- .../CredentialEdit/CredentialConfig.vue | 2 +- .../CredentialEdit/CredentialEdit.vue | 8 +- .../editor-ui/src/components/Draggable.vue | 8 +- .../src/components/DraggableTarget.vue | 10 +- .../src/components/Error/NodeErrorView.vue | 2 +- .../src/components/ExpressionEdit.vue | 8 +- .../src/components/ImportCurlModal.vue | 2 +- .../editor-ui/src/components/InputPanel.vue | 4 +- .../src/components/MainHeader/MainHeader.vue | 2 +- .../src/components/NDVDraggablePanels.vue | 10 +- packages/editor-ui/src/components/Node.vue | 2 +- .../src/components/NodeDetailsView.vue | 36 ++-- .../src/components/NodeExecuteButton.vue | 2 +- .../editor-ui/src/components/NodeSettings.vue | 4 +- .../src/components/NodeSettingsTabs.vue | 2 +- .../editor-ui/src/components/OutputPanel.vue | 4 +- .../src/components/ParameterInput.vue | 10 +- .../src/components/ParameterInputFull.vue | 12 +- .../src/components/ParameterInputList.vue | 4 +- .../src/components/ParameterInputWrapper.vue | 12 +- .../ResourceLocator/ResourceLocator.vue | 6 +- packages/editor-ui/src/components/RunData.vue | 32 ++-- .../editor-ui/src/components/RunDataJson.vue | 4 +- .../src/components/RunDataJsonActions.vue | 2 +- .../editor-ui/src/components/RunDataTable.vue | 10 +- packages/editor-ui/src/components/Sticky.vue | 4 +- .../editor-ui/src/components/TriggerPanel.vue | 2 +- .../src/components/VariableSelector.vue | 4 +- .../src/components/mixins/workflowHelpers.ts | 2 +- packages/editor-ui/src/modules/ndv.ts | 170 ++++++++++++++++++ packages/editor-ui/src/modules/ui.ts | 149 +-------------- packages/editor-ui/src/plugins/i18n/index.ts | 2 +- packages/editor-ui/src/store.ts | 21 ++- packages/editor-ui/src/views/NodeView.vue | 10 +- 38 files changed, 331 insertions(+), 308 deletions(-) create mode 100644 packages/editor-ui/src/modules/ndv.ts diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index 1a10c0f4c8..f9baa2be45 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -856,7 +856,6 @@ export interface IRootState { activeWorkflows: string[]; activeActions: string[]; activeCredentialType: string | null; - activeNode: string | null; baseUrl: string; defaultLocale: string; endpointWebhook: string; @@ -936,42 +935,33 @@ export interface TargetItem { outputIndex: number; } -export interface IUiState { - sidebarMenuCollapsed: boolean; - modalStack: string[]; - modals: { - [key: string]: IModalState; - }; +export interface NDVState { + activeNodeName: string | null; mainPanelDimensions: {[key: string]: {[key: string]: number}}; - isPageLoading: boolean; - currentView: string; - ndv: { - sessionId: string; - input: { - displayMode: IRunDataDisplayMode; - nodeName?: string; - run?: number; - branch?: number; - data: { - isEmpty: boolean; - } - }; - output: { - branch?: number; - displayMode: IRunDataDisplayMode; - data: { - isEmpty: boolean; - } - editMode: { - enabled: boolean; - value: string; - }; - }; - focusedMappableInput: string; - mappingTelemetry: {[key: string]: string | number | boolean}; - hoveringItem: null | TargetItem; + sessionId: string; + input: { + displayMode: IRunDataDisplayMode; + nodeName?: string; + run?: number; + branch?: number; + data: { + isEmpty: boolean; + } }; - mainPanelPosition: number; + output: { + branch?: number; + displayMode: IRunDataDisplayMode; + data: { + isEmpty: boolean; + } + editMode: { + enabled: boolean; + value: string; + }; + }; + focusedMappableInput: string; + mappingTelemetry: {[key: string]: string | number | boolean}; + hoveringItem: null | TargetItem; draggable: { isDragging: boolean; type: string; @@ -979,6 +969,17 @@ export interface IUiState { canDrop: boolean; stickyPosition: null | XYPosition; }; +} + + +export interface IUiState { + sidebarMenuCollapsed: boolean; + modalStack: string[]; + modals: { + [key: string]: IModalState; + }; + isPageLoading: boolean; + currentView: string; fakeDoorFeatures: IFakeDoor[]; } diff --git a/packages/editor-ui/src/components/CodeEdit.vue b/packages/editor-ui/src/components/CodeEdit.vue index 41106a2010..30aba386fd 100644 --- a/packages/editor-ui/src/components/CodeEdit.vue +++ b/packages/editor-ui/src/components/CodeEdit.vue @@ -52,7 +52,7 @@ export default mixins( const executedWorkflow: IExecutionResponse | null = this.$store.getters.getWorkflowExecution; 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 nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || { sourceIndex: 0, diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts index 07abe60316..949b1ae83d 100644 --- a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts +++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts @@ -206,7 +206,7 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({ getInputNodeName() { try { - const activeNode = this.$store.getters.activeNode; + const activeNode = this.$store.getters['ndv/activeNode']; const workflow = this.getCurrentWorkflow(); const input = workflow.connectionsByDestinationNode[activeNode.name]; diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue index 0130248b02..69c943a724 100644 --- a/packages/editor-ui/src/components/CollectionParameter.vue +++ b/packages/editor-ui/src/components/CollectionParameter.vue @@ -95,7 +95,7 @@ export default mixins( }); }, node (): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, // Returns all the options which did not get added already parameterOptions (): Array { diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue index 61880466d6..8fd637d3ba 100644 --- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue +++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue @@ -195,7 +195,7 @@ export default mixins(restApi).extend({ }, documentationUrl(): string { 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; if (!type || !type.documentationUrl) { diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue index 4a52a9cde7..2619b6d323 100644 --- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue +++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue @@ -236,7 +236,7 @@ export default mixins(showMessage, nodeHelpers).extend({ this.$externalHooks().run('credentialsEdit.credentialModalOpened', { credentialType: this.credentialTypeName, isEditingCredential: this.mode === 'edit', - activeNode: this.$store.getters.activeNode, + activeNode: this.$store.getters['ndv/activeNode'], }); setTimeout(() => { @@ -561,7 +561,7 @@ export default mixins(showMessage, nodeHelpers).extend({ this.activeTab = tab; const tabName: string = tab.replaceAll('coming-soon/', ''); 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', { credential_type: credType, @@ -777,8 +777,8 @@ export default mixins(showMessage, nodeHelpers).extend({ trackProperties.is_valid = !!this.testedSuccessfully; } - if (this.$store.getters.activeNode) { - trackProperties.node_type = this.$store.getters.activeNode.type; + if (this.$store.getters['ndv/activeNode']) { + trackProperties.node_type = this.$store.getters['ndv/activeNode'].type; } if (this.authError && this.authError !== '') { diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue index fc63a92f2f..da82788e3f 100644 --- a/packages/editor-ui/src/components/Draggable.vue +++ b/packages/editor-ui/src/components/Draggable.vue @@ -67,10 +67,10 @@ export default Vue.extend({ }, computed: { canDrop(): boolean { - return this.$store.getters['ui/canDraggableDrop']; + return this.$store.getters['ndv/canDraggableDrop']; }, stickyPosition(): XYPosition | null { - return this.$store.getters['ui/draggableStickyPos']; + return this.$store.getters['ndv/draggableStickyPos']; }, }, methods: { @@ -111,7 +111,7 @@ export default Vue.extend({ this.isDragging = true; 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); document.body.style.cursor = 'grabbing'; @@ -141,7 +141,7 @@ export default Vue.extend({ this.$emit('dragend', this.draggingEl); this.isDragging = false; this.draggingEl = null; - this.$store.commit('ui/draggableStopDragging'); + this.$store.commit('ndv/draggableStopDragging'); }, 0); }, }, diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue index 72b49dd9c6..46c0bdcf52 100644 --- a/packages/editor-ui/src/components/DraggableTarget.vue +++ b/packages/editor-ui/src/components/DraggableTarget.vue @@ -38,10 +38,10 @@ export default Vue.extend({ }, computed: { isDragging(): boolean { - return this.$store.getters['ui/isDraggableDragging']; + return this.$store.getters['ndv/isDraggableDragging']; }, draggableType(): string { - return this.$store.getters['ui/draggableType']; + return this.$store.getters['ndv/draggableType']; }, droppable(): boolean { 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; 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) { if (this.activeDrop) { - const data = this.$store.getters['ui/draggableData']; + const data = this.$store.getters['ndv/draggableData']; this.$emit('drop', data); } }, }, watch: { activeDrop(active) { - this.$store.commit('ui/setDraggableCanDrop', active); + this.$store.commit('ndv/setDraggableCanDrop', active); }, }, }); diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue index 61acd95bcc..8819deba34 100644 --- a/packages/editor-ui/src/components/Error/NodeErrorView.vue +++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue @@ -126,7 +126,7 @@ export default mixins( return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE; }, parameters (): INodeProperties[] { - const node = this.$store.getters.activeNode; + const node = this.$store.getters['ndv/activeNode']; if (!node) { return []; } diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue index ebf90898bb..2e7b384dc8 100644 --- a/packages/editor-ui/src/components/ExpressionEdit.vue +++ b/packages/editor-ui/src/components/ExpressionEdit.vue @@ -120,11 +120,11 @@ export default mixins( node_name: string; } = { 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, is_immediate_input: false, variable_expression: eventData.variable, - node_name: this.$store.getters.activeNode.name, + node_name: this.$store.getters['ndv/activeNode'].name, }; if (eventData.variable) { @@ -144,7 +144,7 @@ export default mixins( const sourceNodeName = splitVar[0].split('"')[1]; trackProperties.node_type_source = this.$store.getters.getNodeByName(sourceNodeName).type; const nodeConnections: Array> = 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')) { trackProperties.parameter_name_source = splitVar[1].split('"')[1]; @@ -175,7 +175,7 @@ export default mixins( empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value, workflow_id: this.$store.getters.workflowId, source: this.eventSource, - session_id: this.$store.getters['ui/ndvSessionId'], + session_id: this.$store.getters['ndv/ndvSessionId'], has_parameter: this.value.includes('$parameter'), has_mapping: hasExpressionMapping(this.value), }; diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue index c516ed3ec6..388019f7cc 100644 --- a/packages/editor-ui/src/components/ImportCurlModal.vue +++ b/packages/editor-ui/src/components/ImportCurlModal.vue @@ -65,7 +65,7 @@ export default mixins(showMessage).extend({ }, computed: { node(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, }, methods: { diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue index 05cf6e22b5..8e2341a268 100644 --- a/packages/editor-ui/src/components/InputPanel.vue +++ b/packages/editor-ui/src/components/InputPanel.vue @@ -112,7 +112,7 @@ export default mixins( }, computed: { focusedMappableInput(): string { - return this.$store.getters['ui/focusedMappableInput']; + return this.$store.getters['ndv/focusedMappableInput']; }, isUserOnboarded(): boolean { return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true'; @@ -147,7 +147,7 @@ export default mixins( return this.workflow as Workflow; }, activeNode (): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, currentNode (): INodeUi | null { return this.$store.getters.getNodeByName(this.currentNodeName); diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue index da70f58d40..fea26c555f 100644 --- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue +++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue @@ -37,7 +37,7 @@ export default mixins( return this.$route.name === VIEWS.EXECUTION; }, activeNode (): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, hideMenuBar(): boolean { return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE); diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue index 83205a87c7..309deaf0dd 100644 --- a/packages/editor-ui/src/components/NDVDraggablePanels.vue +++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue @@ -121,7 +121,7 @@ export default mixins(debounceHelper).extend({ relativeLeft: number, relativeRight: number } { - return this.$store.getters['ui/mainPanelDimensions'](this.currentNodePaneType); + return this.$store.getters['ndv/mainPanelDimensions'](this.currentNodePaneType); }, supportedResizeDirections() { const supportedDirections = ['right']; @@ -244,7 +244,7 @@ export default mixins(debounceHelper).extend({ setMainPanelWidth(relativeWidth?: number) { const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]); - this.$store.commit('ui/setMainPanelDimensions', { + this.$store.commit('ndv/setMainPanelDimensions', { panelType: this.currentNodePaneType, dimensions: { relativeWidth: mainPanelRelativeWidth, @@ -260,7 +260,7 @@ export default mixins(debounceHelper).extend({ const isInputless = this.currentNodePaneType === 'inputless'; if(isMinLeft) { - this.$store.commit('ui/setMainPanelDimensions', { + this.$store.commit('ndv/setMainPanelDimensions', { panelType: this.currentNodePaneType, dimensions: { relativeLeft: this.minimumLeftPosition, @@ -271,7 +271,7 @@ export default mixins(debounceHelper).extend({ } if(isMaxRight) { - this.$store.commit('ui/setMainPanelDimensions', { + this.$store.commit('ndv/setMainPanelDimensions', { panelType: this.currentNodePaneType, dimensions: { relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition, @@ -281,7 +281,7 @@ export default mixins(debounceHelper).extend({ return; } - this.$store.commit('ui/setMainPanelDimensions', { + this.$store.commit('ndv/setMainPanelDimensions', { panelType: this.currentNodePaneType, dimensions: { relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft, diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index bc267b452c..6747ad90d7 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -442,7 +442,7 @@ export default mixins( }, setNodeActive () { - this.$store.commit('setActiveNode', this.data.name); + this.$store.commit('ndv/setActiveNodeName', this.data.name); this.pinDataDiscoveryTooltipVisible = false; }, touchStart () { diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index 6434720cd9..322059fbf8 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -177,7 +177,7 @@ export default mixins( }; }, mounted() { - this.$store.commit('ui/setNDVSessionId'); + this.$store.commit('ndv/setNDVSessionId'); dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => { this.pinDataDiscoveryTooltipVisible = isTooltipVisible; @@ -189,7 +189,7 @@ export default mixins( computed: { ...mapGetters(['executionWaitingForWebhook']), sessionId(): string { - return this.$store.getters['ui/ndvSessionId']; + return this.$store.getters['ndv/ndvSessionId']; }, workflowRunning(): boolean { return this.$store.getters.isActionActive('workflowRunning'); @@ -204,7 +204,7 @@ export default mixins( ); }, activeNode(): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, inputNodeName(): string | undefined { return this.selectedInput || this.parentNode; @@ -256,7 +256,7 @@ export default mixins( }, isActiveStickyNode(): boolean { 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 { @@ -339,7 +339,7 @@ export default mixins( return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`; }, outputPanelEditMode(): { enabled: boolean; value: string; } { - return this.$store.getters['ui/outputPanelEditMode']; + return this.$store.getters['ndv/outputPanelEditMode']; }, }, watch: { @@ -354,7 +354,7 @@ export default mixins( this.avgInputRowHeight = 0; setTimeout(() => { - this.$store.commit('ui/setNDVSessionId'); + this.$store.commit('ndv/setNDVSessionId'); }, 0); this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()), @@ -375,8 +375,8 @@ export default mixins( output_first_connector_runs: this.maxOutputRun, selected_view_inputs: this.isTriggerNode ? 'trigger' - : this.$store.getters['ui/inputPanelDisplayMode'], - selected_view_outputs: this.$store.getters['ui/outputPanelDisplayMode'], + : this.$store.getters['ndv/inputPanelDisplayMode'], + selected_view_outputs: this.$store.getters['ndv/outputPanelDisplayMode'], input_connectors: this.parentNodes.length, output_connectors: outogingConnections && outogingConnections.main && outogingConnections.main.length, @@ -401,12 +401,12 @@ export default mixins( }, inputNodeName(nodeName: string | undefined) { setTimeout(() => { - this.$store.commit('ui/setInputNodeName', nodeName); + this.$store.commit('ndv/setInputNodeName', nodeName); }, 0); }, inputRun() { setTimeout(() => { - this.$store.commit('ui/setInputRunIndex', this.inputRun); + this.$store.commit('ndv/setInputRunIndex', this.inputRun); }, 0); }, }, @@ -416,7 +416,7 @@ export default mixins( return; } if (e === null) { - this.$store.commit('ui/setHoveringItem', null); + this.$store.commit('ndv/setHoveringItem', null); return; } @@ -426,11 +426,11 @@ export default mixins( outputIndex: e.outputIndex, itemIndex: e.itemIndex, }; - this.$store.commit('ui/setHoveringItem', item); + this.$store.commit('ndv/setHoveringItem', item); }, onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) { if (e === null || !this.activeNode) { - this.$store.commit('ui/setHoveringItem', null); + this.$store.commit('ndv/setHoveringItem', null); return; } @@ -440,7 +440,7 @@ export default mixins( outputIndex: e.outputIndex, itemIndex: e.itemIndex, }; - this.$store.commit('ui/setHoveringItem', item); + this.$store.commit('ndv/setHoveringItem', item); }, onInputTableMounted(e: { avgRowHeight: number }) { this.avgInputRowHeight = e.avgRowHeight; @@ -449,7 +449,7 @@ export default mixins( this.avgOutputRowHeight = e.avgRowHeight; }, onWorkflowActivate() { - this.$store.commit('setActiveNode', null); + this.$store.commit('ndv/setActiveNodeName', null); setTimeout(() => { this.activateCurrentWorkflow('ndv'); }, 1000); @@ -558,7 +558,7 @@ export default mixins( 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'); @@ -568,8 +568,8 @@ export default mixins( workflow_id: this.$store.getters.workflowId, }); this.triggerWaitingWarningEnabled = false; - this.$store.commit('setActiveNode', null); - this.$store.commit('ui/resetNDVSessionId'); + this.$store.commit('ndv/setActiveNodeName', null); + this.$store.commit('ndv/resetNDVSessionId'); }, onRunOutputIndexChange(run: number) { this.runOutputIndex = run; diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue index c2771291bc..5701c2ec7e 100644 --- a/packages/editor-ui/src/components/NodeExecuteButton.vue +++ b/packages/editor-ui/src/components/NodeExecuteButton.vue @@ -111,7 +111,7 @@ export default mixins( } 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'); } diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index ab115c80ec..b5c242869d 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -198,7 +198,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({ }; }, node(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, parametersSetting(): INodeProperties[] { return this.parameters.filter((item) => { @@ -218,7 +218,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers).extend({ return this.nodeType.properties; }, outputPanelEditMode(): { enabled: boolean; value: string } { - return this.$store.getters['ui/outputPanelEditMode']; + return this.$store.getters['ndv/outputPanelEditMode']; }, isCommunityNode(): boolean { return isCommunityPackageName(this.node.type); diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue index df824ea7df..83eda6fd64 100644 --- a/packages/editor-ui/src/components/NodeSettingsTabs.vue +++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue @@ -27,7 +27,7 @@ export default mixins( }, computed: { activeNode(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, documentationUrl (): string { const nodeType = this.nodeType as INodeTypeDescription | null; diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue index 29782c5e98..96b0ab03dd 100644 --- a/packages/editor-ui/src/components/OutputPanel.vue +++ b/packages/editor-ui/src/components/OutputPanel.vue @@ -112,7 +112,7 @@ export default mixins( }, computed: { node(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, nodeType (): INodeTypeDescription | null { if (this.node) { @@ -202,7 +202,7 @@ export default mixins( return updatedAt > runAt; }, outputPanelEditMode(): { enabled: boolean; value: string; } { - return this.$store.getters['ui/outputPanelEditMode']; + return this.$store.getters['ndv/outputPanelEditMode']; }, canPinData(): boolean { return this.isPinDataNodeType && !this.isReadOnly; diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index ddbe77b00b..e6362d648d 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -497,7 +497,7 @@ export default mixins( } // 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 { const resolvedNodeParameters = this.resolveParameter(currentNodeParameters); @@ -512,7 +512,7 @@ export default mixins( } }, node (): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, displayTitle (): string { const interpolation = { interpolate: { shortPath: this.shortPath } }; @@ -782,7 +782,7 @@ export default mixins( // Get the resolved parameter values of the current node 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 loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined; const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined; @@ -826,7 +826,7 @@ export default mixins( parameter_field_type: this.parameter.type, new_expression: !this.isValueExpression, workflow_id: this.$store.getters.workflowId, - session_id: this.$store.getters['ui/ndvSessionId'], + session_id: this.$store.getters['ndv/ndvSessionId'], source: this.eventSource || 'ndv', }); } @@ -958,7 +958,7 @@ export default mixins( node_type: this.node && this.node.type, resource: this.node && this.node.parameters.resource, 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, }); } diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue index b5179e3e70..733b438940 100644 --- a/packages/editor-ui/src/components/ParameterInputFull.vue +++ b/packages/editor-ui/src/components/ParameterInputFull.vue @@ -121,7 +121,7 @@ export default mixins( }, computed: { node (): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, hint (): string | null { return this.$locale.nodeText().hint(this.parameter, this.path); @@ -136,10 +136,10 @@ export default mixins( return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true; }, isInputDataEmpty (): boolean { - return this.$store.getters['ui/getNDVDataIsEmpty']('input'); + return this.$store.getters['ndv/getNDVDataIsEmpty']('input'); }, displayMode(): IRunDataDisplayMode { - return this.$store.getters['ui/inputPanelDisplayMode']; + return this.$store.getters['ndv/inputPanelDisplayMode']; }, showMappingTooltip (): boolean { return this.focused && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'; @@ -149,13 +149,13 @@ export default mixins( onFocus() { this.focused = true; if (!this.parameter.noDataExpression) { - this.$store.commit('ui/setMappableNDVInputFocus', this.parameter.displayName); + this.$store.commit('ndv/setMappableNDVInputFocus', this.parameter.displayName); } }, onBlur() { this.focused = false; if (!this.parameter.noDataExpression) { - this.$store.commit('ui/setMappableNDVInputFocus', ''); + this.$store.commit('ndv/setMappableNDVInputFocus', ''); } }, onMenuExpanded(expanded: boolean) { @@ -232,7 +232,7 @@ export default mixins( 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_parameter: this.path, dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed', diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue index e13fbbdc2d..49c8173e70 100644 --- a/packages/editor-ui/src/components/ParameterInputList.vue +++ b/packages/editor-ui/src/components/ParameterInputList.vue @@ -157,7 +157,7 @@ export default mixins( return this.filteredParameters.map(parameter => parameter.name); }, node (): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, indexToShowSlotAt (): number { let index = 0; @@ -320,7 +320,7 @@ export default mixins( if (!newValue.includes(parameter)) { const parameterData = { name: `${this.path}.${parameter}`, - node: this.$store.getters.activeNode.name, + node: this.$store.getters['ndv/activeNode'].name, value: undefined, }; this.$emit('valueChanged', parameterData); diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue index 4074af45cc..0ec3ea7014 100644 --- a/packages/editor-ui/src/components/ParameterInputWrapper.vue +++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue @@ -104,7 +104,7 @@ export default mixins( return isValueExpression(this.parameter, this.value); }, activeNode(): INodeUi | null { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, selectedRLMode(): INodePropertyMode | undefined { if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) { @@ -129,17 +129,17 @@ export default mixins( return this.hint; }, targetItem(): TargetItem | null { - return this.$store.getters['ui/hoveringItem']; + return this.$store.getters['ndv/hoveringItem']; }, 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; if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') { return null; } - const inputRunIndex: number | undefined = this.$store.getters['ui/ndvInputRunIndex']; - const inputBranchIndex: number | undefined = this.$store.getters['ui/ndvInputBranchIndex']; + const inputRunIndex: number | undefined = this.$store.getters['ndv/ndvInputRunIndex']; + const inputBranchIndex: number | undefined = this.$store.getters['ndv/ndvInputBranchIndex']; let computedValue: NodeParameterValue; try { @@ -160,7 +160,7 @@ export default mixins( }, expressionOutput(): string | null { 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)) { return this.expressionValueComputed; } diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index bd6511e627..e86429c09d 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue @@ -279,7 +279,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({ return this.selectedMode === 'list'; }, hasCredential(): boolean { - const node = this.$store.getters.activeNode as INodeUi | null; + const node = this.$store.getters['ndv/activeNode'] as INodeUi | null; if (!node) { return false; } @@ -440,7 +440,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({ }, setWidthOnMainPanelResize(mutation: { type: string }) { // 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) { if (this.selectedMode === 'list' && entity) { @@ -479,7 +479,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({ return parameter.typeOptions[argumentName]; }, 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) { return; } diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 731eb55237..292df910ed 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -145,7 +145,7 @@ :value="editMode.value" :options="{ scrollBeyondLastLine: false }" type="json" - @input="$store.commit('ui/setOutputPanelEditModeValue', $event)" + @input="$store.commit('ndv/setOutputPanelEditModeValue', $event)" />
@@ -470,7 +470,7 @@ export default mixins( this.showPinDataDiscoveryTooltip(this.jsonData); } } - this.$store.commit('ui/setNDVBranchIndex', { + this.$store.commit('ndv/setNDVBranchIndex', { pane: this.paneType, branchIndex: this.currentOutputIndex, }); @@ -482,7 +482,7 @@ export default mixins( }, computed: { activeNode(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, dataPinningDocsUrl(): string { return DATA_PINNING_DOCS_URL; @@ -491,7 +491,7 @@ export default mixins( return DATA_EDITING_DOCS_URL; }, displayMode(): IRunDataDisplayMode { - return this.$store.getters['ui/getPanelDisplayMode'](this.paneType); + return this.$store.getters['ndv/getPanelDisplayMode'](this.paneType); }, node(): INodeUi | null { return (this.nodeUi as INodeUi | null) || null; @@ -675,7 +675,7 @@ export default mixins( editMode(): { enabled: boolean; value: string; } { return this.isPaneTypeInput ? { enabled: false, value: '' } - : this.$store.getters['ui/outputPanelEditMode']; + : this.$store.getters['ndv/outputPanelEditMode']; }, isPaneTypeInput(): boolean { return this.paneType === 'input'; @@ -737,8 +737,8 @@ export default mixins( ? inputData : TEST_PIN_DATA; - this.$store.commit('ui/setOutputPanelEditModeEnabled', true); - this.$store.commit('ui/setOutputPanelEditModeValue', JSON.stringify(data, null, 2)); + this.$store.commit('ndv/setOutputPanelEditModeEnabled', true); + this.$store.commit('ndv/setOutputPanelEditModeValue', JSON.stringify(data, null, 2)); this.$telemetry.track('User opened ndv edit state', { node_type: this.activeNode.type, @@ -751,8 +751,8 @@ export default mixins( }); }, onClickCancelEdit() { - this.$store.commit('ui/setOutputPanelEditModeEnabled', false); - this.$store.commit('ui/setOutputPanelEditModeValue', ''); + this.$store.commit('ndv/setOutputPanelEditModeEnabled', false); + this.$store.commit('ndv/setOutputPanelEditModeValue', ''); this.onExitEditMode({ type: 'cancel' }); }, onClickSaveEdit() { @@ -770,7 +770,7 @@ export default mixins( return; } - this.$store.commit('ui/setOutputPanelEditModeEnabled', false); + this.$store.commit('ndv/setOutputPanelEditModeEnabled', false); this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) }); this.onDataPinningSuccess({ source: 'save-edit' }); @@ -935,7 +935,7 @@ export default mixins( }, onDisplayModeChange(displayMode: IRunDataDisplayMode) { 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; if (dataContainer) { @@ -1007,10 +1007,10 @@ export default mixins( this.refreshDataSize(); this.closeBinaryDataDisplay(); 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') { - this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'table'}); + this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'table'}); } }, closeBinaryDataDisplay () { @@ -1096,7 +1096,7 @@ export default mixins( }, goToErroredNode() { 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:{ handler(data: INodeExecutionData[]) { 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, @@ -1130,7 +1130,7 @@ export default mixins( } }, currentOutputIndex(branchIndex: number) { - this.$store.commit('ui/setNDVBranchIndex', { + this.$store.commit('ndv/setNDVBranchIndex', { pane: this.paneType, branchIndex, }); diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue index b654a4a110..3472f9206c 100644 --- a/packages/editor-ui/src/components/RunDataJson.vue +++ b/packages/editor-ui/src/components/RunDataJson.vue @@ -165,13 +165,13 @@ export default mixins(externalHooks).extend({ this.draggingPath = el.dataset.path; } - this.$store.commit('ui/resetMappingTelemetry'); + this.$store.commit('ndv/resetMappingTelemetry'); }, onDragEnd(el: HTMLElement) { this.draggingPath = null; setTimeout(() => { - const mappingTelemetry = this.$store.getters['ui/mappingTelemetry']; + const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry']; const telemetryPayload = { src_node_type: this.node.type, src_field_name: el.dataset.name || '', diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue index e160cb25e5..1cd7ca27d9 100644 --- a/packages/editor-ui/src/components/RunDataJsonActions.vue +++ b/packages/editor-ui/src/components/RunDataJsonActions.vue @@ -84,7 +84,7 @@ export default mixins( }, computed: { activeNode(): INodeUi { - return this.$store.getters.activeNode; + return this.$store.getters['ndv/activeNode']; }, normalisedJsonPath(): string { const isNotSelected = this.selectedJsonPath === nonExistingJsonPath; diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue index 6a529cc352..36c74bdd63 100644 --- a/packages/editor-ui/src/components/RunDataTable.vue +++ b/packages/editor-ui/src/components/RunDataTable.vue @@ -140,7 +140,7 @@