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

* Add ExecutionsUsage component

* set $sidebar-expanded-width back to 200px

* add days using interpolation

* Rename PlanData type to CloudPlanData

* Rename Metadata type to PlanMetadata

* Make prop block in the update button

* Use variable in line-height

* Remove progressBarSection class

* fix trial expiration calculation

* mock expirationDate and fix issue with days left

* Remove unnecesary property from class .container

* inject component data via props

* Check for plan data during app mounting and keep data in the store

* Remove mounted hook

* redirect when upgrade plan is clicked

* Remove computed properties

* Remove instance property as it's not needed anymore

* Flatten plan object

* remove console.log

* Add all cloud types within its own namespace

* keep redirection inside component

* get computed properties back

* Improve polling logic

* Move cloudData to its own store

* Remove commented interfaces

* remove cloudPlan from user store

* fix imports

* update logic for userIsTrialing method

* centralize userIsTrialing method

* redirect to production change plan page always

* Call staging or production cloud api depending on base URL

* remove setting store form ExecutionUsage.vue

* fix linting issue

* Add trial group to PlanMetadata group

* Move helpers into the store

* make staging url check more specific

* make cloud state nullable

* fix linting issue

* swap mockup date for endpoint

* Make getCurrentPlan async

* asas

* Improvements

* small improvements

* chore: resolve conflicts

* make sure there is data before calculating trial expiration

* Fix issue with component not loading on first page load

* type safety improvements

* apply component ui feedback

* fix linting issue

* chore: clean up unnecessary change from merge conflict

* feat: Block api feature using licenses, show notice page for trial cloud users (#6187)

* rename planSpec to plan

* Remove instance property as it's not needed anymore

* Flatten plan object

* remove console.log

* feat: disable api using license

* feat: add api page

* chore: resolve conflicts

* chore: resolve conflicts

* feat: update and refactor a bit

* fix: update endpoints

* fix: update endpoints

* fix: use host

* feat: update copy

* fix linting issues

---------

Co-authored-by: ricardo <ricardoespinoza105@gmail.com>

* add pluralization to days left text

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

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

@@ -1034,6 +1034,8 @@
 	"pushConnection.pollingNode.dataNotFound.message": "We didn’t find any data in {service} to simulate an event. Please create one in {service} and try again.",
 	"pushConnection.executionFailed": "Execution failed",
 	"pushConnection.executionFailed.message": "There might not be enough memory to finish the execution. Tips for avoiding this <a target=\"_blank\" href=\"https://docs.n8n.io/flow-logic/error-handling/memory-errors/\">here</a>",
+    "pushConnection.executionError": "There was a problem executing the workflow{error}",
+	"pushConnection.executionError.details": "<br /><strong>{details}</strong>",
 	"resourceLocator.id.placeholder": "Enter ID...",
 	"resourceLocator.mode.id": "By ID",
 	"resourceLocator.mode.url": "By URL",
@@ -1245,6 +1247,9 @@
 	"settings.log-streaming.destinationDelete.message": "Are you sure that you want to delete '{destinationName}'?",
 	"settings.log-streaming.addDestination": "Add new destination",
 	"settings.log-streaming.destinations": "Log destinations",
+	"settings.api.trial.upgradePlan.title": "Upgrade to use API",
+	"settings.api.trial.upgradePlan.description": "To prevent abuse, we limit API access to your workspace during your trial. If this is hindering your evaluation of n8n, please contact <a href=\"mailto:support@n8n.io\">support@n8n.io</a>",
+	"settings.api.trial.upgradePlan.cta": "Upgrade plan",
 	"settings.api.create.description": "Control n8n programmatically using the <a href=\"https://docs.n8n.io/api\" target=\"_blank\">n8n API</a>",
 	"settings.api.create.button": "Create an API Key",
 	"settings.api.create.button.loading": "Creating API Key...",
@@ -1822,6 +1827,11 @@
 	"userActivationSurveyModal.sharedFeedback.error": "Problem sharing feedback, try again",
 	"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>"
+	"executionUsage.currentUsage": "{text} {count}",
+	"executionUsage.currentUsage.text": "You are in a free trial with limited executions. You have",
+	"executionUsage.currentUsage.count": "{n} day left. | {n} 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

@@ -129,6 +129,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';
@@ -266,5 +267,6 @@ addIcon(faVariable);
 addIcon(faVideo);
 addIcon(faTree);
 addIcon(faUserLock);
+addIcon(faGem);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);