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/CredentialEdit/CredentialSharing.ee.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
 import { useI18n } from '@/composables/useI18n';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 import { EnterpriseEditionFeature } from '@/constants';
 import type { ICredentialsDecryptedResponse, ICredentialsResponse } from '@/Interface';
 import type { PermissionsRecord } from '@/permissions';
@@ -39,6 +40,8 @@ const settingsStore = useSettingsStore();
 const projectsStore = useProjectsStore();
 const rolesStore = useRolesStore();
 
+const pageRedirectionHelper = usePageRedirectionHelper();
+
 const sharedWithProjects = ref([...(props.credential?.sharedWithProjects ?? [])]);
 
 const isSharingEnabled = computed(
@@ -107,7 +110,7 @@ onMounted(async () => {
 });
 
 function goToUpgrade() {
-	void uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
+	void pageRedirectionHelper.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
 }
 </script>
 

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

@@ -15,6 +15,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { createFormEventBus, createEventBus } from 'n8n-design-system/utils';
 import { useClipboard } from '@/composables/useClipboard';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/;
 
@@ -43,6 +44,7 @@ export default defineComponent({
 		return {
 			clipboard,
 			...useToast(),
+			...usePageRedirectionHelper(),
 		};
 	},
 	data() {
@@ -277,7 +279,7 @@ export default defineComponent({
 			}
 		},
 		goToUpgradeAdvancedPermissions() {
-			void this.uiStore.goToUpgrade('advanced-permissions', 'upgrade-advanced-permissions');
+			void this.goToUpgrade('advanced-permissions', 'upgrade-advanced-permissions');
 		},
 	},
 });

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

