feat(editor): Add cloud ExecutionsUsage and API blocking using licenses

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -28,6 +28,7 @@
 				</el-menu>
 			</div>
 			<div :class="[$style.lowerContent, 'pb-2xs']">
+				<slot name="beforeLowerMenu"></slot>
 				<el-menu :defaultActive="defaultActive" :collapse="collapsed" v-on="$listeners">
 					<n8n-menu-item
 						v-for="item in lowerMenuItems"

packages/editor-ui/src/App.vue

@@ -30,7 +30,7 @@
 import Modals from '@/components/Modals.vue';
 import LoadingView from '@/views/LoadingView.vue';
 import Telemetry from '@/components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
+import { CLOUD_TRIAL_CHECK_INTERVAL, HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
 
 import mixins from 'vue-typed-mixins';
 import { userHelpers } from '@/mixins/userHelpers';
@@ -43,10 +43,12 @@ import { useUsersStore } from '@/stores/users.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useTemplatesStore } from '@/stores/templates.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useCloudPlanStore } from './stores/cloudPlan.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
+import { useUsageStore } from '@/stores/usage.store';
 
 export default mixins(newVersions, userHelpers).extend({
 	name: 'App',
@@ -71,6 +73,8 @@ export default mixins(newVersions, userHelpers).extend({
 			useUIStore,
 			useUsersStore,
 			useVersionControlStore,
+			useCloudPlanStore,
+			useUsageStore,
 		),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
@@ -181,6 +185,28 @@ export default mixins(newVersions, userHelpers).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
+		async checkForCloudPlanData(): Promise<void> {
+			try {
+				const plan = await this.cloudPlanStore.getOwnerCurrentPLan();
+				this.cloudPlanStore.setData(plan);
+				if (!this.cloudPlanStore.userIsTrialing) return;
+				const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
+				this.cloudPlanStore.setUsage(usage);
+				this.startPollingInstanceUsageData();
+			} catch {}
+		},
+		startPollingInstanceUsageData() {
+			const interval = setInterval(async () => {
+				try {
+					const usage = await this.cloudPlanStore.getInstanceCurrentUsage();
+					this.cloudPlanStore.setUsage(usage);
+					if (this.cloudPlanStore.trialExpired || this.cloudPlanStore.allExecutionsUsed) {
+						clearTimeout(interval);
+						return;
+					}
+				} catch {}
+			}, CLOUD_TRIAL_CHECK_INTERVAL);
+		},
 	},
 	async mounted() {
 		this.setTheme();
@@ -189,6 +215,7 @@ export default mixins(newVersions, userHelpers).extend({
 		this.authenticate();
 		this.redirectIfNecessary();
 		this.checkForNewVersions();
+		void this.checkForCloudPlanData();
 
 		this.loading = false;
 

packages/editor-ui/src/Interface.ts

@@ -1444,3 +1444,41 @@ export type VersionControlPreferences = {
 	branchColor: string;
 	publicKey?: string;
 };
+
+export declare namespace Cloud {
+	export interface PlanData {
+		planId: number;
+		monthlyExecutionsLimit: number;
+		activeWorkflowsLimit: number;
+		credentialsLimit: number;
+		isActive: boolean;
+		displayName: string;
+		expirationDate: string;
+		metadata: PlanMetadata;
+	}
+
+	export interface PlanMetadata {
+		version: 'v1';
+		group: 'opt-out' | 'opt-in' | 'trial';
+		slug: 'pro-1' | 'pro-2' | 'starter' | 'trial-1';
+		trial?: Trial;
+	}
+
+	interface Trial {
+		length: number;
+		gracePeriod: number;
+	}
+}
+
+export interface CloudPlanState {
+	data: Cloud.PlanData | null;
+	usage: InstanceUsage | null;
+}
+
+export interface InstanceUsage {
+	timeframe?: string;
+	executions: number;
+	activeWorkflows: number;
+}
+
+export type CloudPlanAndUsageData = Cloud.PlanData & { usage: InstanceUsage };

packages/editor-ui/src/api/cloudPlans.ts

@@ -0,0 +1,13 @@
+import type { Cloud, IRestApiContext, InstanceUsage } from '@/Interface';
+import { get } from '@/utils';
+
+export async function getCurrentPlan(
+	context: IRestApiContext,
+	cloudUserId: string,
+): Promise<Cloud.PlanData> {
+	return get(context.baseUrl, `/user/${cloudUserId}/plan`);
+}
+
+export async function getCurrentUsage(context: IRestApiContext): Promise<InstanceUsage> {
+	return get(context.baseUrl, '/limits');
+}

packages/editor-ui/src/components/ExecutionsUsage.vue

@@ -0,0 +1,161 @@
+<template>
+	<div :class="$style.container">
+		<div v-if="isTrialExpired" :class="$style.usageText">
+			<n8n-text size="xsmall" color="danger">
+				{{ locale.baseText('executionUsage.expired.text') }}
+			</n8n-text>
+		</div>
+		<div v-else-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
+			<i18n path="executionUsage.currentUsage">
+				<template #text>
+					<n8n-text size="xsmall" color="text-dark">
+						{{ locale.baseText('executionUsage.currentUsage.text') }}
+					</n8n-text>
+				</template>
+				<template #count>
+					<n8n-text size="xsmall" :bold="true" color="warning">
+						{{
+							locale.baseText('executionUsage.currentUsage.count', {
+								interpolate: { days: daysLeftOnTrial.toString() },
+							})
+						}}
+					</n8n-text>
+				</template>
+			</i18n>
+		</div>
+		<div v-else-if="!trialHasExecutionsLeft" :class="$style.usageText">
+			<n8n-text size="xsmall">
+				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
+			</n8n-text>
+		</div>
+		<div v-if="!isTrialExpired" :class="$style.usageCounter">
+			<div>
+				<progress
+					:class="[
+						trialHasExecutionsLeft ? $style.progressBarSuccess : $style.progressBarDanger,
+						$style.progressBar,
+					]"
+					:value="currentExecutions"
+					:max="maxExecutions"
+				></progress>
+			</div>
+			<div :class="$style.executionsCountSection">
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">
+					{{ currentExecutions }}/{{ maxExecutions }}
+				</n8n-text>
+				<n8n-text size="xsmall" :color="trialHasExecutionsLeft ? 'text-dark' : 'danger'">{{
+					locale.baseText('executionUsage.label.executions')
+				}}</n8n-text>
+			</div>
+		</div>
+
+		<div :class="$style.upgradeButtonSection">
+			<n8n-button
+				:label="locale.baseText('executionUsage.button.upgrade')"
+				size="mini"
+				icon="gem"
+				type="success"
+				:block="true"
+				@click="onUpgradeClicked"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { i18n as locale } from '@/plugins/i18n';
+import { DateTime } from 'luxon';
+import type { CloudPlanAndUsageData } from '@/Interface';
+import { CHANGE_PLAN_PAGE } from '@/constants';
+import type { PropType } from 'vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+	cloudPlanData: {
+		type: Object as PropType<CloudPlanAndUsageData>,
+		required: true,
+	},
+});
+
+const now = DateTime.utc();
+
+const daysLeftOnTrial = computed(() => {
+	const { days = 0 } = getPlanExpirationDate().diff(now, ['days']).toObject();
+	return Math.ceil(days);
+});
+
+const isTrialExpired = computed(() => {
+	const trialEndsAt = DateTime.fromISO(props.cloudPlanData.expirationDate);
+	return now.toMillis() > trialEndsAt.toMillis();
+});
+
+const getPlanExpirationDate = () => DateTime.fromISO(props.cloudPlanData.expirationDate);
+
+const trialHasExecutionsLeft = computed(() => {
+	if (!props.cloudPlanData?.usage) return 0;
+	return props.cloudPlanData.usage.executions < props.cloudPlanData.monthlyExecutionsLimit;
+});
+
+const currentExecutions = computed(() => {
+	if (!props.cloudPlanData?.usage) return 0;
+	const usedExecutions = props.cloudPlanData.usage.executions;
+	const executionsQuota = props.cloudPlanData.monthlyExecutionsLimit;
+	return usedExecutions > executionsQuota ? executionsQuota : usedExecutions;
+});
+
+const maxExecutions = computed(() => props.cloudPlanData.monthlyExecutionsLimit);
+
+const onUpgradeClicked = () => {
+	location.href = CHANGE_PLAN_PAGE;
+};
+</script>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-background-light);
+	border: var(--border-base);
+	border-right: 0;
+}
+
+.progressBar {
+	width: 62.4px;
+}
+
+.progressBarSuccess {
+	accent-color: var(--color-foreground-xdark);
+}
+
+.progressBarDanger {
+	accent-color: var(--color-danger);
+}
+
+.usageText {
+	margin-left: var(--spacing-s);
+	margin-right: var(--spacing-s);
+	margin-top: var(--spacing-xs);
+	line-height: var(--spacing-xs);
+}
+
+.usageCounter {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-left: var(--spacing-s);
+	margin-top: var(--spacing-2xs);
+	font-size: var(--font-size-3xs);
+}
+
+.danger {
+	color: var(--color-danger);
+}
+
+.executionsCountSection {
+	margin-left: var(--spacing-xs);
+}
+
+.upgradeButtonSection {
+	margin: var(--spacing-s);
+}
+</style>

