refactor(editor): Go to upgrade page (#5994)

* refactor(editor): Go to upgrade page * test(editor): add UI store upgrade link tests * fix(editor): update execution filter links * fix(editor): update unit test * fix(editor): update unit test * fix(editor): remove unused variables
2025-03-05 20:50:17 -08:00 · 2023-04-19 11:00:09 +02:00 · 2023-04-19 11:00:09 +02:00 · 9eeba13156
parent f9a810aaf7
commit 9eeba13156
8 changed files with 97 additions and 71 deletions
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@ -181,17 +181,7 @@ export default mixins(showMessage).extend({
 			this.modalBus.emit('close');
 		},
 		goToUpgrade() {
-			const linkUrlTranslationKey = this.uiStore.contextBasedTranslationKeys
-				.upgradeLinkUrl as BaseTextKey;
-			let linkUrl = this.$locale.baseText(linkUrlTranslationKey);
-
-			if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-				linkUrl = `${this.usageStore.viewPlansUrl}&source=credential_sharing`;
-			} else if (linkUrlTranslationKey.endsWith('.desktop')) {
-				linkUrl = `${linkUrl}&utm_campaign=upgrade-credentials-sharing`;
-			}
-
-			window.open(linkUrl, '_blank');
+			this.uiStore.goToUpgrade('credential_sharing', 'upgrade-credentials-sharing');
 		},
 	},
 	mounted() {
--- a/packages/editor-ui/src/components/ExecutionFilter.vue
+++ b/packages/editor-ui/src/components/ExecutionFilter.vue
@ -13,6 +13,7 @@ import { getObjectKeys, isEmpty } from '@/utils';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsageStore } from '@/stores/usage';
+import { useUIStore } from '@/stores/ui';

 export type ExecutionFilterProps = {
 	workflows?: IWorkflowShortResponse[];
@ -20,10 +21,10 @@ export type ExecutionFilterProps = {
 };

 const DATE_TIME_MASK = 'yyyy-MM-dd HH:mm';
-const CLOUD_UPGRADE_LINK = 'https://app.n8n.cloud/manage?edition=cloud';

 const settingsStore = useSettingsStore();
 const usageStore = useUsageStore();
+const uiStore = useUIStore();
 const props = withDefaults(defineProps<ExecutionFilterProps>(), {
 	popoverPlacement: 'bottom',
 });
@ -32,11 +33,6 @@ const emit = defineEmits<{
 }>();
 const debouncedEmit = debounce(emit, 500);

-const viewPlansLink = computed(() =>
-	settingsStore.isCloudDeployment
-		? CLOUD_UPGRADE_LINK
-		: `${usageStore.viewPlansUrl}&source=custom-data-filter`,
-);
 const isAdvancedExecutionFilterEnabled = computed(() =>
 	settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.AdvancedExecutionFilters),
 );
@ -128,6 +124,10 @@ const onFilterReset = () => {
 	emit('filterChanged', filter);
 };

+const goToUpgrade = () => {
+	uiStore.goToUpgrade('custom-data-filter', 'upgrade-custom-data-filter');
+};
+
 onBeforeMount(() => {
 	emit('filterChanged', filter);
 });
