mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 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.error.title": "Activation failed",
"settings.usageAndPlan.license.activation.success.title": "License activated", "settings.usageAndPlan.license.activation.success.title": "License activated",
"settings.usageAndPlan.license.activation.success.message": "Your {name} {type} has been successfully 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.cancel": "@:_reusableBaseText.cancel",
"showMessage.ok": "OK", "showMessage.ok": "OK",
"showMessage.showDetails": "Show Details", "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 = { export type UsageTelemetry = {
instance_id: string; 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; plan_name_current: string;
usage: number; usage: number;
quota: number; quota: number;
@ -120,5 +120,6 @@ export const useUsageStore = defineStore('usage', () => {
usage: executionCount.value, usage: executionCount.value,
quota: executionLimit.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 () => { onMounted(async () => {
if (!usageStore.isDesktop) {
usageStore.setLoading(true); usageStore.setLoading(true);
if (route.query.key) { if (route.query.key) {
try { try {
@ -82,6 +83,7 @@ onMounted(async () => {
position: 'bottom-right', position: 'bottom-right',
}); });
} }
}
}); });
const sendUsageTelemetry = (action: UsageTelemetry['action']) => { const sendUsageTelemetry = (action: UsageTelemetry['action']) => {
@ -110,16 +112,32 @@ const onDialogClosed = () => {
const onDialogOpened = () => { const onDialogOpened = () => {
activationKeyInput.value?.focus(); activationKeyInput.value?.focus();
}; };
const openPricingPage = () => {
sendUsageTelemetry('desktop_view_plans');
window.open('https://n8n.io/pricing', '_blank');
};
</script> </script>
<template> <template>
<div v-if="!usageStore.isLoading"> <div>
<n8n-heading size="2xlarge">{{ locale.baseText('settings.usageAndPlan.title') }}</n8n-heading> <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"> <n8n-heading :class="$style.title" size="large">
<i18n path="settings.usageAndPlan.description"> <i18n path="settings.usageAndPlan.description">
<template #name>{{ usageStore.planName }}</template> <template #name>{{ usageStore.planName }}</template>
<template #type> <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> <span v-else>{{ locale.baseText('settings.usageAndPlan.edition') }}</span>
</template> </template>
</i18n> </i18n>
@ -148,7 +166,9 @@ const onDialogOpened = () => {
</div> </div>
</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"> <div :class="$style.buttons">
<n8n-button <n8n-button
@ -198,11 +218,16 @@ const onDialogOpened = () => {
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</div>
</template> </template>
<style lang="scss" module> <style lang="scss" module>
@import '@/styles/css-animation-helpers.scss'; @import '@/styles/css-animation-helpers.scss';
.actionBox {
margin: var(--spacing-2xl) 0 0;
}
.spacedFlex { .spacedFlex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;