refactor(editor): Move nodeTypes into store module (#3799)

* ⚡ Refactor `nodeTypes` into store module * ⚡ Fix condition * 🔥 Remove leftovers * ⚡ Move `getNodeTranslationHeaders`, `getNodesInformation`, `getNodeParameterOptions` * ⚡ Move leftover call * ⚡ Correct excess prefix * 🚚 Rename `nodeType` to `getNodeType` * 🚚 Move logic to `getFullNodesProperties` * ⚡ Simplify `getNodeType` * ⚡ Refactor `nodeTypes` mutations * ⚡ Refactor `Vue.set` call * ⚡ Simplify check * 🚚 Move export to bottom * 📘 Simplify typing * 🔥 Remove unused interface * 👕 Add `void` * 🚚 Fix naming * 🔥 Remove logging * ⚡ Simplify `updateNodeTypes` * 🚚 Move `omit` to utils * 🐛 Update `rootGetters` call * 🐛 Fix `allNodeTypes` call in `nativelyNumberSuffixedDefaults` * 🔥 Remove unused method * 🔥 Remove excess namespace Co-authored-by: Mutasem <[email protected]>
n8n-io · Aug 5, 2022 · f535ffc · f535ffc
1 parent 0b61e61
commit f535ffc
Show file tree

Hide file tree

Showing 29 changed files with 244 additions and 140 deletions.
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
@@ -160,8 +160,7 @@ export default mixins(
 		this.$externalHooks().run('app.mount');
 
 		if (this.defaultLocale !== 'en') {
-			const headers = await this.restApi().getNodeTranslationHeaders();
-			if (headers) addHeaders(headers, this.defaultLocale);
+			void this.$store.dispatch('nodeTypes/getNodeTranslationHeaders');
 		}
 	},
 	watch: {

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
@@ -173,10 +173,6 @@ export interface IRestApi {
 	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
 	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
 	getCredentialTranslation(credentialType: string): Promise<object>;
-	getNodeTranslationHeaders(): Promise<INodeTranslationHeaders>;
-	getNodeTypes(onlyLatest?: boolean): Promise<INodeTypeDescription[]>;
-	getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<INodeTypeDescription[]>;
-	getNodeParameterOptions(sendData: { nodeTypeAndVersion: INodeTypeNameVersion, path: string, methodName?: string, loadOptions?: ILoadOptions, currentNodeParameters: INodeParameters, credentials?: INodeCredentials }): Promise<INodePropertyOptions[]> ;
 	removeTestWebhook(workflowId: string): Promise<boolean>;
 	runWorkflow(runData: IStartRunData): Promise<IExecutionPushResponse>;
 	createNewWorkflow(sendData: IWorkflowDataUpdate): Promise<IWorkflowDb>;
@@ -853,7 +849,6 @@ export interface IRootState {
 	lastSelectedNode: string | null;
 	lastSelectedNodeOutputIndex: number | null;
 	nodeIndex: Array<string | null>;
-	nodeTypes: INodeTypeDescription[];
 	nodeViewOffsetPosition: XYPosition;
 	nodeViewMoveInProgress: boolean;
 	selectedNodes: INodeUi[];
@@ -959,6 +954,10 @@ export interface ISettingsState {
 	onboardingCallPromptEnabled: boolean;
 }
 
+export interface INodeTypesState {
+	nodeTypes: { [nodeType: string]: INodeTypeDescription };
+}
+
 export interface ITemplateState {
 	categories: {[id: string]: ITemplatesCategory};
 	collections: {[id: string]: ITemplatesCollection};

diff --git a/packages/editor-ui/src/api/nodeTypes.ts b/packages/editor-ui/src/api/nodeTypes.ts
@@ -0,0 +1,47 @@
+import { makeRestApiRequest } from './helpers';
+import type {
+	INodeTranslationHeaders,
+	IRestApiContext,
+} from '@/Interface';
+import type {
+	ILoadOptions,
+	INodeCredentials,
+	INodeParameters,
+	INodePropertyOptions,
+	INodeTypeDescription,
+	INodeTypeNameVersion,
+} from 'n8n-workflow';
+
+export async function getNodeTypes(
+	context: IRestApiContext,
+	{ onlyLatest } = { onlyLatest: false },
+) {
+	return makeRestApiRequest(context, 'GET', '/node-types', { onlyLatest });
+}
+
+export async function getNodeTranslationHeaders(
+	context: IRestApiContext,
+): Promise<INodeTranslationHeaders | undefined> {
+	return makeRestApiRequest(context, 'GET', '/node-translation-headers');
+}
+
+export async function getNodesInformation(
+	context: IRestApiContext,
+	nodeInfos: INodeTypeNameVersion[],
+): Promise<INodeTypeDescription[]> {
+	return makeRestApiRequest(context, 'POST', '/node-types', { nodeInfos });
+}
+
+export async function getNodeParameterOptions(
+	context: IRestApiContext,
+	sendData: {
+		nodeTypeAndVersion: INodeTypeNameVersion,
+		path: string,
+		methodName?: string,
+		loadOptions?: ILoadOptions,
+		currentNodeParameters: INodeParameters,
+		credentials?: INodeCredentials,
+	},
+): Promise<INodePropertyOptions[]> {
+	return makeRestApiRequest(context, 'GET', '/node-parameter-options', sendData);
+}
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
@@ -80,7 +80,7 @@ export default Vue.extend({
 
 			const trigger = foundTriggers[0];
 
-			const triggerNodeType = this.$store.getters.nodeType(trigger.type, trigger.typeVersion) as INodeTypeDescription;
+			const triggerNodeType = this.$store.getters['nodeTypes/getNodeType'](trigger.type, trigger.typeVersion) as INodeTypeDescription;
 			if (triggerNodeType.activationMessage) {
 				return triggerNodeType.activationMessage;
 			}

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -193,16 +193,6 @@ export default mixins(restApi).extend({
 		},
 	},
 	methods: {
-		/**
-		 * Get the current version for a node type.
-		 */
-		async getCurrentNodeVersion(targetNodeType: string) {
-			const { allNodeTypes }: { allNodeTypes: INodeTypeDescription[] } = this.$store.getters;
-			const found = allNodeTypes.find(nodeType => nodeType.name === targetNodeType);
-
-			return found ? found.version : 1;
-		},
-
 		onDataChange (event: { name: string; value: string | number | boolean | Date | null }): void {
 			this.$emit('change', event);
 		},

diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 			if (this.credentialWithIcon && this.credentialWithIcon.icon && this.credentialWithIcon.icon.startsWith('node:')) {
 				const nodeType = this.credentialWithIcon.icon.replace('node:', '');
 
-				return this.$store.getters.nodeType(nodeType);
+				return this.$store.getters['nodeTypes/getNodeType'](nodeType);
 			}
 
 			const nodesWithAccess = this.$store.getters['credentials/getNodesWithAccess'](this.credentialTypeName);

diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -129,7 +129,7 @@ export default mixins(
 			if (!node) {
 				return [];
 			}
-			const nodeType = this.$store.getters.nodeType(node.type, node.typeVersion);
+			const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
 
 			if (nodeType === null) {
 				return [];

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
@@ -172,7 +172,7 @@ export default mixins(
 		},
 		isSingleActiveTriggerNode (): boolean {
 			const nodes = this.$store.getters.workflowTriggerNodes.filter((node: INodeUi) => {
-				const nodeType =  this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
+				const nodeType =  this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
 				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
 			});
 
@@ -188,7 +188,7 @@ export default mixins(
 			return this.node && this.node.disabled;
 		},
 		nodeType (): INodeTypeDescription | null {
-			return this.data && this.$store.getters.nodeType(this.data.type, this.data.typeVersion);
+			return this.data && this.$store.getters['nodeTypes/getNodeType'](this.data.type, this.data.typeVersion);
 		},
 		node (): INodeUi | undefined { // same as this.data but reactive..
 			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;

diff --git a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
@@ -50,7 +50,7 @@ export default Vue.extend({
 	computed: {
 		...mapGetters('users', ['personalizedNodeTypes']),
 		nodeTypes(): INodeTypeDescription[] {
-			return this.$store.getters.allNodeTypes;
+			return this.$store.getters['nodeTypes/allNodeTypes'];
 		},
 		visibleNodeTypes(): INodeTypeDescription[] {
 			return this.allNodeTypes

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -117,7 +117,7 @@ export default mixins(
 
 			if (credType) return [credType];
 
-			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
+			const activeNodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (activeNodeType && activeNodeType.credentials) {
 				return activeNodeType.credentials;
 			}

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -209,7 +209,7 @@ export default mixins(
 		},
 		activeNodeType(): INodeTypeDescription | null {
 			if (this.activeNode) {
-				return this.$store.getters.nodeType(this.activeNode.type, this.activeNode.typeVersion);
+				return this.$store.getters['nodeTypes/getNodeType'](this.activeNode.type, this.activeNode.typeVersion);
 			}
 			return null;
 		},

diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -59,7 +59,7 @@ export default mixins(
 		},
 		nodeType (): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
@@ -146,7 +146,7 @@ export default mixins(
 		computed: {
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
-					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+					return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
 				}
 
 				return null;
@@ -446,7 +446,7 @@ export default mixins(
 				} else if (parameterData.name.startsWith('parameters.')) {
 					// A node parameter changed
 
-					const nodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
+					const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
 					if (!nodeType) {
 						return;
 					}

diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
@@ -114,7 +114,7 @@ export default mixins(
 		},
 		nodeType (): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
@@ -738,7 +738,20 @@ export default mixins(
 					const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
 					const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
 
-					const options = await this.restApi().getNodeParameterOptions({ nodeTypeAndVersion: { name: this.node.type, version: this.node.typeVersion}, path: this.path, methodName: loadOptionsMethod, loadOptions, currentNodeParameters: resolvedNodeParameters, credentials: this.node.credentials });
+					const options = await this.$store.dispatch('nodeTypes/getNodeParameterOptions',
+						{
+							nodeTypeAndVersion: {
+								name: this.node.type,
+								version: this.node.typeVersion,
+							},
+							path: this.path,
+							methodName: loadOptionsMethod,
+							loadOptions,
+							currentNodeParameters: resolvedNodeParameters,
+							credentials: this.node.credentials,
+						},
+					);
+
 					this.remoteParameterOptions.push.apply(this.remoteParameterOptions, options);
 				} catch (error) {
 					this.remoteParameterOptionsLoadingIssues = error.message;

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -153,7 +153,7 @@ export default mixins(
 		methods: {
 			getCredentialsDependencies() {
 				const dependencies = new Set();
-				const nodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion) as INodeTypeDescription | undefined;
+				const nodeType = this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion) as INodeTypeDescription | undefined;
 
 				// Get names of all fields that credentials rendering depends on (using displayOptions > show)
 				if(nodeType && nodeType.credentials) {

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
@@ -507,7 +507,7 @@ export default mixins(
 			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
-					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+					return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
 				}
 				return null;
 			},

diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
@@ -81,7 +81,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
 		},
 		nodeType (): INodeTypeDescription | null {
-			return this.data && this.$store.getters.nodeType(this.data.type, this.data.typeVersion);
+			return this.data && this.$store.getters['nodeTypes/getNodeType'](this.data.type, this.data.typeVersion);
 		},
 		node (): INodeUi | undefined { // same as this.data but reactive..
 			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;

diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -125,7 +125,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 		},
 		nodeType(): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
 			}
 
 			return null;

diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -287,10 +287,10 @@ export const nodeBase = mixins(
 			});
 		},
 		__addNode (node: INodeUi) {
-			let nodeTypeData = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
+			let nodeTypeData = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (!nodeTypeData) {
 				// If node type is not know use by default the base.noOp data to display it
-				nodeTypeData = this.$store.getters.nodeType(NO_OP_NODE_TYPE) as INodeTypeDescription;
+				nodeTypeData = this.$store.getters['nodeTypes/getNodeType'](NO_OP_NODE_TYPE) as INodeTypeDescription;
 			}
 
 			this.__addInputEndpoints(node, nodeTypeData);

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -190,7 +190,7 @@ export const nodeHelpers = mixins(
 			// Updates the parameter-issues of the node
 			updateNodeParameterIssues(node: INodeUi, nodeType?: INodeTypeDescription): void {
 				if (nodeType === undefined) {
-					nodeType = this.$store.getters.nodeType(node.type, node.typeVersion);
+					nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
 				}
 
 				if (nodeType === null) {
@@ -221,7 +221,7 @@ export const nodeHelpers = mixins(
 				}
 
 				if (nodeType === undefined) {
-					nodeType = this.$store.getters.nodeType(node.type, node.typeVersion);
+					nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
 				}
 
 				if (nodeType === null || nodeType!.credentials === undefined) {

diff --git a/packages/editor-ui/src/components/mixins/pushConnection.ts b/packages/editor-ui/src/components/mixins/pushConnection.ts
@@ -272,7 +272,7 @@ export const pushConnection = mixins(
 						const execution = this.$store.getters.getWorkflowExecution;
 						if (execution && execution.executedNode) {
 							const node = this.$store.getters.getNodeByName(execution.executedNode);
-							const nodeType = node && this.$store.getters.nodeType(node.type, node.typeVersion);
+							const nodeType = node && this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
 							const nodeOutput = execution && execution.executedNode && execution.data && execution.data.resultData && execution.data.resultData.runData && execution.data.resultData.runData[execution.executedNode];
 							if (node && nodeType && !nodeOutput) {
 								this.$showMessage({
@@ -370,19 +370,7 @@ export const pushConnection = mixins(
 
 					this.processWaitingPushMessages();
 				} else if (receivedData.type === 'reloadNodeType') {
-					const pushData = receivedData.data;
-
-					const nodesToBeFetched: INodeTypeNameVersion[] = [pushData];
-
-					// Force reload of all credential types
-					this.$store.dispatch('credentials/fetchCredentialTypes', true)
-						.then(() => {
-							// Get the data of the node and update in internal storage
-							return this.restApi().getNodesInformation(nodesToBeFetched);
-						})
-						.then((nodesInfo) => {
-							this.$store.commit('updateNodeTypes', nodesInfo);
-						});
+					this.$store.dispatch('nodeTypes/getFullNodesProperties', [receivedData.data]);
 				} else if (receivedData.type === 'removeNodeType') {
 					const pushData = receivedData.data;
 
@@ -391,7 +379,7 @@ export const pushConnection = mixins(
 					// Force reload of all credential types
 					this.$store.dispatch('credentials/fetchCredentialTypes')
 						.then(() => {
-							this.$store.commit('removeNodeTypes', nodesToBeRemoved);
+							this.$store.commit('nodeTypes/removeNodeTypes', nodesToBeRemoved);
 						});
 				}
 				return true;

diff --git a/packages/editor-ui/src/components/mixins/restApi.ts b/packages/editor-ui/src/components/mixins/restApi.ts
@@ -84,24 +84,6 @@ export const restApi = Vue.extend({
 					return self.restApi().makeRestApiRequest('GET', '/credential-translation', { credentialType });
 				},
 
-				getNodeTranslationHeaders: (): Promise<INodeTranslationHeaders> => {
-					return self.restApi().makeRestApiRequest('GET', '/node-translation-headers');
-				},
-
-				// Returns all node-types
-				getNodeTypes: (onlyLatest = false): Promise<INodeTypeDescription[]> => {
-					return self.restApi().makeRestApiRequest('GET', `/node-types`, {onlyLatest});
-				},
-
-				getNodesInformation: (nodeInfos: INodeTypeNameVersion[]): Promise<INodeTypeDescription[]> => {
-					return self.restApi().makeRestApiRequest('POST', `/node-types`, {nodeInfos});
-				},
-
-				// Returns all the parameter options from the server
-				getNodeParameterOptions: (sendData: { nodeTypeAndVersion: INodeTypeNameVersion, path: string, methodName?: string, loadOptions?: ILoadOptions, currentNodeParameters: INodeParameters, credentials?: INodeCredentials }): Promise<INodePropertyOptions[]> => {
-					return self.restApi().makeRestApiRequest('GET', '/node-parameter-options', sendData);
-				},
-
 				// Removes a test webhook
 				removeTestWebhook: (workflowId: string): Promise<boolean> => {
 					return self.restApi().makeRestApiRequest('DELETE', `/test-webhook/${workflowId}`);

diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -188,7 +188,7 @@ export const workflowHelpers = mixins(
 
 				const returnData: INodeTypesMaxCount = {};
 
-				const nodeTypes = this.$store.getters.allNodeTypes;
+				const nodeTypes = this.$store.getters['nodeTypes/allNodeTypes'];
 				for (const nodeType of nodeTypes) {
 					if (nodeType.maxNodes !== undefined) {
 						returnData[nodeType.name] = {
@@ -298,7 +298,7 @@ export const workflowHelpers = mixins(
 						return [];
 					},
 					getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
-						const nodeTypeDescription = this.$store.getters.nodeType(nodeType, version) as INodeTypeDescription | null;
+						const nodeTypeDescription = this.$store.getters['nodeTypes/getNodeType'](nodeType, version) as INodeTypeDescription | null;
 
 						if (nodeTypeDescription === null) {
 							return undefined;
@@ -406,7 +406,7 @@ export const workflowHelpers = mixins(
 
 				// Get the data of the node type that we can get the default values
 				// TODO: Later also has to care about the node-type-version as defaults could be different
-				const nodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
+				const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
 
 				if (nodeType !== null) {
 					// Node-Type is known so we can save the parameters correctly