Skip to content

Commit

Permalink
feat(editor): Support autologin for upgrade path (#7316)
Browse files Browse the repository at this point in the history
Github issue / Community forum post (link here to close automatically):
  • Loading branch information
RicardoE105 authored Oct 6, 2023
1 parent ab647b2 commit 1dfa052
Show file tree
Hide file tree
Showing 26 changed files with 101 additions and 54 deletions.
6 changes: 4 additions & 2 deletions packages/editor-ui/src/Interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1627,7 +1627,8 @@ export type CloudUpdateLinkSourceType =
| 'sso'
| 'usage_page'
| 'settings-users'
| 'variables';
| 'variables'
| 'community-nodes';

export type UTMCampaign =
| 'upgrade-custom-data-filter'
Expand All @@ -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]: {
Expand Down
4 changes: 4 additions & 0 deletions packages/editor-ui/src/api/cloudPlans.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/components/ExecutionFilter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/components/ExecutionsUsage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/components/banners/TrialBanner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
},
},
});
Expand Down
3 changes: 0 additions & 3 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
43 changes: 36 additions & 7 deletions packages/editor-ui/src/stores/__tests__/ui.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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);
},
);

Expand Down
7 changes: 6 additions & 1 deletion packages/editor-ui/src/stores/cloudPlan.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -161,5 +165,6 @@ export const useCloudPlanStore = defineStore(STORES.CLOUD_PLAN, () => {
reset,
checkForCloudPlanData,
fetchUserCloudAccount,
getAutoLoginCode,
};
});
48 changes: 31 additions & 17 deletions packages/editor-ui/src/stores/ui.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -214,7 +213,6 @@ export const useUIStore = defineStore(STORES.UI, {
}

return {
upgradeLinkUrl: `contextual.upgradeLinkUrl${contextKey}`,
feature: {
unavailable: {
title: `contextual.feature.unavailable.title${contextKey}`,
Expand Down Expand Up @@ -343,18 +341,29 @@ export const useUIStore = defineStore(STORES.UI, {
};
},
upgradeLinkUrl() {
return (source: string, utm_campaign: string): string => {
const linkUrlTranslationKey = this.contextBasedTranslationKeys
.upgradeLinkUrl as BaseTextKey;
let linkUrl = locale.baseText(linkUrlTranslationKey);
return async (source: string, utm_campaign: string, deploymentType: string) => {
let linkUrl = '';

if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
linkUrl = `${linkUrl}?ref=${source}`;
} else if (linkUrlTranslationKey.endsWith('.desktop')) {
linkUrl = `${linkUrl}&utm_campaign=${utm_campaign || source}`;
const searchParams = new URLSearchParams();

if (deploymentType === 'cloud') {
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;
}

if (utm_campaign) {
searchParams.set('utm_campaign', utm_campaign);
}

return linkUrl;
if (source) {
searchParams.set('source', source);
}
return `${linkUrl}?${searchParams.toString()}`;
};
},
headerHeight() {
Expand Down Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsApiView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsAuditLogs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
6 changes: 1 addition & 5 deletions packages/editor-ui/src/views/SettingsCommunityNodesView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,7 @@ export default defineComponent({
this.openInstallModal();
},
goToUpgrade(): void {
const linkUrl = `${this.$locale.baseText(
'contextual.upgradeLinkUrl.desktop',
)}&utm_campaign=upgrade-community-nodes&selfHosted=true`;
window.open(linkUrl, '_blank');
void this.uiStore.goToUpgrade('community-nodes', 'upgrade-community-nodes');
},
openInstallModal(): void {
const telemetryPayload = {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsExternalSecrets.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ onMounted(() => {
});
function goToUpgrade() {
uiStore.goToUpgrade('external-secrets', 'upgrade-external-secrets');
void uiStore.goToUpgrade('external-secrets', 'upgrade-external-secrets');
}
</script>

Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsLdapView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsLogStreamingView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsSourceControl.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsSso.vue
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const onTest = async () => {
};
const goToUpgrade = () => {
uiStore.goToUpgrade('sso', 'upgrade-sso');
void uiStore.goToUpgrade('sso', 'upgrade-sso');
};
onMounted(async () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor-ui/src/views/SettingsUsageAndPlan.vue
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const onAddActivationKey = () => {
};
const onViewPlans = () => {
uiStore.goToUpgrade('usage_page', 'open');
void uiStore.goToUpgrade('usage_page', 'open');
sendUsageTelemetry('view_plans');
};
Expand Down
Loading

0 comments on commit 1dfa052

Please sign in to comment.