Add ExecutionsUsage component

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/Interface.ts

@@ -1443,3 +1443,36 @@ export type VersionControlPreferences = {
 	branchColor: string;
 	publicKey?: string;
 };
+
+export interface PlanData {
+	planSpec: PlanSpec;
+	instance: Instance;
+	usage: Usage;
+}
+
+export interface PlanSpec {
+	planId: number;
+	monthlyExecutionsLimit: number;
+	activeWorkflowsLimit: number;
+	credentialsLimit: number;
+	isActive: boolean;
+	displayName: string;
+	metadata: Metadata;
+}
+export interface Metadata {
+	version: string;
+	group: string;
+	slug: string;
+	trial: Trial;
+}
+export interface Trial {
+	length: number;
+	gracePeriod: number;
+}
+export interface Instance {
+	createdAt: string;
+}
+export interface Usage {
+	executions: number;
+	activeWorkflows: number;
+}

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

@@ -0,0 +1,190 @@
+<template>
+	<div v-if="userIsTrialing" :class="$style.container">
+		<div v-if="!trialExpired && 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">
+						{{ daysLeftOnTrial }} {{ locale.baseText('executionUsage.currentUsage.count') }}
+					</n8n-text>
+				</template>
+			</i18n>
+		</div>
+		<div v-if="trialExpired" :class="$style.usageText">
+			<n8n-text size="xsmall" color="danger">
+				{{ locale.baseText('executionUsage.expired.text') }}
+			</n8n-text>
+		</div>
+		<div v-if="!trialHasExecutionsLeft" :class="$style.usageText">
+			<n8n-text size="xsmall">
+				{{ locale.baseText('executionUsage.ranOutOfExecutions.text') }}
+			</n8n-text>
+		</div>
+		<div v-if="!trialExpired" :class="$style.usageCounter">
+			<div :class="$style.progressBarSection">
+				<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')"
+				:class="$style.upgrade"
+				size="mini"
+				icon="gem"
+				type="success"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue';
+import { i18n as locale } from '@/plugins/i18n';
+import type { PlanData } from '@/Interface';
+import { DateTime } from 'luxon';
+
+const daysLeftOnTrial = ref(0);
+const trialExpired = ref(false);
+const currentPlan = ref<PlanData>({
+	planSpec: {
+		planId: 43039,
+		monthlyExecutionsLimit: 200,
+		activeWorkflowsLimit: 10,
+		credentialsLimit: 100,
+		isActive: false,
+		displayName: 'Trial',
+		metadata: {
+			version: 'v1',
+			group: 'trial',
+			slug: 'trial-1',
+			trial: {
+				length: 7,
+				gracePeriod: 3,
+			},
+		},
+	},
+	instance: {
+		createdAt: '2023-05-01T01:47:47Z',
+	},
+	usage: {
+		executions: 100,
+		activeWorkflows: 10,
+	},
+});
+
+onMounted(async () => {
+	const now = DateTime.utc();
+
+	if (isTrialExpired(now)) {
+		trialExpired.value = true;
+	}
+
+	daysLeftOnTrial.value = getDaysSinceTrialStarted(now);
+});
+
+const getDaysSinceTrialStarted = (now: DateTime) => {
+	const { days = 0 } = now.diff(getPlanStartingDate(), ['days']).toObject();
+	return Math.trunc(days);
+};
+
+const isTrialExpired = (now: DateTime) => {
+	const trialEndsAt = getPlanStartingDate()
+		.plus({ days: currentPlan.value.planSpec.metadata.trial.length })
+		.endOf('day');
+	return now.toMillis() > trialEndsAt.toMillis();
+};
+
+const getPlanStartingDate = () =>
+	DateTime.fromISO(currentPlan.value.instance.createdAt).startOf('day');
+
+const trialHasExecutionsLeft = computed(
+	() => currentPlan.value.usage.executions < currentPlan.value.planSpec.monthlyExecutionsLimit,
+);
+
+const userIsTrialing = computed(() => currentPlan.value.planSpec.metadata.group === 'trial');
+
+const currentExecutions = computed(() => currentPlan.value.usage.executions);
+
+const maxExecutions = computed(() => currentPlan.value.planSpec.monthlyExecutionsLimit);
+</script>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-background-light);
+	border-radius: 0px;
+	margin: 0;
+	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: 12.5px;
+}
+
+.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);
+}
+.progressBarSection {
+	width: 62.4px;
+	justify-content: center;
+	margin-right: 0px;
+}
+
+.danger {
+	color: var(--color-danger);
+}
+
+.executionsCountSection {
+	margin-left: var(--spacing-xs);
+}
+
+.upgradeButtonSection {
+	margin: var(--spacing-s);
+}
+
+.upgrade {
+	width: 100%;
+}
+</style>

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

@@ -25,6 +25,8 @@
 					/>
 				</div>
 			</template>
+
+			<template #beforeLowerMenu> <ExecutionsUsage v-if="!isCollapsed" /></template>
 			<template #menuSuffix>
 				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
 					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
@@ -134,6 +136,7 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useVersionsStore } from '@/stores/versions';
 import { isNavigationFailure } from 'vue-router';
 import { useVersionControlStore } from '@/stores/versionControl';
+import ExecutionsUsage from '@/components/ExecutionsUsages.vue';
 
 export default mixins(
 	genericHelpers,
@@ -147,6 +150,7 @@ export default mixins(
 	components: {
 		GiftNotificationIcon,
 		WorkflowSettings,
+		ExecutionsUsage,
 	},
 	data() {
 		return {

packages/editor-ui/src/n8n-theme-variables.scss

@@ -38,7 +38,7 @@ $header-height: 65px;
 
 // sidebar
 $sidebar-width: 65px;
-$sidebar-expanded-width: 200px;
+$sidebar-expanded-width: 202px;
 $sidebar-inactive-color: var(--color-foreground-xdark);
 $sidebar-active-color: $color-primary;
 

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

@@ -1811,5 +1811,12 @@
 	"userActivationSurveyModal.sharedFeedback.success": "Thanks for your feedback",
 	"userActivationSurveyModal.sharedFeedback.error": "Problem sharing feedback, try again",
 	"sso.login.divider": "or",
-	"sso.login.button": "Continue with SSO"
+	"sso.login.button": "Continue with SSO",
+	"executionUsage.currentUsage": "{text} {count}",
+	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
+	"executionUsage.currentUsage.count": "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."
 }

packages/editor-ui/src/plugins/icons/index.ts

@@ -128,6 +128,7 @@ import {
 	faTree,
 	faStickyNote as faSolidStickyNote,
 	faUserLock,
+	faGem,
 } from '@fortawesome/free-solid-svg-icons';
 import { faVariable } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
@@ -264,5 +265,6 @@ addIcon(faVariable);
 addIcon(faVideo);
 addIcon(faTree);
 addIcon(faUserLock);
+addIcon(faGem);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);