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/MainSidebar.vue

@@ -31,7 +31,7 @@
 						<!-- This dropdown is only enabled when sidebar is collapsed -->
 						<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
 							<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
-								<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+								<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" />
 								<el-dropdown-menu slot="dropdown">
 									<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
 									<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
@@ -40,7 +40,7 @@
 						</el-dropdown>
 					</div>
 					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-text size="small" :bold="true" color="text-dark">{{currentUser.fullName}}</n8n-text>
+						<n8n-text size="small" :bold="true" color="text-dark">{{usersStore.currentUser.fullName}}</n8n-text>
 					</div>
 					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
 						<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
@@ -78,12 +78,17 @@ import {
 	VERSIONS_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
-	WORKFLOW_OPEN_MODAL_KEY,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { debounceHelper } from './mixins/debounce';
 import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(
 	genericHelpers,
@@ -105,36 +110,34 @@ export default mixins(
 		data () {
 			return {
 				// @ts-ignore
-				basePath: this.$store.getters.getBaseUrl,
+				basePath: '',
 				fullyExpanded: false,
 			};
 		},
 		computed: {
-			...mapGetters('ui', {
-				isCollapsed: 'sidebarMenuCollapsed',
-				isNodeView: 'isNodeView',
-			}),
+			...mapStores(
+				useRootStore,
+				useSettingsStore,
+				useUIStore,
+				useUsersStore,
+				useWorkflowsStore,
+			),
 			...mapGetters('versions', [
 				'hasVersionUpdates',
 				'nextVersions',
 			]),
-			...mapGetters('users', [
-				'canUserAccessSidebarUserInfo',
-				'currentUser',
-			]),
-			...mapGetters('settings', [
-				'isTemplatesEnabled',
-				'isUserManagementEnabled',
-			]),
+			isCollapsed(): boolean {
+				return this.uiStore.sidebarMenuCollapsed;
+			},
 			canUserAccessSettings(): boolean {
 				const accessibleRoute = this.findFirstAccessibleSettingsRoute();
 				return accessibleRoute !== null;
 			},
 			showUserArea(): boolean {
-				return this.isUserManagementEnabled && this.canUserAccessSidebarUserInfo && this.currentUser;
+				return this.settingsStore.isUserManagementEnabled && this.usersStore.canUserAccessSidebarUserInfo && this.usersStore.currentUser !== null;
 			},
 			workflowExecution (): IExecutionResponse | null {
-				return this.$store.getters.getWorkflowExecution;
+				return this.workflowsStore.getWorkflowExecution;
 			},
 			userMenuItems (): object[] {
 				return [
@@ -150,7 +153,7 @@ export default mixins(
 			},
  			mainMenuItems (): IMenuItem[] {
 				const items: IMenuItem[] = [];
-				const injectedItems = this.$store.getters.sidebarMenuItems as IMenuItem[];
+				const injectedItems =  this.uiStore.sidebarMenuItems;
 
 				if (injectedItems && injectedItems.length > 0) {
 					for(const item of injectedItems) {
@@ -182,7 +185,7 @@ export default mixins(
 						icon: 'box-open',
 						label: this.$locale.baseText('mainSidebar.templates'),
 						position: 'top',
-						available: this.isTemplatesEnabled,
+						available: this.settingsStore.isTemplatesEnabled,
 						activateOnRouteNames: [ VIEWS.TEMPLATES ],
 					},
 					{
@@ -204,7 +207,7 @@ export default mixins(
 						icon: 'cog',
 						label: this.$locale.baseText('settings'),
 						position: 'bottom',
-						available: this.canUserAccessSettings && this.currentUser,
+						available: this.canUserAccessSettings && this.usersStore.currentUser !== null,
 						activateOnRouteNames: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
 					},
 					{
@@ -266,13 +269,14 @@ export default mixins(
 			},
 		},
 		async mounted() {
+			this.basePath = this.rootStore.baseUrl;
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
-			if (window.innerWidth < 900 || this.isNodeView) {
-				this.$store.commit('ui/collapseSidebarMenu');
+			if (window.innerWidth < 900 || this.uiStore.isNodeView) {
+				this.uiStore.sidebarMenuCollapsed = true;
 			} else {
-				this.$store.commit('ui/expandSidebarMenu');
+				this.uiStore.sidebarMenuCollapsed = false;
 			}
 			await Vue.nextTick();
 			this.fullyExpanded = !this.isCollapsed;
@@ -285,7 +289,7 @@ export default mixins(
 		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
-				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.workflowsStore.workflowId });
 			},
 			async onUserActionToggle(action: string) {
 				switch (action) {
@@ -301,8 +305,7 @@ export default mixins(
 			},
 			async onLogout() {
 				try {
-					await this.$store.dispatch('users/logout');
-
+					await this.usersStore.logout();
 					const route = this.$router.resolve({ name: VIEWS.SIGNIN });
 					window.open(route.href, '_self');
 				} catch (e) {
@@ -310,7 +313,7 @@ export default mixins(
 				}
 			},
 			toggleCollapse () {
-				this.$store.commit('ui/toggleSidebarMenuCollapse');
+				this.uiStore.toggleSidebarMenuCollapse();
 				// When expanding, delay showing some element to ensure smooth animation
 				if (!this.isCollapsed) {
 					setTimeout(() => {
@@ -321,7 +324,7 @@ export default mixins(
 				}
 			},
 			openUpdatesPanel() {
-				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+				this.uiStore.openModal(VERSIONS_MODAL_KEY);
 			},
 			async handleSelect (key: string) {
 				switch (key) {
@@ -344,7 +347,7 @@ export default mixins(
 						break;
 					}
 					case 'executions': {
-						this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+						this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
 						break;
 					}
 					case 'settings': {
@@ -359,7 +362,7 @@ export default mixins(
 					}
 					case 'about': {
 						this.trackHelpItemClick('about');
-						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+						this.uiStore.openModal(ABOUT_MODAL_KEY);
 						break;
 					}
 					case 'quickstart':
@@ -373,7 +376,7 @@ export default mixins(
 				}
 			},
 			async createNewWorkflow (): Promise<void> {
-				const result = this.$store.getters.getStateIsDirty;
+				const result = this.uiStore.stateIsDirty;
 				if(result) {
 					const confirmModal = await this.confirmModal(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@@ -385,7 +388,7 @@ export default mixins(
 					);
 					if (confirmModal === MODAL_CONFIRMED) {
 						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) this.$store.dispatch('settings/fetchPromptsData');
+						if (saved) await this.settingsStore.fetchPromptsData();
 						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
 							this.$root.$emit('newWorkflow');
 						} else {
@@ -396,11 +399,11 @@ export default mixins(
 							type: 'success',
 						});
 					} else if (confirmModal === MODAL_CANCEL) {
-						this.$store.commit('setStateDirty', false);
+						this.uiStore.stateIsDirty = false;
 						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
 							this.$root.$emit('newWorkflow');
 						} else {
-							this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
+							this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 						}
 						this.$showMessage({
@@ -412,7 +415,7 @@ export default mixins(
 					}
 				} else {
 					if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
-						this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
+						this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 					}
 					this.$showMessage({
@@ -447,7 +450,7 @@ export default mixins(
 			},
 			checkWidthAndAdjustSidebar (width: number) {
 				if (width < 900) {
-					this.$store.commit('ui/collapseSidebarMenu');
+					this.uiStore.sidebarMenuCollapsed = true;
 					Vue.nextTick(() => {
 						this.fullyExpanded = !this.isCollapsed;
 					});