feat(editor): Support autologin for upgrade path (#7316)

Github issue / Community forum post (link here to close automatically):

packages/editor-ui/src/Interface.ts

@@ -1627,7 +1627,8 @@ export type CloudUpdateLinkSourceType =
 	| 'sso'
 	| 'usage_page'
 	| 'settings-users'
-	| 'variables';
+	| 'variables'
+	| 'community-nodes';
 
 export type UTMCampaign =
 	| 'upgrade-custom-data-filter'
@@ -1642,7 +1643,8 @@ export type UTMCampaign =
 	| 'upgrade-sso'
 	| 'open'
 	| 'upgrade-users'
-	| 'upgrade-variables';
+	| 'upgrade-variables'
+	| 'upgrade-community-nodes';
 
 export type N8nBanners = {
 	[key in BannerName]: {

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

@@ -16,3 +16,7 @@ export async function getCloudUserInfo(context: IRestApiContext): Promise<Cloud.
 export async function confirmEmail(context: IRestApiContext): Promise<Cloud.UserAccount> {
 	return post(context.baseUrl, '/cloud/proxy/user/resend-confirmation-email');
 }
+
+export async function getAdminPanelLoginCode(context: IRestApiContext): Promise<{ code: string }> {
+	return get(context.baseUrl, '/admin/login/code');
+}

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -186,7 +186,7 @@ export default defineComponent({
 			this.modalBus.emit('close');
 		},
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
+			void this.uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
 		},
 	},
 	mounted() {

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

@@ -141,7 +141,7 @@ const onFilterReset = () => {
 };
 
 const goToUpgrade = () => {
-	uiStore.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
+	void uiStore.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
 };
 
 onBeforeMount(() => {

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

@@ -114,7 +114,7 @@ const maxExecutions = computed(() => {
 });
 
 const onUpgradeClicked = () => {
-	useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
+	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
 };
 </script>
 

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -624,7 +624,7 @@ export default defineComponent({
 			}
 		},
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 	},
 	watch: {

packages/editor-ui/src/components/WorkflowShareModal.ee.vue

@@ -456,7 +456,7 @@ export default defineComponent({
 			});
 		},
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 		async initialize() {
 			if (this.isSharingEnabled) {

packages/editor-ui/src/components/banners/TrialBanner.vue

@@ -18,7 +18,7 @@ const messageText = computed(() => {
 });
 
 function onUpdatePlanClick() {
-	useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
+	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
 }
 </script>
 

packages/editor-ui/src/components/banners/TrialOverBanner.vue

@@ -4,7 +4,7 @@ import { i18n as locale } from '@/plugins/i18n';
 import { useUIStore } from '@/stores';
 
 function onUpdatePlanClick() {
-	useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
+	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
 }
 </script>
 

packages/editor-ui/src/composables/useExecutionDebugging.ts

@@ -125,7 +125,7 @@ export const useExecutionDebugging = () => {
 					title: i18n.baseText(uiStore.contextBasedTranslationKeys.feature.unavailable.title),
 					footerButtonAction: () => {
 						uiStore.closeModal(DEBUG_PAYWALL_MODAL_KEY);
-						uiStore.goToUpgrade('debug', 'upgrade-debug');
+						void uiStore.goToUpgrade('debug', 'upgrade-debug');
 					},
 				},
 			});

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -2008,9 +2008,6 @@
 	"contextual.users.settings.unavailable.button.desktop": "View plans",
 	"contextual.communityNodes.unavailable.description.desktop": "Community nodes feature is unavailable on desktop. Please choose one of our available self-hosting plans.",
 	"contextual.communityNodes.unavailable.button.desktop": "View plans",
-	"contextual.upgradeLinkUrl": "https://n8n.io/pricing/",
-	"contextual.upgradeLinkUrl.cloud": "https://app.n8n.cloud/account/change-plan",
-	"contextual.upgradeLinkUrl.desktop": "https://n8n.io/pricing/?utm_source=n8n-internal&utm_medium=desktop",
 	"contextual.feature.unavailable.title": "Available on the Enterprise Plan",
 	"contextual.feature.unavailable.title.cloud": "Available on the Pro Plan",
 	"contextual.feature.unavailable.title.desktop": "Available on cloud hosting",

packages/editor-ui/src/stores/__tests__/ui.test.ts

@@ -47,26 +47,53 @@ function setupOwnerAndCloudDeployment() {
 }
 
 describe('UI store', () => {
+	let mockedCloudStore;
+
 	beforeEach(() => {
 		setActivePinia(createPinia());
 		uiStore = useUIStore();
 		settingsStore = useSettingsStore();
 		rootStore = useRootStore();
 		cloudPlanStore = useCloudPlanStore();
+
+		mockedCloudStore = vi.spyOn(cloudPlanStore, 'getAutoLoginCode');
+		mockedCloudStore.mockImplementationOnce(async () => ({
+			code: '123',
+		}));
+
+		global.window = Object.create(window);
+
+		const url = 'https://test.app.n8n.cloud';
+
+		Object.defineProperty(window, 'location', {
+			value: {
+				href: url,
+			},
+			writable: true,
+		});
 	});
 
 	test.each([
-		['default', 'production', 'https://n8n.io/pricing/?ref=test_source'],
-		['default', 'development', 'https://n8n.io/pricing/?ref=test_source'],
 		[
-			'desktop_win',
+			'default',
 			'production',
-			'https://n8n.io/pricing/?utm_source=n8n-internal&utm_medium=desktop&utm_campaign=utm-test-campaign',
+			'https://n8n.io/pricing?utm_campaign=utm-test-campaign&source=test_source',
+		],
+		[
+			'default',
+			'development',
+			'https://n8n.io/pricing?utm_campaign=utm-test-campaign&source=test_source',
+		],
+		[
+			'cloud',
+			'production',
+			`https://app.n8n.cloud/login?code=123&returnPath=${encodeURIComponent(
+				'/account/change-plan',
+			)}&utm_campaign=utm-test-campaign&source=test_source`,
 		],
-		['cloud', 'production', 'https://app.n8n.cloud/account/change-plan'],
 	])(
 		'"upgradeLinkUrl" should generate the correct URL for "%s" deployment and "%s" license environment',
-		(type, environment, expectation) => {
+		async (type, environment, expectation) => {
 			settingsStore.setSettings(
 				merge({}, SETTINGS_STORE_DEFAULT_STATE.settings, {
 					deployment: {
@@ -80,7 +107,9 @@ describe('UI store', () => {
 				}),
 			);
 
-			expect(uiStore.upgradeLinkUrl('test_source', 'utm-test-campaign')).toBe(expectation);
+			const updateLinkUrl = await uiStore.upgradeLinkUrl('test_source', 'utm-test-campaign', type);
+
+			expect(updateLinkUrl).toBe(expectation);
 		},
 	);
 

packages/editor-ui/src/stores/cloudPlan.store.ts

@@ -5,7 +5,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
-import { getCurrentPlan, getCurrentUsage } from '@/api/cloudPlans';
+import { getAdminPanelLoginCode, getCurrentPlan, getCurrentUsage } from '@/api/cloudPlans';
 import { DateTime } from 'luxon';
 import { CLOUD_TRIAL_CHECK_INTERVAL, STORES } from '@/constants';
 
@@ -71,6 +71,10 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		}
 	};
 
+	const getAutoLoginCode = async (): Promise<{ code: string }> => {
+		return getAdminPanelLoginCode(rootStore.getRestApiContext);
+	};
+
 	const getOwnerCurrentPlan = async () => {
 		if (!hasCloudPlan.value) throw new Error('User does not have a cloud plan');
 		state.loadingPlan = true;
@@ -161,5 +165,6 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		reset,
 		checkForCloudPlanData,
 		fetchUserCloudAccount,
+		getAutoLoginCode,
 	};
 });

packages/editor-ui/src/stores/ui.store.ts

@@ -35,6 +35,7 @@ import {
 	SOURCE_CONTROL_PUSH_MODAL_KEY,
 	SOURCE_CONTROL_PULL_MODAL_KEY,
 	DEBUG_PAYWALL_MODAL_KEY,
+	N8N_PRICING_PAGE_URL,
 } from '@/constants';
 import type {
 	CloudUpdateLinkSourceType,
@@ -56,8 +57,6 @@ import { getCurlToJson } from '@/api/curlHelper';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
-import type { BaseTextKey } from '@/plugins/i18n';
-import { i18n as locale } from '@/plugins/i18n';
 import { useTelemetryStore } from '@/stores/telemetry.store';
 import { getStyleTokenValue } from '@/utils/htmlUtils';
 import { dismissBannerPermanently } from '@/api/ui';
@@ -214,7 +213,6 @@ export const useUIStore = defineStore(STORES.UI, {
 			}
 
 			return {
-				upgradeLinkUrl: `contextual.upgradeLinkUrl${contextKey}`,
 				feature: {
 					unavailable: {
 						title: `contextual.feature.unavailable.title${contextKey}`,
@@ -343,18 +341,29 @@ export const useUIStore = defineStore(STORES.UI, {
 			};
 		},
 		upgradeLinkUrl() {
-			return (source: string, utm_campaign: string): string => {
+			return async (source: string, utm_campaign: string, deploymentType: string) => {
-				const linkUrlTranslationKey = this.contextBasedTranslationKeys
+				let linkUrl = '';
-					.upgradeLinkUrl as BaseTextKey;
-				let linkUrl = locale.baseText(linkUrlTranslationKey);
 
-				if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
+				const searchParams = new URLSearchParams();
-					linkUrl = `${linkUrl}?ref=${source}`;
+
-				} else if (linkUrlTranslationKey.endsWith('.desktop')) {
+				if (deploymentType === 'cloud') {
-					linkUrl = `${linkUrl}&utm_campaign=${utm_campaign || source}`;
+					const { code } = await useCloudPlanStore().getAutoLoginCode();
+					const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
+					linkUrl = `https://${adminPanelHost}/login`;
+					searchParams.set('code', code);
+					searchParams.set('returnPath', '/account/change-plan');
+				} else {
+					linkUrl = N8N_PRICING_PAGE_URL;
 				}
 
-				return linkUrl;
+				if (utm_campaign) {
+					searchParams.set('utm_campaign', utm_campaign);
+				}
+
+				if (source) {
+					searchParams.set('source', source);
+				}
+				return `${linkUrl}?${searchParams.toString()}`;
 			};
 		},
 		headerHeight() {
@@ -542,25 +551,30 @@ export const useUIStore = defineStore(STORES.UI, {
 			const rootStore = useRootStore();
 			return getCurlToJson(rootStore.getRestApiContext, curlCommand);
 		},
-		goToUpgrade(
+		async goToUpgrade(
 			source: CloudUpdateLinkSourceType,
 			utm_campaign: UTMCampaign,
 			mode: 'open' | 'redirect' = 'open',
-		): void {
+		): Promise<void> {
 			const { usageLeft, trialDaysLeft, userIsTrialing } = useCloudPlanStore();
 			const { executionsLeft, workflowsLeft } = usageLeft;
+			const deploymentType = useSettingsStore().deploymentType;
+
 			useTelemetryStore().track('User clicked upgrade CTA', {
 				source,
 				isTrial: userIsTrialing,
-				deploymentType: useSettingsStore().deploymentType,
+				deploymentType,
 				trialDaysLeft,
 				executionsLeft,
 				workflowsLeft,
 			});
+
+			const upgradeLink = await this.upgradeLinkUrl(source, utm_campaign, deploymentType);
+
 			if (mode === 'open') {
-				window.open(this.upgradeLinkUrl(source, utm_campaign), '_blank');
+				window.open(upgradeLink, '_blank');
 			} else {
-				location.href = this.upgradeLinkUrl(source, utm_campaign);
+				location.href = upgradeLink;
 			}
 		},
 		async dismissBanner(

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

@@ -142,7 +142,7 @@ export default defineComponent({
 	},
 	methods: {
 		onUpgrade() {
-			this.uiStore.goToUpgrade('settings-n8n-api', 'upgrade-api', 'redirect');
+			void this.uiStore.goToUpgrade('settings-n8n-api', 'upgrade-api', 'redirect');
 		},
 		async showDeleteModal() {
 			const confirmed = await this.confirm(

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

@@ -7,7 +7,7 @@ const uiStore = useUIStore();
 const auditLogsStore = useAuditLogsStore();
 
 const goToUpgrade = () => {
-	uiStore.goToUpgrade('audit-logs', 'upgrade-audit-logs');
+	void uiStore.goToUpgrade('audit-logs', 'upgrade-audit-logs');
 };
 </script>
 

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

@@ -214,11 +214,7 @@ export default defineComponent({
 			this.openInstallModal();
 		},
 		goToUpgrade(): void {
-			const linkUrl = `${this.$locale.baseText(
+			void this.uiStore.goToUpgrade('community-nodes', 'upgrade-community-nodes');
-				'contextual.upgradeLinkUrl.desktop',
-			)}&utm_campaign=upgrade-community-nodes&selfHosted=true`;
-
-			window.open(linkUrl, '_blank');
 		},
 		openInstallModal(): void {
 			const telemetryPayload = {

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

@@ -28,7 +28,7 @@ onMounted(() => {
 });
 
 function goToUpgrade() {
-	uiStore.goToUpgrade('external-secrets', 'upgrade-external-secrets');
+	void uiStore.goToUpgrade('external-secrets', 'upgrade-external-secrets');
 }
 </script>
 

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

@@ -222,7 +222,7 @@ export default defineComponent({
 	},
 	methods: {
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('ldap', 'upgrade-ldap');
+			void this.uiStore.goToUpgrade('ldap', 'upgrade-ldap');
 		},
 		cellClassStyle({ row, column }: CellStyle<TableRow>) {
 			if (column.property === 'status') {

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

@@ -188,7 +188,7 @@ export default defineComponent({
 			this.$forceUpdate();
 		},
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('log-streaming', 'upgrade-log-streaming');
+			void this.uiStore.goToUpgrade('log-streaming', 'upgrade-log-streaming');
 		},
 		storeHasItems(): boolean {
 			return this.logStreamingStore.items && Object.keys(this.logStreamingStore.items).length > 0;

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

@@ -96,7 +96,7 @@ const onSelect = async (b: string) => {
 };
 
 const goToUpgrade = () => {
-	uiStore.goToUpgrade('source-control', 'upgrade-source-control');
+	void uiStore.goToUpgrade('source-control', 'upgrade-source-control');
 };
 
 const initialize = async () => {

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

@@ -119,7 +119,7 @@ const onTest = async () => {
 };
 
 const goToUpgrade = () => {
-	uiStore.goToUpgrade('sso', 'upgrade-sso');
+	void uiStore.goToUpgrade('sso', 'upgrade-sso');
 };
 
 onMounted(async () => {

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

@@ -103,7 +103,7 @@ const onAddActivationKey = () => {
 };
 
 const onViewPlans = () => {
-	uiStore.goToUpgrade('usage_page', 'open');
+	void uiStore.goToUpgrade('usage_page', 'open');
 	sendUsageTelemetry('view_plans');
 };
 

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

@@ -214,7 +214,7 @@ export default defineComponent({
 			}
 		},
 		goToUpgrade() {
-			this.uiStore.goToUpgrade('settings-users', 'upgrade-users');
+			void this.uiStore.goToUpgrade('settings-users', 'upgrade-users');
 		},
 	},
 });

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

@@ -204,7 +204,7 @@ async function deleteVariable(data: EnvironmentVariable) {
 }
 
 function goToUpgrade() {
-	uiStore.goToUpgrade('variables', 'upgrade-variables');
+	void uiStore.goToUpgrade('variables', 'upgrade-variables');
 }
 
 function displayName(resource: EnvironmentVariable) {

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

@@ -156,7 +156,7 @@ const onPreview = async ({ event, id }: { event: MouseEvent; id: WorkflowVersion
 };
 
 const onUpgrade = () => {
-	uiStore.goToUpgrade('workflow-history', 'upgrade-workflow-history');
+	void uiStore.goToUpgrade('workflow-history', 'upgrade-workflow-history');
 };
 
 watchEffect(async () => {