@ -261,8 +261,8 @@ onBeforeMount(() => {
 								<i18n tag="span" path="executionsFilter.customData.inputTooltip">
 									<template #link>
 										<a
-											target="_blank"
-											:href="viewPlansLink"
+											href="#"
+											@click.prevent="goToUpgrade"
 											data-test-id="executions-filter-view-plans-link"
 											>{{ $locale.baseText('executionsFilter.customData.inputTooltip.link') }}</a
 										>
@ -288,7 +288,7 @@ onBeforeMount(() => {
 							<template #content>
 								<i18n tag="span" path="executionsFilter.customData.inputTooltip">
 									<template #link>
-										<a target="_blank" :href="viewPlansLink">{{
+										<a href="#" @click.prevent="goToUpgrade">{{
 											$locale.baseText('executionsFilter.customData.inputTooltip.link')
 										}}</a>
 									</template>
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@ -529,17 +529,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 			}
 		},
 		goToUpgrade() {
-			const linkUrlTranslationKey = this.uiStore.contextBasedTranslationKeys
-				.upgradeLinkUrl as BaseTextKey;
-			let linkUrl = this.$locale.baseText(linkUrlTranslationKey);
-
-			if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-				linkUrl = `${this.usageStore.viewPlansUrl}&source=workflow_sharing`;
-			} else if (linkUrlTranslationKey.endsWith('.desktop')) {
-				linkUrl = `${linkUrl}&utm_campaign=upgrade-workflow-sharing`;
-			}
-
-			window.open(linkUrl, '_blank');
+			this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 	},
 	watch: {
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@ -438,17 +438,7 @@ export default mixins(showMessage).extend({
 			});
 		},
 		goToUpgrade() {
-			const linkUrlTranslationKey = this.uiStore.contextBasedTranslationKeys
-				.upgradeLinkUrl as BaseTextKey;
-			let linkUrl = this.$locale.baseText(linkUrlTranslationKey);
-
-			if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-				linkUrl = `${this.usageStore.viewPlansUrl}&source=workflow_sharing`;
-			} else if (linkUrlTranslationKey.endsWith('.desktop')) {
-				linkUrl = `${linkUrl}&utm_campaign=upgrade-workflow-sharing`;
-			}
-
-			window.open(linkUrl, '_blank');
+			this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
 		},
 		async initialize() {
 			if (this.isSharingEnabled) {
--- a/packages/editor-ui/src/components/tests/ExecutionFilter.test.ts
+++ b/packages/editor-ui/src/components/tests/ExecutionFilter.test.ts
@ -12,10 +12,6 @@ import type { IWorkflowShortResponse, ExecutionFilterType } from '@/Interface';

 Vue.use(PiniaVuePlugin);

-const CLOUD_HOST = 'https://app.n8n.cloud';
-const PRODUCTION_SUBSCRIPTION_HOST = 'https://subscription.n8n.io';
-const DEVELOPMENT_SUBSCRIPTION_HOST = 'https://staging-subscription.n8n.io';
-
 const defaultFilterState: ExecutionFilterType = {
 	status: 'all',
 	workflowId: 'all',
@ -62,17 +58,17 @@ const renderOptions: RenderOptions<ExecutionFilter> = {

 describe('ExecutionFilter', () => {
 	test.each([
-		['development', 'default', DEVELOPMENT_SUBSCRIPTION_HOST, false, workflowsData],
-		['development', 'default', '', true, workflowsData],
-		['development', 'cloud', CLOUD_HOST, false, undefined],
-		['development', 'cloud', '', true, undefined],
-		['production', 'cloud', CLOUD_HOST, false, workflowsData],
-		['production', 'cloud', '', true, undefined],
-		['production', 'default', PRODUCTION_SUBSCRIPTION_HOST, false, undefined],
-		['production', 'default', '', true, workflowsData],
+		['development', 'default', false, workflowsData],
+		['development', 'default', true, workflowsData],
+		['development', 'cloud', false, undefined],
+		['development', 'cloud', true, undefined],
+		['production', 'cloud', false, workflowsData],
+		['production', 'cloud', true, undefined],
+		['production', 'default', false, undefined],
+		['production', 'default', true, workflowsData],
 	])(
 		'renders in %s environment on %s deployment with advancedExecutionFilters %s and workflows %s',
-		async (environment, deployment, plansLinkUrlBase, advancedExecutionFilters, workflows) => {
+		async (environment, deployment, advancedExecutionFilters, workflows) => {
 			initialState[STORES.SETTINGS].settings.license.environment = environment;
 			initialState[STORES.SETTINGS].settings.deployment.type = deployment;
 			initialState[STORES.SETTINGS].settings.enterprise.advancedExecutionFilters =
@ -86,11 +82,7 @@ describe('ExecutionFilter', () => {
 			await userEvent.click(getByTestId('executions-filter-button'));
 			await userEvent.hover(getByTestId('execution-filter-saved-data-key-input'));

-			if (!advancedExecutionFilters) {
-				expect(getByTestId('executions-filter-view-plans-link').getAttribute('href')).contains(
-					plansLinkUrlBase,
-				);
-			} else {
+			if (advancedExecutionFilters) {
 				expect(queryByTestId('executions-filter-view-plans-link')).not.toBeInTheDocument();
 			}

--- a/packages/editor-ui/src/stores/tests/ui.test.ts
+++ b/packages/editor-ui/src/stores/tests/ui.test.ts
@ -0,0 +1,53 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { merge } from 'lodash-es';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+
+let uiStore: ReturnType<typeof useUIStore>;
+let settingsStore: ReturnType<typeof useSettingsStore>;
+
+describe('UI store', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+		uiStore = useUIStore();
+		settingsStore = useSettingsStore();
+	});
+
+	test.each([
+		[
+			'default',
+			'production',
+			'https://subscription.n8n.io?instanceid=123abc&version=0.223.0&source=test_source',
+		],
+		[
+			'default',
+			'development',
+			'https://staging-subscription.n8n.io?instanceid=123abc&version=0.223.0&source=test_source',
+		],
+		[
+			'desktop_win',
+			'production',
+			'https://n8n.io/pricing/?utm_source=n8n-internal&utm_medium=desktop&utm_campaign=utm-test-campaign',
+		],
+		['cloud', 'production', 'https://app.n8n.cloud/manage?edition=cloud'],
+	])(
+		'"upgradeLinkUrl" should generate the correct URL for "%s" deployment and "%s" license environment',
+		(type, environment, expectation) => {
+			settingsStore.setSettings(
+				merge({}, SETTINGS_STORE_DEFAULT_STATE.settings, {
+					deployment: {
+						type,
+					},
+					license: {
+						environment,
+					},
+					instanceId: '123abc',
+					versionCli: '0.223.0',
+				}),
+			);
+
+			expect(uiStore.upgradeLinkUrl('test_source', 'utm-test-campaign')).toBe(expectation);
+		},
+	);
+});
--- a/packages/editor-ui/src/stores/ui.ts
+++ b/packages/editor-ui/src/stores/ui.ts
@ -48,6 +48,8 @@ import { useRootStore } from './n8nRootStore';
 import { getCurlToJson } from '@/api/curlHelper';
 import { useWorkflowsStore } from './workflows';
 import { useSettingsStore } from './settings';
+import { useUsageStore } from './usage';
+import { i18n as locale, BaseTextKey } from '@/plugins/i18n';

 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
@ -311,6 +313,22 @@ export const useUIStore = defineStore(STORES.UI, {
 				return false;
 			};
 		},
+		upgradeLinkUrl() {
+			return (source: string, utm_campaign: string): string => {
+				const usageStore = useUsageStore();
+				const linkUrlTranslationKey = this.contextBasedTranslationKeys
+					.upgradeLinkUrl as BaseTextKey;
+				let linkUrl = locale.baseText(linkUrlTranslationKey);
+
+				if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
+					linkUrl = `${usageStore.viewPlansUrl}&source=${source}`;
+				} else if (linkUrlTranslationKey.endsWith('.desktop')) {
+					linkUrl = `${linkUrl}&utm_campaign=${utm_campaign || source}`;
+				}
+
+				return linkUrl;
+			};
+		},
 	},
 	actions: {
 		setMode(name: string, mode: string): void {
@ -460,5 +478,8 @@ export const useUIStore = defineStore(STORES.UI, {
 			const rootStore = useRootStore();
 			return await getCurlToJson(rootStore.getRestApiContext, curlCommand);
 		},
+		goToUpgrade(source: string, utm_campaign: string): void {
+			window.open(this.upgradeLinkUrl(source, utm_campaign), '_blank');
+		},
 	},
 });
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@ -152,17 +152,7 @@ export default mixins(showMessage, copyPaste).extend({
 			}
 		},
 		goToUpgrade() {
-			const linkUrlTranslationKey = this.uiStore.contextBasedTranslationKeys
-				.upgradeLinkUrl as BaseTextKey;
-			let linkUrl = this.$locale.baseText(linkUrlTranslationKey);
-
-			if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
-				linkUrl = `${this.usageStore.viewPlansUrl}&source=users`;
-			} else if (linkUrlTranslationKey.endsWith('.desktop')) {
-				linkUrl = `${linkUrl}&utm_campaign=upgrade-users`;
-			}
-
-			window.open(linkUrl, '_blank');
+			this.uiStore.goToUpgrade('users', 'upgrade-users');
 		},
 	},
 });