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/plugins/i18n/index.ts

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import axios from 'axios';
 import VueI18n from 'vue-i18n';
-import { Store } from "vuex";
 import { INodeTranslationHeaders, IRootState } from '@/Interface';
 import {
 	deriveMiddleKey,
@@ -23,7 +22,7 @@ locale.use('en');
 
 export let i18n: I18nClass;
 
-export function I18nPlugin(vue: typeof Vue, store: Store<IRootState>): void {
+export function I18nPlugin(vue: typeof Vue): void {
 	i18n = new I18nClass();
 
 	Object.defineProperty(vue, '$locale', {

packages/editor-ui/src/plugins/telemetry/index.ts

@@ -7,9 +7,9 @@ import {
 import { Route } from "vue-router";
 
 import type { INodeCreateElement, IRootState } from "@/Interface";
-import type { Store } from "vuex";
 import type { IUserNodesPanelSession } from "./telemetry.types";
 import { useSettingsStore } from "@/stores/settings";
+import { useRootStore } from "@/stores/n8nRootStore";
 
 export function TelemetryPlugin(vue: typeof _Vue): void {
 	const telemetry = new Telemetry();
@@ -26,7 +26,6 @@ export class Telemetry {
 
 	private pageEventQueue: Array<{route: Route}>;
 	private previousPath: string;
-	private store: Store<IRootState> | null;
 
 	private get rudderStack() {
 		return window.rudderanalytics;
@@ -44,15 +43,13 @@ export class Telemetry {
 	constructor() {
 		this.pageEventQueue = [];
 		this.previousPath = '';
-		this.store = null;
 	}
 
 	init(
 		telemetrySettings: ITelemetrySettings,
-		{ instanceId, userId, store, versionCli }: {
+		{ instanceId, userId, versionCli }: {
 			instanceId: string;
 			userId?: string;
-			store: Store<IRootState>;
 			versionCli: string
 	 },
 	) {
@@ -60,9 +57,8 @@ export class Telemetry {
 
 		const { config: { key, url } } = telemetrySettings;
 
-		// TODO: Remove this once migration to pinia is done
-		this.store = store;
 		const settingsStore = useSettingsStore();
+		const rootStore = useRootStore();
 
 		const logLevel = settingsStore.logLevel;
 
@@ -81,7 +77,7 @@ export class Telemetry {
 		this.identify(instanceId, userId, versionCli);
 
 		this.flushPageEvents();
-		this.track('Session started', { session_id: store.getters.sessionId });
+		this.track('Session started', { session_id: rootStore.sessionId });
 	}
 
 	identify(instanceId: string, userId?: string, versionCli?: string) {
@@ -100,7 +96,7 @@ export class Telemetry {
 
 		const updatedProperties = {
 			...properties,
-			version_cli: this.store && this.store.getters.versionCli,
+			version_cli: useRootStore().versionCli,
 		};
 
 		this.rudderStack.track(event, updatedProperties);
@@ -115,7 +111,7 @@ export class Telemetry {
 
 			const pageName = route.name;
 			let properties: {[key: string]: string} = {};
-			if (this.store && route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
+			if (route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
 				properties = route.meta.telemetry.getProperties(route);
 			}