packages/editor-ui/src/components/MainSidebar.vue

@@ -25,6 +25,12 @@
 					/>
 				</div>
 			</template>
+
+			<template #beforeLowerMenu>
+				<ExecutionsUsage
+					:cloud-plan-data="currentPlanAndUsageData"
+					v-if="!isCollapsed && userIsTrialing"
+			/></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
 					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
@@ -110,7 +116,7 @@
 </template>
 
 <script lang="ts">
-import type { IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
+import type { CloudPlanAndUsageData, IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
@@ -134,6 +140,8 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useVersionsStore } from '@/stores/versions.store';
 import { isNavigationFailure } from 'vue-router';
 import { useVersionControlStore } from '@/stores/versionControl.store';
+import ExecutionsUsage from '@/components/ExecutionsUsage.vue';
+import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 
 export default mixins(
 	genericHelpers,
@@ -146,6 +154,7 @@ export default mixins(
 	components: {
 		GiftNotificationIcon,
 		WorkflowSettings,
+		ExecutionsUsage,
 	},
 	setup() {
 		return {
@@ -154,7 +163,6 @@ export default mixins(
 	},
 	data() {
 		return {
-			// @ts-ignore
 			basePath: '',
 			fullyExpanded: false,
 		};
@@ -168,6 +176,7 @@ export default mixins(
 			useVersionsStore,
 			useWorkflowsStore,
 			useVersionControlStore,
+			useCloudPlanStore,
 		),
 		currentBranch(): string {
 			return this.versionControlStore.state.currentBranch;
@@ -330,6 +339,18 @@ export default mixins(
 			];
 			return [...items, ...regularItems];
 		},
+		userIsTrialing(): boolean {
+			return this.cloudPlanStore.userIsTrialing;
+		},
+		currentPlanAndUsageData(): CloudPlanAndUsageData | null {
+			const planData = this.cloudPlanStore.currentPlanData;
+			const usage = this.cloudPlanStore.currentUsageData;
+			if (!planData || !usage) return null;
+			return {
+				...planData,
+				usage,
+			};
+		},
 	},
 	async mounted() {
 		this.basePath = this.rootStore.baseUrl;

packages/editor-ui/src/constants.ts

@@ -551,3 +551,11 @@ export const ALLOWED_HTML_TAGS = [
 ];
 
 export const GITHUB_STARS_BANNER_SHOW_UNTIL_DATE = new Date('2023-06-01');
+
+export const CHANGE_PLAN_PAGE = 'https://app.n8n.cloud/account/change-plan';
+
+export const CLOUD_BASE_URL_STAGING = 'https://stage-app.n8n.cloud';
+
+export const CLOUD_BASE_URL_PRODUCTION = 'https://app.n8n.cloud';
+
+export const CLOUD_TRIAL_CHECK_INTERVAL = 5000;

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

@@ -1823,5 +1823,12 @@
 	"sso.login.divider": "or",
 	"sso.login.button": "Continue with SSO",
 	"pushConnection.executionError": "There was a problem executing the workflow{error}",
-	"pushConnection.executionError.details": "<br /><strong>{details}</strong>"
+	"pushConnection.executionError.details": "<br /><strong>{details}</strong>",
+	"executionUsage.currentUsage": "{text} {count}",
+	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
+	"executionUsage.currentUsage.count": "{days} days left.",
+	"executionUsage.label.executions": "Executions",
+	"executionUsage.button.upgrade": "Upgrade plan",
+	"executionUsage.expired.text": "You're trial is over. Upgrade now to keep your automation data",
+	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating."
 }