fix(editor): When cloud users click on "How to update your n8n version" auto-login them before redirecting to the dashboard (no-changelog)

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

@@ -260,7 +260,7 @@ const handleSelect = (key: string) => {
 			break;
 		}
 		case 'cloud-admin': {
-			void cloudPlanStore.redirectToDashboard();
+			void uiStore.goToDashboard();
 			break;
 		}
 		case 'quickstart':

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

@@ -1,39 +1,28 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 import ModalDrawer from './ModalDrawer.vue';
 import TimeAgo from './TimeAgo.vue';
 import VersionCard from './VersionCard.vue';
 import { VERSIONS_MODAL_KEY } from '../constants';
-import { mapStores } from 'pinia';
 import { useVersionsStore } from '@/stores/versions.store';
-import type { IVersion } from '@/Interface';
-
-export default defineComponent({
-	name: 'UpdatesPanel',
-	components: {
-		ModalDrawer,
-		VersionCard,
-		TimeAgo,
-	},
-	computed: {
-		...mapStores(useVersionsStore),
-		nextVersions(): IVersion[] {
-			return this.versionsStore.nextVersions;
-		},
-		currentVersion(): IVersion | undefined {
-			return this.versionsStore.currentVersion;
-		},
-		infoUrl(): string {
-			return this.versionsStore.infoUrl;
-		},
-	},
-	data() {
-		return {
-			VERSIONS_MODAL_KEY,
-		};
-	},
-});
+import { useI18n } from '@/composables/useI18n';
+import { useUIStore } from '@/stores/ui.store';
+
+const versionsStore = useVersionsStore();
+const uiStore = useUIStore();
+
+const i18n = useI18n();
+
+const nextVersions = computed(() => versionsStore.nextVersions);
+
+const currentVersion = computed(() => versionsStore.currentVersion);
+
+const infoUrl = computed(() => versionsStore.infoUrl);
+
+const onInfoUrlClick = async () => {
+	await uiStore.goToVersions();
+};
 </script>
 
 <template>
