feat(editor): Add usage and plan pages (#4819)

* feat(editor): Usage and plan page (#4793)

feat(editor): usage and plan page

* feat(editor): Update Usage and plan page (#4842)

* feat(editor): usage and plan store

* feat(editor): usage and plan page updates

* feat(editor): usage and plan add buttons and alert

* tes(editor): usage and plan store

* tes(editor): usage remove refresh button and add link to view plans

* tes(editor): usage use info tip

* tes(editor): usage info style

* feat(editor): Get quotas data (#4866)

feat(editor): get quotas data

* feat(editor): In-app experience (#4875)

* feat: Add license quotas endpoint

* feat: Add trigger count to workflow activation process

* refactor: Get quotas from db

* feat: Add license information

* ✨ - finalised GET /license endpoint

* 🔨 - getActiveTriggerCount return 0 instead of null

* 🐛 - ignore manualTrigger when counting active triggers

* ✨ - add activation endpoint

* ✨ - added renew endpoint

* 🔨 - added return type interfaces

* 🔨 - handle license errors where methods are called

* 🔨 - rename function to match name from lib

* feat(editor): usage add plans buttons logic

* 🚨 - testing new License methods

* feat(editor): usage add more business logic

* chore(editor): code formatting

* 🚨 - added license api tests

* fix(editor): usage store

* fix(editor): usage update translations

* feat(editor): usage add license activation modal

* feat(editor): usage change subscription app url

* feat(editor): usage add contact us link

* feat(editor): usage fix modal width

* ✨ - Add renewal tracking metric

* ✨ - add license data to pulse event

* 🔨 - set default triggercount on entity model

* ✨ - add db migrations for mysql and postgres

* fix(editor): Usage api call data processing and error handling

* fix(editor): Usage fix activation query key

* 🚨 - add initDb to telemetry tests

* 🔨 - move getlicensedata to licenseservice

* 🔨 - return 403 instead of 404 to non owners

* 🔨 - move owner checking to middleware

* 🐛 - fixed incorrectly returned error from middleware

* 🐛 - using mock instead of test db for pulse tests

* fix(editor): Usage fix activation and add success messages

* fix(editor): Usage should not renew activation right after activation

* 🚨 - skipping failing pulse tests for now

* fix(editor): Usage add telemetry calls and apply design review outcomes

* feat(editor): Hide usage page according to BE flag

* feat(editor): Usage modify key activation flow

* feat(editor): Usage change subscription app url

* feat(editor): Usage add telemetry for manage plan

* feat(editor): Usage extend link url query params

* feat(editor): Usage add line chart if there is a workflow limit

* feat(editor): Usage remove query after key activation redirection

* fix(editor): Usage handle limit exceeded workflow chart, add focus to input when modal opened

* fix(editor): Usage activation can return router promise when removing query

* fix(editor): Usage and plan design review

* 🐛 - fix renew endpoint hanging issue

* 🐛 - fix license activation bug

* fix(editor): Usage proper translation for plans and/or editions

* fix(editor): Usage apply David's review results

* fix(editor): Usage page set as default and first under Settings

* fix(editor): Usage open subscription app in new tab

* fix(editor): Usage page having key query param a plan links

* test: Fix broken test

* fix(editor): Usage page address review

* 🧪 Flush promises on telemetry tests

* ⚡ Extract helper with `setImmediate`

* 🔥 Remove leftovers

* ⚡ Use Adi's helper

* refactor: Comment broken tests

* refactor: add Tenant id to settings

* feat: add environment to license endpoints

* refactor: Move license environment to general settings

* fix: fix routing bug

* fix(editor): Usage page some code review changes and formatting

* fix(editor): Usage page remove direct usage of reusable translation keys

* fix(editor): Usage page async await instead of then

* fix(editor): Usage page show some content only if network requests in component mounted were successful

* chore(editor): code formatting

* fix(editor): Usage checking license environment

* feat(editor): Improve license activation error messages (no-changelog) (#4958)

* fix(editor): Usage changing activation error title

* remove unnecessary import

* fix(editor): Usage refactor notification showing

* fix(editor): Usage using notification directly in store actions

Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: freyamade <freya@n8n.io>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Cornelius Suermann <cornelius@n8n.io>

* fix(editor): Usage change mounted lifecycle logic

* fix(editor): Usage return after successful activation in mounted

* fix: remove console log

* test: fix tests related to settings (#4979)

Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: freyamade <freya@n8n.io>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Cornelius Suermann <cornelius@n8n.io>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

packages/editor-ui/src/router.ts

@@ -31,6 +31,7 @@ import { RouteConfigSingleView } from 'vue-router/types/router';
 import { VIEWS } from './constants';
 import { useSettingsStore } from './stores/settings';
 import { useTemplatesStore } from './stores/templates';
+import SettingsUsageAndPlanVue from './views/SettingsUsageAndPlan.vue';
 
 Vue.use(Router);
 
@@ -427,6 +428,34 @@ const router = new Router({
 			component: SettingsView,
 			props: true,
 			children: [
+				{
+					path: 'usage',
+					name: VIEWS.USAGE,
+					components: {
+						settingsView: SettingsUsageAndPlanVue,
+					},
+					meta: {
+						telemetry: {
+							pageCategory: 'settings',
+							getProperties(route: Route) {
+								return {
+									feature: 'usage',
+								};
+							},
+						},
+						permissions: {
+							allow: {
+								loginStatus: [LOGIN_STATUS.LoggedIn],
+							},
+							deny: {
+								shouldDeny: () => {
+									const settingsStore = useSettingsStore();
+									return settingsStore.settings.hideUsagePage === true;
+								},
+							},
+						},
+					},
+				},
 				{
 					path: 'personal',
 					name: VIEWS.PERSONAL_SETTINGS,