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

packages/editor-ui/package.json

@@ -57,6 +57,7 @@
     "n8n-design-system": "~0.40.0",
     "n8n-workflow": "~0.122.1",
     "normalize-wheel": "^1.0.1",
+    "pinia": "^2.0.22",
     "prismjs": "^1.17.1",
     "quill": "2.0.0-dev.4",
     "quill-autoformat": "^0.1.1",

packages/editor-ui/src/App.vue

@@ -6,7 +6,7 @@
 			id="app"
 			:class="{
 				[$style.container]: true,
-				[$style.sidebarCollapsed]: sidebarMenuCollapsed
+				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed
 			}"
 		>
 			<div id="header" :class="$style.header">
@@ -35,11 +35,17 @@ import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './components/mixins/showMessage';
 import { IUser } from './Interface';
-import { mapGetters } from 'vuex';
 import { userHelpers } from './components/mixins/userHelpers';
 import { loadLanguage } from './plugins/i18n';
 import { restApi } from '@/components/mixins/restApi';
 import { globalLinkActions } from '@/components/mixins/globalLinkActions';
+import { mapStores } from 'pinia';
+import { useUIStore } from './stores/ui';
+import { useSettingsStore } from './stores/settings';
+import { useUsersStore } from './stores/users';
+import { useRootStore } from './stores/n8nRootStore';
+import { useTemplatesStore } from './stores/templates';
+import { useNodeTypesStore } from './stores/nodeTypes';
 
 export default mixins(
 	showMessage,
@@ -54,11 +60,16 @@ export default mixins(
 		Modals,
 	},
 	computed: {
-		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
-		...mapGetters('users', ['currentUser']),
-		...mapGetters('ui', ['sidebarMenuCollapsed']),
+		...mapStores(
+				useNodeTypesStore,
+				useRootStore,
+				useSettingsStore,
+				useTemplatesStore,
+				useUIStore,
+				useUsersStore,
+			),
 		defaultLocale (): string {
-			return this.$store.getters.defaultLocale;
+			return this.rootStore.defaultLocale;
 		},
 	},
 	data() {
@@ -69,7 +80,7 @@ export default mixins(
 	methods: {
 		async initSettings(): Promise<void> {
 			try {
-				await this.$store.dispatch('settings/getSettings');
+				await this.settingsStore.getSettings();
 			} catch (e) {
 				this.$showToast({
 					title: this.$locale.baseText('startupError'),
@@ -81,44 +92,43 @@ export default mixins(
 				throw e;
 			}
 		},
-		async loginWithCookie(): Promise<void> {
+		loginWithCookie(): void {
 			try {
-				await this.$store.dispatch('users/loginWithCookie');
+				this.usersStore.loginWithCookie();
 			} catch (e) {}
 		},
 		async initTemplates(): Promise<void> {
-			if (!this.isTemplatesEnabled) {
+			if (!this.settingsStore.isTemplatesEnabled) {
 				return;
 			}
-
 			try {
-				await this.$store.dispatch('settings/testTemplatesEndpoint');
-			} catch (e) {
+				await this.settingsStore.testTemplatesEndpoint();
+		} catch (e) {
 			}
 		},
 		logHiringBanner() {
-			if (this.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
+			if (this.settingsStore.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
 				console.log(HIRING_BANNER); // eslint-disable-line no-console
 			}
 		},
 		async initialize(): Promise<void> {
 			await this.initSettings();
 			await Promise.all([this.loginWithCookie(), this.initTemplates()]);
 		},
-		trackPage() {
-			this.$store.commit('ui/setCurrentView', this.$route.name);
+		trackPage(): void {
+			this.uiStore.currentView = this.$route.name || '';
 			if (this.$route && this.$route.meta && this.$route.meta.templatesEnabled) {
-				this.$store.commit('templates/setSessionId');
+				this.templatesStore.setSessionId();
 			}
 			else {
-				this.$store.commit('templates/resetSessionId'); // reset telemetry session id when user leaves template pages
+				this.templatesStore.resetSessionId(); // reset telemetry session id when user leaves template pages
 			}
 
 			this.$telemetry.page(this.$route);
 		},
 		authenticate() {
 			// redirect to setup page. user should be redirected to this only once
-			if (this.isUserManagementEnabled && this.showSetupPage) {
+			if (this.settingsStore.isUserManagementEnabled && this.settingsStore.showSetupPage) {
 				if (this.$route.name === VIEWS.SETUP) {
 					return;
 				}
@@ -132,7 +142,7 @@ export default mixins(
 			}
 
 			// if cannot access page and not logged in, ask to sign in
-			const user = this.currentUser as IUser | null;
+			const user = this.usersStore.currentUser as IUser | null;
 			if (!user) {
 				const redirect =
 					this.$route.query.redirect ||
@@ -154,7 +164,7 @@ export default mixins(
 			this.$router.replace({ name: VIEWS.HOMEPAGE });
 		},
 		redirectIfNecessary() {
-			const redirect = this.$route.meta && typeof this.$route.meta.getRedirect === 'function' && this.$route.meta.getRedirect(this.$store);
+			const redirect = this.$route.meta && typeof this.$route.meta.getRedirect === 'function' && this.$route.meta.getRedirect();
 			if (redirect) {
 				this.$router.replace(redirect);
 			}
@@ -176,10 +186,11 @@ export default mixins(
 		this.loading = false;
 
 		this.trackPage();
+		// TODO: Un-comment once front-end hooks are updated to work with pinia store
 		this.$externalHooks().run('app.mount');
 
 		if (this.defaultLocale !== 'en') {
-			void this.$store.dispatch('nodeTypes/getNodeTranslationHeaders');
+			await this.nodeTypesStore.getNodeTranslationHeaders();
 		}
 	},
 	watch: {

packages/editor-ui/src/Interface.ts

@@ -1,3 +1,4 @@
+import { IMenuItem } from 'n8n-design-system';
 import {
 	jsPlumbInstance,
 	DragOptions,
@@ -168,6 +169,7 @@ export interface INodeUpdatePropertiesInformation {
 export type XYPosition = [number, number];
 
 export interface INodeUi extends INode {
+	[x: string]: unknown;
 	position: XYPosition;
 	color?: string;
 	notes?: string;
@@ -887,6 +889,47 @@ export interface INodeMetadata {
 	parametersLastUpdatedAt?: number;
 }
 
+export interface WorkflowsState {
+	activeExecutions: IExecutionsCurrentSummaryExtended[];
+	activeWorkflows: string[];
+	activeWorkflowExecution: IExecutionsSummary | null;
+	currentWorkflowExecutions: IExecutionsSummary[];
+	activeExecutionId: string | null;
+	executingNode: string | null;
+	executionWaitingForWebhook: boolean;
+	finishedExecutionsCount: number;
+	nodeMetadata: NodeMetadataMap;
+	subWorkflowExecutionError: Error | null;
+	workflow: IWorkflowDb;
+	workflowExecutionData: IExecutionResponse | null;
+	workflowExecutionPairedItemMappings: {[itemId: string]: Set<string>};
+	workflowsById: IWorkflowsMap;
+}
+
+export interface RootState {
+	baseUrl: string;
+	defaultLocale: string;
+	endpointWebhook: string;
+	endpointWebhookTest: string;
+	pushConnectionActive: boolean;
+	timezone: string;
+	executionTimeout: number;
+	maxExecutionTimeout: number;
+	versionCli: string;
+	oauthCallbackUrls: object;
+	n8nMetadata: {
+		[key: string]: string | number | undefined;
+	};
+	sessionId: string;
+	urlBaseWebhook: string;
+	urlBaseEditor: string;
+	instanceId: string;
+	isNpmAvailable: boolean;
+}
+
+export interface NodeMetadataMap {
+	[nodeName: string]: INodeMetadata;
+}
 export interface IRootState {
 	activeExecutions: IExecutionsCurrentSummaryExtended[];
 	activeWorkflows: string[];
@@ -924,12 +967,12 @@ export interface IRootState {
 	workflowsById: IWorkflowsMap;
 	sidebarMenuItems: IMenuItem[];
 	instanceId: string;
-	nodeMetadata: {[nodeName: string]: INodeMetadata};
+	nodeMetadata: NodeMetadataMap;
 	isNpmAvailable: boolean;
 	subworkflowExecutionError: Error | null;
 }
 
-export interface ICommunityPackageMap {
+export interface CommunityPackageMap {
 	[name: string]: PublicInstalledPackage;
 }
 
@@ -1023,6 +1066,37 @@ export interface IUiState {
 	executionSidebarAutoRefresh: boolean;
 }
 
+export interface UIState {
+	activeActions: string[];
+	activeCredentialType: string | null;
+	sidebarMenuCollapsed: boolean;
+	modalStack: string[];
+	modals: {
+		[key: string]: IModalState;
+	};
+	isPageLoading: boolean;
+	currentView: string;
+	mainPanelPosition: number;
+	fakeDoorFeatures: IFakeDoor[];
+	draggable: {
+		isDragging: boolean;
+		type: string;
+		data: string;
+		canDrop: boolean;
+		stickyPosition: null | XYPosition;
+	};
+	stateIsDirty: boolean;
+	lastSelectedNode: string | null;
+	lastSelectedNodeOutputIndex: number | null;
+	nodeViewOffsetPosition: XYPosition;
+	nodeViewMoveInProgress: boolean;
+	selectedNodes: INodeUi[];
+	sidebarMenuItems: IMenuItem[];
+	nodeViewInitialized: boolean;
+	addFirstStepOnLoad: boolean;
+	executionSidebarAutoRefresh: boolean;
+}
+
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';
 
 export type IFakeDoor = {
@@ -1059,6 +1133,9 @@ export interface ISettingsState {
 		path: string;
 	};
 	onboardingCallPromptEnabled: boolean;
+	saveDataErrorExecution: string;
+	saveDataSuccessExecution: string;
+	saveManualExecutions: boolean;
 }
 
 export interface INodeTypesState {
@@ -1109,11 +1186,9 @@ export interface IWorkflowsState {
 	[name: string]: IWorkflowDb;
 }
 
-export interface IWorkflowsState {}
-
-export interface ICommunityNodesState {
+export interface CommunityNodesState {
 	availablePackageCount: number;
-	installedPackages: ICommunityPackageMap;
+	installedPackages: CommunityPackageMap;
 }
 
 export interface IRestApiContext {
@@ -1149,8 +1224,8 @@ export interface IOnboardingCallPromptResponse {
 
 export interface IOnboardingCallPrompt {
 	title: string;
-	body: string;
-	index: number;
+	description: string;
+	toast_sequence_number: number;
 }
 
 export interface ITab {
@@ -1182,3 +1257,14 @@ export interface IResourceLocatorReqParams {
 export interface IResourceLocatorResultExpanded extends INodeListSearchItems {
 	linkAlt?: string;
 }
+
+export interface CurlToJSONResponse {
+	"parameters.url": string;
+	"parameters.authentication": string;
+	"parameters.method": string;
+	"parameters.sendHeaders": boolean;
+	"parameters.headerParameters.parameters.0.name": string;
+	"parameters.headerParameters.parameters.0.value": string;
+	"parameters.sendQuery": boolean;
+	"parameters.sendBody": boolean;
+}

packages/editor-ui/src/api/communityNodes.ts

@@ -15,6 +15,6 @@ export async function uninstallPackage(context: IRestApiContext, name: string):
 	return await makeRestApiRequest(context, 'DELETE', '/nodes', { name });
 }
 
-export async function updatePackage(context: IRestApiContext, name: string): Promise<void> {
+export async function updatePackage(context: IRestApiContext, name: string): Promise<PublicInstalledPackage> {
 	return await makeRestApiRequest(context, 'PATCH', '/nodes', { name });
 }

packages/editor-ui/src/api/curlHelper.ts

@@ -1,6 +1,6 @@
-import {IRestApiContext} from "@/Interface";
+import {CurlToJSONResponse, IRestApiContext} from "@/Interface";
 import {makeRestApiRequest} from "@/api/helpers";
 
-export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<{ curlCommand: string | null }> {
+export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<CurlToJSONResponse> {
 	return makeRestApiRequest(context, 'POST', '/curl-to-json', { curlCommand });
 }

packages/editor-ui/src/api/settings.ts

@@ -1,4 +1,4 @@
-import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings } from '../Interface';
+import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IN8nPromptResponse } from '../Interface';
 import { makeRestApiRequest, get, post } from './helpers';
 import { N8N_IO_BASE_URL, NPM_COMMUNITY_NODE_SEARCH_API_URL  } from '@/constants';
 
@@ -14,7 +14,7 @@ export async function submitContactInfo(instanceId: string, userId: string, emai
 	return await post(N8N_IO_BASE_URL, '/prompt', { email }, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
 }
 
-export async function submitValueSurvey(instanceId: string, userId: string, params: IN8nValueSurveyData): Promise<IN8nPrompts> {
+export async function submitValueSurvey(instanceId: string, userId: string, params: IN8nValueSurveyData): Promise<IN8nPromptResponse> {
 	return await post(N8N_IO_BASE_URL, '/value-survey', params, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
 }
 

packages/editor-ui/src/api/workflow-webhooks.ts

@@ -1,11 +1,11 @@
-import { IOnboardingCallPromptResponse, IUser } from "@/Interface";
+import { IOnboardingCallPrompt, IOnboardingCallPromptResponse, IUser } from "@/Interface";
 import { get, post } from "./helpers";
 
 const N8N_API_BASE_URL = 'https://api.n8n.io/api';
 const ONBOARDING_PROMPTS_ENDPOINT = '/prompts/onboarding';
 const CONTACT_EMAIL_SUBMISSION_ENDPOINT = '/accounts/onboarding';
 
-export async function fetchNextOnboardingPrompt(instanceId: string, currentUer: IUser): Promise<IOnboardingCallPromptResponse> {
+export async function fetchNextOnboardingPrompt(instanceId: string, currentUer: IUser): Promise<IOnboardingCallPrompt> {
 	return await get(
 		N8N_API_BASE_URL,
 		ONBOARDING_PROMPTS_ENDPOINT,
@@ -35,7 +35,7 @@ export async function applyForOnboardingCall(instanceId: string, currentUer: IUs
 	}
 }
 
-export async function submitEmailOnSignup(instanceId: string, currentUer: IUser, email: string, agree: boolean): Promise<string> {
+export async function submitEmailOnSignup(instanceId: string, currentUer: IUser, email: string | undefined, agree: boolean): Promise<string> {
 	return await post(
 		N8N_API_BASE_URL,
 		CONTACT_EMAIL_SUBMISSION_ENDPOINT,