refactor(editor): Migrate part of the vuex store to pinia (#4484)

* ✨ Added pinia support. Migrated community nodes module.
* ✨ Added ui pinia store, moved some data from root store to it, updated modals to work with pinia stores
* ✨ Added ui pinia store and migrated a part of the root store
* ✨ Migrated `settings` store to pinia
* ✨ Removing vuex store refs from router
* ✨ Migrated `users` module to pinia store
* ⚡ Fixing errors after sync with master
* ⚡ One more error after merge
* ⚡ Created `workflows` pinia store. Moved large part of root store to it. Started updating references.
* ✨ Finished migrating workflows store to pinia
* ⚡ Renaming some getters and actions to make more sense
* ✨ Finished migrating the root store to pinia
* ✨ Migrated ndv store to pinia
* ⚡ Renaming main panel dimensions getter so it doesn't clash with data prop name
* ✔️ Fixing lint errors
* ✨ Migrated `templates` store to pinia
* ✨ Migrated the `nodeTypes`store
* ⚡ Removed unused pieces of code and oold vuex modules
* ✨ Adding vuex calls to pinia store, fi	xing wrong references
* 💄 Removing leftover $store refs
* ⚡ Added legacy getters and mutations to store to support webhooks
* ⚡ Added missing front-end hooks, updated vuex state subscriptions to pinia
* ✔️ Fixing linting errors
* ⚡ Removing vue composition api plugin
* ⚡ Fixing main sidebar state when loading node view
* 🐛 Fixing an error when activating workflows
* 🐛 Fixing isses with workflow settings and executions auto-refresh
* 🐛 Removing duplicate listeners which cause import error
* 🐛 Fixing route authentication
* ⚡ Updating freshly pulled $store refs
* Adding deleted const
* ⚡ Updating store references in ee features. Reseting NodeView credentials update flag when resetting workspace
* ⚡ Adding return type to email submission modal
* ⚡ Making NodeView only react to paste event when active
* 🐛 Fixing signup view errors
* 👌 Addressing PR review comments
* 👌 Addressing new PR comments
* 👌 Updating invite id logic in signup view

packages/editor-ui/src/components/ParameterInput.vue

@@ -339,6 +339,10 @@ import { mapGetters } from 'vuex';
 import { CODE_NODE_TYPE } from '@/constants';
 import { PropType } from 'vue';
 import { debounceHelper } from './mixins/debounce';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	externalHooks,
@@ -472,6 +476,11 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+				useWorkflowsStore,
+			),
 			...mapGetters('credentials', ['allCredentialTypes']),
 			expressionDisplayValue(): string {
 				if (this.activeDrop || this.forceShowExpression) {
@@ -499,7 +508,7 @@ export default mixins(
 				}
 
 				// Get the resolved parameter values of the current node
-				const currentNodeParameters = this.$store.getters['ndv/activeNode'].parameters;
+				const currentNodeParameters = this.ndvStore.activeNode?.parameters;
 				try {
 					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
 
@@ -514,7 +523,7 @@ export default mixins(
 				}
 			},
 			node (): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			displayTitle (): string {
 				const interpolation = { interpolate: { shortPath: this.shortPath } };
@@ -742,12 +751,14 @@ export default mixins(
 			},
 			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
 				// Update the values on the node
-				this.$store.commit('updateNodeProperties', updateInformation);
+				this.workflowsStore.updateNodeProperties(updateInformation);
 
-				const node = this.$store.getters.getNodeByName(updateInformation.name);
+				const node = this.workflowsStore.getNodeByName(updateInformation.name);
 
-				// Update the issues
-				this.updateNodeCredentialIssues(node);
+				if (node) {
+					// Update the issues
+					this.updateNodeCredentialIssues(node);
+				}
 
 				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 			},
@@ -784,12 +795,12 @@ export default mixins(
 				// Get the resolved parameter values of the current node
 
 				try {
-					const currentNodeParameters = (this.$store.getters['ndv/activeNode'] as INodeUi).parameters;
+					const currentNodeParameters = (this.ndvStore.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;
 
-					const options = await this.$store.dispatch('nodeTypes/getNodeParameterOptions',
+					const options = await this.nodeTypesStore.getNodeParameterOptions(
 						{
 							nodeTypeAndVersion: {
 								name: this.node.type,
@@ -827,8 +838,8 @@ export default mixins(
 						parameter_name: this.parameter.displayName,
 						parameter_field_type: this.parameter.type,
 						new_expression: !this.isValueExpression,
-						workflow_id: this.$store.getters.workflowId,
-						session_id: this.$store.getters['ndv/ndvSessionId'],
+						workflow_id: this.workflowsStore.workflowId,
+						session_id: this.ndvStore.sessionId,
 						source: this.eventSource || 'ndv',
 					});
 				}
@@ -956,11 +967,11 @@ export default mixins(
 
 				if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
 					this.$telemetry.track('User set node operation or mode', {
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						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['ndv/ndvSessionId'],
+						session_id: this.ndvStore.sessionId,
 						parameter: this.parameter.name,
 					});
 				}