@@ -56,6 +56,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import type { BaseTextKey } from '@/plugins/i18n';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { useNodeViewVersionSwitcher } from '@/composables/useNodeViewVersionSwitcher';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const props = defineProps<{
 	readOnly?: boolean;
@@ -89,6 +90,7 @@ const message = useMessage();
 const toast = useToast();
 const documentTitle = useDocumentTitle();
 const workflowHelpers = useWorkflowHelpers({ router });
+const pageRedirectionHelper = usePageRedirectionHelper();
 
 const isTagsEditEnabled = ref(false);
 const isNameEditEnabled = ref(false);
@@ -584,11 +586,11 @@ async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void
 }
 
 function goToUpgrade() {
-	void uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+	void pageRedirectionHelper.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 }
 
 function goToWorkflowHistoryUpgrade() {
-	void uiStore.goToUpgrade('workflow-history', 'upgrade-workflow-history');
+	void pageRedirectionHelper.goToUpgrade('workflow-history', 'upgrade-workflow-history');
 }
 
 function showCreateWorkflowSuccessToast(id?: string) {

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

@@ -21,6 +21,7 @@ import { useUserHelpers } from '@/composables/useUserHelpers';
 
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { useBugReporting } from '@/composables/useBugReporting';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const becomeTemplateCreatorStore = useBecomeTemplateCreatorStore();
 const cloudPlanStore = useCloudPlanStore();
@@ -38,6 +39,7 @@ const locale = useI18n();
 const route = useRoute();
 const router = useRouter();
 const telemetry = useTelemetry();
+const pageRedirectionHelper = usePageRedirectionHelper();
 const { getReportingURL } = useBugReporting();
 
 useUserHelpers(router, route);
@@ -260,7 +262,7 @@ const handleSelect = (key: string) => {
 			break;
 		}
 		case 'cloud-admin': {
-			void uiStore.goToDashboard();
+			void pageRedirectionHelper.goToDashboard();
 			break;
 		}
 		case 'quickstart':

packages/editor-ui/src/components/Projects/ProjectNavigation.test.ts

@@ -5,11 +5,11 @@ import { createRouter, createMemoryHistory, useRouter } from 'vue-router';
 import { createProjectListItem } from '@/__tests__/data/projects';
 import ProjectsNavigation from '@/components/Projects//ProjectNavigation.vue';
 import { useProjectsStore } from '@/stores/projects.store';
-import { useUIStore } from '@/stores/ui.store';
 import { mockedStore } from '@/__tests__/utils';
 import type { Project } from '@/types/projects.types';
 import { VIEWS } from '@/constants';
 import { useToast } from '@/composables/useToast';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 vi.mock('vue-router', async () => {
 	const actual = await vi.importActual('vue-router');
@@ -36,6 +36,15 @@ vi.mock('@/composables/useToast', () => {
 	};
 });
 
+vi.mock('@/composables/usePageRedirectionHelper', () => {
+	const goToUpgrade = vi.fn();
+	return {
+		usePageRedirectionHelper: () => ({
+			goToUpgrade,
+		}),
+	};
+});
+
 const renderComponent = createComponentRenderer(ProjectsNavigation, {
 	global: {
 		plugins: [
@@ -56,7 +65,7 @@ const renderComponent = createComponentRenderer(ProjectsNavigation, {
 let router: ReturnType<typeof useRouter>;
 let toast: ReturnType<typeof useToast>;
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
-let uiStore: ReturnType<typeof mockedStore<typeof useUIStore>>;
+let pageRedirectionHelper: ReturnType<typeof usePageRedirectionHelper>;
 
 const personalProjects = Array.from({ length: 3 }, createProjectListItem);
 const teamProjects = Array.from({ length: 3 }, () => createProjectListItem('team'));
@@ -67,9 +76,9 @@ describe('ProjectsNavigation', () => {
 
 		router = useRouter();
 		toast = useToast();
+		pageRedirectionHelper = usePageRedirectionHelper();
 
 		projectsStore = mockedStore(useProjectsStore);
-		uiStore = mockedStore(useUIStore);
 	});
 
 	it('should not throw an error', () => {
@@ -144,7 +153,7 @@ describe('ProjectsNavigation', () => {
 		expect(getByText(/You have reached the Free plan limit of 3/)).toBeVisible();
 		await userEvent.click(getByText('View plans'));
 
-		expect(uiStore.goToUpgrade).toHaveBeenCalledWith('rbac', 'upgrade-rbac');
+		expect(pageRedirectionHelper.goToUpgrade).toHaveBeenCalledWith('rbac', 'upgrade-rbac');
 	});
 
 	it('should show "Projects" title and Personal project when the feature is enabled', async () => {

packages/editor-ui/src/components/Projects/ProjectNavigation.vue

@@ -7,8 +7,8 @@ import { VIEWS } from '@/constants';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { ProjectListItem } from '@/types/projects.types';
 import { useToast } from '@/composables/useToast';
-import { useUIStore } from '@/stores/ui.store';
 import { sortByProperty } from '@/utils/sortUtils';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 type Props = {
 	collapsed: boolean;
@@ -21,7 +21,7 @@ const router = useRouter();
 const locale = useI18n();
 const toast = useToast();
 const projectsStore = useProjectsStore();
-const uiStore = useUIStore();
+const pageRedirectionHelper = usePageRedirectionHelper();
 
 const isCreatingProject = ref(false);
 const isComponentMounted = ref(false);
@@ -99,7 +99,7 @@ const canCreateProjects = computed(
 );
 
 const goToUpgrade = async () => {
-	await uiStore.goToUpgrade('rbac', 'upgrade-rbac');
+	await pageRedirectionHelper.goToUpgrade('rbac', 'upgrade-rbac');
 };
 
 onMounted(async () => {

packages/editor-ui/src/components/Projects/ProjectRoleUpgradeDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from '@/composables/useI18n';
-import { useUIStore } from '@/stores/ui.store';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 type Props = {
 	limit: number;
@@ -9,11 +9,11 @@ type Props = {
 
 const props = defineProps<Props>();
 const visible = defineModel<boolean>();
-const uiStore = useUIStore();
+const pageRedirectionHelper = usePageRedirectionHelper();
 const locale = useI18n();
 
 const goToUpgrade = async () => {
-	await uiStore.goToUpgrade('rbac', 'upgrade-rbac');
+	await pageRedirectionHelper.goToUpgrade('rbac', 'upgrade-rbac');
 	visible.value = false;
 };
 </script>

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

@@ -1,28 +1,16 @@
 <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 { useVersionsStore } from '@/stores/versions.store';
 import { useI18n } from '@/composables/useI18n';
-import { useUIStore } from '@/stores/ui.store';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const versionsStore = useVersionsStore();
-const uiStore = useUIStore();
+const pageRedirectionHelper = usePageRedirectionHelper();
 
 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>
@@ -39,22 +27,22 @@ const onInfoUrlClick = async () => {
 		</template>
 		<template #content>
 			<section :class="$style['description']">
-				<p v-if="currentVersion">
+				<p v-if="versionsStore.currentVersion">
 					{{
 						i18n.baseText('updatesPanel.youReOnVersion', {
-							interpolate: { currentVersionName: currentVersion.name },
+							interpolate: { currentVersionName: versionsStore.currentVersion.name },
 						})
 					}}
 					<strong>
-						<TimeAgo :date="currentVersion.createdAt" />
+						<TimeAgo :date="versionsStore.currentVersion.createdAt" />
 					</strong>
 					{{ i18n.baseText('updatesPanel.andIs') }}
 					<strong>
 						{{
 							i18n.baseText('updatesPanel.version', {
 								interpolate: {
-									numberOfVersions: nextVersions.length,
-									howManySuffix: nextVersions.length > 1 ? 's' : '',
+									numberOfVersions: versionsStore.nextVersions.length,
+									howManySuffix: versionsStore.nextVersions.length > 1 ? 's' : '',
 								},
 							})
 						}}
@@ -63,13 +51,13 @@ const onInfoUrlClick = async () => {
 				</p>
 
 				<n8n-button
-					v-if="infoUrl"
+					v-if="versionsStore.infoUrl"
 					:text="true"
 					type="primary"
 					size="large"
 					:class="$style['link']"
 					:bold="true"
-					@click="onInfoUrlClick"
+					@click="pageRedirectionHelper.goToVersions()"
 				>
 					<font-awesome-icon icon="info-circle" class="mr-2xs" />
 					<span>
@@ -78,7 +66,11 @@ const onInfoUrlClick = async () => {
 				</n8n-button>
 			</section>
 			<section :class="$style.versions">
-				<div v-for="version in nextVersions" :key="version.name" :class="$style['versions-card']">
+				<div
+					v-for="version in versionsStore.nextVersions"
+					:key="version.name"
+					:class="$style['versions-card']"
+				>
 					<VersionCard :version="version" />
 				</div>
 			</section>

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

@@ -30,6 +30,7 @@ import type { ProjectListItem, ProjectSharingData, Project } from '@/types/proje
 import { ProjectTypes } from '@/types/projects.types';
 import { useRolesStore } from '@/stores/roles.store';
 import type { RoleMap } from '@/types/roles.types';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 export default defineComponent({
 	name: 'WorkflowShareModal',
@@ -47,6 +48,7 @@ export default defineComponent({
 		return {
 			...useToast(),
 			...useMessage(),
+			...usePageRedirectionHelper(),
 		};
 	},
 	data() {
@@ -235,7 +237,7 @@ export default defineComponent({
 			});
 		},
 		goToUpgrade() {
-			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+			void this.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 		async initialize() {
 			if (this.isSharingEnabled) {

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

@@ -3,13 +3,15 @@ import BaseBanner from '@/components/banners/BaseBanner.vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { computed } from 'vue';
-import { useUIStore } from '@/stores/ui.store';
 import type { CloudPlanAndUsageData } from '@/Interface';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 const PROGRESS_BAR_MINIMUM_THRESHOLD = 8;
 
 const cloudPlanStore = useCloudPlanStore();
 
+const pageRedirectionHelper = usePageRedirectionHelper();
+
 const trialDaysLeft = computed(() => -1 * cloudPlanStore.trialDaysLeft);
 const messageText = computed(() => {
 	return locale.baseText('banners.trial.message', {
@@ -49,7 +51,7 @@ const currentExecutions = computed(() => {
 });
 
 function onUpdatePlanClick() {
-	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
+	void pageRedirectionHelper.goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
 }
 </script>
 

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import BaseBanner from '@/components/banners/BaseBanner.vue';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 import { i18n as locale } from '@/plugins/i18n';
-import { useUIStore } from '@/stores/ui.store';
 
 function onUpdatePlanClick() {
-	void useUIStore().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
+	void usePageRedirectionHelper().goToUpgrade('canvas-nav', 'upgrade-canvas-nav', 'redirect');
 }
 </script>
 

packages/editor-ui/src/components/executions/ExecutionsFilter.vue

@@ -10,11 +10,11 @@ import { i18n as locale } from '@/plugins/i18n';
 import { getObjectKeys, isEmpty } from '@/utils/typesUtils';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useUIStore } from '@/stores/ui.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 import type { Placement } from '@floating-ui/core';
 import { useDebounce } from '@/composables/useDebounce';
 import AnnotationTagsDropdown from '@/components/AnnotationTagsDropdown.ee.vue';
+import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
 
 export type ExecutionFilterProps = {
 	workflows?: Array<IWorkflowDb | IWorkflowShortResponse>;
@@ -25,10 +25,10 @@ export type ExecutionFilterProps = {
 const DATE_TIME_MASK = 'YYYY-MM-DD HH:mm';
 
 const settingsStore = useSettingsStore();
-const uiStore = useUIStore();
 const { debounce } = useDebounce();
 
 const telemetry = useTelemetry();
+const pageRedirectionHelper = usePageRedirectionHelper();
 
 const props = withDefaults(defineProps<ExecutionFilterProps>(), {
 	workflows: () => [] as Array<IWorkflowDb | IWorkflowShortResponse>,
@@ -149,7 +149,7 @@ const onFilterReset = () => {
 };
 
 const goToUpgrade = () => {
-	void uiStore.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
+	void pageRedirectionHelper.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
 };
 
 onBeforeMount(() => {