@@ -45,40 +34,48 @@ export default defineComponent({
 	>
 		<template #header>
 			<span :class="$style.title">
-				{{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
+				{{ i18n.baseText('updatesPanel.weVeBeenBusy') }}
 			</span>
 		</template>
 		<template #content>
 			<section :class="$style['description']">
 				<p v-if="currentVersion">
 					{{
-						$locale.baseText('updatesPanel.youReOnVersion', {
+						i18n.baseText('updatesPanel.youReOnVersion', {
 							interpolate: { currentVersionName: currentVersion.name },
 						})
 					}}
 					<strong>
 						<TimeAgo :date="currentVersion.createdAt" />
 					</strong>
-					{{ $locale.baseText('updatesPanel.andIs') }}
+					{{ i18n.baseText('updatesPanel.andIs') }}
 					<strong>
 						{{
-							$locale.baseText('updatesPanel.version', {
+							i18n.baseText('updatesPanel.version', {
 								interpolate: {
 									numberOfVersions: nextVersions.length,
 									howManySuffix: nextVersions.length > 1 ? 's' : '',
 								},
 							})
 						}}
 					</strong>
-					{{ $locale.baseText('updatesPanel.behindTheLatest') }}
+					{{ i18n.baseText('updatesPanel.behindTheLatest') }}
 				</p>
 
-				<n8n-link v-if="infoUrl" :to="infoUrl" :bold="true">
+				<n8n-button
+					v-if="infoUrl"
+					:text="true"
+					type="primary"
+					size="large"
+					:class="$style['link']"
+					:bold="true"
+					@click="onInfoUrlClick"
+				>
 					<font-awesome-icon icon="info-circle" class="mr-2xs" />
 					<span>
-						{{ $locale.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
+						{{ i18n.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
 					</span>
-				</n8n-link>
+				</n8n-button>
 			</section>
 			<section :class="$style.versions">
 				<div v-for="version in nextVersions" :key="version.name" :class="$style['versions-card']">
@@ -114,6 +111,15 @@ export default defineComponent({
 	div {
 		padding-top: 20px;
 	}
+
+	.link {
+		padding-left: 0px;
+	}
+
+	.link:hover {
+		color: var(--prim-color-primary);
+		text-decoration: none;
+	}
 }
 
 .versions {

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

@@ -1,5 +1,5 @@
 import { createPinia, setActivePinia } from 'pinia';
-import { generateUpgradeLinkUrl, useUIStore } from '@/stores/ui.store';
+import { generateUpgradeLink, useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { merge } from 'lodash-es';
@@ -98,7 +98,7 @@ describe('UI store', () => {
 			'https://n8n.io/pricing?utm_campaign=utm-test-campaign&source=test_source',
 		],
 	])(
-		'"generateUpgradeLinkUrl" should generate the correct URL for "%s" deployment and "%s" license environment and user role "%s"',
+		'"generateUpgradeLink" should generate the correct URL for "%s" deployment and "%s" license environment and user role "%s"',
 		async (type, environment, role, expectation) => {
 			setUser(role as IRole);
 
@@ -115,7 +115,7 @@ describe('UI store', () => {
 				}),
 			);
 
-			const updateLinkUrl = await generateUpgradeLinkUrl('test_source', 'utm-test-campaign', type);
+			const updateLinkUrl = await generateUpgradeLink('test_source', 'utm-test-campaign', type);
 
 			expect(updateLinkUrl).toBe(expectation);
 		},

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

@@ -147,12 +147,6 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		}
 	};
 
-	const redirectToDashboard = async () => {
-		const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
-		const { code } = await getAutoLoginCode();
-		window.location.href = `https://${adminPanelHost}/login?code=${code}`;
-	};
-
 	const initialize = async () => {
 		if (state.initialized) {
 			return;
@@ -189,6 +183,5 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
 		checkForCloudPlanData,
 		fetchUserCloudAccount,
 		getAutoLoginCode,
-		redirectToDashboard,
 	};
 });

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

@@ -73,6 +73,7 @@ import {
 import { computed, ref } from 'vue';
 import type { Connection } from '@vue-flow/core';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useVersionsStore } from '@/stores/versions.store';
 
 let savedTheme: ThemeOption = 'system';
 try {
@@ -208,6 +209,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	const telemetry = useTelemetry();
 	const cloudPlanStore = useCloudPlanStore();
 	const userStore = useUsersStore();
+	const versionsStore = useVersionsStore();
 
 	const appliedTheme = computed(() => {
 		return theme.value === 'system' ? getPreferredTheme() : theme.value;
@@ -575,7 +577,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 			workflowsLeft,
 		});
 
-		const upgradeLink = await generateUpgradeLinkUrl(source, utm_campaign, deploymentType);
+		const upgradeLink = await generateUpgradeLink(source, utm_campaign, deploymentType);
 
 		if (mode === 'open') {
 			window.open(upgradeLink, '_blank');
@@ -628,6 +630,40 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		lastCancelledConnectionPosition.value = undefined;
 	}
 
+	const isInstanceOwnerInCloud = () => {
+		const deploymentType = settingsStore.deploymentType;
+		return hasPermission(['instanceOwner']) && deploymentType === 'cloud';
+	};
+
+	/**
+	 * If the user is an instance owner in the cloud, it generates an auto-login link to the
+	 * cloud dashboard that redirects the user to the manage page where they can upgrade to a new n8n version.
+	 * Otherwise, it redirect them to our docs.
+	 */
+	const goToVersions = async () => {
+		let versionsLink = versionsStore.infoUrl;
+
+		if (isInstanceOwnerInCloud()) {
+			versionsLink = await generateCloudDashboardAutoLoginLink({
+				redirectionPath: '/manage',
+			});
+		}
+
+		location.href = versionsLink;
+	};
+
+	const goToDashboard = async () => {
+		if (isInstanceOwnerInCloud()) {
+			const dashboardLink = await generateCloudDashboardAutoLoginLink({
+				redirectionPath: '/dashboard',
+			});
+
+			location.href = dashboardLink;
+		}
+
+		return;
+	};
+
 	return {
 		appGridWidth,
 		appliedTheme,
@@ -669,6 +705,9 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		isAnyModalOpen,
 		fakeDoorsById,
 		pendingNotificationsForViews,
+		activeModals,
+		goToVersions,
+		goToDashboard,
 		setTheme,
 		setMode,
 		setActiveId,
@@ -704,7 +743,6 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		setNotificationsForView,
 		deleteNotificationsForView,
 		resetLastInteractedWith,
-		activeModals,
 	};
 });
 
@@ -749,33 +787,43 @@ export const listenForModalChanges = (opts: {
 	});
 };
 
-export const generateUpgradeLinkUrl = async (
+export const generateUpgradeLink = async (
 	source: string,
 	utm_campaign: string,
 	deploymentType: string,
 ) => {
-	let linkUrl = '';
-
-	const searchParams = new URLSearchParams();
-
-	const cloudPlanStore = useCloudPlanStore();
-
+	let upgradeLink = N8N_PRICING_PAGE_URL;
 	if (deploymentType === 'cloud' && hasPermission(['instanceOwner'])) {
-		const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
-		const { code } = await cloudPlanStore.getAutoLoginCode();
-		linkUrl = `https://${adminPanelHost}/login`;
-		searchParams.set('code', code);
-		searchParams.set('returnPath', '/account/change-plan');
-	} else {
-		linkUrl = N8N_PRICING_PAGE_URL;
+		upgradeLink = await generateCloudDashboardAutoLoginLink({
+			redirectionPath: '/account/change-plan',
+		});
 	}
 
+	const url = new URL(upgradeLink);
+
 	if (utm_campaign) {
-		searchParams.set('utm_campaign', utm_campaign);
+		url.searchParams.set('utm_campaign', utm_campaign);
 	}
 
 	if (source) {
-		searchParams.set('source', source);
+		url.searchParams.set('source', source);
 	}
+
+	return url.toString();
+};
+
+export const generateCloudDashboardAutoLoginLink = async (data: {
+	redirectionPath: string;
+}) => {
+	const searchParams = new URLSearchParams();
+
+	const cloudPlanStore = useCloudPlanStore();
+
+	const adminPanelHost = new URL(window.location.href).host.split('.').slice(1).join('.');
+	const { code } = await cloudPlanStore.getAutoLoginCode();
+	const linkUrl = `https://${adminPanelHost}/login`;
+	searchParams.set('code', code);
+	searchParams.set('returnPath', data.redirectionPath);
+
 	return `${linkUrl}?${searchParams.toString()}`;
 };