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
This commit is contained in:
Csaba Tuncsik 2023-04-19 11:00:09 +02:00 committed by GitHub
parent f9a810aaf7
commit 9eeba13156
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 97 additions and 71 deletions

View file

@ -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() {

View file

@ -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>

View file

@ -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: {

View file

@ -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) {

View file

@ -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();
}

View file

@ -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);
},
);
});

View file

@ -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');
},
},
});

View file

@ -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');
},
},
});