mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 04:04:06 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Usage and plans page on Desktop (#5045)

Browse source
This commit is contained in:
Csaba Tuncsik 2022-12-28 17:07:34 +01:00 committed by GitHub
parent 16bd7610fc
commit 26e2321a71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 128 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -1148,6 +1148,8 @@
"settings.usageAndPlan.license.activation.error.title": "Activation failed",
"settings.usageAndPlan.license.activation.success.title": "License activated",
"settings.usageAndPlan.license.activation.success.message": "Your {name} {type} has been successfully activated.",
"settings.usageAndPlan.desktop.title": "Upgrade to n8n Cloud for the full experience",
"settings.usageAndPlan.desktop.description": "Cloud plans allow you to collaborate with teammates. Plus you don’t need to leave this app open all the time for your workflows to run.",
"showMessage.cancel": "@:_reusableBaseText.cancel",
"showMessage.ok": "OK",
"showMessage.showDetails": "Show Details",

3
packages/editor-ui/src/stores/usage.ts
View file

@ -8,7 +8,7 @@ import { useUsersStore } from '@/stores/users';
export type UsageTelemetry = {
instance_id: string;
action: 'view_plans' | 'manage_plan' | 'add_activation_key';
action: 'view_plans' | 'manage_plan' | 'add_activation_key' | 'desktop_view_plans';
plan_name_current: string;
usage: number;
quota: number;
@ -120,5 +120,6 @@ export const useUsageStore = defineStore('usage', () => {
usage: executionCount.value,
quota: executionLimit.value,
})),
isDesktop: computed(() => settingsStore.isDesktopDeployment),
};
});

31
packages/editor-ui/src/views/SettingsUsageAndPlan.vue
View file

@ -53,6 +53,7 @@ const onLicenseActivation = async () => {
};
onMounted(async () => {
if (!usageStore.isDesktop) {
usageStore.setLoading(true);
if (route.query.key) {
try {
@ -82,6 +83,7 @@ onMounted(async () => {
position: 'bottom-right',
});
}
}
});
const sendUsageTelemetry = (action: UsageTelemetry['action']) => {
@ -110,16 +112,32 @@ const onDialogClosed = () => {
const onDialogOpened = () => {
activationKeyInput.value?.focus();
};
const openPricingPage = () => {
sendUsageTelemetry('desktop_view_plans');
window.open('https://n8n.io/pricing', '_blank');
};
</script>
<template>
<div v-if="!usageStore.isLoading">
<div>
<n8n-heading size="2xlarge">{{ locale.baseText('settings.usageAndPlan.title') }}</n8n-heading>
<n8n-action-box
v-if="usageStore.isDesktop"
:class="$style.actionBox"
:heading="locale.baseText('settings.usageAndPlan.desktop.title')"
:description="locale.baseText('settings.usageAndPlan.desktop.description')"
:buttonText="locale.baseText('settings.usageAndPlan.button.plans')"
@click="openPricingPage"
/>
<div v-if="!usageStore.isDesktop && !usageStore.isLoading">
<n8n-heading :class="$style.title" size="large">
<i18n path="settings.usageAndPlan.description">
<template #name>{{ usageStore.planName }}</template>
<template #type>
<span v-if="usageStore.planId">{{ locale.baseText('settings.usageAndPlan.plan') }}</span>
<span v-if="usageStore.planId">{{
locale.baseText('settings.usageAndPlan.plan')
}}</span>
<span v-else>{{ locale.baseText('settings.usageAndPlan.edition') }}</span>
</template>
</i18n>
@ -148,7 +166,9 @@ const onDialogOpened = () => {
</div>
</div>
<n8n-info-tip>{{ locale.baseText('settings.usageAndPlan.activeWorkflows.hint') }}</n8n-info-tip>
<n8n-info-tip>{{
locale.baseText('settings.usageAndPlan.activeWorkflows.hint')
}}</n8n-info-tip>
<div :class="$style.buttons">
<n8n-button
@ -198,11 +218,16 @@ const onDialogOpened = () => {
</template>
</el-dialog>
</div>
</div>
</template>
<style lang="scss" module>
@import '@/styles/css-animation-helpers.scss';
.actionBox {
margin: var(--spacing-2xl) 0 0;
}
.spacedFlex {
display: flex;
justify-content: space-between;