refactor(editor): Finish pinia migration, remove all vuex dependancies (#4533)

* ✨ 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, fixing 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
* ✨ Started migrating the `credentials` module to pinia
* 👌 Addressing PR review comments
* ✨ Migrated permissions module to pinia
* ✨ Migrated `nodeCreator`, `tags` and `versions` modules to pinia
* ✨ Implemented webhooks pinia store
* ⚡ Removing all leftover vuex files and references
* ✨ Removing final vuex refs
* ⚡ Updating expected credentialId type
* ⚡ Removing node credentials subscription code, reducing node click debounce timeout
* 🐛 Fixing pushing nodes downstream when inserting new node
* ✔️ Fixing a lint error in new type guard
* ⚡ Updating helper reference
* ✔️ Removing unnecessary awaits
* ⚡ fix(editor): remove unnecessary imports from NDV
* ⚡ Merging mapStores blocks in NodeView
* ⚡ fix(editor): make sure JS Plumb not loaded earlier than needed
* ⚡ Updating type guard nad credentials subscriptions
* ⚡ Updating type guard so it doesn't use `any` type

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/editor-ui/src/views/NodeView.vue

@@ -128,9 +128,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { mapStores } from 'pinia';
-import {
-	OnConnectionBindInfo, Connection, Endpoint, N8nPlusEndpoint, jsPlumbInstance,
-} from 'jsplumb';
+import type { OnConnectionBindInfo, Connection, Endpoint, N8nPlusEndpoint, jsPlumbInstance } from 'jsplumb';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import once from 'lodash/once';
 
@@ -213,8 +211,8 @@ import {
 	IUser,
 	INodeUpdatePropertiesInformation,
 } from '@/Interface';
-import { getAccountAge } from '@/modules/userHelpers';
-import { dataPinningEventBus } from "@/event-bus/data-pinning-event-bus";
+
+import { getAccountAge } from '@/stores/userHelpers';
 import { debounceHelper } from '@/components/mixins/debounce';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
@@ -226,6 +224,10 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 import { useTemplatesStore } from '@/stores/templates';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useCredentialsStore } from '@/stores/credentials';
+import { useTagsStore } from '@/stores/tags';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { useCanvasStore } from '@/stores/canvas';
 
 interface AddNodeOptions {
@@ -379,6 +381,10 @@ export default mixins(
 		},
 		computed: {
 			...mapStores(
+				useCanvasStore,
+				useTagsStore,
+				useCredentialsStore,
+				useNodeCreatorStore,
 				useNodeTypesStore,
 				useNDVStore,
 				useRootStore,
@@ -497,7 +503,6 @@ export default mixins(
 			getNodeViewOffsetPosition(): XYPosition {
 				return this.uiStore.nodeViewOffsetPosition;
 			},
-			...mapStores(useCanvasStore),
 			nodeViewScale(): number {
 				return this.canvasStore.nodeViewScale;
 			},
@@ -662,10 +667,10 @@ export default mixins(
 			},
 			showTriggerCreator(source: string) {
 				if(this.createNodeActive) return;
-				this.$store.commit('nodeCreator/setSelectedType', TRIGGER_NODE_FILTER);
-				this.$store.commit('nodeCreator/setShowScrim', true);
+				this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
+				this.nodeCreatorStore.showScrim = true;
 				this.onToggleNodeCreator({ source, createNodeActive: true });
-				this.$nextTick(() => this.$store.commit('nodeCreator/setShowTabs', false));
+				this.nodeCreatorStore.showTabs = false;
 			},
 			async openExecution(executionId: string) {
 				this.startLoading();
@@ -832,7 +837,7 @@ export default mixins(
 				const tags = (data.tags || []) as ITag[];
 				const tagIds = tags.map((tag) => tag.id);
 				this.workflowsStore.setWorkflowTagIds(tagIds || []);
-				this.$store.commit('tags/upsertTags', tags);
+				this.tagsStore.upsertTags(tags);
 
 				await this.addNodes(data.nodes, data.connections);
 
@@ -1149,6 +1154,7 @@ export default mixins(
 				const childNodes = workflow.getChildNodes(sourceNodeName);
 				for (const nodeName of childNodes) {
 					const node = this.workflowsStore.nodesByName[nodeName] as INodeUi;
+
 					if (node.position[0] < sourceNode.position[0]) {
 						continue;
 					}
@@ -1156,7 +1162,7 @@ export default mixins(
 					const updateInformation: INodeUpdatePropertiesInformation = {
 						name: nodeName,
 						properties: {
-							position: { position: [node.position[0] + margin, node.position[1]] },
+							position: [node.position[0] + margin, node.position[1]],
 						},
 					};
 
@@ -1413,7 +1419,7 @@ export default mixins(
 
 					const tagsEnabled = this.settingsStore.areTagsEnabled;
 					if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
-						const allTags: ITag[] = await this.$store.dispatch('tags/fetchAll');
+						const allTags = await this.tagsStore.fetchAll();
 						const tagNames = new Set(allTags.map((tag) => tag.name));
 
 						const workflowTags = workflowData.tags as ITag[];
@@ -1421,7 +1427,7 @@ export default mixins(
 
 						const creatingTagPromises: Array<Promise<ITag>> = [];
 						for (const tag of notFound) {
-							const creationPromise = this.$store.dispatch('tags/create', tag.name)
+							const creationPromise = this.tagsStore.create(tag.name)
 								.then((tag: ITag) => {
 									allTags.push(tag);
 									return tag;
@@ -1528,13 +1534,13 @@ export default mixins(
 				};
 
 				const credentialPerType = nodeTypeData.credentials && nodeTypeData.credentials
-					.map(type => this.$store.getters['credentials/getCredentialsByType'](type.name))
+					.map(type => this.credentialsStore.getCredentialsByType(type.name))
 					.flat();
 
 				if (credentialPerType && credentialPerType.length === 1) {
 					const defaultCredential = credentialPerType[0];
 
-					const selectedCredentials = this.$store.getters['credentials/getCredentialById'](defaultCredential.id);
+					const selectedCredentials = this.credentialsStore.getCredentialById(defaultCredential.id);
 					const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
 					const credentials = {
 						[defaultCredential.type]: selected,
@@ -2712,7 +2718,7 @@ export default mixins(
 					return;
 				}
 				Object.entries(node.credentials).forEach(([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
-					const credentialOptions = this.$store.getters['credentials/getCredentialsByType'](nodeCredentialType) as ICredentialsResponse[];
+					const credentialOptions = this.credentialsStore.getCredentialsByType(nodeCredentialType);
 
 					// Check if workflows applies old credentials style
 					if (typeof nodeCredentials === 'string') {
@@ -3081,11 +3087,11 @@ export default mixins(
 				await this.nodeTypesStore.getNodeTypes();
 			},
 			async loadCredentialTypes(): Promise<void> {
-				await this.$store.dispatch('credentials/fetchCredentialTypes', true);
+				await this.credentialsStore.fetchCredentialTypes(true);
 			},
 			async loadCredentials(): Promise<void> {
-				await this.$store.dispatch('credentials/fetchAllCredentials');
-				await this.$store.dispatch('credentials/fetchForeignCredentials');
+				await this.credentialsStore.fetchAllCredentials();
+				await this.credentialsStore.fetchForeignCredentials();
 			},
 			async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
 				const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
@@ -3193,7 +3199,9 @@ export default mixins(
 				if (createNodeActive === this.createNodeActive) return;
 
 				// Default to the trigger tab in node creator if there's no trigger node yet
-				if (!this.containsTrigger) this.$store.commit('nodeCreator/setSelectedType', TRIGGER_NODE_FILTER);
+				if (!this.containsTrigger) {
+					this.nodeCreatorStore.selectedType = TRIGGER_NODE_FILTER;
+				}
 
 				this.createNodeActive = createNodeActive;
 				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, createNodeActive });