From 5ca2148c7ed06c90f999508928b7a51f9ac7a788 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 14 Dec 2022 10:04:10 +0100
Subject: [PATCH] refactor(editor): Apply Prettier (no-changelog) (#4920)

* :zap: Adjust `format` script

* :fire: Remove exemption for `editor-ui`

* :art: Prettify

* :shirt: Fix lint
---
 .prettierignore                               |    1 -
 packages/editor-ui/.eslintrc.js               |    2 +-
 packages/editor-ui/README.md                  |    9 +-
 packages/editor-ui/index.html                 |   35 +-
 packages/editor-ui/package.json               |    2 +-
 packages/editor-ui/src/App.vue                |   49 +-
 packages/editor-ui/src/Interface.ts           |  171 +-
 .../src/__tests__/permissions.spec.ts         |    8 +-
 packages/editor-ui/src/__tests__/setup.ts     |    1 -
 packages/editor-ui/src/api/api-keys.ts        |    4 +-
 packages/editor-ui/src/api/communityNodes.ts  |   14 +-
 packages/editor-ui/src/api/credentials.ee.ts  |   23 +-
 packages/editor-ui/src/api/credentials.ts     |   50 +-
 packages/editor-ui/src/api/curlHelper.ts      |    9 +-
 packages/editor-ui/src/api/nodeTypes.ts       |   19 +-
 packages/editor-ui/src/api/settings.ts        |   46 +-
 packages/editor-ui/src/api/tags.ts            |    6 +-
 packages/editor-ui/src/api/templates.ts       |   62 +-
 packages/editor-ui/src/api/users.ts           |   82 +-
 packages/editor-ui/src/api/versions.ts        |    8 +-
 .../editor-ui/src/api/workflow-webhooks.ts    |   68 +-
 packages/editor-ui/src/api/workflows.ee.ts    |   23 +-
 .../editor-ui/src/components/AboutModal.vue   |    5 +-
 .../src/components/ActivationModal.vue        |   53 +-
 packages/editor-ui/src/components/Badge.vue   |   57 +-
 packages/editor-ui/src/components/Banner.vue  |   31 +-
 .../src/components/BinaryDataDisplay.vue      |  105 +-
 .../src/components/BinaryDataDisplayEmbed.vue |  125 +-
 .../src/components/BreakpointsObserver.vue    |   43 +-
 .../src/components/CanvasControls.vue         |   58 +-
 .../src/components/ChangePasswordModal.vue    |   34 +-
 .../editor-ui/src/components/CodeEdit.vue     |  118 +-
 .../CodeNodeEditor/CodeNodeEditor.vue         |    4 +-
 .../CodeNodeEditor/baseExtensions.ts          |    7 +-
 .../CodeNodeEditor/completions/js.snippets.ts |    2 +-
 .../completions/jsonField.completions.ts      |    5 +-
 .../completions/luxon.completions.ts          |   32 +-
 .../src/components/CodeNodeEditor/theme.ts    |   73 +-
 .../src/components/CollectionCard.vue         |   10 +-
 .../src/components/CollectionParameter.vue    |  280 +-
 .../src/components/CollectionWorkflowCard.vue |   12 +-
 .../src/components/CollectionsCarousel.vue    |   55 +-
 .../src/components/CommunityPackageCard.vue   |   17 +-
 .../CommunityPackageInstallModal.vue          |   54 +-
 .../CommunityPackageManageConfirmModal.vue    |   79 +-
 .../src/components/ContactPromptModal.vue     |    9 +-
 .../editor-ui/src/components/CopyInput.vue    |   13 +-
 .../src/components/CredentialCard.vue         |  132 +-
 .../CredentialEdit/CredentialConfig.vue       |   88 +-
 .../CredentialEdit/CredentialEdit.vue         |  316 +-
 .../CredentialEdit/CredentialInfo.vue         |   32 +-
 .../CredentialEdit/CredentialInputs.vue       |   12 +-
 .../CredentialEdit/CredentialSharing.ee.vue   |   68 +-
 .../components/CredentialEdit/OauthButton.vue |    4 +-
 .../src/components/CredentialIcon.vue         |   10 +-
 .../src/components/CredentialsSelect.vue      |   49 +-
 .../src/components/CredentialsSelectModal.vue |   19 +-
 .../src/components/DeleteUserModal.vue        |   71 +-
 .../editor-ui/src/components/Draggable.vue    |   29 +-
 .../src/components/DraggableTarget.vue        |   15 +-
 .../components/DuplicateWorkflowDialog.vue    |   60 +-
 .../src/components/EnterpriseEdition.ee.vue   |    7 +-
 .../src/components/Error/NodeErrorView.vue    |  142 +-
 .../src/components/ExecutionTime.vue          |   80 +-
 .../src/components/ExecutionsList.vue         |  396 +-
 .../ExecutionsView/ExecutionCard.vue          |  108 +-
 .../ExecutionsView/ExecutionPreview.vue       |  100 +-
 .../ExecutionsInfoAccordion.vue               |   97 +-
 .../ExecutionsView/ExecutionsLandingPage.vue  |    8 +-
 .../ExecutionsView/ExecutionsSidebar.vue      |   30 +-
 .../ExecutionsView/ExecutionsView.vue         |  269 +-
 .../ExpandableInput/ExpandableInputBase.vue   |    9 +-
 .../ExpandableInput/ExpandableInputEdit.vue   |    6 +-
 .../ExpandableInputPreview.vue                |    8 +-
 .../src/components/ExpressionEdit.vue         |  101 +-
 .../n8nLanguagePack/index.cjs                 |   63 +-
 .../n8nLanguagePack/index.d.cts               |    4 +-
 .../n8nLanguagePack/index.d.ts                |    4 +-
 .../n8nLanguagePack/index.js                  |   63 +-
 .../src/components/FeatureComingSoon.vue      |   27 +-
 .../components/FixedCollectionParameter.vue   |  374 +-
 .../src/components/GiftNotificationIcon.vue   |   55 +-
 .../editor-ui/src/components/GoBackButton.vue |    2 +-
 .../src/components/HoverableNodeIcon.vue      |    4 +-
 .../src/components/ImportCurlModal.vue        |    5 +-
 .../src/components/InlineNameEdit.vue         |    9 +-
 .../src/components/InlineTextEdit.vue         |   16 +-
 .../editor-ui/src/components/InputPanel.vue   |  167 +-
 .../src/components/IntersectionObserved.vue   |    1 -
 .../src/components/IntersectionObserver.vue   |    6 +-
 .../src/components/InviteUsersModal.vue       |   87 +-
 packages/editor-ui/src/components/Logo.vue    |   10 +-
 .../ExecutionDetails/ExecutionDetails.vue     |   45 +-
 .../MainHeader/ExecutionDetails/ReadOnly.vue  |    4 +-
 .../src/components/MainHeader/MainHeader.vue  |  224 +-
 .../src/components/MainHeader/TabBar.vue      |   20 +-
 .../components/MainHeader/WorkflowDetails.vue |  178 +-
 .../editor-ui/src/components/MainSidebar.vue  |  788 +-
 packages/editor-ui/src/components/Modal.vue   |   32 +-
 .../editor-ui/src/components/ModalDrawer.vue  |   15 +-
 .../editor-ui/src/components/ModalRoot.vue    |   10 +-
 packages/editor-ui/src/components/Modals.vue  |   62 +-
 .../src/components/MultipleParameter.vue      |  282 +-
 .../src/components/NDVDraggablePanels.vue     |  122 +-
 packages/editor-ui/src/components/Node.vue    |  468 +-
 .../src/components/Node/NodeCreation.vue      |   60 +-
 .../Node/NodeCreator/ActionItem.vue           |   51 +-
 .../Node/NodeCreator/CategorizedItems.vue     |  552 +-
 .../Node/NodeCreator/CategoryItem.vue         |   14 +-
 .../Node/NodeCreator/ItemIterator.vue         |   65 +-
 .../components/Node/NodeCreator/MainPanel.vue |   44 +-
 .../components/Node/NodeCreator/NoResults.vue |   12 +-
 .../Node/NodeCreator/NoResultsIcon.vue        |   65 +-
 .../Node/NodeCreator/NodeCreator.vue          |   41 +-
 .../components/Node/NodeCreator/NodeItem.vue  |   50 +-
 .../components/Node/NodeCreator/SearchBar.vue |   10 +-
 .../Node/NodeCreator/SubcategoryItem.vue      |    6 +-
 .../Node/NodeCreator/TriggerHelperPanel.vue   |  233 +-
 .../Node/NodeCreator/TypeSelector.vue         |   27 +-
 .../src/components/NodeCredentials.vue        |  200 +-
 .../src/components/NodeDetailsView.vue        |   64 +-
 .../src/components/NodeExecuteButton.vue      |   56 +-
 .../editor-ui/src/components/NodeIcon.vue     |   22 +-
 .../editor-ui/src/components/NodeList.vue     |   11 +-
 .../editor-ui/src/components/NodeSettings.vue |   42 +-
 .../src/components/NodeSettingsTabs.vue       |   54 +-
 .../editor-ui/src/components/NodeTitle.vue    |   21 +-
 .../editor-ui/src/components/NodeWebhooks.vue |  144 +-
 .../components/OnboardingCallSignupModal.vue  |   16 +-
 .../editor-ui/src/components/OutputPanel.vue  |   58 +-
 .../editor-ui/src/components/PageAlert.vue    |    5 +-
 .../src/components/PageContentWrapper.vue     |   10 +-
 .../src/components/PanelDragButton.vue        |   31 +-
 .../src/components/ParameterInput.vue         | 1487 ++--
 .../src/components/ParameterInputExpanded.vue |   40 +-
 .../src/components/ParameterInputFull.vue     |  396 +-
 .../src/components/ParameterInputHint.vue     |   40 +-
 .../src/components/ParameterInputList.vue     |  446 +-
 .../src/components/ParameterInputWrapper.vue  |  348 +-
 .../src/components/ParameterIssues.vue        |    6 +-
 .../src/components/ParameterOptions.vue       |   27 +-
 .../src/components/PersonalizationModal.vue   |   51 +-
 .../src/components/PushConnectionTracker.vue  |   17 +-
 .../ResourceLocator/ResourceLocator.vue       |   97 +-
 .../ResourceLocatorDropdown.vue               |   80 +-
 packages/editor-ui/src/components/RunData.vue | 1763 +++--
 .../src/components/RunDataJson.test.ts        |   27 +-
 .../editor-ui/src/components/RunDataJson.vue  |   79 +-
 .../src/components/RunDataJsonActions.vue     |   54 +-
 .../src/components/RunDataSchema.test.ts      |   26 +-
 .../src/components/RunDataSchema.vue          |   43 +-
 .../src/components/RunDataSchemaItem.vue      |   60 +-
 .../editor-ui/src/components/RunDataTable.vue |   90 +-
 .../editor-ui/src/components/SaveButton.vue   |    2 +-
 .../editor-ui/src/components/ScopesNotice.vue |   57 +-
 .../src/components/SettingsSidebar.vue        |   49 +-
 .../editor-ui/src/components/ShortenName.vue  |   14 +-
 packages/editor-ui/src/components/Sticky.vue  |   85 +-
 .../src/components/TagsContainer.vue          |   89 +-
 .../editor-ui/src/components/TagsDropdown.vue |   86 +-
 .../src/components/TagsManager/NoTagsView.vue |   19 +-
 .../components/TagsManager/TagsManager.vue    |   78 +-
 .../TagsManager/TagsView/TagsTable.vue        |   79 +-
 .../TagsManager/TagsView/TagsTableHeader.vue  |   19 +-
 .../TagsManager/TagsView/TagsView.vue         |   96 +-
 .../editor-ui/src/components/Telemetry.vue    |   30 +-
 .../editor-ui/src/components/TemplateCard.vue |   12 +-
 .../src/components/TemplateDetails.vue        |    4 +-
 .../src/components/TemplateFilters.vue        |    4 +-
 .../editor-ui/src/components/TemplateList.vue |    5 +-
 .../editor-ui/src/components/TextEdit.vue     |   45 +-
 packages/editor-ui/src/components/TimeAgo.vue |    9 +-
 .../editor-ui/src/components/TitledList.vue   |    4 +-
 .../editor-ui/src/components/TriggerPanel.vue |   13 +-
 .../editor-ui/src/components/UpdatesPanel.vue |   52 +-
 .../editor-ui/src/components/ValueSurvey.vue  |   19 +-
 .../src/components/VariableSelector.vue       | 1372 ++--
 .../src/components/VariableSelectorItem.vue   |   79 +-
 .../editor-ui/src/components/VersionCard.vue  |  127 +-
 .../src/components/WarningTooltip.vue         |   13 +-
 .../src/components/WorkflowActivator.vue      |  173 +-
 .../editor-ui/src/components/WorkflowCard.vue |  168 +-
 .../src/components/WorkflowPreview.vue        |   29 +-
 .../src/components/WorkflowSettings.vue       |  349 +-
 .../src/components/WorkflowShareModal.ee.vue  |  222 +-
 .../src/components/forms/CodeEditor.vue       |    4 +-
 .../forms/ResourceFiltersDropdown.vue         |   39 +-
 .../forms/ResourceOwnershipSelect.ee.vue      |   12 +-
 .../layouts/ResourcesListLayout.vue           |  135 +-
 .../transitions/SlideTransition.vue           |    1 -
 .../src/composables/useGlobalLinkActions.ts   |    5 +-
 packages/editor-ui/src/constants.ts           |   91 +-
 .../src/declarations/normalize-wheel.d.ts     |    9 +-
 packages/editor-ui/src/main.ts                |    8 +-
 packages/editor-ui/src/mixins/copyPaste.ts    |  107 +-
 packages/editor-ui/src/mixins/debounce.ts     |   13 +-
 packages/editor-ui/src/mixins/emitter.ts      |   11 +-
 .../editor-ui/src/mixins/executionsHelpers.ts |   35 +-
 .../editor-ui/src/mixins/externalHooks.ts     |   11 +-
 .../editor-ui/src/mixins/genericHelpers.ts    |   30 +-
 packages/editor-ui/src/mixins/history.ts      |   26 +-
 packages/editor-ui/src/mixins/mouseSelect.ts  |   76 +-
 .../editor-ui/src/mixins/moveNodeWorkflow.ts  |   14 +-
 packages/editor-ui/src/mixins/newVersions.ts  |    9 +-
 packages/editor-ui/src/mixins/nodeBase.ts     |  101 +-
 packages/editor-ui/src/mixins/nodeHelpers.ts  |  925 +--
 packages/editor-ui/src/mixins/pinData.ts      |   26 +-
 .../editor-ui/src/mixins/pushConnection.ts    |  752 +-
 packages/editor-ui/src/mixins/restApi.ts      |   44 +-
 packages/editor-ui/src/mixins/showMessage.ts  |   76 +-
 packages/editor-ui/src/mixins/titleChange.ts  |    5 +-
 packages/editor-ui/src/mixins/userHelpers.ts  |    2 +-
 .../editor-ui/src/mixins/workflowActivate.ts  |  184 +-
 .../editor-ui/src/mixins/workflowHelpers.ts   | 1686 ++--
 packages/editor-ui/src/mixins/workflowRun.ts  |   37 +-
 packages/editor-ui/src/models/history.ts      |   71 +-
 .../editor-ui/src/n8n-theme-variables.scss    |   22 +-
 packages/editor-ui/src/n8n-theme.scss         |    3 -
 packages/editor-ui/src/permissions.ts         |   95 +-
 .../src/plugins/N8nCustomConnectorType.js     |  390 +-
 .../editor-ui/src/plugins/PlusEndpointType.js |   53 +-
 packages/editor-ui/src/plugins/components.ts  |   30 +-
 packages/editor-ui/src/plugins/directives.ts  |    2 +-
 .../src/plugins/i18n/docs/ADDENDUM.md         |    8 +-
 .../editor-ui/src/plugins/i18n/docs/README.md |   16 +-
 packages/editor-ui/src/plugins/i18n/index.ts  |  102 +-
 packages/editor-ui/src/plugins/i18n/utils.ts  |   15 +-
 packages/editor-ui/src/plugins/icons.ts       |    8 +-
 .../editor-ui/src/plugins/telemetry/index.ts  |  128 +-
 .../src/plugins/telemetry/telemetry.types.ts  |   37 +-
 packages/editor-ui/src/router.ts              |    9 +-
 packages/editor-ui/src/shims.d.ts             |    7 +-
 packages/editor-ui/src/stores/canvas.ts       |   39 +-
 .../editor-ui/src/stores/communityNodes.ts    |   49 +-
 packages/editor-ui/src/stores/credentials.ts  |  136 +-
 packages/editor-ui/src/stores/history.ts      |   11 +-
 packages/editor-ui/src/stores/n8nRootStore.ts |    8 +-
 packages/editor-ui/src/stores/ndv.ts          |   64 +-
 packages/editor-ui/src/stores/nodeCreator.ts  |  244 +-
 packages/editor-ui/src/stores/nodeTypes.ts    |  145 +-
 packages/editor-ui/src/stores/settings.ts     |  108 +-
 packages/editor-ui/src/stores/tags.ts         |   33 +-
 packages/editor-ui/src/stores/templates.ts    |  539 +-
 packages/editor-ui/src/stores/ui.ts           |   57 +-
 packages/editor-ui/src/stores/users.ts        |  110 +-
 packages/editor-ui/src/stores/versions.ts     |   15 +-
 packages/editor-ui/src/stores/webhooks.ts     |   38 +-
 packages/editor-ui/src/stores/workflows.ee.ts |   57 +-
 packages/editor-ui/src/stores/workflows.ts    |  295 +-
 .../src/utils/__tests__/typesUtils.test.ts    |  547 +-
 packages/editor-ui/src/utils/apiUtils.ts      |   46 +-
 packages/editor-ui/src/utils/canvasUtils.ts   |   40 +-
 packages/editor-ui/src/utils/htmlUtils.ts     |   10 +-
 .../editor-ui/src/utils/nodeTypesUtils.ts     |  279 +-
 packages/editor-ui/src/utils/nodeViewUtils.ts |  298 +-
 .../editor-ui/src/utils/pairedItemUtils.ts    |   52 +-
 packages/editor-ui/src/utils/sortUtils.ts     |   89 +-
 packages/editor-ui/src/utils/typeGuards.ts    |    7 +-
 packages/editor-ui/src/utils/typesUtils.ts    |  138 +-
 packages/editor-ui/src/utils/userUtils.ts     |  181 +-
 packages/editor-ui/src/views/AuthView.vue     |   13 +-
 .../editor-ui/src/views/CanvasAddButton.vue   |   22 +-
 .../src/views/ChangePasswordView.vue          |   42 +-
 .../editor-ui/src/views/CredentialsView.vue   |   55 +-
 packages/editor-ui/src/views/ErrorView.vue    |    7 +-
 .../src/views/ForgotMyPasswordView.vue        |   24 +-
 packages/editor-ui/src/views/LoadingView.vue  |    2 +-
 packages/editor-ui/src/views/NodeView.vue     | 6929 +++++++++--------
 .../editor-ui/src/views/SettingsApiView.vue   |   28 +-
 .../src/views/SettingsCommunityNodesView.vue  |  127 +-
 .../src/views/SettingsFakeDoorView.vue        |    2 +-
 .../src/views/SettingsPersonalView.vue        |   47 +-
 .../editor-ui/src/views/SettingsUsersView.vue |   60 +-
 packages/editor-ui/src/views/SettingsView.vue |    2 +-
 packages/editor-ui/src/views/SetupView.vue    |   56 +-
 packages/editor-ui/src/views/SigninView.vue   |   11 +-
 packages/editor-ui/src/views/SignupView.vue   |   53 +-
 .../src/views/TemplatesCollectionView.vue     |   15 +-
 .../src/views/TemplatesSearchView.vue         |   45 +-
 .../src/views/TemplatesWorkflowView.vue       |    7 +-
 .../editor-ui/src/views/WorkflowsView.vue     |   91 +-
 packages/editor-ui/tslint.json                |   63 +-
 packages/editor-ui/vite.config.ts             |   28 +-
 packages/editor-ui/vue.config.js              |   24 +-
 284 files changed, 19247 insertions(+), 15540 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index bf2e30613a..c5faf0aa47 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,4 @@
 coverage
 dist
-packages/editor-ui
 package.json
 .pnpm-lock.yml
diff --git a/packages/editor-ui/.eslintrc.js b/packages/editor-ui/.eslintrc.js
index 448f378e82..af3078e56a 100644
--- a/packages/editor-ui/.eslintrc.js
+++ b/packages/editor-ui/.eslintrc.js
@@ -19,7 +19,7 @@ module.exports = {
 		'import/no-default-export': 'off',
 		'import/no-extraneous-dependencies': 'off',
 		'import/order': 'off',
-		'indent': 'off',
+		indent: 'off',
 		'prettier/prettier': 'off',
 		'@typescript-eslint/ban-types': 'off',
 		'@typescript-eslint/dot-notation': 'off',
diff --git a/packages/editor-ui/README.md b/packages/editor-ui/README.md
index 49e1a4f7b2..3edb2965e7 100644
--- a/packages/editor-ui/README.md
+++ b/packages/editor-ui/README.md
@@ -9,43 +9,50 @@ npm install n8n -g
 ```
 
 ## Project setup
+
 ```
 pnpm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 pnpm serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 pnpm build
 ```
 
 ### Run your tests
+
 ```
 pnpm test
 ```
 
 ### Lints and fixes files
+
 ```
 pnpm lint
 ```
 
 ### Run your end-to-end tests
+
 ```
 pnpm test:e2e
 ```
 
 ### Run your unit tests
+
 ```
 pnpm test:unit
 ```
 
 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
 
+See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## License
 
diff --git a/packages/editor-ui/index.html b/packages/editor-ui/index.html
index 2eea7165e0..0dc44757dc 100644
--- a/packages/editor-ui/index.html
+++ b/packages/editor-ui/index.html
@@ -1,18 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<link rel="icon" href="/favicon.ico">
-	<script type="text/javascript">window.BASE_PATH = "/{{BASE_PATH}}/";</script>
-	<title>n8n.io - Workflow Automation</title>
-</head>
-<body>
-<noscript>
-	<strong>We're sorry but the n8n Editor-UI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-</noscript>
-<div id="app"></div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+		<link rel="icon" href="/favicon.ico" />
+		<script type="text/javascript">
+			window.BASE_PATH = '/{{BASE_PATH}}/';
+		</script>
+		<title>n8n.io - Workflow Automation</title>
+	</head>
+	<body>
+		<noscript>
+			<strong
+				>We're sorry but the n8n Editor-UI doesn't work properly without JavaScript enabled. Please
+				enable it to continue.</strong
+			>
+		</noscript>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
 </html>
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index b486e37796..2aa39a53c6 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -20,7 +20,7 @@
     "dev": "pnpm serve",
     "lint": "tslint -p tsconfig.json -c tslint.json && eslint --ext .js,.ts,.vue src",
     "lintfix": "tslint --fix -p tsconfig.json -c tslint.json && eslint --ext .js,.ts,.vue src --fix",
-    "format": "prettier **/**.{ts,vue} --write",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
     "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
     "test": "vitest run",
     "test:ci": "vitest run --coverage",
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 62027afc37..3052a95712 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -6,7 +6,7 @@
 			id="app"
 			:class="{
 				[$style.container]: true,
-				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed
+				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed,
 			}"
 		>
 			<div id="header" :class="$style.header">
@@ -47,12 +47,7 @@ import { useTemplatesStore } from './stores/templates';
 import { useNodeTypesStore } from './stores/nodeTypes';
 import { historyHelper } from '@/mixins/history';
 
-export default mixins(
-	showMessage,
-	userHelpers,
-	restApi,
-	historyHelper,
-).extend({
+export default mixins(showMessage, userHelpers, restApi, historyHelper).extend({
 	name: 'App',
 	components: {
 		LoadingView,
@@ -68,14 +63,14 @@ export default mixins(
 	},
 	computed: {
 		...mapStores(
-				useNodeTypesStore,
-				useRootStore,
-				useSettingsStore,
-				useTemplatesStore,
-				useUIStore,
-				useUsersStore,
-			),
-		defaultLocale (): string {
+			useNodeTypesStore,
+			useRootStore,
+			useSettingsStore,
+			useTemplatesStore,
+			useUIStore,
+			useUsersStore,
+		),
+		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
 		},
 	},
@@ -110,8 +105,7 @@ export default mixins(
 			}
 			try {
 				await this.settingsStore.testTemplatesEndpoint();
-		} catch (e) {
-			}
+			} catch (e) {}
 		},
 		logHiringBanner() {
 			if (this.settingsStore.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
@@ -126,8 +120,7 @@ export default mixins(
 			this.uiStore.currentView = this.$route.name || '';
 			if (this.$route && this.$route.meta && this.$route.meta.templatesEnabled) {
 				this.templatesStore.setSessionId();
-			}
-			else {
+			} else {
 				this.templatesStore.resetSessionId(); // reset telemetry session id when user leaves template pages
 			}
 
@@ -161,7 +154,8 @@ export default mixins(
 			// if cannot access page and is logged in, respect signin redirect
 			if (this.$route.name === VIEWS.SIGNIN && typeof this.$route.query.redirect === 'string') {
 				const redirect = decodeURIComponent(this.$route.query.redirect);
-				if (redirect.startsWith('/')) { // protect against phishing
+				if (redirect.startsWith('/')) {
+					// protect against phishing
 					this.$router.replace(redirect);
 					return;
 				}
@@ -171,7 +165,10 @@ export default mixins(
 			this.$router.replace({ name: VIEWS.HOMEPAGE });
 		},
 		redirectIfNecessary() {
-			const redirect = this.$route.meta && typeof this.$route.meta.getRedirect === 'function' && this.$route.meta.getRedirect();
+			const redirect =
+				this.$route.meta &&
+				typeof this.$route.meta.getRedirect === 'function' &&
+				this.$route.meta.getRedirect();
 			if (redirect) {
 				this.$router.replace(redirect);
 			}
@@ -221,11 +218,11 @@ export default mixins(
 
 .container {
 	display: grid;
-  grid-template-areas:
-    "sidebar header"
-    "sidebar content";
-  grid-auto-columns: fit-content($sidebar-expanded-width) 1fr;
-  grid-template-rows: fit-content($sidebar-width) 1fr;
+	grid-template-areas:
+		'sidebar header'
+		'sidebar content';
+	grid-auto-columns: fit-content($sidebar-expanded-width) 1fr;
+	grid-template-rows: fit-content($sidebar-width) 1fr;
 }
 
 .content {
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 1e0c2fbf84..c785035a27 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -9,7 +9,7 @@ import {
 	EndpointRectangle,
 	EndpointRectangleOptions,
 	EndpointSpec,
-} from "jsplumb";
+} from 'jsplumb';
 import {
 	GenericValue,
 	IConnections,
@@ -58,10 +58,10 @@ declare module 'jsplumb' {
 
 	interface Connection {
 		__meta?: {
-			sourceNodeName: string,
-			sourceOutputIndex: number,
-			targetNodeName: string,
-			targetOutputIndex: number,
+			sourceNodeName: string;
+			sourceOutputIndex: number;
+			targetNodeName: string;
+			targetOutputIndex: number;
 		};
 		canvas?: HTMLElement;
 		connector?: {
@@ -72,7 +72,7 @@ declare module 'jsplumb' {
 				maxX: number;
 				minY: number;
 				maxY: number;
-			}
+			};
 		};
 
 		// bind(event: string, (connection: Connection): void;): void; // tslint:disable-line:no-any
@@ -90,9 +90,9 @@ declare module 'jsplumb' {
 		endpoint: any; // tslint:disable-line:no-any
 		elementId: string;
 		__meta?: {
-			nodeName: string,
-			nodeId: string,
-			index: number,
+			nodeName: string;
+			nodeId: string;
+			index: number;
 			totalEndpoints: number;
 		};
 		getUuid(): string;
@@ -120,44 +120,57 @@ declare module 'jsplumb' {
 
 // EndpointOptions from jsplumb seems incomplete and wrong so we define an own one
 export type IEndpointOptions = Omit<EndpointOptions, 'endpoint' | 'dragProxy'> & {
-	endpointStyle: EndpointStyle
-	endpointHoverStyle: EndpointStyle
-	endpoint?: EndpointSpec | string
-	dragAllowedWhenFull?: boolean
+	endpointStyle: EndpointStyle;
+	endpointHoverStyle: EndpointStyle;
+	endpoint?: EndpointSpec | string;
+	dragAllowedWhenFull?: boolean;
 	dropOptions?: DropOptions & {
-		tolerance: string
+		tolerance: string;
 	};
-	dragProxy?: string | string[] | EndpointSpec | [ EndpointRectangle,  EndpointRectangleOptions & { strokeWidth: number } ]
+	dragProxy?:
+		| string
+		| string[]
+		| EndpointSpec
+		| [EndpointRectangle, EndpointRectangleOptions & { strokeWidth: number }];
 };
 
 export type EndpointStyle = {
-	width?: number
-	height?: number
-	fill?: string
-	stroke?: string
-	outlineStroke?:string
-	lineWidth?: number
-	hover?: boolean
-	showOutputLabel?: boolean
-	size?: string
-	hoverMessage?: string
+	width?: number;
+	height?: number;
+	fill?: string;
+	stroke?: string;
+	outlineStroke?: string;
+	lineWidth?: number;
+	hover?: boolean;
+	showOutputLabel?: boolean;
+	size?: string;
+	hoverMessage?: string;
 };
 
 export type IDragOptions = DragOptions & {
-	grid: [number, number]
-	filter: string
+	grid: [number, number];
+	filter: string;
 };
 
 export type IJsPlumbInstance = Omit<jsPlumbInstance, 'addEndpoint' | 'draggable'> & {
-	clearDragSelection: () => void
-	addEndpoint(el: ElementGroupRef, params?: IEndpointOptions, referenceParams?: IEndpointOptions): Endpoint | Endpoint[]
-	draggable(el: {}, options?: IDragOptions): IJsPlumbInstance
+	clearDragSelection: () => void;
+	addEndpoint(
+		el: ElementGroupRef,
+		params?: IEndpointOptions,
+		referenceParams?: IEndpointOptions,
+	): Endpoint | Endpoint[];
+	draggable(el: {}, options?: IDragOptions): IJsPlumbInstance;
 };
 
 export interface IUpdateInformation {
 	name: string;
 	key?: string;
-	value: string | number | { [key: string]: string | number | boolean } | NodeParameterValueType | INodeParameters; // with null makes problems in NodeSettings.vue
+	value:
+		| string
+		| number
+		| { [key: string]: string | number | boolean }
+		| NodeParameterValueType
+		| INodeParameters; // with null makes problems in NodeSettings.vue
 	node?: string;
 	oldValue?: string | number;
 }
@@ -197,9 +210,14 @@ export interface IExternalHooks {
  */
 export interface IRestApi {
 	getActiveWorkflows(): Promise<string[]>;
-	getActivationError(id: string): Promise<IActivationError | undefined >;
+	getActivationError(id: string): Promise<IActivationError | undefined>;
 	getCurrentExecutions(filter: object): Promise<IExecutionsCurrentSummaryExtended[]>;
-	getPastExecutions(filter: object, limit: number, lastId?: string | number, firstId?: string | number): Promise<IExecutionsListResponse>;
+	getPastExecutions(
+		filter: object,
+		limit: number,
+		lastId?: string | number,
+		firstId?: string | number,
+	): Promise<IExecutionsListResponse>;
 	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
 	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
 	getCredentialTranslation(credentialType: string): Promise<object>;
@@ -224,7 +242,7 @@ export interface INodeTranslationHeaders {
 		[key: string]: {
 			displayName: string;
 			description: string;
-		},
+		};
 	};
 }
 
@@ -239,7 +257,7 @@ export interface IStartRunData {
 export interface ITableData {
 	columns: string[];
 	data: GenericValue[][];
-	hasJson: {[key: string]: boolean};
+	hasJson: { [key: string]: boolean };
 }
 
 export interface IVariableItemSelected {
@@ -336,7 +354,6 @@ export interface IWorkflowsShareResponse {
 	ownedBy?: Partial<IUser>;
 }
 
-
 // Identical or almost identical to cli.Interfaces.ts
 
 export interface IActivationError {
@@ -368,7 +385,7 @@ export interface ICredentialsBase {
 	updatedAt: number | string;
 }
 
-export interface ICredentialsDecryptedResponse extends ICredentialsBase, ICredentialsDecrypted{
+export interface ICredentialsDecryptedResponse extends ICredentialsBase, ICredentialsDecrypted {
 	id: string;
 }
 
@@ -598,7 +615,10 @@ export type IPersonalizationSurveyAnswersV3 = {
 
 export type IPersonalizationLatestVersion = IPersonalizationSurveyAnswersV3;
 
-export type IPersonalizationSurveyVersions = IPersonalizationSurveyAnswersV1 | IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3;
+export type IPersonalizationSurveyVersions =
+	| IPersonalizationSurveyAnswersV1
+	| IPersonalizationSurveyAnswersV2
+	| IPersonalizationSurveyAnswersV3;
 
 export type IRole = 'default' | 'owner' | 'member';
 
@@ -679,7 +699,7 @@ export interface ITemplatesCollection {
 	id: number;
 	name: string;
 	nodes: ITemplatesNode[];
-	workflows: Array<{id: number}>;
+	workflows: Array<{ id: number }>;
 }
 
 interface ITemplatesImage {
@@ -861,7 +881,11 @@ export interface ActionCreateElement extends CreateElementBase {
 	properties: IActionItemProps;
 }
 
-export type INodeCreateElement = NodeCreateElement | CategoryCreateElement | SubcategoryCreateElement | ActionCreateElement;
+export type INodeCreateElement =
+	| NodeCreateElement
+	| CategoryCreateElement
+	| SubcategoryCreateElement
+	| ActionCreateElement;
 
 export interface ICategoriesWithNodes {
 	[category: string]: {
@@ -946,7 +970,7 @@ export interface WorkflowsState {
 	usedCredentials: Record<string, IUsedCredential>;
 	workflow: IWorkflowDb;
 	workflowExecutionData: IExecutionResponse | null;
-	workflowExecutionPairedItemMappings: {[itemId: string]: Set<string>};
+	workflowExecutionPairedItemMappings: { [itemId: string]: Set<string> };
 	workflowsById: IWorkflowsMap;
 }
 
@@ -998,7 +1022,7 @@ export interface IRootState {
 	oauthCallbackUrls: object;
 	n8nMetadata: object;
 	workflowExecutionData: IExecutionResponse | null;
-	workflowExecutionPairedItemMappings: {[itemId: string]: Set<string>};
+	workflowExecutionPairedItemMappings: { [itemId: string]: Set<string> };
 	lastSelectedNode: string | null;
 	lastSelectedNodeOutputIndex: number | null;
 	nodeViewOffsetPosition: XYPosition;
@@ -1065,7 +1089,7 @@ export interface TargetItem {
 
 export interface NDVState {
 	activeNodeName: string | null;
-	mainPanelDimensions: {[key: string]: {[key: string]: number}};
+	mainPanelDimensions: { [key: string]: { [key: string]: number } };
 	sessionId: string;
 	input: {
 		displayMode: IRunDataDisplayMode;
@@ -1074,21 +1098,21 @@ export interface NDVState {
 		branch?: number;
 		data: {
 			isEmpty: boolean;
-		}
+		};
 	};
 	output: {
 		branch?: number;
 		displayMode: IRunDataDisplayMode;
 		data: {
 			isEmpty: boolean;
-		}
+		};
 		editMode: {
 			enabled: boolean;
 			value: string;
 		};
 	};
 	focusedMappableInput: string;
-	mappingTelemetry: {[key: string]: string | number | boolean};
+	mappingTelemetry: { [key: string]: string | number | boolean };
 	hoveringItem: null | TargetItem;
 	draggable: {
 		isDragging: boolean;
@@ -1099,7 +1123,6 @@ export interface NDVState {
 	};
 }
 
-
 export interface IUiState {
 	sidebarMenuCollapsed: boolean;
 	modalStack: string[];
@@ -1149,20 +1172,20 @@ export interface UIState {
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';
 
 export type IFakeDoor = {
-	id: FAKE_DOOR_FEATURES,
-	featureName: string,
-	icon?: string,
-	infoText?: string,
-	actionBoxTitle: string,
-	actionBoxDescription: string,
-	actionBoxButtonLabel?: string,
-	linkURL: string,
-	uiLocations: IFakeDoorLocation[],
+	id: FAKE_DOOR_FEATURES;
+	featureName: string;
+	icon?: string;
+	infoText?: string;
+	actionBoxTitle: string;
+	actionBoxDescription: string;
+	actionBoxButtonLabel?: string;
+	linkURL: string;
+	uiLocations: IFakeDoorLocation[];
 };
 
 export type IFakeDoorLocation = 'settings' | 'credentialsModal' | 'workflowShareModal';
 
-export type INodeFilterType = "Regular" | "Trigger" | "All";
+export type INodeFilterType = 'Regular' | 'Trigger' | 'All';
 
 export interface INodeCreatorState {
 	itemsFilter: string;
@@ -1191,25 +1214,25 @@ export interface INodeTypesState {
 	nodeTypes: {
 		[nodeType: string]: {
 			[version: number]: INodeTypeDescription;
-		}
+		};
 	};
 }
 
 export interface ITemplateState {
-	categories: {[id: string]: ITemplatesCategory};
-	collections: {[id: string]: ITemplatesCollection};
-	workflows: {[id: string]: ITemplatesWorkflow};
+	categories: { [id: string]: ITemplatesCategory };
+	collections: { [id: string]: ITemplatesCollection };
+	workflows: { [id: string]: ITemplatesWorkflow };
 	workflowSearches: {
 		[search: string]: {
 			workflowIds: string[];
 			totalWorkflows: number;
 			loadingMore?: boolean;
-		}
+		};
 	};
 	collectionSearches: {
 		[search: string]: {
 			collectionIds: string[];
-		}
+		};
 	};
 	currentSessionId: string;
 	previousSessionId: string;
@@ -1223,7 +1246,7 @@ export interface IVersionsState {
 
 export interface IUsersState {
 	currentUserId: null | string;
-	users: {[userId: string]: IUser};
+	users: { [userId: string]: IUser };
 }
 
 export interface IWorkflowsState {
@@ -1231,7 +1254,7 @@ export interface IWorkflowsState {
 	activeWorkflowExecution: IExecutionsSummary | null;
 	finishedExecutionsCount: number;
 }
-	export interface IWorkflowsMap {
+export interface IWorkflowsMap {
 	[name: string]: IWorkflowDb;
 }
 
@@ -1308,14 +1331,14 @@ export interface IResourceLocatorResultExpanded extends INodeListSearchItems {
 }
 
 export interface CurlToJSONResponse {
-	"parameters.url": string;
-	"parameters.authentication": string;
-	"parameters.method": string;
-	"parameters.sendHeaders": boolean;
-	"parameters.headerParameters.parameters.0.name": string;
-	"parameters.headerParameters.parameters.0.value": string;
-	"parameters.sendQuery": boolean;
-	"parameters.sendBody": boolean;
+	'parameters.url': string;
+	'parameters.authentication': string;
+	'parameters.method': string;
+	'parameters.sendHeaders': boolean;
+	'parameters.headerParameters.parameters.0.name': string;
+	'parameters.headerParameters.parameters.0.value': string;
+	'parameters.sendQuery': boolean;
+	'parameters.sendBody': boolean;
 }
 
 export interface HistoryState {
@@ -1340,4 +1363,4 @@ export type SchemaType =
 	| 'function'
 	| 'null'
 	| 'undefined';
-export type Schema = { type: SchemaType, key?: string, value: string | Schema[], path: string };
+export type Schema = { type: SchemaType; key?: string; value: string | Schema[]; path: string };
diff --git a/packages/editor-ui/src/__tests__/permissions.spec.ts b/packages/editor-ui/src/__tests__/permissions.spec.ts
index 14935d8f66..770cffa228 100644
--- a/packages/editor-ui/src/__tests__/permissions.spec.ts
+++ b/packages/editor-ui/src/__tests__/permissions.spec.ts
@@ -1,11 +1,11 @@
 import { parsePermissionsTable } from '@/permissions';
-import { IUser } from "@/Interface";
+import { IUser } from '@/Interface';
 
 describe('parsePermissionsTable()', () => {
 	const user: IUser = {
-		id: "1",
-		firstName: "John",
-		lastName: "Doe",
+		id: '1',
+		firstName: 'John',
+		lastName: 'Doe',
 		isDefaultUser: false,
 		isOwner: true,
 		isPending: false,
diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 8e151db291..bd57d1e416 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/packages/editor-ui/src/__tests__/setup.ts
@@ -11,4 +11,3 @@ Vue.config.devtools = false;
 // [Vue warn]: Failed to mount component: template or render function not defined.
 Vue.component('vue-json-pretty', require('vue-json-pretty').default);
 Vue.use((vue) => I18nPlugin(vue));
-
diff --git a/packages/editor-ui/src/api/api-keys.ts b/packages/editor-ui/src/api/api-keys.ts
index 738d3f23fb..20a72895f6 100644
--- a/packages/editor-ui/src/api/api-keys.ts
+++ b/packages/editor-ui/src/api/api-keys.ts
@@ -1,5 +1,5 @@
-import {IRestApiContext} from "@/Interface";
-import {makeRestApiRequest} from "@/utils";
+import { IRestApiContext } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
 
 export function getApiKey(context: IRestApiContext): Promise<{ apiKey: string | null }> {
 	return makeRestApiRequest(context, 'GET', '/me/api-key');
diff --git a/packages/editor-ui/src/api/communityNodes.ts b/packages/editor-ui/src/api/communityNodes.ts
index 5ed6b1a7ea..453217aa83 100644
--- a/packages/editor-ui/src/api/communityNodes.ts
+++ b/packages/editor-ui/src/api/communityNodes.ts
@@ -2,12 +2,17 @@ import { IRestApiContext } from '@/Interface';
 import { PublicInstalledPackage } from 'n8n-workflow';
 import { get, post, makeRestApiRequest } from '@/utils';
 
-export async function getInstalledCommunityNodes(context: IRestApiContext): Promise<PublicInstalledPackage[]> {
+export async function getInstalledCommunityNodes(
+	context: IRestApiContext,
+): Promise<PublicInstalledPackage[]> {
 	const response = await get(context.baseUrl, '/nodes');
 	return response.data || [];
 }
 
-export async function installNewPackage(context: IRestApiContext, name: string): Promise<PublicInstalledPackage> {
+export async function installNewPackage(
+	context: IRestApiContext,
+	name: string,
+): Promise<PublicInstalledPackage> {
 	return await post(context.baseUrl, '/nodes', { name });
 }
 
@@ -15,6 +20,9 @@ export async function uninstallPackage(context: IRestApiContext, name: string):
 	return await makeRestApiRequest(context, 'DELETE', '/nodes', { name });
 }
 
-export async function updatePackage(context: IRestApiContext, name: string): Promise<PublicInstalledPackage> {
+export async function updatePackage(
+	context: IRestApiContext,
+	name: string,
+): Promise<PublicInstalledPackage> {
 	return await makeRestApiRequest(context, 'PATCH', '/nodes', { name });
 }
diff --git a/packages/editor-ui/src/api/credentials.ee.ts b/packages/editor-ui/src/api/credentials.ee.ts
index 3706b8527e..5a9b5b6196 100644
--- a/packages/editor-ui/src/api/credentials.ee.ts
+++ b/packages/editor-ui/src/api/credentials.ee.ts
@@ -1,13 +1,16 @@
-import {
-	ICredentialsResponse,
-	IRestApiContext,
-	IShareCredentialsPayload,
-} from '@/Interface';
+import { ICredentialsResponse, IRestApiContext, IShareCredentialsPayload } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import {
-	IDataObject,
-} from 'n8n-workflow';
+import { IDataObject } from 'n8n-workflow';
 
-export async function setCredentialSharedWith(context: IRestApiContext, id: string, data: IShareCredentialsPayload): Promise<ICredentialsResponse> {
-	return makeRestApiRequest(context, 'PUT', `/credentials/${id}/share`, data as unknown as IDataObject);
+export async function setCredentialSharedWith(
+	context: IRestApiContext,
+	id: string,
+	data: IShareCredentialsPayload,
+): Promise<ICredentialsResponse> {
+	return makeRestApiRequest(
+		context,
+		'PUT',
+		`/credentials/${id}/share`,
+		data as unknown as IDataObject,
+	);
 }
diff --git a/packages/editor-ui/src/api/credentials.ts b/packages/editor-ui/src/api/credentials.ts
index 539c0edf18..3cc7da7854 100644
--- a/packages/editor-ui/src/api/credentials.ts
+++ b/packages/editor-ui/src/api/credentials.ts
@@ -14,7 +14,10 @@ export async function getCredentialTypes(baseUrl: string): Promise<ICredentialTy
 	return data;
 }
 
-export async function getCredentialsNewName(context: IRestApiContext, name?: string): Promise<{name: string}> {
+export async function getCredentialsNewName(
+	context: IRestApiContext,
+	name?: string,
+): Promise<{ name: string }> {
 	return await makeRestApiRequest(context, 'GET', '/credentials/new', name ? { name } : {});
 }
 
@@ -22,7 +25,10 @@ export async function getAllCredentials(context: IRestApiContext): Promise<ICred
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 
-export async function createNewCredential(context: IRestApiContext, data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
+export async function createNewCredential(
+	context: IRestApiContext,
+	data: ICredentialsDecrypted,
+): Promise<ICredentialsResponse> {
 	return makeRestApiRequest(context, 'POST', `/credentials`, data as unknown as IDataObject);
 }
 
@@ -30,26 +36,52 @@ export async function deleteCredential(context: IRestApiContext, id: string): Pr
 	return makeRestApiRequest(context, 'DELETE', `/credentials/${id}`);
 }
 
-export async function updateCredential(context: IRestApiContext, id: string, data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
+export async function updateCredential(
+	context: IRestApiContext,
+	id: string,
+	data: ICredentialsDecrypted,
+): Promise<ICredentialsResponse> {
 	return makeRestApiRequest(context, 'PATCH', `/credentials/${id}`, data as unknown as IDataObject);
 }
 
-export async function getCredentialData(context: IRestApiContext, id: string): Promise<ICredentialsDecryptedResponse | ICredentialsResponse | undefined> {
+export async function getCredentialData(
+	context: IRestApiContext,
+	id: string,
+): Promise<ICredentialsDecryptedResponse | ICredentialsResponse | undefined> {
 	return makeRestApiRequest(context, 'GET', `/credentials/${id}`, {
 		includeData: true,
 	});
 }
 
 // Get OAuth1 Authorization URL using the stored credentials
-export async function oAuth1CredentialAuthorize(context: IRestApiContext, data: ICredentialsResponse): Promise<string> {
-	return makeRestApiRequest(context, 'GET', `/oauth1-credential/auth`, data as unknown as IDataObject);
+export async function oAuth1CredentialAuthorize(
+	context: IRestApiContext,
+	data: ICredentialsResponse,
+): Promise<string> {
+	return makeRestApiRequest(
+		context,
+		'GET',
+		`/oauth1-credential/auth`,
+		data as unknown as IDataObject,
+	);
 }
 
 // Get OAuth2 Authorization URL using the stored credentials
-export async function oAuth2CredentialAuthorize(context: IRestApiContext, data: ICredentialsResponse): Promise<string> {
-	return makeRestApiRequest(context, 'GET', `/oauth2-credential/auth`, data as unknown as IDataObject);
+export async function oAuth2CredentialAuthorize(
+	context: IRestApiContext,
+	data: ICredentialsResponse,
+): Promise<string> {
+	return makeRestApiRequest(
+		context,
+		'GET',
+		`/oauth2-credential/auth`,
+		data as unknown as IDataObject,
+	);
 }
 
-export async function testCredential(context: IRestApiContext, data: INodeCredentialTestRequest): Promise<INodeCredentialTestResult> {
+export async function testCredential(
+	context: IRestApiContext,
+	data: INodeCredentialTestRequest,
+): Promise<INodeCredentialTestResult> {
 	return makeRestApiRequest(context, 'POST', '/credentials/test', data as unknown as IDataObject);
 }
diff --git a/packages/editor-ui/src/api/curlHelper.ts b/packages/editor-ui/src/api/curlHelper.ts
index a7bc84bdbe..c1927b3b82 100644
--- a/packages/editor-ui/src/api/curlHelper.ts
+++ b/packages/editor-ui/src/api/curlHelper.ts
@@ -1,6 +1,9 @@
-import {CurlToJSONResponse, IRestApiContext} from "@/Interface";
-import {makeRestApiRequest} from "@/utils";
+import { CurlToJSONResponse, IRestApiContext } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
 
-export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<CurlToJSONResponse> {
+export function getCurlToJson(
+	context: IRestApiContext,
+	curlCommand: string,
+): Promise<CurlToJSONResponse> {
 	return makeRestApiRequest(context, 'POST', '/curl-to-json', { curlCommand });
 }
diff --git a/packages/editor-ui/src/api/nodeTypes.ts b/packages/editor-ui/src/api/nodeTypes.ts
index 0114e56c35..bd3a9ec677 100644
--- a/packages/editor-ui/src/api/nodeTypes.ts
+++ b/packages/editor-ui/src/api/nodeTypes.ts
@@ -37,12 +37,12 @@ export async function getNodesInformation(
 export async function getNodeParameterOptions(
 	context: IRestApiContext,
 	sendData: {
-		nodeTypeAndVersion: INodeTypeNameVersion,
-		path: string,
-		methodName?: string,
-		loadOptions?: ILoadOptions,
-		currentNodeParameters: INodeParameters,
-		credentials?: INodeCredentials,
+		nodeTypeAndVersion: INodeTypeNameVersion;
+		path: string;
+		methodName?: string;
+		loadOptions?: ILoadOptions;
+		currentNodeParameters: INodeParameters;
+		credentials?: INodeCredentials;
 	},
 ): Promise<INodePropertyOptions[]> {
 	return makeRestApiRequest(context, 'GET', '/node-parameter-options', sendData);
@@ -52,5 +52,10 @@ export async function getResourceLocatorResults(
 	context: IRestApiContext,
 	sendData: IResourceLocatorReqParams,
 ): Promise<INodeListSearchResult> {
-	return makeRestApiRequest(context, 'GET', '/nodes-list-search', sendData as unknown as IDataObject);
+	return makeRestApiRequest(
+		context,
+		'GET',
+		'/nodes-list-search',
+		sendData as unknown as IDataObject,
+	);
 }
diff --git a/packages/editor-ui/src/api/settings.ts b/packages/editor-ui/src/api/settings.ts
index 9595eab8bc..9bd87f28f7 100644
--- a/packages/editor-ui/src/api/settings.ts
+++ b/packages/editor-ui/src/api/settings.ts
@@ -1,25 +1,55 @@
-import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IN8nPromptResponse } from '../Interface';
+import {
+	IRestApiContext,
+	IN8nPrompts,
+	IN8nValueSurveyData,
+	IN8nUISettings,
+	IN8nPromptResponse,
+} from '../Interface';
 import { makeRestApiRequest, get, post } from '@/utils';
-import { N8N_IO_BASE_URL, NPM_COMMUNITY_NODE_SEARCH_API_URL  } from '@/constants';
+import { N8N_IO_BASE_URL, NPM_COMMUNITY_NODE_SEARCH_API_URL } from '@/constants';
 
 export function getSettings(context: IRestApiContext): Promise<IN8nUISettings> {
 	return makeRestApiRequest(context, 'GET', '/settings');
 }
 
 export async function getPromptsData(instanceId: string, userId: string): Promise<IN8nPrompts> {
-	return await get(N8N_IO_BASE_URL, '/prompts', {}, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
+	return await get(
+		N8N_IO_BASE_URL,
+		'/prompts',
+		{},
+		{ 'n8n-instance-id': instanceId, 'n8n-user-id': userId },
+	);
 }
 
-export async function submitContactInfo(instanceId: string, userId: string, email: string): Promise<IN8nPromptResponse> {
-	return await post(N8N_IO_BASE_URL, '/prompt', { email }, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
+export async function submitContactInfo(
+	instanceId: string,
+	userId: string,
+	email: string,
+): Promise<IN8nPromptResponse> {
+	return await post(
+		N8N_IO_BASE_URL,
+		'/prompt',
+		{ email },
+		{ 'n8n-instance-id': instanceId, 'n8n-user-id': userId },
+	);
 }
 
-export async function submitValueSurvey(instanceId: string, userId: string, params: IN8nValueSurveyData): Promise<IN8nPromptResponse> {
-	return await post(N8N_IO_BASE_URL, '/value-survey', params, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
+export async function submitValueSurvey(
+	instanceId: string,
+	userId: string,
+	params: IN8nValueSurveyData,
+): Promise<IN8nPromptResponse> {
+	return await post(N8N_IO_BASE_URL, '/value-survey', params, {
+		'n8n-instance-id': instanceId,
+		'n8n-user-id': userId,
+	});
 }
 
 export async function getAvailableCommunityPackageCount(): Promise<number> {
-	const response = await get(NPM_COMMUNITY_NODE_SEARCH_API_URL, 'search?q=keywords:n8n-community-node-package');
+	const response = await get(
+		NPM_COMMUNITY_NODE_SEARCH_API_URL,
+		'search?q=keywords:n8n-community-node-package',
+	);
 
 	return response.total || 0;
 }
diff --git a/packages/editor-ui/src/api/tags.ts b/packages/editor-ui/src/api/tags.ts
index 290d79534e..4539278125 100644
--- a/packages/editor-ui/src/api/tags.ts
+++ b/packages/editor-ui/src/api/tags.ts
@@ -9,7 +9,11 @@ export async function createTag(context: IRestApiContext, params: { name: string
 	return await makeRestApiRequest(context, 'POST', '/tags', params);
 }
 
-export async function updateTag(context: IRestApiContext, id: string, params: { name: string }): Promise<ITag> {
+export async function updateTag(
+	context: IRestApiContext,
+	id: string,
+	params: { name: string },
+): Promise<ITag> {
 	return await makeRestApiRequest(context, 'PATCH', `/tags/${id}`, params);
 }
 
diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts
index ec7fc854b4..870f962d48 100644
--- a/packages/editor-ui/src/api/templates.ts
+++ b/packages/editor-ui/src/api/templates.ts
@@ -1,4 +1,12 @@
-import { ITemplatesCategory, ITemplatesCollection, ITemplatesQuery, ITemplatesWorkflow, ITemplatesCollectionResponse, ITemplatesWorkflowResponse, IWorkflowTemplate } from '@/Interface';
+import {
+	ITemplatesCategory,
+	ITemplatesCollection,
+	ITemplatesQuery,
+	ITemplatesWorkflow,
+	ITemplatesCollectionResponse,
+	ITemplatesWorkflowResponse,
+	IWorkflowTemplate,
+} from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import { get } from '@/utils';
 
@@ -10,30 +18,64 @@ export function testHealthEndpoint(apiEndpoint: string) {
 	return get(apiEndpoint, '/health');
 }
 
-export function getCategories(apiEndpoint: string, headers?: IDataObject): Promise<{categories: ITemplatesCategory[]}> {
+export function getCategories(
+	apiEndpoint: string,
+	headers?: IDataObject,
+): Promise<{ categories: ITemplatesCategory[] }> {
 	return get(apiEndpoint, '/templates/categories', undefined, headers);
 }
 
-export async function getCollections(apiEndpoint: string, query: ITemplatesQuery, headers?: IDataObject): Promise<{collections: ITemplatesCollection[]}> {
-	return await get(apiEndpoint, '/templates/collections', {category: stringifyArray(query.categories || []), search: query.search}, headers);
+export async function getCollections(
+	apiEndpoint: string,
+	query: ITemplatesQuery,
+	headers?: IDataObject,
+): Promise<{ collections: ITemplatesCollection[] }> {
+	return await get(
+		apiEndpoint,
+		'/templates/collections',
+		{ category: stringifyArray(query.categories || []), search: query.search },
+		headers,
+	);
 }
 
 export async function getWorkflows(
 	apiEndpoint: string,
-	query: {skip: number, limit: number, categories: number[], search: string},
+	query: { skip: number; limit: number; categories: number[]; search: string },
 	headers?: IDataObject,
-): Promise<{totalWorkflows: number, workflows: ITemplatesWorkflow[]}> {
-	return get(apiEndpoint, '/templates/workflows', {skip: query.skip, rows: query.limit, category: stringifyArray(query.categories), search: query.search}, headers);
+): Promise<{ totalWorkflows: number; workflows: ITemplatesWorkflow[] }> {
+	return get(
+		apiEndpoint,
+		'/templates/workflows',
+		{
+			skip: query.skip,
+			rows: query.limit,
+			category: stringifyArray(query.categories),
+			search: query.search,
+		},
+		headers,
+	);
 }
 
-export async function getCollectionById(apiEndpoint: string, collectionId: string, headers?: IDataObject): Promise<{collection: ITemplatesCollectionResponse}> {
+export async function getCollectionById(
+	apiEndpoint: string,
+	collectionId: string,
+	headers?: IDataObject,
+): Promise<{ collection: ITemplatesCollectionResponse }> {
 	return await get(apiEndpoint, `/templates/collections/${collectionId}`, undefined, headers);
 }
 
-export async function getTemplateById(apiEndpoint: string, templateId: string, headers?: IDataObject): Promise<{workflow: ITemplatesWorkflowResponse}> {
+export async function getTemplateById(
+	apiEndpoint: string,
+	templateId: string,
+	headers?: IDataObject,
+): Promise<{ workflow: ITemplatesWorkflowResponse }> {
 	return await get(apiEndpoint, `/templates/workflows/${templateId}`, undefined, headers);
 }
 
-export async function getWorkflowTemplate(apiEndpoint: string, templateId: string, headers?: IDataObject): Promise<IWorkflowTemplate> {
+export async function getWorkflowTemplate(
+	apiEndpoint: string,
+	templateId: string,
+	headers?: IDataObject,
+): Promise<IWorkflowTemplate> {
 	return await get(apiEndpoint, `/workflows/templates/${templateId}`, undefined, headers);
 }
diff --git a/packages/editor-ui/src/api/users.ts b/packages/editor-ui/src/api/users.ts
index 1ffe5852b7..9b7ec5fcdb 100644
--- a/packages/editor-ui/src/api/users.ts
+++ b/packages/editor-ui/src/api/users.ts
@@ -1,4 +1,9 @@
-import { IInviteResponse, IPersonalizationLatestVersion, IRestApiContext, IUserResponse } from '@/Interface';
+import {
+	IInviteResponse,
+	IPersonalizationLatestVersion,
+	IRestApiContext,
+	IUserResponse,
+} from '@/Interface';
 import { IDataObject } from 'n8n-workflow';
 import { makeRestApiRequest } from '@/utils';
 
@@ -10,7 +15,10 @@ export function getCurrentUser(context: IRestApiContext): Promise<IUserResponse
 	return makeRestApiRequest(context, 'GET', '/me');
 }
 
-export function login(context: IRestApiContext, params: {email: string, password: string}): Promise<IUserResponse> {
+export function login(
+	context: IRestApiContext,
+	params: { email: string; password: string },
+): Promise<IUserResponse> {
 	return makeRestApiRequest(context, 'POST', '/login', params);
 }
 
@@ -18,7 +26,10 @@ export async function logout(context: IRestApiContext): Promise<void> {
 	await makeRestApiRequest(context, 'POST', '/logout');
 }
 
-export function setupOwner(context: IRestApiContext, params: { firstName: string; lastName: string; email: string; password: string;}): Promise<IUserResponse> {
+export function setupOwner(
+	context: IRestApiContext,
+	params: { firstName: string; lastName: string; email: string; password: string },
+): Promise<IUserResponse> {
 	return makeRestApiRequest(context, 'POST', '/owner', params as unknown as IDataObject);
 }
 
@@ -26,36 +37,71 @@ export function skipOwnerSetup(context: IRestApiContext): Promise<void> {
 	return makeRestApiRequest(context, 'POST', '/owner/skip-setup');
 }
 
-export function validateSignupToken(context: IRestApiContext, params: {inviterId: string; inviteeId: string}): Promise<{inviter: {firstName: string, lastName: string}}> {
+export function validateSignupToken(
+	context: IRestApiContext,
+	params: { inviterId: string; inviteeId: string },
+): Promise<{ inviter: { firstName: string; lastName: string } }> {
 	return makeRestApiRequest(context, 'GET', '/resolve-signup-token', params);
 }
 
-export function signup(context: IRestApiContext, params:  {inviterId: string; inviteeId: string; firstName: string; lastName: string; password: string}): Promise<IUserResponse> {
+export function signup(
+	context: IRestApiContext,
+	params: {
+		inviterId: string;
+		inviteeId: string;
+		firstName: string;
+		lastName: string;
+		password: string;
+	},
+): Promise<IUserResponse> {
 	const { inviteeId, ...props } = params;
-	return makeRestApiRequest(context, 'POST', `/users/${params.inviteeId}`, props as unknown as IDataObject);
+	return makeRestApiRequest(
+		context,
+		'POST',
+		`/users/${params.inviteeId}`,
+		props as unknown as IDataObject,
+	);
 }
 
-export async function sendForgotPasswordEmail(context: IRestApiContext, params: {email: string}): Promise<void> {
+export async function sendForgotPasswordEmail(
+	context: IRestApiContext,
+	params: { email: string },
+): Promise<void> {
 	await makeRestApiRequest(context, 'POST', '/forgot-password', params);
 }
 
-export async function validatePasswordToken(context: IRestApiContext, params: {token: string, userId: string}): Promise<void> {
+export async function validatePasswordToken(
+	context: IRestApiContext,
+	params: { token: string; userId: string },
+): Promise<void> {
 	await makeRestApiRequest(context, 'GET', '/resolve-password-token', params);
 }
 
-export async function changePassword(context: IRestApiContext, params: {token: string, password: string, userId: string}): Promise<void> {
+export async function changePassword(
+	context: IRestApiContext,
+	params: { token: string; password: string; userId: string },
+): Promise<void> {
 	await makeRestApiRequest(context, 'POST', '/change-password', params);
 }
 
-export function updateCurrentUser(context: IRestApiContext, params: {id: string, firstName: string, lastName: string, email: string}): Promise<IUserResponse> {
+export function updateCurrentUser(
+	context: IRestApiContext,
+	params: { id: string; firstName: string; lastName: string; email: string },
+): Promise<IUserResponse> {
 	return makeRestApiRequest(context, 'PATCH', `/me`, params as unknown as IDataObject);
 }
 
-export function updateCurrentUserPassword(context: IRestApiContext, params: {newPassword: string, currentPassword: string}): Promise<void> {
+export function updateCurrentUserPassword(
+	context: IRestApiContext,
+	params: { newPassword: string; currentPassword: string },
+): Promise<void> {
 	return makeRestApiRequest(context, 'PATCH', `/me/password`, params);
 }
 
-export async function deleteUser(context: IRestApiContext, {id, transferId}: {id: string, transferId?: string}): Promise<void> {
+export async function deleteUser(
+	context: IRestApiContext,
+	{ id, transferId }: { id: string; transferId?: string },
+): Promise<void> {
 	await makeRestApiRequest(context, 'DELETE', `/users/${id}`, transferId ? { transferId } : {});
 }
 
@@ -63,14 +109,20 @@ export function getUsers(context: IRestApiContext): Promise<IUserResponse[]> {
 	return makeRestApiRequest(context, 'GET', '/users');
 }
 
-export function inviteUsers(context: IRestApiContext, params: Array<{email: string}>): Promise<IInviteResponse[]> {
+export function inviteUsers(
+	context: IRestApiContext,
+	params: Array<{ email: string }>,
+): Promise<IInviteResponse[]> {
 	return makeRestApiRequest(context, 'POST', '/users', params as unknown as IDataObject);
 }
 
-export async function reinvite(context: IRestApiContext, {id}: {id: string}): Promise<void> {
+export async function reinvite(context: IRestApiContext, { id }: { id: string }): Promise<void> {
 	await makeRestApiRequest(context, 'POST', `/users/${id}/reinvite`);
 }
 
-export async function submitPersonalizationSurvey(context: IRestApiContext, params: IPersonalizationLatestVersion): Promise<void> {
+export async function submitPersonalizationSurvey(
+	context: IRestApiContext,
+	params: IPersonalizationLatestVersion,
+): Promise<void> {
 	await makeRestApiRequest(context, 'POST', '/me/survey', params as unknown as IDataObject);
 }
diff --git a/packages/editor-ui/src/api/versions.ts b/packages/editor-ui/src/api/versions.ts
index 07abd13955..e6842342fd 100644
--- a/packages/editor-ui/src/api/versions.ts
+++ b/packages/editor-ui/src/api/versions.ts
@@ -2,7 +2,11 @@ import { IVersion } from '@/Interface';
 import { INSTANCE_ID_HEADER } from '@/constants';
 import { get } from '@/utils';
 
-export async function getNextVersions(endpoint: string, version: string, instanceId: string): Promise<IVersion[]> {
-	const headers = {[INSTANCE_ID_HEADER as string] : instanceId};
+export async function getNextVersions(
+	endpoint: string,
+	version: string,
+	instanceId: string,
+): Promise<IVersion[]> {
+	const headers = { [INSTANCE_ID_HEADER as string]: instanceId };
 	return await get(endpoint, version, {}, headers);
 }
diff --git a/packages/editor-ui/src/api/workflow-webhooks.ts b/packages/editor-ui/src/api/workflow-webhooks.ts
index 52ad98c747..b31192f5da 100644
--- a/packages/editor-ui/src/api/workflow-webhooks.ts
+++ b/packages/editor-ui/src/api/workflow-webhooks.ts
@@ -1,49 +1,49 @@
-import { IOnboardingCallPrompt, IOnboardingCallPromptResponse, IUser } from "@/Interface";
-import { get, post } from "@/utils";
+import { IOnboardingCallPrompt, IOnboardingCallPromptResponse, IUser } from '@/Interface';
+import { get, post } from '@/utils';
 
 const N8N_API_BASE_URL = 'https://api.n8n.io/api';
 const ONBOARDING_PROMPTS_ENDPOINT = '/prompts/onboarding';
 const CONTACT_EMAIL_SUBMISSION_ENDPOINT = '/accounts/onboarding';
 
-export async function fetchNextOnboardingPrompt(instanceId: string, currentUer: IUser): Promise<IOnboardingCallPrompt> {
-	return await get(
-		N8N_API_BASE_URL,
-		ONBOARDING_PROMPTS_ENDPOINT,
-		{
-			instance_id: instanceId,
-			user_id: `${instanceId}#${currentUer.id}`,
-			is_owner: currentUer.isOwner,
-			survey_results: currentUer.personalizationAnswers,
-		},
-	);
+export async function fetchNextOnboardingPrompt(
+	instanceId: string,
+	currentUer: IUser,
+): Promise<IOnboardingCallPrompt> {
+	return await get(N8N_API_BASE_URL, ONBOARDING_PROMPTS_ENDPOINT, {
+		instance_id: instanceId,
+		user_id: `${instanceId}#${currentUer.id}`,
+		is_owner: currentUer.isOwner,
+		survey_results: currentUer.personalizationAnswers,
+	});
 }
 
-export async function applyForOnboardingCall(instanceId: string, currentUer: IUser, email: string): Promise<string> {
+export async function applyForOnboardingCall(
+	instanceId: string,
+	currentUer: IUser,
+	email: string,
+): Promise<string> {
 	try {
-		const response = await post(
-			N8N_API_BASE_URL,
-			ONBOARDING_PROMPTS_ENDPOINT,
-			{
-				instance_id: instanceId,
-				user_id: `${instanceId}#${currentUer.id}`,
-				email,
-			},
-		);
+		const response = await post(N8N_API_BASE_URL, ONBOARDING_PROMPTS_ENDPOINT, {
+			instance_id: instanceId,
+			user_id: `${instanceId}#${currentUer.id}`,
+			email,
+		});
 		return response;
 	} catch (e) {
 		throw e;
 	}
 }
 
-export async function submitEmailOnSignup(instanceId: string, currentUer: IUser, email: string | undefined, agree: boolean): Promise<string> {
-	return await post(
-		N8N_API_BASE_URL,
-		CONTACT_EMAIL_SUBMISSION_ENDPOINT,
-		{
-			instance_id: instanceId,
-			user_id: `${instanceId}#${currentUer.id}`,
-			email,
-			agree,
-		},
-	);
+export async function submitEmailOnSignup(
+	instanceId: string,
+	currentUer: IUser,
+	email: string | undefined,
+	agree: boolean,
+): Promise<string> {
+	return await post(N8N_API_BASE_URL, CONTACT_EMAIL_SUBMISSION_ENDPOINT, {
+		instance_id: instanceId,
+		user_id: `${instanceId}#${currentUer.id}`,
+		email,
+		agree,
+	});
 }
diff --git a/packages/editor-ui/src/api/workflows.ee.ts b/packages/editor-ui/src/api/workflows.ee.ts
index d935c60b4e..499fad502c 100644
--- a/packages/editor-ui/src/api/workflows.ee.ts
+++ b/packages/editor-ui/src/api/workflows.ee.ts
@@ -1,13 +1,16 @@
-import {
-	IRestApiContext,
-	IShareWorkflowsPayload,
-	IWorkflowsShareResponse,
-} from '@/Interface';
+import { IRestApiContext, IShareWorkflowsPayload, IWorkflowsShareResponse } from '@/Interface';
 import { makeRestApiRequest } from '@/utils';
-import {
-	IDataObject,
-} from 'n8n-workflow';
+import { IDataObject } from 'n8n-workflow';
 
-export async function setWorkflowSharedWith(context: IRestApiContext, id: string, data: IShareWorkflowsPayload): Promise<IWorkflowsShareResponse> {
-	return makeRestApiRequest(context, 'PUT', `/workflows/${id}/share`, data as unknown as IDataObject);
+export async function setWorkflowSharedWith(
+	context: IRestApiContext,
+	id: string,
+	data: IShareWorkflowsPayload,
+): Promise<IWorkflowsShareResponse> {
+	return makeRestApiRequest(
+		context,
+		'PUT',
+		`/workflows/${id}/share`,
+		data as unknown as IDataObject,
+	);
 }
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 04149d4cff..de35589f64 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -73,10 +73,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-		),
+		...mapStores(useRootStore, useSettingsStore),
 	},
 	methods: {
 		closeDialog() {
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index b76fa44d31..e511a1d96a 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -23,10 +23,11 @@
 			</div>
 		</template>
 
-
 		<template #footer="{ close }">
 			<div :class="$style.footer">
-				<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
+				<el-checkbox :value="checked" @change="handleCheckboxChange">{{
+					$locale.baseText('activationModal.dontShowAgain')
+				}}</el-checkbox>
 				<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />
 			</div>
 		</template>
@@ -37,7 +38,12 @@
 import Vue from 'vue';
 
 import Modal from '@/components/Modal.vue';
-import { WORKFLOW_ACTIVE_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG, VIEWS } from '../constants';
+import {
+	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+	LOCAL_STORAGE_ACTIVATION_FLAG,
+	VIEWS,
+} from '../constants';
 import { getActivatableTriggerNodes, getTriggerNodeServiceName } from '@/utils';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
@@ -49,10 +55,8 @@ export default Vue.extend({
 	components: {
 		Modal,
 	},
-	props: [
-		'modalName',
-	],
-	data () {
+	props: ['modalName'],
+	data() {
 		return {
 			WORKFLOW_ACTIVE_MODAL_KEY,
 			checked: false,
@@ -60,35 +64,35 @@ export default Vue.extend({
 		};
 	},
 	methods: {
-		async showExecutionsList () {
+		async showExecutionsList() {
 			const activeExecution = this.workflowsStore.activeWorkflowExecution;
 			const currentWorkflow = this.workflowsStore.workflowId;
 
 			if (activeExecution) {
-				this.$router.push({
-					name: VIEWS.EXECUTION_PREVIEW,
-					params: { name: currentWorkflow, executionId: activeExecution.id },
-				}).catch(()=>{});;
+				this.$router
+					.push({
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { name: currentWorkflow, executionId: activeExecution.id },
+					})
+					.catch(() => {});
 			} else {
-				this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } }).catch(() => {});
+				this.$router
+					.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } })
+					.catch(() => {});
 			}
 			this.uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
 		},
 		async showSettings() {
 			this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 		},
-		handleCheckboxChange (checkboxValue: boolean) {
+		handleCheckboxChange(checkboxValue: boolean) {
 			this.checked = checkboxValue;
 			window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
-		triggerContent (): string {
+		...mapStores(useNodeTypesStore, useUIStore, useWorkflowsStore),
+		triggerContent(): string {
 			const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
 			if (!foundTriggers.length) {
 				return '';
@@ -101,10 +105,10 @@ export default Vue.extend({
 			const trigger = foundTriggers[0];
 
 			const triggerNodeType = this.nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
-				if (triggerNodeType) {
-					if (triggerNodeType.activationMessage) {
-						return triggerNodeType.activationMessage;
-					}
+			if (triggerNodeType) {
+				if (triggerNodeType.activationMessage) {
+					return triggerNodeType.activationMessage;
+				}
 
 				const serviceName = getTriggerNodeServiceName(triggerNodeType);
 				if (trigger.webhookId) {
@@ -139,5 +143,4 @@ export default Vue.extend({
 		margin-left: var(--spacing-s);
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/Badge.vue b/packages/editor-ui/src/components/Badge.vue
index ee16d94130..0275081a73 100644
--- a/packages/editor-ui/src/components/Badge.vue
+++ b/packages/editor-ui/src/components/Badge.vue
@@ -1,51 +1,42 @@
 <template>
-  <fragment>
-    <el-tag
-      v-if="type === 'danger'"
-      type="danger"
-      size="small"
-      :class="$style['danger']"
-    >
-      {{ text }}
-    </el-tag>
-    <el-tag
-      v-else-if="type === 'warning'"
-      size="small"
-      :class="$style['warning']"
-    >
-      {{ text }}
-    </el-tag>
-  </fragment>
+	<fragment>
+		<el-tag v-if="type === 'danger'" type="danger" size="small" :class="$style['danger']">
+			{{ text }}
+		</el-tag>
+		<el-tag v-else-if="type === 'warning'" size="small" :class="$style['warning']">
+			{{ text }}
+		</el-tag>
+	</fragment>
 </template>
 
 <script lang="ts">
 export default {
-	props: ["text", "type"],
+	props: ['text', 'type'],
 };
 </script>
 
 <style lang="scss" module>
 .badge {
-  font-size: 11px;
-  line-height: 18px;
-  max-height: 18px;
-  font-weight: 400;
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
+	font-size: 11px;
+	line-height: 18px;
+	max-height: 18px;
+	font-weight: 400;
+	display: flex;
+	align-items: center;
+	padding: 2px 4px;
 }
 
 .danger {
-  composes: badge;
-  color: $badge-danger-color;
-  background-color: $badge-danger-background-color;
-  border-color: $badge-danger-border-color;
+	composes: badge;
+	color: $badge-danger-color;
+	background-color: $badge-danger-background-color;
+	border-color: $badge-danger-border-color;
 }
 
 .warning {
-  composes: badge;
-  background-color: $badge-warning-background-color;
-  color: $badge-warning-color;
-  border: none;
+	composes: badge;
+	background-color: $badge-warning-background-color;
+	color: $badge-warning-color;
+	border: none;
 }
 </style>
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 9f8d4e8e86..ed6e6b3f04 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -1,30 +1,16 @@
 <template>
-	<el-tag
-		:type="theme"
-		size="medium"
-		:disable-transitions="true"
-		:class="$style.container"
-	>
+	<el-tag :type="theme" size="medium" :disable-transitions="true" :class="$style.container">
 		<font-awesome-icon
-				:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
-				:class="theme === 'success' ? $style.icon : $style.dangerIcon"
+			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
+			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
 		/>
-		<div
-			:class="$style.banner"
-		>
+		<div :class="$style.banner">
 			<div :class="$style.content">
 				<div>
-					<span
-						:class="theme === 'success' ? $style.message : $style.dangerMessage"
-					>
+					<span :class="theme === 'success' ? $style.message : $style.dangerMessage">
 						{{ message }}&nbsp;
 					</span>
-					<n8n-link
-						v-if="details && !expanded"
-						:bold="true"
-						size="small"
-						@click="expand"
-					>
+					<n8n-link v-if="details && !expanded" :bold="true" size="small" @click="expand">
 						<span :class="$style.moreDetails">More details</span>
 					</n8n-link>
 				</div>
@@ -43,7 +29,7 @@
 		</div>
 
 		<div v-if="expanded" :class="$style.details">
-			{{details}}
+			{{ details }}
 		</div>
 	</el-tag>
 </template>
@@ -61,8 +47,7 @@ export default Vue.extend({
 	props: {
 		theme: {
 			type: String,
-			validator: (value: string): boolean =>
-				['success', 'danger'].indexOf(value) !== -1,
+			validator: (value: string): boolean => ['success', 'danger'].indexOf(value) !== -1,
 		},
 		message: {
 			type: String,
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index 4f7656662c..f1d35b0352 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -13,9 +13,8 @@
 			<div v-if="!binaryData">
 				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
 			</div>
-			<BinaryDataDisplayEmbed v-else :binaryData="binaryData"/>
+			<BinaryDataDisplayEmbed v-else :binaryData="binaryData" />
 		</div>
-
 	</div>
 </template>
 
@@ -31,62 +30,62 @@ import { restApi } from '@/mixins/restApi';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-export default mixins(
-	nodeHelpers,
-	restApi,
-)
-	.extend({
-		name: 'BinaryDataDisplay',
-		components: {
-			BinaryDataDisplayEmbed,
+export default mixins(nodeHelpers, restApi).extend({
+	name: 'BinaryDataDisplay',
+	components: {
+		BinaryDataDisplayEmbed,
+	},
+	props: [
+		'displayData', // IBinaryData
+		'windowVisible', // boolean
+	],
+	computed: {
+		...mapStores(useWorkflowsStore),
+		binaryData(): IBinaryData | null {
+			const binaryData = this.getBinaryData(
+				this.workflowRunData,
+				this.displayData.node,
+				this.displayData.runIndex,
+				this.displayData.outputIndex,
+			);
+
+			if (binaryData.length === 0) {
+				return null;
+			}
+
+			if (
+				this.displayData.index >= binaryData.length ||
+				binaryData[this.displayData.index][this.displayData.key] === undefined
+			) {
+				return null;
+			}
+
+			const binaryDataItem: IBinaryData = binaryData[this.displayData.index][this.displayData.key];
+
+			return binaryDataItem;
 		},
-		props: [
-			'displayData', // IBinaryData
-			'windowVisible', // boolean
-		],
-		computed: {
-			...mapStores(
-				useWorkflowsStore,
-			),
-			binaryData (): IBinaryData | null {
-				const binaryData = this.getBinaryData(this.workflowRunData, this.displayData.node, this.displayData.runIndex, this.displayData.outputIndex);
-
-				if (binaryData.length === 0) {
-					return null;
-				}
-
-				if (this.displayData.index >= binaryData.length || binaryData[this.displayData.index][this.displayData.key] === undefined) {
-					return null;
-				}
-
-				const binaryDataItem: IBinaryData = binaryData[this.displayData.index][this.displayData.key];
-
-				return binaryDataItem;
-			},
-
-			workflowRunData (): IRunData | null {
-				const workflowExecution = this.workflowsStore.getWorkflowExecution;
-				if (workflowExecution === null) {
-					return null;
-				}
-				const executionData = workflowExecution.data;
-				return executionData? executionData.resultData.runData : null;
-			},
 
+		workflowRunData(): IRunData | null {
+			const workflowExecution = this.workflowsStore.getWorkflowExecution;
+			if (workflowExecution === null) {
+				return null;
+			}
+			const executionData = workflowExecution.data;
+			return executionData ? executionData.resultData.runData : null;
 		},
-		methods: {
-			closeWindow () {
-				// Handle the close externally as the visible parameter is an external prop
-				// and is so not allowed to be changed here.
-				this.$emit('close');
-				return false;
-			},
+	},
+	methods: {
+		closeWindow() {
+			// Handle the close externally as the visible parameter is an external prop
+			// and is so not allowed to be changed here.
+			this.$emit('close');
+			return false;
 		},
-	});
+	},
+});
 </script>
 
 <style lang="scss">
-
 .binary-data-window {
 	position: absolute;
 	top: 50px;
@@ -103,7 +102,7 @@ export default mixins(
 	}
 
 	.binary-data-window-wrapper {
-		margin-top: .5em;
+		margin-top: 0.5em;
 		padding: 0 1em;
 		height: calc(100% - 50px);
 
@@ -126,7 +125,5 @@ export default mixins(
 			width: calc(100% - 1em);
 		}
 	}
-
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index afd28bc0ae..5b71d0a480 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -1,14 +1,10 @@
 <template>
 	<span>
-		<div v-if="isLoading">
-			Loading binary data...
-		</div>
-		<div v-else-if="error">
-			Error loading binary data
-		</div>
+		<div v-if="isLoading">Loading binary data...</div>
+		<div v-else-if="error">Error loading binary data</div>
 		<span v-else>
 			<video v-if="binaryData.fileType === 'video'" controls autoplay>
-				<source :src="embedSource" :type="binaryData.mimeType">
+				<source :src="embedSource" :type="binaryData.mimeType" />
 				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
 			</video>
 			<vue-json-pretty
@@ -17,7 +13,7 @@
 				:deep="3"
 				:showLength="true"
 			/>
-			<embed v-else :src="embedSource" class="binary-data" :class="embedClass()"/>
+			<embed v-else :src="embedSource" class="binary-data" :class="embedClass()" />
 		</span>
 	</span>
 </template>
@@ -29,76 +25,71 @@ import { IBinaryData, jsonParse } from 'n8n-workflow';
 import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
 
-export default mixins(
-	restApi,
-)
-	.extend({
-		name: 'BinaryDataDisplayEmbed',
-		components: {
-			VueJsonPretty,
+export default mixins(restApi).extend({
+	name: 'BinaryDataDisplayEmbed',
+	components: {
+		VueJsonPretty,
+	},
+	props: {
+		binaryData: {
+			type: Object as PropType<IBinaryData>,
+			required: true,
 		},
-		props: {
-			binaryData: {
-				type: Object as PropType<IBinaryData>,
-				required: true,
-			},
-		},
-		data() {
-			return {
-				isLoading: true,
-				embedSource: '',
-				error: false,
-				jsonData: '',
-			};
-		},
-		async mounted() {
-			const id = this.binaryData?.id;
-			const isJSONData = this.binaryData.fileType === 'json';
+	},
+	data() {
+		return {
+			isLoading: true,
+			embedSource: '',
+			error: false,
+			jsonData: '',
+		};
+	},
+	async mounted() {
+		const id = this.binaryData?.id;
+		const isJSONData = this.binaryData.fileType === 'json';
 
-			if(!id) {
-				if (isJSONData) {
-					this.jsonData = jsonParse(atob(this.binaryData.data));
-				} else {
-					this.embedSource = 'data:' + this.binaryData.mimeType + ';base64,' + this.binaryData.data;
-				}
+		if (!id) {
+			if (isJSONData) {
+				this.jsonData = jsonParse(atob(this.binaryData.data));
 			} else {
-				try {
-					const binaryUrl = this.restApi().getBinaryUrl(id);
-					if (isJSONData) {
-						this.jsonData = await (await fetch(binaryUrl)).json();
-					} else {
-						this.embedSource = binaryUrl;
-					}
-				} catch (e) {
-					this.error = true;
-				}
+				this.embedSource = 'data:' + this.binaryData.mimeType + ';base64,' + this.binaryData.data;
 			}
+		} else {
+			try {
+				const binaryUrl = this.restApi().getBinaryUrl(id);
+				if (isJSONData) {
+					this.jsonData = await (await fetch(binaryUrl)).json();
+				} else {
+					this.embedSource = binaryUrl;
+				}
+			} catch (e) {
+				this.error = true;
+			}
+		}
 
-			this.isLoading = false;
+		this.isLoading = false;
+	},
+	methods: {
+		embedClass(): string[] {
+			const { fileType } = (this.binaryData || {}) as IBinaryData;
+			return [fileType ?? 'other'];
 		},
-		methods: {
-			embedClass(): string[] {
-				const { fileType } = (this.binaryData || {}) as IBinaryData;
-				return [fileType ?? 'other'];
-			},
-		},
-	});
+	},
+});
 </script>
 
 <style lang="scss">
-
 .binary-data {
-    background-color: var(--color-foreground-xlight);
+	background-color: var(--color-foreground-xlight);
 
-    &.image {
-        max-height: calc(100% - 1em);
-        max-width: calc(100% - 1em);
-    }
+	&.image {
+		max-height: calc(100% - 1em);
+		max-width: calc(100% - 1em);
+	}
 
-    &.other {
-        height: calc(100% - 1em);
-        width: calc(100% - 1em);
-    }
+	&.other {
+		height: calc(100% - 1em);
+		width: calc(100% - 1em);
+	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 9be77b8b65..50c1e4e2b7 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -5,12 +5,7 @@
 </template>
 
 <script lang="ts">
-import {
-	BREAKPOINT_SM,
-	BREAKPOINT_MD,
-	BREAKPOINT_LG,
-	BREAKPOINT_XL,
-} from "@/constants";
+import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
 
 /**
  * matching element.io https://element.eleme.io/#/en-US/component/layout#col-attributes
@@ -21,34 +16,27 @@ import {
  * xl >= 1920
  */
 
-import mixins from "vue-typed-mixins";
-import { genericHelpers } from "@/mixins/genericHelpers";
-import { debounceHelper } from "@/mixins/debounce";
+import mixins from 'vue-typed-mixins';
+import { genericHelpers } from '@/mixins/genericHelpers';
+import { debounceHelper } from '@/mixins/debounce';
 
 export default mixins(genericHelpers, debounceHelper).extend({
-	name: "BreakpointsObserver",
-	props: [
-		"valueXS",
-		"valueXL",
-		"valueLG",
-		"valueMD",
-		"valueSM",
-		"valueDefault",
-	],
+	name: 'BreakpointsObserver',
+	props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
 	data() {
 		return {
 			width: window.innerWidth,
 		};
 	},
 	created() {
-		window.addEventListener("resize", this.onResize);
+		window.addEventListener('resize', this.onResize);
 	},
 	beforeDestroy() {
-		window.removeEventListener("resize", this.onResize);
+		window.removeEventListener('resize', this.onResize);
 	},
 	methods: {
 		onResize() {
-			this.callDebounced("onResizeEnd", { debounceTime: 50 });
+			this.callDebounced('onResizeEnd', { debounceTime: 50 });
 		},
 		onResizeEnd() {
 			this.$data.width = window.innerWidth;
@@ -57,24 +45,25 @@ export default mixins(genericHelpers, debounceHelper).extend({
 	computed: {
 		bp(): string {
 			if (this.$data.width < BREAKPOINT_SM) {
-				return "XS";
+				return 'XS';
 			}
 
 			if (this.$data.width >= BREAKPOINT_XL) {
-				return "XL";
+				return 'XL';
 			}
 
 			if (this.$data.width >= BREAKPOINT_LG) {
-				return "LG";
+				return 'LG';
 			}
 
 			if (this.$data.width >= BREAKPOINT_MD) {
-				return "MD";
+				return 'MD';
 			}
 
-			return "SM";
+			return 'SM';
 		},
-		value(): any | undefined { // tslint:disable-line:no-any
+		value(): any | undefined {
+			// tslint:disable-line:no-any
 			if (this.$props.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
 				return this.$props.valueXS;
 			}
diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
index 4b40159e57..a2637ba05a 100644
--- a/packages/editor-ui/src/components/CanvasControls.vue
+++ b/packages/editor-ui/src/components/CanvasControls.vue
@@ -1,14 +1,41 @@
 <template>
-	<div :class="{ [$style.zoomMenu]: true, [$style.regularZoomMenu]: !isDemo, [$style.demoZoomMenu]: isDemo }">
-		<n8n-icon-button @click="zoomToFit" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomToFit')"
-										 icon="expand"
-										 data-test-id="zoom-to-fit" />
-		<n8n-icon-button @click="zoomIn" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomIn')"
-										 icon="search-plus" />
-		<n8n-icon-button @click="zoomOut" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomOut')"
-										 icon="search-minus" />
-		<n8n-icon-button v-if="nodeViewScale !== 1 && !isDemo" @click="resetZoom" type="tertiary" size="large"
-										 :title="$locale.baseText('nodeView.resetZoom')" icon="undo" />
+	<div
+		:class="{
+			[$style.zoomMenu]: true,
+			[$style.regularZoomMenu]: !isDemo,
+			[$style.demoZoomMenu]: isDemo,
+		}"
+	>
+		<n8n-icon-button
+			@click="zoomToFit"
+			type="tertiary"
+			size="large"
+			:title="$locale.baseText('nodeView.zoomToFit')"
+			icon="expand"
+			data-test-id="zoom-to-fit"
+		/>
+		<n8n-icon-button
+			@click="zoomIn"
+			type="tertiary"
+			size="large"
+			:title="$locale.baseText('nodeView.zoomIn')"
+			icon="search-plus"
+		/>
+		<n8n-icon-button
+			@click="zoomOut"
+			type="tertiary"
+			size="large"
+			:title="$locale.baseText('nodeView.zoomOut')"
+			icon="search-minus"
+		/>
+		<n8n-icon-button
+			v-if="nodeViewScale !== 1 && !isDemo"
+			@click="resetZoom"
+			type="tertiary"
+			size="large"
+			:title="$locale.baseText('nodeView.resetZoom')"
+			icon="undo"
+		/>
 	</div>
 </template>
 <script lang="ts" setup>
@@ -17,7 +44,7 @@ import { storeToRefs } from 'pinia';
 import { useCanvasStore } from '@/stores/canvas';
 
 const canvasStore = useCanvasStore();
-const { zoomToFit, zoomIn, zoomOut, resetZoom  } = canvasStore;
+const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
 const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
 
 const keyDown = (e: KeyboardEvent) => {
@@ -26,9 +53,9 @@ const keyDown = (e: KeyboardEvent) => {
 		zoomIn();
 	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
 		zoomOut();
-	} else if ((e.key === '0') && !isCtrlKeyPressed) {
+	} else if (e.key === '0' && !isCtrlKeyPressed) {
 		resetZoom();
-	} else if ((e.key === '1') && !isCtrlKeyPressed) {
+	} else if (e.key === '1' && !isCtrlKeyPressed) {
 		zoomToFit();
 	}
 };
@@ -40,7 +67,6 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
 	document.removeEventListener('keydown', keyDown);
 });
-
 </script>
 
 <style lang="scss" module>
@@ -57,8 +83,8 @@ onBeforeUnmount(() => {
 		border: var(--border-base);
 	}
 
-	>* {
-		+* {
+	> * {
+		+ * {
 			margin-left: var(--spacing-3xs);
 		}
 
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index 151e2f3cb0..b6e00d35e7 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -17,26 +17,30 @@
 			/>
 		</template>
 		<template #footer>
-			<n8n-button :loading="loading" :label="$locale.baseText('auth.changePassword')" @click="onSubmitClick" float="right" />
+			<n8n-button
+				:loading="loading"
+				:label="$locale.baseText('auth.changePassword')"
+				@click="onSubmitClick"
+				float="right"
+			/>
 		</template>
 	</Modal>
 </template>
 
-
 <script lang="ts">
-import mixins from "vue-typed-mixins";
+import mixins from 'vue-typed-mixins';
 
-import { showMessage } from "@/mixins/showMessage";
-import Modal from "./Modal.vue";
-import Vue from "vue";
-import { IFormInputs } from "@/Interface";
+import { showMessage } from '@/mixins/showMessage';
+import Modal from './Modal.vue';
+import Vue from 'vue';
+import { IFormInputs } from '@/Interface';
 import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
-import { mapStores } from "pinia";
-import { useUsersStore } from "@/stores/users";
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(showMessage).extend({
 	components: { Modal },
-	name: "ChangePasswordModal",
+	name: 'ChangePasswordModal',
 	props: {
 		modalName: {
 			type: String,
@@ -74,7 +78,7 @@ export default mixins(showMessage).extend({
 					label: this.$locale.baseText('auth.newPassword'),
 					type: 'password',
 					required: true,
-					validationRules: [{name: 'DEFAULT_PASSWORD_RULES'}],
+					validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
 					infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
 					autocomplete: 'new-password',
 					capitalize: true,
@@ -91,7 +95,7 @@ export default mixins(showMessage).extend({
 							validate: this.passwordsMatch,
 						},
 					},
-					validationRules: [{name: 'TWO_PASSWORDS_MATCH'}],
+					validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
 					autocomplete: 'new-password',
 					capitalize: true,
 				},
@@ -112,12 +116,12 @@ export default mixins(showMessage).extend({
 
 			return false;
 		},
-		onInput(e: {name: string, value: string}) {
+		onInput(e: { name: string; value: string }) {
 			if (e.name === 'password') {
 				this.password = e.value;
 			}
 		},
-		async onSubmit(values: {[key: string]: string}) {
+		async onSubmit(values: { [key: string]: string }) {
 			try {
 				this.loading = true;
 				await this.usersStore.updateCurrentUserPassword(values);
@@ -129,7 +133,6 @@ export default mixins(showMessage).extend({
 				});
 
 				this.modalBus.$emit('close');
-
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
 			}
@@ -140,5 +143,4 @@ export default mixins(showMessage).extend({
 		},
 	},
 });
-
 </script>
diff --git a/packages/editor-ui/src/components/CodeEdit.vue b/packages/editor-ui/src/components/CodeEdit.vue
index ec69711c62..ebc5c91cca 100644
--- a/packages/editor-ui/src/components/CodeEdit.vue
+++ b/packages/editor-ui/src/components/CodeEdit.vue
@@ -4,11 +4,18 @@
 		append-to-body
 		:close-on-click-modal="false"
 		width="80%"
-		:title="`${$locale.baseText('codeEdit.edit')} ${$locale.nodeText().inputLabelDisplayName(parameter, path)}`"
+		:title="`${$locale.baseText('codeEdit.edit')} ${$locale
+			.nodeText()
+			.inputLabelDisplayName(parameter, path)}`"
 		:before-close="closeDialog"
 	>
 		<div class="text-editor-wrapper ignore-key-press">
-			<code-editor :value="value" :autocomplete="loadAutocompleteData" :readonly="readonly" @input="$emit('valueChanged', $event)" />
+			<code-editor
+				:value="value"
+				:autocomplete="loadAutocompleteData"
+				:readonly="readonly"
+				@input="$emit('valueChanged', $event)"
+			/>
 		</div>
 	</el-dialog>
 </template>
@@ -28,30 +35,21 @@ import {
 	WorkflowDataProxy,
 } from 'n8n-workflow';
 
-import {
-	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-} from '@/constants';
+import { PLACEHOLDER_FILLED_AT_EXECUTION_TIME } from '@/constants';
 import { CodeEditor } from './forms';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 
-export default mixins(
-	genericHelpers,
-	workflowHelpers,
-).extend({
+export default mixins(genericHelpers, workflowHelpers).extend({
 	name: 'CodeEdit',
 	components: {
 		CodeEditor,
 	},
 	props: ['codeAutocomplete', 'parameter', 'path', 'type', 'value', 'readonly'],
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useRootStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useRootStore, useWorkflowsStore),
 	},
 	methods: {
 		loadAutocompleteData(): string[] {
@@ -65,7 +63,10 @@ export default mixins(
 				const workflow = this.getCurrentWorkflow();
 				const activeNode: INodeUi | null = this.ndvStore.activeNode;
 				const parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1);
-				const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || {
+				const nodeConnection = workflow.getNodeConnectionIndexes(
+					activeNode!.name,
+					parentNode[0],
+				) || {
 					sourceIndex: 0,
 					destinationIndex: 0,
 				};
@@ -86,7 +87,13 @@ export default mixins(
 					}
 				}
 
-				const connectionInputData = this.connectionInputData(parentNode, activeNode!.name, inputName, runIndex, nodeConnection);
+				const connectionInputData = this.connectionInputData(
+					parentNode,
+					activeNode!.name,
+					inputName,
+					runIndex,
+					nodeConnection,
+				);
 
 				const additionalProxyKeys: IWorkflowDataProxyAdditionalKeys = {
 					$execution: {
@@ -100,7 +107,18 @@ export default mixins(
 					$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 				};
 
-				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, activeNode!.name, connectionInputData || [], {}, mode, this.rootStore.timezone, additionalProxyKeys);
+				const dataProxy = new WorkflowDataProxy(
+					workflow,
+					runExecutionData,
+					runIndex,
+					itemIndex,
+					activeNode!.name,
+					connectionInputData || [],
+					{},
+					mode,
+					this.rootStore.timezone,
+					additionalProxyKeys,
+				);
 				const proxy = dataProxy.getDataProxy();
 
 				const autoCompleteItems = [
@@ -126,13 +144,7 @@ export default mixins(
 					'Interval',
 				];
 
-				const functionItemKeys = [
-					'$json',
-					'$binary',
-					'$position',
-					'$thisItem',
-					'$thisItemIndex',
-				];
+				const functionItemKeys = ['$json', '$binary', '$position', '$thisItem', '$thisItemIndex'];
 
 				const additionalKeys: string[] = [];
 				if (this.codeAutocomplete === 'functionItem') {
@@ -142,13 +154,15 @@ export default mixins(
 				if (executedWorkflow && connectionInputData && connectionInputData.length) {
 					baseKeys.push(...additionalKeys);
 				} else {
-					additionalKeys.forEach(key => {
+					additionalKeys.forEach((key) => {
 						autoCompleteItems.push(`const ${key} = {}`);
 					});
 				}
 
 				for (const key of baseKeys) {
-					autoCompleteItems.push(`const ${key} = ${JSON.stringify(this.createSimpleRepresentation(proxy[key]))}`);
+					autoCompleteItems.push(
+						`const ${key} = ${JSON.stringify(this.createSimpleRepresentation(proxy[key]))}`,
+					);
 				}
 
 				// Add the nodes and their simplified data
@@ -159,24 +173,36 @@ export default mixins(
 					// To not load to much data create a simple representation.
 					nodes[nodeName] = {
 						json: {} as IDataObject,
-						parameter: this.createSimpleRepresentation(proxy.$node[nodeName].parameter) as IDataObject,
+						parameter: this.createSimpleRepresentation(
+							proxy.$node[nodeName].parameter,
+						) as IDataObject,
 					};
 
 					try {
-						nodes[nodeName]!.json = this.createSimpleRepresentation(proxy.$node[nodeName].json) as IDataObject;
-						nodes[nodeName]!.context = this.createSimpleRepresentation(proxy.$node[nodeName].context) as IDataObject;
+						nodes[nodeName]!.json = this.createSimpleRepresentation(
+							proxy.$node[nodeName].json,
+						) as IDataObject;
+						nodes[nodeName]!.context = this.createSimpleRepresentation(
+							proxy.$node[nodeName].context,
+						) as IDataObject;
 						nodes[nodeName]!.runIndex = proxy.$node[nodeName].runIndex;
 						if (Object.keys(proxy.$node[nodeName].binary).length) {
-							nodes[nodeName]!.binary = this.createSimpleRepresentation(proxy.$node[nodeName].binary) as IBinaryKeyData;
+							nodes[nodeName]!.binary = this.createSimpleRepresentation(
+								proxy.$node[nodeName].binary,
+							) as IBinaryKeyData;
 						}
-					} catch(error) {}
+					} catch (error) {}
 				}
 				autoCompleteItems.push(`const $node = ${JSON.stringify(nodes)}`);
 				autoCompleteItems.push(`function $jmespath(jsonDoc: object, query: string): {};`);
 
 				if (this.codeAutocomplete === 'function') {
 					if (connectionInputData) {
-						autoCompleteItems.push(`const items = ${JSON.stringify(this.createSimpleRepresentation(connectionInputData))}`);
+						autoCompleteItems.push(
+							`const items = ${JSON.stringify(
+								this.createSimpleRepresentation(connectionInputData),
+							)}`,
+						);
 					} else {
 						autoCompleteItems.push(`const items: {json: {[key: string]: any}}[] = []`);
 					}
@@ -200,7 +226,29 @@ export default mixins(
 			return false;
 		},
 
-		createSimpleRepresentation(inputData: object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[]): object | null | undefined | boolean | string | number | boolean[] | string[] | number[] | object[] {
+		createSimpleRepresentation(
+			inputData:
+				| object
+				| null
+				| undefined
+				| boolean
+				| string
+				| number
+				| boolean[]
+				| string[]
+				| number[]
+				| object[],
+		):
+			| object
+			| null
+			| undefined
+			| boolean
+			| string
+			| number
+			| boolean[]
+			| string[]
+			| number[]
+			| object[] {
 			if (inputData === null || inputData === undefined) {
 				return inputData;
 			} else if (typeof inputData === 'string') {
@@ -210,10 +258,10 @@ export default mixins(
 			} else if (typeof inputData === 'number') {
 				return 1;
 			} else if (Array.isArray(inputData)) {
-				return inputData.map(value => this.createSimpleRepresentation(value));
+				return inputData.map((value) => this.createSimpleRepresentation(value));
 			} else if (typeof inputData === 'object') {
 				const returnData: { [key: string]: object } = {};
-				Object.keys(inputData).forEach(key => {
+				Object.keys(inputData).forEach((key) => {
 					// @ts-ignore
 					returnData[key] = this.createSimpleRepresentation(inputData[key]);
 				});
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 9c734f2666..78daa5bda8 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -49,9 +49,7 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		content(): string {
 			if (!this.editor) return '';
 
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
index 9e9828b8d7..5f8f2c029b 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/baseExtensions.ts
@@ -9,7 +9,12 @@ import {
 } from '@codemirror/view';
 import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
 import { acceptCompletion, closeBrackets } from '@codemirror/autocomplete';
-import { history, indentWithTab, insertNewlineAndIndent, toggleComment } from '@codemirror/commands';
+import {
+	history,
+	indentWithTab,
+	insertNewlineAndIndent,
+	toggleComment,
+} from '@codemirror/commands';
 import { lintGutter } from '@codemirror/lint';
 import type { Extension } from '@codemirror/state';
 
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/js.snippets.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/js.snippets.ts
index 38b8779d6c..b242ad64d6 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/js.snippets.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/js.snippets.ts
@@ -1,5 +1,5 @@
 import { snippets } from '@codemirror/lang-javascript';
-import { completeFromList, snippetCompletion } from "@codemirror/autocomplete";
+import { completeFromList, snippetCompletion } from '@codemirror/autocomplete';
 
 /**
  * https://github.com/codemirror/lang-javascript/blob/main/src/snippets.ts
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
index 0ecbd2151a..a769c42172 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
@@ -9,10 +9,7 @@ import { useNDVStore } from '@/stores/ndv';
 
 export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useWorkflowsStore),
 	},
 	methods: {
 		/**
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/luxon.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/luxon.completions.ts
index 5bf2bdcdaf..fe130e0647 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/luxon.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/luxon.completions.ts
@@ -23,13 +23,15 @@ export const luxonCompletions = (Vue as CodeNodeEditorMixin).extend({
 				};
 			});
 
-			options.push(...this.luxonInstanceMethods().map(([method, description]) => {
-				return {
-					label: `${matcher}.${method}()`,
-					type: 'function',
-					info: description,
-				};
-			}));
+			options.push(
+				...this.luxonInstanceMethods().map(([method, description]) => {
+					return {
+						label: `${matcher}.${method}()`,
+						type: 'function',
+						info: description,
+					};
+				}),
+			);
 
 			return {
 				from: preCursor.from,
@@ -55,13 +57,15 @@ export const luxonCompletions = (Vue as CodeNodeEditorMixin).extend({
 				};
 			});
 
-			options.push(...this.luxonInstanceMethods().map(([method, description]) => {
-				return {
-					label: `${matcher}.${method}()`,
-					type: 'function',
-					info: description,
-				};
-			}));
+			options.push(
+				...this.luxonInstanceMethods().map(([method, description]) => {
+					return {
+						label: `${matcher}.${method}()`,
+						type: 'function',
+						info: description,
+					};
+				}),
+			);
 
 			return {
 				from: preCursor.from,
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
index 427cb8b6dd..8dabe33098 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -75,34 +75,47 @@ export const CODE_NODE_EDITOR_THEME = [
 			cursor: BASE_STYLING.diagnosticButton.cursor,
 		},
 	}),
-	syntaxHighlighting(HighlightStyle.define([
-		{
-			tag: tags.comment,
-			color: 'var(--color-code-tags-comment)',
-		},
-		{
-			tag: [tags.string, tags.special(tags.brace)],
-			color: 'var(--color-code-tags-string)',
-		},
-		{
-			tag: [tags.number, tags.self, tags.bool, tags.null],
-			color: 'var(--color-code-tags-primitive)',
-		},
-		{
-			tag: tags.keyword,
-			color: 'var(--color-code-tags-keyword)',
-		},
-		{
-			tag: tags.operator,
-			color: 'var(--color-code-tags-operator)',
-		},
-		{
-			tag: [tags.variableName, tags.propertyName, tags.attributeName, tags.regexp, tags.className, tags.typeName],
-			color: 'var(--color-code-tags-variable)',
-		},
-		{
-			tag: [tags.definition(tags.typeName), tags.definition(tags.propertyName), tags.function(tags.variableName)],
-			color: 'var(--color-code-tags-definition)',
-		},
-	])),
+	syntaxHighlighting(
+		HighlightStyle.define([
+			{
+				tag: tags.comment,
+				color: 'var(--color-code-tags-comment)',
+			},
+			{
+				tag: [tags.string, tags.special(tags.brace)],
+				color: 'var(--color-code-tags-string)',
+			},
+			{
+				tag: [tags.number, tags.self, tags.bool, tags.null],
+				color: 'var(--color-code-tags-primitive)',
+			},
+			{
+				tag: tags.keyword,
+				color: 'var(--color-code-tags-keyword)',
+			},
+			{
+				tag: tags.operator,
+				color: 'var(--color-code-tags-operator)',
+			},
+			{
+				tag: [
+					tags.variableName,
+					tags.propertyName,
+					tags.attributeName,
+					tags.regexp,
+					tags.className,
+					tags.typeName,
+				],
+				color: 'var(--color-code-tags-variable)',
+			},
+			{
+				tag: [
+					tags.definition(tags.typeName),
+					tags.definition(tags.propertyName),
+					tags.function(tags.variableName),
+				],
+				color: 'var(--color-code-tags-definition)',
+			},
+		]),
+	),
 ];
diff --git a/packages/editor-ui/src/components/CollectionCard.vue b/packages/editor-ui/src/components/CollectionCard.vue
index eb78a4f374..6421261235 100644
--- a/packages/editor-ui/src/components/CollectionCard.vue
+++ b/packages/editor-ui/src/components/CollectionCard.vue
@@ -1,9 +1,5 @@
 <template>
-	<Card
-		:loading="loading"
-		:title="collection.name"
-		@click="onClick"
-	>
+	<Card :loading="loading" :title="collection.name" @click="onClick">
 		<template #footer>
 			<n8n-text size="small" color="text-light">
 				{{ collection.workflows.length }}
@@ -42,6 +38,4 @@ export default mixins(genericHelpers).extend({
 });
 </script>
 
-<style lang="scss" module>
-
-</style>
+<style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index e2f83b8c5b..a9ef55d9bb 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -5,7 +5,15 @@
 				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
 			</div>
 
-			<parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" :indent="true" :isReadOnly="isReadOnly" @valueChanged="valueChanged" />
+			<parameter-input-list
+				:parameters="getProperties"
+				:nodeValues="nodeValues"
+				:path="path"
+				:hideDelete="hideDelete"
+				:indent="true"
+				:isReadOnly="isReadOnly"
+				@valueChanged="valueChanged"
+			/>
 
 			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
 				<n8n-button
@@ -16,183 +24,180 @@
 					:label="getPlaceholderText"
 				/>
 				<div v-else class="add-option">
-					<n8n-select v-model="selectedOption" :placeholder="getPlaceholderText" size="small"  @change="optionSelected" filterable>
+					<n8n-select
+						v-model="selectedOption"
+						:placeholder="getPlaceholderText"
+						size="small"
+						@change="optionSelected"
+						filterable
+					>
 						<n8n-option
 							v-for="item in parameterOptions"
 							:key="item.name"
 							:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
-							:value="item.name">
+							:value="item.name"
+						>
 						</n8n-option>
 					</n8n-select>
 				</div>
 			</div>
-
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import {
-	INodeUi,
-	IUpdateInformation,
-} from '@/Interface';
+import { INodeUi, IUpdateInformation } from '@/Interface';
 
-import {
-	deepCopy,
-	INodeProperties,
-	INodePropertyOptions,
-} from 'n8n-workflow';
+import { deepCopy, INodeProperties, INodePropertyOptions } from 'n8n-workflow';
 
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
 import { get } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import {Component} from "vue";
+import { Component } from 'vue';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 
-export default mixins(
-	nodeHelpers,
-)
-	.extend({
-		name: 'CollectionParameter',
-		props: [
-			'hideDelete', // boolean
-			'nodeValues', // NodeParameters
-			'parameter', // INodeProperties
-			'path', // string
-			'values', // NodeParameters
-			'isReadOnly', // boolean
-		],
-		components: {
-			ParameterInputList: () => import('./ParameterInputList.vue') as Promise<Component>,
+export default mixins(nodeHelpers).extend({
+	name: 'CollectionParameter',
+	props: [
+		'hideDelete', // boolean
+		'nodeValues', // NodeParameters
+		'parameter', // INodeProperties
+		'path', // string
+		'values', // NodeParameters
+		'isReadOnly', // boolean
+	],
+	components: {
+		ParameterInputList: () => import('./ParameterInputList.vue') as Promise<Component>,
+	},
+	data() {
+		return {
+			selectedOption: undefined,
+		};
+	},
+	computed: {
+		...mapStores(useNDVStore),
+		getPlaceholderText(): string {
+			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
+			return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
 		},
-		data () {
-			return {
-				selectedOption: undefined,
-			};
-		},
-		computed: {
-			...mapStores(
-				useNDVStore,
-			),
-			getPlaceholderText (): string {
-				const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
-				return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
-			},
-			getProperties (): INodeProperties[] {
-				const returnProperties = [];
-				let tempProperties;
-				for (const name of this.propertyNames) {
-					tempProperties = this.getOptionProperties(name);
-					if (tempProperties !== undefined) {
-						returnProperties.push(...tempProperties);
-					}
+		getProperties(): INodeProperties[] {
+			const returnProperties = [];
+			let tempProperties;
+			for (const name of this.propertyNames) {
+				tempProperties = this.getOptionProperties(name);
+				if (tempProperties !== undefined) {
+					returnProperties.push(...tempProperties);
 				}
-				return returnProperties;
-			},
-			// Returns all the options which should be displayed
-			filteredOptions (): Array<INodePropertyOptions | INodeProperties> {
-				return (this.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter((option) => {
+			}
+			return returnProperties;
+		},
+		// Returns all the options which should be displayed
+		filteredOptions(): Array<INodePropertyOptions | INodeProperties> {
+			return (this.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter(
+				(option) => {
 					return this.displayNodeParameter(option as INodeProperties);
-				});
-			},
-			node (): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			// Returns all the options which did not get added already
-			parameterOptions (): Array<INodePropertyOptions | INodeProperties> {
-				return (this.filteredOptions as Array<INodePropertyOptions | INodeProperties>).filter((option) => {
+				},
+			);
+		},
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		// Returns all the options which did not get added already
+		parameterOptions(): Array<INodePropertyOptions | INodeProperties> {
+			return (this.filteredOptions as Array<INodePropertyOptions | INodeProperties>).filter(
+				(option) => {
 					return !this.propertyNames.includes(option.name);
-				});
-			},
-			propertyNames (): string[] {
-				if (this.values) {
-					return Object.keys(this.values);
-				}
-				return [];
-			},
+				},
+			);
 		},
-		methods: {
-			getArgument (argumentName: string): string | number | boolean | undefined {
-				if (this.parameter.typeOptions === undefined) {
-					return undefined;
+		propertyNames(): string[] {
+			if (this.values) {
+				return Object.keys(this.values);
+			}
+			return [];
+		},
+	},
+	methods: {
+		getArgument(argumentName: string): string | number | boolean | undefined {
+			if (this.parameter.typeOptions === undefined) {
+				return undefined;
+			}
+
+			if (this.parameter.typeOptions[argumentName] === undefined) {
+				return undefined;
+			}
+
+			return this.parameter.typeOptions[argumentName];
+		},
+		getOptionProperties(optionName: string): INodeProperties[] {
+			const properties: INodeProperties[] = [];
+			for (const option of this.parameter.options) {
+				if (option.name === optionName) {
+					properties.push(option);
 				}
+			}
 
-				if (this.parameter.typeOptions[argumentName] === undefined) {
-					return undefined;
-				}
+			return properties;
+		},
+		displayNodeParameter(parameter: INodeProperties) {
+			if (parameter.displayOptions === undefined) {
+				// If it is not defined no need to do a proper check
+				return true;
+			}
+			return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
+		},
+		optionSelected(optionName: string) {
+			const options = this.getOptionProperties(optionName);
+			if (options.length === 0) {
+				return;
+			}
 
-				return this.parameter.typeOptions[argumentName];
-			},
-			getOptionProperties (optionName: string): INodeProperties[] {
-				const properties: INodeProperties[] = [];
-				for (const option of this.parameter.options) {
-					if (option.name === optionName) {
-						properties.push(option);
-					}
-				}
+			const option = options[0];
+			const name = `${this.path}.${option.name}`;
 
-				return properties;
-			},
-			displayNodeParameter (parameter: INodeProperties) {
-				if (parameter.displayOptions === undefined) {
-					// If it is not defined no need to do a proper check
-					return true;
-				}
-				return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
-			},
-			optionSelected (optionName: string) {
-				const options = this.getOptionProperties(optionName);
-				if (options.length === 0) {
-					return;
-				}
+			let parameterData;
 
-				const option = options[0];
-				const name = `${this.path}.${option.name}`;
+			if (option.typeOptions !== undefined && option.typeOptions.multipleValues === true) {
+				// Multiple values are allowed
 
-				let parameterData;
-
-				if (option.typeOptions !== undefined && option.typeOptions.multipleValues === true) {
-					// Multiple values are allowed
-
-					let newValue;
-					if (option.type === 'fixedCollection') {
-						// The "fixedCollection" entries are different as they save values
-						// in an object and then underneath there is an array. So initialize
-						// them differently.
-						newValue = get(this.nodeValues, `${this.path}.${optionName}`, {});
-					} else {
-						// Everything else saves them directly as an array.
-						newValue = get(this.nodeValues, `${this.path}.${optionName}`, []);
-						newValue.push(deepCopy(option.default));
-					}
-
-					parameterData = {
-						name,
-						value: newValue,
-					};
+				let newValue;
+				if (option.type === 'fixedCollection') {
+					// The "fixedCollection" entries are different as they save values
+					// in an object and then underneath there is an array. So initialize
+					// them differently.
+					newValue = get(this.nodeValues, `${this.path}.${optionName}`, {});
 				} else {
-					// Add a new option
-					parameterData = {
-						name,
-						value: deepCopy(option.default),
-					};
+					// Everything else saves them directly as an array.
+					newValue = get(this.nodeValues, `${this.path}.${optionName}`, []);
+					newValue.push(deepCopy(option.default));
 				}
 
-				this.$emit('valueChanged', parameterData);
-				this.selectedOption = undefined;
-			},
-			valueChanged (parameterData: IUpdateInformation) {
-				this.$emit('valueChanged', parameterData);
-			},
+				parameterData = {
+					name,
+					value: newValue,
+				};
+			} else {
+				// Add a new option
+				parameterData = {
+					name,
+					value: deepCopy(option.default),
+				};
+			}
+
+			this.$emit('valueChanged', parameterData);
+			this.selectedOption = undefined;
 		},
-	});
+		valueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+	},
+});
 </script>
 
 <style lang="scss">
-
 .collection-parameter {
 	padding-left: var(--spacing-s);
 
@@ -212,5 +217,4 @@ export default mixins(
 		padding: 0.25em 0 0.25em 1em;
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 7824bd9356..2826004c69 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -1,13 +1,7 @@
 <template>
-	<n8n-card
-		:class="$style.card"
-		v-on="$listeners"
-	>
+	<n8n-card :class="$style.card" v-on="$listeners">
 		<template #header v-if="!loading">
-			<span
-				v-text="title"
-				:class="$style.title"
-			/>
+			<span v-text="title" :class="$style.title" />
 		</template>
 		<n8n-loading :loading="loading" :rows="3" variant="p" />
 		<template #footer v-if="!loading">
@@ -45,7 +39,7 @@ export default mixins(genericHelpers).extend({
 	}
 
 	&:hover {
-		box-shadow: 0 2px 4px rgba(68,28,23,0.07);
+		box-shadow: 0 2px 4px rgba(68, 28, 23, 0.07);
 	}
 
 	> div {
diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
index c45d99a74d..00505c2781 100644
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -1,9 +1,16 @@
 <template>
 	<div :class="$style.container" v-show="loading || collections.length">
-		<agile ref="slider" :dots="false" :navButtons="false" :infinite="false" :slides-to-show="4" @after-change="updateCarouselScroll">
-			<Card v-for="n in (loading ? 4: 0)" :key="`loading-${n}`" :loading="loading" />
+		<agile
+			ref="slider"
+			:dots="false"
+			:navButtons="false"
+			:infinite="false"
+			:slides-to-show="4"
+			@after-change="updateCarouselScroll"
+		>
+			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
 			<CollectionCard
-				v-for="collection in (loading? []: collections)"
+				v-for="collection in loading ? [] : collections"
 				:key="collection.id"
 				:collection="collection"
 				@click="(e) => onCardClick(e, collection.id)"
@@ -19,8 +26,8 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "vue";
-import { ITemplatesCollection } from "@/Interface";
+import { PropType } from 'vue';
+import { ITemplatesCollection } from '@/Interface';
 import Card from '@/components/CollectionWorkflowCard.vue';
 import CollectionCard from '@/components/CollectionCard.vue';
 import VueAgile from 'vue-agile';
@@ -75,7 +82,7 @@ export default mixins(genericHelpers).extend({
 			}
 		},
 		onCardClick(event: MouseEvent, id: string) {
-			this.$emit('openCollection', {event, id});
+			this.$emit('openCollection', { event, id });
 		},
 		scrollLeft() {
 			if (this.listElement) {
@@ -144,9 +151,21 @@ export default mixins(genericHelpers).extend({
 
 	&:after {
 		left: 27px;
-		background: linear-gradient(270deg,
-			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
-			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
+		background: linear-gradient(
+			270deg,
+			hsla(
+				var(--color-background-light-h),
+				var(--color-background-light-s),
+				var(--color-background-light-l),
+				50%
+			),
+			hsla(
+				var(--color-background-light-h),
+				var(--color-background-light-s),
+				var(--color-background-light-l),
+				100%
+			)
+		);
 	}
 }
 
@@ -155,9 +174,21 @@ export default mixins(genericHelpers).extend({
 	right: -30px;
 	&:after {
 		right: 27px;
-		background: linear-gradient(90deg,
-			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
-			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
+		background: linear-gradient(
+			90deg,
+			hsla(
+				var(--color-background-light-h),
+				var(--color-background-light-s),
+				var(--color-background-light-l),
+				50%
+			),
+			hsla(
+				var(--color-background-light-h),
+				var(--color-background-light-s),
+				var(--color-background-light-l),
+				100%
+			)
+		);
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 37247054ac..eb11303650 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -19,7 +19,8 @@
 					</n8n-text>
 					<n8n-text size="small" color="text-light">
 						<span v-for="(node, index) in communityPackage.installedNodes" :key="node.name">
-							{{ node.name }}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
+							{{ node.name
+							}}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
 						</span>
 					</n8n-text>
 				</div>
@@ -42,7 +43,7 @@
 							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
 						</div>
 					</template>
-					<n8n-button type="outline" label="Update" @click="onUpdateClick"/>
+					<n8n-button type="outline" label="Update" @click="onUpdateClick" />
 				</n8n-tooltip>
 				<n8n-tooltip v-else placement="top">
 					<template #content>
@@ -65,15 +66,10 @@ import { useUIStore } from '@/stores/ui';
 import { PublicInstalledPackage } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
-import {
-	NPM_PACKAGE_DOCS_BASE_URL,
-	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-} from '../constants';
+import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
 import { showMessage } from '@/mixins/showMessage';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'CommunityPackageCard',
 	props: {
 		communityPackage: {
@@ -135,7 +131,8 @@ export default mixins(
 	background-color: var(--color-background-xlight);
 }
 
-.packageCard, .cardSkeleton {
+.packageCard,
+.cardSkeleton {
 	display: flex;
 	flex-basis: 100%;
 	justify-content: space-between;
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index 2cd8fb63c6..39ec805a92 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -13,11 +13,9 @@
 				<div>
 					<n8n-text>
 						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
-					</n8n-text> <n8n-link
-						:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
-						@click="onMoreInfoTopClick"
-					>
-							{{ $locale.baseText('_reusableDynamicText.moreInfo') }}
+					</n8n-text>
+					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
+						{{ $locale.baseText('_reusableDynamicText.moreInfo') }}
 					</n8n-link>
 				</div>
 				<n8n-button
@@ -31,16 +29,20 @@
 				<n8n-input-label
 					:class="$style.labelTooltip"
 					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
-					:tooltipText="$locale.baseText('settings.communityNodes.installModal.packageName.tooltip',
-						{ interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL } }
-					)"
+					:tooltipText="
+						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
+							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
+						})
+					"
 				>
 					<n8n-input
 						name="packageNameInput"
 						v-model="packageName"
 						type="text"
 						:maxlength="214"
-						:placeholder="$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')"
+						:placeholder="
+							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
+						"
 						:required="true"
 						:disabled="loading"
 						@blur="onInputBlur"
@@ -60,9 +62,11 @@
 					@change="onCheckboxChecked"
 				>
 					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }}
-					</n8n-text><br />
-					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{ $locale.baseText('_reusableDynamicText.moreInfo') }}</n8n-link>
+						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
+					><br />
+					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
+						$locale.baseText('_reusableDynamicText.moreInfo')
+					}}</n8n-link>
 				</el-checkbox>
 			</div>
 		</template>
@@ -70,9 +74,11 @@
 			<n8n-button
 				:loading="loading"
 				:disabled="packageName === '' || loading"
-				:label="loading ?
-					$locale.baseText('settings.communityNodes.installModal.installButton.label.loading') :
-					$locale.baseText('settings.communityNodes.installModal.installButton.label')"
+				:label="
+					loading
+						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
+						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
+				"
 				size="large"
 				float="right"
 				@click="onInstallClick"
@@ -95,9 +101,7 @@ import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'CommunityPackageInstallModal',
 	components: {
 		Modal,
@@ -129,7 +133,10 @@ export default mixins(
 				this.checkboxWarning = true;
 			} else {
 				try {
-					this.$telemetry.track('user started cnr package install', { input_string: this.packageName, source: 'cnr settings page' });
+					this.$telemetry.track('user started cnr package install', {
+						input_string: this.packageName,
+						source: 'cnr settings page',
+					});
 					this.infoTextErrorMessage = '';
 					this.loading = true;
 					await this.communityNodesStore.installPackage(this.packageName);
@@ -141,8 +148,8 @@ export default mixins(
 						title: this.$locale.baseText('settings.communityNodes.messages.install.success'),
 						type: 'success',
 					});
-				} catch(error) {
-					if(error.httpStatusCode && error.httpStatusCode === 400) {
+				} catch (error) {
+					if (error.httpStatusCode && error.httpStatusCode === 400) {
 						this.infoTextErrorMessage = error.message;
 					} else {
 						this.$showError(
@@ -168,7 +175,9 @@ export default mixins(
 			this.$telemetry.track('user clicked cnr docs link', { source: 'install package modal top' });
 		},
 		onLearnMoreLinkClick() {
-			this.$telemetry.track('user clicked cnr docs link', { source: 'install package modal bottom' });
+			this.$telemetry.track('user clicked cnr docs link', {
+				source: 'install package modal bottom',
+			});
 		},
 	},
 });
@@ -193,7 +202,6 @@ export default mixins(
 	}
 }
 
-
 .formContainer {
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-regular);
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index 0080691ff2..2d0e7f3f95 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -10,7 +10,10 @@
 	>
 		<template #content>
 			<n8n-text>{{ getModalContent.message }}</n8n-text>
-			<div :class="$style.descriptionContainer" v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE">
+			<div
+				:class="$style.descriptionContainer"
+				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
+			>
 				<n8n-info-tip theme="info" type="note" :bold="false">
 					<template>
 						<span v-text="getModalContent.description"></span>
@@ -35,7 +38,10 @@
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 import Modal from './Modal.vue';
-import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
+import {
+	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
+	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
+} from '../constants';
 import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes';
@@ -80,8 +86,12 @@ export default mixins(showMessage).extend({
 							packageName: this.activePackageName,
 						},
 					}),
-					buttonLabel: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.buttonLabel'),
-					buttonLoadingLabel: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.buttonLoadingLabel'),
+					buttonLabel: this.$locale.baseText(
+						'settings.communityNodes.confirmModal.uninstall.buttonLabel',
+					),
+					buttonLoadingLabel: this.$locale.baseText(
+						'settings.communityNodes.confirmModal.uninstall.buttonLoadingLabel',
+					),
 				};
 			}
 			return {
@@ -90,15 +100,21 @@ export default mixins(showMessage).extend({
 						packageName: this.activePackageName,
 					},
 				}),
-				description: this.$locale.baseText('settings.communityNodes.confirmModal.update.description'),
+				description: this.$locale.baseText(
+					'settings.communityNodes.confirmModal.update.description',
+				),
 				message: this.$locale.baseText('settings.communityNodes.confirmModal.update.message', {
 					interpolate: {
 						packageName: this.activePackageName,
 						version: this.activePackage.updateAvailable,
 					},
 				}),
-				buttonLabel: this.$locale.baseText('settings.communityNodes.confirmModal.update.buttonLabel'),
-				buttonLoadingLabel: this.$locale.baseText('settings.communityNodes.confirmModal.update.buttonLoadingLabel'),
+				buttonLabel: this.$locale.baseText(
+					'settings.communityNodes.confirmModal.update.buttonLabel',
+				),
+				buttonLoadingLabel: this.$locale.baseText(
+					'settings.communityNodes.confirmModal.update.buttonLoadingLabel',
+				),
 			};
 		},
 	},
@@ -117,7 +133,7 @@ export default mixins(showMessage).extend({
 			try {
 				this.$telemetry.track('user started cnr package deletion', {
 					package_name: this.activePackage.packageName,
-					package_node_names: this.activePackage.installedNodes.map(node => node.name),
+					package_node_names: this.activePackage.installedNodes.map((node) => node.name),
 					package_version: this.activePackage.installedVersion,
 					package_author: this.activePackage.authorName,
 					package_author_email: this.activePackage.authorEmail,
@@ -129,7 +145,10 @@ export default mixins(showMessage).extend({
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.communityNodes.messages.uninstall.error'));
+				this.$showError(
+					error,
+					this.$locale.baseText('settings.communityNodes.messages.uninstall.error'),
+				);
 			} finally {
 				this.loading = false;
 				this.modalBus.$emit('close');
@@ -139,7 +158,7 @@ export default mixins(showMessage).extend({
 			try {
 				this.$telemetry.track('user started cnr package update', {
 					package_name: this.activePackage.packageName,
-					package_node_names: this.activePackage.installedNodes.map(node => node.name),
+					package_node_names: this.activePackage.installedNodes.map((node) => node.name),
 					package_version_current: this.activePackage.installedVersion,
 					package_version_new: this.activePackage.updateAvailable,
 					package_author: this.activePackage.authorName,
@@ -150,16 +169,22 @@ export default mixins(showMessage).extend({
 				await this.communityNodesStore.updatePackage(this.activePackageName);
 				this.$showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.update.success.title'),
-					message: this.$locale.baseText('settings.communityNodes.messages.update.success.message', {
-						interpolate: {
-							packageName: this.activePackageName,
-							version: updatedVersion,
+					message: this.$locale.baseText(
+						'settings.communityNodes.messages.update.success.message',
+						{
+							interpolate: {
+								packageName: this.activePackageName,
+								version: updatedVersion,
+							},
 						},
-					}),
+					),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('settings.communityNodes.messages.update.error.title'));
+				this.$showError(
+					error,
+					this.$locale.baseText('settings.communityNodes.messages.update.error.title'),
+				);
 			} finally {
 				this.loading = false;
 				this.modalBus.$emit('close');
@@ -170,17 +195,17 @@ export default mixins(showMessage).extend({
 </script>
 
 <style module lang="scss">
-	.descriptionContainer {
-		display: flex;
-		margin: var(--spacing-s) 0;
-	}
+.descriptionContainer {
+	display: flex;
+	margin: var(--spacing-s) 0;
+}
 
-	.descriptionIcon {
-		align-self: center;
-		color: var(--color-text-lighter);
-	}
+.descriptionIcon {
+	align-self: center;
+	color: var(--color-text-lighter);
+}
 
-	.descriptionText {
-		padding: 0 var(--spacing-xs);
-	}
+.descriptionText {
+	padding: 0 var(--spacing-xs);
+}
 </style>
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index 8e010f64f1..7d87d8f5bc 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -55,10 +55,7 @@ export default mixins(workflowHelpers).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-		),
+		...mapStores(useRootStore, useSettingsStore),
 		title(): string {
 			if (this.settingsStore.promptsData && this.settingsStore.promptsData.title) {
 				return this.settingsStore.promptsData.title;
@@ -88,7 +85,9 @@ export default mixins(workflowHelpers).extend({
 		},
 		async send() {
 			if (this.isEmailValid) {
-				const response = await this.settingsStore.submitContactInfo(this.email) as IN8nPromptResponse;
+				const response = (await this.settingsStore.submitContactInfo(
+					this.email,
+				)) as IN8nPromptResponse;
 
 				if (response.updated) {
 					this.$telemetry.track('User closed email modal', {
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index daf598df70..534321e140 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -1,9 +1,15 @@
 <template>
 	<div>
 		<n8n-input-label :label="label">
-			<div :class="{[$style.copyText]: true, [$style[size]]: true, [$style.collapsed]: collapse}" @click="copy" data-test-id="copy-input">
+			<div
+				:class="{ [$style.copyText]: true, [$style[size]]: true, [$style.collapsed]: collapse }"
+				@click="copy"
+				data-test-id="copy-input"
+			>
 				<span ref="copyInputValue">{{ value }}</span>
-				<div :class="$style.copyButton"><span>{{ copyButtonText }}</span></div>
+				<div :class="$style.copyButton">
+					<span>{{ copyButtonText }}</span>
+				</div>
 			</div>
 		</n8n-input-label>
 		<div v-if="hint" :class="$style.hint">{{ hint }}</div>
@@ -103,7 +109,7 @@ export default mixins(copyPaste, showMessage).extend({
 
 .collapsed {
 	white-space: nowrap;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .copyButton {
@@ -129,5 +135,4 @@ export default mixins(copyPaste, showMessage).extend({
 	font-weight: var(--font-weight-regular);
 	word-break: normal;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index fe16ce0c15..55d69ddd91 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -1,52 +1,44 @@
 <template>
-	<n8n-card
-		:class="$style['card-link']"
-		@click="onClick"
-	>
-			<template #prepend>
-				<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
-			</template>
-			<template #header>
-				<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style['card-heading']">
-					{{ data.name }}
-				</n8n-heading>
-			</template>
-			<n8n-text color="text-light" size="small">
-				<span v-if="credentialType">{{ credentialType.displayName }} | </span>
-				<span v-show="data">{{$locale.baseText('credentials.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
-				<span v-show="data">{{$locale.baseText('credentials.item.created')}} {{ formattedCreatedAtDate }} </span>
-			</n8n-text>
-			<template #append>
-				<div :class="$style['card-actions']">
-					<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
-						<n8n-badge
-							v-if="credentialPermissions.isOwner"
-							class="mr-xs"
-							theme="tertiary"
-							bold
-						>
-							{{$locale.baseText('credentials.item.owner')}}
-						</n8n-badge>
-					</enterprise-edition>
-					<n8n-action-toggle
-						:actions="actions"
-						theme="dark"
-						@action="onAction"
-					/>
-				</div>
-			</template>
+	<n8n-card :class="$style['card-link']" @click="onClick">
+		<template #prepend>
+			<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
+		</template>
+		<template #header>
+			<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style['card-heading']">
+				{{ data.name }}
+			</n8n-heading>
+		</template>
+		<n8n-text color="text-light" size="small">
+			<span v-if="credentialType">{{ credentialType.displayName }} | </span>
+			<span v-show="data"
+				>{{ $locale.baseText('credentials.item.updated') }} <time-ago :date="data.updatedAt" /> |
+			</span>
+			<span v-show="data"
+				>{{ $locale.baseText('credentials.item.created') }} {{ formattedCreatedAtDate }}
+			</span>
+		</n8n-text>
+		<template #append>
+			<div :class="$style['card-actions']">
+				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
+					<n8n-badge v-if="credentialPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
+						{{ $locale.baseText('credentials.item.owner') }}
+					</n8n-badge>
+				</enterprise-edition>
+				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
+			</div>
+		</template>
 	</n8n-card>
 </template>
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import {ICredentialsResponse, IUser} from "@/Interface";
-import {ICredentialType} from "n8n-workflow";
-import {EnterpriseEditionFeature} from '@/constants';
-import {showMessage} from "@/mixins/showMessage";
+import { ICredentialsResponse, IUser } from '@/Interface';
+import { ICredentialType } from 'n8n-workflow';
+import { EnterpriseEditionFeature } from '@/constants';
+import { showMessage } from '@/mixins/showMessage';
 import CredentialIcon from '@/components/CredentialIcon.vue';
-import {getCredentialPermissions, IPermissions} from "@/permissions";
-import dateformat from "dateformat";
+import { getCredentialPermissions, IPermissions } from '@/permissions';
+import dateformat from 'dateformat';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
@@ -57,9 +49,7 @@ export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	data() {
 		return {
 			EnterpriseEditionFeature,
@@ -89,12 +79,8 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useUIStore,
-			useUsersStore,
-		),
-		currentUser (): IUser | null {
+		...mapStores(useCredentialsStore, useUIStore, useUsersStore),
+		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
 		credentialType(): ICredentialType {
@@ -103,7 +89,7 @@ export default mixins(
 		credentialPermissions(): IPermissions | null {
 			return !this.currentUser ? null : getCredentialPermissions(this.currentUser, this.data);
 		},
-		actions(): Array<{ label: string; value: string; }> {
+		actions(): Array<{ label: string; value: string }> {
 			if (!this.credentialPermissions) {
 				return [];
 			}
@@ -113,15 +99,24 @@ export default mixins(
 					label: this.$locale.baseText('credentials.item.open'),
 					value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
 				},
-			].concat(this.credentialPermissions.delete ? [{
-				label: this.$locale.baseText('credentials.item.delete'),
-				value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
-			}]: []);
+			].concat(
+				this.credentialPermissions.delete
+					? [
+							{
+								label: this.$locale.baseText('credentials.item.delete'),
+								value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
+							},
+					  ]
+					: [],
+			);
 		},
 		formattedCreatedAtDate(): string {
 			const currentYear = new Date().getFullYear();
 
-			return dateformat(this.data.createdAt, `d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`);
+			return dateformat(
+				this.data.createdAt,
+				`d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
+			);
 		},
 	},
 	methods: {
@@ -133,16 +128,23 @@ export default mixins(
 				this.onClick();
 			} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
 				const deleteConfirmed = await this.confirmMessage(
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
-						interpolate: { savedCredentialName: this.data.name },
-					}),
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
+						{
+							interpolate: { savedCredentialName: this.data.name },
+						},
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
+					),
 					null,
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+					),
 				);
 
 				if (deleteConfirmed) {
-					this.credentialsStore.deleteCredential({ id:  this.data.id });
+					this.credentialsStore.deleteCredential({ id: this.data.id });
 				}
 			}
 		},
@@ -156,7 +158,7 @@ export default mixins(
 	cursor: pointer;
 
 	&:hover {
-		box-shadow: 0 2px 8px rgba(#441C17, 0.1);
+		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
 	}
 }
 
@@ -171,5 +173,3 @@ export default mixins(
 	align-items: center;
 }
 </style>
-
-
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index 31d773558a..a626d91a54 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -9,7 +9,14 @@
 		<banner
 			v-if="authError && !showValidationWarning"
 			theme="danger"
-			:message="$locale.baseText(`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${!credentialPermissions.isOwner ? '.sharee' : ''}`, { interpolate: { owner: credentialOwnerName } })"
+			:message="
+				$locale.baseText(
+					`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
+						!credentialPermissions.isOwner ? '.sharee' : ''
+					}`,
+					{ interpolate: { owner: credentialOwnerName } },
+				)
+			"
 			:details="authError"
 			:buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
 			buttonLoadingLabel="Retrying"
@@ -53,17 +60,22 @@
 				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
 				:value="oAuthCallbackUrl"
 				:copyButtonText="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
-				:hint="$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })"
-				:toastTitle="$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')"
+				:hint="
+					$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })
+				"
+				:toastTitle="
+					$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
+				"
 			/>
 		</template>
-		<enterprise-edition
-			v-else
-			:features="[EnterpriseEditionFeature.Sharing]"
-		>
+		<enterprise-edition v-else :features="[EnterpriseEditionFeature.Sharing]">
 			<div class="ph-no-capture">
 				<n8n-info-tip :bold="false">
-					{{ $locale.baseText('credentialEdit.credentialEdit.info.sharee', { interpolate: { credentialOwnerName } }) }}
+					{{
+						$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
+							interpolate: { credentialOwnerName },
+						})
+					}}
 				</n8n-info-tip>
 			</div>
 		</enterprise-edition>
@@ -78,7 +90,12 @@
 		/>
 
 		<OauthButton
-			v-if="isOAuthType && requiredPropertiesFilled && !isOAuthConnected && credentialPermissions.isOwner"
+			v-if="
+				isOAuthType &&
+				requiredPropertiesFilled &&
+				!isOAuthConnected &&
+				credentialPermissions.isOwner
+			"
 			:isGoogleOAuthType="isGoogleOAuthType"
 			@click="$emit('oauth')"
 		/>
@@ -101,7 +118,7 @@ import { restApi } from '@/mixins/restApi';
 import { addCredentialTranslation } from '@/plugins/i18n';
 import mixins from 'vue-typed-mixins';
 import { BUILTIN_CREDENTIALS_DOCS_URL, EnterpriseEditionFeature } from '@/constants';
-import { IPermissions } from "@/permissions";
+import { IPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
@@ -127,8 +144,7 @@ export default mixins(restApi).extend({
 		parentTypes: {
 			type: Array,
 		},
-		credentialData: {
-		},
+		credentialData: {},
 		credentialId: {
 			type: [String, Number],
 			default: '',
@@ -182,23 +198,18 @@ export default mixins(restApi).extend({
 		);
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNDVStore,
-			useRootStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useCredentialsStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
 		appName(): string {
 			if (!this.credentialType) {
 				return '';
 			}
 
-			const appName = getAppNameFromCredType(
-				(this.credentialType as ICredentialType).displayName,
-			);
+			const appName = getAppNameFromCredType((this.credentialType as ICredentialType).displayName);
 
-			return appName || this.$locale.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo');
+			return (
+				appName ||
+				this.$locale.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo')
+			);
 		},
 		credentialTypeName(): string {
 			return (this.credentialType as ICredentialType).name;
@@ -215,34 +226,44 @@ export default mixins(restApi).extend({
 				return '';
 			}
 
-			if (type.documentationUrl.startsWith('https://') || type.documentationUrl.startsWith('http://')) {
+			if (
+				type.documentationUrl.startsWith('https://') ||
+				type.documentationUrl.startsWith('http://')
+			) {
 				return type.documentationUrl;
 			}
 
-			return isCommunityNode ?
-				'' : // Don't show documentation link for community nodes if the URL is not an absolute path
-				`${BUILTIN_CREDENTIALS_DOCS_URL}${type.documentationUrl}/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal`;
+			return isCommunityNode
+				? '' // Don't show documentation link for community nodes if the URL is not an absolute path
+				: `${BUILTIN_CREDENTIALS_DOCS_URL}${type.documentationUrl}/?utm_source=n8n_app&utm_medium=left_nav_menu&utm_campaign=create_new_credentials_modal`;
 		},
 		isGoogleOAuthType(): boolean {
-			return this.credentialTypeName === 'googleOAuth2Api' || this.parentTypes.includes('googleOAuth2Api');
+			return (
+				this.credentialTypeName === 'googleOAuth2Api' ||
+				this.parentTypes.includes('googleOAuth2Api')
+			);
 		},
 		oAuthCallbackUrl(): string {
 			const oauthType =
-				this.credentialTypeName === 'oAuth2Api' ||
-				this.parentTypes.includes('oAuth2Api')
+				this.credentialTypeName === 'oAuth2Api' || this.parentTypes.includes('oAuth2Api')
 					? 'oauth2'
 					: 'oauth1';
 			return this.rootStore.oauthCallbackUrls[oauthType as keyof {}];
 		},
 		showOAuthSuccessBanner(): boolean {
-			return this.isOAuthType && this.requiredPropertiesFilled && this.isOAuthConnected && !this.authError;
+			return (
+				this.isOAuthType &&
+				this.requiredPropertiesFilled &&
+				this.isOAuthConnected &&
+				!this.authError
+			);
 		},
 	},
 	methods: {
-		onDataChange (event: { name: string; value: string | number | boolean | Date | null }): void {
+		onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
 			this.$emit('change', event);
 		},
-		onDocumentationUrlClick (): void {
+		onDocumentationUrlClick(): void {
 			this.$telemetry.track('User clicked credential modal docs link', {
 				docs_link: this.documentationUrl,
 				credential_type: this.credentialTypeName,
@@ -268,5 +289,4 @@ export default mixins(restApi).extend({
 		margin-bottom: var(--spacing-l);
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index f7f69d9a28..3bc9a2b643 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -39,9 +39,11 @@
 						v-if="(hasUnsavedChanges || credentialId) && credentialPermissions.save"
 						:saved="!hasUnsavedChanges && !isTesting"
 						:isSaving="isSaving || isTesting"
-						:savingLabel="isTesting
-							? $locale.baseText('credentialEdit.credentialEdit.testing')
-							: $locale.baseText('credentialEdit.credentialEdit.saving')"
+						:savingLabel="
+							isTesting
+								? $locale.baseText('credentialEdit.credentialEdit.testing')
+								: $locale.baseText('credentialEdit.credentialEdit.saving')
+						"
 						@click="saveCredential"
 						data-test-id="credential-save-button"
 					/>
@@ -52,7 +54,7 @@
 		<template #content>
 			<div :class="$style.container">
 				<div :class="$style.sidebar">
-					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect" ></n8n-menu>
+					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig
@@ -109,11 +111,7 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import {
-	ICredentialsResponse,
-	IFakeDoor,
-	IUser,
-} from '@/Interface';
+import { ICredentialsResponse, IFakeDoor, IUser } from '@/Interface';
 
 import {
 	CredentialInformation,
@@ -136,14 +134,14 @@ import { showMessage } from '@/mixins/showMessage';
 
 import CredentialConfig from './CredentialConfig.vue';
 import CredentialInfo from './CredentialInfo.vue';
-import CredentialSharing from "./CredentialSharing.ee.vue";
+import CredentialSharing from './CredentialSharing.ee.vue';
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
-import {EnterpriseEditionFeature} from "@/constants";
-import {IDataObject} from "n8n-workflow";
+import { EnterpriseEditionFeature } from '@/constants';
+import { IDataObject } from 'n8n-workflow';
 import FeatureComingSoon from '../FeatureComingSoon.vue';
-import {getCredentialPermissions, IPermissions} from "@/permissions";
+import { getCredentialPermissions, IPermissions } from '@/permissions';
 import { IMenuItem } from 'n8n-design-system';
 import { BaseTextKey } from '@/plugins/i18n';
 import { mapStores } from 'pinia';
@@ -205,21 +203,20 @@ export default mixins(showMessage, nodeHelpers).extend({
 		};
 	},
 	async mounted() {
-		this.nodeAccess = this.nodesWithAccess.reduce(
-			(accu: NodeAccessMap, node: { name: string }) => {
-				if (this.mode === 'new') {
-					accu[node.name] = { nodeType: node.name }; // enable all nodes by default
-				} else {
-					accu[node.name] = null;
-				}
+		this.nodeAccess = this.nodesWithAccess.reduce((accu: NodeAccessMap, node: { name: string }) => {
+			if (this.mode === 'new') {
+				accu[node.name] = { nodeType: node.name }; // enable all nodes by default
+			} else {
+				accu[node.name] = null;
+			}
 
-				return accu;
-			},
-			{},
-		);
+			return accu;
+		}, {});
 
 		if (this.mode === 'new' && this.credentialTypeName) {
-			this.credentialName = await this.credentialsStore.getNewCredentialName({ credentialTypeName: this.credentialTypeName });
+			this.credentialName = await this.credentialsStore.getNewCredentialName({
+				credentialTypeName: this.credentialTypeName,
+			});
 
 			if (this.currentUser) {
 				Vue.set(this.credentialData, 'ownedBy', {
@@ -254,8 +251,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			if (this.credentialId) {
 				if (!this.requiredPropertiesFilled) {
 					this.showValidationWarning = true;
-				}
-				else {
+				} else {
 					this.retestCredential();
 				}
 			}
@@ -265,13 +261,13 @@ export default mixins(showMessage, nodeHelpers).extend({
 	},
 	computed: {
 		...mapStores(
-				useCredentialsStore,
-				useNDVStore,
-				useSettingsStore,
-				useUIStore,
-				useUsersStore,
-				useWorkflowsStore,
-			),
+			useCredentialsStore,
+			useNDVStore,
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+		),
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
@@ -309,21 +305,25 @@ export default mixins(showMessage, nodeHelpers).extend({
 				properties: this.getCredentialProperties(this.credentialTypeName),
 			};
 		},
-		isCredentialTestable (): boolean {
+		isCredentialTestable(): boolean {
 			if (this.isOAuthType || !this.requiredPropertiesFilled) {
 				return false;
 			}
 
 			const { ownedBy, sharedWith, ...credentialData } = this.credentialData;
-			const hasExpressions = Object.values(credentialData).reduce((accu: boolean, value: CredentialInformation) => accu || (typeof value === 'string' && value.startsWith('=')), false);
+			const hasExpressions = Object.values(credentialData).reduce(
+				(accu: boolean, value: CredentialInformation) =>
+					accu || (typeof value === 'string' && value.startsWith('=')),
+				false,
+			);
 			if (hasExpressions) {
 				return false;
 			}
 
-			const nodesThatCanTest = this.nodesWithAccess.filter(node => {
+			const nodesThatCanTest = this.nodesWithAccess.filter((node) => {
 				if (node.credentials) {
 					// Returns a list of nodes that can test this credentials
-					const eligibleTesters = node.credentials.filter(credential => {
+					const eligibleTesters = node.credentials.filter((credential) => {
 						return credential.name === this.credentialTypeName && credential.testedBy;
 					});
 					// If we have any node that can test, return true.
@@ -349,18 +349,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 			return [];
 		},
 		isOAuthType(): boolean {
-			return !!this.credentialTypeName && (
-				(
-					(
-						this.credentialTypeName === 'oAuth2Api' ||
-						this.parentTypes.includes('oAuth2Api')
-					) && this.credentialData.grantType === 'authorizationCode'
-				)
-				||
-				(
+			return (
+				!!this.credentialTypeName &&
+				(((this.credentialTypeName === 'oAuth2Api' || this.parentTypes.includes('oAuth2Api')) &&
+					this.credentialData.grantType === 'authorizationCode') ||
 					this.credentialTypeName === 'oAuth1Api' ||
-					this.parentTypes.includes('oAuth1Api')
-				)
+					this.parentTypes.includes('oAuth1Api'))
 			);
 		},
 		isOAuthConnected(): boolean {
@@ -371,19 +365,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return [];
 			}
 
-			return this.credentialType.properties.filter(
-				(propertyData: INodeProperties) => {
-					if (!this.displayCredentialParameter(propertyData)) {
-						return false;
-					}
-					return (
-						!this.credentialType!.__overwrittenProperties ||
-						!this.credentialType!.__overwrittenProperties.includes(
-							propertyData.name,
-						)
-					);
-				},
-			);
+			return this.credentialType.properties.filter((propertyData: INodeProperties) => {
+				if (!this.displayCredentialParameter(propertyData)) {
+					return false;
+				}
+				return (
+					!this.credentialType!.__overwrittenProperties ||
+					!this.credentialType!.__overwrittenProperties.includes(propertyData.name)
+				);
+			});
 		},
 		requiredPropertiesFilled(): boolean {
 			for (const property of this.credentialProperties) {
@@ -409,41 +399,42 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return {};
 			}
 
-			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse);
+			return getCredentialPermissions(
+				this.currentUser,
+				(this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse,
+			);
 		},
 		sidebarItems(): IMenuItem[] {
-				const items: IMenuItem[] = [
-					{
-						id: 'connection',
-						label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
-						position: 'top',
-					},
-					{
-						id: 'sharing',
-						label: this.$locale.baseText('credentialEdit.credentialEdit.sharing'),
-						position: 'top',
-						available: this.credentialType !== null && this.isSharingAvailable,
-					},
-				];
+			const items: IMenuItem[] = [
+				{
+					id: 'connection',
+					label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
+					position: 'top',
+				},
+				{
+					id: 'sharing',
+					label: this.$locale.baseText('credentialEdit.credentialEdit.sharing'),
+					position: 'top',
+					available: this.credentialType !== null && this.isSharingAvailable,
+				},
+			];
 
-				if (this.credentialType !== null && !this.isSharingAvailable) {
-					for (const item of this.credentialsFakeDoorFeatures) {
-						items.push({
-							id: `coming-soon/${item.id}`,
-							label: this.$locale.baseText(item.featureName as BaseTextKey),
-							position: 'top',
-						});
-					}
+			if (this.credentialType !== null && !this.isSharingAvailable) {
+				for (const item of this.credentialsFakeDoorFeatures) {
+					items.push({
+						id: `coming-soon/${item.id}`,
+						label: this.$locale.baseText(item.featureName as BaseTextKey),
+						position: 'top',
+					});
 				}
+			}
 
-				items.push(
-					{
-						id: 'details',
-						label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
-						position: 'top',
-					},
-				);
-				return items;
+			items.push({
+				id: 'details',
+				label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
+				position: 'top',
+			});
+			return items;
 		},
 		isSharingAvailable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
@@ -456,30 +447,45 @@ export default mixins(showMessage, nodeHelpers).extend({
 			if (this.hasUnsavedChanges) {
 				const displayName = this.credentialType ? this.credentialType.displayName : '';
 				keepEditing = await this.confirmMessage(
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', { interpolate: { credentialDisplayName: displayName } }),
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.message',
+						{ interpolate: { credentialDisplayName: displayName } },
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline',
+					),
 					null,
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'),
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
+					),
 				);
 			} else if (this.credentialPermissions.isOwner && this.isOAuthType && !this.isOAuthConnected) {
 				keepEditing = await this.confirmMessage(
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.message',
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline',
+					),
 					null,
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText'),
-					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
+					),
 				);
 			}
 
 			if (!keepEditing) {
 				return true;
-			}
-			else if (!this.requiredPropertiesFilled) {
+			} else if (!this.requiredPropertiesFilled) {
 				this.showValidationWarning = true;
 				this.scrollToTop();
-			}
-			else if (this.isOAuthType) {
+			} else if (this.isOAuthType) {
 				this.scrollToBottom();
 			}
 
@@ -495,12 +501,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return true;
 			}
 
-			return this.displayParameter(
-				this.credentialData as INodeParameters,
-				parameter,
-				'',
-				null,
-			);
+			return this.displayParameter(this.credentialData as INodeParameters, parameter, '', null);
 		},
 		getCredentialProperties(name: string): INodeProperties[] {
 			const credentialTypeData = this.credentialsStore.getCredentialTypeByName(name);
@@ -515,19 +516,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			const combineProperties = [] as INodeProperties[];
 			for (const credentialsTypeName of credentialTypeData.extends) {
-				const mergeCredentialProperties =
-					this.getCredentialProperties(credentialsTypeName);
-				NodeHelpers.mergeNodeProperties(
-					combineProperties,
-					mergeCredentialProperties,
-				);
+				const mergeCredentialProperties = this.getCredentialProperties(credentialsTypeName);
+				NodeHelpers.mergeNodeProperties(combineProperties, mergeCredentialProperties);
 			}
 
 			// The properties defined on the parent credentials take precedence
-			NodeHelpers.mergeNodeProperties(
-				combineProperties,
-				credentialTypeData.properties,
-			);
+			NodeHelpers.mergeNodeProperties(combineProperties, credentialTypeData.properties);
 
 			return combineProperties;
 		},
@@ -536,11 +530,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.credentialId = this.activeId;
 
 			try {
-				const currentCredentials = await this.credentialsStore.getCredentialData({ id: this.credentialId });
+				const currentCredentials = await this.credentialsStore.getCredentialData({
+					id: this.credentialId,
+				});
 
 				if (!currentCredentials) {
 					throw new Error(
-						this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId,
+						this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') +
+							':' +
+							this.credentialId,
 					);
 				}
 
@@ -553,12 +551,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 				}
 
 				this.credentialName = currentCredentials.name;
-				currentCredentials.nodesAccess.forEach(
-					(access: { nodeType: string }) => {
-						// keep node access structure to keep dates when updating
-						this.nodeAccess[access.nodeType] = access;
-					},
-				);
+				currentCredentials.nodesAccess.forEach((access: { nodeType: string }) => {
+					// keep node access structure to keep dates when updating
+					this.nodeAccess[access.nodeType] = access;
+				});
 			} catch (error) {
 				this.$showError(
 					error,
@@ -584,7 +580,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				sharing_enabled: EnterpriseEditionFeature.Sharing,
 			});
 		},
-		onNodeAccessChange({name, value}: {name: string, value: boolean}) {
+		onNodeAccessChange({ name, value }: { name: string; value: boolean }) {
 			this.hasUnsavedChanges = true;
 
 			if (value) {
@@ -605,7 +601,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			Vue.set(this.credentialData, 'sharedWith', sharees);
 			this.hasUnsavedChanges = true;
 		},
-		onDataChange({ name, value }: { name: string; value: any }) { // tslint:disable-line:no-any
+		onDataChange({ name, value }: { name: string; value: any }) {
+			// tslint:disable-line:no-any
 			this.hasUnsavedChanges = true;
 
 			const { oauthTokenData, ...credData } = this.credentialData;
@@ -622,10 +619,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		getParentTypes(name: string): string[] {
 			const credentialType = this.credentialsStore.getCredentialTypeByName(name);
 
-			if (
-				credentialType === undefined ||
-				credentialType.extends === undefined
-			) {
+			if (credentialType === undefined || credentialType.extends === undefined) {
 				return [];
 			}
 
@@ -692,8 +686,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			if (result.status === 'Error') {
 				this.authError = result.message;
 				this.testedSuccessfully = false;
-			}
-			else {
+			} else {
 				this.authError = '';
 				this.testedSuccessfully = true;
 			}
@@ -705,8 +698,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			if (!this.requiredPropertiesFilled) {
 				this.showValidationWarning = true;
 				this.scrollToTop();
-			}
-			else {
+			} else {
 				this.showValidationWarning = false;
 			}
 
@@ -746,13 +738,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 			const isNewCredential = this.mode === 'new' && !this.credentialId;
 
 			if (isNewCredential) {
-				credential = await this.createCredential(
-					credentialDetails,
-				);
+				credential = await this.createCredential(credentialDetails);
 			} else {
-				credential = await this.updateCredential(
-					credentialDetails,
-				);
+				credential = await this.updateCredential(credentialDetails);
 			}
 
 			this.isSaving = false;
@@ -768,8 +756,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 					await this.testCredential(credentialDetails);
 					this.isTesting = false;
-				}
-				else {
+				} else {
 					this.authError = '';
 					this.testedSuccessfully = false;
 				}
@@ -840,7 +827,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 		): Promise<ICredentialsResponse | null> {
 			let credential;
 			try {
-				credential = await this.credentialsStore.updateCredential({ id: this.credentialId, data: credentialDetails });
+				credential = await this.credentialsStore.updateCredential({
+					id: this.credentialId,
+					data: credentialDetails,
+				});
 				this.hasUnsavedChanges = false;
 			} catch (error) {
 				this.$showError(
@@ -872,10 +862,17 @@ export default mixins(showMessage, nodeHelpers).extend({
 			const savedCredentialName = this.currentCredential.name;
 
 			const deleteConfirmed = await this.confirmMessage(
-				this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', { interpolate: { savedCredentialName } }),
-				this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
+				this.$locale.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
+					{ interpolate: { savedCredentialName } },
+				),
+				this.$locale.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
+				),
 				null,
-				this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
+				this.$locale.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+				),
 			);
 
 			if (deleteConfirmed === false) {
@@ -919,17 +916,11 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			try {
 				const credData = { id: credential.id, ...this.credentialData };
-				if (
-					this.credentialTypeName === 'oAuth2Api' ||
-					types.includes('oAuth2Api')
-				) {
+				if (this.credentialTypeName === 'oAuth2Api' || types.includes('oAuth2Api')) {
 					if (isValidCredentialResponse(credData)) {
 						url = await this.credentialsStore.oAuth2Authorize(credData);
 					}
-				} else if (
-					this.credentialTypeName === 'oAuth1Api' ||
-					types.includes('oAuth1Api')
-				) {
+				} else if (this.credentialTypeName === 'oAuth1Api' || types.includes('oAuth1Api')) {
 					if (isValidCredentialResponse(credData)) {
 						url = await this.credentialsStore.oAuth1Authorize(credData);
 					}
@@ -937,8 +928,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 			} catch (error) {
 				this.$showError(
 					error,
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'),
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title',
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message',
+					),
 				);
 
 				return;
@@ -971,7 +966,6 @@ export default mixins(showMessage, nodeHelpers).extend({
 			window.addEventListener('message', receiveMessage, false);
 		},
 	},
-
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
index 3920ad357a..5b329fd1e1 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
@@ -7,22 +7,25 @@
 				</n8n-text>
 			</el-col>
 			<el-col :span="16">
-				<div
-					v-for="node in nodesWithAccess"
-					:key="node.name"
-					:class="$style.valueLabel"
-				>
+				<div v-for="node in nodesWithAccess" :key="node.name" :class="$style.valueLabel">
 					<el-checkbox
 						v-if="credentialPermissions.updateNodeAccess"
-						:label="$locale.headerText({
-							key: `headers.${shortNodeType(node)}.displayName`,
-							fallback: node.displayName,
-						})"
+						:label="
+							$locale.headerText({
+								key: `headers.${shortNodeType(node)}.displayName`,
+								fallback: node.displayName,
+							})
+						"
 						:value="!!nodeAccess[node.name]"
 						@change="(val) => onNodeAccessChange(node.name, val)"
 					/>
 					<n8n-text v-else>
-						{{ $locale.headerText({ key: `headers.${shortNodeType(node)}.displayName`, fallback: node.displayName })}}
+						{{
+							$locale.headerText({
+								key: `headers.${shortNodeType(node)}.displayName`,
+								fallback: node.displayName,
+							})
+						}}
 					</n8n-text>
 				</div>
 			</el-col>
@@ -34,7 +37,9 @@
 				</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
-				<n8n-text :compact="true"><TimeAgo :date="currentCredential.createdAt" :capitalize="true" /></n8n-text>
+				<n8n-text :compact="true"
+					><TimeAgo :date="currentCredential.createdAt" :capitalize="true"
+				/></n8n-text>
 			</el-col>
 		</el-row>
 		<el-row v-if="currentCredential">
@@ -44,7 +49,9 @@
 				</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
-				<n8n-text :compact="true"><TimeAgo :date="currentCredential.updatedAt" :capitalize="true" /></n8n-text>
+				<n8n-text :compact="true"
+					><TimeAgo :date="currentCredential.updatedAt" :capitalize="true"
+				/></n8n-text>
 			</el-col>
 		</el-row>
 		<el-row v-if="currentCredential">
@@ -106,5 +113,4 @@ export default Vue.extend({
 .valueLabel {
 	font-weight: var(--font-weight-regular);
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index 67cf7f6c1a..77e0e71038 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -1,11 +1,13 @@
 <template>
 	<div @keydown.stop :class="$style.container" v-if="credentialProperties.length">
-		<form v-for="parameter in credentialProperties" :key="parameter.name" autocomplete="off" data-test-id="credential-connection-parameter">
+		<form
+			v-for="parameter in credentialProperties"
+			:key="parameter.name"
+			autocomplete="off"
+			data-test-id="credential-connection-parameter"
+		>
 			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
-			<n8n-notice
-				v-if="parameter.type === 'notice'"
-				:content="parameter.displayName"
-			/>
+			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
 			<parameter-input-expanded
 				v-else
 				:parameter="parameter"
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index 362ac5a73d..92b05817f0 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -2,7 +2,9 @@
 	<div :class="$style.container">
 		<div v-if="isDefaultUser">
 			<n8n-action-box
-				:description="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.description')"
+				:description="
+					$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.description')
+				"
 				:buttonText="$locale.baseText('credentialEdit.credentialSharing.isDefaultUser.button')"
 				@click="goToUsersSettings"
 			/>
@@ -13,10 +15,17 @@
 					{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
 				</template>
 				<template v-else>
-					{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee', { interpolate: { credentialOwnerName } }) }}
+					{{
+						$locale.baseText('credentialEdit.credentialSharing.info.sharee', {
+							interpolate: { credentialOwnerName },
+						})
+					}}
 				</template>
 			</n8n-info-tip>
-			<n8n-info-tip :bold="false" v-if="!credentialPermissions.isOwner && credentialPermissions.isInstanceOwner">
+			<n8n-info-tip
+				:bold="false"
+				v-if="!credentialPermissions.isOwner && credentialPermissions.isInstanceOwner"
+			>
 				{{ $locale.baseText('credentialEdit.credentialSharing.info.instanceOwner') }}
 			</n8n-info-tip>
 			<n8n-user-select
@@ -43,31 +52,35 @@
 </template>
 
 <script lang="ts">
-import {IUser} from "@/Interface";
-import mixins from "vue-typed-mixins";
-import {showMessage} from "@/mixins/showMessage";
+import { IUser } from '@/Interface';
+import mixins from 'vue-typed-mixins';
+import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
-import { useCredentialsStore } from "@/stores/credentials";
-import {VIEWS} from "@/constants";
+import { useCredentialsStore } from '@/stores/credentials';
+import { VIEWS } from '@/constants';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'CredentialSharing',
-	props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions', 'modalBus'],
+	props: [
+		'credential',
+		'credentialId',
+		'credentialData',
+		'sharedWith',
+		'credentialPermissions',
+		'modalBus',
+	],
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useUsersStore,
-		),
+		...mapStores(useCredentialsStore, useUsersStore),
 		isDefaultUser(): boolean {
 			return this.usersStore.isDefaultUser;
 		},
 		usersList(): IUser[] {
 			return this.usersStore.allUsers.filter((user: IUser) => {
 				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
-				const isAlreadySharedWithUser = (this.credentialData.sharedWith || []).find((sharee: IUser) => sharee.id === user.id);
+				const isAlreadySharedWithUser = (this.credentialData.sharedWith || []).find(
+					(sharee: IUser) => sharee.id === user.id,
+				);
 
 				return !isCurrentUser && !isAlreadySharedWithUser;
 			});
@@ -94,17 +107,26 @@ export default mixins(
 
 			if (user) {
 				const confirm = await this.confirmMessage(
-					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.message', { interpolate: { name: user.fullName || '' } }),
+					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.message', {
+						interpolate: { name: user.fullName || '' },
+					}),
 					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.title'),
 					null,
-					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText'),
-					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText'),
+					this.$locale.baseText(
+						'credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText',
+					),
+					this.$locale.baseText(
+						'credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText',
+					),
 				);
 
 				if (confirm) {
-					this.$emit('change', this.credentialData.sharedWith.filter((sharee: IUser) => {
-						return sharee.id !== user.id;
-					}));
+					this.$emit(
+						'change',
+						this.credentialData.sharedWith.filter((sharee: IUser) => {
+							return sharee.id !== user.id;
+						}),
+					);
 				}
 			}
 		},
diff --git a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
index b032ede2e1..22b9d2d45e 100644
--- a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
@@ -28,9 +28,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		basePath(): string {
 			return this.rootStore.baseUrl;
 		},
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index fd4bd9669a..b6efc3ca30 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -21,11 +21,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNodeTypesStore,
-			useRootStore,
-		),
+		...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore),
 		credentialWithIcon(): ICredentialType | null {
 			return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
 		},
@@ -38,7 +34,7 @@ export default Vue.extend({
 			return this.rootStore.getBaseUrl + iconUrl;
 		},
 
-		relevantNode(): INodeTypeDescription | null	 {
+		relevantNode(): INodeTypeDescription | null {
 			if (this.credentialWithIcon?.icon?.startsWith('node:')) {
 				const nodeType = this.credentialWithIcon.icon.replace('node:', '');
 				return this.nodeTypesStore.getNodeType(nodeType);
@@ -70,7 +66,7 @@ export default Vue.extend({
 
 			if (type.extends) {
 				let parentCred = null;
-				type.extends.forEach(name => {
+				type.extends.forEach((name) => {
 					parentCred = this.getCredentialWithIcon(name);
 					if (parentCred !== null) return;
 				});
diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
index 56bef21851..559bed74dd 100644
--- a/packages/editor-ui/src/components/CredentialsSelect.vue
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -5,7 +5,9 @@
 				:size="inputSize"
 				filterable
 				:value="displayValue"
-				:placeholder="parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')"
+				:placeholder="
+					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
+				"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				ref="innerSelect"
@@ -76,9 +78,7 @@ export default Vue.extend({
 		'displayTitle',
 	],
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-		),
+		...mapStores(useCredentialsStore),
 		allCredentialTypes(): ICredentialType[] {
 			return this.credentialsStore.allCredentialTypes;
 		},
@@ -93,7 +93,7 @@ export default Vue.extend({
 	},
 	methods: {
 		focus() {
-			const select = this.$refs.innerSelect as Vue & HTMLElement | undefined;
+			const select = this.$refs.innerSelect as (Vue & HTMLElement) | undefined;
 			if (select) {
 				select.focus();
 			}
@@ -109,7 +109,6 @@ export default Vue.extend({
 
 			for (const property of supported.has) {
 				if (checkedCredType[property as keyof ICredentialType] !== undefined) {
-
 					// edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth
 					if (name === 'httpHeaderAuth' && property === 'authenticate') continue;
 
@@ -119,9 +118,7 @@ export default Vue.extend({
 
 			if (
 				checkedCredType.extends &&
-				checkedCredType.extends.some(
-					(parentType: string) => supported.extends.includes(parentType),
-				)
+				checkedCredType.extends.some((parentType: string) => supported.extends.includes(parentType))
 			) {
 				return true;
 			}
@@ -138,23 +135,26 @@ export default Vue.extend({
 			return false;
 		},
 		getSupportedSets(credentialTypes: string[]) {
-			return credentialTypes.reduce<{ extends: string[]; has: string[] }>((acc, cur) => {
-				const _extends = cur.split('extends:');
+			return credentialTypes.reduce<{ extends: string[]; has: string[] }>(
+				(acc, cur) => {
+					const _extends = cur.split('extends:');
+
+					if (_extends.length === 2) {
+						acc.extends.push(_extends[1]);
+						return acc;
+					}
+
+					const _has = cur.split('has:');
+
+					if (_has.length === 2) {
+						acc.has.push(_has[1]);
+						return acc;
+					}
 
-				if (_extends.length === 2) {
-					acc.extends.push(_extends[1]);
 					return acc;
-				}
-
-				const _has = cur.split('has:');
-
-				if (_has.length === 2) {
-					acc.has.push(_has[1]);
-					return acc;
-				}
-
-				return acc;
-			}, { extends: [], has: [] });
+				},
+				{ extends: [], has: [] },
+			);
 		},
 	},
 });
@@ -165,5 +165,4 @@ export default Vue.extend({
 	display: flex;
 	align-items: center;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index 79476d8a90..f74aa8c117 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -9,11 +9,15 @@
 		minHeight="250px"
 	>
 		<template #header>
-			<h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2>
+			<h2 :class="$style.title">
+				{{ $locale.baseText('credentialSelectModal.addNewCredential') }}
+			</h2>
 		</template>
 		<template #content>
 			<div>
-				<div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
+				<div :class="$style.subtitle">
+					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
+				</div>
 				<n8n-select
 					filterable
 					defaultFirstOption
@@ -73,8 +77,7 @@ export default mixins(externalHooks).extend({
 	async mounted() {
 		try {
 			await this.credentialsStore.fetchCredentialTypes(false);
-		} catch (e) {
-		}
+		} catch (e) {}
 		this.loading = false;
 
 		setTimeout(() => {
@@ -93,17 +96,13 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useCredentialsStore, useUIStore, useWorkflowsStore),
 	},
 	methods: {
 		onSelect(type: string) {
 			this.selected = type;
 		},
-		openCredentialType () {
+		openCredentialType() {
 			this.modalBus.$emit('close');
 			this.uiStore.openNewCredential(this.selected);
 
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index 010d224a20..6f30836b4c 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -10,12 +10,20 @@
 		<template #content>
 			<div>
 				<div v-if="isPending">
-					<n8n-text color="text-base">{{ $locale.baseText('settings.users.confirmUserDeletion') }}</n8n-text>
+					<n8n-text color="text-base">{{
+						$locale.baseText('settings.users.confirmUserDeletion')
+					}}</n8n-text>
 				</div>
 				<div :class="$style.content" v-else>
-					<div><n8n-text color="text-base">{{ $locale.baseText('settings.users.confirmDataHandlingAfterDeletion') }}</n8n-text></div>
+					<div>
+						<n8n-text color="text-base">{{
+							$locale.baseText('settings.users.confirmDataHandlingAfterDeletion')
+						}}</n8n-text>
+					</div>
 					<el-radio :value="operation" label="transfer" @change="() => setOperation('transfer')">
-						<n8n-text color="text-dark">{{ $locale.baseText('settings.users.transferWorkflowsAndCredentials') }}</n8n-text>
+						<n8n-text color="text-dark">{{
+							$locale.baseText('settings.users.transferWorkflowsAndCredentials')
+						}}</n8n-text>
 					</el-radio>
 					<div :class="$style.optionInput" v-if="operation === 'transfer'">
 						<n8n-input-label :label="$locale.baseText('settings.users.userToTransferTo')">
@@ -29,38 +37,49 @@
 						</n8n-input-label>
 					</div>
 					<el-radio :value="operation" label="delete" @change="() => setOperation('delete')">
-						<n8n-text color="text-dark">{{ $locale.baseText('settings.users.deleteWorkflowsAndCredentials') }}</n8n-text>
+						<n8n-text color="text-dark">{{
+							$locale.baseText('settings.users.deleteWorkflowsAndCredentials')
+						}}</n8n-text>
 					</el-radio>
 					<div :class="$style.optionInput" v-if="operation === 'delete'">
 						<n8n-input-label :label="$locale.baseText('settings.users.deleteConfirmationMessage')">
-							<n8n-input :value="deleteConfirmText" :placeholder="$locale.baseText('settings.users.deleteConfirmationText')" @input="setConfirmText" />
+							<n8n-input
+								:value="deleteConfirmText"
+								:placeholder="$locale.baseText('settings.users.deleteConfirmationText')"
+								@input="setConfirmText"
+							/>
 						</n8n-input-label>
 					</div>
 				</div>
 			</div>
 		</template>
 		<template #footer>
-			<n8n-button :loading="loading" :disabled="!enabled" :label="$locale.baseText('settings.users.delete')" @click="onSubmit" float="right" />
+			<n8n-button
+				:loading="loading"
+				:disabled="!enabled"
+				:label="$locale.baseText('settings.users.delete')"
+				@click="onSubmit"
+				float="right"
+			/>
 		</template>
 	</Modal>
 </template>
 
-
 <script lang="ts">
-import mixins from "vue-typed-mixins";
+import mixins from 'vue-typed-mixins';
 
-import { showMessage } from "@/mixins/showMessage";
-import Modal from "./Modal.vue";
-import Vue from "vue";
-import { IUser } from "../Interface";
-import { mapStores } from "pinia";
+import { showMessage } from '@/mixins/showMessage';
+import Modal from './Modal.vue';
+import Vue from 'vue';
+import { IUser } from '../Interface';
+import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 
 export default mixins(showMessage).extend({
 	components: {
 		Modal,
 	},
-	name: "DeleteUserModal",
+	name: 'DeleteUserModal',
 	props: {
 		modalName: {
 			type: String,
@@ -88,17 +107,18 @@ export default mixins(showMessage).extend({
 			return this.userToDelete ? this.userToDelete && !this.userToDelete.firstName : false;
 		},
 		title(): string {
-			const user = this.userToDelete && (this.userToDelete.fullName || this.userToDelete.email) || '';
-			return this.$locale.baseText(
-				'settings.users.deleteUser',
-				{ interpolate: { user }},
-			);
+			const user =
+				(this.userToDelete && (this.userToDelete.fullName || this.userToDelete.email)) || '';
+			return this.$locale.baseText('settings.users.deleteUser', { interpolate: { user } });
 		},
 		enabled(): boolean {
 			if (this.isPending) {
 				return true;
 			}
-			if (this.operation === 'delete' && this.deleteConfirmText === this.$locale.baseText('settings.users.deleteConfirmationText')) {
+			if (
+				this.operation === 'delete' &&
+				this.deleteConfirmText === this.$locale.baseText('settings.users.deleteConfirmationText')
+			) {
 				return true;
 			}
 
@@ -128,7 +148,7 @@ export default mixins(showMessage).extend({
 
 				this.loading = true;
 
-				const params = {id: this.activeId} as {id: string, transferId?: string};
+				const params = { id: this.activeId } as { id: string; transferId?: string };
 				if (this.operation === 'transfer') {
 					params.transferId = this.transferId;
 				}
@@ -139,10 +159,9 @@ export default mixins(showMessage).extend({
 				if (this.transferId) {
 					const transferUser: IUser | null = this.usersStore.getUserById(this.transferId);
 					if (transferUser) {
-						message = this.$locale.baseText(
-							'settings.users.transferredToUser',
-							{ interpolate: { user: transferUser.fullName || '' }},
-						);
+						message = this.$locale.baseText('settings.users.transferredToUser', {
+							interpolate: { user: transferUser.fullName || '' },
+						});
 					}
 				}
 
@@ -153,7 +172,6 @@ export default mixins(showMessage).extend({
 				});
 
 				this.modalBus.$emit('close');
-
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.users.userDeletedError'));
 			}
@@ -161,7 +179,6 @@ export default mixins(showMessage).extend({
 		},
 	},
 });
-
 </script>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index fe796d12ce..ef2d43cb27 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -1,18 +1,14 @@
 <template>
-	<component :is="tag"
-		:class="{[$style.dragging]: isDragging }"
+	<component
+		:is="tag"
+		:class="{ [$style.dragging]: isDragging }"
 		@mousedown="onDragStart"
 		ref="wrapper"
 	>
 		<slot :isDragging="isDragging"></slot>
 
 		<Teleport to="body">
-			<div
-				ref="draggable"
-				:class="$style.draggable"
-				:style="draggableStyle"
-				v-show="isDragging"
-			>
+			<div ref="draggable" :class="$style.draggable" :style="draggableStyle" v-show="isDragging">
 				<slot name="preview" :canDrop="canDrop" :el="draggingEl"></slot>
 			</div>
 		</Teleport>
@@ -68,9 +64,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-		),
+		...mapStores(useNDVStore),
 		canDrop(): boolean {
 			return this.ndvStore.canDraggableDrop;
 		},
@@ -91,7 +85,9 @@ export default Vue.extend({
 
 			this.draggingEl = e.target as HTMLElement;
 			if (this.targetDataKey && this.draggingEl.dataset?.target !== this.targetDataKey) {
-				this.draggingEl = this.draggingEl.closest(`[data-target="${this.targetDataKey}"]`) as HTMLElement;
+				this.draggingEl = this.draggingEl.closest(
+					`[data-target="${this.targetDataKey}"]`,
+				) as HTMLElement;
 			}
 
 			if (this.targetDataKey && this.draggingEl?.dataset?.target !== this.targetDataKey) {
@@ -116,11 +112,12 @@ export default Vue.extend({
 				return;
 			}
 
-			if(!this.isDragging) {
+			if (!this.isDragging) {
 				this.isDragging = true;
 
-				const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
-				this.ndvStore.draggableStartDragging({type: this.type, data: data || '' });
+				const data =
+					this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : this.data || '';
+				this.ndvStore.draggableStartDragging({ type: this.type, data: data || '' });
 
 				this.$emit('dragstart', this.draggingEl);
 				document.body.style.cursor = 'grabbing';
@@ -128,7 +125,7 @@ export default Vue.extend({
 
 			this.animationFrameId = window.requestAnimationFrame(() => {
 				if (this.canDrop && this.stickyPosition) {
-					this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1]};
+					this.draggablePosition = { x: this.stickyPosition[0], y: this.stickyPosition[1] };
 				} else {
 					this.draggablePosition = { x: e.pageX, y: e.pageY };
 				}
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index c2762cc92d..42d125d241 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -39,9 +39,7 @@ export default Vue.extend({
 		window.removeEventListener('mouseup', this.onMouseUp);
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-		),
+		...mapStores(useNDVStore),
 		isDragging(): boolean {
 			return this.ndvStore.isDraggableDragging;
 		},
@@ -62,10 +60,17 @@ export default Vue.extend({
 			if (target && this.isDragging) {
 				const dim = target.getBoundingClientRect();
 
-				this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
+				this.hovering =
+					e.clientX >= dim.left &&
+					e.clientX <= dim.right &&
+					e.clientY >= dim.top &&
+					e.clientY <= dim.bottom;
 
 				if (!this.disabled && this.sticky && this.hovering) {
-					this.ndvStore.setDraggableStickyPos([dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
+					this.ndvStore.setDraggableStickyPos([
+						dim.left + this.stickyOffset,
+						dim.top + this.stickyOffset,
+					]);
 				}
 			}
 		},
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index cd63c8e719..1c824bb236 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -30,32 +30,43 @@
 		</template>
 		<template #footer="{ close }">
 			<div :class="$style.footer">
-				<n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
-				<n8n-button type="secondary" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
+				<n8n-button
+					@click="save"
+					:loading="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.save')"
+					float="right"
+				/>
+				<n8n-button
+					type="secondary"
+					@click="close"
+					:disabled="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
+					float="right"
+				/>
 			</div>
 		</template>
 	</Modal>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import mixins from "vue-typed-mixins";
+import Vue from 'vue';
+import mixins from 'vue-typed-mixins';
 
-import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from "@/constants";
-import { workflowHelpers } from "@/mixins/workflowHelpers";
-import { showMessage } from "@/mixins/showMessage";
-import TagsDropdown from "@/components/TagsDropdown.vue";
-import Modal from "./Modal.vue";
-import {restApi} from "@/mixins/restApi";
-import { mapStores } from "pinia";
-import { useSettingsStore } from "@/stores/settings";
-import { useWorkflowsStore } from "@/stores/workflows";
-import { IWorkflowDataUpdate } from "@/Interface";
+import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import { workflowHelpers } from '@/mixins/workflowHelpers';
+import { showMessage } from '@/mixins/showMessage';
+import TagsDropdown from '@/components/TagsDropdown.vue';
+import Modal from './Modal.vue';
+import { restApi } from '@/mixins/restApi';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { IWorkflowDataUpdate } from '@/Interface';
 
 export default mixins(showMessage, workflowHelpers, restApi).extend({
 	components: { TagsDropdown, Modal },
-	name: "DuplicateWorkflow",
-	props: ["modalName", "isActive", "data"],
+	name: 'DuplicateWorkflow',
+	props: ['modalName', 'isActive', 'data'],
 	data() {
 		const currentTagIds = this.data.tags;
 
@@ -74,10 +85,7 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 		this.$nextTick(() => this.focusOnNameInput());
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useSettingsStore, useWorkflowsStore),
 	},
 	watch: {
 		isActive(active) {
@@ -112,7 +120,7 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 				this.$showMessage({
 					title: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.title'),
 					message: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.message'),
-					type: "error",
+					type: 'error',
 				});
 
 				return;
@@ -125,10 +133,14 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 			try {
 				let workflowToUpdate: IWorkflowDataUpdate | undefined;
 				if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-					const { createdAt, updatedAt, usedCredentials, ...workflow } = await this.restApi().getWorkflow(this.data.id);
+					const { createdAt, updatedAt, usedCredentials, ...workflow } =
+						await this.restApi().getWorkflow(this.data.id);
 					workflowToUpdate = workflow;
 
-					this.removeForeignCredentialsFromWorkflow(workflowToUpdate, this.credentialsStore.allCredentials);
+					this.removeForeignCredentialsFromWorkflow(
+						workflowToUpdate,
+						this.credentialsStore.allCredentials,
+					);
 				}
 
 				const saved = await this.saveAsNewWorkflow({
@@ -166,7 +178,7 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 			}
 		},
 		closeDialog(): void {
-			this.modalBus.$emit("close");
+			this.modalBus.$emit('close');
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index 09c12e20b6..dd41847379 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import {EnterpriseEditionFeature} from "@/constants";
+import { EnterpriseEditionFeature } from '@/constants';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 
@@ -23,7 +23,10 @@ export default Vue.extend({
 		...mapStores(useSettingsStore),
 		canAccess(): boolean {
 			return this.features.reduce((acc: boolean, feature) => {
-				return acc && !!this.settingsStore.isEnterpriseFeatureEnabled(feature as EnterpriseEditionFeature);
+				return (
+					acc &&
+					!!this.settingsStore.isEnterpriseFeatureEnabled(feature as EnterpriseEditionFeature)
+				);
 			}, true);
 		},
 	},
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 6323fd769b..c04c6209f7 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -6,13 +6,14 @@
 		</div>
 		<details>
 			<summary class="error-details__summary">
-				<font-awesome-icon class="error-details__icon" icon="angle-right" /> {{ $locale.baseText('nodeErrorView.details') }}
+				<font-awesome-icon class="error-details__icon" icon="angle-right" />
+				{{ $locale.baseText('nodeErrorView.details') }}
 			</summary>
 			<div class="error-details__content">
 				<div v-if="error.context && error.context.causeDetailed">
 					<el-card class="box-card" shadow="never">
 						<div>
-							{{error.context.causeDetailed}}
+							{{ error.context.causeDetailed }}
 						</div>
 					</el-card>
 				</div>
@@ -24,22 +25,33 @@
 							</div>
 						</template>
 						<div>
-							{{new Date(error.timestamp).toLocaleString()}}
+							{{ new Date(error.timestamp).toLocaleString() }}
 						</div>
 					</el-card>
 				</div>
-			<div v-if="error.context && error.context.itemIndex !== undefined" class="el-card box-card is-never-shadow el-card__body">
-				<span class="error-details__summary">{{ $locale.baseText('nodeErrorView.itemIndex') }}:</span>
-				{{error.context.itemIndex}}
-				<span v-if="error.context.runIndex">
-					| <span class="error-details__summary">{{ $locale.baseText('nodeErrorView.itemIndex') }}:</span>
-					{{error.context.runIndex}}
-				</span>
-				<span v-if="error.context.parameter">
-					| <span class="error-details__summary">{{ $locale.baseText('nodeErrorView.inParameter') }}:</span>
-					{{ parameterDisplayName(error.context.parameter) }}
-				</span>
-			</div>
+				<div
+					v-if="error.context && error.context.itemIndex !== undefined"
+					class="el-card box-card is-never-shadow el-card__body"
+				>
+					<span class="error-details__summary"
+						>{{ $locale.baseText('nodeErrorView.itemIndex') }}:</span
+					>
+					{{ error.context.itemIndex }}
+					<span v-if="error.context.runIndex">
+						|
+						<span class="error-details__summary"
+							>{{ $locale.baseText('nodeErrorView.itemIndex') }}:</span
+						>
+						{{ error.context.runIndex }}
+					</span>
+					<span v-if="error.context.parameter">
+						|
+						<span class="error-details__summary"
+							>{{ $locale.baseText('nodeErrorView.inParameter') }}:</span
+						>
+						{{ parameterDisplayName(error.context.parameter) }}
+					</span>
+				</div>
 				<div v-if="error.httpCode">
 					<el-card class="box-card" shadow="never">
 						<template #header>
@@ -48,7 +60,7 @@
 							</div>
 						</template>
 						<div>
-							{{error.httpCode}}
+							{{ error.httpCode }}
 						</div>
 					</el-card>
 				</div>
@@ -57,13 +69,19 @@
 						<template #header>
 							<div class="clearfix box-card__title">
 								<span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
-								<br>
-								<span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
+								<br />
+								<span class="box-card__subtitle">{{
+									$locale.baseText('nodeErrorView.dataBelowMayContain')
+								}}</span>
 							</div>
-							</template>
+						</template>
 						<div>
 							<div class="copy-button" v-if="displayCause">
-								<n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" />
+								<n8n-icon-button
+									@click="copyCause"
+									:title="$locale.baseText('nodeErrorView.copyToClipboard')"
+									icon="copy"
+								/>
 							</div>
 							<vue-json-pretty
 								v-if="displayCause"
@@ -75,7 +93,9 @@
 								class="json-data"
 							/>
 							<span v-else>
-								<font-awesome-icon icon="info-circle" />{{ $locale.baseText('nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed') }}
+								<font-awesome-icon icon="info-circle" />{{
+									$locale.baseText('nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed')
+								}}
 							</span>
 						</div>
 					</el-card>
@@ -103,43 +123,27 @@ import VueJsonPretty from 'vue-json-pretty';
 import { copyPaste } from '@/mixins/copyPaste';
 import { showMessage } from '@/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
-import {
-	MAX_DISPLAY_DATA_SIZE,
-} from '@/constants';
-import {
-	INodeUi,
-} from '@/Interface';
+import { MAX_DISPLAY_DATA_SIZE } from '@/constants';
+import { INodeUi } from '@/Interface';
 
-import {
-	INodeProperties,
-	INodePropertyCollection,
-	INodePropertyOptions,
-} from 'n8n-workflow';
+import { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 import { sanitizeHtml } from '@/utils';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 
-export default mixins(
-	copyPaste,
-	showMessage,
-).extend({
+export default mixins(copyPaste, showMessage).extend({
 	name: 'NodeErrorView',
-	props: [
-		'error',
-	],
+	props: ['error'],
 	components: {
 		VueJsonPretty,
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore),
 		displayCause(): boolean {
 			return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
 		},
-		parameters (): INodeProperties[] {
+		parameters(): INodeProperties[] {
 			const node = this.ndvStore.activeNode;
 			if (!node) {
 				return [];
@@ -154,20 +158,24 @@ export default mixins(
 		},
 	},
 	methods: {
-		replacePlaceholders (parameter: string, message: string): string {
+		replacePlaceholders(parameter: string, message: string): string {
 			const parameterName = this.parameterDisplayName(parameter, false);
 			const parameterFullName = this.parameterDisplayName(parameter, true);
-			return message.replace(/%%PARAMETER%%/g, parameterName).replace(/%%PARAMETER_FULL%%/g, parameterFullName);
+			return message
+				.replace(/%%PARAMETER%%/g, parameterName)
+				.replace(/%%PARAMETER_FULL%%/g, parameterFullName);
 		},
-		getErrorDescription (): string {
+		getErrorDescription(): string {
 			if (!this.error.context || !this.error.context.descriptionTemplate) {
 				return sanitizeHtml(this.error.description);
 			}
 
 			const parameterName = this.parameterDisplayName(this.error.context.parameter);
-			return sanitizeHtml(this.error.context.descriptionTemplate.replace(/%%PARAMETER%%/g, parameterName));
+			return sanitizeHtml(
+				this.error.context.descriptionTemplate.replace(/%%PARAMETER%%/g, parameterName),
+			);
 		},
-		getErrorMessage (): string {
+		getErrorMessage(): string {
 			const baseErrorMessage = this.$locale.baseText('nodeErrorView.error') + ': ';
 
 			if (!this.error.context || !this.error.context.messageTemplate) {
@@ -176,7 +184,10 @@ export default mixins(
 
 			const parameterName = this.parameterDisplayName(this.error.context.parameter);
 
-			return baseErrorMessage + this.error.context.messageTemplate.replace(/%%PARAMETER%%/g, parameterName);
+			return (
+				baseErrorMessage +
+				this.error.context.messageTemplate.replace(/%%PARAMETER%%/g, parameterName)
+			);
 		},
 		parameterDisplayName(path: string, fullPath = true) {
 			try {
@@ -188,12 +199,15 @@ export default mixins(
 				if (fullPath === false) {
 					return parameters.pop()!.displayName;
 				}
-				return parameters.map(parameter => parameter.displayName).join(' > ');
+				return parameters.map((parameter) => parameter.displayName).join(' > ');
 			} catch (error) {
 				return `Could not find parameter "${path}"`;
 			}
 		},
-		parameterName(parameters: Array<(INodePropertyOptions | INodeProperties | INodePropertyCollection)>, pathParts: string[]): Array<(INodeProperties | INodePropertyCollection)> {
+		parameterName(
+			parameters: Array<INodePropertyOptions | INodeProperties | INodePropertyCollection>,
+			pathParts: string[],
+		): Array<INodeProperties | INodePropertyCollection> {
 			let currentParameterName = pathParts.shift();
 
 			if (currentParameterName === undefined) {
@@ -204,7 +218,9 @@ export default mixins(
 			if (arrayMatch !== null && arrayMatch.length > 0) {
 				currentParameterName = arrayMatch[1];
 			}
-			const currentParameter = parameters.find(parameter => parameter.name === currentParameterName) as unknown as INodeProperties | INodePropertyCollection;
+			const currentParameter = parameters.find(
+				(parameter) => parameter.name === currentParameterName,
+			) as unknown as INodeProperties | INodePropertyCollection;
 
 			if (currentParameter === undefined) {
 				throw new Error(`Could not find parameter "${currentParameterName}"`);
@@ -215,11 +231,17 @@ export default mixins(
 			}
 
 			if (currentParameter.hasOwnProperty('options')) {
-				return [currentParameter, ...this.parameterName((currentParameter as INodeProperties).options!, pathParts)];
+				return [
+					currentParameter,
+					...this.parameterName((currentParameter as INodeProperties).options!, pathParts),
+				];
 			}
 
 			if (currentParameter.hasOwnProperty('values')) {
-				return [currentParameter, ...this.parameterName((currentParameter as INodePropertyCollection).values, pathParts)];
+				return [
+					currentParameter,
+					...this.parameterName((currentParameter as INodePropertyCollection).values, pathParts),
+				];
 			}
 
 			// We can not resolve any deeper so lets stop here and at least return hopefully something useful
@@ -240,7 +262,6 @@ export default mixins(
 </script>
 
 <style lang="scss">
-
 .error-header {
 	margin-bottom: 10px;
 }
@@ -260,7 +281,7 @@ export default mixins(
 	font-weight: 600;
 	font-size: 16px;
 	cursor: pointer;
-	outline:none;
+	outline: none;
 }
 
 .error-details__icon {
@@ -268,15 +289,15 @@ export default mixins(
 }
 
 details > summary {
-    list-style-type: none;
+	list-style-type: none;
 }
 
 details > summary::-webkit-details-marker {
-    display: none;
+	display: none;
 }
 
 details[open] {
-  .error-details__icon {
+	.error-details__icon {
 		transform: rotate(90deg);
 	}
 }
@@ -309,5 +330,4 @@ details[open] {
 	right: 50px;
 	z-index: 1000;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ExecutionTime.vue b/packages/editor-ui/src/components/ExecutionTime.vue
index 1bf6b16a84..955467313b 100644
--- a/packages/editor-ui/src/components/ExecutionTime.vue
+++ b/packages/editor-ui/src/components/ExecutionTime.vue
@@ -1,62 +1,54 @@
 <template>
-		<span>
-			{{time}}
-		</span>
+	<span>
+		{{ time }}
+	</span>
 </template>
 
 <script lang="ts">
-
 import { genericHelpers } from '@/mixins/genericHelpers';
 
 import mixins from 'vue-typed-mixins';
 
-export default mixins(
-	genericHelpers,
-)
-	.extend({
-		name: 'ExecutionTime',
-		props: [
-			'startTime',
-		],
-		computed: {
-			time (): string {
-				if (!this.startTime) {
-					return '...';
-				}
-				const msPassed = this.nowTime - new Date(this.startTime).getTime();
-				return this.displayTimer(msPassed);
-			},
-		},
-		data () {
-			return {
-				nowTime: -1,
-				intervalTimer: null as null | NodeJS.Timeout,
-			};
-		},
-		mounted () {
-			this.setNow();
-			this.intervalTimer = setInterval(() => {
-				this.setNow();
-			}, 1000);
-		},
-		destroyed () {
-			// Make sure that the timer gets destroyed once no longer needed
-			if (this.intervalTimer !== null) {
-				clearInterval(this.intervalTimer);
+export default mixins(genericHelpers).extend({
+	name: 'ExecutionTime',
+	props: ['startTime'],
+	computed: {
+		time(): string {
+			if (!this.startTime) {
+				return '...';
 			}
+			const msPassed = this.nowTime - new Date(this.startTime).getTime();
+			return this.displayTimer(msPassed);
 		},
-		methods: {
-			setNow () {
-				this.nowTime = (new Date()).getTime();
-			},
+	},
+	data() {
+		return {
+			nowTime: -1,
+			intervalTimer: null as null | NodeJS.Timeout,
+		};
+	},
+	mounted() {
+		this.setNow();
+		this.intervalTimer = setInterval(() => {
+			this.setNow();
+		}, 1000);
+	},
+	destroyed() {
+		// Make sure that the timer gets destroyed once no longer needed
+		if (this.intervalTimer !== null) {
+			clearInterval(this.intervalTimer);
+		}
+	},
+	methods: {
+		setNow() {
+			this.nowTime = new Date().getTime();
 		},
-	});
+	},
+});
 </script>
 
 <style lang="scss">
-
 // .data-display-wrapper {
 
 // }
-
 </style>
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index a952fbf5b2..13757c3ad6 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -2,65 +2,108 @@
 	<Modal
 		:name="EXECUTIONS_MODAL_KEY"
 		width="80%"
-		:title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
+		:title="`${$locale.baseText('executionsList.workflowExecutions')} ${
+			combinedExecutions.length
+		}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
 		:eventBus="modalBus"
 	>
 		<template #content>
-
 			<div class="filters">
 				<el-row>
 					<el-col :span="2" class="filter-headline">
 						{{ $locale.baseText('executionsList.filters') }}:
 					</el-col>
 					<el-col :span="7">
-						<n8n-select v-model="filter.workflowId" :placeholder="$locale.baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged">
+						<n8n-select
+							v-model="filter.workflowId"
+							:placeholder="$locale.baseText('executionsList.selectWorkflow')"
+							size="medium"
+							filterable
+							@change="handleFilterChanged"
+						>
 							<div class="ph-no-capture">
 								<n8n-option
 									v-for="item in workflows"
 									:key="item.id"
 									:label="item.name"
-									:value="item.id">
+									:value="item.id"
+								>
 								</n8n-option>
 							</div>
 						</n8n-select>
 					</el-col>
 					<el-col :span="5" :offset="1">
-						<n8n-select v-model="filter.status" :placeholder="$locale.baseText('executionsList.selectStatus')" size="medium" filterable @change="handleFilterChanged">
+						<n8n-select
+							v-model="filter.status"
+							:placeholder="$locale.baseText('executionsList.selectStatus')"
+							size="medium"
+							filterable
+							@change="handleFilterChanged"
+						>
 							<n8n-option
 								v-for="item in statuses"
 								:key="item.id"
 								:label="item.name"
-								:value="item.id">
+								:value="item.id"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 					<el-col :span="4" :offset="5" class="autorefresh">
-						<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">{{ $locale.baseText('executionsList.autoRefresh') }}</el-checkbox>
+						<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">{{
+							$locale.baseText('executionsList.autoRefresh')
+						}}</el-checkbox>
 					</el-col>
 				</el-row>
 			</div>
 
 			<div class="selection-options">
 				<span v-if="checkAll === true || isIndeterminate === true">
-					{{ $locale.baseText('executionsList.selected') }}: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
-					<n8n-icon-button :title="$locale.baseText('executionsList.deleteSelected')" icon="trash" size="mini" @click="handleDeleteSelected" />
+					{{ $locale.baseText('executionsList.selected') }}: {{ numSelected }} /
+					<span v-if="finishedExecutionsCountEstimated === true">~</span
+					>{{ finishedExecutionsCount }}
+					<n8n-icon-button
+						:title="$locale.baseText('executionsList.deleteSelected')"
+						icon="trash"
+						size="mini"
+						@click="handleDeleteSelected"
+					/>
 				</span>
 			</div>
 
-			<el-table :data="combinedExecutions" stripe v-loading="isDataLoading" :row-class-name="getRowClass">
+			<el-table
+				:data="combinedExecutions"
+				stripe
+				v-loading="isDataLoading"
+				:row-class-name="getRowClass"
+			>
 				<el-table-column label="" width="30">
 					<!-- eslint-disable-next-line vue/no-unused-vars -->
-					<template #header="scope" >
-						<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" label=" "></el-checkbox>
+					<template #header="scope">
+						<el-checkbox
+							:indeterminate="isIndeterminate"
+							v-model="checkAll"
+							@change="handleCheckAllChange"
+							label=" "
+						></el-checkbox>
 					</template>
 					<template #default="scope">
-						<el-checkbox v-if="scope.row.stoppedAt !== undefined && scope.row.id" :value="selectedItems[scope.row.id.toString()] || checkAll" @change="handleCheckboxChanged(scope.row.id)" label=" "></el-checkbox>
+						<el-checkbox
+							v-if="scope.row.stoppedAt !== undefined && scope.row.id"
+							:value="selectedItems[scope.row.id.toString()] || checkAll"
+							@change="handleCheckboxChanged(scope.row.id)"
+							label=" "
+						></el-checkbox>
 					</template>
 				</el-table-column>
-				<el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205">
+				<el-table-column
+					property="startedAt"
+					:label="$locale.baseText('executionsList.startedAtId')"
+					width="205"
+				>
 					<template #default="scope">
-						{{convertToDisplayDate(scope.row.startedAt)}}<br />
-						<small v-if="scope.row.id">ID: {{scope.row.id}}</small>
+						{{ convertToDisplayDate(scope.row.startedAt) }}<br />
+						<small v-if="scope.row.id">ID: {{ scope.row.id }}</small>
 					</template>
 				</el-table-column>
 				<el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
@@ -75,16 +118,26 @@
 							({{ $locale.baseText('executionsList.running') }})
 						</span>
 						<span v-if="scope.row.retryOf !== undefined">
-							<br /><small>{{ $locale.baseText('executionsList.retryOf') }} "{{scope.row.retryOf}}"</small>
+							<br /><small
+								>{{ $locale.baseText('executionsList.retryOf') }} "{{ scope.row.retryOf }}"</small
+							>
 						</span>
 						<span v-else-if="scope.row.retrySuccessId !== undefined">
-							<br /><small>{{ $locale.baseText('executionsList.successRetry') }} "{{scope.row.retrySuccessId}}"</small>
+							<br /><small
+								>{{ $locale.baseText('executionsList.successRetry') }} "{{
+									scope.row.retrySuccessId
+								}}"</small
+							>
 						</span>
 					</template>
 				</el-table-column>
-				<el-table-column :label="$locale.baseText('executionsList.status')" width="122" align="center">
+				<el-table-column
+					:label="$locale.baseText('executionsList.status')"
+					width="122"
+					align="center"
+				>
 					<template #default="scope" align="center">
-						<n8n-tooltip placement="top" >
+						<n8n-tooltip placement="top">
 							<template #content>
 								<div v-html="statusTooltipText(scope.row)"></div>
 							</template>
@@ -108,8 +161,14 @@
 						<el-dropdown trigger="click" @command="handleRetryClick">
 							<span class="retry-button">
 								<n8n-icon-button
-									v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
-									:type="scope.row.stoppedAt === null ? 'warning': 'danger'"
+									v-if="
+										scope.row.stoppedAt !== undefined &&
+										!scope.row.finished &&
+										scope.row.retryOf === undefined &&
+										scope.row.retrySuccessId === undefined &&
+										!scope.row.waitTill
+									"
+									:type="scope.row.stoppedAt === null ? 'warning' : 'danger'"
 									class="ml-3xs"
 									size="mini"
 									:title="$locale.baseText('executionsList.retryExecution')"
@@ -118,35 +177,46 @@
 							</span>
 							<template #dropdown>
 								<el-dropdown-menu>
-									<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
+									<el-dropdown-item :command="{ command: 'currentlySaved', row: scope.row }">
 										{{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
 									</el-dropdown-item>
-									<el-dropdown-item :command="{command: 'original', row: scope.row}">
+									<el-dropdown-item :command="{ command: 'original', row: scope.row }">
 										{{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
 									</el-dropdown-item>
 								</el-dropdown-menu>
 							</template>
 						</el-dropdown>
-
 					</template>
 				</el-table-column>
-				<el-table-column property="mode" :label="$locale.baseText('executionsList.mode')" width="100" align="center">
+				<el-table-column
+					property="mode"
+					:label="$locale.baseText('executionsList.mode')"
+					width="100"
+					align="center"
+				>
 					<template #default="scope">
 						{{ $locale.baseText(`executionsList.modes.${scope.row.mode}`) }}
 					</template>
 				</el-table-column>
-				<el-table-column :label="$locale.baseText('executionsList.runningTime')" width="150" align="center">
+				<el-table-column
+					:label="$locale.baseText('executionsList.runningTime')"
+					width="150"
+					align="center"
+				>
 					<template #default="scope">
 						<span v-if="scope.row.stoppedAt === undefined">
 							<font-awesome-icon icon="spinner" spin />
-							<execution-time :start-time="scope.row.startedAt"/>
+							<execution-time :start-time="scope.row.startedAt" />
 						</span>
 						<!-- stoppedAt will be null if process crashed -->
-						<span v-else-if="scope.row.stoppedAt === null">
-							--
-						</span>
+						<span v-else-if="scope.row.stoppedAt === null"> -- </span>
 						<span v-else>
-							{{ displayTimer(new Date(scope.row.stoppedAt).getTime() - new Date(scope.row.startedAt).getTime(), true) }}
+							{{
+								displayTimer(
+									new Date(scope.row.stoppedAt).getTime() - new Date(scope.row.startedAt).getTime(),
+									true,
+								)
+							}}
 						</span>
 					</template>
 				</el-table-column>
@@ -154,18 +224,41 @@
 					<template #default="scope">
 						<div class="actions-container">
 							<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
-								<n8n-icon-button icon="stop" size="small" :title="$locale.baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
+								<n8n-icon-button
+									icon="stop"
+									size="small"
+									:title="$locale.baseText('executionsList.stopExecution')"
+									@click.stop="stopExecution(scope.row.id)"
+									:loading="stoppingExecutions.includes(scope.row.id)"
+								/>
 							</span>
-							<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" >
-								<n8n-icon-button icon="folder-open" size="small" :title="$locale.baseText('executionsList.openPastExecution')" @click.stop="(e) => displayExecution(scope.row, e)" />
+							<span v-if="scope.row.stoppedAt !== undefined && scope.row.id">
+								<n8n-icon-button
+									icon="folder-open"
+									size="small"
+									:title="$locale.baseText('executionsList.openPastExecution')"
+									@click.stop="(e) => displayExecution(scope.row, e)"
+								/>
 							</span>
 						</div>
 					</template>
 				</el-table-column>
 			</el-table>
 
-			<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
-				<n8n-button icon="sync" :title="$locale.baseText('executionsList.loadMore')" :label="$locale.baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" />
+			<div
+				class="load-more"
+				v-if="
+					finishedExecutionsCount > finishedExecutions.length ||
+					finishedExecutionsCountEstimated === true
+				"
+			>
+				<n8n-button
+					icon="sync"
+					:title="$locale.baseText('executionsList.loadMore')"
+					:label="$locale.baseText('executionsList.loadMore')"
+					@click="loadMore()"
+					:loading="isDataLoading"
+				/>
 			</div>
 		</template>
 	</Modal>
@@ -194,36 +287,25 @@ import {
 	IWorkflowShortResponse,
 } from '@/Interface';
 
-import {
-	convertToDisplayDate,
-} from '@/utils';
+import { convertToDisplayDate } from '@/utils';
 
-import {
-	IDataObject,
-} from 'n8n-workflow';
+import { IDataObject } from 'n8n-workflow';
 
-import {
-	range as _range,
-} from 'lodash';
+import { range as _range } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	restApi,
-	showMessage,
-).extend({
+export default mixins(externalHooks, genericHelpers, restApi, showMessage).extend({
 	name: 'ExecutionsList',
 	components: {
 		ExecutionTime,
 		WorkflowActivator,
 		Modal,
 	},
-	data () {
+	data() {
 		return {
 			finishedExecutions: [] as IExecutionsSummary[],
 			finishedExecutionsCount: 0,
@@ -242,7 +324,7 @@ export default mixins(
 
 			requestItemsPerRequest: 10,
 
-			selectedItems: {} as { [key: string]: boolean; },
+			selectedItems: {} as { [key: string]: boolean },
 
 			stoppingExecutions: [] as string[],
 			workflows: [] as IWorkflowShortResponse[],
@@ -256,7 +338,9 @@ export default mixins(
 		this.handleAutoRefreshToggle();
 
 		this.$externalHooks().run('executionsList.openDialog');
-		this.$telemetry.track('User opened Executions log', { workflow_id: this.workflowsStore.workflowId });
+		this.$telemetry.track('User opened Executions log', {
+			workflow_id: this.workflowsStore.workflowId,
+		});
 	},
 	beforeDestroy() {
 		if (this.autoRefreshInterval) {
@@ -265,11 +349,8 @@ export default mixins(
 		}
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-			useWorkflowsStore,
-		),
-		statuses () {
+		...mapStores(useUIStore, useWorkflowsStore),
+		statuses() {
 			return [
 				{
 					id: 'ALL',
@@ -293,10 +374,10 @@ export default mixins(
 				},
 			];
 		},
-		activeExecutions (): IExecutionsCurrentSummaryExtended[] {
+		activeExecutions(): IExecutionsCurrentSummaryExtended[] {
 			return this.workflowsStore.activeExecutions;
 		},
-		combinedExecutions (): IExecutionsSummary[] {
+		combinedExecutions(): IExecutionsSummary[] {
 			const returnData: IExecutionsSummary[] = [];
 
 			if (['ALL', 'running'].includes(this.filter.status)) {
@@ -308,17 +389,17 @@ export default mixins(
 
 			return returnData;
 		},
-		combinedExecutionsCount (): number {
+		combinedExecutionsCount(): number {
 			return 0 + this.activeExecutions.length + this.finishedExecutionsCount;
 		},
-		numSelected (): number {
+		numSelected(): number {
 			if (this.checkAll === true) {
 				return this.finishedExecutionsCount;
 			}
 
 			return Object.keys(this.selectedItems).length;
 		},
-		isIndeterminate (): boolean {
+		isIndeterminate(): boolean {
 			if (this.checkAll === true) {
 				return false;
 			}
@@ -328,14 +409,14 @@ export default mixins(
 			}
 			return false;
 		},
-		workflowFilterCurrent (): IDataObject {
+		workflowFilterCurrent(): IDataObject {
 			const filter: IDataObject = {};
 			if (this.filter.workflowId !== 'ALL') {
 				filter.workflowId = this.filter.workflowId;
 			}
 			return filter;
 		},
-		workflowFilterPast (): IDataObject {
+		workflowFilterPast(): IDataObject {
 			const filter: IDataObject = {};
 			if (this.filter.workflowId !== 'ALL') {
 				filter.workflowId = this.filter.workflowId;
@@ -353,47 +434,53 @@ export default mixins(
 			this.modalBus.$emit('close');
 		},
 		convertToDisplayDate,
-		displayExecution (execution: IExecutionShortResponse, e: PointerEvent) {
+		displayExecution(execution: IExecutionShortResponse, e: PointerEvent) {
 			if (e.metaKey || e.ctrlKey) {
-				const route = this.$router.resolve({ name: VIEWS.EXECUTION_PREVIEW, params: { name: execution.workflowId, executionId: execution.id } });
+				const route = this.$router.resolve({
+					name: VIEWS.EXECUTION_PREVIEW,
+					params: { name: execution.workflowId, executionId: execution.id },
+				});
 				window.open(route.href, '_blank');
 
 				return;
 			}
 
-			this.$router.push({ name: VIEWS.EXECUTION_PREVIEW, params: { name: execution.workflowId, executionId: execution.id } }).catch(()=>{});;
+			this.$router
+				.push({
+					name: VIEWS.EXECUTION_PREVIEW,
+					params: { name: execution.workflowId, executionId: execution.id },
+				})
+				.catch(() => {});
 			this.modalBus.$emit('closeAll');
 		},
-		handleAutoRefreshToggle () {
+		handleAutoRefreshToggle() {
 			if (this.autoRefreshInterval) {
 				// Clear any previously existing intervals (if any - there shouldn't)
 				clearInterval(this.autoRefreshInterval);
 				this.autoRefreshInterval = undefined;
 			}
 
-
 			if (this.autoRefresh) {
 				this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
 			}
 		},
-		handleCheckAllChange () {
+		handleCheckAllChange() {
 			if (this.checkAll === false) {
 				Vue.set(this, 'selectedItems', {});
 			}
 		},
-		handleCheckboxChanged (executionId: string) {
+		handleCheckboxChanged(executionId: string) {
 			if (this.selectedItems[executionId]) {
 				Vue.delete(this.selectedItems, executionId);
 			} else {
 				Vue.set(this.selectedItems, executionId, true);
 			}
 		},
-		async handleDeleteSelected () {
+		async handleDeleteSelected() {
 			const deleteExecutions = await this.confirmMessage(
-				this.$locale.baseText(
-					'executionsList.confirmMessage.message',
-					{ interpolate: { numSelected: this.numSelected.toString() }},
-				),
+				this.$locale.baseText('executionsList.confirmMessage.message', {
+					interpolate: { numSelected: this.numSelected.toString() },
+				}),
 				this.$locale.baseText('executionsList.confirmMessage.headline'),
 				'warning',
 				this.$locale.baseText('executionsList.confirmMessage.confirmButtonText'),
@@ -420,31 +507,40 @@ export default mixins(
 				let removedCurrentlyLoadedExecution = false;
 				let removedActiveExecution = false;
 				const currentWorkflow: string = this.workflowsStore.workflowId;
-				const activeExecution: IExecutionsSummary | null = this.workflowsStore.activeWorkflowExecution;
+				const activeExecution: IExecutionsSummary | null =
+					this.workflowsStore.activeWorkflowExecution;
 				// Also update current workflow executions view if needed
 				for (const selectedId of Object.keys(this.selectedItems)) {
-					const execution: IExecutionsSummary | undefined = this.workflowsStore.getExecutionDataById(selectedId);
+					const execution: IExecutionsSummary | undefined =
+						this.workflowsStore.getExecutionDataById(selectedId);
 					if (execution && execution.workflowId === currentWorkflow) {
 						this.workflowsStore.deleteExecution(execution);
 						removedCurrentlyLoadedExecution = true;
 					}
-					if ((execution !== undefined && activeExecution !== null) && execution.id === activeExecution.id) {
+					if (
+						execution !== undefined &&
+						activeExecution !== null &&
+						execution.id === activeExecution.id
+					) {
 						removedActiveExecution = true;
 					}
 				}
 				// Also update route if needed
 				if (removedCurrentlyLoadedExecution) {
-					const currentWorkflowExecutions: IExecutionsSummary[] = this.workflowsStore.currentWorkflowExecutions;
+					const currentWorkflowExecutions: IExecutionsSummary[] =
+						this.workflowsStore.currentWorkflowExecutions;
 					if (currentWorkflowExecutions.length === 0) {
 						this.workflowsStore.activeWorkflowExecution = null;
 
 						this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } });
 					} else if (removedActiveExecution) {
 						this.workflowsStore.activeWorkflowExecution = currentWorkflowExecutions[0];
-						this.$router.push({
-							name: VIEWS.EXECUTION_PREVIEW,
-							params: { name: currentWorkflow, executionId: currentWorkflowExecutions[0].id },
-						}).catch(()=>{});;
+						this.$router
+							.push({
+								name: VIEWS.EXECUTION_PREVIEW,
+								params: { name: currentWorkflow, executionId: currentWorkflowExecutions[0].id },
+							})
+							.catch(() => {});
 					}
 				}
 			} catch (error) {
@@ -468,10 +564,10 @@ export default mixins(
 
 			this.refreshData();
 		},
-		handleFilterChanged () {
+		handleFilterChanged() {
 			this.refreshData();
 		},
-		handleRetryClick (commandData: { command: string, row: IExecutionShortResponse }) {
+		handleRetryClick(commandData: { command: string; row: IExecutionShortResponse }) {
 			let loadWorkflow = false;
 			if (commandData.command === 'currentlySaved') {
 				loadWorkflow = true;
@@ -485,7 +581,7 @@ export default mixins(
 				retry_type: loadWorkflow ? 'current' : 'original',
 			});
 		},
-		getRowClass (data: IDataObject): string {
+		getRowClass(data: IDataObject): string {
 			const classes: string[] = [];
 			if ((data.row as IExecutionsSummary).stoppedAt === undefined) {
 				classes.push('currently-running');
@@ -493,7 +589,7 @@ export default mixins(
 
 			return classes.join(' ');
 		},
-		getWorkflowName (workflowId: string): string | undefined {
+		getWorkflowName(workflowId: string): string | undefined {
 			const workflow = this.workflows.find((data) => data.id === workflowId);
 			if (workflow === undefined) {
 				return undefined;
@@ -501,30 +597,40 @@ export default mixins(
 
 			return workflow.name;
 		},
-		async loadActiveExecutions (): Promise<void> {
-			const activeExecutions = await this.restApi().getCurrentExecutions(this.workflowFilterCurrent);
+		async loadActiveExecutions(): Promise<void> {
+			const activeExecutions = await this.restApi().getCurrentExecutions(
+				this.workflowFilterCurrent,
+			);
 			for (const activeExecution of activeExecutions) {
-				if (activeExecution.workflowId !== undefined && activeExecution.workflowName === undefined) {
+				if (
+					activeExecution.workflowId !== undefined &&
+					activeExecution.workflowName === undefined
+				) {
 					activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
 				}
 			}
 
 			this.workflowsStore.activeExecutions = activeExecutions;
 		},
-		async loadAutoRefresh () : Promise<void> {
+		async loadAutoRefresh(): Promise<void> {
 			const filter = this.workflowFilterPast;
 			// We cannot use firstId here as some executions finish out of order. Let's say
 			// You have execution ids 500 to 505 running.
 			// Suppose 504 finishes before 500, 501, 502 and 503.
 			// iF you use firstId, filtering id >= 504 you won't
 			// ever get ids 500, 501, 502 and 503 when they finish
-			const pastExecutionsPromise: Promise<IExecutionsListResponse> = this.restApi().getPastExecutions(filter, 30);
-			const currentExecutionsPromise: Promise<IExecutionsCurrentSummaryExtended[]> = this.restApi().getCurrentExecutions({});
+			const pastExecutionsPromise: Promise<IExecutionsListResponse> =
+				this.restApi().getPastExecutions(filter, 30);
+			const currentExecutionsPromise: Promise<IExecutionsCurrentSummaryExtended[]> =
+				this.restApi().getCurrentExecutions({});
 
 			const results = await Promise.all([pastExecutionsPromise, currentExecutionsPromise]);
 
 			for (const activeExecution of results[1]) {
-				if (activeExecution.workflowId !== undefined && activeExecution.workflowName === undefined) {
+				if (
+					activeExecution.workflowId !== undefined &&
+					activeExecution.workflowName === undefined
+				) {
 					activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
 				}
 			}
@@ -532,10 +638,12 @@ export default mixins(
 			this.workflowsStore.activeExecutions = results[1];
 
 			// execution IDs are typed as string, int conversion is necessary so we can order.
-			const alreadyPresentExecutionIds = this.finishedExecutions.map(exec => parseInt(exec.id, 10));
+			const alreadyPresentExecutionIds = this.finishedExecutions.map((exec) =>
+				parseInt(exec.id, 10),
+			);
 			let lastId = 0;
 			const gaps = [] as number[];
-			for(let i = results[0].results.length - 1; i >= 0; i--) {
+			for (let i = results[0].results.length - 1; i >= 0; i--) {
 				const currentItem = results[0].results[i];
 				const currentId = parseInt(currentItem.id, 10);
 				if (lastId !== 0 && isNaN(currentId) === false) {
@@ -557,7 +665,10 @@ export default mixins(
 				if (executionIndex !== -1) {
 					// Execution that we received is already present.
 
-					if (this.finishedExecutions[executionIndex].finished === false && currentItem.finished === true) {
+					if (
+						this.finishedExecutions[executionIndex].finished === false &&
+						currentItem.finished === true
+					) {
 						// Concurrency stuff. This might happen if the execution finishes
 						// prior to saving all information to database. Somewhat rare but
 						// With auto refresh and several executions, it happens sometimes.
@@ -580,23 +691,29 @@ export default mixins(
 					this.finishedExecutions.unshift(currentItem);
 				}
 			}
-			this.finishedExecutions = this.finishedExecutions.filter(execution => !gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10));
+			this.finishedExecutions = this.finishedExecutions.filter(
+				(execution) =>
+					!gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10),
+			);
 			this.finishedExecutionsCount = results[0].count;
 			this.finishedExecutionsCountEstimated = results[0].estimated;
 		},
-		async loadFinishedExecutions (): Promise<void> {
+		async loadFinishedExecutions(): Promise<void> {
 			if (this.filter.status === 'running') {
 				this.finishedExecutions = [];
 				this.finishedExecutionsCount = 0;
 				this.finishedExecutionsCountEstimated = false;
 				return;
 			}
-			const data = await this.restApi().getPastExecutions(this.workflowFilterPast, this.requestItemsPerRequest);
+			const data = await this.restApi().getPastExecutions(
+				this.workflowFilterPast,
+				this.requestItemsPerRequest,
+			);
 			this.finishedExecutions = data.results;
 			this.finishedExecutionsCount = data.count;
 			this.finishedExecutionsCountEstimated = data.estimated;
 		},
-		async loadMore () {
+		async loadMore() {
 			if (this.filter.status === 'running') {
 				return;
 			}
@@ -616,10 +733,7 @@ export default mixins(
 				data = await this.restApi().getPastExecutions(filter, this.requestItemsPerRequest, lastId);
 			} catch (error) {
 				this.isDataLoading = false;
-				this.$showError(
-					error,
-					this.$locale.baseText('executionsList.showError.loadMore.title'),
-				);
+				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
 				return;
 			}
 
@@ -634,7 +748,7 @@ export default mixins(
 
 			this.isDataLoading = false;
 		},
-		async loadWorkflows () {
+		async loadWorkflows() {
 			try {
 				const workflows = await this.restApi().getWorkflows();
 				workflows.sort((a, b) => {
@@ -661,7 +775,7 @@ export default mixins(
 				);
 			}
 		},
-		async retryExecution (execution: IExecutionShortResponse, loadWorkflow?: boolean) {
+		async retryExecution(execution: IExecutionShortResponse, loadWorkflow?: boolean) {
 			this.isDataLoading = true;
 
 			try {
@@ -689,7 +803,7 @@ export default mixins(
 				this.isDataLoading = false;
 			}
 		},
-		async refreshData () {
+		async refreshData() {
 			this.isDataLoading = true;
 
 			try {
@@ -697,56 +811,58 @@ export default mixins(
 				const finishedExecutionsPromise = this.loadFinishedExecutions();
 				await Promise.all([activeExecutionsPromise, finishedExecutionsPromise]);
 			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('executionsList.showError.refreshData.title'),
-				);
+				this.$showError(error, this.$locale.baseText('executionsList.showError.refreshData.title'));
 			}
 
 			this.isDataLoading = false;
 		},
-		statusTooltipText (entry: IExecutionsSummary): string {
+		statusTooltipText(entry: IExecutionsSummary): string {
 			if (entry.waitTill) {
 				const waitDate = new Date(entry.waitTill);
 				if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
-					return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely');
+					return this.$locale.baseText(
+						'executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely',
+					);
 				}
 
-				return this.$locale.baseText(
-					'executionsList.statusTooltipText.theWorkflowIsWaitingTill',
-					{
-						interpolate: {
-							waitDateDate: waitDate.toLocaleDateString(),
-							waitDateTime: waitDate.toLocaleTimeString(),
-						},
+				return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowIsWaitingTill', {
+					interpolate: {
+						waitDateDate: waitDate.toLocaleDateString(),
+						waitDateTime: waitDate.toLocaleTimeString(),
 					},
-				);
+				});
 			} else if (entry.stoppedAt === undefined) {
-				return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowIsCurrentlyExecuting');
+				return this.$locale.baseText(
+					'executionsList.statusTooltipText.theWorkflowIsCurrentlyExecuting',
+				);
 			} else if (entry.finished === true && entry.retryOf !== undefined) {
 				return this.$locale.baseText(
 					'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndItWasSuccessful',
-					{ interpolate: { entryRetryOf: entry.retryOf }},
+					{ interpolate: { entryRetryOf: entry.retryOf } },
 				);
 			} else if (entry.finished === true) {
-				return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionWasSuccessful');
+				return this.$locale.baseText(
+					'executionsList.statusTooltipText.theWorkflowExecutionWasSuccessful',
+				);
 			} else if (entry.retryOf !== undefined) {
 				return this.$locale.baseText(
 					'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndFailed',
-					{ interpolate: { entryRetryOf: entry.retryOf }},
+					{ interpolate: { entryRetryOf: entry.retryOf } },
 				);
 			} else if (entry.retrySuccessId !== undefined) {
 				return this.$locale.baseText(
 					'executionsList.statusTooltipText.theWorkflowExecutionFailedButTheRetryWasSuccessful',
-					{ interpolate: { entryRetrySuccessId: entry.retrySuccessId }},
+					{ interpolate: { entryRetrySuccessId: entry.retrySuccessId } },
 				);
 			} else if (entry.stoppedAt === null) {
-				return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionIsProbablyStillRunning');
+				return this.$locale.baseText(
+					'executionsList.statusTooltipText.theWorkflowExecutionIsProbablyStillRunning',
+				);
 			} else {
 				return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionFailed');
 			}
 		},
-		async stopExecution (activeExecutionId: string) {
+		async stopExecution(activeExecutionId: string) {
 			try {
 				// Add it to the list of currently stopping executions that we
 				// can show the user in the UI that it is in progress
@@ -760,10 +876,9 @@ export default mixins(
 
 				this.$showMessage({
 					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
-					message: this.$locale.baseText(
-						'executionsList.showMessage.stopExecution.message',
-						{ interpolate: { activeExecutionId } },
-					),
+					message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
+						interpolate: { activeExecutionId },
+					}),
 					type: 'success',
 				});
 
@@ -780,7 +895,6 @@ export default mixins(
 </script>
 
 <style scoped lang="scss">
-
 .autorefresh {
 	padding-right: 0.5em;
 	text-align: right;
@@ -829,7 +943,8 @@ export default mixins(
 		color: var(--color-success);
 	}
 
-	&.running, &.warning {
+	&.running,
+	&.warning {
 		background-color: var(--color-warning-tint-2);
 		color: var(--color-warning);
 	}
@@ -842,11 +957,9 @@ export default mixins(
 .actions-container > * {
 	margin-left: 5px;
 }
-
 </style>
 
 <style lang="scss">
-
 .currently-running {
 	background-color: var(--color-primary-tint-3) !important;
 }
@@ -854,5 +967,4 @@ export default mixins(
 .el-table tr:hover.currently-running td {
 	background-color: var(--color-primary-tint-2) !important;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index a2a596a193..938eb99d13 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -10,23 +10,48 @@
 	>
 		<router-link
 			:class="$style.executionLink"
-			:to="{ name: VIEWS.EXECUTION_PREVIEW, params: { workflowId: currentWorkflow, executionId: execution.id }}"
+			:to="{
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: { workflowId: currentWorkflow, executionId: execution.id },
+			}"
 		>
 			<div :class="$style.description">
-				<n8n-text color="text-dark" :bold="true" size="medium">{{ executionUIDetails.startTime }}</n8n-text>
+				<n8n-text color="text-dark" :bold="true" size="medium">{{
+					executionUIDetails.startTime
+				}}</n8n-text>
 				<div :class="$style.executionStatus">
-					<n8n-spinner v-if="executionUIDetails.name === 'running'" size="small" :class="[$style.spinner, 'mr-4xs']"/>
-					<n8n-text :class="$style.statusLabel" size="small">{{ executionUIDetails.label }}</n8n-text>
-					<n8n-text v-if="executionUIDetails.name === 'running'" :color="isActive? 'text-dark' : 'text-base'" size="small">
+					<n8n-spinner
+						v-if="executionUIDetails.name === 'running'"
+						size="small"
+						:class="[$style.spinner, 'mr-4xs']"
+					/>
+					<n8n-text :class="$style.statusLabel" size="small">{{
+						executionUIDetails.label
+					}}</n8n-text>
+					<n8n-text
+						v-if="executionUIDetails.name === 'running'"
+						:color="isActive ? 'text-dark' : 'text-base'"
+						size="small"
+					>
 						{{ $locale.baseText('executionDetails.runningTimeRunning') }}
-						<execution-time :start-time="execution.startedAt"/>
+						<execution-time :start-time="execution.startedAt" />
 					</n8n-text>
-					<n8n-text v-else-if="executionUIDetails.name !== 'waiting' && executionUIDetails.name !== 'unknown'" :color="isActive? 'text-dark' : 'text-base'" size="small">
-						{{ $locale.baseText('executionDetails.runningTimeFinished', { interpolate: { time: executionUIDetails.runningTime } }) }}
+					<n8n-text
+						v-else-if="
+							executionUIDetails.name !== 'waiting' && executionUIDetails.name !== 'unknown'
+						"
+						:color="isActive ? 'text-dark' : 'text-base'"
+						size="small"
+					>
+						{{
+							$locale.baseText('executionDetails.runningTimeFinished', {
+								interpolate: { time: executionUIDetails.runningTime },
+							})
+						}}
 					</n8n-text>
 				</div>
 				<div v-if="execution.mode === 'retry'">
-					<n8n-text :color="isActive? 'text-dark' : 'text-base'" size="small">
+					<n8n-text :color="isActive ? 'text-dark' : 'text-base'" size="small">
 						{{ $locale.baseText('executionDetails.retry') }} #{{ execution.retryOf }}
 					</n8n-text>
 				</div>
@@ -44,7 +69,7 @@
 					:class="[$style.icon, $style.manual]"
 					:title="$locale.baseText('executionsList.manual')"
 					icon="flask"
-					/>
+				/>
 			</div>
 		</router-link>
 	</div>
@@ -59,11 +84,7 @@ import { showMessage } from '@/mixins/showMessage';
 import { restApi } from '@/mixins/restApi';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
-export default mixins(
-	executionHelpers,
-	showMessage,
-	restApi,
-).extend({
+export default mixins(executionHelpers, showMessage, restApi).extend({
 	name: 'execution-card',
 	components: {
 		ExecutionTime,
@@ -86,8 +107,14 @@ export default mixins(
 	computed: {
 		retryExecutionActions(): object[] {
 			return [
-				{ id: 'current-workflow', label: this.$locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') },
-				{ id: 'original-workflow', label: this.$locale.baseText('executionsList.retryWithOriginalWorkflow') },
+				{
+					id: 'current-workflow',
+					label: this.$locale.baseText('executionsList.retryWithCurrentlySavedWorkflow'),
+				},
+				{
+					id: 'original-workflow',
+					label: this.$locale.baseText('executionsList.retryWithOriginalWorkflow'),
+				},
 			];
 		},
 		executionUIDetails(): IExecutionUIData {
@@ -119,9 +146,12 @@ export default mixins(
 		}
 	}
 
-	& + &.active { padding-top: var(--spacing-2xs); }
+	& + &.active {
+		padding-top: var(--spacing-2xs);
+	}
 
-	&:hover, &.active {
+	&:hover,
+	&.active {
 		.executionLink {
 			background-color: var(--color-foreground-base);
 		}
@@ -132,34 +162,47 @@ export default mixins(
 			position: relative;
 			top: 1px;
 		}
-		&, & .executionLink {
+		&,
+		& .executionLink {
 			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-warning-h), 94%, 80%);
 		}
-		.statusLabel, .spinner { color: var(--color-warning); }
+		.statusLabel,
+		.spinner {
+			color: var(--color-warning);
+		}
 	}
 
 	&.success {
-		&, & .executionLink {
+		&,
+		& .executionLink {
 			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-success-h), 60%, 70%);
 		}
 	}
 
 	&.waiting {
-		&, & .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-secondary-h), 94%, 80%);
+		&,
+		& .executionLink {
+			border-left: var(--spacing-4xs) var(--border-style-base)
+				hsl(var(--color-secondary-h), 94%, 80%);
+		}
+		.statusLabel {
+			color: var(--color-secondary);
 		}
-		.statusLabel { color: var(--color-secondary); }
 	}
 
 	&.error {
-		&, & .executionLink {
+		&,
+		& .executionLink {
 			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-danger-h), 94%, 80%);
 		}
-		.statusLabel { color: var(--color-danger ); }
+		.statusLabel {
+			color: var(--color-danger);
+		}
 	}
 
 	&.unknown {
-		&, & .executionLink {
+		&,
+		& .executionLink {
 			border-left: var(--spacing-4xs) var(--border-style-base) var(--color-text-light);
 		}
 	}
@@ -176,11 +219,14 @@ export default mixins(
 	padding-right: var(--spacing-s);
 	border-radius: var(--border-radius-base);
 	position: relative;
-	left: calc(-1 * var(--spacing-4xs)); // Hide link border under card border so it's not visible when not hovered
+	left: calc(
+		-1 * var(--spacing-4xs)
+	); // Hide link border under card border so it's not visible when not hovered
 
 	&:active {
-		.icon, .statusLabel {
-			color: var(--color-text-base);;
+		.icon,
+		.statusLabel {
+			color: var(--color-text-base);
 		}
 	}
 }
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 16fe0ac1ef..4d2c118c1b 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -1,5 +1,8 @@
 <template>
-	<div v-if="executionUIDetails && executionUIDetails.name === 'running'" :class="$style.runningInfo">
+	<div
+		v-if="executionUIDetails && executionUIDetails.name === 'running'"
+		:class="$style.runningInfo"
+	>
 		<div :class="$style.spinner">
 			<n8n-spinner type="ring" />
 		</div>
@@ -11,32 +14,66 @@
 		</n8n-button>
 	</div>
 	<div v-else :class="$style.previewContainer">
-		<div :class="{[$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }" v-if="activeExecution">
+		<div
+			:class="{ [$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }"
+			v-if="activeExecution"
+		>
 			<div>
-				<n8n-text size="large" color="text-base" :bold="true">{{ executionUIDetails.startTime }}</n8n-text><br>
-				<n8n-spinner v-if="executionUIDetails.name === 'running'" size="small" :class="[$style.spinner, 'mr-4xs']"/>
-				<n8n-text size="medium" :class="[$style.status, $style[executionUIDetails.name]]">{{ executionUIDetails.label }}</n8n-text>
+				<n8n-text size="large" color="text-base" :bold="true">{{
+					executionUIDetails.startTime
+				}}</n8n-text
+				><br />
+				<n8n-spinner
+					v-if="executionUIDetails.name === 'running'"
+					size="small"
+					:class="[$style.spinner, 'mr-4xs']"
+				/>
+				<n8n-text size="medium" :class="[$style.status, $style[executionUIDetails.name]]">{{
+					executionUIDetails.label
+				}}</n8n-text>
 				<n8n-text v-if="executionUIDetails.name === 'running'" color="text-base" size="medium">
-					{{ $locale.baseText('executionDetails.runningTimeRunning', { interpolate: { time: executionUIDetails.runningTime } }) }} | ID#{{ activeExecution.id }}
+					{{
+						$locale.baseText('executionDetails.runningTimeRunning', {
+							interpolate: { time: executionUIDetails.runningTime },
+						})
+					}}
+					| ID#{{ activeExecution.id }}
 				</n8n-text>
 				<n8n-text v-else-if="executionUIDetails.name !== 'waiting'" color="text-base" size="medium">
-					{{ $locale.baseText('executionDetails.runningTimeFinished', { interpolate: { time: executionUIDetails.runningTime } }) }} | ID#{{ activeExecution.id }}
+					{{
+						$locale.baseText('executionDetails.runningTimeFinished', {
+							interpolate: { time: executionUIDetails.runningTime },
+						})
+					}}
+					| ID#{{ activeExecution.id }}
 				</n8n-text>
 				<n8n-text v-else-if="executionUIDetails.name === 'waiting'" color="text-base" size="medium">
 					| ID#{{ activeExecution.id }}
 				</n8n-text>
-				<br><n8n-text v-if="activeExecution.mode === 'retry'" color="text-base" size= "medium">
+				<br /><n8n-text v-if="activeExecution.mode === 'retry'" color="text-base" size="medium">
 					{{ $locale.baseText('executionDetails.retry') }}
 					<router-link
 						:class="$style.executionLink"
-						:to="{ name: VIEWS.EXECUTION_PREVIEW, params: { workflowId: activeExecution.workflowId, executionId: activeExecution.retryOf }}"
+						:to="{
+							name: VIEWS.EXECUTION_PREVIEW,
+							params: {
+								workflowId: activeExecution.workflowId,
+								executionId: activeExecution.retryOf,
+							},
+						}"
 					>
 						#{{ activeExecution.retryOf }}
 					</router-link>
 				</n8n-text>
 			</div>
 			<div>
-				<el-dropdown v-if="executionUIDetails.name === 'error'" trigger="click" class="mr-xs" @command="handleRetryClick" ref="retryDropdown">
+				<el-dropdown
+					v-if="executionUIDetails.name === 'error'"
+					trigger="click"
+					class="mr-xs"
+					@command="handleRetryClick"
+					ref="retryDropdown"
+				>
 					<span class="retry-button">
 						<n8n-icon-button
 							size="large"
@@ -57,10 +94,21 @@
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
-				<n8n-icon-button :title="$locale.baseText('executionDetails.deleteExecution')" icon="trash" size="large" type="tertiary" @click="onDeleteExecution" />
+				<n8n-icon-button
+					:title="$locale.baseText('executionDetails.deleteExecution')"
+					icon="trash"
+					size="large"
+					type="tertiary"
+					@click="onDeleteExecution"
+				/>
 			</div>
 		</div>
-		<workflow-preview mode="execution" loaderType="spinner" :executionId="executionId" :executionMode="executionMode"/>
+		<workflow-preview
+			mode="execution"
+			loaderType="spinner"
+			:executionId="executionId"
+			:executionMode="executionMode"
+		/>
 	</div>
 </template>
 
@@ -87,9 +135,7 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-		),
+		...mapStores(useUIStore),
 		executionUIDetails(): IExecutionUIData | null {
 			return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;
 		},
@@ -122,7 +168,7 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		},
 		onRetryButtonBlur(event: FocusEvent): void {
 			// Hide dropdown when clicking outside of current document
-			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void } | undefined;
+			const retryDropdown = this.$refs.retryDropdown as (Vue & { hide: () => void }) | undefined;
 			if (retryDropdown && event.relatedTarget === null) {
 				retryDropdown.hide();
 			}
@@ -132,7 +178,6 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 </script>
 
 <style module lang="scss">
-
 .previewContainer {
 	height: calc(100% - $header-height);
 	overflow: hidden;
@@ -148,7 +193,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	transition: all 150ms ease-in-out;
 	pointer-events: none;
 
-	& * { pointer-events: all; }
+	& * {
+		pointer-events: all;
+	}
 
 	&.sidebarCollapsed {
 		width: calc(100% - 375px);
@@ -163,10 +210,19 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	}
 }
 
-.running, .spinner { color: var(--color-warning); }
-.waiting { color: var(--color-secondary); }
-.success { color: var(--color-success); }
-.error { color: var(--color-danger); }
+.running,
+.spinner {
+	color: var(--color-warning);
+}
+.waiting {
+	color: var(--color-secondary);
+}
+.success {
+	color: var(--color-success);
+}
+.error {
+	color: var(--color-danger);
+}
 
 .runningInfo {
 	display: flex;
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 6b54b75654..ac5045ed02 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -14,11 +14,19 @@
 				<n8n-tooltip :disabled="!isNewWorkflow">
 					<template #content>
 						<div>
-							<n8n-link @click.prevent="onSaveWorkflowClick">{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink') }}</n8n-link>
-							{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText') }}
+							<n8n-link @click.prevent="onSaveWorkflowClick">{{
+								$locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipLink')
+							}}</n8n-link>
+							{{
+								$locale.baseText('executionsLandingPage.emptyState.accordion.footer.tooltipText')
+							}}
 						</div>
 					</template>
-					<n8n-link @click.prevent="openWorkflowSettings" :class="{[$style.disabled]: isNewWorkflow}" size="small">
+					<n8n-link
+						@click.prevent="openWorkflowSettings"
+						:class="{ [$style.disabled]: isNewWorkflow }"
+						size="small"
+					>
 						{{ $locale.baseText('executionsLandingPage.emptyState.accordion.footer.settingsLink') }}
 					</n8n-link>
 				</n8n-tooltip>
@@ -39,10 +47,10 @@ import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 interface IWorkflowSaveSettings {
-	saveFailedExecutions: boolean,
-	saveSuccessfulExecutions: boolean,
-	saveManualExecutions: boolean,
-};
+	saveFailedExecutions: boolean;
+	saveSuccessfulExecutions: boolean;
+	saveManualExecutions: boolean;
+}
 
 export default mixins(workflowHelpers).extend({
 	name: 'executions-info-accordion',
@@ -78,24 +86,28 @@ export default mixins(workflowHelpers).extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		accordionItems(): Object[] {
 			return [
 				{
 					id: 'productionExecutions',
-					label: this.$locale.baseText('executionsLandingPage.emptyState.accordion.productionExecutions'),
+					label: this.$locale.baseText(
+						'executionsLandingPage.emptyState.accordion.productionExecutions',
+					),
 					icon: this.productionExecutionsIcon.icon,
 					iconColor: this.productionExecutionsIcon.color,
-					tooltip: this.productionExecutionsStatus === 'unknown' ? this.$locale.baseText('executionsLandingPage.emptyState.accordion.productionExecutionsWarningTooltip') : null,
+					tooltip:
+						this.productionExecutionsStatus === 'unknown'
+							? this.$locale.baseText(
+									'executionsLandingPage.emptyState.accordion.productionExecutionsWarningTooltip',
+							  )
+							: null,
 				},
 				{
 					id: 'manualExecutions',
-					label: this.$locale.baseText('executionsLandingPage.emptyState.accordion.manualExecutions'),
+					label: this.$locale.baseText(
+						'executionsLandingPage.emptyState.accordion.manualExecutions',
+					),
 					icon: this.workflowSaveSettings.saveManualExecutions ? 'check' : 'times',
 					iconColor: this.workflowSaveSettings.saveManualExecutions ? 'success' : 'danger',
 				},
@@ -105,11 +117,13 @@ export default mixins(workflowHelpers).extend({
 			if (this.initiallyExpanded === false) {
 				return false;
 			}
-			return this.workflowSaveSettings.saveFailedExecutions === false ||
+			return (
+				this.workflowSaveSettings.saveFailedExecutions === false ||
 				this.workflowSaveSettings.saveSuccessfulExecutions === false ||
-				this.workflowSaveSettings.saveManualExecutions === false;
+				this.workflowSaveSettings.saveManualExecutions === false
+			);
 		},
-		productionExecutionsIcon(): { icon: string, color: string } {
+		productionExecutionsIcon(): { icon: string; color: string } {
 			if (this.productionExecutionsStatus === 'saving') {
 				return { icon: 'check', color: 'success' };
 			} else if (this.productionExecutionsStatus === 'not-saving') {
@@ -118,7 +132,10 @@ export default mixins(workflowHelpers).extend({
 			return { icon: 'exclamation-triangle', color: 'warning' };
 		},
 		productionExecutionsStatus(): string {
-			if (this.workflowSaveSettings.saveSuccessfulExecutions === this.workflowSaveSettings.saveFailedExecutions) {
+			if (
+				this.workflowSaveSettings.saveSuccessfulExecutions ===
+				this.workflowSaveSettings.saveFailedExecutions
+			) {
 				if (this.workflowSaveSettings.saveSuccessfulExecutions === true) {
 					return 'saving';
 				}
@@ -131,8 +148,11 @@ export default mixins(workflowHelpers).extend({
 			const workflowSettings = deepCopy(this.workflowsStore.workflowSettings);
 			return workflowSettings;
 		},
-		accordionIcon(): { icon: string, color: string }|null {
-			if (this.workflowSaveSettings.saveManualExecutions !== true || this.productionExecutionsStatus !== 'saving') {
+		accordionIcon(): { icon: string; color: string } | null {
+			if (
+				this.workflowSaveSettings.saveManualExecutions !== true ||
+				this.productionExecutionsStatus !== 'saving'
+			) {
 				return { icon: 'exclamation-triangle', color: 'warning' };
 			}
 			return null;
@@ -141,7 +161,11 @@ export default mixins(workflowHelpers).extend({
 			return this.workflowsStore.workflowId;
 		},
 		isNewWorkflow(): boolean {
-			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
+			return (
+				!this.currentWorkflowId ||
+				this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
+				this.currentWorkflowId === 'new'
+			);
 		},
 		workflowName(): string {
 			return this.workflowsStore.workflowName;
@@ -152,9 +176,18 @@ export default mixins(workflowHelpers).extend({
 	},
 	methods: {
 		updateSettings(workflowSettings: IWorkflowSettings): void {
-			this.workflowSaveSettings.saveFailedExecutions = workflowSettings.saveDataErrorExecution === undefined ?  this.defaultValues.saveFailedExecutions === 'all' : workflowSettings.saveDataErrorExecution === 'all';
-			this.workflowSaveSettings.saveSuccessfulExecutions = workflowSettings.saveDataSuccessExecution === undefined ? this.defaultValues.saveSuccessfulExecutions === 'all' : workflowSettings.saveDataSuccessExecution === 'all';
-			this.workflowSaveSettings.saveManualExecutions = workflowSettings.saveManualExecutions === undefined ? this.defaultValues.saveManualExecutions : workflowSettings.saveManualExecutions as boolean;
+			this.workflowSaveSettings.saveFailedExecutions =
+				workflowSettings.saveDataErrorExecution === undefined
+					? this.defaultValues.saveFailedExecutions === 'all'
+					: workflowSettings.saveDataErrorExecution === 'all';
+			this.workflowSaveSettings.saveSuccessfulExecutions =
+				workflowSettings.saveDataSuccessExecution === undefined
+					? this.defaultValues.saveSuccessfulExecutions === 'all'
+					: workflowSettings.saveDataSuccessExecution === 'all';
+			this.workflowSaveSettings.saveManualExecutions =
+				workflowSettings.saveManualExecutions === undefined
+					? this.defaultValues.saveManualExecutions
+					: (workflowSettings.saveManualExecutions as boolean);
 		},
 		onAccordionClick(event: MouseEvent): void {
 			if (event.target instanceof HTMLAnchorElement) {
@@ -178,7 +211,11 @@ export default mixins(workflowHelpers).extend({
 			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
 				currentId = this.$route.params.name;
 			}
-			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
+			const saved = await this.saveCurrentWorkflow({
+				id: currentId,
+				name: this.workflowName,
+				tags: this.currentWorkflowTagIds,
+			});
 			if (saved) this.settingsStore.fetchPromptsData();
 		},
 	},
@@ -186,7 +223,6 @@ export default mixins(workflowHelpers).extend({
 </script>
 
 <style module lang="scss">
-
 .accordion {
 	background: none;
 	width: 320px;
@@ -208,7 +244,9 @@ export default mixins(workflowHelpers).extend({
 		width: 100%;
 		padding: 0 var(--spacing-l) var(--spacing-s) !important;
 
-		span { width: 100%; }
+		span {
+			width: 100%;
+		}
 	}
 
 	footer {
@@ -224,5 +262,4 @@ export default mixins(workflowHelpers).extend({
 		text-decoration: none;
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
index 5706a733d8..dfae8da221 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
@@ -39,10 +39,7 @@ export default Vue.extend({
 		ExecutionsInfoAccordion,
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useUIStore, useWorkflowsStore),
 		executionCount(): number {
 			return this.workflowsStore.currentWorkflowExecutions.length;
 		},
@@ -56,7 +53,7 @@ export default Vue.extend({
 			const workflowRoute = this.getWorkflowRoute();
 			this.$router.push(workflowRoute);
 		},
-		getWorkflowRoute(): { name: string, params: {}} {
+		getWorkflowRoute(): { name: string; params: {} } {
 			const workflowId = this.workflowsStore.workflowId || this.$route.params.name;
 			if (workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 				return { name: VIEWS.NEW_WORKFLOW, params: {} };
@@ -69,7 +66,6 @@ export default Vue.extend({
 </script>
 
 <style module lang="scss">
-
 .container {
 	width: 100%;
 	height: 100%;
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index a6b5886bf7..966d67fc91 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -1,13 +1,15 @@
 <template>
 	<div :class="['executions-sidebar', $style.container]">
 		<div :class="$style.heading">
-				<n8n-heading tag="h2" size="medium" color="text-dark">
+			<n8n-heading tag="h2" size="medium" color="text-dark">
 				{{ $locale.baseText('generic.executions') }}
 			</n8n-heading>
 		</div>
 		<div :class="$style.controls">
-			<el-checkbox v-model="autoRefresh" @change="onAutoRefreshToggle">{{ $locale.baseText('executionsList.autoRefresh') }}</el-checkbox>
-			<n8n-popover trigger="click" >
+			<el-checkbox v-model="autoRefresh" @change="onAutoRefreshToggle">{{
+				$locale.baseText('executionsList.autoRefresh')
+			}}</el-checkbox>
+			<n8n-popover trigger="click">
 				<template #reference>
 					<div :class="$style.filterButton">
 						<n8n-button icon="filter" type="tertiary" size="medium" :active="statusFilterApplied">
@@ -37,7 +39,8 @@
 								v-for="item in executionStatuses"
 								:key="item.id"
 								:label="item.name"
-								:value="item.id">
+								:value="item.id"
+							>
 							</n8n-option>
 						</n8n-select>
 					</div>
@@ -86,7 +89,7 @@ import ExecutionCard from '@/components/ExecutionsView/ExecutionCard.vue';
 import ExecutionsInfoAccordion from '@/components/ExecutionsView/ExecutionsInfoAccordion.vue';
 import { VIEWS } from '../../constants';
 import { range as _range } from 'lodash';
-import { IExecutionsSummary } from "@/Interface";
+import { IExecutionsSummary } from '@/Interface';
 import { Route } from 'vue-router';
 import Vue from 'vue';
 import { PropType } from 'vue';
@@ -124,13 +127,11 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-		),
+		...mapStores(useUIStore),
 		statusFilterApplied(): boolean {
 			return this.filter.status !== '';
 		},
-		executionStatuses(): Array<{ id: string, name: string }> {
+		executionStatuses(): Array<{ id: string; name: string }> {
 			return [
 				{ id: 'error', name: this.$locale.baseText('executionsList.error') },
 				{ id: 'running', name: this.$locale.baseText('executionsList.running') },
@@ -140,12 +141,12 @@ export default Vue.extend({
 		},
 	},
 	watch: {
-		$route (to: Route, from: Route) {
+		$route(to: Route, from: Route) {
 			if (from.name === VIEWS.EXECUTION_PREVIEW && to.name === VIEWS.EXECUTION_HOME) {
 				// Skip parent route when navigating through executions with back button
 				this.$router.go(-1);
 			}
-    },
+		},
 	},
 	mounted() {
 		this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
@@ -164,8 +165,9 @@ export default Vue.extend({
 			if (!this.loading) {
 				const executionsList = this.$refs.executionList as HTMLElement;
 				if (executionsList) {
-					const diff = executionsList.offsetHeight - (executionsList.scrollHeight - executionsList.scrollTop);
-					if (diff > -10  && diff < 10) {
+					const diff =
+						executionsList.offsetHeight - (executionsList.scrollHeight - executionsList.scrollTop);
+					if (diff > -10 && diff < 10) {
 						this.$emit('loadMore');
 					}
 				}
@@ -269,7 +271,7 @@ export default Vue.extend({
 	& > div {
 		width: 309px;
 		background-color: var(--color-background-light);
-		margin-top:  0 !important;
+		margin-top: 0 !important;
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
index 82f4918f79..7594bc0d68 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
@@ -29,9 +29,29 @@
 
 <script lang="ts">
 import ExecutionsSidebar from '@/components/ExecutionsView/ExecutionsSidebar.vue';
-import { MODAL_CANCEL, MODAL_CLOSE, MODAL_CONFIRMED, PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS, WEBHOOK_NODE_TYPE } from '@/constants';
-import { IExecutionsListResponse, IExecutionsSummary, INodeUi, ITag, IWorkflowDb } from '@/Interface';
-import { IConnection, IConnections, IDataObject, INodeTypeDescription, INodeTypeNameVersion, NodeHelpers } from 'n8n-workflow';
+import {
+	MODAL_CANCEL,
+	MODAL_CLOSE,
+	MODAL_CONFIRMED,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	VIEWS,
+	WEBHOOK_NODE_TYPE,
+} from '@/constants';
+import {
+	IExecutionsListResponse,
+	IExecutionsSummary,
+	INodeUi,
+	ITag,
+	IWorkflowDb,
+} from '@/Interface';
+import {
+	IConnection,
+	IConnections,
+	IDataObject,
+	INodeTypeDescription,
+	INodeTypeNameVersion,
+	NodeHelpers,
+} from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
 import { restApi } from '@/mixins/restApi';
 import { showMessage } from '@/mixins/showMessage';
@@ -49,7 +69,13 @@ import { useSettingsStore } from '@/stores/settings';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useTagsStore } from '@/stores/tags';
 
-export default mixins(restApi, showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
+export default mixins(
+	restApi,
+	showMessage,
+	executionHelpers,
+	debounceHelper,
+	workflowHelpers,
+).extend({
 	name: 'executions-page',
 	components: {
 		ExecutionsSidebar,
@@ -62,16 +88,14 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		};
 	},
 	computed: {
-		...mapStores(
-			useTagsStore,
-			useNodeTypesStore,
-			useSettingsStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useTagsStore, useNodeTypesStore, useSettingsStore, useUIStore, useWorkflowsStore),
 		hidePreview(): boolean {
 			const nothingToShow = this.executions.length === 0 && this.filterApplied;
-			const activeNotPresent = this.filterApplied && (this.executions as IExecutionsSummary[]).find(ex => ex.id === this.activeExecution.id) === undefined;
+			const activeNotPresent =
+				this.filterApplied &&
+				(this.executions as IExecutionsSummary[]).find(
+					(ex) => ex.id === this.activeExecution.id,
+				) === undefined;
 			return this.loading || nothingToShow || activeNotPresent;
 		},
 		showSidebar(): boolean {
@@ -84,7 +108,10 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			return this.filter.status !== '';
 		},
 		workflowDataNotLoaded(): boolean {
-			return this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID && this.workflowsStore.workflowName === '';
+			return (
+				this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID &&
+				this.workflowsStore.workflowName === ''
+			);
 		},
 		loadedFinishedExecutionsCount(): number {
 			return this.workflowsStore.getAllLoadedFinishedExecutions.length;
@@ -93,8 +120,8 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			return this.workflowsStore.getTotalFinishedExecutionsCount;
 		},
 	},
-	watch:{
-    $route (to: Route, from: Route) {
+	watch: {
+		$route(to: Route, from: Route) {
 			const workflowChanged = from.params.name !== to.params.name;
 			this.initView(workflowChanged);
 
@@ -141,7 +168,9 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 	async mounted() {
 		this.loading = true;
 		const workflowUpdated = this.$route.params.name !== this.workflowsStore.workflowId;
-		const onNewWorkflow = this.$route.params.name === 'new' && this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID;
+		const onNewWorkflow =
+			this.$route.params.name === 'new' &&
+			this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 		const shouldUpdate = workflowUpdated && !onNewWorkflow;
 		await this.initView(shouldUpdate);
 		if (!shouldUpdate) {
@@ -150,7 +179,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		this.loading = false;
 	},
 	methods: {
-		async initView(loadWorkflow: boolean) : Promise<void> {
+		async initView(loadWorkflow: boolean): Promise<void> {
 			if (loadWorkflow) {
 				if (this.nodeTypesStore.allNodeTypes.length === 0) {
 					await this.nodeTypesStore.getNodeTypes();
@@ -159,20 +188,25 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				this.uiStore.nodeViewInitialized = false;
 				this.setExecutions();
 				if (this.activeExecution) {
-					this.$router.push({
-						name: VIEWS.EXECUTION_PREVIEW,
-						params: { name: this.currentWorkflow, executionId: this.activeExecution.id },
-					}).catch(()=>{});;
+					this.$router
+						.push({
+							name: VIEWS.EXECUTION_PREVIEW,
+							params: { name: this.currentWorkflow, executionId: this.activeExecution.id },
+						})
+						.catch(() => {});
 				}
 			}
 		},
 		async onLoadMore(): Promise<void> {
 			if (!this.loadingMore) {
-				this.callDebounced("loadMore", { debounceTime: 1000 });
+				this.callDebounced('loadMore', { debounceTime: 1000 });
 			}
 		},
 		async loadMore(): Promise<void> {
-			if (this.filter.status === 'running' || this.loadedFinishedExecutionsCount >= this.totalFinishedExecutionsCount) {
+			if (
+				this.filter.status === 'running' ||
+				this.loadedFinishedExecutionsCount >= this.totalFinishedExecutionsCount
+			) {
 				return;
 			}
 			this.loadingMore = true;
@@ -186,7 +220,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			const requestFilter: IDataObject = { workflowId: this.currentWorkflow };
 			if (this.filter.status === 'waiting') {
 				requestFilter.waitTill = true;
-			} else if (this.filter.status !== '')  {
+			} else if (this.filter.status !== '') {
 				requestFilter.finished = this.filter.status === 'success';
 			}
 			let data: IExecutionsListResponse;
@@ -194,10 +228,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				data = await this.restApi().getPastExecutions(requestFilter, 20, lastId);
 			} catch (error) {
 				this.loadingMore = false;
-				this.$showError(
-					error,
-					this.$locale.baseText('executionsList.showError.loadMore.title'),
-				);
+				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
 				return;
 			}
 
@@ -205,9 +236,9 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				// @ts-ignore
 				return { ...execution, mode: execution.mode };
 			});
-			const currentExecutions = [ ...this.executions ];
+			const currentExecutions = [...this.executions];
 			for (const newExecution of data.results) {
-				if (currentExecutions.find(ex => ex.id === newExecution.id) === undefined) {
+				if (currentExecutions.find((ex) => ex.id === newExecution.id) === undefined) {
 					currentExecutions.push(newExecution);
 				}
 			}
@@ -217,16 +248,19 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		async onDeleteCurrentExecution(): Promise<void> {
 			this.loading = true;
 			try {
-				await this.restApi().deleteExecutions({ ids: [ this.$route.params.executionId ] });
+				await this.restApi().deleteExecutions({ ids: [this.$route.params.executionId] });
 				await this.setExecutions();
 				// Select first execution in the list after deleting the current one
 				if (this.executions.length > 0) {
 					this.workflowsStore.activeWorkflowExecution = this.executions[0];
-					this.$router.push({
-						name: VIEWS.EXECUTION_PREVIEW,
-						params: { name: this.currentWorkflow, executionId: this.executions[0].id },
-					}).catch(()=>{});;
-				} else { // If there are no executions left, show empty state and clear active execution from the store
+					this.$router
+						.push({
+							name: VIEWS.EXECUTION_PREVIEW,
+							params: { name: this.currentWorkflow, executionId: this.executions[0].id },
+						})
+						.catch(() => {});
+				} else {
+					// If there are no executions left, show empty state and clear active execution from the store
 					this.workflowsStore.activeWorkflowExecution = null;
 					this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: this.currentWorkflow } });
 				}
@@ -253,10 +287,9 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 
 				this.$showMessage({
 					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
-					message: this.$locale.baseText(
-						'executionsList.showMessage.stopExecution.message',
-						{ interpolate: { activeExecutionId } },
-					),
+					message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
+						interpolate: { activeExecutionId },
+					}),
 					type: 'success',
 				});
 
@@ -268,7 +301,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				);
 			}
 		},
-		onFilterUpdated(newFilter: { finished: boolean, status: string }): void {
+		onFilterUpdated(newFilter: { finished: boolean; status: string }): void {
 			this.filter = newFilter;
 			this.setExecutions();
 		},
@@ -280,13 +313,13 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		async loadAutoRefresh(): Promise<void> {
 			// Most of the auto-refresh logic is taken from the `ExecutionsList` component
 			const fetchedExecutions: IExecutionsSummary[] = await this.loadExecutions();
-			let existingExecutions: IExecutionsSummary[] = [ ...this.executions ];
-			const alreadyPresentExecutionIds = existingExecutions.map(exec => parseInt(exec.id, 10));
+			let existingExecutions: IExecutionsSummary[] = [...this.executions];
+			const alreadyPresentExecutionIds = existingExecutions.map((exec) => parseInt(exec.id, 10));
 			let lastId = 0;
 			const gaps = [] as number[];
 			let updatedActiveExecution = null;
 
-			for(let i = fetchedExecutions.length - 1; i >= 0; i--) {
+			for (let i = fetchedExecutions.length - 1; i >= 0; i--) {
 				const currentItem = fetchedExecutions[i];
 				const currentId = parseInt(currentItem.id, 10);
 				if (lastId !== 0 && isNaN(currentId) === false) {
@@ -299,9 +332,12 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 
 				const executionIndex = alreadyPresentExecutionIds.indexOf(currentId);
 				if (executionIndex !== -1) {
-					const existingExecution = existingExecutions.find(ex => ex.id === currentItem.id);
-					const existingStillRunning = existingExecution && existingExecution.finished === false || existingExecution?.stoppedAt === undefined;
-					const currentFinished =  currentItem.finished === true || currentItem.stoppedAt !== undefined;
+					const existingExecution = existingExecutions.find((ex) => ex.id === currentItem.id);
+					const existingStillRunning =
+						(existingExecution && existingExecution.finished === false) ||
+						existingExecution?.stoppedAt === undefined;
+					const currentFinished =
+						currentItem.finished === true || currentItem.stoppedAt !== undefined;
 
 					if (existingStillRunning && currentFinished) {
 						existingExecutions[executionIndex] = currentItem;
@@ -324,19 +360,25 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				}
 			}
 
-			existingExecutions = existingExecutions.filter(execution => !gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10));
+			existingExecutions = existingExecutions.filter(
+				(execution) =>
+					!gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10),
+			);
 			this.workflowsStore.currentWorkflowExecutions = existingExecutions;
 			if (updatedActiveExecution !== null) {
 				this.workflowsStore.activeWorkflowExecution = updatedActiveExecution;
 			} else {
-				const activeNotInTheList = existingExecutions.find(ex => ex.id === this.activeExecution.id) === undefined;
+				const activeNotInTheList =
+					existingExecutions.find((ex) => ex.id === this.activeExecution.id) === undefined;
 				if (activeNotInTheList && this.executions.length > 0) {
-					this.$router.push({
-						name: VIEWS.EXECUTION_PREVIEW,
-						params: { name: this.currentWorkflow, executionId: this.executions[0].id },
-					}).catch(()=>{});
+					this.$router
+						.push({
+							name: VIEWS.EXECUTION_PREVIEW,
+							params: { name: this.currentWorkflow, executionId: this.executions[0].id },
+						})
+						.catch(() => {});
 				} else if (this.executions.length === 0) {
-					this.$router.push({ name: VIEWS.EXECUTION_HOME }).catch(()=>{});
+					this.$router.push({ name: VIEWS.EXECUTION_HOME }).catch(() => {});
 					this.workflowsStore.activeWorkflowExecution = null;
 				}
 			}
@@ -350,10 +392,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 					await this.workflowsStore.loadCurrentWorkflowExecutions(this.filter);
 				return executions;
 			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('executionsList.showError.refreshData.title'),
-				);
+				this.$showError(error, this.$locale.baseText('executionsList.showError.refreshData.title'));
 				return [];
 			}
 		},
@@ -368,56 +407,56 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			// If there is no execution in the route, select the first one
 			if (this.workflowsStore.activeWorkflowExecution === null && this.executions.length > 0) {
 				this.workflowsStore.activeWorkflowExecution = this.executions[0];
-				this.$router.push({
-					name: VIEWS.EXECUTION_PREVIEW,
-					params: { name: this.currentWorkflow, executionId: this.executions[0].id },
-				}).catch(()=>{});;
+				this.$router
+					.push({
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { name: this.currentWorkflow, executionId: this.executions[0].id },
+					})
+					.catch(() => {});
 			}
 		},
 		async openWorkflow(workflowId: string): Promise<void> {
 			await this.loadActiveWorkflows();
 
 			let data: IWorkflowDb | undefined;
-				try {
-					data = await this.restApi().getWorkflow(workflowId);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.openWorkflow.title'),
-					);
-					return;
-				}
-				if (data === undefined) {
-					throw new Error(
-						this.$locale.baseText(
-							'nodeView.workflowWithIdCouldNotBeFound',
-							{ interpolate: { workflowId } },
-						),
-					);
-				}
-				await this.addNodes(data.nodes, data.connections);
+			try {
+				data = await this.restApi().getWorkflow(workflowId);
+			} catch (error) {
+				this.$showError(error, this.$locale.baseText('nodeView.showError.openWorkflow.title'));
+				return;
+			}
+			if (data === undefined) {
+				throw new Error(
+					this.$locale.baseText('nodeView.workflowWithIdCouldNotBeFound', {
+						interpolate: { workflowId },
+					}),
+				);
+			}
+			await this.addNodes(data.nodes, data.connections);
 
-				this.workflowsStore.setActive(data.active || false);
-				this.workflowsStore.setWorkflowId(workflowId);
-				this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
-				this.workflowsStore.setWorkflowSettings(data.settings || {});
-				this.workflowsStore.setWorkflowPinData(data.pinData || {});
-				const tags = (data.tags || []) as ITag[];
-				const tagIds = tags.map((tag) => tag.id);
-				this.workflowsStore.setWorkflowTagIds(tagIds || []);
-				this.workflowsStore.setWorkflowVersionId(data.versionId);
+			this.workflowsStore.setActive(data.active || false);
+			this.workflowsStore.setWorkflowId(workflowId);
+			this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
+			this.workflowsStore.setWorkflowSettings(data.settings || {});
+			this.workflowsStore.setWorkflowPinData(data.pinData || {});
+			const tags = (data.tags || []) as ITag[];
+			const tagIds = tags.map((tag) => tag.id);
+			this.workflowsStore.setWorkflowTagIds(tagIds || []);
+			this.workflowsStore.setWorkflowVersionId(data.versionId);
 
-				this.tagsStore.upsertTags(tags);
+			this.tagsStore.upsertTags(tags);
 
-				this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
-				this.uiStore.stateIsDirty = false;
+			this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
+			this.uiStore.stateIsDirty = false;
 		},
 		async addNodes(nodes: INodeUi[], connections?: IConnections) {
 			if (!nodes || !nodes.length) {
 				return;
 			}
 
-			await this.loadNodesProperties(nodes.map(node => ({ name: node.type, version: node.typeVersion })));
+			await this.loadNodesProperties(
+				nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
+			);
 
 			let nodeType: INodeTypeDescription | null;
 			nodes.forEach((node) => {
@@ -441,9 +480,18 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				if (nodeType !== null) {
 					let nodeParameters = null;
 					try {
-						nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false, node);
+						nodeParameters = NodeHelpers.getNodeParameters(
+							nodeType.properties,
+							node.parameters,
+							true,
+							false,
+							node,
+						);
 					} catch (e) {
-						console.error(this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') + `: "${node.name}"`); // eslint-disable-line no-console
+						console.error(
+							this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
+								`: "${node.name}"`,
+						); // eslint-disable-line no-console
 						console.error(e); // eslint-disable-line no-console
 					}
 					node.parameters = nodeParameters !== null ? nodeParameters : {};
@@ -462,14 +510,16 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				let connectionData;
 				for (const sourceNode of Object.keys(connections)) {
 					for (const type of Object.keys(connections[sourceNode])) {
-						for (let sourceIndex = 0; sourceIndex < connections[sourceNode][type].length; sourceIndex++) {
+						for (
+							let sourceIndex = 0;
+							sourceIndex < connections[sourceNode][type].length;
+							sourceIndex++
+						) {
 							const outwardConnections = connections[sourceNode][type][sourceIndex];
 							if (!outwardConnections) {
 								continue;
 							}
-							outwardConnections.forEach((
-								targetData,
-							) => {
+							outwardConnections.forEach((targetData) => {
 								connectionData = [
 									{
 										node: sourceNode,
@@ -483,7 +533,10 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 									},
 								] as [IConnection, IConnection];
 
-								this.workflowsStore.addConnection({ connection: connectionData, setStateDirty: false });
+								this.workflowsStore.addConnection({
+									connection: connectionData,
+									setStateDirty: false,
+								});
 							});
 						}
 					}
@@ -494,14 +547,15 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
 
 			const nodesToBeFetched: INodeTypeNameVersion[] = [];
-			allNodes.forEach(node => {
+			allNodes.forEach((node) => {
 				const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
-				if (!!nodeInfos.find(n => n.name === node.name && nodeVersions.includes(n.version)) && !node.hasOwnProperty('properties')) {
+				if (
+					!!nodeInfos.find((n) => n.name === node.name && nodeVersions.includes(n.version)) &&
+					!node.hasOwnProperty('properties')
+				) {
 					nodesToBeFetched.push({
 						name: node.name,
-						version: Array.isArray(node.version)
-							? node.version.slice(-1)[0]
-							: node.version,
+						version: Array.isArray(node.version) ? node.version.slice(-1)[0] : node.version,
 					});
 				}
 			});
@@ -515,7 +569,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			const activeWorkflows = await this.restApi().getActiveWorkflows();
 			this.workflowsStore.activeWorkflows = activeWorkflows;
 		},
-		async onRetryExecution(payload: { execution: IExecutionsSummary, command: string }) {
+		async onRetryExecution(payload: { execution: IExecutionsSummary; command: string }) {
 			const loadWorkflow = payload.command === 'current-workflow';
 
 			this.$showMessage({
@@ -547,7 +601,6 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 						type: 'error',
 					});
 				}
-
 			} catch (error) {
 				this.$showError(
 					error,
@@ -560,7 +613,6 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 </script>
 
 <style module lang="scss">
-
 .container {
 	display: flex;
 	height: 100%;
@@ -575,5 +627,4 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 	margin-top: var(--spacing-2xl);
 	text-align: center;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index b91690f937..d81b8ee005 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -1,15 +1,15 @@
 <template>
 	<!-- mock el-input element to apply styles -->
-	<div :class="{'el-input': true, 'static-size': staticSize}" :data-value="hiddenValue">
+	<div :class="{ 'el-input': true, 'static-size': staticSize }" :data-value="hiddenValue">
 		<slot></slot>
 	</div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 
 export default Vue.extend({
-	name: "ExpandableInputBase",
+	name: 'ExpandableInputBase',
 	props: ['value', 'placeholder', 'staticSize'],
 	computed: {
 		hiddenValue() {
@@ -19,7 +19,7 @@ export default Vue.extend({
 				value = this.$props.placeholder;
 			}
 
-			return `${value}`;  // adjust for padding
+			return `${value}`; // adjust for padding
 		},
 	},
 });
@@ -44,7 +44,6 @@ div.el-input {
 		font: inherit;
 	}
 
-
 	&::after {
 		content: attr(data-value) ' ';
 		visibility: hidden;
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index d9654a8083..d66080998d 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import ExpandableInputBase from "./ExpandableInputBase.vue";
+import Vue from 'vue';
+import ExpandableInputBase from './ExpandableInputBase.vue';
 
 export default Vue.extend({
 	components: { ExpandableInputBase },
-	name: "ExpandableInputEdit",
+	name: 'ExpandableInputEdit',
 	props: ['value', 'placeholder', 'maxlength', 'autofocus', 'eventBus'],
 	mounted() {
 		// autofocus on input element is not reliable
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index 19875539c5..f30d91b182 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import ExpandableInputBase from "./ExpandableInputBase.vue";
+import Vue from 'vue';
+import ExpandableInputBase from './ExpandableInputBase.vue';
 
 export default Vue.extend({
 	components: { ExpandableInputBase },
-	name: "ExpandableInputPreview",
-	props: ["value"],
+	name: 'ExpandableInputPreview',
+	props: ['value'],
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index adf9c1757b..8108e78cde 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -1,6 +1,13 @@
 <template>
 	<div v-if="dialogVisible" @keydown.stop>
-		<el-dialog :visible="dialogVisible" custom-class="expression-dialog classic" append-to-body width="80%" :title="$locale.baseText('expressionEdit.editExpression')" :before-close="closeDialog">
+		<el-dialog
+			:visible="dialogVisible"
+			custom-class="expression-dialog classic"
+			append-to-body
+			width="80%"
+			:title="$locale.baseText('expressionEdit.editExpression')"
+			:before-close="closeDialog"
+		>
 			<el-row>
 				<el-col :span="8">
 					<div class="header-side-menu">
@@ -58,10 +65,8 @@
 							/>
 						</div>
 					</div>
-
 				</el-col>
 			</el-row>
-
 		</el-dialog>
 	</div>
 </template>
@@ -87,25 +92,15 @@ import { useNDVStore } from '@/stores/ndv';
 
 import type { Resolvable, Segment } from './ExpressionEditorModal/types';
 
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	debounceHelper,
-).extend({
+export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 	name: 'ExpressionEdit',
-	props: [
-		'dialogVisible',
-		'parameter',
-		'path',
-		'value',
-		'eventSource',
-	],
+	props: ['dialogVisible', 'parameter', 'path', 'value', 'eventSource'],
 	components: {
 		ExpressionModalInput,
 		ExpressionModalOutput,
 		VariableSelector,
 	},
-	data () {
+	data() {
 		return {
 			displayValue: '',
 			latestValue: '',
@@ -114,13 +109,10 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useWorkflowsStore),
 	},
 	methods: {
-		valueChanged ({ value, segments }: { value: string, segments: Segment[] }, forceUpdate = false) {
+		valueChanged({ value, segments }: { value: string; segments: Segment[] }, forceUpdate = false) {
 			this.latestValue = value;
 			this.segments = segments;
 
@@ -132,11 +124,11 @@ export default mixins(
 			}
 		},
 
-		updateDisplayValue () {
+		updateDisplayValue() {
 			this.displayValue = this.latestValue;
 		},
 
-		closeDialog () {
+		closeDialog() {
 			if (this.latestValue !== this.value) {
 				// Handle the close externally as the visible parameter is an external prop
 				// and is so not allowed to be changed here.
@@ -146,9 +138,13 @@ export default mixins(
 			return false;
 		},
 
-		itemSelected (eventData: IVariableItemSelected) {
+		itemSelected(eventData: IVariableItemSelected) {
 			(this.$refs.inputFieldExpression as any).itemSelected(eventData); // tslint:disable-line:no-any
-			this.$externalHooks().run('expressionEdit.itemSelected', { parameter: this.parameter, value: this.value, selectedItem: eventData });
+			this.$externalHooks().run('expressionEdit.itemSelected', {
+				parameter: this.parameter,
+				value: this.value,
+				selectedItem: eventData,
+			});
 
 			const trackProperties: {
 				event_version: string;
@@ -162,11 +158,11 @@ export default mixins(
 				node_name: string;
 			} = {
 				event_version: '2',
-				node_type_dest: this.ndvStore.activeNode? this.ndvStore.activeNode.type : '',
+				node_type_dest: this.ndvStore.activeNode ? this.ndvStore.activeNode.type : '',
 				parameter_name_dest: this.parameter.displayName,
 				is_immediate_input: false,
 				variable_expression: eventData.variable,
-				node_name: this.ndvStore.activeNode? this.ndvStore.activeNode.name : '',
+				node_name: this.ndvStore.activeNode ? this.ndvStore.activeNode.name : '',
 			};
 
 			if (eventData.variable) {
@@ -184,47 +180,63 @@ export default mixins(
 
 				if (splitVar[0].startsWith('$node')) {
 					const sourceNodeName = splitVar[0].split('"')[1];
-					trackProperties.node_type_source = this.workflowsStore.getNodeByName(sourceNodeName)?.type;
-					const nodeConnections: Array<Array<{ node: string }>> = this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
-					trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.ndvStore.activeNode?.name || '')) ? true : false;
+					trackProperties.node_type_source =
+						this.workflowsStore.getNodeByName(sourceNodeName)?.type;
+					const nodeConnections: Array<Array<{ node: string }>> =
+						this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
+					trackProperties.is_immediate_input =
+						nodeConnections &&
+						nodeConnections[0] &&
+						!!nodeConnections[0].find(({ node }) => node === this.ndvStore.activeNode?.name || '')
+							? true
+							: false;
 
 					if (splitVar[1].startsWith('parameter')) {
 						trackProperties.parameter_name_source = splitVar[1].split('"')[1];
 					}
-
 				} else {
 					trackProperties.is_immediate_input = true;
 
-					if(splitVar[0].startsWith('$parameter')) {
+					if (splitVar[0].startsWith('$parameter')) {
 						trackProperties.parameter_name_source = splitVar[0].split('"')[1];
 					}
 				}
 			}
 
-			this.$telemetry.track('User inserted item from Expression Editor variable selector', trackProperties);
+			this.$telemetry.track(
+				'User inserted item from Expression Editor variable selector',
+				trackProperties,
+			);
 		},
 	},
 	watch: {
-		dialogVisible (newValue) {
+		dialogVisible(newValue) {
 			this.displayValue = this.value;
 			this.latestValue = this.value;
 
-			const resolvedExpressionValue = this.$refs.expressionResult && (this.$refs.expressionResult as any).getValue() || undefined;  // tslint:disable-line:no-any
-			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
+			const resolvedExpressionValue =
+				(this.$refs.expressionResult && (this.$refs.expressionResult as any).getValue()) ||
+				undefined; // tslint:disable-line:no-any
+			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', {
+				dialogVisible: newValue,
+				parameter: this.parameter,
+				value: this.value,
+				resolvedExpressionValue,
+			});
 
 			if (!newValue) {
 				const resolvables = this.segments.filter((s): s is Resolvable => s.kind === 'resolvable');
-				const errorResolvables = resolvables.filter(r => r.error);
+				const errorResolvables = resolvables.filter((r) => r.error);
 
 				const exposeErrorProperties = (error: Error) => {
 					return Object.getOwnPropertyNames(error).reduce<Record<string, unknown>>((acc, key) => {
 						// @ts-ignore
-						return acc[key] = error[key], acc;
+						return (acc[key] = error[key]), acc;
 					}, {});
 				};
 
 				const telemetryPayload = {
-					empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
+					empty_expression: this.value === '=' || this.value === '={{}}' || !this.value,
 					workflow_id: this.workflowsStore.workflowId,
 					source: this.eventSource,
 					session_id: this.ndvStore.sessionId,
@@ -233,12 +245,15 @@ export default mixins(
 					node_type: this.ndvStore.activeNode?.type ?? '',
 					handlebar_count: resolvables.length,
 					handlebar_error_count: errorResolvables.length,
-					full_errors: errorResolvables.map(errorResolvable => {
+					full_errors: errorResolvables.map((errorResolvable) => {
 						return errorResolvable.fullError
-							? { ...exposeErrorProperties(errorResolvable.fullError), stack: errorResolvable.fullError.stack }
+							? {
+									...exposeErrorProperties(errorResolvable.fullError),
+									stack: errorResolvable.fullError.stack,
+							  }
 							: null;
 					}),
-					short_errors: errorResolvables.map(r => r.resolved ?? null),
+					short_errors: errorResolvables.map((r) => r.resolved ?? null),
 				};
 
 				this.$telemetry.track('User closed Expression Editor', telemetryPayload);
@@ -255,7 +270,7 @@ export default mixins(
 	font-weight: bold;
 	padding: 0 0 0.5em 0.2em;
 	display: flex;
-  justify-content: space-between;
+	justify-content: space-between;
 
 	.hint {
 		color: var(--color-text-base);
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.cjs b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.cjs
index d14dbefc5f..affb19ca50 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.cjs
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.cjs
@@ -9,47 +9,46 @@ var highlight = require('@lezer/highlight');
 
 // This file was generated by lezer-generator. You probably shouldn't edit it.
 const parser = lr.LRParser.deserialize({
-  version: 14,
-  states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
-  stateData: "]~OQPORPOSPO~O",
-  goto: "cWPPPPPXP_QRORSRTQOR",
-  nodeNames: "⚠ Program Plaintext Resolvable BrokenResolvable",
-  maxTerm: 7,
-  skippedNodes: [0],
-  repeatNodeCount: 1,
-  tokenData: "4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g",
-  tokenizers: [0],
-  topRules: {"Program":[0,1]},
-  tokenPrec: 0
+	version: 14,
+	states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
+	stateData: ']~OQPORPOSPO~O',
+	goto: 'cWPPPPPXP_QRORSRTQOR',
+	nodeNames: '⚠ Program Plaintext Resolvable BrokenResolvable',
+	maxTerm: 7,
+	skippedNodes: [0],
+	repeatNodeCount: 1,
+	tokenData:
+		'4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g',
+	tokenizers: [0],
+	topRules: { Program: [0, 1] },
+	tokenPrec: 0,
 });
 
 const parserWithMetaData = parser.configure({
-    props: [
-        language.foldNodeProp.add({
-            Application: language.foldInside,
-        }),
-        highlight.styleTags({
-            OpenMarker: highlight.tags.brace,
-            CloseMarker: highlight.tags.brace,
-            Plaintext: highlight.tags.content,
-            Resolvable: highlight.tags.string,
-            BrokenResolvable: highlight.tags.className,
-        }),
-    ],
+	props: [
+		language.foldNodeProp.add({
+			Application: language.foldInside,
+		}),
+		highlight.styleTags({
+			OpenMarker: highlight.tags.brace,
+			CloseMarker: highlight.tags.brace,
+			Plaintext: highlight.tags.content,
+			Resolvable: highlight.tags.string,
+			BrokenResolvable: highlight.tags.className,
+		}),
+	],
 });
 const n8nExpressionLanguage = language.LRLanguage.define({
-    parser: parserWithMetaData,
-    languageData: {
-        commentTokens: { line: ";" },
-    },
+	parser: parserWithMetaData,
+	languageData: {
+		commentTokens: { line: ';' },
+	},
 });
 const completions = n8nExpressionLanguage.data.of({
-    autocomplete: autocomplete.completeFromList([
-        { label: "abcdefg", type: "keyword" },
-    ]),
+	autocomplete: autocomplete.completeFromList([{ label: 'abcdefg', type: 'keyword' }]),
 });
 function n8nExpression() {
-    return new language.LanguageSupport(n8nExpressionLanguage, [completions]);
+	return new language.LanguageSupport(n8nExpressionLanguage, [completions]);
 }
 
 exports.n8nExpression = n8nExpression;
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.cts b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.cts
index 8406d5dd59..28e8affe15 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.cts
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.cts
@@ -1,5 +1,5 @@
-import { LRLanguage, LanguageSupport } from "@codemirror/language";
-declare const parserWithMetaData: import("@lezer/lr").LRParser;
+import { LRLanguage, LanguageSupport } from '@codemirror/language';
+declare const parserWithMetaData: import('@lezer/lr').LRParser;
 declare const n8nExpressionLanguage: LRLanguage;
 declare function n8nExpression(): LanguageSupport;
 export { parserWithMetaData, n8nExpressionLanguage, n8nExpression };
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.ts b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.ts
index 8406d5dd59..28e8affe15 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.ts
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.d.ts
@@ -1,5 +1,5 @@
-import { LRLanguage, LanguageSupport } from "@codemirror/language";
-declare const parserWithMetaData: import("@lezer/lr").LRParser;
+import { LRLanguage, LanguageSupport } from '@codemirror/language';
+declare const parserWithMetaData: import('@lezer/lr').LRParser;
 declare const n8nExpressionLanguage: LRLanguage;
 declare function n8nExpression(): LanguageSupport;
 export { parserWithMetaData, n8nExpressionLanguage, n8nExpression };
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.js b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.js
index d2b92e7c5a..de59f5592d 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.js
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/n8nLanguagePack/index.js
@@ -5,47 +5,46 @@ import { styleTags, tags } from '@lezer/highlight';
 
 // This file was generated by lezer-generator. You probably shouldn't edit it.
 const parser = LRParser.deserialize({
-  version: 14,
-  states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
-  stateData: "]~OQPORPOSPO~O",
-  goto: "cWPPPPPXP_QRORSRTQOR",
-  nodeNames: "⚠ Program Plaintext Resolvable BrokenResolvable",
-  maxTerm: 7,
-  skippedNodes: [0],
-  repeatNodeCount: 1,
-  tokenData: "4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g",
-  tokenizers: [0],
-  topRules: {"Program":[0,1]},
-  tokenPrec: 0
+	version: 14,
+	states: "nQQOPOOOOOO'#Cc'#CcOOOO'#Ca'#CaQQOPOOOOOO-E6_-E6_",
+	stateData: ']~OQPORPOSPO~O',
+	goto: 'cWPPPPPXP_QRORSRTQOR',
+	nodeNames: '⚠ Program Plaintext Resolvable BrokenResolvable',
+	maxTerm: 7,
+	skippedNodes: [0],
+	repeatNodeCount: 1,
+	tokenData:
+		'4f~RRO#o[#o#p{#p~[~aRQ~O#o[#o#pj#p~[~mRO#o[#p~[~~v~{OQ~~!OSO#o[#o#p![#p~[~~v~!a!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r4W#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~&URS~O#q&P#q#r&_#r~&P~&dOS~~&i!YS~OX&PX^![^p&Ppq![qr![rs![st![tu![uv![vw![wx![xy![yz![z{![{|![|}![}!O![!O!P![!P!Q![!Q![![![!]![!]!^![!^!_![!_!`![!`!a![!a!b![!b!c![!c!}![!}#O![#O#P&d#P#Q![#Q#R![#R#S![#S#T![#T#o![#o#p![#p#q![#q#r*X#r#s![#s#y&P#y#z![#z$f&P$f$g![$g#BY&P#BY#BZ![#BZ$IS&P$IS$I_![$I_$I|&P$I|$JO![$JO$JT&P$JT$JU![$JU$KV&P$KV$KW![$KW&FU&P&FU&FV![&FV~&P~*^RS~O#q*g#q#r0s#r~*g~*j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~-j}X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r0g#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~0jRO#q*g#q#r0s#r~*g~0x}R~X^*gpq*gqr*grs*gst*gtu*guv*gvw*gwx*gxy*gyz*gz{*g{|*g|}*g}!O*g!O!P*g!P!Q*g!Q![*g![!]*g!]!^*g!^!_*g!_!`*g!`!a*g!a!b*g!b!c*g!c!}*g!}#O*g#O#P-g#P#Q*g#Q#R*g#R#S*g#S#T*g#T#o*g#o#p*g#p#q*g#q#r3u#r#s*g#y#z*g$f$g*g#BY#BZ*g$IS$I_*g$I|$JO*g$JT$JU*g$KV$KW*g&FU&FV*g~3xRO#q*g#q#r4R#r~*g~4WOR~~4]RS~O#q*g#q#r4R#r~*g',
+	tokenizers: [0],
+	topRules: { Program: [0, 1] },
+	tokenPrec: 0,
 });
 
 const parserWithMetaData = parser.configure({
-    props: [
-        foldNodeProp.add({
-            Application: foldInside,
-        }),
-        styleTags({
-            OpenMarker: tags.brace,
-            CloseMarker: tags.brace,
-            Plaintext: tags.content,
-            Resolvable: tags.string,
-            BrokenResolvable: tags.className,
-        }),
-    ],
+	props: [
+		foldNodeProp.add({
+			Application: foldInside,
+		}),
+		styleTags({
+			OpenMarker: tags.brace,
+			CloseMarker: tags.brace,
+			Plaintext: tags.content,
+			Resolvable: tags.string,
+			BrokenResolvable: tags.className,
+		}),
+	],
 });
 const n8nExpressionLanguage = LRLanguage.define({
-    parser: parserWithMetaData,
-    languageData: {
-        commentTokens: { line: ";" },
-    },
+	parser: parserWithMetaData,
+	languageData: {
+		commentTokens: { line: ';' },
+	},
 });
 const completions = n8nExpressionLanguage.data.of({
-    autocomplete: completeFromList([
-        { label: "abcdefg", type: "keyword" },
-    ]),
+	autocomplete: completeFromList([{ label: 'abcdefg', type: 'keyword' }]),
 });
 function n8nExpression() {
-    return new LanguageSupport(n8nExpressionLanguage, [completions]);
+	return new LanguageSupport(n8nExpressionLanguage, [completions]);
 }
 
 export { n8nExpression, n8nExpressionLanguage, parserWithMetaData };
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index 84124b5f48..9c7624d953 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -2,7 +2,7 @@
 	<div v-if="this.featureInfo" :class="[$style.container]">
 		<div v-if="showTitle" class="mb-2xl">
 			<n8n-heading size="2xlarge">
-				{{$locale.baseText(featureInfo.featureName)}}
+				{{ $locale.baseText(featureInfo.featureName) }}
 			</n8n-heading>
 		</div>
 		<div v-if="featureInfo.infoText" class="mb-l">
@@ -15,11 +15,13 @@
 		<div :class="$style.actionBoxContainer">
 			<n8n-action-box
 				:description="$locale.baseText(featureInfo.actionBoxDescription)"
-				:buttonText="$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')"
+				:buttonText="
+					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
+				"
 				@click="openLinkPage"
 			>
 				<template #heading>
-					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)"/>
+					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)" />
 				</template>
 			</n8n-action-box>
 		</div>
@@ -27,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import {IFakeDoor} from '@/Interface';
+import { IFakeDoor } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useSettingsStore } from '@/stores/settings';
 import { useUIStore } from '@/stores/ui';
@@ -48,12 +50,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUIStore, useUsersStore),
 		userId(): string {
 			return this.usersStore.currentUserId || '';
 		},
@@ -67,8 +64,13 @@ export default Vue.extend({
 	methods: {
 		openLinkPage() {
 			if (this.featureInfo) {
-				window.open(`${this.featureInfo.linkURL}&u=${this.instanceId}#${this.userId}&v=${this.rootStore.versionCli}`, '_blank');
-				this.$telemetry.track('user clicked feature waiting list button', {feature: this.featureId});
+				window.open(
+					`${this.featureInfo.linkURL}&u=${this.instanceId}#${this.userId}&v=${this.rootStore.versionCli}`,
+					'_blank',
+				);
+				this.$telemetry.track('user clicked feature waiting list button', {
+					feature: this.featureId,
+				});
 			}
 		},
 	},
@@ -80,4 +82,3 @@ export default Vue.extend({
 	text-align: center;
 }
 </style>
-
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index e67f59dda3..01938d77af 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,7 +1,9 @@
 <template>
 	<div @keydown.stop class="fixed-collection-parameter">
 		<div v-if="getProperties.length === 0" class="no-items-exist">
-			<n8n-text size="small">{{ $locale.baseText('fixedCollectionParameter.currentlyNoItemsExist') }}</n8n-text>
+			<n8n-text size="small">{{
+				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
+			}}</n8n-text>
 		</div>
 
 		<div
@@ -10,7 +12,7 @@
 			class="fixed-collection-parameter-property"
 		>
 			<n8n-input-label
-				v-if="property.displayName !== '' && (parameter.options && parameter.options.length !== 1)"
+				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
 				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
 				:underline="true"
 				size="small"
@@ -39,7 +41,7 @@
 									@click="moveOptionUp(property.name, index)"
 								/>
 								<font-awesome-icon
-									v-if="index !== (mutableValues[property.name].length - 1)"
+									v-if="index !== mutableValues[property.name].length - 1"
 									icon="angle-down"
 									class="clickable"
 									:title="$locale.baseText('fixedCollectionParameter.moveDown')"
@@ -110,10 +112,8 @@
 </template>
 
 <script lang="ts">
-import Vue, { Component, PropType } from "vue";
-import {
-	IUpdateInformation,
-} from '@/Interface';
+import Vue, { Component, PropType } from 'vue';
+import { IUpdateInformation } from '@/Interface';
 
 import {
 	INodeParameters,
@@ -127,187 +127,213 @@ import {
 import { get } from 'lodash';
 
 export default Vue.extend({
-		name: 'FixedCollectionParameter',
-	  props: {
-			nodeValues: {
-				type: Object as PropType<Record<string, INodeParameters[]>>,
-				required: true,
-			},
-			parameter: {
-				type: Object as PropType<INodeProperties>,
-				required: true,
-			},
-			path: {
-				type: String,
-				required: true,
-			},
-			values: {
-				type: Object as PropType<Record<string, INodeParameters[]>>,
-				default: () => ({}),
-			},
-			isReadOnly: {
-				type: Boolean,
-				default: false,
-			},
+	name: 'FixedCollectionParameter',
+	props: {
+		nodeValues: {
+			type: Object as PropType<Record<string, INodeParameters[]>>,
+			required: true,
 		},
-		components: {
-			ParameterInputList: () => import('./ParameterInputList.vue') as Promise<Component>,
+		parameter: {
+			type: Object as PropType<INodeProperties>,
+			required: true,
 		},
-		data() {
-			return {
-				selectedOption: undefined,
-				mutableValues: {} as Record<string, INodeParameters[]>,
-			};
+		path: {
+			type: String,
+			required: true,
 		},
-		watch: {
-			values: {
-				handler(newValues: Record<string, INodeParameters[]>) {
-					this.mutableValues = deepCopy(newValues);
-				},
-				deep: true,
+		values: {
+			type: Object as PropType<Record<string, INodeParameters[]>>,
+			default: () => ({}),
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	components: {
+		ParameterInputList: () => import('./ParameterInputList.vue') as Promise<Component>,
+	},
+	data() {
+		return {
+			selectedOption: undefined,
+			mutableValues: {} as Record<string, INodeParameters[]>,
+		};
+	},
+	watch: {
+		values: {
+			handler(newValues: Record<string, INodeParameters[]>) {
+				this.mutableValues = deepCopy(newValues);
 			},
+			deep: true,
 		},
-	  created(){
-			this.mutableValues = deepCopy(this.values);
+	},
+	created() {
+		this.mutableValues = deepCopy(this.values);
+	},
+	computed: {
+		getPlaceholderText(): string {
+			const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
+			return placeholder ? placeholder : this.$locale.baseText('fixedCollectionParameter.choose');
 		},
-		computed: {
-			getPlaceholderText(): string {
-				const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
-				return placeholder ? placeholder : this.$locale.baseText('fixedCollectionParameter.choose');
-			},
-			getProperties(): INodePropertyCollection[] {
-				const returnProperties = [];
-				let tempProperties;
-				for (const name of this.propertyNames) {
-					tempProperties = this.getOptionProperties(name);
-					if (tempProperties !== undefined) {
-						returnProperties.push(tempProperties);
-					}
+		getProperties(): INodePropertyCollection[] {
+			const returnProperties = [];
+			let tempProperties;
+			for (const name of this.propertyNames) {
+				tempProperties = this.getOptionProperties(name);
+				if (tempProperties !== undefined) {
+					returnProperties.push(tempProperties);
 				}
-				return returnProperties;
-			},
-			multipleValues(): boolean {
-				return !!this.parameter.typeOptions?.multipleValues;
-			},
+			}
+			return returnProperties;
+		},
+		multipleValues(): boolean {
+			return !!this.parameter.typeOptions?.multipleValues;
+		},
 
-			parameterOptions(): INodePropertyCollection[] {
-				if (this.multipleValues && isINodePropertyCollectionList(this.parameter.options)) {
-					return this.parameter.options;
-				}
+		parameterOptions(): INodePropertyCollection[] {
+			if (this.multipleValues && isINodePropertyCollectionList(this.parameter.options)) {
+				return this.parameter.options;
+			}
 
-				return (this.parameter.options as INodePropertyCollection[]).filter((option) => {
-					return !this.propertyNames.includes(option.name);
+			return (this.parameter.options as INodePropertyCollection[]).filter((option) => {
+				return !this.propertyNames.includes(option.name);
+			});
+		},
+		propertyNames(): string[] {
+			return Object.keys(this.mutableValues || {});
+		},
+		sortable(): boolean {
+			return !!this.parameter.typeOptions?.sortable;
+		},
+	},
+	methods: {
+		deleteOption(optionName: string, index?: number) {
+			const currentOptionsOfSameType = this.mutableValues[optionName];
+			if (!currentOptionsOfSameType || currentOptionsOfSameType.length > 1) {
+				// it's not the only option of this type, so just remove it.
+				this.$emit('valueChanged', {
+					name: this.getPropertyPath(optionName, index),
+					value: undefined,
 				});
-			},
-			propertyNames(): string[] {
-				return Object.keys(this.mutableValues || {});
-			},
-			sortable(): boolean {
-				return !!this.parameter.typeOptions?.sortable;
-			},
+			} else {
+				// it's the only option, so remove the whole type
+				this.$emit('valueChanged', {
+					name: this.getPropertyPath(optionName),
+					value: undefined,
+				});
+			}
 		},
-		methods: {
-			deleteOption(optionName: string, index?: number) {
-				const currentOptionsOfSameType = this.mutableValues[optionName];
-				if (!currentOptionsOfSameType || currentOptionsOfSameType.length > 1) {
-					// it's not the only option of this type, so just remove it.
-					this.$emit('valueChanged', {
-						name: this.getPropertyPath(optionName, index),
-						value: undefined,
-					});
-				} else {
-					// it's the only option, so remove the whole type
-					this.$emit('valueChanged', {
-						name: this.getPropertyPath(optionName),
-						value: undefined,
-					});
-				}
-			},
-			getPropertyPath(name: string, index?: number) {
-				return `${this.path}.${name}` + (index !== undefined ? `[${index}]` : '');
-			},
-			getOptionProperties(optionName: string): INodePropertyCollection | undefined {
-				if(isINodePropertyCollectionList(this.parameter.options)){
-					for (const option of this.parameter.options) {
-						if (option.name === optionName) {
-							return option;
-						}
+		getPropertyPath(name: string, index?: number) {
+			return `${this.path}.${name}` + (index !== undefined ? `[${index}]` : '');
+		},
+		getOptionProperties(optionName: string): INodePropertyCollection | undefined {
+			if (isINodePropertyCollectionList(this.parameter.options)) {
+				for (const option of this.parameter.options) {
+					if (option.name === optionName) {
+						return option;
 					}
 				}
-				return undefined;
-			},
-			moveOptionDown(optionName: string, index: number) {
-				if(Array.isArray(this.mutableValues[optionName])){
-					this.mutableValues[optionName].splice(index + 1, 0, this.mutableValues[optionName].splice(index, 1)[0]);
-				}
-
-				const parameterData = {
-					name: this.getPropertyPath(optionName),
-					value: this.mutableValues[optionName],
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			moveOptionUp(optionName: string, index: number) {
-				if(Array.isArray(this.mutableValues[optionName])) {
-					this.mutableValues?.[optionName].splice(index - 1, 0, this.mutableValues[optionName].splice(index, 1)[0]);
-				}
-
-				const parameterData = {
-					name: this.getPropertyPath(optionName),
-					value: this.mutableValues[optionName],
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			optionSelected(optionName: string) {
-				const option = this.getOptionProperties(optionName);
-				if (option === undefined) {
-					return;
-				}
-				const name = `${this.path}.${option.name}`;
-
-				const newParameterValue: INodeParameters = {};
-
-				for (const optionParameter of option.values) {
-					if (optionParameter.type === 'fixedCollection' && optionParameter.typeOptions !== undefined && optionParameter.typeOptions.multipleValues === true) {
-						newParameterValue[optionParameter.name] = {};
-					} else if (optionParameter.typeOptions !== undefined && optionParameter.typeOptions.multipleValues === true) {
-						// Multiple values are allowed so append option to array
-						newParameterValue[optionParameter.name] = get(this.nodeValues, `${this.path}.${optionParameter.name}`, []);
-						if (Array.isArray(optionParameter.default)) {
-							(newParameterValue[optionParameter.name] as INodeParameters[]).push(...deepCopy(optionParameter.default as INodeParameters[]));
-						} else if (optionParameter.default !== '' && typeof optionParameter.default !== 'object') {
-							(newParameterValue[optionParameter.name] as NodeParameterValue[]).push(deepCopy(optionParameter.default));
-						}
-					} else {
-						// Add a new option
-						newParameterValue[optionParameter.name] = deepCopy(optionParameter.default);
-					}
-				}
-
-				let newValue;
-				if (this.multipleValues) {
-					newValue = get(this.nodeValues, name, [] as INodeParameters[]);
-
-					newValue.push(newParameterValue);
-				} else {
-					newValue = newParameterValue;
-				}
-
-				const parameterData = {
-					name,
-					value: newValue,
-				};
-
-				this.$emit('valueChanged', parameterData);
-				this.selectedOption = undefined;
-			},
-			valueChanged(parameterData: IUpdateInformation) {
-				this.$emit('valueChanged', parameterData);
-			},
+			}
+			return undefined;
 		},
-	});
+		moveOptionDown(optionName: string, index: number) {
+			if (Array.isArray(this.mutableValues[optionName])) {
+				this.mutableValues[optionName].splice(
+					index + 1,
+					0,
+					this.mutableValues[optionName].splice(index, 1)[0],
+				);
+			}
+
+			const parameterData = {
+				name: this.getPropertyPath(optionName),
+				value: this.mutableValues[optionName],
+			};
+
+			this.$emit('valueChanged', parameterData);
+		},
+		moveOptionUp(optionName: string, index: number) {
+			if (Array.isArray(this.mutableValues[optionName])) {
+				this.mutableValues?.[optionName].splice(
+					index - 1,
+					0,
+					this.mutableValues[optionName].splice(index, 1)[0],
+				);
+			}
+
+			const parameterData = {
+				name: this.getPropertyPath(optionName),
+				value: this.mutableValues[optionName],
+			};
+
+			this.$emit('valueChanged', parameterData);
+		},
+		optionSelected(optionName: string) {
+			const option = this.getOptionProperties(optionName);
+			if (option === undefined) {
+				return;
+			}
+			const name = `${this.path}.${option.name}`;
+
+			const newParameterValue: INodeParameters = {};
+
+			for (const optionParameter of option.values) {
+				if (
+					optionParameter.type === 'fixedCollection' &&
+					optionParameter.typeOptions !== undefined &&
+					optionParameter.typeOptions.multipleValues === true
+				) {
+					newParameterValue[optionParameter.name] = {};
+				} else if (
+					optionParameter.typeOptions !== undefined &&
+					optionParameter.typeOptions.multipleValues === true
+				) {
+					// Multiple values are allowed so append option to array
+					newParameterValue[optionParameter.name] = get(
+						this.nodeValues,
+						`${this.path}.${optionParameter.name}`,
+						[],
+					);
+					if (Array.isArray(optionParameter.default)) {
+						(newParameterValue[optionParameter.name] as INodeParameters[]).push(
+							...deepCopy(optionParameter.default as INodeParameters[]),
+						);
+					} else if (
+						optionParameter.default !== '' &&
+						typeof optionParameter.default !== 'object'
+					) {
+						(newParameterValue[optionParameter.name] as NodeParameterValue[]).push(
+							deepCopy(optionParameter.default),
+						);
+					}
+				} else {
+					// Add a new option
+					newParameterValue[optionParameter.name] = deepCopy(optionParameter.default);
+				}
+			}
+
+			let newValue;
+			if (this.multipleValues) {
+				newValue = get(this.nodeValues, name, [] as INodeParameters[]);
+
+				newValue.push(newParameterValue);
+			} else {
+				newValue = newParameterValue;
+			}
+
+			const parameterData = {
+				name,
+				value: newValue,
+			};
+
+			this.$emit('valueChanged', parameterData);
+			this.selectedOption = undefined;
+		},
+		valueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+	},
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/editor-ui/src/components/GiftNotificationIcon.vue b/packages/editor-ui/src/components/GiftNotificationIcon.vue
index 912b89e45d..bae3b8f9c4 100644
--- a/packages/editor-ui/src/components/GiftNotificationIcon.vue
+++ b/packages/editor-ui/src/components/GiftNotificationIcon.vue
@@ -1,41 +1,40 @@
 <template>
-  <div :class="$style['gift-icon']">
-    <font-awesome-icon icon="gift" />
-    <div :class="$style['notification']">
-      <div></div>
-    </div>
-  </div>
+	<div :class="$style['gift-icon']">
+		<font-awesome-icon icon="gift" />
+		<div :class="$style['notification']">
+			<div></div>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" module>
 .gift-icon {
-  display: flex;
-  position: relative;
+	display: flex;
+	position: relative;
 
 	svg {
 		margin-right: 0 !important;
 	}
 
-  .notification {
-    height: .47em;
-    width: .47em;
-    border-radius: 50%;
-    color: $gift-notification-active-color;
-    position: absolute;
-    background-color: $gift-notification-outer-color;
-		right: -.3em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: -.148em;
+	.notification {
+		height: 0.47em;
+		width: 0.47em;
+		border-radius: 50%;
+		color: $gift-notification-active-color;
+		position: absolute;
+		background-color: $gift-notification-outer-color;
+		right: -0.3em;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		top: -0.148em;
 
-    div {
-      height: .36em;
-      width: .36em;
-      background-color: $gift-notification-inner-color;
-      border-radius: 50%;
-
-    }
-  }
+		div {
+			height: 0.36em;
+			width: 0.36em;
+			background-color: $gift-notification-inner-color;
+			border-radius: 50%;
+		}
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index 80044c100b..9c54a2157b 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -23,7 +23,7 @@ export default Vue.extend({
 		},
 	},
 	mounted() {
-		window.history.state ? this.routeHasHistory = true : this.routeHasHistory = false;
+		window.history.state ? (this.routeHasHistory = true) : (this.routeHasHistory = false);
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index e22e734b7a..2dda3cd8af 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -76,9 +76,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		fontStyleData(): object {
 			return {
 				'max-width': this.size + 'px',
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index a0ddd73d07..3723b7be8b 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -67,10 +67,7 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useUIStore,
-		),
+		...mapStores(useNDVStore, useUIStore),
 		node(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index 7b52ebd838..4ec839fbd3 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -1,9 +1,6 @@
 <template>
-	<div class='ph-no-capture' :class="$style.container">
-		<span
-			v-if="readonly"
-			:class="$style.headline"
-		>
+	<div class="ph-no-capture" :class="$style.container">
+		<span v-if="readonly" :class="$style.headline">
 			{{ name }}
 		</span>
 		<div
@@ -91,7 +88,6 @@ export default mixins(showMessage).extend({
 });
 </script>
 
-
 <style module lang="scss">
 .container {
 	display: flex;
@@ -146,5 +142,4 @@ export default mixins(showMessage).extend({
 	margin-left: 4px;
 	font-weight: 400;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 10d22ad423..b8020a0eac 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -1,5 +1,5 @@
 <template>
-	<span @keydown.stop class="inline-edit" >
+	<span @keydown.stop class="inline-edit">
 		<span v-if="isEditEnabled">
 			<ExpandableInputEdit
 				:placeholder="placeholder"
@@ -14,21 +14,19 @@
 			/>
 		</span>
 
-		<span @click="onClick" class="preview"  v-else>
-			<ExpandableInputPreview
-				:value="previewValue || value"
-			/>
+		<span @click="onClick" class="preview" v-else>
+			<ExpandableInputPreview :value="previewValue || value" />
 		</span>
 	</span>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import ExpandableInputEdit from "@/components/ExpandableInput/ExpandableInputEdit.vue";
-import ExpandableInputPreview from "@/components/ExpandableInput/ExpandableInputPreview.vue";
+import Vue from 'vue';
+import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
+import ExpandableInputPreview from '@/components/ExpandableInput/ExpandableInputPreview.vue';
 
 export default Vue.extend({
-	name: "InlineTextEdit",
+	name: 'InlineTextEdit',
 	components: { ExpandableInputEdit, ExpandableInputPreview },
 	props: ['isEditEnabled', 'value', 'placeholder', 'maxLength', 'previewValue'],
 	data() {
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 46c7e5ac28..07946edc47 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -21,17 +21,38 @@
 		@runChange="onRunIndexChange"
 		@tableMounted="$emit('tableMounted', $event)"
 		data-test-id="ndv-input-panel"
-		>
+	>
 		<template #header>
 			<div :class="$style.titleSection">
-				<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable data-test-id="ndv-input-select">
+				<n8n-select
+					v-if="parentNodes.length"
+					:popper-append-to-body="true"
+					size="small"
+					:value="currentNodeName"
+					@input="onSelect"
+					:no-data-text="$locale.baseText('ndv.input.noNodesFound')"
+					:placeholder="$locale.baseText('ndv.input.parentNodes')"
+					filterable
+					data-test-id="ndv-input-select"
+				>
 					<template #prepend>
 						<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
 					</template>
-					<n8n-option v-for="node of parentNodes" :value="node.name" :key="node.name" class="node-option" :label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`" data-test-id="ndv-input-option">
+					<n8n-option
+						v-for="node of parentNodes"
+						:value="node.name"
+						:key="node.name"
+						class="node-option"
+						:label="`${truncate(node.name)} ${getMultipleNodesText(node.name)}`"
+						data-test-id="ndv-input-option"
+					>
 						{{ truncate(node.name) }}&nbsp;
-						<span v-if="getMultipleNodesText(node.name)">{{ getMultipleNodesText(node.name) }}</span>
-						<span v-else>{{ $locale.baseText('ndv.input.nodeDistance', {adjustToNumber: node.depth}) }}</span>
+						<span v-if="getMultipleNodesText(node.name)">{{
+							getMultipleNodesText(node.name)
+						}}</span>
+						<span v-else>{{
+							$locale.baseText('ndv.input.nodeDistance', { adjustToNumber: node.depth })
+						}}</span>
 					</n8n-option>
 				</n8n-select>
 				<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
@@ -40,12 +61,31 @@
 
 		<template #node-not-run>
 			<div :class="$style.noOutputData" v-if="parentNodes.length">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
-				<n8n-tooltip v-if="!readOnly" :manual="true" :value="showDraggableHint && showDraggableHintWithDelay">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.noOutputData.title')
+				}}</n8n-text>
+				<n8n-tooltip
+					v-if="!readOnly"
+					:manual="true"
+					:value="showDraggableHint && showDraggableHintWithDelay"
+				>
 					<template #content>
-						<div v-html="$locale.baseText('dataMapping.dragFromPreviousHint',  { interpolate: { name: focusedMappableInput } })"></div>
+						<div
+							v-html="
+								$locale.baseText('dataMapping.dragFromPreviousHint', {
+									interpolate: { name: focusedMappableInput },
+								})
+							"
+						></div>
 					</template>
-					<NodeExecuteButton type="secondary" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" telemetrySource="inputs" />
+					<NodeExecuteButton
+						type="secondary"
+						:transparent="true"
+						:nodeName="currentNodeName"
+						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
+						@execute="onNodeExecute"
+						telemetrySource="inputs"
+					/>
 				</n8n-tooltip>
 				<n8n-text v-if="!readOnly" tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
@@ -55,18 +95,26 @@
 				<div>
 					<WireMeUp />
 				</div>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.notConnected.title') }}</n8n-text>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.notConnected.title')
+				}}</n8n-text>
 				<n8n-text tag="div">
 					{{ $locale.baseText('ndv.input.notConnected.message') }}
-					<a href="https://docs.n8n.io/workflows/connections/" target="_blank" @click="onConnectionHelpClick">
-						{{$locale.baseText('ndv.input.notConnected.learnMore')}}
+					<a
+						href="https://docs.n8n.io/workflows/connections/"
+						target="_blank"
+						@click="onConnectionHelpClick"
+					>
+						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
 					</a>
 				</n8n-text>
 			</div>
 		</template>
 
 		<template #no-output-data>
-			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
+			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.input.noOutputData')
+			}}</n8n-text>
 		</template>
 	</RunData>
 </template>
@@ -79,15 +127,20 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import WireMeUp from './WireMeUp.vue';
-import { CRON_NODE_TYPE, INTERVAL_NODE_TYPE, LOCAL_STORAGE_MAPPING_FLAG, MANUAL_TRIGGER_NODE_TYPE, SCHEDULE_TRIGGER_NODE_TYPE, START_NODE_TYPE } from '@/constants';
+import {
+	CRON_NODE_TYPE,
+	INTERVAL_NODE_TYPE,
+	LOCAL_STORAGE_MAPPING_FLAG,
+	MANUAL_TRIGGER_NODE_TYPE,
+	SCHEDULE_TRIGGER_NODE_TYPE,
+	START_NODE_TYPE,
+} from '@/constants';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 
-export default mixins(
-	workflowHelpers,
-).extend({
+export default mixins(workflowHelpers).extend({
 	name: 'InputPanel',
 	components: { RunData, NodeExecuteButton, WireMeUp },
 	props: {
@@ -100,8 +153,7 @@ export default mixins(
 		linkedRuns: {
 			type: Boolean,
 		},
-		workflow: {
-		},
+		workflow: {},
 		canLinkRuns: {
 			type: Boolean,
 		},
@@ -123,11 +175,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
 		focusedMappableInput(): string {
 			return this.ndvStore.focusedMappableInput;
 		},
@@ -135,7 +183,12 @@ export default mixins(
 			return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
 		},
 		showDraggableHint(): boolean {
-			const toIgnore = [START_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, CRON_NODE_TYPE, INTERVAL_NODE_TYPE];
+			const toIgnore = [
+				START_NODE_TYPE,
+				MANUAL_TRIGGER_NODE_TYPE,
+				CRON_NODE_TYPE,
+				INTERVAL_NODE_TYPE,
+			];
 			if (!this.currentNode || toIgnore.includes(this.currentNode.type)) {
 				return false;
 			}
@@ -148,69 +201,86 @@ export default mixins(
 			}
 			const triggeredNode = this.workflowsStore.executedNode;
 			const executingNode = this.workflowsStore.executingNode;
-			if (this.activeNode && triggeredNode === this.activeNode.name && this.activeNode.name !== executingNode) {
+			if (
+				this.activeNode &&
+				triggeredNode === this.activeNode.name &&
+				this.activeNode.name !== executingNode
+			) {
 				return true;
 			}
 
 			if (executingNode || triggeredNode) {
-				return !!this.parentNodes.find((node) => node.name === executingNode || node.name === triggeredNode);
+				return !!this.parentNodes.find(
+					(node) => node.name === executingNode || node.name === triggeredNode,
+				);
 			}
 			return false;
 		},
-		workflowRunning (): boolean {
+		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
 		currentWorkflow(): Workflow {
 			return this.workflow as Workflow;
 		},
-		activeNode (): INodeUi | null {
+		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
-		currentNode (): INodeUi | null {
+		currentNode(): INodeUi | null {
 			return this.workflowsStore.getNodeByName(this.currentNodeName);
 		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
-			const search = this.parentNodes.find(({name}) => name === this.currentNodeName);
+			const search = this.parentNodes.find(({ name }) => name === this.currentNodeName);
 			if (search) {
 				return search.indicies;
 			}
 			return undefined;
 		},
-		parentNodes (): IConnectedNode[] {
+		parentNodes(): IConnectedNode[] {
 			if (!this.activeNode) {
 				return [];
 			}
-			const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(this.activeNode.name);
+			const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(
+				this.activeNode.name,
+			);
 
-			return nodes.filter(({name}, i) => (this.activeNode && (name !== this.activeNode.name)) && nodes.findIndex((node) => node.name === name) === i);
+			return nodes.filter(
+				({ name }, i) =>
+					this.activeNode &&
+					name !== this.activeNode.name &&
+					nodes.findIndex((node) => node.name === name) === i,
+			);
 		},
-		currentNodeDepth (): number {
-			const node = this.parentNodes.find((node) => this.currentNode && node.name === this.currentNode.name);
-			return node ? node.depth: -1;
+		currentNodeDepth(): number {
+			const node = this.parentNodes.find(
+				(node) => this.currentNode && node.name === this.currentNode.name,
+			);
+			return node ? node.depth : -1;
 		},
-		activeNodeType () : INodeTypeDescription | null {
+		activeNodeType(): INodeTypeDescription | null {
 			if (!this.activeNode) return null;
 
 			return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
 		},
-		isMultiInputNode (): boolean {
+		isMultiInputNode(): boolean {
 			return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
 		},
 	},
 	methods: {
-		getMultipleNodesText(nodeName?: string):string {
-			if(
+		getMultipleNodesText(nodeName?: string): string {
+			if (
 				!nodeName ||
 				!this.isMultiInputNode ||
 				!this.activeNode ||
 				this.activeNodeType === null ||
 				this.activeNodeType.inputNames === undefined
-			) return '';
+			)
+				return '';
 
-			const activeNodeConnections = this.currentWorkflow.connectionsByDestinationNode[this.activeNode.name].main || [];
+			const activeNodeConnections =
+				this.currentWorkflow.connectionsByDestinationNode[this.activeNode.name].main || [];
 			// Collect indexes of connected nodes
 			const connectedInputIndexes = activeNodeConnections.reduce((acc: number[], node, index) => {
-				if(node[0] && node[0].node === nodeName) return [...acc, index];
+				if (node[0] && node[0].node === nodeName) return [...acc, index];
 				return acc;
 			}, []);
 
@@ -222,7 +292,7 @@ export default mixins(
 					this.activeNodeType.inputNames[inputIndex],
 			);
 
-			if(connectedInputs.length === 0) return '';
+			if (connectedInputs.length === 0) return '';
 
 			return `(${connectedInputs.join(' & ')})`;
 		},
@@ -281,11 +351,12 @@ export default mixins(
 					if (this.showDraggableHintWithDelay) {
 						this.draggableHintShown = true;
 
-						this.$telemetry.track('User viewed data mapping tooltip', { type: 'unexecuted input pane' });
+						this.$telemetry.track('User viewed data mapping tooltip', {
+							type: 'unexecuted input pane',
+						});
 					}
 				}, 1000);
-			}
-			else if (!curr) {
+			} else if (!curr) {
 				this.showDraggableHintWithDelay = false;
 			}
 		},
diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
index ad319d3da3..7aaa055b86 100644
--- a/packages/editor-ui/src/components/IntersectionObserved.vue
+++ b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts">
-
 import mixins from 'vue-typed-mixins';
 import emitter from '@/mixins/emitter';
 
diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index c9c6abc597..d20a408ee7 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -1,12 +1,10 @@
 <template>
 	<div ref="root">
 		<slot></slot>
-	</div>	
+	</div>
 </template>
 
-
 <script lang="ts">
-
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -29,7 +27,7 @@ export default Vue.extend({
 		};
 
 		const observer = new IntersectionObserver((entries) => {
-			entries.forEach(({target, isIntersecting}) => {
+			entries.forEach(({ target, isIntersecting }) => {
 				this.$emit('observed', {
 					el: target,
 					isIntersecting,
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index d0e5887af7..edec369825 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -17,23 +17,28 @@
 			/>
 		</template>
 		<template #footer>
-			<n8n-button :loading="loading" :disabled="!enabledButton" :label="buttonLabel" @click="onSubmitClick" float="right" />
+			<n8n-button
+				:loading="loading"
+				:disabled="!enabledButton"
+				:label="buttonLabel"
+				@click="onSubmitClick"
+				float="right"
+			/>
 		</template>
 	</Modal>
 </template>
 
-
 <script lang="ts">
-import mixins from "vue-typed-mixins";
+import mixins from 'vue-typed-mixins';
 
-import { showMessage } from "@/mixins/showMessage";
-import Modal from "./Modal.vue";
-import Vue from "vue";
-import { IFormInputs, IInviteResponse } from "@/Interface";
-import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from "@/constants";
+import { showMessage } from '@/mixins/showMessage';
+import Modal from './Modal.vue';
+import Vue from 'vue';
+import { IFormInputs, IInviteResponse } from '@/Interface';
+import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from '@/constants';
 import { ROLE } from '@/utils';
-import { mapStores } from "pinia";
-import { useUsersStore } from "@/stores/users";
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/;
 
@@ -50,7 +55,7 @@ function getEmail(email: string): string {
 
 export default mixins(showMessage).extend({
 	components: { Modal },
-	name: "InviteUsersModal",
+	name: 'InviteUsersModal',
 	props: {
 		modalName: {
 			type: String,
@@ -73,7 +78,7 @@ export default mixins(showMessage).extend({
 				properties: {
 					label: this.$locale.baseText('settings.users.newEmailsToInvite'),
 					required: true,
-					validationRules: [{name: 'VALID_EMAILS'}],
+					validationRules: [{ name: 'VALID_EMAILS' }],
 					validators: {
 						VALID_EMAILS: {
 							validate: this.validateEmails,
@@ -109,10 +114,9 @@ export default mixins(showMessage).extend({
 		},
 		buttonLabel(): string {
 			if (this.emailsCount > 1) {
-				return this.$locale.baseText(
-					'settings.users.inviteXUser',
-					{ interpolate: { count: this.emailsCount.toString() }},
-				);
+				return this.$locale.baseText('settings.users.inviteXUser', {
+					interpolate: { count: this.emailsCount.toString() },
+				});
 			}
 
 			return this.$locale.baseText('settings.users.inviteUser');
@@ -135,14 +139,14 @@ export default mixins(showMessage).extend({
 				if (!!parsed.trim() && !VALID_EMAIL_REGEX.test(String(parsed).trim().toLowerCase())) {
 					return {
 						messageKey: 'settings.users.invalidEmailError',
-						options: { interpolate: { email: parsed }},
+						options: { interpolate: { email: parsed } },
 					};
 				}
 			}
 
 			return false;
 		},
-		onInput(e: {name: string, value: string}) {
+		onInput(e: { name: string; value: string }) {
 			if (e.name === 'emails') {
 				this.emails = e.value;
 			}
@@ -151,8 +155,9 @@ export default mixins(showMessage).extend({
 			try {
 				this.loading = true;
 
-				const emails = this.emails.split(',')
-					.map((email) => ({email: getEmail(email)}))
+				const emails = this.emails
+					.split(',')
+					.map((email) => ({ email: getEmail(email) }))
 					.filter((invite) => !!invite.email);
 
 				if (emails.length === 0) {
@@ -160,24 +165,32 @@ export default mixins(showMessage).extend({
 				}
 
 				const invited: IInviteResponse[] = await this.usersStore.inviteUsers(emails);
-				const invitedEmails = invited.reduce((accu, {user, error}) => {
-					if (error) {
-						accu.error.push(user.email);
-					}
-					else {
-						accu.success.push(user.email);
-					}
-					return accu;
-				}, {
-					success: [] as string[],
-					error: [] as string[],
-				});
+				const invitedEmails = invited.reduce(
+					(accu, { user, error }) => {
+						if (error) {
+							accu.error.push(user.email);
+						} else {
+							accu.success.push(user.email);
+						}
+						return accu;
+					},
+					{
+						success: [] as string[],
+						error: [] as string[],
+					},
+				);
 
 				if (invitedEmails.success.length) {
 					this.$showMessage({
 						type: 'success',
-						title: this.$locale.baseText(invitedEmails.success.length > 1 ? 'settings.users.usersInvited' : 'settings.users.userInvited'),
-						message: this.$locale.baseText('settings.users.emailInvitesSent', { interpolate: { emails: invitedEmails.success.join(', ') }}),
+						title: this.$locale.baseText(
+							invitedEmails.success.length > 1
+								? 'settings.users.usersInvited'
+								: 'settings.users.userInvited',
+						),
+						message: this.$locale.baseText('settings.users.emailInvitesSent', {
+							interpolate: { emails: invitedEmails.success.join(', ') },
+						}),
 					});
 				}
 
@@ -186,13 +199,14 @@ export default mixins(showMessage).extend({
 						this.$showMessage({
 							type: 'error',
 							title: this.$locale.baseText('settings.users.usersEmailedError'),
-							message: this.$locale.baseText('settings.users.emailInvitesSentError', { interpolate: { emails: invitedEmails.error.join(', ') }}),
+							message: this.$locale.baseText('settings.users.emailInvitesSentError', {
+								interpolate: { emails: invitedEmails.error.join(', ') },
+							}),
 						});
 					}, 0); // notifications stack on top of each other otherwise
 				}
 
 				this.modalBus.$emit('close');
-
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.users.usersInvitedError'));
 			}
@@ -203,5 +217,4 @@ export default mixins(showMessage).extend({
 		},
 	},
 });
-
 </script>
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index ad94d7edb9..e72b9640b6 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -1,9 +1,5 @@
 <template>
-	<img
-		:src="basePath + 'n8n-logo-expanded.svg'"
-		:class="$style.img"
-		alt="n8n.io"
-	/>
+	<img :src="basePath + 'n8n-logo-expanded.svg'" :class="$style.img" alt="n8n.io" />
 </template>
 
 <script lang="ts">
@@ -13,9 +9,7 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		basePath(): string {
 			return this.rootStore.baseUrl;
 		},
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
index 394645d8c8..b7c0264613 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
@@ -25,12 +25,13 @@
 				/>
 			</span>
 			{{ $locale.baseText('executionDetails.of') }}
-			<span class="primary-color clickable" :title="$locale.baseText('executionDetails.openWorkflow')">
+			<span
+				class="primary-color clickable"
+				:title="$locale.baseText('executionDetails.openWorkflow')"
+			>
 				<ShortenName :name="workflowName">
 					<template #default="{ shortenedName }">
-						<span @click="openWorkflow(workflowExecution.workflowId)">
-							"{{ shortenedName }}"
-						</span>
+						<span @click="openWorkflow(workflowExecution.workflowId)"> "{{ shortenedName }}" </span>
 					</template>
 				</ShortenName>
 			</span>
@@ -41,27 +42,25 @@
 </template>
 
 <script lang="ts">
-import mixins from "vue-typed-mixins";
+import mixins from 'vue-typed-mixins';
 
-import { IExecutionResponse, IExecutionsSummary } from "../../../Interface";
+import { IExecutionResponse, IExecutionsSummary } from '../../../Interface';
 
-import { titleChange } from "@/mixins/titleChange";
+import { titleChange } from '@/mixins/titleChange';
 
-import ShortenName from "@/components/ShortenName.vue";
-import ReadOnly from "@/components/MainHeader/ExecutionDetails/ReadOnly.vue";
-import { mapStores } from "pinia";
-import { useWorkflowsStore } from "@/stores/workflows";
+import ShortenName from '@/components/ShortenName.vue';
+import ReadOnly from '@/components/MainHeader/ExecutionDetails/ReadOnly.vue';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default mixins(titleChange).extend({
-	name: "ExecutionDetails",
+	name: 'ExecutionDetails',
 	components: {
 		ShortenName,
 		ReadOnly,
 	},
 	computed: {
-		...mapStores(
-			useWorkflowsStore,
-		),
+		...mapStores(useWorkflowsStore),
 		executionId(): string | undefined {
 			return this.$route.params.id;
 		},
@@ -84,10 +83,10 @@ export default mixins(titleChange).extend({
 	},
 	methods: {
 		async openWorkflow(workflowId: string) {
-			this.$titleSet(this.workflowName, "IDLE");
+			this.$titleSet(this.workflowName, 'IDLE');
 			// Change to other workflow
 			this.$router.push({
-				name: "NodeViewExisting",
+				name: 'NodeViewExisting',
 				params: { name: workflowId },
 			});
 		},
@@ -101,12 +100,12 @@ export default mixins(titleChange).extend({
 }
 
 .execution-icon {
- &.success {
-	color: var(--color-success);
- }
- &.warning {
-	 color: var(--color-warning);
- }
+	&.success {
+		color: var(--color-success);
+	}
+	&.warning {
+		color: var(--color-warning);
+	}
 }
 
 .container {
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
index 7f86d8aece..c25955ce1f 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-tooltip class="primary-color" placement="bottom-end" >
+	<n8n-tooltip class="primary-color" placement="bottom-end">
 		<template #content>
 			<div>
 				<span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
@@ -16,7 +16,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	name: "ReadOnly",
+	name: 'ReadOnly',
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 3be8028c64..e0280caec6 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -1,10 +1,15 @@
 <template>
 	<div>
-		<div :class="{'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed}">
+		<div :class="{ 'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
 				<ExecutionDetails v-if="isExecutionPage" />
 				<WorkflowDetails v-else />
-				<tab-bar v-if="onWorkflowPage && !isExecutionPage" :items="tabBarItems" :activeTab="activeHeaderTab" @select="onTabSelected"/>
+				<tab-bar
+					v-if="onWorkflowPage && !isExecutionPage"
+					:items="tabBarItems"
+					:activeTab="activeHeaderTab"
+					@select="onTabSelected"
+				/>
 			</div>
 		</div>
 	</div>
@@ -16,7 +21,12 @@ import { pushConnection } from '@/mixins/pushConnection';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
 import ExecutionDetails from '@/components/MainHeader/ExecutionDetails/ExecutionDetails.vue';
 import TabBar from '@/components/MainHeader/TabBar.vue';
-import { MAIN_HEADER_TABS, PLACEHOLDER_EMPTY_WORKFLOW_ID, STICKY_NODE_TYPE, VIEWS } from '@/constants';
+import {
+	MAIN_HEADER_TABS,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	STICKY_NODE_TYPE,
+	VIEWS,
+} from '@/constants';
 import { IExecutionsSummary, INodeUi, ITabBarItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { Route } from 'vue-router';
@@ -24,121 +34,125 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useNDVStore } from '@/stores/ndv';
 
-export default mixins(
-	pushConnection,
-	workflowHelpers,
-).extend({
-		name: 'MainHeader',
-		components: {
-			WorkflowDetails,
-			ExecutionDetails,
-			TabBar,
+export default mixins(pushConnection, workflowHelpers).extend({
+	name: 'MainHeader',
+	components: {
+		WorkflowDetails,
+		ExecutionDetails,
+		TabBar,
+	},
+	data() {
+		return {
+			activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
+			workflowToReturnTo: '',
+			dirtyState: false,
+		};
+	},
+	computed: {
+		...mapStores(useNDVStore, useUIStore),
+		tabBarItems(): ITabBarItem[] {
+			return [
+				{ value: MAIN_HEADER_TABS.WORKFLOW, label: this.$locale.baseText('generic.workflow') },
+				{ value: MAIN_HEADER_TABS.EXECUTIONS, label: this.$locale.baseText('generic.executions') },
+			];
 		},
-		data() {
-			return {
-				activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
-				workflowToReturnTo: '',
-				dirtyState: false,
-			};
+		isExecutionPage(): boolean {
+			return this.$route.name === VIEWS.EXECUTION;
 		},
-		computed: {
-			...mapStores(
-				useNDVStore,
-				useUIStore,
-			),
-			tabBarItems(): ITabBarItem[] {
-				return [
-					{ value: MAIN_HEADER_TABS.WORKFLOW, label: this.$locale.baseText('generic.workflow') },
-					{ value: MAIN_HEADER_TABS.EXECUTIONS, label: this.$locale.baseText('generic.executions') },
-				];
-			},
-			isExecutionPage (): boolean {
-				return this.$route.name === VIEWS.EXECUTION;
-			},
-			activeNode (): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			hideMenuBar(): boolean {
-				return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
-			},
-			workflowName (): string {
-				return this.workflowsStore.workflowName;
-			},
-			currentWorkflow (): string {
-				return this.$route.params.name || this.workflowsStore.workflowId;
-			},
-			onWorkflowPage(): boolean {
-				return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
-			},
-			activeExecution(): IExecutionsSummary {
-				return this.workflowsStore.activeWorkflowExecution as IExecutionsSummary;
-			},
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
-		mounted() {
-			this.dirtyState = this.uiStore.stateIsDirty;
-			this.syncTabsWithRoute(this.$route);
-			// Initialize the push connection
-			this.pushConnect();
+		hideMenuBar(): boolean {
+			return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
 		},
-		beforeDestroy() {
-			this.pushDisconnect();
+		workflowName(): string {
+			return this.workflowsStore.workflowName;
 		},
-		watch: {
-			$route (to, from){
-				this.syncTabsWithRoute(to);
-			},
+		currentWorkflow(): string {
+			return this.$route.params.name || this.workflowsStore.workflowId;
 		},
-		methods: {
-			syncTabsWithRoute(route: Route): void {
-				if (route.name === VIEWS.EXECUTION_HOME || route.name === VIEWS.EXECUTIONS || route.name === VIEWS.EXECUTION_PREVIEW) {
-					this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
-				} else if (route.name === VIEWS.WORKFLOW || route.name === VIEWS.NEW_WORKFLOW) {
-					this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
-				}
-				const workflowName = route.params.name;
-				if (workflowName !== 'new') {
-					this.workflowToReturnTo = workflowName;
-				}
-			},
-			onTabSelected(tab: string, event: MouseEvent) {
-				switch (tab) {
-					case MAIN_HEADER_TABS.WORKFLOW:
-						if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
-							if (this.$route.name !== VIEWS.WORKFLOW) {
-								this.$router.push({
+		onWorkflowPage(): boolean {
+			return (
+				this.$route.meta &&
+				(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true)
+			);
+		},
+		activeExecution(): IExecutionsSummary {
+			return this.workflowsStore.activeWorkflowExecution as IExecutionsSummary;
+		},
+	},
+	mounted() {
+		this.dirtyState = this.uiStore.stateIsDirty;
+		this.syncTabsWithRoute(this.$route);
+		// Initialize the push connection
+		this.pushConnect();
+	},
+	beforeDestroy() {
+		this.pushDisconnect();
+	},
+	watch: {
+		$route(to, from) {
+			this.syncTabsWithRoute(to);
+		},
+	},
+	methods: {
+		syncTabsWithRoute(route: Route): void {
+			if (
+				route.name === VIEWS.EXECUTION_HOME ||
+				route.name === VIEWS.EXECUTIONS ||
+				route.name === VIEWS.EXECUTION_PREVIEW
+			) {
+				this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
+			} else if (route.name === VIEWS.WORKFLOW || route.name === VIEWS.NEW_WORKFLOW) {
+				this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
+			}
+			const workflowName = route.params.name;
+			if (workflowName !== 'new') {
+				this.workflowToReturnTo = workflowName;
+			}
+		},
+		onTabSelected(tab: string, event: MouseEvent) {
+			switch (tab) {
+				case MAIN_HEADER_TABS.WORKFLOW:
+					if (!['', 'new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(this.workflowToReturnTo)) {
+						if (this.$route.name !== VIEWS.WORKFLOW) {
+							this.$router.push({
 								name: VIEWS.WORKFLOW,
 								params: { name: this.workflowToReturnTo },
 							});
-							}
-						} else {
-							if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
-								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-								this.uiStore.stateIsDirty = this.dirtyState;
-							}
 						}
-						this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
-						break;
-					case MAIN_HEADER_TABS.EXECUTIONS:
-						this.dirtyState = this.uiStore.stateIsDirty;
-						this.workflowToReturnTo = this.currentWorkflow;
-						const routeWorkflowId = this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
-						if (this.activeExecution) {
-							this.$router.push({
+					} else {
+						if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
+							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+							this.uiStore.stateIsDirty = this.dirtyState;
+						}
+					}
+					this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
+					break;
+				case MAIN_HEADER_TABS.EXECUTIONS:
+					this.dirtyState = this.uiStore.stateIsDirty;
+					this.workflowToReturnTo = this.currentWorkflow;
+					const routeWorkflowId =
+						this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
+					if (this.activeExecution) {
+						this.$router
+							.push({
 								name: VIEWS.EXECUTION_PREVIEW,
 								params: { name: routeWorkflowId, executionId: this.activeExecution.id },
-							}).catch(()=>{});;
-						} else {
-							this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: routeWorkflowId } });
-						}
-						// this.modalBus.$emit('closeAll');
-						this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
-						break;
-					default:
-						break;
-				}
-			},
+							})
+							.catch(() => {});
+					} else {
+						this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: routeWorkflowId } });
+					}
+					// this.modalBus.$emit('closeAll');
+					this.activeHeaderTab = MAIN_HEADER_TABS.EXECUTIONS;
+					break;
+				default:
+					break;
+			}
 		},
-	});
+	},
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index fc292a934d..dadb9b62c3 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -1,10 +1,13 @@
 <template>
-	<div v-if="items" :class="{[$style.container]: true, ['tab-bar-container']: true, [$style.menuCollapsed]: mainSidebarCollapsed}">
-		<n8n-radio-buttons
-			:value="activeTab"
-			:options="items"
-			@input="onSelect"
-		/>
+	<div
+		v-if="items"
+		:class="{
+			[$style.container]: true,
+			['tab-bar-container']: true,
+			[$style.menuCollapsed]: mainSidebarCollapsed,
+		}"
+	>
+		<n8n-radio-buttons :value="activeTab" :options="items" @input="onSelect" />
 	</div>
 </template>
 
@@ -33,9 +36,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-		),
+		...mapStores(useUIStore),
 		mainSidebarCollapsed(): boolean {
 			return this.uiStore.sidebarMenuCollapsed;
 		},
@@ -49,7 +50,6 @@ export default Vue.extend({
 </script>
 
 <style module lang="scss">
-
 .container {
 	position: absolute;
 	top: 47px;
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 099eabed5f..2f927b133d 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -39,14 +39,8 @@
 					data-test-id="workflow-tags-dropdown"
 				/>
 			</div>
-			<div
-				v-else-if="currentWorkflowTagIds.length === 0"
-			>
-				<span
-					class="add-tag clickable"
-					data-test-id="new-tag-link"
-					@click="onTagsEditEnable"
-				>
+			<div v-else-if="currentWorkflowTagIds.length === 0">
+				<span class="add-tag clickable" data-test-id="new-tag-link" @click="onTagsEditEnable">
 					+ {{ $locale.baseText('workflowDetails.addTag') }}
 				</span>
 			</div>
@@ -68,26 +62,27 @@
 					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
 				</span>
 				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
-					<n8n-button
-						type="secondary"
-						class="mr-2xs"
-						@click="onShareButtonClick"
-					>
+					<n8n-button type="secondary" class="mr-2xs" @click="onShareButtonClick">
 						{{ $locale.baseText('workflowDetails.share') }}
 					</n8n-button>
 					<template #fallback>
 						<n8n-tooltip>
-							<n8n-button
-								type="secondary"
-								:class="['mr-2xs', $style.disabledShareButton]"
-							>
+							<n8n-button type="secondary" :class="['mr-2xs', $style.disabledShareButton]">
 								{{ $locale.baseText('workflowDetails.share') }}
 							</n8n-button>
 							<template #content>
-								<i18n :path="dynamicTranslations.workflows.sharing.unavailable.description" tag="span">
+								<i18n
+									:path="dynamicTranslations.workflows.sharing.unavailable.description"
+									tag="span"
+								>
 									<template #action>
-										<a :href="dynamicTranslations.workflows.sharing.unavailable.linkURL" target="_blank">
-											{{ $locale.baseText(dynamicTranslations.workflows.sharing.unavailable.action) }}
+										<a
+											:href="dynamicTranslations.workflows.sharing.unavailable.linkURL"
+											target="_blank"
+										>
+											{{
+												$locale.baseText(dynamicTranslations.workflows.sharing.unavailable.action)
+											}}
 										</a>
 									</template>
 								</i18n>
@@ -103,8 +98,18 @@
 					@click="onSaveButtonClick"
 				/>
 				<div :class="$style.workflowMenuContainer">
-					<input :class="$style.hiddenInput" type="file" ref="importFile" data-test-id="workflow-import-input" @change="handleFileImport()">
-					<n8n-action-dropdown :items="workflowMenuItems" data-test-id="workflow-menu" @select="onWorkflowMenuSelect" />
+					<input
+						:class="$style.hiddenInput"
+						type="file"
+						ref="importFile"
+						data-test-id="workflow-import-input"
+						@change="handleFileImport()"
+					/>
+					<n8n-action-dropdown
+						:items="workflowMenuItems"
+						data-test-id="workflow-menu"
+						@select="onWorkflowMenuSelect"
+					/>
 				</div>
 			</template>
 		</PushConnectionTracker>
@@ -112,40 +117,41 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import mixins from "vue-typed-mixins";
+import Vue from 'vue';
+import mixins from 'vue-typed-mixins';
 import {
 	DUPLICATE_MODAL_KEY,
 	EnterpriseEditionFeature,
 	MAX_WORKFLOW_NAME_LENGTH,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	VIEWS, WORKFLOW_MENU_ACTIONS,
+	VIEWS,
+	WORKFLOW_MENU_ACTIONS,
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	WORKFLOW_SHARE_MODAL_KEY,
-} from "@/constants";
+} from '@/constants';
 
-import ShortenName from "@/components/ShortenName.vue";
-import TagsContainer from "@/components/TagsContainer.vue";
-import PushConnectionTracker from "@/components/PushConnectionTracker.vue";
-import WorkflowActivator from "@/components/WorkflowActivator.vue";
-import { workflowHelpers } from "@/mixins/workflowHelpers";
-import SaveButton from "@/components/SaveButton.vue";
-import TagsDropdown from "@/components/TagsDropdown.vue";
-import InlineTextEdit from "@/components/InlineTextEdit.vue";
-import BreakpointsObserver from "@/components/BreakpointsObserver.vue";
-import {IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare, NestedRecord} from "@/Interface";
+import ShortenName from '@/components/ShortenName.vue';
+import TagsContainer from '@/components/TagsContainer.vue';
+import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
+import WorkflowActivator from '@/components/WorkflowActivator.vue';
+import { workflowHelpers } from '@/mixins/workflowHelpers';
+import SaveButton from '@/components/SaveButton.vue';
+import TagsDropdown from '@/components/TagsDropdown.vue';
+import InlineTextEdit from '@/components/InlineTextEdit.vue';
+import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
+import { IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare, NestedRecord } from '@/Interface';
 
 import { saveAs } from 'file-saver';
-import { titleChange } from "@/mixins/titleChange";
+import { titleChange } from '@/mixins/titleChange';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
-import { mapStores } from "pinia";
-import { useUIStore } from "@/stores/ui";
-import { useSettingsStore } from "@/stores/settings";
-import { useWorkflowsStore } from "@/stores/workflows";
-import { useRootStore } from "@/stores/n8nRootStore";
-import { useTagsStore } from "@/stores/tags";
-import {getWorkflowPermissions, IPermissions} from "@/permissions";
-import {useUsersStore} from "@/stores/users";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useTagsStore } from '@/stores/tags';
+import { getWorkflowPermissions, IPermissions } from '@/permissions';
+import { useUsersStore } from '@/stores/users';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -157,7 +163,7 @@ const hasChanged = (prev: string[], curr: string[]) => {
 };
 
 export default mixins(workflowHelpers, titleChange).extend({
-	name: "WorkflowDetails",
+	name: 'WorkflowDetails',
 	components: {
 		TagsContainer,
 		PushConnectionTracker,
@@ -204,7 +210,11 @@ export default mixins(workflowHelpers, titleChange).extend({
 			return this.workflowsStore.workflowTags;
 		},
 		isNewWorkflow(): boolean {
-			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
+			return (
+				!this.currentWorkflowId ||
+				this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
+				this.currentWorkflowId === 'new'
+			);
 		},
 		isWorkflowSaving(): boolean {
 			return this.uiStore.isActionActive('workflowSaving');
@@ -216,10 +226,17 @@ export default mixins(workflowHelpers, titleChange).extend({
 			return this.workflowsStore.workflowId;
 		},
 		onWorkflowPage(): boolean {
-			return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
+			return (
+				this.$route.meta &&
+				(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true)
+			);
 		},
 		onExecutionsTab(): boolean {
-			return [ VIEWS.EXECUTION_HOME.toString(), VIEWS.EXECUTIONS.toString(), VIEWS.EXECUTION_PREVIEW ].includes(this.$route.name || '');
+			return [
+				VIEWS.EXECUTION_HOME.toString(),
+				VIEWS.EXECUTIONS.toString(),
+				VIEWS.EXECUTION_PREVIEW,
+			].includes(this.$route.name || '');
 		},
 		workflowPermissions(): IPermissions {
 			return getWorkflowPermissions(this.usersStore.currentUser, this.workflow);
@@ -251,31 +268,40 @@ export default mixins(workflowHelpers, titleChange).extend({
 					label: this.$locale.baseText('generic.settings'),
 					disabled: !this.onWorkflowPage || this.isNewWorkflow,
 				},
-				...(this.workflowPermissions.delete ? [
-					{
-						id: WORKFLOW_MENU_ACTIONS.DELETE,
-						label: this.$locale.baseText('menuActions.delete'),
-						disabled: !this.onWorkflowPage || this.isNewWorkflow,
-						customClass: this.$style.deleteItem,
-						divided: true,
-					},
-				] : []),
+				...(this.workflowPermissions.delete
+					? [
+							{
+								id: WORKFLOW_MENU_ACTIONS.DELETE,
+								label: this.$locale.baseText('menuActions.delete'),
+								disabled: !this.onWorkflowPage || this.isNewWorkflow,
+								customClass: this.$style.deleteItem,
+								divided: true,
+							},
+					  ]
+					: []),
 			];
 		},
 	},
 	methods: {
-		async onSaveButtonClick () {
+		async onSaveButtonClick() {
 			let currentId = undefined;
 			if (this.currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 				currentId = this.currentWorkflowId;
 			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
 				currentId = this.$route.params.name;
 			}
-			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
+			const saved = await this.saveCurrentWorkflow({
+				id: currentId,
+				name: this.workflowName,
+				tags: this.currentWorkflowTagIds,
+			});
 			if (saved) await this.settingsStore.fetchPromptsData();
 		},
 		onShareButtonClick() {
-			this.uiStore.openModalWithData({ name: WORKFLOW_SHARE_MODAL_KEY, data: { id: this.currentWorkflowId } });
+			this.uiStore.openModalWithData({
+				name: WORKFLOW_SHARE_MODAL_KEY,
+				data: { id: this.currentWorkflowId },
+			});
 		},
 		onTagsEditEnable() {
 			this.$data.appliedTagIds = this.currentWorkflowTagIds;
@@ -305,7 +331,10 @@ export default mixins(workflowHelpers, titleChange).extend({
 			this.$data.tagsSaving = true;
 
 			const saved = await this.saveCurrentWorkflow({ tags });
-			this.$telemetry.track('User edited workflow tags', { workflow_id: this.currentWorkflowId as string, new_tag_count: tags.length });
+			this.$telemetry.track('User edited workflow tags', {
+				workflow_id: this.currentWorkflowId as string,
+				new_tag_count: tags.length,
+			});
 
 			this.$data.tagsSaving = false;
 			if (saved) {
@@ -332,7 +361,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 				this.$showMessage({
 					title: this.$locale.baseText('workflowDetails.showMessage.title'),
 					message: this.$locale.baseText('workflowDetails.showMessage.message'),
-					type: "error",
+					type: 'error',
 				});
 
 				cb(false);
@@ -392,7 +421,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 				}
 				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
 					const workflowData = await this.getWorkflowDataToSave();
-					const {tags, ...data} = workflowData;
+					const { tags, ...data } = workflowData;
 					if (data.id && typeof data.id === 'string') {
 						data.id = parseInt(data.id, 10);
 					}
@@ -402,8 +431,8 @@ export default mixins(workflowHelpers, titleChange).extend({
 						meta: {
 							instanceId: this.rootStore.instanceId,
 						},
-						tags: (tags || []).map(tagId => {
-							const {usageCount, ...tag} = this.tagsStore.getTagById(tagId);
+						tags: (tags || []).map((tagId) => {
+							const { usageCount, ...tag } = this.tagsStore.getTagById(tagId);
 
 							return tag;
 						}),
@@ -422,16 +451,16 @@ export default mixins(workflowHelpers, titleChange).extend({
 				}
 				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
 					try {
-						const promptResponse = await this.$prompt(
-						this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
-						this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
-						{
+						const promptResponse = (await this.$prompt(
+							this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
+							this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+							{
 								confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
 								cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
 								inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
 								inputPattern: /^http[s]?:\/\/.*\.json$/i,
 							},
-						) as MessageBoxInputData;
+						)) as MessageBoxInputData;
 
 						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
 					} catch (e) {}
@@ -447,10 +476,9 @@ export default mixins(workflowHelpers, titleChange).extend({
 				}
 				case WORKFLOW_MENU_ACTIONS.DELETE: {
 					const deleteConfirmed = await this.confirmMessage(
-						this.$locale.baseText(
-							'mainSidebar.confirmMessage.workflowDelete.message',
-							{ interpolate: { workflowName: this.workflowName } },
-						),
+						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+							interpolate: { workflowName: this.workflowName },
+						}),
 						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
 						'warning',
 						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 375f4fee1b..20753f3040 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,51 +1,88 @@
 <template>
-	<div id="side-menu" :class="{
-		['side-menu']: true,
-		[$style.sideMenu]: true,
-		[$style.sideMenuCollapsed]: isCollapsed
-	}">
+	<div
+		id="side-menu"
+		:class="{
+			['side-menu']: true,
+			[$style.sideMenu]: true,
+			[$style.sideMenuCollapsed]: isCollapsed,
+		}"
+	>
 		<div
 			id="collapse-change-button"
-			:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
-			@click="toggleCollapse">
-		</div>
+			:class="{
+				['clickable']: true,
+				[$style.sideMenuCollapseButton]: true,
+				[$style.expandedButton]: !isCollapsed,
+			}"
+			@click="toggleCollapse"
+		></div>
 		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
 			<template #header>
 				<div :class="$style.logo">
-					<img :src="basePath +  (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>
+					<img
+						:src="basePath + (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')"
+						:class="$style.icon"
+						alt="n8n"
+					/>
 				</div>
 			</template>
 			<template #menuSuffix v-if="hasVersionUpdates">
 				<div :class="$style.updates" @click="openUpdatesPanel">
-						<div :class="$style.giftContainer">
-							<GiftNotificationIcon />
-						</div>
-						<n8n-text :class="{['ml-xs']: true, [$style.expanded]: fullyExpanded }" color="text-base">
-							{{ nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : '' }}
-						</n8n-text>
+					<div :class="$style.giftContainer">
+						<GiftNotificationIcon />
+					</div>
+					<n8n-text
+						:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
+						color="text-base"
+					>
+						{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
+							nextVersions.length > 1 ? 's' : ''
+						}}
+					</n8n-text>
 				</div>
 			</template>
 			<template #footer v-if="showUserArea">
 				<div :class="$style.userArea">
 					<div class="ml-3xs">
 						<!-- This dropdown is only enabled when sidebar is collapsed -->
-						<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
-							<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
-								<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" />
+						<el-dropdown
+							:disabled="!isCollapsed"
+							placement="right-end"
+							trigger="click"
+							@command="onUserActionToggle"
+						>
+							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
+								<n8n-avatar
+									:firstName="usersStore.currentUser.firstName"
+									:lastName="usersStore.currentUser.lastName"
+									size="small"
+								/>
 							</div>
 							<template #dropdown>
 								<el-dropdown-menu>
-									<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
-									<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
+									<el-dropdown-item command="settings">{{
+										$locale.baseText('settings')
+									}}</el-dropdown-item>
+									<el-dropdown-item command="logout">{{
+										$locale.baseText('auth.signout')
+									}}</el-dropdown-item>
 								</el-dropdown-menu>
 							</template>
 						</el-dropdown>
 					</div>
-					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-text size="small" :bold="true" color="text-dark">{{usersStore.currentUser.fullName}}</n8n-text>
+					<div
+						:class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"
+					>
+						<n8n-text size="small" :bold="true" color="text-dark">{{
+							usersStore.currentUser.fullName
+						}}</n8n-text>
 					</div>
 					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
+						<n8n-action-dropdown
+							:items="userMenuItems"
+							placement="top-start"
+							@select="onUserActionToggle"
+						/>
 					</div>
 				</div>
 			</template>
@@ -54,11 +91,7 @@
 </template>
 
 <script lang="ts">
-import {
-	IExecutionResponse,
-	IMenuItem,
-	IVersion,
-} from '../Interface';
+import { IExecutionResponse, IMenuItem, IVersion } from '../Interface';
 
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
@@ -102,372 +135,379 @@ export default mixins(
 	workflowRun,
 	userHelpers,
 	debounceHelper,
-)
-	.extend({
-		name: 'MainSidebar',
-		components: {
-			ExecutionsList,
-			GiftNotificationIcon,
-			WorkflowSettings,
+).extend({
+	name: 'MainSidebar',
+	components: {
+		ExecutionsList,
+		GiftNotificationIcon,
+		WorkflowSettings,
+	},
+	data() {
+		return {
+			// @ts-ignore
+			basePath: '',
+			fullyExpanded: false,
+		};
+	},
+	computed: {
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useVersionsStore,
+			useWorkflowsStore,
+		),
+		hasVersionUpdates(): boolean {
+			return this.versionsStore.hasVersionUpdates;
 		},
-		data () {
-			return {
-				// @ts-ignore
-				basePath: '',
-				fullyExpanded: false,
-			};
+		nextVersions(): IVersion[] {
+			return this.versionsStore.nextVersions;
 		},
-		computed: {
-			...mapStores(
-				useRootStore,
-				useSettingsStore,
-				useUIStore,
-				useUsersStore,
-				useVersionsStore,
-				useWorkflowsStore,
-			),
-			hasVersionUpdates(): boolean {
-				return this.versionsStore.hasVersionUpdates;
-			},
-			nextVersions(): IVersion[] {
-				return this.versionsStore.nextVersions;
-			},
-			isCollapsed(): boolean {
-				return this.uiStore.sidebarMenuCollapsed;
-			},
-			canUserAccessSettings(): boolean {
-				const accessibleRoute = this.findFirstAccessibleSettingsRoute();
-				return accessibleRoute !== null;
-			},
-			showUserArea(): boolean {
-				return this.settingsStore.isUserManagementEnabled && this.usersStore.canUserAccessSidebarUserInfo && this.usersStore.currentUser !== null;
-			},
-			workflowExecution (): IExecutionResponse | null {
-				return this.workflowsStore.getWorkflowExecution;
-			},
-			userMenuItems (): object[] {
-				return [
-					{
-						id: 'settings',
-						label: this.$locale.baseText('settings'),
-					},
-					{
-						id: 'logout',
-						label: this.$locale.baseText('auth.signout'),
-					},
-				];
-			},
- 			mainMenuItems (): IMenuItem[] {
-				const items: IMenuItem[] = [];
-				const injectedItems =  this.uiStore.sidebarMenuItems;
+		isCollapsed(): boolean {
+			return this.uiStore.sidebarMenuCollapsed;
+		},
+		canUserAccessSettings(): boolean {
+			const accessibleRoute = this.findFirstAccessibleSettingsRoute();
+			return accessibleRoute !== null;
+		},
+		showUserArea(): boolean {
+			return (
+				this.settingsStore.isUserManagementEnabled &&
+				this.usersStore.canUserAccessSidebarUserInfo &&
+				this.usersStore.currentUser !== null
+			);
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.workflowsStore.getWorkflowExecution;
+		},
+		userMenuItems(): object[] {
+			return [
+				{
+					id: 'settings',
+					label: this.$locale.baseText('settings'),
+				},
+				{
+					id: 'logout',
+					label: this.$locale.baseText('auth.signout'),
+				},
+			];
+		},
+		mainMenuItems(): IMenuItem[] {
+			const items: IMenuItem[] = [];
+			const injectedItems = this.uiStore.sidebarMenuItems;
 
-				if (injectedItems && injectedItems.length > 0) {
-					for(const item of injectedItems) {
-						items.push(
-								{
-								id: item.id,
-								// @ts-ignore
-								icon: item.properties ? item.properties.icon : '',
-								// @ts-ignore
-								label: item.properties ? item.properties.title : '',
-								position: item.position,
-								type: item.properties?.href ? 'link' : 'regular',
-								properties: item.properties,
-							} as IMenuItem,
-						);
-					}
-				};
+			if (injectedItems && injectedItems.length > 0) {
+				for (const item of injectedItems) {
+					items.push({
+						id: item.id,
+						// @ts-ignore
+						icon: item.properties ? item.properties.icon : '',
+						// @ts-ignore
+						label: item.properties ? item.properties.title : '',
+						position: item.position,
+						type: item.properties?.href ? 'link' : 'regular',
+						properties: item.properties,
+					} as IMenuItem);
+				}
+			}
 
-				const regularItems: IMenuItem[] = [
-					{
-						id: 'workflows',
-						icon: 'network-wired',
-						label: this.$locale.baseText('mainSidebar.workflows'),
-						position: 'top',
-						activateOnRouteNames: [ VIEWS.WORKFLOWS ],
-					},
-					{
-						id: 'templates',
-						icon: 'box-open',
-						label: this.$locale.baseText('mainSidebar.templates'),
-						position: 'top',
-						available: this.settingsStore.isTemplatesEnabled,
-						activateOnRouteNames: [ VIEWS.TEMPLATES ],
-					},
-					{
-						id: 'credentials',
-						icon: 'key',
-						label: this.$locale.baseText('mainSidebar.credentials'),
-						customIconSize: 'medium',
-						position: 'top',
-						activateOnRouteNames: [ VIEWS.CREDENTIALS ],
-					},
-					{
-						id: 'executions',
-						icon: 'tasks',
-						label: this.$locale.baseText('generic.executions'),
-						position: 'top',
-					},
-					{
-						id: 'settings',
-						icon: 'cog',
-						label: this.$locale.baseText('settings'),
-						position: 'bottom',
-						available: this.canUserAccessSettings && this.usersStore.currentUser !== null,
-						activateOnRouteNames: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
-					},
-					{
-						id: 'help',
-						icon: 'question',
-						label: 'Help',
-						position: 'bottom',
-						children: [
-							{
-								id: 'quickstart',
-								icon: 'video',
-								label: this.$locale.baseText('mainSidebar.helpMenuItems.quickstart'),
-								type: 'link',
-								properties: {
-									href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
-									newWindow: true,
-								},
+			const regularItems: IMenuItem[] = [
+				{
+					id: 'workflows',
+					icon: 'network-wired',
+					label: this.$locale.baseText('mainSidebar.workflows'),
+					position: 'top',
+					activateOnRouteNames: [VIEWS.WORKFLOWS],
+				},
+				{
+					id: 'templates',
+					icon: 'box-open',
+					label: this.$locale.baseText('mainSidebar.templates'),
+					position: 'top',
+					available: this.settingsStore.isTemplatesEnabled,
+					activateOnRouteNames: [VIEWS.TEMPLATES],
+				},
+				{
+					id: 'credentials',
+					icon: 'key',
+					label: this.$locale.baseText('mainSidebar.credentials'),
+					customIconSize: 'medium',
+					position: 'top',
+					activateOnRouteNames: [VIEWS.CREDENTIALS],
+				},
+				{
+					id: 'executions',
+					icon: 'tasks',
+					label: this.$locale.baseText('generic.executions'),
+					position: 'top',
+				},
+				{
+					id: 'settings',
+					icon: 'cog',
+					label: this.$locale.baseText('settings'),
+					position: 'bottom',
+					available: this.canUserAccessSettings && this.usersStore.currentUser !== null,
+					activateOnRouteNames: [VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS],
+				},
+				{
+					id: 'help',
+					icon: 'question',
+					label: 'Help',
+					position: 'bottom',
+					children: [
+						{
+							id: 'quickstart',
+							icon: 'video',
+							label: this.$locale.baseText('mainSidebar.helpMenuItems.quickstart'),
+							type: 'link',
+							properties: {
+								href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+								newWindow: true,
 							},
-							{
-								id: 'docs',
-								icon: 'book',
-								label: this.$locale.baseText('mainSidebar.helpMenuItems.documentation'),
-								type: 'link',
-								properties: {
-									href: 'https://docs.n8n.io',
-									newWindow: true,
-								},
+						},
+						{
+							id: 'docs',
+							icon: 'book',
+							label: this.$locale.baseText('mainSidebar.helpMenuItems.documentation'),
+							type: 'link',
+							properties: {
+								href: 'https://docs.n8n.io',
+								newWindow: true,
 							},
-							{
-								id: 'forum',
-								icon: 'users',
-								label: this.$locale.baseText('mainSidebar.helpMenuItems.forum'),
-								type: 'link',
-								properties: {
-									href: 'https://community.n8n.io',
-									newWindow: true,
-								},
+						},
+						{
+							id: 'forum',
+							icon: 'users',
+							label: this.$locale.baseText('mainSidebar.helpMenuItems.forum'),
+							type: 'link',
+							properties: {
+								href: 'https://community.n8n.io',
+								newWindow: true,
 							},
-							{
-								id: 'examples',
-								icon: 'graduation-cap',
-								label: this.$locale.baseText('mainSidebar.helpMenuItems.course'),
-								type: 'link',
-								properties: {
-									href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
-									newWindow: true,
-								},
+						},
+						{
+							id: 'examples',
+							icon: 'graduation-cap',
+							label: this.$locale.baseText('mainSidebar.helpMenuItems.course'),
+							type: 'link',
+							properties: {
+								href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+								newWindow: true,
 							},
-							{
-								id: 'about',
-								icon: 'info',
-								label: this.$locale.baseText('mainSidebar.aboutN8n'),
-								position: 'bottom',
-							},
-						],
-					},
-				];
-				return [ ...items, ...regularItems ];
-			},
+						},
+						{
+							id: 'about',
+							icon: 'info',
+							label: this.$locale.baseText('mainSidebar.aboutN8n'),
+							position: 'bottom',
+						},
+					],
+				},
+			];
+			return [...items, ...regularItems];
 		},
-		async mounted() {
-			this.basePath = this.rootStore.baseUrl;
-			if (this.$refs.user) {
-				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
+	},
+	async mounted() {
+		this.basePath = this.rootStore.baseUrl;
+		if (this.$refs.user) {
+			this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
+		}
+		if (window.innerWidth < 900 || this.uiStore.isNodeView) {
+			this.uiStore.sidebarMenuCollapsed = true;
+		} else {
+			this.uiStore.sidebarMenuCollapsed = false;
+		}
+		await Vue.nextTick();
+		this.fullyExpanded = !this.isCollapsed;
+	},
+	created() {
+		window.addEventListener('resize', this.onResize);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.onResize);
+	},
+	methods: {
+		trackHelpItemClick(itemType: string) {
+			this.$telemetry.track('User clicked help resource', {
+				type: itemType,
+				workflow_id: this.workflowsStore.workflowId,
+			});
+		},
+		async onUserActionToggle(action: string) {
+			switch (action) {
+				case 'logout':
+					this.onLogout();
+					break;
+				case 'settings':
+					this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
+					break;
+				default:
+					break;
 			}
-			if (window.innerWidth < 900 || this.uiStore.isNodeView) {
-				this.uiStore.sidebarMenuCollapsed = true;
-			} else {
-				this.uiStore.sidebarMenuCollapsed = false;
+		},
+		async onLogout() {
+			try {
+				await this.usersStore.logout();
+				const route = this.$router.resolve({ name: VIEWS.SIGNIN });
+				window.open(route.href, '_self');
+			} catch (e) {
+				this.$showError(e, this.$locale.baseText('auth.signout.error'));
 			}
-			await Vue.nextTick();
-			this.fullyExpanded = !this.isCollapsed;
 		},
-		created() {
-			window.addEventListener("resize", this.onResize);
-		},
-		destroyed() {
-			window.removeEventListener("resize", this.onResize);
-		},
-		methods: {
-			trackHelpItemClick (itemType: string) {
-				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.workflowsStore.workflowId });
-			},
-			async onUserActionToggle(action: string) {
-				switch (action) {
-					case 'logout':
-						this.onLogout();
-						break;
-					case 'settings':
-						this.$router.push({name: VIEWS.PERSONAL_SETTINGS});
-						break;
-					default:
-						break;
-				}
-			},
-			async onLogout() {
-				try {
-					await this.usersStore.logout();
-					const route = this.$router.resolve({ name: VIEWS.SIGNIN });
-					window.open(route.href, '_self');
-				} catch (e) {
-					this.$showError(e, this.$locale.baseText('auth.signout.error'));
-				}
-			},
-			toggleCollapse () {
-				this.uiStore.toggleSidebarMenuCollapse();
-				// When expanding, delay showing some element to ensure smooth animation
-				if (!this.isCollapsed) {
-					setTimeout(() => {
-						this.fullyExpanded = !this.isCollapsed;
-					}, 300);
-				} else {
+		toggleCollapse() {
+			this.uiStore.toggleSidebarMenuCollapse();
+			// When expanding, delay showing some element to ensure smooth animation
+			if (!this.isCollapsed) {
+				setTimeout(() => {
 					this.fullyExpanded = !this.isCollapsed;
+				}, 300);
+			} else {
+				this.fullyExpanded = !this.isCollapsed;
+			}
+		},
+		openUpdatesPanel() {
+			this.uiStore.openModal(VERSIONS_MODAL_KEY);
+		},
+		async handleSelect(key: string) {
+			switch (key) {
+				case 'workflows': {
+					if (this.$router.currentRoute.name !== VIEWS.WORKFLOWS) {
+						this.$router.push({ name: VIEWS.WORKFLOWS });
+					}
+					break;
 				}
-			},
-			openUpdatesPanel() {
-				this.uiStore.openModal(VERSIONS_MODAL_KEY);
-			},
-			async handleSelect (key: string) {
-				switch (key) {
-					case 'workflows': {
-						if (this.$router.currentRoute.name !== VIEWS.WORKFLOWS) {
-							this.$router.push({name: VIEWS.WORKFLOWS});
-						}
-						break;
+				case 'templates': {
+					if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
+						this.$router.push({ name: VIEWS.TEMPLATES });
 					}
-					case 'templates': {
-						if (this.$router.currentRoute.name !== VIEWS.TEMPLATES) {
-							this.$router.push({ name: VIEWS.TEMPLATES });
-						}
-						break;
-					}
-					case 'credentials': {
-						if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
-							this.$router.push({name: VIEWS.CREDENTIALS});
-						}
-						break;
-					}
-					case 'executions': {
-						this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
-						break;
-					}
-					case 'settings': {
-						const defaultRoute = this.findFirstAccessibleSettingsRoute();
-						if (defaultRoute) {
-							const routeProps = this.$router.resolve({ name: defaultRoute });
-							if (this.$router.currentRoute.name !== defaultRoute) {
-								this.$router.push(routeProps.route.path);
-							}
-						}
-						break;
-					}
-					case 'about': {
-						this.trackHelpItemClick('about');
-						this.uiStore.openModal(ABOUT_MODAL_KEY);
-						break;
-					}
-					case 'quickstart':
-					case 'docs':
-					case 'forum':
-					case 'examples' : {
-						this.trackHelpItemClick(key);
-						break;
-					}
-					default: break;
+					break;
 				}
-			},
-			async createNewWorkflow (): Promise<void> {
-				const result = this.uiStore.stateIsDirty;
-				if(result) {
-					const confirmModal = await this.confirmModal(
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-						'warning',
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-						true,
-					);
-					if (confirmModal === MODAL_CONFIRMED) {
-						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) await this.settingsStore.fetchPromptsData();
-						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-							this.$root.$emit('newWorkflow');
-						} else {
-							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-						}
-						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-							type: 'success',
-						});
-					} else if (confirmModal === MODAL_CANCEL) {
-						this.uiStore.stateIsDirty = false;
-						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-							this.$root.$emit('newWorkflow');
-						} else {
-							this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-						}
-						this.$showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
-							type: 'success',
-						});
-					} else if (confirmModal === MODAL_CLOSE) {
-						return;
+				case 'credentials': {
+					if (this.$router.currentRoute.name !== VIEWS.CREDENTIALS) {
+						this.$router.push({ name: VIEWS.CREDENTIALS });
 					}
-				} else {
-					if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+					break;
+				}
+				case 'executions': {
+					this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
+					break;
+				}
+				case 'settings': {
+					const defaultRoute = this.findFirstAccessibleSettingsRoute();
+					if (defaultRoute) {
+						const routeProps = this.$router.resolve({ name: defaultRoute });
+						if (this.$router.currentRoute.name !== defaultRoute) {
+							this.$router.push(routeProps.route.path);
+						}
+					}
+					break;
+				}
+				case 'about': {
+					this.trackHelpItemClick('about');
+					this.uiStore.openModal(ABOUT_MODAL_KEY);
+					break;
+				}
+				case 'quickstart':
+				case 'docs':
+				case 'forum':
+				case 'examples': {
+					this.trackHelpItemClick(key);
+					break;
+				}
+				default:
+					break;
+			}
+		},
+		async createNewWorkflow(): Promise<void> {
+			const result = this.uiStore.stateIsDirty;
+			if (result) {
+				const confirmModal = await this.confirmModal(
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					'warning',
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+					true,
+				);
+				if (confirmModal === MODAL_CONFIRMED) {
+					const saved = await this.saveCurrentWorkflow({}, false);
+					if (saved) await this.settingsStore.fetchPromptsData();
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
+						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+					}
+					this.$showMessage({
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
+						type: 'success',
+					});
+				} else if (confirmModal === MODAL_CANCEL) {
+					this.uiStore.stateIsDirty = false;
+					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+						this.$root.$emit('newWorkflow');
+					} else {
 						this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 					}
 					this.$showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
 						type: 'success',
 					});
+				} else if (confirmModal === MODAL_CLOSE) {
+					return;
 				}
-				this.$titleReset();
-			},
-			findFirstAccessibleSettingsRoute () {
-				// Get all settings rotes by filtering them by pageCategory property
-				const settingsRoutes = this.$router.getRoutes().filter(
-					category => category.meta.telemetry &&
-						category.meta.telemetry.pageCategory === 'settings',
-				).map(route => route.name || '');
-				let defaultSettingsRoute = null;
-
-				for (const route of settingsRoutes) {
-					if (this.canUserAccessRouteByName(route)) {
-						defaultSettingsRoute = route;
-						break;
-					}
+			} else {
+				if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
+					this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 				}
-				return defaultSettingsRoute;
-			},
-			onResize (event: UIEvent) {
-				this.callDebounced("onResizeEnd", { debounceTime: 100 }, event);
-			},
-			onResizeEnd (event: UIEvent) {
-				const browserWidth = (event.target as Window).outerWidth;
-				this.checkWidthAndAdjustSidebar(browserWidth);
-			},
-			checkWidthAndAdjustSidebar (width: number) {
-				if (width < 900) {
-					this.uiStore.sidebarMenuCollapsed = true;
-					Vue.nextTick(() => {
-						this.fullyExpanded = !this.isCollapsed;
-					});
-				}
-			},
+				this.$showMessage({
+					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
+					type: 'success',
+				});
+			}
+			this.$titleReset();
 		},
-	});
+		findFirstAccessibleSettingsRoute() {
+			// Get all settings rotes by filtering them by pageCategory property
+			const settingsRoutes = this.$router
+				.getRoutes()
+				.filter(
+					(category) =>
+						category.meta.telemetry && category.meta.telemetry.pageCategory === 'settings',
+				)
+				.map((route) => route.name || '');
+			let defaultSettingsRoute = null;
+
+			for (const route of settingsRoutes) {
+				if (this.canUserAccessRouteByName(route)) {
+					defaultSettingsRoute = route;
+					break;
+				}
+			}
+			return defaultSettingsRoute;
+		},
+		onResize(event: UIEvent) {
+			this.callDebounced('onResizeEnd', { debounceTime: 100 }, event);
+		},
+		onResizeEnd(event: UIEvent) {
+			const browserWidth = (event.target as Window).outerWidth;
+			this.checkWidthAndAdjustSidebar(browserWidth);
+		},
+		checkWidthAndAdjustSidebar(width: number) {
+			if (width < 900) {
+				this.uiStore.sidebarMenuCollapsed = true;
+				Vue.nextTick(() => {
+					this.fullyExpanded = !this.isCollapsed;
+				});
+			}
+		},
+	},
+});
 </script>
 
 <style lang="scss" module>
-
 .sideMenu {
 	position: relative;
 	height: 100%;
@@ -518,7 +558,7 @@ export default mixins(
 		left: px;
 		top: -2.5px;
 		transform: rotate(270deg);
-		content: "\e6df";
+		content: '\e6df';
 		font-family: element-icons;
 		font-size: var(--font-size-2xs);
 		font-weight: bold;
@@ -545,14 +585,19 @@ export default mixins(
 	height: 26px;
 	cursor: pointer;
 
-	svg {	color: var(--color-text-base) !important; }
+	svg {
+		color: var(--color-text-base) !important;
+	}
 	span {
 		display: none;
-		&.expanded { display: initial; }
+		&.expanded {
+			display: initial;
+		}
 	}
 
 	&:hover {
-		&, & svg {
+		&,
+		& svg {
 			color: var(--color-text-dark) !important;
 		}
 	}
@@ -591,8 +636,9 @@ export default mixins(
 	}
 }
 
-
 @media screen and (max-height: 470px) {
-	:global(#help) { display: none; }
+	:global(#help) {
+		display: none;
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 59f31db186..06480ffba8 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -2,7 +2,7 @@
 	<el-dialog
 		:visible="uiStore.isModalOpen(this.$props.name)"
 		:before-close="closeDialog"
-		:class="{'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable}"
+		:class="{ 'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable }"
 		:width="width"
 		:show-close="showClose"
 		:custom-class="getCustomClass()"
@@ -18,15 +18,20 @@
 		<template #title v-else-if="title">
 			<div :class="centerTitle ? $style.centerTitle : ''">
 				<div v-if="title">
-					<n8n-heading tag="h1" size="xlarge">{{title}}</n8n-heading>
+					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
 				</div>
 				<div v-if="subtitle" :class="$style.subtitle">
-					<n8n-heading tag="h3" size="small" color="text-light">{{subtitle}}</n8n-heading>
+					<n8n-heading tag="h3" size="small" color="text-light">{{ subtitle }}</n8n-heading>
 				</div>
 			</div>
 		</template>
-		<div class="modal-content" @keydown.stop @keydown.enter="handleEnter" @keydown.esc="closeDialog">
-			<slot v-if="!loading"  name="content"/>
+		<div
+			class="modal-content"
+			@keydown.stop
+			@keydown.enter="handleEnter"
+			@keydown.esc="closeDialog"
+		>
+			<slot v-if="!loading" name="content" />
 			<div :class="$style.loader" v-else>
 				<n8n-spinner />
 			</div>
@@ -38,12 +43,12 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 import { useUIStore } from '@/stores/ui';
-import { mapStores } from "pinia";
+import { mapStores } from 'pinia';
 
 export default Vue.extend({
-	name: "Modal",
+	name: 'Modal',
 	props: {
 		name: {
 			type: String,
@@ -136,7 +141,7 @@ export default Vue.extend({
 	computed: {
 		...mapStores(useUIStore),
 		styles() {
-			const styles: {[prop: string]: string} = {};
+			const styles: { [prop: string]: string } = {};
 			if (this.height) {
 				styles['--dialog-height'] = this.height;
 			}
@@ -173,7 +178,8 @@ export default Vue.extend({
 		async closeDialog() {
 			if (this.beforeClose) {
 				const shouldClose = await this.beforeClose();
-				if (shouldClose === false) { // must be strictly false to stop modal from closing
+				if (shouldClose === false) {
+					// must be strictly false to stop modal from closing
 					return;
 				}
 			}
@@ -224,9 +230,9 @@ export default Vue.extend({
 
 <style lang="scss" module>
 .center {
-		display: flex;
-		align-items: center;
-		justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .loader {
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 43eb0386a2..5ee756c9c9 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -6,25 +6,25 @@
 		:before-close="close"
 		:modal="modal"
 		:wrapperClosable="wrapperClosable"
-		>
+	>
 		<template #title>
 			<slot name="header" />
 		</template>
 		<template>
 			<span @keydown.stop>
-				<slot name="content"/>
+				<slot name="content" />
 			</span>
 		</template>
 	</el-drawer>
 </template>
 
 <script lang="ts">
-import { useUIStore } from "@/stores/ui";
-import { mapStores } from "pinia";
-import Vue from "vue";
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from 'pinia';
+import Vue from 'vue';
 
 export default Vue.extend({
-	name: "ModalDrawer",
+	name: 'ModalDrawer',
 	props: {
 		name: {
 			type: String,
@@ -88,7 +88,8 @@ export default Vue.extend({
 		async close() {
 			if (this.beforeClose) {
 				const shouldClose = await this.beforeClose();
-				if (shouldClose === false) { // must be strictly false to stop modal from closing
+				if (shouldClose === false) {
+					// must be strictly false to stop modal from closing
 					return;
 				}
 			}
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index c4f1b40484..0696e2b706 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,7 +1,5 @@
 <template>
-	<div
-			v-if="uiStore.isModalOpen(name) || keepAlive"
-	>
+	<div v-if="uiStore.isModalOpen(name) || keepAlive">
 		<slot
 			:modalName="name"
 			:active="uiStore.isModalActive(name)"
@@ -14,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 import { useUIStore } from '@/stores/ui';
-import { mapStores } from "pinia";
+import { mapStores } from 'pinia';
 
 export default Vue.extend({
-	name: "ModalRoot",
+	name: 'ModalRoot',
 	props: {
 		name: {
 			type: String,
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index ce072545d3..96087d1566 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -2,19 +2,13 @@
 	<div>
 		<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
 			<template #default="{ modalName }">
-				<ContactPromptModal
-					:modalName="modalName"
-				/>
+				<ContactPromptModal :modalName="modalName" />
 			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
 			<template #default="{ modalName, activeId, mode }">
-				<CredentialEdit
-					:modalName="modalName"
-					:mode="mode"
-					:activeId="activeId"
-					/>
+				<CredentialEdit :modalName="modalName" :mode="mode" :activeId="activeId" />
 			</template>
 		</ModalRoot>
 		<ModalRoot :name="ABOUT_MODAL_KEY">
@@ -27,11 +21,7 @@
 
 		<ModalRoot :name="DUPLICATE_MODAL_KEY">
 			<template #default="{ modalName, active, data }">
-				<DuplicateWorkflowDialog
-					:data="data"
-					:isActive="active"
-					:modalName="modalName"
-				/>
+				<DuplicateWorkflowDialog :data="data" :isActive="active" :modalName="modalName" />
 			</template>
 		</ModalRoot>
 
@@ -49,7 +39,7 @@
 
 		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
 			<template #default="{ active }">
-				<ValueSurvey :isActive="active"/>
+				<ValueSurvey :isActive="active" />
 			</template>
 		</ModalRoot>
 
@@ -67,10 +57,7 @@
 
 		<ModalRoot :name="DELETE_USER_MODAL_KEY">
 			<template #default="{ modalName, activeId }">
-				<DeleteUserModal
-					:modalName="modalName"
-					:activeId="activeId"
-				/>
+				<DeleteUserModal :modalName="modalName" :activeId="activeId" />
 			</template>
 		</ModalRoot>
 
@@ -84,11 +71,7 @@
 
 		<ModalRoot :name="WORKFLOW_SHARE_MODAL_KEY">
 			<template #default="{ modalName, active, data }">
-				<WorkflowShareModal
-					:data="data"
-					:isActive="active"
-					:modalName="modalName"
-				/>
+				<WorkflowShareModal :data="data" :isActive="active" :modalName="modalName" />
 			</template>
 		</ModalRoot>
 
@@ -113,12 +96,11 @@
 				/>
 			</template>
 		</ModalRoot>
-
 	</div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 import {
 	ABOUT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
@@ -145,27 +127,27 @@ import {
 import AboutModal from './AboutModal.vue';
 import CommunityPackageManageConfirmModal from './CommunityPackageManageConfirmModal.vue';
 import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
-import ChangePasswordModal from "./ChangePasswordModal.vue";
+import ChangePasswordModal from './ChangePasswordModal.vue';
 import ContactPromptModal from './ContactPromptModal.vue';
-import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
-import InviteUsersModal from "./InviteUsersModal.vue";
-import CredentialsSelectModal from "./CredentialsSelectModal.vue";
-import DuplicateWorkflowDialog from "./DuplicateWorkflowDialog.vue";
-import ModalRoot from "./ModalRoot.vue";
+import CredentialEdit from './CredentialEdit/CredentialEdit.vue';
+import InviteUsersModal from './InviteUsersModal.vue';
+import CredentialsSelectModal from './CredentialsSelectModal.vue';
+import DuplicateWorkflowDialog from './DuplicateWorkflowDialog.vue';
+import ModalRoot from './ModalRoot.vue';
 import OnboardingCallSignupModal from './OnboardingCallSignupModal.vue';
-import PersonalizationModal from "./PersonalizationModal.vue";
-import TagsManager from "./TagsManager/TagsManager.vue";
-import UpdatesPanel from "./UpdatesPanel.vue";
-import ValueSurvey from "./ValueSurvey.vue";
-import WorkflowSettings from "./WorkflowSettings.vue";
-import DeleteUserModal from "./DeleteUserModal.vue";
-import ExecutionsList from "./ExecutionsList.vue";
-import ActivationModal from "./ActivationModal.vue";
+import PersonalizationModal from './PersonalizationModal.vue';
+import TagsManager from './TagsManager/TagsManager.vue';
+import UpdatesPanel from './UpdatesPanel.vue';
+import ValueSurvey from './ValueSurvey.vue';
+import WorkflowSettings from './WorkflowSettings.vue';
+import DeleteUserModal from './DeleteUserModal.vue';
+import ExecutionsList from './ExecutionsList.vue';
+import ActivationModal from './ActivationModal.vue';
 import ImportCurlModal from './ImportCurlModal.vue';
 import WorkflowShareModal from './WorkflowShareModal.ee.vue';
 
 export default Vue.extend({
-	name: "Modals",
+	name: 'Modals',
 	components: {
 		AboutModal,
 		ActivationModal,
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index ad2ebb6ed5..a7e0741570 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -8,154 +8,202 @@
 			color="text-dark"
 		/>
 
-		<div v-for="(value, index) in mutableValues" :key="index" class="duplicate-parameter-item" :class="parameter.type">
+		<div
+			v-for="(value, index) in mutableValues"
+			:key="index"
+			class="duplicate-parameter-item"
+			:class="parameter.type"
+		>
 			<div class="delete-item clickable" v-if="!isReadOnly">
-				<font-awesome-icon icon="trash" :title="$locale.baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" />
+				<font-awesome-icon
+					icon="trash"
+					:title="$locale.baseText('multipleParameter.deleteItem')"
+					@click="deleteItem(index)"
+				/>
 				<div v-if="sortable">
-					<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$locale.baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" />
-					<font-awesome-icon v-if="index !== (mutableValues.length - 1)" icon="angle-down" class="clickable" :title="$locale.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
+					<font-awesome-icon
+						v-if="index !== 0"
+						icon="angle-up"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveUp')"
+						@click="moveOptionUp(index)"
+					/>
+					<font-awesome-icon
+						v-if="index !== mutableValues.length - 1"
+						icon="angle-down"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveDown')"
+						@click="moveOptionDown(index)"
+					/>
 				</div>
 			</div>
 			<div v-if="parameter.type === 'collection'">
-				<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" :isReadOnly="isReadOnly" @valueChanged="valueChanged" />
+				<collection-parameter
+					:parameter="parameter"
+					:values="value"
+					:nodeValues="nodeValues"
+					:path="getPath(index)"
+					:hideDelete="hideDelete"
+					:isReadOnly="isReadOnly"
+					@valueChanged="valueChanged"
+				/>
 			</div>
 			<div v-else>
-				<parameter-input-full class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :hideLabel="true" :path="getPath(index)" @valueChanged="valueChanged" inputSize="small" :isReadOnly="isReadOnly" />
+				<parameter-input-full
+					class="duplicate-parameter-input-item"
+					:parameter="parameter"
+					:value="value"
+					:displayOptions="true"
+					:hideLabel="true"
+					:path="getPath(index)"
+					@valueChanged="valueChanged"
+					inputSize="small"
+					:isReadOnly="isReadOnly"
+				/>
 			</div>
 		</div>
 
 		<div class="add-item-wrapper">
-			<div v-if="mutableValues && mutableValues.length === 0 || isReadOnly" class="no-items-exist">
-				<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
+			<div
+				v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
+				class="no-items-exist"
+			>
+				<n8n-text size="small">{{
+					$locale.baseText('multipleParameter.currentlyNoItemsExist')
+				}}</n8n-text>
 			</div>
-			<n8n-button v-if="!isReadOnly" type="tertiary" block @click="addItem()" :label="addButtonText" />
+			<n8n-button
+				v-if="!isReadOnly"
+				type="tertiary"
+				block
+				@click="addItem()"
+				:label="addButtonText"
+			/>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from "vue";
-import {
-	IUpdateInformation,
-} from '@/Interface';
-import { deepCopy, INodeParameters, INodeProperties } from "n8n-workflow";
+import Vue, { PropType } from 'vue';
+import { IUpdateInformation } from '@/Interface';
+import { deepCopy, INodeParameters, INodeProperties } from 'n8n-workflow';
 import CollectionParameter from '@/components/CollectionParameter.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 
 import { get } from 'lodash';
 
 export default Vue.extend({
-		name: 'MultipleParameter',
-		components: {
-			CollectionParameter,
-			ParameterInputFull,
+	name: 'MultipleParameter',
+	components: {
+		CollectionParameter,
+		ParameterInputFull,
+	},
+	props: {
+		nodeValues: {
+			type: Object as PropType<Record<string, INodeParameters[]>>,
+			required: true,
 		},
-		props: {
-			nodeValues: {
-				type: Object as PropType<Record<string, INodeParameters[]>>,
-				required: true,
-			},
-			parameter: {
-				type: Object as PropType<INodeProperties>,
-				required: true,
-			},
-			path: {
-				type: String,
-				required: true,
-			},
-			values: {
-				type: Array as PropType<INodeParameters[]>,
-				default: () => [],
-			},
-			isReadOnly: {
-				type: Boolean,
-				default: false,
-			},
+		parameter: {
+			type: Object as PropType<INodeProperties>,
+			required: true,
 		},
-		data() {
-			return {
-				mutableValues: [] as INodeParameters[],
+		path: {
+			type: String,
+			required: true,
+		},
+		values: {
+			type: Array as PropType<INodeParameters[]>,
+			default: () => [],
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			mutableValues: [] as INodeParameters[],
+		};
+	},
+	watch: {
+		values: {
+			handler(newValues: INodeParameters[]) {
+				this.mutableValues = deepCopy(newValues);
+			},
+			deep: true,
+		},
+	},
+	created() {
+		this.mutableValues = deepCopy(this.values);
+	},
+	computed: {
+		addButtonText(): string {
+			if (
+				!this.parameter.typeOptions ||
+				(this.parameter.typeOptions && !this.parameter.typeOptions.multipleValueButtonText)
+			) {
+				return this.$locale.baseText('multipleParameter.addItem');
+			}
+
+			return this.$locale.nodeText().multipleValueButtonText(this.parameter);
+		},
+		hideDelete(): boolean {
+			return this.parameter.options?.length === 1;
+		},
+		sortable(): boolean {
+			return !!this.parameter.typeOptions?.sortable;
+		},
+	},
+	methods: {
+		addItem() {
+			const name = this.getPath();
+			const currentValue = get(this.nodeValues, name, [] as INodeParameters[]);
+
+			currentValue.push(deepCopy(this.parameter.default as INodeParameters));
+
+			const parameterData = {
+				name,
+				value: currentValue,
 			};
+
+			this.$emit('valueChanged', parameterData);
 		},
-		watch: {
-			values: {
-				handler(newValues: INodeParameters[]) {
-					this.mutableValues = deepCopy(newValues);
-				},
-				deep: true,
-			},
+		deleteItem(index: number) {
+			const parameterData = {
+				name: this.getPath(index),
+				value: undefined,
+			};
+
+			this.$emit('valueChanged', parameterData);
 		},
-		created(){
-			this.mutableValues = deepCopy(this.values);
+		getPath(index?: number): string {
+			return this.path + (index !== undefined ? `[${index}]` : '');
 		},
-		computed: {
-			addButtonText (): string {
-				if (
-					!this.parameter.typeOptions ||
-					(this.parameter.typeOptions && !this.parameter.typeOptions.multipleValueButtonText)
-				) {
-					return this.$locale.baseText('multipleParameter.addItem');
-				}
+		moveOptionDown(index: number) {
+			this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
 
-				return this.$locale.nodeText().multipleValueButtonText(this.parameter);
-			},
-			hideDelete (): boolean {
-				return this.parameter.options?.length === 1;
-			},
-			sortable (): boolean {
-				return !!this.parameter.typeOptions?.sortable;
-			},
+			const parameterData = {
+				name: this.path,
+				value: this.mutableValues,
+			};
+
+			this.$emit('valueChanged', parameterData);
 		},
-		methods: {
-			addItem () {
-				const name = this.getPath();
-				const currentValue = get(this.nodeValues, name, [] as INodeParameters[]);
+		moveOptionUp(index: number) {
+			this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
 
-				currentValue.push(deepCopy(this.parameter.default as INodeParameters));
+			const parameterData = {
+				name: this.path,
+				value: this.mutableValues,
+			};
 
-				const parameterData = {
-					name,
-					value: currentValue,
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			deleteItem (index: number) {
-				const parameterData = {
-					name: this.getPath(index),
-					value: undefined,
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			getPath (index?: number): string {
-				return this.path + (index !== undefined ? `[${index}]` : '');
-			},
-			moveOptionDown (index: number) {
-				this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
-
-				const parameterData = {
-					name: this.path,
-					value: this.mutableValues,
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			moveOptionUp (index: number) {
-				this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
-
-				const parameterData = {
-					name: this.path,
-					value: this.mutableValues,
-				};
-
-				this.$emit('valueChanged', parameterData);
-			},
-			valueChanged (parameterData: IUpdateInformation) {
-				this.$emit('valueChanged', parameterData);
-			},
+			this.$emit('valueChanged', parameterData);
 		},
-	});
+		valueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+	},
+});
 </script>
 
 <style scoped lang="scss">
@@ -169,7 +217,7 @@ export default Vue.extend({
 	display: none;
 	position: absolute;
 	left: 0.1em;
-	top: .3em;
+	top: 0.3em;
 	z-index: 999;
 	color: #f56c6c;
 	width: 15px;
@@ -189,7 +237,7 @@ export default Vue.extend({
 	.duplicate-parameter-item {
 		position: relative;
 
-		.multi > .delete-item{
+		.multi > .delete-item {
 			top: 0.1em;
 		}
 	}
@@ -215,7 +263,7 @@ export default Vue.extend({
 	display: inline;
 }
 
-.duplicate-parameter-item .multi > .delete-item{
+.duplicate-parameter-item .multi > .delete-item {
 	top: 0.1em;
 }
 </style>
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index cb72316efb..5ff5cc40e5 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -43,24 +43,20 @@ import { get } from 'lodash';
 import { INodeTypeDescription } from 'n8n-workflow';
 import PanelDragButton from './PanelDragButton.vue';
 
-import {
-	LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH,
-	MAIN_NODE_PANEL_WIDTH,
-} from '@/constants';
+import { LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, MAIN_NODE_PANEL_WIDTH } from '@/constants';
 import mixins from 'vue-typed-mixins';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { NodePanelType } from '@/Interface';
 
-
 const SIDE_MARGIN = 24;
 const SIDE_PANELS_MARGIN = 80;
 const MIN_PANEL_WIDTH = 280;
 const PANEL_WIDTH = 320;
 const PANEL_WIDTH_LARGE = 420;
 
-const initialMainPanelWidth:{ [key: string]: number } = {
+const initialMainPanelWidth: { [key: string]: number } = {
 	regular: MAIN_NODE_PANEL_WIDTH,
 	dragless: MAIN_NODE_PANEL_WIDTH,
 	unknown: MAIN_NODE_PANEL_WIDTH,
@@ -88,7 +84,12 @@ export default mixins(debounceHelper).extend({
 			default: () => ({}),
 		},
 	},
-	data(): { windowWidth: number, isDragging: boolean, MIN_PANEL_WIDTH: number, initialized: boolean} {
+	data(): {
+		windowWidth: number;
+		isDragging: boolean;
+		MIN_PANEL_WIDTH: number;
+		initialized: boolean;
+	} {
 		return {
 			windowWidth: 1,
 			isDragging: false,
@@ -103,7 +104,10 @@ export default mixins(debounceHelper).extend({
 			Only set(or restore) initial position if `mainPanelDimensions`
 			is at the default state({relativeLeft:1, relativeRight: 1, relativeWidth: 1}) to make sure we use store values if they are set
 		*/
-		if(this.mainPanelDimensions.relativeLeft === 1 && this.mainPanelDimensions.relativeRight === 1) {
+		if (
+			this.mainPanelDimensions.relativeLeft === 1 &&
+			this.mainPanelDimensions.relativeRight === 1
+		) {
 			this.setMainPanelWidth();
 			this.setPositions(this.getInitialLeftPosition(this.mainPanelDimensions.relativeWidth));
 			this.restorePositionData();
@@ -119,26 +123,24 @@ export default mixins(debounceHelper).extend({
 		window.removeEventListener('resize', this.setTotalWidth);
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-		),
+		...mapStores(useNDVStore),
 		mainPanelDimensions(): {
-			relativeWidth: number,
-			relativeLeft: number,
-			relativeRight: number
-			} {
+			relativeWidth: number;
+			relativeLeft: number;
+			relativeRight: number;
+		} {
 			return this.ndvStore.getMainPanelDimensions(this.currentNodePaneType);
 		},
 		supportedResizeDirections(): string[] {
 			const supportedDirections = ['right'];
 
-			if(this.isDraggable) supportedDirections.push('left');
+			if (this.isDraggable) supportedDirections.push('left');
 			return supportedDirections;
 		},
 		currentNodePaneType(): string {
-			if(!this.hasInputSlot) return 'inputless';
-			if(!this.isDraggable) return 'dragless';
-			if(this.nodeType === null) return 'unknown';
+			if (!this.hasInputSlot) return 'inputless';
+			if (!this.isDraggable) return 'dragless';
+			if (this.nodeType === null) return 'unknown';
 			return get(this, 'nodeType.parameterPane') || 'regular';
 		},
 		hasInputSlot(): boolean {
@@ -151,13 +153,13 @@ export default mixins(debounceHelper).extend({
 			return 2 * (SIDE_MARGIN + SIDE_PANELS_MARGIN) + MIN_PANEL_WIDTH;
 		},
 		minimumLeftPosition(): number {
-			if(this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
+			if (this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
 
-			if(!this.hasInputSlot) return this.pxToRelativeWidth(SIDE_MARGIN);
+			if (!this.hasInputSlot) return this.pxToRelativeWidth(SIDE_MARGIN);
 			return this.pxToRelativeWidth(SIDE_MARGIN + 20) + this.inputPanelMargin;
 		},
 		maximumRightPosition(): number {
-			if(this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
+			if (this.windowWidth < this.minWindowWidth) return this.pxToRelativeWidth(1);
 
 			return this.pxToRelativeWidth(SIDE_MARGIN + 20) + this.inputPanelMargin;
 		},
@@ -167,39 +169,41 @@ export default mixins(debounceHelper).extend({
 		canMoveRight(): boolean {
 			return this.mainPanelDimensions.relativeRight > this.maximumRightPosition;
 		},
-		mainPanelStyles(): { left: string, right: string } {
+		mainPanelStyles(): { left: string; right: string } {
 			return {
-				'left': `${this.relativeWidthToPx(this.mainPanelDimensions.relativeLeft)}px`,
-				'right': `${this.relativeWidthToPx(this.mainPanelDimensions.relativeRight)}px`,
+				left: `${this.relativeWidthToPx(this.mainPanelDimensions.relativeLeft)}px`,
+				right: `${this.relativeWidthToPx(this.mainPanelDimensions.relativeRight)}px`,
 			};
 		},
-		inputPanelStyles():{ right: string } {
+		inputPanelStyles(): { right: string } {
 			return {
 				right: `${this.relativeWidthToPx(this.calculatedPositions.inputPanelRelativeRight)}px`,
 			};
 		},
-		outputPanelStyles(): { left: string, transform: string} {
+		outputPanelStyles(): { left: string; transform: string } {
 			return {
 				left: `${this.relativeWidthToPx(this.calculatedPositions.outputPanelRelativeLeft)}px`,
 				transform: `translateX(-${this.relativeWidthToPx(this.outputPanelRelativeTranslate)}px)`,
 			};
 		},
-		calculatedPositions():{ inputPanelRelativeRight: number, outputPanelRelativeLeft: number } {
+		calculatedPositions(): { inputPanelRelativeRight: number; outputPanelRelativeLeft: number } {
 			const hasInput = this.$slots.input !== undefined;
-			const outputPanelRelativeLeft = this.mainPanelDimensions.relativeLeft + this.mainPanelDimensions.relativeWidth;
+			const outputPanelRelativeLeft =
+				this.mainPanelDimensions.relativeLeft + this.mainPanelDimensions.relativeWidth;
 
 			const inputPanelRelativeRight = hasInput
 				? 1 - outputPanelRelativeLeft + this.mainPanelDimensions.relativeWidth
-				: (1 - this.pxToRelativeWidth(SIDE_MARGIN));
+				: 1 - this.pxToRelativeWidth(SIDE_MARGIN);
 
 			return {
 				inputPanelRelativeRight,
 				outputPanelRelativeLeft,
 			};
 		},
-		outputPanelRelativeTranslate():number {
+		outputPanelRelativeTranslate(): number {
 			const panelMinLeft = 1 - this.pxToRelativeWidth(MIN_PANEL_WIDTH + SIDE_MARGIN);
-			const currentRelativeLeftDelta = this.calculatedPositions.outputPanelRelativeLeft - panelMinLeft;
+			const currentRelativeLeftDelta =
+				this.calculatedPositions.outputPanelRelativeLeft - panelMinLeft;
 			return currentRelativeLeftDelta > 0 ? currentRelativeLeftDelta : 0;
 		},
 		hasDoubleWidth(): boolean {
@@ -223,7 +227,7 @@ export default mixins(debounceHelper).extend({
 		windowWidth(windowWidth) {
 			const minRelativeWidth = this.pxToRelativeWidth(MIN_PANEL_WIDTH);
 			// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position
-			if(this.isBelowMinWidthMainPanel) {
+			if (this.isBelowMinWidthMainPanel) {
 				this.setMainPanelWidth(minRelativeWidth);
 			}
 
@@ -231,7 +235,7 @@ export default mixins(debounceHelper).extend({
 			const isMaxRight = this.maximumRightPosition > this.mainPanelDimensions.relativeRight;
 
 			// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
-			if((windowWidth > this.minWindowWidth) && isBelowMinLeft && isMaxRight) {
+			if (windowWidth > this.minWindowWidth && isBelowMinLeft && isMaxRight) {
 				this.setMainPanelWidth(minRelativeWidth);
 				this.setPositions(this.getInitialLeftPosition(this.mainPanelDimensions.relativeWidth));
 			}
@@ -241,14 +245,14 @@ export default mixins(debounceHelper).extend({
 	},
 	methods: {
 		getInitialLeftPosition(width: number) {
-			if(this.currentNodePaneType === 'dragless') return this.pxToRelativeWidth(SIDE_MARGIN + 1 + this.fixedPanelWidth);
+			if (this.currentNodePaneType === 'dragless')
+				return this.pxToRelativeWidth(SIDE_MARGIN + 1 + this.fixedPanelWidth);
 
-			return this.hasInputSlot
-				? 0.5 - (width / 2)
-				: this.minimumLeftPosition;
+			return this.hasInputSlot ? 0.5 - width / 2 : this.minimumLeftPosition;
 		},
 		setMainPanelWidth(relativeWidth?: number) {
-			const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
+			const mainPanelRelativeWidth =
+				relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
 
 			this.ndvStore.setMainPanelDimensions({
 				panelType: this.currentNodePaneType,
@@ -258,14 +262,16 @@ export default mixins(debounceHelper).extend({
 			});
 		},
 		setPositions(relativeLeft: number) {
-			const mainPanelRelativeLeft = relativeLeft || 1 - this.calculatedPositions.inputPanelRelativeRight;
-			const mainPanelRelativeRight = 1 - mainPanelRelativeLeft - this.mainPanelDimensions.relativeWidth;
+			const mainPanelRelativeLeft =
+				relativeLeft || 1 - this.calculatedPositions.inputPanelRelativeRight;
+			const mainPanelRelativeRight =
+				1 - mainPanelRelativeLeft - this.mainPanelDimensions.relativeWidth;
 
 			const isMaxRight = this.maximumRightPosition > mainPanelRelativeRight;
 			const isMinLeft = this.minimumLeftPosition > mainPanelRelativeLeft;
 			const isInputless = this.currentNodePaneType === 'inputless';
 
-			if(isMinLeft) {
+			if (isMinLeft) {
 				this.ndvStore.setMainPanelDimensions({
 					panelType: this.currentNodePaneType,
 					dimensions: {
@@ -276,7 +282,7 @@ export default mixins(debounceHelper).extend({
 				return;
 			}
 
-			if(isMaxRight) {
+			if (isMaxRight) {
 				this.ndvStore.setMainPanelDimensions({
 					panelType: this.currentNodePaneType,
 					dimensions: {
@@ -307,29 +313,30 @@ export default mixins(debounceHelper).extend({
 		onResizeEnd() {
 			this.storePositionData();
 		},
-		onResizeDebounced(data: { direction: string, x: number, width: number}) {
+		onResizeDebounced(data: { direction: string; x: number; width: number }) {
 			if (this.initialized) {
 				this.callDebounced('onResize', { debounceTime: 10, trailing: true }, data);
 			}
 		},
-		onResize({ direction, x, width }: { direction: string, x: number, width: number}) {
+		onResize({ direction, x, width }: { direction: string; x: number; width: number }) {
 			const relativeDistance = this.pxToRelativeWidth(x);
 			const relativeWidth = this.pxToRelativeWidth(width);
 
-			if(direction === "left" && relativeDistance <= this.minimumLeftPosition) return;
-			if(direction === "right" && (1 - relativeDistance) <= this.maximumRightPosition) return;
-			if(width <= MIN_PANEL_WIDTH) return;
+			if (direction === 'left' && relativeDistance <= this.minimumLeftPosition) return;
+			if (direction === 'right' && 1 - relativeDistance <= this.maximumRightPosition) return;
+			if (width <= MIN_PANEL_WIDTH) return;
 
 			this.setMainPanelWidth(relativeWidth);
-			this.setPositions(direction === 'left'
-				? relativeDistance
-				: this.mainPanelDimensions.relativeLeft,
+			this.setPositions(
+				direction === 'left' ? relativeDistance : this.mainPanelDimensions.relativeLeft,
 			);
 		},
 		restorePositionData() {
-			const storedPanelWidthData = window.localStorage.getItem(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`);
+			const storedPanelWidthData = window.localStorage.getItem(
+				`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
+			);
 
-			if(storedPanelWidthData) {
+			if (storedPanelWidthData) {
 				const parsedWidth = parseFloat(storedPanelWidthData);
 				this.setMainPanelWidth(parsedWidth);
 				const initialPosition = this.getInitialLeftPosition(parsedWidth);
@@ -340,14 +347,17 @@ export default mixins(debounceHelper).extend({
 			return false;
 		},
 		storePositionData() {
-			window.localStorage.setItem(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`, this.mainPanelDimensions.relativeWidth.toString());
+			window.localStorage.setItem(
+				`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${this.currentNodePaneType}`,
+				this.mainPanelDimensions.relativeWidth.toString(),
+			);
 		},
 		onDragStart() {
 			this.isDragging = true;
 			this.$emit('dragstart', { position: this.mainPanelDimensions.relativeLeft });
 		},
-		onDrag(e: {x: number, y: number}) {
-			const relativeLeft = this.pxToRelativeWidth(e.x) - (this.mainPanelDimensions.relativeWidth / 2);
+		onDrag(e: { x: number; y: number }) {
+			const relativeLeft = this.pxToRelativeWidth(e.x) - this.mainPanelDimensions.relativeWidth / 2;
 
 			this.setPositions(relativeLeft);
 		},
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index d2683b6c70..fe25ec4d23 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,11 +1,28 @@
 <template>
 	<div class="node-wrapper" :style="nodePosition" :id="nodeId" data-test-id="canvas-node">
 		<div class="select-background" v-show="isSelected"></div>
-		<div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name">
-			<div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd">
-				<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
+		<div
+			:class="{
+				'node-default': true,
+				'touch-active': isTouchActive,
+				'is-touch-device': isTouchDevice,
+			}"
+			:data-name="data.name"
+			:ref="data.name"
+		>
+			<div
+				:class="nodeClass"
+				:style="nodeStyle"
+				@click.left="onClick"
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
+			>
+				<div
+					v-if="!data.disabled"
+					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
+				>
 					<div v-if="hasIssues" class="node-issues">
-						<n8n-tooltip placement="bottom" >
+						<n8n-tooltip placement="bottom">
 							<template #content>
 								<titled-list :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
 							</template>
@@ -35,7 +52,12 @@
 				</div>
 
 				<div class="node-trigger-tooltip__wrapper">
-					<n8n-tooltip placement="top" manual :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
+					<n8n-tooltip
+						placement="top"
+						manual
+						:value="showTriggerNodeTooltip"
+						popper-class="node-trigger-tooltip__wrapper--item"
+					>
 						<template #content>
 							<div v-text="getTriggerNodeTooltip"></div>
 						</template>
@@ -55,37 +77,61 @@
 					</n8n-tooltip>
 				</div>
 
-				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
+				<NodeIcon
+					class="node-icon"
+					:nodeType="nodeType"
+					:size="40"
+					:shrink="false"
+					:disabled="this.data.disabled"
+				/>
 			</div>
 
 			<div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions">
-				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')" >
-
+				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')">
 					<font-awesome-icon icon="trash" />
 				</div>
-				<div v-touch:tap="disableNode" class="option" :title="$locale.baseText('node.activateDeactivateNode')">
+				<div
+					v-touch:tap="disableNode"
+					class="option"
+					:title="$locale.baseText('node.activateDeactivateNode')"
+				>
 					<font-awesome-icon :icon="nodeDisabledIcon" />
 				</div>
-				<div v-touch:tap="duplicateNode" class="option" :title="$locale.baseText('node.duplicateNode')" v-if="isDuplicatable">
+				<div
+					v-touch:tap="duplicateNode"
+					class="option"
+					:title="$locale.baseText('node.duplicateNode')"
+					v-if="isDuplicatable"
+				>
 					<font-awesome-icon icon="clone" />
 				</div>
-				<div v-touch:tap="setNodeActive" class="option touch" :title="$locale.baseText('node.editNode')">
+				<div
+					v-touch:tap="setNodeActive"
+					class="option touch"
+					:title="$locale.baseText('node.editNode')"
+				>
 					<font-awesome-icon class="execute-icon" icon="cog" />
 				</div>
-				<div v-touch:tap="executeNode" class="option" :title="$locale.baseText('node.executeNode')" v-if="!workflowRunning">
+				<div
+					v-touch:tap="executeNode"
+					class="option"
+					:title="$locale.baseText('node.executeNode')"
+					v-if="!workflowRunning"
+				>
 					<font-awesome-icon class="execute-icon" icon="play-circle" />
 				</div>
 			</div>
-			<div :class="{'disabled-linethrough': true, success: workflowDataItems > 0}" v-if="showDisabledLinethrough"></div>
+			<div
+				:class="{ 'disabled-linethrough': true, success: workflowDataItems > 0 }"
+				v-if="showDisabledLinethrough"
+			></div>
 		</div>
 		<div class="node-description">
 			<div class="node-name ph-no-capture" :title="nodeTitle">
 				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
-				<p v-if="data.disabled">
-					({{ $locale.baseText('node.disabled') }})
-				</p>
+				<p v-if="data.disabled">({{ $locale.baseText('node.disabled') }})</p>
 			</div>
 			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
 				{{ nodeSubtitle }}
@@ -95,21 +141,20 @@
 </template>
 
 <script lang="ts">
-
 import Vue from 'vue';
-import { CUSTOM_API_CALL_KEY, LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, WAIT_TIME_UNLIMITED, MANUAL_TRIGGER_NODE_TYPE } from '@/constants';
+import {
+	CUSTOM_API_CALL_KEY,
+	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
+	WAIT_TIME_UNLIMITED,
+	MANUAL_TRIGGER_NODE_TYPE,
+} from '@/constants';
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeBase } from '@/mixins/nodeBase';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { pinData } from '@/mixins/pinData';
 
-import {
-	IDataObject,
-	INodeTypeDescription,
-	ITaskData,
-	NodeHelpers,
-} from 'n8n-workflow';
+import { IDataObject, INodeTypeDescription, ITaskData, NodeHelpers } from 'n8n-workflow';
 
 import NodeIcon from '@/components/NodeIcon.vue';
 import TitledList from '@/components/TitledList.vue';
@@ -118,7 +163,12 @@ import mixins from 'vue-typed-mixins';
 
 import { get } from 'lodash';
 import { getStyleTokenValue, getTriggerNodeServiceName } from '@/utils';
-import { IExecutionsSummary, INodeUi, INodeUpdatePropertiesInformation, XYPosition } from '@/Interface';
+import {
+	IExecutionsSummary,
+	INodeUi,
+	INodeUpdatePropertiesInformation,
+	XYPosition,
+} from '@/Interface';
 import { debounceHelper } from '@/mixins/debounce';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
@@ -147,33 +197,30 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		showPinnedDataInfo(): boolean {
 			return this.hasPinData && !this.isProductionExecutionPreview;
 		},
 		isDuplicatable(): boolean {
-			if(!this.nodeType) return true;
-			return this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes;
+			if (!this.nodeType) return true;
+			return (
+				this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes
+			);
 		},
-		isScheduledGroup (): boolean {
+		isScheduledGroup(): boolean {
 			return this.nodeType?.group.includes('schedule') === true;
 		},
 		nodeRunData(): ITaskData[] {
 			return this.workflowsStore.getWorkflowResultDataByNodeName(this.data?.name || '') || [];
 		},
-		hasIssues (): boolean {
+		hasIssues(): boolean {
 			if (this.hasPinData) return false;
 			if (this.data.issues !== undefined && Object.keys(this.data.issues).length) {
 				return true;
 			}
 			return false;
 		},
-		workflowDataItems (): number {
+		workflowDataItems(): number {
 			const workflowResultDataNode = this.nodeRunData;
 			if (workflowResultDataNode === null) {
 				return 0;
@@ -184,88 +231,90 @@ export default mixins(
 		canvasOffsetPosition() {
 			return this.uiStore.nodeViewOffsetPosition;
 		},
-		getTriggerNodeTooltip (): string | undefined {
+		getTriggerNodeTooltip(): string | undefined {
 			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
 				const nodeName = this.$locale.shortNodeType(this.nodeType.name);
 				const { eventTriggerDescription } = this.nodeType;
-				return this.$locale.nodeText().eventTriggerDescription(
-					nodeName,
-					eventTriggerDescription || '',
-				);
+				return this.$locale
+					.nodeText()
+					.eventTriggerDescription(nodeName, eventTriggerDescription || '');
 			} else {
-				return this.$locale.baseText(
-					'node.waitingForYouToCreateAnEventIn',
-					{
-						interpolate: {
-							nodeType: this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '',
-						},
+				return this.$locale.baseText('node.waitingForYouToCreateAnEventIn', {
+					interpolate: {
+						nodeType: this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '',
 					},
-				);
+				});
 			}
 		},
-		isPollingTypeNode (): boolean {
+		isPollingTypeNode(): boolean {
 			return !!(this.nodeType && this.nodeType.polling);
 		},
-		isExecuting (): boolean {
+		isExecuting(): boolean {
 			return this.workflowsStore.executingNode === this.data.name;
 		},
-		isSingleActiveTriggerNode (): boolean {
+		isSingleActiveTriggerNode(): boolean {
 			const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
-				const nodeType =  this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
 			});
 
 			return nodes.length === 1;
 		},
-		isManualTypeNode (): boolean {
+		isManualTypeNode(): boolean {
 			return this.data.type === MANUAL_TRIGGER_NODE_TYPE;
 		},
-		isTriggerNode (): boolean {
+		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.data?.type || '');
 		},
-		isTriggerNodeTooltipEmpty () : boolean {
+		isTriggerNodeTooltipEmpty(): boolean {
 			return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
 		},
-		isNodeDisabled (): boolean | undefined {
+		isNodeDisabled(): boolean | undefined {
 			return this.node && this.node.disabled;
 		},
-		nodeType (): INodeTypeDescription | null {
+		nodeType(): INodeTypeDescription | null {
 			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
 		},
-		node (): INodeUi | undefined { // same as this.data but reactive..
+		node(): INodeUi | undefined {
+			// same as this.data but reactive..
 			return this.workflowsStore.nodesByName[this.name] as INodeUi | undefined;
 		},
-		sameTypeNodes (): INodeUi[] {
+		sameTypeNodes(): INodeUi[] {
 			return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data.type);
 		},
-		nodeClass (): object {
+		nodeClass(): object {
 			return {
 				'node-box': true,
 				disabled: this.data.disabled,
 				executing: this.isExecuting,
 			};
 		},
-		nodeIssues (): string[] {
+		nodeIssues(): string[] {
 			if (this.data.issues === undefined) {
 				return [];
 			}
 
 			return NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
 		},
-		nodeDisabledIcon (): string {
+		nodeDisabledIcon(): string {
 			if (this.data.disabled === false) {
 				return 'pause';
 			} else {
 				return 'play';
 			}
 		},
-		position (): XYPosition {
+		position(): XYPosition {
 			return this.node ? this.node.position : [0, 0];
 		},
 		showDisabledLinethrough(): boolean {
-			return !!(this.data.disabled && this.nodeType && this.nodeType.inputs.length === 1 && this.nodeType.outputs.length === 1);
+			return !!(
+				this.data.disabled &&
+				this.nodeType &&
+				this.nodeType.inputs.length === 1 &&
+				this.nodeType.outputs.length === 1
+			);
 		},
-		nodePosition (): object {
+		nodePosition(): object {
 			const returnStyles: {
 				[key: string]: string;
 			} = {
@@ -275,10 +324,10 @@ export default mixins(
 
 			return returnStyles;
 		},
-		shortNodeType (): string {
+		shortNodeType(): string {
 			return this.$locale.shortNodeType(this.data.type);
 		},
-		nodeTitle (): string {
+		nodeTitle(): string {
 			if (this.data.name === 'Start') {
 				return this.$locale.headerText({
 					key: `headers.start.displayName`,
@@ -288,7 +337,7 @@ export default mixins(
 
 			return this.data.name;
 		},
-		waiting (): string | undefined {
+		waiting(): string | undefined {
 			const workflowExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
 
 			if (workflowExecution && workflowExecution.waitTill) {
@@ -296,32 +345,30 @@ export default mixins(
 				if (this.name === lastNodeExecuted) {
 					const waitDate = new Date(workflowExecution.waitTill);
 					if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
-						return this.$locale.baseText('node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall');
+						return this.$locale.baseText(
+							'node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall',
+						);
 					}
-					return this.$locale.baseText(
-						'node.nodeIsWaitingTill',
-						{
-							interpolate: {
-								date: waitDate.toLocaleDateString(),
-								time: waitDate.toLocaleTimeString(),
-						 	},
+					return this.$locale.baseText('node.nodeIsWaitingTill', {
+						interpolate: {
+							date: waitDate.toLocaleDateString(),
+							time: waitDate.toLocaleTimeString(),
 						},
-					);
+					});
 				}
 			}
 
 			return;
 		},
-		workflowRunning (): boolean {
+		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
-		nodeStyle (): object {
+		nodeStyle(): object {
 			let borderColor = getStyleTokenValue('--color-foreground-xdark');
 
 			if (this.data.disabled) {
 				borderColor = getStyleTokenValue('--color-foreground-base');
-			}
-			else if (!this.isExecuting) {
+			} else if (!this.isExecuting) {
 				if (this.hasIssues) {
 					borderColor = getStyleTokenValue('--color-danger');
 				} else if (this.waiting || this.showPinnedDataInfo) {
@@ -339,14 +386,18 @@ export default mixins(
 
 			return returnStyles;
 		},
-		isSelected (): boolean {
-			return this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !== undefined;
+		isSelected(): boolean {
+			return (
+				this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !==
+				undefined
+			);
 		},
-		shiftOutputCount (): boolean {
+		shiftOutputCount(): boolean {
 			return !!(this.nodeType && this.nodeType.outputs.length > 2);
 		},
-		shouldShowTriggerTooltip () : boolean {
-			return !!this.node &&
+		shouldShowTriggerTooltip(): boolean {
+			return (
+				!!this.node &&
 				this.isTriggerNode &&
 				!this.isPollingTypeNode &&
 				!this.isNodeDisabled &&
@@ -355,9 +406,10 @@ export default mixins(
 				this.isSingleActiveTriggerNode &&
 				!this.isTriggerNodeTooltipEmpty &&
 				!this.hasIssues &&
-				!this.dragging;
+				!this.dragging
+			);
 		},
- 	},
+	},
 	watch: {
 		isActive(newValue, oldValue) {
 			if (!newValue && oldValue) {
@@ -389,11 +441,13 @@ export default mixins(
 			}
 		},
 		nodeRunData(newValue) {
-			this.$emit('run', {name: this.data.name, data: newValue, waiting: !!this.waiting});
+			this.$emit('run', { name: this.data.name, data: newValue, waiting: !!this.waiting });
 		},
 	},
 	created() {
-		const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG);
+		const hasSeenPinDataTooltip = localStorage.getItem(
+			LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
+		);
 		if (!hasSeenPinDataTooltip) {
 			this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
 				this.showPinDataDiscoveryTooltip(dataItemsCount);
@@ -404,11 +458,15 @@ export default mixins(
 		this.setSubtitle();
 		if (this.nodeRunData) {
 			setTimeout(() => {
-				this.$emit('run', {name: this.data && this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
+				this.$emit('run', {
+					name: this.data && this.data.name,
+					data: this.nodeRunData,
+					waiting: !!this.waiting,
+				});
 			}, 0);
 		}
 	},
-	data () {
+	data() {
 		return {
 			isTouchActive: false,
 			nodeSubtitle: '',
@@ -420,7 +478,13 @@ export default mixins(
 	},
 	methods: {
 		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
-			if (!this.isTriggerNode || this.isManualTypeNode || this.isScheduledGroup || dataItemsCount === 0) return;
+			if (
+				!this.isTriggerNode ||
+				this.isManualTypeNode ||
+				this.isScheduledGroup ||
+				dataItemsCount === 0
+			)
+				return;
 
 			localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
 
@@ -428,33 +492,55 @@ export default mixins(
 			this.unwatchWorkflowDataItems();
 		},
 		setSubtitle() {
-			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getCurrentWorkflow()) || '';
+			const nodeSubtitle =
+				this.getNodeSubtitle(this.data, this.nodeType, this.getCurrentWorkflow()) || '';
 
-			this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY)
-				? ''
-				: nodeSubtitle;
+			this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY) ? '' : nodeSubtitle;
 		},
-		disableNode () {
+		disableNode() {
 			if (this.data !== null) {
 				this.disableNodes([this.data]);
-				this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(this.data.name, !this.data.disabled, this.data.disabled === true, this));
-				this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.workflowsStore.workflowId });
+				this.historyStore.pushCommandToUndo(
+					new EnableNodeToggleCommand(
+						this.data.name,
+						!this.data.disabled,
+						this.data.disabled === true,
+						this,
+					),
+				);
+				this.$telemetry.track('User clicked node hover button', {
+					node_type: this.data.type,
+					button_name: 'disable',
+					workflow_id: this.workflowsStore.workflowId,
+				});
 			}
 		},
-		executeNode () {
+		executeNode() {
 			this.$emit('runWorkflow', this.data.name, 'Node.executeNode');
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'execute', workflow_id: this.workflowsStore.workflowId });
+			this.$telemetry.track('User clicked node hover button', {
+				node_type: this.data.type,
+				button_name: 'execute',
+				workflow_id: this.workflowsStore.workflowId,
+			});
 		},
-		deleteNode () {
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'delete', workflow_id: this.workflowsStore.workflowId });
+		deleteNode() {
+			this.$telemetry.track('User clicked node hover button', {
+				node_type: this.data.type,
+				button_name: 'delete',
+				workflow_id: this.workflowsStore.workflowId,
+			});
 
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
 				this.$emit('removeNode', this.data.name);
 			});
 		},
-		duplicateNode () {
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'duplicate', workflow_id: this.workflowsStore.workflowId });
+		duplicateNode() {
+			this.$telemetry.track('User clicked node hover button', {
+				node_type: this.data.type,
+				button_name: 'duplicate',
+				workflow_id: this.workflowsStore.workflowId,
+			});
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
 				this.$emit('duplicateNode', this.data.name);
@@ -474,11 +560,11 @@ export default mixins(
 			}
 		},
 
-		setNodeActive () {
+		setNodeActive() {
 			this.ndvStore.activeNodeName = this.data ? this.data.name : '';
 			this.pinDataDiscoveryTooltipVisible = false;
 		},
-		touchStart () {
+		touchStart() {
 			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
 				this.isTouchActive = true;
 				setTimeout(() => {
@@ -488,11 +574,9 @@ export default mixins(
 		},
 	},
 });
-
 </script>
 
 <style lang="scss" scoped>
-
 .node-wrapper {
 	position: absolute;
 	width: 100px;
@@ -509,7 +593,8 @@ export default mixins(
 		width: 200px;
 		pointer-events: none; // prevent container from being draggable
 
-		.node-name > p { // must be paragraph tag to have two lines in safari
+		.node-name > p {
+			// must be paragraph tag to have two lines in safari
 			text-overflow: ellipsis;
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
@@ -665,7 +750,12 @@ export default mixins(
 
 .select-background {
 	display: block;
-	background-color: hsla(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l), 60%);
+	background-color: hsla(
+		var(--color-foreground-base-h),
+		var(--color-foreground-base-s),
+		var(--color-foreground-base-l),
+		60%
+	);
 	border-radius: var(--border-radius-xlarge);
 	overflow: hidden;
 	position: absolute;
@@ -703,7 +793,7 @@ export default mixins(
 		&--item {
 			max-width: 160px;
 			position: fixed;
-			z-index: 0!important;
+			z-index: 0 !important;
 		}
 	}
 }
@@ -714,7 +804,7 @@ export default mixins(
 }
 
 .jtk-connector path {
-	transition: stroke .1s ease-in-out;
+	transition: stroke 0.1s ease-in-out;
 }
 
 .jtk-connector.success {
@@ -745,7 +835,8 @@ export default mixins(
 	z-index: 8;
 }
 
-.jtk-drag-active.dot-output-endpoint, .jtk-drag-active.rect-input-endpoint {
+.jtk-drag-active.dot-output-endpoint,
+.jtk-drag-active.rect-input-endpoint {
 	z-index: 9;
 }
 
@@ -760,89 +851,88 @@ export default mixins(
 .drop-add-node-label {
 	z-index: 10;
 }
-
 </style>
 
 <style lang="scss">
-	$--stalklength: 40px;
-	$--box-size-medium: 24px;
-	$--box-size-small: 18px;
+$--stalklength: 40px;
+$--box-size-medium: 24px;
+$--box-size-small: 18px;
 
-	.plus-endpoint {
-		cursor: pointer;
+.plus-endpoint {
+	cursor: pointer;
 
-		.plus-stalk {
-			border-top: 2px solid var(--color-foreground-dark);
-			position: absolute;
-			width: $--stalklength;
-			height: 0;
-			right: 100%;
-			top: calc(50% - 1px);
-			pointer-events: none;
+	.plus-stalk {
+		border-top: 2px solid var(--color-foreground-dark);
+		position: absolute;
+		width: $--stalklength;
+		height: 0;
+		right: 100%;
+		top: calc(50% - 1px);
+		pointer-events: none;
 
-		  .connection-run-items-label {
-				position: relative;
-				width: 100%;
-
-				span {
-					display: none;
-					left: calc(50% + 4px);
-				}
-			}
-		}
-
-		.plus-container {
-			color: var(--color-foreground-xdark);
-			border: 2px solid var(--color-foreground-xdark);
-			background-color: var(--color-background-xlight);
-			border-radius: var(--border-radius-base);
-			height: $--box-size-medium;
-			width: $--box-size-medium;
-
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			font-size: var(--font-size-2xs);
-			position: absolute;
-
-			top: 0;
-			right: 0;
-			pointer-events: none;
-
-			&.small {
-				height: $--box-size-small;
-				width: $--box-size-small;
-				font-size: 8px;
-			}
-
-			.fa-plus {
-				width: 1em;
-			}
-		}
-
-		.drop-hover-message {
-			font-weight: var(--font-weight-bold);
-			font-size: var(--font-size-2xs);
-			line-height: var(--font-line-height-regular);
-			color: var(--color-text-light);
-
-			position: absolute;
-			top: -6px;
-			left: calc(100% + 8px);
-			width: 200px;
-			display: none;
-		}
-
-		&.hidden > * {
-			display: none;
-		}
-
-		&.success .plus-stalk {
-			border-color: var(--color-success-light);
+		.connection-run-items-label {
+			position: relative;
+			width: 100%;
 
 			span {
-				display: inline;
+				display: none;
+				left: calc(50% + 4px);
 			}
 		}
 	}
+
+	.plus-container {
+		color: var(--color-foreground-xdark);
+		border: 2px solid var(--color-foreground-xdark);
+		background-color: var(--color-background-xlight);
+		border-radius: var(--border-radius-base);
+		height: $--box-size-medium;
+		width: $--box-size-medium;
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--font-size-2xs);
+		position: absolute;
+
+		top: 0;
+		right: 0;
+		pointer-events: none;
+
+		&.small {
+			height: $--box-size-small;
+			width: $--box-size-small;
+			font-size: 8px;
+		}
+
+		.fa-plus {
+			width: 1em;
+		}
+	}
+
+	.drop-hover-message {
+		font-weight: var(--font-weight-bold);
+		font-size: var(--font-size-2xs);
+		line-height: var(--font-line-height-regular);
+		color: var(--color-text-light);
+
+		position: absolute;
+		top: -6px;
+		left: calc(100% + 8px);
+		width: 200px;
+		display: none;
+	}
+
+	&.hidden > * {
+		display: none;
+	}
+
+	&.success .plus-stalk {
+		border-color: var(--color-success-light);
+
+		span {
+			display: inline;
+		}
+	}
+}
 </style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index 97103fbee4..58f4948226 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,10 +1,29 @@
 <template>
 	<div>
-		<div v-if="!createNodeActive" :class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']" @mouseenter="onCreateMenuHoverIn">
+		<div
+			v-if="!createNodeActive"
+			:class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']"
+			@mouseenter="onCreateMenuHoverIn"
+		>
 			<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
-				<n8n-icon-button size="xlarge" icon="plus" type="tertiary" :class="$style.nodeCreatorPlus" @click="openNodeCreator" :title="$locale.baseText('nodeView.addNode')"/>
-				<div :class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']" @click="addStickyNote">
-					<n8n-icon-button size="medium" type="tertiary" :icon="['far', 'note-sticky']" :title="$locale.baseText('nodeView.addSticky')"/>
+				<n8n-icon-button
+					size="xlarge"
+					icon="plus"
+					type="tertiary"
+					:class="$style.nodeCreatorPlus"
+					@click="openNodeCreator"
+					:title="$locale.baseText('nodeView.addNode')"
+				/>
+				<div
+					:class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']"
+					@click="addStickyNote"
+				>
+					<n8n-icon-button
+						size="medium"
+						type="tertiary"
+						:icon="['far', 'note-sticky']"
+						:title="$locale.baseText('nodeView.addSticky')"
+					/>
 				</div>
 			</div>
 		</div>
@@ -17,11 +36,11 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
-import {DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, STICKY_NODE_TYPE} from "@/constants";
-import { mapStores } from "pinia";
-import { useUIStore } from "@/stores/ui";
+import { DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, STICKY_NODE_TYPE } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default Vue.extend({
 	name: 'node-creation',
@@ -61,7 +80,11 @@ export default Vue.extend({
 					const wrapperLeftFar = wrapperLeftNear + wrapperW;
 					const wrapperTopNear = wrapperBounds.top;
 					const wrapperTopFar = wrapperTopNear + wrapperH;
-					const inside = ((mousemoveEvent.pageX > wrapperLeftNear && mousemoveEvent.pageX < wrapperLeftFar) && (mousemoveEvent.pageY > wrapperTopNear && mousemoveEvent.pageY < wrapperTopFar));
+					const inside =
+						mousemoveEvent.pageX > wrapperLeftNear &&
+						mousemoveEvent.pageX < wrapperLeftFar &&
+						mousemoveEvent.pageY > wrapperTopNear &&
+						mousemoveEvent.pageY < wrapperTopFar;
 					if (!inside) {
 						this.showStickyButton = false;
 						document.removeEventListener('mousemove', moveCallback, false);
@@ -78,22 +101,27 @@ export default Vue.extend({
 				(document.activeElement as HTMLElement).blur();
 			}
 
-			const offset: [number, number] = [...(this.uiStore.nodeViewOffsetPosition)];
+			const offset: [number, number] = [...this.uiStore.nodeViewOffsetPosition];
 
 			const position = getMidCanvasPosition(this.nodeViewScale, offset);
 			position[0] -= DEFAULT_STICKY_WIDTH / 2;
 			position[1] -= DEFAULT_STICKY_HEIGHT / 2;
 
-			this.$emit('addNode', [{
-				nodeTypeName: STICKY_NODE_TYPE,
-				position,
-			}]);
+			this.$emit('addNode', [
+				{
+					nodeTypeName: STICKY_NODE_TYPE,
+					position,
+				},
+			]);
 		},
 		closeNodeCreator() {
 			this.$emit('toggleNodeCreator', { createNodeActive: false });
 		},
 		nodeTypeSelected(nodeTypeNames: string[]) {
-			this.$emit('addNode', nodeTypeNames.map(nodeTypeName => ({ nodeTypeName })));
+			this.$emit(
+				'addNode',
+				nodeTypeNames.map((nodeTypeName) => ({ nodeTypeName })),
+			);
 			this.closeNodeCreator();
 		},
 	},
@@ -113,7 +141,7 @@ export default Vue.extend({
 .addStickyButton {
 	margin-top: var(--spacing-2xs);
 	opacity: 0;
-	transition: .1s;
+	transition: 0.1s;
 	transition-timing-function: linear;
 }
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue
index b4a06cfba1..15c18a2e1c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ActionItem.vue
@@ -10,12 +10,8 @@
 		:isTrigger="isTriggerAction(action)"
 	>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer"/>
-			<div
-				:class="$style.draggable"
-				:style="draggableStyle"
-				v-show="dragging"
-			>
+			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
+			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
 				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
 			</div>
 		</template>
@@ -34,14 +30,15 @@ import NodeIcon from '@/components/NodeIcon.vue';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 export interface Props {
-	nodeType: INodeTypeDescription,
-	action: INodeActionTypeDescription,
+	nodeType: INodeTypeDescription;
+	action: INodeActionTypeDescription;
 }
 
 const props = defineProps<Props>();
 const instance = getCurrentInstance();
 const telemetry = instance?.proxy.$telemetry;
-const { getActionData, getNodeTypesWithManualTrigger, setAddedNodeActionParameters } = useNodeCreatorStore();
+const { getActionData, getNodeTypesWithManualTrigger, setAddedNodeActionParameters } =
+	useNodeCreatorStore();
 
 const state = reactive({
 	dragging: false,
@@ -53,19 +50,20 @@ const state = reactive({
 	draggableDataTransfer: null as Element | null,
 });
 const emit = defineEmits<{
-	(event: 'actionSelected', action: IUpdateInformation): void,
-	(event: 'dragstart', $e: DragEvent): void,
-	(event: 'dragend', $e: DragEvent): void,
+	(event: 'actionSelected', action: IUpdateInformation): void;
+	(event: 'dragstart', $e: DragEvent): void;
+	(event: 'dragend', $e: DragEvent): void;
 }>();
 
-const draggableStyle = computed<{ top: string; left: string; }>(() => ({
+const draggableStyle = computed<{ top: string; left: string }>(() => ({
 	top: `${state.draggablePosition.y}px`,
 	left: `${state.draggablePosition.x}px`,
 }));
 
 const actionData = computed(() => getActionData(props.action));
 
-const isTriggerAction = (action: INodeActionTypeDescription) => action.name?.toLowerCase().includes('trigger');
+const isTriggerAction = (action: INodeActionTypeDescription) =>
+	action.name?.toLowerCase().includes('trigger');
 function onActionClick(actionItem: INodeActionTypeDescription) {
 	emit('actionSelected', getActionData(actionItem));
 }
@@ -76,16 +74,19 @@ function onDragStart(event: DragEvent): void {
 	 * All browsers attach the correct page coordinates to the "dragover" event.
 	 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
 	 */
-	document.body.addEventListener("dragover", onDragOver);
+	document.body.addEventListener('dragover', onDragOver);
 	const { pageX: x, pageY: y } = event;
 	if (event.dataTransfer) {
-		event.dataTransfer.effectAllowed = "copy";
-		event.dataTransfer.dropEffect = "copy";
+		event.dataTransfer.effectAllowed = 'copy';
+		event.dataTransfer.dropEffect = 'copy';
 		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
-		event.dataTransfer.setData('nodeTypeName', getNodeTypesWithManualTrigger(actionData.value?.key).join(','));
+		event.dataTransfer.setData(
+			'nodeTypeName',
+			getNodeTypesWithManualTrigger(actionData.value?.key).join(','),
+		);
 
 		state.storeWatcher = setAddedNodeActionParameters(actionData.value, telemetry);
-		document.body.addEventListener("dragend", onDragEnd);
+		document.body.addEventListener('dragend', onDragEnd);
 	}
 
 	state.dragging = true;
@@ -94,19 +95,19 @@ function onDragStart(event: DragEvent): void {
 }
 
 function onDragOver(event: DragEvent): void {
-	if (!state.dragging || event.pageX === 0 && event.pageY === 0) {
+	if (!state.dragging || (event.pageX === 0 && event.pageY === 0)) {
 		return;
 	}
 
-	const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
+	const [x, y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
 
 	state.draggablePosition = { x, y };
 }
 
 function onDragEnd(event: DragEvent): void {
-	if(state.storeWatcher) state.storeWatcher();
-	document.body.removeEventListener("dragend", onDragEnd);
-	document.body.removeEventListener("dragover", onDragOver);
+	if (state.storeWatcher) state.storeWatcher();
+	document.body.removeEventListener('dragend', onDragEnd);
+	document.body.removeEventListener('dragover', onDragOver);
 
 	emit('dragend', event);
 
@@ -135,7 +136,7 @@ const { draggableDataTransfer, dragging } = toRefs(state);
 	color: var(--color-text-base);
 	padding-top: var(--spacing-s);
 	line-height: var(--font-line-height-regular);
-	border-top: 1px solid #DBDFE7;
+	border-top: 1px solid #dbdfe7;
 	z-index: 1;
 	// Prevent double borders when the last category is collapsed
 	margin-top: -1px;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index f2eb58b1cf..2455b1e7a7 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -1,5 +1,5 @@
 <template>
-	<transition :name="`panel-slide-${state.transitionDirection}`" >
+	<transition :name="`panel-slide-${state.transitionDirection}`">
 		<div
 			ref="mainPanelContainer"
 			tabindex="0"
@@ -12,12 +12,16 @@
 				<slot name="header" />
 			</div>
 
-			<div :class="$style.subcategoryHeader" v-if="activeSubcategory" data-test-id="categorized-items-subcategory">
+			<div
+				:class="$style.subcategoryHeader"
+				v-if="activeSubcategory"
+				data-test-id="categorized-items-subcategory"
+			>
 				<button :class="$style.subcategoryBackButton" @click="onSubcategoryClose">
 					<font-awesome-icon :class="$style.subcategoryBackIcon" icon="arrow-left" size="2x" />
 				</button>
 				<node-icon
-					v-if="(showSubcategoryIcon && activeSubcategory.properties.nodeType)"
+					v-if="showSubcategoryIcon && activeSubcategory.properties.nodeType"
 					:class="$style.nodeIcon"
 					:nodeType="activeSubcategory.properties.nodeType"
 					:size="16"
@@ -30,16 +34,24 @@
 				v-if="alwaysShowSearch || isSearchVisible"
 				:key="nodeCreatorStore.selectedType"
 				:value="nodeCreatorStore.itemsFilter"
-				:placeholder="searchPlaceholder ? searchPlaceholder : $locale.baseText('nodeCreator.searchBar.searchNodes')"
+				:placeholder="
+					searchPlaceholder
+						? searchPlaceholder
+						: $locale.baseText('nodeCreator.searchBar.searchNodes')
+				"
 				ref="searchBar"
 				@input="onNodeFilterChange"
 			/>
 
-			<template v-if="(searchFilter.length > 0 && filteredNodeTypes.length === 0)">
+			<template v-if="searchFilter.length > 0 && filteredNodeTypes.length === 0">
 				<no-results
 					data-test-id="categorized-no-results"
-					:showRequest="(!$slots.noResultsTitle && !$slots.noResultsAction) && filteredAllNodeTypes.length === 0"
-					:show-icon="(!$slots.noResultsTitle && !$slots.noResultsAction) && filteredAllNodeTypes.length === 0"
+					:showRequest="
+						!$slots.noResultsTitle && !$slots.noResultsAction && filteredAllNodeTypes.length === 0
+					"
+					:show-icon="
+						!$slots.noResultsTitle && !$slots.noResultsAction && filteredAllNodeTypes.length === 0
+					"
 				>
 					<template v-if="$slots.noResultsTitle" #title>
 						<slot name="noResultsTitle" />
@@ -49,7 +61,7 @@
 						<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
 					</template>
 					<template v-else #title>
-						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')"/>
+						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
 					</template>
 
 					<template v-if="$slots.noResultsAction" #action>
@@ -57,14 +69,20 @@
 					</template>
 					<template v-else-if="filteredAllNodeTypes.length === 0" #action>
 						{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
-						<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)">
+						<n8n-link
+							@click="selectHttpRequest"
+							v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
+						>
 							{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
 						</n8n-link>
 						<template v-if="nodeCreatorStore.selectedType === ALL_NODE_FILTER">
 							{{ $locale.baseText('nodeCreator.noResults.or') }}
 						</template>
 
-						<n8n-link @click="selectWebhook" v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)">
+						<n8n-link
+							@click="selectWebhook"
+							v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
+						>
 							{{ $locale.baseText('nodeCreator.noResults.webhook') }}
 						</n8n-link>
 						{{ $locale.baseText('nodeCreator.noResults.node') }}
@@ -81,7 +99,7 @@
 			</template>
 			<div :class="$style.scrollable" ref="scrollableContainer" v-else>
 				<item-iterator
-					:elements="searchFilter.length === 0 ? renderedItems :filteredNodeTypes"
+					:elements="searchFilter.length === 0 ? renderedItems : filteredNodeTypes"
 					:activeIndex="activeSubcategory ? activeSubcategoryIndex : activeIndex"
 					:with-actions-getter="withActionsGetter"
 					:lazyRender="lazyRender"
@@ -90,7 +108,6 @@
 					@actionsOpen="$listeners.actionsOpen"
 					@nodeTypeSelected="$listeners.nodeTypeSelected"
 				>
-
 				</item-iterator>
 				<div :class="$style.footer" v-if="$slots.footer">
 					<slot name="footer" />
@@ -101,7 +118,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, onMounted, watch, getCurrentInstance, toRefs, ref, onUnmounted, nextTick } from 'vue';
+import {
+	computed,
+	reactive,
+	onMounted,
+	watch,
+	getCurrentInstance,
+	toRefs,
+	ref,
+	onUnmounted,
+	nextTick,
+} from 'vue';
 import camelcase from 'lodash.camelcase';
 
 import { externalHooks } from '@/mixins/externalHooks';
@@ -111,10 +138,24 @@ import ItemIterator from './ItemIterator.vue';
 import NoResults from './NoResults.vue';
 import SearchBar from './SearchBar.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
-import { INodeCreateElement, ISubcategoryItemProps, ICategoryItemProps, ICategoriesWithNodes, SubcategoryCreateElement, NodeCreateElement } from '@/Interface';
-import { WEBHOOK_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, ALL_NODE_FILTER, TRIGGER_NODE_FILTER, REGULAR_NODE_FILTER, NODE_TYPE_COUNT_MAPPER } from '@/constants';
+import {
+	INodeCreateElement,
+	ISubcategoryItemProps,
+	ICategoryItemProps,
+	ICategoriesWithNodes,
+	SubcategoryCreateElement,
+	NodeCreateElement,
+} from '@/Interface';
+import {
+	WEBHOOK_NODE_TYPE,
+	HTTP_REQUEST_NODE_TYPE,
+	ALL_NODE_FILTER,
+	TRIGGER_NODE_FILTER,
+	REGULAR_NODE_FILTER,
+	NODE_TYPE_COUNT_MAPPER,
+} from '@/constants';
 import { BaseTextKey } from '@/plugins/i18n';
-import { sublimeSearch, matchesNodeType, matchesSelectType  } from '@/utils';
+import { sublimeSearch, matchesNodeType, matchesSelectType } from '@/utils';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
@@ -149,11 +190,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'subcategoryClose', value: INodeCreateElement[]): void,
-	(event: 'onSubcategorySelected', value: INodeCreateElement): void,
-	(event: 'nodeTypeSelected', value: string[]): void,
-	(event: 'actionSelected', value: INodeCreateElement): void,
-	(event: 'actionsOpen', value: INodeTypeDescription): void,
+	(event: 'subcategoryClose', value: INodeCreateElement[]): void;
+	(event: 'onSubcategorySelected', value: INodeCreateElement): void;
+	(event: 'nodeTypeSelected', value: string[]): void;
+	(event: 'actionSelected', value: INodeCreateElement): void;
+	(event: 'actionsOpen', value: INodeTypeDescription): void;
 }>();
 
 const instance = getCurrentInstance();
@@ -168,7 +209,12 @@ const nodeCreatorStore = useNodeCreatorStore();
 const state = reactive({
 	activeCategory: props.initialActiveCategories,
 	// Keep track of activated subcategories so we could traverse back more than one level
-	activeSubcategoryHistory: [] as Array<{scrollPosition: number, subcategory: INodeCreateElement, activeIndex: number, filter: string}>,
+	activeSubcategoryHistory: [] as Array<{
+		scrollPosition: number;
+		subcategory: INodeCreateElement;
+		activeIndex: number;
+		filter: string;
+	}>,
 	activeIndex: props.initialActiveIndex || 0,
 	activeSubcategoryIndex: 0,
 	ALL_NODE_FILTER,
@@ -180,151 +226,159 @@ const state = reactive({
 const searchBar = ref<InstanceType<typeof SearchBar>>();
 const scrollableContainer = ref<InstanceType<typeof HTMLElement>>();
 
-const activeSubcategory = computed<INodeCreateElement | null> (
-	() => state.activeSubcategoryHistory[state.activeSubcategoryHistory.length - 1]?.subcategory || null,
+const activeSubcategory = computed<INodeCreateElement | null>(
+	() =>
+		state.activeSubcategoryHistory[state.activeSubcategoryHistory.length - 1]?.subcategory || null,
 );
 
-const activeSubcategoryTitle = computed<string> (() => {
-  if(!activeSubcategory.value || !activeSubcategory.value.properties) return '';
+const activeSubcategoryTitle = computed<string>(() => {
+	if (!activeSubcategory.value || !activeSubcategory.value.properties) return '';
 
 	const subcategory = (activeSubcategory.value.properties as ISubcategoryItemProps).subcategory;
-  const subcategoryName = camelcase(subcategory);
+	const subcategoryName = camelcase(subcategory);
 
-  const titleLocaleKey = `nodeCreator.subcategoryTitles.${subcategoryName}` as BaseTextKey;
-  const nameLocaleKey = `nodeCreator.subcategoryNames.${subcategoryName}` as BaseTextKey;
+	const titleLocaleKey = `nodeCreator.subcategoryTitles.${subcategoryName}` as BaseTextKey;
+	const nameLocaleKey = `nodeCreator.subcategoryNames.${subcategoryName}` as BaseTextKey;
 
-  const titleLocale = instance?.proxy?.$locale.baseText(titleLocaleKey) as string;
-  const nameLocale = instance?.proxy?.$locale.baseText(nameLocaleKey) as string;
-  // If resolved title locale is same as the locale key it means it doesn't exist
-  // so we fallback to the subcategoryName
-	if(titleLocale === titleLocaleKey) return nameLocale === nameLocaleKey ? subcategory : nameLocale;
+	const titleLocale = instance?.proxy?.$locale.baseText(titleLocaleKey) as string;
+	const nameLocale = instance?.proxy?.$locale.baseText(nameLocaleKey) as string;
+	// If resolved title locale is same as the locale key it means it doesn't exist
+	// so we fallback to the subcategoryName
+	if (titleLocale === titleLocaleKey)
+		return nameLocale === nameLocaleKey ? subcategory : nameLocale;
 
-  return titleLocale;
+	return titleLocale;
 });
 
-const searchFilter = computed<string> (() => nodeCreatorStore.itemsFilter.toLowerCase().trim());
+const searchFilter = computed<string>(() => nodeCreatorStore.itemsFilter.toLowerCase().trim());
 
-
-const matchedTypeNodes = computed<INodeCreateElement[]> (() => {
-  if(!props.filterByType) return props.searchItems;
-  return props.searchItems.filter((el: INodeCreateElement) => matchesSelectType(el, nodeCreatorStore.selectedType));
+const matchedTypeNodes = computed<INodeCreateElement[]>(() => {
+	if (!props.filterByType) return props.searchItems;
+	return props.searchItems.filter((el: INodeCreateElement) =>
+		matchesSelectType(el, nodeCreatorStore.selectedType),
+	);
 });
 
-const filteredNodeTypes = computed<INodeCreateElement[]> (() => {
-  const filter = searchFilter.value;
+const filteredNodeTypes = computed<INodeCreateElement[]>(() => {
+	const filter = searchFilter.value;
 
-  let returnItems: INodeCreateElement[] = [];
-  if (defaultLocale !== 'en') {
-    returnItems = props.searchItems.filter((el: INodeCreateElement) => {
-      return filter && matchesSelectType(el, nodeCreatorStore.selectedType) && matchesNodeType(el, filter);
-    });
-  }
-  else {
-    const matchingNodes = props.filterByType
+	let returnItems: INodeCreateElement[] = [];
+	if (defaultLocale !== 'en') {
+		returnItems = props.searchItems.filter((el: INodeCreateElement) => {
+			return (
+				filter &&
+				matchesSelectType(el, nodeCreatorStore.selectedType) &&
+				matchesNodeType(el, filter)
+			);
+		});
+	} else {
+		const matchingNodes = props.filterByType
 			? props.searchItems.filter((el) => matchesSelectType(el, nodeCreatorStore.selectedType))
 			: props.searchItems;
 
-    const matchedCategorizedNodes = sublimeSearch<INodeCreateElement>(filter, matchingNodes, [
-			{key: 'properties.nodeType.displayName', weight: 2},
-			{key: 'properties.nodeType.codex.alias', weight: 1},
+		const matchedCategorizedNodes = sublimeSearch<INodeCreateElement>(filter, matchingNodes, [
+			{ key: 'properties.nodeType.displayName', weight: 2 },
+			{ key: 'properties.nodeType.codex.alias', weight: 1 },
 		]);
-    returnItems = matchedCategorizedNodes.map(({item}) => item);
-  }
+		returnItems = matchedCategorizedNodes.map(({ item }) => item);
+	}
 
-  return returnItems;
+	return returnItems;
 });
 
-const filteredAllNodeTypes = computed<INodeCreateElement[]> (() => {
-  if(filteredNodeTypes.value.length > 0) return [];
+const filteredAllNodeTypes = computed<INodeCreateElement[]>(() => {
+	if (filteredNodeTypes.value.length > 0) return [];
 
-  const matchedAllNodex = props.allItems.filter((el: INodeCreateElement) => {
-    return searchFilter.value && el.type === 'node' && matchesNodeType(el, searchFilter.value);
-  });
+	const matchedAllNodex = props.allItems.filter((el: INodeCreateElement) => {
+		return searchFilter.value && el.type === 'node' && matchesNodeType(el, searchFilter.value);
+	});
 
-  return matchedAllNodex;
+	return matchedAllNodex;
 });
 
-const categorized = computed<INodeCreateElement[]> (() => {
-  return props.categorizedItems
-    .reduce((accu: INodeCreateElement[], el: INodeCreateElement) => {
-      if(
-        el.type === 'subcategory' &&
-        (props.excludedSubcategories || []).includes((el.properties as ISubcategoryItemProps).subcategory)
-      ) {
-        return accu;
-      }
+const categorized = computed<INodeCreateElement[]>(() => {
+	return props.categorizedItems.reduce((accu: INodeCreateElement[], el: INodeCreateElement) => {
+		if (
+			el.type === 'subcategory' &&
+			(props.excludedSubcategories || []).includes(
+				(el.properties as ISubcategoryItemProps).subcategory,
+			)
+		) {
+			return accu;
+		}
 
-      if (
-        el.type !== 'category' &&
-        !state.activeCategory.includes(el.category)
-      ) {
-        return accu;
-      }
+		if (el.type !== 'category' && !state.activeCategory.includes(el.category)) {
+			return accu;
+		}
 
-      if (!matchesSelectType(el, nodeCreatorStore.selectedType)) {
-        return accu;
-      }
+		if (!matchesSelectType(el, nodeCreatorStore.selectedType)) {
+			return accu;
+		}
 
-      if (el.type === 'category') {
-        accu.push({
-          ...el,
-          properties: {
-            expanded: state.activeCategory.includes(el.category),
-          },
-        } as INodeCreateElement);
-        return accu;
-      }
+		if (el.type === 'category') {
+			accu.push({
+				...el,
+				properties: {
+					expanded: state.activeCategory.includes(el.category),
+				},
+			} as INodeCreateElement);
+			return accu;
+		}
 
-      accu.push(el);
-      return accu;
-    }, []);
+		accu.push(el);
+		return accu;
+	}, []);
 });
 
-const subcategorizedItems = computed<INodeCreateElement[]> (() => {
-  if(!activeSubcategory.value) return [];
+const subcategorizedItems = computed<INodeCreateElement[]>(() => {
+	if (!activeSubcategory.value) return [];
 
-  const category = activeSubcategory.value.category;
-  const subcategory = (activeSubcategory.value.properties as ISubcategoryItemProps).subcategory;
+	const category = activeSubcategory.value.category;
+	const subcategory = (activeSubcategory.value.properties as ISubcategoryItemProps).subcategory;
 
-  // If no category is set, we use all categorized nodes
-  const nodes = category
-    ? props.categoriesWithNodes[category][subcategory].nodes
-    : categorized.value;
+	// If no category is set, we use all categorized nodes
+	const nodes = category
+		? props.categoriesWithNodes[category][subcategory].nodes
+		: categorized.value;
 
-  return nodes.filter((el: INodeCreateElement) => matchesSelectType(el, nodeCreatorStore.selectedType));
+	return nodes.filter((el: INodeCreateElement) =>
+		matchesSelectType(el, nodeCreatorStore.selectedType),
+	);
 });
 
-const renderedItems = computed<INodeCreateElement[]> (() => {
-  if(props.firstLevelItems.length > 0 && activeSubcategory.value === null) return props.firstLevelItems;
-  if(props.flatten) return matchedTypeNodes.value;
-  if(subcategorizedItems.value.length === 0) return categorized.value;
+const renderedItems = computed<INodeCreateElement[]>(() => {
+	if (props.firstLevelItems.length > 0 && activeSubcategory.value === null)
+		return props.firstLevelItems;
+	if (props.flatten) return matchedTypeNodes.value;
+	if (subcategorizedItems.value.length === 0) return categorized.value;
 
-	const isSingleCategory = subcategorizedItems.value.filter((item) => item.type === 'category').length === 1;
-  return isSingleCategory ? subcategorizedItems.value.slice(1) : subcategorizedItems.value;
+	const isSingleCategory =
+		subcategorizedItems.value.filter((item) => item.type === 'category').length === 1;
+	return isSingleCategory ? subcategorizedItems.value.slice(1) : subcategorizedItems.value;
 });
 
-const isSearchVisible = computed<boolean> (() => {
-  if(subcategorizedItems.value.length === 0) return true;
+const isSearchVisible = computed<boolean>(() => {
+	if (subcategorizedItems.value.length === 0) return true;
 
-  let totalItems = 0;
-  for (const item of subcategorizedItems.value) {
-    // Category contains many nodes so we need to count all of them
-    // for the current selectedType
-    if(item.type === 'category') {
-      const categoryItems = props.categoriesWithNodes[item.key];
-      const categoryItemsCount = Object.values(categoryItems)?.[0];
-      const countKeys = NODE_TYPE_COUNT_MAPPER[nodeCreatorStore.selectedType];
+	let totalItems = 0;
+	for (const item of subcategorizedItems.value) {
+		// Category contains many nodes so we need to count all of them
+		// for the current selectedType
+		if (item.type === 'category') {
+			const categoryItems = props.categoriesWithNodes[item.key];
+			const categoryItemsCount = Object.values(categoryItems)?.[0];
+			const countKeys = NODE_TYPE_COUNT_MAPPER[nodeCreatorStore.selectedType];
 
-      for (const countKey of countKeys) {
-        totalItems += categoryItemsCount[(countKey as "triggerCount" | "regularCount")];
-      }
+			for (const countKey of countKeys) {
+				totalItems += categoryItemsCount[countKey as 'triggerCount' | 'regularCount'];
+			}
 
-      continue;
-    }
-    // If it's not category, it must be just a node item so we count it as 1
-    totalItems += 1;
-  }
-  return totalItems > 9;
+			continue;
+		}
+		// If it's not category, it must be just a node item so we count it as 1
+		totalItems += 1;
+	}
+	return totalItems > 9;
 });
 
 // Methods
@@ -332,107 +386,116 @@ function getScrollTop() {
 	return scrollableContainer.value?.scrollTop || 0;
 }
 function setScrollTop(scrollTop: number) {
-	if(scrollableContainer.value) {
+	if (scrollableContainer.value) {
 		scrollableContainer.value.scrollTop = scrollTop;
 	}
 }
 function switchToAllTabAndFilter() {
 	const currentFilter = nodeCreatorStore.itemsFilter;
-  nodeCreatorStore.setShowTabs(true);
-  nodeCreatorStore.setSelectedType(ALL_NODE_FILTER);
-  state.activeSubcategoryHistory = [];
+	nodeCreatorStore.setShowTabs(true);
+	nodeCreatorStore.setSelectedType(ALL_NODE_FILTER);
+	state.activeSubcategoryHistory = [];
 
-  nextTick(() => onNodeFilterChange(currentFilter));
+	nextTick(() => onNodeFilterChange(currentFilter));
 }
 
 function onNodeFilterChange(filter: string) {
-  nodeCreatorStore.setFilter(filter);
+	nodeCreatorStore.setFilter(filter);
 }
 
 function selectWebhook() {
-  emit('nodeTypeSelected', [WEBHOOK_NODE_TYPE]);
+	emit('nodeTypeSelected', [WEBHOOK_NODE_TYPE]);
 }
 
 function selectHttpRequest() {
-  emit('nodeTypeSelected', [HTTP_REQUEST_NODE_TYPE]);
+	emit('nodeTypeSelected', [HTTP_REQUEST_NODE_TYPE]);
 }
 function nodeFilterKeyDown(e: KeyboardEvent) {
-  // We only want to propagate 'Escape' as it closes the node-creator and
-  // 'Tab' which toggles it
-  if (!['Escape', 'Tab'].includes(e.key)) e.stopPropagation();
+	// We only want to propagate 'Escape' as it closes the node-creator and
+	// 'Tab' which toggles it
+	if (!['Escape', 'Tab'].includes(e.key)) e.stopPropagation();
 
-  // Prevent cursors position change
-  if(['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();
+	// Prevent cursors position change
+	if (['ArrowUp', 'ArrowDown'].includes(e.key)) e.preventDefault();
 
-  if (activeSubcategory.value) {
-    const activeList = searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;;
+	if (activeSubcategory.value) {
+		const activeList =
+			searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;
 		const activeNodeType = activeList[state.activeSubcategoryIndex];
 
-    if (e.key === 'ArrowDown' && activeSubcategory.value) {
-      state.activeSubcategoryIndex++;
-      state.activeSubcategoryIndex = Math.min(
-        state.activeSubcategoryIndex,
-        activeList.length - 1,
-      );
-    }
-    else if (e.key === 'ArrowUp' && activeSubcategory.value) {
-      state.activeSubcategoryIndex--;
-      state.activeSubcategoryIndex = Math.max(state.activeSubcategoryIndex, 0);
-    }
-    else if (e.key === 'Enter') {
-      selected(activeNodeType);
-    } else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
-      selected(activeNodeType);
-    } else if (e.key === 'ArrowLeft') {
-      onSubcategoryClose();
-    } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
-      selected(activeNodeType);
-    } else if (e.key === 'ArrowRight' && (['node','action'].includes(activeNodeType?.type))) {
+		if (e.key === 'ArrowDown' && activeSubcategory.value) {
+			state.activeSubcategoryIndex++;
+			state.activeSubcategoryIndex = Math.min(state.activeSubcategoryIndex, activeList.length - 1);
+		} else if (e.key === 'ArrowUp' && activeSubcategory.value) {
+			state.activeSubcategoryIndex--;
+			state.activeSubcategoryIndex = Math.max(state.activeSubcategoryIndex, 0);
+		} else if (e.key === 'Enter') {
+			selected(activeNodeType);
+		} else if (
+			e.key === 'ArrowLeft' &&
+			activeNodeType?.type === 'category' &&
+			(activeNodeType.properties as ICategoryItemProps).expanded
+		) {
+			selected(activeNodeType);
+		} else if (e.key === 'ArrowLeft') {
+			onSubcategoryClose();
+		} else if (
+			e.key === 'ArrowRight' &&
+			activeNodeType?.type === 'category' &&
+			!(activeNodeType.properties as ICategoryItemProps).expanded
+		) {
+			selected(activeNodeType);
+		} else if (e.key === 'ArrowRight' && ['node', 'action'].includes(activeNodeType?.type)) {
 			selected(activeNodeType);
 		}
-    return;
-  }
+		return;
+	}
 
-  const activeList = searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;
-  const activeNodeType = activeList[state.activeIndex];
+	const activeList = searchFilter.value.length > 0 ? filteredNodeTypes.value : renderedItems.value;
+	const activeNodeType = activeList[state.activeIndex];
 
-  if (e.key === 'ArrowDown') {
-    state.activeIndex++;
-    // Make sure that we stop at the last nodeType
-    state.activeIndex = Math.min(
-      state.activeIndex,
-      activeList.length - 1,
-    );
-  } else if (e.key === 'ArrowUp') {
-    state.activeIndex--;
-    // Make sure that we do not get before the first nodeType
-    state.activeIndex = Math.max(state.activeIndex, 0);
-  } else if (e.key === 'Enter' && activeNodeType) {
-    selected(activeNodeType);
-  } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'subcategory') {
-    selected(activeNodeType);
-  } else if (e.key === 'ArrowRight' && activeNodeType?.type === 'category' && !(activeNodeType.properties as ICategoryItemProps).expanded) {
-    selected(activeNodeType);
-  } else if (e.key === 'ArrowLeft' && activeNodeType?.type === 'category' && (activeNodeType.properties as ICategoryItemProps).expanded) {
-    selected(activeNodeType);
-  } else if (e.key === 'ArrowRight' && (['node','action'].includes(activeNodeType?.type))) {
+	if (e.key === 'ArrowDown') {
+		state.activeIndex++;
+		// Make sure that we stop at the last nodeType
+		state.activeIndex = Math.min(state.activeIndex, activeList.length - 1);
+	} else if (e.key === 'ArrowUp') {
+		state.activeIndex--;
+		// Make sure that we do not get before the first nodeType
+		state.activeIndex = Math.max(state.activeIndex, 0);
+	} else if (e.key === 'Enter' && activeNodeType) {
+		selected(activeNodeType);
+	} else if (e.key === 'ArrowRight' && activeNodeType?.type === 'subcategory') {
+		selected(activeNodeType);
+	} else if (
+		e.key === 'ArrowRight' &&
+		activeNodeType?.type === 'category' &&
+		!(activeNodeType.properties as ICategoryItemProps).expanded
+	) {
+		selected(activeNodeType);
+	} else if (
+		e.key === 'ArrowLeft' &&
+		activeNodeType?.type === 'category' &&
+		(activeNodeType.properties as ICategoryItemProps).expanded
+	) {
+		selected(activeNodeType);
+	} else if (e.key === 'ArrowRight' && ['node', 'action'].includes(activeNodeType?.type)) {
 		selected(activeNodeType);
 	}
 }
 function selected(element: INodeCreateElement) {
-  const typeHandler = {
-    category: () => onCategorySelected(element.category),
-    subcategory: () => onSubcategorySelected(element),
+	const typeHandler = {
+		category: () => onCategorySelected(element.category),
+		subcategory: () => onSubcategorySelected(element),
 		node: () => onNodeSelected(element as NodeCreateElement),
 		action: () => onActionSelected(element),
-  };
+	};
 
-  typeHandler[element.type]();
+	typeHandler[element.type]();
 }
 
 function onNodeSelected(element: NodeCreateElement) {
 	const hasActions = (element.properties.nodeType?.actions?.length || 0) > 0;
-	if(props.withActionsGetter && props.withActionsGetter(element) === true && hasActions) {
+	if (props.withActionsGetter && props.withActionsGetter(element) === true && hasActions) {
 		emit('actionsOpen', element.properties.nodeType);
 		return;
 	}
@@ -440,18 +503,19 @@ function onNodeSelected(element: NodeCreateElement) {
 }
 
 function onCategorySelected(category: string) {
-  if (state.activeCategory.includes(category)) {
-    state.activeCategory = state.activeCategory.filter(
-      (active: string) => active !== category,
-    );
-  } else {
-    state.activeCategory = [...state.activeCategory, category];
-    instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: workflowId });
-  }
+	if (state.activeCategory.includes(category)) {
+		state.activeCategory = state.activeCategory.filter((active: string) => active !== category);
+	} else {
+		state.activeCategory = [...state.activeCategory, category];
+		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', {
+			category_name: category,
+			workflow_id: workflowId,
+		});
+	}
 
-  state.activeIndex = categorized.value.findIndex(
-    (el: INodeCreateElement) => el.category === category,
-  );
+	state.activeIndex = categorized.value.findIndex(
+		(el: INodeCreateElement) => el.category === category,
+	);
 }
 function onActionSelected(element: INodeCreateElement) {
 	emit('actionSelected', element);
@@ -461,19 +525,22 @@ function onSubcategorySelected(selected: INodeCreateElement, track = true) {
 	state.transitionDirection = 'in';
 	// Store the current subcategory UI details in the state
 	// so we could revert it when the user closes the subcategory
-  state.activeSubcategoryHistory.push({
+	state.activeSubcategoryHistory.push({
 		subcategory: selected,
 		activeIndex: state.activeSubcategoryIndex,
 		scrollPosition: getScrollTop(),
 		filter: nodeCreatorStore.itemsFilter,
 	});
 	nodeCreatorStore.setFilter('');
-  emit('onSubcategorySelected', selected);
-  nodeCreatorStore.setShowTabs(false);
-  state.activeSubcategoryIndex = 0;
+	emit('onSubcategorySelected', selected);
+	nodeCreatorStore.setShowTabs(false);
+	state.activeSubcategoryIndex = 0;
 
-	if(track) {
-		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: workflowId });
+	if (track) {
+		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', {
+			selected,
+			workflow_id: workflowId,
+		});
 	}
 }
 
@@ -482,23 +549,32 @@ async function onSubcategoryClose() {
 	const poppedSubCategory = state.activeSubcategoryHistory.pop();
 	onNodeFilterChange(poppedSubCategory?.filter || '');
 	await nextTick();
-	emit('subcategoryClose', state.activeSubcategoryHistory.map((el) => el.subcategory));
+	emit(
+		'subcategoryClose',
+		state.activeSubcategoryHistory.map((el) => el.subcategory),
+	);
 	await nextTick();
 	setScrollTop(poppedSubCategory?.scrollPosition || 0);
 	state.activeSubcategoryIndex = poppedSubCategory?.activeIndex || 0;
 
-	if(!nodeCreatorStore.showScrim && state.activeSubcategoryHistory.length === 0) {
+	if (!nodeCreatorStore.showScrim && state.activeSubcategoryHistory.length === 0) {
 		nodeCreatorStore.setShowTabs(true);
 	}
 }
 
-watch(() => props.expandAllCategories, (expandAll) => {
-	if (expandAll) state.activeCategory = Object.keys(props.categoriesWithNodes);
-});
+watch(
+	() => props.expandAllCategories,
+	(expandAll) => {
+		if (expandAll) state.activeCategory = Object.keys(props.categoriesWithNodes);
+	},
+);
 
-watch(() => props.subcategoryOverride, (subcategory) => {
-	if (subcategory) onSubcategorySelected(subcategory, false);
-});
+watch(
+	() => props.subcategoryOverride,
+	(subcategory) => {
+		if (subcategory) onSubcategorySelected(subcategory, false);
+	},
+);
 
 onMounted(() => {
 	registerCustomAction('showAllNodeCreatorNodes', switchToAllTabAndFilter);
@@ -518,30 +594,33 @@ watch(filteredNodeTypes, (returnItems) => {
 });
 
 watch(isSearchVisible, (isVisible) => {
-	if(isVisible === false) {
+	if (isVisible === false) {
 		// Focus the root container when search is hidden to make sure
 		// keyboard navigation still works
 		nextTick(() => state.mainPanelContainer?.focus());
 	}
 });
-watch(() => nodeCreatorStore.itemsFilter, (newValue, oldValue) => {
-	// Reset the index whenver the filter-value changes
-	state.activeIndex = 0;
-	state.activeSubcategoryIndex = 0;
-	$externalHooks().run('nodeCreateList.nodeFilterChanged', {
-		oldValue,
-		newValue,
-		selectedType: nodeCreatorStore.selectedType,
-		filteredNodes: filteredNodeTypes.value,
-	});
-	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.nodeFilterChanged', {
-		oldValue,
-		newValue,
-		selectedType: nodeCreatorStore.selectedType,
-		filteredNodes: filteredNodeTypes.value,
-		workflow_id: workflowId,
-	});
-});
+watch(
+	() => nodeCreatorStore.itemsFilter,
+	(newValue, oldValue) => {
+		// Reset the index whenver the filter-value changes
+		state.activeIndex = 0;
+		state.activeSubcategoryIndex = 0;
+		$externalHooks().run('nodeCreateList.nodeFilterChanged', {
+			oldValue,
+			newValue,
+			selectedType: nodeCreatorStore.selectedType,
+			filteredNodes: filteredNodeTypes.value,
+		});
+		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.nodeFilterChanged', {
+			oldValue,
+			newValue,
+			selectedType: nodeCreatorStore.selectedType,
+			filteredNodes: filteredNodeTypes.value,
+			workflow_id: workflowId,
+		});
+	},
+);
 
 const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state);
 </script>
@@ -557,7 +636,6 @@ const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state
 	right: 0;
 }
 
-
 :global(.panel-slide-out-enter),
 :global(.panel-slide-in-leave-to) {
 	transform: translateX(0);
@@ -593,7 +671,7 @@ const { activeSubcategoryIndex, activeIndex, mainPanelContainer } = toRefs(state
 	margin: 0 var(--spacing-xs) 0;
 	padding: var(--spacing-4xs) 0;
 	line-height: var(--font-line-height-regular);
-	border-top: 1px solid #DBDFE7;
+	border-top: 1px solid #dbdfe7;
 	z-index: 1;
 	margin-top: -1px;
 }
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
index d67616f57f..18363d692c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
@@ -1,13 +1,9 @@
 <template>
 	<div :class="$style.category">
 		<span :class="$style.name">
-			{{ renderCategoryName(item.category) }}{{ count !== undefined ? ` (${count})` : ''}}
+			{{ renderCategoryName(item.category) }}{{ count !== undefined ? ` (${count})` : '' }}
 		</span>
-		<font-awesome-icon
-			v-if="isExpanded"
-			icon="chevron-down"
-			:class="$style.arrow"
-		/>
+		<font-awesome-icon v-if="isExpanded" icon="chevron-down" :class="$style.arrow" />
 		<font-awesome-icon :class="$style.arrow" icon="chevron-up" v-else />
 	</div>
 </template>
@@ -25,15 +21,13 @@ export interface Props {
 const props = defineProps<Props>();
 const instance = getCurrentInstance();
 
-const isExpanded = computed<boolean>(() =>(props.item.properties as ICategoryItemProps).expanded);
+const isExpanded = computed<boolean>(() => (props.item.properties as ICategoryItemProps).expanded);
 
 function renderCategoryName(categoryName: string) {
 	const camelCasedCategoryName = camelcase(categoryName) as CategoryName;
 	const key = `nodeCreator.categoryNames.${camelCasedCategoryName}` as const;
 
-	return instance?.proxy.$locale.exists(key)
-		? instance?.proxy.$locale.baseText(key)
-		: categoryName;
+	return instance?.proxy.$locale.exists(key) ? instance?.proxy.$locale.baseText(key) : categoryName;
 }
 </script>
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
index 06e402b5f3..fcaa88eb0e 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
@@ -12,10 +12,10 @@
 			:key="`${item.key}-${index}`"
 			data-test-id="item-iterator-item"
 			:class="{
-				'clickable': !disabled,
+				clickable: !disabled,
 				[$style[item.type]]: true,
 				[$style.active]: activeIndex === index && !disabled,
-				[$style.iteratorItem]: true
+				[$style.iteratorItem]: true,
 			}"
 			ref="iteratorItems"
 			@click="wrappedEmit('selected', item)"
@@ -26,10 +26,7 @@
 				:count="enableGlobalCategoriesCounter ? getCategoryCount(item) : undefined"
 			/>
 
-			<subcategory-item
-				v-else-if="item.type === 'subcategory'"
-				:item="item"
-			/>
+			<subcategory-item v-else-if="item.type === 'subcategory'" :item="item" />
 
 			<node-item
 				v-else-if="item.type === 'node'"
@@ -51,7 +48,7 @@
 		</div>
 		<aside
 			v-for="item in elements.length"
-			v-show="(renderedItems.length < item)"
+			v-show="renderedItems.length < item"
 			:key="item"
 			:class="$style.loadingItem"
 		>
@@ -85,9 +82,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'selected', element: INodeCreateElement, $e?: Event): void,
-	(event: 'dragstart', element: INodeCreateElement, $e: Event): void,
-	(event: 'dragend', element: INodeCreateElement, $e: Event): void,
+	(event: 'selected', element: INodeCreateElement, $e?: Event): void;
+	(event: 'dragstart', element: INodeCreateElement, $e: Event): void;
+	(event: 'dragend', element: INodeCreateElement, $e: Event): void;
 }>();
 
 const state = reactive({
@@ -96,10 +93,14 @@ const state = reactive({
 });
 const iteratorItems = ref<HTMLElement[]>([]);
 
-function wrappedEmit(event: 'selected' | 'dragstart' | 'dragend', element: INodeCreateElement, $e?: Event) {
+function wrappedEmit(
+	event: 'selected' | 'dragstart' | 'dragend',
+	element: INodeCreateElement,
+	$e?: Event,
+) {
 	if (props.disabled) return;
 
-	emit((event as 'selected' || 'dragstart' || 'dragend'), element, $e);
+	emit((event as 'selected') || 'dragstart' || 'dragend', element, $e);
 }
 function getCategoryCount(item: CategoryCreateElement) {
 	const { categoriesWithNodes } = useNodeTypesStore();
@@ -113,7 +114,7 @@ function getCategoryCount(item: CategoryCreateElement) {
 		const countKeys = NODE_TYPE_COUNT_MAPPER[useNodeCreatorStore().selectedType];
 
 		for (const countKey of countKeys) {
-			accu += currentCategory[subcategory][(countKey as "triggerCount" | "regularCount")];
+			accu += currentCategory[subcategory][countKey as 'triggerCount' | 'regularCount'];
 		}
 
 		return accu;
@@ -124,13 +125,15 @@ function getCategoryCount(item: CategoryCreateElement) {
 // Lazy render large items lists to prevent the browser from freezing
 // when loading many items.
 function renderItems() {
-	if(props.elements.length <= 20 || props.lazyRender === false) {
+	if (props.elements.length <= 20 || props.lazyRender === false) {
 		state.renderedItems = props.elements;
 		return;
-	};
+	}
 
 	if (state.renderedItems.length < props.elements.length) {
-		state.renderedItems.push(...props.elements.slice(state.renderedItems.length, state.renderedItems.length + 10));
+		state.renderedItems.push(
+			...props.elements.slice(state.renderedItems.length, state.renderedItems.length + 10),
+		);
 		state.renderAnimationRequest = window.requestAnimationFrame(renderItems);
 	}
 }
@@ -139,7 +142,6 @@ function beforeEnter(el: HTMLElement) {
 	el.style.height = '0';
 }
 
-
 function enter(el: HTMLElement) {
 	el.style.height = `${el.scrollHeight}px`;
 }
@@ -163,17 +165,23 @@ onUnmounted(() => {
 
 // Make sure the active item is always visible
 // scroll if needed
-watch(() => props.activeIndex, async () => {
-	if(props.activeIndex === undefined) return;
-	iteratorItems.value[props.activeIndex]?.scrollIntoView({ block: 'nearest' });
-});
+watch(
+	() => props.activeIndex,
+	async () => {
+		if (props.activeIndex === undefined) return;
+		iteratorItems.value[props.activeIndex]?.scrollIntoView({ block: 'nearest' });
+	},
+);
 
 // Trigger elements re-render when they change
-watch(() => props.elements, async () => {
-	window.cancelAnimationFrame(state.renderAnimationRequest);
-	state.renderedItems = [];
-	renderItems();
-});
+watch(
+	() => props.elements,
+	async () => {
+		window.cancelAnimationFrame(state.renderAnimationRequest);
+		state.renderedItems = [];
+		renderItems();
+	},
+);
 
 const { renderedItems } = toRefs(state);
 </script>
@@ -188,7 +196,7 @@ const { renderedItems } = toRefs(state);
 	margin-left: 1px;
 	position: relative;
 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
 		left: -1px;
 		top: 0;
@@ -199,14 +207,13 @@ const { renderedItems } = toRefs(state);
 		border-color: $node-creator-item-hover-border-color;
 	}
 
-	&.active::before  {
+	&.active::before {
 		border-color: $color-primary !important;
 	}
 
 	&.category.singleCategory {
 		display: none;
 	}
-
 }
 .itemIterator {
 	> *:last-child {
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index 0c06a61cf3..81c271ecf4 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -1,15 +1,12 @@
 <template>
-	<div
-		class="container"
-		ref="mainPanelContainer"
-	>
+	<div class="container" ref="mainPanelContainer">
 		<div class="main-panel">
 			<trigger-helper-panel
 				v-if="nodeCreatorStore.selectedType === TRIGGER_NODE_FILTER"
 				@nodeTypeSelected="$listeners.nodeTypeSelected"
 			>
 				<template #header>
-					<type-selector/>
+					<type-selector />
 				</template>
 			</trigger-helper-panel>
 			<categorized-items
@@ -36,7 +33,12 @@
 import { watch, getCurrentInstance, onMounted, onUnmounted } from 'vue';
 import { externalHooks } from '@/mixins/externalHooks';
 import TriggerHelperPanel from './TriggerHelperPanel.vue';
-import { ALL_NODE_FILTER, TRIGGER_NODE_FILTER, OTHER_TRIGGER_NODES_SUBCATEGORY, CORE_NODES_CATEGORY } from '@/constants';
+import {
+	ALL_NODE_FILTER,
+	TRIGGER_NODE_FILTER,
+	OTHER_TRIGGER_NODES_SUBCATEGORY,
+	CORE_NODES_CATEGORY,
+} from '@/constants';
 import CategorizedItems from './CategorizedItems.vue';
 import TypeSelector from './TypeSelector.vue';
 import { INodeCreateElement } from '@/Interface';
@@ -58,17 +60,20 @@ const { workflowId } = useWorkflowsStore();
 const nodeCreatorStore = useNodeCreatorStore();
 const { categorizedItems, categoriesWithNodes } = useNodeTypesStore();
 
-watch(() => nodeCreatorStore.selectedType, (newValue, oldValue) => {
-	$externalHooks().run('nodeCreateList.selectedTypeChanged', {
-		oldValue,
-		newValue,
-	});
-	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
-		old_filter: oldValue,
-		new_filter: newValue,
-		workflow_id: workflowId,
-	});
-});
+watch(
+	() => nodeCreatorStore.selectedType,
+	(newValue, oldValue) => {
+		$externalHooks().run('nodeCreateList.selectedTypeChanged', {
+			oldValue,
+			newValue,
+		});
+		instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
+			old_filter: oldValue,
+			new_filter: newValue,
+			workflow_id: workflowId,
+		});
+	},
+);
 
 onMounted(() => {
 	$externalHooks().run('nodeCreateList.mounted');
@@ -79,9 +84,10 @@ onMounted(() => {
 onUnmounted(() => {
 	nodeCreatorStore.setSelectedType(ALL_NODE_FILTER);
 	$externalHooks().run('nodeCreateList.destroyed');
-	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: workflowId });
+	instance?.proxy.$telemetry.trackNodesPanel('nodeCreateList.destroyed', {
+		workflow_id: workflowId,
+	});
 });
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue b/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
index 793d27ef74..31b3fb9f14 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NoResults.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{[$style.noResults]: true, [$style.iconless]: !showIcon}">
+	<div :class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }">
 		<div :class="$style.icon" v-if="showIcon">
 			<no-results-icon />
 		</div>
@@ -14,7 +14,8 @@
 			<p v-text="$locale.baseText('nodeCreator.noResults.wantUsToMakeItFaster')" />
 			<div>
 				<n8n-link :to="REQUEST_NODE_FORM_URL">
-					<span>{{ $locale.baseText('nodeCreator.noResults.requestTheNode') }}</span>&nbsp;
+					<span>{{ $locale.baseText('nodeCreator.noResults.requestTheNode') }}</span
+					>&nbsp;
 					<span>
 						<font-awesome-icon
 							:class="$style.external"
@@ -28,7 +29,6 @@
 	</div>
 </template>
 
-
 <script setup lang="ts">
 import { REQUEST_NODE_FORM_URL } from '@/constants';
 import NoResultsIcon from './NoResultsIcon.vue';
@@ -65,7 +65,8 @@ defineProps<Props>();
 	}
 }
 
-.action p, .request p {
+.action p,
+.request p {
 	font-size: var(--font-size-s);
 	line-height: var(--font-line-height-xloose);
 }
@@ -83,11 +84,10 @@ defineProps<Props>();
 .icon {
 	margin-top: var(--spacing-2xl);
 	min-height: 67px;
-	opacity: .6;
+	opacity: 0.6;
 }
 
 .external {
 	font-size: var(--font-size-2xs);
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NoResultsIcon.vue b/packages/editor-ui/src/components/Node/NodeCreator/NoResultsIcon.vue
index 697b1a42c7..7dc9e10d57 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NoResultsIcon.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NoResultsIcon.vue
@@ -1,22 +1,47 @@
 <template>
-	<svg width="75px" height="75px" viewBox="0 0 75 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>no-nodes-keyart</title>
-    <g id="Nodes-panel-prototype-V2.1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="nodes-panel-(component)" transform="translate(-2085.000000, -352.000000)">
-            <g id="nodes_panel" transform="translate(1880.000000, 151.000000)">
-                <g id="Panel" transform="translate(50.000000, 0.000000)">
-                    <g id="Group-3" transform="translate(105.000000, 171.000000)">
-                        <g id="no-nodes-keyart" transform="translate(50.000000, 30.000000)">
-                            <rect id="Rectangle" x="0" y="0" width="75" height="75"></rect>
-                            <g id="Group" transform="translate(6.562500, 8.164062)" fill="#C4C8D1" fill-rule="nonzero">
-                                <polygon id="Rectangle" transform="translate(49.192016, 45.302553) rotate(-45.000000) translate(-49.192016, -45.302553) " points="44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261"></polygon>
-                                <path d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z" id="Path"></path>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
+	<svg
+		width="75px"
+		height="75px"
+		viewBox="0 0 75 75"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+	>
+		<title>no-nodes-keyart</title>
+		<g
+			id="Nodes-panel-prototype-V2.1"
+			stroke="none"
+			stroke-width="1"
+			fill="none"
+			fill-rule="evenodd"
+		>
+			<g id="nodes-panel-(component)" transform="translate(-2085.000000, -352.000000)">
+				<g id="nodes_panel" transform="translate(1880.000000, 151.000000)">
+					<g id="Panel" transform="translate(50.000000, 0.000000)">
+						<g id="Group-3" transform="translate(105.000000, 171.000000)">
+							<g id="no-nodes-keyart" transform="translate(50.000000, 30.000000)">
+								<rect id="Rectangle" x="0" y="0" width="75" height="75"></rect>
+								<g
+									id="Group"
+									transform="translate(6.562500, 8.164062)"
+									fill="#C4C8D1"
+									fill-rule="nonzero"
+								>
+									<polygon
+										id="Rectangle"
+										transform="translate(49.192016, 45.302553) rotate(-45.000000) translate(-49.192016, -45.302553) "
+										points="44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261"
+									></polygon>
+									<path
+										d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"
+										id="Path"
+									></path>
+								</g>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
 	</svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index ce546916a2..bd73ced378 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,30 +1,26 @@
 <template>
 	<div>
-		<aside :class="{'node-creator-scrim': true, active: nodeCreatorStore.showScrim}" />
+		<aside :class="{ 'node-creator-scrim': true, active: nodeCreatorStore.showScrim }" />
 
 		<slide-transition>
 			<div
 				v-if="active"
 				class="node-creator"
 				ref="nodeCreator"
-			 	v-click-outside="onClickOutside"
-			 	@dragover="onDragOver"
-			 	@drop="onDrop"
+				v-click-outside="onClickOutside"
+				@dragover="onDragOver"
+				@drop="onDrop"
 				@mousedown="onMouseDown"
 				@mouseup="onMouseUp"
 				data-test-id="node-creator"
 			>
-				<main-panel
-					@nodeTypeSelected="$listeners.nodeTypeSelected"
-					:searchItems="searchItems"
-				/>
+				<main-panel @nodeTypeSelected="$listeners.nodeTypeSelected" :searchItems="searchItems" />
 			</div>
 		</slide-transition>
 	</div>
 </template>
 
 <script setup lang="ts">
-
 import { computed, watch, reactive, toRefs } from 'vue';
 
 import { INodeCreateElement } from '@/Interface';
@@ -41,7 +37,7 @@ export interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'closeNodeCreator'): void,
+	(event: 'closeNodeCreator'): void;
 }>();
 
 const nodeCreatorStore = useNodeCreatorStore();
@@ -72,13 +68,13 @@ const searchItems = computed<INodeCreateElement[]>(() => {
 	}));
 });
 
-function onClickOutside (event: Event) {
+function onClickOutside(event: Event) {
 	// We need to prevent cases where user would click inside the node creator
 	// and try to drag undraggable element. In that case the click event would
 	// be fired and the node creator would be closed. So we stop that if we detect
 	// that the click event originated from inside the node creator. And fire click even on the
 	// original target.
-	if(state.mousedownInsideEvent) {
+	if (state.mousedownInsideEvent) {
 		const clickEvent = new MouseEvent('click', {
 			bubbles: true,
 			cancelable: true,
@@ -86,7 +82,7 @@ function onClickOutside (event: Event) {
 		state.mousedownInsideEvent.target?.dispatchEvent(clickEvent);
 		state.mousedownInsideEvent = null;
 		return;
-	};
+	}
 
 	if (event.type === 'click') {
 		emit('closeNodeCreator');
@@ -110,20 +106,29 @@ function onDrop(event: DragEvent) {
 	const nodeCreatorBoundingRect = (state.nodeCreator as Element).getBoundingClientRect();
 
 	// Abort drag end event propagation if dropped inside nodes panel
-	if (nodeTypeName && event.pageX >= nodeCreatorBoundingRect.x && event.pageY >= nodeCreatorBoundingRect.y) {
+	if (
+		nodeTypeName &&
+		event.pageX >= nodeCreatorBoundingRect.x &&
+		event.pageY >= nodeCreatorBoundingRect.y
+	) {
 		event.stopPropagation();
 	}
 }
 
-watch(() => props.active, (isActive) => {
-	if(isActive === false) nodeCreatorStore.setShowScrim(false);
-});
+watch(
+	() => props.active,
+	(isActive) => {
+		if (isActive === false) nodeCreatorStore.setShowScrim(false);
+	},
+);
 
 const { nodeCreator } = toRefs(state);
 </script>
 
 <style scoped lang="scss">
-::v-deep *, *:before, *:after {
+::v-deep *,
+*:before,
+*:after {
 	box-sizing: border-box;
 }
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
index 60df178a03..497967acfb 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
@@ -18,17 +18,20 @@
 		<template #tooltip v-if="isCommunityNode">
 			<p
 				:class="$style.communityNodeIcon"
-				v-html="$locale.baseText('generic.communityNode.tooltip', { interpolate: { packageName: nodeType.name.split('.')[0], docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } })"
+				v-html="
+					$locale.baseText('generic.communityNode.tooltip', {
+						interpolate: {
+							packageName: nodeType.name.split('.')[0],
+							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+						},
+					})
+				"
 				@click="onCommunityNodeTooltipClick"
 			/>
 		</template>
 		<template #dragContent>
-			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer"/>
-			<div
-				:class="$style.draggable"
-				:style="draggableStyle"
-				v-show="dragging"
-			>
+			<div :class="$style.draggableDataTransfer" ref="draggableDataTransfer" />
+			<div :class="$style.draggable" :style="draggableStyle" v-show="dragging">
 				<node-icon :nodeType="nodeType" @click.capture.stop :size="40" :shrink="false" />
 			</div>
 		</template>
@@ -58,10 +61,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'dragstart', $e: DragEvent): void,
-	(event: 'dragend', $e: DragEvent): void,
-	(event: 'nodeTypeSelected', value: string[]): void,
-	(event: 'actionsOpen', value: INodeTypeDescription): void,
+	(event: 'dragstart', $e: DragEvent): void;
+	(event: 'dragend', $e: DragEvent): void;
+	(event: 'nodeTypeSelected', value: string[]): void;
+	(event: 'actionsOpen', value: INodeTypeDescription): void;
 }>();
 
 const instance = getCurrentInstance();
@@ -83,9 +86,11 @@ const showActionArrow = computed(() => props.allowActions && hasActions.value);
 
 const hasActions = computed<boolean>(() => (props.nodeType.actions?.length || 0) > 0);
 
-const shortNodeType = computed<string>(() => instance?.proxy.$locale.shortNodeType(props.nodeType.name) || '');
+const shortNodeType = computed<string>(
+	() => instance?.proxy.$locale.shortNodeType(props.nodeType.name) || '',
+);
 
-const draggableStyle = computed<{ top: string; left: string; }>(() => ({
+const draggableStyle = computed<{ top: string; left: string }>(() => ({
 	top: `${state.draggablePosition.y}px`,
 	left: `${state.draggablePosition.x}px`,
 }));
@@ -101,10 +106,12 @@ const displayName = computed<any>(() => {
 	});
 });
 
-const isTriggerNode = computed<boolean>(() => props.nodeType.displayName.toLowerCase().includes('trigger'));
+const isTriggerNode = computed<boolean>(() =>
+	props.nodeType.displayName.toLowerCase().includes('trigger'),
+);
 
 function onClick() {
-	if(hasActions.value && props.allowActions) emit('actionsOpen', props.nodeType);
+	if (hasActions.value && props.allowActions) emit('actionsOpen', props.nodeType);
 	else emit('nodeTypeSelected', [props.nodeType.name]);
 }
 function onDragStart(event: DragEvent): void {
@@ -113,13 +120,13 @@ function onDragStart(event: DragEvent): void {
 	 * All browsers attach the correct page coordinates to the "dragover" event.
 	 * @bug https://bugzilla.mozilla.org/show_bug.cgi?id=505521
 	 */
-	document.body.addEventListener("dragover", onDragOver);
+	document.body.addEventListener('dragover', onDragOver);
 
 	const { pageX: x, pageY: y } = event;
 
 	if (event.dataTransfer) {
-		event.dataTransfer.effectAllowed = "copy";
-		event.dataTransfer.dropEffect = "copy";
+		event.dataTransfer.effectAllowed = 'copy';
+		event.dataTransfer.dropEffect = 'copy';
 		event.dataTransfer.setDragImage(state.draggableDataTransfer as Element, 0, 0);
 		event.dataTransfer.setData(
 			'nodeTypeName',
@@ -133,17 +140,17 @@ function onDragStart(event: DragEvent): void {
 }
 
 function onDragOver(event: DragEvent): void {
-	if (!state.dragging || event.pageX === 0 && event.pageY === 0) {
+	if (!state.dragging || (event.pageX === 0 && event.pageY === 0)) {
 		return;
 	}
 
-	const [x,y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
+	const [x, y] = getNewNodePosition([], [event.pageX - NODE_SIZE / 2, event.pageY - NODE_SIZE / 2]);
 
 	state.draggablePosition = { x, y };
 }
 
 function onDragEnd(event: DragEvent): void {
-	document.body.removeEventListener("dragover", onDragOver);
+	document.body.removeEventListener('dragover', onDragOver);
 
 	emit('dragend', event);
 
@@ -159,7 +166,6 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 	}
 }
 
-
 defineExpose({
 	onClick,
 });
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index ea89914378..e9470ccfed 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import Vue, { onMounted, reactive, toRefs, onBeforeUnmount  } from 'vue';
+import Vue, { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
 import { externalHooks } from '@/mixins/externalHooks';
 
 export interface Props {
@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'input', value: string): void,
+	(event: 'input', value: string): void;
 }>();
 
 const { $externalHooks } = new externalHooks();
@@ -54,11 +54,11 @@ function focus() {
 
 function onInput(event: Event) {
 	const input = event.target as HTMLInputElement;
-	emit("input", input.value);
+	emit('input', input.value);
 }
 
 function clear() {
-	emit("input", "");
+	emit('input', '');
 }
 
 onMounted(() => {
@@ -91,7 +91,7 @@ defineExpose({
 	border-radius: 4px;
 
 	&:focus-within {
-		border-color: var(--color-secondary)
+		border-color: var(--color-secondary);
 	}
 }
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
index feaaeb381b..f09aa4ee2c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SubcategoryItem.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{[$style.subcategory]: true, [$style.subcategoryWithIcon]: hasIcon}">
+	<div :class="{ [$style.subcategory]: true, [$style.subcategoryWithIcon]: hasIcon }">
 		<node-icon v-if="hasIcon" :class="$style.subcategoryIcon" :nodeType="itemProperties" />
 		<div :class="$style.details">
 			<div :class="$style.title">
@@ -32,7 +32,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		itemProperties() : ISubcategoryItemProps {
+		itemProperties(): ISubcategoryItemProps {
 			return this.item.properties as ISubcategoryItemProps;
 		},
 		subcategoryName(): string {
@@ -45,7 +45,6 @@ export default Vue.extend({
 });
 </script>
 
-
 <style lang="scss" module>
 .subcategoryIcon {
 	min-width: 26px;
@@ -95,5 +94,4 @@ export default Vue.extend({
 	width: 12px;
 	color: $node-creator-arrow-color;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
index 9a80d31885..8052704af5 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/TriggerHelperPanel.vue
@@ -23,13 +23,17 @@
 			@actionsOpen="setActiveActionsNodeType"
 			@actionSelected="onActionSelected"
 		>
-
 			<template #noResultsTitle v-if="isActionsActive">
 				<i />
 			</template>
-			<template #noResultsAction  v-if="isActionsActive">
-				<p v-if="containsAPIAction" v-html="getCustomAPICallHintLocale('apiCallNoResult')" class="clickable" @click.stop="addHttpNode" />
-				<p v-else v-text="$locale.baseText('nodeCreator.noResults.noMatchingActions')"/>
+			<template #noResultsAction v-if="isActionsActive">
+				<p
+					v-if="containsAPIAction"
+					v-html="getCustomAPICallHintLocale('apiCallNoResult')"
+					class="clickable"
+					@click.stop="addHttpNode"
+				/>
+				<p v-else v-text="$locale.baseText('nodeCreator.noResults.noMatchingActions')" />
 			</template>
 
 			<template #header>
@@ -40,9 +44,13 @@
 					:class="$style.title"
 				/>
 			</template>
-			<template #footer v-if="(activeNodeActions && containsAPIAction)">
+			<template #footer v-if="activeNodeActions && containsAPIAction">
 				<slot name="footer" />
-				<span v-html="getCustomAPICallHintLocale('apiCall')" class="clickable" @click.stop="addHttpNode" />
+				<span
+					v-html="getCustomAPICallHintLocale('apiCall')"
+					class="clickable"
+					@click.stop="addHttpNode"
+				/>
 			</template>
 		</categorized-items>
 	</div>
@@ -50,116 +58,156 @@
 
 <script setup lang="ts">
 import { reactive, toRefs, getCurrentInstance, computed, onMounted, ref } from 'vue';
-import { INodeTypeDescription, INodeActionTypeDescription, INodeTypeNameVersion } from 'n8n-workflow';
-import { INodeCreateElement, IActionItemProps, SubcategoryCreateElement, IUpdateInformation } from '@/Interface';
-import { CORE_NODES_CATEGORY, WEBHOOK_NODE_TYPE, OTHER_TRIGGER_NODES_SUBCATEGORY, EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, SCHEDULE_TRIGGER_NODE_TYPE, EMAIL_IMAP_NODE_TYPE, CUSTOM_API_CALL_NAME, HTTP_REQUEST_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import {
+	INodeTypeDescription,
+	INodeActionTypeDescription,
+	INodeTypeNameVersion,
+} from 'n8n-workflow';
+import {
+	INodeCreateElement,
+	IActionItemProps,
+	SubcategoryCreateElement,
+	IUpdateInformation,
+} from '@/Interface';
+import {
+	CORE_NODES_CATEGORY,
+	WEBHOOK_NODE_TYPE,
+	OTHER_TRIGGER_NODES_SUBCATEGORY,
+	EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
+	MANUAL_TRIGGER_NODE_TYPE,
+	SCHEDULE_TRIGGER_NODE_TYPE,
+	EMAIL_IMAP_NODE_TYPE,
+	CUSTOM_API_CALL_NAME,
+	HTTP_REQUEST_NODE_TYPE,
+	STICKY_NODE_TYPE,
+} from '@/constants';
 import CategorizedItems from './CategorizedItems.vue';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
-import { getCategoriesWithNodes, getCategorizedList } from "@/utils";
+import { getCategoriesWithNodes, getCategorizedList } from '@/utils';
 import { externalHooks } from '@/mixins/externalHooks';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { BaseTextKey } from '@/plugins/i18n';
 
 const instance = getCurrentInstance();
-const items: INodeCreateElement[] = [{
-		key: "*",
-		type: "subcategory",
+const items: INodeCreateElement[] = [
+	{
+		key: '*',
+		type: 'subcategory',
 		title: instance?.proxy.$locale.baseText('nodeCreator.subcategoryNames.appTriggerNodes'),
 		properties: {
-			subcategory: "App Trigger Nodes",
-			description: instance?.proxy.$locale.baseText('nodeCreator.subcategoryDescriptions.appTriggerNodes'),
-			icon: "fa:satellite-dish",
+			subcategory: 'App Trigger Nodes',
+			description: instance?.proxy.$locale.baseText(
+				'nodeCreator.subcategoryDescriptions.appTriggerNodes',
+			),
+			icon: 'fa:satellite-dish',
 			defaults: {
-				color: "#7D838F",
+				color: '#7D838F',
 			},
 		},
 	},
 	{
 		key: SCHEDULE_TRIGGER_NODE_TYPE,
-		type: "node",
+		type: 'node',
 		properties: {
 			nodeType: {
-
 				group: [],
 				name: SCHEDULE_TRIGGER_NODE_TYPE,
-				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDisplayName'),
-				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.scheduleTriggerDescription'),
-				icon: "fa:clock",
+				displayName: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.scheduleTriggerDisplayName',
+				),
+				description: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.scheduleTriggerDescription',
+				),
+				icon: 'fa:clock',
 				defaults: {
-					color: "#7D838F",
+					color: '#7D838F',
 				},
 			},
 		},
 	},
 	{
 		key: WEBHOOK_NODE_TYPE,
-		type: "node",
+		type: 'node',
 		properties: {
 			nodeType: {
 				group: [],
 				name: WEBHOOK_NODE_TYPE,
-				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDisplayName'),
-				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.webhookTriggerDescription'),
+				displayName: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.webhookTriggerDisplayName',
+				),
+				description: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.webhookTriggerDescription',
+				),
 				iconData: {
-					type: "file",
-					icon: "webhook",
-					fileBuffer: "/static/webhook-icon.svg",
+					type: 'file',
+					icon: 'webhook',
+					fileBuffer: '/static/webhook-icon.svg',
 				},
 				defaults: {
-					color: "#7D838F",
+					color: '#7D838F',
 				},
 			},
 		},
 	},
 	{
 		key: MANUAL_TRIGGER_NODE_TYPE,
-		type: "node",
+		type: 'node',
 		properties: {
 			nodeType: {
 				group: [],
 				name: MANUAL_TRIGGER_NODE_TYPE,
-				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDisplayName'),
-				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.manualTriggerDescription'),
-				icon: "fa:mouse-pointer",
+				displayName: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.manualTriggerDisplayName',
+				),
+				description: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.manualTriggerDescription',
+				),
+				icon: 'fa:mouse-pointer',
 				defaults: {
-					color: "#7D838F",
+					color: '#7D838F',
 				},
 			},
 		},
 	},
 	{
 		key: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
-		type: "node",
+		type: 'node',
 		properties: {
 			nodeType: {
 				group: [],
 				name: EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
-				displayName: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDisplayName'),
-				description: instance?.proxy.$locale.baseText('nodeCreator.triggerHelperPanel.workflowTriggerDescription'),
-				icon: "fa:sign-out-alt",
+				displayName: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.workflowTriggerDisplayName',
+				),
+				description: instance?.proxy.$locale.baseText(
+					'nodeCreator.triggerHelperPanel.workflowTriggerDescription',
+				),
+				icon: 'fa:sign-out-alt',
 				defaults: {
-					color: "#7D838F",
+					color: '#7D838F',
 				},
 			},
 		},
 	},
 	{
-		type: "subcategory",
+		type: 'subcategory',
 		key: OTHER_TRIGGER_NODES_SUBCATEGORY,
 		category: CORE_NODES_CATEGORY,
 		properties: {
 			subcategory: OTHER_TRIGGER_NODES_SUBCATEGORY,
-			description: instance?.proxy.$locale.baseText('nodeCreator.subcategoryDescriptions.otherTriggerNodes'),
-			icon: "fa:folder-open",
+			description: instance?.proxy.$locale.baseText(
+				'nodeCreator.subcategoryDescriptions.otherTriggerNodes',
+			),
+			icon: 'fa:folder-open',
 			defaults: {
-				color: "#7D838F",
+				color: '#7D838F',
 			},
 		},
 	},
 ];
 
 const emit = defineEmits({
-	"nodeTypeSelected": (nodeTypes: string[]) => true,
+	nodeTypeSelected: (nodeTypes: string[]) => true,
 });
 
 const state = reactive({
@@ -181,12 +229,19 @@ const {
 
 const telemetry = instance?.proxy.$telemetry;
 const { categorizedItems: allNodes, isTriggerNode } = useNodeTypesStore();
-const containsAPIAction = computed(() => state.latestNodeData?.properties.some((p) => p.options?.find((o) => o.name === CUSTOM_API_CALL_NAME)) === true);
+const containsAPIAction = computed(
+	() =>
+		state.latestNodeData?.properties.some((p) =>
+			p.options?.find((o) => o.name === CUSTOM_API_CALL_NAME),
+		) === true,
+);
 
-const computedCategorizedItems = computed(() => getCategorizedList(computedCategoriesWithNodes.value, true));
+const computedCategorizedItems = computed(() =>
+	getCategorizedList(computedCategoriesWithNodes.value, true),
+);
 
-const nodeAppSubcategory = computed<(SubcategoryCreateElement | undefined)>(() => {
-	if(!state.activeNodeActions) return undefined;
+const nodeAppSubcategory = computed<SubcategoryCreateElement | undefined>(() => {
+	if (!state.activeNodeActions) return undefined;
 
 	return {
 		type: 'subcategory',
@@ -205,45 +260,49 @@ const searchPlaceholder = computed(() => {
 	const nodeNameTitle = state.activeNodeActions?.displayName?.trim() as string;
 	const actionsSearchPlaceholder = instance?.proxy.$locale.baseText(
 		'nodeCreator.actionsCategory.searchActions',
-		{ interpolate: { nodeNameTitle }},
+		{ interpolate: { nodeNameTitle } },
 	);
 
 	return isActionsActive.value ? actionsSearchPlaceholder : undefined;
 });
 
 const filteredMergedAppNodes = computed(() => {
-	const WHITELISTED_APP_CORE_NODES = [
-		EMAIL_IMAP_NODE_TYPE,
-		WEBHOOK_NODE_TYPE,
-	];
+	const WHITELISTED_APP_CORE_NODES = [EMAIL_IMAP_NODE_TYPE, WEBHOOK_NODE_TYPE];
 
-	if(isAppEventSubcategory.value) return mergedAppNodes.filter(node => {
-		const isRegularNode = !isTriggerNode(node.name);
-		const isStickyNode = node.name === STICKY_NODE_TYPE;
-		const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY) && !WHITELISTED_APP_CORE_NODES.includes(node.name);
-		const hasActions = (node.actions || []).length > 0;
+	if (isAppEventSubcategory.value)
+		return mergedAppNodes.filter((node) => {
+			const isRegularNode = !isTriggerNode(node.name);
+			const isStickyNode = node.name === STICKY_NODE_TYPE;
+			const isCoreNode =
+				node.codex?.categories?.includes(CORE_NODES_CATEGORY) &&
+				!WHITELISTED_APP_CORE_NODES.includes(node.name);
+			const hasActions = (node.actions || []).length > 0;
 
-		if(isRegularNode && !hasActions) return false;
-		return !isCoreNode && !isStickyNode;
-	});
+			if (isRegularNode && !hasActions) return false;
+			return !isCoreNode && !isStickyNode;
+		});
 
 	return mergedAppNodes;
 });
 
 const computedCategoriesWithNodes = computed(() => {
-	if(!state.activeNodeActions) return getCategoriesWithNodes(filteredMergedAppNodes.value, []);
+	if (!state.activeNodeActions) return getCategoriesWithNodes(filteredMergedAppNodes.value, []);
 
-	return getCategoriesWithNodes(selectedNodeActions.value, [], state.activeNodeActions.displayName) ;
+	return getCategoriesWithNodes(selectedNodeActions.value, [], state.activeNodeActions.displayName);
 });
 
-const selectedNodeActions = computed<INodeActionTypeDescription[]>(() => state.activeNodeActions?.actions ?? []);
-const isAppEventSubcategory = computed(() => state.selectedSubcategory === "*");
+const selectedNodeActions = computed<INodeActionTypeDescription[]>(
+	() => state.activeNodeActions?.actions ?? [],
+);
+const isAppEventSubcategory = computed(() => state.selectedSubcategory === '*');
 const isActionsActive = computed(() => state.activeNodeActions !== null);
-const firstLevelItems = computed(() => isRoot.value ? items : []);
+const firstLevelItems = computed(() => (isRoot.value ? items : []));
 
 const isSearchActive = computed(() => useNodeCreatorStore().itemsFilter !== '');
 const searchItems = computed<INodeCreateElement[]>(() => {
-	const sorted = state.activeNodeActions ? [...selectedNodeActions.value] : [...filteredMergedAppNodes.value];
+	const sorted = state.activeNodeActions
+		? [...selectedNodeActions.value]
+		: [...filteredMergedAppNodes.value];
 	sorted.sort((a, b) => {
 		const textA = a.displayName.toLowerCase();
 		const textB = b.displayName.toLowerCase();
@@ -264,21 +323,23 @@ const searchItems = computed<INodeCreateElement[]>(() => {
 });
 
 function onNodeTypeSelected(nodeTypes: string[]) {
-	emit("nodeTypeSelected", nodeTypes.length === 1 ? getNodeTypesWithManualTrigger(nodeTypes[0]) : nodeTypes);
+	emit(
+		'nodeTypeSelected',
+		nodeTypes.length === 1 ? getNodeTypesWithManualTrigger(nodeTypes[0]) : nodeTypes,
+	);
 }
 function getCustomAPICallHintLocale(key: string) {
-	if(!state.activeNodeActions) return '';
+	if (!state.activeNodeActions) return '';
 
-	const nodeNameTitle  = state.activeNodeActions.displayName;
-	return instance?.proxy.$locale.baseText(
-		`nodeCreator.actionsList.${key}` as BaseTextKey,
-		{ interpolate: { nodeNameTitle }},
-	);
+	const nodeNameTitle = state.activeNodeActions.displayName;
+	return instance?.proxy.$locale.baseText(`nodeCreator.actionsList.${key}` as BaseTextKey, {
+		interpolate: { nodeNameTitle },
+	});
 }
 // The nodes.json doesn't contain API CALL option so we need to fetch the node detail
 // to determine if need to render the API CALL hint
 async function fetchNodeDetails() {
-	if(!state.activeNodeActions) return;
+	if (!state.activeNodeActions) return;
 
 	const { getNodesInformation } = useNodeTypesStore();
 	const { version, name } = state.activeNodeActions;
@@ -297,7 +358,7 @@ function setActiveActionsNodeType(nodeType: INodeTypeDescription | null) {
 	setShowTabs(false);
 	fetchNodeDetails();
 
-	if(nodeType) trackActionsView();
+	if (nodeType) trackActionsView();
 }
 
 function onActionSelected(actionCreateElement: INodeCreateElement) {
@@ -311,7 +372,7 @@ function addHttpNode() {
 		name: '',
 		key: HTTP_REQUEST_NODE_TYPE,
 		value: {
-			authentication: "predefinedCredentialType",
+			authentication: 'predefinedCredentialType',
 		},
 	} as IUpdateInformation;
 
@@ -328,28 +389,30 @@ function onSubcategorySelected(subcategory: INodeCreateElement) {
 	state.selectedSubcategory = subcategory.key;
 }
 function onSubcategoryClose(activeSubcategories: INodeCreateElement[]) {
-	if(isActionsActive.value === true) setActiveActionsNodeType(null);
+	if (isActionsActive.value === true) setActiveActionsNodeType(null);
 
 	state.isRoot = activeSubcategories.length === 0;
 	state.selectedSubcategory = activeSubcategories[activeSubcategories.length - 1]?.key ?? '';
 }
 
 function shouldShowNodeActions(node: INodeCreateElement) {
-	if(isAppEventSubcategory.value) return true;
-	if(state.isRoot && !isSearchActive.value) return false;
+	if (isAppEventSubcategory.value) return true;
+	if (state.isRoot && !isSearchActive.value) return false;
 	// Do not show actions for core category when searching
-	if(node.type === 'node') return !node.properties.nodeType.codex?.categories?.includes(CORE_NODES_CATEGORY);
+	if (node.type === 'node')
+		return !node.properties.nodeType.codex?.categories?.includes(CORE_NODES_CATEGORY);
 
 	return false;
 }
 
 function trackActionsView() {
-	const trigger_action_count = selectedNodeActions.value
-		.filter((action) => action.name.toLowerCase().includes('trigger')).length;
+	const trigger_action_count = selectedNodeActions.value.filter((action) =>
+		action.name.toLowerCase().includes('trigger'),
+	).length;
 
 	const trackingPayload = {
 		app_identifier: state.activeNodeActions?.name,
-		actions: selectedNodeActions.value.map(action => action.displayName),
+		actions: selectedNodeActions.value.map((action) => action.displayName),
 		regular_action_count: selectedNodeActions.value.length - trigger_action_count,
 		trigger_action_count,
 	};
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
index c758a36ed2..38a28670df 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
@@ -1,9 +1,26 @@
 <template>
-	<div class="type-selector" v-if="nodeCreatorStore.showTabs" data-test-id="node-creator-type-selector">
-		<el-tabs stretch :value="nodeCreatorStore.selectedType" @input="nodeCreatorStore.setSelectedType">
-			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
-			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>
-			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.trigger')" :name="TRIGGER_NODE_FILTER"></el-tab-pane>
+	<div
+		class="type-selector"
+		v-if="nodeCreatorStore.showTabs"
+		data-test-id="node-creator-type-selector"
+	>
+		<el-tabs
+			stretch
+			:value="nodeCreatorStore.selectedType"
+			@input="nodeCreatorStore.setSelectedType"
+		>
+			<el-tab-pane
+				:label="$locale.baseText('nodeCreator.mainPanel.all')"
+				:name="ALL_NODE_FILTER"
+			></el-tab-pane>
+			<el-tab-pane
+				:label="$locale.baseText('nodeCreator.mainPanel.regular')"
+				:name="REGULAR_NODE_FILTER"
+			></el-tab-pane>
+			<el-tab-pane
+				:label="$locale.baseText('nodeCreator.mainPanel.trigger')"
+				:name="TRIGGER_NODE_FILTER"
+			></el-tab-pane>
 		</el-tabs>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index abc495bc28..ad3f93b04e 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -1,17 +1,22 @@
 <template>
-	<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="['node-credentials', $style.container]">
-		<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name">
+	<div
+		v-if="credentialTypesNodeDescriptionDisplayed.length"
+		:class="['node-credentials', $style.container]"
+	>
+		<div
+			v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
+			:key="credentialTypeDescription.name"
+		>
 			<n8n-input-label
-				:label="$locale.baseText(
-					'nodeCredentials.credentialFor',
-					{
+				:label="
+					$locale.baseText('nodeCredentials.credentialFor', {
 						interpolate: {
-							credentialType: credentialTypeNames[credentialTypeDescription.name]
-						}
-					}
-				)"
+							credentialType: credentialTypeNames[credentialTypeDescription.name],
+						},
+					})
+				"
 				:bold="false"
-				:set="issues = getIssues(credentialTypeDescription.name)"
+				:set="(issues = getIssues(credentialTypeDescription.name))"
 				size="small"
 				color="text-dark"
 			>
@@ -22,10 +27,7 @@
 						size="small"
 					/>
 				</div>
-				<div
-					v-else
-					:class="issues.length ? $style.hasIssues : $style.input"
-				>
+				<div v-else :class="issues.length ? $style.hasIssues : $style.input">
 					<n8n-select
 						:value="getSelectedId(credentialTypeDescription.name)"
 						@change="(value) => onCredentialSelected(credentialTypeDescription.name, value)"
@@ -33,10 +35,11 @@
 						size="small"
 					>
 						<n8n-option
-							v-for="(item) in getCredentialOptions(credentialTypeDescription.name)"
+							v-for="item in getCredentialOptions(credentialTypeDescription.name)"
 							:key="item.id"
 							:label="item.name"
-							:value="item.id">
+							:value="item.id"
+						>
 						</n8n-option>
 						<n8n-option
 							:key="NEW_CREDENTIALS_TEXT"
@@ -47,16 +50,30 @@
 					</n8n-select>
 
 					<div :class="$style.warning" v-if="issues.length">
-						<n8n-tooltip placement="top" >
+						<n8n-tooltip placement="top">
 							<template #content>
-								<titled-list :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
+								<titled-list
+									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
+									:items="issues"
+								/>
 							</template>
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
 
-					<div :class="$style.edit" v-if="selected[credentialTypeDescription.name] && isCredentialExisting(credentialTypeDescription.name)">
-						<font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" :title="$locale.baseText('nodeCredentials.updateCredential')" />
+					<div
+						:class="$style.edit"
+						v-if="
+							selected[credentialTypeDescription.name] &&
+							isCredentialExisting(credentialTypeDescription.name)
+						"
+					>
+						<font-awesome-icon
+							icon="pen"
+							@click="editCredential(credentialTypeDescription.name)"
+							class="clickable"
+							:title="$locale.baseText('nodeCredentials.updateCredential')"
+						/>
 					</div>
 				</div>
 			</n8n-input-label>
@@ -72,11 +89,7 @@ import {
 	INodeUpdatePropertiesInformation,
 	IUser,
 } from '@/Interface';
-import {
-	ICredentialType,
-	INodeCredentialDescription,
-	INodeCredentialsDetails,
-} from 'n8n-workflow';
+import { ICredentialType, INodeCredentialDescription, INodeCredentialsDetails } from 'n8n-workflow';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
@@ -85,7 +98,7 @@ import { showMessage } from '@/mixins/showMessage';
 import TitledList from '@/components/TitledList.vue';
 
 import mixins from 'vue-typed-mixins';
-import {getCredentialPermissions} from "@/permissions";
+import { getCredentialPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
@@ -93,12 +106,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useCredentialsStore } from '@/stores/credentials';
 
-export default mixins(
-	genericHelpers,
-	nodeHelpers,
-	restApi,
-	showMessage,
-).extend({
+export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend({
 	name: 'NodeCredentials',
 	props: [
 		'readonly',
@@ -108,7 +116,7 @@ export default mixins(
 	components: {
 		TitledList,
 	},
-	data () {
+	data() {
 		return {
 			NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
 			subscribedToCredentialType: '',
@@ -125,23 +133,23 @@ export default mixins(
 			useUsersStore,
 			useWorkflowsStore,
 		),
-		allCredentialsByType(): {[type: string]: ICredentialsResponse[]} {
+		allCredentialsByType(): { [type: string]: ICredentialsResponse[] } {
 			return this.credentialsStore.allCredentialsByType;
 		},
-		currentUser (): IUser {
-			return this.usersStore.currentUser || {} as IUser;
+		currentUser(): IUser {
+			return this.usersStore.currentUser || ({} as IUser);
 		},
-		credentialTypesNode (): string[] {
-			return this.credentialTypesNodeDescription
-				.map((credentialTypeDescription) => credentialTypeDescription.name);
+		credentialTypesNode(): string[] {
+			return this.credentialTypesNodeDescription.map(
+				(credentialTypeDescription) => credentialTypeDescription.name,
+			);
 		},
-		credentialTypesNodeDescriptionDisplayed (): INodeCredentialDescription[] {
-			return this.credentialTypesNodeDescription
-				.filter((credentialTypeDescription) => {
-					return this.displayCredentials(credentialTypeDescription);
-				});
+		credentialTypesNodeDescriptionDisplayed(): INodeCredentialDescription[] {
+			return this.credentialTypesNodeDescription.filter((credentialTypeDescription) => {
+				return this.displayCredentials(credentialTypeDescription);
+			});
 		},
-		credentialTypesNodeDescription (): INodeCredentialDescription[] {
+		credentialTypesNodeDescription(): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
 			const credType = this.credentialsStore.getCredentialTypeByName(this.overrideCredType);
@@ -155,29 +163,32 @@ export default mixins(
 
 			return [];
 		},
-		credentialTypeNames () {
+		credentialTypeNames() {
 			const returnData: {
 				[key: string]: string;
 			} = {};
 			let credentialType: ICredentialType | null;
 			for (const credentialTypeName of this.credentialTypesNode) {
 				credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeName);
-				returnData[credentialTypeName] = credentialType !== null ? credentialType.displayName : credentialTypeName;
+				returnData[credentialTypeName] =
+					credentialType !== null ? credentialType.displayName : credentialTypeName;
 			}
 			return returnData;
 		},
-		selected(): {[type: string]: INodeCredentialsDetails} {
+		selected(): { [type: string]: INodeCredentialsDetails } {
 			return this.node.credentials || {};
 		},
 	},
 
 	methods: {
 		getCredentialOptions(type: string): ICredentialsResponse[] {
-			return (this.allCredentialsByType as Record<string, ICredentialsResponse[]>)[type].filter((credential) => {
-				const permissions = getCredentialPermissions(this.currentUser, credential);
+			return (this.allCredentialsByType as Record<string, ICredentialsResponse[]>)[type].filter(
+				(credential) => {
+					const permissions = getCredentialPermissions(this.currentUser, credential);
 
-				return permissions.use;
-			});
+					return permissions.use;
+				},
+			);
 		},
 		getSelectedId(type: string) {
 			if (this.isCredentialExisting(type)) {
@@ -190,10 +201,12 @@ export default mixins(
 		},
 		getSelectPlaceholder(type: string, issues: string[]) {
 			return issues.length && this.getSelectedName(type)
-				? this.$locale.baseText('nodeCredentials.selectedCredentialUnavailable', { interpolate: { name: this.getSelectedName(type) } })
+				? this.$locale.baseText('nodeCredentials.selectedCredentialUnavailable', {
+						interpolate: { name: this.getSelectedName(type) },
+				  })
 				: this.$locale.baseText('nodeCredentials.selectCredential');
 		},
-		credentialInputWrapperStyle (credentialType: string) {
+		credentialInputWrapperStyle(credentialType: string) {
 			let deductWidth = 0;
 			const styles = {
 				width: '100%',
@@ -224,12 +237,18 @@ export default mixins(
 							this.onCredentialSelected(credentialType, credentialsOfType[0].id);
 						} else {
 							// Else, check id currently selected cred has been updated
-							const newSelected = credentialsOfType.find(cred => cred.id === this.selected[credentialType].id);
+							const newSelected = credentialsOfType.find(
+								(cred) => cred.id === this.selected[credentialType].id,
+							);
 							// If it has changed, select it
 							if (newSelected && newSelected.name !== this.selected[credentialType].name) {
 								this.onCredentialSelected(credentialType, newSelected.id);
-							} else { // Else select the last cred with that type since selected has been deleted or a new one has been added
-								this.onCredentialSelected(credentialType, credentialsOfType[credentialsOfType.length - 1].id);
+							} else {
+								// Else select the last cred with that type since selected has been deleted or a new one has been added
+								this.onCredentialSelected(
+									credentialType,
+									credentialsOfType[credentialsOfType.length - 1].id,
+								);
 							}
 						}
 					}
@@ -256,35 +275,44 @@ export default mixins(
 			this.$emit('credentialSelected', updateInformation);
 		},
 
-		onCredentialSelected (credentialType: string, credentialId: string | null | undefined) {
+		onCredentialSelected(credentialType: string, credentialId: string | null | undefined) {
 			if (credentialId === this.NEW_CREDENTIALS_TEXT) {
 				// this.listenForNewCredentials(credentialType);
 				this.subscribedToCredentialType = credentialType;
 			}
 			if (!credentialId || credentialId === this.NEW_CREDENTIALS_TEXT) {
 				this.uiStore.openNewCredential(credentialType);
-				this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.workflowsStore.workflowId });
+				this.$telemetry.track('User opened Credential modal', {
+					credential_type: credentialType,
+					source: 'node',
+					new_credential: true,
+					workflow_id: this.workflowsStore.workflowId,
+				});
 				return;
 			}
 
-			this.$telemetry.track(
-				'User selected credential from node modal',
-				{
-					credential_type: credentialType,
-					node_type: this.node.type,
-					...(this.hasProxyAuth(this.node) ? { is_service_specific: true } : {}),
-					workflow_id: this.workflowsStore.workflowId,
-					credential_id: credentialId,
-				},
-			);
+			this.$telemetry.track('User selected credential from node modal', {
+				credential_type: credentialType,
+				node_type: this.node.type,
+				...(this.hasProxyAuth(this.node) ? { is_service_specific: true } : {}),
+				workflow_id: this.workflowsStore.workflowId,
+				credential_id: credentialId,
+			});
 
 			const selectedCredentials = this.credentialsStore.getCredentialById(credentialId);
-			const oldCredentials = this.node.credentials && this.node.credentials[credentialType] ? this.node.credentials[credentialType] : {};
+			const oldCredentials =
+				this.node.credentials && this.node.credentials[credentialType]
+					? this.node.credentials[credentialType]
+					: {};
 
 			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
 
 			// if credentials has been string or neither id matched nor name matched uniquely
-			if (oldCredentials.id === null || (oldCredentials.id && !this.credentialsStore.getCredentialByIdAndType(oldCredentials.id, credentialType))) {
+			if (
+				oldCredentials.id === null ||
+				(oldCredentials.id &&
+					!this.credentialsStore.getCredentialByIdAndType(oldCredentials.id, credentialType))
+			) {
 				// update all nodes in the workflow with the same old/invalid credentials
 				this.workflowsStore.replaceInvalidWorkflowCredentials({
 					credentials: selected,
@@ -294,15 +322,12 @@ export default mixins(
 				this.updateNodesCredentialsIssues();
 				this.$showMessage({
 					title: this.$locale.baseText('nodeCredentials.showMessage.title'),
-					message: this.$locale.baseText(
-						'nodeCredentials.showMessage.message',
-						{
-							interpolate: {
-								oldCredentialName: oldCredentials.name,
-								newCredentialName: selected.name,
-							},
+					message: this.$locale.baseText('nodeCredentials.showMessage.message', {
+						interpolate: {
+							oldCredentialName: oldCredentials.name,
+							newCredentialName: selected.name,
 						},
-					),
+					}),
 					type: 'success',
 				});
 			}
@@ -324,7 +349,7 @@ export default mixins(
 			this.$emit('credentialSelected', updateInformation);
 		},
 
-		displayCredentials (credentialTypeDescription: INodeCredentialDescription): boolean {
+		displayCredentials(credentialTypeDescription: INodeCredentialDescription): boolean {
 			if (credentialTypeDescription.displayOptions === undefined) {
 				// If it is not defined no need to do a proper check
 				return true;
@@ -332,7 +357,7 @@ export default mixins(
 			return this.displayParameter(this.node.parameters, credentialTypeDescription, '', this.node);
 		},
 
-		getIssues (credentialTypeName: string): string[] {
+		getIssues(credentialTypeName: string): string[] {
 			const node = this.node as INodeUi;
 
 			if (node.issues === undefined || node.issues.credentials === undefined) {
@@ -347,7 +372,11 @@ export default mixins(
 		},
 
 		isCredentialExisting(credentialType: string): boolean {
-			if (!this.node.credentials || !this.node.credentials[credentialType] || !this.node.credentials[credentialType].id) {
+			if (
+				!this.node.credentials ||
+				!this.node.credentials[credentialType] ||
+				!this.node.credentials[credentialType].id
+			) {
 				return false;
 			}
 			const { id } = this.node.credentials[credentialType];
@@ -360,7 +389,12 @@ export default mixins(
 			const { id } = this.node.credentials[credentialType];
 			this.uiStore.openExistingCredential(id);
 
-			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.workflowsStore.workflowId });
+			this.$telemetry.track('User opened Credential modal', {
+				credential_type: credentialType,
+				source: 'node',
+				new_credential: false,
+				workflow_id: this.workflowsStore.workflowId,
+			});
 			this.subscribedToCredentialType = credentialType;
 		},
 	},
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index d95610d730..897eb69509 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -147,14 +147,14 @@ import {
 	STICKY_NODE_TYPE,
 } from '@/constants';
 import { workflowActivate } from '@/mixins/workflowActivate';
-import { pinData } from "@/mixins/pinData";
+import { pinData } from '@/mixins/pinData';
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useUIStore } from '@/stores/ui';
-import {useSettingsStore} from "@/stores/settings";
+import { useSettingsStore } from '@/stores/settings';
 
 export default mixins(
 	externalHooks,
@@ -200,21 +200,18 @@ export default mixins(
 	},
 	mounted() {
 		this.ndvStore.setNDVSessionId;
-		dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
-			this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
-		});
+		dataPinningEventBus.$on(
+			'data-pinning-discovery',
+			({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
+				this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
+			},
+		);
 	},
-	destroyed () {
+	destroyed() {
 		dataPinningEventBus.$off('data-pinning-discovery');
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-			useSettingsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore, useSettingsStore),
 		sessionId(): string {
 			return this.ndvStore.sessionId;
 		},
@@ -253,7 +250,9 @@ export default mixins(
 			const isWebhookBasedNode = !!this.activeNodeType?.webhooks?.length;
 			const isPollingNode = this.activeNodeType?.polling;
 			const override = !!this.activeNodeType?.triggerPanel;
-			return !this.readOnly && this.isTriggerNode && (isWebhookBasedNode || isPollingNode || override);
+			return (
+				!this.readOnly && this.isTriggerNode && (isWebhookBasedNode || isPollingNode || override)
+			);
 		},
 		workflow(): Workflow {
 			return this.getCurrentWorkflow();
@@ -278,9 +277,7 @@ export default mixins(
 			);
 		},
 		isActiveStickyNode(): boolean {
-			return (
-				!!this.ndvStore.activeNode && this.ndvStore.activeNode .type === STICKY_NODE_TYPE
-			);
+			return !!this.ndvStore.activeNode && this.ndvStore.activeNode.type === STICKY_NODE_TYPE;
 		},
 		workflowExecution(): IExecutionResponse | null {
 			return this.workflowsStore.getWorkflowExecution;
@@ -361,7 +358,7 @@ export default mixins(
 			}
 			return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
 		},
-		outputPanelEditMode(): { enabled: boolean; value: string; } {
+		outputPanelEditMode(): { enabled: boolean; value: string } {
 			return this.ndvStore.outputPanelEditMode;
 		},
 		isWorkflowRunning(): boolean {
@@ -378,9 +375,16 @@ export default mixins(
 			const usedCredentials = this.workflowsStore.usedCredentials;
 
 			let hasForeignCredential = false;
-			if (credentials && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)) {
+			if (
+				credentials &&
+				this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)
+			) {
 				Object.values(credentials).forEach((credential) => {
-					if (credential.id && usedCredentials[credential.id] && !usedCredentials[credential.id].currentUserHasAccess) {
+					if (
+						credential.id &&
+						usedCredentials[credential.id] &&
+						!usedCredentials[credential.id].currentUserHasAccess
+					) {
 						hasForeignCredential = true;
 					}
 				});
@@ -458,7 +462,7 @@ export default mixins(
 		},
 	},
 	methods: {
-		onInputItemHover(e: {itemIndex: number, outputIndex: number} | null) {
+		onInputItemHover(e: { itemIndex: number; outputIndex: number } | null) {
 			if (!this.inputNodeName) {
 				return;
 			}
@@ -475,7 +479,7 @@ export default mixins(
 			};
 			this.ndvStore.setHoveringItem(item);
 		},
-		onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) {
+		onOutputItemHover(e: { itemIndex: number; outputIndex: number } | null) {
 			if (e === null || !this.activeNode) {
 				this.ndvStore.setHoveringItem(null);
 				return;
@@ -589,16 +593,18 @@ export default mixins(
 					const { value } = this.outputPanelEditMode;
 
 					if (!this.isValidPinDataSize(value)) {
-						dataPinningEventBus.$emit(
-							'data-pinning-error', { errorType: 'data-too-large', source: 'on-ndv-close-modal' },
-						);
+						dataPinningEventBus.$emit('data-pinning-error', {
+							errorType: 'data-too-large',
+							source: 'on-ndv-close-modal',
+						});
 						return;
 					}
 
 					if (!this.isValidPinDataJSON(value)) {
-						dataPinningEventBus.$emit(
-							'data-pinning-error', { errorType: 'invalid-json', source: 'on-ndv-close-modal' },
-						);
+						dataPinningEventBus.$emit('data-pinning-error', {
+							errorType: 'invalid-json',
+							source: 'on-ndv-close-modal',
+						});
 						return;
 					}
 
@@ -652,7 +658,7 @@ export default mixins(
 				input_node_type: this.inputNode ? this.inputNode.type : '',
 			});
 		},
-		onStopExecution(){
+		onStopExecution() {
 			this.$emit('stopExecution');
 		},
 	},
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 50e5c9f4cc..8c30d7f6f2 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -31,10 +31,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 
-export default mixins(
-	workflowRun,
-	pinData,
-).extend({
+export default mixins(workflowRun, pinData).extend({
 	props: {
 		nodeName: {
 			type: String,
@@ -61,41 +58,40 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useWorkflowsStore,
-		),
-		node (): INodeUi | null {
+		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
+		node(): INodeUi | null {
 			return this.workflowsStore.getNodeByName(this.nodeName);
 		},
-		nodeType (): INodeTypeDescription | null {
+		nodeType(): INodeTypeDescription | null {
 			if (this.node) {
 				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},
-		nodeRunning (): boolean {
+		nodeRunning(): boolean {
 			const triggeredNode = this.workflowsStore.executedNode;
 			const executingNode = this.workflowsStore.executingNode;
-			return this.workflowRunning && (executingNode === this.node.name || triggeredNode === this.node.name);
+			return (
+				this.workflowRunning &&
+				(executingNode === this.node.name || triggeredNode === this.node.name)
+			);
 		},
-		workflowRunning (): boolean {
+		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
-		isTriggerNode (): boolean {
+		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
-		isManualTriggerNode (): boolean {
+		isManualTriggerNode(): boolean {
 			return Boolean(this.nodeType && this.nodeType.name === MANUAL_TRIGGER_NODE_TYPE);
 		},
-		isPollingTypeNode (): boolean {
+		isPollingTypeNode(): boolean {
 			return !!(this.nodeType && this.nodeType.polling);
 		},
-		isScheduleTrigger (): boolean {
+		isScheduleTrigger(): boolean {
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
-		isWebhookNode (): boolean {
+		isWebhookNode(): boolean {
 			return Boolean(this.nodeType && this.nodeType.name === WEBHOOK_NODE_TYPE);
 		},
 		isListeningForEvents(): boolean {
@@ -111,10 +107,19 @@ export default mixins(
 			);
 		},
 		isListeningForWorkflowEvents(): boolean {
-			return this.nodeRunning && this.isTriggerNode && !this.isScheduleTrigger && !this.isManualTriggerNode;
+			return (
+				this.nodeRunning &&
+				this.isTriggerNode &&
+				!this.isScheduleTrigger &&
+				!this.isManualTriggerNode
+			);
 		},
-		hasIssues (): boolean {
-			return Boolean(this.node && this.node.issues && (this.node.issues.parameters || this.node.issues.credentials));
+		hasIssues(): boolean {
+			return Boolean(
+				this.node &&
+					this.node.issues &&
+					(this.node.issues.parameters || this.node.issues.credentials),
+			);
 		},
 		disabledHint(): string {
 			if (this.isListeningForEvents) {
@@ -165,14 +170,11 @@ export default mixins(
 		},
 	},
 	methods: {
-		async stopWaitingForWebhook () {
+		async stopWaitingForWebhook() {
 			try {
 				await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'),
-				);
+				this.$showError(error, this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'));
 				return;
 			}
 		},
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 6e4b9d5e73..36c1a2b77e 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -21,16 +21,15 @@ import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 interface NodeIconSource {
-		path?: string;
-		fileBuffer?: string;
-		icon?: string;
+	path?: string;
+	fileBuffer?: string;
+	icon?: string;
 }
 
 export default Vue.extend({
 	name: 'NodeIcon',
 	props: {
-		nodeType: {
-		},
+		nodeType: {},
 		size: {
 			type: Number,
 			required: false,
@@ -49,10 +48,8 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
-		type (): string {
+		...mapStores(useRootStore),
+		type(): string {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
 			let iconType = 'unknown';
 			if (nodeType) {
@@ -65,14 +62,14 @@ export default Vue.extend({
 			}
 			return iconType;
 		},
-		color () : string {
+		color(): string {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
 			if (nodeType && nodeType.defaults && nodeType.defaults.color) {
 				return nodeType.defaults.color.toString();
 			}
 			return '';
 		},
-		iconSource () : NodeIconSource {
+		iconSource(): NodeIconSource {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
 			const baseUrl = this.rootStore.getBaseUrl;
 			const iconSource = {} as NodeIconSource;
@@ -104,5 +101,4 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/packages/editor-ui/src/components/NodeList.vue b/packages/editor-ui/src/components/NodeList.vue
index e42a0c8245..b041f21d52 100644
--- a/packages/editor-ui/src/components/NodeList.vue
+++ b/packages/editor-ui/src/components/NodeList.vue
@@ -1,13 +1,12 @@
 <template>
 	<div :class="$style.list">
 		<div v-for="node in slicedNodes" :class="[$style.container, $style[size]]" :key="node.name">
-			<NodeIcon
-				:nodeType="node"
-				:size="size === 'md'? 24: 18"
-				:showTooltip="true"
-			/>
+			<NodeIcon :nodeType="node" :size="size === 'md' ? 24 : 18" :showTooltip="true" />
 		</div>
-		<div :class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]" v-if="filteredCoreNodes.length > limit + 1">
+		<div
+			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
+			v-if="filteredCoreNodes.length > limit + 1"
+		>
 			+{{ hiddenNodes }}
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index c7d526ec6e..fd066aeb63 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1,6 +1,11 @@
 <template>
-	<div :class="{
-		'node-settings': true, 'dragging': dragging }" @keydown.stop>
+	<div
+		:class="{
+			'node-settings': true,
+			dragging: dragging,
+		}"
+		@keydown.stop
+	>
 		<div :class="$style.header">
 			<div class="header-side-menu">
 				<NodeTitle
@@ -40,12 +45,17 @@
 			</div>
 			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
 				<div class="mb-l">
-					<i18n path="nodeSettings.communityNodeUnknown.description" tag="span" @click="onMissingNodeTextClick">
+					<i18n
+						path="nodeSettings.communityNodeUnknown.description"
+						tag="span"
+						@click="onMissingNodeTextClick"
+					>
 						<template #action>
 							<a
 								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
 								target="_blank"
-							>{{ node.type.split('.')[0] }}</a>
+								>{{ node.type.split('.')[0] }}</a
+							>
 						</template>
 					</i18n>
 				</div>
@@ -66,14 +76,14 @@
 				</template>
 			</i18n>
 		</div>
-		<div
-			class="node-parameters-wrapper"
-			data-test-id="node-parameters"
-			v-if="node && nodeValid"
-		>
+		<div class="node-parameters-wrapper" data-test-id="node-parameters" v-if="node && nodeValid">
 			<n8n-notice
 				v-if="hasForeignCredential"
-				:content="$locale.baseText('nodeSettings.hasForeignCredential', { interpolate: { owner: workflowOwnerName } })"
+				:content="
+					$locale.baseText('nodeSettings.hasForeignCredential', {
+						interpolate: { owner: workflowOwnerName },
+					})
+				"
 			/>
 			<div v-show="openPanel === 'params'">
 				<node-webhooks :node="node" :nodeType="nodeType" />
@@ -87,7 +97,11 @@
 					@valueChanged="valueChanged"
 					@activate="onWorkflowActivate"
 				>
-					<node-credentials :node="node" :readonly="isReadOnly" @credentialSelected="credentialSelected" />
+					<node-credentials
+						:node="node"
+						:readonly="isReadOnly"
+						@credentialSelected="credentialSelected"
+					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
 					<n8n-text>
@@ -167,7 +181,7 @@ import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useHistoryStore } from '@/stores/history';
 import { RenameNodeCommand } from '@/models/history';
-import useWorkflowsEEStore from "@/stores/workflows.ee";
+import useWorkflowsEEStore from '@/stores/workflows.ee';
 
 export default mixins(externalHooks, nodeHelpers).extend({
 	name: 'NodeSettings',
@@ -545,7 +559,6 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				};
 				this.$emit('valueChanged', sendData);
 			} else if (parameterData.name === 'parameters') {
-
 				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				if (!nodeType) {
 					return;
@@ -816,7 +829,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				node_type: this.node.type,
 			});
 		},
-		onStopExecution(){
+		onStopExecution() {
 			this.$emit('stopExecution');
 		},
 	},
@@ -850,7 +863,6 @@ export default mixins(externalHooks, nodeHelpers).extend({
 </style>
 
 <style lang="scss">
-
 .node-settings {
 	overflow: hidden;
 	background-color: var(--color-background-xlight);
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 5d2bfd33ca..977c9b98e5 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -4,7 +4,11 @@
 
 <script lang="ts">
 import { externalHooks } from '@/mixins/externalHooks';
-import { BUILTIN_NODES_DOCS_URL, COMMUNITY_NODES_INSTALLATION_DOCS_URL, NPM_PACKAGE_DOCS_BASE_URL } from '@/constants';
+import {
+	BUILTIN_NODES_DOCS_URL,
+	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+	NPM_PACKAGE_DOCS_BASE_URL,
+} from '@/constants';
 import { INodeUi, ITab } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv';
 import { useWorkflowsStore } from '@/stores/workflows';
@@ -14,29 +18,23 @@ import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 import { isCommunityPackageName } from '@/utils';
 
-export default mixins(
-	externalHooks,
-).extend({
+export default mixins(externalHooks).extend({
 	name: 'NodeSettingsTabs',
 	props: {
 		value: {
 			type: String,
 		},
-		nodeType: {
-		},
+		nodeType: {},
 		sessionId: {
 			type: String,
 		},
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useWorkflowsStore),
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
-		documentationUrl (): string {
+		documentationUrl(): string {
 			const nodeType = this.nodeType as INodeTypeDescription | null;
 
 			if (!nodeType) {
@@ -47,8 +45,10 @@ export default mixins(
 				return nodeType.documentationUrl;
 			}
 
-			const utmTags = '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link' +
-				'&utm_campaign=' + nodeType.name;
+			const utmTags =
+				'?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link' +
+				'&utm_campaign=' +
+				nodeType.name;
 
 			// Built-in node documentation available via its codex entry
 			const primaryDocUrl = nodeType.codex?.resources?.primaryDocumentation?.[0]?.url;
@@ -74,7 +74,7 @@ export default mixins(
 			const nodeType = this.nodeType as INodeTypeDescription;
 			return nodeType.name.split('.')[0];
 		},
-		options (): ITab[] {
+		options(): ITab[] {
 			const options: ITab[] = [
 				{
 					label: this.$locale.baseText('nodeSettings.parameters'),
@@ -103,13 +103,11 @@ export default mixins(
 			}
 			// If both tabs have align right, both will have excessive left margin
 			const pushCogRight = this.isCommunityNode ? false : true;
-			options.push(
-				{
-					icon: 'cog',
-					value: 'settings',
-					align: pushCogRight ? 'right': undefined,
-				},
-			);
+			options.push({
+				icon: 'cog',
+				value: 'settings',
+				align: pushCogRight ? 'right' : undefined,
+			});
 
 			return options;
 		},
@@ -117,7 +115,10 @@ export default mixins(
 	methods: {
 		onTabSelect(tab: string) {
 			if (tab === 'docs' && this.nodeType) {
-				this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType as INodeTypeDescription, documentationUrl: this.documentationUrl });
+				this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', {
+					nodeType: this.nodeType as INodeTypeDescription,
+					documentationUrl: this.documentationUrl,
+				});
 				this.$telemetry.track('User clicked ndv link', {
 					node_type: this.activeNode.type,
 					workflow_id: this.workflowsStore.workflowId,
@@ -127,8 +128,11 @@ export default mixins(
 				});
 			}
 
-			if(tab === 'settings' && this.nodeType) {
-				this.$telemetry.track('User viewed node settings', { node_type: (this.nodeType as INodeTypeDescription).name, workflow_id: this.workflowsStore.workflowId });
+			if (tab === 'settings' && this.nodeType) {
+				this.$telemetry.track('User viewed node settings', {
+					node_type: (this.nodeType as INodeTypeDescription).name,
+					workflow_id: this.workflowsStore.workflowId,
+				});
 			}
 
 			if (tab === 'settings' || tab === 'params') {
@@ -145,7 +149,6 @@ export default mixins(
 </script>
 
 <style lang="scss">
-
 #communityNode > div {
 	cursor: auto;
 
@@ -153,5 +156,4 @@ export default mixins(
 		color: unset;
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index fff28cffd1..495b4a43a6 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -8,16 +8,27 @@
 				@keydown.stop
 				@keydown.esc="editName = false"
 			>
-				<n8n-text :bold="true" color="text-base" tag="div"
-					>{{ $locale.baseText('ndv.title.renameNode') }}</n8n-text>
+				<n8n-text :bold="true" color="text-base" tag="div">{{
+					$locale.baseText('ndv.title.renameNode')
+				}}</n8n-text>
 				<n8n-input ref="input" size="small" v-model="newName" />
 				<div :class="$style.editButtons">
-					<n8n-button type="secondary" size="small" @click="editName = false" :label="$locale.baseText('ndv.title.cancel')" />
-					<n8n-button type="primary" size="small" @click="onRename" :label="$locale.baseText('ndv.title.rename')" />
+					<n8n-button
+						type="secondary"
+						size="small"
+						@click="editName = false"
+						:label="$locale.baseText('ndv.title.cancel')"
+					/>
+					<n8n-button
+						type="primary"
+						size="small"
+						@click="onRename"
+						:label="$locale.baseText('ndv.title.rename')"
+					/>
 				</div>
 			</div>
 			<template #reference>
-				<div class="ph-no-capture" :class="{[$style.title]: true, [$style.hoverable]: !readOnly}">
+				<div class="ph-no-capture" :class="{ [$style.title]: true, [$style.hoverable]: !readOnly }">
 					{{ value }}
 					<div :class="$style.editIconContainer">
 						<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" v-if="!readOnly" />
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index d5b02ea54c..f6d8d34592 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -1,6 +1,15 @@
 <template>
 	<div v-if="webhooksNode.length" class="webhooks">
-		<div class="clickable headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? $locale.baseText('nodeWebhooks.clickToDisplayWebhookUrls') : $locale.baseText('nodeWebhooks.clickToHideWebhookUrls')">
+		<div
+			class="clickable headline"
+			:class="{ expanded: !isMinimized }"
+			@click="isMinimized = !isMinimized"
+			:title="
+				isMinimized
+					? $locale.baseText('nodeWebhooks.clickToDisplayWebhookUrls')
+					: $locale.baseText('nodeWebhooks.clickToHideWebhookUrls')
+			"
+		>
 			<font-awesome-icon icon="angle-down" class="minimize-button minimize-icon" />
 			{{ $locale.baseText('nodeWebhooks.webhookUrls') }}
 		</div>
@@ -12,39 +21,44 @@
 							<n8n-radio-buttons
 								v-model="showUrlFor"
 								:options="[
-									{ label: this.$locale.baseText('nodeWebhooks.testUrl'), value: 'test'},
-									{ label: this.$locale.baseText('nodeWebhooks.productionUrl'), value: 'production'},
+									{ label: this.$locale.baseText('nodeWebhooks.testUrl'), value: 'test' },
+									{
+										label: this.$locale.baseText('nodeWebhooks.productionUrl'),
+										value: 'production',
+									},
 								]"
 							/>
 						</el-col>
 					</el-row>
 				</div>
 
-				<n8n-tooltip v-for="(webhook, index) in webhooksNode" :key="index" class="item"  :content="$locale.baseText('nodeWebhooks.clickToCopyWebhookUrls')" placement="left">
+				<n8n-tooltip
+					v-for="(webhook, index) in webhooksNode"
+					:key="index"
+					class="item"
+					:content="$locale.baseText('nodeWebhooks.clickToCopyWebhookUrls')"
+					placement="left"
+				>
 					<div class="webhook-wrapper">
-							<div class="http-field">
-								<div class="http-method">
-									{{getWebhookExpressionValue(webhook, 'httpMethod')}}<br />
-								</div>
+						<div class="http-field">
+							<div class="http-method">
+								{{ getWebhookExpressionValue(webhook, 'httpMethod') }}<br />
 							</div>
-							<div class="url-field">
-								<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
-									{{getWebhookUrlDisplay(webhook)}}<br />
-								</div>
+						</div>
+						<div class="url-field">
+							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
+								{{ getWebhookUrlDisplay(webhook) }}<br />
 							</div>
+						</div>
 					</div>
 				</n8n-tooltip>
-
 			</div>
 		</el-collapse-transition>
 	</div>
 </template>
 
 <script lang="ts">
-import {
-	INodeTypeDescription,
-	IWebhookDescription,
-} from 'n8n-workflow';
+import { INodeTypeDescription, IWebhookDescription } from 'n8n-workflow';
 
 import { WEBHOOK_NODE_TYPE } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
@@ -53,63 +67,59 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
 
-export default mixins(
-	copyPaste,
-	showMessage,
-	workflowHelpers,
-)
-	.extend({
-		name: 'NodeWebhooks',
-		props: [
-			'node', // NodeUi
-			'nodeType', // INodeTypeDescription
-		],
-		data () {
-			return {
-				isMinimized: this.nodeType && this.nodeType.name !== WEBHOOK_NODE_TYPE,
-				showUrlFor: 'test',
-			};
-		},
-		computed: {
-			webhooksNode (): IWebhookDescription[] {
-				if (this.nodeType === null || this.nodeType.webhooks === undefined) {
-					return [];
-				}
+export default mixins(copyPaste, showMessage, workflowHelpers).extend({
+	name: 'NodeWebhooks',
+	props: [
+		'node', // NodeUi
+		'nodeType', // INodeTypeDescription
+	],
+	data() {
+		return {
+			isMinimized: this.nodeType && this.nodeType.name !== WEBHOOK_NODE_TYPE,
+			showUrlFor: 'test',
+		};
+	},
+	computed: {
+		webhooksNode(): IWebhookDescription[] {
+			if (this.nodeType === null || this.nodeType.webhooks === undefined) {
+				return [];
+			}
 
-				return (this.nodeType as INodeTypeDescription).webhooks!.filter(webhookData => webhookData.restartWebhook !== true);
-			},
+			return (this.nodeType as INodeTypeDescription).webhooks!.filter(
+				(webhookData) => webhookData.restartWebhook !== true,
+			);
 		},
-		methods: {
-			copyWebhookUrl (webhookData: IWebhookDescription): void {
-				const webhookUrl = this.getWebhookUrlDisplay(webhookData);
-				this.copyToClipboard(webhookUrl);
+	},
+	methods: {
+		copyWebhookUrl(webhookData: IWebhookDescription): void {
+			const webhookUrl = this.getWebhookUrlDisplay(webhookData);
+			this.copyToClipboard(webhookUrl);
 
-				this.$showMessage({
-					title: this.$locale.baseText('nodeWebhooks.showMessage.title'),
-					type: 'success',
-				});
-				this.$telemetry.track('User copied webhook URL', {
-					pane: 'parameters',
-					type: `${this.showUrlFor} url`,
-				});
-			},
-			getWebhookUrlDisplay (webhookData: IWebhookDescription): string {
-				if (this.node) {
-					return this.getWebhookUrl(webhookData, this.node, this.showUrlFor);
-				}
-				return '';
-			},
+			this.$showMessage({
+				title: this.$locale.baseText('nodeWebhooks.showMessage.title'),
+				type: 'success',
+			});
+			this.$telemetry.track('User copied webhook URL', {
+				pane: 'parameters',
+				type: `${this.showUrlFor} url`,
+			});
 		},
-		watch: {
-			node () {
-				this.isMinimized = this.nodeType.name !== WEBHOOK_NODE_TYPE;
-			},
+		getWebhookUrlDisplay(webhookData: IWebhookDescription): string {
+			if (this.node) {
+				return this.getWebhookUrl(webhookData, this.node, this.showUrlFor);
+			}
+			return '';
 		},
-	});
+	},
+	watch: {
+		node() {
+			this.isMinimized = this.nodeType.name !== WEBHOOK_NODE_TYPE;
+		},
+	},
+});
 </script>
 
 <style scoped lang="scss">
-
 .webhooks {
 	padding-bottom: var(--spacing-xs);
 	margin: var(--spacing-xs) 0;
@@ -126,7 +136,7 @@ export default mixins(
 	position: absolute;
 	width: 50px;
 	display: inline-block;
-	top: calc(50% - 8px)
+	top: calc(50% - 8px);
 }
 
 .http-method {
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index b2d66fc093..5d64839512 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -15,7 +15,10 @@
 				</n8n-text>
 			</div>
 			<div @keyup.enter="onSignup">
-				<n8n-input v-model="email" :placeholder="$locale.baseText('onboardingCallSignupModal.emailInput.placeholder')" />
+				<n8n-input
+					v-model="email"
+					:placeholder="$locale.baseText('onboardingCallSignupModal.emailInput.placeholder')"
+				/>
 				<n8n-text v-if="showError" size="small" class="mt-4xs" tag="div" color="danger">
 					{{ $locale.baseText('onboardingCallSignupModal.infoText.emailError') }}
 				</n8n-text>
@@ -47,10 +50,7 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import {
-	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
-	VALID_EMAIL_REGEX,
-} from '@/constants';
+import { ONBOARDING_CALL_SIGNUP_MODAL_KEY, VALID_EMAIL_REGEX } from '@/constants';
 import Modal from './Modal.vue';
 
 import mixins from 'vue-typed-mixins';
@@ -58,14 +58,12 @@ import { showMessage } from '@/mixins/showMessage';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	components: {
 		Modal,
 	},
 	name: 'OnboardingCallSignupModal',
-	props: [ 'modalName' ],
+	props: ['modalName'],
 	data() {
 		return {
 			email: '',
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 9bf604bfe2..2b22b292ce 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -39,26 +39,30 @@
 					v-if="hasNodeRun && staleData"
 				>
 					<template>
-						<span v-html="$locale.baseText(
-							hasPinData ? 'ndv.output.staleDataWarning.pinData' : 'ndv.output.staleDataWarning.regular'
-						)"></span>
+						<span
+							v-html="
+								$locale.baseText(
+									hasPinData
+										? 'ndv.output.staleDataWarning.pinData'
+										: 'ndv.output.staleDataWarning.regular',
+								)
+							"
+						></span>
 					</template>
 				</n8n-info-tip>
 			</div>
 		</template>
 
 		<template #node-not-run>
-			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
+			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
+				$locale.baseText('ndv.output.waitingToRun')
+			}}</n8n-text>
 			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
 				{{ $locale.baseText('ndv.output.runNodeHint') }}
 				<span @click="insertTestData" v-if="canPinData">
-					<br>
+					<br />
 					{{ $locale.baseText('generic.or') }}
-					<n8n-text
-						tag="a"
-						size="medium"
-						color="primary"
-					>
+					<n8n-text tag="a" size="medium" color="primary">
 						{{ $locale.baseText('ndv.output.insertTestData') }}
 					</n8n-text>
 				</span>
@@ -66,10 +70,14 @@
 		</template>
 
 		<template #no-output-data>
-			<n8n-text :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
+			<n8n-text :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.output.noOutputData.title')
+			}}</n8n-text>
 			<n8n-text>
 				{{ $locale.baseText('ndv.output.noOutputData.message') }}
-				<a @click="openSettings">{{ $locale.baseText('ndv.output.noOutputData.message.settings') }}</a>
+				<a @click="openSettings">{{
+					$locale.baseText('ndv.output.noOutputData.message.settings')
+				}}</a>
 				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
 			</n8n-text>
 		</template>
@@ -86,7 +94,7 @@ import { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8
 import Vue from 'vue';
 import RunData, { EnterEditModeArgs } from './RunData.vue';
 import RunInfo from './RunInfo.vue';
-import { pinData } from "@/mixins/pinData";
+import { pinData } from '@/mixins/pinData';
 import mixins from 'vue-typed-mixins';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
@@ -96,9 +104,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 type RunDataRef = Vue & { enterEditMode: (args: EnterEditModeArgs) => void };
 
-export default mixins(
-	pinData,
-).extend({
+export default mixins(pinData).extend({
 	name: 'OutputPanel',
 	components: { RunData, RunInfo },
 	props: {
@@ -127,35 +133,30 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
-		nodeType (): INodeTypeDescription | null {
+		nodeType(): INodeTypeDescription | null {
 			if (this.node) {
 				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},
-		isTriggerNode (): boolean {
+		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
-		isPollingTypeNode (): boolean {
+		isPollingTypeNode(): boolean {
 			return !!(this.nodeType && this.nodeType.polling);
 		},
-		isScheduleTrigger (): boolean {
+		isScheduleTrigger(): boolean {
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
 		isNodeRunning(): boolean {
 			const executingNode = this.workflowsStore.executingNode;
 			return this.node && executingNode === this.node.name;
 		},
-		workflowRunning (): boolean {
+		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
 		workflowExecution(): IExecutionResponse | null {
@@ -223,7 +224,7 @@ export default mixins(
 			const runAt = this.runTaskData.startTime;
 			return updatedAt > runAt;
 		},
-		outputPanelEditMode(): { enabled: boolean; value: string; } {
+		outputPanelEditMode(): { enabled: boolean; value: string } {
 			return this.ndvStore.outputPanelEditMode;
 		},
 		canPinData(): boolean {
@@ -285,5 +286,4 @@ export default mixins(
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-s);
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/PageAlert.vue b/packages/editor-ui/src/components/PageAlert.vue
index 5d041d26af..d3f914baf6 100644
--- a/packages/editor-ui/src/components/PageAlert.vue
+++ b/packages/editor-ui/src/components/PageAlert.vue
@@ -9,9 +9,7 @@ import { showMessage } from '@/mixins/showMessage';
 import type { ElMessageComponent } from 'element-ui/types/message';
 import { sanitizeHtml } from '@/utils';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'PageAlert',
 	props: {
 		message: {
@@ -45,4 +43,3 @@ export default mixins(
 	},
 });
 </script>
-
diff --git a/packages/editor-ui/src/components/PageContentWrapper.vue b/packages/editor-ui/src/components/PageContentWrapper.vue
index 37731027a4..7a70103c6c 100644
--- a/packages/editor-ui/src/components/PageContentWrapper.vue
+++ b/packages/editor-ui/src/components/PageContentWrapper.vue
@@ -9,15 +9,11 @@
 </template>
 
 <script lang="ts">
-
 import Vue from 'vue';
 
-export default Vue.extend(
-	{
-		name: 'PageContentWrapper',
-	},
-);
-
+export default Vue.extend({
+	name: 'PageContentWrapper',
+});
 </script>
 
 <style scoped>
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 4d06c549ab..6413ff061e 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -1,13 +1,23 @@
 <template>
-	<Draggable type="panel-resize" @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd" :class="$style.dragContainer">
+	<Draggable
+		type="panel-resize"
+		@drag="onDrag"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+		:class="$style.dragContainer"
+	>
 		<template #default="{ isDragging }">
-			<div
-				:class="{ [$style.dragButton]: true }"
-			>
-				<span v-if="canMoveLeft" :class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }">
+			<div :class="{ [$style.dragButton]: true }">
+				<span
+					v-if="canMoveLeft"
+					:class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }"
+				>
 					<font-awesome-icon icon="arrow-left" />
 				</span>
-				<span v-if="canMoveRight" :class="{ [$style.rightArrow]: true, [$style.visible]: isDragging }">
+				<span
+					v-if="canMoveRight"
+					:class="{ [$style.rightArrow]: true, [$style.visible]: isDragging }"
+				>
 					<font-awesome-icon icon="arrow-right" />
 				</span>
 				<div :class="$style.grid">
@@ -32,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 import Draggable from './Draggable.vue';
 
 export default Vue.extend({
@@ -48,7 +58,7 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onDrag(e: {x: number, y: number}) {
+		onDrag(e: { x: number; y: number }) {
 			this.$emit('drag', e);
 		},
 		onDragStart() {
@@ -80,7 +90,8 @@ export default Vue.extend({
 	z-index: 3;
 
 	&:hover {
-		.leftArrow, .rightArrow {
+		.leftArrow,
+		.rightArrow {
 			visibility: visible;
 		}
 	}
@@ -131,6 +142,4 @@ export default Vue.extend({
 		}
 	}
 }
-
-
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 7a51771936..6a598a63e3 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -2,7 +2,9 @@
 	<div @keydown.stop :class="parameterInputClasses">
 		<expression-edit
 			:dialogVisible="expressionEditDialogVisible"
-			:value="isResourceLocatorParameter && typeof value !== 'string' ? (value ? value.value : '') : value"
+			:value="
+				isResourceLocatorParameter && typeof value !== 'string' ? (value ? value.value : '') : value
+			"
 			:parameter="parameter"
 			:path="path"
 			:eventSource="eventSource || 'ndv'"
@@ -79,7 +81,11 @@
 					@valueChanged="valueChangedDebounced"
 				/>
 
-				<div v-else-if="isEditor === true" class="code-edit clickable ph-no-capture" @click="displayEditDialog()">
+				<div
+					v-else-if="isEditor === true"
+					class="code-edit clickable ph-no-capture"
+					@click="displayEditDialog()"
+				>
 					<prism-editor
 						v-if="!codeEditDialogVisible"
 						:lineNumbers="true"
@@ -187,9 +193,7 @@
 			/>
 
 			<credentials-select
-				v-else-if="
-					parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'
-				"
+				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
 				ref="inputField"
 				:parameter="parameter"
 				:node="node"
@@ -291,7 +295,10 @@
 			/>
 		</div>
 
-		<parameter-issues v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter" :issues="getIssues" />
+		<parameter-issues
+			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
+			:issues="getIssues"
+		/>
 	</div>
 </template>
 
@@ -300,10 +307,7 @@
 
 import { get } from 'lodash';
 
-import {
-	INodeUi,
-	INodeUpdatePropertiesInformation,
-} from '@/Interface';
+import { INodeUi, INodeUpdatePropertiesInformation } from '@/Interface';
 import {
 	NodeHelpers,
 	NodeParameterValue,
@@ -352,768 +356,813 @@ export default mixins(
 	showMessage,
 	workflowHelpers,
 	debounceHelper,
-)
-	.extend({
-		name: 'parameter-input',
-		components: {
-			CodeEdit,
-			CodeNodeEditor,
-			ExpressionEdit,
-			NodeCredentials,
-			CredentialsSelect,
-			PrismEditor,
-			ScopesNotice,
-			ParameterOptions,
-			ParameterIssues,
-			ResourceLocator,
-			TextEdit,
-			ImportParameter,
+).extend({
+	name: 'parameter-input',
+	components: {
+		CodeEdit,
+		CodeNodeEditor,
+		ExpressionEdit,
+		NodeCredentials,
+		CredentialsSelect,
+		PrismEditor,
+		ScopesNotice,
+		ParameterOptions,
+		ParameterIssues,
+		ResourceLocator,
+		TextEdit,
+		ImportParameter,
+	},
+	props: {
+		isReadOnly: {
+			type: Boolean,
 		},
-		props: {
-			isReadOnly: {
-				type: Boolean,
-			},
-			parameter: {
-				type: Object as PropType<INodeProperties>,
-			},
-			path: {
-				type: String,
-			},
-			value: {
-				type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
-			},
-			hideLabel: {
-				type: Boolean,
-			},
-			droppable: {
-				type: Boolean,
-			},
-			activeDrop: {
-				type: Boolean,
-			},
-			forceShowExpression: {
-				type: Boolean,
-			},
-			hint: {
-				type: String as PropType<string | undefined>,
-			},
-			inputSize: {
-				type: String,
-			},
-			hideIssues: {
-				type: Boolean,
-			},
-			documentationUrl: {
-				type: String as PropType<string | undefined>,
-			},
-			errorHighlight: {
-				type: Boolean,
-			},
-			isForCredential: {
-				type: Boolean,
-			},
-			eventSource: {
-				type: String,
-			},
-			expressionEvaluated: {
-				type: String as PropType<string | undefined>,
-			},
+		parameter: {
+			type: Object as PropType<INodeProperties>,
 		},
-		data () {
-			return {
-				codeEditDialogVisible: false,
-				nodeName: '',
-				expressionAddOperation: 'set' as 'add' | 'set',
-				expressionEditDialogVisible: false,
-				remoteParameterOptions: [] as INodePropertyOptions[],
-				remoteParameterOptionsLoading: false,
-				remoteParameterOptionsLoadingIssues: null as string | null,
-				textEditDialogVisible: false,
-				tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
-				CUSTOM_API_CALL_KEY,
-				activeCredentialType: '',
-				dateTimePickerOptions: {
-					shortcuts: [
-						{
-							text: 'Today', // TODO
-							// tslint:disable-next-line:no-any
-							onClick (picker: any) {
-								picker.$emit('pick', new Date());
-							},
+		path: {
+			type: String,
+		},
+		value: {
+			type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
+		},
+		hideLabel: {
+			type: Boolean,
+		},
+		droppable: {
+			type: Boolean,
+		},
+		activeDrop: {
+			type: Boolean,
+		},
+		forceShowExpression: {
+			type: Boolean,
+		},
+		hint: {
+			type: String as PropType<string | undefined>,
+		},
+		inputSize: {
+			type: String,
+		},
+		hideIssues: {
+			type: Boolean,
+		},
+		documentationUrl: {
+			type: String as PropType<string | undefined>,
+		},
+		errorHighlight: {
+			type: Boolean,
+		},
+		isForCredential: {
+			type: Boolean,
+		},
+		eventSource: {
+			type: String,
+		},
+		expressionEvaluated: {
+			type: String as PropType<string | undefined>,
+		},
+	},
+	data() {
+		return {
+			codeEditDialogVisible: false,
+			nodeName: '',
+			expressionAddOperation: 'set' as 'add' | 'set',
+			expressionEditDialogVisible: false,
+			remoteParameterOptions: [] as INodePropertyOptions[],
+			remoteParameterOptionsLoading: false,
+			remoteParameterOptionsLoadingIssues: null as string | null,
+			textEditDialogVisible: false,
+			tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
+			CUSTOM_API_CALL_KEY,
+			activeCredentialType: '',
+			dateTimePickerOptions: {
+				shortcuts: [
+					{
+						text: 'Today', // TODO
+						// tslint:disable-next-line:no-any
+						onClick(picker: any) {
+							picker.$emit('pick', new Date());
 						},
-						{
-							text: 'Yesterday', // TODO
-							// tslint:disable-next-line:no-any
-							onClick (picker: any) {
-								const date = new Date();
-								date.setTime(date.getTime() - 3600 * 1000 * 24);
-								picker.$emit('pick', date);
-							},
+					},
+					{
+						text: 'Yesterday', // TODO
+						// tslint:disable-next-line:no-any
+						onClick(picker: any) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24);
+							picker.$emit('pick', date);
 						},
-						{
-							text: 'A week ago', // TODO
-							// tslint:disable-next-line:no-any
-							onClick (picker: any) {
-								const date = new Date();
-								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-								picker.$emit('pick', date);
-							},
+					},
+					{
+						text: 'A week ago', // TODO
+						// tslint:disable-next-line:no-any
+						onClick(picker: any) {
+							const date = new Date();
+							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+							picker.$emit('pick', date);
 						},
-					],
-				},
-			};
+					},
+				],
+			},
+		};
+	},
+	watch: {
+		dependentParametersValues() {
+			// Reload the remote parameters whenever a parameter
+			// on which the current field depends on changes
+			this.loadRemoteParameterOptions();
 		},
-		watch: {
-			dependentParametersValues () {
-				// Reload the remote parameters whenever a parameter
-				// on which the current field depends on changes
-				this.loadRemoteParameterOptions();
-			},
-			value () {
-				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
-					// Do not set for color with alpha else wrong value gets displayed in field
-					return;
-				}
-				this.tempValue = this.displayValue as string;
-			},
+		value() {
+			if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
+				// Do not set for color with alpha else wrong value gets displayed in field
+				return;
+			}
+			this.tempValue = this.displayValue as string;
 		},
-		computed: {
-			...mapStores(
-				useCredentialsStore,
-				useNodeTypesStore,
-				useNDVStore,
-				useWorkflowsStore,
-			),
-			expressionDisplayValue(): string {
-				if (this.activeDrop || this.forceShowExpression) {
-					return '';
+	},
+	computed: {
+		...mapStores(useCredentialsStore, useNodeTypesStore, useNDVStore, useWorkflowsStore),
+		expressionDisplayValue(): string {
+			if (this.activeDrop || this.forceShowExpression) {
+				return '';
+			}
+
+			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
+			if (typeof value === 'string' && value.startsWith('=')) {
+				return value.slice(1);
+			}
+
+			return `${this.displayValue ?? ''}`;
+		},
+		isValueExpression(): boolean {
+			return isValueExpression(this.parameter, this.value);
+		},
+		codeAutocomplete(): string | undefined {
+			return this.getArgument('codeAutocomplete') as string | undefined;
+		},
+		dependentParametersValues(): string | null {
+			const loadOptionsDependsOn = this.getArgument('loadOptionsDependsOn') as string[] | undefined;
+
+			if (loadOptionsDependsOn === undefined) {
+				return null;
+			}
+
+			// Get the resolved parameter values of the current node
+			const currentNodeParameters = this.ndvStore.activeNode?.parameters;
+			try {
+				const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
+
+				const returnValues: string[] = [];
+				for (const parameterPath of loadOptionsDependsOn) {
+					returnValues.push(get(resolvedNodeParameters, parameterPath) as string);
 				}
 
-				const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
-				if (typeof value === 'string' && value.startsWith('=')) {
-					return value.slice(1);
+				return returnValues.join('|');
+			} catch (error) {
+				return null;
+			}
+		},
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		displayTitle(): string {
+			const interpolation = { interpolate: { shortPath: this.shortPath } };
+
+			if (this.getIssues.length && this.isValueExpression) {
+				return this.$locale.baseText(
+					'parameterInput.parameterHasIssuesAndExpression',
+					interpolation,
+				);
+			} else if (this.getIssues.length && !this.isValueExpression) {
+				return this.$locale.baseText('parameterInput.parameterHasIssues', interpolation);
+			} else if (!this.getIssues.length && this.isValueExpression) {
+				return this.$locale.baseText('parameterInput.parameterHasExpression', interpolation);
+			}
+
+			return this.$locale.baseText('parameterInput.parameter', interpolation);
+		},
+		displayValue(): string | number | boolean | null {
+			if (this.remoteParameterOptionsLoading === true) {
+				// If it is loading options from server display
+				// to user that the data is loading. If not it would
+				// display the user the key instead of the value it
+				// represents
+				return this.$locale.baseText('parameterInput.loadingOptions');
+			}
+
+			let returnValue;
+			if (this.isValueExpression === false) {
+				returnValue = this.isResourceLocatorParameter
+					? isResourceLocatorValue(this.value)
+						? this.value.value
+						: ''
+					: this.value;
+			} else {
+				returnValue = this.expressionEvaluated;
+			}
+
+			if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
+				const credType = this.credentialsStore.getCredentialTypeByName(this.value);
+				if (credType) {
+					returnValue = credType.displayName;
 				}
+			}
 
-				return `${this.displayValue ?? ''}`;
-			},
-			isValueExpression(): boolean {
-				return isValueExpression(this.parameter, this.value);
-			},
-			codeAutocomplete (): string | undefined {
-				return this.getArgument('codeAutocomplete') as string | undefined;
-			},
-			dependentParametersValues (): string | null {
-				const loadOptionsDependsOn = this.getArgument('loadOptionsDependsOn') as string[] | undefined;
+			if (
+				Array.isArray(returnValue) &&
+				this.parameter.type === 'color' &&
+				this.getArgument('showAlpha') === true &&
+				returnValue.charAt(0) === '#'
+			) {
+				// Convert the value to rgba that el-color-picker can display it correctly
+				const bigint = parseInt(returnValue.slice(1), 16);
+				const h = [];
+				h.push((bigint >> 24) & 255);
+				h.push((bigint >> 16) & 255);
+				h.push((bigint >> 8) & 255);
+				h.push(((255 - bigint) & 255) / 255);
 
-				if (loadOptionsDependsOn === undefined) {
-					return null;
-				}
-
-				// Get the resolved parameter values of the current node
-				const currentNodeParameters = this.ndvStore.activeNode?.parameters;
-				try {
-					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
-
-					const returnValues: string[] = [];
-					for (const parameterPath of loadOptionsDependsOn) {
-						returnValues.push(get(resolvedNodeParameters, parameterPath) as string);
-					}
-
-					return returnValues.join('|');
-				} catch (error) {
-					return null;
-				}
-			},
-			node (): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			displayTitle (): string {
-				const interpolation = { interpolate: { shortPath: this.shortPath } };
-
-				if (this.getIssues.length && this.isValueExpression) {
-					return this.$locale.baseText(
-						'parameterInput.parameterHasIssuesAndExpression',
-						interpolation,
-					);
-				} else if (this.getIssues.length && !this.isValueExpression) {
-					return this.$locale.baseText(
-						'parameterInput.parameterHasIssues',
-						interpolation,
-					);
-				} else if (!this.getIssues.length && this.isValueExpression) {
-					return this.$locale.baseText(
-						'parameterInput.parameterHasExpression',
-						interpolation,
-					);
-				}
-
-				return this.$locale.baseText('parameterInput.parameter', interpolation);
-			},
-			displayValue (): string | number | boolean | null {
-				if (this.remoteParameterOptionsLoading === true) {
-					// If it is loading options from server display
-					// to user that the data is loading. If not it would
-					// display the user the key instead of the value it
-					// represents
-					return this.$locale.baseText('parameterInput.loadingOptions');
-				}
-
-				let returnValue;
-				if (this.isValueExpression === false) {
-					returnValue = this.isResourceLocatorParameter ? (isResourceLocatorValue(this.value) ? this.value.value: '') : this.value;
-				} else {
-					returnValue = this.expressionEvaluated;
-				}
-
-				if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
-					const credType = this.credentialsStore.getCredentialTypeByName(this.value);
-					if (credType) {
-						returnValue = credType.displayName;
-					}
-				}
-
-				if (Array.isArray(returnValue) && this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
-					// Convert the value to rgba that el-color-picker can display it correctly
-					const bigint = parseInt(returnValue.slice(1), 16);
-					const h = [];
-					h.push((bigint >> 24) & 255);
-					h.push((bigint >> 16) & 255);
-					h.push((bigint >> 8) & 255);
-					h.push((255 - bigint & 255) / 255);
-
-					returnValue = 'rgba('+h.join()+')';
-				}
-
-				if (returnValue !== undefined && returnValue !== null && this.parameter.type === 'string') {
-					const rows = this.getArgument('rows');
-					if (rows === undefined || rows === 1) {
-						returnValue = returnValue.toString().replace(/\n/, '|');
-					}
-				}
-
-				return returnValue;
-			},
-			getStringInputType () {
-				if (this.getArgument('password') === true) {
-					return 'password';
-				}
+				returnValue = 'rgba(' + h.join() + ')';
+			}
 
+			if (returnValue !== undefined && returnValue !== null && this.parameter.type === 'string') {
 				const rows = this.getArgument('rows');
-				if (rows !== undefined && rows > 1) {
-					return 'textarea';
+				if (rows === undefined || rows === 1) {
+					returnValue = returnValue.toString().replace(/\n/, '|');
 				}
+			}
 
-				if (this.parameter.typeOptions && this.parameter.typeOptions.editor === 'code') {
-					return 'textarea';
-				}
+			return returnValue;
+		},
+		getStringInputType() {
+			if (this.getArgument('password') === true) {
+				return 'password';
+			}
 
-				return 'text';
-			},
-			getIssues (): string[] {
-				if (this.hideIssues === true || this.node === null) {
-					return [];
-				}
+			const rows = this.getArgument('rows');
+			if (rows !== undefined && rows > 1) {
+				return 'textarea';
+			}
 
-				const newPath = this.shortPath.split('.');
-				newPath.pop();
-
-				const issues = NodeHelpers.getParameterIssues(this.parameter, this.node.parameters, newPath.join('.'), this.node);
-
-				if (this.parameter.type === 'credentialsSelect' && this.displayValue === '') {
-					issues.parameters = issues.parameters || {};
-
-					const issue = this.$locale.baseText('parameterInput.selectACredentialTypeFromTheDropdown');
-
-					issues.parameters[this.parameter.name] = [issue];
-				} else if (
-					['options', 'multiOptions'].includes(this.parameter.type) &&
-					this.remoteParameterOptionsLoading === false &&
-					this.remoteParameterOptionsLoadingIssues === null &&
-					this.parameterOptions
-				) {
-					// Check if the value resolves to a valid option
-					// Currently it only displays an error in the node itself in
-					// case the value is not valid. The workflow can still be executed
-					// and the error is not displayed on the node in the workflow
-					const validOptions = this.parameterOptions.map((options) => (options as INodePropertyOptions).value);
-
-					const checkValues: string[] = [];
-
-					if (!this.skipCheck(this.displayValue)) {
-						if (Array.isArray(this.displayValue)) {
-							checkValues.push.apply(checkValues, this.displayValue);
-						} else {
-							checkValues.push(this.displayValue as string);
-						}
-					}
-
-					for (const checkValue of checkValues) {
-						if (checkValue === null || !validOptions.includes(checkValue)) {
-							if (issues.parameters === undefined) {
-								issues.parameters = {};
-							}
-
-							const issue = this.$locale.baseText(
-								'parameterInput.theValueIsNotSupported',
-								{ interpolate: { checkValue } },
-							);
-
-							issues.parameters[this.parameter.name] = [issue];
-						}
-					}
-				} else if (this.remoteParameterOptionsLoadingIssues !== null) {
-					if (issues.parameters === undefined) {
-						issues.parameters = {};
-					}
-					issues.parameters[this.parameter.name] = [`There was a problem loading the parameter options from server: "${this.remoteParameterOptionsLoadingIssues}"`];
-				}
-
-				if (issues !== undefined &&
-					issues.parameters !== undefined &&
-					issues.parameters[this.parameter.name] !== undefined) {
-					return issues.parameters[this.parameter.name];
-				}
+			if (this.parameter.typeOptions && this.parameter.typeOptions.editor === 'code') {
+				return 'textarea';
+			}
 
+			return 'text';
+		},
+		getIssues(): string[] {
+			if (this.hideIssues === true || this.node === null) {
 				return [];
-			},
-			isEditor (): boolean {
-				return ['code', 'json'].includes(this.editorType);
-			},
-			editorType (): string {
-				return this.getArgument('editor') as string;
-			},
-			parameterOptions (): Array<INodePropertyOptions | INodeProperties | INodePropertyCollection> | undefined {
-				if (this.hasRemoteMethod === false) {
-					// Options are already given
-					return this.parameter.options;
-				}
+			}
 
-				// Options get loaded from server
-				return this.remoteParameterOptions;
-			},
-			parameterInputClasses () {
-				const classes: {[c: string]: boolean} = {
-					droppable: this.droppable,
-					activeDrop: this.activeDrop,
-				};
+			const newPath = this.shortPath.split('.');
+			newPath.pop();
 
-				const rows = this.getArgument('rows');
-				const isTextarea = this.parameter.type === 'string' && rows !== undefined;
-				const isSwitch = this.parameter.type === 'boolean' && !this.isValueExpression;
+			const issues = NodeHelpers.getParameterIssues(
+				this.parameter,
+				this.node.parameters,
+				newPath.join('.'),
+				this.node,
+			);
 
-				if (!isTextarea && !isSwitch) {
-					classes['parameter-value-container'] = true;
-				}
+			if (this.parameter.type === 'credentialsSelect' && this.displayValue === '') {
+				issues.parameters = issues.parameters || {};
 
-				if (this.isValueExpression || this.forceShowExpression) {
-					classes['expression'] = true;
-				}
-				if (!this.droppable && !this.activeDrop && (this.getIssues.length || this.errorHighlight)) {
-					classes['has-issues'] = true;
-				}
+				const issue = this.$locale.baseText('parameterInput.selectACredentialTypeFromTheDropdown');
 
-				return classes;
-			},
-			parameterInputWrapperStyle () {
-				let deductWidth = 0;
-				const styles = {
-					width: '100%',
-				};
-				if (this.parameter.type === 'credentialsSelect' || this.isResourceLocatorParameter) {
-					return styles;
-				}
-				if (this.getIssues.length) {
-					deductWidth += 20;
-				}
+				issues.parameters[this.parameter.name] = [issue];
+			} else if (
+				['options', 'multiOptions'].includes(this.parameter.type) &&
+				this.remoteParameterOptionsLoading === false &&
+				this.remoteParameterOptionsLoadingIssues === null &&
+				this.parameterOptions
+			) {
+				// Check if the value resolves to a valid option
+				// Currently it only displays an error in the node itself in
+				// case the value is not valid. The workflow can still be executed
+				// and the error is not displayed on the node in the workflow
+				const validOptions = this.parameterOptions.map(
+					(options) => (options as INodePropertyOptions).value,
+				);
 
-				if (deductWidth !== 0) {
-					styles.width = `calc(100% - ${deductWidth}px)`;
-				}
+				const checkValues: string[] = [];
 
-				return styles;
-			},
-			hasRemoteMethod (): boolean {
-				return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
-			},
-			shortPath (): string {
-				const shortPath = this.path.split('.');
-				shortPath.shift();
-				return shortPath.join('.');
-			},
-			workflow (): Workflow {
-				return this.getCurrentWorkflow();
-			},
-			isResourceLocatorParameter (): boolean {
-				return this.parameter.type === 'resourceLocator';
-			},
-		},
-		methods: {
-			isRemoteParameterOption(option: INodePropertyOptions) {
-				return this.remoteParameterOptions.map(o => o.name).includes(option.name);
-			},
-			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
-				// Update the values on the node
-				this.workflowsStore.updateNodeProperties(updateInformation);
-
-				const node = this.workflowsStore.getNodeByName(updateInformation.name);
-
-				if (node) {
-					// Update the issues
-					this.updateNodeCredentialIssues(node);
-				}
-
-				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
-			},
-			/**
-			 * Check whether a param value must be skipped when collecting node param issues for validation.
-			 */
-			skipCheck(value: string | number | boolean | null) {
-				return typeof value === 'string' && value.includes(CUSTOM_API_CALL_KEY);
-			},
-			getPlaceholder(): string {
-				return this.isForCredential
-					? this.$locale.credText().placeholder(this.parameter)
-					: this.$locale.nodeText().placeholder(this.parameter, this.path);
-			},
-			getOptionsOptionDisplayName(option: INodePropertyOptions): string {
-				return this.isForCredential
-					? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
-					: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
-			},
-			getOptionsOptionDescription(option: INodePropertyOptions): string {
-				return this.isForCredential
-					? this.$locale.credText().optionsOptionDescription(this.parameter, option)
-					: this.$locale.nodeText().optionsOptionDescription(this.parameter, option, this.path);
-			},
-
-			async loadRemoteParameterOptions () {
-				if (this.node === null || this.hasRemoteMethod === false || this.remoteParameterOptionsLoading) {
-					return;
-				}
-				this.remoteParameterOptionsLoadingIssues = null;
-				this.remoteParameterOptionsLoading = true;
-				this.remoteParameterOptions.length = 0;
-
-				// Get the resolved parameter values of the current node
-
-				try {
-					const currentNodeParameters = (this.ndvStore.activeNode as INodeUi).parameters;
-					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
-					const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
-					const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
-
-					const options = await this.nodeTypesStore.getNodeParameterOptions(
-						{
-							nodeTypeAndVersion: {
-								name: this.node.type,
-								version: this.node.typeVersion,
-							},
-							path: this.path,
-							methodName: loadOptionsMethod,
-							loadOptions,
-							currentNodeParameters: resolvedNodeParameters,
-							credentials: this.node.credentials,
-						},
-					);
-
-					this.remoteParameterOptions.push.apply(this.remoteParameterOptions, options);
-				} catch (error) {
-					this.remoteParameterOptionsLoadingIssues = error.message;
-				}
-
-				this.remoteParameterOptionsLoading = false;
-			},
-			closeCodeEditDialog () {
-				this.codeEditDialogVisible = false;
-			},
-			closeExpressionEditDialog () {
-				this.expressionEditDialogVisible = false;
-			},
-			trackExpressionEditOpen () {
-				if(!this.node) {
-					return;
-				}
-
-				if((this.node.type as string).startsWith('n8n-nodes-base')) {
-					this.$telemetry.track('User opened Expression Editor', {
-						node_type: this.node.type,
-						parameter_name: this.parameter.displayName,
-						parameter_field_type: this.parameter.type,
-						new_expression: !this.isValueExpression,
-						workflow_id: this.workflowsStore.workflowId,
-						session_id: this.ndvStore.sessionId,
-						source: this.eventSource || 'ndv',
-					});
-				}
-			},
-			closeTextEditDialog () {
-				this.textEditDialogVisible = false;
-			},
-			displayEditDialog () {
-				if (this.isEditor) {
-					this.codeEditDialogVisible = true;
-				} else {
-					this.textEditDialogVisible = true;
-				}
-			},
-			getArgument (argumentName: string): string | number | boolean | undefined {
-				if (this.parameter.typeOptions === undefined) {
-					return undefined;
-				}
-
-				if (this.parameter.typeOptions[argumentName] === undefined) {
-					return undefined;
-				}
-
-				return this.parameter.typeOptions[argumentName];
-			},
-			expressionUpdated (value: string) {
-				const val: NodeParameterValueType = this.isResourceLocatorParameter ? { __rl: true, value, mode: this.value.mode } : value;
-				this.valueChanged(val);
-			},
-			openExpressionEdit() {
-				if (this.isValueExpression) {
-					this.expressionEditDialogVisible = true;
-					this.trackExpressionEditOpen();
-					return;
-				}
-			},
-			onBlur () {
-				this.$emit('blur');
-			},
-			onResourceLocatorDrop(data: string) {
-				this.$emit('drop', data);
-			},
-			setFocus () {
-				if (this.isValueExpression) {
-					this.expressionEditDialogVisible = true;
-					this.trackExpressionEditOpen();
-					return;
-				}
-
-				if (['json'].includes(this.parameter.type) && this.getArgument('alwaysOpenEditWindow')) {
-					this.displayEditDialog();
-					return;
-				}
-
-				if (this.node !== null) {
-					// When an event like mouse-click removes the active node while
-					// editing is active it does not know where to save the value to.
-					// For that reason do we save the node-name here. We could probably
-					// also just do that once on load but if Vue decides for some reason to
-					// reuse the input it could have the wrong value so lets set it everytime
-					// just to be sure
-					this.nodeName = this.node.name;
-				}
-
-				// Set focus on field
-				setTimeout(() => {
-					// @ts-ignore
-					if (this.$refs.inputField && this.$refs.inputField.$el) {
-						// @ts-ignore
-						this.$refs.inputField.focus();
+				if (!this.skipCheck(this.displayValue)) {
+					if (Array.isArray(this.displayValue)) {
+						checkValues.push.apply(checkValues, this.displayValue);
+					} else {
+						checkValues.push(this.displayValue as string);
 					}
+				}
+
+				for (const checkValue of checkValues) {
+					if (checkValue === null || !validOptions.includes(checkValue)) {
+						if (issues.parameters === undefined) {
+							issues.parameters = {};
+						}
+
+						const issue = this.$locale.baseText('parameterInput.theValueIsNotSupported', {
+							interpolate: { checkValue },
+						});
+
+						issues.parameters[this.parameter.name] = [issue];
+					}
+				}
+			} else if (this.remoteParameterOptionsLoadingIssues !== null) {
+				if (issues.parameters === undefined) {
+					issues.parameters = {};
+				}
+				issues.parameters[this.parameter.name] = [
+					`There was a problem loading the parameter options from server: "${this.remoteParameterOptionsLoadingIssues}"`,
+				];
+			}
+
+			if (
+				issues !== undefined &&
+				issues.parameters !== undefined &&
+				issues.parameters[this.parameter.name] !== undefined
+			) {
+				return issues.parameters[this.parameter.name];
+			}
+
+			return [];
+		},
+		isEditor(): boolean {
+			return ['code', 'json'].includes(this.editorType);
+		},
+		editorType(): string {
+			return this.getArgument('editor') as string;
+		},
+		parameterOptions():
+			| Array<INodePropertyOptions | INodeProperties | INodePropertyCollection>
+			| undefined {
+			if (this.hasRemoteMethod === false) {
+				// Options are already given
+				return this.parameter.options;
+			}
+
+			// Options get loaded from server
+			return this.remoteParameterOptions;
+		},
+		parameterInputClasses() {
+			const classes: { [c: string]: boolean } = {
+				droppable: this.droppable,
+				activeDrop: this.activeDrop,
+			};
+
+			const rows = this.getArgument('rows');
+			const isTextarea = this.parameter.type === 'string' && rows !== undefined;
+			const isSwitch = this.parameter.type === 'boolean' && !this.isValueExpression;
+
+			if (!isTextarea && !isSwitch) {
+				classes['parameter-value-container'] = true;
+			}
+
+			if (this.isValueExpression || this.forceShowExpression) {
+				classes['expression'] = true;
+			}
+			if (!this.droppable && !this.activeDrop && (this.getIssues.length || this.errorHighlight)) {
+				classes['has-issues'] = true;
+			}
+
+			return classes;
+		},
+		parameterInputWrapperStyle() {
+			let deductWidth = 0;
+			const styles = {
+				width: '100%',
+			};
+			if (this.parameter.type === 'credentialsSelect' || this.isResourceLocatorParameter) {
+				return styles;
+			}
+			if (this.getIssues.length) {
+				deductWidth += 20;
+			}
+
+			if (deductWidth !== 0) {
+				styles.width = `calc(100% - ${deductWidth}px)`;
+			}
+
+			return styles;
+		},
+		hasRemoteMethod(): boolean {
+			return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
+		},
+		shortPath(): string {
+			const shortPath = this.path.split('.');
+			shortPath.shift();
+			return shortPath.join('.');
+		},
+		workflow(): Workflow {
+			return this.getCurrentWorkflow();
+		},
+		isResourceLocatorParameter(): boolean {
+			return this.parameter.type === 'resourceLocator';
+		},
+	},
+	methods: {
+		isRemoteParameterOption(option: INodePropertyOptions) {
+			return this.remoteParameterOptions.map((o) => o.name).includes(option.name);
+		},
+		credentialSelected(updateInformation: INodeUpdatePropertiesInformation) {
+			// Update the values on the node
+			this.workflowsStore.updateNodeProperties(updateInformation);
+
+			const node = this.workflowsStore.getNodeByName(updateInformation.name);
+
+			if (node) {
+				// Update the issues
+				this.updateNodeCredentialIssues(node);
+			}
+
+			this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
+		},
+		/**
+		 * Check whether a param value must be skipped when collecting node param issues for validation.
+		 */
+		skipCheck(value: string | number | boolean | null) {
+			return typeof value === 'string' && value.includes(CUSTOM_API_CALL_KEY);
+		},
+		getPlaceholder(): string {
+			return this.isForCredential
+				? this.$locale.credText().placeholder(this.parameter)
+				: this.$locale.nodeText().placeholder(this.parameter, this.path);
+		},
+		getOptionsOptionDisplayName(option: INodePropertyOptions): string {
+			return this.isForCredential
+				? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
+				: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
+		},
+		getOptionsOptionDescription(option: INodePropertyOptions): string {
+			return this.isForCredential
+				? this.$locale.credText().optionsOptionDescription(this.parameter, option)
+				: this.$locale.nodeText().optionsOptionDescription(this.parameter, option, this.path);
+		},
+
+		async loadRemoteParameterOptions() {
+			if (
+				this.node === null ||
+				this.hasRemoteMethod === false ||
+				this.remoteParameterOptionsLoading
+			) {
+				return;
+			}
+			this.remoteParameterOptionsLoadingIssues = null;
+			this.remoteParameterOptionsLoading = true;
+			this.remoteParameterOptions.length = 0;
+
+			// Get the resolved parameter values of the current node
+
+			try {
+				const currentNodeParameters = (this.ndvStore.activeNode as INodeUi).parameters;
+				const resolvedNodeParameters = this.resolveParameter(
+					currentNodeParameters,
+				) as INodeParameters;
+				const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
+				const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
+
+				const options = await this.nodeTypesStore.getNodeParameterOptions({
+					nodeTypeAndVersion: {
+						name: this.node.type,
+						version: this.node.typeVersion,
+					},
+					path: this.path,
+					methodName: loadOptionsMethod,
+					loadOptions,
+					currentNodeParameters: resolvedNodeParameters,
+					credentials: this.node.credentials,
 				});
 
-				this.$emit('focus');
-			},
-			isCodeNode(node: INodeUi): boolean {
-				return node.type === CODE_NODE_TYPE;
-			},
-			rgbaToHex (value: string): string | null {
-				// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-				const valueMatch = (value as string).match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/);
-				if (valueMatch === null) {
-					// TODO: Display something if value is not valid
-					return null;
-				}
-				const [r, g, b, a] = valueMatch.splice(1, 4).map(v => Number(v));
-				return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + ((1 << 8) + Math.floor((1-a)*255)).toString(16).slice(1);
-			},
-			onTextInputChange (value: string) {
-				const parameterData = {
-					node: this.node !== null ? this.node.name : this.nodeName,
-					name: this.path,
-					value,
-				};
+				this.remoteParameterOptions.push.apply(this.remoteParameterOptions, options);
+			} catch (error) {
+				this.remoteParameterOptionsLoadingIssues = error.message;
+			}
 
-				this.$emit('textInput', parameterData);
-			},
-			valueChangedDebounced (value: NodeParameterValueType | {} | Date) {
-				this.callDebounced('valueChanged', { debounceTime: 100 }, value);
-			},
-			valueChanged (value: NodeParameterValueType | {} | Date) {
-				if (this.parameter.name === 'nodeCredentialType') {
-					this.activeCredentialType = value as string;
-				}
-
-				if (value instanceof Date) {
-					value = value.toISOString();
-				}
-
-				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && value !== null && value !== undefined && value.toString().charAt(0) !== '#') {
-					const newValue = this.rgbaToHex(value as string);
-					if (newValue !== null) {
-						this.tempValue = newValue;
-						value = newValue;
-					}
-				}
-
-				const parameterData = {
-					node: this.node !== null ? this.node.name : this.nodeName,
-					name: this.path,
-					value,
-				};
-
-				this.$emit('valueChanged', parameterData);
-
-				if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
-					this.$telemetry.track('User set node operation or mode', {
-						workflow_id: this.workflowsStore.workflowId,
-						node_type: this.node && this.node.type,
-						resource: this.node && this.node.parameters.resource,
-						is_custom: value === CUSTOM_API_CALL_KEY,
-						session_id: this.ndvStore.sessionId,
-						parameter: this.parameter.name,
-					});
-				}
-			},
-			optionSelected (command: string) {
-				const prevValue = this.value;
-
-				if (command === 'resetValue') {
-					this.valueChanged(this.parameter.default);
-				} else if (command === 'openExpression') {
-					this.expressionEditDialogVisible = true;
-				} else if (command === 'addExpression') {
-					if (this.isResourceLocatorParameter) {
-						if (isResourceLocatorValue(this.value)) {
-							this.valueChanged({ __rl: true, value: `=${this.value.value}`, mode: this.value.mode });
-						} else {
-							this.valueChanged({ __rl: true, value: `=${this.value}`, mode: '' });
-						}
-					}
-					else if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
-						this.valueChanged(`={{${this.value}}}`);
-					}
-					else {
-						this.valueChanged(`=${this.value}`);
-					}
-
-					setTimeout(() => {
-						this.expressionEditDialogVisible = true;
-						this.trackExpressionEditOpen();
-					}, 375);
-				} else if (command === 'removeExpression') {
-					let value: NodeParameterValueType = this.expressionEvaluated;
-
-					if (this.parameter.type === 'multiOptions' && typeof value === 'string') {
-						value = (value || '').split(',')
-							.filter((value) => (this.parameterOptions || []).find((option) => (option as INodePropertyOptions).value === value));
-					}
-
-					if (this.isResourceLocatorParameter && isResourceLocatorValue(this.value)) {
-						this.valueChanged({ __rl: true, value, mode: this.value.mode });
-					} else {
-						let newValue = typeof value !== 'undefined' ? value : null;
-
-						if (this.parameter.type === 'string') {
-							// Strip the '=' from the beginning
-							newValue = this.value ? this.value.toString().substring(1) : null;
-						}
-
-						this.valueChanged(newValue);
-					}
-				} else if (command === 'refreshOptions') {
-					if (this.isResourceLocatorParameter) {
-						const resourceLocator = this.$refs.resourceLocator;
-						if (resourceLocator) {
-							(resourceLocator as Vue).$emit('refreshList');
-						}
-					}
-					this.loadRemoteParameterOptions();
-				}
-
-				if (this.node && (command === 'addExpression' || command === 'removeExpression')) {
-					const telemetryPayload = {
-						node_type: this.node.type,
-						parameter: this.path,
-						old_mode: command === 'addExpression' ? 'fixed': 'expression',
-						new_mode: command === 'removeExpression' ? 'fixed': 'expression',
-						was_parameter_empty: prevValue === '' || prevValue === undefined,
-						had_mapping: hasExpressionMapping(prevValue),
-						had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
-					};
-					this.$telemetry.track('User switched parameter mode', telemetryPayload);
-					this.$externalHooks().run('parameterInput.modeSwitch', telemetryPayload);
-				}
-			},
+			this.remoteParameterOptionsLoading = false;
 		},
-		updated () {
-			this.$nextTick(() => {
-				const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
-
-				if (remoteParameterOptions.length > 0) {
-					this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
-				}
-			});
+		closeCodeEditDialog() {
+			this.codeEditDialogVisible = false;
 		},
-		mounted () {
-			this.$on('optionSelected', this.optionSelected);
+		closeExpressionEditDialog() {
+			this.expressionEditDialogVisible = false;
+		},
+		trackExpressionEditOpen() {
+			if (!this.node) {
+				return;
+			}
+
+			if ((this.node.type as string).startsWith('n8n-nodes-base')) {
+				this.$telemetry.track('User opened Expression Editor', {
+					node_type: this.node.type,
+					parameter_name: this.parameter.displayName,
+					parameter_field_type: this.parameter.type,
+					new_expression: !this.isValueExpression,
+					workflow_id: this.workflowsStore.workflowId,
+					session_id: this.ndvStore.sessionId,
+					source: this.eventSource || 'ndv',
+				});
+			}
+		},
+		closeTextEditDialog() {
+			this.textEditDialogVisible = false;
+		},
+		displayEditDialog() {
+			if (this.isEditor) {
+				this.codeEditDialogVisible = true;
+			} else {
+				this.textEditDialogVisible = true;
+			}
+		},
+		getArgument(argumentName: string): string | number | boolean | undefined {
+			if (this.parameter.typeOptions === undefined) {
+				return undefined;
+			}
+
+			if (this.parameter.typeOptions[argumentName] === undefined) {
+				return undefined;
+			}
+
+			return this.parameter.typeOptions[argumentName];
+		},
+		expressionUpdated(value: string) {
+			const val: NodeParameterValueType = this.isResourceLocatorParameter
+				? { __rl: true, value, mode: this.value.mode }
+				: value;
+			this.valueChanged(val);
+		},
+		openExpressionEdit() {
+			if (this.isValueExpression) {
+				this.expressionEditDialogVisible = true;
+				this.trackExpressionEditOpen();
+				return;
+			}
+		},
+		onBlur() {
+			this.$emit('blur');
+		},
+		onResourceLocatorDrop(data: string) {
+			this.$emit('drop', data);
+		},
+		setFocus() {
+			if (this.isValueExpression) {
+				this.expressionEditDialogVisible = true;
+				this.trackExpressionEditOpen();
+				return;
+			}
+
+			if (['json'].includes(this.parameter.type) && this.getArgument('alwaysOpenEditWindow')) {
+				this.displayEditDialog();
+				return;
+			}
 
-			this.tempValue = this.displayValue as string;
 			if (this.node !== null) {
+				// When an event like mouse-click removes the active node while
+				// editing is active it does not know where to save the value to.
+				// For that reason do we save the node-name here. We could probably
+				// also just do that once on load but if Vue decides for some reason to
+				// reuse the input it could have the wrong value so lets set it everytime
+				// just to be sure
 				this.nodeName = this.node.name;
 			}
 
-			if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
-				this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
+			// Set focus on field
+			setTimeout(() => {
+				// @ts-ignore
+				if (this.$refs.inputField && this.$refs.inputField.$el) {
+					// @ts-ignore
+					this.$refs.inputField.focus();
+				}
+			});
+
+			this.$emit('focus');
+		},
+		isCodeNode(node: INodeUi): boolean {
+			return node.type === CODE_NODE_TYPE;
+		},
+		rgbaToHex(value: string): string | null {
+			// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+			const valueMatch = (value as string).match(
+				/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)$/,
+			);
+			if (valueMatch === null) {
+				// TODO: Display something if value is not valid
+				return null;
+			}
+			const [r, g, b, a] = valueMatch.splice(1, 4).map((v) => Number(v));
+			return (
+				'#' +
+				((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) +
+				((1 << 8) + Math.floor((1 - a) * 255)).toString(16).slice(1)
+			);
+		},
+		onTextInputChange(value: string) {
+			const parameterData = {
+				node: this.node !== null ? this.node.name : this.nodeName,
+				name: this.path,
+				value,
+			};
+
+			this.$emit('textInput', parameterData);
+		},
+		valueChangedDebounced(value: NodeParameterValueType | {} | Date) {
+			this.callDebounced('valueChanged', { debounceTime: 100 }, value);
+		},
+		valueChanged(value: NodeParameterValueType | {} | Date) {
+			if (this.parameter.name === 'nodeCredentialType') {
+				this.activeCredentialType = value as string;
 			}
 
-			if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && this.displayValue !== null && this.displayValue.toString().charAt(0) !== '#') {
-				const newValue = this.rgbaToHex(this.displayValue as string);
+			if (value instanceof Date) {
+				value = value.toISOString();
+			}
+
+			if (
+				this.parameter.type === 'color' &&
+				this.getArgument('showAlpha') === true &&
+				value !== null &&
+				value !== undefined &&
+				value.toString().charAt(0) !== '#'
+			) {
+				const newValue = this.rgbaToHex(value as string);
 				if (newValue !== null) {
 					this.tempValue = newValue;
+					value = newValue;
 				}
 			}
 
-			if (this.hasRemoteMethod === true && this.node !== null) {
-				// Make sure to load the parameter options
-				// directly and whenever the credentials change
-				this.$watch(() => this.node!.credentials, () => {
-					this.loadRemoteParameterOptions();
-				}, { deep: true, immediate: true });
+			const parameterData = {
+				node: this.node !== null ? this.node.name : this.nodeName,
+				name: this.path,
+				value,
+			};
 
-				// Reload function on change element from
-				// displayOptions.typeOptions.reloadOnChange parameters
-				if (this.parameter.typeOptions && this.parameter.typeOptions.reloadOnChange) {
-					// Get all parameter in reloadOnChange property
-					// This reload when parameters in reloadOnChange is updated
-					const parametersOnChange : string[] = this.parameter.typeOptions.reloadOnChange;
-					for (let i = 0; i < parametersOnChange.length; i++) {
-						const parameter = parametersOnChange[i] as string;
-						if (parameter in this.node.parameters) {
-							this.$watch(() => {
+			this.$emit('valueChanged', parameterData);
+
+			if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
+				this.$telemetry.track('User set node operation or mode', {
+					workflow_id: this.workflowsStore.workflowId,
+					node_type: this.node && this.node.type,
+					resource: this.node && this.node.parameters.resource,
+					is_custom: value === CUSTOM_API_CALL_KEY,
+					session_id: this.ndvStore.sessionId,
+					parameter: this.parameter.name,
+				});
+			}
+		},
+		optionSelected(command: string) {
+			const prevValue = this.value;
+
+			if (command === 'resetValue') {
+				this.valueChanged(this.parameter.default);
+			} else if (command === 'openExpression') {
+				this.expressionEditDialogVisible = true;
+			} else if (command === 'addExpression') {
+				if (this.isResourceLocatorParameter) {
+					if (isResourceLocatorValue(this.value)) {
+						this.valueChanged({ __rl: true, value: `=${this.value.value}`, mode: this.value.mode });
+					} else {
+						this.valueChanged({ __rl: true, value: `=${this.value}`, mode: '' });
+					}
+				} else if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
+					this.valueChanged(`={{${this.value}}}`);
+				} else {
+					this.valueChanged(`=${this.value}`);
+				}
+
+				setTimeout(() => {
+					this.expressionEditDialogVisible = true;
+					this.trackExpressionEditOpen();
+				}, 375);
+			} else if (command === 'removeExpression') {
+				let value: NodeParameterValueType = this.expressionEvaluated;
+
+				if (this.parameter.type === 'multiOptions' && typeof value === 'string') {
+					value = (value || '')
+						.split(',')
+						.filter((value) =>
+							(this.parameterOptions || []).find(
+								(option) => (option as INodePropertyOptions).value === value,
+							),
+						);
+				}
+
+				if (this.isResourceLocatorParameter && isResourceLocatorValue(this.value)) {
+					this.valueChanged({ __rl: true, value, mode: this.value.mode });
+				} else {
+					let newValue = typeof value !== 'undefined' ? value : null;
+
+					if (this.parameter.type === 'string') {
+						// Strip the '=' from the beginning
+						newValue = this.value ? this.value.toString().substring(1) : null;
+					}
+
+					this.valueChanged(newValue);
+				}
+			} else if (command === 'refreshOptions') {
+				if (this.isResourceLocatorParameter) {
+					const resourceLocator = this.$refs.resourceLocator;
+					if (resourceLocator) {
+						(resourceLocator as Vue).$emit('refreshList');
+					}
+				}
+				this.loadRemoteParameterOptions();
+			}
+
+			if (this.node && (command === 'addExpression' || command === 'removeExpression')) {
+				const telemetryPayload = {
+					node_type: this.node.type,
+					parameter: this.path,
+					old_mode: command === 'addExpression' ? 'fixed' : 'expression',
+					new_mode: command === 'removeExpression' ? 'fixed' : 'expression',
+					was_parameter_empty: prevValue === '' || prevValue === undefined,
+					had_mapping: hasExpressionMapping(prevValue),
+					had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
+				};
+				this.$telemetry.track('User switched parameter mode', telemetryPayload);
+				this.$externalHooks().run('parameterInput.modeSwitch', telemetryPayload);
+			}
+		},
+	},
+	updated() {
+		this.$nextTick(() => {
+			const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
+
+			if (remoteParameterOptions.length > 0) {
+				this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
+			}
+		});
+	},
+	mounted() {
+		this.$on('optionSelected', this.optionSelected);
+
+		this.tempValue = this.displayValue as string;
+		if (this.node !== null) {
+			this.nodeName = this.node.name;
+		}
+
+		if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
+			this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
+		}
+
+		if (
+			this.parameter.type === 'color' &&
+			this.getArgument('showAlpha') === true &&
+			this.displayValue !== null &&
+			this.displayValue.toString().charAt(0) !== '#'
+		) {
+			const newValue = this.rgbaToHex(this.displayValue as string);
+			if (newValue !== null) {
+				this.tempValue = newValue;
+			}
+		}
+
+		if (this.hasRemoteMethod === true && this.node !== null) {
+			// Make sure to load the parameter options
+			// directly and whenever the credentials change
+			this.$watch(
+				() => this.node!.credentials,
+				() => {
+					this.loadRemoteParameterOptions();
+				},
+				{ deep: true, immediate: true },
+			);
+
+			// Reload function on change element from
+			// displayOptions.typeOptions.reloadOnChange parameters
+			if (this.parameter.typeOptions && this.parameter.typeOptions.reloadOnChange) {
+				// Get all parameter in reloadOnChange property
+				// This reload when parameters in reloadOnChange is updated
+				const parametersOnChange: string[] = this.parameter.typeOptions.reloadOnChange;
+				for (let i = 0; i < parametersOnChange.length; i++) {
+					const parameter = parametersOnChange[i] as string;
+					if (parameter in this.node.parameters) {
+						this.$watch(
+							() => {
 								if (this.node && this.node.parameters && this.node.parameters[parameter]) {
 									return this.node.parameters![parameter];
 								} else {
 									return null;
 								}
-							}, () => {
+							},
+							() => {
 								this.loadRemoteParameterOptions();
-							}, { deep: true, immediate: true });
-						}
+							},
+							{ deep: true, immediate: true },
+						);
 					}
 				}
 			}
+		}
 
-			this.$externalHooks().run('parameterInput.mount', { parameter: this.parameter, inputFieldRef: this.$refs['inputField'] });
-		},
-	});
+		this.$externalHooks().run('parameterInput.mount', {
+			parameter: this.parameter,
+			inputFieldRef: this.$refs['inputField'],
+		});
+	},
+});
 </script>
 
 <style scoped lang="scss">
-
 .code-edit {
 	font-size: var(--font-size-xs);
 }
@@ -1146,7 +1195,6 @@ export default mixins(
 </style>
 
 <style lang="scss">
-
 .ql-editor {
 	padding: 6px;
 	line-height: 26px;
@@ -1154,7 +1202,8 @@ export default mixins(
 }
 
 .expression {
-	textarea, input {
+	textarea,
+	input {
 		cursor: pointer !important;
 	}
 
@@ -1163,13 +1212,13 @@ export default mixins(
 	--input-font-color: var(--color-secondary);
 }
 
-
 .droppable {
 	--input-border-color: var(--color-secondary);
 	--input-background-color: var(--color-foreground-xlight);
 	--input-border-style: dashed;
 
-	textarea, input {
+	textarea,
+	input {
 		border-width: 1.5px;
 	}
 }
@@ -1179,7 +1228,8 @@ export default mixins(
 	--input-background-color: var(--color-foreground-xlight);
 	--input-border-style: solid;
 
-	textarea, input {
+	textarea,
+	input {
 		cursor: grabbing !important;
 		border-width: 1px;
 	}
@@ -1226,5 +1276,4 @@ export default mixins(
 	height: 100%;
 	align-items: center;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index ff8c5256af..1a5ce9e1d7 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -30,7 +30,7 @@
 				:errorHighlight="showRequiredErrors"
 				:isForCredential="true"
 				:eventSource="eventSource"
-				:hint="!showRequiredErrors? hint: ''"
+				:hint="!showRequiredErrors ? hint : ''"
 				@focus="onFocus"
 				@blur="onBlur"
 				@textInput="valueChanged"
@@ -39,7 +39,13 @@
 			<div :class="$style.errors" v-if="showRequiredErrors">
 				<n8n-text color="danger" size="small">
 					{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
-					<n8n-link v-if="documentationUrl" :to="documentationUrl" size="small" :underline="true" @click="onDocumentationUrlClick">
+					<n8n-link
+						v-if="documentationUrl"
+						:to="documentationUrl"
+						size="small"
+						:underline="true"
+						@click="onDocumentationUrlClick"
+					>
 						{{ $locale.baseText('parameterInputExpanded.openDocs') }}
 					</n8n-link>
 				</n8n-text>
@@ -68,8 +74,7 @@ export default Vue.extend({
 		parameter: {
 			type: Object as PropType<INodeProperties>,
 		},
-		value: {
-		},
+		value: {},
 		showValidationWarnings: {
 			type: Boolean,
 		},
@@ -88,9 +93,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useWorkflowsStore,
-		),
+		...mapStores(useWorkflowsStore),
 		showRequiredErrors(): boolean {
 			if (!this.$props.parameter.required) {
 				return false;
@@ -115,8 +118,11 @@ export default Vue.extend({
 
 			return this.$locale.credText().hint(this.parameter);
 		},
-		isValueExpression (): boolean {
-			return isValueExpression(this.parameter, this.value as string | INodeParameterResourceLocator);
+		isValueExpression(): boolean {
+			return isValueExpression(
+				this.parameter,
+				this.value as string | INodeParameterResourceLocator,
+			);
 		},
 	},
 	methods: {
@@ -130,7 +136,7 @@ export default Vue.extend({
 		onMenuExpanded(expanded: boolean) {
 			this.menuExpanded = expanded;
 		},
-		optionSelected (command: string) {
+		optionSelected(command: string) {
 			if (this.$refs.param) {
 				(this.$refs.param as Vue).$emit('optionSelected', command);
 			}
@@ -138,7 +144,7 @@ export default Vue.extend({
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('change', parameterData);
 		},
-		onDocumentationUrlClick (): void {
+		onDocumentationUrlClick(): void {
 			this.$telemetry.track('User clicked credential modal docs link', {
 				docs_link: this.documentationUrl,
 				source: 'field',
@@ -150,10 +156,10 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-	.errors {
-		margin-top: var(--spacing-2xs);
-	}
-	.hint {
-		margin-top: var(--spacing-4xs);
-	}
+.errors {
+	margin-top: var(--spacing-2xs);
+}
+.hint {
+	margin-top: var(--spacing-4xs);
+}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index daebb3dad2..de602f4911 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,7 +1,7 @@
 <template>
 	<n8n-input-label
-		:label="hideLabel ? '': $locale.nodeText().inputLabelDisplayName(parameter, path)"
-		:tooltipText="hideLabel ? '': $locale.nodeText().inputLabelDescription(parameter, path)"
+		:label="hideLabel ? '' : $locale.nodeText().inputLabelDisplayName(parameter, path)"
+		:tooltipText="hideLabel ? '' : $locale.nodeText().inputLabelDescription(parameter, path)"
 		:showTooltip="focused"
 		:showOptions="menuExpanded || focused || forceShowExpression"
 		:bold="false"
@@ -35,7 +35,13 @@
 						:buttons="dataMappingTooltipButtons"
 					>
 						<template #content>
-							<span v-html="$locale.baseText(`dataMapping.${displayMode}Hint`, { interpolate: { name: parameter.displayName } })" />
+							<span
+								v-html="
+									$locale.baseText(`dataMapping.${displayMode}Hint`, {
+										interpolate: { name: parameter.displayName },
+									})
+								"
+							/>
 						</template>
 						<parameter-input-wrapper
 							ref="param"
@@ -63,12 +69,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 
-import {
-	IN8nButton,
-	INodeUi,
-	IRunDataDisplayMode,
-	IUpdateInformation,
-} from '@/Interface';
+import { IN8nButton, INodeUi, IRunDataDisplayMode, IUpdateInformation } from '@/Interface';
 
 import ParameterOptions from '@/components/ParameterOptions.vue';
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -78,210 +79,217 @@ import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { hasExpressionMapping, isResourceLocatorValue, hasOnlyListMode } from '@/utils';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
 import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
-import { BaseTextKey } from "@/plugins/i18n";
+import { BaseTextKey } from '@/plugins/i18n';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 
-export default mixins(
-	showMessage,
-)
-	.extend({
-		name: 'parameter-input-full',
-		components: {
-			ParameterOptions,
-			DraggableTarget,
-			ParameterInputWrapper,
+export default mixins(showMessage).extend({
+	name: 'parameter-input-full',
+	components: {
+		ParameterOptions,
+		DraggableTarget,
+		ParameterInputWrapper,
+	},
+	data() {
+		return {
+			focused: false,
+			menuExpanded: false,
+			forceShowExpression: false,
+			dataMappingTooltipButtons: [] as IN8nButton[],
+			mappingTooltipEnabled: false,
+		};
+	},
+	props: {
+		displayOptions: {
+			type: Boolean,
+			default: false,
 		},
-		data() {
-			return {
-				focused: false,
-				menuExpanded: false,
-				forceShowExpression: false,
-				dataMappingTooltipButtons: [] as IN8nButton[],
-				mappingTooltipEnabled: false,
-			};
+		isReadOnly: {
+			type: Boolean,
+			default: false,
 		},
-		props: {
-			displayOptions: {
-				type: Boolean,
-				default: false,
-			},
-			isReadOnly: {
-				type: Boolean,
-				default: false,
-			},
-			hideLabel: {
-				type: Boolean,
-				default: false,
-			},
-			parameter: {
-				type: Object as PropType<INodeProperties>,
-			},
-			path: {
-				type: String,
-			},
-			value: {
-				type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
-			},
+		hideLabel: {
+			type: Boolean,
+			default: false,
 		},
-		created() {
-			const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
-			this.dataMappingTooltipButtons = [
-				{
-					attrs: {
-						label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
-					},
-					listeners: {
-						click: mappingTooltipDismissHandler,
-					},
+		parameter: {
+			type: Object as PropType<INodeProperties>,
+		},
+		path: {
+			type: String,
+		},
+		value: {
+			type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
+		},
+	},
+	created() {
+		const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
+		this.dataMappingTooltipButtons = [
+			{
+				attrs: {
+					label: this.$locale.baseText('_reusableBaseText.dismiss' as BaseTextKey),
 				},
-			];
+				listeners: {
+					click: mappingTooltipDismissHandler,
+				},
+			},
+		];
+	},
+	computed: {
+		...mapStores(useNDVStore),
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
-		computed: {
-			...mapStores(
-				useNDVStore,
-			),
-			node (): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			hint (): string | null {
-				return this.$locale.nodeText().hint(this.parameter, this.path);
-			},
-			isInputTypeString (): boolean {
-				return this.parameter.type === 'string';
-			},
-			isResourceLocator (): boolean {
-				return  this.parameter.type === 'resourceLocator';
-			},
-			isDropDisabled (): boolean {
-				return this.parameter.noDataExpression || this.isReadOnly || this.isResourceLocator;
-			},
-			showExpressionSelector (): boolean {
-				return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
-			},
-			isInputDataEmpty (): boolean {
-				return this.ndvStore.isDNVDataEmpty('input');
-			},
-			displayMode(): IRunDataDisplayMode {
-				return this.ndvStore.inputPanelDisplayMode;
-			},
-			showMappingTooltip (): boolean {
-				return this.mappingTooltipEnabled && this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
-			},
+		hint(): string | null {
+			return this.$locale.nodeText().hint(this.parameter, this.path);
 		},
-		methods: {
-			onFocus() {
-				this.focused = true;
-				setTimeout(() => {
-					this.mappingTooltipEnabled = true;
-				}, 500);
-				if (!this.parameter.noDataExpression) {
-					this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
-				}
-			},
-			onBlur() {
-				this.focused = false;
-				this.mappingTooltipEnabled = false;
-				if (!this.parameter.noDataExpression) {
-					this.ndvStore.setMappableNDVInputFocus('');
-				}
-			},
-			onMenuExpanded(expanded: boolean) {
-				this.menuExpanded = expanded;
-			},
-			optionSelected (command: string) {
-				if (this.$refs.param) {
-					(this.$refs.param as Vue).$emit('optionSelected', command);
-				}
-			},
-			valueChanged (parameterData: IUpdateInformation) {
-				this.$emit('valueChanged', parameterData);
-			},
-			onDrop(data: string) {
-				this.forceShowExpression = true;
-				setTimeout(() => {
-					if (this.node) {
-						const prevValue = this.isResourceLocator ? this.value.value : this.value;
-						let updatedValue: string;
-						if (typeof prevValue === 'string' && prevValue.startsWith('=') && prevValue.length > 1) {
-							updatedValue = `${prevValue} ${data}`;
-						}
-						else {
-							updatedValue = `=${data}`;
-						}
+		isInputTypeString(): boolean {
+			return this.parameter.type === 'string';
+		},
+		isResourceLocator(): boolean {
+			return this.parameter.type === 'resourceLocator';
+		},
+		isDropDisabled(): boolean {
+			return this.parameter.noDataExpression || this.isReadOnly || this.isResourceLocator;
+		},
+		showExpressionSelector(): boolean {
+			return this.isResourceLocator ? !hasOnlyListMode(this.parameter) : true;
+		},
+		isInputDataEmpty(): boolean {
+			return this.ndvStore.isDNVDataEmpty('input');
+		},
+		displayMode(): IRunDataDisplayMode {
+			return this.ndvStore.inputPanelDisplayMode;
+		},
+		showMappingTooltip(): boolean {
+			return (
+				this.mappingTooltipEnabled &&
+				this.focused &&
+				this.isInputTypeString &&
+				!this.isInputDataEmpty &&
+				window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true'
+			);
+		},
+	},
+	methods: {
+		onFocus() {
+			this.focused = true;
+			setTimeout(() => {
+				this.mappingTooltipEnabled = true;
+			}, 500);
+			if (!this.parameter.noDataExpression) {
+				this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
+			}
+		},
+		onBlur() {
+			this.focused = false;
+			this.mappingTooltipEnabled = false;
+			if (!this.parameter.noDataExpression) {
+				this.ndvStore.setMappableNDVInputFocus('');
+			}
+		},
+		onMenuExpanded(expanded: boolean) {
+			this.menuExpanded = expanded;
+		},
+		optionSelected(command: string) {
+			if (this.$refs.param) {
+				(this.$refs.param as Vue).$emit('optionSelected', command);
+			}
+		},
+		valueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+		onDrop(data: string) {
+			this.forceShowExpression = true;
+			setTimeout(() => {
+				if (this.node) {
+					const prevValue = this.isResourceLocator ? this.value.value : this.value;
+					let updatedValue: string;
+					if (typeof prevValue === 'string' && prevValue.startsWith('=') && prevValue.length > 1) {
+						updatedValue = `${prevValue} ${data}`;
+					} else {
+						updatedValue = `=${data}`;
+					}
 
-
-						let parameterData;
-						if (this.isResourceLocator) {
-							if (!isResourceLocatorValue(this.value)) {
-								parameterData = {
-									node: this.node.name,
-									name: this.path,
-									value: { __rl: true, value: updatedValue, mode: '' },
-								};
-							}
-							else if (this.value.mode === 'list' && this.parameter.modes && this.parameter.modes.length > 1) {
-								let mode = this.parameter.modes.find((mode: INodePropertyMode) => mode.name === 'id') || null;
-								if (!mode) {
-									mode = this.parameter.modes.filter((mode: INodePropertyMode) => mode.name !== 'list')[0];
-								}
-
-								parameterData = {
-									node: this.node.name,
-									name: this.path,
-									value: { __rl: true, value: updatedValue, mode: mode ? mode.name : '' },
-								};
-							}
-							else {
-								parameterData = {
-									node: this.node.name,
-									name: this.path,
-									value: { __rl: true, value: updatedValue, mode: this.value.mode },
-								};
+					let parameterData;
+					if (this.isResourceLocator) {
+						if (!isResourceLocatorValue(this.value)) {
+							parameterData = {
+								node: this.node.name,
+								name: this.path,
+								value: { __rl: true, value: updatedValue, mode: '' },
+							};
+						} else if (
+							this.value.mode === 'list' &&
+							this.parameter.modes &&
+							this.parameter.modes.length > 1
+						) {
+							let mode =
+								this.parameter.modes.find((mode: INodePropertyMode) => mode.name === 'id') || null;
+							if (!mode) {
+								mode = this.parameter.modes.filter(
+									(mode: INodePropertyMode) => mode.name !== 'list',
+								)[0];
 							}
 
+							parameterData = {
+								node: this.node.name,
+								name: this.path,
+								value: { __rl: true, value: updatedValue, mode: mode ? mode.name : '' },
+							};
 						} else {
 							parameterData = {
 								node: this.node.name,
 								name: this.path,
-								value: updatedValue,
+								value: { __rl: true, value: updatedValue, mode: this.value.mode },
 							};
 						}
-
-						this.$emit('valueChanged', parameterData);
-
-						if (window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true') {
-							this.$showMessage({
-								title: this.$locale.baseText('dataMapping.success.title'),
-								message: this.$locale.baseText('dataMapping.success.moreInfo'),
-								type: 'success',
-							});
-
-							window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
-						}
-
-						this.ndvStore.setMappingTelemetry({
-							dest_node_type: this.node.type,
-							dest_parameter: this.path,
-							dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed',
-							dest_parameter_empty: prevValue === '' || prevValue === undefined,
-							dest_parameter_had_mapping: typeof prevValue === 'string' && prevValue.startsWith('=') && hasExpressionMapping(prevValue),
-							success: true,
-						});
+					} else {
+						parameterData = {
+							node: this.node.name,
+							name: this.path,
+							value: updatedValue,
+						};
 					}
-					this.forceShowExpression = false;
-				}, 200);
-			},
-			onMappingTooltipDismissed() {
-				window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
-			},
-		},
-		watch: {
-			showMappingTooltip(newValue: boolean) {
-				if (!newValue) {
-					this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
+
+					this.$emit('valueChanged', parameterData);
+
+					if (window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true') {
+						this.$showMessage({
+							title: this.$locale.baseText('dataMapping.success.title'),
+							message: this.$locale.baseText('dataMapping.success.moreInfo'),
+							type: 'success',
+						});
+
+						window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
+					}
+
+					this.ndvStore.setMappingTelemetry({
+						dest_node_type: this.node.type,
+						dest_parameter: this.path,
+						dest_parameter_mode:
+							typeof prevValue === 'string' && prevValue.startsWith('=') ? 'expression' : 'fixed',
+						dest_parameter_empty: prevValue === '' || prevValue === undefined,
+						dest_parameter_had_mapping:
+							typeof prevValue === 'string' &&
+							prevValue.startsWith('=') &&
+							hasExpressionMapping(prevValue),
+						success: true,
+					});
 				}
-			},
+				this.forceShowExpression = false;
+			}, 200);
 		},
-	});
+		onMappingTooltipDismissed() {
+			window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
+		},
+	},
+	watch: {
+		showMappingTooltip(newValue: boolean) {
+			if (!newValue) {
+				this.$telemetry.track('User viewed data mapping tooltip', { type: 'param focus' });
+			}
+		},
+	},
+});
 </script>
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 8a9db34bfb..125eb74f53 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,13 +1,20 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div v-if="!renderHTML" :class="{[$style.hint]: true, [$style.highlight]: highlight}">{{ hint }}</div>
-		<div v-else ref="hint" :class="{[$style.hint]: true, [$style.highlight]: highlight}" v-html="sanitizeHtml(hint)"></div>
+		<div v-if="!renderHTML" :class="{ [$style.hint]: true, [$style.highlight]: highlight }">
+			{{ hint }}
+		</div>
+		<div
+			v-else
+			ref="hint"
+			:class="{ [$style.hint]: true, [$style.highlight]: highlight }"
+			v-html="sanitizeHtml(hint)"
+		></div>
 	</n8n-text>
 </template>
 
 <script lang="ts">
-import { sanitizeHtml } from "@/utils";
-import Vue from "vue";
+import { sanitizeHtml } from '@/utils';
+import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'InputHint',
@@ -26,25 +33,22 @@ export default Vue.extend({
 	methods: {
 		sanitizeHtml,
 	},
-	mounted(){
-		if(this.$refs.hint){
-			(this.$refs.hint as Element).querySelectorAll('a').forEach(a => a.target = "_blank");
+	mounted() {
+		if (this.$refs.hint) {
+			(this.$refs.hint as Element).querySelectorAll('a').forEach((a) => (a.target = '_blank'));
 		}
 	},
 });
 </script>
 
-
 <style lang="scss" module>
-	.hint {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
+.hint {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
-	.highlight {
-		color: var(--color-secondary);
-	}
+.highlight {
+	color: var(--color-secondary);
+}
 </style>
-
-
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 12a7cc6737..434eeb7519 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="parameter-input-list-wrapper">
-		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name" :class="{indent}">
+		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name" :class="{ indent }">
 			<slot v-if="indexToShowSlotAt === index" />
 
 			<div
@@ -18,9 +18,13 @@
 			</div>
 
 			<import-parameter
-					v-else-if="parameter.type === 'curlImport' && nodeTypeName === 'n8n-nodes-base.httpRequest' && nodeTypeVersion >= 3"
-					:isReadOnly="isReadOnly"
-					@valueChanged="valueChanged"
+				v-else-if="
+					parameter.type === 'curlImport' &&
+					nodeTypeName === 'n8n-nodes-base.httpRequest' &&
+					nodeTypeVersion >= 3
+				"
+				:isReadOnly="isReadOnly"
+				@valueChanged="valueChanged"
 			/>
 
 			<n8n-notice
@@ -34,7 +38,11 @@
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
 			>
-				<div class="delete-option clickable" :title="$locale.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
+				<div
+					class="delete-option clickable"
+					:title="$locale.baseText('parameterInputList.delete')"
+					v-if="hideDelete !== true && !isReadOnly"
+				>
 					<font-awesome-icon
 						icon="trash"
 						class="reset-icon clickable"
@@ -70,7 +78,11 @@
 			</div>
 
 			<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
-				<div class="delete-option clickable" :title="$locale.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
+				<div
+					class="delete-option clickable"
+					:title="$locale.baseText('parameterInputList.delete')"
+					v-if="hideDelete !== true && !isReadOnly"
+				>
 					<font-awesome-icon
 						icon="trash"
 						class="reset-icon clickable"
@@ -89,17 +101,13 @@
 				/>
 			</div>
 		</div>
-		<div
-			:class="{indent}"
-			v-if="filteredParameters.length === 0"
-		>
-			<slot/>
+		<div :class="{ indent }" v-if="filteredParameters.length === 0">
+			<slot />
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-
 import {
 	deepCopy,
 	INodeParameters,
@@ -118,227 +126,238 @@ import ImportParameter from '@/components/ImportParameter.vue';
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import {Component} from "vue";
+import { Component } from 'vue';
 import { mapState, mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 
-export default mixins(
-	workflowHelpers,
-)
-	.extend({
-		name: 'ParameterInputList',
-		components: {
-			MultipleParameter,
-			ParameterInputFull,
-			FixedCollectionParameter: () => import('./FixedCollectionParameter.vue') as Promise<Component>,
-			CollectionParameter: () => import('./CollectionParameter.vue') as Promise<Component>,
-			ImportParameter,
+export default mixins(workflowHelpers).extend({
+	name: 'ParameterInputList',
+	components: {
+		MultipleParameter,
+		ParameterInputFull,
+		FixedCollectionParameter: () => import('./FixedCollectionParameter.vue') as Promise<Component>,
+		CollectionParameter: () => import('./CollectionParameter.vue') as Promise<Component>,
+		ImportParameter,
+	},
+	props: [
+		'nodeValues', // INodeParameters
+		'parameters', // INodeProperties
+		'path', // string
+		'hideDelete', // boolean
+		'indent',
+		'isReadOnly',
+	],
+	computed: {
+		...mapStores(useNodeTypesStore, useNDVStore),
+		nodeTypeVersion(): number | null {
+			if (this.node) {
+				return this.node.typeVersion;
+			}
+			return null;
 		},
-		props: [
-			'nodeValues', // INodeParameters
-			'parameters', // INodeProperties
-			'path', // string
-			'hideDelete', // boolean
-			'indent',
-			'isReadOnly',
-		],
-		computed: {
-			...mapStores(
-				useNodeTypesStore,
-				useNDVStore,
-			),
-			nodeTypeVersion(): number | null {
-				if (this.node) {
-					return this.node.typeVersion;
-				}
-				return null;
-			},
-			nodeTypeName (): string {
-				if (this.node) {
-					return this.node.type;
-				}
-				return '';
-			},
-			filteredParameters (): INodeProperties[] {
-				return this.parameters.filter((parameter: INodeProperties) => this.displayNodeParameter(parameter));
-			},
-			filteredParameterNames (): string[] {
-				return this.filteredParameters.map(parameter => parameter.name);
-			},
-			node (): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			indexToShowSlotAt (): number {
-				let index = 0;
-				const credentialsDependencies = this.getCredentialsDependencies();
-
-				this.filteredParameters.forEach((prop, propIndex) => {
-					if (credentialsDependencies.has(prop.name)) {
-						index = propIndex + 1;
-					}
-				});
-
-				return index < this.filteredParameters.length ?
-					index : this.filteredParameters.length - 1;
-			},
+		nodeTypeName(): string {
+			if (this.node) {
+				return this.node.type;
+			}
+			return '';
 		},
-		methods: {
-			getCredentialsDependencies() {
-				const dependencies = new Set();
-				const nodeType = this.nodeTypesStore.getNodeType(this.node?.type || '', this.node?.typeVersion);
+		filteredParameters(): INodeProperties[] {
+			return this.parameters.filter((parameter: INodeProperties) =>
+				this.displayNodeParameter(parameter),
+			);
+		},
+		filteredParameterNames(): string[] {
+			return this.filteredParameters.map((parameter) => parameter.name);
+		},
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		indexToShowSlotAt(): number {
+			let index = 0;
+			const credentialsDependencies = this.getCredentialsDependencies();
 
-				// Get names of all fields that credentials rendering depends on (using displayOptions > show)
-				if(nodeType && nodeType.credentials) {
-					for(const cred of nodeType.credentials) {
-						if(cred.displayOptions && cred.displayOptions.show) {
-							Object.keys(cred.displayOptions.show).forEach(fieldName => dependencies.add(fieldName));
-						}
+			this.filteredParameters.forEach((prop, propIndex) => {
+				if (credentialsDependencies.has(prop.name)) {
+					index = propIndex + 1;
+				}
+			});
+
+			return index < this.filteredParameters.length ? index : this.filteredParameters.length - 1;
+		},
+	},
+	methods: {
+		getCredentialsDependencies() {
+			const dependencies = new Set();
+			const nodeType = this.nodeTypesStore.getNodeType(
+				this.node?.type || '',
+				this.node?.typeVersion,
+			);
+
+			// Get names of all fields that credentials rendering depends on (using displayOptions > show)
+			if (nodeType && nodeType.credentials) {
+				for (const cred of nodeType.credentials) {
+					if (cred.displayOptions && cred.displayOptions.show) {
+						Object.keys(cred.displayOptions.show).forEach((fieldName) =>
+							dependencies.add(fieldName),
+						);
 					}
 				}
-				return dependencies;
-			},
-			multipleValues (parameter: INodeProperties): boolean {
-				if (this.getArgument('multipleValues', parameter) === true) {
-					return true;
-				}
+			}
+			return dependencies;
+		},
+		multipleValues(parameter: INodeProperties): boolean {
+			if (this.getArgument('multipleValues', parameter) === true) {
+				return true;
+			}
+			return false;
+		},
+		getArgument(
+			argumentName: string,
+			parameter: INodeProperties,
+		): string | string[] | number | boolean | undefined {
+			if (parameter.typeOptions === undefined) {
+				return undefined;
+			}
+
+			if (parameter.typeOptions[argumentName] === undefined) {
+				return undefined;
+			}
+
+			return parameter.typeOptions[argumentName];
+		},
+		getPath(parameterName: string): string {
+			return (this.path ? `${this.path}.` : '') + parameterName;
+		},
+		deleteOption(optionName: string): void {
+			const parameterData = {
+				name: this.getPath(optionName),
+				value: undefined,
+			};
+
+			// TODO: If there is only one option it should delete the whole one
+
+			this.$emit('valueChanged', parameterData);
+		},
+
+		mustHideDuringCustomApiCall(parameter: INodeProperties, nodeValues: INodeParameters): boolean {
+			if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
+
+			const MUST_REMAIN_VISIBLE = [
+				'authentication',
+				'resource',
+				'operation',
+				...Object.keys(nodeValues),
+			];
+
+			return !MUST_REMAIN_VISIBLE.includes(parameter.name);
+		},
+
+		displayNodeParameter(parameter: INodeProperties): boolean {
+			if (parameter.type === 'hidden') {
 				return false;
-			},
-			getArgument (
-				argumentName: string,
-				parameter: INodeProperties,
-			): string | string[] | number | boolean | undefined{
-				if (parameter.typeOptions === undefined) {
-					return undefined;
-				}
+			}
 
-				if (parameter.typeOptions[argumentName] === undefined) {
-					return undefined;
-				}
+			if (
+				this.isCustomApiCallSelected(this.nodeValues) &&
+				this.mustHideDuringCustomApiCall(parameter, this.nodeValues)
+			) {
+				return false;
+			}
 
-				return parameter.typeOptions[argumentName];
-			},
-			getPath (parameterName: string): string {
-				return (this.path ? `${this.path}.` : '') + parameterName;
-			},
-			deleteOption (optionName: string): void {
-				const parameterData = {
-					name: this.getPath(optionName),
-					value: undefined,
-				};
+			if (parameter.displayOptions === undefined) {
+				// If it is not defined no need to do a proper check
+				return true;
+			}
 
-				// TODO: If there is only one option it should delete the whole one
+			const nodeValues: INodeParameters = {};
+			let rawValues = this.nodeValues;
+			if (this.path) {
+				rawValues = get(this.nodeValues, this.path);
+			}
 
-				this.$emit('valueChanged', parameterData);
-			},
-
-			mustHideDuringCustomApiCall (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
-				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
-
-				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
-
-				return !MUST_REMAIN_VISIBLE.includes(parameter.name);
-			},
-
-			displayNodeParameter (parameter: INodeProperties): boolean {
-				if (parameter.type === 'hidden') {
-					return false;
-				}
-
-				if (
-					this.isCustomApiCallSelected(this.nodeValues) &&
-					this.mustHideDuringCustomApiCall(parameter, this.nodeValues)
-				) {
-					return false;
-				}
-
-				if (parameter.displayOptions === undefined) {
-					// If it is not defined no need to do a proper check
-					return true;
-				}
-
-				const nodeValues: INodeParameters = {};
-				let rawValues = this.nodeValues;
-				if (this.path) {
-					rawValues = get(this.nodeValues, this.path);
-				}
-
-				// Resolve expressions
-				const resolveKeys = Object.keys(rawValues);
-				let key: string;
-				let i = 0;
-				let parameterGotResolved = false;
-				do {
-					key = resolveKeys.shift() as string;
-					if (typeof rawValues[key] === 'string' && rawValues[key].charAt(0) === '=') {
-						// Contains an expression that
-						if (rawValues[key].includes('$parameter') && resolveKeys.some(parameterName => rawValues[key].includes(parameterName))) {
-							// Contains probably an expression of a missing parameter so skip
-							resolveKeys.push(key);
-							continue;
-						} else {
-							// Contains probably no expression with a missing parameter so resolve
-							try {
-								nodeValues[key] = this.resolveExpression(rawValues[key], nodeValues) as NodeParameterValue;
-							} catch (e) {
-								// If expression is invalid ignore
-								nodeValues[key] = '';
-							}
-							parameterGotResolved = true;
+			// Resolve expressions
+			const resolveKeys = Object.keys(rawValues);
+			let key: string;
+			let i = 0;
+			let parameterGotResolved = false;
+			do {
+				key = resolveKeys.shift() as string;
+				if (typeof rawValues[key] === 'string' && rawValues[key].charAt(0) === '=') {
+					// Contains an expression that
+					if (
+						rawValues[key].includes('$parameter') &&
+						resolveKeys.some((parameterName) => rawValues[key].includes(parameterName))
+					) {
+						// Contains probably an expression of a missing parameter so skip
+						resolveKeys.push(key);
+						continue;
+					} else {
+						// Contains probably no expression with a missing parameter so resolve
+						try {
+							nodeValues[key] = this.resolveExpression(
+								rawValues[key],
+								nodeValues,
+							) as NodeParameterValue;
+						} catch (e) {
+							// If expression is invalid ignore
+							nodeValues[key] = '';
 						}
-					} else {
-						// Does not contain an expression, add directly
-						nodeValues[key] = rawValues[key];
+						parameterGotResolved = true;
 					}
-					// TODO: Think about how to calculate this best
-					if (i++ > 50) {
-						// Make sure we do not get caught
-						break;
-					}
-				} while(resolveKeys.length !== 0);
+				} else {
+					// Does not contain an expression, add directly
+					nodeValues[key] = rawValues[key];
+				}
+				// TODO: Think about how to calculate this best
+				if (i++ > 50) {
+					// Make sure we do not get caught
+					break;
+				}
+			} while (resolveKeys.length !== 0);
 
-				if (parameterGotResolved === true) {
-					if (this.path) {
-						rawValues = deepCopy(this.nodeValues);
-						set(rawValues, this.path, nodeValues);
-						return this.displayParameter(rawValues, parameter, this.path, this.node);
-					} else {
-						return this.displayParameter(nodeValues, parameter, '', this.node);
-					}
+			if (parameterGotResolved === true) {
+				if (this.path) {
+					rawValues = deepCopy(this.nodeValues);
+					set(rawValues, this.path, nodeValues);
+					return this.displayParameter(rawValues, parameter, this.path, this.node);
+				} else {
+					return this.displayParameter(nodeValues, parameter, '', this.node);
 				}
+			}
 
-				return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
-			},
-			valueChanged (parameterData: IUpdateInformation): void {
-				this.$emit('valueChanged', parameterData);
-			},
-			onNoticeAction(action: string) {
-				if (action === 'activate') {
-					this.$emit('activate');
-				}
-			},
+			return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
 		},
-		watch: {
-			filteredParameterNames(newValue, oldValue) {
-				if (newValue === undefined) {
-					return;
-				}
-				// After a parameter does not get displayed anymore make sure that its value gets removed
-				// Is only needed for the edge-case when a parameter gets displayed depending on another field
-				// which contains an expression.
-				for (const parameter of oldValue) {
-					if (!newValue.includes(parameter)) {
-						const parameterData = {
-							name: `${this.path}.${parameter}`,
-							node: this.ndvStore.activeNode?.name || '',
-							value: undefined,
-						};
-						this.$emit('valueChanged', parameterData);
-					}
-				}
-			},
+		valueChanged(parameterData: IUpdateInformation): void {
+			this.$emit('valueChanged', parameterData);
 		},
-	});
+		onNoticeAction(action: string) {
+			if (action === 'activate') {
+				this.$emit('activate');
+			}
+		},
+	},
+	watch: {
+		filteredParameterNames(newValue, oldValue) {
+			if (newValue === undefined) {
+				return;
+			}
+			// After a parameter does not get displayed anymore make sure that its value gets removed
+			// Is only needed for the edge-case when a parameter gets displayed depending on another field
+			// which contains an expression.
+			for (const parameter of oldValue) {
+				if (!newValue.includes(parameter)) {
+					const parameterData = {
+						name: `${this.path}.${parameter}`,
+						node: this.ndvStore.activeNode?.name || '',
+						value: undefined,
+					};
+					this.$emit('valueChanged', parameterData);
+				}
+			}
+		},
+	},
+});
 </script>
 
 <style lang="scss">
@@ -377,7 +396,7 @@ export default mixins(
 		position: relative;
 		margin: var(--spacing-xs) 0;
 
-		>.delete-option {
+		> .delete-option {
 			top: var(--spacing-5xs);
 			left: 0;
 		}
@@ -398,5 +417,4 @@ export default mixins(
 		}
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 2bc3da2abd..f737e535be 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,30 +1,40 @@
 <template>
 	<div>
 		<parameter-input
-				ref="param"
-				:inputSize="inputSize"
-				:parameter="parameter"
-				:value="value"
-				:path="path"
-				:isReadOnly="isReadOnly"
-				:droppable="droppable"
-				:activeDrop="activeDrop"
-				:forceShowExpression="forceShowExpression"
-				:hideIssues="hideIssues"
-				:documentationUrl="documentationUrl"
-				:errorHighlight="errorHighlight"
-				:isForCredential="isForCredential"
-				:eventSource="eventSource"
-				:expressionEvaluated="expressionValueComputed"
-				@focus="onFocus"
-				@blur="onBlur"
-				@drop="onDrop"
-				@textInput="onTextInput"
-				@valueChanged="onValueChanged"
-				:data-test-id="`parameter-input-${parameter.name}`"
-			/>
-		<input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" />
-		<input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
+			ref="param"
+			:inputSize="inputSize"
+			:parameter="parameter"
+			:value="value"
+			:path="path"
+			:isReadOnly="isReadOnly"
+			:droppable="droppable"
+			:activeDrop="activeDrop"
+			:forceShowExpression="forceShowExpression"
+			:hideIssues="hideIssues"
+			:documentationUrl="documentationUrl"
+			:errorHighlight="errorHighlight"
+			:isForCredential="isForCredential"
+			:eventSource="eventSource"
+			:expressionEvaluated="expressionValueComputed"
+			@focus="onFocus"
+			@blur="onBlur"
+			@drop="onDrop"
+			@textInput="onTextInput"
+			@valueChanged="onValueChanged"
+			:data-test-id="`parameter-input-${parameter.name}`"
+		/>
+		<input-hint
+			v-if="expressionOutput"
+			:class="$style.hint"
+			:highlight="!!(expressionOutput && targetItem)"
+			:hint="expressionOutput"
+		/>
+		<input-hint
+			v-else-if="parameterHint"
+			:class="$style.hint"
+			:renderHTML="true"
+			:hint="parameterHint"
+		/>
 	</div>
 </template>
 
@@ -35,164 +45,174 @@ import ParameterInput from '@/components/ParameterInput.vue';
 import InputHint from './ParameterInputHint.vue';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
-import { INodeProperties, INodePropertyMode, IRunData, isResourceLocatorValue, NodeParameterValue, NodeParameterValueType } from 'n8n-workflow';
+import {
+	INodeProperties,
+	INodePropertyMode,
+	IRunData,
+	isResourceLocatorValue,
+	NodeParameterValue,
+	NodeParameterValueType,
+} from 'n8n-workflow';
 import { INodeUi, IUiState, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { isValueExpression } from '@/utils';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 
-export default mixins(
-	showMessage,
-	workflowHelpers,
-)
-	.extend({
-		name: 'parameter-input-wrapper',
-		components: {
-			ParameterInput,
-			InputHint,
+export default mixins(showMessage, workflowHelpers).extend({
+	name: 'parameter-input-wrapper',
+	components: {
+		ParameterInput,
+		InputHint,
+	},
+	mounted() {
+		this.$on('optionSelected', this.optionSelected);
+	},
+	props: {
+		isReadOnly: {
+			type: Boolean,
 		},
-		mounted() {
-			this.$on('optionSelected', this.optionSelected);
+		parameter: {
+			type: Object as PropType<INodeProperties>,
 		},
-		props: {
-			isReadOnly: {
-				type: Boolean,
-			},
-			parameter: {
-				type: Object as PropType<INodeProperties>,
-			},
-			path: {
-				type: String,
-			},
-			value: {
-				type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
-			},
-			droppable: {
-				type: Boolean,
-			},
-			activeDrop: {
-				type: Boolean,
-			},
-			forceShowExpression: {
-				type: Boolean,
-			},
-			hint: {
-				type: String,
-				required: false,
-			},
-			inputSize: {
-				type: String,
-			},
-			hideIssues: {
-				type: Boolean,
-			},
-			documentationUrl: {
-				type: String as PropType<string | undefined>,
-			},
-			errorHighlight: {
-				type: Boolean,
-			},
-			isForCredential: {
-				type: Boolean,
-			},
-			eventSource: {
-				type: String,
-			},
+		path: {
+			type: String,
 		},
-		computed: {
-			...mapStores(
-				useNDVStore,
-			),
-			isValueExpression () {
-				return isValueExpression(this.parameter, this.value);
-			},
-			activeNode(): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			selectedRLMode(): INodePropertyMode | undefined {
-				if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) {
-					return undefined;
-				}
-
-				const mode = this.value.mode;
-				if (mode) {
-					return this.parameter.modes?.find((m: INodePropertyMode) => m.name === mode);
-				}
-
+		value: {
+			type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
+		},
+		droppable: {
+			type: Boolean,
+		},
+		activeDrop: {
+			type: Boolean,
+		},
+		forceShowExpression: {
+			type: Boolean,
+		},
+		hint: {
+			type: String,
+			required: false,
+		},
+		inputSize: {
+			type: String,
+		},
+		hideIssues: {
+			type: Boolean,
+		},
+		documentationUrl: {
+			type: String as PropType<string | undefined>,
+		},
+		errorHighlight: {
+			type: Boolean,
+		},
+		isForCredential: {
+			type: Boolean,
+		},
+		eventSource: {
+			type: String,
+		},
+	},
+	computed: {
+		...mapStores(useNDVStore),
+		isValueExpression() {
+			return isValueExpression(this.parameter, this.value);
+		},
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		selectedRLMode(): INodePropertyMode | undefined {
+			if (
+				typeof this.value !== 'object' ||
+				this.parameter.type !== 'resourceLocator' ||
+				!isResourceLocatorValue(this.value)
+			) {
 				return undefined;
-			},
-			parameterHint(): string | undefined {
-				if (this.isValueExpression) {
-					return undefined;
-				}
-				if (this.selectedRLMode && this.selectedRLMode.hint) {
-					return this.selectedRLMode.hint;
-				}
+			}
 
-				return this.hint;
-			},
-			targetItem(): TargetItem | null {
-				return this.ndvStore.hoveringItem;
-			},
-			expressionValueComputed (): string | null {
-				const inputNodeName: string | undefined = this.ndvStore.ndvInputNodeName;
-				const value = isResourceLocatorValue(this.value)? this.value.value: this.value;
-				if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
+			const mode = this.value.mode;
+			if (mode) {
+				return this.parameter.modes?.find((m: INodePropertyMode) => m.name === mode);
+			}
+
+			return undefined;
+		},
+		parameterHint(): string | undefined {
+			if (this.isValueExpression) {
+				return undefined;
+			}
+			if (this.selectedRLMode && this.selectedRLMode.hint) {
+				return this.selectedRLMode.hint;
+			}
+
+			return this.hint;
+		},
+		targetItem(): TargetItem | null {
+			return this.ndvStore.hoveringItem;
+		},
+		expressionValueComputed(): string | null {
+			const inputNodeName: string | undefined = this.ndvStore.ndvInputNodeName;
+			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
+			if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
+				return null;
+			}
+
+			const inputRunIndex: number | undefined = this.ndvStore.ndvInputRunIndex;
+			const inputBranchIndex: number | undefined = this.ndvStore.ndvInputBranchIndex;
+
+			let computedValue: NodeParameterValue;
+			try {
+				const targetItem = this.targetItem ?? undefined;
+				computedValue = this.resolveExpression(value, undefined, {
+					targetItem,
+					inputNodeName,
+					inputRunIndex,
+					inputBranchIndex,
+				});
+				if (computedValue === null) {
 					return null;
 				}
 
-				const inputRunIndex: number | undefined = this.ndvStore.ndvInputRunIndex;
-				const inputBranchIndex: number | undefined = this.ndvStore.ndvInputBranchIndex;
-
-				let computedValue: NodeParameterValue;
-				try {
-					const targetItem = this.targetItem ?? undefined;
-					computedValue = this.resolveExpression(value, undefined, {targetItem, inputNodeName, inputRunIndex, inputBranchIndex});
-					if (computedValue === null) {
-						return null;
-					}
-
-					if (typeof computedValue === 'string' && computedValue.trim().length === 0) {
-						computedValue = this.$locale.baseText('parameterInput.emptyString');
-					}
-				} catch (error) {
-					computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
+				if (typeof computedValue === 'string' && computedValue.trim().length === 0) {
+					computedValue = this.$locale.baseText('parameterInput.emptyString');
 				}
+			} catch (error) {
+				computedValue = `[${this.$locale.baseText('parameterInput.error')}: ${error.message}]`;
+			}
 
-				return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
-			},
-			expressionOutput(): string | null {
-				if (this.isValueExpression && this.expressionValueComputed) {
-					return this.expressionValueComputed;
-				}
-
-				return null;
-			},
+			return typeof computedValue === 'string' ? computedValue : JSON.stringify(computedValue);
 		},
-		methods: {
-			onFocus() {
-				this.$emit('focus');
-			},
-			onBlur() {
-				this.$emit('blur');
-			},
-			onDrop(data: string) {
-				this.$emit('drop', data);
-			},
-			optionSelected(command: string) {
-				if (this.$refs.param) {
-					(this.$refs.param as Vue).$emit('optionSelected', command);
-				}
-			},
-			onValueChanged(parameterData: IUpdateInformation) {
-				this.$emit('valueChanged', parameterData);
-			},
-			onTextInput(parameterData: IUpdateInformation) {
-				this.$emit('textInput', parameterData);
-			},
+		expressionOutput(): string | null {
+			if (this.isValueExpression && this.expressionValueComputed) {
+				return this.expressionValueComputed;
+			}
+
+			return null;
 		},
-	});
+	},
+	methods: {
+		onFocus() {
+			this.$emit('focus');
+		},
+		onBlur() {
+			this.$emit('blur');
+		},
+		onDrop(data: string) {
+			this.$emit('drop', data);
+		},
+		optionSelected(command: string) {
+			if (this.$refs.param) {
+				(this.$refs.param as Vue).$emit('optionSelected', command);
+			}
+		},
+		onValueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+		onTextInput(parameterData: IUpdateInformation) {
+			this.$emit('textInput', parameterData);
+		},
+	},
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index e7dd869374..0cf6a7e907 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style['parameter-issues']" v-if="issues.length">
-		<n8n-tooltip placement="top" >
+		<n8n-tooltip placement="top">
 			<template #content>
 				<titled-list :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
 			</template>
@@ -18,9 +18,7 @@ export default Vue.extend({
 	components: {
 		TitledList,
 	},
-	props: [
-		'issues',
-	],
+	props: ['issues'],
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 1a6534c606..a48ac0365e 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -17,8 +17,8 @@
 			:disabled="isReadOnly"
 			@input="onViewSelected"
 			:options="[
-				{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed'},
-				{ label: $locale.baseText('parameterInput.expression'), value: 'expression'},
+				{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
+				{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
 			]"
 		/>
 	</div>
@@ -51,13 +51,13 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		isDefault (): boolean {
+		isDefault(): boolean {
 			return this.parameter.default === this.value;
 		},
 		isValueExpression(): boolean {
 			return isValueExpression(this.parameter, this.value);
 		},
-		shouldShowOptions (): boolean {
+		shouldShowOptions(): boolean {
 			if (this.isReadOnly === true) {
 				return false;
 			}
@@ -80,17 +80,17 @@ export default Vue.extend({
 
 			return false;
 		},
-		selectedView () {
+		selectedView() {
 			if (this.isValueExpression) {
 				return 'expression';
 			}
 
 			return 'fixed';
 		},
-		hasRemoteMethod (): boolean {
+		hasRemoteMethod(): boolean {
 			return !!this.getArgument('loadOptionsMethod') || !!this.getArgument('loadOptions');
 		},
-		actions (): Array<{label: string, value: string, disabled?: boolean}> {
+		actions(): Array<{ label: string; value: string; disabled?: boolean }> {
 			const actions = [
 				{
 					label: this.$locale.baseText('parameterInput.resetValue'),
@@ -99,7 +99,12 @@ export default Vue.extend({
 				},
 			];
 
-			if (this.hasRemoteMethod || (this.parameter.type === 'resourceLocator' && isResourceLocatorValue(this.value) && this.value.mode === 'list')) {
+			if (
+				this.hasRemoteMethod ||
+				(this.parameter.type === 'resourceLocator' &&
+					isResourceLocatorValue(this.value) &&
+					this.value.mode === 'list')
+			) {
 				return [
 					{
 						label: this.$locale.baseText('parameterInput.refreshList'),
@@ -117,15 +122,15 @@ export default Vue.extend({
 			this.$emit('menu-expanded', visible);
 		},
 		onViewSelected(selected: string) {
-			if (selected === 'expression' ) {
-				this.$emit('optionSelected', this.isValueExpression? 'openExpression': 'addExpression');
+			if (selected === 'expression') {
+				this.$emit('optionSelected', this.isValueExpression ? 'openExpression' : 'addExpression');
 			}
 
 			if (selected === 'fixed' && this.isValueExpression) {
 				this.$emit('optionSelected', 'removeExpression');
 			}
 		},
-		getArgument (argumentName: string): string | number | boolean | undefined {
+		getArgument(argumentName: string): string | number | boolean | undefined {
 			if (this.parameter.typeOptions === undefined) {
 				return undefined;
 			}
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 494349fce3..52200ccb2e 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -22,7 +22,12 @@
 				<n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
 			</div>
 			<div :class="$style.container" v-else>
-				<n8n-form-inputs :inputs="survey" :columnView="true" :eventBus="formBus" @submit="onSubmit"/>
+				<n8n-form-inputs
+					:inputs="survey"
+					:columnView="true"
+					:eventBus="formBus"
+					@submit="onSubmit"
+				/>
 			</div>
 		</template>
 		<template #footer>
@@ -116,7 +121,12 @@ import {
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { showMessage } from '@/mixins/showMessage';
 import Modal from './Modal.vue';
-import { IFormInputs, IPersonalizationLatestVersion, IPersonalizationSurveyAnswersV3, IUser } from '@/Interface';
+import {
+	IFormInputs,
+	IPersonalizationLatestVersion,
+	IPersonalizationSurveyAnswersV3,
+	IUser,
+} from '@/Interface';
 import Vue from 'vue';
 import { getAccountAge } from '@/utils';
 import { GenericValue } from 'n8n-workflow';
@@ -142,12 +152,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUIStore, useUsersStore),
 		survey() {
 			const survey: IFormInputs = [
 				{
@@ -266,8 +271,14 @@ export default mixins(showMessage, workflowHelpers).extend({
 					},
 					shouldDisplay(values): boolean {
 						const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
-						const companyIndustry = (values as IPersonalizationLatestVersion)[COMPANY_INDUSTRY_EXTENDED_KEY];
-						return companyType === OTHER_COMPANY_TYPE && !!companyIndustry && companyIndustry.includes(OTHER_INDUSTRY_OPTION);
+						const companyIndustry = (values as IPersonalizationLatestVersion)[
+							COMPANY_INDUSTRY_EXTENDED_KEY
+						];
+						return (
+							companyType === OTHER_COMPANY_TYPE &&
+							!!companyIndustry &&
+							companyIndustry.includes(OTHER_INDUSTRY_OPTION)
+						);
 					},
 				},
 				{
@@ -336,7 +347,9 @@ export default mixins(showMessage, workflowHelpers).extend({
 					shouldDisplay(values): boolean {
 						const companyType = (values as IPersonalizationLatestVersion)[COMPANY_TYPE_KEY];
 						const automationGoal = (values as IPersonalizationLatestVersion)[AUTOMATION_GOAL_KEY];
-						return companyType !== PERSONAL_COMPANY_TYPE && automationGoal === OTHER_AUTOMATION_GOAL;
+						return (
+							companyType !== PERSONAL_COMPANY_TYPE && automationGoal === OTHER_AUTOMATION_GOAL
+						);
 					},
 				},
 				{
@@ -384,7 +397,9 @@ export default mixins(showMessage, workflowHelpers).extend({
 				{
 					name: OTHER_MARKETING_AUTOMATION_GOAL_KEY,
 					properties: {
-						placeholder: this.$locale.baseText('personalizationModal.specifyOtherSalesAndMarketingGoal'),
+						placeholder: this.$locale.baseText(
+							'personalizationModal.specifyOtherSalesAndMarketingGoal',
+						),
 					},
 					shouldDisplay(values): boolean {
 						const goals = (values as IPersonalizationLatestVersion)[MARKETING_AUTOMATION_GOAL_KEY];
@@ -476,7 +491,9 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 				this.$externalHooks().run('personalizationModal.onSubmit', survey);
 
-				await this.usersStore.submitPersonalizationSurvey(survey as IPersonalizationSurveyAnswersV3);
+				await this.usersStore.submitPersonalizationSurvey(
+					survey as IPersonalizationSurveyAnswersV3,
+				);
 
 				if (Object.keys(values).length === 0) {
 					this.closeDialog();
@@ -491,9 +508,13 @@ export default mixins(showMessage, workflowHelpers).extend({
 			this.$data.isSaving = false;
 		},
 		async fetchOnboardingPrompt() {
-			if (this.settingsStore.onboardingCallPromptEnabled && getAccountAge(this.usersStore.currentUser || {} as IUser) <= ONBOARDING_PROMPT_TIMEBOX) {
+			if (
+				this.settingsStore.onboardingCallPromptEnabled &&
+				getAccountAge(this.usersStore.currentUser || ({} as IUser)) <= ONBOARDING_PROMPT_TIMEBOX
+			) {
 				const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
-				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
+				const promptTimeout =
+					onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
 
 				if (onboardingResponse.title && onboardingResponse.description) {
 					setTimeout(async () => {
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index 348f6d0609..7a8fea9e16 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -1,12 +1,13 @@
 <template>
 	<span>
 		<div class="push-connection-lost primary-color" v-if="!rootStore.pushConnectionActive">
-			<n8n-tooltip placement="bottom-end" >
+			<n8n-tooltip placement="bottom-end">
 				<template #current>
 					<div v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
 				</template>
 				<span>
-					<font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $locale.baseText('pushConnectionTracker.connectionLost') }}
+					<font-awesome-icon icon="exclamation-triangle" />&nbsp;
+					{{ $locale.baseText('pushConnectionTracker.connectionLost') }}
 				</span>
 			</n8n-tooltip>
 		</div>
@@ -15,16 +16,14 @@
 </template>
 
 <script lang="ts">
-import { useRootStore } from "@/stores/n8nRootStore";
-import { mapStores } from "pinia";
-import Vue from "vue";
+import { useRootStore } from '@/stores/n8nRootStore';
+import { mapStores } from 'pinia';
+import Vue from 'vue';
 
 export default Vue.extend({
-	name: "PushConnectionTracker",
+	name: 'PushConnectionTracker',
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 94b9ede7df..ccccc0b206 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="resource-locator" ref="container">
 		<resource-locator-dropdown
-			:value="value ? value.value: ''"
+			:value="value ? value.value : ''"
 			:show="showResourceDropdown"
 			:filterable="isSearchable"
 			:filterRequired="requiresSearchFilter"
@@ -90,7 +90,7 @@
 								/>
 								<n8n-input
 									v-else
-									:class="{[$style.selectInput]: isListMode}"
+									:class="{ [$style.selectInput]: isListMode }"
 									:size="inputSize"
 									:value="valueToDisplay"
 									:disabled="isReadOnly"
@@ -122,14 +122,8 @@
 						:issues="parameterIssues"
 					/>
 					<div v-else-if="urlValue" :class="$style.openResourceLink">
-						<n8n-link
-							theme="text"
-							@click.stop="openResource(urlValue)"
-							>
-							<font-awesome-icon
-								icon="external-link-alt"
-								:title="getLinkAlt(valueToDisplay)"
-							/>
+						<n8n-link theme="text" @click.stop="openResource(urlValue)">
+							<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
 						</n8n-link>
 					</div>
 				</div>
@@ -193,7 +187,9 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			required: true,
 		},
 		value: {
-			type: [Object, String] as PropType<INodeParameterResourceLocator | NodeParameterValue | undefined>,
+			type: [Object, String] as PropType<
+				INodeParameterResourceLocator | NodeParameterValue | undefined
+			>,
 		},
 		inputSize: {
 			type: String,
@@ -255,13 +251,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useRootStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
 		appName(): string {
 			if (!this.node) {
 				return '';
@@ -271,12 +261,13 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			return getAppNameFromNodeName(nodeType?.displayName || '');
 		},
 		selectedMode(): string {
-			if (typeof this.value !== 'object') { // legacy mode
+			if (typeof this.value !== 'object') {
+				// legacy mode
 				return '';
 			}
 
 			if (!this.value) {
-				return this.parameter.modes? this.parameter.modes[0].name : '';
+				return this.parameter.modes ? this.parameter.modes[0].name : '';
 			}
 
 			return this.value.mode;
@@ -318,7 +309,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			}
 
 			if (this.isListMode) {
-				return this.value? (this.value.cachedResultName || this.value.value) : '';
+				return this.value ? this.value.cachedResultName || this.value.value : '';
 			}
 
 			return this.value ? this.value.value : '';
@@ -329,7 +320,11 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			}
 
 			if (this.selectedMode === 'url') {
-				if (this.isValueExpression && typeof this.expressionComputedValue === 'string' && this.expressionComputedValue.startsWith('http')) {
+				if (
+					this.isValueExpression &&
+					typeof this.expressionComputedValue === 'string' &&
+					this.expressionComputedValue.startsWith('http')
+				) {
 					return this.expressionComputedValue;
 				}
 
@@ -339,7 +334,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			}
 
 			if (this.currentMode.url) {
-				const value = this.isValueExpression? this.expressionComputedValue : this.valueToDisplay;
+				const value = this.isValueExpression ? this.expressionComputedValue : this.valueToDisplay;
 				if (typeof value === 'string') {
 					const expression = this.currentMode.url.replace(/\{\{\$value\}\}/g, value);
 					const resolved = this.resolveExpression(expression);
@@ -354,7 +349,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			parameters: INodeParameters;
 			credentials: INodeCredentials | undefined;
 			filter: string;
-			} {
+		} {
 			return {
 				parameters: this.node.parameters,
 				credentials: this.node.credentials,
@@ -362,14 +357,17 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			};
 		},
 		currentRequestKey(): string {
-			const cacheKeys = {...this.currentRequestParams};
-			cacheKeys.parameters = Object.keys(this.node ? this.node.parameters : {}).reduce((accu: INodeParameters, param) => {
-				if (param !== this.parameter.name && this.node && this.node.parameters) {
-					accu[param] = this.node.parameters[param];
-				}
+			const cacheKeys = { ...this.currentRequestParams };
+			cacheKeys.parameters = Object.keys(this.node ? this.node.parameters : {}).reduce(
+				(accu: INodeParameters, param) => {
+					if (param !== this.parameter.name && this.node && this.node.parameters) {
+						accu[param] = this.node.parameters[param];
+					}
 
-				return accu;
-			}, {});
+					return accu;
+				},
+				{},
+			);
 			return stringify(cacheKeys);
 		},
 		currentResponse(): IResourceLocatorQuery | null {
@@ -378,12 +376,12 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 		currentQueryResults(): IResourceLocatorResultExpanded[] {
 			const results = this.currentResponse ? this.currentResponse.results : [];
 
-			return results.map((result: INodeListSearchItems): IResourceLocatorResultExpanded => ({
-				...result,
-				...(
-					(result.name && result.url)? { linkAlt: this.getLinkAlt(result.name) } : {}
-				),
-			}));
+			return results.map(
+				(result: INodeListSearchItems): IResourceLocatorResultExpanded => ({
+					...result,
+					...(result.name && result.url ? { linkAlt: this.getLinkAlt(result.name) } : {}),
+				}),
+			);
 		},
 		currentQueryHasMore(): boolean {
 			return !!(this.currentResponse && this.currentResponse.nextPageToken);
@@ -422,8 +420,13 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			}
 		},
 		currentMode(mode: INodePropertyMode) {
-			if (mode.extractValue && mode.extractValue.regex && isResourceLocatorValue(this.value) && this.value.__regex !== mode.extractValue.regex) {
-				this.$emit('input', {...this.value, __regex: mode.extractValue.regex});
+			if (
+				mode.extractValue &&
+				mode.extractValue.regex &&
+				isResourceLocatorValue(this.value) &&
+				this.value.__regex !== mode.extractValue.regex
+			) {
+				this.$emit('input', { ...this.value, __regex: mode.extractValue.regex });
 			}
 		},
 	},
@@ -447,9 +450,13 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 		},
 		getLinkAlt(entity: string) {
 			if (this.selectedMode === 'list' && entity) {
-				return this.$locale.baseText('resourceLocator.openSpecificResource', { interpolate: { entity, appName: this.appName } });
+				return this.$locale.baseText('resourceLocator.openSpecificResource', {
+					interpolate: { entity, appName: this.appName },
+				});
 			}
-			return this.$locale.baseText('resourceLocator.openResource', { interpolate: { appName: this.appName } });
+			return this.$locale.baseText('resourceLocator.openResource', {
+				interpolate: { appName: this.appName },
+			});
 		},
 		refreshList() {
 			this.cachedResponses = {};
@@ -533,7 +540,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 
 			this.trackEvent('User changed resource locator mode', { mode: value });
 		},
-		trackEvent(event: string, params?: {[key: string]: string}): void {
+		trackEvent(event: string, params?: { [key: string]: string }): void {
 			this.$telemetry.track(event, {
 				instance_id: this.rootStore.instanceId,
 				workflow_id: this.workflowsStore.workflowId,
@@ -656,7 +663,11 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 				}
 
 				if (mode) {
-					this.$emit('input', { __rl: true, value: ((this.value && typeof this.value === 'object')? this.value.value: ''), mode: mode.name });
+					this.$emit('input', {
+						__rl: true,
+						value: this.value && typeof this.value === 'object' ? this.value.value : '',
+						mode: mode.name,
+					});
 				}
 			}
 		},
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index 7ef3dd86f1..10cc685646 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -10,7 +10,15 @@
 			<slot name="error"></slot>
 		</div>
 		<div :class="$style.searchInput" v-if="filterable && !errorView" @keydown="onKeyDown">
-			<n8n-input size="medium" :value="filter" :clearable="true" @input="onFilterInput" @blur="onSearchBlur" ref="search" :placeholder="$locale.baseText('resourceLocator.search.placeholder')">
+			<n8n-input
+				size="medium"
+				:value="filter"
+				:clearable="true"
+				@input="onFilterInput"
+				@blur="onSearchBlur"
+				ref="search"
+				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
+			>
 				<template #prefix>
 					<font-awesome-icon :class="$style.searchIcon" icon="search" />
 				</template>
@@ -19,14 +27,26 @@
 		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
 			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
 		</div>
-		<div :class="$style.messageContainer" v-else-if="!errorView && sortedResources.length === 0 && !loading">
+		<div
+			:class="$style.messageContainer"
+			v-else-if="!errorView && sortedResources.length === 0 && !loading"
+		>
 			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
 		</div>
-		<div v-else-if="!errorView" ref="resultsContainer" :class="{[$style.container]: true, [$style.pushDownResults]: filterable}" @scroll="onResultsEnd">
+		<div
+			v-else-if="!errorView"
+			ref="resultsContainer"
+			:class="{ [$style.container]: true, [$style.pushDownResults]: filterable }"
+			@scroll="onResultsEnd"
+		>
 			<div
 				v-for="(result, i) in sortedResources"
 				:key="result.value"
-				:class="{ [$style.resourceItem]: true, [$style.selected]: result.value === value, [$style.hovering]: hoverIndex === i }"
+				:class="{
+					[$style.resourceItem]: true,
+					[$style.selected]: result.value === value,
+					[$style.hovering]: hoverIndex === i,
+				}"
 				@click="() => onItemClick(result.value)"
 				@mouseenter="() => onItemHover(i)"
 				@mouseleave="() => onItemHoverLeave()"
@@ -51,7 +71,7 @@
 			</div>
 		</div>
 		<template #reference>
-    		<slot />
+			<slot />
 		</template>
 	</n8n-popover>
 </template>
@@ -110,33 +130,36 @@ export default Vue.extend({
 	computed: {
 		sortedResources(): IResourceLocatorResultExpanded[] {
 			const seen = new Set();
-			const { selected, notSelected } = this.resources.reduce((acc, item: IResourceLocatorResultExpanded) => {
-				if (seen.has(item.value)) {
+			const { selected, notSelected } = this.resources.reduce(
+				(acc, item: IResourceLocatorResultExpanded) => {
+					if (seen.has(item.value)) {
+						return acc;
+					}
+					seen.add(item.value);
+
+					if (this.value && item.value === this.value) {
+						acc.selected = item;
+					} else {
+						acc.notSelected.push(item);
+					}
+
 					return acc;
-				}
-				seen.add(item.value);
-
-				if (this.value && item.value === this.value) {
-					acc.selected = item;
-				} else {
-					acc.notSelected.push(item);
-				}
-
-				return acc;
-			}, { selected: null as IResourceLocatorResultExpanded | null, notSelected: [] as IResourceLocatorResultExpanded[] });
+				},
+				{
+					selected: null as IResourceLocatorResultExpanded | null,
+					notSelected: [] as IResourceLocatorResultExpanded[],
+				},
+			);
 
 			if (selected) {
-				return [
-					selected,
-					...notSelected,
-				];
+				return [selected, ...notSelected];
 			}
 
 			return notSelected;
 		},
 	},
 	methods: {
-		openUrl(event: MouseEvent ,url: string) {
+		openUrl(event: MouseEvent, url: string) {
 			event.preventDefault();
 			event.stopPropagation();
 
@@ -152,14 +175,13 @@ export default Vue.extend({
 					const items = this.$refs[`item-${this.hoverIndex}`] as HTMLElement[];
 					if (container && Array.isArray(items) && items.length === 1) {
 						const item = items[0];
-						if ((item.offsetTop + item.clientHeight) > (container.scrollTop + container.offsetHeight)) {
+						if (item.offsetTop + item.clientHeight > container.scrollTop + container.offsetHeight) {
 							const top = item.offsetTop - container.offsetHeight + item.clientHeight;
 							container.scrollTo({ top });
 						}
 					}
 				}
-			}
-			else if (e.key === 'ArrowUp') {
+			} else if (e.key === 'ArrowUp') {
 				if (this.hoverIndex > 0) {
 					this.hoverIndex--;
 
@@ -172,11 +194,9 @@ export default Vue.extend({
 						}
 					}
 				}
-			}
-			else if (e.key === 'Enter') {
+			} else if (e.key === 'Enter') {
 				this.$emit('input', this.sortedResources[this.hoverIndex].value);
 			}
-
 		},
 		onFilterInput(value: string) {
 			this.$emit('filter', value);
@@ -207,7 +227,7 @@ export default Vue.extend({
 			const container = this.$refs.resultsContainer as HTMLElement;
 			if (container) {
 				const diff = container.offsetHeight - (container.scrollHeight - container.scrollTop);
-				if (diff > -(SCROLL_MARGIN_PX)  && diff < SCROLL_MARGIN_PX) {
+				if (diff > -SCROLL_MARGIN_PX && diff < SCROLL_MARGIN_PX) {
 					this.$emit('loadMore');
 				}
 			}
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index bda269b2db..0671518e92 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -32,14 +32,27 @@
 			</template>
 		</n8n-callout>
 
-		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
+		<BinaryDataDisplay
+			:windowVisible="binaryDataDisplayVisible"
+			:displayData="binaryDataDisplayData"
+			@close="closeBinaryDataDisplay"
+		/>
 
 		<div :class="$style.header">
 			<slot name="header"></slot>
 
-			<div v-show="!hasRunError" @click.stop :class="$style.displayModes" data-test-id="run-data-pane-header">
+			<div
+				v-show="!hasRunError"
+				@click.stop
+				:class="$style.displayModes"
+				data-test-id="run-data-pane-header"
+			>
 				<n8n-radio-buttons
-					v-show="hasNodeRun && ((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0)) && !editMode.enabled"
+					v-show="
+						hasNodeRun &&
+						((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0)) &&
+						!editMode.enabled
+					"
 					:value="displayMode"
 					:options="buttons"
 					@input="onDisplayModeChange"
@@ -58,7 +71,7 @@
 				/>
 				<n8n-tooltip
 					placement="bottom-end"
-					v-if="canPinData && (jsonData && jsonData.length > 0)"
+					v-if="canPinData && jsonData && jsonData.length > 0"
 					v-show="!editMode.enabled"
 					:value="pinDataDiscoveryTooltipVisible"
 					:manual="isControlledPinDataTooltip"
@@ -107,14 +120,35 @@
 		</div>
 
 		<div :class="$style.runSelector" v-if="maxRunIndex > 0" v-show="!editMode.enabled">
-			<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop popper-append-to-body>
+			<n8n-select
+				size="small"
+				:value="runIndex"
+				@input="onRunIndexChange"
+				@click.stop
+				popper-append-to-body
+			>
 				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
-				<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
+				<n8n-option
+					v-for="option in maxRunIndex + 1"
+					:label="getRunLabel(option)"
+					:value="option - 1"
+					:key="option"
+				></n8n-option>
 			</n8n-select>
 
-
-			<n8n-tooltip placement="right" v-if="canLinkRuns" :content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint': 'runData.linking.hint')">
-				<n8n-icon-button v-if="linkedRuns" icon="unlink" text type="tertiary" size="small" @click="unlinkRun" />
+			<n8n-tooltip
+				placement="right"
+				v-if="canLinkRuns"
+				:content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint')"
+			>
+				<n8n-icon-button
+					v-if="linkedRuns"
+					icon="unlink"
+					text
+					type="tertiary"
+					size="small"
+					@click="unlinkRun"
+				/>
 				<n8n-icon-button v-else icon="link" text type="tertiary" size="small" @click="linkRun" />
 			</n8n-tooltip>
 
@@ -125,17 +159,17 @@
 			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
 		</div>
 
-		<div v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0" v-show="!editMode.enabled" :class="$style.itemsCount">
+		<div
+			v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0"
+			v-show="!editMode.enabled"
+			:class="$style.itemsCount"
+		>
 			<n8n-text>
-				{{ dataCount }} {{ $locale.baseText('ndv.output.items', {adjustToNumber: dataCount}) }}
+				{{ dataCount }} {{ $locale.baseText('ndv.output.items', { adjustToNumber: dataCount }) }}
 			</n8n-text>
 		</div>
 
-		<div
-			:class="$style['data-container']"
-			ref="dataContainer"
-			data-test-id="ndv-data-container"
-		>
+		<div :class="$style['data-container']" ref="dataContainer" data-test-id="ndv-data-container">
 			<div v-if="isExecuting" :class="$style.center">
 				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
 				<n8n-text>{{ executingMessage }}</n8n-text>
@@ -160,7 +194,10 @@
 				</div>
 			</div>
 
-			<div v-else-if="paneType === 'output' && hasSubworkflowExecutionError" :class="$style.stretchVertically">
+			<div
+				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
+				:class="$style.stretchVertically"
+			>
 				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
 			</div>
 
@@ -179,15 +216,26 @@
 
 			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
 				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
-					{{ $locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', { interpolate: { nodeName: node.name } }) }}
+					{{
+						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
+							interpolate: { nodeName: node.name },
+						})
+					}}
 					<n8n-link @click="goToErroredNode">
 						{{ $locale.baseText('nodeErrorView.inputPanel.previousNodeError.text') }}
 					</n8n-link>
 				</n8n-text>
-				<NodeErrorView v-else :error="workflowRunData[node.name][runIndex].error" :class="$style.dataDisplay" />
+				<NodeErrorView
+					v-else
+					:error="workflowRunData[node.name][runIndex].error"
+					:class="$style.dataDisplay"
+				/>
 			</div>
 
-			<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0 && branches.length > 1" :class="$style.center">
+			<div
+				v-else-if="hasNodeRun && jsonData && jsonData.length === 0 && branches.length > 1"
+				:class="$style.center"
+			>
 				<n8n-text>
 					{{ noDataInBranchMessage }}
 				</n8n-text>
@@ -199,7 +247,15 @@
 
 			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
 				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
-				<n8n-text align="center" tag="div"><span v-html="$locale.baseText('ndv.output.tooMuchData.message', { interpolate: {size: dataSizeInMB }})"></span></n8n-text>
+				<n8n-text align="center" tag="div"
+					><span
+						v-html="
+							$locale.baseText('ndv.output.tooMuchData.message', {
+								interpolate: { size: dataSizeInMB },
+							})
+						"
+					></span
+				></n8n-text>
 
 				<n8n-button
 					outline
@@ -208,7 +264,16 @@
 				/>
 			</div>
 
-			<div v-else-if="hasNodeRun && displayMode === 'table' && binaryData.length > 0 && jsonData.length === 1 && Object.keys(jsonData[0] || {}).length === 0" :class="$style.center">
+			<div
+				v-else-if="
+					hasNodeRun &&
+					displayMode === 'table' &&
+					binaryData.length > 0 &&
+					jsonData.length === 1 &&
+					Object.keys(jsonData[0] || {}).length === 0
+				"
+				:class="$style.center"
+			>
 				<n8n-text>
 					{{ $locale.baseText('runData.switchToBinary.info') }}
 					<a @click="switchToBinary">
@@ -260,47 +325,86 @@
 			/>
 
 			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
-				<n8n-text align="center" tag="div">{{ $locale.baseText('runData.noBinaryDataFound') }}</n8n-text>
+				<n8n-text align="center" tag="div">{{
+					$locale.baseText('runData.noBinaryDataFound')
+				}}</n8n-text>
 			</div>
 
 			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
 				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
 					<div :class="$style.binaryIndex" v-if="binaryData.length > 1">
 						<div>
-							{{index + 1}}
+							{{ index + 1 }}
 						</div>
 					</div>
 
 					<div :class="$style.binaryRow">
-						<div :class="$style.binaryCell" v-for="(binaryData, key) in binaryDataEntry" :key="index + '_' + key">
+						<div
+							:class="$style.binaryCell"
+							v-for="(binaryData, key) in binaryDataEntry"
+							:key="index + '_' + key"
+						>
 							<div>
 								<div :class="$style.binaryHeader">
-									{{key}}
+									{{ key }}
 								</div>
 								<div v-if="binaryData.fileName">
-									<div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.fileName') }}: </n8n-text></div>
-									<div :class="$style.binaryValue">{{binaryData.fileName}}</div>
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileName') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
 								</div>
 								<div v-if="binaryData.directory">
-									<div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.directory') }}: </n8n-text></div>
-									<div :class="$style.binaryValue">{{binaryData.directory}}</div>
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.directory') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
 								</div>
 								<div v-if="binaryData.fileExtension">
-									<div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.fileExtension') }}:</n8n-text></div>
-									<div :class="$style.binaryValue">{{binaryData.fileExtension}}</div>
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
+										>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
 								</div>
 								<div v-if="binaryData.mimeType">
-									<div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.mimeType') }}: </n8n-text></div>
-									<div :class="$style.binaryValue">{{binaryData.mimeType}}</div>
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.mimeType') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
 								</div>
 								<div v-if="binaryData.fileSize">
-									<div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.fileSize') }}: </n8n-text></div>
-									<div :class="$style.binaryValue">{{binaryData.fileSize}}</div>
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileSize') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
 								</div>
 
 								<div :class="$style.binaryButtonContainer">
-									<n8n-button v-if="isViewable(index, key)" size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
-									<n8n-button v-if="isDownloadable(index, key)" size="small" type="secondary" :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
+									<n8n-button
+										v-if="isViewable(index, key)"
+										size="small"
+										:label="$locale.baseText('runData.showBinaryData')"
+										class="binary-data-show-data-button"
+										@click="displayBinaryData(index, key)"
+									/>
+									<n8n-button
+										v-if="isDownloadable(index, key)"
+										size="small"
+										type="secondary"
+										:label="$locale.baseText('runData.downloadBinaryData')"
+										class="binary-data-show-data-button"
+										@click="downloadBinaryData(index, key)"
+									/>
 								</div>
 							</div>
 						</div>
@@ -308,7 +412,11 @@
 				</div>
 			</div>
 		</div>
-		<div :class="$style.pagination" v-if="hasNodeRun && !hasRunError && dataCount > pageSize" v-show="!editMode.enabled">
+		<div
+			:class="$style.pagination"
+			v-if="hasNodeRun && !hasRunError && dataCount > pageSize"
+			v-show="!editMode.enabled"
+		>
 			<el-pagination
 				background
 				:hide-on-single-page="true"
@@ -317,23 +425,16 @@
 				:page-size="pageSize"
 				layout="prev, pager, next"
 				@current-change="onCurrentPageChange"
-				:total="dataCount">
+				:total="dataCount"
+			>
 			</el-pagination>
 
 			<div :class="$style.pageSizeSelector">
 				<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body>
 					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
-					<n8n-option
-						v-for="size in pageSizes"
-						:key="size"
-						:label="size"
-						:value="size">
-					</n8n-option>
-					<n8n-option
-						:label="$locale.baseText('ndv.output.all')"
-						:value="dataCount"
-					>
+					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
 					</n8n-option>
+					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
 				</n8n-select>
 			</div>
 		</div>
@@ -342,7 +443,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "vue";
+import { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 import { saveAs } from 'file-saver';
 import {
@@ -378,806 +479,838 @@ import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
 import WarningTooltip from '@/components/WarningTooltip.vue';
 import NodeErrorView from '@/components/Error/NodeErrorView.vue';
 
-import { externalHooks } from "@/mixins/externalHooks";
+import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { pinData } from '@/mixins/pinData';
-import { CodeEditor } from "@/components/forms";
+import { CodeEditor } from '@/components/forms';
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { clearJsonKey, executionDataToJson, stringSizeInBytes } from '@/utils';
 import { isEmpty } from '@/utils';
-import { useWorkflowsStore } from "@/stores/workflows";
-import { mapStores } from "pinia";
-import { useNDVStore } from "@/stores/ndv";
-import { useNodeTypesStore } from "@/stores/nodeTypes";
+import { useWorkflowsStore } from '@/stores/workflows';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 const RunDataTable = () => import('@/components/RunDataTable.vue');
 const RunDataJson = () => import('@/components/RunDataJson.vue');
 const RunDataSchema = () => import('@/components/RunDataSchema.vue');
 
 export type EnterEditModeArgs = {
-	origin: 'editIconButton' | 'insertTestDataLink',
+	origin: 'editIconButton' | 'insertTestDataLink';
 };
 
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	nodeHelpers,
-	pinData,
-)
-	.extend({
-		name: 'RunData',
-		components: {
-			BinaryDataDisplay,
-			NodeErrorView,
-			WarningTooltip,
-			CodeEditor,
-			RunDataTable,
-			RunDataJson,
-			RunDataSchema,
+export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).extend({
+	name: 'RunData',
+	components: {
+		BinaryDataDisplay,
+		NodeErrorView,
+		WarningTooltip,
+		CodeEditor,
+		RunDataTable,
+		RunDataJson,
+		RunDataSchema,
+	},
+	props: {
+		nodeUi: {
+			type: Object as PropType<INodeUi>,
 		},
-		props: {
-			nodeUi: {
-				type: Object as PropType<INodeUi>,
-			},
-			runIndex: {
-				type: Number,
-			},
-			linkedRuns: {
-				type: Boolean,
-			},
-			canLinkRuns: {
-				type: Boolean,
-			},
-			tooMuchDataTitle: {
-				type: String,
-			},
-			noDataInBranchMessage: {
-				type: String,
-			},
-			isExecuting: {
-				type: Boolean,
-			},
-			executingMessage: {
-				type: String,
-			},
-			sessionId: {
-				type: String,
-			},
-			paneType: {
-				type: String as PropType<NodePanelType>,
-			},
-			overrideOutputs: {
-				type: Array as PropType<number[]>,
-			},
-			mappingEnabled: {
-				type: Boolean,
-			},
-			distanceFromActive: {
-				type: Number,
-			},
-			showMappingHint: {
-				type: Boolean,
-			},
-			blockUI: {
-				type: Boolean,
-				default: false,
-			},
-			isProductionExecutionPreview: {
-				type: Boolean,
-				default: false,
-			},
+		runIndex: {
+			type: Number,
 		},
-		data () {
-			return {
-				binaryDataPreviewActive: false,
-				dataSize: 0,
-				showData: false,
-				outputIndex: 0,
-				binaryDataDisplayVisible: false,
-				binaryDataDisplayData: null as IBinaryData | null,
-
-				MAX_DISPLAY_DATA_SIZE,
-				MAX_DISPLAY_ITEMS_AUTO_ALL,
-				currentPage: 1,
-				pageSize: 10,
-				pageSizes: [10, 25, 50, 100],
-				eventBus: dataPinningEventBus,
-
-				pinDataDiscoveryTooltipVisible: false,
-				isControlledPinDataTooltip: false,
-			};
+		linkedRuns: {
+			type: Boolean,
 		},
-		mounted() {
-			this.init();
+		canLinkRuns: {
+			type: Boolean,
+		},
+		tooMuchDataTitle: {
+			type: String,
+		},
+		noDataInBranchMessage: {
+			type: String,
+		},
+		isExecuting: {
+			type: Boolean,
+		},
+		executingMessage: {
+			type: String,
+		},
+		sessionId: {
+			type: String,
+		},
+		paneType: {
+			type: String as PropType<NodePanelType>,
+		},
+		overrideOutputs: {
+			type: Array as PropType<number[]>,
+		},
+		mappingEnabled: {
+			type: Boolean,
+		},
+		distanceFromActive: {
+			type: Number,
+		},
+		showMappingHint: {
+			type: Boolean,
+		},
+		blockUI: {
+			type: Boolean,
+			default: false,
+		},
+		isProductionExecutionPreview: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			binaryDataPreviewActive: false,
+			dataSize: 0,
+			showData: false,
+			outputIndex: 0,
+			binaryDataDisplayVisible: false,
+			binaryDataDisplayData: null as IBinaryData | null,
 
-			if (!this.isPaneTypeInput) {
-				this.eventBus.$on('data-pinning-error', this.onDataPinningError);
-				this.eventBus.$on('data-unpinning', this.onDataUnpinning);
+			MAX_DISPLAY_DATA_SIZE,
+			MAX_DISPLAY_ITEMS_AUTO_ALL,
+			currentPage: 1,
+			pageSize: 10,
+			pageSizes: [10, 25, 50, 100],
+			eventBus: dataPinningEventBus,
 
-				const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
-				if (!hasSeenPinDataTooltip) {
-					this.showPinDataDiscoveryTooltip(this.jsonData);
+			pinDataDiscoveryTooltipVisible: false,
+			isControlledPinDataTooltip: false,
+		};
+	},
+	mounted() {
+		this.init();
+
+		if (!this.isPaneTypeInput) {
+			this.eventBus.$on('data-pinning-error', this.onDataPinningError);
+			this.eventBus.$on('data-unpinning', this.onDataUnpinning);
+
+			const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
+			if (!hasSeenPinDataTooltip) {
+				this.showPinDataDiscoveryTooltip(this.jsonData);
+			}
+		}
+		this.ndvStore.setNDVBranchIndex({
+			pane: this.paneType as 'input' | 'output',
+			branchIndex: this.currentOutputIndex,
+		});
+	},
+	destroyed() {
+		this.hidePinDataDiscoveryTooltip();
+		this.eventBus.$off('data-pinning-error', this.onDataPinningError);
+		this.eventBus.$off('data-unpinning', this.onDataUnpinning);
+	},
+	computed: {
+		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		dataPinningDocsUrl(): string {
+			return DATA_PINNING_DOCS_URL;
+		},
+		dataEditingDocsUrl(): string {
+			return DATA_EDITING_DOCS_URL;
+		},
+		displayMode(): IRunDataDisplayMode {
+			return this.ndvStore.getPanelDisplayMode(this.paneType);
+		},
+		node(): INodeUi | null {
+			return (this.nodeUi as INodeUi | null) || null;
+		},
+		nodeType(): INodeTypeDescription | null {
+			if (this.node) {
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+			}
+			return null;
+		},
+		isTriggerNode(): boolean {
+			return this.nodeTypesStore.isTriggerNode(this.node.type);
+		},
+		canPinData(): boolean {
+			return (
+				!this.isPaneTypeInput &&
+				this.isPinDataNodeType &&
+				!(this.binaryData && this.binaryData.length > 0)
+			);
+		},
+		buttons(): Array<{ label: string; value: string }> {
+			const defaults = [
+				{ label: this.$locale.baseText('runData.table'), value: 'table' },
+				{ label: this.$locale.baseText('runData.json'), value: 'json' },
+			];
+
+			if (this.binaryData.length) {
+				defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary' });
+			}
+
+			if (this.isPaneTypeInput && window.posthog?.isFeatureEnabled?.('schema-view')) {
+				defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema' });
+			}
+
+			return defaults;
+		},
+		hasNodeRun(): boolean {
+			return Boolean(
+				!this.isExecuting &&
+					this.node &&
+					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
+						this.hasPinData),
+			);
+		},
+		subworkflowExecutionError(): Error | null {
+			return this.workflowsStore.subWorkflowExecutionError;
+		},
+		hasSubworkflowExecutionError(): boolean {
+			return Boolean(this.subworkflowExecutionError);
+		},
+		hasRunError(): boolean {
+			return Boolean(
+				this.node &&
+					this.workflowRunData &&
+					this.workflowRunData[this.node.name] &&
+					this.workflowRunData[this.node.name][this.runIndex] &&
+					this.workflowRunData[this.node.name][this.runIndex].error,
+			);
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.workflowsStore.getWorkflowExecution;
+		},
+		workflowRunData(): IRunData | null {
+			if (this.workflowExecution === null) {
+				return null;
+			}
+			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
+			if (executionData && executionData.resultData) {
+				return executionData.resultData.runData;
+			}
+			return null;
+		},
+		dataCount(): number {
+			return this.getDataCount(this.runIndex, this.currentOutputIndex);
+		},
+		dataSizeInMB(): string {
+			return (this.dataSize / 1024 / 1000).toLocaleString();
+		},
+		maxOutputIndex(): number {
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length < this.runIndex) {
+				return 0;
+			}
+
+			if (runData[this.node.name][this.runIndex]) {
+				const taskData = runData[this.node.name][this.runIndex].data;
+				if (taskData && taskData.main) {
+					return taskData.main.length - 1;
 				}
 			}
-			this.ndvStore.setNDVBranchIndex({
-				pane: this.paneType as "input" | "output",
-				branchIndex: this.currentOutputIndex,
+
+			return 0;
+		},
+		currentPageOffset(): number {
+			return this.pageSize * (this.currentPage - 1);
+		},
+		maxRunIndex(): number {
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length) {
+				return runData[this.node.name].length - 1;
+			}
+
+			return 0;
+		},
+		rawInputData(): INodeExecutionData[] {
+			let inputData: INodeExecutionData[] = [];
+
+			if (this.node) {
+				inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+			}
+
+			if (inputData.length === 0 || !Array.isArray(inputData)) {
+				return [];
+			}
+
+			return inputData;
+		},
+		inputData(): INodeExecutionData[] {
+			let inputData = this.rawInputData;
+
+			if (this.node && this.pinData && !this.isProductionExecutionPreview) {
+				inputData = Array.isArray(this.pinData)
+					? this.pinData.map((value) => ({
+							json: value,
+					  }))
+					: [
+							{
+								json: this.pinData,
+							},
+					  ];
+			}
+
+			const offset = this.pageSize * (this.currentPage - 1);
+			inputData = inputData.slice(offset, offset + this.pageSize);
+
+			return inputData;
+		},
+		jsonData(): IDataObject[] {
+			return executionDataToJson(this.inputData);
+		},
+		binaryData(): IBinaryKeyData[] {
+			if (!this.node) {
+				return [];
+			}
+
+			const binaryData = this.getBinaryData(
+				this.workflowRunData,
+				this.node.name,
+				this.runIndex,
+				this.currentOutputIndex,
+			);
+			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
+		},
+		currentOutputIndex(): number {
+			if (
+				this.overrideOutputs &&
+				this.overrideOutputs.length &&
+				!this.overrideOutputs.includes(this.outputIndex)
+			) {
+				return this.overrideOutputs[0] as number;
+			}
+
+			return this.outputIndex;
+		},
+		branches(): ITab[] {
+			function capitalize(name: string) {
+				return name.charAt(0).toLocaleUpperCase() + name.slice(1);
+			}
+			const branches: ITab[] = [];
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
+					continue;
+				}
+				const itemsCount = this.getDataCount(this.runIndex, i);
+				const items = this.$locale.baseText('ndv.output.items', { adjustToNumber: itemsCount });
+				let outputName = this.getOutputName(i);
+				if (`${outputName}` === `${i}`) {
+					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
+				} else {
+					outputName = capitalize(
+						`${this.getOutputName(i)} ${this.$locale.baseText('ndv.output.branch')}`,
+					);
+				}
+				branches.push({
+					label: itemsCount ? `${outputName} (${itemsCount} ${items})` : outputName,
+					value: i,
+				});
+			}
+			return branches;
+		},
+		editMode(): { enabled: boolean; value: string } {
+			return this.isPaneTypeInput
+				? { enabled: false, value: '' }
+				: this.ndvStore.outputPanelEditMode;
+		},
+		isPaneTypeInput(): boolean {
+			return this.paneType === 'input';
+		},
+	},
+	methods: {
+		onItemHover(itemIndex: number | null) {
+			if (itemIndex === null) {
+				this.$emit('itemHover', null);
+
+				return;
+			}
+			this.$emit('itemHover', {
+				outputIndex: this.currentOutputIndex,
+				itemIndex,
 			});
 		},
-		destroyed() {
-			this.hidePinDataDiscoveryTooltip();
-			this.eventBus.$off('data-pinning-error', this.onDataPinningError);
-			this.eventBus.$off('data-unpinning', this.onDataUnpinning);
+		onClickDataPinningDocsLink() {
+			this.$telemetry.track('User clicked ndv link', {
+				workflow_id: this.workflowsStore.workflowId,
+				session_id: this.sessionId,
+				node_type: this.activeNode?.type,
+				pane: 'output',
+				type: 'data-pinning-docs',
+			});
 		},
-		computed: {
-			...mapStores(
-				useNodeTypesStore,
-				useNDVStore,
-				useWorkflowsStore,
-			),
-			activeNode(): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			dataPinningDocsUrl(): string {
-				return DATA_PINNING_DOCS_URL;
-			},
-			dataEditingDocsUrl(): string{
-				return DATA_EDITING_DOCS_URL;
-			},
-			displayMode(): IRunDataDisplayMode {
-				return this.ndvStore.getPanelDisplayMode(this.paneType);
-			},
-			node(): INodeUi | null {
-				return (this.nodeUi as INodeUi | null) || null;
-			},
-			nodeType (): INodeTypeDescription | null {
-				if (this.node) {
-					return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
-				}
-				return null;
-			},
-			isTriggerNode (): boolean {
-				return this.nodeTypesStore.isTriggerNode(this.node.type);
-			},
-			canPinData (): boolean {
-				return !this.isPaneTypeInput &&
-					this.isPinDataNodeType &&
-					!(this.binaryData && this.binaryData.length > 0);
-			},
-			buttons(): Array<{label: string, value: string}> {
-				const defaults = [
-					{ label: this.$locale.baseText('runData.table'), value: 'table'},
-					{ label: this.$locale.baseText('runData.json'), value: 'json'},
-				];
+		showPinDataDiscoveryTooltip(value: IDataObject[]) {
+			if (!this.isTriggerNode) {
+				return;
+			}
 
-				if (this.binaryData.length) {
-					defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary'});
-				}
-
-				if (this.isPaneTypeInput && window.posthog?.isFeatureEnabled?.('schema-view')) {
-					defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema'});
-				}
-
-				return defaults;
-			},
-			hasNodeRun(): boolean {
-				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || this.hasPinData));
-			},
-			subworkflowExecutionError(): Error | null {
-				return this.workflowsStore.subWorkflowExecutionError;
-			},
-			hasSubworkflowExecutionError(): boolean {
-				return Boolean(this.subworkflowExecutionError);
-			},
-			hasRunError(): boolean {
-				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
-			},
-			workflowExecution (): IExecutionResponse | null {
-				return this.workflowsStore.getWorkflowExecution;
-			},
-			workflowRunData (): IRunData | null {
-				if (this.workflowExecution === null) {
-					return null;
-				}
-				const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-				if (executionData && executionData.resultData) {
-					return executionData.resultData.runData;
-				}
-				return null;
-			},
-			dataCount (): number {
-				return this.getDataCount(this.runIndex, this.currentOutputIndex);
-			},
-			dataSizeInMB(): string {
-				return (this.dataSize / 1024 / 1000).toLocaleString();
-			},
-			maxOutputIndex (): number {
-				if (this.node === null) {
-					return 0;
-				}
-
-				const runData: IRunData | null = this.workflowRunData;
-
-				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-					return 0;
-				}
-
-				if (runData[this.node.name].length < this.runIndex) {
-					return 0;
-				}
-
-				if (runData[this.node.name][this.runIndex]) {
-					const taskData = runData[this.node.name][this.runIndex].data;
-					if (taskData && taskData.main) {
-						return taskData.main.length - 1;
-					}
-				}
-
-				return 0;
-			},
-			currentPageOffset(): number {
-				return this.pageSize * (this.currentPage - 1);
-			},
-			maxRunIndex (): number {
-				if (this.node === null) {
-					return 0;
-				}
-
-				const runData: IRunData | null = this.workflowRunData;
-
-				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-					return 0;
-				}
-
-				if (runData[this.node.name].length) {
-					return runData[this.node.name].length - 1;
-				}
-
-				return 0;
-			},
-			rawInputData (): INodeExecutionData[] {
-				let inputData: INodeExecutionData[] = [];
-
-				if (this.node) {
-					inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
-				}
-
-				if (inputData.length === 0 || !Array.isArray(inputData)) {
-					return [];
-				}
-
-				return inputData;
-			},
-			inputData (): INodeExecutionData[] {
-				let inputData = this.rawInputData;
-
-				if (this.node && this.pinData && !this.isProductionExecutionPreview) {
-					inputData = Array.isArray(this.pinData)
-						? this.pinData.map((value) => ({
-							json: value,
-						}))
-						: [{
-							json: this.pinData,
-						}];
-				}
-
-				const offset = this.pageSize * (this.currentPage - 1);
-				inputData = inputData.slice(offset, offset + this.pageSize);
-
-				return inputData;
-			},
-			jsonData (): IDataObject[] {
-				return executionDataToJson(this.inputData);
-			},
-			binaryData (): IBinaryKeyData[] {
-				if (!this.node) {
-					return [];
-				}
-
-				const binaryData = this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.currentOutputIndex);
-				return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
-			},
-			currentOutputIndex(): number {
-				if (this.overrideOutputs && this.overrideOutputs.length && !this.overrideOutputs.includes(this.outputIndex)) {
-					return this.overrideOutputs[0] as number;
-				}
-
-				return this.outputIndex;
-			},
-			branches (): ITab[] {
-				function capitalize(name: string) {
-					return name.charAt(0).toLocaleUpperCase() + name.slice(1);
-				}
-				const branches: ITab[] = [];
-				for (let i = 0; i <= this.maxOutputIndex; i++) {
-					if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
-						continue;
-					}
-					const itemsCount = this.getDataCount(this.runIndex, i);
-					const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
-					let outputName = this.getOutputName(i);
-					if (`${outputName}` === `${i}`) {
-						outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
-					}
-					else {
-						outputName = capitalize(`${this.getOutputName(i)} ${this.$locale.baseText('ndv.output.branch')}`);
-					}
-					branches.push({
-						label: itemsCount ? `${outputName} (${itemsCount} ${items})` : outputName,
-						value: i,
-					});
-				}
-				return branches;
-			},
-			editMode(): { enabled: boolean; value: string; } {
-				return this.isPaneTypeInput
-					? { enabled: false, value: '' }
-					: this.ndvStore.outputPanelEditMode;
-			},
-			isPaneTypeInput(): boolean {
-				return this.paneType === 'input';
-			},
-		},
-		methods: {
-			onItemHover(itemIndex: number | null) {
-				if (itemIndex === null) {
-					this.$emit('itemHover', null);
-
-					return;
-				}
-				this.$emit('itemHover', {
-					outputIndex: this.currentOutputIndex,
-					itemIndex,
-				});
-			},
-			onClickDataPinningDocsLink() {
-				this.$telemetry.track('User clicked ndv link', {
-					workflow_id: this.workflowsStore.workflowId,
-					session_id: this.sessionId,
-					node_type: this.activeNode?.type,
-					pane: 'output',
-					type: 'data-pinning-docs',
-				});
-			},
-			showPinDataDiscoveryTooltip(value: IDataObject[]) {
-				if (!this.isTriggerNode) {
-					return;
-				}
-
-				if (value && value.length > 0) {
-					this.pinDataDiscoveryComplete();
-
-					setTimeout(() => {
-						this.isControlledPinDataTooltip = true;
-						this.pinDataDiscoveryTooltipVisible = true;
-						this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: true });
-					}, 500); // Wait for NDV to open
-				}
-			},
-			hidePinDataDiscoveryTooltip() {
-				if (this.pinDataDiscoveryTooltipVisible) {
-					this.isControlledPinDataTooltip = false;
-					this.pinDataDiscoveryTooltipVisible = false;
-					this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: false });
-				}
-			},
-			pinDataDiscoveryComplete() {
-				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG, 'true');
-				localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
-			},
-			enterEditMode({ origin }: EnterEditModeArgs) {
-				const inputData = this.pinData
-					? clearJsonKey(this.pinData)
-					: executionDataToJson(this.rawInputData);
-
-				const data = inputData.length > 0
-					? inputData
-					: TEST_PIN_DATA;
-
-				this.ndvStore.setOutputPanelEditModeEnabled(true);
-				this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
-
-				this.$telemetry.track('User opened ndv edit state', {
-					node_type: this.activeNode?.type,
-					click_type: origin === 'editIconButton' ? 'button' : 'link',
-					session_id: this.sessionId,
-					run_index: this.runIndex,
-					is_output_present: this.hasNodeRun || this.hasPinData,
-					view: !this.hasNodeRun && !this.hasPinData ? 'undefined' : this.displayMode,
-					is_data_pinned: this.hasPinData,
-				});
-			},
-			onClickCancelEdit() {
-				this.ndvStore.setOutputPanelEditModeEnabled(false);
-				this.ndvStore.setOutputPanelEditModeValue('');
-				this.onExitEditMode({ type: 'cancel' });
-			},
-			onClickSaveEdit() {
-				const { value } = this.editMode;
-
-				this.clearAllStickyNotifications();
-
-				if (!this.isValidPinDataSize(value)) {
-					this.onDataPinningError({ errorType: 'data-too-large', source: 'save-edit' });
-					return;
-				}
-
-				if (!this.isValidPinDataJSON(value)) {
-					this.onDataPinningError({ errorType: 'invalid-json', source: 'save-edit' });
-					return;
-				}
-
-				this.ndvStore.setOutputPanelEditModeEnabled(false);
-				this.workflowsStore.pinData({ node: this.node, data: clearJsonKey(value) as INodeExecutionData[] });
-
-				this.onDataPinningSuccess({ source: 'save-edit' });
-
-				this.onExitEditMode({ type: 'save' });
-			},
-			onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
-				this.$telemetry.track('User closed ndv edit state', {
-					node_type: this.activeNode?.type,
-					session_id: this.sessionId,
-					run_index: this.runIndex,
-					view: this.displayMode,
-					type,
-				});
-			},
-			onDataUnpinning(
-				{ source }: { source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal' },
-			) {
-				this.$telemetry.track('User unpinned ndv data', {
-					node_type: this.activeNode?.type,
-					session_id: this.sessionId,
-					run_index: this.runIndex,
-					source,
-					data_size: stringSizeInBytes(this.pinData),
-				});
-			},
-			onDataPinningSuccess({ source }: { source: 'pin-icon-click' | 'save-edit' }) {
-				const telemetryPayload = {
-					pinning_source: source,
-					node_type: this.activeNode.type,
-					session_id: this.sessionId,
-					data_size: stringSizeInBytes(this.pinData),
-					view: this.displayMode,
-					run_index: this.runIndex,
-				};
-				this.$externalHooks().run('runData.onDataPinningSuccess', telemetryPayload);
-				this.$telemetry.track('Ndv data pinning success', telemetryPayload);
-			},
-			onDataPinningError(
-				{ errorType, source }: {
-					errorType: 'data-too-large' | 'invalid-json',
-					source: 'on-ndv-close-modal' | 'pin-icon-click' | 'save-edit'
-				},
-			) {
-				this.$telemetry.track('Ndv data pinning failure', {
-					pinning_source: source,
-					node_type: this.activeNode.type,
-					session_id: this.sessionId,
-					data_size: stringSizeInBytes(this.pinData),
-					view: this.displayMode,
-					run_index: this.runIndex,
-					error_type: errorType,
-				});
-			},
-			async onTogglePinData(
-				{ source }: { source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal' },
-			) {
-				if (source === 'pin-icon-click') {
-					const telemetryPayload = {
-						node_type: this.activeNode.type,
-						session_id: this.sessionId,
-						run_index: this.runIndex,
-						view: !this.hasNodeRun && !this.hasPinData ? 'none' : this.displayMode,
-					};
-
-					this.$externalHooks().run('runData.onTogglePinData', telemetryPayload);
-					this.$telemetry.track('User clicked pin data icon', telemetryPayload);
-				}
-
-				this.updateNodeParameterIssues(this.node);
-
-				if (this.hasPinData) {
-					this.onDataUnpinning({ source });
-					this.workflowsStore.unpinData({ node: this.node });
-					return;
-				}
-
-				const data = executionDataToJson(this.rawInputData) as INodeExecutionData[];
-
-				if (!this.isValidPinDataSize(data)) {
-					this.onDataPinningError({ errorType: 'data-too-large', source: 'pin-icon-click' });
-					return;
-				}
-
-				this.onDataPinningSuccess({ source: 'pin-icon-click' });
-
-				this.workflowsStore.pinData({ node: this.node, data });
-
-				if (this.maxRunIndex > 0) {
-					this.$showToast({
-						title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
-							interpolate: {
-								index: `${this.runIndex}`,
-							},
-						}),
-						message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
-						type: 'success',
-						duration: 2000,
-					});
-				}
-
-				this.hidePinDataDiscoveryTooltip();
+			if (value && value.length > 0) {
 				this.pinDataDiscoveryComplete();
-			},
-			switchToBinary() {
-				this.onDisplayModeChange('binary');
-			},
-			onBranchChange(value: number) {
-				this.outputIndex = value;
 
-				this.$telemetry.track('User changed ndv branch', {
-					session_id: this.sessionId,
-					branch_index: value,
+				setTimeout(() => {
+					this.isControlledPinDataTooltip = true;
+					this.pinDataDiscoveryTooltipVisible = true;
+					this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: true });
+				}, 500); // Wait for NDV to open
+			}
+		},
+		hidePinDataDiscoveryTooltip() {
+			if (this.pinDataDiscoveryTooltipVisible) {
+				this.isControlledPinDataTooltip = false;
+				this.pinDataDiscoveryTooltipVisible = false;
+				this.eventBus.$emit('data-pinning-discovery', { isTooltipVisible: false });
+			}
+		},
+		pinDataDiscoveryComplete() {
+			localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG, 'true');
+			localStorage.setItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG, 'true');
+		},
+		enterEditMode({ origin }: EnterEditModeArgs) {
+			const inputData = this.pinData
+				? clearJsonKey(this.pinData)
+				: executionDataToJson(this.rawInputData);
+
+			const data = inputData.length > 0 ? inputData : TEST_PIN_DATA;
+
+			this.ndvStore.setOutputPanelEditModeEnabled(true);
+			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+
+			this.$telemetry.track('User opened ndv edit state', {
+				node_type: this.activeNode?.type,
+				click_type: origin === 'editIconButton' ? 'button' : 'link',
+				session_id: this.sessionId,
+				run_index: this.runIndex,
+				is_output_present: this.hasNodeRun || this.hasPinData,
+				view: !this.hasNodeRun && !this.hasPinData ? 'undefined' : this.displayMode,
+				is_data_pinned: this.hasPinData,
+			});
+		},
+		onClickCancelEdit() {
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			this.ndvStore.setOutputPanelEditModeValue('');
+			this.onExitEditMode({ type: 'cancel' });
+		},
+		onClickSaveEdit() {
+			const { value } = this.editMode;
+
+			this.clearAllStickyNotifications();
+
+			if (!this.isValidPinDataSize(value)) {
+				this.onDataPinningError({ errorType: 'data-too-large', source: 'save-edit' });
+				return;
+			}
+
+			if (!this.isValidPinDataJSON(value)) {
+				this.onDataPinningError({ errorType: 'invalid-json', source: 'save-edit' });
+				return;
+			}
+
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			this.workflowsStore.pinData({
+				node: this.node,
+				data: clearJsonKey(value) as INodeExecutionData[],
+			});
+
+			this.onDataPinningSuccess({ source: 'save-edit' });
+
+			this.onExitEditMode({ type: 'save' });
+		},
+		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
+			this.$telemetry.track('User closed ndv edit state', {
+				node_type: this.activeNode?.type,
+				session_id: this.sessionId,
+				run_index: this.runIndex,
+				view: this.displayMode,
+				type,
+			});
+		},
+		onDataUnpinning({
+			source,
+		}: {
+			source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal';
+		}) {
+			this.$telemetry.track('User unpinned ndv data', {
+				node_type: this.activeNode?.type,
+				session_id: this.sessionId,
+				run_index: this.runIndex,
+				source,
+				data_size: stringSizeInBytes(this.pinData),
+			});
+		},
+		onDataPinningSuccess({ source }: { source: 'pin-icon-click' | 'save-edit' }) {
+			const telemetryPayload = {
+				pinning_source: source,
+				node_type: this.activeNode.type,
+				session_id: this.sessionId,
+				data_size: stringSizeInBytes(this.pinData),
+				view: this.displayMode,
+				run_index: this.runIndex,
+			};
+			this.$externalHooks().run('runData.onDataPinningSuccess', telemetryPayload);
+			this.$telemetry.track('Ndv data pinning success', telemetryPayload);
+		},
+		onDataPinningError({
+			errorType,
+			source,
+		}: {
+			errorType: 'data-too-large' | 'invalid-json';
+			source: 'on-ndv-close-modal' | 'pin-icon-click' | 'save-edit';
+		}) {
+			this.$telemetry.track('Ndv data pinning failure', {
+				pinning_source: source,
+				node_type: this.activeNode.type,
+				session_id: this.sessionId,
+				data_size: stringSizeInBytes(this.pinData),
+				view: this.displayMode,
+				run_index: this.runIndex,
+				error_type: errorType,
+			});
+		},
+		async onTogglePinData({
+			source,
+		}: {
+			source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal';
+		}) {
+			if (source === 'pin-icon-click') {
+				const telemetryPayload = {
 					node_type: this.activeNode.type,
-					node_type_input_selection: this.nodeType? this.nodeType.name: '',
+					session_id: this.sessionId,
+					run_index: this.runIndex,
+					view: !this.hasNodeRun && !this.hasPinData ? 'none' : this.displayMode,
+				};
+
+				this.$externalHooks().run('runData.onTogglePinData', telemetryPayload);
+				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
+			}
+
+			this.updateNodeParameterIssues(this.node);
+
+			if (this.hasPinData) {
+				this.onDataUnpinning({ source });
+				this.workflowsStore.unpinData({ node: this.node });
+				return;
+			}
+
+			const data = executionDataToJson(this.rawInputData) as INodeExecutionData[];
+
+			if (!this.isValidPinDataSize(data)) {
+				this.onDataPinningError({ errorType: 'data-too-large', source: 'pin-icon-click' });
+				return;
+			}
+
+			this.onDataPinningSuccess({ source: 'pin-icon-click' });
+
+			this.workflowsStore.pinData({ node: this.node, data });
+
+			if (this.maxRunIndex > 0) {
+				this.$showToast({
+					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
+						interpolate: {
+							index: `${this.runIndex}`,
+						},
+					}),
+					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
+					type: 'success',
+					duration: 2000,
+				});
+			}
+
+			this.hidePinDataDiscoveryTooltip();
+			this.pinDataDiscoveryComplete();
+		},
+		switchToBinary() {
+			this.onDisplayModeChange('binary');
+		},
+		onBranchChange(value: number) {
+			this.outputIndex = value;
+
+			this.$telemetry.track('User changed ndv branch', {
+				session_id: this.sessionId,
+				branch_index: value,
+				node_type: this.activeNode.type,
+				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
+				pane: this.paneType,
+			});
+		},
+		showTooMuchData() {
+			this.showData = true;
+			this.$telemetry.track('User clicked ndv button', {
+				node_type: this.activeNode.type,
+				workflow_id: this.workflowsStore.workflowId,
+				session_id: this.sessionId,
+				pane: this.paneType,
+				type: 'showTooMuchData',
+			});
+		},
+		linkRun() {
+			this.$emit('linkRun');
+		},
+		unlinkRun() {
+			this.$emit('unlinkRun');
+		},
+		onCurrentPageChange() {
+			this.$telemetry.track('User changed ndv page', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				session_id: this.sessionId,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
+		},
+		onPageSizeChange(pageSize: number) {
+			this.pageSize = pageSize;
+			const maxPage = Math.ceil(this.dataCount / this.pageSize);
+			if (maxPage < this.currentPage) {
+				this.currentPage = maxPage;
+			}
+
+			this.$telemetry.track('User changed ndv page size', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				session_id: this.sessionId,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
+		},
+		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
+			const previous = this.displayMode;
+			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
+
+			const dataContainer = this.$refs.dataContainer;
+			if (dataContainer) {
+				const dataDisplay = (dataContainer as Element).children[0];
+
+				if (dataDisplay) {
+					dataDisplay.scrollTo(0, 0);
+				}
+			}
+
+			this.closeBinaryDataDisplay();
+			this.$externalHooks().run('runData.displayModeChanged', {
+				newValue: displayMode,
+				oldValue: previous,
+			});
+			if (this.activeNode) {
+				this.$telemetry.track('User changed ndv item view', {
+					previous_view: previous,
+					new_view: displayMode,
+					node_type: this.activeNode.type,
+					workflow_id: this.workflowsStore.workflowId,
+					session_id: this.sessionId,
 					pane: this.paneType,
 				});
-			},
-			showTooMuchData() {
+			}
+		},
+		getRunLabel(option: number) {
+			let itemsCount = 0;
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				itemsCount += this.getDataCount(option - 1, i);
+			}
+			const items = this.$locale.baseText('ndv.output.items', { adjustToNumber: itemsCount });
+			const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
+			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
+		},
+		getDataCount(runIndex: number, outputIndex: number) {
+			if (this.pinData) {
+				return this.pinData.length;
+			}
+
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length <= runIndex) {
+				return 0;
+			}
+
+			if (runData[this.node.name][runIndex].hasOwnProperty('error')) {
+				return 1;
+			}
+
+			if (
+				!runData[this.node.name][runIndex].hasOwnProperty('data') ||
+				runData[this.node.name][runIndex].data === undefined
+			) {
+				return 0;
+			}
+
+			const inputData = this.getMainInputData(runData[this.node.name][runIndex].data!, outputIndex);
+
+			return inputData.length;
+		},
+		init() {
+			// Reset the selected output index every time another node gets selected
+			this.outputIndex = 0;
+			this.refreshDataSize();
+			this.closeBinaryDataDisplay();
+			if (this.binaryData.length > 0) {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'binary',
+				});
+			} else if (this.displayMode === 'binary') {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'table',
+				});
+			}
+		},
+		closeBinaryDataDisplay() {
+			this.binaryDataDisplayVisible = false;
+			this.binaryDataDisplayData = null;
+		},
+		clearExecutionData() {
+			this.workflowsStore.setWorkflowExecutionData(null);
+			this.updateNodesExecutionIssues();
+		},
+		isViewable(index: number, key: string): boolean {
+			const { fileType } = this.binaryData[index][key];
+			return !!fileType && ['image', 'video', 'text', 'json'].includes(fileType);
+		},
+		isDownloadable(index: number, key: string): boolean {
+			const { mimeType, fileName } = this.binaryData[index][key];
+			return !!(mimeType && fileName);
+		},
+		async downloadBinaryData(index: number, key: string) {
+			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
+
+			if (id) {
+				const url = this.restApi().getBinaryUrl(id);
+				saveAs(url, [fileName, fileExtension].join('.'));
+				return;
+			} else {
+				const bufferString = 'data:' + mimeType + ';base64,' + data;
+				const blob = await fetch(bufferString).then((d) => d.blob());
+				saveAs(blob, fileName);
+			}
+		},
+		displayBinaryData(index: number, key: string) {
+			this.binaryDataDisplayVisible = true;
+
+			this.binaryDataDisplayData = {
+				node: this.node!.name,
+				runIndex: this.runIndex,
+				outputIndex: this.currentOutputIndex,
+				index,
+				key,
+			};
+		},
+		getOutputName(outputIndex: number) {
+			if (this.node === null) {
+				return outputIndex + 1;
+			}
+
+			const nodeType = this.nodeType;
+			if (!nodeType || !nodeType.outputNames || nodeType.outputNames.length <= outputIndex) {
+				return outputIndex + 1;
+			}
+
+			return nodeType.outputNames[outputIndex];
+		},
+		refreshDataSize() {
+			// Hide by default the data from being displayed
+			this.showData = false;
+
+			// Check how much data there is to display
+			const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
+
+			const offset = this.pageSize * (this.currentPage - 1);
+			const jsonItems = inputData.slice(offset, offset + this.pageSize).map((item) => item.json);
+
+			this.dataSize = JSON.stringify(jsonItems).length;
+
+			if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
+				// Data is reasonable small (< 200kb) so display it directly
 				this.showData = true;
-				this.$telemetry.track('User clicked ndv button', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					session_id: this.sessionId,
-					pane: this.paneType,
-					type: 'showTooMuchData',
-				});
-			},
-			linkRun() {
-				this.$emit('linkRun');
-			},
-			unlinkRun() {
-				this.$emit('unlinkRun');
-			},
-			onCurrentPageChange() {
-				this.$telemetry.track('User changed ndv page', {
-					node_type: this.activeNode?.type,
-					workflow_id: this.workflowsStore.workflowId,
-					session_id: this.sessionId,
-					pane: this.paneType,
-					page_selected: this.currentPage,
-					page_size: this.pageSize,
-					items_total: this.dataCount,
-				});
-			},
-			onPageSizeChange(pageSize: number) {
-				this.pageSize = pageSize;
-				const maxPage = Math.ceil(this.dataCount / this.pageSize);
-				if (maxPage < this.currentPage) {
-					this.currentPage = maxPage;
-				}
+			}
+		},
+		onRunIndexChange(run: number) {
+			this.$emit('runChange', run);
+		},
+		enableNode() {
+			if (this.node) {
+				const updateInformation = {
+					name: this.node.name,
+					properties: {
+						disabled: !this.node.disabled,
+					} as IDataObject,
+				} as INodeUpdatePropertiesInformation;
 
-				this.$telemetry.track('User changed ndv page size', {
-					node_type: this.activeNode?.type,
-					workflow_id: this.workflowsStore.workflowId,
-					session_id: this.sessionId,
-					pane: this.paneType,
-					page_selected: this.currentPage,
-					page_size: this.pageSize,
-					items_total: this.dataCount,
-				});
-			},
-			onDisplayModeChange(displayMode: IRunDataDisplayMode) {
-				const previous = this.displayMode;
-				this.ndvStore.setPanelDisplayMode({pane: this.paneType, mode: displayMode});
-
-				const dataContainer = this.$refs.dataContainer;
-				if (dataContainer) {
-					const dataDisplay = (dataContainer as Element).children[0];
-
-					if (dataDisplay){
-						dataDisplay.scrollTo(0, 0);
-					}
-				}
-
-				this.closeBinaryDataDisplay();
-				this.$externalHooks().run('runData.displayModeChanged', { newValue: displayMode, oldValue: previous });
-				if(this.activeNode) {
-					this.$telemetry.track('User changed ndv item view', {
-						previous_view: previous,
-						new_view: displayMode,
-						node_type: this.activeNode.type,
-						workflow_id: this.workflowsStore.workflowId,
-						session_id: this.sessionId,
-						pane: this.paneType,
+				this.workflowsStore.updateNodeProperties(updateInformation);
+			}
+		},
+		goToErroredNode() {
+			if (this.node) {
+				this.ndvStore.activeNodeName = this.node.name;
+			}
+		},
+	},
+	watch: {
+		node() {
+			this.init();
+		},
+		inputData: {
+			handler(data: INodeExecutionData[]) {
+				if (this.paneType && data) {
+					this.ndvStore.setNDVPanelDataIsEmpty({
+						panel: this.paneType as 'input' | 'output',
+						isEmpty: data.every((item) => isEmpty(item.json)),
 					});
 				}
 			},
-			getRunLabel(option: number) {
-				let itemsCount = 0;
-				for (let i = 0; i <= this.maxOutputIndex; i++) {
-					itemsCount += this.getDataCount(option - 1, i);
-				}
-				const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
-				const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
-				return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex+1) + itemsLabel;
-			},
-			getDataCount(runIndex: number, outputIndex: number) {
-				if (this.pinData) {
-					return this.pinData.length;
-				}
-
-				if (this.node === null) {
-					return 0;
-				}
-
-				const runData: IRunData | null = this.workflowRunData;
-
-				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-					return 0;
-				}
-
-				if (runData[this.node.name].length <= runIndex) {
-					return 0;
-				}
-
-				if (runData[this.node.name][runIndex].hasOwnProperty('error')) {
-					return 1;
-				}
-
-				if (!runData[this.node.name][runIndex].hasOwnProperty('data') ||
-					runData[this.node.name][runIndex].data === undefined
-				) {
-					return 0;
-				}
-
-				const inputData = this.getMainInputData(runData[this.node.name][runIndex].data!, outputIndex);
-
-				return inputData.length;
-			},
-			init() {
-				// Reset the selected output index every time another node gets selected
-				this.outputIndex = 0;
-				this.refreshDataSize();
-				this.closeBinaryDataDisplay();
-				if (this.binaryData.length > 0) {
-					this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: 'binary'});
-				}
-				else if (this.displayMode === 'binary') {
-					this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: 'table'});
-				}
-			},
-			closeBinaryDataDisplay () {
-				this.binaryDataDisplayVisible = false;
-				this.binaryDataDisplayData = null;
-			},
-			clearExecutionData () {
-				this.workflowsStore.setWorkflowExecutionData(null);
-				this.updateNodesExecutionIssues();
-			},
-			isViewable (index: number, key: string): boolean {
-				const { fileType } = this.binaryData[index][key];
-				return !!fileType && ['image', 'video', 'text', 'json'].includes(fileType);
-			},
-			isDownloadable (index: number, key: string): boolean {
-				const { mimeType, fileName } = this.binaryData[index][key];
-				return !!(mimeType && fileName);
-			},
-			async downloadBinaryData (index: number, key: string) {
-				const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
-
-				if(id) {
-					const url = this.restApi().getBinaryUrl(id);
-					saveAs(url, [fileName, fileExtension].join('.'));
-					return;
-				} else {
-					const bufferString = 'data:' + mimeType + ';base64,' + data;
-					const blob = await fetch(bufferString).then(d => d.blob());
-					saveAs(blob, fileName);
-				}
-			},
-			displayBinaryData (index: number, key: string) {
-				this.binaryDataDisplayVisible = true;
-
-				this.binaryDataDisplayData = {
-					node: this.node!.name,
-					runIndex: this.runIndex,
-					outputIndex: this.currentOutputIndex,
-					index,
-					key,
-				};
-			},
-			getOutputName (outputIndex: number) {
-				if (this.node === null) {
-					return outputIndex + 1;
-				}
-
-				const nodeType = this.nodeType;
-				if (!nodeType || !nodeType.outputNames || nodeType.outputNames.length <= outputIndex) {
-					return outputIndex + 1;
-				}
-
-				return nodeType.outputNames[outputIndex];
-			},
-			refreshDataSize () {
-				// Hide by default the data from being displayed
-				this.showData = false;
-
-				// Check how much data there is to display
-				const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
-
-				const offset = this.pageSize * (this.currentPage - 1);
-				const jsonItems = inputData.slice(offset, offset + this.pageSize).map(item => item.json);
-
-				this.dataSize = JSON.stringify(jsonItems).length;
-
-				if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
-					// Data is reasonable small (< 200kb) so display it directly
-					this.showData = true;
-				}
-			},
-			onRunIndexChange(run: number) {
-				this.$emit('runChange', run);
-			},
-			enableNode() {
-				if (this.node) {
-					const updateInformation = {
-						name: this.node.name,
-						properties: {
-							disabled: !this.node.disabled,
-						} as IDataObject,
-					} as INodeUpdatePropertiesInformation;
-
-					this.workflowsStore.updateNodeProperties(updateInformation);
-				}
-			},
-			goToErroredNode() {
-				if (this.node) {
-					this.ndvStore.activeNodeName = this.node.name;
-				}
-			},
+			immediate: true,
+			deep: true,
 		},
-		watch: {
-			node() {
-				this.init();
-			},
-			inputData:{
-				handler(data: INodeExecutionData[]) {
-					if(this.paneType && data){
-						this.ndvStore.setNDVPanelDataIsEmpty({ panel: this.paneType as "input" | "output", isEmpty: data.every(item => isEmpty(item.json)) });
-					}
-				},
-				immediate: true,
-				deep: true,
-			},
-			jsonData (value: IDataObject[]) {
-				this.refreshDataSize();
+		jsonData(value: IDataObject[]) {
+			this.refreshDataSize();
 
-				const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
-				if (!hasSeenPinDataTooltip) {
-					this.showPinDataDiscoveryTooltip(value);
-				}
-			},
-			binaryData (newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
-				if (newData.length && !prevData.length && this.displayMode !== 'binary') {
-					this.switchToBinary();
-				}
-				else if (!newData.length && this.displayMode === 'binary') {
-					this.onDisplayModeChange('table');
-				}
-			},
-			currentOutputIndex(branchIndex: number) {
-				this.ndvStore.setNDVBranchIndex({
-					pane: this.paneType as "input" | "output",
-					branchIndex,
-				});
-			},
+			const hasSeenPinDataTooltip = localStorage.getItem(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG);
+			if (!hasSeenPinDataTooltip) {
+				this.showPinDataDiscoveryTooltip(value);
+			}
 		},
-	});
+		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
+			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
+				this.switchToBinary();
+			} else if (!newData.length && this.displayMode === 'binary') {
+				this.onDisplayModeChange('table');
+			}
+		},
+		currentOutputIndex(branchIndex: number) {
+			this.ndvStore.setNDVBranchIndex({
+				pane: this.paneType as 'input' | 'output',
+				branchIndex,
+			});
+		},
+	},
+});
 </script>
 
 <style lang="scss" module>
@@ -1236,7 +1369,7 @@ export default mixins(
 	position: relative;
 	height: 100%;
 
-	&:hover{
+	&:hover {
 		.actions-group {
 			opacity: 1;
 		}
@@ -1315,7 +1448,6 @@ export default mixins(
 	font-size: var(--font-size-2xs);
 }
 
-
 .binaryCell {
 	display: inline-block;
 	width: 300px;
@@ -1428,5 +1560,4 @@ export default mixins(
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/RunDataJson.test.ts b/packages/editor-ui/src/components/RunDataJson.test.ts
index 8b3bcf70a8..f2e30956c6 100644
--- a/packages/editor-ui/src/components/RunDataJson.test.ts
+++ b/packages/editor-ui/src/components/RunDataJson.test.ts
@@ -13,17 +13,19 @@ describe('RunDataJson.vue', () => {
 			props: {
 				mappingEnabled: true,
 				editMode: { enabled: false },
-				inputData: [{
-					json: {
-						list: [1,2,3],
-						record: { name: 'Joe' },
-						myNumber: 123,
-						myStringNumber: '456',
-						myStringText: 'abc',
-						nil: null,
-						d: undefined,
+				inputData: [
+					{
+						json: {
+							list: [1, 2, 3],
+							record: { name: 'Joe' },
+							myNumber: 123,
+							myStringNumber: '456',
+							myStringText: 'abc',
+							nil: null,
+							d: undefined,
+						},
 					},
-				}],
+				],
 				node: {
 					parameters: {
 						keepOnlySet: false,
@@ -34,10 +36,7 @@ describe('RunDataJson.vue', () => {
 					name: 'Set',
 					type: 'n8n-nodes-base.set',
 					typeVersion: 1,
-					position: [
-						380,
-						1060,
-					],
+					position: [380, 1060],
 					disabled: false,
 				},
 			},
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 73461dffcb..37901caeef 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -19,7 +19,11 @@
 		>
 			<template #preview="{ canDrop, el }">
 				<div :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]">
-					{{ $locale.baseText('dataMapping.mapKeyToField', { interpolate: { name: getShortKey(el) } }) }}
+					{{
+						$locale.baseText('dataMapping.mapKeyToField', {
+							interpolate: { name: getShortKey(el) },
+						})
+					}}
 				</div>
 			</template>
 			<template>
@@ -33,17 +37,18 @@
 					class="json-data"
 				>
 					<template #nodeKey="{ node }">
-					<span
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="node.key"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-					>"{{ node.key }}"</span>
+						<span
+							data-target="mappable"
+							:data-value="getJsonParameterPath(node.path)"
+							:data-name="node.key"
+							:data-path="node.path"
+							:data-depth="node.level"
+							:class="{
+								[$style.mappable]: mappingEnabled,
+								[$style.dragged]: draggingPath === node.path,
+							}"
+							>"{{ node.key }}"</span
+						>
 					</template>
 					<template #nodeValue="{ node }">
 						<span v-if="isNaN(node.index)">{{ getContent(node.content) }}</span>
@@ -55,10 +60,11 @@
 							:data-path="node.path"
 							:data-depth="node.level"
 							:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-						>{{ getContent(node.content) }}</span>
+								[$style.mappable]: mappingEnabled,
+								[$style.dragged]: draggingPath === node.path,
+							}"
+							>{{ getContent(node.content) }}</span
+						>
 					</template>
 				</vue-json-pretty>
 			</template>
@@ -67,17 +73,17 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "vue";
-import mixins from "vue-typed-mixins";
+import { PropType } from 'vue';
+import mixins from 'vue-typed-mixins';
 import VueJsonPretty from 'vue-json-pretty';
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
-import { IDataObject, INodeExecutionData } from "n8n-workflow";
+import { IDataObject, INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
 import { convertPath, executionDataToJson, isString, shorten } from '@/utils';
-import { INodeUi } from "@/Interface";
-import { externalHooks } from "@/mixins/externalHooks";
-import { mapStores } from "pinia";
-import { useNDVStore } from "@/stores/ndv";
+import { INodeUi } from '@/Interface';
+import { externalHooks } from '@/mixins/externalHooks';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
 
 const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
 
@@ -90,7 +96,7 @@ export default mixins(externalHooks).extend({
 	},
 	props: {
 		editMode: {
-			type: Object as () => { enabled?: boolean; value?: string; },
+			type: Object as () => { enabled?: boolean; value?: string },
 		},
 		sessionId: {
 			type: String,
@@ -146,9 +152,7 @@ export default mixins(externalHooks).extend({
 		}
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-		),
+		...mapStores(useNDVStore),
 		jsonData(): IDataObject[] {
 			return executionDataToJson(this.inputData);
 		},
@@ -170,7 +174,10 @@ export default mixins(externalHooks).extend({
 		},
 		getJsonParameterPath(path: string): string {
 			const convertedPath = convertPath(path);
-			return `{{ ${ convertedPath.replace(/^(\["?\d"?])/, this.distanceFromActive === 1 ? '$json' : `$node["${ this.node!.name }"].json`) } }}`;
+			return `{{ ${convertedPath.replace(
+				/^(\["?\d"?])/,
+				this.distanceFromActive === 1 ? '$json' : `$node["${this.node!.name}"].json`,
+			)} }}`;
 		},
 		onDragStart(el: HTMLElement) {
 			if (el && el.dataset.path) {
@@ -203,7 +210,7 @@ export default mixins(externalHooks).extend({
 			}, 1000); // ensure dest data gets set if drop
 		},
 		getContent(value: unknown): string {
-			return isString(value) ? `"${ value }"` : JSON.stringify(value);
+			return isString(value) ? `"${value}"` : JSON.stringify(value);
 		},
 		getListItemName(path: string): string {
 			return path.replace(/^(\["?\d"?]\.?)/g, '');
@@ -270,7 +277,6 @@ export default mixins(externalHooks).extend({
 	transform: translate(-50%, -100%);
 	box-shadow: 0 2px 6px rgba(68, 28, 23, 0.2);
 }
-
 </style>
 
 <style lang="scss">
@@ -304,27 +310,30 @@ export default mixins(externalHooks).extend({
 	}
 }
 
-
 .vjs-tree .vjs-value-null {
-	&, span {
+	&,
+	span {
 		color: var(--color-json-null);
 	}
 }
 
 .vjs-tree .vjs-value-boolean {
-	&, span {
+	&,
+	span {
 		color: var(--color-json-boolean);
 	}
 }
 
 .vjs-tree .vjs-value-number {
-	&, span {
+	&,
+	span {
 		color: var(--color-json-number);
 	}
 }
 
 .vjs-tree .vjs-value-string {
-	&, span {
+	&,
+	span {
 		color: var(--color-json-string);
 	}
 }
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index 9b8827eb7b..37972d0303 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -11,13 +11,13 @@
 			</span>
 			<template #dropdown>
 				<el-dropdown-menu>
-					<el-dropdown-item :command="{command: 'value'}">
+					<el-dropdown-item :command="{ command: 'value' }">
 						{{ $locale.baseText('runData.copyValue') }}
 					</el-dropdown-item>
-					<el-dropdown-item :command="{command: 'itemPath'}" divided>
+					<el-dropdown-item :command="{ command: 'itemPath' }" divided>
 						{{ $locale.baseText('runData.copyItemPath') }}
 					</el-dropdown-item>
-					<el-dropdown-item :command="{command: 'parameterPath'}">
+					<el-dropdown-item :command="{ command: 'parameterPath' }">
 						{{ $locale.baseText('runData.copyParameterPath') }}
 					</el-dropdown-item>
 				</el-dropdown-menu>
@@ -27,19 +27,19 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "vue";
-import mixins from "vue-typed-mixins";
-import jp from "jsonpath";
-import { INodeUi } from "@/Interface";
-import { IDataObject } from "n8n-workflow";
-import { copyPaste } from "@/mixins/copyPaste";
-import { pinData } from "@/mixins/pinData";
-import { nodeHelpers } from "@/mixins/nodeHelpers";
-import { genericHelpers } from "@/mixins/genericHelpers";
+import { PropType } from 'vue';
+import mixins from 'vue-typed-mixins';
+import jp from 'jsonpath';
+import { INodeUi } from '@/Interface';
+import { IDataObject } from 'n8n-workflow';
+import { copyPaste } from '@/mixins/copyPaste';
+import { pinData } from '@/mixins/pinData';
+import { nodeHelpers } from '@/mixins/nodeHelpers';
+import { genericHelpers } from '@/mixins/genericHelpers';
 import { clearJsonKey, convertPath, executionDataToJson } from '@/utils';
-import { mapStores } from "pinia";
-import { useWorkflowsStore } from "@/stores/workflows";
-import { useNDVStore } from "@/stores/ndv";
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
 
 type JsonPathData = {
 	path: string;
@@ -49,12 +49,7 @@ type JsonPathData = {
 // A path that does not exist so that nothing is selected by default
 const nonExistingJsonPath = '_!^&*';
 
-export default mixins(
-	genericHelpers,
-	nodeHelpers,
-	pinData,
-	copyPaste,
-).extend({
+export default mixins(genericHelpers, nodeHelpers, pinData, copyPaste).extend({
 	name: 'run-data-json-actions',
 	props: {
 		node: {
@@ -88,10 +83,7 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useWorkflowsStore),
 		activeNode(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
@@ -102,12 +94,14 @@ export default mixins(
 	},
 	methods: {
 		getJsonValue(): string {
-			let selectedValue = jp.query(this.jsonData, `$${ this.normalisedJsonPath }`)[0];
+			let selectedValue = jp.query(this.jsonData, `$${this.normalisedJsonPath}`)[0];
 			if (this.selectedJsonPath === nonExistingJsonPath) {
 				if (this.hasPinData) {
 					selectedValue = clearJsonKey(this.pinData as object);
 				} else {
-					selectedValue = executionDataToJson(this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex));
+					selectedValue = executionDataToJson(
+						this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex),
+					);
 				}
 			}
 
@@ -128,14 +122,14 @@ export default mixins(
 			const pathParts = newPath.split(']');
 			const index = pathParts[0].slice(1);
 			path = pathParts.slice(1).join(']');
-			startPath = `$item(${ index }).$node["${ this.node!.name }"].json`;
+			startPath = `$item(${index}).$node["${this.node!.name}"].json`;
 
 			return { path, startPath };
 		},
 		getJsonParameterPath(): JsonPathData {
 			const newPath = convertPath(this.normalisedJsonPath);
 			const path = newPath.split(']').slice(1).join(']');
-			let startPath = `$node["${ this.node!.name }"].json`;
+			let startPath = `$node["${this.node!.name}"].json`;
 
 			if (this.distanceFromActive === 1) {
 				startPath = `$json`;
@@ -183,7 +177,7 @@ export default mixins(
 				if (!path.startsWith('[') && !path.startsWith('.') && path) {
 					path += '.';
 				}
-				value = `{{ ${ startPath + path } }}`;
+				value = `{{ ${startPath + path} }}`;
 			}
 
 			const copyType = {
diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts
index a37a626597..f9c5fe295d 100644
--- a/packages/editor-ui/src/components/RunDataSchema.test.ts
+++ b/packages/editor-ui/src/components/RunDataSchema.test.ts
@@ -2,7 +2,7 @@ import { PiniaVuePlugin } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
 import { render, cleanup } from '@testing-library/vue';
 import RunDataJsonSchema from '@/components/RunDataSchema.vue';
-import { STORES } from "@/constants";
+import { STORES } from '@/constants';
 
 describe('RunDataJsonSchema.vue', () => {
 	const renderOptions = {
@@ -34,10 +34,7 @@ describe('RunDataJsonSchema.vue', () => {
 				name: 'Set',
 				type: 'n8n-nodes-base.set',
 				typeVersion: 1,
-				position: [
-					380,
-					1060,
-				],
+				position: [380, 1060],
 				disabled: false,
 			},
 			data: [{}],
@@ -47,19 +44,20 @@ describe('RunDataJsonSchema.vue', () => {
 	beforeEach(cleanup);
 
 	it('renders schema for empty data', () => {
-		const { container } = render(RunDataJsonSchema, renderOptions,
-			vue => {
-				vue.use(PiniaVuePlugin);
-			});
+		const { container } = render(RunDataJsonSchema, renderOptions, (vue) => {
+			vue.use(PiniaVuePlugin);
+		});
 		expect(container).toMatchSnapshot();
 	});
 
 	it('renders schema for data', () => {
-		renderOptions.props.data = [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }];
-		const { container } = render(RunDataJsonSchema, renderOptions,
-			vue => {
-				vue.use(PiniaVuePlugin);
-			});
+		renderOptions.props.data = [
+			{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] },
+			{ name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] },
+		];
+		const { container } = render(RunDataJsonSchema, renderOptions, (vue) => {
+			vue.use(PiniaVuePlugin);
+		});
 		expect(container).toMatchSnapshot();
 	});
 });
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index ccacb4d2d4..eccf66d6fa 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -1,24 +1,24 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { INodeUi, Schema } from "@/Interface";
-import RunDataSchemaItem from "@/components/RunDataSchemaItem.vue";
+import { INodeUi, Schema } from '@/Interface';
+import RunDataSchemaItem from '@/components/RunDataSchemaItem.vue';
 import Draggable from '@/components/Draggable.vue';
-import { useNDVStore } from "@/stores/ndv";
-import { useWebhooksStore } from "@/stores/webhooks";
-import { runExternalHook } from "@/mixins/externalHooks";
-import { telemetry } from "@/plugins/telemetry";
-import { IDataObject } from "n8n-workflow";
-import { getSchema, isEmpty, mergeDeep } from "@/utils";
+import { useNDVStore } from '@/stores/ndv';
+import { useWebhooksStore } from '@/stores/webhooks';
+import { runExternalHook } from '@/mixins/externalHooks';
+import { telemetry } from '@/plugins/telemetry';
+import { IDataObject } from 'n8n-workflow';
+import { getSchema, isEmpty, mergeDeep } from '@/utils';
 import { i18n } from '@/plugins/i18n';
 
 type Props = {
-	data: IDataObject[]
-	mappingEnabled: boolean
-	distanceFromActive: number
-	runIndex: number
-	totalRuns: number
-	node: INodeUi | null
-}
+	data: IDataObject[];
+	mappingEnabled: boolean;
+	distanceFromActive: number;
+	runIndex: number;
+	totalRuns: number;
+	node: INodeUi | null;
+};
 
 const props = withDefaults(defineProps<Props>(), {
 	distanceFromActive: 0,
@@ -67,12 +67,13 @@ const onDragEnd = (el: HTMLElement) => {
 		telemetry.track('User dragged data for mapping', telemetryPayload);
 	}, 1000); // ensure dest data gets set if drop
 };
-
 </script>
 
 <template>
 	<div :class="$style.schemaWrapper">
-		<n8n-info-tip v-if="isDataEmpty">{{ i18n.baseText('dataMapping.schemaView.emptyData') }}</n8n-info-tip>
+		<n8n-info-tip v-if="isDataEmpty">{{
+			i18n.baseText('dataMapping.schemaView.emptyData')
+		}}</n8n-info-tip>
 		<draggable
 			v-else
 			type="mapping"
@@ -82,7 +83,11 @@ const onDragEnd = (el: HTMLElement) => {
 			@dragend="onDragEnd"
 		>
 			<template #preview="{ canDrop, el }">
-				<div v-if="el" :class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]" v-html="el.outerHTML" />
+				<div
+					v-if="el"
+					:class="[$style.dragPill, canDrop ? $style.droppablePill : $style.defaultPill]"
+					v-html="el.outerHTML"
+				/>
 			</template>
 			<template>
 				<div :class="$style.schema">
@@ -116,7 +121,7 @@ const onDragEnd = (el: HTMLElement) => {
 	width: 100%;
 	background-color: var(--color-background-base);
 
-	> div[class*="info"] {
+	> div[class*='info'] {
 		padding: 0 var(--spacing-s);
 	}
 }
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 411e6bdd2c..a8a9dfbdbc 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -1,30 +1,42 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { INodeUi, Schema } from "@/Interface";
-import { checkExhaustive, shorten } from "@/utils";
+import { INodeUi, Schema } from '@/Interface';
+import { checkExhaustive, shorten } from '@/utils';
 
 type Props = {
-	schema: Schema
-	level: number
-	parent: Schema | null
-	subKey: string
-	mappingEnabled: boolean
-	draggingPath: string
-	distanceFromActive: number
-	node: INodeUi | null
-}
+	schema: Schema;
+	level: number;
+	parent: Schema | null;
+	subKey: string;
+	mappingEnabled: boolean;
+	draggingPath: string;
+	distanceFromActive: number;
+	node: INodeUi | null;
+};
 
 const props = defineProps<Props>();
 
 const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
 const isSchemaParentTypeArray = computed(() => props.parent?.type === 'array');
-const isFlat = computed(() => props.level === 0 && Array.isArray(props.schema.value) && props.schema.value.every(v => !Array.isArray(v.value)));
-const key = computed((): string | undefined => isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key);
-const schemaName = computed(() => isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key);
-const text = computed(() => Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0));
+const isFlat = computed(
+	() =>
+		props.level === 0 &&
+		Array.isArray(props.schema.value) &&
+		props.schema.value.every((v) => !Array.isArray(v.value)),
+);
+const key = computed((): string | undefined =>
+	isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key,
+);
+const schemaName = computed(() =>
+	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
+);
+const text = computed(() =>
+	Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
+);
 
-const getJsonParameterPath = (path: string): string => `{{ ${props.distanceFromActive === 1 ? '$json' : `$node["${ props.node!.name }"].json`}${path} }}`;
-const transitionDelay = (i:number) => `${i * 0.033}s`;
+const getJsonParameterPath = (path: string): string =>
+	`{{ ${props.distanceFromActive === 1 ? '$json' : `$node["${props.node!.name}"].json`}${path} }}`;
+const transitionDelay = (i: number) => `${i * 0.033}s`;
 
 const getIconBySchemaType = (type: Schema['type']): string => {
 	switch (type) {
@@ -51,13 +63,12 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 
 	checkExhaustive(type);
 };
-
 </script>
 
 <template>
 	<div :class="$style.item">
 		<div
-			v-if="level > 0 || level === 0 && !isSchemaValueArray"
+			v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
 			:title="schema.type"
 			:class="{
 				[$style.pill]: true,
@@ -73,9 +84,9 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				:data-depth="level"
 				data-target="mappable"
 			>
-				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm"/>
+				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm" />
 				<span v-if="isSchemaParentTypeArray">{{ parent.key }}</span>
-				<span v-if="key" :class="{[$style.arrayIndex]: isSchemaParentTypeArray}">{{ key }}</span>
+				<span v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }">{{ key }}</span>
 			</span>
 		</div>
 		<span v-if="text" :class="$style.text">{{ text }}</span>
@@ -83,8 +94,9 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
 			<font-awesome-icon icon="angle-up" />
 		</label>
-		<div v-if="isSchemaValueArray" :class="{[$style.sub]: true, [$style.flat]: isFlat}">
-			<run-data-schema-item v-for="(s, i) in schema.value"
+		<div v-if="isSchemaValueArray" :class="{ [$style.sub]: true, [$style.flat]: isFlat }">
+			<run-data-schema-item
+				v-for="(s, i) in schema.value"
 				:key="`${s.type}-${level}-${i}`"
 				:schema="s"
 				:level="level + 1"
@@ -94,7 +106,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				:draggingPath="draggingPath"
 				:distanceFromActive="distanceFromActive"
 				:node="node"
-				:style="{transitionDelay: transitionDelay(i)}"
+				:style="{ transitionDelay: transitionDelay(i) }"
 			/>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index cbe7fe420a..1929904959 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -5,7 +5,11 @@
 				<th :class="$style.emptyCell"></th>
 				<th :class="$style.tableRightMargin"></th>
 			</tr>
-			<tr v-for="(row, index1) in tableData.data" :key="index1" :class="{[$style.hoveringRow]: isHoveringRow(index1)}">
+			<tr
+				v-for="(row, index1) in tableData.data"
+				:key="index1"
+				:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+			>
 				<td
 					:data-row="index1"
 					:data-col="0"
@@ -21,14 +25,10 @@
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip
-							placement="bottom-start"
-							:disabled="!mappingEnabled"
-							:open-delay="1000"
-						>
+						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :open-delay="1000">
 							<template #content>
 								<div>
-									<img src='/static/data-mapping-gif.gif'/>
+									<img src="/static/data-mapping-gif.gif" />
 									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
 								</div>
 							</template>
@@ -55,7 +55,8 @@
 										:class="{
 											[$style.header]: true,
 											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.activeHeader]:
+												(i === activeColumn || forceShowGrip) && mappingEnabled,
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
@@ -75,13 +76,18 @@
 									<i18n path="dataMapping.tableView.tableColumnsExceeded.tooltip">
 										<template #columnLimit>{{ columnLimit }}</template>
 										<template #link>
-										  <a @click="switchToJsonView">{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link') }}</a>
+											<a @click="switchToJsonView">{{
+												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
+											}}</a>
 										</template>
 									</i18n>
 								</div>
 							</template>
 							<span>
-								<font-awesome-icon :class="$style['warningTooltip']" icon="exclamation-triangle"></font-awesome-icon>
+								<font-awesome-icon
+									:class="$style['warningTooltip']"
+									icon="exclamation-triangle"
+								></font-awesome-icon>
 								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
 							</span>
 						</n8n-tooltip>
@@ -113,7 +119,11 @@
 					</div>
 				</template>
 				<template>
-					<tr v-for="(row, index1) in tableData.data" :key="index1" :class="{[$style.hoveringRow]: isHoveringRow(index1)}">
+					<tr
+						v-for="(row, index1) in tableData.data"
+						:key="index1"
+						:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+					>
 						<td
 							v-for="(data, index2) in row"
 							:key="index2"
@@ -123,7 +133,11 @@
 							@mouseleave="onMouseLeaveCell"
 							:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
 						>
-							<span v-if="isSimple(data)" :class="{[$style.value]: true, [$style.empty]: isEmpty(data)}">{{ getValueToRender(data) }}</span>
+							<span
+								v-if="isSimple(data)"
+								:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
+								>{{ getValueToRender(data) }}</span
+							>
 							<n8n-tree :nodeClass="$style.nodeClass" v-else :value="data">
 								<template #label="{ label, path }">
 									<span
@@ -230,14 +244,11 @@ export default mixins(externalHooks).extend({
 		}
 	},
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useWorkflowsStore),
 		hoveringItem(): NDVState['hoveringItem'] {
 			return this.ndvStore.hoveringItem;
 		},
-		pairedItemMappings(): {[itemId: string]: Set<string>} {
+		pairedItemMappings(): { [itemId: string]: Set<string> } {
 			return this.workflowsStore.workflowExecutionPairedItemMappings;
 		},
 		tableData(): ITableData {
@@ -255,15 +266,30 @@ export default mixins(externalHooks).extend({
 			}
 
 			const itemIndex = this.pageOffset + row;
-			if (itemIndex === 0 && !this.hoveringItem && this.hasDefaultHoverState && this.distanceFromActive === 1) {
+			if (
+				itemIndex === 0 &&
+				!this.hoveringItem &&
+				this.hasDefaultHoverState &&
+				this.distanceFromActive === 1
+			) {
 				return true;
 			}
-			const itemNodeId = getPairedItemId(this.node.name, this.runIndex || 0, this.outputIndex || 0, itemIndex);
+			const itemNodeId = getPairedItemId(
+				this.node.name,
+				this.runIndex || 0,
+				this.outputIndex || 0,
+				itemIndex,
+			);
 			if (!this.hoveringItem || !this.pairedItemMappings[itemNodeId]) {
 				return false;
 			}
 
-			const hoveringItemId = getPairedItemId(this.hoveringItem.nodeName, this.hoveringItem.runIndex, this.hoveringItem.outputIndex, this.hoveringItem.itemIndex);
+			const hoveringItemId = getPairedItemId(
+				this.hoveringItem.nodeName,
+				this.hoveringItem.runIndex,
+				this.hoveringItem.outputIndex,
+				this.hoveringItem.itemIndex,
+			);
 			return this.pairedItemMappings[itemNodeId].has(hoveringItemId);
 		},
 		onMouseEnterCell(e: MouseEvent) {
@@ -353,7 +379,8 @@ export default mixins(externalHooks).extend({
 				value === '' ||
 				(Array.isArray(value) && value.length === 0) ||
 				(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
-				(value === null || value === undefined)
+				value === null ||
+				value === undefined
 			);
 		},
 		getValueToRender(value: unknown) {
@@ -423,9 +450,12 @@ export default mixins(externalHooks).extend({
 			}, 1000); // ensure dest data gets set if drop
 		},
 		isSimple(data: unknown): boolean {
-			return (typeof data !== 'object' || data === null) ||
+			return (
+				typeof data !== 'object' ||
+				data === null ||
 				(Array.isArray(data) && data.length === 0) ||
-				(typeof data === 'object' && Object.keys(data).length === 0);
+				(typeof data === 'object' && Object.keys(data).length === 0)
+			);
 		},
 		hasJsonInColumn(colIndex: number): boolean {
 			return this.tableData.hasJson[this.tableData.columns[colIndex]];
@@ -447,7 +477,7 @@ export default mixins(externalHooks).extend({
 				entryRows = [];
 				const entryColumns = Object.keys(entry || {});
 
-				if(entryColumns.length > MAX_COLUMNS_LIMIT) {
+				if (entryColumns.length > MAX_COLUMNS_LIMIT) {
 					this.columnLimitExceeded = true;
 					leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
 				} else {
@@ -502,7 +532,7 @@ export default mixins(externalHooks).extend({
 				data: tableData,
 			};
 		},
-		switchToJsonView(){
+		switchToJsonView() {
 			this.$emit('displayModeChange', 'json');
 		},
 	},
@@ -559,11 +589,13 @@ export default mixins(externalHooks).extend({
 		white-space: pre-wrap;
 	}
 
-	td:first-child, td:nth-last-child(2) {
+	td:first-child,
+	td:nth-last-child(2) {
 		position: relative;
 		z-index: 0;
 
-		&:after { // add border without shifting content
+		&:after {
+			// add border without shifting content
 			content: '';
 			position: absolute;
 			height: 100%;
@@ -707,7 +739,8 @@ export default mixins(externalHooks).extend({
 }
 
 .hoveringRow {
-	td:first-child:after, td:nth-last-child(2):after {
+	td:first-child:after,
+	td:nth-last-child(2):after {
 		background-color: var(--color-secondary);
 	}
 }
@@ -715,5 +748,4 @@ export default mixins(externalHooks).extend({
 .warningTooltip {
 	color: var(--color-warning);
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/SaveButton.vue b/packages/editor-ui/src/components/SaveButton.vue
index 6cf9a4db30..81f5f5e4bd 100644
--- a/packages/editor-ui/src/components/SaveButton.vue
+++ b/packages/editor-ui/src/components/SaveButton.vue
@@ -17,7 +17,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	name: "SaveButton",
+	name: 'SaveButton',
 	props: {
 		saved: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue
index c01d0cbc85..fbe88e2187 100644
--- a/packages/editor-ui/src/components/ScopesNotice.vue
+++ b/packages/editor-ui/src/components/ScopesNotice.vue
@@ -1,8 +1,5 @@
 <template>
-	<n8n-notice
-		:content="scopesShortContent"
-		:fullContent="scopesFullContent"
-	/>
+	<n8n-notice :content="scopesShortContent" :fullContent="scopesFullContent" />
 </template>
 
 <script lang="ts">
@@ -12,45 +9,35 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'ScopesNotice',
-	props: [
-		'activeCredentialType',
-		'scopes',
-	],
+	props: ['activeCredentialType', 'scopes'],
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-		),
-		scopesShortContent (): string {
-			return this.$locale.baseText(
-				'nodeSettings.scopes.notice',
-				{
-					adjustToNumber: this.scopes.length,
-					interpolate: {
-						activeCredential: this.shortCredentialDisplayName,
-					},
+		...mapStores(useCredentialsStore),
+		scopesShortContent(): string {
+			return this.$locale.baseText('nodeSettings.scopes.notice', {
+				adjustToNumber: this.scopes.length,
+				interpolate: {
+					activeCredential: this.shortCredentialDisplayName,
 				},
-			);
+			});
 		},
-		scopesFullContent (): string {
-			return this.$locale.baseText(
-				'nodeSettings.scopes.expandedNoticeWithScopes',
-				{
-					adjustToNumber: this.scopes.length,
-					interpolate: {
-						activeCredential: this.shortCredentialDisplayName,
-						scopes: this.scopes.map(
-							(s: string) => s.includes('/') ? s.split('/').pop() : s,
-						).join('<br>'),
-					},
+		scopesFullContent(): string {
+			return this.$locale.baseText('nodeSettings.scopes.expandedNoticeWithScopes', {
+				adjustToNumber: this.scopes.length,
+				interpolate: {
+					activeCredential: this.shortCredentialDisplayName,
+					scopes: this.scopes
+						.map((s: string) => (s.includes('/') ? s.split('/').pop() : s))
+						.join('<br>'),
 				},
-			);
+			});
 		},
-		shortCredentialDisplayName (): string {
+		shortCredentialDisplayName(): string {
 			const oauth1Api = this.$locale.baseText('generic.oauth1Api');
 			const oauth2Api = this.$locale.baseText('generic.oauth2Api');
 
-			return this.credentialsStore.getCredentialTypeByName(this.activeCredentialType).displayName
-				.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
+			return this.credentialsStore
+				.getCredentialTypeByName(this.activeCredentialType)
+				.displayName.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
 				.trim();
 		},
 	},
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 3e4359d178..de609f3c64 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -24,7 +24,7 @@
 import mixins from 'vue-typed-mixins';
 import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
 import { userHelpers } from '@/mixins/userHelpers';
-import { pushConnection } from "@/mixins/pushConnection";
+import { pushConnection } from '@/mixins/pushConnection';
 import { IFakeDoor } from '@/Interface';
 import { IMenuItem } from 'n8n-design-system';
 import { BaseTextKey } from '@/plugins/i18n';
@@ -33,22 +33,14 @@ import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
 
-export default mixins(
-	userHelpers,
-	pushConnection,
-).extend({
+export default mixins(userHelpers, pushConnection).extend({
 	name: 'SettingsSidebar',
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUIStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUIStore),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
 			return this.uiStore.getFakeDoorByLocation('settings');
 		},
 		sidebarMenuItems(): IMenuItem[] {
-
 			const menuItems: IMenuItem[] = [
 				{
 					id: 'settings-personal',
@@ -56,7 +48,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.personal'),
 					position: 'top',
 					available: this.canAccessPersonalSettings(),
-					activateOnRouteNames: [ VIEWS.PERSONAL_SETTINGS ],
+					activateOnRouteNames: [VIEWS.PERSONAL_SETTINGS],
 				},
 				{
 					id: 'settings-users',
@@ -64,7 +56,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.users'),
 					position: 'top',
 					available: this.canAccessUsersSettings(),
-					activateOnRouteNames: [ VIEWS.USERS_SETTINGS ],
+					activateOnRouteNames: [VIEWS.USERS_SETTINGS],
 				},
 				{
 					id: 'settings-api',
@@ -72,7 +64,7 @@ export default mixins(
 					label: this.$locale.baseText('settings.n8napi'),
 					position: 'top',
 					available: this.canAccessApiSettings(),
-					activateOnRouteNames: [ VIEWS.API_SETTINGS ],
+					activateOnRouteNames: [VIEWS.API_SETTINGS],
 				},
 			];
 
@@ -84,21 +76,19 @@ export default mixins(
 						label: this.$locale.baseText(item.featureName as BaseTextKey),
 						position: 'top',
 						available: true,
-						activateOnRoutePaths: [ `/settings/coming-soon/${item.id}` ],
+						activateOnRoutePaths: [`/settings/coming-soon/${item.id}`],
 					});
 				}
 			}
 
-			menuItems.push(
-				{
-					id: 'settings-community-nodes',
-					icon: 'cube',
-					label: this.$locale.baseText('settings.communityNodes'),
-					position: 'top',
-					available: this.canAccessCommunityNodes(),
-					activateOnRouteNames: [ VIEWS.COMMUNITY_NODES ],
-				},
-			);
+			menuItems.push({
+				id: 'settings-community-nodes',
+				icon: 'cube',
+				label: this.$locale.baseText('settings.communityNodes'),
+				position: 'top',
+				available: this.canAccessCommunityNodes(),
+				activateOnRouteNames: [VIEWS.COMMUNITY_NODES],
+			});
 
 			return menuItems;
 		},
@@ -125,7 +115,7 @@ export default mixins(
 		openUpdatesPanel() {
 			this.uiStore.openModal(VERSIONS_MODAL_KEY);
 		},
-		async handleSelect (key: string) {
+		async handleSelect(key: string) {
 			switch (key) {
 				case 'settings-personal':
 					if (this.$router.currentRoute.name !== VIEWS.PERSONAL_SETTINGS) {
@@ -161,7 +151,6 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
-
 .container {
 	min-width: $sidebar-expanded-width;
 	height: 100vh;
@@ -169,7 +158,6 @@ export default mixins(
 	border-right: var(--border-base);
 	position: relative;
 	overflow: auto;
-
 }
 
 .returnButton {
@@ -181,6 +169,9 @@ export default mixins(
 }
 
 @media screen and (max-height: 420px) {
-	.updatesSubmenu, .versionContainer { display: none; }
+	.updatesSubmenu,
+	.versionContainer {
+		display: none;
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/ShortenName.vue b/packages/editor-ui/src/components/ShortenName.vue
index b629f22374..0d7cf9aa62 100644
--- a/packages/editor-ui/src/components/ShortenName.vue
+++ b/packages/editor-ui/src/components/ShortenName.vue
@@ -5,18 +5,22 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import { shorten } from "@/utils";
+import Vue from 'vue';
+import { shorten } from '@/utils';
 
 const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
 const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
 
 export default Vue.extend({
-	name: "ShortenName",
-	props: ["name", "limit", "testId"],
+	name: 'ShortenName',
+	props: ['name', 'limit', 'testId'],
 	computed: {
 		shortenedName(): string {
-			return shorten(this.name, this.limit || DEFAULT_WORKFLOW_NAME_LIMIT, WORKFLOW_NAME_END_COUNT_TO_KEEP);
+			return shorten(
+				this.name,
+				this.limit || DEFAULT_WORKFLOW_NAME_LIMIT,
+				WORKFLOW_NAME_END_COUNT_TO_KEEP,
+			);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 66b5351706..cddb9799d3 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -1,7 +1,11 @@
 <template>
 	<div class="sticky-wrapper" :style="stickyPosition" :id="nodeId" ref="sticky">
 		<div
-			:class="{'sticky-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}"
+			:class="{
+				'sticky-default': true,
+				'touch-active': isTouchActive,
+				'is-touch-device': isTouchDevice,
+			}"
 			:style="stickySize"
 		>
 			<div class="select-sticky-background" v-show="isSelected" />
@@ -33,7 +37,7 @@
 			</div>
 
 			<div v-show="showActions" class="sticky-options no-select-on-click">
-				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')" >
+				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')">
 					<font-awesome-icon icon="trash" />
 				</div>
 			</div>
@@ -50,12 +54,14 @@ import { nodeBase } from '@/mixins/nodeBase';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { getStyleTokenValue, isNumber, isString } from '@/utils';
-import { INodeUi, INodeUpdatePropertiesInformation, IUpdateInformation, XYPosition } from '@/Interface';
-
 import {
-	IDataObject,
-	INodeTypeDescription,
-} from 'n8n-workflow';
+	INodeUi,
+	INodeUpdatePropertiesInformation,
+	IUpdateInformation,
+	XYPosition,
+} from '@/Interface';
+
+import { IDataObject, INodeTypeDescription } from 'n8n-workflow';
 import { QUICKSTART_NOTE_NAME } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
@@ -74,13 +80,8 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
-		defaultText (): string {
+		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
+		defaultText(): string {
 			if (!this.nodeType) {
 				return '';
 			}
@@ -89,16 +90,20 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 			return content && isString(content.default) ? content.default : '';
 		},
-		isSelected (): boolean {
-			return this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !== undefined;
+		isSelected(): boolean {
+			return (
+				this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !==
+				undefined
+			);
 		},
-		nodeType (): INodeTypeDescription | null {
+		nodeType(): INodeTypeDescription | null {
 			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
 		},
-		node (): INodeUi | null { // same as this.data but reactive..
+		node(): INodeUi | null {
+			// same as this.data but reactive..
 			return this.workflowsStore.getNodeByName(this.name);
 		},
-		position (): XYPosition {
+		position(): XYPosition {
 			if (this.node) {
 				return this.node.position;
 			} else {
@@ -106,10 +111,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			}
 		},
 		height(): number {
-			return this.node && isNumber(this.node.parameters.height)? this.node.parameters.height : 0;
+			return this.node && isNumber(this.node.parameters.height) ? this.node.parameters.height : 0;
 		},
 		width(): number {
-			return this.node && isNumber(this.node.parameters.width)? this.node.parameters.width : 0;
+			return this.node && isNumber(this.node.parameters.width) ? this.node.parameters.width : 0;
 		},
 		stickySize(): object {
 			const returnStyles: {
@@ -121,7 +126,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 			return returnStyles;
 		},
-		stickyPosition (): object {
+		stickyPosition(): object {
 			const returnStyles: {
 				[key: string]: string | number;
 			} = {
@@ -135,18 +140,18 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		showActions(): boolean {
 			return !(this.hideActions || this.isReadOnly || this.workflowRunning || this.isResizing);
 		},
-		workflowRunning (): boolean {
+		workflowRunning(): boolean {
 			return this.uiStore.isActionActive('workflowRunning');
 		},
 	},
-	data () {
+	data() {
 		return {
 			isResizing: false,
 			isTouchActive: false,
 		};
 	},
 	methods: {
-		deleteNode () {
+		deleteNode() {
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
 				this.$emit('removeNode', this.data.name);
@@ -155,22 +160,26 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		onEdit(edit: boolean) {
 			if (edit && !this.isActive && this.node) {
 				this.ndvStore.activeNodeName = this.node.name;
-			}
-			else if (this.isActive && !edit) {
+			} else if (this.isActive && !edit) {
 				this.ndvStore.activeNodeName = null;
 			}
 		},
-		onMarkdownClick ( link:HTMLAnchorElement, event: Event ) {
+		onMarkdownClick(link: HTMLAnchorElement, event: Event) {
 			if (link) {
 				const isOnboardingNote = this.name === QUICKSTART_NOTE_NAME;
 				const isWelcomeVideo = link.querySelector('img[alt="n8n quickstart video"');
-				const type = isOnboardingNote && isWelcomeVideo ? 'welcome_video' : isOnboardingNote && link.getAttribute('href') === '/templates' ? 'templates' : 'other';
+				const type =
+					isOnboardingNote && isWelcomeVideo
+						? 'welcome_video'
+						: isOnboardingNote && link.getAttribute('href') === '/templates'
+						? 'templates'
+						: 'other';
 
-				this.$telemetry.track('User clicked note link', { type } );
+				this.$telemetry.track('User clicked note link', { type });
 			}
 		},
 		onInputChange(content: string) {
-			this.setParameters({content});
+			this.setParameters({ content });
 		},
 		onResizeStart() {
 			this.isResizing = true;
@@ -181,7 +190,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				this.instance.destroyDraggable(this.node.id); // todo avoid destroying if possible
 			}
 		},
-		onResize({height, width, dX, dY}:  { width: number, height: number, dX: number, dY: number }) {
+		onResize({ height, width, dX, dY }: { width: number; height: number; dX: number; dY: number }) {
 			if (!this.node) {
 				return;
 			}
@@ -195,7 +204,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			this.isResizing = false;
 			this.__makeInstanceDraggable(this.data);
 		},
-		setParameters(params: {content?: string, height?: number, width?: number}) {
+		setParameters(params: { content?: string; height?: number; width?: number }) {
 			if (this.node) {
 				const nodeParameters = {
 					content: isString(params.content) ? params.content : this.node.parameters.content,
@@ -226,7 +235,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 			this.workflowsStore.updateNodeProperties(updateInformation);
 		},
-		touchStart () {
+		touchStart() {
 			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
 				this.isTouchActive = true;
 				setTimeout(() => {
@@ -236,7 +245,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		},
 	},
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -300,7 +308,12 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 .select-sticky-background {
 	display: block;
 	position: absolute;
-	background-color: hsla(var(--color-foreground-base-h), var(--color-foreground-base-s), var(--color-foreground-base-l), 60%);
+	background-color: hsla(
+		var(--color-foreground-base-h),
+		var(--color-foreground-base-s),
+		var(--color-foreground-base-l),
+		60%
+	);
 	border-radius: var(--border-radius-xlarge);
 	overflow: hidden;
 	height: calc(100% + 16px);
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index 13af6381cb..15c0a8a06d 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -1,11 +1,16 @@
 <template>
-	<IntersectionObserver :threshold="1.0" @observed="onObserved" class="tags-container" :enabled="responsive">
+	<IntersectionObserver
+		:threshold="1.0"
+		@observed="onObserved"
+		class="tags-container"
+		:enabled="responsive"
+	>
 		<template>
 			<span class="tags">
 				<span
 					v-for="tag in tags"
 					:key="tag.id"
-					:class="{clickable: !tag.hidden}"
+					:class="{ clickable: !tag.hidden }"
 					@click="(e) => onClick(e, tag)"
 				>
 					<el-tag
@@ -18,17 +23,12 @@
 						{{ tag.name }}
 					</el-tag>
 					<IntersectionObserved
-						:class="{hidden: tag.hidden}"
+						:class="{ hidden: tag.hidden }"
 						:data-id="tag.id"
 						:enabled="responsive"
 						v-else
 					>
-						<el-tag
-							:title="tag.name"
-							type="info"
-							size="small"
-							:class="{hoverable}"
-						>
+						<el-tag :title="tag.name" type="info" size="small" :class="{ hoverable }">
 							{{ tag.name }}
 						</el-tag>
 					</IntersectionObserved>
@@ -59,34 +59,33 @@ interface TagEl extends ITag {
 export default Vue.extend({
 	components: { IntersectionObserver, IntersectionObserved },
 	name: 'TagsContainer',
-	props: [
-		"tagIds",
-		"limit",
-		"clickable",
-		"responsive",
-		"hoverable",
-	],
+	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
 	data() {
 		return {
-			visibility: {} as {[id: string]: boolean},
+			visibility: {} as { [id: string]: boolean },
 		};
 	},
 	computed: {
-		...mapStores(
-			useTagsStore,
-		),
+		...mapStores(useTagsStore),
 		tags() {
-			const tags = this.$props.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
+			const tags = this.$props.tagIds
+				.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag has been deleted from store
 
 			const limit = this.$props.limit || DEFAULT_MAX_TAGS_LIMIT;
 
 			let toDisplay: TagEl[] = limit ? tags.slice(0, limit) : tags;
-			toDisplay = toDisplay.map((tag: ITag) => ({...tag, hidden: this.$props.responsive && !this.$data.visibility[tag.id]}));
+			toDisplay = toDisplay.map((tag: ITag) => ({
+				...tag,
+				hidden: this.$props.responsive && !this.$data.visibility[tag.id],
+			}));
 
 			let visibleCount = toDisplay.length;
 			if (this.$props.responsive) {
-				visibleCount = Object.values(this.visibility).reduce((accu, val) => val ? accu + 1 : accu, 0);
+				visibleCount = Object.values(this.visibility).reduce(
+					(accu, val) => (val ? accu + 1 : accu),
+					0,
+				);
 			}
 
 			if (visibleCount < tags.length) {
@@ -108,7 +107,7 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onObserved({el, isIntersecting}: {el: HTMLElement, isIntersecting: boolean}) {
+		onObserved({ el, isIntersecting }: { el: HTMLElement; isIntersecting: boolean }) {
 			if (el.dataset.id) {
 				Vue.set(this.$data.visibility, el.dataset.id, isIntersecting);
 			}
@@ -128,31 +127,31 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-	.tags-container {
-		display: inline-flex;
-		overflow: hidden;
-	}
+.tags-container {
+	display: inline-flex;
+	overflow: hidden;
+}
 
-	.tags {
-		display: flex;
+.tags {
+	display: flex;
 
-		> span {
-			padding-right: 4px; // why not margin? for space between tags to be clickable
-		}
+	> span {
+		padding-right: 4px; // why not margin? for space between tags to be clickable
 	}
+}
 
-	.hidden {
-		visibility: hidden;
-	}
+.hidden {
+	visibility: hidden;
+}
 
-	.el-tag.hoverable:hover {
-		border-color: $color-primary;
-	}
+.el-tag.hoverable:hover {
+	border-color: $color-primary;
+}
 
-	.count-container {
-		position: absolute;
-		max-width: 40px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
+.count-container {
+	position: absolute;
+	max-width: 40px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
 </style>
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 4e6cac4157..44908094fa 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{'tags-container': true, focused}" @keydown.stop v-click-outside="onClickOutside">
+	<div :class="{ 'tags-container': true, focused }" @keydown.stop v-click-outside="onClickOutside">
 		<n8n-select
 			:popperAppendToBody="false"
 			:value="appliedTags"
@@ -30,7 +30,9 @@
 			</n8n-option>
 			<n8n-option v-else-if="options.length === 0" value="message" disabled>
 				<span v-if="createEnabled">{{ $locale.baseText('tagsDropdown.typeToCreateATag') }}</span>
-				<span v-else-if="allTags.length > 0">{{ $locale.baseText('tagsDropdown.noMatchingTagsExist') }}</span>
+				<span v-else-if="allTags.length > 0">{{
+					$locale.baseText('tagsDropdown.noMatchingTagsExist')
+				}}</span>
 				<span v-else>{{ $locale.baseText('tagsDropdown.noTagsExist') }}</span>
 			</n8n-option>
 
@@ -53,25 +55,25 @@
 </template>
 
 <script lang="ts">
-import mixins from "vue-typed-mixins";
+import mixins from 'vue-typed-mixins';
 
-import { ITag } from "@/Interface";
-import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
+import { ITag } from '@/Interface';
+import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from '@/constants';
 
-import { showMessage } from "@/mixins/showMessage";
-import { mapStores } from "pinia";
-import { useUIStore } from "@/stores/ui";
-import { useTagsStore } from "@/stores/tags";
+import { showMessage } from '@/mixins/showMessage';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useTagsStore } from '@/stores/tags';
 
-const MANAGE_KEY = "__manage";
-const CREATE_KEY = "__create";
+const MANAGE_KEY = '__manage';
+const CREATE_KEY = '__create';
 
 export default mixins(showMessage).extend({
-	name: "TagsDropdown",
-	props: ["placeholder", "currentTagIds", "createEnabled", "eventBus"],
+	name: 'TagsDropdown',
+	props: ['placeholder', 'currentTagIds', 'createEnabled', 'eventBus'],
 	data() {
 		return {
-			filter: "",
+			filter: '',
 			MANAGE_KEY,
 			CREATE_KEY,
 			focused: false,
@@ -80,9 +82,11 @@ export default mixins(showMessage).extend({
 	},
 	mounted() {
 		// @ts-ignore
-		const select = (this.$refs.select && this.$refs.select.$refs && this.$refs.select.$refs.innerSelect) as (Vue | undefined);
+		const select = (this.$refs.select &&
+			this.$refs.select.$refs &&
+			this.$refs.select.$refs.innerSelect) as Vue | undefined;
 		if (select) {
-			const input = select.$refs.input as (Element | undefined);
+			const input = select.$refs.input as Element | undefined;
 			if (input) {
 				input.setAttribute('maxlength', `${MAX_TAG_NAME_LENGTH}`);
 				input.addEventListener('keydown', (e: Event) => {
@@ -90,8 +94,7 @@ export default mixins(showMessage).extend({
 					// events don't bubble outside of select, so need to hook onto input
 					if (keyboardEvent.key === 'Escape') {
 						this.$emit('esc');
-					}
-					else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) {
+					} else if (keyboardEvent.key === 'Enter' && this.filter.length === 0) {
 						this.$data.preventUpdate = true;
 						this.$emit('blur');
 
@@ -115,10 +118,7 @@ export default mixins(showMessage).extend({
 		this.tagsStore.fetchAll();
 	},
 	computed: {
-		...mapStores(
-			useTagsStore,
-			useUIStore,
-		),
+		...mapStores(useTagsStore, useUIStore),
 		allTags(): ITag[] {
 			return this.tagsStore.allTags;
 		},
@@ -126,19 +126,16 @@ export default mixins(showMessage).extend({
 			return this.tagsStore.hasTags;
 		},
 		options(): ITag[] {
-			return this.allTags
-				.filter((tag: ITag) =>
-					tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()),
-				);
+			return this.allTags.filter(
+				(tag: ITag) => tag && tag.name.toLowerCase().includes(this.$data.filter.toLowerCase()),
+			);
 		},
 		appliedTags(): string[] {
-			return this.$props.currentTagIds.filter((id: string) =>
-				this.tagsStore.getTagById(id),
-			);
+			return this.$props.currentTagIds.filter((id: string) => this.tagsStore.getTagById(id));
 		},
 	},
 	methods: {
-		filterOptions(filter = "") {
+		filterOptions(filter = '') {
 			this.$data.filter = filter.trim();
 			this.$nextTick(() => this.focusOnTopOption());
 		},
@@ -146,34 +143,29 @@ export default mixins(showMessage).extend({
 			const name = this.$data.filter;
 			try {
 				const newTag = await this.tagsStore.create(name);
-				this.$emit("update", [...this.$props.currentTagIds, newTag.id]);
+				this.$emit('update', [...this.$props.currentTagIds, newTag.id]);
 				this.$nextTick(() => this.focusOnTag(newTag.id));
 
-				this.$data.filter = "";
+				this.$data.filter = '';
 			} catch (error) {
 				this.$showError(
 					error,
 					this.$locale.baseText('tagsDropdown.showError.title'),
-					this.$locale.baseText(
-						'tagsDropdown.showError.message',
-						{ interpolate: { name } },
-					),
+					this.$locale.baseText('tagsDropdown.showError.message', { interpolate: { name } }),
 				);
 			}
 		},
 		onTagsUpdated(selected: string[]) {
-			const ops = selected.find(
-				(value) => value === MANAGE_KEY || value === CREATE_KEY,
-			);
+			const ops = selected.find((value) => value === MANAGE_KEY || value === CREATE_KEY);
 			if (ops === MANAGE_KEY) {
-				this.$data.filter = "";
+				this.$data.filter = '';
 				this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
 			} else if (ops === CREATE_KEY) {
 				this.onCreate();
 			} else {
 				setTimeout(() => {
 					if (!this.$data.preventUpdate) {
-						this.$emit("update", selected);
+						this.$emit('update', selected);
 					}
 					this.$data.preventUpdate = false;
 				}, 0);
@@ -200,7 +192,7 @@ export default mixins(showMessage).extend({
 			}
 		},
 		focusOnInput() {
-			const select = (this.$refs.select) as (Vue | undefined);
+			const select = this.$refs.select as Vue | undefined;
 			if (select) {
 				// @ts-ignore
 				select.focusOnInput();
@@ -211,8 +203,7 @@ export default mixins(showMessage).extend({
 			if (!visible) {
 				this.$data.filter = '';
 				this.focused = false;
-			}
-			else {
+			} else {
 				this.focused = true;
 			}
 		},
@@ -232,7 +223,7 @@ export default mixins(showMessage).extend({
 			// keep applied tags in sync with store
 			// for example in case tag is deleted from store
 			if (this.currentTagIds.length !== this.appliedTags.length) {
-				this.$emit("update", this.appliedTags);
+				this.$emit('update', this.appliedTags);
 			}
 		},
 	},
@@ -310,7 +301,7 @@ $--max-input-height: 60px;
 		}
 
 		&:after {
-			content: " ";
+			content: ' ';
 			display: block;
 			min-height: $--item-height;
 			width: $--dropdown-width;
@@ -347,7 +338,8 @@ $--max-input-height: 60px;
 				text-overflow: ellipsis;
 			}
 
-			&:after { // selected check
+			&:after {
+				// selected check
 				font-size: $--item-font-size !important;
 			}
 		}
diff --git a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
index 9aa79a533d..ed54497024 100644
--- a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
@@ -3,7 +3,9 @@
 		<el-col class="notags" :span="16">
 			<div class="icon">🗄️</div>
 			<div>
-				<div class="headline">{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}</div>
+				<div class="headline">
+					{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
+				</div>
 				<div class="description">
 					{{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
 				</div>
@@ -14,7 +16,6 @@
 </template>
 
 <script lang="ts">
-
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -42,18 +43,18 @@ $--footer-spacing: 45px;
 }
 
 .icon {
-  font-size: 36px;
-  line-height: 14px;
+	font-size: 36px;
+	line-height: 14px;
 }
 
 .headline {
-  font-size: 17.6px;
-  color: black;
-  margin-bottom: 12px;
+	font-size: 17.6px;
+	color: black;
+	margin-bottom: 12px;
 }
 
 .description {
-  font-size: 14px;
-  line-height: 21px;
+	font-size: 14px;
+	line-height: 21px;
 }
 </style>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index aaa332247d..41e5cb220f 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -13,15 +13,12 @@
 					v-if="hasTags || isCreating"
 					:isLoading="isLoading"
 					:tags="tags"
-
 					@create="onCreate"
 					@update="onUpdate"
 					@delete="onDelete"
 					@disableCreate="onDisableCreate"
 				/>
-				<NoTagsView
-					@enableCreate="onEnableCreate"
-					v-else />
+				<NoTagsView @enableCreate="onEnableCreate" v-else />
 			</el-row>
 		</template>
 		<template #footer="{ close }">
@@ -31,23 +28,23 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import mixins from "vue-typed-mixins";
+import Vue from 'vue';
+import mixins from 'vue-typed-mixins';
 
-import { ITag } from "@/Interface";
+import { ITag } from '@/Interface';
 
-import { showMessage } from "@/mixins/showMessage";
-import TagsView from "@/components/TagsManager/TagsView/TagsView.vue";
-import NoTagsView from "@/components/TagsManager/NoTagsView.vue";
-import Modal from "@/components/Modal.vue";
+import { showMessage } from '@/mixins/showMessage';
+import TagsView from '@/components/TagsManager/TagsView/TagsView.vue';
+import NoTagsView from '@/components/TagsManager/NoTagsView.vue';
+import Modal from '@/components/Modal.vue';
 import { TAGS_MANAGER_MODAL_KEY } from '../../constants';
-import { mapStores } from "pinia";
-import { useTagsStore } from "@/stores/tags";
+import { mapStores } from 'pinia';
+import { useTagsStore } from '@/stores/tags';
 
 export default mixins(showMessage).extend({
-	name: "TagsManager",
+	name: 'TagsManager',
 	created() {
-		this.tagsStore.fetchAll({force: true, withUsageCount: true});
+		this.tagsStore.fetchAll({ force: true, withUsageCount: true });
 	},
 	data() {
 		const tagIds = useTagsStore().allTags.map((tag) => tag.id);
@@ -64,14 +61,13 @@ export default mixins(showMessage).extend({
 		Modal,
 	},
 	computed: {
-		...mapStores(
-			useTagsStore,
-		),
+		...mapStores(useTagsStore),
 		isLoading(): boolean {
 			return this.tagsStore.isLoading;
 		},
 		tags(): ITag[] {
-			return this.$data.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
+			return this.$data.tagIds
+				.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag is deleted from store
 		},
 		hasTags(): boolean {
@@ -90,9 +86,7 @@ export default mixins(showMessage).extend({
 		async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) {
 			try {
 				if (!name) {
-					throw new Error(
-						this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'),
-					);
+					throw new Error(this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'));
 				}
 
 				const newTag = await this.tagsStore.create(name);
@@ -103,10 +97,9 @@ export default mixins(showMessage).extend({
 				this.$showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onCreate.title'),
-					this.$locale.baseText(
-						'tagsManager.showError.onCreate.message',
-						{ interpolate: { escapedName } },
-					) + ':',
+					this.$locale.baseText('tagsManager.showError.onCreate.message', {
+						interpolate: { escapedName },
+					}) + ':',
 				);
 				cb(null, error);
 			}
@@ -118,9 +111,7 @@ export default mixins(showMessage).extend({
 
 			try {
 				if (!name) {
-					throw new Error(
-						this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'),
-					);
+					throw new Error(this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'));
 				}
 
 				if (name === oldName) {
@@ -133,17 +124,16 @@ export default mixins(showMessage).extend({
 
 				this.$showMessage({
 					title: this.$locale.baseText('tagsManager.showMessage.onUpdate.title'),
-					type: "success",
+					type: 'success',
 				});
 			} catch (error) {
 				const escapedName = escape(oldName);
 				this.$showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onUpdate.title'),
-					this.$locale.baseText(
-						'tagsManager.showError.onUpdate.message',
-						{ interpolate: { escapedName } },
-					) + ':',
+					this.$locale.baseText('tagsManager.showError.onUpdate.message', {
+						interpolate: { escapedName },
+					}) + ':',
 				);
 				cb(false, error);
 			}
@@ -156,9 +146,7 @@ export default mixins(showMessage).extend({
 			try {
 				const deleted = await this.tagsStore.delete(id);
 				if (!deleted) {
-					throw new Error(
-						this.$locale.baseText('tagsManager.couldNotDeleteTag'),
-					);
+					throw new Error(this.$locale.baseText('tagsManager.couldNotDeleteTag'));
 				}
 
 				this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id);
@@ -167,17 +155,16 @@ export default mixins(showMessage).extend({
 
 				this.$showMessage({
 					title: this.$locale.baseText('tagsManager.showMessage.onDelete.title'),
-					type: "success",
+					type: 'success',
 				});
 			} catch (error) {
 				const escapedName = escape(name);
 				this.$showError(
 					error,
 					this.$locale.baseText('tagsManager.showError.onDelete.title'),
-					this.$locale.baseText(
-						'tagsManager.showError.onDelete.message',
-						{ interpolate: { escapedName } },
-					) + ':',
+					this.$locale.baseText('tagsManager.showError.onDelete.message', {
+						interpolate: { escapedName },
+					}) + ':',
 				);
 				cb(false, error);
 			}
@@ -186,15 +173,12 @@ export default mixins(showMessage).extend({
 		onEnter() {
 			if (this.isLoading) {
 				return;
-			}
-			else if (!this.hasTags) {
+			} else if (!this.hasTags) {
 				this.onEnableCreate();
-			}
-			else {
+			} else {
 				this.modalBus.$emit('close');
 			}
 		},
 	},
 });
 </script>
-
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index a546994d9f..7b663d630e 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -34,30 +34,69 @@
 		<el-table-column :label="$locale.baseText('tagsTable.usage')" width="150">
 			<template #default="scope">
 				<transition name="fade" mode="out-in">
-						<div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }">
-							{{ scope.row.usage }}
-						</div>
-					</transition>
-				</template>
+					<div
+						v-if="!scope.row.create && !scope.row.delete"
+						:class="{ disabled: scope.row.disable }"
+					>
+						{{ scope.row.usage }}
+					</div>
+				</transition>
+			</template>
 		</el-table-column>
 		<el-table-column>
 			<template #default="scope">
 				<transition name="fade" mode="out-in">
 					<div class="ops" v-if="scope.row.create">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
-						<n8n-button :label="$locale.baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" />
+						<n8n-button
+							:label="$locale.baseText('tagsTable.cancel')"
+							@click.stop="cancel"
+							type="secondary"
+							:disabled="isSaving"
+						/>
+						<n8n-button
+							:label="$locale.baseText('tagsTable.createTag')"
+							@click.stop="apply"
+							:loading="isSaving"
+						/>
 					</div>
 					<div class="ops" v-else-if="scope.row.update">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
-						<n8n-button :label="$locale.baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" />
+						<n8n-button
+							:label="$locale.baseText('tagsTable.cancel')"
+							@click.stop="cancel"
+							type="secondary"
+							:disabled="isSaving"
+						/>
+						<n8n-button
+							:label="$locale.baseText('tagsTable.saveChanges')"
+							@click.stop="apply"
+							:loading="isSaving"
+						/>
 					</div>
 					<div class="ops" v-else-if="scope.row.delete">
-						<n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="secondary" :disabled="isSaving" />
-						<n8n-button :label="$locale.baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" />
+						<n8n-button
+							:label="$locale.baseText('tagsTable.cancel')"
+							@click.stop="cancel"
+							type="secondary"
+							:disabled="isSaving"
+						/>
+						<n8n-button
+							:label="$locale.baseText('tagsTable.deleteTag')"
+							@click.stop="apply"
+							:loading="isSaving"
+						/>
 					</div>
 					<div class="ops main" v-else-if="!scope.row.disable">
-						<n8n-icon-button :title="$locale.baseText('tagsTable.editTag')" @click.stop="enableUpdate(scope.row)" icon="pen" />
-						<n8n-icon-button v-if="scope.row.canDelete" :title="$locale.baseText('tagsTable.deleteTag')" @click.stop="enableDelete(scope.row)" icon="trash" />
+						<n8n-icon-button
+							:title="$locale.baseText('tagsTable.editTag')"
+							@click.stop="enableUpdate(scope.row)"
+							icon="pen"
+						/>
+						<n8n-icon-button
+							v-if="scope.row.canDelete"
+							:title="$locale.baseText('tagsTable.deleteTag')"
+							@click.stop="enableDelete(scope.row)"
+							icon="trash"
+						/>
 					</div>
 				</transition>
 			</template>
@@ -66,16 +105,16 @@
 </template>
 
 <script lang="ts">
-import { MAX_TAG_NAME_LENGTH } from "@/constants";
-import { ITagRow } from "@/Interface";
-import Vue from "vue";
+import { MAX_TAG_NAME_LENGTH } from '@/constants';
+import { ITagRow } from '@/Interface';
+import Vue from 'vue';
 
 const INPUT_TRANSITION_TIMEOUT = 350;
 const DELETE_TRANSITION_TIMEOUT = 100;
 
 export default Vue.extend({
-	name: "TagsTable",
-	props: ["rows", "isLoading", "newName", "isSaving"],
+	name: 'TagsTable',
+	props: ['rows', 'isLoading', 'newName', 'isSaving'],
 	data() {
 		return {
 			maxLength: MAX_TAG_NAME_LENGTH,
@@ -88,10 +127,10 @@ export default Vue.extend({
 	},
 	methods: {
 		getRowClasses: ({ row }: { row: ITagRow }): string => {
-			return row.disable ? "disabled" : "";
+			return row.disable ? 'disabled' : '';
 		},
 
-		getSpan({ row, columnIndex }: { row: ITagRow, columnIndex: number }): number | number[] {
+		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
 			// expand text column with delete message
 			if (columnIndex === 0 && row.tag && row.delete) {
 				return [1, 2];
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index 44c647704f..a7079d0232 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -15,14 +15,21 @@
 			</n8n-input>
 		</el-col>
 		<el-col :span="14">
-			<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" :label="$locale.baseText('tagsTableHeader.addNew')" size="large" float="right" />
+			<n8n-button
+				@click="onAddNew"
+				:disabled="disabled"
+				icon="plus"
+				:label="$locale.baseText('tagsTableHeader.addNew')"
+				size="large"
+				float="right"
+			/>
 		</el-col>
 	</el-row>
 </template>
 
 <script lang="ts">
-import { MAX_TAG_NAME_LENGTH } from "@/constants";
-import Vue from "vue";
+import { MAX_TAG_NAME_LENGTH } from '@/constants';
+import Vue from 'vue';
 
 export default Vue.extend({
 	props: {
@@ -30,7 +37,7 @@ export default Vue.extend({
 			default: false,
 		},
 		search: {
-			default: "",
+			default: '',
 		},
 	},
 	data() {
@@ -40,10 +47,10 @@ export default Vue.extend({
 	},
 	methods: {
 		onAddNew() {
-			this.$emit("createEnable");
+			this.$emit('createEnable');
 		},
 		onSearchChange(search: string) {
-			this.$emit("searchChange", search);
+			this.$emit('searchChange', search);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index e3da8a5d8b..1348b26519 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -10,43 +10,40 @@
 			:rows="rows"
 			:isLoading="isLoading"
 			:isSaving="isSaving"
-
 			:newName="newName"
 			@newNameChange="onNewNameChange"
-
 			@updateEnable="onUpdateEnable"
 			@deleteEnable="onDeleteEnable"
-
 			@cancelOperation="cancelOperation"
 			@applyOperation="applyOperation"
-
 			ref="tagsTable"
 		/>
 	</div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
 
-import { ITag, ITagRow } from "@/Interface";
-import TagsTableHeader from "@/components/TagsManager/TagsView/TagsTableHeader.vue";
-import TagsTable from "@/components/TagsManager/TagsView/TagsTable.vue";
-import { mapStores } from "pinia";
-import { useUsersStore } from "@/stores/users";
+import { ITag, ITagRow } from '@/Interface';
+import TagsTableHeader from '@/components/TagsManager/TagsView/TagsTableHeader.vue';
+import TagsTable from '@/components/TagsManager/TagsView/TagsTable.vue';
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
-const matches = (name: string, filter: string) => name.toLowerCase().trim().includes(filter.toLowerCase().trim());
+const matches = (name: string, filter: string) =>
+	name.toLowerCase().trim().includes(filter.toLowerCase().trim());
 
 export default Vue.extend({
 	components: { TagsTableHeader, TagsTable },
-	name: "TagsView",
-	props: ["tags", "isLoading"],
+	name: 'TagsView',
+	props: ['tags', 'isLoading'],
 	data() {
 		return {
 			createEnabled: false,
-			deleteId: "",
-			updateId: "",
-			search: "",
-			newName: "",
+			deleteId: '',
+			updateId: '',
+			search: '',
+			newName: '',
 			stickyIds: new Set(),
 			isSaving: false,
 		};
@@ -57,25 +54,26 @@ export default Vue.extend({
 			return (this.$props.tags || []).length === 0 || this.$data.createEnabled;
 		},
 		rows(): ITagRow[] {
-			const getUsage = (count: number | undefined) => count && count > 0
-				? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
-				: this.$locale.baseText('tagsView.notBeingUsed');
+			const getUsage = (count: number | undefined) =>
+				count && count > 0
+					? this.$locale.baseText('tagsView.inUse', { adjustToNumber: count })
+					: this.$locale.baseText('tagsView.notBeingUsed');
 
 			const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
 			const tagRows = (this.$props.tags || [])
 				.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
-				.map((tag: ITag): ITagRow => ({
-					tag,
-					usage: getUsage(tag.usageCount),
-					disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId,
-					update: disabled && tag.id === this.$data.updateId,
-					delete: disabled && tag.id === this.$data.deleteId,
-					canDelete: this.usersStore.canUserDeleteTags,
-				}));
+				.map(
+					(tag: ITag): ITagRow => ({
+						tag,
+						usage: getUsage(tag.usageCount),
+						disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId,
+						update: disabled && tag.id === this.$data.updateId,
+						delete: disabled && tag.id === this.$data.deleteId,
+						canDelete: this.usersStore.canUserDeleteTags,
+					}),
+				);
 
-			return this.isCreateEnabled
-				? [{ create: true }, ...tagRows]
-				: tagRows;
+			return this.isCreateEnabled ? [{ create: true }, ...tagRows] : tagRows;
 		},
 	},
 	methods: {
@@ -97,8 +95,8 @@ export default Vue.extend({
 			this.updateId = updateId;
 		},
 		disableUpdate(): void {
-			this.updateId = "";
-			this.newName = "";
+			this.updateId = '';
+			this.newName = '';
 		},
 		updateTag(): void {
 			this.$data.isSaving = true;
@@ -111,34 +109,34 @@ export default Vue.extend({
 				}
 			};
 
-			this.$emit("update", this.updateId, name, onUpdate);
+			this.$emit('update', this.updateId, name, onUpdate);
 		},
 
 		onDeleteEnable(deleteId: string): void {
 			this.deleteId = deleteId;
 		},
 		disableDelete(): void {
-			this.deleteId = "";
+			this.deleteId = '';
 		},
 		deleteTag(): void {
 			this.$data.isSaving = true;
-			const onDelete =  (deleted: boolean) => {
+			const onDelete = (deleted: boolean) => {
 				if (deleted) {
 					this.disableDelete();
 				}
 				this.$data.isSaving = false;
 			};
 
-			this.$emit("delete", this.deleteId, onDelete);
+			this.$emit('delete', this.deleteId, onDelete);
 		},
 
 		onCreateEnable(): void {
 			this.$data.createEnabled = true;
-			this.$data.newName = "";
+			this.$data.newName = '';
 		},
 		disableCreate(): void {
 			this.$data.createEnabled = false;
-			this.$emit("disableCreate");
+			this.$emit('disableCreate');
 		},
 		createTag(): void {
 			this.$data.isSaving = true;
@@ -151,34 +149,28 @@ export default Vue.extend({
 				this.$data.isSaving = false;
 			};
 
-			this.$emit("create", name, onCreate);
+			this.$emit('create', name, onCreate);
 		},
 
 		applyOperation(): void {
 			if (this.$data.isSaving) {
 				return;
-			}
-			else if (this.isCreateEnabled) {
+			} else if (this.isCreateEnabled) {
 				this.createTag();
-			}
-			else if (this.$data.updateId) {
+			} else if (this.$data.updateId) {
 				this.updateTag();
-			}
-			else if (this.$data.deleteId) {
+			} else if (this.$data.deleteId) {
 				this.deleteTag();
 			}
 		},
 		cancelOperation(): void {
 			if (this.$data.isSaving) {
 				return;
-			}
-			else if (this.isCreateEnabled) {
+			} else if (this.isCreateEnabled) {
 				this.disableCreate();
-			}
-			else if (this.$data.updateId) {
+			} else if (this.$data.updateId) {
 				this.disableUpdate();
-			}
-			else if (this.$data.deleteId) {
+			} else if (this.$data.deleteId) {
 				this.disableDelete();
 			}
 		},
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index 238eab307b..a2084af1bc 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -19,16 +19,14 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUsersStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUsersStore),
 		currentUserId(): string {
 			return this.usersStore.currentUserId || '';
 		},
 		isTelemetryEnabledOnRoute(): boolean {
-			return this.$route.meta && this.$route.meta.telemetry ? !this.$route.meta.telemetry.disabled: true;
+			return this.$route.meta && this.$route.meta.telemetry
+				? !this.$route.meta.telemetry.disabled
+				: true;
 		},
 		telemetry(): ITelemetrySettings {
 			return this.settingsStore.telemetry;
@@ -42,16 +40,18 @@ export default mixins(externalHooks).extend({
 	},
 	methods: {
 		init() {
-			if (this.isTelemetryInitialized || !this.isTelemetryEnabledOnRoute || !this.isTelemetryEnabled) return;
+			if (
+				this.isTelemetryInitialized ||
+				!this.isTelemetryEnabledOnRoute ||
+				!this.isTelemetryEnabled
+			)
+				return;
 
-			this.$telemetry.init(
-				this.telemetry,
-				{
-					instanceId: this.rootStore.instanceId,
-					userId: this.currentUserId,
-					versionCli: this.rootStore.versionCli,
-				},
-			);
+			this.$telemetry.init(this.telemetry, {
+				instanceId: this.rootStore.instanceId,
+				userId: this.currentUserId,
+				versionCli: this.rootStore.versionCli,
+			});
 
 			this.$externalHooks().run('telemetry.currentUserIdChanged', {
 				instanceId: this.rootStore.instanceId,
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 841807af02..7167e183ea 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -1,6 +1,11 @@
 <template>
 	<div
-		:class="[$style.card, lastItem && $style.last, firstItem && $style.first, !loading && $style.loaded]"
+		:class="[
+			$style.card,
+			lastItem && $style.last,
+			firstItem && $style.first,
+			!loading && $style.loaded,
+		]"
 		@click="onCardClick"
 	>
 		<div :class="$style.loading" v-if="loading">
@@ -20,7 +25,9 @@
 					<TimeAgo :date="workflow.createdAt" />
 				</n8n-text>
 				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
-				<n8n-text v-if="workflow.user" size="small" color="text-light">By {{ workflow.user.username }}</n8n-text>
+				<n8n-text v-if="workflow.user" size="small" color="text-light"
+					>By {{ workflow.user.username }}</n8n-text
+				>
 			</div>
 		</div>
 		<div :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]" v-if="!loading">
@@ -172,5 +179,4 @@ export default mixins(genericHelpers).extend({
 	align-items: center;
 	flex-grow: 1;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 08fc8f72ee..814e8e7978 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -72,9 +72,7 @@ export default Vue.extend({
 		TemplateDetailsBlock,
 	},
 	computed: {
-		...mapStores(
-			useTemplatesStore,
-		),
+		...mapStores(useTemplatesStore),
 	},
 	methods: {
 		abbreviateNumber,
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
index 13dbbd39dd..3c8debd1e6 100644
--- a/packages/editor-ui/src/components/TemplateFilters.vue
+++ b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -13,9 +13,7 @@
 				/>
 			</li>
 			<li
-				v-for="category in collapsed
-					? sortedCategories.slice(0, expandLimit)
-					: sortedCategories"
+				v-for="category in collapsed ? sortedCategories.slice(0, expandLimit) : sortedCategories"
 				:key="category.id"
 				:class="$style.item"
 			>
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 10d594c557..8e58021a32 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -93,10 +93,10 @@ export default mixins(genericHelpers).extend({
 			}
 		},
 		onCardClick(event: MouseEvent, id: string) {
-			this.$emit('openTemplate', {event, id});
+			this.$emit('openTemplate', { event, id });
 		},
 		onUseWorkflow(event: MouseEvent, id: string) {
-			this.$emit('useWorkflow', {event, id});
+			this.$emit('useWorkflow', { event, id });
 		},
 	},
 });
@@ -118,5 +118,4 @@ export default mixins(genericHelpers).extend({
 		}
 	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index 7b4b49a052..b1ab63592c 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -1,15 +1,30 @@
 <template>
 	<div v-if="dialogVisible">
-		<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$locale.baseText('textEdit.edit')} ${$locale.nodeText().inputLabelDisplayName(parameter, path)}`" :before-close="closeDialog">
-
+		<el-dialog
+			:visible="dialogVisible"
+			append-to-body
+			width="80%"
+			:title="`${$locale.baseText('textEdit.edit')} ${$locale
+				.nodeText()
+				.inputLabelDisplayName(parameter, path)}`"
+			:before-close="closeDialog"
+		>
 			<div class="ignore-key-press">
 				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
 					<div @keydown.stop @keydown.esc="onKeyDownEsc()">
-						<n8n-input v-model="tempValue" type="textarea" ref="inputField" :value="value" :placeholder="$locale.nodeText().placeholder(parameter, path)" :readOnly="isReadOnly" @change="valueChanged" :rows="15" />
+						<n8n-input
+							v-model="tempValue"
+							type="textarea"
+							ref="inputField"
+							:value="value"
+							:placeholder="$locale.nodeText().placeholder(parameter, path)"
+							:readOnly="isReadOnly"
+							@change="valueChanged"
+							:rows="15"
+						/>
 					</div>
 				</n8n-input-label>
 			</div>
-
 		</el-dialog>
 	</div>
 </template>
@@ -19,49 +34,43 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'TextEdit',
-	props: [
-		'dialogVisible',
-		'parameter',
-		'path',
-		'value',
-		'isReadOnly',
-	],
-	data () {
+	props: ['dialogVisible', 'parameter', 'path', 'value', 'isReadOnly'],
+	data() {
 		return {
 			tempValue: '', // el-input does not seem to work without v-model so add one
 		};
 	},
 	methods: {
-		valueChanged (value: string) {
+		valueChanged(value: string) {
 			this.$emit('valueChanged', value);
 		},
 
-		onKeyDownEsc () {
+		onKeyDownEsc() {
 			// Resetting input value when closing the dialog, required when closing it using the `Esc` key
 			this.tempValue = this.value;
 
 			this.closeDialog();
 		},
 
-		closeDialog () {
+		closeDialog() {
 			// Handle the close externally as the visible parameter is an external prop
 			// and is so not allowed to be changed here.
 			this.$emit('closeDialog');
 			return false;
 		},
 	},
-	mounted () {
+	mounted() {
 		this.tempValue = this.value as string;
 	},
 	watch: {
-		dialogVisible () {
+		dialogVisible() {
 			if (this.dialogVisible === true) {
 				Vue.nextTick(() => {
 					(this.$refs.inputField as HTMLInputElement).focus();
 				});
 			}
 		},
-		value () {
+		value() {
 			this.tempValue = this.value as string;
 		},
 	},
diff --git a/packages/editor-ui/src/components/TimeAgo.vue b/packages/editor-ui/src/components/TimeAgo.vue
index 18f2b12260..fd2a986972 100644
--- a/packages/editor-ui/src/components/TimeAgo.vue
+++ b/packages/editor-ui/src/components/TimeAgo.vue
@@ -33,7 +33,10 @@ export default Vue.extend({
 			return [
 				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
 				[this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
-				[this.$locale.baseText('timeAgo.oneMinuteAgo'), this.$locale.baseText('timeAgo.inOneMinute')],
+				[
+					this.$locale.baseText('timeAgo.oneMinuteAgo'),
+					this.$locale.baseText('timeAgo.inOneMinute'),
+				],
 				[this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
 				[this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
 				[this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
@@ -49,9 +52,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
 		},
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index dd411cab61..a3368937de 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -11,7 +11,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	name: "TitledList",
+	name: 'TitledList',
 	props: {
 		title: {
 			type: String,
@@ -32,7 +32,7 @@ export default Vue.extend({
 		list-style: none;
 		padding-left: var(--spacing-3xs);
 		&::before {
-			content: "- ";
+			content: '- ';
 		}
 	}
 }
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index de6cebe7f6..85668b5afb 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -130,12 +130,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		node(): INodeUi | null {
 			return this.workflowsStore.getNodeByName(this.nodeName);
 		},
@@ -335,8 +330,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 					return this.$locale.baseText('ndv.trigger.webhookBasedNode.activationHint.active', {
 						interpolate: { service: this.serviceName },
 					});
-				}
-				else {
+				} else {
 					return this.$locale.baseText('ndv.trigger.webhookBasedNode.activationHint.inactive', {
 						interpolate: { service: this.serviceName },
 					});
@@ -348,8 +342,7 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 					return this.$locale.baseText('ndv.trigger.pollingNode.activationHint.active', {
 						interpolate: { service: this.serviceName },
 					});
-				}
-				else {
+				} else {
 					return this.$locale.baseText('ndv.trigger.pollingNode.activationHint.inactive', {
 						interpolate: { service: this.serviceName },
 					});
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index 4f4638ba1c..9f0f6ded4f 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -1,9 +1,5 @@
 <template>
-	<ModalDrawer
-		:name="VERSIONS_MODAL_KEY"
-		direction="ltr"
-		width="520px"
-	>
+	<ModalDrawer :name="VERSIONS_MODAL_KEY" direction="ltr" width="520px">
 		<template #header>
 			<span :class="$style.title">
 				{{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
@@ -12,39 +8,33 @@
 		<template #content>
 			<section :class="$style['description']">
 				<p v-if="currentVersion">
-					{{ $locale.baseText(
-						'updatesPanel.youReOnVersion',
-						{ interpolate: { currentVersionName: currentVersion.name } }
-					) }}
-					<strong><TimeAgo :date="currentVersion.createdAt" /></strong>{{ $locale.baseText('updatesPanel.andIs') }} <strong>{{ $locale.baseText(
-							'updatesPanel.version',
-							{
-								interpolate: {
-									numberOfVersions: nextVersions.length,
-									howManySuffix: nextVersions.length > 1 ? "s" : "",
-								}
-							}
-					)}}</strong> {{ $locale.baseText('updatesPanel.behindTheLatest') }}
+					{{
+						$locale.baseText('updatesPanel.youReOnVersion', {
+							interpolate: { currentVersionName: currentVersion.name },
+						})
+					}}
+					<strong><TimeAgo :date="currentVersion.createdAt" /></strong
+					>{{ $locale.baseText('updatesPanel.andIs') }}
+					<strong>{{
+						$locale.baseText('updatesPanel.version', {
+							interpolate: {
+								numberOfVersions: nextVersions.length,
+								howManySuffix: nextVersions.length > 1 ? 's' : '',
+							},
+						})
+					}}</strong>
+					{{ $locale.baseText('updatesPanel.behindTheLatest') }}
 				</p>
 
-				<n8n-link
-					v-if="infoUrl"
-					:to="infoUrl"
-					:bold="true"
-				>
+				<n8n-link v-if="infoUrl" :to="infoUrl" :bold="true">
 					<font-awesome-icon icon="info-circle"></font-awesome-icon>
 					<span>
 						{{ $locale.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
 					</span>
 				</n8n-link>
-
 			</section>
 			<section :class="$style.versions">
-				<div
-					v-for="version in nextVersions"
-					:key="version.name"
-					:class="$style['versions-card']"
-				>
+				<div v-for="version in nextVersions" :key="version.name" :class="$style['versions-card']">
 					<VersionCard :version="version" />
 				</div>
 			</section>
@@ -71,9 +61,7 @@ export default Vue.extend({
 		TimeAgo,
 	},
 	computed: {
-		...mapStores(
-			useVersionsStore,
-		),
+		...mapStores(useVersionsStore),
 		nextVersions(): IVersion[] {
 			return this.versionsStore.nextVersions;
 		},
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 59e3fa7570..db891fcca1 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -88,10 +88,7 @@ export default mixins(workflowHelpers).extend({
 		},
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-		),
+		...mapStores(useRootStore, useSettingsStore),
 		getTitle(): string {
 			if (this.form.value !== '') {
 				if (Number(this.form.value) > 7) {
@@ -140,7 +137,9 @@ export default mixins(workflowHelpers).extend({
 			this.form.value = value;
 			this.showButtons = false;
 
-			const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({ value: this.form.value });
+			const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({
+				value: this.form.value,
+			});
 
 			if (response && response.updated) {
 				this.$telemetry.track('User responded value survey score', {
@@ -151,10 +150,12 @@ export default mixins(workflowHelpers).extend({
 		},
 		async send() {
 			if (this.isEmailValid) {
-				const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({
-					email: this.form.email,
-					value: this.form.value,
-				});
+				const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey(
+					{
+						email: this.form.email,
+						value: this.form.value,
+					},
+				);
 
 				if (response && response.updated) {
 					this.$telemetry.track('User responded value survey email', {
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 93a9496e49..f6b979e6f1 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -1,20 +1,30 @@
 <template>
 	<div @keydown.stop class="variable-selector-wrapper">
 		<div class="input-wrapper">
-			<n8n-input :placeholder="$locale.baseText('variableSelector.variableFilter')" v-model="variableFilter" ref="inputField" size="small" type="text"></n8n-input>
+			<n8n-input
+				:placeholder="$locale.baseText('variableSelector.variableFilter')"
+				v-model="variableFilter"
+				ref="inputField"
+				size="small"
+				type="text"
+			></n8n-input>
 		</div>
 
 		<div class="result-wrapper">
-			<variable-selector-item :item="option" v-for="option in currentResults" :key="option.key" :extendAll="extendAll" @itemSelected="forwardItemSelected"></variable-selector-item>
+			<variable-selector-item
+				:item="option"
+				v-for="option in currentResults"
+				:key="option.key"
+				:extendAll="extendAll"
+				@itemSelected="forwardItemSelected"
+			></variable-selector-item>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
 /* eslint-disable prefer-spread */
-import {
-	PLACEHOLDER_FILLED_AT_EXECUTION_TIME, STICKY_NODE_TYPE,
-} from '@/constants';
+import { PLACEHOLDER_FILLED_AT_EXECUTION_TIME, STICKY_NODE_TYPE } from '@/constants';
 
 import {
 	GenericValue,
@@ -46,696 +56,805 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 
 // Node types that should not be displayed in variable selector
-const SKIPPED_NODE_TYPES = [
-	STICKY_NODE_TYPE,
-];
+const SKIPPED_NODE_TYPES = [STICKY_NODE_TYPE];
 
-export default mixins(
-	workflowHelpers,
-)
-	.extend({
-		name: 'VariableSelector',
-		components: {
-			VariableSelectorItem,
+export default mixins(workflowHelpers).extend({
+	name: 'VariableSelector',
+	components: {
+		VariableSelectorItem,
+	},
+	props: ['path'],
+	data() {
+		return {
+			variableFilter: '',
+			selectorOpenInputIndex: null as number | null,
+		};
+	},
+	computed: {
+		...mapStores(useNDVStore, useRootStore, useWorkflowsStore),
+		extendAll(): boolean {
+			if (this.variableFilter) {
+				return true;
+			}
+
+			return false;
 		},
-		props: [
-			'path',
-		],
-		data () {
-			return {
-				variableFilter: '',
-				selectorOpenInputIndex: null as number | null,
-			};
+		currentResults(): IVariableSelectorOption[] {
+			return this.getFilterResults(this.variableFilter.toLowerCase(), 0);
 		},
-		computed: {
-			...mapStores(
-				useNDVStore,
-				useRootStore,
-				useWorkflowsStore,
-			),
-			extendAll (): boolean {
-				if (this.variableFilter) {
-					return true;
+		workflow(): Workflow {
+			return this.getCurrentWorkflow();
+		},
+	},
+	methods: {
+		forwardItemSelected(eventData: IVariableItemSelected) {
+			this.$emit('itemSelected', eventData);
+		},
+		sortOptions(options: IVariableSelectorOption[] | null): IVariableSelectorOption[] | null {
+			if (options === null) {
+				return null;
+			}
+			return options.sort((a: IVariableSelectorOption, b: IVariableSelectorOption) => {
+				const aHasOptions = a.hasOwnProperty('options');
+				const bHasOptions = b.hasOwnProperty('options');
+
+				if (bHasOptions && !aHasOptions) {
+					// When b has options but a not list it first
+					return 1;
+				} else if (!bHasOptions && aHasOptions) {
+					// When a has options but b not list it first
+					return -1;
 				}
 
-				return false;
-			},
-			currentResults (): IVariableSelectorOption[] {
-				return this.getFilterResults(this.variableFilter.toLowerCase(), 0);
-			},
-			workflow (): Workflow {
-				return this.getCurrentWorkflow();
-			},
-		},
-		methods: {
-			forwardItemSelected (eventData: IVariableItemSelected) {
-				this.$emit('itemSelected', eventData);
-			},
-			sortOptions (options: IVariableSelectorOption[] | null): IVariableSelectorOption[] | null {
-				if (options === null) {
-					return null;
+				// Else simply sort alphabetically
+				if (a.name < b.name) {
+					return -1;
 				}
-				return options.sort((a: IVariableSelectorOption, b: IVariableSelectorOption) => {
-					const aHasOptions = a.hasOwnProperty('options');
-					const bHasOptions = b.hasOwnProperty('options');
-
-					if (bHasOptions && !aHasOptions) {
-						// When b has options but a not list it first
-						return 1;
-					} else if (!bHasOptions && aHasOptions) {
-						// When a has options but b not list it first
-						return -1;
+				if (a.name > b.name) {
+					return 1;
+				}
+				return 0;
+			});
+		},
+		removeEmptyEntries(
+			inputData: IVariableSelectorOption[] | IVariableSelectorOption | null,
+		): IVariableSelectorOption[] | IVariableSelectorOption | null {
+			if (Array.isArray(inputData)) {
+				const newItems: IVariableSelectorOption[] = [];
+				let tempItem: IVariableSelectorOption;
+				inputData.forEach((item) => {
+					tempItem = this.removeEmptyEntries(item) as IVariableSelectorOption;
+					if (tempItem !== null) {
+						newItems.push(tempItem);
 					}
-
-					// Else simply sort alphabetically
-					if (a.name < b.name) { return -1; }
-					if (a.name > b.name) { return 1; }
-					return 0;
 				});
-			},
-			removeEmptyEntries (inputData: IVariableSelectorOption[] | IVariableSelectorOption | null): IVariableSelectorOption[] | IVariableSelectorOption | null {
-				if (Array.isArray(inputData)) {
-					const newItems: IVariableSelectorOption[] = [];
-					let tempItem: IVariableSelectorOption;
-					inputData.forEach((item) => {
-						tempItem = this.removeEmptyEntries(item) as IVariableSelectorOption;
-						if (tempItem !== null) {
-							newItems.push(tempItem);
-						}
-					});
-					return newItems;
-				}
+				return newItems;
+			}
 
-				if (inputData && inputData.options) {
-					const newOptions = this.removeEmptyEntries(inputData.options);
-					if (Array.isArray(newOptions) && newOptions.length) {
-						// Has still options left so return
-						inputData.options = newOptions;
-						return inputData;
-					} else if (Array.isArray(newOptions) && newOptions.length === 0) {
-						delete inputData.options;
-						return inputData;
-					}
-					// Has no options left so remove
-					return null;
-				} else {
-					// Is an item no category
+			if (inputData && inputData.options) {
+				const newOptions = this.removeEmptyEntries(inputData.options);
+				if (Array.isArray(newOptions) && newOptions.length) {
+					// Has still options left so return
+					inputData.options = newOptions;
+					return inputData;
+				} else if (Array.isArray(newOptions) && newOptions.length === 0) {
+					delete inputData.options;
 					return inputData;
 				}
-			},
-			// Normalizes the path so compare paths which have use dots or brakets
-			getPathNormalized (path: string | undefined): string {
-				if (path === undefined) {
-					return '';
-				}
-				const pathArray = path.split('.');
+				// Has no options left so remove
+				return null;
+			} else {
+				// Is an item no category
+				return inputData;
+			}
+		},
+		// Normalizes the path so compare paths which have use dots or brakets
+		getPathNormalized(path: string | undefined): string {
+			if (path === undefined) {
+				return '';
+			}
+			const pathArray = path.split('.');
 
-				const finalArray = [];
-				let item: string;
-				for (const pathPart of pathArray) {
-					const pathParts = pathPart.match(/\[.*?\]/g);
-					if (pathParts === null) {
-						// Does not have any brakets so add as it is
-						finalArray.push(pathPart);
-					} else {
-						// Has brakets so clean up the items and add them
-						if (pathPart.charAt(0) !== '[') {
-							// Does not start with a braket so there is a part before
-							// we have to add
-							finalArray.push(pathPart.substr(0, pathPart.indexOf('[')));
-						}
-
-						for (item of pathParts) {
-							item = item.slice(1, -1);
-							if (['"', "'"].includes(item.charAt(0))) {
-								// Is a string
-								item = item.slice(1, -1);
-								finalArray.push(item);
-							} else {
-								// Is a number
-								finalArray.push(`[${item}]`);
-							}
-						}
-					}
-				}
-
-				return finalArray.join('|');
-			},
-			jsonDataToFilterOption (inputData: IDataObject | GenericValue | IDataObject[] | GenericValue[] | null, parentPath: string, propertyName: string, filterText?: string, propertyIndex?: number, displayName?: string, skipKey?: string): IVariableSelectorOption[] {
-				let fullpath = `${parentPath}["${propertyName}"]`;
-				if (propertyIndex !== undefined) {
-					fullpath += `[${propertyIndex}]`;
-				}
-
-				const returnData: IVariableSelectorOption[] = [];
-				if (inputData === null) {
-					returnData.push(
-						{
-							name: propertyName,
-							key: fullpath,
-							value: '[null]',
-						} as IVariableSelectorOption,
-					);
-					return returnData;
-				} else if (Array.isArray(inputData)) {
-					let newPropertyName = propertyName;
-					let newParentPath = parentPath;
-					if (propertyIndex !== undefined) {
-						newParentPath += `["${propertyName}"]`;
-						newPropertyName = propertyIndex.toString();
-					}
-
-					const arrayData: IVariableSelectorOption[] = [];
-
-					for (let i = 0; i < inputData.length; i++) {
-						arrayData.push.apply(arrayData, this.jsonDataToFilterOption(inputData[i], newParentPath, newPropertyName, filterText, i, `[Item: ${i}]`, skipKey));
-					}
-
-					returnData.push(
-						{
-							name: displayName || propertyName,
-							options: arrayData,
-							key: fullpath,
-							allowParentSelect: true,
-							dataType: 'array',
-						} as IVariableSelectorOption,
-					);
-				} else if (typeof inputData === 'object') {
-					const tempValue: IVariableSelectorOption[] = [];
-
-					for (const key of Object.keys(inputData)) {
-						tempValue.push.apply(tempValue, this.jsonDataToFilterOption((inputData as IDataObject)[key], fullpath, key, filterText, undefined, undefined, skipKey));
-					}
-
-					if (tempValue.length) {
-						returnData.push(
-							{
-								name: displayName || propertyName,
-								options: this.sortOptions(tempValue),
-								key: fullpath,
-								allowParentSelect: true,
-								dataType: 'object',
-							} as IVariableSelectorOption,
-						);
-					}
+			const finalArray = [];
+			let item: string;
+			for (const pathPart of pathArray) {
+				const pathParts = pathPart.match(/\[.*?\]/g);
+				if (pathParts === null) {
+					// Does not have any brakets so add as it is
+					finalArray.push(pathPart);
 				} else {
-					if (filterText !== undefined && propertyName.toLowerCase().indexOf(filterText) === -1) {
-						return returnData;
+					// Has brakets so clean up the items and add them
+					if (pathPart.charAt(0) !== '[') {
+						// Does not start with a braket so there is a part before
+						// we have to add
+						finalArray.push(pathPart.substr(0, pathPart.indexOf('[')));
 					}
 
-					// Skip is currently only needed for leafs so only check here
-					if (this.getPathNormalized(skipKey) !== this.getPathNormalized(fullpath)) {
-						returnData.push(
-							{
-								name: propertyName,
-								key: fullpath,
-								value: inputData,
-							} as IVariableSelectorOption,
-						);
-					}
-				}
-
-				return returnData;
-			},
-
-			/**
-			 * Get the node's output using runData
-			 *
-			 * @param {string} nodeName The name of the node to get the data of
-			 * @param {IRunData} runData The data of the run to get the data of
-			 * @param {string} filterText Filter text for parameters
-			 * @param {number} [itemIndex=0] The index of the item
-			 * @param {number} [runIndex=0] The index of the run
-			 * @param {string} [inputName='main'] The name of the input
-			 * @param {number} [outputIndex=0] The index of the output
-			 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
-			 			 			 */
-			getNodeRunDataOutput(nodeName: string, runData: IRunData, filterText: string, itemIndex = 0, runIndex = 0, inputName = 'main', outputIndex = 0, useShort = false): IVariableSelectorOption[] | null {
-				if (!runData.hasOwnProperty(nodeName)) {
-					// No data found for node
-					return null;
-				}
-
-				if (runData[nodeName].length <= runIndex) {
-					// No data for given runIndex
-					return null;
-				}
-
-				if (!runData[nodeName][runIndex].hasOwnProperty('data') ||
-					runData[nodeName][runIndex].data === null ||
-					runData[nodeName][runIndex].data === undefined) {
-					// Data property does not exist or is not set (even though it normally has to)
-					return null;
-				}
-
-				if (!runData[nodeName][runIndex].data!.hasOwnProperty(inputName)) {
-					// No data found for inputName
-					return null;
-				}
-
-				if (runData[nodeName][runIndex].data![inputName].length <= outputIndex) {
-					// No data found for output Index
-					return null;
-				}
-
-				// The data should be identical no matter to which node it gets so always select the first one
-				if (runData[nodeName][runIndex].data![inputName][outputIndex] === null ||
-					runData[nodeName][runIndex].data![inputName][outputIndex]!.length <= itemIndex) {
-					// No data found for node connection found
-					return null;
-				}
-
-				const outputData = runData[nodeName][runIndex].data![inputName][outputIndex]![itemIndex];
-
-				return this.getNodeOutput(nodeName, outputData, filterText, useShort);
-			},
-
-			/**
-			 * Get the node's output using pinData
-			 *
-			 * @param {string} nodeName The name of the node to get the data of
-			 * @param {IPinData[string]} pinData The node's pin data
-			 * @param {string} filterText Filter text for parameters
-			 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
-			 */
-			getNodePinDataOutput(nodeName: string, pinData: IPinData[string], filterText: string, useShort = false): IVariableSelectorOption[] | null {
-				const outputData = pinData.map((data) => ({ json: data } as INodeExecutionData))[0];
-
-				return this.getNodeOutput(nodeName, outputData, filterText, useShort);
-			},
-
-			/**
-			 * Returns the node's output data
-			 *
-			 * @param {string} nodeName The name of the node to get the data of
-			 * @param {INodeExecutionData} outputData The data of the run to get the data of
-			 * @param {string} filterText Filter text for parameters
-			 * @param {boolean} [useShort=false] Use short notation
-			 */
-			getNodeOutput (nodeName: string, outputData: INodeExecutionData, filterText: string, useShort = false): IVariableSelectorOption[] | null {
-				const returnData: IVariableSelectorOption[] = [];
-
-				// Get json data
-				if (outputData.hasOwnProperty('json')) {
-
-					const jsonPropertyPrefix = useShort === true ? '$json' : `$node["${nodeName}"].json`;
-
-					const jsonDataOptions: IVariableSelectorOption[] = [];
-					for (const propertyName of Object.keys(outputData.json)) {
-						jsonDataOptions.push.apply(jsonDataOptions, this.jsonDataToFilterOption(outputData.json[propertyName], jsonPropertyPrefix, propertyName, filterText));
-					}
-
-					if (jsonDataOptions.length) {
-						returnData.push(
-							{
-								name: 'JSON',
-								options: this.sortOptions(jsonDataOptions),
-							},
-						);
-					}
-				}
-
-				// Get binary data
-				if (outputData.hasOwnProperty('binary')) {
-
-					const binaryPropertyPrefix = useShort === true ? '$binary' : `$node["${nodeName}"].binary`;
-
-					const binaryData = [];
-					let binaryPropertyData = [];
-
-					for (const dataPropertyName of Object.keys(outputData.binary!)) {
-						binaryPropertyData = [];
-						for (const propertyName in outputData.binary![dataPropertyName]) {
-							if (propertyName === 'data') {
-								continue;
-							}
-
-							if (filterText && propertyName.toLowerCase().indexOf(filterText) === -1) {
-								// If filter is set apply it
-								continue;
-							}
-
-							binaryPropertyData.push(
-								{
-									name: propertyName,
-									key: `${binaryPropertyPrefix}.${dataPropertyName}.${propertyName}`,
-									value: outputData.binary![dataPropertyName][propertyName],
-								},
-							);
-						}
-
-						if (binaryPropertyData.length) {
-							binaryData.push(
-								{
-									name: dataPropertyName,
-									key: `${binaryPropertyPrefix}.${dataPropertyName}`,
-									options: this.sortOptions(binaryPropertyData),
-									allowParentSelect: true,
-								},
-							);
+					for (item of pathParts) {
+						item = item.slice(1, -1);
+						if (['"', "'"].includes(item.charAt(0))) {
+							// Is a string
+							item = item.slice(1, -1);
+							finalArray.push(item);
+						} else {
+							// Is a number
+							finalArray.push(`[${item}]`);
 						}
 					}
-					if (binaryData.length) {
-						returnData.push(
-							{
-								name: 'Binary',
-								key: binaryPropertyPrefix,
-								options: this.sortOptions(binaryData),
-								allowParentSelect: true,
-							},
-						);
-					}
 				}
+			}
 
+			return finalArray.join('|');
+		},
+		jsonDataToFilterOption(
+			inputData: IDataObject | GenericValue | IDataObject[] | GenericValue[] | null,
+			parentPath: string,
+			propertyName: string,
+			filterText?: string,
+			propertyIndex?: number,
+			displayName?: string,
+			skipKey?: string,
+		): IVariableSelectorOption[] {
+			let fullpath = `${parentPath}["${propertyName}"]`;
+			if (propertyIndex !== undefined) {
+				fullpath += `[${propertyIndex}]`;
+			}
+
+			const returnData: IVariableSelectorOption[] = [];
+			if (inputData === null) {
+				returnData.push({
+					name: propertyName,
+					key: fullpath,
+					value: '[null]',
+				} as IVariableSelectorOption);
 				return returnData;
-			},
-			getNodeContext (workflow: Workflow, runExecutionData: IRunExecutionData | null, parentNode: string[], nodeName: string, filterText: string): IVariableSelectorOption[] | null {
-				const itemIndex = 0;
-				const inputName = 'main';
-				const runIndex = 0;
-				const returnData: IVariableSelectorOption[] = [];
-
-				const activeNode: INodeUi | null = this.ndvStore.activeNode;
-
-				if (activeNode === null) {
-					return returnData;
+			} else if (Array.isArray(inputData)) {
+				let newPropertyName = propertyName;
+				let newParentPath = parentPath;
+				if (propertyIndex !== undefined) {
+					newParentPath += `["${propertyName}"]`;
+					newPropertyName = propertyIndex.toString();
 				}
 
-				const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, parentNode[0], 'main');
-				const connectionInputData = this.connectionInputData(parentNode, nodeName, inputName, runIndex, nodeConnection);
+				const arrayData: IVariableSelectorOption[] = [];
 
-				if (connectionInputData === null) {
-					return returnData;
+				for (let i = 0; i < inputData.length; i++) {
+					arrayData.push.apply(
+						arrayData,
+						this.jsonDataToFilterOption(
+							inputData[i],
+							newParentPath,
+							newPropertyName,
+							filterText,
+							i,
+							`[Item: ${i}]`,
+							skipKey,
+						),
+					);
 				}
 
-				const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
-					$execution: {
-						id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-						mode: 'test',
-						resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-					},
+				returnData.push({
+					name: displayName || propertyName,
+					options: arrayData,
+					key: fullpath,
+					allowParentSelect: true,
+					dataType: 'array',
+				} as IVariableSelectorOption);
+			} else if (typeof inputData === 'object') {
+				const tempValue: IVariableSelectorOption[] = [];
 
-					// deprecated
-					$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-					$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-				};
-
-				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, nodeName, connectionInputData, {}, 'manual', this.rootStore.timezone, additionalKeys);
-				const proxy = dataProxy.getDataProxy();
-
-				// @ts-ignore
-				const nodeContext = proxy.$node[nodeName].context as IContextObject;
-				for (const key of Object.keys(nodeContext)) {
-					if (filterText !== undefined && key.toLowerCase().indexOf(filterText) === -1) {
-						// If filter is set apply it
-						continue;
-					}
+				for (const key of Object.keys(inputData)) {
+					tempValue.push.apply(
+						tempValue,
+						this.jsonDataToFilterOption(
+							(inputData as IDataObject)[key],
+							fullpath,
+							key,
+							filterText,
+							undefined,
+							undefined,
+							skipKey,
+						),
+					);
+				}
 
+				if (tempValue.length) {
 					returnData.push({
-						name: key,
-						key: `$node["${nodeName}"].context["${key}"]`,
-						// @ts-ignore
-						value: nodeContext[key],
+						name: displayName || propertyName,
+						options: this.sortOptions(tempValue),
+						key: fullpath,
+						allowParentSelect: true,
+						dataType: 'object',
+					} as IVariableSelectorOption);
+				}
+			} else {
+				if (filterText !== undefined && propertyName.toLowerCase().indexOf(filterText) === -1) {
+					return returnData;
+				}
+
+				// Skip is currently only needed for leafs so only check here
+				if (this.getPathNormalized(skipKey) !== this.getPathNormalized(fullpath)) {
+					returnData.push({
+						name: propertyName,
+						key: fullpath,
+						value: inputData,
+					} as IVariableSelectorOption);
+				}
+			}
+
+			return returnData;
+		},
+
+		/**
+		 * Get the node's output using runData
+		 *
+		 * @param {string} nodeName The name of the node to get the data of
+		 * @param {IRunData} runData The data of the run to get the data of
+		 * @param {string} filterText Filter text for parameters
+		 * @param {number} [itemIndex=0] The index of the item
+		 * @param {number} [runIndex=0] The index of the run
+		 * @param {string} [inputName='main'] The name of the input
+		 * @param {number} [outputIndex=0] The index of the output
+		 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
+		 */
+		getNodeRunDataOutput(
+			nodeName: string,
+			runData: IRunData,
+			filterText: string,
+			itemIndex = 0,
+			runIndex = 0,
+			inputName = 'main',
+			outputIndex = 0,
+			useShort = false,
+		): IVariableSelectorOption[] | null {
+			if (!runData.hasOwnProperty(nodeName)) {
+				// No data found for node
+				return null;
+			}
+
+			if (runData[nodeName].length <= runIndex) {
+				// No data for given runIndex
+				return null;
+			}
+
+			if (
+				!runData[nodeName][runIndex].hasOwnProperty('data') ||
+				runData[nodeName][runIndex].data === null ||
+				runData[nodeName][runIndex].data === undefined
+			) {
+				// Data property does not exist or is not set (even though it normally has to)
+				return null;
+			}
+
+			if (!runData[nodeName][runIndex].data!.hasOwnProperty(inputName)) {
+				// No data found for inputName
+				return null;
+			}
+
+			if (runData[nodeName][runIndex].data![inputName].length <= outputIndex) {
+				// No data found for output Index
+				return null;
+			}
+
+			// The data should be identical no matter to which node it gets so always select the first one
+			if (
+				runData[nodeName][runIndex].data![inputName][outputIndex] === null ||
+				runData[nodeName][runIndex].data![inputName][outputIndex]!.length <= itemIndex
+			) {
+				// No data found for node connection found
+				return null;
+			}
+
+			const outputData = runData[nodeName][runIndex].data![inputName][outputIndex]![itemIndex];
+
+			return this.getNodeOutput(nodeName, outputData, filterText, useShort);
+		},
+
+		/**
+		 * Get the node's output using pinData
+		 *
+		 * @param {string} nodeName The name of the node to get the data of
+		 * @param {IPinData[string]} pinData The node's pin data
+		 * @param {string} filterText Filter text for parameters
+		 * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json
+		 */
+		getNodePinDataOutput(
+			nodeName: string,
+			pinData: IPinData[string],
+			filterText: string,
+			useShort = false,
+		): IVariableSelectorOption[] | null {
+			const outputData = pinData.map((data) => ({ json: data } as INodeExecutionData))[0];
+
+			return this.getNodeOutput(nodeName, outputData, filterText, useShort);
+		},
+
+		/**
+		 * Returns the node's output data
+		 *
+		 * @param {string} nodeName The name of the node to get the data of
+		 * @param {INodeExecutionData} outputData The data of the run to get the data of
+		 * @param {string} filterText Filter text for parameters
+		 * @param {boolean} [useShort=false] Use short notation
+		 */
+		getNodeOutput(
+			nodeName: string,
+			outputData: INodeExecutionData,
+			filterText: string,
+			useShort = false,
+		): IVariableSelectorOption[] | null {
+			const returnData: IVariableSelectorOption[] = [];
+
+			// Get json data
+			if (outputData.hasOwnProperty('json')) {
+				const jsonPropertyPrefix = useShort === true ? '$json' : `$node["${nodeName}"].json`;
+
+				const jsonDataOptions: IVariableSelectorOption[] = [];
+				for (const propertyName of Object.keys(outputData.json)) {
+					jsonDataOptions.push.apply(
+						jsonDataOptions,
+						this.jsonDataToFilterOption(
+							outputData.json[propertyName],
+							jsonPropertyPrefix,
+							propertyName,
+							filterText,
+						),
+					);
+				}
+
+				if (jsonDataOptions.length) {
+					returnData.push({
+						name: 'JSON',
+						options: this.sortOptions(jsonDataOptions),
 					});
 				}
+			}
 
+			// Get binary data
+			if (outputData.hasOwnProperty('binary')) {
+				const binaryPropertyPrefix = useShort === true ? '$binary' : `$node["${nodeName}"].binary`;
+
+				const binaryData = [];
+				let binaryPropertyData = [];
+
+				for (const dataPropertyName of Object.keys(outputData.binary!)) {
+					binaryPropertyData = [];
+					for (const propertyName in outputData.binary![dataPropertyName]) {
+						if (propertyName === 'data') {
+							continue;
+						}
+
+						if (filterText && propertyName.toLowerCase().indexOf(filterText) === -1) {
+							// If filter is set apply it
+							continue;
+						}
+
+						binaryPropertyData.push({
+							name: propertyName,
+							key: `${binaryPropertyPrefix}.${dataPropertyName}.${propertyName}`,
+							value: outputData.binary![dataPropertyName][propertyName],
+						});
+					}
+
+					if (binaryPropertyData.length) {
+						binaryData.push({
+							name: dataPropertyName,
+							key: `${binaryPropertyPrefix}.${dataPropertyName}`,
+							options: this.sortOptions(binaryPropertyData),
+							allowParentSelect: true,
+						});
+					}
+				}
+				if (binaryData.length) {
+					returnData.push({
+						name: 'Binary',
+						key: binaryPropertyPrefix,
+						options: this.sortOptions(binaryData),
+						allowParentSelect: true,
+					});
+				}
+			}
+
+			return returnData;
+		},
+		getNodeContext(
+			workflow: Workflow,
+			runExecutionData: IRunExecutionData | null,
+			parentNode: string[],
+			nodeName: string,
+			filterText: string,
+		): IVariableSelectorOption[] | null {
+			const itemIndex = 0;
+			const inputName = 'main';
+			const runIndex = 0;
+			const returnData: IVariableSelectorOption[] = [];
+
+			const activeNode: INodeUi | null = this.ndvStore.activeNode;
+
+			if (activeNode === null) {
 				return returnData;
-			},
-			/**
-			 * Returns all the node parameters with values
-			 *
-			 * @param {string} nodeName The name of the node to return data of
-			 * @param {string} path The path to the node to pretend to key
-			 * @param {string} [skipParameter] Parameter to skip
-			 * @param {string} [filterText] Filter text for parameters
-			 			 			 */
-			getNodeParameters (nodeName: string, path: string, skipParameter?: string, filterText?: string): IVariableSelectorOption[] | null {
-				const node = this.workflow.getNode(nodeName);
-				if (node === null) {
-					return null;
+			}
+
+			const nodeConnection = this.workflow.getNodeConnectionIndexes(
+				activeNode.name,
+				parentNode[0],
+				'main',
+			);
+			const connectionInputData = this.connectionInputData(
+				parentNode,
+				nodeName,
+				inputName,
+				runIndex,
+				nodeConnection,
+			);
+
+			if (connectionInputData === null) {
+				return returnData;
+			}
+
+			const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
+				$execution: {
+					id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+					mode: 'test',
+					resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+				},
+
+				// deprecated
+				$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+				$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+			};
+
+			const dataProxy = new WorkflowDataProxy(
+				workflow,
+				runExecutionData,
+				runIndex,
+				itemIndex,
+				nodeName,
+				connectionInputData,
+				{},
+				'manual',
+				this.rootStore.timezone,
+				additionalKeys,
+			);
+			const proxy = dataProxy.getDataProxy();
+
+			// @ts-ignore
+			const nodeContext = proxy.$node[nodeName].context as IContextObject;
+			for (const key of Object.keys(nodeContext)) {
+				if (filterText !== undefined && key.toLowerCase().indexOf(filterText) === -1) {
+					// If filter is set apply it
+					continue;
 				}
 
-				const returnParameters: IVariableSelectorOption[] = [];
-				for (const parameterName in node.parameters) {
-					if (parameterName === skipParameter) {
-						// Skip the parameter
-						continue;
+				returnData.push({
+					name: key,
+					key: `$node["${nodeName}"].context["${key}"]`,
+					// @ts-ignore
+					value: nodeContext[key],
+				});
+			}
+
+			return returnData;
+		},
+		/**
+		 * Returns all the node parameters with values
+		 *
+		 * @param {string} nodeName The name of the node to return data of
+		 * @param {string} path The path to the node to pretend to key
+		 * @param {string} [skipParameter] Parameter to skip
+		 * @param {string} [filterText] Filter text for parameters
+		 */
+		getNodeParameters(
+			nodeName: string,
+			path: string,
+			skipParameter?: string,
+			filterText?: string,
+		): IVariableSelectorOption[] | null {
+			const node = this.workflow.getNode(nodeName);
+			if (node === null) {
+				return null;
+			}
+
+			const returnParameters: IVariableSelectorOption[] = [];
+			for (const parameterName in node.parameters) {
+				if (parameterName === skipParameter) {
+					// Skip the parameter
+					continue;
+				}
+
+				if (filterText !== undefined && parameterName.toLowerCase().indexOf(filterText) === -1) {
+					// If filter is set apply it
+					continue;
+				}
+
+				returnParameters.push.apply(
+					returnParameters,
+					this.jsonDataToFilterOption(
+						node.parameters[parameterName],
+						path,
+						parameterName,
+						filterText,
+						undefined,
+						undefined,
+						skipParameter,
+					),
+				);
+			}
+
+			return returnParameters;
+		},
+		getFilterResults(filterText: string, itemIndex: number): IVariableSelectorOption[] {
+			const inputName = 'main';
+
+			const activeNode: INodeUi | null = this.ndvStore.activeNode;
+
+			if (activeNode === null) {
+				return [];
+			}
+
+			const executionData = this.workflowsStore.getWorkflowExecution;
+			let parentNode = this.workflow.getParentNodes(activeNode.name, inputName, 1);
+			let runData = this.workflowsStore.getWorkflowRunData;
+
+			if (runData === null) {
+				runData = {};
+			}
+
+			let returnData: IVariableSelectorOption[] | null = [];
+			// -----------------------------------------
+			// Add the parameters of the current node
+			// -----------------------------------------
+
+			// Add the parameters
+			const currentNodeData: IVariableSelectorOption[] = [];
+
+			let tempOptions: IVariableSelectorOption[];
+			if (executionData !== null && executionData.data !== undefined) {
+				const runExecutionData: IRunExecutionData = executionData.data;
+
+				tempOptions = this.getNodeContext(
+					this.workflow,
+					runExecutionData,
+					parentNode,
+					activeNode.name,
+					filterText,
+				) as IVariableSelectorOption[];
+				if (tempOptions.length) {
+					currentNodeData.push({
+						name: 'Context',
+						options: this.sortOptions(tempOptions),
+					} as IVariableSelectorOption);
+				}
+			}
+
+			let tempOutputData: IVariableSelectorOption[] | null | undefined;
+
+			if (parentNode.length) {
+				// If the node has an input node add the input data
+
+				const activeInputParentNode = parentNode.find(
+					(node) => node === this.ndvStore.ndvInputNodeName,
+				)!;
+
+				// Check from which output to read the data.
+				// Depends on how the nodes are connected.
+				// (example "IF" node. If node is connected to "true" or to "false" output)
+				const nodeConnection = this.workflow.getNodeConnectionIndexes(
+					activeNode.name,
+					activeInputParentNode,
+					'main',
+				);
+				const outputIndex = nodeConnection === undefined ? 0 : nodeConnection.sourceIndex;
+
+				tempOutputData = this.getNodeRunDataOutput(
+					activeInputParentNode,
+					runData,
+					filterText,
+					itemIndex,
+					0,
+					'main',
+					outputIndex,
+					true,
+				) as IVariableSelectorOption[];
+
+				const pinDataOptions: IVariableSelectorOption[] = [
+					{
+						name: 'JSON',
+						options: [],
+					},
+				];
+				parentNode.forEach((parentNodeName) => {
+					const pinData = this.workflowsStore.pinDataByNodeName(parentNodeName);
+
+					if (pinData) {
+						const output = this.getNodePinDataOutput(parentNodeName, pinData, filterText, true);
+
+						pinDataOptions[0].options = pinDataOptions[0].options!.concat(
+							output?.[0]?.options ?? [],
+						);
 					}
+				});
 
-					if (filterText !== undefined && parameterName.toLowerCase().indexOf(filterText) === -1) {
-						// If filter is set apply it
-						continue;
+				if (pinDataOptions[0].options!.length > 0) {
+					if (tempOutputData) {
+						const jsonTempOutputData = tempOutputData.find((tempData) => tempData.name === 'JSON');
+
+						if (jsonTempOutputData) {
+							if (!jsonTempOutputData.options) {
+								jsonTempOutputData.options = [];
+							}
+
+							(pinDataOptions[0].options || []).forEach((pinDataOption) => {
+								const existingOptionIndex = jsonTempOutputData.options!.findIndex(
+									(option) => option.name === pinDataOption.name,
+								);
+								if (existingOptionIndex !== -1) {
+									jsonTempOutputData.options![existingOptionIndex] = pinDataOption;
+								} else {
+									jsonTempOutputData.options!.push(pinDataOption);
+								}
+							});
+						} else {
+							tempOutputData.push(pinDataOptions[0]);
+						}
+					} else {
+						tempOutputData = pinDataOptions;
 					}
-
-					returnParameters.push.apply(returnParameters, this.jsonDataToFilterOption(node.parameters[parameterName], path, parameterName, filterText, undefined, undefined, skipParameter));
 				}
 
-				return returnParameters;
-			},
-			getFilterResults (filterText: string, itemIndex: number): IVariableSelectorOption[] {
-				const inputName = 'main';
+				if (tempOutputData) {
+					if (JSON.stringify(tempOutputData).length < 102400) {
+						// Data is reasonable small (< 100kb) so add it
+						currentNodeData.push({
+							name: 'Input Data',
+							options: this.sortOptions(tempOutputData),
+						});
+					} else {
+						// Data is to large so do not add
+						currentNodeData.push({
+							name: 'Input Data',
+							options: [
+								{
+									name: '[Data to large]',
+								},
+							],
+						});
+					}
+				}
+			}
 
-				const activeNode: INodeUi | null = this.ndvStore.activeNode;
+			const initialPath = '$parameter';
+			let skipParameter = this.path;
+			if (skipParameter.startsWith('parameters.')) {
+				skipParameter = initialPath + skipParameter.substring(10);
+			}
 
-				if (activeNode === null) {
-					return [];
+			currentNodeData.push({
+				name: this.$locale.baseText('variableSelector.parameters'),
+				options: this.sortOptions(
+					this.getNodeParameters(
+						activeNode.name,
+						initialPath,
+						skipParameter,
+						filterText,
+					) as IVariableSelectorOption[],
+				),
+			});
+
+			returnData.push({
+				name: this.$locale.baseText('variableSelector.currentNode'),
+				options: this.sortOptions(currentNodeData),
+			});
+
+			// Add the input data
+
+			// -----------------------------------------
+			// Add all the nodes and their data
+			// -----------------------------------------
+			const allNodesData: IVariableSelectorOption[] = [];
+			let nodeOptions: IVariableSelectorOption[];
+			const upstreamNodes = this.workflow.getParentNodes(activeNode.name, inputName);
+
+			const workflowNodes = Object.entries(this.workflow.nodes);
+
+			// Sort the nodes according to their position relative to the current node
+			workflowNodes.sort((a, b) => {
+				return upstreamNodes.indexOf(b[0]) - upstreamNodes.indexOf(a[0]);
+			});
+
+			for (const [nodeName, node] of workflowNodes) {
+				// Add the parameters of all nodes
+				// TODO: Later have to make sure that no parameters can be referenced which have expression which use input-data (for nodes which are not parent nodes)
+
+				if (nodeName === activeNode.name) {
+					// Skip the current node as this one get added separately
+					continue;
+				}
+				// If node type should be skipped, continue
+				if (SKIPPED_NODE_TYPES.includes(node.type)) {
+					continue;
 				}
 
-				const executionData = this.workflowsStore.getWorkflowExecution;
-				let parentNode = this.workflow.getParentNodes(activeNode.name, inputName, 1);
-				let runData = this.workflowsStore.getWorkflowRunData;
+				nodeOptions = [
+					{
+						name: this.$locale.baseText('variableSelector.parameters'),
+						options: this.sortOptions(
+							this.getNodeParameters(
+								nodeName,
+								`$node["${nodeName}"].parameter`,
+								undefined,
+								filterText,
+							),
+						),
+					} as IVariableSelectorOption,
+				];
 
-				if (runData === null) {
-					runData = {};
-				}
-
-				let returnData: IVariableSelectorOption[] | null = [];
-				// -----------------------------------------
-				// Add the parameters of the current node
-				// -----------------------------------------
-
-				// Add the parameters
-				const currentNodeData: IVariableSelectorOption[] = [];
-
-				let tempOptions: IVariableSelectorOption[];
 				if (executionData !== null && executionData.data !== undefined) {
 					const runExecutionData: IRunExecutionData = executionData.data;
 
-					tempOptions = this.getNodeContext(this.workflow, runExecutionData, parentNode, activeNode.name, filterText) as IVariableSelectorOption[];
+					parentNode = this.workflow.getParentNodes(nodeName, inputName, 1);
+					tempOptions = this.getNodeContext(
+						this.workflow,
+						runExecutionData,
+						parentNode,
+						nodeName,
+						filterText,
+					) as IVariableSelectorOption[];
 					if (tempOptions.length) {
-						currentNodeData.push(
+						nodeOptions = [
 							{
-								name: 'Context',
+								name: this.$locale.baseText('variableSelector.context'),
 								options: this.sortOptions(tempOptions),
 							} as IVariableSelectorOption,
-						);
+						];
 					}
 				}
 
-				let tempOutputData: IVariableSelectorOption[] | null | undefined;
-
-				if (parentNode.length) {
-					// If the node has an input node add the input data
-
-					const activeInputParentNode = parentNode.find(node => node === this.ndvStore.ndvInputNodeName)!;
-
-					// Check from which output to read the data.
-					// Depends on how the nodes are connected.
-					// (example "IF" node. If node is connected to "true" or to "false" output)
-					const nodeConnection = this.workflow.getNodeConnectionIndexes(activeNode.name, activeInputParentNode, 'main');
-					const outputIndex = nodeConnection === undefined ? 0: nodeConnection.sourceIndex;
-
-					tempOutputData = this.getNodeRunDataOutput(activeInputParentNode, runData, filterText, itemIndex, 0, 'main', outputIndex, true) as IVariableSelectorOption[];
-
-					const pinDataOptions: IVariableSelectorOption[] = [
-						{
-							name: 'JSON',
-							options: [],
-						},
-					];
-					parentNode.forEach((parentNodeName) => {
-						const pinData = this.workflowsStore.pinDataByNodeName(parentNodeName);
-
-						if (pinData) {
-							const output = this.getNodePinDataOutput(parentNodeName, pinData, filterText, true);
-
-							pinDataOptions[0].options = pinDataOptions[0].options!.concat(output?.[0]?.options ?? []);
-						}
-					});
-
-					if (pinDataOptions[0].options!.length > 0) {
-						if (tempOutputData) {
-							const jsonTempOutputData = tempOutputData.find((tempData) => tempData.name === 'JSON');
-
-							if (jsonTempOutputData) {
-								if (!jsonTempOutputData.options) {
-									jsonTempOutputData.options = [];
-								}
-
-								(pinDataOptions[0].options || []).forEach((pinDataOption) => {
-									const existingOptionIndex = jsonTempOutputData.options!.findIndex((option) => option.name === pinDataOption.name);
-									if (existingOptionIndex !== -1) {
-										jsonTempOutputData.options![existingOptionIndex] = pinDataOption;
-									} else {
-										jsonTempOutputData.options!.push(pinDataOption);
-									}
-								});
-							} else {
-								tempOutputData.push(pinDataOptions[0]);
-							}
-						} else {
-							tempOutputData = pinDataOptions;
-						}
-					}
+				if (upstreamNodes.includes(nodeName)) {
+					// If the node is an upstream node add also the output data which can be referenced
+					const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
+					tempOutputData = pinData
+						? this.getNodePinDataOutput(nodeName, pinData, filterText)
+						: this.getNodeRunDataOutput(nodeName, runData, filterText, itemIndex);
 
 					if (tempOutputData) {
-						if (JSON.stringify(tempOutputData).length < 102400) {
-							// Data is reasonable small (< 100kb) so add it
-							currentNodeData.push(
-								{
-									name: 'Input Data',
-									options: this.sortOptions(tempOutputData),
-								},
-							);
-						} else {
-							// Data is to large so do not add
-							currentNodeData.push(
-								{
-									name: 'Input Data',
-									options: [
-										{
-											name: '[Data to large]',
-										},
-									],
-								},
-							);
-						}
+						nodeOptions.push({
+							name: this.$locale.baseText('variableSelector.outputData'),
+							options: this.sortOptions(tempOutputData),
+						} as IVariableSelectorOption);
 					}
 				}
 
-				const initialPath = '$parameter';
-				let skipParameter = this.path;
-				if (skipParameter.startsWith('parameters.')) {
-					skipParameter = initialPath + skipParameter.substring(10);
-				}
+				const shortNodeType = this.$locale.shortNodeType(node.type);
 
-				currentNodeData.push(
-					{
-						name: this.$locale.baseText('variableSelector.parameters'),
-						options: this.sortOptions(this.getNodeParameters(activeNode.name, initialPath, skipParameter, filterText) as IVariableSelectorOption[]),
-					},
-				);
-
-				returnData.push(
-					{
-						name: this.$locale.baseText('variableSelector.currentNode'),
-						options: this.sortOptions(currentNodeData),
-					},
-				);
-
-				// Add the input data
-
-				// -----------------------------------------
-				// Add all the nodes and their data
-				// -----------------------------------------
-				const allNodesData: IVariableSelectorOption[] = [];
-				let nodeOptions: IVariableSelectorOption[];
-				const upstreamNodes = this.workflow.getParentNodes(activeNode.name, inputName);
-
-				const workflowNodes = Object.entries(this.workflow.nodes);
-
-				// Sort the nodes according to their position relative to the current node
-				workflowNodes.sort((a, b) => {
-					return upstreamNodes.indexOf(b[0]) - upstreamNodes.indexOf(a[0]);
+				allNodesData.push({
+					name: this.$locale.headerText({
+						key: `headers.${shortNodeType}.displayName`,
+						fallback: nodeName,
+					}),
+					options: this.sortOptions(nodeOptions),
 				});
+			}
 
-				for (const [nodeName, node] of workflowNodes) {
-					// Add the parameters of all nodes
-					// TODO: Later have to make sure that no parameters can be referenced which have expression which use input-data (for nodes which are not parent nodes)
+			returnData.push({
+				name: this.$locale.baseText('variableSelector.nodes'),
+				options: allNodesData,
+			});
 
-					if (nodeName === activeNode.name) {
-						// Skip the current node as this one get added separately
-						continue;
-					}
-					// If node type should be skipped, continue
-					if (SKIPPED_NODE_TYPES.includes(node.type)) {
-						continue;
-					}
+			// Remove empty entries and return
+			returnData = this.removeEmptyEntries(returnData) as IVariableSelectorOption[] | null;
 
-					nodeOptions = [
-						{
-							name: this.$locale.baseText('variableSelector.parameters'),
-							options: this.sortOptions(this.getNodeParameters(nodeName, `$node["${nodeName}"].parameter`, undefined, filterText)),
-						} as IVariableSelectorOption,
-					];
+			if (returnData === null) {
+				return [];
+			}
 
-					if (executionData !== null && executionData.data !== undefined) {
-						const runExecutionData: IRunExecutionData = executionData.data;
-
-						parentNode = this.workflow.getParentNodes(nodeName, inputName, 1);
-						tempOptions = this.getNodeContext(this.workflow, runExecutionData, parentNode, nodeName, filterText) as IVariableSelectorOption[];
-						if (tempOptions.length) {
-							nodeOptions = [
-								{
-									name: this.$locale.baseText('variableSelector.context'),
-									options: this.sortOptions(tempOptions),
-								} as IVariableSelectorOption,
-							];
-						}
-					}
-
-					if (upstreamNodes.includes(nodeName)) {
-						// If the node is an upstream node add also the output data which can be referenced
-						const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
-						tempOutputData = pinData
-							? this.getNodePinDataOutput(nodeName, pinData, filterText)
-							: this.getNodeRunDataOutput(nodeName, runData, filterText, itemIndex);
-
-						if (tempOutputData) {
-							nodeOptions.push(
-								{
-									name: this.$locale.baseText('variableSelector.outputData'),
-									options: this.sortOptions(tempOutputData),
-								} as IVariableSelectorOption,
-							);
-						}
-					}
-
-					const shortNodeType = this.$locale.shortNodeType(node.type);
-
-					allNodesData.push(
-						{
-							name: this.$locale.headerText({
-								key: `headers.${shortNodeType}.displayName`,
-								fallback: nodeName,
-							}),
-							options: this.sortOptions(nodeOptions),
-						},
-					);
-				}
-
-				returnData.push(
-					{
-						name: this.$locale.baseText('variableSelector.nodes'),
-						options: allNodesData,
-					},
-				);
-
-				// Remove empty entries and return
-				returnData = this.removeEmptyEntries(returnData) as IVariableSelectorOption[] | null;
-
-				if (returnData === null) {
-					return [];
-				}
-
-				return returnData;
-			},
+			return returnData;
 		},
-	});
+	},
+});
 </script>
 
 <style scoped lang="scss">
-
 .variable-selector-wrapper {
 	border-radius: 0 0 4px 4px;
 	width: 100%;
@@ -755,5 +874,4 @@ export default mixins(
 .result-item {
 	font-size: 0.7em;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/VariableSelectorItem.vue b/packages/editor-ui/src/components/VariableSelectorItem.vue
index 487b35b72c..d0b55be280 100644
--- a/packages/editor-ui/src/components/VariableSelectorItem.vue
+++ b/packages/editor-ui/src/components/VariableSelectorItem.vue
@@ -1,74 +1,89 @@
 <template>
 	<div class="item">
 		<div v-if="item.options" class="options">
-			<div v-if="item.options.length" class="headline clickable" @click="extended=!extended">
+			<div v-if="item.options.length" class="headline clickable" @click="extended = !extended">
 				<div class="options-toggle" v-if="extendAll !== true">
 					<font-awesome-icon v-if="extended" icon="angle-down" />
 					<font-awesome-icon v-else icon="angle-right" />
 				</div>
 				<div class="option-title" :title="item.key">
-					{{item.name}}
+					{{ item.name }}
 
-					<el-dropdown trigger="click" @click.stop @command="optionSelected($event, item)" v-if="allowParentSelect === true">
+					<el-dropdown
+						trigger="click"
+						@click.stop
+						@command="optionSelected($event, item)"
+						v-if="allowParentSelect === true"
+					>
 						<span class="el-dropdown-link clickable" @click.stop>
-							<font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" />
+							<font-awesome-icon
+								icon="dot-circle"
+								:title="$locale.baseText('variableSelectorItem.selectItem')"
+							/>
 						</span>
 						<template #dropdown>
 							<el-dropdown-menu>
-								<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
+								<el-dropdown-item
+									:command="operation.command"
+									v-for="operation in itemAddOperations"
+									:key="operation.command"
+									>{{ operation.displayName }}</el-dropdown-item
+								>
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
-
 				</div>
 			</div>
 			<div v-if="item.options && (extended === true || extendAll === true)">
-				<variable-selector-item v-for="option in item.options" :item="option" :key="option.key" :extendAll="extendAll" :allowParentSelect="option.allowParentSelect" class="sub-level" @itemSelected="forwardItemSelected"></variable-selector-item>
+				<variable-selector-item
+					v-for="option in item.options"
+					:item="option"
+					:key="option.key"
+					:extendAll="extendAll"
+					:allowParentSelect="option.allowParentSelect"
+					class="sub-level"
+					@itemSelected="forwardItemSelected"
+				></variable-selector-item>
 			</div>
 		</div>
 		<div v-else class="value clickable" @click="selectItem(item)">
 			<div class="item-title ph-no-capture" :title="item.key">
-				{{item.name}}:
+				{{ item.name }}:
 				<font-awesome-icon icon="dot-circle" title="Select Item" />
 			</div>
-			<div class="item-value">{{ item.value !== undefined?item.value: $locale.baseText('variableSelectorItem.empty') }}</div>
+			<div class="item-value">
+				{{ item.value !== undefined ? item.value : $locale.baseText('variableSelectorItem.empty') }}
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-
 import Vue from 'vue';
-import {
-	IVariableSelectorOption,
-	IVariableItemSelected,
-} from '@/Interface';
-import { externalHooks } from "@/mixins/externalHooks";
+import { IVariableSelectorOption, IVariableItemSelected } from '@/Interface';
+import { externalHooks } from '@/mixins/externalHooks';
 import mixins from 'vue-typed-mixins';
 
 export default mixins(externalHooks).extend({
 	name: 'VariableSelectorItem',
-	props: [
-		'allowParentSelect',
-		'extendAll',
-		'item',
-	],
+	props: ['allowParentSelect', 'extendAll', 'item'],
 	mounted() {
 		if (this.extended) return;
 
-		const shouldAutoExtend = [
-			this.$locale.baseText('variableSelectorItem.currentNode'),
-			this.$locale.baseText('variableSelectorItem.inputData'),
-			this.$locale.baseText('variableSelectorItem.binary'),
-			this.$locale.baseText('variableSelectorItem.json'),
-		].includes(this.item.name) && this.item.key === undefined;
+		const shouldAutoExtend =
+			[
+				this.$locale.baseText('variableSelectorItem.currentNode'),
+				this.$locale.baseText('variableSelectorItem.inputData'),
+				this.$locale.baseText('variableSelectorItem.binary'),
+				this.$locale.baseText('variableSelectorItem.json'),
+			].includes(this.item.name) && this.item.key === undefined;
 
 		if (shouldAutoExtend) {
 			this.extended = true;
 		}
 	},
 	computed: {
-		itemAddOperations () {
+		itemAddOperations() {
 			const returnOptions = [
 				{
 					command: 'raw',
@@ -98,13 +113,13 @@ export default mixins(externalHooks).extend({
 			return returnOptions;
 		},
 	},
-	data () {
+	data() {
 		return {
 			extended: false,
 		};
 	},
 	methods: {
-		optionSelected (command: string, item: IVariableSelectorOption) {
+		optionSelected(command: string, item: IVariableSelectorOption) {
 			// By default it is raw
 			let variable = item.key;
 			if (command === 'arrayValues') {
@@ -118,10 +133,10 @@ export default mixins(externalHooks).extend({
 			}
 			this.$emit('itemSelected', { variable });
 		},
-		selectItem (item: IVariableSelectorOption) {
+		selectItem(item: IVariableSelectorOption) {
 			this.$emit('itemSelected', { variable: item.key });
 		},
-		forwardItemSelected (eventData: IVariableItemSelected) {
+		forwardItemSelected(eventData: IVariableItemSelected) {
 			this.$emit('itemSelected', eventData);
 		},
 	},
@@ -129,7 +144,6 @@ export default mixins(externalHooks).extend({
 </script>
 
 <style scoped lang="scss">
-
 .option-title {
 	position: relative;
 	display: inline-block;
@@ -167,5 +181,4 @@ export default mixins(externalHooks).extend({
 .sub-level {
 	padding-left: 20px;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 2da370d6c7..d3e52bc91f 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -1,6 +1,12 @@
 <template>
-	<!-- eslint-disable-next-line vue/no-mutating-props -->
-	<a v-if="version" :set="version = version" :href="version.documentationUrl" target="_blank" :class="$style.card">
+	<!-- eslint-disable vue/no-mutating-props -->
+	<a
+		v-if="version"
+		:set="(version = version)"
+		:href="version.documentationUrl"
+		target="_blank"
+		:class="$style.card"
+	>
 		<div :class="$style.header">
 			<div>
 				<div :class="$style.name">
@@ -26,9 +32,16 @@
 				{{ $locale.baseText('versionCard.released') }}&nbsp;<TimeAgo :date="version.createdAt" />
 			</div>
 		</div>
-		<div :class="$style.divider" v-if="version.description || (version.nodes && version.nodes.length)"></div>
+		<div
+			:class="$style.divider"
+			v-if="version.description || (version.nodes && version.nodes.length)"
+		></div>
 		<div>
-			<div v-if="version.description" v-html="version.description" :class="$style.description"></div>
+			<div
+				v-if="version.description"
+				v-html="version.description"
+				:class="$style.description"
+			></div>
 			<div v-if="version.nodes && version.nodes.length > 0" :class="$style.nodes">
 				<NodeIcon
 					v-for="node in version.nodes"
@@ -59,75 +72,75 @@ export default Vue.extend({
 	name: 'VersionCard',
 	props: ['version'],
 	// @ts-ignore
-	nodeName (node: IVersionNode): string {
+	nodeName(node: IVersionNode): string {
 		return node !== null ? node.displayName : this.$locale.baseText('versionCard.unknown');
 	},
 });
 </script>
 
 <style module lang="scss">
-	.card {
-		background-color: $version-card-background-color;
-		border: $version-card-border;
-		border-radius: 8px;
-		display: block;
-		padding: 16px;
-		text-decoration: none;
+.card {
+	background-color: $version-card-background-color;
+	border: $version-card-border;
+	border-radius: 8px;
+	display: block;
+	padding: 16px;
+	text-decoration: none;
 
-		&:hover {
-			box-shadow: 0px 2px 10px $version-card-box-shadow-color;
-		}
+	&:hover {
+		box-shadow: 0px 2px 10px $version-card-box-shadow-color;
+	}
+}
+
+.header {
+	display: flex;
+	flex-wrap: wrap;
+
+	> * {
+		display: flex;
+		margin-bottom: 5px;
 	}
 
-	.header {
-		display: flex;
-		flex-wrap: wrap;
+	> div:first-child {
+		flex-grow: 1;
 
 		> * {
-			display: flex;
-			margin-bottom: 5px;
-		}
-
-		> div:first-child {
-			flex-grow: 1;
-
-			> * {
-				margin-right: 5px;
-			}
+			margin-right: 5px;
 		}
 	}
+}
 
-	.name {
-		font-weight: 600;
-		font-size: 16px;
-		line-height: 18px;
-		color: $version-card-name-text-color;
-	}
+.name {
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 18px;
+	color: $version-card-name-text-color;
+}
 
-	.divider {
-		border-bottom: $version-card-border;
-		width: 100%;
-		margin: 10px 0 15px 0;
-	}
+.divider {
+	border-bottom: $version-card-border;
+	width: 100%;
+	margin: 10px 0 15px 0;
+}
 
-	.description {
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 19px;
-		color: $version-card-description-text-color;
-	}
+.description {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 19px;
+	color: $version-card-description-text-color;
+}
 
-	.release-date {
-		font-size: 12px;
-		line-height: 18px;
-		font-weight: 400;
-		color: $version-card-release-date-text-color;
-	}
+.release-date {
+	font-size: 12px;
+	line-height: 18px;
+	font-weight: 400;
+	color: $version-card-release-date-text-color;
+}
 
-	.nodes {
-		display: grid;
-		grid-template-columns: repeat(10, 1fr);
-		grid-row-gap: 12px;
-		margin-block-start: 24px;
-	}
+.nodes {
+	display: grid;
+	grid-template-columns: repeat(10, 1fr);
+	grid-row-gap: 12px;
+	margin-block-start: 24px;
+}
 </style>
diff --git a/packages/editor-ui/src/components/WarningTooltip.vue b/packages/editor-ui/src/components/WarningTooltip.vue
index 3ab11eaff6..e314fc8775 100644
--- a/packages/editor-ui/src/components/WarningTooltip.vue
+++ b/packages/editor-ui/src/components/WarningTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-tooltip  content=" " placement="top" >
+	<n8n-tooltip content=" " placement="top">
 		<template #content>
 			<slot />
 		</template>
@@ -7,11 +7,10 @@
 	</n8n-tooltip>
 </template>
 
-
 <style lang="scss" module>
-	.icon {
-		font-size: 14px;
-		height: 18px;
-		color: $warning-tooltip-color;
-	}
+.icon {
+	font-size: 14px;
+	height: 18px;
+	color: $warning-tooltip-color;
+}
 </style>
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index cf4ec1583d..143bbf41b7 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -1,7 +1,12 @@
 <template>
 	<div class="workflow-activator">
 		<div :class="$style.activeStatusText" data-test-id="workflow-activator-status">
-			<n8n-text v-if="workflowActive" :color="couldNotBeStarted ? 'danger' : 'success'" size="small" bold>
+			<n8n-text
+				v-if="workflowActive"
+				:color="couldNotBeStarted ? 'danger' : 'success'"
+				size="small"
+				bold
+			>
 				{{ $locale.baseText('workflowActivator.active') }}
 			</n8n-text>
 			<n8n-text v-else color="text-base" size="small" bold>
@@ -16,7 +21,11 @@
 				v-loading="updatingWorkflowActivation"
 				:value="workflowActive"
 				@change="activeChanged"
-			  	:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
+				:title="
+					workflowActive
+						? $locale.baseText('workflowActivator.deactivateWorkflow')
+						: $locale.baseText('workflowActivator.activateWorkflow')
+				"
 				:disabled="disabled || updatingWorkflowActivation"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
@@ -29,7 +38,10 @@
 		<div class="could-not-be-started" v-if="couldNotBeStarted">
 			<n8n-tooltip placement="top">
 				<template #content>
-					<div @click="displayActivationError" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
+					<div
+						@click="displayActivationError"
+						v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"
+					></div>
 				</template>
 				<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
 			</n8n-tooltip>
@@ -38,7 +50,6 @@
 </template>
 
 <script lang="ts">
-
 import { showMessage } from '@/mixins/showMessage';
 import { workflowActivate } from '@/mixins/workflowActivate';
 import { useUIStore } from '@/stores/ui';
@@ -47,88 +58,80 @@ import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 import { getActivatableTriggerNodes } from '@/utils';
 
-export default mixins(
-	showMessage,
-	workflowActivate,
-)
-	.extend(
-		{
-			name: 'WorkflowActivator',
-			props: [
-				'workflowActive',
-				'workflowId',
-			],
-			computed: {
-				...mapStores(
-					useUIStore,
-					useWorkflowsStore,
-				),
-				getStateIsDirty (): boolean {
-					return this.uiStore.stateIsDirty;
-				},
-				nodesIssuesExist (): boolean {
-					return this.workflowsStore.nodesIssuesExist;
-				},
-				isWorkflowActive (): boolean {
-					const activeWorkflows =  this.workflowsStore.activeWorkflows;
-					return activeWorkflows.includes(this.workflowId);
-				},
-				couldNotBeStarted (): boolean {
-					return this.workflowActive === true && this.isWorkflowActive !== this.workflowActive;
-				},
-				getActiveColor (): string {
-					if (this.couldNotBeStarted === true) {
-						return '#ff4949';
-					}
-					return '#13ce66';
-				},
-				isCurrentWorkflow(): boolean {
-					return this.workflowsStore.workflowId === this.workflowId;
-				},
-				disabled(): boolean {
-					const isNewWorkflow = !this.workflowId;
-					if (isNewWorkflow || this.isCurrentWorkflow) {
-						return !this.workflowActive && !this.containsTrigger;
-					}
-
-					return false;
-				},
-				containsTrigger(): boolean {
-					const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
-					return foundTriggers.length > 0;
-				},
-			},
-			methods: {
-				async activeChanged (newActiveState: boolean) {
-					return await this.updateWorkflowActivation(this.workflowId, newActiveState);
-				},
-				async displayActivationError () {
-					let errorMessage: string;
-					try {
-						const errorData = await this.restApi().getActivationError(this.workflowId);
-
-						if (errorData === undefined) {
-							errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.errorDataUndefined');
-						} else {
-							errorMessage = this.$locale.baseText(
-								'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
-								{ interpolate: { message: errorData.error.message } },
-							);
-						}
-					} catch (error) {
-						errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.catchBlock');
-					}
-
-					this.$showMessage({
-						title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
-						message: errorMessage,
-						type: 'warning',
-						duration: 0,
-					});
-				},
-			},
+export default mixins(showMessage, workflowActivate).extend({
+	name: 'WorkflowActivator',
+	props: ['workflowActive', 'workflowId'],
+	computed: {
+		...mapStores(useUIStore, useWorkflowsStore),
+		getStateIsDirty(): boolean {
+			return this.uiStore.stateIsDirty;
 		},
-	);
+		nodesIssuesExist(): boolean {
+			return this.workflowsStore.nodesIssuesExist;
+		},
+		isWorkflowActive(): boolean {
+			const activeWorkflows = this.workflowsStore.activeWorkflows;
+			return activeWorkflows.includes(this.workflowId);
+		},
+		couldNotBeStarted(): boolean {
+			return this.workflowActive === true && this.isWorkflowActive !== this.workflowActive;
+		},
+		getActiveColor(): string {
+			if (this.couldNotBeStarted === true) {
+				return '#ff4949';
+			}
+			return '#13ce66';
+		},
+		isCurrentWorkflow(): boolean {
+			return this.workflowsStore.workflowId === this.workflowId;
+		},
+		disabled(): boolean {
+			const isNewWorkflow = !this.workflowId;
+			if (isNewWorkflow || this.isCurrentWorkflow) {
+				return !this.workflowActive && !this.containsTrigger;
+			}
+
+			return false;
+		},
+		containsTrigger(): boolean {
+			const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
+			return foundTriggers.length > 0;
+		},
+	},
+	methods: {
+		async activeChanged(newActiveState: boolean) {
+			return await this.updateWorkflowActivation(this.workflowId, newActiveState);
+		},
+		async displayActivationError() {
+			let errorMessage: string;
+			try {
+				const errorData = await this.restApi().getActivationError(this.workflowId);
+
+				if (errorData === undefined) {
+					errorMessage = this.$locale.baseText(
+						'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
+					);
+				} else {
+					errorMessage = this.$locale.baseText(
+						'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
+						{ interpolate: { message: errorData.error.message } },
+					);
+				}
+			} catch (error) {
+				errorMessage = this.$locale.baseText(
+					'workflowActivator.showMessage.displayActivationError.message.catchBlock',
+				);
+			}
+
+			this.$showMessage({
+				title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
+				message: errorMessage,
+				type: 'warning',
+				duration: 0,
+			});
+		},
+	},
+});
 </script>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 5ae8ec100a..5445a30c8a 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -1,18 +1,28 @@
 <template>
-	<n8n-card
-		:class="$style.cardLink"
-		@click="onClick"
-	>
-			<template #header>
-				<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading" data-test-id="workflow-card-name">
-					{{ data.name }}
-				</n8n-heading>
-			</template>
-			<div :class="$style.cardDescription">
-				<n8n-text color="text-light" size="small">
-					<span v-show="data">{{$locale.baseText('workflows.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
-					<span v-show="data" class="mr-2xs">{{$locale.baseText('workflows.item.created')}} {{ formattedCreatedAtDate }} </span>
-					<span v-if="settingsStore.areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
+	<n8n-card :class="$style.cardLink" @click="onClick">
+		<template #header>
+			<n8n-heading
+				tag="h2"
+				bold
+				class="ph-no-capture"
+				:class="$style.cardHeading"
+				data-test-id="workflow-card-name"
+			>
+				{{ data.name }}
+			</n8n-heading>
+		</template>
+		<div :class="$style.cardDescription">
+			<n8n-text color="text-light" size="small">
+				<span v-show="data"
+					>{{ $locale.baseText('workflows.item.updated') }} <time-ago :date="data.updatedAt" /> |
+				</span>
+				<span v-show="data" class="mr-2xs"
+					>{{ $locale.baseText('workflows.item.created') }} {{ formattedCreatedAtDate }}
+				</span>
+				<span
+					v-if="settingsStore.areTagsEnabled && data.tags && data.tags.length > 0"
+					v-show="data"
+				>
 					<n8n-tags
 						:tags="data.tags"
 						:truncateAt="3"
@@ -21,50 +31,50 @@
 						data-test-id="workflow-card-tags"
 					/>
 				</span>
-				</n8n-text>
+			</n8n-text>
+		</div>
+		<template #append>
+			<div :class="$style.cardActions">
+				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
+					<n8n-badge v-if="workflowPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
+						{{ $locale.baseText('workflows.item.owner') }}
+					</n8n-badge>
+				</enterprise-edition>
+
+				<workflow-activator
+					class="mr-s"
+					:workflow-active="data.active"
+					:workflow-id="data.id"
+					ref="activator"
+					data-test-id="workflow-card-activator"
+				/>
+
+				<n8n-action-toggle
+					:actions="actions"
+					theme="dark"
+					@action="onAction"
+					data-test-id="workflow-card-actions"
+				/>
 			</div>
-			<template #append>
-				<div :class="$style.cardActions">
-					<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
-						<n8n-badge
-							v-if="workflowPermissions.isOwner"
-							class="mr-xs"
-							theme="tertiary"
-							bold
-						>
-							{{$locale.baseText('workflows.item.owner')}}
-						</n8n-badge>
-					</enterprise-edition>
-
-					<workflow-activator
-						class="mr-s"
-						:workflow-active="data.active"
-						:workflow-id="data.id"
-						ref="activator"
-						data-test-id="workflow-card-activator"
-					/>
-
-					<n8n-action-toggle
-						:actions="actions"
-						theme="dark"
-						@action="onAction"
-						data-test-id="workflow-card-actions"
-					/>
-				</div>
-			</template>
+		</template>
 	</n8n-card>
 </template>
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import {IWorkflowDb, IUser, ITag} from "@/Interface";
-import {DUPLICATE_MODAL_KEY, EnterpriseEditionFeature, VIEWS, WORKFLOW_SHARE_MODAL_KEY} from '@/constants';
-import {showMessage} from "@/mixins/showMessage";
-import {getWorkflowPermissions, IPermissions} from "@/permissions";
-import dateformat from "dateformat";
+import { IWorkflowDb, IUser, ITag } from '@/Interface';
+import {
+	DUPLICATE_MODAL_KEY,
+	EnterpriseEditionFeature,
+	VIEWS,
+	WORKFLOW_SHARE_MODAL_KEY,
+} from '@/constants';
+import { showMessage } from '@/mixins/showMessage';
+import { getWorkflowPermissions, IPermissions } from '@/permissions';
+import dateformat from 'dateformat';
 import { restApi } from '@/mixins/restApi';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import Vue from "vue";
+import Vue from 'vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
@@ -78,10 +88,7 @@ export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(
-	showMessage,
-	restApi,
-).extend({
+export default mixins(showMessage, restApi).extend({
 	data() {
 		return {
 			EnterpriseEditionFeature,
@@ -113,19 +120,14 @@ export default mixins(
 		},
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-			useWorkflowsStore,
-		),
-		currentUser (): IUser {
-			return this.usersStore.currentUser || {} as IUser;
+		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore),
+		currentUser(): IUser {
+			return this.usersStore.currentUser || ({} as IUser);
 		},
 		workflowPermissions(): IPermissions {
 			return getWorkflowPermissions(this.currentUser, this.data);
 		},
-		actions(): Array<{ label: string; value: string; }> {
+		actions(): Array<{ label: string; value: string }> {
 			return [
 				{
 					label: this.$locale.baseText('workflows.item.open'),
@@ -139,15 +141,24 @@ export default mixins(
 					label: this.$locale.baseText('workflows.item.duplicate'),
 					value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
 				},
-			].concat(this.workflowPermissions.delete ? [{
-				label: this.$locale.baseText('workflows.item.delete'),
-				value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
-			}]: []);
+			].concat(
+				this.workflowPermissions.delete
+					? [
+							{
+								label: this.$locale.baseText('workflows.item.delete'),
+								value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
+							},
+					  ]
+					: [],
+			);
 		},
 		formattedCreatedAtDate(): string {
 			const currentYear = new Date().getFullYear();
 
-			return dateformat(this.data.createdAt, `d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`);
+			return dateformat(
+				this.data.createdAt,
+				`d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
+			);
 		},
 	},
 	methods: {
@@ -158,7 +169,10 @@ export default mixins(
 				}
 
 				if (event.metaKey || event.ctrlKey) {
-					const route = this.$router.resolve({name: VIEWS.WORKFLOW, params: { name: this.data.id }});
+					const route = this.$router.resolve({
+						name: VIEWS.WORKFLOW,
+						params: { name: this.data.id },
+					});
 					window.open(route.href, '_blank');
 
 					return;
@@ -188,13 +202,15 @@ export default mixins(
 					},
 				});
 			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.SHARE) {
-				this.uiStore.openModalWithData({ name: WORKFLOW_SHARE_MODAL_KEY, data: { id: this.data.id } });
+				this.uiStore.openModalWithData({
+					name: WORKFLOW_SHARE_MODAL_KEY,
+					data: { id: this.data.id },
+				});
 			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
 				const deleteConfirmed = await this.confirmMessage(
-					this.$locale.baseText(
-						'mainSidebar.confirmMessage.workflowDelete.message',
-						{ interpolate: { workflowName: this.data.name } },
-					),
+					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+						interpolate: { workflowName: this.data.name },
+					}),
 					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
 					'warning',
 					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
@@ -233,7 +249,7 @@ export default mixins(
 	cursor: pointer;
 
 	&:hover {
-		box-shadow: 0 2px 8px rgba(#441C17, 0.1);
+		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
 	}
 }
 
@@ -255,5 +271,3 @@ export default mixins(
 	align-items: center;
 }
 </style>
-
-
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 0082c71b58..baa1b8653b 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -38,8 +38,7 @@ export default mixins(showMessage).extend({
 		mode: {
 			type: String,
 			default: 'workflow',
-			validator: (value: string): boolean =>
-				['workflow', 'execution'].includes(value),
+			validator: (value: string): boolean => ['workflow', 'execution'].includes(value),
 		},
 		workflow: {
 			type: Object as () => IWorkflowDb,
@@ -56,8 +55,7 @@ export default mixins(showMessage).extend({
 		loaderType: {
 			type: String,
 			default: 'image',
-			validator: (value: string): boolean =>
-				['image', 'spinner'].includes(value),
+			validator: (value: string): boolean => ['image', 'spinner'].includes(value),
 		},
 	},
 	data() {
@@ -70,16 +68,14 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 		showPreview(): boolean {
-			return !this.loading &&
-				(
-					(this.mode === 'workflow' && !!this.workflow) ||
-					(this.mode === 'execution' && !!this.executionId)
-				) &&
-				this.ready;
+			return (
+				!this.loading &&
+				((this.mode === 'workflow' && !!this.workflow) ||
+					(this.mode === 'execution' && !!this.executionId)) &&
+				this.ready
+			);
 		},
 	},
 	methods: {
@@ -154,8 +150,7 @@ export default mixins(showMessage).extend({
 				} else if (json.command === 'error') {
 					this.$emit('close');
 				}
-			} catch (e) {
-			}
+			} catch (e) {}
 		},
 		onDocumentScroll() {
 			if (this.insideIframe) {
@@ -224,8 +219,8 @@ export default mixins(showMessage).extend({
 	color: var(--color-primary);
 	position: absolute;
 	top: 50% !important;
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
 }
 
 .imageLoader {
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 076240ec33..d0186d4d18 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -3,7 +3,11 @@
 		:name="WORKFLOW_SETTINGS_MODAL_KEY"
 		width="65%"
 		maxHeight="80%"
-		:title="$locale.baseText('workflowSettings.settingsFor', { interpolate: { workflowName, workflowId } })"
+		:title="
+			$locale.baseText('workflowSettings.settingsFor', {
+				interpolate: { workflowName, workflowId },
+			})
+		"
 		:eventBus="modalBus"
 		:scrollable="true"
 	>
@@ -11,8 +15,8 @@
 			<div v-loading="isLoading" class="workflow-settings">
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.errorWorkflow') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.errorWorkflow') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-html="helpTexts.errorWorkflow"></div>
 							</template>
@@ -20,20 +24,27 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.errorWorkflow" placeholder="Select Workflow" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.errorWorkflow"
+							placeholder="Select Workflow"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="item in workflows"
 								:key="item.id"
 								:label="item.name"
-								:value="item.id">
+								:value="item.id"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timezone') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.timezone') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.timezone"></div>
 							</template>
@@ -41,20 +52,27 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.timezone" placeholder="Select Timezone" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.timezone"
+							placeholder="Select Timezone"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="timezone of timezones"
 								:key="timezone.key"
 								:label="timezone.value"
-								:value="timezone.key">
+								:value="timezone.key"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveDataErrorExecution"></div>
 							</template>
@@ -62,20 +80,27 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.saveDataErrorExecution" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.saveDataErrorExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="option of saveDataErrorExecutionOptions"
 								:key="option.key"
 								:label="option.value"
-								:value="option.key">
+								:value="option.key"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveDataSuccessExecution"></div>
 							</template>
@@ -83,20 +108,27 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.saveDataSuccessExecution" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.saveDataSuccessExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="option of saveDataSuccessExecutionOptions"
 								:key="option.key"
 								:label="option.value"
-								:value="option.key">
+								:value="option.key"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveManualExecutions"></div>
 							</template>
@@ -104,20 +136,27 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.saveManualExecutions" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.saveManualExecutions"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="option of saveManualOptions"
 								:key="option.key"
 								:label="option.value"
-								:value="option.key">
+								:value="option.key"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveExecutionProgress"></div>
 							</template>
@@ -125,12 +164,19 @@
 						</n8n-tooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press">
-						<n8n-select v-model="workflowSettings.saveExecutionProgress" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
+						<n8n-select
+							v-model="workflowSettings.saveExecutionProgress"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							size="medium"
+							filterable
+							:limit-popper-width="true"
+						>
 							<n8n-option
 								v-for="option of saveExecutionProgressOptions"
 								:key="option.key"
 								:label="option.value"
-								:value="option.key">
+								:value="option.key"
+							>
 							</n8n-option>
 						</n8n-select>
 					</el-col>
@@ -138,8 +184,8 @@
 				<div v-if="isWorkflowSharingEnabled">
 					<el-row>
 						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerPolicy') + ":" }}
-							<n8n-tooltip class="setting-info" placement="top" >
+							{{ $locale.baseText('workflowSettings.callerPolicy') + ':' }}
+							<n8n-tooltip class="setting-info" placement="top">
 								<template #content>
 									<div v-text="helpTexts.workflowCallerPolicy"></div>
 								</template>
@@ -148,20 +194,27 @@
 						</el-col>
 
 						<el-col :span="14" class="ignore-key-press">
-							<n8n-select v-model="workflowSettings.callerPolicy" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
+							<n8n-select
+								v-model="workflowSettings.callerPolicy"
+								:placeholder="$locale.baseText('workflowSettings.selectOption')"
+								size="medium"
+								filterable
+								:limit-popper-width="true"
+							>
 								<n8n-option
 									v-for="option of workflowCallerPolicyOptions"
 									:key="option.key"
 									:label="option.value"
-									:value="option.key">
+									:value="option.key"
+								>
 								</n8n-option>
 							</n8n-select>
 						</el-col>
 					</el-row>
 					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
 						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerIds') + ":" }}
-							<n8n-tooltip class="setting-info" placement="top" >
+							{{ $locale.baseText('workflowSettings.callerIds') + ':' }}
+							<n8n-tooltip class="setting-info" placement="top">
 								<template #content>
 									<div v-text="helpTexts.workflowCallerIds"></div>
 								</template>
@@ -180,8 +233,8 @@
 				</div>
 				<el-row>
 					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ":" }}
-						<n8n-tooltip class="setting-info" placement="top" >
+						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ':' }}
+						<n8n-tooltip class="setting-info" placement="top">
 							<template #content>
 								<div v-text="helpTexts.executionTimeoutToggle"></div>
 							</template>
@@ -190,15 +243,20 @@
 					</el-col>
 					<el-col :span="14">
 						<div>
-							<el-switch ref="inputField" :value="workflowSettings.executionTimeout > -1" @change="toggleTimeout" active-color="#13ce66"></el-switch>
+							<el-switch
+								ref="inputField"
+								:value="workflowSettings.executionTimeout > -1"
+								@change="toggleTimeout"
+								active-color="#13ce66"
+							></el-switch>
 						</div>
 					</el-col>
 				</el-row>
 				<div v-if="workflowSettings.executionTimeout > -1">
 					<el-row>
 						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.timeoutAfter') + ":" }}
-							<n8n-tooltip class="setting-info" placement="top" >
+							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
+							<n8n-tooltip class="setting-info" placement="top">
 								<template #content>
 									<div v-text="helpTexts.executionTimeout"></div>
 								</template>
@@ -206,17 +264,34 @@
 							</n8n-tooltip>
 						</el-col>
 						<el-col :span="4">
-							<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
+							<n8n-input
+								size="medium"
+								:value="timeoutHMS.hours"
+								@input="(value) => setTimeout('hours', value)"
+								:min="0"
+							>
 								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
 							</n8n-input>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
-							<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
+							<n8n-input
+								size="medium"
+								:value="timeoutHMS.minutes"
+								@input="(value) => setTimeout('minutes', value)"
+								:min="0"
+								:max="60"
+							>
 								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
 							</n8n-input>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
-							<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
+							<n8n-input
+								size="medium"
+								:value="timeoutHMS.seconds"
+								@input="(value) => setTimeout('seconds', value)"
+								:min="0"
+								:max="60"
+							>
 								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
 							</n8n-input>
 						</el-col>
@@ -226,7 +301,12 @@
 		</template>
 		<template #footer>
 			<div class="action-buttons">
-				<n8n-button :label="$locale.baseText('workflowSettings.save')" size="large" float="right" @click="saveSettings" />
+				<n8n-button
+					:label="$locale.baseText('workflowSettings.save')"
+					size="large"
+					float="right"
+					@click="saveSettings"
+				/>
 			</div>
 		</template>
 	</Modal>
@@ -251,35 +331,42 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '../c
 
 import mixins from 'vue-typed-mixins';
 
-import { deepCopy } from "n8n-workflow";
+import { deepCopy } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
 
-export default mixins(
-	externalHooks,
-	genericHelpers,
-	restApi,
-	showMessage,
-).extend({
+export default mixins(externalHooks, genericHelpers, restApi, showMessage).extend({
 	name: 'WorkflowSettings',
 	components: {
 		Modal,
 	},
-	data () {
+	data() {
 		return {
 			isLoading: true,
 			helpTexts: {
 				errorWorkflow: this.$locale.baseText('workflowSettings.helpTexts.errorWorkflow'),
 				timezone: this.$locale.baseText('workflowSettings.helpTexts.timezone'),
-				saveDataErrorExecution: this.$locale.baseText('workflowSettings.helpTexts.saveDataErrorExecution'),
-				saveDataSuccessExecution: this.$locale.baseText('workflowSettings.helpTexts.saveDataSuccessExecution'),
-				saveExecutionProgress: this.$locale.baseText('workflowSettings.helpTexts.saveExecutionProgress'),
-				saveManualExecutions: this.$locale.baseText('workflowSettings.helpTexts.saveManualExecutions'),
-				executionTimeoutToggle: this.$locale.baseText('workflowSettings.helpTexts.executionTimeoutToggle'),
+				saveDataErrorExecution: this.$locale.baseText(
+					'workflowSettings.helpTexts.saveDataErrorExecution',
+				),
+				saveDataSuccessExecution: this.$locale.baseText(
+					'workflowSettings.helpTexts.saveDataSuccessExecution',
+				),
+				saveExecutionProgress: this.$locale.baseText(
+					'workflowSettings.helpTexts.saveExecutionProgress',
+				),
+				saveManualExecutions: this.$locale.baseText(
+					'workflowSettings.helpTexts.saveManualExecutions',
+				),
+				executionTimeoutToggle: this.$locale.baseText(
+					'workflowSettings.helpTexts.executionTimeoutToggle',
+				),
 				executionTimeout: this.$locale.baseText('workflowSettings.helpTexts.executionTimeout'),
-				workflowCallerPolicy: this.$locale.baseText('workflowSettings.helpTexts.workflowCallerPolicy'),
+				workflowCallerPolicy: this.$locale.baseText(
+					'workflowSettings.helpTexts.workflowCallerPolicy',
+				),
 				workflowCallerIds: this.$locale.baseText('workflowSettings.helpTexts.workflowCallerIds'),
 			},
 			defaultValues: {
@@ -290,12 +377,12 @@ export default mixins(
 				saveManualExecutions: false,
 				workflowCallerPolicy: '',
 			},
-			workflowCallerPolicyOptions: [] as Array<{ key: string, value: string }>,
-			saveDataErrorExecutionOptions: [] as Array<{ key: string, value: string }>,
-			saveDataSuccessExecutionOptions: [] as Array<{ key: string, value: string }>,
-			saveExecutionProgressOptions: [] as Array<{ key: string | boolean, value: string }>,
-			saveManualOptions: [] as Array<{ key: string | boolean, value: string }>,
-			timezones: [] as Array<{ key: string, value: string }>,
+			workflowCallerPolicyOptions: [] as Array<{ key: string; value: string }>,
+			saveDataErrorExecutionOptions: [] as Array<{ key: string; value: string }>,
+			saveDataSuccessExecutionOptions: [] as Array<{ key: string; value: string }>,
+			saveExecutionProgressOptions: [] as Array<{ key: string | boolean; value: string }>,
+			saveManualOptions: [] as Array<{ key: string | boolean; value: string }>,
+			timezones: [] as Array<{ key: string; value: string }>,
 			workflowSettings: {} as IWorkflowSettings,
 			workflows: [] as IWorkflowShortResponse[],
 			executionTimeout: 0,
@@ -307,11 +394,7 @@ export default mixins(
 	},
 
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useWorkflowsStore),
 		workflowName(): string {
 			return this.workflowsStore.workflowName;
 		},
@@ -322,7 +405,7 @@ export default mixins(
 			return this.settingsStore.isWorkflowSharingEnabled;
 		},
 	},
-	async mounted () {
+	async mounted() {
 		this.executionTimeout = this.rootStore.executionTimeout;
 		this.maxExecutionTimeout = this.rootStore.maxExecutionTimeout;
 
@@ -356,7 +439,11 @@ export default mixins(
 		try {
 			await Promise.all(promises);
 		} catch (error) {
-			this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
+			this.$showError(
+				error,
+				'Problem loading settings',
+				'The following error occurred loading the data:',
+			);
 		}
 
 		const workflowSettings = deepCopy(this.workflowsStore.workflowSettings) as IWorkflowSettings;
@@ -377,7 +464,8 @@ export default mixins(
 			workflowSettings.saveManualExecutions = this.defaultValues.saveManualExecutions;
 		}
 		if (workflowSettings.callerPolicy === undefined) {
-			workflowSettings.callerPolicy = this.defaultValues.workflowCallerPolicy as WorkflowCallerPolicyDefaultOption;
+			workflowSettings.callerPolicy = this.defaultValues
+				.workflowCallerPolicy as WorkflowCallerPolicyDefaultOption;
 		}
 		if (workflowSettings.executionTimeout === undefined) {
 			workflowSettings.executionTimeout = this.rootStore.executionTimeout;
@@ -391,7 +479,9 @@ export default mixins(
 		this.isLoading = false;
 
 		this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: true });
-		this.$telemetry.track('User opened workflow settings', { workflow_id: this.workflowsStore.workflowId });
+		this.$telemetry.track('User opened workflow settings', {
+			workflow_id: this.workflowsStore.workflowId,
+		});
 	},
 	methods: {
 		onCallerIdsInput(str: string) {
@@ -399,11 +489,11 @@ export default mixins(
 				? str
 				: str.replace(/[^0-9,\s]/g, '');
 		},
-		closeDialog () {
+		closeDialog() {
 			this.modalBus.$emit('close');
 			this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: false });
 		},
-		setTimeout (key: string, value: string) {
+		setTimeout(key: string, value: string) {
 			const time = value ? parseInt(value, 10) : 0;
 
 			this.timeoutHMS = {
@@ -411,7 +501,7 @@ export default mixins(
 				[key]: time,
 			};
 		},
-		async loadWorkflowCallerPolicyOptions () {
+		async loadWorkflowCallerPolicyOptions() {
 			this.workflowCallerPolicyOptions = [
 				{
 					key: 'any',
@@ -427,19 +517,24 @@ export default mixins(
 				},
 			];
 		},
-		async loadSaveDataErrorExecutionOptions () {
+		async loadSaveDataErrorExecutionOptions() {
 			this.saveDataErrorExecutionOptions.length = 0;
-			this.saveDataErrorExecutionOptions.push.apply( // eslint-disable-line no-useless-call
-				this.saveDataErrorExecutionOptions, [
+			this.saveDataErrorExecutionOptions.push.apply(
+				// eslint-disable-line no-useless-call
+				this.saveDataErrorExecutionOptions,
+				[
 					{
 						key: 'DEFAULT',
 						value: this.$locale.baseText(
 							'workflowSettings.saveDataErrorExecutionOptions.defaultSave',
 							{
 								interpolate: {
-									defaultValue: this.defaultValues.saveDataErrorExecution === 'all'
-										? this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.save')
-										: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'),
+									defaultValue:
+										this.defaultValues.saveDataErrorExecution === 'all'
+											? this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.save')
+											: this.$locale.baseText(
+													'workflowSettings.saveDataErrorExecutionOptions.doNotSave',
+											  ),
 								},
 							},
 						),
@@ -450,24 +545,33 @@ export default mixins(
 					},
 					{
 						key: 'none',
-						value: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'),
+						value: this.$locale.baseText(
+							'workflowSettings.saveDataErrorExecutionOptions.doNotSave',
+						),
 					},
 				],
 			);
 		},
-		async loadSaveDataSuccessExecutionOptions () {
+		async loadSaveDataSuccessExecutionOptions() {
 			this.saveDataSuccessExecutionOptions.length = 0;
-			this.saveDataSuccessExecutionOptions.push.apply( // eslint-disable-line no-useless-call
-				this.saveDataSuccessExecutionOptions, [
+			this.saveDataSuccessExecutionOptions.push.apply(
+				// eslint-disable-line no-useless-call
+				this.saveDataSuccessExecutionOptions,
+				[
 					{
 						key: 'DEFAULT',
 						value: this.$locale.baseText(
 							'workflowSettings.saveDataSuccessExecutionOptions.defaultSave',
 							{
 								interpolate: {
-									defaultValue: this.defaultValues.saveDataSuccessExecution === 'all'
-										? this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.save')
-										: this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
+									defaultValue:
+										this.defaultValues.saveDataSuccessExecution === 'all'
+											? this.$locale.baseText(
+													'workflowSettings.saveDataSuccessExecutionOptions.save',
+											  )
+											: this.$locale.baseText(
+													'workflowSettings.saveDataSuccessExecutionOptions.doNotSave',
+											  ),
 								},
 							},
 						),
@@ -478,22 +582,28 @@ export default mixins(
 					},
 					{
 						key: 'none',
-						value: this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
+						value: this.$locale.baseText(
+							'workflowSettings.saveDataSuccessExecutionOptions.doNotSave',
+						),
 					},
 				],
 			);
 		},
-		async loadSaveExecutionProgressOptions () {
+		async loadSaveExecutionProgressOptions() {
 			this.saveExecutionProgressOptions.length = 0;
-			this.saveExecutionProgressOptions.push.apply( // eslint-disable-line no-useless-call
-				this.saveExecutionProgressOptions, [
+			this.saveExecutionProgressOptions.push.apply(
+				// eslint-disable-line no-useless-call
+				this.saveExecutionProgressOptions,
+				[
 					{
 						key: 'DEFAULT',
 						value: this.$locale.baseText(
 							'workflowSettings.saveExecutionProgressOptions.defaultSave',
 							{
 								interpolate: {
-									defaultValue: this.defaultValues.saveExecutionProgress ? this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.yes') : this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.no'),
+									defaultValue: this.defaultValues.saveExecutionProgress
+										? this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.yes')
+										: this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.no'),
 								},
 							},
 						),
@@ -509,18 +619,17 @@ export default mixins(
 				],
 			);
 		},
-		async loadSaveManualOptions () {
+		async loadSaveManualOptions() {
 			this.saveManualOptions.length = 0;
 			this.saveManualOptions.push({
 				key: 'DEFAULT',
-				value: this.$locale.baseText(
-					'workflowSettings.saveManualOptions.defaultSave',
-					{
-						interpolate: {
-							defaultValue: this.defaultValues.saveManualExecutions ? this.$locale.baseText('workflowSettings.saveManualOptions.yes') : this.$locale.baseText('workflowSettings.saveManualOptions.no'),
-						},
+				value: this.$locale.baseText('workflowSettings.saveManualOptions.defaultSave', {
+					interpolate: {
+						defaultValue: this.defaultValues.saveManualExecutions
+							? this.$locale.baseText('workflowSettings.saveManualOptions.yes')
+							: this.$locale.baseText('workflowSettings.saveManualOptions.no'),
 					},
-				),
+				}),
 			});
 			this.saveManualOptions.push({
 				key: true,
@@ -532,7 +641,7 @@ export default mixins(
 			});
 		},
 
-		async loadTimezones () {
+		async loadTimezones() {
 			if (this.timezones.length !== 0) {
 				// Data got already loaded
 				return;
@@ -547,10 +656,9 @@ export default mixins(
 
 			this.timezones.push({
 				key: 'DEFAULT',
-				value: this.$locale.baseText(
-					'workflowSettings.defaultTimezone',
-					{ interpolate: { defaultTimezoneValue } },
-				),
+				value: this.$locale.baseText('workflowSettings.defaultTimezone', {
+					interpolate: { defaultTimezoneValue },
+				}),
 			});
 			for (const timezone of Object.keys(timezones)) {
 				this.timezones.push({
@@ -559,7 +667,7 @@ export default mixins(
 				});
 			}
 		},
-		async loadWorkflows () {
+		async loadWorkflows() {
 			const workflows = await this.restApi().getWorkflows();
 			workflows.sort((a, b) => {
 				if (a.name.toLowerCase() < b.name.toLowerCase()) {
@@ -579,7 +687,7 @@ export default mixins(
 
 			Vue.set(this, 'workflows', workflows);
 		},
-		async saveSettings () {
+		async saveSettings() {
 			// Set that the active state should be changed
 			const data: IWorkflowDataUpdate = {
 				settings: this.workflowSettings,
@@ -588,9 +696,7 @@ export default mixins(
 			// Convert hours, minutes, seconds into seconds for the workflow timeout
 			const { hours, minutes, seconds } = this.timeoutHMS;
 			data.settings!.executionTimeout =
-				data.settings!.executionTimeout !== -1
-					? hours * 3600 + minutes * 60 + seconds
-					: -1;
+				data.settings!.executionTimeout !== -1 ? hours * 3600 + minutes * 60 + seconds : -1;
 
 			if (data.settings!.executionTimeout === 0) {
 				this.$showError(
@@ -603,19 +709,18 @@ export default mixins(
 
 			// @ts-ignore
 			if (data.settings!.executionTimeout > this.workflowSettings.maxExecutionTimeout) {
-				const { hours, minutes, seconds } = this.convertToHMS(this.workflowSettings.maxExecutionTimeout as number);
+				const { hours, minutes, seconds } = this.convertToHMS(
+					this.workflowSettings.maxExecutionTimeout as number,
+				);
 				this.$showError(
 					new Error(
-						this.$locale.baseText(
-							'workflowSettings.showError.saveSettings2.errorMessage',
-							{
-								interpolate: {
-									hours: hours.toString(),
-									minutes: minutes.toString(),
-									seconds: seconds.toString(),
-								},
+						this.$locale.baseText('workflowSettings.showError.saveSettings2.errorMessage', {
+							interpolate: {
+								hours: hours.toString(),
+								minutes: minutes.toString(),
+								seconds: seconds.toString(),
 							},
-						),
+						}),
 					),
 					this.$locale.baseText('workflowSettings.showError.saveSettings2.title'),
 					this.$locale.baseText('workflowSettings.showError.saveSettings2.message') + ':',
@@ -661,10 +766,13 @@ export default mixins(
 			this.closeDialog();
 
 			this.$externalHooks().run('workflowSettings.saveSettings', { oldSettings });
-			this.$telemetry.track('User updated workflow settings', { workflow_id: this.workflowsStore.workflowId });
+			this.$telemetry.track('User updated workflow settings', {
+				workflow_id: this.workflowsStore.workflowId,
+			});
 		},
 		toggleTimeout() {
-			this.workflowSettings.executionTimeout = this.workflowSettings.executionTimeout === -1 ? 0 : -1;
+			this.workflowSettings.executionTimeout =
+				this.workflowSettings.executionTimeout === -1 ? 0 : -1;
 		},
 		convertToHMS(num: number): ITimeoutHMS {
 			if (num > 0) {
@@ -705,5 +813,4 @@ export default mixins(
 .timeout-input {
 	margin-left: 5px;
 }
-
 </style>
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index a9a8a2f777..8a3ae6b273 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -1,7 +1,11 @@
 <template>
 	<Modal
 		width="460px"
-		:title="$locale.baseText(dynamicTranslations.workflows.shareModal.title, { interpolate: { name: workflow.name } })"
+		:title="
+			$locale.baseText(dynamicTranslations.workflows.shareModal.title, {
+				interpolate: { name: workflow.name },
+			})
+		"
 		:eventBus="modalBus"
 		:name="WORKFLOW_SHARE_MODAL_KEY"
 		:center="true"
@@ -14,8 +18,12 @@
 				</n8n-text>
 			</div>
 			<div v-else :class="$style.container">
-				<n8n-info-tip v-if="!workflowPermissions.isOwner" :bold="false" class="mb-s" >
-					{{ $locale.baseText('workflows.shareModal.info.sharee', { interpolate: { workflowOwnerName } }) }}
+				<n8n-info-tip v-if="!workflowPermissions.isOwner" :bold="false" class="mb-s">
+					{{
+						$locale.baseText('workflows.shareModal.info.sharee', {
+							interpolate: { workflowOwnerName },
+						})
+					}}
 				</n8n-info-tip>
 				<enterprise-edition :features="[EnterpriseEditionFeature.WorkflowSharing]">
 					<n8n-user-select
@@ -46,21 +54,21 @@
 								size="small"
 								@change="onRoleAction(user, $event)"
 							>
-								<n8n-option
-									:label="$locale.baseText('workflows.roles.editor')"
-									value="editor" />
-								<n8n-option
-									:class="$style.roleSelectRemoveOption"
-									value="remove"
-								>
-									<n8n-text color="danger">{{ $locale.baseText('workflows.shareModal.list.delete') }}</n8n-text>
+								<n8n-option :label="$locale.baseText('workflows.roles.editor')" value="editor" />
+								<n8n-option :class="$style.roleSelectRemoveOption" value="remove">
+									<n8n-text color="danger">{{
+										$locale.baseText('workflows.shareModal.list.delete')
+									}}</n8n-text>
 								</n8n-option>
 							</n8n-select>
 						</template>
 					</n8n-users-list>
 					<template #fallback>
 						<n8n-text>
-							<i18n :path="dynamicTranslations.workflows.sharing.unavailable.description" tag="span">
+							<i18n
+								:path="dynamicTranslations.workflows.sharing.unavailable.description"
+								tag="span"
+							>
 								<template #action />
 							</i18n>
 						</n8n-text>
@@ -75,13 +83,12 @@
 					{{ $locale.baseText('workflows.shareModal.isDefaultUser.button') }}
 				</n8n-button>
 			</div>
-			<enterprise-edition v-else :features="[EnterpriseEditionFeature.WorkflowSharing]" :class="$style.actionButtons">
-				<n8n-text
-					v-show="isDirty"
-					color="text-light"
-					size="small"
-					class="mr-xs"
-				>
+			<enterprise-edition
+				v-else
+				:features="[EnterpriseEditionFeature.WorkflowSharing]"
+				:class="$style.actionButtons"
+			>
+				<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
 					{{ $locale.baseText('workflows.shareModal.changesHint') }}
 				</n8n-text>
 				<n8n-button
@@ -96,10 +103,7 @@
 
 				<template #fallback>
 					<n8n-link :to="dynamicTranslations.workflows.sharing.unavailable.linkURL">
-						<n8n-button
-							:loading="loading"
-							size="medium"
-						>
+						<n8n-button :loading="loading" size="medium">
 							{{ $locale.baseText(dynamicTranslations.workflows.sharing.unavailable.button) }}
 						</n8n-button>
 					</n8n-link>
@@ -118,21 +122,19 @@ import {
 	VIEWS,
 	WORKFLOW_SHARE_MODAL_KEY,
 } from '../constants';
-import {IUser, IWorkflowDb, NestedRecord} from "@/Interface";
-import { getWorkflowPermissions, IPermissions } from "@/permissions";
-import mixins from "vue-typed-mixins";
-import {showMessage} from "@/mixins/showMessage";
-import {nodeViewEventBus} from "@/event-bus/node-view-event-bus";
-import {mapStores} from "pinia";
-import {useSettingsStore} from "@/stores/settings";
-import {useUIStore} from "@/stores/ui";
-import {useUsersStore} from "@/stores/users";
-import {useWorkflowsStore} from "@/stores/workflows";
-import useWorkflowsEEStore from "@/stores/workflows.ee";
+import { IUser, IWorkflowDb, NestedRecord } from '@/Interface';
+import { getWorkflowPermissions, IPermissions } from '@/permissions';
+import mixins from 'vue-typed-mixins';
+import { showMessage } from '@/mixins/showMessage';
+import { nodeViewEventBus } from '@/event-bus/node-view-event-bus';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import useWorkflowsEEStore from '@/stores/workflows.ee';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'workflow-share-modal',
 	components: {
 		Modal,
@@ -145,9 +147,10 @@ export default mixins(
 	},
 	data() {
 		const workflowsStore = useWorkflowsStore();
-		const workflow = this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
-			? workflowsStore.workflow
-			: workflowsStore.workflowsById[this.data.id];
+		const workflow =
+			this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
+				? workflowsStore.workflow
+				: workflowsStore.workflowsById[this.data.id];
 
 		return {
 			WORKFLOW_SHARE_MODAL_KEY,
@@ -158,25 +161,37 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore, useWorkflowsEEStore),
+		...mapStores(
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+			useWorkflowsEEStore,
+		),
 		isDefaultUser(): boolean {
 			return this.usersStore.isDefaultUser;
 		},
 		usersList(): IUser[] {
 			return this.usersStore.allUsers.filter((user: IUser) => {
 				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
-				const isAlreadySharedWithUser = (this.sharedWith || []).find((sharee) => sharee.id === user.id);
+				const isAlreadySharedWithUser = (this.sharedWith || []).find(
+					(sharee) => sharee.id === user.id,
+				);
 
 				return !isCurrentUser && !isAlreadySharedWithUser;
 			});
 		},
 		sharedWithList(): Array<Partial<IUser>> {
-			return ([
-				{
-					...(this.workflow && this.workflow.ownedBy ? this.workflow.ownedBy : this.usersStore.currentUser),
-					isOwner: true,
-				},
-			] as Array<Partial<IUser>>).concat(this.sharedWith || []);
+			return (
+				[
+					{
+						...(this.workflow && this.workflow.ownedBy
+							? this.workflow.ownedBy
+							: this.usersStore.currentUser),
+						isOwner: true,
+					},
+				] as Array<Partial<IUser>>
+			).concat(this.sharedWith || []);
 		},
 		workflow(): IWorkflowDb {
 			return this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
@@ -193,7 +208,10 @@ export default mixins(
 			return this.workflowsEEStore.getWorkflowOwnerName(`${this.workflow.id}`);
 		},
 		isSharingAvailable(): boolean {
-			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing) === true;
+			return (
+				this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing) ===
+				true
+			);
 		},
 		dynamicTranslations(): NestedRecord<string> {
 			return this.uiStore.dynamicTranslations;
@@ -201,10 +219,12 @@ export default mixins(
 		isDirty(): boolean {
 			const previousSharedWith = this.workflow.sharedWith || [];
 
-			return this.sharedWith.length !== previousSharedWith.length ||
+			return (
+				this.sharedWith.length !== previousSharedWith.length ||
 				this.sharedWith.some(
 					(sharee) => !previousSharedWith.find((previousSharee) => sharee.id === previousSharee.id),
-				);
+				)
+			);
 		},
 	},
 	methods: {
@@ -229,7 +249,10 @@ export default mixins(
 
 			try {
 				const workflowId = await saveWorkflowPromise();
-				await this.workflowsEEStore.saveWorkflowSharedWith({ workflowId, sharedWith: this.sharedWith });
+				await this.workflowsEEStore.saveWorkflowSharedWith({
+					workflowId,
+					sharedWith: this.sharedWith,
+				});
 
 				this.$showMessage({
 					title: this.$locale.baseText('workflows.shareModal.onSave.success.title'),
@@ -252,48 +275,69 @@ export default mixins(
 			const user = this.usersStore.getUserById(userId)!;
 			const isNewSharee = !(this.workflow.sharedWith || []).find((sharee) => sharee.id === userId);
 
-			const isLastUserWithAccessToCredentialsById = (this.workflow.usedCredentials || [])
-				.reduce<Record<string, boolean>>((acc, credential) => {
-					if (!credential.id || !credential.ownedBy || !credential.sharedWith || !this.workflow.sharedWith) {
-						return acc;
-					}
-
-					// if is credential owner, and no credential sharees have access to workflow  => NOT OK
-					// if is credential owner, and credential sharees have access to workflow => OK
-
-					// if is credential sharee, and no credential sharees have access to workflow or owner does not have access to workflow => NOT OK
-					// if is credential sharee, and credential owner has access to workflow => OK
-					// if is credential sharee, and other credential sharees have access to workflow => OK
-
-					let isLastUserWithAccess = false;
-
-					const isCredentialOwner = credential.ownedBy.id === user.id;
-					const isCredentialSharee = !!credential.sharedWith.find((sharee) => sharee.id === user.id);
-
-					if (isCredentialOwner) {
-						isLastUserWithAccess = !credential.sharedWith.some((sharee) => {
-							return this.workflow.sharedWith!.find((workflowSharee) => workflowSharee.id === sharee.id);
-						});
-					} else if (isCredentialSharee) {
-						isLastUserWithAccess = !credential.sharedWith.some((sharee) => {
-							return this.workflow.sharedWith!.find((workflowSharee) => workflowSharee.id === sharee.id);
-						}) && !this.workflow.sharedWith!.find((workflowSharee) => workflowSharee.id === credential.ownedBy!.id);
-					}
-
-					acc[credential.id] = isLastUserWithAccess;
-
+			const isLastUserWithAccessToCredentialsById = (this.workflow.usedCredentials || []).reduce<
+				Record<string, boolean>
+			>((acc, credential) => {
+				if (
+					!credential.id ||
+					!credential.ownedBy ||
+					!credential.sharedWith ||
+					!this.workflow.sharedWith
+				) {
 					return acc;
-				}, {});
+				}
 
-			const isLastUserWithAccessToCredentials = Object.values(isLastUserWithAccessToCredentialsById).some((value) => value);
+				// if is credential owner, and no credential sharees have access to workflow  => NOT OK
+				// if is credential owner, and credential sharees have access to workflow => OK
+
+				// if is credential sharee, and no credential sharees have access to workflow or owner does not have access to workflow => NOT OK
+				// if is credential sharee, and credential owner has access to workflow => OK
+				// if is credential sharee, and other credential sharees have access to workflow => OK
+
+				let isLastUserWithAccess = false;
+
+				const isCredentialOwner = credential.ownedBy.id === user.id;
+				const isCredentialSharee = !!credential.sharedWith.find((sharee) => sharee.id === user.id);
+
+				if (isCredentialOwner) {
+					isLastUserWithAccess = !credential.sharedWith.some((sharee) => {
+						return this.workflow.sharedWith!.find(
+							(workflowSharee) => workflowSharee.id === sharee.id,
+						);
+					});
+				} else if (isCredentialSharee) {
+					isLastUserWithAccess =
+						!credential.sharedWith.some((sharee) => {
+							return this.workflow.sharedWith!.find(
+								(workflowSharee) => workflowSharee.id === sharee.id,
+							);
+						}) &&
+						!this.workflow.sharedWith!.find(
+							(workflowSharee) => workflowSharee.id === credential.ownedBy!.id,
+						);
+				}
+
+				acc[credential.id] = isLastUserWithAccess;
+
+				return acc;
+			}, {});
+
+			const isLastUserWithAccessToCredentials = Object.values(
+				isLastUserWithAccessToCredentialsById,
+			).some((value) => value);
 
 			let confirm = true;
 			if (!isNewSharee && isLastUserWithAccessToCredentials) {
 				confirm = await this.confirmMessage(
-					this.$locale.baseText(`workflows.shareModal.list.delete.confirm.lastUserWithAccessToCredentials.message`, {
-						interpolate: { name: user.fullName as string, workflow: this.workflow.name },
+					this.$locale.baseText(
+						`workflows.shareModal.list.delete.confirm.lastUserWithAccessToCredentials.message`,
+						{
+							interpolate: { name: user.fullName as string, workflow: this.workflow.name },
+						},
+					),
+					this.$locale.baseText('workflows.shareModal.list.delete.confirm.title', {
+						interpolate: { name: user.fullName },
 					}),
-					this.$locale.baseText('workflows.shareModal.list.delete.confirm.title', { interpolate: { name: user.fullName } }),
 					null,
 					this.$locale.baseText('workflows.shareModal.list.delete.confirm.confirmButtonText'),
 					this.$locale.baseText('workflows.shareModal.list.delete.confirm.cancelButtonText'),
@@ -314,9 +358,7 @@ export default mixins(
 		async onCloseModal() {
 			if (this.isDirty) {
 				const shouldSave = await this.confirmMessage(
-					this.$locale.baseText(
-						'workflows.shareModal.saveBeforeClose.message',
-					),
+					this.$locale.baseText('workflows.shareModal.saveBeforeClose.message'),
 					this.$locale.baseText('workflows.shareModal.saveBeforeClose.title'),
 					'warning',
 					this.$locale.baseText('workflows.shareModal.saveBeforeClose.confirmButtonText'),
diff --git a/packages/editor-ui/src/components/forms/CodeEditor.vue b/packages/editor-ui/src/components/forms/CodeEditor.vue
index 6ebe85a70c..bd105f3809 100644
--- a/packages/editor-ui/src/components/forms/CodeEditor.vue
+++ b/packages/editor-ui/src/components/forms/CodeEditor.vue
@@ -61,7 +61,9 @@ export default Vue.extend({
 				}
 			});
 
-			const darkModeBetaEnabled = document.body.classList.contains('theme-dark-beta') && window.matchMedia('(prefers-color-scheme: dark)').matches;
+			const darkModeBetaEnabled =
+				document.body.classList.contains('theme-dark-beta') &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches;
 
 			monaco.editor.defineTheme('n8nCustomTheme', {
 				base: darkModeBetaEnabled ? 'vs-dark' : 'vs',
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index d04ab8968d..be77568a94 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -1,7 +1,5 @@
 <template>
-	<n8n-popover
-		trigger="click"
-	>
+	<n8n-popover trigger="click">
 		<template #reference>
 			<n8n-button
 				icon="filter"
@@ -11,22 +9,19 @@
 				:class="[$style['filter-button'], 'ml-2xs']"
 				data-test-id="resources-list-filters-trigger"
 			>
-				<n8n-badge
-					v-show="filtersLength > 0"
-					theme="primary"
-					class="mr-4xs"
-				>
+				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
 					{{ filtersLength }}
 				</n8n-badge>
 				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
 			</n8n-button>
 		</template>
-		<div
-			:class="$style['filters-dropdown']"
-			data-test-id="resources-list-filters-dropdown"
-		>
+		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
 			<slot :filters="value" :setKeyValue="setKeyValue" />
-			<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
+			<enterprise-edition
+				class="mb-s"
+				:features="[EnterpriseEditionFeature.Sharing]"
+				v-if="shareable"
+			>
 				<n8n-input-label
 					:label="$locale.baseText('forms.resourceFiltersDropdown.ownedBy')"
 					:bold="false"
@@ -69,8 +64,8 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import {EnterpriseEditionFeature} from "@/constants";
-import {IUser} from "@/Interface";
+import { EnterpriseEditionFeature } from '@/constants';
+import { IUser } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 
@@ -102,10 +97,14 @@ export default Vue.extend({
 	computed: {
 		...mapStores(useUsersStore),
 		ownedByUsers(): IUser[] {
-			return this.usersStore.allUsers.map((user) => user.id === this.value.sharedWith ? { ...user, disabled: true } : user);
+			return this.usersStore.allUsers.map((user) =>
+				user.id === this.value.sharedWith ? { ...user, disabled: true } : user,
+			);
 		},
 		sharedWithUsers(): IUser[] {
-			return this.usersStore.allUsers.map((user) => user.id === this.value.ownedBy ? { ...user, disabled: true } : user);
+			return this.usersStore.allUsers.map((user) =>
+				user.id === this.value.ownedBy ? { ...user, disabled: true } : user,
+			);
 		},
 		filtersLength(): number {
 			let length = 0;
@@ -115,7 +114,11 @@ export default Vue.extend({
 					return;
 				}
 
-				length += (Array.isArray(this.value[key]) ? this.value[key].length > 0 : this.value[key] !== '') ? 1 : 0;
+				length += (
+					Array.isArray(this.value[key]) ? this.value[key].length > 0 : this.value[key] !== ''
+				)
+					? 1
+					: 0;
 			});
 
 			return length;
diff --git a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
index 553221dbf4..8f68a890a3 100644
--- a/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
+++ b/packages/editor-ui/src/components/forms/ResourceOwnershipSelect.ee.vue
@@ -1,10 +1,10 @@
 <template>
-		<n8n-menu
-			:items="menuItems"
-			mode="tabs"
-			:value="value ? 'owner' : 'all'"
-			@input="onSelectOwner"
-		/>
+	<n8n-menu
+		:items="menuItems"
+		mode="tabs"
+		:value="value ? 'owner' : 'all'"
+		@input="onSelectOwner"
+	/>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index a48c45c7f5..db9bdfb54a 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -8,7 +8,12 @@
 			</div>
 
 			<div class="mt-xs mb-l">
-				<n8n-button size="large" block @click="$emit('click:add', $event)" data-test-id="resources-list-add">
+				<n8n-button
+					size="large"
+					block
+					@click="$emit('click:add', $event)"
+					data-test-id="resources-list-add"
+				>
 					{{ $locale.baseText(`${resourceKey}.add`) }}
 				</n8n-button>
 			</div>
@@ -23,9 +28,9 @@
 		</template>
 
 		<div v-if="loading">
-			<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom"/>
-			<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom"/>
-			<n8n-loading :class="$style['card-loading']" variant="custom"/>
+			<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom" />
+			<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom" />
+			<n8n-loading :class="$style['card-loading']" variant="custom" />
 		</div>
 		<template v-else>
 			<div class="ph-no-capture" v-if="resources.length === 0">
@@ -33,9 +38,16 @@
 					<n8n-action-box
 						data-test-id="empty-resources-list"
 						emoji="👋"
-						:heading="$locale.baseText(usersStore.currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
-							interpolate: { name: usersStore.currentUser.firstName }
-						})"
+						:heading="
+							$locale.baseText(
+								usersStore.currentUser.firstName
+									? `${resourceKey}.empty.heading`
+									: `${resourceKey}.empty.heading.userNotSetup`,
+								{
+									interpolate: { name: usersStore.currentUser.firstName },
+								},
+							)
+						"
 						:description="$locale.baseText(`${resourceKey}.empty.description`)"
 						:buttonText="$locale.baseText(`${resourceKey}.empty.button`)"
 						buttonType="secondary"
@@ -57,19 +69,27 @@
 								data-test-id="resources-list-search"
 							>
 								<template #prefix>
-									<n8n-icon icon="search"/>
+									<n8n-icon icon="search" />
 								</template>
 							</n8n-input>
 							<div :class="$style['sort-and-filter']">
-								<n8n-select
-									v-model="sortBy"
-									size="medium"
-									data-test-id="resources-list-sort"
-								>
-									<n8n-option value="lastUpdated" :label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"/>
-									<n8n-option value="lastCreated" :label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"/>
-									<n8n-option value="nameAsc" :label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"/>
-									<n8n-option value="nameDesc" :label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"/>
+								<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
+									<n8n-option
+										value="lastUpdated"
+										:label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"
+									/>
+									<n8n-option
+										value="lastCreated"
+										:label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"
+									/>
+									<n8n-option
+										value="nameAsc"
+										:label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"
+									/>
+									<n8n-option
+										value="nameDesc"
+										:label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"
+									/>
 								</n8n-select>
 								<resource-filters-dropdown
 									:keys="filterKeys"
@@ -98,8 +118,17 @@
 				</div>
 
 				<div class="mt-xs mb-l">
-					<ul :class="[$style.list, 'list-style-none']" v-if="filteredAndSortedSubviewResources.length > 0" data-test-id="resources-list">
-						<li v-for="resource in filteredAndSortedSubviewResources" :key="resource.id" class="mb-2xs" data-test-id="resources-list-item">
+					<ul
+						:class="[$style.list, 'list-style-none']"
+						v-if="filteredAndSortedSubviewResources.length > 0"
+						data-test-id="resources-list"
+					>
+						<li
+							v-for="resource in filteredAndSortedSubviewResources"
+							:key="resource.id"
+							class="mb-2xs"
+							data-test-id="resources-list-item"
+						>
 							<slot :data="resource" />
 						</li>
 					</ul>
@@ -108,11 +137,19 @@
 						<template v-if="shouldSwitchToAllSubview">
 							<span v-if="!filters.search">
 								({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
-								<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.switchToShared.link`) }}</n8n-link>)
+								<n8n-link @click="setOwnerSubview(false)">{{
+									$locale.baseText(`${resourceKey}.noResults.switchToShared.link`)
+								}}</n8n-link
+								>)
 							</span>
 							<span v-else>
-								({{ $locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`) }}
-								<n8n-link @click="setOwnerSubview(false)">{{$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`) }}</n8n-link>)
+								({{
+									$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`)
+								}}
+								<n8n-link @click="setOwnerSubview(false)">{{
+									$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`)
+								}}</n8n-link
+								>)
 							</span>
 						</template>
 					</n8n-text>
@@ -123,18 +160,18 @@
 </template>
 
 <script lang="ts">
-import {showMessage} from '@/mixins/showMessage';
-import {IUser} from '@/Interface';
+import { showMessage } from '@/mixins/showMessage';
+import { IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
-import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
-import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
-import {EnterpriseEditionFeature} from "@/constants";
-import TemplateCard from "@/components/TemplateCard.vue";
-import Vue, {PropType} from "vue";
-import {debounceHelper} from '@/mixins/debounce';
-import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
-import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
+import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
+import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
+import { EnterpriseEditionFeature } from '@/constants';
+import TemplateCard from '@/components/TemplateCard.vue';
+import Vue, { PropType } from 'vue';
+import { debounceHelper } from '@/mixins/debounce';
+import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
+import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
@@ -160,10 +197,7 @@ type IResourceKeyType = 'credentials' | 'workflows';
 
 const filterKeys = ['ownedBy', 'sharedWith'];
 
-export default mixins(
-	showMessage,
-	debounceHelper,
-).extend({
+export default mixins(showMessage, debounceHelper).extend({
 	name: 'resources-list-layout',
 	components: {
 		TemplateCard,
@@ -212,17 +246,17 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useUsersStore,
-		),
+		...mapStores(useSettingsStore, useUsersStore),
 		subviewResources(): IResource[] {
 			if (!this.shareable) {
 				return this.resources as IResource[];
 			}
 
 			return (this.resources as IResource[]).filter((resource) => {
-				if (this.isOwnerSubview && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
+				if (
+					this.isOwnerSubview &&
+					this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)
+				) {
 					return !!(resource.ownedBy && resource.ownedBy.id === this.usersStore.currentUser?.id);
 				}
 
@@ -241,7 +275,12 @@ export default mixins(
 				}
 
 				if (this.filters.sharedWith) {
-					matches = matches && !!(resource.sharedWith && resource.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
+					matches =
+						matches &&
+						!!(
+							resource.sharedWith &&
+							resource.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith)
+						);
 				}
 
 				if (this.filters.search) {
@@ -260,9 +299,9 @@ export default mixins(
 			return filtered.sort((a, b) => {
 				switch (this.sortBy) {
 					case 'lastUpdated':
-						return (new Date(b.updatedAt)).valueOf() - (new Date(a.updatedAt)).valueOf();
+						return new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
 					case 'lastCreated':
-						return (new Date(b.createdAt)).valueOf() - (new Date(a.createdAt)).valueOf();
+						return new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
 					case 'nameAsc':
 						return a.name.trim().localeCompare(b.name.trim());
 					case 'nameDesc':
@@ -305,7 +344,9 @@ export default mixins(
 			this.isOwnerSubview = active;
 		},
 		getTelemetrySubview(): string {
-			return this.$locale.baseText(`${this.resourceKey as IResourceKeyType}.menu.${this.isOwnerSubview ? 'my' : 'all'}`);
+			return this.$locale.baseText(
+				`${this.resourceKey as IResourceKeyType}.menu.${this.isOwnerSubview ? 'my' : 'all'}`,
+			);
 		},
 		sendSubviewTelemetry() {
 			this.$telemetry.track(`User changed ${this.resourceKey} sub view`, {
@@ -326,7 +367,7 @@ export default mixins(
 					return;
 				}
 
-				setTimeout(() => this.resettingFilters = false, 1500);
+				setTimeout(() => (this.resettingFilters = false), 1500);
 			}
 
 			const filters = this.filters as Record<string, string[] | string | boolean>;
@@ -369,7 +410,7 @@ export default mixins(
 			this.sendFiltersTelemetry('sharedWith');
 		},
 		'filters.search'() {
-			this.callDebounced('sendFiltersTelemetry', {debounceTime: 1000, trailing: true}, 'search');
+			this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
 		},
 		sortBy() {
 			this.sendSortingTelemetry();
diff --git a/packages/editor-ui/src/components/transitions/SlideTransition.vue b/packages/editor-ui/src/components/transitions/SlideTransition.vue
index 94e7830c8c..e4fa497a20 100644
--- a/packages/editor-ui/src/components/transitions/SlideTransition.vue
+++ b/packages/editor-ui/src/components/transitions/SlideTransition.vue
@@ -21,5 +21,4 @@ export default Vue.extend({
 .slide-enter {
 	transform: translateX(100%);
 }
-
 </style>
diff --git a/packages/editor-ui/src/composables/useGlobalLinkActions.ts b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
index 5ac3abe2ed..ae20bbb086 100644
--- a/packages/editor-ui/src/composables/useGlobalLinkActions.ts
+++ b/packages/editor-ui/src/composables/useGlobalLinkActions.ts
@@ -20,7 +20,7 @@ export default () => {
 		if (!(clickedElement instanceof Element) || clickedElement.tagName !== 'A') return;
 
 		const actionAttribute = clickedElement.getAttribute('data-action');
-		if(actionAttribute && typeof availableActions.value[actionAttribute] === 'function') {
+		if (actionAttribute && typeof availableActions.value[actionAttribute] === 'function') {
 			e.preventDefault();
 			availableActions.value[actionAttribute]();
 		}
@@ -34,7 +34,7 @@ export default () => {
 		}
 	}
 
-	const availableActions = computed<{[key: string]: Function}>(() => ({
+	const availableActions = computed<{ [key: string]: Function }>(() => ({
 		reload,
 		...state.customActions,
 	}));
@@ -56,4 +56,3 @@ export default () => {
 		unregisterCustomAction,
 	};
 };
-
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 021f69ef02..a9a8e285b5 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -66,7 +66,8 @@ export const NPM_PACKAGE_DOCS_BASE_URL = `https://www.npmjs.com/package/`;
 export const NPM_KEYWORD_SEARCH_URL = `https://www.npmjs.com/search?q=keywords%3An8n-community-node-package`;
 export const N8N_QUEUE_MODE_DOCS_URL = `https://docs.n8n.io/hosting/scaling/queue-mode/`;
 export const COMMUNITY_NODES_INSTALLATION_DOCS_URL = `https://docs.n8n.io/integrations/community-nodes/installation/`;
-export const COMMUNITY_NODES_NPM_INSTALLATION_URL = 'https://docs.npmjs.com/downloading-and-installing-node-js-and-npm';
+export const COMMUNITY_NODES_NPM_INSTALLATION_URL =
+	'https://docs.npmjs.com/downloading-and-installing-node-js-and-npm';
 export const COMMUNITY_NODES_RISKS_DOCS_URL = `https://docs.n8n.io/integrations/community-nodes/risks/`;
 export const COMMUNITY_NODES_BLOCKLIST_DOCS_URL = `https://docs.n8n.io/integrations/community-nodes/blocklist/`;
 export const CUSTOM_NODES_DOCS_URL = `https://docs.n8n.io/integrations/creating-nodes/code/create-n8n-nodes-module/`;
@@ -128,10 +129,7 @@ export const NON_ACTIVATABLE_TRIGGER_NODE_TYPES = [
 	EXECUTE_WORKFLOW_TRIGGER_NODE_TYPE,
 ];
 
-export const MULTIPLE_OUTPUT_NODE_TYPES = [
-	IF_NODE_TYPE,
-	SWITCH_NODE_TYPE,
-];
+export const MULTIPLE_OUTPUT_NODE_TYPES = [IF_NODE_TYPE, SWITCH_NODE_TYPE];
 
 export const PIN_DATA_NODE_TYPES_DENYLIST = [
 	...MULTIPLE_OUTPUT_NODE_TYPES,
@@ -146,9 +144,10 @@ export const RECOMMENDED_CATEGORY = 'Recommended';
 export const SUBCATEGORY_DESCRIPTIONS: {
 	[category: string]: { [subcategory: string]: string };
 } = {
-	'Core Nodes': { // this - all subkeys are set from codex
+	'Core Nodes': {
+		// this - all subkeys are set from codex
 		Flow: 'Branches, core triggers, merge data',
-		Files:  'Work with CSV, XML, text, images etc.',
+		Files: 'Work with CSV, XML, text, images etc.',
 		'Data Transformation': 'Manipulate data fields, run code',
 		Helpers: 'HTTP Requests (API calls), date and time, scrape HTML',
 	},
@@ -195,7 +194,7 @@ export const MARKETING_INDUSTRY = 'marketing-industry';
 export const MEDIA_INDUSTRY = 'media-industry';
 export const MANUFACTURING_INDUSTRY = 'manufacturing-industry';
 export const MSP_INDUSTRY = 'msp';
-export const HEALTHCARE_INDUSTRY= 'healthcare';
+export const HEALTHCARE_INDUSTRY = 'healthcare';
 export const FINANCE_INSURANCE_INDUSTRY = 'finance-insurance-industry';
 export const IT_INDUSTRY = 'it-industry';
 export const SECURITY_INDUSTRY = 'security-industry';
@@ -248,7 +247,8 @@ export const MODAL_CANCEL = 'cancel';
 export const MODAL_CLOSE = 'close';
 export const MODAL_CONFIRMED = 'confirmed';
 
-export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const VALID_EMAIL_REGEX =
+	/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
 export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG = 'N8N_PIN_DATA_DISCOVERY_NDV';
 export const LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG = 'N8N_PIN_DATA_DISCOVERY_CANVAS';
@@ -284,37 +284,34 @@ export const NODE_TYPE_COUNT_MAPPER = {
 	[TRIGGER_NODE_FILTER]: ['triggerCount'],
 	[ALL_NODE_FILTER]: ['triggerCount', 'regularCount'],
 };
-export const TEMPLATES_NODES_FILTER = [
-	'n8n-nodes-base.start',
-	'n8n-nodes-base.respondToWebhook',
-];
+export const TEMPLATES_NODES_FILTER = ['n8n-nodes-base.start', 'n8n-nodes-base.respondToWebhook'];
 
 export enum VIEWS {
-	HOMEPAGE = "Homepage",
-	COLLECTION = "TemplatesCollectionView",
-	EXECUTION = "ExecutionById",
-	EXECUTIONS = "ExecutionList",
-	EXECUTION_PREVIEW = "ExecutionPreview",
-	EXECUTION_HOME = "ExecutionsLandingPage",
-	TEMPLATE = "TemplatesWorkflowView",
-	TEMPLATES = "TemplatesSearchView",
-	CREDENTIALS = "CredentialsView",
-	NEW_WORKFLOW = "NodeViewNew",
-	WORKFLOW = "NodeViewExisting",
-	DEMO = "WorkflowDemo",
-	TEMPLATE_IMPORT = "WorkflowTemplate",
-	SIGNIN = "SigninView",
-	SIGNUP = "SignupView",
-	SETUP = "SetupView",
-	FORGOT_PASSWORD = "ForgotMyPasswordView",
-	CHANGE_PASSWORD = "ChangePasswordView",
-	USERS_SETTINGS = "UsersSettings",
-	PERSONAL_SETTINGS = "PersonalSettings",
-	API_SETTINGS = "APISettings",
-	NOT_FOUND = "NotFoundView",
-	FAKE_DOOR = "ComingSoon",
-	COMMUNITY_NODES = "CommunityNodes",
-	WORKFLOWS = "WorkflowsView",
+	HOMEPAGE = 'Homepage',
+	COLLECTION = 'TemplatesCollectionView',
+	EXECUTION = 'ExecutionById',
+	EXECUTIONS = 'ExecutionList',
+	EXECUTION_PREVIEW = 'ExecutionPreview',
+	EXECUTION_HOME = 'ExecutionsLandingPage',
+	TEMPLATE = 'TemplatesWorkflowView',
+	TEMPLATES = 'TemplatesSearchView',
+	CREDENTIALS = 'CredentialsView',
+	NEW_WORKFLOW = 'NodeViewNew',
+	WORKFLOW = 'NodeViewExisting',
+	DEMO = 'WorkflowDemo',
+	TEMPLATE_IMPORT = 'WorkflowTemplate',
+	SIGNIN = 'SigninView',
+	SIGNUP = 'SignupView',
+	SETUP = 'SetupView',
+	FORGOT_PASSWORD = 'ForgotMyPasswordView',
+	CHANGE_PASSWORD = 'ChangePasswordView',
+	USERS_SETTINGS = 'UsersSettings',
+	PERSONAL_SETTINGS = 'PersonalSettings',
+	API_SETTINGS = 'APISettings',
+	NOT_FOUND = 'NotFoundView',
+	FAKE_DOOR = 'ComingSoon',
+	COMMUNITY_NODES = 'CommunityNodes',
+	WORKFLOWS = 'WorkflowsView',
 }
 
 export enum FAKE_DOOR_FEATURES {
@@ -329,11 +326,11 @@ export const FIRST_ONBOARDING_PROMPT_TIMEOUT = 300000;
 
 export const TEST_PIN_DATA = [
 	{
-		name: "First item",
+		name: 'First item',
 		code: 1,
 	},
 	{
-		name: "Second item",
+		name: 'Second item',
 		code: 2,
 	},
 ];
@@ -409,13 +406,13 @@ export const CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS = [
 ];
 
 export const CURL_IMPORT_NODES_PROTOCOLS: { [key: string]: string } = {
-	'ftp': 'FTP',
-	'ftps': 'FTP',
-	'ldap': 'LDAP',
-	'ldaps': 'LDAP',
-	'mqtt': 'MQTT',
-	'imap': 'IMAP',
-	'imaps': 'IMAP',
+	ftp: 'FTP',
+	ftps: 'FTP',
+	ldap: 'LDAP',
+	ldaps: 'LDAP',
+	mqtt: 'MQTT',
+	imap: 'IMAP',
+	imaps: 'IMAP',
 };
 
 export enum STORES {
diff --git a/packages/editor-ui/src/declarations/normalize-wheel.d.ts b/packages/editor-ui/src/declarations/normalize-wheel.d.ts
index a78742bf17..c6f249fef3 100644
--- a/packages/editor-ui/src/declarations/normalize-wheel.d.ts
+++ b/packages/editor-ui/src/declarations/normalize-wheel.d.ts
@@ -1,8 +1,9 @@
 declare module 'normalize-wheel' {
-	function normalizeWheel(e: WheelEvent): { spinX  : number,
-		spinY  : number,
-		pixelX : number,
-		pixelY : number
+	function normalizeWheel(e: WheelEvent): {
+		spinX: number;
+		spinY: number;
+		pixelX: number;
+		pixelY: number;
 	};
 
 	export = normalizeWheel;
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index 2a7122da84..868c64550d 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -11,9 +11,9 @@ import 'vue-json-pretty/lib/styles.css';
 import 'n8n-design-system/css/index.scss';
 import './n8n-theme.scss';
 
-import "@fontsource/open-sans/latin-400.css";
-import "@fontsource/open-sans/latin-600.css";
-import "@fontsource/open-sans/latin-700.css";
+import '@fontsource/open-sans/latin-400.css';
+import '@fontsource/open-sans/latin-600.css';
+import '@fontsource/open-sans/latin-700.css';
 
 import App from '@/App.vue';
 import router from './router';
@@ -38,7 +38,7 @@ new Vue({
 	i18n: i18nInstance,
 	router,
 	pinia,
-	render: h => h(App),
+	render: (h) => h(App),
 }).$mount('#app');
 
 router.afterEach((to, from) => {
diff --git a/packages/editor-ui/src/mixins/copyPaste.ts b/packages/editor-ui/src/mixins/copyPaste.ts
index fff3c75368..4eb325dbf5 100644
--- a/packages/editor-ui/src/mixins/copyPaste.ts
+++ b/packages/editor-ui/src/mixins/copyPaste.ts
@@ -6,7 +6,7 @@ import Vue from 'vue';
 import { debounce } from 'lodash';
 
 export const copyPaste = Vue.extend({
-	data () {
+	data() {
 		return {
 			copyPasteElementsGotCreated: false,
 			hiddenInput: null as null | Element,
@@ -14,7 +14,7 @@ export const copyPaste = Vue.extend({
 			onBeforePaste: null as null | Function,
 		};
 	},
-	mounted () {
+	mounted() {
 		if (this.copyPasteElementsGotCreated === true) {
 			return;
 		}
@@ -49,8 +49,14 @@ export const copyPaste = Vue.extend({
 
 		// Code is mainly from
 		// https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
-		const isSafari = navigator.appVersion.search('Safari') !== -1 && navigator.appVersion.search('Chrome') === -1 && navigator.appVersion.search('CrMo') === -1 && navigator.appVersion.search('CriOS') === -1;
-		const isIe = (navigator.userAgent.toLowerCase().indexOf('msie') !== -1 || navigator.userAgent.toLowerCase().indexOf('trident') !== -1);
+		const isSafari =
+			navigator.appVersion.search('Safari') !== -1 &&
+			navigator.appVersion.search('Chrome') === -1 &&
+			navigator.appVersion.search('CrMo') === -1 &&
+			navigator.appVersion.search('CriOS') === -1;
+		const isIe =
+			navigator.userAgent.toLowerCase().indexOf('msie') !== -1 ||
+			navigator.userAgent.toLowerCase().indexOf('trident') !== -1;
 
 		const hiddenInput = document.createElement('input');
 		hiddenInput.setAttribute('type', 'text');
@@ -69,7 +75,7 @@ export const copyPaste = Vue.extend({
 			ieClipboardDiv.setAttribute('contenteditable', 'true');
 			document.body.append(ieClipboardDiv);
 
-			this.onBeforePaste =  () => {
+			this.onBeforePaste = () => {
 				// @ts-ignore
 				if (hiddenInput.is(':focus')) {
 					this.focusIeClipboardDiv(ieClipboardDiv as HTMLDivElement);
@@ -80,7 +86,7 @@ export const copyPaste = Vue.extend({
 		}
 
 		let userInput = '';
-		const hiddenInputListener = (text: string) => { };
+		const hiddenInputListener = (text: string) => {};
 
 		hiddenInput.addEventListener('input', (e) => {
 			const value = hiddenInput.value;
@@ -91,52 +97,65 @@ export const copyPaste = Vue.extend({
 			// the input event, so we update the input area after the event is done being processed
 			if (isSafari) {
 				hiddenInput.focus();
-				setTimeout(() => { this.focusHiddenArea(hiddenInput); }, 0);
+				setTimeout(() => {
+					this.focusHiddenArea(hiddenInput);
+				}, 0);
 			} else {
 				this.focusHiddenArea(hiddenInput);
 			}
 		});
 
-		this.onPaste = debounce((e) => {
-			const event = 'paste';
-			// Check if the event got emitted from a message box or from something
-			// else which should ignore the copy/paste
-			// @ts-ignore
-			const path = e.path || (e.composedPath && e.composedPath());
-			for (let index = 0; index < path.length; index++) {
-				if (path[index].className && typeof path[index].className === 'string' && (
-					path[index].className.includes('el-message-box') || path[index].className.includes('ignore-key-press')
-				)) {
-					return;
-				}
-			}
-
-			if (ieClipboardDiv !== null) {
-				this.ieClipboardEvent(event, ieClipboardDiv);
-			} else {
-				this.standardClipboardEvent(event, e as ClipboardEvent);
+		this.onPaste = debounce(
+			(e) => {
+				const event = 'paste';
+				// Check if the event got emitted from a message box or from something
+				// else which should ignore the copy/paste
 				// @ts-ignore
-				if (!document.activeElement || (document.activeElement && ['textarea', 'text', 'email', 'password'].indexOf(document.activeElement.type) === -1)) {
-					// That it still allows to paste into text, email, password & textarea-fields we
-					// check if we can identify the active element and if so only
-					// run it if something else is selected.
-					this.focusHiddenArea(hiddenInput);
-					e.preventDefault();
+				const path = e.path || (e.composedPath && e.composedPath());
+				for (let index = 0; index < path.length; index++) {
+					if (
+						path[index].className &&
+						typeof path[index].className === 'string' &&
+						(path[index].className.includes('el-message-box') ||
+							path[index].className.includes('ignore-key-press'))
+					) {
+						return;
+					}
 				}
-			}
-		}, 1000, { leading: true });
+
+				if (ieClipboardDiv !== null) {
+					this.ieClipboardEvent(event, ieClipboardDiv);
+				} else {
+					this.standardClipboardEvent(event, e as ClipboardEvent);
+					// @ts-ignore
+					if (
+						!document.activeElement ||
+						(document.activeElement &&
+							['textarea', 'text', 'email', 'password'].indexOf(document.activeElement.type) === -1)
+					) {
+						// That it still allows to paste into text, email, password & textarea-fields we
+						// check if we can identify the active element and if so only
+						// run it if something else is selected.
+						this.focusHiddenArea(hiddenInput);
+						e.preventDefault();
+					}
+				}
+			},
+			1000,
+			{ leading: true },
+		);
 
 		// Set clipboard event listeners on the document.
 		// @ts-ignore
 		document.addEventListener('paste', this.onPaste);
 	},
 	methods: {
-		receivedCopyPasteData (plainTextData: string, event?: ClipboardEvent): void {
+		receivedCopyPasteData(plainTextData: string, event?: ClipboardEvent): void {
 			// THIS HAS TO BE DEFINED IN COMPONENT!
 		},
 
 		// For every browser except IE, we can easily get and set data on the clipboard
-		standardClipboardEvent (clipboardEventName: string, event: ClipboardEvent) {
+		standardClipboardEvent(clipboardEventName: string, event: ClipboardEvent) {
 			const clipboardData = event.clipboardData;
 			if (clipboardData !== null && clipboardEventName === 'paste') {
 				const clipboardText = clipboardData.getData('text/plain');
@@ -145,7 +164,7 @@ export const copyPaste = Vue.extend({
 		},
 
 		// For IE, we can get/set Text or URL just as we normally would
-		ieClipboardEvent (clipboardEventName: string, ieClipboardDiv: HTMLDivElement) {
+		ieClipboardEvent(clipboardEventName: string, ieClipboardDiv: HTMLDivElement) {
 			// @ts-ignore
 			const clipboardData = window.clipboardData;
 			if (clipboardEventName === 'paste') {
@@ -157,11 +176,11 @@ export const copyPaste = Vue.extend({
 		},
 
 		// Focuses an element to be ready for copy/paste (used exclusively for IE)
-		focusIeClipboardDiv (ieClipboardDiv: HTMLDivElement) {
+		focusIeClipboardDiv(ieClipboardDiv: HTMLDivElement) {
 			ieClipboardDiv.focus();
 			const range = document.createRange();
 			// @ts-ignore
-			range.selectNodeContents((ieClipboardDiv.get(0)));
+			range.selectNodeContents(ieClipboardDiv.get(0));
 			const selection = window.getSelection();
 			if (selection !== null) {
 				selection.removeAllRanges();
@@ -169,7 +188,7 @@ export const copyPaste = Vue.extend({
 			}
 		},
 
-		focusHiddenArea (hiddenInput: HTMLInputElement) {
+		focusHiddenArea(hiddenInput: HTMLInputElement) {
 			// In order to ensure that the browser will fire clipboard events, we always need to have something selected
 			hiddenInput.value = ' ';
 			hiddenInput.focus();
@@ -179,7 +198,7 @@ export const copyPaste = Vue.extend({
 		/**
 		 * Copies given data to clipboard
 		 */
-		copyToClipboard (value: string): void {
+		copyToClipboard(value: string): void {
 			// FROM: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
 			const element = document.createElement('textarea'); // Create a <textarea> element
 			element.value = value; // Set its value to the string that you want copied
@@ -193,9 +212,10 @@ export const copyPaste = Vue.extend({
 				return;
 			}
 
-			const selected = selection.rangeCount > 0 // Check if there is any content selected previously
-				? selection.getRangeAt(0) // Store selection if found
-				: false; // Mark as false to know no selection existed before
+			const selected =
+				selection.rangeCount > 0 // Check if there is any content selected previously
+					? selection.getRangeAt(0) // Store selection if found
+					: false; // Mark as false to know no selection existed before
 			element.select(); // Select the <textarea> content
 			document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
 			document.body.removeChild(element); // Remove the <textarea> element
@@ -205,7 +225,6 @@ export const copyPaste = Vue.extend({
 				selection.addRange(selected); // Restore the original selection
 			}
 		},
-
 	},
 	beforeDestroy() {
 		if (this.hiddenInput) {
diff --git a/packages/editor-ui/src/mixins/debounce.ts b/packages/editor-ui/src/mixins/debounce.ts
index fe11b341c3..619e857e80 100644
--- a/packages/editor-ui/src/mixins/debounce.ts
+++ b/packages/editor-ui/src/mixins/debounce.ts
@@ -2,20 +2,25 @@ import { debounce } from 'lodash';
 import Vue from 'vue';
 
 export const debounceHelper = Vue.extend({
-	data () {
+	data() {
 		return {
 			debouncedFunctions: [] as any[], // tslint:disable-line:no-any
 		};
 	},
 	methods: {
-		async callDebounced (...inputParameters: any[]): Promise<void> { // tslint:disable-line:no-any
+		// tslint:disable-next-line:no-any
+		async callDebounced(...inputParameters: any[]): Promise<void> {
 			const functionName = inputParameters.shift() as string;
-			const { trailing, debounceTime }  = inputParameters.shift();
+			const { trailing, debounceTime } = inputParameters.shift();
 
 			// @ts-ignore
 			if (this.debouncedFunctions[functionName] === undefined) {
 				// @ts-ignore
-				this.debouncedFunctions[functionName] = debounce(this[functionName], debounceTime, trailing ? { trailing } : { leading: true } );
+				this.debouncedFunctions[functionName] = debounce(
+					this[functionName],
+					debounceTime,
+					trailing ? { trailing } : { leading: true },
+				);
 			}
 			// @ts-ignore
 			await this.debouncedFunctions[functionName].apply(this, inputParameters);
diff --git a/packages/editor-ui/src/mixins/emitter.ts b/packages/editor-ui/src/mixins/emitter.ts
index 3514c3def7..984a0a84f1 100644
--- a/packages/editor-ui/src/mixins/emitter.ts
+++ b/packages/editor-ui/src/mixins/emitter.ts
@@ -1,8 +1,9 @@
 import Vue from 'vue';
 
-function broadcast(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+// tslint:disable-next-line:no-any
+function broadcast(componentName: string, eventName: string, params: any) {
 	// @ts-ignore
-	(this as Vue).$children.forEach(child => {
+	(this as Vue).$children.forEach((child) => {
 		const name = child.$options.name;
 
 		if (name === componentName) {
@@ -18,7 +19,8 @@ function broadcast(componentName: string, eventName: string, params: any) { // t
 
 export default Vue.extend({
 	methods: {
-		$dispatch(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+		// tslint:disable-next-line:no-any
+		$dispatch(componentName: string, eventName: string, params: any) {
 			let parent = this.$parent || this.$root;
 			let name = parent.$options.name;
 
@@ -35,7 +37,8 @@ export default Vue.extend({
 				parent.$emit.apply(parent, [eventName].concat(params));
 			}
 		},
-		$broadcast(componentName: string, eventName: string, params: any) { // tslint:disable-line:no-any
+		// tslint:disable-next-line:no-any
+		$broadcast(componentName: string, eventName: string, params: any) {
 			broadcast.call(this, componentName, eventName, params);
 		},
 	},
diff --git a/packages/editor-ui/src/mixins/executionsHelpers.ts b/packages/editor-ui/src/mixins/executionsHelpers.ts
index 70aaa5e5a0..46f7c97d65 100644
--- a/packages/editor-ui/src/mixins/executionsHelpers.ts
+++ b/packages/editor-ui/src/mixins/executionsHelpers.ts
@@ -1,9 +1,9 @@
-import { IExecutionsSummary } from "@/Interface";
-import { useWorkflowsStore } from "@/stores/workflows";
-import dateFormat from "dateformat";
-import { mapStores } from "pinia";
-import mixins from "vue-typed-mixins";
-import { genericHelpers } from "./genericHelpers";
+import { IExecutionsSummary } from '@/Interface';
+import { useWorkflowsStore } from '@/stores/workflows';
+import dateFormat from 'dateformat';
+import { mapStores } from 'pinia';
+import mixins from 'vue-typed-mixins';
+import { genericHelpers } from './genericHelpers';
 
 export interface IExecutionUIData {
 	name: string;
@@ -14,16 +14,14 @@ export interface IExecutionUIData {
 
 export const executionHelpers = mixins(genericHelpers).extend({
 	computed: {
-		...mapStores(
-			useWorkflowsStore,
-		),
+		...mapStores(useWorkflowsStore),
 		executionId(): string {
 			return this.$route.params.executionId;
 		},
-		workflowName (): string {
+		workflowName(): string {
 			return this.workflowsStore.workflowName;
 		},
-		currentWorkflow (): string {
+		currentWorkflow(): string {
 			return this.$route.params.name || this.workflowsStore.workflowId;
 		},
 		executions(): IExecutionsSummary[] {
@@ -48,18 +46,27 @@ export const executionHelpers = mixins(genericHelpers).extend({
 			} else if (execution.stoppedAt === undefined) {
 				status.name = 'running';
 				status.label = this.$locale.baseText('executionsList.running');
-				status.runningTime = this.displayTimer(new Date().getTime() - new Date(execution.startedAt).getTime(), true);
+				status.runningTime = this.displayTimer(
+					new Date().getTime() - new Date(execution.startedAt).getTime(),
+					true,
+				);
 			} else if (execution.finished) {
 				status.name = 'success';
 				status.label = this.$locale.baseText('executionsList.succeeded');
 				if (execution.stoppedAt) {
-					status.runningTime = this.displayTimer(new Date(execution.stoppedAt).getTime() - new Date(execution.startedAt).getTime(), true);
+					status.runningTime = this.displayTimer(
+						new Date(execution.stoppedAt).getTime() - new Date(execution.startedAt).getTime(),
+						true,
+					);
 				}
 			} else if (execution.stoppedAt !== null) {
 				status.name = 'error';
 				status.label = this.$locale.baseText('executionsList.error');
 				if (execution.stoppedAt) {
-					status.runningTime = this.displayTimer(new Date(execution.stoppedAt).getTime() - new Date(execution.startedAt).getTime(), true);
+					status.runningTime = this.displayTimer(
+						new Date(execution.stoppedAt).getTime() - new Date(execution.startedAt).getTime(),
+						true,
+					);
 				}
 			}
 
diff --git a/packages/editor-ui/src/mixins/externalHooks.ts b/packages/editor-ui/src/mixins/externalHooks.ts
index bb878a7548..5a336ae125 100644
--- a/packages/editor-ui/src/mixins/externalHooks.ts
+++ b/packages/editor-ui/src/mixins/externalHooks.ts
@@ -6,15 +6,14 @@ import Vue from 'vue';
 
 declare global {
 	interface Window {
-		n8nExternalHooks?: Record<string, Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>>;
+		n8nExternalHooks?: Record<
+			string,
+			Record<string, Array<(store: Store, metadata?: IDataObject) => Promise<void>>>
+		>;
 	}
 }
 
-export async function runExternalHook(
-	eventName: string,
-	store: Store,
-	metadata?: IDataObject,
-) {
+export async function runExternalHook(eventName: string, store: Store, metadata?: IDataObject) {
 	if (!window.n8nExternalHooks) {
 		return;
 	}
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index 5dbbca2a31..4c1c0ccff4 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -4,18 +4,18 @@ import { VIEWS } from '@/constants';
 import mixins from 'vue-typed-mixins';
 
 export const genericHelpers = mixins(showMessage).extend({
-	data () {
+	data() {
 		return {
 			loadingService: null as any | null, // tslint:disable-line:no-any
 		};
 	},
 	computed: {
-		isReadOnly (): boolean {
+		isReadOnly(): boolean {
 			return ![VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW].includes(this.$route.name as VIEWS);
 		},
 	},
 	methods: {
-		displayTimer (msPassed: number, showMs = false): string {
+		displayTimer(msPassed: number, showMs = false): string {
 			if (msPassed < 60000) {
 				if (!showMs) {
 					return `${Math.floor(msPassed / 1000)} ${this.$locale.baseText('genericHelpers.sec')}`;
@@ -26,11 +26,11 @@ export const genericHelpers = mixins(showMessage).extend({
 
 			const secondsPassed = Math.floor(msPassed / 1000);
 			const minutesPassed = Math.floor(secondsPassed / 60);
-			const secondsLeft = (secondsPassed - (minutesPassed * 60)).toString().padStart(2, '0');
+			const secondsLeft = (secondsPassed - minutesPassed * 60).toString().padStart(2, '0');
 
 			return `${minutesPassed}:${secondsLeft} ${this.$locale.baseText('genericHelpers.min')}`;
 		},
-		editAllowedCheck (): boolean {
+		editAllowedCheck(): boolean {
 			if (this.isReadOnly) {
 				this.$showMessage({
 					// title: 'Workflow can not be changed!',
@@ -45,25 +45,23 @@ export const genericHelpers = mixins(showMessage).extend({
 			return true;
 		},
 
-		startLoading (text?: string) {
+		startLoading(text?: string) {
 			if (this.loadingService !== null) {
 				return;
 			}
 
 			// @ts-ignore
-			this.loadingService = this.$loading(
-				{
-					lock: true,
-					text: text || this.$locale.baseText('genericHelpers.loading'),
-					spinner: 'el-icon-loading',
-					background: 'rgba(255, 255, 255, 0.8)',
-				},
-			);
+			this.loadingService = this.$loading({
+				lock: true,
+				text: text || this.$locale.baseText('genericHelpers.loading'),
+				spinner: 'el-icon-loading',
+				background: 'rgba(255, 255, 255, 0.8)',
+			});
 		},
-		setLoadingText (text: string) {
+		setLoadingText(text: string) {
 			this.loadingService.text = text;
 		},
-		stopLoading () {
+		stopLoading() {
 			if (this.loadingService !== null) {
 				this.loadingService.close();
 				this.loadingService = null;
diff --git a/packages/editor-ui/src/mixins/history.ts b/packages/editor-ui/src/mixins/history.ts
index 7685d33a22..8a5becbe79 100644
--- a/packages/editor-ui/src/mixins/history.ts
+++ b/packages/editor-ui/src/mixins/history.ts
@@ -16,12 +16,7 @@ const UNDO_REDO_DEBOUNCE_INTERVAL = 100;
 
 export const historyHelper = mixins(debounceHelper, deviceSupportHelpers).extend({
 	computed: {
-		...mapStores(
-			useNDVStore,
-			useHistoryStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useNDVStore, useHistoryStore, useUIStore, useWorkflowsStore),
 		isNDVOpen(): boolean {
 			return this.ndvStore.activeNodeName !== null;
 		},
@@ -41,9 +36,15 @@ export const historyHelper = mixins(debounceHelper, deviceSupportHelpers).extend
 				event.preventDefault();
 				if (!this.isNDVOpen) {
 					if (event.shiftKey) {
-						this.callDebounced('redo', { debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL, trailing: true  });
+						this.callDebounced('redo', {
+							debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL,
+							trailing: true,
+						});
 					} else {
-						this.callDebounced('undo', { debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL, trailing: true  });
+						this.callDebounced('undo', {
+							debounceTime: UNDO_REDO_DEBOUNCE_INTERVAL,
+							trailing: true,
+						});
 					}
 				} else if (!event.shiftKey) {
 					this.trackUndoAttempt(event);
@@ -98,11 +99,14 @@ export const historyHelper = mixins(debounceHelper, deviceSupportHelpers).extend
 			}
 			this.trackCommand(command, 'redo');
 		},
-		trackCommand(command: Undoable, type: 'undo'|'redo'): void {
+		trackCommand(command: Undoable, type: 'undo' | 'redo'): void {
 			if (command instanceof Command) {
-				this.$telemetry.track(`User hit ${type}`, { commands_length: 1, commands: [ command.name ] });
+				this.$telemetry.track(`User hit ${type}`, { commands_length: 1, commands: [command.name] });
 			} else if (command instanceof BulkCommand) {
-				this.$telemetry.track(`User hit ${type}`, { commands_length: command.commands.length, commands: command.commands.map(c => c.name) });
+				this.$telemetry.track(`User hit ${type}`, {
+					commands_length: command.commands.length,
+					commands: command.commands.map((c) => c.name),
+				});
 			}
 		},
 		trackUndoAttempt(event: KeyboardEvent) {
diff --git a/packages/editor-ui/src/mixins/mouseSelect.ts b/packages/editor-ui/src/mixins/mouseSelect.ts
index 9531798464..a2435ee26e 100644
--- a/packages/editor-ui/src/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/mixins/mouseSelect.ts
@@ -7,31 +7,32 @@ import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
-import { getMousePosition, getRelativePosition, HEADER_HEIGHT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/utils/nodeViewUtils';
+import {
+	getMousePosition,
+	getRelativePosition,
+	HEADER_HEIGHT,
+	SIDEBAR_WIDTH,
+	SIDEBAR_WIDTH_EXPANDED,
+} from '@/utils/nodeViewUtils';
 
-export const mouseSelect = mixins(
-	deviceSupportHelpers,
-).extend({
-	data () {
+export const mouseSelect = mixins(deviceSupportHelpers).extend({
+	data() {
 		return {
 			selectActive: false,
 			selectBox: document.createElement('span'),
 		};
 	},
-	mounted () {
+	mounted() {
 		this.createSelectBox();
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-			useWorkflowsStore,
-		),
-		isDemo (): boolean {
+		...mapStores(useUIStore, useWorkflowsStore),
+		isDemo(): boolean {
 			return this.$route.name === VIEWS.DEMO;
 		},
 	},
 	methods: {
-		createSelectBox () {
+		createSelectBox() {
 			this.selectBox.id = 'select-box';
 			this.selectBox.style.margin = '0px auto';
 			this.selectBox.style.border = '2px dotted #FF0000';
@@ -45,7 +46,7 @@ export const mouseSelect = mixins(
 			const nodeViewEl = this.$el.querySelector('#node-view') as HTMLDivElement;
 			nodeViewEl.appendChild(this.selectBox);
 		},
-		isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {
+		isCtrlKeyPressed(e: MouseEvent | KeyboardEvent): boolean {
 			if (this.isTouchDevice === true) {
 				return true;
 			}
@@ -54,16 +55,25 @@ export const mouseSelect = mixins(
 			}
 			return e.ctrlKey;
 		},
-		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
+		getMousePositionWithinNodeView(event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
-			const sidebarOffset = this.isDemo ? 0 : this.uiStore.sidebarMenuCollapsed ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
+			const sidebarOffset = this.isDemo
+				? 0
+				: this.uiStore.sidebarMenuCollapsed
+				? SIDEBAR_WIDTH
+				: SIDEBAR_WIDTH_EXPANDED;
 			const headerOffset = this.isDemo ? 0 : HEADER_HEIGHT;
 			// @ts-ignore
-			return getRelativePosition(x - sidebarOffset, y - headerOffset, this.nodeViewScale, this.uiStore.nodeViewOffsetPosition);
+			return getRelativePosition(
+				x - sidebarOffset,
+				y - headerOffset,
+				this.nodeViewScale,
+				this.uiStore.nodeViewOffsetPosition,
+			);
 		},
-		showSelectBox (event: MouseEvent) {
+		showSelectBox(event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
-			this.selectBox = Object.assign(this.selectBox, {x, y});
+			this.selectBox = Object.assign(this.selectBox, { x, y });
 
 			// @ts-ignore
 			this.selectBox.style.left = this.selectBox.x + 'px';
@@ -73,7 +83,7 @@ export const mouseSelect = mixins(
 
 			this.selectActive = true;
 		},
-		updateSelectBox (event: MouseEvent) {
+		updateSelectBox(event: MouseEvent) {
 			const selectionBox = this.getSelectionBox(event);
 			this.selectBox.style.left = selectionBox.x + 'px';
 			this.selectBox.style.top = selectionBox.y + 'px';
@@ -81,7 +91,7 @@ export const mouseSelect = mixins(
 			this.selectBox.style.width = selectionBox.width + 'px';
 			this.selectBox.style.height = selectionBox.height + 'px';
 		},
-		hideSelectBox () {
+		hideSelectBox() {
 			this.selectBox.style.visibility = 'hidden';
 			// @ts-ignore
 			this.selectBox.x = 0;
@@ -94,7 +104,7 @@ export const mouseSelect = mixins(
 
 			this.selectActive = false;
 		},
-		getSelectionBox (event: MouseEvent) {
+		getSelectionBox(event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
 			return {
 				// @ts-ignore
@@ -107,17 +117,23 @@ export const mouseSelect = mixins(
 				height: Math.abs(y - this.selectBox.y),
 			};
 		},
-		getNodesInSelection (event: MouseEvent): INodeUi[] {
+		getNodesInSelection(event: MouseEvent): INodeUi[] {
 			const returnNodes: INodeUi[] = [];
 			const selectionBox = this.getSelectionBox(event);
 
 			// Go through all nodes and check if they are selected
 			this.workflowsStore.allNodes.forEach((node: INodeUi) => {
 				// TODO: Currently always uses the top left corner for checking. Should probably use the center instead
-				if (node.position[0] < selectionBox.x || node.position[0] > (selectionBox.x + selectionBox.width)) {
+				if (
+					node.position[0] < selectionBox.x ||
+					node.position[0] > selectionBox.x + selectionBox.width
+				) {
 					return;
 				}
-				if (node.position[1] < selectionBox.y || node.position[1] > (selectionBox.y + selectionBox.height)) {
+				if (
+					node.position[1] < selectionBox.y ||
+					node.position[1] > selectionBox.y + selectionBox.height
+				) {
 					return;
 				}
 				returnNodes.push(node);
@@ -125,7 +141,7 @@ export const mouseSelect = mixins(
 
 			return returnNodes;
 		},
-		mouseDownMouseSelect (e: MouseEvent) {
+		mouseDownMouseSelect(e: MouseEvent) {
 			if (this.isCtrlKeyPressed(e) === true) {
 				// We only care about it when the ctrl key is not pressed at the same time.
 				// So we exit when it is pressed.
@@ -141,7 +157,7 @@ export const mouseSelect = mixins(
 			// @ts-ignore // Leave like this. Do not add a anonymous function because then remove would not work anymore
 			this.$el.addEventListener('mousemove', this.mouseMoveSelect);
 		},
-		mouseUpMouseSelect (e: MouseEvent) {
+		mouseUpMouseSelect(e: MouseEvent) {
 			if (this.selectActive === false) {
 				if (this.isTouchDevice === true) {
 					// @ts-ignore
@@ -173,7 +189,7 @@ export const mouseSelect = mixins(
 
 			this.hideSelectBox();
 		},
-		mouseMoveSelect (e: MouseEvent) {
+		mouseMoveSelect(e: MouseEvent) {
 			if (e.buttons === 0) {
 				// Mouse button is not pressed anymore so stop selection mode
 				// Happens normally when mouse leave the view pressed and then
@@ -184,17 +200,17 @@ export const mouseSelect = mixins(
 
 			this.updateSelectBox(e);
 		},
-		nodeDeselected (node: INodeUi) {
+		nodeDeselected(node: INodeUi) {
 			this.uiStore.removeNodeFromSelection(node);
 			// @ts-ignore
 			this.instance.removeFromDragSelection(node.id);
 		},
-		nodeSelected (node: INodeUi) {
+		nodeSelected(node: INodeUi) {
 			this.uiStore.addSelectedNode(node);
 			// @ts-ignore
 			this.instance.addToDragSelection(node.id);
 		},
-		deselectAllNodes () {
+		deselectAllNodes() {
 			// @ts-ignore
 			this.instance.clearDragSelection();
 			this.uiStore.resetSelectedNodes();
diff --git a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
index 39c215643b..81aa6ce414 100644
--- a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
+++ b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts
@@ -4,10 +4,8 @@ import { getMousePosition } from '@/utils/nodeViewUtils';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 
-export const moveNodeWorkflow = mixins(
-	deviceSupportHelpers,
-).extend({
-	data () {
+export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
+	data() {
 		return {
 			moveLastPosition: [0, 0],
 		};
@@ -16,7 +14,7 @@ export const moveNodeWorkflow = mixins(
 		...mapStores(useUIStore),
 	},
 	methods: {
-		moveWorkflow (e: MouseEvent) {
+		moveWorkflow(e: MouseEvent) {
 			const offsetPosition = this.uiStore.nodeViewOffsetPosition;
 
 			const [x, y] = getMousePosition(e);
@@ -29,7 +27,7 @@ export const moveNodeWorkflow = mixins(
 			this.moveLastPosition[0] = x;
 			this.moveLastPosition[1] = y;
 		},
-		mouseDownMoveWorkflow (e: MouseEvent) {
+		mouseDownMoveWorkflow(e: MouseEvent) {
 			if (this.isCtrlKeyPressed(e) === false) {
 				// We only care about it when the ctrl key is pressed at the same time.
 				// So we exit when it is not pressed.
@@ -51,7 +49,7 @@ export const moveNodeWorkflow = mixins(
 			// @ts-ignore
 			this.$el.addEventListener('mousemove', this.mouseMoveNodeWorkflow);
 		},
-		mouseUpMoveWorkflow (e: MouseEvent) {
+		mouseUpMoveWorkflow(e: MouseEvent) {
 			if (this.uiStore.nodeViewMoveInProgress === false) {
 				// If it is not active return directly.
 				// Else normal node dragging will not work.
@@ -65,7 +63,7 @@ export const moveNodeWorkflow = mixins(
 
 			// Nothing else to do. Simply leave the node view at the current offset
 		},
-		mouseMoveNodeWorkflow (e: MouseEvent) {
+		mouseMoveNodeWorkflow(e: MouseEvent) {
 			// @ts-ignore
 			if (e.target && !e.target.id.includes('node-view')) {
 				return;
diff --git a/packages/editor-ui/src/mixins/newVersions.ts b/packages/editor-ui/src/mixins/newVersions.ts
index f0d382620d..7448c87a45 100644
--- a/packages/editor-ui/src/mixins/newVersions.ts
+++ b/packages/editor-ui/src/mixins/newVersions.ts
@@ -5,14 +5,9 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useVersionsStore } from '@/stores/versions';
 
-export const newVersions = mixins(
-	showMessage,
-).extend({
+export const newVersions = mixins(showMessage).extend({
 	computed: {
-		...mapStores(
-			useUIStore,
-			useVersionsStore,
-		),
+		...mapStores(useUIStore, useVersionsStore),
 	},
 	methods: {
 		async checkForNewVersions() {
diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts
index 36b02a4d00..71558f4290 100644
--- a/packages/editor-ui/src/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/mixins/nodeBase.ts
@@ -1,47 +1,38 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 import { IJsPlumbInstance, IEndpointOptions, INodeUi, XYPosition } from '@/Interface';
 import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { NO_OP_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
 
-import {
-	INodeTypeDescription,
-} from 'n8n-workflow';
+import { INodeTypeDescription } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
-import { useWorkflowsStore } from "@/stores/workflows";
-import { useNodeTypesStore } from "@/stores/nodeTypes";
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
-import { getStyleTokenValue } from "@/utils";
-import { useHistoryStore } from "@/stores/history";
-import { MoveNodeCommand } from "@/models/history";
+import { getStyleTokenValue } from '@/utils';
+import { useHistoryStore } from '@/stores/history';
+import { MoveNodeCommand } from '@/models/history';
 
-export const nodeBase = mixins(
-	deviceSupportHelpers,
-).extend({
-	mounted () {
+export const nodeBase = mixins(deviceSupportHelpers).extend({
+	mounted() {
 		// Initialize the node
 		if (this.data !== null) {
 			try {
 				this.__addNode(this.data);
-			} catch(error) {
+			} catch (error) {
 				// This breaks when new nodes are loaded into store but workflow tab is not currently active
 				// Shouldn't affect anything
 			}
 		}
 	},
 	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useUIStore,
-			useWorkflowsStore,
-			useHistoryStore,
-		),
-		data (): INodeUi | null {
+		...mapStores(useNodeTypesStore, useUIStore, useWorkflowsStore, useHistoryStore),
+		data(): INodeUi | null {
 			return this.workflowsStore.getNodeByName(this.name);
 		},
-		nodeId (): string {
-			return this.data?.id  || '';
+		nodeId(): string {
+			return this.data?.id || '';
 		},
 	},
 	props: {
@@ -68,7 +59,7 @@ export const nodeBase = mixins(
 		},
 	},
 	methods: {
-		__addInputEndpoints (node: INodeUi, nodeTypeData: INodeTypeDescription) {
+		__addInputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) {
 			// Add Inputs
 			let index;
 			const indexData: {
@@ -85,14 +76,18 @@ export const nodeBase = mixins(
 				index = indexData[inputName];
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition = NodeViewUtils.ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
+				const anchorPosition =
+					NodeViewUtils.ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
 
 				const newEndpointData: IEndpointOptions = {
-					uuid:NodeViewUtils. getInputEndpointUUID(this.nodeId, index),
+					uuid: NodeViewUtils.getInputEndpointUUID(this.nodeId, index),
 					anchor: anchorPosition,
 					maxConnections: -1,
 					endpoint: 'Rectangle',
-					endpointStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
+					endpointStyle: NodeViewUtils.getInputEndpointStyle(
+						nodeTypeData,
+						'--color-foreground-xdark',
+					),
 					endpointHoverStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-primary'),
 					isSource: false,
 					isTarget: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
@@ -118,7 +113,7 @@ export const nodeBase = mixins(
 				}
 
 				const endpoint = this.instance.addEndpoint(this.nodeId, newEndpointData);
-				if(!Array.isArray(endpoint)) {
+				if (!Array.isArray(endpoint)) {
 					endpoint.__meta = {
 						nodeName: node.name,
 						nodeId: this.nodeId,
@@ -155,14 +150,18 @@ export const nodeBase = mixins(
 				index = indexData[inputName];
 
 				// Get the position of the anchor depending on how many it has
-				const anchorPosition = NodeViewUtils.ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
+				const anchorPosition =
+					NodeViewUtils.ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
 
 				const newEndpointData: IEndpointOptions = {
 					uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
 					anchor: anchorPosition,
 					maxConnections: -1,
 					endpoint: 'Dot',
-					endpointStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
+					endpointStyle: NodeViewUtils.getOutputEndpointStyle(
+						nodeTypeData,
+						'--color-foreground-xdark',
+					),
 					endpointHoverStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-primary'),
 					isSource: true,
 					isTarget: false,
@@ -174,7 +173,7 @@ export const nodeBase = mixins(
 					},
 					cssClass: 'dot-output-endpoint',
 					dragAllowedWhenFull: false,
-					dragProxy: ['Rectangle', {width: 1, height: 1, strokeWidth: 0}],
+					dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }],
 				};
 
 				if (nodeTypeData.outputNames) {
@@ -184,15 +183,15 @@ export const nodeBase = mixins(
 					];
 				}
 
-				const endpoint = this.instance.addEndpoint(this.nodeId, {...newEndpointData});
-					if(!Array.isArray(endpoint)) {
-						endpoint.__meta = {
-							nodeName: node.name,
-							nodeId: this.nodeId,
-							index: i,
-							totalEndpoints: nodeTypeData.outputs.length,
-						};
-					}
+				const endpoint = this.instance.addEndpoint(this.nodeId, { ...newEndpointData });
+				if (!Array.isArray(endpoint)) {
+					endpoint.__meta = {
+						nodeName: node.name,
+						nodeId: this.nodeId,
+						index: i,
+						totalEndpoints: nodeTypeData.outputs.length,
+					};
+				}
 
 				if (!this.isReadOnly) {
 					const plusEndpointData: IEndpointOptions = {
@@ -223,11 +222,11 @@ export const nodeBase = mixins(
 						},
 						cssClass: 'plus-draggable-endpoint',
 						dragAllowedWhenFull: false,
-						dragProxy: ['Rectangle', {width: 1, height: 1, strokeWidth: 0}],
+						dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }],
 					};
 
 					const plusEndpoint = this.instance.addEndpoint(this.nodeId, plusEndpointData);
-					if(!Array.isArray(plusEndpoint)) {
+					if (!Array.isArray(plusEndpoint)) {
 						plusEndpoint.__meta = {
 							nodeName: node.name,
 							nodeId: this.nodeId,
@@ -284,7 +283,7 @@ export const nodeBase = mixins(
 							moveNodes.push(this.data);
 						}
 
-						if(moveNodes.length > 1) {
+						if (moveNodes.length > 1) {
 							this.historyStore.startRecordingUndo();
 						}
 						// This does for some reason just get called once for the node that got clicked
@@ -312,12 +311,14 @@ export const nodeBase = mixins(
 							};
 							const oldPosition = node.position;
 							if (oldPosition[0] !== newNodePosition[0] || oldPosition[1] !== newNodePosition[1]) {
-								this.historyStore.pushCommandToUndo(new MoveNodeCommand(node.name, oldPosition, newNodePosition, this));
+								this.historyStore.pushCommandToUndo(
+									new MoveNodeCommand(node.name, oldPosition, newNodePosition, this),
+								);
 								this.workflowsStore.updateNodeProperties(updateInformation);
 								this.$emit('moved', node);
 							}
 						});
-						if(moveNodes.length > 1) {
+						if (moveNodes.length > 1) {
 							this.historyStore.stopRecordingUndo();
 						}
 					}
@@ -325,7 +326,7 @@ export const nodeBase = mixins(
 				filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
 			});
 		},
-		__addNode (node: INodeUi) {
+		__addNode(node: INodeUi) {
 			let nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 			if (!nodeTypeData) {
 				// If node type is not know use by default the base.noOp data to display it
@@ -343,11 +344,15 @@ export const nodeBase = mixins(
 				}
 			}
 		},
-		mouseLeftClick (e: MouseEvent) {
+		mouseLeftClick(e: MouseEvent) {
 			// @ts-ignore
 			const path = e.path || (e.composedPath && e.composedPath());
 			for (let index = 0; index < path.length; index++) {
-				if (path[index].className && typeof path[index].className === 'string' && path[index].className.includes('no-select-on-click')) {
+				if (
+					path[index].className &&
+					typeof path[index].className === 'string' &&
+					path[index].className.includes('no-select-on-click')
+				) {
 					return;
 				}
 			}
diff --git a/packages/editor-ui/src/mixins/nodeHelpers.ts b/packages/editor-ui/src/mixins/nodeHelpers.ts
index be4df23c02..ada50027be 100644
--- a/packages/editor-ui/src/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/mixins/nodeHelpers.ts
@@ -38,7 +38,7 @@ import { get } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 import { isObjectLiteral } from '@/utils';
-import {getCredentialPermissions} from "@/permissions";
+import { getCredentialPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
@@ -46,467 +46,524 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useCredentialsStore } from '@/stores/credentials';
 
-export const nodeHelpers = mixins(
-	restApi,
-)
-	.extend({
-		computed: {
-			...mapStores(
-				useCredentialsStore,
-				useHistoryStore,
-				useNodeTypesStore,
-				useSettingsStore,
-				useWorkflowsStore,
-			),
+export const nodeHelpers = mixins(restApi).extend({
+	computed: {
+		...mapStores(
+			useCredentialsStore,
+			useHistoryStore,
+			useNodeTypesStore,
+			useSettingsStore,
+			useWorkflowsStore,
+		),
+	},
+	methods: {
+		hasProxyAuth(node: INodeUi): boolean {
+			return Object.keys(node.parameters).includes('nodeCredentialType');
 		},
-		methods: {
-			hasProxyAuth (node: INodeUi): boolean {
-				return Object.keys(node.parameters).includes('nodeCredentialType');
-			},
 
-			isCustomApiCallSelected (nodeValues: INodeParameters): boolean {
-				const { parameters } = nodeValues;
+		isCustomApiCallSelected(nodeValues: INodeParameters): boolean {
+			const { parameters } = nodeValues;
 
-				if (!isObjectLiteral(parameters)) return false;
+			if (!isObjectLiteral(parameters)) return false;
 
-				return (
-					parameters.resource !== undefined && parameters.resource.includes(CUSTOM_API_CALL_KEY) ||
-					parameters.operation !== undefined && parameters.operation.includes(CUSTOM_API_CALL_KEY)
-				);
-			},
+			return (
+				(parameters.resource !== undefined && parameters.resource.includes(CUSTOM_API_CALL_KEY)) ||
+				(parameters.operation !== undefined && parameters.operation.includes(CUSTOM_API_CALL_KEY))
+			);
+		},
 
-			// Returns the parameter value
-			getParameterValue (nodeValues: INodeParameters, parameterName: string, path: string) {
-				return get(
-					nodeValues,
-					path ? path + '.' + parameterName : parameterName,
-				);
-			},
+		// Returns the parameter value
+		getParameterValue(nodeValues: INodeParameters, parameterName: string, path: string) {
+			return get(nodeValues, path ? path + '.' + parameterName : parameterName);
+		},
 
-			// Returns if the given parameter should be displayed or not
-			displayParameter (nodeValues: INodeParameters, parameter: INodeProperties | INodeCredentialDescription, path: string, node: INodeUi | null) {
-				return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node);
-			},
+		// Returns if the given parameter should be displayed or not
+		displayParameter(
+			nodeValues: INodeParameters,
+			parameter: INodeProperties | INodeCredentialDescription,
+			path: string,
+			node: INodeUi | null,
+		) {
+			return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node);
+		},
 
-			// Returns all the issues of the node
-			getNodeIssues (nodeType: INodeTypeDescription | null, node: INodeUi, ignoreIssues?: string[]): INodeIssues | null {
-				const pinDataNodeNames = Object.keys(this.workflowsStore.getPinData || {});
+		// Returns all the issues of the node
+		getNodeIssues(
+			nodeType: INodeTypeDescription | null,
+			node: INodeUi,
+			ignoreIssues?: string[],
+		): INodeIssues | null {
+			const pinDataNodeNames = Object.keys(this.workflowsStore.getPinData || {});
 
-				let nodeIssues: INodeIssues | null = null;
-				ignoreIssues = ignoreIssues || [];
+			let nodeIssues: INodeIssues | null = null;
+			ignoreIssues = ignoreIssues || [];
 
-				if (node.disabled === true || pinDataNodeNames.includes(node.name)) {
-					// Ignore issues on disabled and pindata nodes
-					return null;
+			if (node.disabled === true || pinDataNodeNames.includes(node.name)) {
+				// Ignore issues on disabled and pindata nodes
+				return null;
+			}
+
+			if (nodeType === null) {
+				// Node type is not known
+				if (!ignoreIssues.includes('typeUnknown')) {
+					nodeIssues = {
+						typeUnknown: true,
+					};
+				}
+			} else {
+				// Node type is known
+
+				// Add potential parameter issues
+				if (!ignoreIssues.includes('parameters')) {
+					nodeIssues = NodeHelpers.getNodeParametersIssues(nodeType.properties, node);
 				}
 
-				if (nodeType === null) {
-					// Node type is not known
-					if (!ignoreIssues.includes('typeUnknown')) {
-						nodeIssues = {
-							typeUnknown: true,
-						};
+				if (!ignoreIssues.includes('credentials')) {
+					// Add potential credential issues
+					const nodeCredentialIssues = this.getNodeCredentialIssues(node, nodeType);
+					if (nodeIssues === null) {
+						nodeIssues = nodeCredentialIssues;
+					} else {
+						NodeHelpers.mergeIssues(nodeIssues, nodeCredentialIssues);
+					}
+				}
+			}
+
+			if (this.hasNodeExecutionIssues(node) === true && !ignoreIssues.includes('execution')) {
+				if (nodeIssues === null) {
+					nodeIssues = {};
+				}
+				nodeIssues.execution = true;
+			}
+
+			return nodeIssues;
+		},
+
+		// Set the status on all the nodes which produced an error so that it can be
+		// displayed in the node-view
+		hasNodeExecutionIssues(node: INodeUi): boolean {
+			const workflowResultData = this.workflowsStore.getWorkflowRunData;
+
+			if (workflowResultData === null || !workflowResultData.hasOwnProperty(node.name)) {
+				return false;
+			}
+
+			for (const taskData of workflowResultData[node.name]) {
+				if (taskData.error !== undefined) {
+					return true;
+				}
+			}
+
+			return false;
+		},
+
+		reportUnsetCredential(credentialType: ICredentialType) {
+			return {
+				credentials: {
+					[credentialType.name]: [
+						this.$locale.baseText('nodeHelpers.credentialsUnset', {
+							interpolate: {
+								credentialType: credentialType.displayName,
+							},
+						}),
+					],
+				},
+			};
+		},
+
+		// Updates the execution issues.
+		updateNodesExecutionIssues() {
+			const nodes = this.workflowsStore.allNodes;
+
+			for (const node of nodes) {
+				this.workflowsStore.setNodeIssue({
+					node: node.name,
+					type: 'execution',
+					value: this.hasNodeExecutionIssues(node) ? true : null,
+				});
+			}
+		},
+
+		// Updates the credential-issues of the node
+		updateNodeCredentialIssues(node: INodeUi): void {
+			const fullNodeIssues: INodeIssues | null = this.getNodeCredentialIssues(node);
+
+			let newIssues: INodeIssueObjectProperty | null = null;
+			if (fullNodeIssues !== null) {
+				newIssues = fullNodeIssues.credentials!;
+			}
+
+			this.workflowsStore.setNodeIssue({
+				node: node.name,
+				type: 'credentials',
+				value: newIssues,
+			});
+		},
+
+		// Updates the parameter-issues of the node
+		updateNodeParameterIssues(node: INodeUi, nodeType?: INodeTypeDescription): void {
+			if (nodeType === undefined) {
+				nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+			}
+
+			if (nodeType === null) {
+				// Could not find nodeType so can not update issues
+				return;
+			}
+
+			// All data got updated everywhere so update now the issues
+			const fullNodeIssues: INodeIssues | null = NodeHelpers.getNodeParametersIssues(
+				nodeType!.properties,
+				node,
+			);
+
+			let newIssues: INodeIssueObjectProperty | null = null;
+			if (fullNodeIssues !== null) {
+				newIssues = fullNodeIssues.parameters!;
+			}
+
+			this.workflowsStore.setNodeIssue({
+				node: node.name,
+				type: 'parameters',
+				value: newIssues,
+			});
+		},
+
+		// Returns all the credential-issues of the node
+		getNodeCredentialIssues(node: INodeUi, nodeType?: INodeTypeDescription): INodeIssues | null {
+			if (node.disabled) {
+				// Node is disabled
+				return null;
+			}
+
+			if (!nodeType) {
+				nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+			}
+
+			if (!nodeType?.credentials) {
+				// Node does not need any credentials or nodeType could not be found
+				return null;
+			}
+
+			const foundIssues: INodeIssueObjectProperty = {};
+
+			let userCredentials: ICredentialsResponse[] | null;
+			let credentialType: ICredentialType | null;
+			let credentialDisplayName: string;
+			let selectedCredentials: INodeCredentialsDetails;
+
+			const { authentication, genericAuthType, nodeCredentialType } =
+				node.parameters as HttpRequestNode.V2.AuthParams;
+
+			if (
+				authentication === 'genericCredentialType' &&
+				genericAuthType !== '' &&
+				selectedCredsAreUnusable(node, genericAuthType)
+			) {
+				const credential = this.credentialsStore.getCredentialTypeByName(genericAuthType);
+				return this.reportUnsetCredential(credential);
+			}
+
+			if (
+				this.hasProxyAuth(node) &&
+				authentication === 'predefinedCredentialType' &&
+				nodeCredentialType !== '' &&
+				node.credentials !== undefined
+			) {
+				const stored = this.credentialsStore.getCredentialsByType(nodeCredentialType);
+
+				if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
+					const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
+					return this.reportUnsetCredential(credential);
+				}
+			}
+
+			if (
+				this.hasProxyAuth(node) &&
+				authentication === 'predefinedCredentialType' &&
+				nodeCredentialType !== '' &&
+				selectedCredsAreUnusable(node, nodeCredentialType)
+			) {
+				const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
+				return this.reportUnsetCredential(credential);
+			}
+
+			for (const credentialTypeDescription of nodeType.credentials) {
+				// Check if credentials should be displayed else ignore
+				if (!this.displayParameter(node.parameters, credentialTypeDescription, '', node)) {
+					continue;
+				}
+
+				// Get the display name of the credential type
+				credentialType = this.credentialsStore.getCredentialTypeByName(
+					credentialTypeDescription.name,
+				);
+				if (credentialType === null) {
+					credentialDisplayName = credentialTypeDescription.name;
+				} else {
+					credentialDisplayName = credentialType.displayName;
+				}
+
+				if (!node.credentials || !node.credentials?.[credentialTypeDescription.name]) {
+					// Credentials are not set
+					if (credentialTypeDescription.required) {
+						foundIssues[credentialTypeDescription.name] = [
+							this.$locale.baseText('nodeIssues.credentials.notSet', {
+								interpolate: { type: credentialDisplayName },
+							}),
+						];
 					}
 				} else {
-					// Node type is known
-
-					// Add potential parameter issues
-					if (!ignoreIssues.includes('parameters')) {
-						nodeIssues = NodeHelpers.getNodeParametersIssues(nodeType.properties, node);
+					// If they are set check if the value is valid
+					selectedCredentials = node.credentials[
+						credentialTypeDescription.name
+					] as INodeCredentialsDetails;
+					if (typeof selectedCredentials === 'string') {
+						selectedCredentials = {
+							id: null,
+							name: selectedCredentials,
+						};
 					}
 
-					if (!ignoreIssues.includes('credentials')) {
-						// Add potential credential issues
-						const nodeCredentialIssues = this.getNodeCredentialIssues(node, nodeType);
-						if (nodeIssues === null) {
-							nodeIssues = nodeCredentialIssues;
-						} else {
-							NodeHelpers.mergeIssues(nodeIssues, nodeCredentialIssues);
+					const usersStore = useUsersStore();
+					const currentUser = usersStore.currentUser || ({} as IUser);
+					userCredentials = this.credentialsStore
+						.getCredentialsByType(credentialTypeDescription.name)
+						.filter((credential: ICredentialsResponse) => {
+							const permissions = getCredentialPermissions(currentUser, credential);
+							return permissions.use;
+						});
+
+					if (userCredentials === null) {
+						userCredentials = [];
+					}
+
+					if (selectedCredentials.id) {
+						const idMatch = userCredentials.find(
+							(credentialData) => credentialData.id === selectedCredentials.id,
+						);
+						if (idMatch) {
+							continue;
+						}
+					}
+
+					const nameMatches = userCredentials.filter(
+						(credentialData) => credentialData.name === selectedCredentials.name,
+					);
+					if (nameMatches.length > 1) {
+						foundIssues[credentialTypeDescription.name] = [
+							this.$locale.baseText('nodeIssues.credentials.notIdentified', {
+								interpolate: { name: selectedCredentials.name, type: credentialDisplayName },
+							}),
+							this.$locale.baseText('nodeIssues.credentials.notIdentified.hint'),
+						];
+						continue;
+					}
+
+					if (nameMatches.length === 0) {
+						const isCredentialUsedInWorkflow =
+							this.workflowsStore.usedCredentials?.[selectedCredentials.id as string];
+						if (!isCredentialUsedInWorkflow) {
+							foundIssues[credentialTypeDescription.name] = [
+								this.$locale.baseText('nodeIssues.credentials.doNotExist', {
+									interpolate: { name: selectedCredentials.name, type: credentialDisplayName },
+								}),
+								this.$locale.baseText('nodeIssues.credentials.doNotExist.hint'),
+							];
 						}
 					}
 				}
+			}
 
-				if (this.hasNodeExecutionIssues(node) === true && !ignoreIssues.includes('execution')) {
-					if (nodeIssues === null) {
-						nodeIssues = {};
-					}
-					nodeIssues.execution = true;
-				}
+			// TODO: Could later check also if the node has access to the credentials
+			if (Object.keys(foundIssues).length === 0) {
+				return null;
+			}
 
-				return nodeIssues;
-			},
+			return {
+				credentials: foundIssues,
+			};
+		},
 
-			// Set the status on all the nodes which produced an error so that it can be
-			// displayed in the node-view
-			hasNodeExecutionIssues (node: INodeUi): boolean {
-				const workflowResultData = this.workflowsStore.getWorkflowRunData;
+		// Updates the node credential issues
+		updateNodesCredentialsIssues() {
+			const nodes = this.workflowsStore.allNodes;
+			let issues: INodeIssues | null;
 
-				if (workflowResultData === null || !workflowResultData.hasOwnProperty(node.name)) {
-					return false;
-				}
-
-				for (const taskData of workflowResultData[node.name]) {
-					if (taskData.error !== undefined) {
-						return true;
-					}
-				}
-
-				return false;
-			},
-
-			reportUnsetCredential(credentialType: ICredentialType) {
-				return {
-					credentials: {
-						[credentialType.name]: [
-							this.$locale.baseText(
-								'nodeHelpers.credentialsUnset',
-								{
-									interpolate: {
-										credentialType: credentialType.displayName,
-									},
-								},
-							),
-						],
-					},
-				};
-			},
-
-			// Updates the execution issues.
-			updateNodesExecutionIssues () {
-				const nodes = this.workflowsStore.allNodes;
-
-				for (const node of nodes) {
-					this.workflowsStore.setNodeIssue({
-						node: node.name,
-						type: 'execution',
-						value: this.hasNodeExecutionIssues(node) ? true : null,
-					});
-				}
-			},
-
-			// Updates the credential-issues of the node
-			updateNodeCredentialIssues(node: INodeUi): void {
-				const fullNodeIssues: INodeIssues | null = this.getNodeCredentialIssues(node);
-
-				let newIssues: INodeIssueObjectProperty | null = null;
-				if (fullNodeIssues !== null) {
-					newIssues = fullNodeIssues.credentials!;
-				}
+			for (const node of nodes) {
+				issues = this.getNodeCredentialIssues(node);
 
 				this.workflowsStore.setNodeIssue({
 					node: node.name,
 					type: 'credentials',
-					value: newIssues,
+					value: issues === null ? null : issues.credentials,
 				});
-			},
-
-			// Updates the parameter-issues of the node
-			updateNodeParameterIssues(node: INodeUi, nodeType?: INodeTypeDescription): void {
-				if (nodeType === undefined) {
-					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				}
-
-				if (nodeType === null) {
-					// Could not find nodeType so can not update issues
-					return;
-				}
-
-				// All data got updated everywhere so update now the issues
-				const fullNodeIssues: INodeIssues | null = NodeHelpers.getNodeParametersIssues(nodeType!.properties, node);
-
-				let newIssues: INodeIssueObjectProperty | null = null;
-				if (fullNodeIssues !== null) {
-					newIssues = fullNodeIssues.parameters!;
-				}
-
-				this.workflowsStore.setNodeIssue({
-					node: node.name,
-					type: 'parameters',
-					value: newIssues,
-				});
-			},
-
-			// Returns all the credential-issues of the node
-			getNodeCredentialIssues (node: INodeUi, nodeType?: INodeTypeDescription): INodeIssues | null {
-				if (node.disabled) {
-					// Node is disabled
-					return null;
-				}
-
-				if (!nodeType) {
-					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				}
-
-				if (!nodeType?.credentials) {
-					// Node does not need any credentials or nodeType could not be found
-					return null;
-				}
-
-				const foundIssues: INodeIssueObjectProperty = {};
-
-				let userCredentials: ICredentialsResponse[] | null;
-				let credentialType: ICredentialType | null;
-				let credentialDisplayName: string;
-				let selectedCredentials: INodeCredentialsDetails;
-
-				const {
-					authentication,
-					genericAuthType,
-					nodeCredentialType,
-				} = node.parameters as HttpRequestNode.V2.AuthParams;
-
-				if (
-					authentication === 'genericCredentialType' &&
-					genericAuthType !== '' &&
-					selectedCredsAreUnusable(node, genericAuthType)
-				) {
-					const credential = this.credentialsStore.getCredentialTypeByName(genericAuthType);
-					return this.reportUnsetCredential(credential);
-				}
-
-				if (
-					this.hasProxyAuth(node) &&
-					authentication === 'predefinedCredentialType' &&
-					nodeCredentialType !== '' &&
-					node.credentials !== undefined
-				) {
-					const stored = this.credentialsStore.getCredentialsByType(nodeCredentialType);
-
-					if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
-						const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
-						return this.reportUnsetCredential(credential);
-					}
-				}
-
-				if (
-					this.hasProxyAuth(node) &&
-					authentication === 'predefinedCredentialType' &&
-					nodeCredentialType !== '' &&
-					selectedCredsAreUnusable(node, nodeCredentialType)
-				) {
-					const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
-					return this.reportUnsetCredential(credential);
-				}
-
-				for (const credentialTypeDescription of nodeType.credentials) {
-					// Check if credentials should be displayed else ignore
-					if (!this.displayParameter(node.parameters, credentialTypeDescription, '', node)) {
-						continue;
-					}
-
-					// Get the display name of the credential type
-					credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeDescription.name);
-					if (credentialType === null) {
-						credentialDisplayName = credentialTypeDescription.name;
-					} else {
-						credentialDisplayName = credentialType.displayName;
-					}
-
-					if (!node.credentials || !node.credentials?.[credentialTypeDescription.name]) {
-						// Credentials are not set
-						if (credentialTypeDescription.required) {
-							foundIssues[credentialTypeDescription.name] = [this.$locale.baseText('nodeIssues.credentials.notSet', { interpolate: { type: credentialDisplayName } })];
-						}
-					} else {
-						// If they are set check if the value is valid
-						selectedCredentials = node.credentials[credentialTypeDescription.name] as INodeCredentialsDetails;
-						if (typeof selectedCredentials === 'string') {
-							selectedCredentials = {
-								id: null,
-								name: selectedCredentials,
-							};
-						}
-
-						const usersStore = useUsersStore();
-						const currentUser = usersStore.currentUser || {} as IUser;
-						userCredentials = this.credentialsStore.getCredentialsByType(credentialTypeDescription.name)
-							.filter((credential: ICredentialsResponse) => {
-								const permissions = getCredentialPermissions(currentUser, credential);
-								return permissions.use;
-							});
-
-						if (userCredentials === null) {
-							userCredentials = [];
-						}
-
-						if (selectedCredentials.id) {
-							const idMatch = userCredentials.find((credentialData) => credentialData.id === selectedCredentials.id);
-							if (idMatch) {
-								continue;
-							}
-						}
-
-						const nameMatches = userCredentials.filter((credentialData) => credentialData.name === selectedCredentials.name);
-						if (nameMatches.length > 1) {
-							foundIssues[credentialTypeDescription.name] = [this.$locale.baseText('nodeIssues.credentials.notIdentified', { interpolate: { name: selectedCredentials.name, type: credentialDisplayName } }), this.$locale.baseText('nodeIssues.credentials.notIdentified.hint')];
-							continue;
-						}
-
-						if (nameMatches.length === 0) {
-							const isCredentialUsedInWorkflow = this.workflowsStore.usedCredentials?.[selectedCredentials.id as string];
-							if (!isCredentialUsedInWorkflow) {
-								foundIssues[credentialTypeDescription.name] = [this.$locale.baseText('nodeIssues.credentials.doNotExist', { interpolate: { name: selectedCredentials.name, type: credentialDisplayName } }), this.$locale.baseText('nodeIssues.credentials.doNotExist.hint')];
-							}
-						}
-					}
-				}
-
-				// TODO: Could later check also if the node has access to the credentials
-				if (Object.keys(foundIssues).length === 0) {
-					return null;
-				}
-
-				return {
-					credentials: foundIssues,
-				};
-			},
-
-			// Updates the node credential issues
-			updateNodesCredentialsIssues () {
-				const nodes = this.workflowsStore.allNodes;
-				let issues: INodeIssues | null;
-
-				for (const node of nodes) {
-					issues = this.getNodeCredentialIssues(node);
-
-					this.workflowsStore.setNodeIssue({
-						node: node.name,
-						type: 'credentials',
-						value: issues === null ? null : issues.credentials,
-					});
-				}
-			},
-
-			getNodeInputData (node: INodeUi | null, runIndex = 0, outputIndex = 0): INodeExecutionData[] {
-				if (node === null) {
-					return [];
-				}
-
-				if (this.workflowsStore.getWorkflowExecution === null) {
-					return [];
-				}
-				const executionData = this.workflowsStore.getWorkflowExecution.data;
-				if (!executionData || !executionData.resultData) { // unknown status
-					return [];
-				}
-				const runData = executionData.resultData.runData;
-
-				if (runData === null || runData[node.name] === undefined ||
-					!runData[node.name][runIndex].data ||
-					runData[node.name][runIndex].data === undefined
-				) {
-					return [];
-				}
-
-				return this.getMainInputData(runData[node.name][runIndex].data!, outputIndex);
-			},
-
-			// Returns the data of the main input
-			getMainInputData (connectionsData: ITaskDataConnections, outputIndex: number): INodeExecutionData[] {
-				if (!connectionsData || !connectionsData.hasOwnProperty('main') || connectionsData.main === undefined || connectionsData.main.length < outputIndex || connectionsData.main[outputIndex] === null) {
-					return [];
-				}
-				return connectionsData.main[outputIndex] as INodeExecutionData[];
-			},
-
-			// Returns all the binary data of all the entries
-			getBinaryData (workflowRunData: IRunData | null, node: string | null, runIndex: number, outputIndex: number): IBinaryKeyData[] {
-				if (node === null) {
-					return [];
-				}
-
-				const runData: IRunData | null = workflowRunData;
-
-				if (runData === null || !runData[node] || !runData[node][runIndex] ||
-					!runData[node][runIndex].data
-				) {
-					return [];
-				}
-
-				const inputData = this.getMainInputData(runData[node][runIndex].data!, outputIndex);
-
-				const returnData: IBinaryKeyData[] = [];
-				for (let i = 0; i < inputData.length; i++) {
-					if (inputData[i].hasOwnProperty('binary') && inputData[i].binary !== undefined) {
-						returnData.push(inputData[i].binary!);
-					}
-				}
-
-				return returnData;
-			},
-
-			disableNodes(nodes: INodeUi[], trackHistory = false) {
-				if (trackHistory) {
-					this.historyStore.startRecordingUndo();
-				}
-				for (const node of nodes) {
-					const oldState = node.disabled;
-					// Toggle disabled flag
-					const updateInformation = {
-						name: node.name,
-						properties: {
-							disabled: !oldState,
-						} as IDataObject,
-					} as INodeUpdatePropertiesInformation;
-
-					this.$telemetry.track('User set node enabled status', { node_type: node.type, is_enabled: node.disabled, workflow_id: this.workflowsStore.workflowId });
-
-					this.workflowsStore.updateNodeProperties(updateInformation);
-					this.workflowsStore.clearNodeExecutionData(node.name);
-					this.updateNodeParameterIssues(node);
-					this.updateNodeCredentialIssues(node);
-					if (trackHistory) {
-						this.historyStore.pushCommandToUndo(new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true, this));
-					}
-				}
-				if (trackHistory) {
-					this.historyStore.stopRecordingUndo();
-				}
-			},
-			// @ts-ignore
-			getNodeSubtitle (data, nodeType, workflow): string | undefined {
-				if (!data) {
-					return undefined;
-				}
-
-				if (data.notesInFlow) {
-					return data.notes;
-				}
-
-				if (nodeType !== null && nodeType.subtitle !== undefined) {
-					return workflow.expression.getSimpleParameterValue(data as INode, nodeType.subtitle, 'internal', PLACEHOLDER_FILLED_AT_EXECUTION_TIME) as string | undefined;
-				}
-
-				if (data.parameters.operation !== undefined) {
-					const operation = data.parameters.operation as string;
-					if (nodeType === null) {
-						return operation;
-					}
-
-					const operationData:INodeProperties = nodeType.properties.find((property: INodeProperties) => {
-						return property.name === 'operation';
-					});
-					if (operationData === undefined) {
-						return operation;
-					}
-
-					if (operationData.options === undefined) {
-						return operation;
-					}
-
-					const optionData = operationData.options.find((option) => {
-						return (option as INodePropertyOptions).value === data.parameters.operation;
-					});
-					if (optionData === undefined) {
-						return operation;
-					}
-
-					return optionData.name;
-				}
-				return undefined;
-			},
+			}
 		},
-	});
+
+		getNodeInputData(node: INodeUi | null, runIndex = 0, outputIndex = 0): INodeExecutionData[] {
+			if (node === null) {
+				return [];
+			}
+
+			if (this.workflowsStore.getWorkflowExecution === null) {
+				return [];
+			}
+			const executionData = this.workflowsStore.getWorkflowExecution.data;
+			if (!executionData || !executionData.resultData) {
+				// unknown status
+				return [];
+			}
+			const runData = executionData.resultData.runData;
+
+			if (
+				runData === null ||
+				runData[node.name] === undefined ||
+				!runData[node.name][runIndex].data ||
+				runData[node.name][runIndex].data === undefined
+			) {
+				return [];
+			}
+
+			return this.getMainInputData(runData[node.name][runIndex].data!, outputIndex);
+		},
+
+		// Returns the data of the main input
+		getMainInputData(
+			connectionsData: ITaskDataConnections,
+			outputIndex: number,
+		): INodeExecutionData[] {
+			if (
+				!connectionsData ||
+				!connectionsData.hasOwnProperty('main') ||
+				connectionsData.main === undefined ||
+				connectionsData.main.length < outputIndex ||
+				connectionsData.main[outputIndex] === null
+			) {
+				return [];
+			}
+			return connectionsData.main[outputIndex] as INodeExecutionData[];
+		},
+
+		// Returns all the binary data of all the entries
+		getBinaryData(
+			workflowRunData: IRunData | null,
+			node: string | null,
+			runIndex: number,
+			outputIndex: number,
+		): IBinaryKeyData[] {
+			if (node === null) {
+				return [];
+			}
+
+			const runData: IRunData | null = workflowRunData;
+
+			if (
+				runData === null ||
+				!runData[node] ||
+				!runData[node][runIndex] ||
+				!runData[node][runIndex].data
+			) {
+				return [];
+			}
+
+			const inputData = this.getMainInputData(runData[node][runIndex].data!, outputIndex);
+
+			const returnData: IBinaryKeyData[] = [];
+			for (let i = 0; i < inputData.length; i++) {
+				if (inputData[i].hasOwnProperty('binary') && inputData[i].binary !== undefined) {
+					returnData.push(inputData[i].binary!);
+				}
+			}
+
+			return returnData;
+		},
+
+		disableNodes(nodes: INodeUi[], trackHistory = false) {
+			if (trackHistory) {
+				this.historyStore.startRecordingUndo();
+			}
+			for (const node of nodes) {
+				const oldState = node.disabled;
+				// Toggle disabled flag
+				const updateInformation = {
+					name: node.name,
+					properties: {
+						disabled: !oldState,
+					} as IDataObject,
+				} as INodeUpdatePropertiesInformation;
+
+				this.$telemetry.track('User set node enabled status', {
+					node_type: node.type,
+					is_enabled: node.disabled,
+					workflow_id: this.workflowsStore.workflowId,
+				});
+
+				this.workflowsStore.updateNodeProperties(updateInformation);
+				this.workflowsStore.clearNodeExecutionData(node.name);
+				this.updateNodeParameterIssues(node);
+				this.updateNodeCredentialIssues(node);
+				if (trackHistory) {
+					this.historyStore.pushCommandToUndo(
+						new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true, this),
+					);
+				}
+			}
+			if (trackHistory) {
+				this.historyStore.stopRecordingUndo();
+			}
+		},
+		// @ts-ignore
+		getNodeSubtitle(data, nodeType, workflow): string | undefined {
+			if (!data) {
+				return undefined;
+			}
+
+			if (data.notesInFlow) {
+				return data.notes;
+			}
+
+			if (nodeType !== null && nodeType.subtitle !== undefined) {
+				return workflow.expression.getSimpleParameterValue(
+					data as INode,
+					nodeType.subtitle,
+					'internal',
+					PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+				) as string | undefined;
+			}
+
+			if (data.parameters.operation !== undefined) {
+				const operation = data.parameters.operation as string;
+				if (nodeType === null) {
+					return operation;
+				}
+
+				const operationData: INodeProperties = nodeType.properties.find(
+					(property: INodeProperties) => {
+						return property.name === 'operation';
+					},
+				);
+				if (operationData === undefined) {
+					return operation;
+				}
+
+				if (operationData.options === undefined) {
+					return operation;
+				}
+
+				const optionData = operationData.options.find((option) => {
+					return (option as INodePropertyOptions).value === data.parameters.operation;
+				});
+				if (optionData === undefined) {
+					return operation;
+				}
+
+				return optionData.name;
+			}
+			return undefined;
+		},
+	},
+});
 
 /**
  * Whether the node has no selected credentials, or none of the node's
diff --git a/packages/editor-ui/src/mixins/pinData.ts b/packages/editor-ui/src/mixins/pinData.ts
index 31840fb186..69aac74965 100644
--- a/packages/editor-ui/src/mixins/pinData.ts
+++ b/packages/editor-ui/src/mixins/pinData.ts
@@ -14,10 +14,10 @@ export interface IPinDataContext {
 export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend({
 	computed: {
 		...mapStores(useWorkflowsStore),
-		pinData (): IPinData[string] | undefined {
+		pinData(): IPinData[string] | undefined {
 			return this.node ? this.workflowsStore.pinDataByNodeName(this.node!.name) : undefined;
 		},
-		hasPinData (): boolean {
+		hasPinData(): boolean {
 			return !!this.node && typeof this.pinData !== 'undefined';
 		},
 		isPinDataNodeType(): boolean {
@@ -40,7 +40,7 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 
 				error.message = message.charAt(0).toUpperCase() + message.slice(1);
 				error.message = error.message.replace(
-					'Unexpected token \' in JSON',
+					"Unexpected token ' in JSON",
 					this.$locale.baseText('runData.editOutputInvalid.singleQuote'),
 				);
 
@@ -48,7 +48,8 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 					const position = parseInt(positionMatch[1], 10);
 					const lineBreaksUpToPosition = (data.slice(0, position).match(/\n/g) || []).length;
 
-					error.message = error.message.replace(positionMatchRegEx,
+					error.message = error.message.replace(
+						positionMatchRegEx,
 						this.$locale.baseText('runData.editOutputInvalid.atPosition', {
 							interpolate: {
 								position: `${position}`,
@@ -56,13 +57,11 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 						}),
 					);
 
-					error.message = `${
-						this.$locale.baseText('runData.editOutputInvalid.onLine', {
-							interpolate: {
-								line: `${lineBreaksUpToPosition + 1}`,
-							},
-						})
-					} ${error.message}`;
+					error.message = `${this.$locale.baseText('runData.editOutputInvalid.onLine', {
+						interpolate: {
+							line: `${lineBreaksUpToPosition + 1}`,
+						},
+					})} ${error.message}`;
 				}
 
 				this.$showError(error, title);
@@ -73,7 +72,10 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 		isValidPinDataSize(data: string | object): boolean {
 			if (typeof data === 'object') data = JSON.stringify(data);
 
-			if (this.workflowsStore.pinDataSize + stringSizeInBytes(data) > MAX_WORKFLOW_PINNED_DATA_SIZE) {
+			if (
+				this.workflowsStore.pinDataSize + stringSizeInBytes(data) >
+				MAX_WORKFLOW_PINNED_DATA_SIZE
+			) {
 				this.$showError(
 					new Error(this.$locale.baseText('ndv.pinData.error.tooLarge.description')),
 					this.$locale.baseText('ndv.pinData.error.tooLarge.title'),
diff --git a/packages/editor-ui/src/mixins/pushConnection.ts b/packages/editor-ui/src/mixins/pushConnection.ts
index 7e4307b0d4..13aae4ae3d 100644
--- a/packages/editor-ui/src/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/mixins/pushConnection.ts
@@ -1,8 +1,4 @@
-import {
-	IExecutionResponse,
-	IExecutionsCurrentSummaryExtended,
-	IPushData,
-} from '../../Interface';
+import { IExecutionResponse, IExecutionsCurrentSummaryExtended, IPushData } from '../../Interface';
 
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
@@ -35,60 +31,60 @@ export const pushConnection = mixins(
 	showMessage,
 	titleChange,
 	workflowHelpers,
-)
-	.extend({
-		data () {
-			return {
-				eventSource: null as EventSource | null,
-				reconnectTimeout: null as NodeJS.Timeout | null,
-				retryTimeout: null as NodeJS.Timeout | null,
-				pushMessageQueue: [] as Array<{ event: Event, retriesLeft: number }>,
-			};
+).extend({
+	data() {
+		return {
+			eventSource: null as EventSource | null,
+			reconnectTimeout: null as NodeJS.Timeout | null,
+			retryTimeout: null as NodeJS.Timeout | null,
+			pushMessageQueue: [] as Array<{ event: Event; retriesLeft: number }>,
+		};
+	},
+	computed: {
+		...mapStores(useCredentialsStore, useNodeTypesStore, useUIStore, useWorkflowsStore),
+		sessionId(): string {
+			return this.rootStore.sessionId;
 		},
-		computed: {
-			...mapStores(
-				useCredentialsStore,
-				useNodeTypesStore,
-				useUIStore,
-				useWorkflowsStore,
-			),
-			sessionId (): string {
-				return this.rootStore.sessionId;
-			},
+	},
+	methods: {
+		pushAutomaticReconnect(): void {
+			if (this.reconnectTimeout !== null) {
+				return;
+			}
+
+			this.reconnectTimeout = setTimeout(() => {
+				this.pushConnect();
+			}, 3000);
 		},
-		methods: {
-			pushAutomaticReconnect (): void {
-				if (this.reconnectTimeout !== null) {
-					return;
-				}
 
-				this.reconnectTimeout = setTimeout(() => {
-					this.pushConnect();
-				}, 3000);
-			},
+		/**
+		 * Connect to server to receive data via EventSource
+		 */
+		pushConnect(): void {
+			// Make sure existing event-source instances get
+			// always removed that we do not end up with multiple ones
+			this.pushDisconnect();
 
-			/**
-			 * Connect to server to receive data via EventSource
-			 */
-			pushConnect (): void {
-				// Make sure existing event-source instances get
-				// always removed that we do not end up with multiple ones
-				this.pushDisconnect();
+			const connectionUrl = `${this.rootStore.getRestUrl}/push?sessionId=${this.sessionId}`;
 
-				const connectionUrl = `${this.rootStore.getRestUrl}/push?sessionId=${this.sessionId}`;
+			this.eventSource = new EventSource(connectionUrl, { withCredentials: true });
+			this.eventSource.addEventListener('message', this.pushMessageReceived, false);
 
-				this.eventSource = new EventSource(connectionUrl, { withCredentials: true });
-				this.eventSource.addEventListener('message', this.pushMessageReceived, false);
-
-				this.eventSource.addEventListener('open', () => {
-					this.rootStore.pushConnectionActive =  true;
+			this.eventSource.addEventListener(
+				'open',
+				() => {
+					this.rootStore.pushConnectionActive = true;
 					if (this.reconnectTimeout !== null) {
 						clearTimeout(this.reconnectTimeout);
 						this.reconnectTimeout = null;
 					}
-				}, false);
+				},
+				false,
+			);
 
-				this.eventSource.addEventListener('error', () => {
+			this.eventSource.addEventListener(
+				'error',
+				() => {
 					this.pushDisconnect();
 
 					if (this.reconnectTimeout !== null) {
@@ -96,362 +92,386 @@ export const pushConnection = mixins(
 						this.reconnectTimeout = null;
 					}
 
-					this.rootStore.pushConnectionActive =  false;
+					this.rootStore.pushConnectionActive = false;
 					this.pushAutomaticReconnect();
-				}, false);
-			},
+				},
+				false,
+			);
+		},
 
-			/**
-			 * Close connection to server
-			 */
-			pushDisconnect (): void {
-				if (this.eventSource !== null) {
-					this.eventSource.close();
-					this.eventSource = null;
+		/**
+		 * Close connection to server
+		 */
+		pushDisconnect(): void {
+			if (this.eventSource !== null) {
+				this.eventSource.close();
+				this.eventSource = null;
 
-					this.rootStore.pushConnectionActive =  false;
-				}
-			},
+				this.rootStore.pushConnectionActive = false;
+			}
+		},
 
-			/**
-			 * Sometimes the push message is faster as the result from
-			 * the REST API so we do not know yet what execution ID
-			 * is currently active. So internally resend the message
-			 * a few more times
-			 *
-			 */
-			queuePushMessage (event: Event, retryAttempts: number) {
-				this.pushMessageQueue.push({ event, retriesLeft: retryAttempts });
+		/**
+		 * Sometimes the push message is faster as the result from
+		 * the REST API so we do not know yet what execution ID
+		 * is currently active. So internally resend the message
+		 * a few more times
+		 *
+		 */
+		queuePushMessage(event: Event, retryAttempts: number) {
+			this.pushMessageQueue.push({ event, retriesLeft: retryAttempts });
 
-				if (this.retryTimeout === null) {
-					this.retryTimeout = setTimeout(this.processWaitingPushMessages, 20);
-				}
-			},
+			if (this.retryTimeout === null) {
+				this.retryTimeout = setTimeout(this.processWaitingPushMessages, 20);
+			}
+		},
 
+		/**
+		 * Process the push messages which are waiting in the queue
+		 */
+		processWaitingPushMessages() {
+			if (this.retryTimeout !== null) {
+				clearTimeout(this.retryTimeout);
+				this.retryTimeout = null;
+			}
 
-			/**
-			 * Process the push messages which are waiting in the queue
-			 */
-			processWaitingPushMessages () {
-				if (this.retryTimeout !== null) {
-					clearTimeout(this.retryTimeout);
-					this.retryTimeout = null;
-				}
+			const queueLength = this.pushMessageQueue.length;
+			for (let i = 0; i < queueLength; i++) {
+				const messageData = this.pushMessageQueue.shift();
 
-				const queueLength = this.pushMessageQueue.length;
-				for (let i = 0; i < queueLength; i++) {
-					const messageData = this.pushMessageQueue.shift();
+				if (this.pushMessageReceived(messageData!.event, true) === false) {
+					// Was not successful
+					messageData!.retriesLeft -= 1;
 
-					if (this.pushMessageReceived(messageData!.event, true) === false) {
-						// Was not successful
-						messageData!.retriesLeft -= 1;
-
-						if (messageData!.retriesLeft > 0) {
-							// If still retries are left add it back and stop execution
-							this.pushMessageQueue.unshift(messageData!);
-						}
-						break;
+					if (messageData!.retriesLeft > 0) {
+						// If still retries are left add it back and stop execution
+						this.pushMessageQueue.unshift(messageData!);
 					}
+					break;
 				}
+			}
 
-				if (this.pushMessageQueue.length !== 0 && this.retryTimeout === null) {
-					this.retryTimeout = setTimeout(this.processWaitingPushMessages, 25);
+			if (this.pushMessageQueue.length !== 0 && this.retryTimeout === null) {
+				this.retryTimeout = setTimeout(this.processWaitingPushMessages, 25);
+			}
+		},
+
+		/**
+		 * Process a newly received message
+		 *
+		 * @param {Event} event The event data with the message data
+		 * @param {boolean} [isRetry] If it is a retry
+		 */
+		pushMessageReceived(event: Event, isRetry?: boolean): boolean {
+			const retryAttempts = 5;
+			let receivedData: IPushData;
+			try {
+				// @ts-ignore
+				receivedData = JSON.parse(event.data);
+			} catch (error) {
+				return false;
+			}
+
+			if (receivedData.type === 'sendConsoleMessage') {
+				const pushData = receivedData.data;
+				console.log(pushData.source, ...pushData.messages); // eslint-disable-line no-console
+				return true;
+			}
+
+			if (
+				!['testWebhookReceived'].includes(receivedData.type) &&
+				isRetry !== true &&
+				this.pushMessageQueue.length
+			) {
+				// If there are already messages in the queue add the new one that all of them
+				// get executed in order
+				this.queuePushMessage(event, retryAttempts);
+				return false;
+			}
+
+			if (receivedData.type === 'nodeExecuteAfter' || receivedData.type === 'nodeExecuteBefore') {
+				if (!this.uiStore.isActionActive('workflowRunning')) {
+					// No workflow is running so ignore the messages
+					return false;
 				}
-			},
+				const pushData = receivedData.data;
+				if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
+					// The data is not for the currently active execution or
+					// we do not have the execution id yet.
+					if (isRetry !== true) {
+						this.queuePushMessage(event, retryAttempts);
+					}
+					return false;
+				}
+			}
 
+			if (receivedData.type === 'executionFinished') {
+				// The workflow finished executing
+				const pushData = receivedData.data;
 
-			/**
-			 * Process a newly received message
-			 *
-			 * @param {Event} event The event data with the message data
-			 * @param {boolean} [isRetry] If it is a retry
-			 */
-			pushMessageReceived (event: Event, isRetry?: boolean): boolean {
-				const retryAttempts = 5;
-				let receivedData: IPushData;
-				try {
-					// @ts-ignore
-					receivedData = JSON.parse(event.data);
-				} catch (error) {
+				this.workflowsStore.finishActiveExecution(pushData);
+
+				if (!this.uiStore.isActionActive('workflowRunning')) {
+					// No workflow is running so ignore the messages
 					return false;
 				}
 
-				if (receivedData.type === 'sendConsoleMessage') {
-					const pushData = receivedData.data;
-					console.log(pushData.source, ...pushData.messages); // eslint-disable-line no-console
-					return true;
-				}
-
-				if (!['testWebhookReceived'].includes(receivedData.type) && isRetry !== true && this.pushMessageQueue.length) {
-					// If there are already messages in the queue add the new one that all of them
-					// get executed in order
-					this.queuePushMessage(event, retryAttempts);
+				if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
+					// The workflow which did finish execution did either not get started
+					// by this session or we do not have the execution id yet.
+					if (isRetry !== true) {
+						this.queuePushMessage(event, retryAttempts);
+					}
 					return false;
 				}
 
-				if (receivedData.type === 'nodeExecuteAfter' || receivedData.type === 'nodeExecuteBefore') {
-					if (!this.uiStore.isActionActive('workflowRunning')) {
-						// No workflow is running so ignore the messages
-						return false;
-					}
-					const pushData = receivedData.data;
-					if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
-						// The data is not for the currently active execution or
-						// we do not have the execution id yet.
-						if (isRetry !== true) {
-							this.queuePushMessage(event, retryAttempts);
-						}
-						return false;
-					}
-				}
+				const runDataExecuted = pushData.data;
 
-				if (receivedData.type === 'executionFinished') {
-					// The workflow finished executing
-					const pushData = receivedData.data;
+				const runDataExecutedErrorMessage = this.$getExecutionError(runDataExecuted.data);
 
-					this.workflowsStore.finishActiveExecution(pushData);
+				const lineNumber =
+					runDataExecuted &&
+					runDataExecuted.data &&
+					runDataExecuted.data.resultData &&
+					runDataExecuted.data.resultData.error &&
+					runDataExecuted.data.resultData.error.lineNumber;
 
-					if (!this.uiStore.isActionActive('workflowRunning')) {
-						// No workflow is running so ignore the messages
-						return false;
+				codeNodeEditorEventBus.$emit('error-line-number', lineNumber || 'final');
+
+				const workflow = this.getCurrentWorkflow();
+				if (runDataExecuted.waitTill !== undefined) {
+					const activeExecutionId = this.workflowsStore.activeExecutionId;
+					const workflowSettings = this.workflowsStore.workflowSettings;
+					const saveManualExecutions = this.rootStore.saveManualExecutions;
+
+					const isSavingExecutions =
+						workflowSettings.saveManualExecutions === undefined
+							? saveManualExecutions
+							: workflowSettings.saveManualExecutions;
+
+					let action;
+					if (!isSavingExecutions) {
+						this.$root.$emit('registerGlobalLinkAction', 'open-settings', async () => {
+							if (this.workflowsStore.isNewWorkflow) await this.saveAsNewWorkflow();
+							this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+						});
+
+						action =
+							'<a data-action="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
+					} else {
+						action = `<a href="/workflow/${workflow.id}/executions/${activeExecutionId}">View the execution</a> to see what happened after this node.`;
 					}
 
-					if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
-						// The workflow which did finish execution did either not get started
-						// by this session or we do not have the execution id yet.
-						if (isRetry !== true) {
-							this.queuePushMessage(event, retryAttempts);
-						}
-						return false;
+					// Workflow did start but had been put to wait
+					this.$titleSet(workflow.name as string, 'IDLE');
+					this.$showToast({
+						title: 'Workflow started waiting',
+						message: `${action} <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
+						type: 'success',
+						duration: 0,
+					});
+				} else if (runDataExecuted.finished !== true) {
+					this.$titleSet(workflow.name as string, 'ERROR');
+
+					if (
+						runDataExecuted.data.resultData.error?.name === 'ExpressionError' &&
+						(runDataExecuted.data.resultData.error as ExpressionError).context.functionality ===
+							'pairedItem'
+					) {
+						const error = runDataExecuted.data.resultData.error as ExpressionError;
+
+						this.getWorkflowDataToSave().then((workflowData) => {
+							const eventData: IDataObject = {
+								caused_by_credential: false,
+								error_message: error.description,
+								error_title: error.message,
+								error_type: error.context.type,
+								node_graph_string: JSON.stringify(
+									TelemetryHelpers.generateNodesGraph(
+										workflowData as IWorkflowBase,
+										this.getNodeTypes(),
+									).nodeGraph,
+								),
+								workflow_id: this.workflowsStore.workflowId,
+							};
+
+							if (
+								error.context.nodeCause &&
+								['no pairing info', 'invalid pairing info'].includes(error.context.type as string)
+							) {
+								const node = workflow.getNode(error.context.nodeCause as string);
+
+								if (node) {
+									eventData.is_pinned = !!workflow.getPinDataOfNode(node.name);
+									eventData.mode = node.parameters.mode;
+									eventData.node_type = node.type;
+									eventData.operation = node.parameters.operation;
+									eventData.resource = node.parameters.resource;
+								}
+							}
+
+							this.$telemetry.track('Instance FE emitted paired item error', eventData);
+						});
 					}
 
-					const runDataExecuted = pushData.data;
+					if (runDataExecuted.data.resultData.error?.name === 'SubworkflowOperationError') {
+						const error = runDataExecuted.data.resultData.error as SubworkflowOperationError;
 
-					const runDataExecutedErrorMessage = this.$getExecutionError(runDataExecuted.data);
+						this.workflowsStore.subWorkflowExecutionError = error;
 
-					const lineNumber = runDataExecuted &&
-						runDataExecuted.data &&
-						runDataExecuted.data.resultData &&
-						runDataExecuted.data.resultData.error &&
-						runDataExecuted.data.resultData.error.lineNumber;
-
-					codeNodeEditorEventBus.$emit('error-line-number', lineNumber || 'final');
-
-					const workflow = this.getCurrentWorkflow();
-					if (runDataExecuted.waitTill !== undefined) {
-						const activeExecutionId = this.workflowsStore.activeExecutionId;
-						const workflowSettings = this.workflowsStore.workflowSettings;
-						const saveManualExecutions = this.rootStore.saveManualExecutions;
-
-						const isSavingExecutions= workflowSettings.saveManualExecutions === undefined ? saveManualExecutions : workflowSettings.saveManualExecutions;
-
-						let action;
-						if (!isSavingExecutions) {
-							this.$root.$emit('registerGlobalLinkAction', 'open-settings', async () => {
-								if (this.workflowsStore.isNewWorkflow) await this.saveAsNewWorkflow();
-								this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
-							});
-
-							action = '<a data-action="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
-						}
-						else {
-							action = `<a href="/workflow/${workflow.id}/executions/${activeExecutionId}">View the execution</a> to see what happened after this node.`;
-						}
-
-						// Workflow did start but had been put to wait
-						this.$titleSet(workflow.name as string, 'IDLE');
-						this.$showToast({
-							title: 'Workflow started waiting',
-							message: `${action} <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
-							type: 'success',
+						this.$showMessage({
+							title: error.message,
+							message: error.description,
+							type: 'error',
 							duration: 0,
 						});
-					} else if (runDataExecuted.finished !== true) {
-						this.$titleSet(workflow.name as string, 'ERROR');
-
-						if (
-							runDataExecuted.data.resultData.error?.name === 'ExpressionError' &&
-							(runDataExecuted.data.resultData.error as ExpressionError).context.functionality === 'pairedItem'
-						) {
-							const error = runDataExecuted.data.resultData.error as ExpressionError;
-
-							this.getWorkflowDataToSave().then((workflowData) => {
-								const eventData: IDataObject = {
-									caused_by_credential: false,
-									error_message: error.description,
-									error_title: error.message,
-									error_type: error.context.type,
-									node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
-									workflow_id: this.workflowsStore.workflowId,
-								};
-
-								if (error.context.nodeCause && ['no pairing info', 'invalid pairing info'].includes(error.context.type as string)) {
-									const node = workflow.getNode(error.context.nodeCause as string);
-
-									if (node) {
-										eventData.is_pinned = !!workflow.getPinDataOfNode(node.name);
-										eventData.mode = node.parameters.mode;
-										eventData.node_type = node.type;
-										eventData.operation = node.parameters.operation;
-										eventData.resource = node.parameters.resource;
-									}
-								}
-
-								this.$telemetry.track('Instance FE emitted paired item error', eventData);
-							});
-
-						}
-
-						if (runDataExecuted.data.resultData.error?.name === 'SubworkflowOperationError') {
-							const error = runDataExecuted.data.resultData.error as SubworkflowOperationError;
-
-							this.workflowsStore.subWorkflowExecutionError =  error;
-
-							this.$showMessage({
-								title: error.message,
-								message: error.description,
-								type: 'error',
-								duration: 0,
-							});
-
-						} else {
-							let title: string;
-							if (runDataExecuted.data.resultData.lastNodeExecuted) {
-								title = `Problem in node ‘${runDataExecuted.data.resultData.lastNodeExecuted}‘`;
-							} else {
-								title = 'Problem executing workflow';
-							}
-
-							this.$showMessage({
-								title,
-								message: runDataExecutedErrorMessage,
-								type: 'error',
-								duration: 0,
-							});
-						}
-
 					} else {
-						// Workflow did execute without a problem
-						this.$titleSet(workflow.name as string, 'IDLE');
-
-						const execution = this.workflowsStore.getWorkflowExecution;
-						if (execution && execution.executedNode) {
-							const node = this.workflowsStore.getNodeByName(execution.executedNode);
-							const nodeType = node && this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-							const nodeOutput = execution && execution.executedNode && execution.data && execution.data.resultData && execution.data.resultData.runData && execution.data.resultData.runData[execution.executedNode];
-							if (node && nodeType && !nodeOutput) {
-								this.$showMessage({
-									title: this.$locale.baseText('pushConnection.pollingNode.dataNotFound', {
-										interpolate: {
-											service: getTriggerNodeServiceName(nodeType),
-										},
-									}),
-									message: this.$locale.baseText('pushConnection.pollingNode.dataNotFound.message', {
-										interpolate: {
-											service: getTriggerNodeServiceName(nodeType),
-										},
-									}),
-									type: 'success',
-								});
-							} else {
-								this.$showMessage({
-									title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
-									type: 'success',
-								});
-							}
+						let title: string;
+						if (runDataExecuted.data.resultData.lastNodeExecuted) {
+							title = `Problem in node ‘${runDataExecuted.data.resultData.lastNodeExecuted}‘`;
+						} else {
+							title = 'Problem executing workflow';
 						}
-						else {
+
+						this.$showMessage({
+							title,
+							message: runDataExecutedErrorMessage,
+							type: 'error',
+							duration: 0,
+						});
+					}
+				} else {
+					// Workflow did execute without a problem
+					this.$titleSet(workflow.name as string, 'IDLE');
+
+					const execution = this.workflowsStore.getWorkflowExecution;
+					if (execution && execution.executedNode) {
+						const node = this.workflowsStore.getNodeByName(execution.executedNode);
+						const nodeType = node && this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+						const nodeOutput =
+							execution &&
+							execution.executedNode &&
+							execution.data &&
+							execution.data.resultData &&
+							execution.data.resultData.runData &&
+							execution.data.resultData.runData[execution.executedNode];
+						if (node && nodeType && !nodeOutput) {
 							this.$showMessage({
-								title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
+								title: this.$locale.baseText('pushConnection.pollingNode.dataNotFound', {
+									interpolate: {
+										service: getTriggerNodeServiceName(nodeType),
+									},
+								}),
+								message: this.$locale.baseText('pushConnection.pollingNode.dataNotFound.message', {
+									interpolate: {
+										service: getTriggerNodeServiceName(nodeType),
+									},
+								}),
+								type: 'success',
+							});
+						} else {
+							this.$showMessage({
+								title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
 								type: 'success',
 							});
 						}
-					}
-
-					// It does not push the runData as it got already pushed with each
-					// node that did finish. For that reason copy in here the data
-					// which we already have.
-					if (this.workflowsStore.getWorkflowRunData) {
-						runDataExecuted.data.resultData.runData = this.workflowsStore.getWorkflowRunData;
-					}
-
-					this.workflowsStore.executingNode = null;
-					this.workflowsStore.setWorkflowExecutionData(runDataExecuted as IExecutionResponse);
-					this.uiStore.removeActiveAction('workflowRunning');
-
-					// Set the node execution issues on all the nodes which produced an error so that
-					// it can be displayed in the node-view
-					this.updateNodesExecutionIssues();
-
-					const lastNodeExecuted: string | undefined = runDataExecuted.data.resultData.lastNodeExecuted;
-					let itemsCount = 0;
-					if(lastNodeExecuted && runDataExecuted.data.resultData.runData[lastNodeExecuted as string] && !runDataExecutedErrorMessage) {
-						itemsCount = runDataExecuted.data.resultData.runData[lastNodeExecuted as string][0].data!.main[0]!.length;
-					}
-
-					this.$externalHooks().run('pushConnection.executionFinished', {
-						itemsCount,
-						nodeName: runDataExecuted.data.resultData.lastNodeExecuted,
-						errorMessage: runDataExecutedErrorMessage,
-						runDataExecutedStartData: runDataExecuted.data.startData,
-						resultDataError: runDataExecuted.data.resultData.error,
-					});
-
-				} else if (receivedData.type === 'executionStarted') {
-					const pushData = receivedData.data;
-
-					const executionData: IExecutionsCurrentSummaryExtended = {
-						id: pushData.executionId,
-						finished: false,
-						mode: pushData.mode,
-						startedAt: pushData.startedAt,
-						retryOf: pushData.retryOf,
-						workflowId: pushData.workflowId,
-						workflowName: pushData.workflowName,
-					};
-
-					this.workflowsStore.addActiveExecution(executionData);
-				} else if (receivedData.type === 'nodeExecuteAfter') {
-					// A node finished to execute. Add its data
-					const pushData = receivedData.data;
-					this.workflowsStore.addNodeExecutionData(pushData);
-				} else if (receivedData.type === 'nodeExecuteBefore') {
-					// A node started to be executed. Set it as executing.
-					const pushData = receivedData.data;
-					this.workflowsStore.executingNode = pushData.nodeName;
-				} else if (receivedData.type === 'testWebhookDeleted') {
-					// A test-webhook was deleted
-					const pushData = receivedData.data;
-
-					if (pushData.workflowId === this.workflowsStore.workflowId) {
-						this.workflowsStore.executionWaitingForWebhook = false;
-						this.uiStore.removeActiveAction('workflowRunning');
-					}
-				} else if (receivedData.type === 'testWebhookReceived') {
-					// A test-webhook did get called
-					const pushData = receivedData.data;
-
-					if (pushData.workflowId === this.workflowsStore.workflowId) {
-						this.workflowsStore.executionWaitingForWebhook = false;
-						this.workflowsStore.activeExecutionId = pushData.executionId;
-					}
-
-					this.processWaitingPushMessages();
-				} else if (receivedData.type === 'reloadNodeType') {
-					this.nodeTypesStore.getNodeTypes();
-					this.nodeTypesStore.getFullNodesProperties([receivedData.data]);
-				} else if (receivedData.type === 'removeNodeType') {
-					const pushData = receivedData.data;
-
-					const nodesToBeRemoved: INodeTypeNameVersion[] = [pushData];
-
-					// Force reload of all credential types
-					this.credentialsStore.fetchCredentialTypes(false)
-						.then(() => {
-							this.nodeTypesStore.removeNodeTypes(nodesToBeRemoved);
+					} else {
+						this.$showMessage({
+							title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
+							type: 'success',
 						});
+					}
 				}
-				return true;
-			},
+
+				// It does not push the runData as it got already pushed with each
+				// node that did finish. For that reason copy in here the data
+				// which we already have.
+				if (this.workflowsStore.getWorkflowRunData) {
+					runDataExecuted.data.resultData.runData = this.workflowsStore.getWorkflowRunData;
+				}
+
+				this.workflowsStore.executingNode = null;
+				this.workflowsStore.setWorkflowExecutionData(runDataExecuted as IExecutionResponse);
+				this.uiStore.removeActiveAction('workflowRunning');
+
+				// Set the node execution issues on all the nodes which produced an error so that
+				// it can be displayed in the node-view
+				this.updateNodesExecutionIssues();
+
+				const lastNodeExecuted: string | undefined =
+					runDataExecuted.data.resultData.lastNodeExecuted;
+				let itemsCount = 0;
+				if (
+					lastNodeExecuted &&
+					runDataExecuted.data.resultData.runData[lastNodeExecuted as string] &&
+					!runDataExecutedErrorMessage
+				) {
+					itemsCount =
+						runDataExecuted.data.resultData.runData[lastNodeExecuted as string][0].data!.main[0]!
+							.length;
+				}
+
+				this.$externalHooks().run('pushConnection.executionFinished', {
+					itemsCount,
+					nodeName: runDataExecuted.data.resultData.lastNodeExecuted,
+					errorMessage: runDataExecutedErrorMessage,
+					runDataExecutedStartData: runDataExecuted.data.startData,
+					resultDataError: runDataExecuted.data.resultData.error,
+				});
+			} else if (receivedData.type === 'executionStarted') {
+				const pushData = receivedData.data;
+
+				const executionData: IExecutionsCurrentSummaryExtended = {
+					id: pushData.executionId,
+					finished: false,
+					mode: pushData.mode,
+					startedAt: pushData.startedAt,
+					retryOf: pushData.retryOf,
+					workflowId: pushData.workflowId,
+					workflowName: pushData.workflowName,
+				};
+
+				this.workflowsStore.addActiveExecution(executionData);
+			} else if (receivedData.type === 'nodeExecuteAfter') {
+				// A node finished to execute. Add its data
+				const pushData = receivedData.data;
+				this.workflowsStore.addNodeExecutionData(pushData);
+			} else if (receivedData.type === 'nodeExecuteBefore') {
+				// A node started to be executed. Set it as executing.
+				const pushData = receivedData.data;
+				this.workflowsStore.executingNode = pushData.nodeName;
+			} else if (receivedData.type === 'testWebhookDeleted') {
+				// A test-webhook was deleted
+				const pushData = receivedData.data;
+
+				if (pushData.workflowId === this.workflowsStore.workflowId) {
+					this.workflowsStore.executionWaitingForWebhook = false;
+					this.uiStore.removeActiveAction('workflowRunning');
+				}
+			} else if (receivedData.type === 'testWebhookReceived') {
+				// A test-webhook did get called
+				const pushData = receivedData.data;
+
+				if (pushData.workflowId === this.workflowsStore.workflowId) {
+					this.workflowsStore.executionWaitingForWebhook = false;
+					this.workflowsStore.activeExecutionId = pushData.executionId;
+				}
+
+				this.processWaitingPushMessages();
+			} else if (receivedData.type === 'reloadNodeType') {
+				this.nodeTypesStore.getNodeTypes();
+				this.nodeTypesStore.getFullNodesProperties([receivedData.data]);
+			} else if (receivedData.type === 'removeNodeType') {
+				const pushData = receivedData.data;
+
+				const nodesToBeRemoved: INodeTypeNameVersion[] = [pushData];
+
+				// Force reload of all credential types
+				this.credentialsStore.fetchCredentialTypes(false).then(() => {
+					this.nodeTypesStore.removeNodeTypes(nodesToBeRemoved);
+				});
+			}
+			return true;
 		},
-	});
+	},
+});
diff --git a/packages/editor-ui/src/mixins/restApi.ts b/packages/editor-ui/src/mixins/restApi.ts
index 111cd81c48..c322f6f946 100644
--- a/packages/editor-ui/src/mixins/restApi.ts
+++ b/packages/editor-ui/src/mixins/restApi.ts
@@ -36,7 +36,7 @@ import { useRootStore } from '@/stores/n8nRootStore';
  *
  * @param {IExecutionFlattedResponse} fullExecutionData The data to unflatten
  */
-function unflattenExecutionData (fullExecutionData: IExecutionFlattedResponse): IExecutionResponse {
+function unflattenExecutionData(fullExecutionData: IExecutionFlattedResponse): IExecutionResponse {
 	// Unflatten the data
 	const returnData: IExecutionResponse = {
 		...fullExecutionData,
@@ -55,15 +55,18 @@ function unflattenExecutionData (fullExecutionData: IExecutionFlattedResponse):
 
 export const restApi = Vue.extend({
 	computed: {
-		...mapStores(
-			useRootStore,
-		),
+		...mapStores(useRootStore),
 	},
 	methods: {
-		restApi (): IRestApi {
+		restApi(): IRestApi {
 			const self = this;
 			return {
-				async makeRestApiRequest (method: Method, endpoint: string, data?: IDataObject): Promise<any> { // tslint:disable-line:no-any
+				async makeRestApiRequest(
+					method: Method,
+					endpoint: string,
+					data?: IDataObject,
+					// tslint:disable-next-line:no-any
+				): Promise<any> {
 					return makeRestApiRequest(self.rootStore.getRestApiContext, method, endpoint, data);
 				},
 				getActiveWorkflows: (): Promise<string[]> => {
@@ -82,11 +85,15 @@ export const restApi = Vue.extend({
 					return self.restApi().makeRestApiRequest('GET', `/executions-current`, sendData);
 				},
 				stopCurrentExecution: (executionId: string): Promise<IExecutionsStopData> => {
-					return self.restApi().makeRestApiRequest('POST', `/executions-current/${executionId}/stop`);
+					return self
+						.restApi()
+						.makeRestApiRequest('POST', `/executions-current/${executionId}/stop`);
 				},
 
 				getCredentialTranslation: (credentialType): Promise<object> => {
-					return self.restApi().makeRestApiRequest('GET', '/credential-translation', { credentialType });
+					return self
+						.restApi()
+						.makeRestApiRequest('GET', '/credential-translation', { credentialType });
 				},
 
 				// Removes a test webhook
@@ -105,8 +112,18 @@ export const restApi = Vue.extend({
 				},
 
 				// Updates an existing workflow
-				updateWorkflow: (id: string, data: IWorkflowDataUpdate, forceSave = false): Promise<IWorkflowDb> => {
-					return self.restApi().makeRestApiRequest('PATCH', `/workflows/${id}${forceSave ? '?forceSave=true' : ''}`, data);
+				updateWorkflow: (
+					id: string,
+					data: IWorkflowDataUpdate,
+					forceSave = false,
+				): Promise<IWorkflowDb> => {
+					return self
+						.restApi()
+						.makeRestApiRequest(
+							'PATCH',
+							`/workflows/${id}${forceSave ? '?forceSave=true' : ''}`,
+							data,
+						);
 				},
 
 				// Deletes a workflow
@@ -159,7 +176,12 @@ export const restApi = Vue.extend({
 
 				// Returns all saved executions
 				// TODO: For sure needs some kind of default filter like last day, with max 10 results, ...
-				getPastExecutions: (filter: object, limit: number, lastId?: string | number, firstId?: string | number): Promise<IExecutionsListResponse> => {
+				getPastExecutions: (
+					filter: object,
+					limit: number,
+					lastId?: string | number,
+					firstId?: string | number,
+				): Promise<IExecutionsListResponse> => {
 					let sendData = {};
 					if (filter) {
 						sendData = {
diff --git a/packages/editor-ui/src/mixins/showMessage.ts b/packages/editor-ui/src/mixins/showMessage.ts
index d8df3772a0..6edb2b99eb 100644
--- a/packages/editor-ui/src/mixins/showMessage.ts
+++ b/packages/editor-ui/src/mixins/showMessage.ts
@@ -3,7 +3,7 @@ import { ElNotificationComponent, ElNotificationOptions } from 'element-ui/types
 import mixins from 'vue-typed-mixins';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import {IExecuteContextData, IRunExecutionData} from 'n8n-workflow';
+import { IExecuteContextData, IRunExecutionData } from 'n8n-workflow';
 import type { ElMessageBoxOptions } from 'element-ui/types/message-box';
 import type { ElMessageComponent, ElMessageOptions, MessageType } from 'element-ui/types/message';
 import { sanitizeHtml } from '@/utils';
@@ -14,9 +14,7 @@ let stickyNotificationQueue: ElNotificationComponent[] = [];
 
 export const showMessage = mixins(externalHooks).extend({
 	computed: {
-		...mapStores(
-			useWorkflowsStore,
-		),
+		...mapStores(useWorkflowsStore),
 	},
 	methods: {
 		$showMessage(
@@ -24,7 +22,9 @@ export const showMessage = mixins(externalHooks).extend({
 			track = true,
 		) {
 			messageData.dangerouslyUseHTMLString = true;
-			messageData.message = messageData.message ? sanitizeHtml(messageData.message) : messageData.message;
+			messageData.message = messageData.message
+				? sanitizeHtml(messageData.message)
+				: messageData.message;
 
 			if (messageData.position === undefined) {
 				messageData.position = 'bottom-right';
@@ -49,15 +49,15 @@ export const showMessage = mixins(externalHooks).extend({
 		},
 
 		$showToast(config: {
-				title: string,
-				message: string,
-				onClick?: () => void,
-				onClose?: () => void,
-				duration?: number,
-				customClass?: string,
-				closeOnClick?: boolean,
-				type?: MessageType,
-			}) {
+			title: string;
+			message: string;
+			onClick?: () => void;
+			onClose?: () => void;
+			duration?: number;
+			customClass?: string;
+			closeOnClick?: boolean;
+			type?: MessageType;
+		}) {
 			// eslint-disable-next-line prefer-const
 			let notification: ElNotificationComponent;
 			if (config.closeOnClick) {
@@ -102,14 +102,10 @@ export const showMessage = mixins(externalHooks).extend({
 				if (error && error.message) {
 					let nodeName: string | undefined;
 					if ('node' in error) {
-						nodeName = typeof error.node === 'string'
-							? error.node
-							: error.node!.name;
+						nodeName = typeof error.node === 'string' ? error.node : error.node!.name;
 					}
 
-					const receivedError = nodeName
-						? `${nodeName}: ${error.message}`
-						: error.message;
+					const receivedError = nodeName ? `${nodeName}: ${error.message}` : error.message;
 					errorMessage = `There was a problem executing the workflow:<br /><strong>"${receivedError}"</strong>`;
 				}
 			}
@@ -120,15 +116,18 @@ export const showMessage = mixins(externalHooks).extend({
 		$showError(e: Error | unknown, title: string, message?: string) {
 			const error = e as Error;
 			const messageLine = message ? `${message}<br/>` : '';
-			this.$showMessage({
-				title,
-				message: `
+			this.$showMessage(
+				{
+					title,
+					message: `
 					${messageLine}
 					<i>${error.message}</i>
 					${this.collapsableDetails(error)}`,
-				type: 'error',
-				duration: 0,
-			}, false);
+					type: 'error',
+					duration: 0,
+				},
+				false,
+			);
 
 			this.$externalHooks().run('showMessage.showError', {
 				title,
@@ -145,9 +144,15 @@ export const showMessage = mixins(externalHooks).extend({
 			});
 		},
 
-		async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string): Promise<boolean> {
+		async confirmMessage(
+			message: string,
+			headline: string,
+			type: MessageType | null = 'warning',
+			confirmButtonText?: string,
+			cancelButtonText?: string,
+		): Promise<boolean> {
 			try {
-				const options: ElMessageBoxOptions  = {
+				const options: ElMessageBoxOptions = {
 					confirmButtonText: confirmButtonText || this.$locale.baseText('showMessage.ok'),
 					cancelButtonText: cancelButtonText || this.$locale.baseText('showMessage.cancel'),
 					dangerouslyUseHTMLString: true,
@@ -162,9 +167,16 @@ export const showMessage = mixins(externalHooks).extend({
 			}
 		},
 
-		async confirmModal (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string, showClose = false): Promise<string> {
+		async confirmModal(
+			message: string,
+			headline: string,
+			type: MessageType | null = 'warning',
+			confirmButtonText?: string,
+			cancelButtonText?: string,
+			showClose = false,
+		): Promise<string> {
 			try {
-				const options: ElMessageBoxOptions  = {
+				const options: ElMessageBoxOptions = {
 					confirmButtonText: confirmButtonText || this.$locale.baseText('showMessage.ok'),
 					cancelButtonText: cancelButtonText || this.$locale.baseText('showMessage.cancel'),
 					dangerouslyUseHTMLString: true,
@@ -195,9 +207,7 @@ export const showMessage = mixins(externalHooks).extend({
 			if (!description) return '';
 
 			const errorDescription =
-				description.length > 500
-					? `${description.slice(0, 500)}...`
-					: description;
+				description.length > 500 ? `${description.slice(0, 500)}...` : description;
 
 			return `
 				<br>
diff --git a/packages/editor-ui/src/mixins/titleChange.ts b/packages/editor-ui/src/mixins/titleChange.ts
index 0f7a0bd788..e779e50087 100644
--- a/packages/editor-ui/src/mixins/titleChange.ts
+++ b/packages/editor-ui/src/mixins/titleChange.ts
@@ -1,8 +1,6 @@
 import Vue from 'vue';
 
-import {
-	WorkflowTitleStatus,
-} from '../../Interface';
+import { WorkflowTitleStatus } from '../../Interface';
 
 export const titleChange = Vue.extend({
 	methods: {
@@ -26,6 +24,5 @@ export const titleChange = Vue.extend({
 		$titleReset() {
 			document.title = `n8n - Workflow Automation`;
 		},
-
 	},
 });
diff --git a/packages/editor-ui/src/mixins/userHelpers.ts b/packages/editor-ui/src/mixins/userHelpers.ts
index 6bc9893df7..3dd87b8ac4 100644
--- a/packages/editor-ui/src/mixins/userHelpers.ts
+++ b/packages/editor-ui/src/mixins/userHelpers.ts
@@ -7,7 +7,7 @@ import { Route } from 'vue-router';
 export const userHelpers = Vue.extend({
 	methods: {
 		canUserAccessRouteByName(name: string): boolean {
-			const {route} = this.$router.resolve({name});
+			const { route } = this.$router.resolve({ name });
 
 			return this.canUserAccessRoute(route);
 		},
diff --git a/packages/editor-ui/src/mixins/workflowActivate.ts b/packages/editor-ui/src/mixins/workflowActivate.ts
index 560cecd4b6..8b1024c75b 100644
--- a/packages/editor-ui/src/mixins/workflowActivate.ts
+++ b/packages/editor-ui/src/mixins/workflowActivate.ts
@@ -2,114 +2,122 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { showMessage } from '@/mixins/showMessage';
 
-
 import mixins from 'vue-typed-mixins';
-import { LOCAL_STORAGE_ACTIVATION_FLAG, PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_ACTIVE_MODAL_KEY } from '@/constants';
+import {
+	LOCAL_STORAGE_ACTIVATION_FLAG,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	WORKFLOW_ACTIVE_MODAL_KEY,
+} from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-export const workflowActivate = mixins(
-	externalHooks,
-	workflowHelpers,
-	showMessage,
-)
-	.extend({
-		data() {
-			return {
-				updatingWorkflowActivation: false,
-			};
+export const workflowActivate = mixins(externalHooks, workflowHelpers, showMessage).extend({
+	data() {
+		return {
+			updatingWorkflowActivation: false,
+		};
+	},
+	computed: {
+		...mapStores(useSettingsStore, useUIStore, useWorkflowsStore),
+	},
+	methods: {
+		async activateCurrentWorkflow(telemetrySource?: string) {
+			const workflowId = this.workflowsStore.workflowId;
+			return this.updateWorkflowActivation(workflowId, true, telemetrySource);
 		},
-		computed: {
-			...mapStores(
-				useSettingsStore,
-				useUIStore,
-				useWorkflowsStore,
-			),
-		},
-		methods: {
-			async activateCurrentWorkflow(telemetrySource?: string) {
-				const workflowId = this.workflowsStore.workflowId;
-				return this.updateWorkflowActivation(workflowId, true, telemetrySource);
-			},
-			async updateWorkflowActivation(workflowId: string | undefined, newActiveState: boolean, telemetrySource?: string) {
-				this.updatingWorkflowActivation = true;
-				const nodesIssuesExist = this.workflowsStore.nodesIssuesExist as boolean;
+		async updateWorkflowActivation(
+			workflowId: string | undefined,
+			newActiveState: boolean,
+			telemetrySource?: string,
+		) {
+			this.updatingWorkflowActivation = true;
+			const nodesIssuesExist = this.workflowsStore.nodesIssuesExist as boolean;
 
-				let currWorkflowId: string | undefined = workflowId;
-				if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-					const saved = await this.saveCurrentWorkflow();
-					if (!saved) {
-						this.updatingWorkflowActivation = false;
-						return;
-					}
-					currWorkflowId = this.workflowsStore.workflowId as string;
+			let currWorkflowId: string | undefined = workflowId;
+			if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				const saved = await this.saveCurrentWorkflow();
+				if (!saved) {
+					this.updatingWorkflowActivation = false;
+					return;
 				}
-				const isCurrentWorkflow = currWorkflowId === this.workflowsStore.workflowId;
+				currWorkflowId = this.workflowsStore.workflowId as string;
+			}
+			const isCurrentWorkflow = currWorkflowId === this.workflowsStore.workflowId;
 
-				const activeWorkflows =  this.workflowsStore.activeWorkflows;
-				const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
+			const activeWorkflows = this.workflowsStore.activeWorkflows;
+			const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
 
-				const telemetryPayload = {
-					workflow_id: currWorkflowId,
-					is_active: newActiveState,
-					previous_status: isWorkflowActive,
-					ndv_input: telemetrySource === 'ndv',
-				};
-				this.$telemetry.track('User set workflow active status', telemetryPayload);
-				this.$externalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
+			const telemetryPayload = {
+				workflow_id: currWorkflowId,
+				is_active: newActiveState,
+				previous_status: isWorkflowActive,
+				ndv_input: telemetrySource === 'ndv',
+			};
+			this.$telemetry.track('User set workflow active status', telemetryPayload);
+			this.$externalHooks().run('workflowActivate.updateWorkflowActivation', telemetryPayload);
 
-				try {
-					if (isWorkflowActive && newActiveState) {
-						this.$showMessage({
-							title: this.$locale.baseText('workflowActivator.workflowIsActive'),
-							type: 'success',
-						});
-						this.updatingWorkflowActivation = false;
+			try {
+				if (isWorkflowActive && newActiveState) {
+					this.$showMessage({
+						title: this.$locale.baseText('workflowActivator.workflowIsActive'),
+						type: 'success',
+					});
+					this.updatingWorkflowActivation = false;
 
-						return;
-					}
+					return;
+				}
 
-					if (isCurrentWorkflow && nodesIssuesExist) {
-						this.$showMessage({
-							title: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
-							message: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
-							type: 'error',
-						});
+				if (isCurrentWorkflow && nodesIssuesExist) {
+					this.$showMessage({
+						title: this.$locale.baseText(
+							'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title',
+						),
+						message: this.$locale.baseText(
+							'workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message',
+						),
+						type: 'error',
+					});
 
-						this.updatingWorkflowActivation = false;
-						return;
-					}
-
-					await this.updateWorkflow({workflowId: currWorkflowId, active: newActiveState});
-				} catch (error) {
-					const newStateName = newActiveState === true ? 'activated' : 'deactivated';
-					this.$showError(
-						error,
-						this.$locale.baseText(
-							'workflowActivator.showError.title',
-							{ interpolate: { newStateName } },
-						) + ':',
-					);
 					this.updatingWorkflowActivation = false;
 					return;
 				}
 
-				const activationEventName = isCurrentWorkflow ? 'workflow.activeChangeCurrent' : 'workflow.activeChange';
-				this.$externalHooks().run(activationEventName, { workflowId: currWorkflowId, active: newActiveState });
-
-				this.$emit('workflowActiveChanged', { id: currWorkflowId, active: newActiveState });
+				await this.updateWorkflow({ workflowId: currWorkflowId, active: newActiveState });
+			} catch (error) {
+				const newStateName = newActiveState === true ? 'activated' : 'deactivated';
+				this.$showError(
+					error,
+					this.$locale.baseText('workflowActivator.showError.title', {
+						interpolate: { newStateName },
+					}) + ':',
+				);
 				this.updatingWorkflowActivation = false;
+				return;
+			}
 
-				if (isCurrentWorkflow) {
-					if (newActiveState && window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG) !== 'true') {
-						this.uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
-					}
-					else {
-						this.settingsStore.fetchPromptsData();
-					}
+			const activationEventName = isCurrentWorkflow
+				? 'workflow.activeChangeCurrent'
+				: 'workflow.activeChange';
+			this.$externalHooks().run(activationEventName, {
+				workflowId: currWorkflowId,
+				active: newActiveState,
+			});
+
+			this.$emit('workflowActiveChanged', { id: currWorkflowId, active: newActiveState });
+			this.updatingWorkflowActivation = false;
+
+			if (isCurrentWorkflow) {
+				if (
+					newActiveState &&
+					window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG) !== 'true'
+				) {
+					this.uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
+				} else {
+					this.settingsStore.fetchPromptsData();
 				}
-			},
+			}
 		},
-	});
+	},
+});
diff --git a/packages/editor-ui/src/mixins/workflowHelpers.ts b/packages/editor-ui/src/mixins/workflowHelpers.ts
index d7f7cc282b..6a8f883d0a 100644
--- a/packages/editor-ui/src/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/mixins/workflowHelpers.ts
@@ -4,7 +4,8 @@ import {
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	START_NODE_TYPE,
 	WEBHOOK_NODE_TYPE,
-	VIEWS, EnterpriseEditionFeature,
+	VIEWS,
+	EnterpriseEditionFeature,
 } from '@/constants';
 
 import {
@@ -65,118 +66,128 @@ import { IWorkflowSettings } from 'n8n-workflow';
 import { useNDVStore } from '@/stores/ndv';
 import { useTemplatesStore } from '@/stores/templates';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
-import useWorkflowsEEStore from "@/stores/workflows.ee";
-import {useUsersStore} from "@/stores/users";
-import {ICredentialMap, ICredentialsResponse, IUsedCredential} from "@/Interface";
+import useWorkflowsEEStore from '@/stores/workflows.ee';
+import { useUsersStore } from '@/stores/users';
+import { ICredentialMap, ICredentialsResponse, IUsedCredential } from '@/Interface';
 
 let cachedWorkflowKey: string | null = '';
 let cachedWorkflow: Workflow | null = null;
 
-export const workflowHelpers = mixins(
-	externalHooks,
-	nodeHelpers,
-	restApi,
-	showMessage,
-)
-	.extend({
-		computed: {
-			...mapStores(
-				useNodeTypesStore,
-				useNDVStore,
-				useRootStore,
-				useTemplatesStore,
-				useWorkflowsStore,
-				useWorkflowsEEStore,
-				useUsersStore,
-				useUIStore,
-			),
+export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showMessage).extend({
+	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useRootStore,
+			useTemplatesStore,
+			useWorkflowsStore,
+			useWorkflowsEEStore,
+			useUsersStore,
+			useUIStore,
+		),
+	},
+	methods: {
+		executeData(
+			parentNode: string[],
+			currentNode: string,
+			inputName: string,
+			runIndex: number,
+		): IExecuteData {
+			const executeData = {
+				node: {},
+				data: {},
+				source: null,
+			} as IExecuteData;
+
+			if (parentNode.length) {
+				// Add the input data to be able to also resolve the short expression format
+				// which does not use the node name
+				const parentNodeName = parentNode[0];
+
+				const parentPinData = this.workflowsStore.getPinData![parentNodeName];
+
+				// populate `executeData` from `pinData`
+
+				if (parentPinData) {
+					executeData.data = { main: [parentPinData] };
+					executeData.source = { main: [{ previousNode: parentNodeName }] };
+
+					return executeData;
+				}
+
+				// populate `executeData` from `runData`
+
+				const workflowRunData = this.workflowsStore.getWorkflowRunData;
+				if (workflowRunData === null) {
+					return executeData;
+				}
+
+				if (
+					!workflowRunData[parentNodeName] ||
+					workflowRunData[parentNodeName].length <= runIndex ||
+					!workflowRunData[parentNodeName][runIndex] ||
+					!workflowRunData[parentNodeName][runIndex].hasOwnProperty('data') ||
+					workflowRunData[parentNodeName][runIndex].data === undefined ||
+					!workflowRunData[parentNodeName][runIndex].data!.hasOwnProperty(inputName)
+				) {
+					executeData.data = {};
+				} else {
+					executeData.data = workflowRunData[parentNodeName][runIndex].data!;
+					if (workflowRunData[currentNode] && workflowRunData[currentNode][runIndex]) {
+						executeData.source = {
+							[inputName]: workflowRunData[currentNode][runIndex].source!,
+						};
+					} else {
+						// The current node did not get executed in UI yet so build data manually
+						executeData.source = {
+							[inputName]: [
+								{
+									previousNode: parentNodeName,
+								},
+							],
+						};
+					}
+				}
+			}
+
+			return executeData;
 		},
-		methods: {
-			 executeData(parentNode: string[], currentNode: string, inputName: string, runIndex: number): IExecuteData {
-				const executeData = {
-					node: {},
-					data: {},
-					source: null,
-				} as IExecuteData;
+		// Returns connectionInputData to be able to execute an expression.
+		connectionInputData(
+			parentNode: string[],
+			currentNode: string,
+			inputName: string,
+			runIndex: number,
+			nodeConnection: INodeConnection = { sourceIndex: 0, destinationIndex: 0 },
+		): INodeExecutionData[] | null {
+			let connectionInputData: INodeExecutionData[] | null = null;
+			const executeData = this.executeData(parentNode, currentNode, inputName, runIndex);
+			if (parentNode.length) {
+				if (
+					!Object.keys(executeData.data).length ||
+					executeData.data[inputName].length <= nodeConnection.sourceIndex
+				) {
+					connectionInputData = [];
+				} else {
+					connectionInputData = executeData.data![inputName][nodeConnection.sourceIndex];
 
-				 if (parentNode.length) {
-					// Add the input data to be able to also resolve the short expression format
-					// which does not use the node name
-					const parentNodeName = parentNode[0];
-
-					const parentPinData = this.workflowsStore.getPinData![parentNodeName];
-
-					// populate `executeData` from `pinData`
-
-					if (parentPinData) {
-						executeData.data = { main: [parentPinData] };
-						executeData.source = { main: [{ previousNode: parentNodeName }] };
-
-						return executeData;
-					}
-
-					// populate `executeData` from `runData`
-
-					const workflowRunData = this.workflowsStore.getWorkflowRunData;
-					if (workflowRunData === null) {
-						return executeData;
-					}
-
-					if (!workflowRunData[parentNodeName] ||
-						workflowRunData[parentNodeName].length <= runIndex ||
-						!workflowRunData[parentNodeName][runIndex] ||
-						!workflowRunData[parentNodeName][runIndex].hasOwnProperty('data') ||
-						workflowRunData[parentNodeName][runIndex].data === undefined ||
-						!workflowRunData[parentNodeName][runIndex].data!.hasOwnProperty(inputName)
-					) {
-						executeData.data = {};
-					} else {
-						executeData.data = workflowRunData[parentNodeName][runIndex].data!;
-						if (workflowRunData[currentNode] && workflowRunData[currentNode][runIndex]) {
-							executeData.source = {
-								[inputName]: workflowRunData[currentNode][runIndex].source!,
+					if (connectionInputData !== null) {
+						// Update the pairedItem information on items
+						connectionInputData = connectionInputData.map((item, itemIndex) => {
+							return {
+								...item,
+								pairedItem: {
+									item: itemIndex,
+									input: nodeConnection.destinationIndex,
+								},
 							};
-						} else {
-							// The current node did not get executed in UI yet so build data manually
-							executeData.source = {
-								[inputName]: [
-									{
-										previousNode: parentNodeName,
-									},
-								],
-							};
-						}
+						});
 					}
 				}
+			}
 
-				return executeData;
-			},
-			// Returns connectionInputData to be able to execute an expression.
-			connectionInputData (parentNode: string[], currentNode: string, inputName: string, runIndex: number, nodeConnection: INodeConnection = { sourceIndex: 0,	destinationIndex: 0 }): INodeExecutionData[] | null {
-				let connectionInputData: INodeExecutionData[] | null = null;
-				const executeData = this.executeData(parentNode, currentNode, inputName, runIndex);
-				if (parentNode.length) {
-					if (!Object.keys(executeData.data).length || executeData.data[inputName].length <= nodeConnection.sourceIndex) {
-						connectionInputData = [];
-					} else {
-						connectionInputData = executeData.data![inputName][nodeConnection.sourceIndex];
-
-						if (connectionInputData !== null) {
-							// Update the pairedItem information on items
-							connectionInputData = connectionInputData.map((item, itemIndex) => {
-								return {
-									...item,
-									pairedItem: {
-										item: itemIndex,
-										input: nodeConnection.destinationIndex,
-									},
-								};
-							});
-						}
-					}
-				}
-
-				const parentPinData = parentNode.reduce((acc: INodeExecutionData[], parentNodeName, index) => {
+			const parentPinData = parentNode.reduce(
+				(acc: INodeExecutionData[], parentNodeName, index) => {
 					const pinData = this.workflowsStore.pinDataByNodeName(parentNodeName);
 
 					if (pinData) {
@@ -190,762 +201,867 @@ export const workflowHelpers = mixins(
 					}
 
 					return acc;
-				}, []);
+				},
+				[],
+			);
 
-				if (parentPinData.length > 0) {
-					if (connectionInputData && connectionInputData.length > 0) {
-						parentPinData.forEach((parentPinDataEntry) => {
-							connectionInputData![0].json = {
-								...connectionInputData![0].json,
-								...parentPinDataEntry.json,
-							};
-						});
-					} else {
-						connectionInputData = parentPinData;
-					}
-				}
-
-				return connectionInputData;
-			},
-
-			// Returns a shallow copy of the nodes which means that all the data on the lower
-			// levels still only gets referenced but the top level object is a different one.
-			// This has the advantage that it is very fast and does not cause problems with vuex
-			// when the workflow replaces the node-parameters.
-			getNodes (): INodeUi[] {
-				const nodes = this.workflowsStore.allNodes;
-				const returnNodes: INodeUi[] = [];
-
-				for (const node of nodes) {
-					returnNodes.push(Object.assign({}, node));
-				}
-
-				return returnNodes;
-			},
-
-			// Returns data about nodeTypes which have a "maxNodes" limit set.
-			// For each such type does it return how high the limit is, how many
-			// already exist and the name of this nodes.
-			getNodeTypesMaxCount (): INodeTypesMaxCount {
-				const nodes = this.workflowsStore.allNodes;
-
-				const returnData: INodeTypesMaxCount = {};
-
-				const nodeTypes = this.nodeTypesStore.allNodeTypes;
-				for (const nodeType of nodeTypes) {
-					if (nodeType.maxNodes !== undefined) {
-						returnData[nodeType.name] = {
-							exist: 0,
-							max: nodeType.maxNodes,
-							nodeNames: [],
+			if (parentPinData.length > 0) {
+				if (connectionInputData && connectionInputData.length > 0) {
+					parentPinData.forEach((parentPinDataEntry) => {
+						connectionInputData![0].json = {
+							...connectionInputData![0].json,
+							...parentPinDataEntry.json,
 						};
-					}
-				}
-
-				for (const node of nodes) {
-					if (returnData[node.type] !== undefined) {
-						returnData[node.type].exist += 1;
-						returnData[node.type].nodeNames.push(node.name);
-					}
-				}
-
-				return returnData;
-			},
-
-			// Returns how many nodes of the given type currently exist
-			getNodeTypeCount (nodeType: string): number {
-				const nodes = this.workflowsStore.allNodes;
-
-				let count = 0;
-
-				for (const node of nodes) {
-					if (node.type === nodeType) {
-						count++;
-					}
-				}
-
-				return count;
-			},
-
-			// Checks if everything in the workflow is complete and ready to be executed
-			checkReadyForExecution (workflow: Workflow, lastNodeName?: string) {
-				let node: INode;
-				let nodeType: INodeType | undefined;
-				let nodeIssues: INodeIssues | null = null;
-				const workflowIssues: IWorkflowIssues = {};
-
-				let checkNodes = Object.keys(workflow.nodes);
-				if (lastNodeName) {
-					checkNodes = workflow.getParentNodes(lastNodeName);
-					checkNodes.push(lastNodeName);
+					});
 				} else {
-					// As webhook nodes always take precedence check first
-					// if there are any
-					let checkWebhook: string[] = [];
-					for (const nodeName of Object.keys(workflow.nodes)) {
-						if (workflow.nodes[nodeName].disabled !== true && workflow.nodes[nodeName].type === WEBHOOK_NODE_TYPE) {
-							checkWebhook = [nodeName, ...checkWebhook, ...workflow.getChildNodes(nodeName)];
-						}
-					}
+					connectionInputData = parentPinData;
+				}
+			}
 
-					if (checkWebhook.length) {
-						checkNodes = checkWebhook;
-					} else {
-						// If no webhook nodes got found try to find another trigger node
-						const startNode = workflow.getStartNode();
-						if (startNode !== undefined) {
-							checkNodes = workflow.getChildNodes(startNode.name);
-							checkNodes.push(startNode.name);
-						}
+			return connectionInputData;
+		},
+
+		// Returns a shallow copy of the nodes which means that all the data on the lower
+		// levels still only gets referenced but the top level object is a different one.
+		// This has the advantage that it is very fast and does not cause problems with vuex
+		// when the workflow replaces the node-parameters.
+		getNodes(): INodeUi[] {
+			const nodes = this.workflowsStore.allNodes;
+			const returnNodes: INodeUi[] = [];
+
+			for (const node of nodes) {
+				returnNodes.push(Object.assign({}, node));
+			}
+
+			return returnNodes;
+		},
+
+		// Returns data about nodeTypes which have a "maxNodes" limit set.
+		// For each such type does it return how high the limit is, how many
+		// already exist and the name of this nodes.
+		getNodeTypesMaxCount(): INodeTypesMaxCount {
+			const nodes = this.workflowsStore.allNodes;
+
+			const returnData: INodeTypesMaxCount = {};
+
+			const nodeTypes = this.nodeTypesStore.allNodeTypes;
+			for (const nodeType of nodeTypes) {
+				if (nodeType.maxNodes !== undefined) {
+					returnData[nodeType.name] = {
+						exist: 0,
+						max: nodeType.maxNodes,
+						nodeNames: [],
+					};
+				}
+			}
+
+			for (const node of nodes) {
+				if (returnData[node.type] !== undefined) {
+					returnData[node.type].exist += 1;
+					returnData[node.type].nodeNames.push(node.name);
+				}
+			}
+
+			return returnData;
+		},
+
+		// Returns how many nodes of the given type currently exist
+		getNodeTypeCount(nodeType: string): number {
+			const nodes = this.workflowsStore.allNodes;
+
+			let count = 0;
+
+			for (const node of nodes) {
+				if (node.type === nodeType) {
+					count++;
+				}
+			}
+
+			return count;
+		},
+
+		// Checks if everything in the workflow is complete and ready to be executed
+		checkReadyForExecution(workflow: Workflow, lastNodeName?: string) {
+			let node: INode;
+			let nodeType: INodeType | undefined;
+			let nodeIssues: INodeIssues | null = null;
+			const workflowIssues: IWorkflowIssues = {};
+
+			let checkNodes = Object.keys(workflow.nodes);
+			if (lastNodeName) {
+				checkNodes = workflow.getParentNodes(lastNodeName);
+				checkNodes.push(lastNodeName);
+			} else {
+				// As webhook nodes always take precedence check first
+				// if there are any
+				let checkWebhook: string[] = [];
+				for (const nodeName of Object.keys(workflow.nodes)) {
+					if (
+						workflow.nodes[nodeName].disabled !== true &&
+						workflow.nodes[nodeName].type === WEBHOOK_NODE_TYPE
+					) {
+						checkWebhook = [nodeName, ...checkWebhook, ...workflow.getChildNodes(nodeName)];
 					}
 				}
 
-				for (const nodeName of checkNodes) {
-					nodeIssues = null;
-					node = workflow.nodes[nodeName];
-
-					if (node.disabled === true) {
-						// Ignore issues on disabled nodes
-						continue;
-					}
-
-					nodeType = workflow.nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
-
-					if (nodeType === undefined) {
-						// Node type is not known
-						nodeIssues = {
-							typeUnknown: true,
-						};
-					} else {
-						nodeIssues = this.getNodeIssues(nodeType.description, node, ['execution']);
-					}
-
-					if (nodeIssues !== null) {
-						workflowIssues[node.name] = nodeIssues;
-					}
-				}
-
-				if (Object.keys(workflowIssues).length === 0) {
-					return null;
-				}
-
-				return workflowIssues;
-			},
-
-			getNodeTypes (): INodeTypes {
-				const nodeTypes: INodeTypes = {
-					nodeTypes: {},
-					init: async (nodeTypes?: INodeTypeData): Promise<void> => { },
-					getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
-						const nodeTypeDescription = this.nodeTypesStore.getNodeType(nodeType, version);
-
-						if (nodeTypeDescription === null) {
-							return undefined;
-						}
-
-						return {
-							description: nodeTypeDescription,
-							// As we do not have the trigger/poll functions available in the frontend
-							// we use the information available to figure out what are trigger nodes
-							// @ts-ignore
-							trigger: ![ERROR_TRIGGER_NODE_TYPE, START_NODE_TYPE].includes(nodeType) && nodeTypeDescription.inputs.length === 0 && !nodeTypeDescription.webhooks || undefined,
-						};
-					},
-				};
-
-				return nodeTypes;
-			},
-
-			getCurrentWorkflow(copyData?: boolean): Workflow {
-				const nodes = this.getNodes();
-				const connections = this.workflowsStore.allConnections;
-				const cacheKey = JSON.stringify({nodes, connections});
-				if (!copyData && cachedWorkflow && cacheKey === cachedWorkflowKey) {
-					return cachedWorkflow;
-				}
-				cachedWorkflowKey = cacheKey;
-
-				return this.getWorkflow(nodes, connections, copyData);
-			},
-
-			// Returns a workflow instance.
-			getWorkflow (nodes: INodeUi[], connections: IConnections, copyData?: boolean): Workflow {
-				const nodeTypes = this.getNodeTypes();
-				let workflowId : string | undefined = this.workflowsStore.workflowId;
-				if (workflowId && workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-					workflowId = undefined;
-				}
-
-				const workflowName = this.workflowsStore.workflowName;
-
-				cachedWorkflow = new Workflow({
-					id: workflowId,
-					name: workflowName,
-					nodes: copyData ? deepCopy(nodes) : nodes,
-					connections: copyData? deepCopy(connections): connections,
-					active: false,
-					nodeTypes,
-					settings: this.workflowsStore.workflowSettings,
-					pinData: this.workflowsStore.pinData,
-				});
-
-				return cachedWorkflow;
-			},
-
-			// Returns the currently loaded workflow as JSON.
-			getWorkflowDataToSave (): Promise<IWorkflowData> {
-				const workflowNodes = this.workflowsStore.allNodes;
-				const workflowConnections = this.workflowsStore.allConnections;
-
-				let nodeData;
-
-				const nodes = [];
-				for (let nodeIndex = 0; nodeIndex < workflowNodes.length; nodeIndex++) {
-					try {
-						// @ts-ignore
-						nodeData = this.getNodeDataToSave(workflowNodes[nodeIndex]);
-					} catch (e) {
-						return Promise.reject(e);
-					}
-
-					nodes.push(nodeData);
-				}
-
-				const data: IWorkflowData = {
-					name: this.workflowsStore.workflowName,
-					nodes,
-					pinData: this.workflowsStore.getPinData,
-					connections: workflowConnections,
-					active: this.workflowsStore.isWorkflowActive,
-					settings: this.workflowsStore.workflow.settings,
-					tags: this.workflowsStore.workflowTags,
-					versionId: this.workflowsStore.workflow.versionId,
-				};
-
-				const workflowId = this.workflowsStore.workflowId;
-				if (workflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-					data.id = workflowId;
-				}
-
-				return Promise.resolve(data);
-			},
-
-			// Returns all node-types
-			getNodeDataToSave (node: INodeUi): INodeUi {
-				const skipKeys = [
-					'color',
-					'continueOnFail',
-					'credentials',
-					'disabled',
-					'issues',
-					'notes',
-					'parameters',
-					'status',
-				];
-
-				// @ts-ignore
-				const nodeData: INodeUi = {
-					parameters: {},
-				};
-
-				for (const key in node) {
-					if (key.charAt(0) !== '_' && skipKeys.indexOf(key) === -1) {
-						// @ts-ignore
-						nodeData[key] = node[key];
-					}
-				}
-
-				// Get the data of the node type that we can get the default values
-				// TODO: Later also has to care about the node-type-version as defaults could be different
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-
-				if (nodeType !== null) {
-					// Node-Type is known so we can save the parameters correctly
-
-					const nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, false, false, node);
-					nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
-
-					// Add the node credentials if there are some set and if they should be displayed
-					if (node.credentials !== undefined && nodeType.credentials !== undefined) {
-						const saveCredentials: INodeCredentials = {};
-						for (const nodeCredentialTypeName of Object.keys(node.credentials)) {
-							if (this.hasProxyAuth(node) || Object.keys(node.parameters).includes('genericAuthType')) {
-								saveCredentials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
-								continue;
-							}
-
-							const credentialTypeDescription = nodeType.credentials
-								// filter out credentials with same name in different node versions
-								.filter((c) => this.displayParameter(node.parameters, c, '', node))
-								.find((c) => c.name === nodeCredentialTypeName);
-
-							if (credentialTypeDescription === undefined) {
-								// Credential type is not know so do not save
-								continue;
-							}
-
-							if (this.displayParameter(node.parameters, credentialTypeDescription, '', node) === false) {
-								// Credential should not be displayed so do also not save
-								continue;
-							}
-
-							saveCredentials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
-						}
-
-						// Set credential property only if it has content
-						if (Object.keys(saveCredentials).length !== 0) {
-							nodeData.credentials = saveCredentials;
-						}
-					}
+				if (checkWebhook.length) {
+					checkNodes = checkWebhook;
 				} else {
-					// Node-Type is not known so save the data as it is
-					nodeData.credentials = node.credentials;
-					nodeData.parameters = node.parameters;
-					if (nodeData.color !== undefined) {
-						nodeData.color = node.color;
+					// If no webhook nodes got found try to find another trigger node
+					const startNode = workflow.getStartNode();
+					if (startNode !== undefined) {
+						checkNodes = workflow.getChildNodes(startNode.name);
+						checkNodes.push(startNode.name);
 					}
 				}
+			}
+
+			for (const nodeName of checkNodes) {
+				nodeIssues = null;
+				node = workflow.nodes[nodeName];
 
-				// Save the disabled property and continueOnFail only when is set
 				if (node.disabled === true) {
-					nodeData.disabled = true;
-				}
-				if (node.continueOnFail === true) {
-					nodeData.continueOnFail = true;
+					// Ignore issues on disabled nodes
+					continue;
 				}
 
-				// Save the notes only if when they contain data
-				if (![undefined, ''].includes(node.notes)) {
-					nodeData.notes = node.notes;
-				}
+				nodeType = workflow.nodeTypes.getByNameAndVersion(node.type, node.typeVersion);
 
-				return nodeData;
-			},
-
-			getWebhookExpressionValue (webhookData: IWebhookDescription, key: string): string {
-				if (webhookData[key] === undefined) {
-					return 'empty';
-				}
-				try {
-					return this.resolveExpression(webhookData[key] as string) as string;
-				} catch (e) {
-					return this.$locale.baseText('nodeWebhooks.invalidExpression');
-				}
-			},
-
-			getWebhookUrl (webhookData: IWebhookDescription, node: INode, showUrlFor?: string): string {
-				if (webhookData.restartWebhook === true) {
-					return '$execution.resumeUrl';
-				}
-				let baseUrl = this.rootStore.getWebhookUrl;
-				if (showUrlFor === 'test') {
-					baseUrl = this.rootStore.getWebhookTestUrl;
-				}
-
-				const workflowId = this.workflowsStore.workflowId;
-				const path = this.getWebhookExpressionValue(webhookData, 'path');
-				const isFullPath = this.getWebhookExpressionValue(webhookData, 'isFullPath') as unknown as boolean || false;
-
-				return NodeHelpers.getNodeWebhookUrl(baseUrl, workflowId, node, path, isFullPath);
-			},
-
-
-			resolveParameter(parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[], opts: {targetItem?: TargetItem, inputNodeName?: string, inputRunIndex?: number, inputBranchIndex?: number} = {}): IDataObject | null {
-				let itemIndex = opts?.targetItem?.itemIndex || 0;
-
-				const inputName = 'main';
-				const activeNode = this.ndvStore.activeNode;
-				const workflow = this.getCurrentWorkflow();
-				const workflowRunData = this.workflowsStore.getWorkflowRunData;
-				let parentNode = workflow.getParentNodes(activeNode?.name, inputName, 1);
-				const executionData = this.workflowsStore.getWorkflowExecution;
-
-				if (opts?.inputNodeName && !parentNode.includes(opts.inputNodeName)) {
-					return null;
-				}
-
-				let runIndexParent = opts?.inputRunIndex ?? 0;
-				const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]);
-				if (opts.targetItem && opts?.targetItem?.nodeName === activeNode.name && executionData) {
-					const sourceItems = getSourceItems(executionData, opts.targetItem);
-					if (!sourceItems.length) {
-						return null;
-					}
-					parentNode = [sourceItems[0].nodeName];
-					runIndexParent = sourceItems[0].runIndex;
-					itemIndex = sourceItems[0].itemIndex;
-					if (nodeConnection) {
-						nodeConnection.sourceIndex = sourceItems[0].outputIndex;
-					}
-				} else {
-					parentNode = opts.inputNodeName ? [opts.inputNodeName] : parentNode;
-					if (nodeConnection) {
-						nodeConnection.sourceIndex = opts.inputBranchIndex ?? nodeConnection.sourceIndex;
-					}
-
-					if (opts?.inputRunIndex === undefined && workflowRunData !== null && parentNode.length) {
-						const firstParentWithWorkflowRunData = parentNode.find((parentNodeName) => workflowRunData[parentNodeName]);
-						if (firstParentWithWorkflowRunData) {
-							runIndexParent = workflowRunData[firstParentWithWorkflowRunData].length - 1;
-						}
-					}
-				}
-
-				let connectionInputData = this.connectionInputData(parentNode, activeNode.name, inputName, runIndexParent, nodeConnection);
-
-				let runExecutionData: IRunExecutionData;
-				if (executionData === null || !executionData.data) {
-					runExecutionData = {
-						resultData: {
-							runData: {},
-						},
+				if (nodeType === undefined) {
+					// Node type is not known
+					nodeIssues = {
+						typeUnknown: true,
 					};
 				} else {
-					runExecutionData = executionData.data;
+					nodeIssues = this.getNodeIssues(nodeType.description, node, ['execution']);
 				}
 
-				parentNode.forEach((parentNodeName) => {
-					const pinData: IPinData[string] = this.workflowsStore.pinDataByNodeName(parentNodeName);
+				if (nodeIssues !== null) {
+					workflowIssues[node.name] = nodeIssues;
+				}
+			}
 
-					if (pinData) {
-						runExecutionData = {
-							...runExecutionData,
-							resultData: {
-								...runExecutionData.resultData,
-								runData: {
-									...runExecutionData.resultData.runData,
-									[parentNodeName]: [
-										{
-											startTime: new Date().valueOf(),
-											executionTime: 0,
-											source: [],
-											data: {
-												main: [
-													pinData.map((data) => ({ json: data })),
-												],
-											},
-										},
-									],
-								},
-							},
-						};
+			if (Object.keys(workflowIssues).length === 0) {
+				return null;
+			}
+
+			return workflowIssues;
+		},
+
+		getNodeTypes(): INodeTypes {
+			const nodeTypes: INodeTypes = {
+				nodeTypes: {},
+				init: async (nodeTypes?: INodeTypeData): Promise<void> => {},
+				getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
+					const nodeTypeDescription = this.nodeTypesStore.getNodeType(nodeType, version);
+
+					if (nodeTypeDescription === null) {
+						return undefined;
 					}
-				});
 
-				if (connectionInputData === null) {
-					connectionInputData = [];
-				}
+					return {
+						description: nodeTypeDescription,
+						// As we do not have the trigger/poll functions available in the frontend
+						// we use the information available to figure out what are trigger nodes
+						// @ts-ignore
+						trigger:
+							(![ERROR_TRIGGER_NODE_TYPE, START_NODE_TYPE].includes(nodeType) &&
+								nodeTypeDescription.inputs.length === 0 &&
+								!nodeTypeDescription.webhooks) ||
+							undefined,
+					};
+				},
+			};
 
-				const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
-					$execution: {
-						id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-						mode: 'test',
-						resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-					},
+			return nodeTypes;
+		},
 
-					// deprecated
-					$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-					$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-				};
+		getCurrentWorkflow(copyData?: boolean): Workflow {
+			const nodes = this.getNodes();
+			const connections = this.workflowsStore.allConnections;
+			const cacheKey = JSON.stringify({ nodes, connections });
+			if (!copyData && cachedWorkflow && cacheKey === cachedWorkflowKey) {
+				return cachedWorkflow;
+			}
+			cachedWorkflowKey = cacheKey;
 
-				let runIndexCurrent = opts?.targetItem?.runIndex ?? 0;
-				if (opts?.targetItem === undefined && workflowRunData !== null && workflowRunData[activeNode.name]) {
-					runIndexCurrent = workflowRunData[activeNode.name].length -1;
-				}
-				const executeData = this.executeData(parentNode, activeNode.name, inputName, runIndexCurrent);
+			return this.getWorkflow(nodes, connections, copyData);
+		},
 
-				return workflow.expression.getParameterValue(parameter, runExecutionData, runIndexCurrent, itemIndex, activeNode.name, connectionInputData, 'manual', this.rootStore.timezone, additionalKeys, executeData, false) as IDataObject;
-			},
+		// Returns a workflow instance.
+		getWorkflow(nodes: INodeUi[], connections: IConnections, copyData?: boolean): Workflow {
+			const nodeTypes = this.getNodeTypes();
+			let workflowId: string | undefined = this.workflowsStore.workflowId;
+			if (workflowId && workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				workflowId = undefined;
+			}
 
-			resolveExpression(expression: string, siblingParameters: INodeParameters = {}, opts: {targetItem?: TargetItem, inputNodeName?: string, inputRunIndex?: number, inputBranchIndex?: number, c?: number} = {}) {
-				const parameters = {
-					'__xxxxxxx__': expression,
-					...siblingParameters,
-				};
-				const returnData: IDataObject | null = this.resolveParameter(parameters, opts);
-				if (!returnData) {
-					return null;
-				}
+			const workflowName = this.workflowsStore.workflowName;
 
-				if (typeof returnData['__xxxxxxx__'] === 'object') {
-					const workflow = this.getCurrentWorkflow();
-					return workflow.expression.convertObjectValueToString(returnData['__xxxxxxx__'] as object);
-				}
-				return returnData['__xxxxxxx__'];
-			},
+			cachedWorkflow = new Workflow({
+				id: workflowId,
+				name: workflowName,
+				nodes: copyData ? deepCopy(nodes) : nodes,
+				connections: copyData ? deepCopy(connections) : connections,
+				active: false,
+				nodeTypes,
+				settings: this.workflowsStore.workflowSettings,
+				pinData: this.workflowsStore.pinData,
+			});
 
-			async updateWorkflow({workflowId, active}: {workflowId: string, active?: boolean}) {
-				let data: IWorkflowDataUpdate = {};
+			return cachedWorkflow;
+		},
 
-				const isCurrentWorkflow = workflowId === this.workflowsStore.workflowId;
-				if (isCurrentWorkflow) {
-					data = await this.getWorkflowDataToSave();
-				} else {
-					const { versionId } = await this.restApi().getWorkflow(workflowId);
-					data.versionId = versionId;
-				}
+		// Returns the currently loaded workflow as JSON.
+		getWorkflowDataToSave(): Promise<IWorkflowData> {
+			const workflowNodes = this.workflowsStore.allNodes;
+			const workflowConnections = this.workflowsStore.allConnections;
 
-				if (active !== undefined) {
-					data.active = active;
-				}
+			let nodeData;
 
-				const workflow = await this.restApi().updateWorkflow(workflowId, data);
-				this.workflowsStore.setWorkflowVersionId(workflow.versionId);
-
-				if (isCurrentWorkflow) {
-					this.workflowsStore.setActive(!!workflow.active);
-					this.uiStore.stateIsDirty = false;
-				}
-
-				if (workflow.active) {
-					this.workflowsStore.setWorkflowActive(workflowId);
-				} else {
-					this.workflowsStore.setWorkflowInactive(workflowId);
-				}
-			},
-
-			async saveCurrentWorkflow({id, name, tags}: {id?: string, name?: string, tags?: string[]} = {}, redirect = true, forceSave = false): Promise<boolean> {
-				const currentWorkflow = id ||  this.$route.params.name;
-
-				if (!currentWorkflow || ['new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(currentWorkflow)) {
-					return this.saveAsNewWorkflow({name, tags}, redirect);
-				}
-
-				// Workflow exists already so update it
+			const nodes = [];
+			for (let nodeIndex = 0; nodeIndex < workflowNodes.length; nodeIndex++) {
 				try {
-					this.uiStore.addActiveAction('workflowSaving');
+					// @ts-ignore
+					nodeData = this.getNodeDataToSave(workflowNodes[nodeIndex]);
+				} catch (e) {
+					return Promise.reject(e);
+				}
 
-					const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
+				nodes.push(nodeData);
+			}
 
-					if (name) {
-						workflowDataRequest.name = name.trim();
-					}
+			const data: IWorkflowData = {
+				name: this.workflowsStore.workflowName,
+				nodes,
+				pinData: this.workflowsStore.getPinData,
+				connections: workflowConnections,
+				active: this.workflowsStore.isWorkflowActive,
+				settings: this.workflowsStore.workflow.settings,
+				tags: this.workflowsStore.workflowTags,
+				versionId: this.workflowsStore.workflow.versionId,
+			};
 
-					if (tags) {
-						workflowDataRequest.tags = tags;
-					}
+			const workflowId = this.workflowsStore.workflowId;
+			if (workflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				data.id = workflowId;
+			}
 
-					workflowDataRequest.versionId = this.workflowsStore.workflowVersionId;
+			return Promise.resolve(data);
+		},
 
-					const workflowData = await this.restApi().updateWorkflow(currentWorkflow, workflowDataRequest, forceSave);
-					this.workflowsStore.setWorkflowVersionId(workflowData.versionId);
+		// Returns all node-types
+		getNodeDataToSave(node: INodeUi): INodeUi {
+			const skipKeys = [
+				'color',
+				'continueOnFail',
+				'credentials',
+				'disabled',
+				'issues',
+				'notes',
+				'parameters',
+				'status',
+			];
 
-					if (name) {
-						this.workflowsStore.setWorkflowName({newName: workflowData.name, setStateDirty:  false});
-					}
+			// @ts-ignore
+			const nodeData: INodeUi = {
+				parameters: {},
+			};
 
-					if (tags) {
-						const createdTags = (workflowData.tags || []) as ITag[];
-						const tagIds = createdTags.map((tag: ITag): string => tag.id);
-						this.workflowsStore.setWorkflowTagIds(tagIds);
-					}
+			for (const key in node) {
+				if (key.charAt(0) !== '_' && skipKeys.indexOf(key) === -1) {
+					// @ts-ignore
+					nodeData[key] = node[key];
+				}
+			}
 
-					this.uiStore.stateIsDirty = false;
-					this.uiStore.removeActiveAction('workflowSaving');
-					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+			// Get the data of the node type that we can get the default values
+			// TODO: Later also has to care about the node-type-version as defaults could be different
+			const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
-					return true;
-				} catch (error) {
-					this.uiStore.removeActiveAction('workflowSaving');
+			if (nodeType !== null) {
+				// Node-Type is known so we can save the parameters correctly
 
-					if (error.errorCode === 100) {
-						const overwrite = await this.confirmMessage(
-							this.$locale.baseText('workflows.concurrentChanges.confirmMessage.message'),
-							this.$locale.baseText('workflows.concurrentChanges.confirmMessage.title'),
-							null,
-							this.$locale.baseText('workflows.concurrentChanges.confirmMessage.confirmButtonText'),
-							this.$locale.baseText('workflows.concurrentChanges.confirmMessage.cancelButtonText'),
-						);
+				const nodeParameters = NodeHelpers.getNodeParameters(
+					nodeType.properties,
+					node.parameters,
+					false,
+					false,
+					node,
+				);
+				nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
 
-						if (overwrite) {
-							return this.saveCurrentWorkflow({id, name, tags}, redirect, true);
+				// Add the node credentials if there are some set and if they should be displayed
+				if (node.credentials !== undefined && nodeType.credentials !== undefined) {
+					const saveCredentials: INodeCredentials = {};
+					for (const nodeCredentialTypeName of Object.keys(node.credentials)) {
+						if (
+							this.hasProxyAuth(node) ||
+							Object.keys(node.parameters).includes('genericAuthType')
+						) {
+							saveCredentials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
+							continue;
 						}
 
-						return false;
+						const credentialTypeDescription = nodeType.credentials
+							// filter out credentials with same name in different node versions
+							.filter((c) => this.displayParameter(node.parameters, c, '', node))
+							.find((c) => c.name === nodeCredentialTypeName);
+
+						if (credentialTypeDescription === undefined) {
+							// Credential type is not know so do not save
+							continue;
+						}
+
+						if (
+							this.displayParameter(node.parameters, credentialTypeDescription, '', node) === false
+						) {
+							// Credential should not be displayed so do also not save
+							continue;
+						}
+
+						saveCredentials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
 					}
 
-					this.$showMessage({
-						title: this.$locale.baseText('workflowHelpers.showMessage.title'),
-						message: error.message,
-						type: 'error',
-					});
-
-					return false;
+					// Set credential property only if it has content
+					if (Object.keys(saveCredentials).length !== 0) {
+						nodeData.credentials = saveCredentials;
+					}
 				}
-			},
+			} else {
+				// Node-Type is not known so save the data as it is
+				nodeData.credentials = node.credentials;
+				nodeData.parameters = node.parameters;
+				if (nodeData.color !== undefined) {
+					nodeData.color = node.color;
+				}
+			}
 
-			async saveAsNewWorkflow ({ name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow, data }: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean, data?: IWorkflowDataUpdate} = {}, redirect = true): Promise<boolean> {
-				try {
-					this.uiStore.addActiveAction('workflowSaving');
+			// Save the disabled property and continueOnFail only when is set
+			if (node.disabled === true) {
+				nodeData.disabled = true;
+			}
+			if (node.continueOnFail === true) {
+				nodeData.continueOnFail = true;
+			}
 
-					const workflowDataRequest: IWorkflowDataUpdate = data || await this.getWorkflowDataToSave();
-					// make sure that the new ones are not active
-					workflowDataRequest.active = false;
-					const changedNodes = {} as IDataObject;
+			// Save the notes only if when they contain data
+			if (![undefined, ''].includes(node.notes)) {
+				nodeData.notes = node.notes;
+			}
 
-					if (resetNodeIds) {
-						workflowDataRequest.nodes = workflowDataRequest.nodes!.map(node => {
-							node.id = uuid();
+			return nodeData;
+		},
 
-							return node;
-						});
+		getWebhookExpressionValue(webhookData: IWebhookDescription, key: string): string {
+			if (webhookData[key] === undefined) {
+				return 'empty';
+			}
+			try {
+				return this.resolveExpression(webhookData[key] as string) as string;
+			} catch (e) {
+				return this.$locale.baseText('nodeWebhooks.invalidExpression');
+			}
+		},
+
+		getWebhookUrl(webhookData: IWebhookDescription, node: INode, showUrlFor?: string): string {
+			if (webhookData.restartWebhook === true) {
+				return '$execution.resumeUrl';
+			}
+			let baseUrl = this.rootStore.getWebhookUrl;
+			if (showUrlFor === 'test') {
+				baseUrl = this.rootStore.getWebhookTestUrl;
+			}
+
+			const workflowId = this.workflowsStore.workflowId;
+			const path = this.getWebhookExpressionValue(webhookData, 'path');
+			const isFullPath =
+				(this.getWebhookExpressionValue(webhookData, 'isFullPath') as unknown as boolean) || false;
+
+			return NodeHelpers.getNodeWebhookUrl(baseUrl, workflowId, node, path, isFullPath);
+		},
+
+		resolveParameter(
+			parameter: NodeParameterValue | INodeParameters | NodeParameterValue[] | INodeParameters[],
+			opts: {
+				targetItem?: TargetItem;
+				inputNodeName?: string;
+				inputRunIndex?: number;
+				inputBranchIndex?: number;
+			} = {},
+		): IDataObject | null {
+			let itemIndex = opts?.targetItem?.itemIndex || 0;
+
+			const inputName = 'main';
+			const activeNode = this.ndvStore.activeNode;
+			const workflow = this.getCurrentWorkflow();
+			const workflowRunData = this.workflowsStore.getWorkflowRunData;
+			let parentNode = workflow.getParentNodes(activeNode?.name, inputName, 1);
+			const executionData = this.workflowsStore.getWorkflowExecution;
+
+			if (opts?.inputNodeName && !parentNode.includes(opts.inputNodeName)) {
+				return null;
+			}
+
+			let runIndexParent = opts?.inputRunIndex ?? 0;
+			const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]);
+			if (opts.targetItem && opts?.targetItem?.nodeName === activeNode.name && executionData) {
+				const sourceItems = getSourceItems(executionData, opts.targetItem);
+				if (!sourceItems.length) {
+					return null;
+				}
+				parentNode = [sourceItems[0].nodeName];
+				runIndexParent = sourceItems[0].runIndex;
+				itemIndex = sourceItems[0].itemIndex;
+				if (nodeConnection) {
+					nodeConnection.sourceIndex = sourceItems[0].outputIndex;
+				}
+			} else {
+				parentNode = opts.inputNodeName ? [opts.inputNodeName] : parentNode;
+				if (nodeConnection) {
+					nodeConnection.sourceIndex = opts.inputBranchIndex ?? nodeConnection.sourceIndex;
+				}
+
+				if (opts?.inputRunIndex === undefined && workflowRunData !== null && parentNode.length) {
+					const firstParentWithWorkflowRunData = parentNode.find(
+						(parentNodeName) => workflowRunData[parentNodeName],
+					);
+					if (firstParentWithWorkflowRunData) {
+						runIndexParent = workflowRunData[firstParentWithWorkflowRunData].length - 1;
 					}
+				}
+			}
 
-					if (resetWebhookUrls) {
-						workflowDataRequest.nodes = workflowDataRequest.nodes!.map(node => {
-							if (node.webhookId) {
-								node.webhookId = uuid();
-								changedNodes[node.name] = node.webhookId;
-							}
-							return node;
-						});
-					}
+			let connectionInputData = this.connectionInputData(
+				parentNode,
+				activeNode.name,
+				inputName,
+				runIndexParent,
+				nodeConnection,
+			);
 
-					if (name) {
-						workflowDataRequest.name = name.trim();
-					}
+			let runExecutionData: IRunExecutionData;
+			if (executionData === null || !executionData.data) {
+				runExecutionData = {
+					resultData: {
+						runData: {},
+					},
+				};
+			} else {
+				runExecutionData = executionData.data;
+			}
 
-					if (tags) {
-						workflowDataRequest.tags = tags;
-					}
-					const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
+			parentNode.forEach((parentNodeName) => {
+				const pinData: IPinData[string] = this.workflowsStore.pinDataByNodeName(parentNodeName);
 
-					this.workflowsStore.addWorkflow(workflowData);
-					this.workflowsStore.setWorkflowVersionId(workflowData.versionId);
+				if (pinData) {
+					runExecutionData = {
+						...runExecutionData,
+						resultData: {
+							...runExecutionData.resultData,
+							runData: {
+								...runExecutionData.resultData.runData,
+								[parentNodeName]: [
+									{
+										startTime: new Date().valueOf(),
+										executionTime: 0,
+										source: [],
+										data: {
+											main: [pinData.map((data) => ({ json: data }))],
+										},
+									},
+								],
+							},
+						},
+					};
+				}
+			});
 
-					if (this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing) && this.usersStore.currentUser) {
-						this.workflowsEEStore.setWorkflowOwnedBy({ workflowId: workflowData.id, ownedBy: this.usersStore.currentUser });
-					}
+			if (connectionInputData === null) {
+				connectionInputData = [];
+			}
 
-					if (openInNewWindow) {
-						const routeData = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: workflowData.id}});
-						window.open(routeData.href, '_blank');
-						this.uiStore.removeActiveAction('workflowSaving');
-						return true;
-					}
+			const additionalKeys: IWorkflowDataProxyAdditionalKeys = {
+				$execution: {
+					id: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+					mode: 'test',
+					resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+				},
 
-					this.workflowsStore.setActive(workflowData.active || false);
-					this.workflowsStore.setWorkflowId(workflowData.id);
-					this.workflowsStore.setWorkflowName({newName: workflowData.name, setStateDirty: false});
-					this.workflowsStore.setWorkflowSettings(workflowData.settings as IWorkflowSettings|| {});
-					this.uiStore.stateIsDirty = false;
-					Object.keys(changedNodes).forEach((nodeName) => {
-						const changes = {
-							key: 'webhookId',
-							value: changedNodes[nodeName],
-							name: nodeName,
-						};
-						this.workflowsStore.setNodeValue(changes);
-					});
+				// deprecated
+				$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+				$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+			};
 
+			let runIndexCurrent = opts?.targetItem?.runIndex ?? 0;
+			if (
+				opts?.targetItem === undefined &&
+				workflowRunData !== null &&
+				workflowRunData[activeNode.name]
+			) {
+				runIndexCurrent = workflowRunData[activeNode.name].length - 1;
+			}
+			const executeData = this.executeData(parentNode, activeNode.name, inputName, runIndexCurrent);
+
+			return workflow.expression.getParameterValue(
+				parameter,
+				runExecutionData,
+				runIndexCurrent,
+				itemIndex,
+				activeNode.name,
+				connectionInputData,
+				'manual',
+				this.rootStore.timezone,
+				additionalKeys,
+				executeData,
+				false,
+			) as IDataObject;
+		},
+
+		resolveExpression(
+			expression: string,
+			siblingParameters: INodeParameters = {},
+			opts: {
+				targetItem?: TargetItem;
+				inputNodeName?: string;
+				inputRunIndex?: number;
+				inputBranchIndex?: number;
+				c?: number;
+			} = {},
+		) {
+			const parameters = {
+				__xxxxxxx__: expression,
+				...siblingParameters,
+			};
+			const returnData: IDataObject | null = this.resolveParameter(parameters, opts);
+			if (!returnData) {
+				return null;
+			}
+
+			if (typeof returnData['__xxxxxxx__'] === 'object') {
+				const workflow = this.getCurrentWorkflow();
+				return workflow.expression.convertObjectValueToString(returnData['__xxxxxxx__'] as object);
+			}
+			return returnData['__xxxxxxx__'];
+		},
+
+		async updateWorkflow({ workflowId, active }: { workflowId: string; active?: boolean }) {
+			let data: IWorkflowDataUpdate = {};
+
+			const isCurrentWorkflow = workflowId === this.workflowsStore.workflowId;
+			if (isCurrentWorkflow) {
+				data = await this.getWorkflowDataToSave();
+			} else {
+				const { versionId } = await this.restApi().getWorkflow(workflowId);
+				data.versionId = versionId;
+			}
+
+			if (active !== undefined) {
+				data.active = active;
+			}
+
+			const workflow = await this.restApi().updateWorkflow(workflowId, data);
+			this.workflowsStore.setWorkflowVersionId(workflow.versionId);
+
+			if (isCurrentWorkflow) {
+				this.workflowsStore.setActive(!!workflow.active);
+				this.uiStore.stateIsDirty = false;
+			}
+
+			if (workflow.active) {
+				this.workflowsStore.setWorkflowActive(workflowId);
+			} else {
+				this.workflowsStore.setWorkflowInactive(workflowId);
+			}
+		},
+
+		async saveCurrentWorkflow(
+			{ id, name, tags }: { id?: string; name?: string; tags?: string[] } = {},
+			redirect = true,
+			forceSave = false,
+		): Promise<boolean> {
+			const currentWorkflow = id || this.$route.params.name;
+
+			if (!currentWorkflow || ['new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(currentWorkflow)) {
+				return this.saveAsNewWorkflow({ name, tags }, redirect);
+			}
+
+			// Workflow exists already so update it
+			try {
+				this.uiStore.addActiveAction('workflowSaving');
+
+				const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
+
+				if (name) {
+					workflowDataRequest.name = name.trim();
+				}
+
+				if (tags) {
+					workflowDataRequest.tags = tags;
+				}
+
+				workflowDataRequest.versionId = this.workflowsStore.workflowVersionId;
+
+				const workflowData = await this.restApi().updateWorkflow(
+					currentWorkflow,
+					workflowDataRequest,
+					forceSave,
+				);
+				this.workflowsStore.setWorkflowVersionId(workflowData.versionId);
+
+				if (name) {
+					this.workflowsStore.setWorkflowName({ newName: workflowData.name, setStateDirty: false });
+				}
+
+				if (tags) {
 					const createdTags = (workflowData.tags || []) as ITag[];
 					const tagIds = createdTags.map((tag: ITag): string => tag.id);
 					this.workflowsStore.setWorkflowTagIds(tagIds);
+				}
 
-					const templateId = this.$route.query.templateId;
-					if (templateId) {
-						this.$telemetry.track('User saved new workflow from template', {
-							template_id: templateId,
-							workflow_id: workflowData.id,
-							wf_template_repo_session_id: this.templatesStore.previousSessionId,
-						});
+				this.uiStore.stateIsDirty = false;
+				this.uiStore.removeActiveAction('workflowSaving');
+				this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+
+				return true;
+			} catch (error) {
+				this.uiStore.removeActiveAction('workflowSaving');
+
+				if (error.errorCode === 100) {
+					const overwrite = await this.confirmMessage(
+						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.message'),
+						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.title'),
+						null,
+						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.confirmButtonText'),
+						this.$locale.baseText('workflows.concurrentChanges.confirmMessage.cancelButtonText'),
+					);
+
+					if (overwrite) {
+						return this.saveCurrentWorkflow({ id, name, tags }, redirect, true);
 					}
 
-					if (redirect) {
-						this.$router.replace({
-							name: VIEWS.WORKFLOW,
-							params: { name: workflowData.id as string, action: 'workflowSave' },
-						});
-					}
-
-					this.uiStore.removeActiveAction('workflowSaving');
-					this.uiStore.stateIsDirty = false;
-					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
-
-					this.getCurrentWorkflow(true); // refresh cache
-					return true;
-				} catch (e) {
-					this.uiStore.removeActiveAction('workflowSaving');
-
-					this.$showMessage({
-						title: this.$locale.baseText('workflowHelpers.showMessage.title'),
-						message: (e as Error).message,
-						type: 'error',
-					});
-
 					return false;
 				}
-			},
 
-			// Updates the position of all the nodes that the top-left node
-			// is at the given position
-			updateNodePositions (workflowData: IWorkflowData | IWorkflowDataUpdate, position: XYPosition): void {
-				if (workflowData.nodes === undefined) {
+				this.$showMessage({
+					title: this.$locale.baseText('workflowHelpers.showMessage.title'),
+					message: error.message,
+					type: 'error',
+				});
+
+				return false;
+			}
+		},
+
+		async saveAsNewWorkflow(
+			{
+				name,
+				tags,
+				resetWebhookUrls,
+				resetNodeIds,
+				openInNewWindow,
+				data,
+			}: {
+				name?: string;
+				tags?: string[];
+				resetWebhookUrls?: boolean;
+				openInNewWindow?: boolean;
+				resetNodeIds?: boolean;
+				data?: IWorkflowDataUpdate;
+			} = {},
+			redirect = true,
+		): Promise<boolean> {
+			try {
+				this.uiStore.addActiveAction('workflowSaving');
+
+				const workflowDataRequest: IWorkflowDataUpdate =
+					data || (await this.getWorkflowDataToSave());
+				// make sure that the new ones are not active
+				workflowDataRequest.active = false;
+				const changedNodes = {} as IDataObject;
+
+				if (resetNodeIds) {
+					workflowDataRequest.nodes = workflowDataRequest.nodes!.map((node) => {
+						node.id = uuid();
+
+						return node;
+					});
+				}
+
+				if (resetWebhookUrls) {
+					workflowDataRequest.nodes = workflowDataRequest.nodes!.map((node) => {
+						if (node.webhookId) {
+							node.webhookId = uuid();
+							changedNodes[node.name] = node.webhookId;
+						}
+						return node;
+					});
+				}
+
+				if (name) {
+					workflowDataRequest.name = name.trim();
+				}
+
+				if (tags) {
+					workflowDataRequest.tags = tags;
+				}
+				const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
+
+				this.workflowsStore.addWorkflow(workflowData);
+				this.workflowsStore.setWorkflowVersionId(workflowData.versionId);
+
+				if (
+					this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing) &&
+					this.usersStore.currentUser
+				) {
+					this.workflowsEEStore.setWorkflowOwnedBy({
+						workflowId: workflowData.id,
+						ownedBy: this.usersStore.currentUser,
+					});
+				}
+
+				if (openInNewWindow) {
+					const routeData = this.$router.resolve({
+						name: VIEWS.WORKFLOW,
+						params: { name: workflowData.id },
+					});
+					window.open(routeData.href, '_blank');
+					this.uiStore.removeActiveAction('workflowSaving');
+					return true;
+				}
+
+				this.workflowsStore.setActive(workflowData.active || false);
+				this.workflowsStore.setWorkflowId(workflowData.id);
+				this.workflowsStore.setWorkflowName({ newName: workflowData.name, setStateDirty: false });
+				this.workflowsStore.setWorkflowSettings((workflowData.settings as IWorkflowSettings) || {});
+				this.uiStore.stateIsDirty = false;
+				Object.keys(changedNodes).forEach((nodeName) => {
+					const changes = {
+						key: 'webhookId',
+						value: changedNodes[nodeName],
+						name: nodeName,
+					};
+					this.workflowsStore.setNodeValue(changes);
+				});
+
+				const createdTags = (workflowData.tags || []) as ITag[];
+				const tagIds = createdTags.map((tag: ITag): string => tag.id);
+				this.workflowsStore.setWorkflowTagIds(tagIds);
+
+				const templateId = this.$route.query.templateId;
+				if (templateId) {
+					this.$telemetry.track('User saved new workflow from template', {
+						template_id: templateId,
+						workflow_id: workflowData.id,
+						wf_template_repo_session_id: this.templatesStore.previousSessionId,
+					});
+				}
+
+				if (redirect) {
+					this.$router.replace({
+						name: VIEWS.WORKFLOW,
+						params: { name: workflowData.id as string, action: 'workflowSave' },
+					});
+				}
+
+				this.uiStore.removeActiveAction('workflowSaving');
+				this.uiStore.stateIsDirty = false;
+				this.$externalHooks().run('workflow.afterUpdate', { workflowData });
+
+				this.getCurrentWorkflow(true); // refresh cache
+				return true;
+			} catch (e) {
+				this.uiStore.removeActiveAction('workflowSaving');
+
+				this.$showMessage({
+					title: this.$locale.baseText('workflowHelpers.showMessage.title'),
+					message: (e as Error).message,
+					type: 'error',
+				});
+
+				return false;
+			}
+		},
+
+		// Updates the position of all the nodes that the top-left node
+		// is at the given position
+		updateNodePositions(
+			workflowData: IWorkflowData | IWorkflowDataUpdate,
+			position: XYPosition,
+		): void {
+			if (workflowData.nodes === undefined) {
+				return;
+			}
+
+			// Find most top-left node
+			const minPosition = [99999999, 99999999];
+			for (const node of workflowData.nodes) {
+				if (node.position[1] < minPosition[1]) {
+					minPosition[0] = node.position[0];
+					minPosition[1] = node.position[1];
+				} else if (node.position[1] === minPosition[1]) {
+					if (node.position[0] < minPosition[0]) {
+						minPosition[0] = node.position[0];
+						minPosition[1] = node.position[1];
+					}
+				}
+			}
+
+			// Update the position on all nodes so that the
+			// most top-left one is at given position
+			const offsetPosition = [position[0] - minPosition[0], position[1] - minPosition[1]];
+			for (const node of workflowData.nodes) {
+				node.position[0] += offsetPosition[0];
+				node.position[1] += offsetPosition[1];
+			}
+		},
+		async dataHasChanged(id: string) {
+			const currentData = await this.getWorkflowDataToSave();
+
+			const data: IWorkflowDb = await this.restApi().getWorkflow(id);
+
+			if (data !== undefined) {
+				const x = {
+					nodes: data.nodes,
+					connections: data.connections,
+					settings: data.settings,
+					name: data.name,
+				};
+				const y = {
+					nodes: currentData.nodes,
+					connections: currentData.connections,
+					settings: currentData.settings,
+					name: currentData.name,
+				};
+				return !isEqual(x, y);
+			}
+
+			return true;
+		},
+
+		removeForeignCredentialsFromWorkflow(
+			workflow: IWorkflowData | IWorkflowDataUpdate,
+			usableCredentials: ICredentialsResponse[],
+		): void {
+			workflow.nodes.forEach((node: INode) => {
+				if (!node.credentials) {
 					return;
 				}
 
-				// Find most top-left node
-				const minPosition = [99999999, 99999999];
-				for (const node of workflowData.nodes) {
-					if (node.position[1] < minPosition[1]) {
-						minPosition[0] = node.position[0];
-						minPosition[1] = node.position[1];
-					} else if (node.position[1] === minPosition[1]) {
-						if (node.position[0] < minPosition[0]) {
-							minPosition[0] = node.position[0];
-							minPosition[1] = node.position[1];
+				node.credentials = Object.entries(node.credentials).reduce<INodeCredentials>(
+					(acc, [credentialType, credential]) => {
+						const isUsableCredential = usableCredentials.some(
+							(ownCredential) => `${ownCredential.id}` === `${credential.id}`,
+						);
+						if (credential.id && isUsableCredential) {
+							acc[credentialType] = node.credentials![credentialType];
 						}
-					}
-				}
 
-				// Update the position on all nodes so that the
-				// most top-left one is at given position
-				const offsetPosition = [position[0] - minPosition[0], position[1] - minPosition[1]];
-				for (const node of workflowData.nodes) {
-					node.position[0] += offsetPosition[0];
-					node.position[1] += offsetPosition[1];
-				}
-			},
-			async dataHasChanged(id: string) {
-				const currentData = await this.getWorkflowDataToSave();
-
-				const data: IWorkflowDb = await this.restApi().getWorkflow(id);
-
-				if(data !== undefined) {
-					const x = {
-						nodes: data.nodes,
-						connections: data.connections,
-						settings: data.settings,
-						name: data.name,
-					};
-					const y = {
-						nodes: currentData.nodes,
-						connections: currentData.connections,
-						settings: currentData.settings,
-						name: currentData.name,
-					};
-					return !isEqual(x, y);
-				}
-
-				return true;
-			},
-
-			removeForeignCredentialsFromWorkflow(workflow: IWorkflowData | IWorkflowDataUpdate, usableCredentials: ICredentialsResponse[]): void {
-			 	workflow.nodes.forEach((node: INode) => {
-					if (!node.credentials) {
-						return;
-					}
-
-					node.credentials = Object.entries(node.credentials)
-						.reduce<INodeCredentials>((acc, [credentialType, credential]) => {
-							const isUsableCredential = usableCredentials.some((ownCredential) => `${ownCredential.id}` === `${credential.id}`);
-							if (credential.id && isUsableCredential) {
-								acc[credentialType] = node.credentials![credentialType];
-							}
-
-							return acc;
-						}, {});
-				});
-			},
+						return acc;
+					},
+					{},
+				);
+			});
 		},
-	});
+	},
+});
diff --git a/packages/editor-ui/src/mixins/workflowRun.ts b/packages/editor-ui/src/mixins/workflowRun.ts
index 7e81e4f080..80a5a137b0 100644
--- a/packages/editor-ui/src/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/mixins/workflowRun.ts
@@ -1,8 +1,4 @@
-import {
-	IExecutionPushResponse,
-	IExecutionResponse,
-	IStartRunData,
-} from '@/Interface';
+import { IExecutionPushResponse, IExecutionResponse, IStartRunData } from '@/Interface';
 
 import {
 	IRunData,
@@ -32,21 +28,15 @@ export const workflowRun = mixins(
 	titleChange,
 ).extend({
 	computed: {
-		...mapStores(
-			useRootStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useRootStore, useUIStore, useWorkflowsStore),
 	},
 	methods: {
 		// Starts to executes a workflow on server.
-		async runWorkflowApi (runData: IStartRunData): Promise<IExecutionPushResponse> {
+		async runWorkflowApi(runData: IStartRunData): Promise<IExecutionPushResponse> {
 			if (this.rootStore.pushConnectionActive === false) {
 				// Do not start if the connection to server is not active
 				// because then it can not receive the data as it executes.
-				throw new Error(
-					this.$locale.baseText('workflowRun.noActiveConnectionToTheServer'),
-				);
+				throw new Error(this.$locale.baseText('workflowRun.noActiveConnectionToTheServer'));
 			}
 
 			this.workflowsStore.subWorkflowExecutionError = null;
@@ -72,7 +62,10 @@ export const workflowRun = mixins(
 
 			return response;
 		},
-		async runWorkflow (nodeName?: string, source?: string): Promise<IExecutionPushResponse | undefined> {
+		async runWorkflow(
+			nodeName?: string,
+			source?: string,
+		): Promise<IExecutionPushResponse | undefined> {
 			const workflow = this.getCurrentWorkflow();
 
 			if (this.uiStore.isActionActive('workflowRunning')) {
@@ -134,7 +127,12 @@ export const workflowRun = mixins(
 								workflow_id: workflow.id,
 								workflow_name: workflow.name,
 								execution_type: nodeName ? 'node' : 'workflow',
-								node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
+								node_graph_string: JSON.stringify(
+									TelemetryHelpers.generateNodesGraph(
+										workflowData as IWorkflowBase,
+										this.getNodeTypes(),
+									).nodeGraph,
+								),
 								error_node_types: JSON.stringify(trackErrorNodeTypes),
 								errors: JSON.stringify(trackNodeIssues),
 							});
@@ -245,13 +243,10 @@ export const workflowRun = mixins(
 
 				this.$externalHooks().run('workflowRun.runWorkflow', { nodeName, source });
 
-				 return runWorkflowApiResponse;
+				return runWorkflowApiResponse;
 			} catch (error) {
 				this.$titleSet(workflow.name as string, 'ERROR');
-				this.$showError(
-					error,
-					this.$locale.baseText('workflowRun.showError.title'),
-				);
+				this.$showError(error, this.$locale.baseText('workflowRun.showError.title'));
 				return undefined;
 			}
 		},
diff --git a/packages/editor-ui/src/models/history.ts b/packages/editor-ui/src/models/history.ts
index 641aa9503b..2afaf117f9 100644
--- a/packages/editor-ui/src/models/history.ts
+++ b/packages/editor-ui/src/models/history.ts
@@ -1,7 +1,7 @@
 import { INodeUi } from '@/Interface';
 import { IConnection } from 'n8n-workflow';
-import Vue from "vue";
-import { XYPosition } from "../Interface";
+import Vue from 'vue';
+import { XYPosition } from '../Interface';
 
 // Command names don't serve any particular purpose in the app
 // but they make it easier to identify each command on stack
@@ -22,13 +22,13 @@ export enum COMMANDS {
 // (0 is usually enough but leaving this just in case)
 const CANVAS_ACTION_TIMEOUT = 10;
 
-export abstract class Undoable { }
+export abstract class Undoable {}
 
 export abstract class Command extends Undoable {
 	readonly name: string;
 	eventBus: Vue;
 
-	constructor (name: string, eventBus: Vue) {
+	constructor(name: string, eventBus: Vue) {
 		super();
 		this.name = name;
 		this.eventBus = eventBus;
@@ -41,7 +41,7 @@ export abstract class Command extends Undoable {
 export class BulkCommand extends Undoable {
 	commands: Command[];
 
-	constructor (commands: Command[]) {
+	constructor(commands: Command[]) {
 		super();
 		this.commands = commands;
 	}
@@ -52,7 +52,7 @@ export class MoveNodeCommand extends Command {
 	oldPosition: XYPosition;
 	newPosition: XYPosition;
 
-	constructor (nodeName: string, oldPosition: XYPosition, newPosition: XYPosition, eventBus: Vue) {
+	constructor(nodeName: string, oldPosition: XYPosition, newPosition: XYPosition, eventBus: Vue) {
 		super(COMMANDS.MOVE_NODE, eventBus);
 		this.nodeName = nodeName;
 		this.newPosition = newPosition;
@@ -60,12 +60,7 @@ export class MoveNodeCommand extends Command {
 	}
 
 	getReverseCommand(): Command {
-		return new MoveNodeCommand(
-			this.nodeName,
-			this.newPosition,
-			this.oldPosition,
-			this.eventBus,
-		);
+		return new MoveNodeCommand(this.nodeName, this.newPosition, this.oldPosition, this.eventBus);
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
@@ -80,8 +75,11 @@ export class MoveNodeCommand extends Command {
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
-			this.eventBus.$root.$emit('nodeMove', { nodeName: this.nodeName, position: this.oldPosition });
+		return new Promise<void>((resolve) => {
+			this.eventBus.$root.$emit('nodeMove', {
+				nodeName: this.nodeName,
+				position: this.oldPosition,
+			});
 			resolve();
 		});
 	}
@@ -90,7 +88,7 @@ export class MoveNodeCommand extends Command {
 export class AddNodeCommand extends Command {
 	node: INodeUi;
 
-	constructor (node: INodeUi, eventBus: Vue) {
+	constructor(node: INodeUi, eventBus: Vue) {
 		super(COMMANDS.ADD_NODE, eventBus);
 		this.node = node;
 	}
@@ -100,14 +98,11 @@ export class AddNodeCommand extends Command {
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
-		return (
-			anotherCommand instanceof AddNodeCommand &&
-			anotherCommand.node.name === this.node.name
-		);
+		return anotherCommand instanceof AddNodeCommand && anotherCommand.node.name === this.node.name;
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
+		return new Promise<void>((resolve) => {
 			this.eventBus.$root.$emit('revertAddNode', { node: this.node });
 			resolve();
 		});
@@ -117,7 +112,7 @@ export class AddNodeCommand extends Command {
 export class RemoveNodeCommand extends Command {
 	node: INodeUi;
 
-	constructor (node: INodeUi, eventBus: Vue) {
+	constructor(node: INodeUi, eventBus: Vue) {
 		super(COMMANDS.REMOVE_NODE, eventBus);
 		this.node = node;
 	}
@@ -127,14 +122,11 @@ export class RemoveNodeCommand extends Command {
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
-		return (
-			anotherCommand instanceof AddNodeCommand &&
-			anotherCommand.node.name === this.node.name
-		);
+		return anotherCommand instanceof AddNodeCommand && anotherCommand.node.name === this.node.name;
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
+		return new Promise<void>((resolve) => {
 			this.eventBus.$root.$emit('revertRemoveNode', { node: this.node });
 			resolve();
 		});
@@ -164,7 +156,7 @@ export class AddConnectionCommand extends Command {
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
+		return new Promise<void>((resolve) => {
 			this.eventBus.$root.$emit('revertAddConnection', { connection: this.connectionData });
 			resolve();
 		});
@@ -180,7 +172,7 @@ export class RemoveConnectionCommand extends Command {
 	}
 
 	getReverseCommand(): Command {
-			return new AddConnectionCommand(this.connectionData, this.eventBus);
+		return new AddConnectionCommand(this.connectionData, this.eventBus);
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
@@ -194,7 +186,7 @@ export class RemoveConnectionCommand extends Command {
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
+		return new Promise<void>((resolve) => {
 			setTimeout(() => {
 				this.eventBus.$root.$emit('revertRemoveConnection', { connection: this.connectionData });
 				resolve();
@@ -216,19 +208,21 @@ export class EnableNodeToggleCommand extends Command {
 	}
 
 	getReverseCommand(): Command {
-			return new EnableNodeToggleCommand(this.nodeName, this.newState, this.oldState, this.eventBus);
+		return new EnableNodeToggleCommand(this.nodeName, this.newState, this.oldState, this.eventBus);
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
 		return (
-			anotherCommand instanceof EnableNodeToggleCommand &&
-			anotherCommand.nodeName === this.nodeName
+			anotherCommand instanceof EnableNodeToggleCommand && anotherCommand.nodeName === this.nodeName
 		);
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
-			this.eventBus.$root.$emit('enableNodeToggle', { nodeName: this.nodeName, isDisabled: this.oldState });
+		return new Promise<void>((resolve) => {
+			this.eventBus.$root.$emit('enableNodeToggle', {
+				nodeName: this.nodeName,
+				isDisabled: this.oldState,
+			});
 			resolve();
 		});
 	}
@@ -245,7 +239,7 @@ export class RenameNodeCommand extends Command {
 	}
 
 	getReverseCommand(): Command {
-			return new RenameNodeCommand(this.newName, this.currentName, this.eventBus);
+		return new RenameNodeCommand(this.newName, this.currentName, this.eventBus);
 	}
 
 	isEqualTo(anotherCommand: Command): boolean {
@@ -257,8 +251,11 @@ export class RenameNodeCommand extends Command {
 	}
 
 	async revert(): Promise<void> {
-		return new Promise<void>(resolve => {
-			this.eventBus.$root.$emit('revertRenameNode', { currentName: this.currentName, newName: this.newName });
+		return new Promise<void>((resolve) => {
+			this.eventBus.$root.$emit('revertRenameNode', {
+				currentName: this.currentName,
+				newName: this.newName,
+			});
 			resolve();
 		});
 	}
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index fbffa1b040..5e751f208c 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -17,8 +17,18 @@ $custom-expression-background: var(--color-background-lighter);
 $badge-danger-color: var(--color-danger);
 $badge-danger-background-color: var(--color-primary-tint-3);
 $badge-danger-border-color: var(--color-primary-tint-2);
-$badge-warning-background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);
-$badge-warning-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);;
+$badge-warning-background-color: hsla(
+	var(--color-warning-h),
+	var(--color-warning-s),
+	var(--color-warning-l),
+	0.3
+);
+$badge-warning-color: hsla(
+	var(--color-warning-h),
+	var(--color-warning-s),
+	var(--color-warning-l),
+	0.3
+);
 $badge-warning-color: var(--color-text-dark);
 
 // Warning tooltip
@@ -88,5 +98,9 @@ $version-card-background-color: var(--color-background-xlight);
 $version-card-border: var(--border-base);
 $version-card-description-text-color: var(--color-text-base);
 $version-card-release-date-text-color: var(--color-foreground-xdark);
-$version-card-box-shadow-color: hsla(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l), .07);
-
+$version-card-box-shadow-color: hsla(
+	var(--color-background-dark-h),
+	var(--color-background-dark-s),
+	var(--color-background-dark-l),
+	0.07
+);
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 1cf97aa44a..a61b145d83 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -120,14 +120,12 @@
 	font-weight: bold;
 }
 
-
 // Loading Indicator
 .el-loading-mask {
 	background-color: var(--color-foreground-xlight);
 	opacity: 0.8;
 }
 
-
 // Pagination
 .el-pager li,
 .el-pagination .btn-prev,
@@ -155,7 +153,6 @@
 	word-break: break-word;
 }
 
-
 .tags-container {
 	.el-tag {
 		color: $tag-text-color;
diff --git a/packages/editor-ui/src/permissions.ts b/packages/editor-ui/src/permissions.ts
index 98f684927b..936f062b19 100644
--- a/packages/editor-ui/src/permissions.ts
+++ b/packages/editor-ui/src/permissions.ts
@@ -4,9 +4,9 @@
  * @usage getCredentialPermissions(user, credential).isOwner;
  */
 
-import {IUser, ICredentialsResponse, IRootState, IWorkflowDb} from "@/Interface";
-import {EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID} from "@/constants";
-import { useSettingsStore } from "./stores/settings";
+import { IUser, ICredentialsResponse, IRootState, IWorkflowDb } from '@/Interface';
+import { EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import { useSettingsStore } from './stores/settings';
 
 export enum UserRole {
 	InstanceOwner = 'isInstanceOwner',
@@ -32,15 +32,13 @@ export type IPermissionsTable = IPermissionsTableRow[];
  * @param user
  * @param table
  */
-export const parsePermissionsTable = (user: IUser | null, table: IPermissionsTable): IPermissions => {
-	const genericTable = [
-		{ name: UserRole.InstanceOwner, test: () => user?.isOwner },
-	];
+export const parsePermissionsTable = (
+	user: IUser | null,
+	table: IPermissionsTable,
+): IPermissions => {
+	const genericTable = [{ name: UserRole.InstanceOwner, test: () => user?.isOwner }];
 
-	return [
-		...genericTable,
-		...table,
-	].reduce((permissions: IPermissions, row) => {
+	return [...genericTable, ...table].reduce((permissions: IPermissions, row) => {
 		permissions[row.name] = Array.isArray(row.test)
 			? row.test.some((ability) => permissions[ability])
 			: (row.test as IPermissionsTableRowTestFn)(permissions);
@@ -55,19 +53,37 @@ export const parsePermissionsTable = (user: IUser | null, table: IPermissionsTab
 
 export const getCredentialPermissions = (user: IUser | null, credential: ICredentialsResponse) => {
 	const settingsStore = useSettingsStore();
-	const isSharingEnabled = settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
+	const isSharingEnabled = settingsStore.isEnterpriseFeatureEnabled(
+		EnterpriseEditionFeature.Sharing,
+	);
 
 	const table: IPermissionsTable = [
-		{ name: UserRole.ResourceOwner, test: () => !!(credential && credential.ownedBy && credential.ownedBy.id === user?.id) || !isSharingEnabled },
-		{ name: UserRole.ResourceReader, test: () => !!(credential && credential.sharedWith && credential.sharedWith.find((sharee) => sharee.id === user?.id)) },
-		{ name: 'read', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader] },
+		{
+			name: UserRole.ResourceOwner,
+			test: () =>
+				!!(credential && credential.ownedBy && credential.ownedBy.id === user?.id) ||
+				!isSharingEnabled,
+		},
+		{
+			name: UserRole.ResourceReader,
+			test: () =>
+				!!(
+					credential &&
+					credential.sharedWith &&
+					credential.sharedWith.find((sharee) => sharee.id === user?.id)
+				),
+		},
+		{
+			name: 'read',
+			test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader],
+		},
 		{ name: 'save', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
 		{ name: 'updateName', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
-		{ name: 'updateConnection', test: [UserRole.ResourceOwner]  },
-		{ name: 'updateSharing', test: [UserRole.ResourceOwner]  },
-		{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner]  },
-		{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner]  },
-		{ name: 'use', test: [UserRole.ResourceOwner, UserRole.ResourceReader]  },
+		{ name: 'updateConnection', test: [UserRole.ResourceOwner] },
+		{ name: 'updateSharing', test: [UserRole.ResourceOwner] },
+		{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner] },
+		{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
+		{ name: 'use', test: [UserRole.ResourceOwner, UserRole.ResourceReader] },
 	];
 
 	return parsePermissionsTable(user, table);
@@ -75,20 +91,41 @@ export const getCredentialPermissions = (user: IUser | null, credential: ICreden
 
 export const getWorkflowPermissions = (user: IUser | null, workflow: IWorkflowDb) => {
 	const settingsStore = useSettingsStore();
-	const isSharingEnabled = settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing);
+	const isSharingEnabled = settingsStore.isEnterpriseFeatureEnabled(
+		EnterpriseEditionFeature.WorkflowSharing,
+	);
 	const isNewWorkflow = workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 
 	const table: IPermissionsTable = [
-		{ name: UserRole.ResourceOwner, test: () => !!(isNewWorkflow || workflow && workflow.ownedBy && workflow.ownedBy.id === user?.id) || !isSharingEnabled },
-		{ name: UserRole.ResourceReader, test: () => !!(workflow && workflow.sharedWith && workflow.sharedWith.find((sharee) => sharee.id === user?.id)) },
-		{ name: 'read', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader] },
+		{
+			name: UserRole.ResourceOwner,
+			test: () =>
+				!!(isNewWorkflow || (workflow && workflow.ownedBy && workflow.ownedBy.id === user?.id)) ||
+				!isSharingEnabled,
+		},
+		{
+			name: UserRole.ResourceReader,
+			test: () =>
+				!!(
+					workflow &&
+					workflow.sharedWith &&
+					workflow.sharedWith.find((sharee) => sharee.id === user?.id)
+				),
+		},
+		{
+			name: 'read',
+			test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader],
+		},
 		{ name: 'save', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
 		{ name: 'updateName', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
-		{ name: 'updateConnection', test: [UserRole.ResourceOwner]  },
-		{ name: 'updateSharing', test: [UserRole.ResourceOwner]  },
-		{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner]  },
-		{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner]  },
-		{ name: 'use', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader]  },
+		{ name: 'updateConnection', test: [UserRole.ResourceOwner] },
+		{ name: 'updateSharing', test: [UserRole.ResourceOwner] },
+		{ name: 'updateNodeAccess', test: [UserRole.ResourceOwner] },
+		{ name: 'delete', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
+		{
+			name: 'use',
+			test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader],
+		},
 	];
 
 	return parsePermissionsTable(user, table);
diff --git a/packages/editor-ui/src/plugins/N8nCustomConnectorType.js b/packages/editor-ui/src/plugins/N8nCustomConnectorType.js
index 90401e03a7..7736f42622 100644
--- a/packages/editor-ui/src/plugins/N8nCustomConnectorType.js
+++ b/packages/editor-ui/src/plugins/N8nCustomConnectorType.js
@@ -318,10 +318,13 @@
  *
  */
 (function () {
-	"use strict";
-	var root = window, _jp = root.jsPlumb, _ju = root.jsPlumbUtil,  _jg = root.Biltong;
-	var STRAIGHT = "Straight";
-	var ARC = "Arc";
+	'use strict';
+	var root = window,
+		_jp = root.jsPlumb,
+		_ju = root.jsPlumbUtil,
+		_jg = root.Biltong;
+	var STRAIGHT = 'Straight';
+	var ARC = 'Arc';
 
 	/**
 	 * Custom connector type
@@ -336,7 +339,7 @@
 	 */
 	const N8nCustom = function (params) {
 		params = params || {};
-		this.type = "N8nCustom";
+		this.type = 'N8nCustom';
 
 		params.stub = params.stub == null ? 30 : params.stub;
 
@@ -347,7 +350,8 @@
 			midpoint = params.midpoint == null ? 0.5 : params.midpoint,
 			alwaysRespectStubs = params.alwaysRespectStubs === true,
 			loopbackVerticalLength = params.loopbackVerticalLength || 0,
-			lastx = null, lasty = null,
+			lastx = null,
+			lasty = null,
 			cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0,
 			loopbackMinimum = params.loopbackMinimum || 100,
 			curvinessCoeffient = 0.4,
@@ -372,7 +376,12 @@
 		};
 
 		this._compute = function (originalPaintInfo, connParams) {
-			const paintInfo = _getPaintInfo(connParams, { targetGap, stub, overrideTargetEndpoint: this.overrideTargetEndpoint, getEndpointOffset: params.getEndpointOffset });
+			const paintInfo = _getPaintInfo(connParams, {
+				targetGap,
+				stub,
+				overrideTargetEndpoint: this.overrideTargetEndpoint,
+				getEndpointOffset: params.getEndpointOffset,
+			});
 			Object.keys(paintInfo).forEach((key) => {
 				// override so that bounding box is calculated correctly wheen target override is set
 				originalPaintInfo[key] = paintInfo[key];
@@ -380,8 +389,7 @@
 
 			if (paintInfo.tx < 0) {
 				this._computeFlowchart(paintInfo);
-			}
-			else {
+			} else {
 				this._computeBezier(paintInfo);
 			}
 		};
@@ -392,7 +400,8 @@
 				_w = Math.abs(sp[0] - tp[0]) - paintInfo.targetGap,
 				_h = Math.abs(sp[1] - tp[1]);
 
-			var _CP, _CP2,
+			var _CP,
+				_CP2,
 				_sx = sp[0] < tp[0] ? _w : 0,
 				_sy = sp[1] < tp[1] ? _h : 0,
 				_tx = sp[0] < tp[0] ? 0 : _w,
@@ -400,17 +409,42 @@
 
 			if (paintInfo.ySpan <= 20 || (paintInfo.ySpan <= 100 && paintInfo.xSpan <= 100)) {
 				majorAnchor = 0.1;
-			}
-			else {
+			} else {
 				majorAnchor = paintInfo.xSpan * curvinessCoeffient + zBezierOffset;
 			}
 
-			_CP = _findControlPoint([_sx, _sy], sp, tp, paintInfo.sourceEndpoint, paintInfo.targetEndpoint, paintInfo.so, paintInfo.to, majorAnchor, minorAnchor);
-			_CP2 = _findControlPoint([_tx, _ty], tp, sp, paintInfo.targetEndpoint, paintInfo.sourceEndpoint, paintInfo.to, paintInfo.so, majorAnchor, minorAnchor);
+			_CP = _findControlPoint(
+				[_sx, _sy],
+				sp,
+				tp,
+				paintInfo.sourceEndpoint,
+				paintInfo.targetEndpoint,
+				paintInfo.so,
+				paintInfo.to,
+				majorAnchor,
+				minorAnchor,
+			);
+			_CP2 = _findControlPoint(
+				[_tx, _ty],
+				tp,
+				sp,
+				paintInfo.targetEndpoint,
+				paintInfo.sourceEndpoint,
+				paintInfo.to,
+				paintInfo.so,
+				majorAnchor,
+				minorAnchor,
+			);
 
-			_super.addSegment(this, "Bezier", {
-				x1: _sx, y1: _sy, x2: _tx, y2: _ty,
-				cp1x: _CP[0], cp1y: _CP[1], cp2x: _CP2[0], cp2y: _CP2[1],
+			_super.addSegment(this, 'Bezier', {
+				x1: _sx,
+				y1: _sy,
+				x2: _tx,
+				y2: _ty,
+				cp1x: _CP[0],
+				cp1y: _CP[1],
+				cp2x: _CP2[0],
+				cp2y: _CP2[1],
 			});
 		};
 
@@ -423,28 +457,31 @@
 			}
 			var lx = lastx == null ? paintInfo.sx : lastx,
 				ly = lasty == null ? paintInfo.sy : lasty,
-				o = lx === x ? "v" : "h";
+				o = lx === x ? 'v' : 'h';
 
 			lastx = x;
 			lasty = y;
-			segments.push([ lx, ly, x, y, o ]);
+			segments.push([lx, ly, x, y, o]);
 		};
 
 		this._computeFlowchart = function (paintInfo) {
-
 			segments = [];
 			lastx = null;
 			lasty = null;
 
 			// calculate Stubs.
-			var stubs = calcualteStubSegment(paintInfo, {alwaysRespectStubs});
+			var stubs = calcualteStubSegment(paintInfo, { alwaysRespectStubs });
 
 			// add the start stub segment. use stubs for loopback as it will look better, with the loop spaced
 			// away from the element.
 			addFlowchartSegment(segments, stubs[0], stubs[1], paintInfo);
 
 			// compute the rest of the line
-			var p = calculateLineSegment(paintInfo, stubs, {midpoint, loopbackMinimum, loopbackVerticalLength});
+			var p = calculateLineSegment(paintInfo, stubs, {
+				midpoint,
+				loopbackMinimum,
+				loopbackVerticalLength,
+			});
 			if (p) {
 				for (var i = 0; i < p.length; i++) {
 					addFlowchartSegment(segments, p[i][0], p[i][1], paintInfo);
@@ -465,8 +502,17 @@
 	_jp.Connectors.N8nCustom = N8nCustom;
 	_ju.extend(_jp.Connectors.N8nCustom, _jp.Connectors.AbstractConnector);
 
-
-	function _findControlPoint(point, sourceAnchorPosition, targetAnchorPosition, sourceEndpoint, targetEndpoint, soo, too, majorAnchor, minorAnchor) {
+	function _findControlPoint(
+		point,
+		sourceAnchorPosition,
+		targetAnchorPosition,
+		sourceEndpoint,
+		targetEndpoint,
+		soo,
+		too,
+		majorAnchor,
+		minorAnchor,
+	) {
 		// determine if the two anchors are perpendicular to each other in their orientation.  we swap the control
 		// points around if so (code could be tightened up)
 		var perpendicular = soo[0] !== too[0] || soo[1] === too[1],
@@ -474,64 +520,73 @@
 
 		if (!perpendicular) {
 			if (soo[0] === 0) {
-				p.push(sourceAnchorPosition[0] < targetAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
-			}
-			else {
-				p.push(point[0] - (majorAnchor * soo[0]));
+				p.push(
+					sourceAnchorPosition[0] < targetAnchorPosition[0]
+						? point[0] + minorAnchor
+						: point[0] - minorAnchor,
+				);
+			} else {
+				p.push(point[0] - majorAnchor * soo[0]);
 			}
 
 			if (soo[1] === 0) {
-				p.push(sourceAnchorPosition[1] < targetAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
+				p.push(
+					sourceAnchorPosition[1] < targetAnchorPosition[1]
+						? point[1] + minorAnchor
+						: point[1] - minorAnchor,
+				);
+			} else {
+				p.push(point[1] + majorAnchor * too[1]);
 			}
-			else {
-				p.push(point[1] + (majorAnchor * too[1]));
-			}
-		}
-		else {
+		} else {
 			if (too[0] === 0) {
-				p.push(targetAnchorPosition[0] < sourceAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
-			}
-			else {
-				p.push(point[0] + (majorAnchor * too[0]));
+				p.push(
+					targetAnchorPosition[0] < sourceAnchorPosition[0]
+						? point[0] + minorAnchor
+						: point[0] - minorAnchor,
+				);
+			} else {
+				p.push(point[0] + majorAnchor * too[0]);
 			}
 
 			if (too[1] === 0) {
-				p.push(targetAnchorPosition[1] < sourceAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
-			}
-			else {
-				p.push(point[1] + (majorAnchor * soo[1]));
+				p.push(
+					targetAnchorPosition[1] < sourceAnchorPosition[1]
+						? point[1] + minorAnchor
+						: point[1] - minorAnchor,
+				);
+			} else {
+				p.push(point[1] + majorAnchor * soo[1]);
 			}
 		}
 
 		return p;
-	};
-
+	}
 
 	function sgn(n) {
 		return n < 0 ? -1 : n === 0 ? 0 : 1;
-	};
+	}
 
 	function getFlowchartSegmentDirections(segment) {
-		return [
-			sgn( segment[2] - segment[0] ),
-			sgn( segment[3] - segment[1] ),
-		];
-	};
+		return [sgn(segment[2] - segment[0]), sgn(segment[3] - segment[1])];
+	}
 
 	function getSegmentLength(s) {
 		return Math.sqrt(Math.pow(s[0] - s[2], 2) + Math.pow(s[1] - s[3], 2));
-	};
+	}
 
 	function _cloneArray(a) {
 		var _a = [];
 		_a.push.apply(_a, a);
 		return _a;
-	};
+	}
 
 	function writeFlowchartSegments(_super, conn, segments, paintInfo, cornerRadius) {
-		var current = null, next, currentDirection, nextDirection;
+		var current = null,
+			next,
+			currentDirection,
+			nextDirection;
 		for (var i = 0; i < segments.length - 1; i++) {
-
 			current = current || _cloneArray(segments[i]);
 			next = _cloneArray(segments[i + 1]);
 
@@ -539,7 +594,6 @@
 			nextDirection = getFlowchartSegmentDirections(next);
 
 			if (cornerRadius > 0 && current[4] !== next[4]) {
-
 				var minSegLength = Math.min(getSegmentLength(current), getSegmentLength(next));
 				var radiusToUse = Math.min(cornerRadius, minSegLength / 2);
 
@@ -548,17 +602,23 @@
 				next[0] += nextDirection[0] * radiusToUse;
 				next[1] += nextDirection[1] * radiusToUse;
 
-				var ac = (currentDirection[1] === nextDirection[0] && nextDirection[0] === 1) ||
-													((currentDirection[1] === nextDirection[0] && nextDirection[0] === 0) && currentDirection[0] !== nextDirection[1]) ||
-													(currentDirection[1] === nextDirection[0] && nextDirection[0] === -1),
+				var ac =
+						(currentDirection[1] === nextDirection[0] && nextDirection[0] === 1) ||
+						(currentDirection[1] === nextDirection[0] &&
+							nextDirection[0] === 0 &&
+							currentDirection[0] !== nextDirection[1]) ||
+						(currentDirection[1] === nextDirection[0] && nextDirection[0] === -1),
 					sgny = next[1] > current[3] ? 1 : -1,
 					sgnx = next[0] > current[2] ? 1 : -1,
 					sgnEqual = sgny === sgnx,
-					cx = (sgnEqual && ac || (!sgnEqual && !ac)) ? next[0] : current[2],
-					cy = (sgnEqual && ac || (!sgnEqual && !ac)) ? current[3] : next[1];
+					cx = (sgnEqual && ac) || (!sgnEqual && !ac) ? next[0] : current[2],
+					cy = (sgnEqual && ac) || (!sgnEqual && !ac) ? current[3] : next[1];
 
 				_super.addSegment(conn, STRAIGHT, {
-					x1: current[0], y1: current[1], x2: current[2], y2: current[3],
+					x1: current[0],
+					y1: current[1],
+					x2: current[2],
+					y2: current[3],
 				});
 
 				_super.addSegment(conn, ARC, {
@@ -571,14 +631,26 @@
 					cy: cy,
 					ac: ac,
 				});
-			}
-			else {
+			} else {
 				// dx + dy are used to adjust for line width.
-				var dx = (current[2] === current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2),
-					dy = (current[3] === current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2);
+				var dx =
+						current[2] === current[0]
+							? 0
+							: current[2] > current[0]
+							? paintInfo.lw / 2
+							: -(paintInfo.lw / 2),
+					dy =
+						current[3] === current[1]
+							? 0
+							: current[3] > current[1]
+							? paintInfo.lw / 2
+							: -(paintInfo.lw / 2);
 
 				_super.addSegment(conn, STRAIGHT, {
-					x1: current[0] - dx, y1: current[1] - dy, x2: current[2] + dx, y2: current[3] + dy,
+					x1: current[0] - dx,
+					y1: current[1] - dy,
+					x2: current[2] + dx,
+					y2: current[3] + dy,
 				});
 			}
 			current = next;
@@ -586,35 +658,44 @@
 		if (next != null) {
 			// last segment
 			_super.addSegment(conn, STRAIGHT, {
-				x1: next[0], y1: next[1], x2: next[2], y2: next[3],
+				x1: next[0],
+				y1: next[1],
+				x2: next[2],
+				y2: next[3],
 			});
 		}
-	};
+	}
 
 	const lineCalculators = {
-		opposite: function (paintInfo, {axis, startStub, endStub, idx, midx, midy}) {
+		opposite: function (paintInfo, { axis, startStub, endStub, idx, midx, midy }) {
 			var pi = paintInfo,
-				comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"];
+				comparator = pi['is' + axis.toUpperCase() + 'GreaterThanStubTimes2'];
 
-			if (!comparator || (pi.so[idx] === 1 && startStub > endStub) || (pi.so[idx] === -1 && startStub < endStub)) {
+			if (
+				!comparator ||
+				(pi.so[idx] === 1 && startStub > endStub) ||
+				(pi.so[idx] === -1 && startStub < endStub)
+			) {
 				return {
-					"x": [
+					x: [
 						[startStub, midy],
 						[endStub, midy],
 					],
-					"y": [
+					y: [
 						[midx, startStub],
 						[midx, endStub],
 					],
 				}[axis];
-			}
-			else if ((pi.so[idx] === 1 && startStub < endStub) || (pi.so[idx] === -1 && startStub > endStub)) {
+			} else if (
+				(pi.so[idx] === 1 && startStub < endStub) ||
+				(pi.so[idx] === -1 && startStub > endStub)
+			) {
 				return {
-					"x": [
+					x: [
 						[midx, pi.sy],
 						[midx, pi.ty],
 					],
-					"y": [
+					y: [
 						[pi.sx, midy],
 						[pi.tx, midy],
 					],
@@ -624,50 +705,68 @@
 	};
 
 	const stubCalculators = {
-		opposite: function (paintInfo, {axis, alwaysRespectStubs}) {
+		opposite: function (paintInfo, { axis, alwaysRespectStubs }) {
 			var pi = paintInfo,
-				idx = axis === "x" ? 0 : 1,
+				idx = axis === 'x' ? 0 : 1,
 				areInProximity = {
-					"x": function () {
-						return ( (pi.so[idx] === 1 && (
-							( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) ||
-																( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) ||
-
-																( (pi.so[idx] === -1 && (
-																	( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) ||
-																( (pi.sx < pi.endStubX) && (pi.tx < pi.sx)))));
+					x: function () {
+						return (
+							(pi.so[idx] === 1 &&
+								((pi.startStubX > pi.endStubX && pi.tx > pi.startStubX) ||
+									(pi.sx > pi.endStubX && pi.tx > pi.sx))) ||
+							(pi.so[idx] === -1 &&
+								((pi.startStubX < pi.endStubX && pi.tx < pi.startStubX) ||
+									(pi.sx < pi.endStubX && pi.tx < pi.sx)))
+						);
 					},
-					"y": function () {
-						return ( (pi.so[idx] === 1 && (
-							( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) ||
-																( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) ||
-
-																( (pi.so[idx] === -1 && (
-																	( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) ||
-																( (pi.sy < pi.endStubY) && (pi.ty < pi.sy)))));
+					y: function () {
+						return (
+							(pi.so[idx] === 1 &&
+								((pi.startStubY > pi.endStubY && pi.ty > pi.startStubY) ||
+									(pi.sy > pi.endStubY && pi.ty > pi.sy))) ||
+							(pi.so[idx] === -1 &&
+								((pi.startStubY < pi.endStubY && pi.ty < pi.startStubY) ||
+									(pi.sy < pi.endStubY && pi.ty < pi.sy)))
+						);
 					},
 				};
 
 			if (!alwaysRespectStubs && areInProximity[axis]()) {
 				return {
-					"x": [(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY],
-					"y": [paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2],
+					x: [
+						(paintInfo.sx + paintInfo.tx) / 2,
+						paintInfo.startStubY,
+						(paintInfo.sx + paintInfo.tx) / 2,
+						paintInfo.endStubY,
+					],
+					y: [
+						paintInfo.startStubX,
+						(paintInfo.sy + paintInfo.ty) / 2,
+						paintInfo.endStubX,
+						(paintInfo.sy + paintInfo.ty) / 2,
+					],
 				}[axis];
-			}
-			else {
+			} else {
 				return [paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY];
 			}
 		},
 	};
 
-	function calcualteStubSegment(paintInfo, {alwaysRespectStubs}) {
-		return stubCalculators['opposite'](paintInfo, {axis: paintInfo.sourceAxis, alwaysRespectStubs});
+	function calcualteStubSegment(paintInfo, { alwaysRespectStubs }) {
+		return stubCalculators['opposite'](paintInfo, {
+			axis: paintInfo.sourceAxis,
+			alwaysRespectStubs,
+		});
 	}
 
-	function calculateLineSegment(paintInfo, stubs, { midpoint, loopbackVerticalLength, loopbackMinimum }) {
+	function calculateLineSegment(
+		paintInfo,
+		stubs,
+		{ midpoint, loopbackVerticalLength, loopbackMinimum },
+	) {
 		const axis = paintInfo.sourceAxis,
-			idx = paintInfo.sourceAxis === "x" ? 0 : 1,
-			oidx = paintInfo.sourceAxis === "x" ? 1 : 0,
+			idx = paintInfo.sourceAxis === 'x' ? 0 : 1,
+			oidx = paintInfo.sourceAxis === 'x' ? 1 : 0,
 			startStub = stubs[idx],
 			otherStartStub = stubs[oidx],
 			endStub = stubs[idx + 2],
@@ -677,26 +776,34 @@
 		const diffY = paintInfo.endStubY - paintInfo.startStubY;
 		const direction = -1; // vertical direction of loop, always below source
 
-		var midx = paintInfo.startStubX + ((paintInfo.endStubX - paintInfo.startStubX) * midpoint),
+		var midx = paintInfo.startStubX + (paintInfo.endStubX - paintInfo.startStubX) * midpoint,
 			midy;
 
-		if (diffY >= 0 || diffX < (-1 * loopbackMinimum)) {
+		if (diffY >= 0 || diffX < -1 * loopbackMinimum) {
 			// loop backward behavior
 			midy = paintInfo.startStubY - (diffX < 0 ? direction * loopbackVerticalLength : 0);
 		} else {
 			// original flowchart behavior
-			midy = paintInfo.startStubY + ((paintInfo.endStubY - paintInfo.startStubY) * midpoint);
+			midy = paintInfo.startStubY + (paintInfo.endStubY - paintInfo.startStubY) * midpoint;
 		}
 
-		return lineCalculators['opposite'](paintInfo, {axis, startStub, otherStartStub, endStub, otherEndStub, idx, oidx, midx, midy});
+		return lineCalculators['opposite'](paintInfo, {
+			axis,
+			startStub,
+			otherStartStub,
+			endStub,
+			otherEndStub,
+			idx,
+			oidx,
+			midx,
+			midy,
+		});
 	}
 
 	function _getPaintInfo(params, { targetGap, stub, overrideTargetEndpoint, getEndpointOffset }) {
 		let { targetPos, targetEndpoint } = params;
 
-		if (
-			overrideTargetEndpoint
-		) {
+		if (overrideTargetEndpoint) {
 			targetPos = overrideTargetEndpoint.anchor.getCurrentLocation();
 			targetEndpoint = overrideTargetEndpoint;
 		}
@@ -721,8 +828,9 @@
 		// if either anchor does not have an orientation set, we derive one from their relative
 		// positions.  we fix the axis to be the one in which the two elements are further apart, and
 		// point each anchor at the other element.  this is also used when dragging a new connection.
-		if (so[0] === 0 && so[1] === 0 || to[0] === 0 && to[1] === 0) {
-			var index = w > h ? 0 : 1, oIndex = [1, 0][index];
+		if ((so[0] === 0 && so[1] === 0) || (to[0] === 0 && to[1] === 0)) {
+			var index = w > h ? 0 : 1,
+				oIndex = [1, 0][index];
 			so = [];
 			to = [];
 			so[index] = params.sourcePos[index] > targetPos[index] ? -1 : 1;
@@ -731,37 +839,49 @@
 			to[oIndex] = 0;
 		}
 
-		const sx = swapX ? w + (sourceGap * so[0]) : sourceGap * so[0],
-			sy = swapY ? h + (sourceGap * so[1]) : sourceGap * so[1],
-			tx = swapX ? targetGap * to[0] : w + (targetGap * to[0]),
-			ty = swapY ? targetGap * to[1] : h + (targetGap * to[1]),
-			oProduct = ((so[0] * to[0]) + (so[1] * to[1]));
+		const sx = swapX ? w + sourceGap * so[0] : sourceGap * so[0],
+			sy = swapY ? h + sourceGap * so[1] : sourceGap * so[1],
+			tx = swapX ? targetGap * to[0] : w + targetGap * to[0],
+			ty = swapY ? targetGap * to[1] : h + targetGap * to[1],
+			oProduct = so[0] * to[0] + so[1] * to[1];
 
-		const sourceStubWithOffset = sourceStub + (getEndpointOffset && params.sourceEndpoint ? getEndpointOffset(params.sourceEndpoint) : 0);
-		const targetStubWithOffset = targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(targetEndpoint) : 0);
+		const sourceStubWithOffset =
+			sourceStub +
+			(getEndpointOffset && params.sourceEndpoint ? getEndpointOffset(params.sourceEndpoint) : 0);
+		const targetStubWithOffset =
+			targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(targetEndpoint) : 0);
 
 		// same as paintinfo generated by jsplumb AbstractConnector type
 		var result = {
-			sx: sx, sy: sy, tx: tx, ty: ty, lw: lw,
+			sx: sx,
+			sy: sy,
+			tx: tx,
+			ty: ty,
+			lw: lw,
 			xSpan: Math.abs(tx - sx),
 			ySpan: Math.abs(ty - sy),
 			mx: (sx + tx) / 2,
 			my: (sy + ty) / 2,
-			so: so, to: to, x: x, y: y, w: w, h: h,
+			so: so,
+			to: to,
+			x: x,
+			y: y,
+			w: w,
+			h: h,
 			segment: segment,
-			startStubX: sx + (so[0] * sourceStubWithOffset),
-			startStubY: sy + (so[1] * sourceStubWithOffset),
-			endStubX: tx + (to[0] * targetStubWithOffset),
-			endStubY: ty + (to[1] * targetStubWithOffset),
-			isXGreaterThanStubTimes2: Math.abs(sx - tx) > (sourceStubWithOffset + targetStubWithOffset),
-			isYGreaterThanStubTimes2: Math.abs(sy - ty) > (sourceStubWithOffset + targetStubWithOffset),
+			startStubX: sx + so[0] * sourceStubWithOffset,
+			startStubY: sy + so[1] * sourceStubWithOffset,
+			endStubX: tx + to[0] * targetStubWithOffset,
+			endStubY: ty + to[1] * targetStubWithOffset,
+			isXGreaterThanStubTimes2: Math.abs(sx - tx) > sourceStubWithOffset + targetStubWithOffset,
+			isYGreaterThanStubTimes2: Math.abs(sy - ty) > sourceStubWithOffset + targetStubWithOffset,
 			opposite: oProduct === -1,
 			perpendicular: oProduct === 0,
 			orthogonal: oProduct === 1,
-			sourceAxis: so[0] === 0 ? "y" : "x",
-			points: [x, y, w, h, sx, sy, tx, ty ],
-			stubs:[sourceStubWithOffset, targetStubWithOffset],
-			anchorOrientation: "opposite", // always opposite since our endpoints are always opposite (source orientation is left (1) and target orientaiton is right (-1))
+			sourceAxis: so[0] === 0 ? 'y' : 'x',
+			points: [x, y, w, h, sx, sy, tx, ty],
+			stubs: [sourceStubWithOffset, targetStubWithOffset],
+			anchorOrientation: 'opposite', // always opposite since our endpoints are always opposite (source orientation is left (1) and target orientaiton is right (-1))
 
 			/** custom keys added */
 			sourceEndpoint: params.sourceEndpoint,
@@ -772,7 +892,5 @@
 		};
 
 		return result;
-	};
-
-
-}).call(typeof window !== 'undefined' ? window : this);
+	}
+}.call(typeof window !== 'undefined' ? window : this));
diff --git a/packages/editor-ui/src/plugins/PlusEndpointType.js b/packages/editor-ui/src/plugins/PlusEndpointType.js
index d3c223eb83..6e97c54193 100644
--- a/packages/editor-ui/src/plugins/PlusEndpointType.js
+++ b/packages/editor-ui/src/plugins/PlusEndpointType.js
@@ -316,8 +316,10 @@
  *
  */
 (function () {
-	"use strict";
-	var root = window, _jp = root.jsPlumb, _ju = root.jsPlumbUtil;
+	'use strict';
+	var root = window,
+		_jp = root.jsPlumb,
+		_ju = root.jsPlumbUtil;
 
 	var DOMElementEndpoint = function (params) {
 		_jp.jsPlumbUIComponent.apply(this, arguments);
@@ -333,11 +335,11 @@
 	});
 
 	/*
-	* Class: Endpoints.N8nPlus
-	*/
+	 * Class: Endpoints.N8nPlus
+	 */
 	_jp.Endpoints.N8nPlus = function (params) {
 		const _super = _jp.Endpoints.AbstractEndpoint.apply(this, arguments);
-		this.type = "N8nPlus";
+		this.type = 'N8nPlus';
 		this.label = '';
 		this.labelOffset = 0;
 		this.size = 'medium';
@@ -351,13 +353,17 @@
 
 		DOMElementEndpoint.apply(this, arguments);
 
-		var clazz = params.cssClass ? " " + params.cssClass : "";
+		var clazz = params.cssClass ? ' ' + params.cssClass : '';
 
-		this.canvas = _jp.createElement("div", {
-			display: "block",
-			background: "transparent",
-			position: "absolute",
-		}, this._jsPlumb.instance.endpointClass + clazz + ' plus-endpoint');
+		this.canvas = _jp.createElement(
+			'div',
+			{
+				display: 'block',
+				background: 'transparent',
+				position: 'absolute',
+			},
+			this._jsPlumb.instance.endpointClass + clazz + ' plus-endpoint',
+		);
 
 		this.canvas.innerHTML = `
 			<div class="plus-stalk">
@@ -416,10 +422,11 @@
 			const plusConnections = endpoint.connections;
 
 			if (plusConnections.length) {
-				return !!plusConnections.find((conn) => conn && conn.targetId && conn.targetId.startsWith('jsPlumb'));
+				return !!plusConnections.find(
+					(conn) => conn && conn.targetId && conn.targetId.startsWith('jsPlumb'),
+				);
 			}
 
-
 			return false;
 		};
 
@@ -436,7 +443,12 @@
 			}); // includes connections from other output endpoints like dot
 
 			return !!allConnections.find((connection) => {
-				if (!connection || !connection.endpoints || !connection.endpoints.length || !connection.endpoints[0]) {
+				if (
+					!connection ||
+					!connection.endpoints ||
+					!connection.endpoints.length ||
+					!connection.endpoints[0]
+				) {
 					return false;
 				}
 
@@ -448,8 +460,7 @@
 		this.paint = function (style, anchor) {
 			if (hasEndpointConnections()) {
 				this.canvas.classList.add('hidden');
-			}
-			else {
+			} else {
 				this.canvas.classList.remove('hidden');
 				container.style.color = style.fill;
 				container.style['border-color'] = style.fill;
@@ -472,12 +483,18 @@
 			}
 
 			setTimeout(() => {
-				if (this.label && !this.labelOffset) { // if label is hidden, offset is 0 so recalculate
+				if (this.label && !this.labelOffset) {
+					// if label is hidden, offset is 0 so recalculate
 					this.setSuccessOutput(this.label);
 				}
 			}, 0);
 
-			const defaultPosition = [anchorPoint[0] + stalkLength + this.labelOffset, anchorPoint[1] - boxSize[this.size] / 2, boxSize[this.size], boxSize[this.size]];
+			const defaultPosition = [
+				anchorPoint[0] + stalkLength + this.labelOffset,
+				anchorPoint[1] - boxSize[this.size] / 2,
+				boxSize[this.size],
+				boxSize[this.size],
+			];
 
 			if (isDragging()) {
 				return defaultPosition;
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index ddc707089a..5c4d549135 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -1,19 +1,17 @@
 // @ts-nocheck
 
-import Vue from "vue";
+import Vue from 'vue';
 import Fragment from 'vue-fragment';
 
-import "regenerator-runtime/runtime";
+import 'regenerator-runtime/runtime';
 
 import VueAgile from 'vue-agile';
 
 import ElementUI from 'element-ui';
 import { Loading, MessageBox, Message, Notification } from 'element-ui';
-import {
-	designSystemComponents,
-} from 'n8n-design-system';
-import { ElMessageBoxOptions } from "element-ui/types/message-box";
-import EnterpriseEdition from "@/components/EnterpriseEdition.ee.vue";
+import { designSystemComponents } from 'n8n-design-system';
+import { ElMessageBoxOptions } from 'element-ui/types/message-box';
+import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
 
 Vue.use(Fragment.Plugin);
 
@@ -28,7 +26,11 @@ Vue.use(Loading.directive);
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 
-Vue.prototype.$alert = async (message: string, configOrTitle: string | ElMessageBoxOptions | undefined, config: ElMessageBoxOptions | undefined) => {
+Vue.prototype.$alert = async (
+	message: string,
+	configOrTitle: string | ElMessageBoxOptions | undefined,
+	config: ElMessageBoxOptions | undefined,
+) => {
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
@@ -42,7 +44,11 @@ Vue.prototype.$alert = async (message: string, configOrTitle: string | ElMessage
 	return await MessageBox.alert(message, temp);
 };
 
-Vue.prototype.$confirm = async (message: string, configOrTitle: string | ElMessageBoxOptions | undefined, config: ElMessageBoxOptions | undefined) => {
+Vue.prototype.$confirm = async (
+	message: string,
+	configOrTitle: string | ElMessageBoxOptions | undefined,
+	config: ElMessageBoxOptions | undefined,
+) => {
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
@@ -59,7 +65,11 @@ Vue.prototype.$confirm = async (message: string, configOrTitle: string | ElMessa
 	return await MessageBox.confirm(message, temp);
 };
 
-Vue.prototype.$prompt = async (message: string, configOrTitle: string | ElMessageBoxOptions | undefined, config: ElMessageBoxOptions | undefined) => {
+Vue.prototype.$prompt = async (
+	message: string,
+	configOrTitle: string | ElMessageBoxOptions | undefined,
+	config: ElMessageBoxOptions | undefined,
+) => {
 	let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
 	temp = {
 		...temp,
diff --git a/packages/editor-ui/src/plugins/directives.ts b/packages/editor-ui/src/plugins/directives.ts
index b1ff6f0357..ace3fa1776 100644
--- a/packages/editor-ui/src/plugins/directives.ts
+++ b/packages/editor-ui/src/plugins/directives.ts
@@ -1,4 +1,4 @@
-import Vue from "vue";
+import Vue from 'vue';
 
 import Vue2TouchEvents from 'vue2-touch-events';
 // @ts-ignore
diff --git a/packages/editor-ui/src/plugins/i18n/docs/ADDENDUM.md b/packages/editor-ui/src/plugins/i18n/docs/ADDENDUM.md
index f02e5c8538..6c60a8bf30 100644
--- a/packages/editor-ui/src/plugins/i18n/docs/ADDENDUM.md
+++ b/packages/editor-ui/src/plugins/i18n/docs/ADDENDUM.md
@@ -8,7 +8,7 @@ Certain base text strings accept [singular and plural versions](https://kazupon.
 
 ```json
 {
-	"tagsView.inUse": "{count} workflow | {count} workflows",
+	"tagsView.inUse": "{count} workflow | {count} workflows"
 }
 ```
 
@@ -43,7 +43,7 @@ As a convenience, the base text file may contain the special key `_reusableBaseT
 	"duplicateWorkflowDialog.save": "@:_reusableBaseText.save",
 	"saveButton.save": "@:_reusableBaseText.save",
 	"saveButton.saving": "🇩🇪 Saving",
-	"saveButton.saved": "🇩🇪 Saved",
+	"saveButton.saved": "🇩🇪 Saved"
 }
 ```
 
@@ -93,7 +93,7 @@ Currently only the keys `oauth.clientId` and `oauth.clientSecret` are supported
 ```json
 {
 	"_reusableDynamicText.oauth2.clientId": "🇩🇪 Client ID",
-	"_reusableDynamicText.oauth2.clientSecret": "🇩🇪 Client Secret",
+	"_reusableDynamicText.oauth2.clientSecret": "🇩🇪 Client Secret"
 }
 ```
 
@@ -105,7 +105,7 @@ Webhook node:
 
 ```json
 {
-	"nodeView.eventTriggerDescription": "🇩🇪 Waiting for you to call the Test URL",
+	"nodeView.eventTriggerDescription": "🇩🇪 Waiting for you to call the Test URL"
 }
 ```
 
diff --git a/packages/editor-ui/src/plugins/i18n/docs/README.md b/packages/editor-ui/src/plugins/i18n/docs/README.md
index 2e91b3cef6..344ae7ab57 100644
--- a/packages/editor-ui/src/plugins/i18n/docs/README.md
+++ b/packages/editor-ui/src/plugins/i18n/docs/README.md
@@ -18,6 +18,7 @@ Currently, n8n does _not_ allow for internalization of:
 - options that rely on `loadOptionsMethod`.
 
 Pending functionality:
+
 - Search in nodes panel by translated node name
 - UI responsiveness to differently sized strings
 - Locale-aware number formatting
@@ -101,6 +102,7 @@ credentials
 			├── githubApi.json
 			└── githubOAuth2Api.json
 ```
+
 Every credential must have its own credential translation file.
 
 The name of the credential translation file must be sourced from the credential's `description.name` property:
@@ -186,7 +188,7 @@ The object for each node credential parameter allows for the keys `displayName`,
 	"server.displayName": "🇩🇪 Github Server",
 	"server.description": "🇩🇪 The server to connect to. Only has to be set if Github Enterprise is used.",
 	"user.placeholder": "🇩🇪 Hans",
-	"accessToken.placeholder": "🇩🇪 123",
+	"accessToken.placeholder": "🇩🇪 123"
 }
 ```
 
@@ -218,7 +220,7 @@ export class Github implements INodeType {
 ```json
 {
 	"header.displayName": "🇩🇪 GitHub",
-	"header.description": "🇩🇪 Consume GitHub API",
+	"header.description": "🇩🇪 Consume GitHub API"
 }
 ```
 
@@ -255,7 +257,7 @@ export class Github implements INodeType {
 
 ```json
 {
-	"nodeView.resource.displayName": "🇩🇪 Resource",
+	"nodeView.resource.displayName": "🇩🇪 Resource"
 }
 ```
 
@@ -280,7 +282,7 @@ Allowed keys: `displayName`, `description`, `placeholder`
 {
 	"nodeView.owner.displayName": "🇩🇪 Repository Owner",
 	"nodeView.owner.placeholder": "🇩🇪 n8n-io",
-	"nodeView.owner.description": "🇩🇪 Owner of the repository",
+	"nodeView.owner.description": "🇩🇪 Owner of the repository"
 }
 ```
 
@@ -319,7 +321,7 @@ Allowed subkeys: `options.{optionName}.displayName` and `options.{optionName}.de
 	"nodeView.resource.displayName": "🇩🇪 Resource",
 	"nodeView.resource.description": "🇩🇪 Resource to operate on",
 	"nodeView.resource.options.file.name": "🇩🇪 File",
-	"nodeView.resource.options.issue.name": "🇩🇪 Issue",
+	"nodeView.resource.options.issue.name": "🇩🇪 Issue"
 }
 ```
 
@@ -333,7 +335,7 @@ For nodes whose credentials may be used in the HTTP Request node, an additional
 {
 	"nodeView.resource.options.file.name": "🇩🇪 File",
 	"nodeView.resource.options.issue.name": "🇩🇪 Issue",
-	"nodeView.resource.options.__CUSTOM_API_CALL__.name": "🇩🇪 Custom API Call",
+	"nodeView.resource.options.__CUSTOM_API_CALL__.name": "🇩🇪 Custom API Call"
 }
 ```
 
@@ -444,7 +446,7 @@ Example of `fixedCollection` parameter:
 	"nodeView.additionalParameters.options.author.values.name.placeholder": "🇩🇪 Jan",
 	"nodeView.additionalParameters.options.author.values.email.displayName": "🇩🇪 Email",
 	"nodeView.additionalParameters.options.author.values.email.description": "🇩🇪 Email of the author of the commit",
-	"nodeView.additionalParameters.options.author.values.email.placeholder": "🇩🇪 jan@n8n.io",
+	"nodeView.additionalParameters.options.author.values.email.placeholder": "🇩🇪 jan@n8n.io"
 }
 ```
 
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index 96e88e5dbb..f68c5f1da4 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -7,15 +7,13 @@ import {
 	isNestedInCollectionLike,
 	normalize,
 	insertOptionsAndValues,
-} from "./utils";
-import {
-	locale,
-} from 'n8n-design-system';
+} from './utils';
+import { locale } from 'n8n-design-system';
 
 import englishBaseText from './locales/en.json';
-import { useUIStore } from "@/stores/ui";
-import { useNDVStore } from "@/stores/ndv";
-import {INodeProperties, INodePropertyCollection, INodePropertyOptions} from "n8n-workflow";
+import { useUIStore } from '@/stores/ui';
+import { useNDVStore } from '@/stores/ndv';
+import { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 
 Vue.use(VueI18n);
 locale.use('en');
@@ -26,16 +24,19 @@ export function I18nPlugin(vue: typeof Vue): void {
 	i18n = new I18nClass();
 
 	Object.defineProperty(vue, '$locale', {
-		get() { return i18n; },
+		get() {
+			return i18n;
+		},
 	});
 
 	Object.defineProperty(vue.prototype, '$locale', {
-		get() { return i18n; },
+		get() {
+			return i18n;
+		},
 	});
 }
 
 export class I18nClass {
-
 	private get i18n(): VueI18n {
 		return i18nInstance;
 	}
@@ -73,9 +74,7 @@ export class I18nClass {
 	/**
 	 * Render a string of dynamic text, i.e. a string with a constructed path to the localized value.
 	 */
-	private dynamicRender(
-		{ key, fallback }: { key: string; fallback?: string; },
-	) {
+	private dynamicRender({ key, fallback }: { key: string; fallback?: string }) {
 		return this.i18n.te(key) ? this.i18n.t(key).toString() : fallback ?? '';
 	}
 
@@ -83,27 +82,24 @@ export class I18nClass {
 	 * Render a string of header text (a node's name and description),
 	 * used variously in the nodes panel, under the node icon, etc.
 	 */
-	headerText(arg: { key: string; fallback: string; }) {
+	headerText(arg: { key: string; fallback: string }) {
 		return this.dynamicRender(arg);
 	}
 
 	/**
 	 * Namespace for methods to render text in the credentials details modal.
 	 */
-	credText () {
+	credText() {
 		const uiStore = useUIStore();
 		const credentialType = uiStore.activeCredentialType;
 		const credentialPrefix = `n8n-nodes-base.credentials.${credentialType}`;
 		const context = this;
 
 		return {
-
 			/**
 			 * Display name for a top-level param.
 			 */
-			inputLabelDisplayName(
-				{ name: parameterName, displayName }: INodeProperties,
-			) {
+			inputLabelDisplayName({ name: parameterName, displayName }: INodeProperties) {
 				if (['clientId', 'clientSecret'].includes(parameterName)) {
 					return context.dynamicRender({
 						key: `_reusableDynamicText.oauth2.${parameterName}`,
@@ -120,9 +116,7 @@ export class I18nClass {
 			/**
 			 * Hint for a top-level param.
 			 */
-			hint(
-				{ name: parameterName, hint }: INodeProperties,
-			) {
+			hint({ name: parameterName, hint }: INodeProperties) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.hint`,
 					fallback: hint,
@@ -132,9 +126,7 @@ export class I18nClass {
 			/**
 			 * Description (tooltip text) for an input label param.
 			 */
-			inputLabelDescription(
-				{ name: parameterName, description }: INodeProperties,
-			) {
+			inputLabelDescription({ name: parameterName, description }: INodeProperties) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.description`,
 					fallback: description,
@@ -170,9 +162,7 @@ export class I18nClass {
 			/**
 			 * Placeholder for a `string` param.
 			 */
-			placeholder(
-				{ name: parameterName, placeholder }: INodeProperties,
-			) {
+			placeholder({ name: parameterName, placeholder }: INodeProperties) {
 				return context.dynamicRender({
 					key: `${credentialPrefix}.${parameterName}.placeholder`,
 					fallback: placeholder,
@@ -185,7 +175,7 @@ export class I18nClass {
 	 * Namespace for methods to render text in the node details view,
 	 * except for `eventTriggerDescription`.
 	 */
-	nodeText () {
+	nodeText() {
 		const ndvStore = useNDVStore();
 		const activeNode = ndvStore.activeNode;
 		const nodeType = activeNode ? this.shortNodeType(activeNode.type as string) : ''; // unused in eventTriggerDescription
@@ -196,10 +186,7 @@ export class I18nClass {
 			/**
 			 * Display name for an input label, whether top-level or nested.
 			 */
-			inputLabelDisplayName(
-				parameter: INodeProperties,
-				path: string,
-			) {
+			inputLabelDisplayName(parameter: INodeProperties, path: string) {
 				const middleKey = deriveMiddleKey(path, parameter);
 
 				return context.dynamicRender({
@@ -211,10 +198,7 @@ export class I18nClass {
 			/**
 			 * Description (tooltip text) for an input label, whether top-level or nested.
 			 */
-			inputLabelDescription(
-				parameter: INodeProperties,
-				path: string,
-			) {
+			inputLabelDescription(parameter: INodeProperties, path: string) {
 				const middleKey = deriveMiddleKey(path, parameter);
 
 				return context.dynamicRender({
@@ -226,10 +210,7 @@ export class I18nClass {
 			/**
 			 * Hint for an input, whether top-level or nested.
 			 */
-			hint(
-				parameter: INodeProperties,
-				path: string,
-			) {
+			hint(parameter: INodeProperties, path: string) {
 				const middleKey = deriveMiddleKey(path, parameter);
 
 				return context.dynamicRender({
@@ -244,10 +225,7 @@ export class I18nClass {
 			 * - For an input label, the placeholder is unselectable greyed-out sample text.
 			 * - For a `collection` or `fixedCollection`, the placeholder is the button text.
 			 */
-			placeholder(
-				parameter: INodeProperties,
-				path: string,
-			) {
+			placeholder(parameter: INodeProperties, path: string) {
 				let middleKey = parameter.name;
 
 				if (isNestedInCollectionLike(path)) {
@@ -332,19 +310,14 @@ export class I18nClass {
 			 * Text for a button to add another option inside a `collection` or
 			 * `fixedCollection` param having `multipleValues: true`.
 			 */
-			multipleValueButtonText(
-				{ name: parameterName, typeOptions}: INodeProperties,
-			) {
+			multipleValueButtonText({ name: parameterName, typeOptions }: INodeProperties) {
 				return context.dynamicRender({
 					key: `${initialKey}.${parameterName}.multipleValueButtonText`,
 					fallback: typeOptions?.multipleValueButtonText,
 				});
 			},
 
-			eventTriggerDescription(
-				nodeType: string,
-				eventTriggerDescription: string,
-			) {
+			eventTriggerDescription(nodeType: string, eventTriggerDescription: string) {
 				return context.dynamicRender({
 					key: `n8n-nodes-base.nodes.${nodeType}.nodeView.eventTriggerDescription`,
 					fallback: eventTriggerDescription,
@@ -361,7 +334,9 @@ export const i18nInstance = new VueI18n({
 	silentTranslationWarn: true,
 });
 
-locale.i18n((key: string, options?: {interpolate: object}) => i18nInstance.t(key, options && options.interpolate));
+locale.i18n((key: string, options?: { interpolate: object }) =>
+	i18nInstance.t(key, options && options.interpolate),
+);
 
 const loadedLanguages = ['en'];
 
@@ -416,10 +391,7 @@ export function addNodeTranslation(
 	};
 
 	const newNodesBase = {
-		'n8n-nodes-base': Object.assign(
-			oldNodesBase,
-			{ nodes: updatedNodes },
-		),
+		'n8n-nodes-base': Object.assign(oldNodesBase, { nodes: updatedNodes }),
 	};
 
 	i18nInstance.setLocaleMessage(
@@ -444,10 +416,7 @@ export function addCredentialTranslation(
 	};
 
 	const newNodesBase = {
-		'n8n-nodes-base': Object.assign(
-			oldNodesBase,
-			{ credentials: updatedCredentials },
-		),
+		'n8n-nodes-base': Object.assign(oldNodesBase, { credentials: updatedCredentials }),
 	};
 
 	i18nInstance.setLocaleMessage(
@@ -459,10 +428,7 @@ export function addCredentialTranslation(
 /**
  * Add a node's header strings to the i18n instance's `messages` object.
  */
-export function addHeaders(
-	headers: INodeTranslationHeaders,
-	language: string,
-) {
+export function addHeaders(headers: INodeTranslationHeaders, language: string) {
 	i18nInstance.setLocaleMessage(
 		language,
 		Object.assign(i18nInstance.messages[language], { headers }),
@@ -479,12 +445,10 @@ declare module 'vue/types/vue' {
 	}
 }
 
-type GetBaseTextKey<T> = T extends `_${string}` ? never :  T;
+type GetBaseTextKey<T> = T extends `_${string}` ? never : T;
 
 export type BaseTextKey = GetBaseTextKey<keyof typeof englishBaseText>;
 
-type GetCategoryName<T> = T extends `nodeCreator.categoryNames.${infer C}`
-	? C
-	: never;
+type GetCategoryName<T> = T extends `nodeCreator.categoryNames.${infer C}` ? C : never;
 
 export type CategoryName = GetCategoryName<keyof typeof englishBaseText>;
diff --git a/packages/editor-ui/src/plugins/i18n/utils.ts b/packages/editor-ui/src/plugins/i18n/utils.ts
index 1e89be05b6..da6f5f61be 100644
--- a/packages/editor-ui/src/plugins/i18n/utils.ts
+++ b/packages/editor-ui/src/plugins/i18n/utils.ts
@@ -6,24 +6,15 @@
  *
  * Location: `n8n-nodes-base.nodes.github.nodeView.<middleKey>.placeholder`
  */
-export function deriveMiddleKey(
-	path: string,
-	parameter: { name: string; type: string; },
-) {
+export function deriveMiddleKey(path: string, parameter: { name: string; type: string }) {
 	let middleKey = parameter.name;
 
-	if (
-		isTopLevelCollection(path, parameter) ||
-		isNestedInCollectionLike(path)
-	) {
+	if (isTopLevelCollection(path, parameter) || isNestedInCollectionLike(path)) {
 		const pathSegments = normalize(path).split('.');
 		middleKey = insertOptionsAndValues(pathSegments).join('.');
 	}
 
-	if (
-		isNestedCollection(path, parameter) ||
-		isFixedCollection(path, parameter)
-	) {
+	if (isNestedCollection(path, parameter) || isFixedCollection(path, parameter)) {
 		const pathSegments = [...normalize(path).split('.'), parameter.name];
 		middleKey = insertOptionsAndValues(pathSegments).join('.');
 	}
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index bf1e0e8eca..0d9f12ae3c 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -121,12 +121,11 @@ import {
 	faVideo,
 	faStickyNote as faSolidStickyNote,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-	faStickyNote,
-} from '@fortawesome/free-regular-svg-icons';
+import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-function addIcon(icon: any) { // tslint:disable-line:no-any
+// tslint:disable-next-line:no-any
+function addIcon(icon: any) {
 	library.add(icon as IconDefinition);
 }
 
@@ -251,4 +250,3 @@ addIcon(faUsers);
 addIcon(faVideo);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
-
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 59fcc126cf..c442042fec 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -1,18 +1,14 @@
-import _Vue from "vue";
-import {
-	ITelemetrySettings,
-	ITelemetryTrackProperties,
-	IDataObject,
-} from 'n8n-workflow';
-import { Route } from "vue-router";
+import _Vue from 'vue';
+import { ITelemetrySettings, ITelemetryTrackProperties, IDataObject } from 'n8n-workflow';
+import { Route } from 'vue-router';
 
-import type { INodeCreateElement } from "@/Interface";
-import type { IUserNodesPanelSession } from "./telemetry.types";
-import { useSettingsStore } from "@/stores/settings";
-import { useRootStore } from "@/stores/n8nRootStore";
+import type { INodeCreateElement } from '@/Interface';
+import type { IUserNodesPanelSession } from './telemetry.types';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export class Telemetry {
-	private pageEventQueue: Array<{route: Route}>;
+	private pageEventQueue: Array<{ route: Route }>;
 	private previousPath: string;
 
 	private get rudderStack() {
@@ -35,15 +31,21 @@ export class Telemetry {
 
 	init(
 		telemetrySettings: ITelemetrySettings,
-		{ instanceId, userId, versionCli }: {
+		{
+			instanceId,
+			userId,
+			versionCli,
+		}: {
 			instanceId: string;
 			userId?: string;
-			versionCli: string
+			versionCli: string;
 		},
 	) {
 		if (!telemetrySettings.enabled || !telemetrySettings.config || this.rudderStack) return;
 
-		const { config: { key, url } } = telemetrySettings;
+		const {
+			config: { key, url },
+		} = telemetrySettings;
 
 		const settingsStore = useSettingsStore();
 		const rootStore = useRootStore();
@@ -52,15 +54,11 @@ export class Telemetry {
 
 		const logging = logLevel === 'debug' ? { logLevel: 'DEBUG' } : {};
 
-		this.initRudderStack(
-			key,
-			url,
-			{
-				integrations: { All: false },
-				loadIntegration: false,
-				...logging,
-			},
-		);
+		this.initRudderStack(key, url, {
+			integrations: { All: false },
+			loadIntegration: false,
+			...logging,
+		});
 
 		this.identify(instanceId, userId, versionCli);
 
@@ -72,8 +70,7 @@ export class Telemetry {
 		const traits = { instance_id: instanceId, version_cli: versionCli };
 		if (userId) {
 			this.rudderStack.identify(`${instanceId}#${userId}`, traits);
-		}
-		else {
+		} else {
 			this.rudderStack.reset();
 		}
 	}
@@ -90,22 +87,27 @@ export class Telemetry {
 	}
 
 	page(route: Route) {
-		if (this.rudderStack)	{
-			if (route.path === this.previousPath) { // avoid duplicate requests query is changed for example on search page
+		if (this.rudderStack) {
+			if (route.path === this.previousPath) {
+				// avoid duplicate requests query is changed for example on search page
 				return;
 			}
 			this.previousPath = route.path;
 
 			const pageName = route.name;
-			let properties: {[key: string]: string} = {};
-			if (route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
+			let properties: { [key: string]: string } = {};
+			if (
+				route.meta &&
+				route.meta.telemetry &&
+				typeof route.meta.telemetry.getProperties === 'function'
+			) {
 				properties = route.meta.telemetry.getProperties(route);
 			}
 
-			const category = (route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
+			const category =
+				(route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
 			this.rudderStack.page(category, pageName!, properties);
-		}
-		else {
+		} else {
 			this.pageEventQueue.push({
 				route,
 			});
@@ -115,7 +117,7 @@ export class Telemetry {
 	flushPageEvents() {
 		const queue = this.pageEventQueue;
 		this.pageEventQueue = [];
-		queue.forEach(({route}) => {
+		queue.forEach(({ route }) => {
 			this.page(route);
 		});
 	}
@@ -136,18 +138,28 @@ export class Telemetry {
 					this.track('User changed nodes panel filter', properties);
 					break;
 				case 'nodeCreateList.destroyed':
-					if(this.userNodesPanelSession.data.nodeFilter.length > 0 && this.userNodesPanelSession.data.nodeFilter !== '') {
+					if (
+						this.userNodesPanelSession.data.nodeFilter.length > 0 &&
+						this.userNodesPanelSession.data.nodeFilter !== ''
+					) {
 						this.track('User entered nodes panel search term', this.generateNodesPanelEvent());
 					}
 					break;
 				case 'nodeCreateList.nodeFilterChanged':
-					if((properties.newValue as string).length === 0 && this.userNodesPanelSession.data.nodeFilter.length > 0) {
+					if (
+						(properties.newValue as string).length === 0 &&
+						this.userNodesPanelSession.data.nodeFilter.length > 0
+					) {
 						this.track('User entered nodes panel search term', this.generateNodesPanelEvent());
 					}
 
-					if((properties.newValue as string).length > (properties.oldValue as string || '').length) {
+					if (
+						(properties.newValue as string).length > ((properties.oldValue as string) || '').length
+					) {
 						this.userNodesPanelSession.data.nodeFilter = properties.newValue as string;
-						this.userNodesPanelSession.data.resultsNodes = ((properties.filteredNodes || []) as INodeCreateElement[]).map((node: INodeCreateElement) => node.key);
+						this.userNodesPanelSession.data.resultsNodes = (
+							(properties.filteredNodes || []) as INodeCreateElement[]
+						).map((node: INodeCreateElement) => node.key);
 					}
 					break;
 				case 'nodeCreateList.onCategoryExpanded':
@@ -169,7 +181,7 @@ export class Telemetry {
 					break;
 				case 'nodeCreateList.onSubcategorySelected':
 					const selectedProperties = (properties.selected as IDataObject).properties as IDataObject;
-					if(selectedProperties && selectedProperties.subcategory) {
+					if (selectedProperties && selectedProperties.subcategory) {
 						properties.category_name = selectedProperties.subcategory;
 					}
 					properties.is_subcategory = true;
@@ -190,7 +202,7 @@ export class Telemetry {
 	}
 
 	private resetNodesPanelSession() {
-		this.userNodesPanelSession.sessionId = `nodes_panel_session_${(new Date()).valueOf()}`;
+		this.userNodesPanelSession.sessionId = `nodes_panel_session_${new Date().valueOf()}`;
 		this.userNodesPanelSession.data = {
 			nodeFilter: '',
 			resultsNodes: [],
@@ -211,16 +223,16 @@ export class Telemetry {
 		window.rudderanalytics = window.rudderanalytics || [];
 
 		this.rudderStack.methods = [
-			"load",
-			"page",
-			"track",
-			"identify",
-			"alias",
-			"group",
-			"ready",
-			"reset",
-			"getAnonymousId",
-			"setAnonymousId",
+			'load',
+			'page',
+			'track',
+			'identify',
+			'alias',
+			'group',
+			'ready',
+			'reset',
+			'getAnonymousId',
+			'setAnonymousId',
 		];
 
 		this.rudderStack.factory = (method: string) => {
@@ -237,13 +249,13 @@ export class Telemetry {
 		}
 
 		this.rudderStack.loadJS = () => {
-			const script = document.createElement("script");
+			const script = document.createElement('script');
 
-			script.type = "text/javascript";
+			script.type = 'text/javascript';
 			script.async = !0;
-			script.src = "https://cdn.rudderlabs.com/v1/rudder-analytics.min.js";
+			script.src = 'https://cdn.rudderlabs.com/v1/rudder-analytics.min.js';
 
-			const element: Element = document.getElementsByTagName("script")[0];
+			const element: Element = document.getElementsByTagName('script')[0];
 
 			if (element && element.parentNode) {
 				element.parentNode.insertBefore(script, element);
@@ -259,9 +271,13 @@ export const telemetry = new Telemetry();
 
 export function TelemetryPlugin(vue: typeof _Vue): void {
 	Object.defineProperty(vue, '$telemetry', {
-		get() { return telemetry; },
+		get() {
+			return telemetry;
+		},
 	});
 	Object.defineProperty(vue.prototype, '$telemetry', {
-		get() { return telemetry; },
+		get() {
+			return telemetry;
+		},
 	});
 }
diff --git a/packages/editor-ui/src/plugins/telemetry/telemetry.types.ts b/packages/editor-ui/src/plugins/telemetry/telemetry.types.ts
index d6252a68c0..aedd823e6d 100644
--- a/packages/editor-ui/src/plugins/telemetry/telemetry.types.ts
+++ b/packages/editor-ui/src/plugins/telemetry/telemetry.types.ts
@@ -44,44 +44,19 @@ interface RudderStack extends Array<unknown> {
 	 * Native methods
 	 */
 
-	load(
-		writeKey: string,
-		dataPlaneUrl: string,
-		options?: object,
-	): void;
+	load(writeKey: string, dataPlaneUrl: string, options?: object): void;
 
 	ready(): void;
 
-	page(
-		category?: string,
-		name?: string,
-		properties?: object,
-		options?: object,
-	): void;
+	page(category?: string, name?: string, properties?: object, options?: object): void;
 
-	track(
-		event: string,
-		properties?: object,
-		options?: object,
-	): void;
+	track(event: string, properties?: object, options?: object): void;
 
-	identify(
-		id?: string,
-		traits?: object,
-		options?: object,
-	): void;
+	identify(id?: string, traits?: object, options?: object): void;
 
-	alias(
-		to: string,
-		from?: string,
-		options?: object,
-	): void;
+	alias(to: string, from?: string, options?: object): void;
 
-	group(
-		group: string,
-		traits?: object,
-		options?: object,
-	): void;
+	group(group: string, traits?: object, options?: object): void;
 
 	getAnonymousId(): void;
 
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 3ed70a58ec..1253c69858 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -38,7 +38,7 @@ interface IRouteConfig extends RouteConfigSingleView {
 	meta: {
 		nodeView?: boolean;
 		templatesEnabled?: boolean;
-		getRedirect?: () => {name: string} | false;
+		getRedirect?: () => { name: string } | false;
 		permissions: IPermissions;
 		telemetry?: {
 			disabled?: true;
@@ -52,7 +52,7 @@ function getTemplatesRedirect() {
 	const settingsStore = useSettingsStore();
 	const isTemplatesEnabled: boolean = settingsStore.isTemplatesEnabled;
 	if (!isTemplatesEnabled) {
-		return {name: VIEWS.NOT_FOUND};
+		return { name: VIEWS.NOT_FOUND };
 	}
 
 	return false;
@@ -74,7 +74,8 @@ const router = new Router({
 			name: VIEWS.HOMEPAGE,
 			meta: {
 				getRedirect() {
-					const startOnNewWorkflowRouteFlag = window.posthog?.getFeatureFlag?.('start-at-wf-empty-state') === 'test';
+					const startOnNewWorkflowRouteFlag =
+						window.posthog?.getFeatureFlag?.('start-at-wf-empty-state') === 'test';
 					return { name: startOnNewWorkflowRouteFlag ? VIEWS.NEW_WORKFLOW : VIEWS.WORKFLOWS };
 				},
 				permissions: {
@@ -502,7 +503,7 @@ const router = new Router({
 							},
 							deny: {
 								shouldDeny: () => {
-									const settingsStore =  useSettingsStore();
+									const settingsStore = useSettingsStore();
 									return settingsStore.isPublicApiEnabled === false;
 								},
 							},
diff --git a/packages/editor-ui/src/shims.d.ts b/packages/editor-ui/src/shims.d.ts
index 113b1ebaaa..4a96a7cb53 100644
--- a/packages/editor-ui/src/shims.d.ts
+++ b/packages/editor-ui/src/shims.d.ts
@@ -20,9 +20,6 @@ declare global {
 	}
 
 	interface Array<T> {
-    findLast(
-      predicate: (value: T, index: number, obj: T[]) => unknown,
-      thisArg?: any
-    ): T
-  }
+		findLast(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T;
+	}
 }
diff --git a/packages/editor-ui/src/stores/canvas.ts b/packages/editor-ui/src/stores/canvas.ts
index f5bf0674d2..665bedfa25 100644
--- a/packages/editor-ui/src/stores/canvas.ts
+++ b/packages/editor-ui/src/stores/canvas.ts
@@ -7,15 +7,17 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useUIStore } from '@/stores/ui';
 import { INodeUi, XYPosition } from '@/Interface';
-import {
-	scaleBigger,
-	scaleReset,
-	scaleSmaller,
-} from '@/utils';
+import { scaleBigger, scaleReset, scaleSmaller } from '@/utils';
 import { START_NODE_TYPE } from '@/constants';
 import '@/plugins/N8nCustomConnectorType';
 import '@/plugins/PlusEndpointType';
-import { DEFAULT_PLACEHOLDER_TRIGGER_BUTTON, getMidCanvasPosition, getNewNodePosition, getZoomToFit, PLACEHOLDER_TRIGGER_NODE_SIZE } from '@/utils/nodeViewUtils';
+import {
+	DEFAULT_PLACEHOLDER_TRIGGER_BUTTON,
+	getMidCanvasPosition,
+	getNewNodePosition,
+	getZoomToFit,
+	PLACEHOLDER_TRIGGER_NODE_SIZE,
+} from '@/utils/nodeViewUtils';
 
 export const useCanvasStore = defineStore('canvas', () => {
 	const workflowStore = useWorkflowsStore();
@@ -24,10 +26,10 @@ export const useCanvasStore = defineStore('canvas', () => {
 	const jsPlumbInstance = jsPlumb.getInstance();
 
 	const nodes = computed<INodeUi[]>(() => workflowStore.allNodes);
-	const triggerNodes = computed<INodeUi[]>(
-		() => nodes.value.filter(
-				node => node.type === START_NODE_TYPE || nodeTypesStore.isTriggerNode(node.type),
-			),
+	const triggerNodes = computed<INodeUi[]>(() =>
+		nodes.value.filter(
+			(node) => node.type === START_NODE_TYPE || nodeTypesStore.isTriggerNode(node.type),
+		),
 	);
 	const isDemo = ref<boolean>(false);
 	const nodeViewScale = ref<number>(1);
@@ -62,7 +64,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 	};
 
 	const resetZoom = () => {
-		const {scale, offset} = scaleReset({
+		const { scale, offset } = scaleReset({
 			scale: nodeViewScale.value,
 			offset: uiStore.nodeViewOffsetPosition,
 		});
@@ -70,7 +72,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 	};
 
 	const zoomIn = () => {
-		const {scale, offset} = scaleBigger({
+		const { scale, offset } = scaleBigger({
 			scale: nodeViewScale.value,
 			offset: uiStore.nodeViewOffsetPosition,
 		});
@@ -78,7 +80,7 @@ export const useCanvasStore = defineStore('canvas', () => {
 	};
 
 	const zoomOut = () => {
-		const {scale, offset} = scaleSmaller({
+		const { scale, offset } = scaleSmaller({
 			scale: nodeViewScale.value,
 			offset: uiStore.nodeViewOffsetPosition,
 		});
@@ -87,18 +89,21 @@ export const useCanvasStore = defineStore('canvas', () => {
 
 	const zoomToFit = () => {
 		const nodes = getNodesWithPlaceholderNode();
-		if (!nodes.length) { // some unknown workflow executions
+		if (!nodes.length) {
+			// some unknown workflow executions
 			return;
 		}
-		const {zoomLevel, offset} = getZoomToFit(nodes, !isDemo.value);
+		const { zoomLevel, offset } = getZoomToFit(nodes, !isDemo.value);
 		setZoomLevel(zoomLevel, offset);
 	};
 
 	const wheelMoveWorkflow = (e: WheelEvent) => {
 		const normalized = normalizeWheel(e);
 		const offsetPosition = uiStore.nodeViewOffsetPosition;
-		const nodeViewOffsetPositionX = offsetPosition[0] - (e.shiftKey ? normalized.pixelY : normalized.pixelX);
-		const nodeViewOffsetPositionY = offsetPosition[1] - (e.shiftKey ? normalized.pixelX : normalized.pixelY);
+		const nodeViewOffsetPositionX =
+			offsetPosition[0] - (e.shiftKey ? normalized.pixelY : normalized.pixelX);
+		const nodeViewOffsetPositionY =
+			offsetPosition[1] - (e.shiftKey ? normalized.pixelX : normalized.pixelY);
 		uiStore.nodeViewOffsetPosition = [nodeViewOffsetPositionX, nodeViewOffsetPositionY];
 	};
 
diff --git a/packages/editor-ui/src/stores/communityNodes.ts b/packages/editor-ui/src/stores/communityNodes.ts
index 482fc705a8..4caa452a8f 100644
--- a/packages/editor-ui/src/stores/communityNodes.ts
+++ b/packages/editor-ui/src/stores/communityNodes.ts
@@ -1,11 +1,16 @@
-import { getInstalledCommunityNodes, installNewPackage, uninstallPackage, updatePackage } from "@/api/communityNodes";
-import { getAvailableCommunityPackageCount } from "@/api/settings";
-import { defineStore } from "pinia";
-import { useRootStore } from "./n8nRootStore";
+import {
+	getInstalledCommunityNodes,
+	installNewPackage,
+	uninstallPackage,
+	updatePackage,
+} from '@/api/communityNodes';
+import { getAvailableCommunityPackageCount } from '@/api/settings';
+import { defineStore } from 'pinia';
+import { useRootStore } from './n8nRootStore';
 import { PublicInstalledPackage } from 'n8n-workflow';
-import Vue from "vue";
-import { CommunityNodesState, CommunityPackageMap } from "@/Interface";
-import { STORES } from "@/constants";
+import Vue from 'vue';
+import { CommunityNodesState, CommunityPackageMap } from '@/Interface';
+import { STORES } from '@/constants';
 
 const LOADER_DELAY = 300;
 
@@ -16,8 +21,10 @@ export const useCommunityNodesStore = defineStore(STORES.COMMUNITY_NODES, {
 		installedPackages: {},
 	}),
 	getters: {
-		getInstalledPackages() : PublicInstalledPackage[] {
-			return Object.values(this.installedPackages).sort((a, b) => a.packageName.localeCompare(b.packageName));
+		getInstalledPackages(): PublicInstalledPackage[] {
+			return Object.values(this.installedPackages).sort((a, b) =>
+				a.packageName.localeCompare(b.packageName),
+			);
 		},
 		getInstalledPackageByName() {
 			return (name: string): PublicInstalledPackage => this.installedPackages[name];
@@ -33,7 +40,7 @@ export const useCommunityNodesStore = defineStore(STORES.COMMUNITY_NODES, {
 			const rootStore = useRootStore();
 			const installedPackages = await getInstalledCommunityNodes(rootStore.getRestApiContext);
 			this.setInstalledPackages(installedPackages);
-			const timeout = installedPackages.length > 0 ? 0: LOADER_DELAY;
+			const timeout = installedPackages.length > 0 ? 0 : LOADER_DELAY;
 			setTimeout(() => {
 				return;
 			}, timeout);
@@ -44,7 +51,7 @@ export const useCommunityNodesStore = defineStore(STORES.COMMUNITY_NODES, {
 				await installNewPackage(rootStore.getRestApiContext, packageName);
 				await this.fetchInstalledPackages();
 			} catch (error) {
-				throw (error);
+				throw error;
 			}
 		},
 		async uninstallPackage(packageName: string): Promise<void> {
@@ -53,24 +60,30 @@ export const useCommunityNodesStore = defineStore(STORES.COMMUNITY_NODES, {
 				await uninstallPackage(rootStore.getRestApiContext, packageName);
 				this.removePackageByName(packageName);
 			} catch (error) {
-				throw (error);
+				throw error;
 			}
 		},
 		async updatePackage(packageName: string): Promise<void> {
 			try {
 				const rootStore = useRootStore();
 				const packageToUpdate: PublicInstalledPackage = this.getInstalledPackageByName(packageName);
-				const updatedPackage: PublicInstalledPackage = await updatePackage(rootStore.getRestApiContext, packageToUpdate.packageName);
+				const updatedPackage: PublicInstalledPackage = await updatePackage(
+					rootStore.getRestApiContext,
+					packageToUpdate.packageName,
+				);
 				this.updatePackageObject(updatedPackage);
 			} catch (error) {
-				throw (error);
+				throw error;
 			}
 		},
 		setInstalledPackages(packages: PublicInstalledPackage[]) {
-			this.installedPackages = packages.reduce((packageMap: CommunityPackageMap, pack: PublicInstalledPackage) => {
-				packageMap[pack.packageName] = pack;
-				return packageMap;
-			}, {});
+			this.installedPackages = packages.reduce(
+				(packageMap: CommunityPackageMap, pack: PublicInstalledPackage) => {
+					packageMap[pack.packageName] = pack;
+					return packageMap;
+				},
+				{},
+			);
 		},
 		removePackageByName(name: string): void {
 			Vue.delete(this.installedPackages, name);
diff --git a/packages/editor-ui/src/stores/credentials.ts b/packages/editor-ui/src/stores/credentials.ts
index 04231f073f..6944f886bf 100644
--- a/packages/editor-ui/src/stores/credentials.ts
+++ b/packages/editor-ui/src/stores/credentials.ts
@@ -1,16 +1,40 @@
-import { createNewCredential, deleteCredential, getAllCredentials, getCredentialData, getCredentialsNewName, getCredentialTypes, oAuth1CredentialAuthorize, oAuth2CredentialAuthorize, testCredential, updateCredential } from "@/api/credentials";
-import { setCredentialSharedWith } from "@/api/credentials.ee";
-import { getAppNameFromCredType } from "@/utils";
-import { EnterpriseEditionFeature, STORES } from "@/constants";
-import { ICredentialMap, ICredentialsDecryptedResponse, ICredentialsResponse, ICredentialsState, ICredentialTypeMap } from "@/Interface";
-import { i18n } from "@/plugins/i18n";
-import { ICredentialsDecrypted, ICredentialType, INodeCredentialTestResult, INodeProperties, INodeTypeDescription, IUser } from "n8n-workflow";
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useRootStore } from "./n8nRootStore";
-import { useNodeTypesStore } from "./nodeTypes";
-import { useSettingsStore } from "./settings";
-import { useUsersStore } from "./users";
+import {
+	createNewCredential,
+	deleteCredential,
+	getAllCredentials,
+	getCredentialData,
+	getCredentialsNewName,
+	getCredentialTypes,
+	oAuth1CredentialAuthorize,
+	oAuth2CredentialAuthorize,
+	testCredential,
+	updateCredential,
+} from '@/api/credentials';
+import { setCredentialSharedWith } from '@/api/credentials.ee';
+import { getAppNameFromCredType } from '@/utils';
+import { EnterpriseEditionFeature, STORES } from '@/constants';
+import {
+	ICredentialMap,
+	ICredentialsDecryptedResponse,
+	ICredentialsResponse,
+	ICredentialsState,
+	ICredentialTypeMap,
+} from '@/Interface';
+import { i18n } from '@/plugins/i18n';
+import {
+	ICredentialsDecrypted,
+	ICredentialType,
+	INodeCredentialTestResult,
+	INodeProperties,
+	INodeTypeDescription,
+	IUser,
+} from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useRootStore } from './n8nRootStore';
+import { useNodeTypesStore } from './nodeTypes';
+import { useSettingsStore } from './settings';
+import { useUsersStore } from './users';
 
 const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
 const DEFAULT_CREDENTIAL_POSTFIX = 'account';
@@ -26,22 +50,27 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 			return this.credentialTypes;
 		},
 		allCredentialTypes(): ICredentialType[] {
-			return Object.values(this.credentialTypes)
-				.sort((a, b) => a.displayName.localeCompare(b.displayName));
+			return Object.values(this.credentialTypes).sort((a, b) =>
+				a.displayName.localeCompare(b.displayName),
+			);
 		},
 		allCredentials(): ICredentialsResponse[] {
-			return Object.values(this.credentials)
-				.sort((a, b) => a.name.localeCompare(b.name));
+			return Object.values(this.credentials).sort((a, b) => a.name.localeCompare(b.name));
 		},
-		allCredentialsByType(): {[type: string]: ICredentialsResponse[]} {
+		allCredentialsByType(): { [type: string]: ICredentialsResponse[] } {
 			const credentials = this.allCredentials;
 			const types = this.allCredentialTypes;
 
-			return types.reduce((accu: {[type: string]: ICredentialsResponse[]}, type: ICredentialType) => {
-				accu[type.name] = credentials.filter((cred: ICredentialsResponse) => cred.type === type.name);
+			return types.reduce(
+				(accu: { [type: string]: ICredentialsResponse[] }, type: ICredentialType) => {
+					accu[type.name] = credentials.filter(
+						(cred: ICredentialsResponse) => cred.type === type.name,
+					);
 
-				return accu;
-			}, {});
+					return accu;
+				},
+				{},
+			);
 		},
 		getCredentialTypeByName() {
 			return (type: string): ICredentialType => this.credentialTypes[type];
@@ -57,7 +86,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		},
 		getCredentialsByType() {
 			return (credentialType: string): ICredentialsResponse[] => {
-				return (this.allCredentialsByType[credentialType] || []);
+				return this.allCredentialsByType[credentialType] || [];
 			};
 		},
 		getNodesWithAccess() {
@@ -71,7 +100,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 					}
 
 					for (const credentialTypeDescription of nodeType.credentials) {
-						if (credentialTypeDescription.name === credentialTypeName ) {
+						if (credentialTypeDescription.name === credentialTypeName) {
 							return true;
 						}
 					}
@@ -120,11 +149,14 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 	},
 	actions: {
 		setCredentialTypes(credentialTypes: ICredentialType[]): void {
-			this.credentialTypes = credentialTypes.reduce((accu: ICredentialTypeMap, cred: ICredentialType) => {
-				accu[cred.name] = cred;
+			this.credentialTypes = credentialTypes.reduce(
+				(accu: ICredentialTypeMap, cred: ICredentialType) => {
+					accu[cred.name] = cred;
 
-				return accu;
-			}, {});
+					return accu;
+				},
+				{},
+			);
 		},
 		setCredentials(credentials: ICredentialsResponse[]): void {
 			this.credentials = credentials.reduce((accu: ICredentialMap, cred: ICredentialsResponse) => {
@@ -143,7 +175,10 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		},
 		upsertCredential(credential: ICredentialsResponse): void {
 			if (credential.id) {
-				Vue.set(this.credentials, credential.id, { ...this.credentials[credential.id], ...credential });
+				Vue.set(this.credentials, credential.id, {
+					...this.credentials[credential.id],
+					...credential,
+				});
 			}
 		},
 		enableOAuthCredential(credential: ICredentialsResponse): void {
@@ -163,7 +198,11 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 			this.setCredentials(credentials);
 			return credentials;
 		},
-		async getCredentialData({ id }: {id: string}): Promise<ICredentialsResponse | ICredentialsDecryptedResponse | undefined> {
+		async getCredentialData({
+			id,
+		}: {
+			id: string;
+		}): Promise<ICredentialsResponse | ICredentialsDecryptedResponse | undefined> {
 			const rootStore = useRootStore();
 			return await getCredentialData(rootStore.getRestApiContext, id);
 		},
@@ -194,7 +233,10 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 			}
 			return credential;
 		},
-		async updateCredential(params: {data: ICredentialsDecrypted, id: string}): Promise<ICredentialsResponse> {
+		async updateCredential(params: {
+			data: ICredentialsDecrypted;
+			id: string;
+		}): Promise<ICredentialsResponse> {
 			const { id, data } = params;
 			const rootStore = useRootStore();
 			const settingsStore = useSettingsStore();
@@ -223,7 +265,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 
 			return credential;
 		},
-		async deleteCredential({ id }: {id: string}) {
+		async deleteCredential({ id }: { id: string }) {
 			const rootStore = useRootStore();
 			const deleted = await deleteCredential(rootStore.getRestApiContext, id);
 			if (deleted) {
@@ -249,7 +291,10 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 				if (!TYPES_WITH_DEFAULT_NAME.includes(credentialTypeName)) {
 					const { displayName } = this.getCredentialTypeByName(credentialTypeName);
 					newName = getAppNameFromCredType(displayName);
-					newName = newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
+					newName =
+						newName.length > 0
+							? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}`
+							: DEFAULT_CREDENTIAL_NAME;
 				}
 				const rootStore = useRootStore();
 				const res = await getCredentialsNewName(rootStore.getRestApiContext, newName);
@@ -260,34 +305,31 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		},
 
 		// Enterprise edition actions
-		setCredentialOwnedBy(payload: { credentialId: string, ownedBy: Partial<IUser> }) {
+		setCredentialOwnedBy(payload: { credentialId: string; ownedBy: Partial<IUser> }) {
 			Vue.set(this.credentials[payload.credentialId], 'ownedBy', payload.ownedBy);
 		},
-		async setCredentialSharedWith(payload: { sharedWith: IUser[]; credentialId: string; }) {
-			if(useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
-				await setCredentialSharedWith(
-					useRootStore().getRestApiContext,
-					payload.credentialId,
-					{
-						shareWithIds: payload.sharedWith.map((sharee) => sharee.id),
-					},
-				);
+		async setCredentialSharedWith(payload: { sharedWith: IUser[]; credentialId: string }) {
+			if (useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
+				await setCredentialSharedWith(useRootStore().getRestApiContext, payload.credentialId, {
+					shareWithIds: payload.sharedWith.map((sharee) => sharee.id),
+				});
 				Vue.set(this.credentials[payload.credentialId], 'sharedWith', payload.sharedWith);
 			}
 		},
-		addCredentialSharee(payload: { credentialId: string, sharee: Partial<IUser> }): void {
+		addCredentialSharee(payload: { credentialId: string; sharee: Partial<IUser> }): void {
 			Vue.set(
 				this.credentials[payload.credentialId],
 				'sharedWith',
 				(this.credentials[payload.credentialId].sharedWith || []).concat([payload.sharee]),
 			);
 		},
-		removeCredentialSharee(payload: { credentialId: string, sharee: Partial<IUser> }): void {
+		removeCredentialSharee(payload: { credentialId: string; sharee: Partial<IUser> }): void {
 			Vue.set(
 				this.credentials[payload.credentialId],
 				'sharedWith',
-				(this.credentials[payload.credentialId].sharedWith || [])
-					.filter((sharee) => sharee.id !== payload.sharee.id),
+				(this.credentials[payload.credentialId].sharedWith || []).filter(
+					(sharee) => sharee.id !== payload.sharee.id,
+				),
 			);
 		},
 	},
diff --git a/packages/editor-ui/src/stores/history.ts b/packages/editor-ui/src/stores/history.ts
index 4285d9fb03..5f79df10c9 100644
--- a/packages/editor-ui/src/stores/history.ts
+++ b/packages/editor-ui/src/stores/history.ts
@@ -1,8 +1,8 @@
 import { AddConnectionCommand, COMMANDS, RemoveConnectionCommand } from './../models/history';
-import { BulkCommand, Command, Undoable, MoveNodeCommand } from "@/models/history";
-import { STORES } from "@/constants";
-import { HistoryState } from "@/Interface";
-import { defineStore } from "pinia";
+import { BulkCommand, Command, Undoable, MoveNodeCommand } from '@/models/history';
+import { STORES } from '@/constants';
+import { HistoryState } from '@/Interface';
+import { defineStore } from 'pinia';
 
 const STACK_LIMIT = 100;
 
@@ -24,7 +24,8 @@ export const useHistoryStore = defineStore(STORES.HISTORY, {
 		pushCommandToUndo(undoable: Command, clearRedo = true): void {
 			if (!this.bulkInProgress) {
 				if (this.currentBulkAction) {
-					const alreadyIn = this.currentBulkAction.commands.find(c => c.isEqualTo(undoable)) !== undefined;
+					const alreadyIn =
+						this.currentBulkAction.commands.find((c) => c.isEqualTo(undoable)) !== undefined;
 					if (!alreadyIn) {
 						this.currentBulkAction.commands.push(undoable);
 					}
diff --git a/packages/editor-ui/src/stores/n8nRootStore.ts b/packages/editor-ui/src/stores/n8nRootStore.ts
index 2b5e9c1fc4..702bb23553 100644
--- a/packages/editor-ui/src/stores/n8nRootStore.ts
+++ b/packages/editor-ui/src/stores/n8nRootStore.ts
@@ -8,7 +8,11 @@ import { useNodeTypesStore } from './nodeTypes';
 export const useRootStore = defineStore(STORES.ROOT, {
 	state: (): RootState => ({
 		// @ts-ignore
-		baseUrl: import.meta.env.VUE_APP_URL_BASE_API ? import.meta.env.VUE_APP_URL_BASE_API : (window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH),
+		baseUrl: import.meta.env.VUE_APP_URL_BASE_API
+			? import.meta.env.VUE_APP_URL_BASE_API
+			: window.BASE_PATH === '/%BASE_PATH%/'
+			? '/'
+			: window.BASE_PATH,
 		defaultLocale: 'en',
 		endpointWebhook: 'webhook',
 		endpointWebhookTest: 'webhook-test',
@@ -59,7 +63,7 @@ export const useRootStore = defineStore(STORES.ROOT, {
 		/**
 		 * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
 		 */
-		 nativelyNumberSuffixedDefaults: (): string[] => {
+		nativelyNumberSuffixedDefaults: (): string[] => {
 			return useNodeTypesStore().allNodeTypes.reduce<string[]>((acc, cur) => {
 				if (/\d$/.test(cur.defaults.name as string)) acc.push(cur.defaults.name as string);
 				return acc;
diff --git a/packages/editor-ui/src/stores/ndv.ts b/packages/editor-ui/src/stores/ndv.ts
index a3c5c8104c..2b74fe0044 100644
--- a/packages/editor-ui/src/stores/ndv.ts
+++ b/packages/editor-ui/src/stores/ndv.ts
@@ -1,17 +1,17 @@
-import { STORES } from "@/constants";
-import { INodeUi, IRunDataDisplayMode, NDVState, NodePanelType, XYPosition } from "@/Interface";
-import { IRunData } from "n8n-workflow";
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useWorkflowsStore } from "./workflows";
+import { STORES } from '@/constants';
+import { INodeUi, IRunDataDisplayMode, NDVState, NodePanelType, XYPosition } from '@/Interface';
+import { IRunData } from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useWorkflowsStore } from './workflows';
 
-export const useNDVStore =  defineStore(STORES.NDV, {
+export const useNDVStore = defineStore(STORES.NDV, {
 	state: (): NDVState => ({
 		activeNodeName: null,
 		mainPanelDimensions: {},
 		sessionId: '',
 		input: {
-			displayMode: window.posthog?.isFeatureEnabled?.('schema-view') ? 'schema': 'table',
+			displayMode: window.posthog?.isFeatureEnabled?.('schema-view') ? 'schema' : 'table',
 			nodeName: undefined,
 			run: undefined,
 			branch: undefined,
@@ -51,13 +51,19 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 			const executionData = workflowsStore.getWorkflowExecution;
 			const inputNodeName: string | undefined = this.input.nodeName;
 			const inputRunIndex: number = this.input.run ?? 0;
-			const inputBranchIndex: number = this.input.branch?? 0;
+			const inputBranchIndex: number = this.input.branch ?? 0;
 
-			if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
+			if (
+				!executionData ||
+				!inputNodeName ||
+				inputRunIndex === undefined ||
+				inputBranchIndex === undefined
+			) {
 				return [];
 			}
 
-			return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
+			return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data
+				?.main?.[inputBranchIndex];
 		},
 		getPanelDisplayMode() {
 			return (panel: NodePanelType) => this[panel].displayMode;
@@ -86,7 +92,7 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		getMainPanelDimensions() {
 			return (panelType: string) => {
 				const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
-				return {...defaults, ...this.mainPanelDimensions[panelType]};
+				return { ...defaults, ...this.mainPanelDimensions[panelType] };
 			};
 		},
 		draggableStickyPos(): XYPosition | null {
@@ -109,26 +115,28 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		setInputNodeName(name: string | undefined): void {
 			Vue.set(this.input, 'nodeName', name);
 		},
-		setInputRunIndex(run?: string): void  {
+		setInputRunIndex(run?: string): void {
 			Vue.set(this.input, 'run', run);
 		},
-		setMainPanelDimensions(params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}): void  {
-			Vue.set(
-				this.mainPanelDimensions,
-				params.panelType,
-				{...this.mainPanelDimensions[params.panelType], ...params.dimensions },
-			);
+		setMainPanelDimensions(params: {
+			panelType: string;
+			dimensions: { relativeLeft?: number; relativeRight?: number; relativeWidth?: number };
+		}): void {
+			Vue.set(this.mainPanelDimensions, params.panelType, {
+				...this.mainPanelDimensions[params.panelType],
+				...params.dimensions,
+			});
 		},
-		setNDVSessionId(): void  {
+		setNDVSessionId(): void {
 			Vue.set(this, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
 		},
-		resetNDVSessionId(): void  {
+		resetNDVSessionId(): void {
 			Vue.set(this, 'sessionId', '');
 		},
-		setPanelDisplayMode(params: {pane: NodePanelType, mode: IRunDataDisplayMode}): void {
+		setPanelDisplayMode(params: { pane: NodePanelType; mode: IRunDataDisplayMode }): void {
 			Vue.set(this[params.pane], 'displayMode', params.mode);
 		},
-		setOutputPanelEditModeEnabled(isEnabled: boolean): void  {
+		setOutputPanelEditModeEnabled(isEnabled: boolean): void {
 			Vue.set(this.output.editMode, 'enabled', isEnabled);
 		},
 		setOutputPanelEditModeValue(payload: string): void {
@@ -137,7 +145,7 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		setMappableNDVInputFocus(paramName: string): void {
 			Vue.set(this, 'focusedMappableInput', paramName);
 		},
-		draggableStartDragging({type, data}: {type: string, data: string}): void {
+		draggableStartDragging({ type, data }: { type: string; data: string }): void {
 			this.draggable = {
 				isDragging: true,
 				type,
@@ -161,8 +169,8 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		setDraggableCanDrop(canDrop: boolean): void {
 			Vue.set(this.draggable, 'canDrop', canDrop);
 		},
-		setMappingTelemetry(telemetry: {[key: string]: string | number | boolean}): void {
-			this.mappingTelemetry = {...this.mappingTelemetry, ...telemetry};
+		setMappingTelemetry(telemetry: { [key: string]: string | number | boolean }): void {
+			this.mappingTelemetry = { ...this.mappingTelemetry, ...telemetry };
 		},
 		resetMappingTelemetry(): void {
 			this.mappingTelemetry = {};
@@ -170,10 +178,10 @@ export const useNDVStore =  defineStore(STORES.NDV, {
 		setHoveringItem(item: null | NDVState['hoveringItem']): void {
 			Vue.set(this, 'hoveringItem', item);
 		},
-		setNDVBranchIndex(e: {pane: 'input' | 'output', branchIndex: number}): void {
+		setNDVBranchIndex(e: { pane: 'input' | 'output'; branchIndex: number }): void {
 			Vue.set(this[e.pane], 'branch', e.branchIndex);
 		},
-		setNDVPanelDataIsEmpty(payload: {panel: 'input' | 'output', isEmpty: boolean}): void {
+		setNDVPanelDataIsEmpty(payload: { panel: 'input' | 'output'; isEmpty: boolean }): void {
 			Vue.set(this[payload.panel].data, 'isEmpty', payload.isEmpty);
 		},
 	},
diff --git a/packages/editor-ui/src/stores/nodeCreator.ts b/packages/editor-ui/src/stores/nodeCreator.ts
index a9f28d6e09..86a3246c6b 100644
--- a/packages/editor-ui/src/stores/nodeCreator.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.ts
@@ -1,7 +1,23 @@
 import startCase from 'lodash.startCase';
-import { defineStore } from "pinia";
-import { INodePropertyCollection, INodePropertyOptions, IDataObject, INodeProperties, INodeTypeDescription, deepCopy, INodeParameters, INodeActionTypeDescription } from 'n8n-workflow';
-import { STORES, MANUAL_TRIGGER_NODE_TYPE, CORE_NODES_CATEGORY, CALENDLY_TRIGGER_NODE_TYPE, TRIGGER_NODE_FILTER, WEBHOOK_NODE_TYPE } from "@/constants";
+import { defineStore } from 'pinia';
+import {
+	INodePropertyCollection,
+	INodePropertyOptions,
+	IDataObject,
+	INodeProperties,
+	INodeTypeDescription,
+	deepCopy,
+	INodeParameters,
+	INodeActionTypeDescription,
+} from 'n8n-workflow';
+import {
+	STORES,
+	MANUAL_TRIGGER_NODE_TYPE,
+	CORE_NODES_CATEGORY,
+	CALENDLY_TRIGGER_NODE_TYPE,
+	TRIGGER_NODE_FILTER,
+	WEBHOOK_NODE_TYPE,
+} from '@/constants';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useWorkflowsStore } from './workflows';
 import { CUSTOM_API_CALL_KEY, ALL_NODE_FILTER } from '@/constants';
@@ -12,28 +28,40 @@ import { Telemetry } from '@/plugins/telemetry';
 
 const PLACEHOLDER_RECOMMENDED_ACTION_KEY = 'placeholder_recommended';
 
-const customNodeActionsParsers: {[key: string]: (matchedProperty: INodeProperties, nodeTypeDescription: INodeTypeDescription) => INodeActionTypeDescription[] | undefined} = {
+const customNodeActionsParsers: {
+	[key: string]: (
+		matchedProperty: INodeProperties,
+		nodeTypeDescription: INodeTypeDescription,
+	) => INodeActionTypeDescription[] | undefined;
+} = {
 	['n8n-nodes-base.hubspotTrigger']: (matchedProperty, nodeTypeDescription) => {
 		const collection = matchedProperty?.options?.[0] as INodePropertyCollection;
 
-		return (collection?.values[0]?.options as INodePropertyOptions[])?.map((categoryItem): INodeActionTypeDescription => ({
-			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
-			actionKey: categoryItem.value as string,
-			displayName: i18n.baseText('nodeCreator.actionsCategory.onEvent', {
-				interpolate: {event: startCase(categoryItem.name)},
+		return (collection?.values[0]?.options as INodePropertyOptions[])?.map(
+			(categoryItem): INodeActionTypeDescription => ({
+				...getNodeTypeBase(
+					nodeTypeDescription,
+					i18n.baseText('nodeCreator.actionsCategory.recommended'),
+				),
+				actionKey: categoryItem.value as string,
+				displayName: i18n.baseText('nodeCreator.actionsCategory.onEvent', {
+					interpolate: { event: startCase(categoryItem.name) },
+				}),
+				description: categoryItem.description || '',
+				displayOptions: matchedProperty.displayOptions,
+				values: { eventsUi: { eventValues: [{ name: categoryItem.value }] } },
 			}),
-			description: categoryItem.description || '',
-			displayOptions: matchedProperty.displayOptions,
-			values: { eventsUi: { eventValues: [{ name: categoryItem.value }] } },
-		}));
+		);
 	},
 };
 
 function filterSinglePlaceholderAction(actions: INodeActionTypeDescription[]) {
-	return actions.filter((action: INodeActionTypeDescription, _: number, arr: INodeActionTypeDescription[]) => {
-		const isPlaceholderTriggerAction = action.actionKey === PLACEHOLDER_RECOMMENDED_ACTION_KEY;
-		return !isPlaceholderTriggerAction || (isPlaceholderTriggerAction && arr.length > 1);
-	});
+	return actions.filter(
+		(action: INodeActionTypeDescription, _: number, arr: INodeActionTypeDescription[]) => {
+			const isPlaceholderTriggerAction = action.actionKey === PLACEHOLDER_RECOMMENDED_ACTION_KEY;
+			return !isPlaceholderTriggerAction || (isPlaceholderTriggerAction && arr.length > 1);
+		},
+	);
 }
 
 function getNodeTypeBase(nodeTypeDescription: INodeTypeDescription, category: string) {
@@ -56,11 +84,14 @@ function getNodeTypeBase(nodeTypeDescription: INodeTypeDescription, category: st
 	};
 }
 
-function operationsCategory(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+function operationsCategory(
+	nodeTypeDescription: INodeTypeDescription,
+): INodeActionTypeDescription[] {
 	if (!!nodeTypeDescription.properties.find((property) => property.name === 'resource')) return [];
 
-	const matchedProperty = nodeTypeDescription.properties
-		.find((property) =>property.name?.toLowerCase() === 'operation');
+	const matchedProperty = nodeTypeDescription.properties.find(
+		(property) => property.name?.toLowerCase() === 'operation',
+	);
 
 	if (!matchedProperty || !matchedProperty.options) return [];
 
@@ -69,7 +100,10 @@ function operationsCategory(nodeTypeDescription: INodeTypeDescription): INodeAct
 	);
 
 	const items = filteredOutItems.map((item: INodePropertyOptions) => ({
-		...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.operations')),
+		...getNodeTypeBase(
+			nodeTypeDescription,
+			i18n.baseText('nodeCreator.actionsCategory.operations'),
+		),
 		actionKey: item.value as string,
 		displayName: item.action ?? startCase(item.name),
 		description: item.description ?? '',
@@ -85,7 +119,9 @@ function operationsCategory(nodeTypeDescription: INodeTypeDescription): INodeAct
 	return items;
 }
 
-function recommendedCategory(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+function recommendedCategory(
+	nodeTypeDescription: INodeTypeDescription,
+): INodeActionTypeDescription[] {
 	const matchingKeys = ['event', 'events', 'trigger on'];
 	const isTrigger = nodeTypeDescription.displayName?.toLowerCase().includes('trigger');
 	const matchedProperty = nodeTypeDescription.properties.find((property) =>
@@ -97,29 +133,40 @@ function recommendedCategory(nodeTypeDescription: INodeTypeDescription): INodeAc
 	// Inject placeholder action if no events are available
 	// so user is able to add node to the canvas from the actions panel
 	if (!matchedProperty || !matchedProperty.options) {
-		return [{
-			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
-			actionKey: PLACEHOLDER_RECOMMENDED_ACTION_KEY,
-			displayName: i18n.baseText('nodeCreator.actionsCategory.onNewEvent', {
-				interpolate: {event: nodeTypeDescription.displayName.replace('Trigger', '').trimEnd()},
-			}),
-			description: '',
-		}];
+		return [
+			{
+				...getNodeTypeBase(
+					nodeTypeDescription,
+					i18n.baseText('nodeCreator.actionsCategory.recommended'),
+				),
+				actionKey: PLACEHOLDER_RECOMMENDED_ACTION_KEY,
+				displayName: i18n.baseText('nodeCreator.actionsCategory.onNewEvent', {
+					interpolate: { event: nodeTypeDescription.displayName.replace('Trigger', '').trimEnd() },
+				}),
+				description: '',
+			},
+		];
 	}
 
 	const filteredOutItems = (matchedProperty.options as INodePropertyOptions[]).filter(
 		(categoryItem: INodePropertyOptions) => !['*', '', ' '].includes(categoryItem.name),
 	);
 
-	const customParsedItem = customNodeActionsParsers[nodeTypeDescription.name]?.(matchedProperty, nodeTypeDescription);
+	const customParsedItem = customNodeActionsParsers[nodeTypeDescription.name]?.(
+		matchedProperty,
+		nodeTypeDescription,
+	);
 
 	const items =
 		customParsedItem ??
 		filteredOutItems.map((categoryItem: INodePropertyOptions) => ({
-			...getNodeTypeBase(nodeTypeDescription, i18n.baseText('nodeCreator.actionsCategory.recommended')),
+			...getNodeTypeBase(
+				nodeTypeDescription,
+				i18n.baseText('nodeCreator.actionsCategory.recommended'),
+			),
 			actionKey: categoryItem.value as string,
 			displayName: i18n.baseText('nodeCreator.actionsCategory.onEvent', {
-				interpolate: {event: startCase(categoryItem.name)},
+				interpolate: { event: startCase(categoryItem.name) },
 			}),
 			description: categoryItem.description || '',
 			displayOptions: matchedProperty.displayOptions,
@@ -132,12 +179,16 @@ function recommendedCategory(nodeTypeDescription: INodeTypeDescription): INodeAc
 	return items;
 }
 
-function resourceCategories(nodeTypeDescription: INodeTypeDescription): INodeActionTypeDescription[] {
+function resourceCategories(
+	nodeTypeDescription: INodeTypeDescription,
+): INodeActionTypeDescription[] {
 	const transformedNodes: INodeActionTypeDescription[] = [];
-	const matchedProperties = nodeTypeDescription.properties.filter((property) =>property.displayName?.toLowerCase() === 'resource');
+	const matchedProperties = nodeTypeDescription.properties.filter(
+		(property) => property.displayName?.toLowerCase() === 'resource',
+	);
 
 	matchedProperties.forEach((property) => {
-		(property.options as INodePropertyOptions[] || [])
+		((property.options as INodePropertyOptions[]) || [])
 			.filter((option) => option.value !== CUSTOM_API_CALL_KEY)
 			.forEach((resourceOption, i, options) => {
 				const isSingleResource = options.length === 1;
@@ -152,11 +203,10 @@ function resourceCategories(nodeTypeDescription: INodeTypeDescription): INodeAct
 
 				if (!operations?.options) return;
 
-				const items = (operations.options as INodePropertyOptions[] || []).map(
+				const items = ((operations.options as INodePropertyOptions[]) || []).map(
 					(operationOption) => {
 						const displayName =
-							operationOption.action ??
-							`${resourceOption.name} ${startCase(operationOption.name)}`;
+							operationOption.action ?? `${resourceOption.name} ${startCase(operationOption.name)}`;
 
 						// We need to manually populate displayOptions as they are not present in the node description
 						// if the resource has only one option
@@ -208,20 +258,22 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 		setFilter(search: string) {
 			this.itemsFilter = search;
 		},
-		setAddedNodeActionParameters (action: IUpdateInformation, telemetry?: Telemetry, track = true) {
+		setAddedNodeActionParameters(action: IUpdateInformation, telemetry?: Telemetry, track = true) {
 			const { $onAction: onWorkflowStoreAction } = useWorkflowsStore();
-			const storeWatcher = onWorkflowStoreAction(({ name, after, store: { setLastNodeParameters }, args }) => {
-				if (name !== 'addNode' || args[0].type !== action.key) return;
-				after(() => {
-					setLastNodeParameters(action);
-					if(track) this.trackActionSelected(action, telemetry);
-					storeWatcher();
-				});
-			});
+			const storeWatcher = onWorkflowStoreAction(
+				({ name, after, store: { setLastNodeParameters }, args }) => {
+					if (name !== 'addNode' || args[0].type !== action.key) return;
+					after(() => {
+						setLastNodeParameters(action);
+						if (track) this.trackActionSelected(action, telemetry);
+						storeWatcher();
+					});
+				},
+			);
 
 			return storeWatcher;
 		},
-		trackActionSelected (action: IUpdateInformation, telemetry?: Telemetry) {
+		trackActionSelected(action: IUpdateInformation, telemetry?: Telemetry) {
 			const { $externalHooks } = new externalHooks();
 
 			const payload = {
@@ -240,7 +292,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 				const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY);
 				// Core nodes shouldn't support actions
 				node.actions = [];
-				if(isCoreNode) return node;
+				if (isCoreNode) return node;
 
 				node.actions.push(
 					...recommendedCategory(node),
@@ -253,54 +305,70 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, {
 			return nodesWithActions;
 		},
 		mergedAppNodes(): INodeTypeDescription[] {
-			const mergedNodes = this.visibleNodesWithActions.reduce((acc: Record<string, INodeTypeDescription>, node: INodeTypeDescription) => {
+			const mergedNodes = this.visibleNodesWithActions.reduce(
+				(acc: Record<string, INodeTypeDescription>, node: INodeTypeDescription) => {
+					const clonedNode = deepCopy(node);
+					const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY);
+					const actions = node.actions || [];
+					// Do not merge core nodes
+					const normalizedName = isCoreNode
+						? node.name
+						: node.name.toLowerCase().replace('trigger', '');
+					const existingNode = acc[normalizedName];
 
-				const clonedNode = deepCopy(node);
-				const isCoreNode = node.codex?.categories?.includes(CORE_NODES_CATEGORY);
-				const actions = node.actions || [];
-				// Do not merge core nodes
-				const normalizedName = isCoreNode ? node.name : node.name.toLowerCase().replace('trigger', '');
-				const existingNode = acc[normalizedName];
+					if (existingNode) existingNode.actions?.push(...actions);
+					else acc[normalizedName] = clonedNode;
 
-				if(existingNode) existingNode.actions?.push(...actions);
-				else acc[normalizedName] = clonedNode;
+					if (!isCoreNode) {
+						acc[normalizedName].displayName = node.displayName.replace('Trigger', '');
+					}
 
-				if(!isCoreNode) acc[normalizedName].displayName = node.displayName.replace('Trigger', '');
-
-				acc[normalizedName].actions = filterSinglePlaceholderAction(acc[normalizedName].actions || []);
-				return acc;
-			}, {});
+					acc[normalizedName].actions = filterSinglePlaceholderAction(
+						acc[normalizedName].actions || [],
+					);
+					return acc;
+				},
+				{},
+			);
 			return Object.values(mergedNodes);
 		},
-		getNodeTypesWithManualTrigger: () => (nodeType?: string): string[] => {
-			if(!nodeType) return [];
+		getNodeTypesWithManualTrigger:
+			() =>
+			(nodeType?: string): string[] => {
+				if (!nodeType) return [];
 
-			const { workflowTriggerNodes } = useWorkflowsStore();
-			const isTrigger = nodeType.toLocaleLowerCase().includes('trigger') || nodeType === WEBHOOK_NODE_TYPE;
-			const workflowContainsTrigger = workflowTriggerNodes.length > 0;
-			const isTriggerPanel = useNodeCreatorStore().selectedType === TRIGGER_NODE_FILTER;
+				const { workflowTriggerNodes } = useWorkflowsStore();
+				const isTrigger =
+					nodeType.toLocaleLowerCase().includes('trigger') || nodeType === WEBHOOK_NODE_TYPE;
+				const workflowContainsTrigger = workflowTriggerNodes.length > 0;
+				const isTriggerPanel = useNodeCreatorStore().selectedType === TRIGGER_NODE_FILTER;
 
-			const nodeTypes = !isTrigger && !workflowContainsTrigger && isTriggerPanel
-				? [MANUAL_TRIGGER_NODE_TYPE, nodeType]
-				: [nodeType];
+				const nodeTypes =
+					!isTrigger && !workflowContainsTrigger && isTriggerPanel
+						? [MANUAL_TRIGGER_NODE_TYPE, nodeType]
+						: [nodeType];
 
-			return nodeTypes;
-		},
+				return nodeTypes;
+			},
 
-		getActionData: () => (actionItem: INodeActionTypeDescription): IUpdateInformation => {
-			const displayOptions = actionItem.displayOptions ;
+		getActionData:
+			() =>
+			(actionItem: INodeActionTypeDescription): IUpdateInformation => {
+				const displayOptions = actionItem.displayOptions;
 
-			const displayConditions = Object.keys(displayOptions?.show || {})
-				.reduce((acc: IDataObject, showCondition: string) => {
-					acc[showCondition] = displayOptions?.show?.[showCondition]?.[0];
-					return acc;
-				}, {});
+				const displayConditions = Object.keys(displayOptions?.show || {}).reduce(
+					(acc: IDataObject, showCondition: string) => {
+						acc[showCondition] = displayOptions?.show?.[showCondition]?.[0];
+						return acc;
+					},
+					{},
+				);
 
-			return {
-				name: actionItem.displayName,
-				key: actionItem.name as string,
-				value: { ...actionItem.values , ...displayConditions} as INodeParameters,
-			};
-		},
+				return {
+					name: actionItem.displayName,
+					key: actionItem.name as string,
+					value: { ...actionItem.values, ...displayConditions } as INodeParameters,
+				};
+			},
 	},
 });
diff --git a/packages/editor-ui/src/stores/nodeTypes.ts b/packages/editor-ui/src/stores/nodeTypes.ts
index d536ee3c96..337d062b53 100644
--- a/packages/editor-ui/src/stores/nodeTypes.ts
+++ b/packages/editor-ui/src/stores/nodeTypes.ts
@@ -1,41 +1,66 @@
-import { getNodeParameterOptions, getNodesInformation, getNodeTranslationHeaders, getNodeTypes, getResourceLocatorResults } from "@/api/nodeTypes";
-import { DEFAULT_NODETYPE_VERSION, STORES } from "@/constants";
-import { ICategoriesWithNodes, INodeCreateElement, INodeTypesState, IResourceLocatorReqParams } from "@/Interface";
-import { addHeaders, addNodeTranslation } from "@/plugins/i18n";
-import { omit, getCategoriesWithNodes, getCategorizedList } from "@/utils";
-import { ILoadOptions, INodeCredentials, INodeListSearchResult, INodeParameters, INodePropertyOptions, INodeTypeDescription, INodeTypeNameVersion } from 'n8n-workflow';
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useCredentialsStore } from "./credentials";
-import { useRootStore } from "./n8nRootStore";
-import { useUsersStore } from "./users";
+import {
+	getNodeParameterOptions,
+	getNodesInformation,
+	getNodeTranslationHeaders,
+	getNodeTypes,
+	getResourceLocatorResults,
+} from '@/api/nodeTypes';
+import { DEFAULT_NODETYPE_VERSION, STORES } from '@/constants';
+import {
+	ICategoriesWithNodes,
+	INodeCreateElement,
+	INodeTypesState,
+	IResourceLocatorReqParams,
+} from '@/Interface';
+import { addHeaders, addNodeTranslation } from '@/plugins/i18n';
+import { omit, getCategoriesWithNodes, getCategorizedList } from '@/utils';
+import {
+	ILoadOptions,
+	INodeCredentials,
+	INodeListSearchResult,
+	INodeParameters,
+	INodePropertyOptions,
+	INodeTypeDescription,
+	INodeTypeNameVersion,
+} from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useCredentialsStore } from './credentials';
+import { useRootStore } from './n8nRootStore';
+import { useUsersStore } from './users';
 import { useNodeCreatorStore } from './nodeCreator';
 function getNodeVersions(nodeType: INodeTypeDescription) {
 	return Array.isArray(nodeType.version) ? nodeType.version : [nodeType.version];
 }
 
-export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
+export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 	state: (): INodeTypesState => ({
 		nodeTypes: {},
 	}),
 	getters: {
 		allNodeTypes(): INodeTypeDescription[] {
-			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>((allNodeTypes, nodeType) => {
-				const versionNumbers = Object.keys(nodeType).map(Number);
-				const allNodeVersions = versionNumbers.map(version => nodeType[version]);
+			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>(
+				(allNodeTypes, nodeType) => {
+					const versionNumbers = Object.keys(nodeType).map(Number);
+					const allNodeVersions = versionNumbers.map((version) => nodeType[version]);
 
-				return [...allNodeTypes, ...allNodeVersions];
-			}, []);
+					return [...allNodeTypes, ...allNodeVersions];
+				},
+				[],
+			);
 		},
 		allLatestNodeTypes(): INodeTypeDescription[] {
-			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>((allLatestNodeTypes, nodeVersions) => {
-				const versionNumbers = Object.keys(nodeVersions).map(Number);
-				const latestNodeVersion = nodeVersions[Math.max(...versionNumbers)];
+			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>(
+				(allLatestNodeTypes, nodeVersions) => {
+					const versionNumbers = Object.keys(nodeVersions).map(Number);
+					const latestNodeVersion = nodeVersions[Math.max(...versionNumbers)];
 
-				if (!latestNodeVersion) return allLatestNodeTypes;
+					if (!latestNodeVersion) return allLatestNodeTypes;
 
-				return [...allLatestNodeTypes, latestNodeVersion];
-			}, []);
+					return [...allLatestNodeTypes, latestNodeVersion];
+				},
+				[],
+			);
 		},
 		getNodeType() {
 			return (nodeTypeName: string, version?: number): INodeTypeDescription | null => {
@@ -68,27 +93,35 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 	},
 	actions: {
 		setNodeTypes(newNodeTypes: INodeTypeDescription[] = []): void {
-			const nodeTypes = newNodeTypes.reduce<Record<string, Record<string, INodeTypeDescription>>>((acc, newNodeType) => {
-				const newNodeVersions = getNodeVersions(newNodeType);
+			const nodeTypes = newNodeTypes.reduce<Record<string, Record<string, INodeTypeDescription>>>(
+				(acc, newNodeType) => {
+					const newNodeVersions = getNodeVersions(newNodeType);
 
-				if (newNodeVersions.length === 0) {
-					const singleVersion = { [DEFAULT_NODETYPE_VERSION]: newNodeType };
+					if (newNodeVersions.length === 0) {
+						const singleVersion = { [DEFAULT_NODETYPE_VERSION]: newNodeType };
 
-					acc[newNodeType.name] = singleVersion;
-					return acc;
-				}
-
-				for (const version of newNodeVersions) {
-					// Node exists with the same name
-					if (acc[newNodeType.name]) {
-						acc[newNodeType.name][version] = Object.assign(acc[newNodeType.name][version] ?? {}, newNodeType);
-					} else {
-						acc[newNodeType.name] = Object.assign(acc[newNodeType.name] ?? {}, { [version]: newNodeType });
+						acc[newNodeType.name] = singleVersion;
+						return acc;
 					}
-				}
 
-				return acc;
-			}, { ...this.nodeTypes });
+					for (const version of newNodeVersions) {
+						// Node exists with the same name
+						if (acc[newNodeType.name]) {
+							acc[newNodeType.name][version] = Object.assign(
+								acc[newNodeType.name][version] ?? {},
+								newNodeType,
+							);
+						} else {
+							acc[newNodeType.name] = Object.assign(acc[newNodeType.name] ?? {}, {
+								[version]: newNodeType,
+							});
+						}
+					}
+
+					return acc;
+				},
+				{ ...this.nodeTypes },
+			);
 			Vue.set(this, 'nodeTypes', nodeTypes);
 
 			// Trigger compute of mergedAppNodes getter so it's ready when user opens the node creator
@@ -101,21 +134,21 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 				this.nodeTypes,
 			);
 		},
-		async getNodesInformation(nodeInfos: INodeTypeNameVersion[], replace = true): Promise<INodeTypeDescription[]> {
+		async getNodesInformation(
+			nodeInfos: INodeTypeNameVersion[],
+			replace = true,
+		): Promise<INodeTypeDescription[]> {
 			const rootStore = useRootStore();
 			const nodesInformation = await getNodesInformation(rootStore.getRestApiContext, nodeInfos);
 
-			nodesInformation.forEach(nodeInformation => {
+			nodesInformation.forEach((nodeInformation) => {
 				if (nodeInformation.translation) {
 					const nodeType = nodeInformation.name.replace('n8n-nodes-base.', '');
 
-					addNodeTranslation(
-						{ [nodeType]: nodeInformation.translation },
-						rootStore.defaultLocale,
-					);
+					addNodeTranslation({ [nodeType]: nodeInformation.translation }, rootStore.defaultLocale);
 				}
 			});
-			if(replace) this.setNodeTypes(nodesInformation);
+			if (replace) this.setNodeTypes(nodesInformation);
 
 			return nodesInformation;
 		},
@@ -139,16 +172,14 @@ export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
 				addHeaders(headers, rootStore.defaultLocale);
 			}
 		},
-		async getNodeParameterOptions(
-			sendData: {
-				nodeTypeAndVersion: INodeTypeNameVersion,
-				path: string,
-				methodName?: string,
-				loadOptions?: ILoadOptions,
-				currentNodeParameters: INodeParameters,
-				credentials?: INodeCredentials,
-			},
-		): Promise<INodePropertyOptions[]> {
+		async getNodeParameterOptions(sendData: {
+			nodeTypeAndVersion: INodeTypeNameVersion;
+			path: string;
+			methodName?: string;
+			loadOptions?: ILoadOptions;
+			currentNodeParameters: INodeParameters;
+			credentials?: INodeCredentials;
+		}): Promise<INodePropertyOptions[]> {
 			const rootStore = useRootStore();
 			return getNodeParameterOptions(rootStore.getRestApiContext, sendData);
 		},
diff --git a/packages/editor-ui/src/stores/settings.ts b/packages/editor-ui/src/stores/settings.ts
index f1d1243fdf..e3c23dd744 100644
--- a/packages/editor-ui/src/stores/settings.ts
+++ b/packages/editor-ui/src/stores/settings.ts
@@ -1,16 +1,29 @@
-import { createApiKey, deleteApiKey, getApiKey } from "@/api/api-keys";
-import { getPromptsData, getSettings, submitContactInfo, submitValueSurvey } from "@/api/settings";
-import { testHealthEndpoint } from "@/api/templates";
-import { CONTACT_PROMPT_MODAL_KEY, EnterpriseEditionFeature, STORES, VALUE_SURVEY_MODAL_KEY } from "@/constants";
-import { ILogLevel, IN8nPromptResponse, IN8nPrompts, IN8nUISettings, IN8nValueSurveyData, ISettingsState, WorkflowCallerPolicyDefaultOption } from "@/Interface";
-import { store } from "@/store";
-import { ITelemetrySettings } from "n8n-workflow";
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useRootStore } from "./n8nRootStore";
-import { useUIStore } from "./ui";
-import { useUsersStore } from "./users";
-import { useVersionsStore } from "./versions";
+import { createApiKey, deleteApiKey, getApiKey } from '@/api/api-keys';
+import { getPromptsData, getSettings, submitContactInfo, submitValueSurvey } from '@/api/settings';
+import { testHealthEndpoint } from '@/api/templates';
+import {
+	CONTACT_PROMPT_MODAL_KEY,
+	EnterpriseEditionFeature,
+	STORES,
+	VALUE_SURVEY_MODAL_KEY,
+} from '@/constants';
+import {
+	ILogLevel,
+	IN8nPromptResponse,
+	IN8nPrompts,
+	IN8nUISettings,
+	IN8nValueSurveyData,
+	ISettingsState,
+	WorkflowCallerPolicyDefaultOption,
+} from '@/Interface';
+import { store } from '@/store';
+import { ITelemetrySettings } from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useRootStore } from './n8nRootStore';
+import { useUIStore } from './ui';
+import { useUsersStore } from './users';
+import { useVersionsStore } from './versions';
 
 export const useSettingsStore = defineStore(STORES.SETTINGS, {
 	state: (): ISettingsState => ({
@@ -34,7 +47,7 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 	}),
 	getters: {
 		isEnterpriseFeatureEnabled() {
-			return (feature: EnterpriseEditionFeature) : boolean => this.settings.enterprise[feature];
+			return (feature: EnterpriseEditionFeature): boolean => this.settings.enterprise[feature];
 		},
 		versionCli(): string {
 			return this.settings.versionCli;
@@ -51,58 +64,64 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 		publicApiPath(): string {
 			return this.api.path;
 		},
-		showSetupPage() : boolean {
+		showSetupPage(): boolean {
 			return this.userManagement.showSetupOnFirstLoad === true;
 		},
-		isDesktopDeployment() : boolean {
+		isDesktopDeployment(): boolean {
 			if (!this.settings.deployment) {
 				return false;
 			}
 			return this.settings.deployment?.type.startsWith('desktop_');
 		},
-		isCloudDeployment() : boolean {
+		isCloudDeployment(): boolean {
 			if (!this.settings.deployment) {
 				return false;
 			}
 			return this.settings.deployment.type === 'cloud';
 		},
-		isSmtpSetup() : boolean {
+		isSmtpSetup(): boolean {
 			return this.userManagement.smtpSetup;
 		},
-		isPersonalizationSurveyEnabled() : boolean {
-			return (this.settings.telemetry && this.settings.telemetry.enabled) && this.settings.personalizationSurveyEnabled;
+		isPersonalizationSurveyEnabled(): boolean {
+			return (
+				this.settings.telemetry &&
+				this.settings.telemetry.enabled &&
+				this.settings.personalizationSurveyEnabled
+			);
 		},
-		telemetry() : ITelemetrySettings {
+		telemetry(): ITelemetrySettings {
 			return this.settings.telemetry;
 		},
-		logLevel() : ILogLevel {
+		logLevel(): ILogLevel {
 			return this.settings.logLevel;
 		},
-		isTelemetryEnabled() : boolean {
+		isTelemetryEnabled(): boolean {
 			return this.settings.telemetry && this.settings.telemetry.enabled;
 		},
-		areTagsEnabled() : boolean {
-			return this.settings.workflowTagsDisabled !== undefined ? !this.settings.workflowTagsDisabled : true;
+		areTagsEnabled(): boolean {
+			return this.settings.workflowTagsDisabled !== undefined
+				? !this.settings.workflowTagsDisabled
+				: true;
 		},
-		isHiringBannerEnabled() : boolean {
+		isHiringBannerEnabled(): boolean {
 			return this.settings.hiringBannerEnabled;
 		},
 		isTemplatesEnabled(): boolean {
 			return Boolean(this.settings.templates && this.settings.templates.enabled);
 		},
-		isTemplatesEndpointReachable() : boolean {
+		isTemplatesEndpointReachable(): boolean {
 			return this.templatesEndpointHealthy;
 		},
-		templatesHost() : string {
+		templatesHost(): string {
 			return this.settings.templates.host;
 		},
-		isCommunityNodesFeatureEnabled() : boolean {
+		isCommunityNodesFeatureEnabled(): boolean {
 			return this.settings.communityNodesEnabled;
 		},
-		isNpmAvailable() : boolean {
+		isNpmAvailable(): boolean {
 			return this.settings.isNpmAvailable;
 		},
-		allowedModules() : { builtIn?: string[]; external?: string[] } {
+		allowedModules(): { builtIn?: string[]; external?: string[] } {
 			return this.settings.allowedModules;
 		},
 		isQueueModeEnabled(): boolean {
@@ -117,8 +136,7 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 	},
 	actions: {
 		setSettings(settings: IN8nUISettings): void {
-
-			this.settings =  settings;
+			this.settings = settings;
 			this.userManagement.enabled = settings.userManagement.enabled;
 			this.userManagement.showSetupOnFirstLoad = !!settings.userManagement.showSetupOnFirstLoad;
 			this.userManagement.smtpSetup = settings.userManagement.smtpSetup;
@@ -133,7 +151,7 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 
 			this.setSettings(settings);
 			this.settings.communityNodesEnabled = settings.communityNodesEnabled;
-			this.setAllowedModules(settings.allowedModules as { builtIn?: string, external?: string });
+			this.setAllowedModules(settings.allowedModules as { builtIn?: string; external?: string });
 			this.setSaveDataErrorExecution(settings.saveDataErrorExecution);
 			this.setSaveDataSuccessExecution(settings.saveDataSuccessExecution);
 			this.setSaveManualExecutions(settings.saveManualExecutions);
@@ -155,12 +173,11 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 		},
 		stopShowingSetupPage(): void {
 			Vue.set(this.userManagement, 'showSetupOnFirstLoad', false);
-
 		},
 		setPromptsData(promptsData: IN8nPrompts): void {
 			Vue.set(this, 'promptsData', promptsData);
 		},
-		setAllowedModules(allowedModules: { builtIn?: string, external?: string }): void {
+		setAllowedModules(allowedModules: { builtIn?: string; external?: string }): void {
 			this.settings.allowedModules = {
 				...(allowedModules.builtIn && { builtIn: allowedModules.builtIn.split(',') }),
 				...(allowedModules.external && { external: allowedModules.external.split(',') }),
@@ -173,11 +190,14 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 			try {
 				const uiStore = useUIStore();
 				const usersStore = useUsersStore();
-				const promptsData: IN8nPrompts = await getPromptsData(this.settings.instanceId, usersStore.currentUserId || '');
+				const promptsData: IN8nPrompts = await getPromptsData(
+					this.settings.instanceId,
+					usersStore.currentUserId || '',
+				);
 
 				if (promptsData && promptsData.showContactPrompt) {
 					uiStore.openModal(CONTACT_PROMPT_MODAL_KEY);
-				} else  if (promptsData && promptsData.showValueSurvey) {
+				} else if (promptsData && promptsData.showValueSurvey) {
 					uiStore.openModal(VALUE_SURVEY_MODAL_KEY);
 				}
 
@@ -190,7 +210,11 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 		async submitContactInfo(email: string): Promise<IN8nPromptResponse | undefined> {
 			try {
 				const usersStore = useUsersStore();
-				return await submitContactInfo(this.settings.instanceId, usersStore.currentUserId || '', email);
+				return await submitContactInfo(
+					this.settings.instanceId,
+					usersStore.currentUserId || '',
+					email,
+				);
 			} catch (error) {
 				return;
 			}
@@ -198,7 +222,11 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 		async submitValueSurvey(params: IN8nValueSurveyData): Promise<IN8nPromptResponse | undefined> {
 			try {
 				const usersStore = useUsersStore();
-				return await submitValueSurvey(this.settings.instanceId, usersStore.currentUserId || '', params);
+				return await submitValueSurvey(
+					this.settings.instanceId,
+					usersStore.currentUserId || '',
+					params,
+				);
 			} catch (error) {
 				return;
 			}
diff --git a/packages/editor-ui/src/stores/tags.ts b/packages/editor-ui/src/stores/tags.ts
index 4abf885356..870b01a573 100644
--- a/packages/editor-ui/src/stores/tags.ts
+++ b/packages/editor-ui/src/stores/tags.ts
@@ -1,10 +1,10 @@
-import { createTag, deleteTag, getTags, updateTag } from "@/api/tags";
-import { STORES } from "@/constants";
-import { ITag, ITagsState } from "@/Interface";
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useRootStore } from "./n8nRootStore";
-import { useWorkflowsStore } from "./workflows";
+import { createTag, deleteTag, getTags, updateTag } from '@/api/tags';
+import { STORES } from '@/constants';
+import { ITag, ITagsState } from '@/Interface';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useRootStore } from './n8nRootStore';
+import { useWorkflowsStore } from './workflows';
 
 export const useTagsStore = defineStore(STORES.TAGS, {
 	state: (): ITagsState => ({
@@ -15,8 +15,7 @@ export const useTagsStore = defineStore(STORES.TAGS, {
 	}),
 	getters: {
 		allTags(): ITag[] {
-			return Object.values(this.tags)
-				.sort((a, b) => a.name.localeCompare(b.name));
+			return Object.values(this.tags).sort((a, b) => a.name.localeCompare(b.name));
 		},
 		isLoading(): boolean {
 			return this.loading;
@@ -30,12 +29,11 @@ export const useTagsStore = defineStore(STORES.TAGS, {
 	},
 	actions: {
 		setAllTags(tags: ITag[]): void {
-			this.tags = tags
-				.reduce((accu: { [id: string]: ITag }, tag: ITag) => {
-					accu[tag.id] = tag;
+			this.tags = tags.reduce((accu: { [id: string]: ITag }, tag: ITag) => {
+				accu[tag.id] = tag;
 
-					return accu;
-				}, {});
+				return accu;
+			}, {});
 			this.fetchedAll = true;
 		},
 		upsertTags(tags: ITag[]): void {
@@ -48,8 +46,7 @@ export const useTagsStore = defineStore(STORES.TAGS, {
 						...tag,
 					};
 					Vue.set(this.tags, tagId, newTag);
-				}
-				else {
+				} else {
 					Vue.set(this.tags, tagId, tag);
 				}
 			});
@@ -58,7 +55,7 @@ export const useTagsStore = defineStore(STORES.TAGS, {
 			Vue.delete(this.tags, id);
 		},
 
-		async fetchAll(params?: { force?: boolean, withUsageCount?: boolean }): Promise<ITag[]> {
+		async fetchAll(params?: { force?: boolean; withUsageCount?: boolean }): Promise<ITag[]> {
 			const { force = false, withUsageCount = false } = params || {};
 			if (!force && this.fetchedAll && this.fetchedUsageCount === withUsageCount) {
 				return Object.values(this.tags);
@@ -79,7 +76,7 @@ export const useTagsStore = defineStore(STORES.TAGS, {
 
 			return tag;
 		},
-		async rename({ id, name }: { id: string, name: string }) {
+		async rename({ id, name }: { id: string; name: string }) {
 			const rootStore = useRootStore();
 			const tag = await updateTag(rootStore.getRestApiContext, id, { name });
 			this.upsertTags([tag]);
diff --git a/packages/editor-ui/src/stores/templates.ts b/packages/editor-ui/src/stores/templates.ts
index 72da277fa7..9b59e30cd6 100644
--- a/packages/editor-ui/src/stores/templates.ts
+++ b/packages/editor-ui/src/stores/templates.ts
@@ -1,9 +1,25 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 import { STORES } from '@/constants';
-import { ITemplatesCategory, ITemplatesCollection, ITemplatesCollectionFull, ITemplatesQuery, ITemplateState, ITemplatesWorkflow, ITemplatesWorkflowFull, IWorkflowTemplate } from "@/Interface";
-import Vue from "vue";
-import { useSettingsStore } from "./settings";
-import { getCategories, getCollectionById, getCollections, getTemplateById, getWorkflows, getWorkflowTemplate } from "@/api/templates";
+import {
+	ITemplatesCategory,
+	ITemplatesCollection,
+	ITemplatesCollectionFull,
+	ITemplatesQuery,
+	ITemplateState,
+	ITemplatesWorkflow,
+	ITemplatesWorkflowFull,
+	IWorkflowTemplate,
+} from '@/Interface';
+import Vue from 'vue';
+import { useSettingsStore } from './settings';
+import {
+	getCategories,
+	getCollectionById,
+	getCollections,
+	getTemplateById,
+	getWorkflows,
+	getWorkflowTemplate,
+} from '@/api/templates';
 
 const TEMPLATES_PAGE_SIZE = 10;
 
@@ -12,256 +28,283 @@ function getSearchKey(query: ITemplatesQuery): string {
 }
 
 export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
-		state: (): ITemplateState => ({
-			categories: {},
-			collections: {},
-			workflows: {},
-			collectionSearches: {},
-			workflowSearches: {},
-			currentSessionId: '',
-			previousSessionId: '',
-		}),
-		getters: {
-			allCategories(): ITemplatesCategory[] {
-				return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) => a.name > b.name ? 1: -1);
-			},
-			getTemplateById() {
-				return (id: string): null | ITemplatesWorkflow => this.workflows[id];
-			},
-			getCollectionById() {
-				return (id: string): null | ITemplatesCollection => this.collections[id];
-			},
-			getCategoryById() {
-				return (id: string): null | ITemplatesCategory => this.categories[id];
-			},
-			getSearchedCollections() {
-				return (query: ITemplatesQuery) => {
-					const searchKey = getSearchKey(query);
-					const search = this.collectionSearches[searchKey];
-					if (!search) {
-						return null;
-					}
-
-					return search.collectionIds.map((collectionId: string) => this.collections[collectionId]);
-				};
-			},
-			getSearchedWorkflows() {
-				return (query: ITemplatesQuery) => {
-					const searchKey = getSearchKey(query);
-					const search = this.workflowSearches[searchKey];
-					if (!search) {
-						return null;
-					}
-
-					return search.workflowIds.map((workflowId: string) => this.workflows[workflowId]);
-				};
-			},
-			getSearchedWorkflowsTotal() {
-				return (query: ITemplatesQuery) => {
-					const searchKey = getSearchKey(query);
-					const search = this.workflowSearches[searchKey];
-
-					return search ? search.totalWorkflows : 0;
-				};
-			},
-			isSearchLoadingMore() {
-				return (query: ITemplatesQuery) => {
-					const searchKey = getSearchKey(query);
-					const search = this.workflowSearches[searchKey];
-
-					return Boolean(search && search.loadingMore);
-				};
-			},
-			isSearchFinished() {
-				return (query: ITemplatesQuery) => {
-					const searchKey = getSearchKey(query);
-					const search = this.workflowSearches[searchKey];
-
-					return Boolean(search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length);
-				};
-			},
+	state: (): ITemplateState => ({
+		categories: {},
+		collections: {},
+		workflows: {},
+		collectionSearches: {},
+		workflowSearches: {},
+		currentSessionId: '',
+		previousSessionId: '',
+	}),
+	getters: {
+		allCategories(): ITemplatesCategory[] {
+			return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) =>
+				a.name > b.name ? 1 : -1,
+			);
 		},
-		actions: {
-			addCategories(categories: ITemplatesCategory[]): void {
-				categories.forEach((category: ITemplatesCategory) => {
-					Vue.set(this.categories, category.id, category);
-				});
-			},
-			addCollections(collections: Array<ITemplatesCollection | ITemplatesCollectionFull>): void {
-				collections.forEach((collection) => {
-					const workflows = (collection.workflows || []).map((workflow) => ({id: workflow.id}));
-					const cachedCollection = this.collections[collection.id] || {};
-					Vue.set(this.collections, collection.id, {
-						...cachedCollection,
-						...collection,
-						workflows,
-					});
-				});
-			},
-			addWorkflows(workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void {
-				workflows.forEach((workflow: ITemplatesWorkflow) => {
-					const cachedWorkflow = this.workflows[workflow.id] || {};
-					Vue.set(this.workflows, workflow.id, {
-						...cachedWorkflow,
-						...workflow,
-					});
-				});
-			},
-			addCollectionSearch(data: {collections: ITemplatesCollection[], query: ITemplatesQuery}): void {
-				const collectionIds = data.collections.map((collection) => collection.id);
-				const searchKey = getSearchKey(data.query);
-				Vue.set(this.collectionSearches, searchKey, {
-					collectionIds,
-				});
-			},
-			addWorkflowsSearch(data: {totalWorkflows: number; workflows: ITemplatesWorkflow[], query: ITemplatesQuery}): void {
-				const workflowIds = data.workflows.map((workflow) => workflow.id);
-				const searchKey = getSearchKey(data.query);
-				const cachedResults = this.workflowSearches[searchKey];
-				if (!cachedResults) {
-					Vue.set(this.workflowSearches, searchKey, {
-						workflowIds,
-						totalWorkflows: data.totalWorkflows,
-					});
-
-					return;
+		getTemplateById() {
+			return (id: string): null | ITemplatesWorkflow => this.workflows[id];
+		},
+		getCollectionById() {
+			return (id: string): null | ITemplatesCollection => this.collections[id];
+		},
+		getCategoryById() {
+			return (id: string): null | ITemplatesCategory => this.categories[id];
+		},
+		getSearchedCollections() {
+			return (query: ITemplatesQuery) => {
+				const searchKey = getSearchKey(query);
+				const search = this.collectionSearches[searchKey];
+				if (!search) {
+					return null;
 				}
 
+				return search.collectionIds.map((collectionId: string) => this.collections[collectionId]);
+			};
+		},
+		getSearchedWorkflows() {
+			return (query: ITemplatesQuery) => {
+				const searchKey = getSearchKey(query);
+				const search = this.workflowSearches[searchKey];
+				if (!search) {
+					return null;
+				}
+
+				return search.workflowIds.map((workflowId: string) => this.workflows[workflowId]);
+			};
+		},
+		getSearchedWorkflowsTotal() {
+			return (query: ITemplatesQuery) => {
+				const searchKey = getSearchKey(query);
+				const search = this.workflowSearches[searchKey];
+
+				return search ? search.totalWorkflows : 0;
+			};
+		},
+		isSearchLoadingMore() {
+			return (query: ITemplatesQuery) => {
+				const searchKey = getSearchKey(query);
+				const search = this.workflowSearches[searchKey];
+
+				return Boolean(search && search.loadingMore);
+			};
+		},
+		isSearchFinished() {
+			return (query: ITemplatesQuery) => {
+				const searchKey = getSearchKey(query);
+				const search = this.workflowSearches[searchKey];
+
+				return Boolean(
+					search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length,
+				);
+			};
+		},
+	},
+	actions: {
+		addCategories(categories: ITemplatesCategory[]): void {
+			categories.forEach((category: ITemplatesCategory) => {
+				Vue.set(this.categories, category.id, category);
+			});
+		},
+		addCollections(collections: Array<ITemplatesCollection | ITemplatesCollectionFull>): void {
+			collections.forEach((collection) => {
+				const workflows = (collection.workflows || []).map((workflow) => ({ id: workflow.id }));
+				const cachedCollection = this.collections[collection.id] || {};
+				Vue.set(this.collections, collection.id, {
+					...cachedCollection,
+					...collection,
+					workflows,
+				});
+			});
+		},
+		addWorkflows(workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void {
+			workflows.forEach((workflow: ITemplatesWorkflow) => {
+				const cachedWorkflow = this.workflows[workflow.id] || {};
+				Vue.set(this.workflows, workflow.id, {
+					...cachedWorkflow,
+					...workflow,
+				});
+			});
+		},
+		addCollectionSearch(data: {
+			collections: ITemplatesCollection[];
+			query: ITemplatesQuery;
+		}): void {
+			const collectionIds = data.collections.map((collection) => collection.id);
+			const searchKey = getSearchKey(data.query);
+			Vue.set(this.collectionSearches, searchKey, {
+				collectionIds,
+			});
+		},
+		addWorkflowsSearch(data: {
+			totalWorkflows: number;
+			workflows: ITemplatesWorkflow[];
+			query: ITemplatesQuery;
+		}): void {
+			const workflowIds = data.workflows.map((workflow) => workflow.id);
+			const searchKey = getSearchKey(data.query);
+			const cachedResults = this.workflowSearches[searchKey];
+			if (!cachedResults) {
 				Vue.set(this.workflowSearches, searchKey, {
-					workflowIds: [...cachedResults.workflowIds, ...workflowIds],
+					workflowIds,
 					totalWorkflows: data.totalWorkflows,
 				});
-			},
-			setWorkflowSearchLoading(query: ITemplatesQuery): void {
-				const searchKey = getSearchKey(query);
-				const cachedResults = this.workflowSearches[searchKey];
-				if (!cachedResults) {
-					return;
-				}
 
-				Vue.set(this.workflowSearches[searchKey], 'loadingMore', true);
-			},
-			setWorkflowSearchLoaded(query: ITemplatesQuery): void {
-				const searchKey = getSearchKey(query);
-				const cachedResults = this.workflowSearches[searchKey];
-				if (!cachedResults) {
-					return;
-				}
+				return;
+			}
 
-				Vue.set(this.workflowSearches[searchKey], 'loadingMore', false);
-			},
-			resetSessionId(): void {
-				this.previousSessionId = this.currentSessionId;
-				this.currentSessionId = '';
-			},
-			setSessionId(): void {
-				if (!this.currentSessionId) {
-					this.currentSessionId = `templates-${Date.now()}`;
-				}
-			},
-			async fetchTemplateById(templateId: string): Promise<ITemplatesWorkflow | ITemplatesWorkflowFull> {
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-				const response = await getTemplateById(apiEndpoint, templateId, { 'n8n-version': versionCli });
-
-				const template: ITemplatesWorkflowFull = {
-					...response.workflow,
-					full: true,
-				};
-				this.addWorkflows([template]);
-
-				return template;
-			},
-			async fetchCollectionById(collectionId: string): Promise<ITemplatesCollection | null> {
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-				const response = await getCollectionById(apiEndpoint, collectionId, { 'n8n-version': versionCli });
-				const collection: ITemplatesCollectionFull = {
-					...response.collection,
-					full: true,
-				};
-
-				this.addCollections([collection]);
-				this.addWorkflows(response.collection.workflows);
-				return this.getCollectionById(collectionId);
-			},
-			async getCategories(): Promise<ITemplatesCategory[]> {
-				const cachedCategories = this.allCategories;
-				if (cachedCategories.length) {
-					return cachedCategories;
-				}
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-				const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
-				const categories = response.categories;
-
-				this.addCategories(categories);
-				return categories;
-			},
-			async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
-				const cachedResults = this.getSearchedCollections(query);
-				if (cachedResults) {
-					return cachedResults;
-				}
-
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-				const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
-				const collections = response.collections;
-
-				this.addCollections(collections);
-				this.addCollectionSearch({query, collections});
-				collections.forEach(collection => this.addWorkflows(collection.workflows as ITemplatesWorkflowFull[]));
-
-				return collections;
-			},
-			async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
-				const cachedResults = this.getSearchedWorkflows(query);
-				if (cachedResults) {
-					return cachedResults;
-				}
-
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-
-				const payload = await getWorkflows(apiEndpoint, {...query, skip: 0, limit: TEMPLATES_PAGE_SIZE}, { 'n8n-version': versionCli });
-
-				this.addWorkflows(payload.workflows);
-				this.addWorkflowsSearch({...payload, query});
-				return this.getSearchedWorkflows(query) || [];
-			},
-			async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
-				if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
-					return [];
-				}
-				const cachedResults = this.getSearchedWorkflows(query) || [];
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-
-				this.setWorkflowSearchLoading(query);
-				try {
-					const payload = await getWorkflows(apiEndpoint, {...query, skip: cachedResults.length, limit: TEMPLATES_PAGE_SIZE});
-
-					this.setWorkflowSearchLoaded(query);
-					this.addWorkflows(payload.workflows);
-					this.addWorkflowsSearch({...payload, query});
-
-					return this.getSearchedWorkflows(query) || [];
-				} catch (e) {
-					this.setWorkflowSearchLoaded(query);
-					throw e;
-				}
-			},
-			async getWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate> {
-				const settingsStore = useSettingsStore();
-				const apiEndpoint: string = settingsStore.templatesHost;
-				const versionCli: string = settingsStore.versionCli;
-				return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
-			},
+			Vue.set(this.workflowSearches, searchKey, {
+				workflowIds: [...cachedResults.workflowIds, ...workflowIds],
+				totalWorkflows: data.totalWorkflows,
+			});
 		},
+		setWorkflowSearchLoading(query: ITemplatesQuery): void {
+			const searchKey = getSearchKey(query);
+			const cachedResults = this.workflowSearches[searchKey];
+			if (!cachedResults) {
+				return;
+			}
+
+			Vue.set(this.workflowSearches[searchKey], 'loadingMore', true);
+		},
+		setWorkflowSearchLoaded(query: ITemplatesQuery): void {
+			const searchKey = getSearchKey(query);
+			const cachedResults = this.workflowSearches[searchKey];
+			if (!cachedResults) {
+				return;
+			}
+
+			Vue.set(this.workflowSearches[searchKey], 'loadingMore', false);
+		},
+		resetSessionId(): void {
+			this.previousSessionId = this.currentSessionId;
+			this.currentSessionId = '';
+		},
+		setSessionId(): void {
+			if (!this.currentSessionId) {
+				this.currentSessionId = `templates-${Date.now()}`;
+			}
+		},
+		async fetchTemplateById(
+			templateId: string,
+		): Promise<ITemplatesWorkflow | ITemplatesWorkflowFull> {
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+			const response = await getTemplateById(apiEndpoint, templateId, {
+				'n8n-version': versionCli,
+			});
+
+			const template: ITemplatesWorkflowFull = {
+				...response.workflow,
+				full: true,
+			};
+			this.addWorkflows([template]);
+
+			return template;
+		},
+		async fetchCollectionById(collectionId: string): Promise<ITemplatesCollection | null> {
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+			const response = await getCollectionById(apiEndpoint, collectionId, {
+				'n8n-version': versionCli,
+			});
+			const collection: ITemplatesCollectionFull = {
+				...response.collection,
+				full: true,
+			};
+
+			this.addCollections([collection]);
+			this.addWorkflows(response.collection.workflows);
+			return this.getCollectionById(collectionId);
+		},
+		async getCategories(): Promise<ITemplatesCategory[]> {
+			const cachedCategories = this.allCategories;
+			if (cachedCategories.length) {
+				return cachedCategories;
+			}
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+			const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
+			const categories = response.categories;
+
+			this.addCategories(categories);
+			return categories;
+		},
+		async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
+			const cachedResults = this.getSearchedCollections(query);
+			if (cachedResults) {
+				return cachedResults;
+			}
+
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+			const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
+			const collections = response.collections;
+
+			this.addCollections(collections);
+			this.addCollectionSearch({ query, collections });
+			collections.forEach((collection) =>
+				this.addWorkflows(collection.workflows as ITemplatesWorkflowFull[]),
+			);
+
+			return collections;
+		},
+		async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
+			const cachedResults = this.getSearchedWorkflows(query);
+			if (cachedResults) {
+				return cachedResults;
+			}
+
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+
+			const payload = await getWorkflows(
+				apiEndpoint,
+				{ ...query, skip: 0, limit: TEMPLATES_PAGE_SIZE },
+				{ 'n8n-version': versionCli },
+			);
+
+			this.addWorkflows(payload.workflows);
+			this.addWorkflowsSearch({ ...payload, query });
+			return this.getSearchedWorkflows(query) || [];
+		},
+		async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
+			if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
+				return [];
+			}
+			const cachedResults = this.getSearchedWorkflows(query) || [];
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+
+			this.setWorkflowSearchLoading(query);
+			try {
+				const payload = await getWorkflows(apiEndpoint, {
+					...query,
+					skip: cachedResults.length,
+					limit: TEMPLATES_PAGE_SIZE,
+				});
+
+				this.setWorkflowSearchLoaded(query);
+				this.addWorkflows(payload.workflows);
+				this.addWorkflowsSearch({ ...payload, query });
+
+				return this.getSearchedWorkflows(query) || [];
+			} catch (e) {
+				this.setWorkflowSearchLoaded(query);
+				throw e;
+			}
+		},
+		async getWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate> {
+			const settingsStore = useSettingsStore();
+			const apiEndpoint: string = settingsStore.templatesHost;
+			const versionCli: string = settingsStore.versionCli;
+			return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
+		},
+	},
 });
diff --git a/packages/editor-ui/src/stores/ui.ts b/packages/editor-ui/src/stores/ui.ts
index ebdc8d502a..cb1cb7012b 100644
--- a/packages/editor-ui/src/stores/ui.ts
+++ b/packages/editor-ui/src/stores/ui.ts
@@ -2,7 +2,7 @@ import {
 	applyForOnboardingCall,
 	fetchNextOnboardingPrompt,
 	submitEmailOnSignup,
-} from "@/api/workflow-webhooks";
+} from '@/api/workflow-webhooks';
 import {
 	ABOUT_MODAL_KEY,
 	CHANGE_PASSWORD_MODAL_KEY,
@@ -26,8 +26,9 @@ import {
 	VERSIONS_MODAL_KEY,
 	VIEWS,
 	WORKFLOW_ACTIVE_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_SHARE_MODAL_KEY,
-} from "@/constants";
+	WORKFLOW_SETTINGS_MODAL_KEY,
+	WORKFLOW_SHARE_MODAL_KEY,
+} from '@/constants';
 import {
 	CurlToJSONResponse,
 	IFakeDoorLocation,
@@ -37,12 +38,12 @@ import {
 	IUser,
 	UIState,
 	XYPosition,
-} from "@/Interface";
-import Vue from "vue";
-import { defineStore } from "pinia";
-import { useRootStore } from "./n8nRootStore";
-import { getCurlToJson } from "@/api/curlHelper";
-import { useWorkflowsStore } from "./workflows";
+} from '@/Interface';
+import Vue from 'vue';
+import { defineStore } from 'pinia';
+import { useRootStore } from './n8nRootStore';
+import { getCurlToJson } from '@/api/curlHelper';
+import { useWorkflowsStore } from './workflows';
 
 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
@@ -202,16 +203,16 @@ export const useUIStore = defineStore(STORES.UI, {
 			}
 			return null;
 		},
-		getCurlCommand() : string|undefined {
+		getCurlCommand(): string | undefined {
 			return this.modals[IMPORT_CURL_MODAL_KEY].curlCommand;
 		},
-		getHttpNodeParameters() : string|undefined {
+		getHttpNodeParameters(): string | undefined {
 			return this.modals[IMPORT_CURL_MODAL_KEY].httpNodeParameters;
 		},
-		areExpressionsDisabled() : boolean {
+		areExpressionsDisabled(): boolean {
 			return this.currentView === VIEWS.DEMO;
 		},
-		isVersionsOpen() : boolean {
+		isVersionsOpen(): boolean {
 			return this.modals[VERSIONS_MODAL_KEY].open;
 		},
 		isModalOpen() {
@@ -230,18 +231,24 @@ export const useUIStore = defineStore(STORES.UI, {
 			return (name: string) => this.modals[name].data;
 		},
 		getFakeDoorByLocation() {
-			return (location: IFakeDoorLocation) => this.fakeDoorFeatures.filter(fakeDoor => fakeDoor.uiLocations.includes(location));
+			return (location: IFakeDoorLocation) =>
+				this.fakeDoorFeatures.filter((fakeDoor) => fakeDoor.uiLocations.includes(location));
 		},
 		getFakeDoorById() {
-			return (id: string) => this.fakeDoorFeatures.find(fakeDoor => fakeDoor.id.toString() === id);
+			return (id: string) =>
+				this.fakeDoorFeatures.find((fakeDoor) => fakeDoor.id.toString() === id);
 		},
-		isNodeView() : boolean {
-			return [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(this.currentView);
+		isNodeView(): boolean {
+			return [
+				VIEWS.NEW_WORKFLOW.toString(),
+				VIEWS.WORKFLOW.toString(),
+				VIEWS.EXECUTION.toString(),
+			].includes(this.currentView);
 		},
 		isActionActive() {
 			return (action: string) => this.activeActions.includes(action);
 		},
-		getSelectedNodes() : INodeUi[] {
+		getSelectedNodes(): INodeUi[] {
 			const seen = new Set();
 			return this.selectedNodes.filter((node: INodeUi) => {
 				// dedupe for instances when same node is selected in different ways
@@ -265,20 +272,20 @@ export const useUIStore = defineStore(STORES.UI, {
 		},
 	},
 	actions: {
-		setMode(name: string, mode: string):  void {
+		setMode(name: string, mode: string): void {
 			Vue.set(this.modals[name], 'mode', mode);
 		},
 		setActiveId(name: string, id: string): void {
 			Vue.set(this.modals[name], 'activeId', id);
 		},
-		setModalData (payload: { name: string, data: Record<string, unknown> }) {
+		setModalData(payload: { name: string; data: Record<string, unknown> }) {
 			Vue.set(this.modals[payload.name], 'data', payload.data);
 		},
 		openModal(name: string): void {
 			Vue.set(this.modals[name], 'open', true);
 			this.modalStack = [name].concat(this.modalStack);
 		},
-		openModalWithData (payload: { name: string, data: Record<string, unknown> }): void {
+		openModalWithData(payload: { name: string; data: Record<string, unknown> }): void {
 			this.setModalData(payload);
 			this.openModal(payload.name);
 		},
@@ -395,16 +402,16 @@ export const useUIStore = defineStore(STORES.UI, {
 			const updated = this.sidebarMenuItems.concat(menuItems);
 			Vue.set(this, 'sidebarMenuItems', updated);
 		},
-		setCurlCommand (payload: { name: string, command: string }): void {
+		setCurlCommand(payload: { name: string; command: string }): void {
 			Vue.set(this.modals[payload.name], 'curlCommand', payload.command);
 		},
-		setHttpNodeParameters (payload: { name: string, parameters: string }): void {
+		setHttpNodeParameters(payload: { name: string; parameters: string }): void {
 			Vue.set(this.modals[payload.name], 'httpNodeParameters', payload.parameters);
 		},
-		toggleSidebarMenuCollapse (): void {
+		toggleSidebarMenuCollapse(): void {
 			this.sidebarMenuCollapsed = !this.sidebarMenuCollapsed;
 		},
-		async getCurlToJson (curlCommand: string): Promise<CurlToJSONResponse> {
+		async getCurlToJson(curlCommand: string): Promise<CurlToJSONResponse> {
 			const rootStore = useRootStore();
 			return await getCurlToJson(rootStore.getRestApiContext, curlCommand);
 		},
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
index b7b8c4fdd5..63d1787460 100644
--- a/packages/editor-ui/src/stores/users.ts
+++ b/packages/editor-ui/src/stores/users.ts
@@ -1,14 +1,40 @@
-import { changePassword, deleteUser, getCurrentUser, getUsers, inviteUsers, login, loginCurrentUser, logout, reinvite, sendForgotPasswordEmail, setupOwner, signup, skipOwnerSetup, submitPersonalizationSurvey, updateCurrentUser, updateCurrentUserPassword, validatePasswordToken, validateSignupToken } from "@/api/users";
-import { PERSONALIZATION_MODAL_KEY, STORES } from "@/constants";
-import { IInviteResponse, IPersonalizationLatestVersion, IUser, IUserResponse, IUsersState } from "@/Interface";
-import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from "@/utils";
-import { defineStore } from "pinia";
-import Vue from "vue";
-import { useRootStore } from "./n8nRootStore";
-import { useSettingsStore } from "./settings";
-import { useUIStore } from "./ui";
+import {
+	changePassword,
+	deleteUser,
+	getCurrentUser,
+	getUsers,
+	inviteUsers,
+	login,
+	loginCurrentUser,
+	logout,
+	reinvite,
+	sendForgotPasswordEmail,
+	setupOwner,
+	signup,
+	skipOwnerSetup,
+	submitPersonalizationSurvey,
+	updateCurrentUser,
+	updateCurrentUserPassword,
+	validatePasswordToken,
+	validateSignupToken,
+} from '@/api/users';
+import { PERSONALIZATION_MODAL_KEY, STORES } from '@/constants';
+import {
+	IInviteResponse,
+	IPersonalizationLatestVersion,
+	IUser,
+	IUserResponse,
+	IUsersState,
+} from '@/Interface';
+import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from '@/utils';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useRootStore } from './n8nRootStore';
+import { useSettingsStore } from './settings';
+import { useUIStore } from './ui';
 
-const isDefaultUser = (user: IUserResponse | null) => Boolean(user && user.isPending && user.globalRole && user.globalRole.name === ROLE.Owner);
+const isDefaultUser = (user: IUserResponse | null) =>
+	Boolean(user && user.isPending && user.globalRole && user.globalRole.name === ROLE.Owner);
 const isPendingUser = (user: IUserResponse | null) => Boolean(user && user.isPending);
 
 export const useUsersStore = defineStore(STORES.USERS, {
@@ -72,7 +98,9 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				};
 				const user: IUser = {
 					...updatedUser,
-					fullName: userResponse.firstName? `${updatedUser.firstName} ${updatedUser.lastName || ''}`: undefined,
+					fullName: userResponse.firstName
+						? `${updatedUser.firstName} ${updatedUser.lastName || ''}`
+						: undefined,
 					isDefaultUser: isDefaultUser(updatedUser),
 					isPendingUser: isPendingUser(updatedUser),
 					isOwner: Boolean(updatedUser.globalRole && updatedUser.globalRole.name === ROLE.Owner),
@@ -107,7 +135,7 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				this.currentUserId = user.id;
 			}
 		},
-		async loginWithCreds(params: {email: string, password: string}): Promise<void> {
+		async loginWithCreds(params: { email: string; password: string }): Promise<void> {
 			const rootStore = useRootStore();
 			const user = await login(rootStore.getRestApiContext, params);
 			if (user) {
@@ -120,7 +148,12 @@ export const useUsersStore = defineStore(STORES.USERS, {
 			await logout(rootStore.getRestApiContext);
 			this.currentUserId = null;
 		},
-		async createOwner(params: { firstName: string; lastName: string; email: string; password: string;}): Promise<void> {
+		async createOwner(params: {
+			firstName: string;
+			lastName: string;
+			email: string;
+			password: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
 			const user = await setupOwner(rootStore.getRestApiContext, params);
 			const settingsStore = useSettingsStore();
@@ -130,11 +163,20 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				settingsStore.stopShowingSetupPage();
 			}
 		},
-		async validateSignupToken(params: {inviteeId: string, inviterId: string}): Promise<{ inviter: { firstName: string, lastName: string } }> {
+		async validateSignupToken(params: {
+			inviteeId: string;
+			inviterId: string;
+		}): Promise<{ inviter: { firstName: string; lastName: string } }> {
 			const rootStore = useRootStore();
 			return await validateSignupToken(rootStore.getRestApiContext, params);
 		},
-		async signup(params: { inviteeId: string; inviterId: string; firstName: string; lastName: string; password: string;}): Promise<void> {
+		async signup(params: {
+			inviteeId: string;
+			inviterId: string;
+			firstName: string;
+			lastName: string;
+			password: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
 			const user = await signup(rootStore.getRestApiContext, params);
 			if (user) {
@@ -142,28 +184,46 @@ export const useUsersStore = defineStore(STORES.USERS, {
 				this.currentUserId = user.id;
 			}
 		},
-		async sendForgotPasswordEmail( params: {email: string}): Promise<void> {
+		async sendForgotPasswordEmail(params: { email: string }): Promise<void> {
 			const rootStore = useRootStore();
 			await sendForgotPasswordEmail(rootStore.getRestApiContext, params);
 		},
-		async validatePasswordToken(params: {token: string, userId: string}): Promise<void> {
+		async validatePasswordToken(params: { token: string; userId: string }): Promise<void> {
 			const rootStore = useRootStore();
 			await validatePasswordToken(rootStore.getRestApiContext, params);
 		},
-		async changePassword(params: {token: string, password: string, userId: string}): Promise<void> {
+		async changePassword(params: {
+			token: string;
+			password: string;
+			userId: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
 			await changePassword(rootStore.getRestApiContext, params);
 		},
-		async updateUser(params: {id: string, firstName: string, lastName: string, email: string}): Promise<void> {
+		async updateUser(params: {
+			id: string;
+			firstName: string;
+			lastName: string;
+			email: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
 			const user = await updateCurrentUser(rootStore.getRestApiContext, params);
 			this.addUsers([user]);
 		},
-		async updateCurrentUserPassword({password, currentPassword}: {password: string, currentPassword: string}): Promise<void> {
+		async updateCurrentUserPassword({
+			password,
+			currentPassword,
+		}: {
+			password: string;
+			currentPassword: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
-			await updateCurrentUserPassword(rootStore.getRestApiContext, {newPassword: password, currentPassword});
+			await updateCurrentUserPassword(rootStore.getRestApiContext, {
+				newPassword: password,
+				currentPassword,
+			});
 		},
-		async deleteUser(params: { id: string, transferId?: string}): Promise<void> {
+		async deleteUser(params: { id: string; transferId?: string }): Promise<void> {
 			const rootStore = useRootStore();
 			await deleteUser(rootStore.getRestApiContext, params);
 			this.deleteUserById(params.id);
@@ -173,13 +233,13 @@ export const useUsersStore = defineStore(STORES.USERS, {
 			const users = await getUsers(rootStore.getRestApiContext);
 			this.addUsers(users);
 		},
-		async inviteUsers(params: Array<{email: string}>): Promise<IInviteResponse[]> {
+		async inviteUsers(params: Array<{ email: string }>): Promise<IInviteResponse[]> {
 			const rootStore = useRootStore();
 			const users = await inviteUsers(rootStore.getRestApiContext, params);
-			this.addUsers(users.map(({user}) => ({ isPending: true, ...user })));
+			this.addUsers(users.map(({ user }) => ({ isPending: true, ...user })));
 			return users;
 		},
-		async reinviteUser(params: {id: string}): Promise<void> {
+		async reinviteUser(params: { id: string }): Promise<void> {
 			const rootStore = useRootStore();
 			await reinvite(rootStore.getRestApiContext, params);
 		},
diff --git a/packages/editor-ui/src/stores/versions.ts b/packages/editor-ui/src/stores/versions.ts
index 501a263cb5..cc16d0c2da 100644
--- a/packages/editor-ui/src/stores/versions.ts
+++ b/packages/editor-ui/src/stores/versions.ts
@@ -1,8 +1,8 @@
-import { getNextVersions } from "@/api/versions";
-import { STORES } from "@/constants";
-import { IVersion, IVersionNotificationSettings, IVersionsState } from "@/Interface";
-import { defineStore } from "pinia";
-import { useRootStore } from "./n8nRootStore";
+import { getNextVersions } from '@/api/versions';
+import { STORES } from '@/constants';
+import { IVersion, IVersionNotificationSettings, IVersionsState } from '@/Interface';
+import { defineStore } from 'pinia';
+import { useRootStore } from './n8nRootStore';
 
 export const useVersionsStore = defineStore(STORES.VERSIONS, {
 	state: (): IVersionsState => ({
@@ -26,7 +26,7 @@ export const useVersionsStore = defineStore(STORES.VERSIONS, {
 		},
 	},
 	actions: {
-		setVersions({versions, currentVersion}: {versions: IVersion[], currentVersion: string}) {
+		setVersions({ versions, currentVersion }: { versions: IVersion[]; currentVersion: string }) {
 			this.nextVersions = versions.filter((version) => version.name !== currentVersion);
 			this.currentVersion = versions.find((version) => version.name === currentVersion);
 		},
@@ -43,8 +43,7 @@ export const useVersionsStore = defineStore(STORES.VERSIONS, {
 					const versions = await getNextVersions(endpoint, currentVersion, instanceId);
 					this.setVersions({ versions, currentVersion });
 				}
-			} catch (e) {
-			}
+			} catch (e) {}
 		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/webhooks.ts b/packages/editor-ui/src/stores/webhooks.ts
index bc318bfa4c..7b9dfbc14b 100644
--- a/packages/editor-ui/src/stores/webhooks.ts
+++ b/packages/editor-ui/src/stores/webhooks.ts
@@ -1,27 +1,27 @@
-import { STORES } from "@/constants";
-import {IFakeDoor, INodeUi, IRootState, NestedRecord} from "@/Interface";
-import { IMenuItem } from "n8n-design-system";
-import { IWorkflowSettings } from "n8n-workflow";
-import { defineStore } from "pinia";
-import { useRootStore } from "./n8nRootStore";
-import { useNDVStore } from "./ndv";
-import { useSettingsStore } from "./settings";
-import { useUIStore } from "./ui";
-import { useUsersStore } from "./users";
-import { useWorkflowsStore } from "./workflows";
+import { STORES } from '@/constants';
+import { IFakeDoor, INodeUi, IRootState, NestedRecord } from '@/Interface';
+import { IMenuItem } from 'n8n-design-system';
+import { IWorkflowSettings } from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import { useRootStore } from './n8nRootStore';
+import { useNDVStore } from './ndv';
+import { useSettingsStore } from './settings';
+import { useUIStore } from './ui';
+import { useUsersStore } from './users';
+import { useWorkflowsStore } from './workflows';
 
 export const useWebhooksStore = defineStore(STORES.WEBHOOKS, {
 	getters: {
 		globalRoleName(): string {
 			return useUsersStore().globalRoleName;
 		},
-		getDynamicTranslations () {
+		getDynamicTranslations() {
 			return useUIStore().dynamicTranslations;
 		},
-		getFakeDoorFeatures () {
+		getFakeDoorFeatures() {
 			return useUIStore().fakeDoorFeatures;
 		},
-		isUserManagementEnabled () {
+		isUserManagementEnabled() {
 			return useSettingsStore().isUserManagementEnabled;
 		},
 		getFakeDoorItems(): IFakeDoor[] {
@@ -48,9 +48,11 @@ export const useWebhooksStore = defineStore(STORES.WEBHOOKS, {
 		activeExecutionId(): string {
 			return useWorkflowsStore().activeExecutionId || '';
 		},
-		nodeByName: (state: IRootState) => (nodeName: string): INodeUi | null => {
-			return useWorkflowsStore().getNodeByName(nodeName);
-		},
+		nodeByName:
+			(state: IRootState) =>
+			(nodeName: string): INodeUi | null => {
+				return useWorkflowsStore().getNodeByName(nodeName);
+			},
 		allNodes(): INodeUi[] {
 			return useWorkflowsStore().allNodes;
 		},
@@ -59,7 +61,7 @@ export const useWebhooksStore = defineStore(STORES.WEBHOOKS, {
 		addSidebarMenuItems(menuItems: IMenuItem[]) {
 			const uiStore = useUIStore();
 			const updated = uiStore.sidebarMenuItems.concat(menuItems);
-			uiStore.sidebarMenuItems =  updated;
+			uiStore.sidebarMenuItems = updated;
 		},
 		setFakeDoorFeatures(fakeDoors: IFakeDoor[]): void {
 			useUIStore().fakeDoorFeatures = fakeDoors;
diff --git a/packages/editor-ui/src/stores/workflows.ee.ts b/packages/editor-ui/src/stores/workflows.ee.ts
index 28017eeb68..6a5f505527 100644
--- a/packages/editor-ui/src/stores/workflows.ee.ts
+++ b/packages/editor-ui/src/stores/workflows.ee.ts
@@ -1,17 +1,17 @@
 import Vue from 'vue';
-import {
-	IUser,
-} from '../Interface';
-import {setWorkflowSharedWith} from "@/api/workflows.ee";
-import {EnterpriseEditionFeature, STORES} from "@/constants";
-import {useRootStore} from "@/stores/n8nRootStore";
-import {useSettingsStore} from "@/stores/settings";
-import {defineStore} from "pinia";
-import {useWorkflowsStore} from "@/stores/workflows";
-import {i18n} from "@/plugins/i18n";
+import { IUser } from '../Interface';
+import { setWorkflowSharedWith } from '@/api/workflows.ee';
+import { EnterpriseEditionFeature, STORES } from '@/constants';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
+import { defineStore } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { i18n } from '@/plugins/i18n';
 
 export const useWorkflowsEEStore = defineStore(STORES.WORKFLOWS_EE, {
-	state() { return {}; },
+	state() {
+		return {};
+	},
 	getters: {
 		getWorkflowOwnerName() {
 			return (workflowId: string): string => {
@@ -23,49 +23,54 @@ export const useWorkflowsEEStore = defineStore(STORES.WORKFLOWS_EE, {
 		},
 	},
 	actions: {
-		setWorkflowOwnedBy(payload: { workflowId: string, ownedBy: Partial<IUser> }): void {
+		setWorkflowOwnedBy(payload: { workflowId: string; ownedBy: Partial<IUser> }): void {
 			const workflowsStore = useWorkflowsStore();
 
 			Vue.set(workflowsStore.workflowsById[payload.workflowId], 'ownedBy', payload.ownedBy);
 			Vue.set(workflowsStore.workflow, 'ownedBy', payload.ownedBy);
 		},
-		setWorkflowSharedWith(payload: { workflowId: string, sharedWith: Array<Partial<IUser>> }): void {
+		setWorkflowSharedWith(payload: {
+			workflowId: string;
+			sharedWith: Array<Partial<IUser>>;
+		}): void {
 			const workflowsStore = useWorkflowsStore();
 
 			Vue.set(workflowsStore.workflowsById[payload.workflowId], 'sharedWith', payload.sharedWith);
 			Vue.set(workflowsStore.workflow, 'sharedWith', payload.sharedWith);
 		},
-		addWorkflowSharee(payload: { workflowId: string, sharee: Partial<IUser> }): void {
+		addWorkflowSharee(payload: { workflowId: string; sharee: Partial<IUser> }): void {
 			const workflowsStore = useWorkflowsStore();
 
 			Vue.set(
 				workflowsStore.workflowsById[payload.workflowId],
 				'sharedWith',
-				(workflowsStore.workflowsById[payload.workflowId].sharedWith || []).concat([payload.sharee]),
+				(workflowsStore.workflowsById[payload.workflowId].sharedWith || []).concat([
+					payload.sharee,
+				]),
 			);
 		},
-		removeWorkflowSharee(payload: { workflowId: string, sharee: Partial<IUser> }): void {
+		removeWorkflowSharee(payload: { workflowId: string; sharee: Partial<IUser> }): void {
 			const workflowsStore = useWorkflowsStore();
 
 			Vue.set(
 				workflowsStore.workflowsById[payload.workflowId],
 				'sharedWith',
-				(workflowsStore.workflowsById[payload.workflowId].sharedWith || [])
-					.filter((sharee) => sharee.id !== payload.sharee.id),
+				(workflowsStore.workflowsById[payload.workflowId].sharedWith || []).filter(
+					(sharee) => sharee.id !== payload.sharee.id,
+				),
 			);
 		},
-		async saveWorkflowSharedWith(payload: { sharedWith: Array<Partial<IUser>>; workflowId: string; }): Promise<void> {
+		async saveWorkflowSharedWith(payload: {
+			sharedWith: Array<Partial<IUser>>;
+			workflowId: string;
+		}): Promise<void> {
 			const rootStore = useRootStore();
 			const settingsStore = useSettingsStore();
 
 			if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)) {
-				await setWorkflowSharedWith(
-					rootStore.getRestApiContext,
-					payload.workflowId,
-					{
-						shareWithIds: payload.sharedWith.map((sharee) => sharee.id as string),
-					},
-				);
+				await setWorkflowSharedWith(rootStore.getRestApiContext, payload.workflowId, {
+					shareWithIds: payload.sharedWith.map((sharee) => sharee.id as string),
+				});
 
 				this.setWorkflowSharedWith(payload);
 			}
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 73e27426f2..2634cf84b0 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -5,7 +5,7 @@ import {
 	MAX_WORKFLOW_NAME_LENGTH,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	STORES,
-} from "@/constants";
+} from '@/constants';
 import {
 	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
@@ -20,8 +20,8 @@ import {
 	IWorkflowDb,
 	IWorkflowsMap,
 	WorkflowsState,
-} from "@/Interface";
-import { defineStore } from "pinia";
+} from '@/Interface';
+import { defineStore } from 'pinia';
 import {
 	deepCopy,
 	IConnection,
@@ -38,24 +38,29 @@ import {
 	ITaskData,
 	IWorkflowSettings,
 } from 'n8n-workflow';
-import Vue from "vue";
+import Vue from 'vue';
 
-import { useRootStore } from "./n8nRootStore";
+import { useRootStore } from './n8nRootStore';
 import {
 	getActiveWorkflows,
 	getCurrentExecutions,
 	getFinishedExecutions,
 	getNewWorkflow,
 	getWorkflows,
-} from "@/api/workflows";
-import {useUIStore} from "./ui";
-import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
-import {isJsonKeyObject, getPairedItemsMapping, stringSizeInBytes, isObjectLiteral} from "@/utils";
-import {useNDVStore} from "./ndv";
-import {useNodeTypesStore} from "./nodeTypes";
-import {useWorkflowsEEStore} from "@/stores/workflows.ee";
-import {useUsersStore} from "@/stores/users";
-import {useSettingsStore} from "@/stores/settings";
+} from '@/api/workflows';
+import { useUIStore } from './ui';
+import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
+import {
+	isJsonKeyObject,
+	getPairedItemsMapping,
+	stringSizeInBytes,
+	isObjectLiteral,
+} from '@/utils';
+import { useNDVStore } from './ndv';
+import { useNodeTypesStore } from './nodeTypes';
+import { useWorkflowsEEStore } from '@/stores/workflows.ee';
+import { useUsersStore } from '@/stores/users';
+import { useSettingsStore } from '@/stores/settings';
 
 const createEmptyWorkflow = (): IWorkflowDb => ({
 	id: PLACEHOLDER_EMPTY_WORKFLOW_ID,
@@ -101,29 +106,31 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		workflowVersionId(): string | undefined {
 			return this.workflow.versionId;
 		},
-		workflowSettings() : IWorkflowSettings {
+		workflowSettings(): IWorkflowSettings {
 			if (this.workflow.settings === undefined) {
 				return {};
 			}
 			return this.workflow.settings;
 		},
-		workflowTags() : string[] {
+		workflowTags(): string[] {
 			return this.workflow.tags as string[];
 		},
-		allWorkflows() : IWorkflowDb[] {
-			return Object.values(this.workflowsById)
-				.sort((a, b) => a.name.localeCompare(b.name));
+		allWorkflows(): IWorkflowDb[] {
+			return Object.values(this.workflowsById).sort((a, b) => a.name.localeCompare(b.name));
 		},
-		isNewWorkflow() : boolean {
+		isNewWorkflow(): boolean {
 			return this.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 		},
 		isWorkflowActive(): boolean {
 			return this.workflow.active;
 		},
-		workflowTriggerNodes() : INodeUi[] {
+		workflowTriggerNodes(): INodeUi[] {
 			return this.workflow.nodes.filter((node: INodeUi) => {
 				const nodeTypesStore = useNodeTypesStore();
-				const nodeType = nodeTypesStore.getNodeType(node.type as string, node.typeVersion as number);
+				const nodeType = nodeTypesStore.getNodeType(
+					node.type as string,
+					node.typeVersion as number,
+				);
 				return nodeType && nodeType.group.includes('trigger');
 			});
 		},
@@ -131,7 +138,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return !!this.workflow.nodes.find((node: INodeUi) => !!node.webhookId);
 		},
 		getWorkflowRunData(): IRunData | null {
-			if (!this.workflowExecutionData || !this.workflowExecutionData.data || !this.workflowExecutionData.data.resultData) {
+			if (
+				!this.workflowExecutionData ||
+				!this.workflowExecutionData.data ||
+				!this.workflowExecutionData.data.resultData
+			) {
 				return null;
 			}
 			return this.workflowExecutionData.data.resultData.runData;
@@ -154,10 +165,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		// Node getters
-		allConnections() : IConnections {
+		allConnections(): IConnections {
 			return this.workflow.connections;
 		},
-		outgoingConnectionsByNodeName()  {
+		outgoingConnectionsByNodeName() {
 			return (nodeName: string): INodeConnections => {
 				if (this.workflow.connections.hasOwnProperty(nodeName)) {
 					return this.workflow.connections[nodeName];
@@ -165,10 +176,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				return {};
 			};
 		},
-		allNodes() : INodeUi[] {
+		allNodes(): INodeUi[] {
 			return this.workflow.nodes;
 		},
-		nodesByName() : { [name: string]: INodeUi } {
+		nodesByName(): { [name: string]: INodeUi } {
 			return this.workflow.nodes.reduce((accu: { [name: string]: INodeUi }, node) => {
 				accu[node.name] = node;
 				return accu;
@@ -178,7 +189,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return (nodeName: string): INodeUi | null => this.nodesByName[nodeName] || null;
 		},
 		getNodeById() {
-			return (nodeId: string): INodeUi | undefined => this.workflow.nodes.find((node: INodeUi) => node.id === nodeId);
+			return (nodeId: string): INodeUi | undefined =>
+				this.workflow.nodes.find((node: INodeUi) => node.id === nodeId);
 		},
 		nodesIssuesExist(): boolean {
 			for (const node of this.workflow.nodes) {
@@ -195,28 +207,31 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		pinDataSize(): number {
 			const ndvStore = useNDVStore();
 			const activeNode = ndvStore.activeNodeName;
-			return this.workflow.nodes
-				.reduce((acc, node) => {
-					if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
-						acc += stringSizeInBytes(node.pinData);
-					}
+			return this.workflow.nodes.reduce((acc, node) => {
+				if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
+					acc += stringSizeInBytes(node.pinData);
+				}
 
-					return acc;
-				}, 0);
+				return acc;
+			}, 0);
 		},
 		executedNode(): string | undefined {
 			return this.workflowExecutionData ? this.workflowExecutionData.executedNode : undefined;
 		},
-		getParametersLastUpdate(): ((name: string) => number | undefined) {
-			return (nodeName: string) => this.nodeMetadata[nodeName] && this.nodeMetadata[nodeName].parametersLastUpdatedAt;
+		getParametersLastUpdate(): (name: string) => number | undefined {
+			return (nodeName: string) =>
+				this.nodeMetadata[nodeName] && this.nodeMetadata[nodeName].parametersLastUpdatedAt;
 		},
 
 		// Executions getters
 		getExecutionDataById(): (id: string) => IExecutionsSummary | undefined {
-			return (id: string): IExecutionsSummary | undefined => this.currentWorkflowExecutions.find(execution => execution.id === id);
+			return (id: string): IExecutionsSummary | undefined =>
+				this.currentWorkflowExecutions.find((execution) => execution.id === id);
 		},
 		getAllLoadedFinishedExecutions(): IExecutionsSummary[] {
-			return this.currentWorkflowExecutions.filter(ex => ex.finished === true || ex.stoppedAt !== undefined);
+			return this.currentWorkflowExecutions.filter(
+				(ex) => ex.finished === true || ex.stoppedAt !== undefined,
+			);
 		},
 		getWorkflowExecution(): IExecutionResponse | null {
 			return this.workflowExecutionData;
@@ -226,7 +241,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 	},
 	actions: {
-
 		// Workflow actions
 
 		async fetchAllWorkflows(): Promise<IWorkflowDb[]> {
@@ -246,8 +260,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			try {
 				const rootStore = useRootStore();
 				workflowData = await getNewWorkflow(rootStore.getRestApiContext, name);
-			}
-			catch (e) {
+			} catch (e) {
 				// in case of error, default to original name
 				workflowData.name = name || DEFAULT_NEW_WORKFLOW_NAME;
 			}
@@ -268,26 +281,32 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 		},
 
-		setWorkflowId (id: string): void {
+		setWorkflowId(id: string): void {
 			this.workflow.id = id === 'new' ? PLACEHOLDER_EMPTY_WORKFLOW_ID : id;
 		},
 
 		setUsedCredentials(data: IUsedCredential[]) {
 			this.workflow.usedCredentials = data;
-			this.usedCredentials = data.reduce<{ [name: string]: IUsedCredential }>((accu, credential) => {
-				accu[credential.id!] = credential;
-				return accu;
-			}, {});
+			this.usedCredentials = data.reduce<{ [name: string]: IUsedCredential }>(
+				(accu, credential) => {
+					accu[credential.id!] = credential;
+					return accu;
+				},
+				{},
+			);
 		},
 
-		setWorkflowName(data: { newName: string, setStateDirty: boolean }): void {
+		setWorkflowName(data: { newName: string; setStateDirty: boolean }): void {
 			if (data.setStateDirty === true) {
 				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
 			}
 			this.workflow.name = data.newName;
 
-			if (this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID && this.workflowsById[this.workflow.id]) {
+			if (
+				this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID &&
+				this.workflowsById[this.workflow.id]
+			) {
 				this.workflowsById[this.workflow.id].name = data.newName;
 			}
 		},
@@ -297,9 +316,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		// replace invalid credentials in workflow
-		replaceInvalidWorkflowCredentials(data: {credentials: INodeCredentialsDetails, invalid: INodeCredentialsDetails, type: string}): void {
-			this.workflow.nodes.forEach((node : INodeUi) => {
-				const nodeCredentials: INodeCredentials | undefined = (node as unknown as INode).credentials;
+		replaceInvalidWorkflowCredentials(data: {
+			credentials: INodeCredentialsDetails;
+			invalid: INodeCredentialsDetails;
+			type: string;
+		}): void {
+			this.workflow.nodes.forEach((node: INodeUi) => {
+				const nodeCredentials: INodeCredentials | undefined = (node as unknown as INode)
+					.credentials;
 
 				if (!nodeCredentials || !nodeCredentials[data.type]) {
 					return;
@@ -307,7 +331,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 				const nodeCredentialDetails: INodeCredentialsDetails | string = nodeCredentials[data.type];
 
-				if (typeof nodeCredentialDetails === 'string' && nodeCredentialDetails === data.invalid.name) {
+				if (
+					typeof nodeCredentialDetails === 'string' &&
+					nodeCredentialDetails === data.invalid.name
+				) {
 					(node.credentials as INodeCredentials)[data.type] = data.credentials;
 					return;
 				}
@@ -325,7 +352,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			});
 		},
 
-		setWorkflows(workflows: IWorkflowDb[]) : void {
+		setWorkflows(workflows: IWorkflowDb[]): void {
 			this.workflowsById = workflows.reduce<IWorkflowsMap>((acc, workflow: IWorkflowDb) => {
 				if (workflow.id) {
 					acc[workflow.id] = workflow;
@@ -335,12 +362,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}, {});
 		},
 
-		deleteWorkflow(id: string) : void {
+		deleteWorkflow(id: string): void {
 			const { [id]: deletedWorkflow, ...workflows } = this.workflowsById;
 			this.workflowsById = workflows;
 		},
 
-		addWorkflow(workflow: IWorkflowDb) : void {
+		addWorkflow(workflow: IWorkflowDb): void {
 			Vue.set(this.workflowsById, workflow.id, {
 				...this.workflowsById[workflow.id],
 				...deepCopy(workflow),
@@ -357,7 +384,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			if (this.workflowsById[workflowId]) {
 				this.workflowsById[workflowId].active = true;
 			}
-
 		},
 
 		setWorkflowInactive(workflowId: string): void {
@@ -377,27 +403,27 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return activeWorkflows;
 		},
 
-		setActive(newActive: boolean) : void {
+		setActive(newActive: boolean): void {
 			this.workflow.active = newActive;
 		},
 
 		async getDuplicateCurrentWorkflowName(currentWorkflowName: string): Promise<string> {
-			if (currentWorkflowName && (currentWorkflowName.length + DUPLICATE_POSTFFIX.length) >= MAX_WORKFLOW_NAME_LENGTH) {
+			if (
+				currentWorkflowName &&
+				currentWorkflowName.length + DUPLICATE_POSTFFIX.length >= MAX_WORKFLOW_NAME_LENGTH
+			) {
 				return currentWorkflowName;
 			}
 
 			let newName = `${currentWorkflowName}${DUPLICATE_POSTFFIX}`;
 			try {
 				const rootStore = useRootStore();
-				const newWorkflow = await getNewWorkflow(rootStore.getRestApiContext, newName );
+				const newWorkflow = await getNewWorkflow(rootStore.getRestApiContext, newName);
 				newName = newWorkflow.name;
-			}
-			catch (e) {
-			}
+			} catch (e) {}
 			return newName;
 		},
 
-
 		// Node actions
 		setWorkflowExecutionData(workflowResultData: IExecutionResponse | null): void {
 			this.workflowExecutionData = workflowResultData;
@@ -453,7 +479,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 		},
 
-		pinData(payload: { node: INodeUi, data: INodeExecutionData[] }): void {
+		pinData(payload: { node: INodeUi; data: INodeExecutionData[] }): void {
 			if (!this.workflow.pinData) {
 				Vue.set(this.workflow, 'pinData', {});
 			}
@@ -462,7 +488,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				payload.data = [payload.data];
 			}
 
-			const storedPinData = payload.data.map(item => isJsonKeyObject(item) ? item : { json: item });
+			const storedPinData = payload.data.map((item) =>
+				isJsonKeyObject(item) ? item : { json: item },
+			);
 
 			Vue.set(this.workflow.pinData!, payload.node.name, storedPinData);
 
@@ -486,7 +514,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
 		},
 
-		addConnection(data: { connection: IConnection[], setStateDirty: boolean }): void {
+		addConnection(data: { connection: IConnection[]; setStateDirty: boolean }): void {
 			if (data.connection.length !== 2) {
 				// All connections need two entries
 				// TODO: Check if there is an error or whatever that is supposed to be returned
@@ -507,8 +535,15 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			if (!this.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
 				Vue.set(this.workflow.connections[sourceData.node], sourceData.type, []);
 			}
-			if (this.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
-				for (let i = this.workflow.connections[sourceData.node][sourceData.type].length; i <= sourceData.index; i++) {
+			if (
+				this.workflow.connections[sourceData.node][sourceData.type].length <
+				sourceData.index + 1
+			) {
+				for (
+					let i = this.workflow.connections[sourceData.node][sourceData.type].length;
+					i <= sourceData.index;
+					i++
+				) {
 					this.workflow.connections[sourceData.node][sourceData.type].push([]);
 				}
 			}
@@ -517,10 +552,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			const checkProperties = ['index', 'node', 'type'];
 			let propertyName: string;
 			let connectionExists = false;
-			connectionLoop:
-			for (const existingConnection of this.workflow.connections[sourceData.node][sourceData.type][sourceData.index]) {
+			connectionLoop: for (const existingConnection of this.workflow.connections[sourceData.node][
+				sourceData.type
+			][sourceData.index]) {
 				for (propertyName of checkProperties) {
-					if ((existingConnection as any)[propertyName] !== (destinationData as any)[propertyName]) { // tslint:disable-line:no-any
+					if (
+						// tslint:disable-next-line:no-any
+						(existingConnection as any)[propertyName] !== (destinationData as any)[propertyName]
+					) {
 						continue connectionLoop;
 					}
 				}
@@ -529,7 +568,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 			// Add the new connection if it does not exist already
 			if (connectionExists === false) {
-				this.workflow.connections[sourceData.node][sourceData.type][sourceData.index].push(destinationData);
+				this.workflow.connections[sourceData.node][sourceData.type][sourceData.index].push(
+					destinationData,
+				);
 			}
 		},
 
@@ -543,15 +584,23 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			if (!this.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
 				return;
 			}
-			if (this.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
+			if (
+				this.workflow.connections[sourceData.node][sourceData.type].length <
+				sourceData.index + 1
+			) {
 				return;
 			}
 			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
 
-			const connections = this.workflow.connections[sourceData.node][sourceData.type][sourceData.index];
+			const connections =
+				this.workflow.connections[sourceData.node][sourceData.type][sourceData.index];
 			for (const index in connections) {
-				if (connections[index].node === destinationData.node && connections[index].type === destinationData.type && connections[index].index === destinationData.index) {
+				if (
+					connections[index].node === destinationData.node &&
+					connections[index].type === destinationData.type &&
+					connections[index].index === destinationData.index
+				) {
 					// Found the connection to remove
 					connections.splice(parseInt(index, 10), 1);
 				}
@@ -576,33 +625,50 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 			// Remove all destination connections
 			const indexesToRemove = [];
-			let sourceNode: string, type: string, sourceIndex: string, connectionIndex: string, connectionData: IConnection;
+			let sourceNode: string,
+				type: string,
+				sourceIndex: string,
+				connectionIndex: string,
+				connectionData: IConnection;
 			for (sourceNode of Object.keys(this.workflow.connections)) {
 				for (type of Object.keys(this.workflow.connections[sourceNode])) {
 					for (sourceIndex of Object.keys(this.workflow.connections[sourceNode][type])) {
 						indexesToRemove.length = 0;
-						for (connectionIndex of Object.keys(this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)])) {
-							connectionData = this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)][parseInt(connectionIndex, 10)];
+						for (connectionIndex of Object.keys(
+							this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)],
+						)) {
+							connectionData =
+								this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)][
+									parseInt(connectionIndex, 10)
+								];
 							if (connectionData.node === node.name) {
 								indexesToRemove.push(connectionIndex);
 							}
 						}
 
 						indexesToRemove.forEach((index) => {
-							this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)].splice(parseInt(index, 10), 1);
+							this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)].splice(
+								parseInt(index, 10),
+								1,
+							);
 						});
 					}
 				}
 			}
 		},
 
-		renameNodeSelectedAndExecution(nameData: { old: string, new: string }): void {
+		renameNodeSelectedAndExecution(nameData: { old: string; new: string }): void {
 			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
 			// If node has any WorkflowResultData rename also that one that the data
 			// does still get displayed also after node got renamed
-			if (this.workflowExecutionData !== null && this.workflowExecutionData.data && this.workflowExecutionData.data.resultData.runData.hasOwnProperty(nameData.old)) {
-				this.workflowExecutionData.data.resultData.runData[nameData.new] = this.workflowExecutionData.data.resultData.runData[nameData.old];
+			if (
+				this.workflowExecutionData !== null &&
+				this.workflowExecutionData.data &&
+				this.workflowExecutionData.data.resultData.runData.hasOwnProperty(nameData.old)
+			) {
+				this.workflowExecutionData.data.resultData.runData[nameData.new] =
+					this.workflowExecutionData.data.resultData.runData[nameData.old];
 				delete this.workflowExecutionData.data.resultData.runData[nameData.old];
 			}
 
@@ -630,7 +696,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		setNodeIssue(nodeIssueData: INodeIssueData): boolean {
-			const node = this.workflow.nodes.find(node => {
+			const node = this.workflow.nodes.find((node) => {
 				return node.name === nodeIssueData.node;
 			});
 			if (!node) {
@@ -681,7 +747,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 		},
 
-		removeAllNodes(data: { setStateDirty: boolean, removePinData: boolean }): void {
+		removeAllNodes(data: { setStateDirty: boolean; removePinData: boolean }): void {
 			if (data.setStateDirty === true) {
 				const uiStore = useUIStore();
 				uiStore.stateIsDirty = true;
@@ -697,7 +763,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		updateNodeProperties(updateInformation: INodeUpdatePropertiesInformation): void {
 			// Find the node that should be updated
-			const node = this.workflow.nodes.find(node => {
+			const node = this.workflow.nodes.find((node) => {
 				return node.name === updateInformation.name;
 			});
 
@@ -712,12 +778,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		setNodeValue(updateInformation: IUpdateInformation): void {
 			// Find the node that should be updated
-			const node = this.workflow.nodes.find(node => {
+			const node = this.workflow.nodes.find((node) => {
 				return node.name === updateInformation.name;
 			});
 
 			if (node === undefined || node === null || !updateInformation.key) {
-				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
+				throw new Error(
+					`Node with the name "${updateInformation.name}" could not be found to set parameter.`,
+				);
 			}
 
 			const uiStore = useUIStore();
@@ -727,19 +795,22 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		setNodeParameters(updateInformation: IUpdateInformation, append?: boolean): void {
 			// Find the node that should be updated
-			const node = this.workflow.nodes.find(node => {
+			const node = this.workflow.nodes.find((node) => {
 				return node.name === updateInformation.name;
 			});
 
 			if (node === undefined || node === null) {
-				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
+				throw new Error(
+					`Node with the name "${updateInformation.name}" could not be found to set parameter.`,
+				);
 			}
 
 			const uiStore = useUIStore();
 			uiStore.stateIsDirty = true;
-			const newParameters = !!append && isObjectLiteral(updateInformation.value)
-				? {...node.parameters, ...updateInformation.value }
-				: updateInformation.value;
+			const newParameters =
+				!!append && isObjectLiteral(updateInformation.value)
+					? { ...node.parameters, ...updateInformation.value }
+					: updateInformation.value;
 
 			Vue.set(node, 'parameters', newParameters);
 
@@ -750,9 +821,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 		},
 
 		setLastNodeParameters(updateInformation: IUpdateInformation) {
-			const latestNode = this.workflow.nodes.findLast((node) => node.type === updateInformation.key) as INodeUi;
+			const latestNode = this.workflow.nodes.findLast(
+				(node) => node.type === updateInformation.key,
+			) as INodeUi;
 
-			if(latestNode) this.setNodeParameters({...updateInformation, name: latestNode.name}, true);
+			if (latestNode) this.setNodeParameters({ ...updateInformation, name: latestNode.name }, true);
 		},
 
 		addNodeExecutionData(pushData: IPushDataNodeExecuteAfter): void {
@@ -774,7 +847,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		pinDataByNodeName(nodeName: string): INodeExecutionData[] | undefined {
 			if (!this.workflow.pinData || !this.workflow.pinData[nodeName]) return undefined;
-			return this.workflow.pinData[nodeName].map(item => item.json) as INodeExecutionData[];
+			return this.workflow.pinData[nodeName].map((item) => item.json) as INodeExecutionData[];
 		},
 
 		activeNode(): INodeUi | null {
@@ -785,9 +858,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		// Executions actions
 
-		addActiveExecution(newActiveExecution: IExecutionsCurrentSummaryExtended) : void {
+		addActiveExecution(newActiveExecution: IExecutionsCurrentSummaryExtended): void {
 			// Check if the execution exists already
-			const activeExecution = this.activeExecutions.find(execution => {
+			const activeExecution = this.activeExecutions.find((execution) => {
 				return execution.id === newActiveExecution.id;
 			});
 
@@ -800,9 +873,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 			this.activeExecutions.unshift(newActiveExecution);
 		},
-		finishActiveExecution(finishedActiveExecution: IPushDataExecutionFinished) : void {
+		finishActiveExecution(finishedActiveExecution: IPushDataExecutionFinished): void {
 			// Find the execution to set to finished
-			const activeExecution = this.activeExecutions.find(execution => {
+			const activeExecution = this.activeExecutions.find((execution) => {
 				return execution.id === finishedActiveExecution.executionId;
 			});
 
@@ -819,11 +892,14 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			Vue.set(activeExecution, 'stoppedAt', finishedActiveExecution.data.stoppedAt);
 		},
 
-		setActiveExecutions(newActiveExecutions: IExecutionsCurrentSummaryExtended[]) : void {
+		setActiveExecutions(newActiveExecutions: IExecutionsCurrentSummaryExtended[]): void {
 			Vue.set(this, 'activeExecutions', newActiveExecutions);
 		},
 
-		async loadCurrentWorkflowExecutions (filter: { finished: boolean, status: string }): Promise<IExecutionsSummary[]> {
+		async loadCurrentWorkflowExecutions(filter: {
+			finished: boolean;
+			status: string;
+		}): Promise<IExecutionsSummary[]> {
 			let activeExecutions = [];
 			let finishedExecutions = [];
 			const requestFilter: IDataObject = { workflowId: this.workflowId };
@@ -833,24 +909,27 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			}
 			try {
 				const rootStore = useRootStore();
-				if (filter.status === ''|| !filter.finished) {
+				if (filter.status === '' || !filter.finished) {
 					activeExecutions = await getCurrentExecutions(rootStore.getRestApiContext, requestFilter);
 				}
 				if (filter.status === '' || filter.finished) {
 					if (filter.status === 'waiting') {
 						requestFilter.waitTill = true;
-					} else if (filter.status !== '')  {
+					} else if (filter.status !== '') {
 						requestFilter.finished = filter.status === 'success';
 					}
-					finishedExecutions = await getFinishedExecutions(rootStore.getRestApiContext, requestFilter);
+					finishedExecutions = await getFinishedExecutions(
+						rootStore.getRestApiContext,
+						requestFilter,
+					);
 				}
 				// context.commit('setTotalFinishedExecutionsCount', finishedExecutions.count);
-				return [...activeExecutions, ...finishedExecutions.results || []];
+				return [...activeExecutions, ...(finishedExecutions.results || [])];
 			} catch (error) {
-				throw(error);
+				throw error;
 			}
 		},
-		deleteExecution (execution: IExecutionsSummary): void {
+		deleteExecution(execution: IExecutionsSummary): void {
 			this.currentWorkflowExecutions.splice(this.currentWorkflowExecutions.indexOf(execution), 1);
 		},
 	},
diff --git a/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts b/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
index fb110c6daa..ab04126f88 100644
--- a/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
+++ b/packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
@@ -1,23 +1,23 @@
-import jp from "jsonpath";
-import { isEmpty, intersection, mergeDeep, getSchema, isValidDate } from "@/utils";
-import { Schema } from "@/Interface";
+import jp from 'jsonpath';
+import { isEmpty, intersection, mergeDeep, getSchema, isValidDate } from '@/utils';
+import { Schema } from '@/Interface';
 
-describe("Utils", () => {
-	describe("isEmpty", () => {
+describe('Utils', () => {
+	describe('isEmpty', () => {
 		test.each([
 			[undefined, true],
 			[null, true],
 			[{}, true],
-			[{ a: {}}, true],
-			[{ a: { b: []}}, true],
-			[{ a: { b: [1]}}, false],
+			[{ a: {} }, true],
+			[{ a: { b: [] } }, true],
+			[{ a: { b: [1] } }, false],
 			[[], true],
 			[[{}, {}, {}], true],
 			[[{}, null, false], true],
 			[[{}, null, false, 1], false],
 			[[[], [], []], true],
-			["", true],
-			["0", false],
+			['', true],
+			['0', false],
 			[0, false],
 			[1, false],
 			[false, true],
@@ -27,278 +27,525 @@ describe("Utils", () => {
 		});
 	});
 
-	describe("intersection", () => {
-		it("should return the intersection of two arrays", () => {
+	describe('intersection', () => {
+		it('should return the intersection of two arrays', () => {
 			expect(intersection([1, 2, 3], [2, 3, 4])).toEqual([2, 3]);
 		});
 
-		it("should return the intersection of two arrays without duplicates", () => {
+		it('should return the intersection of two arrays without duplicates', () => {
 			expect(intersection([1, 2, 2, 3], [2, 2, 3, 4])).toEqual([2, 3]);
 		});
 
-		it("should return the intersection of four arrays without duplicates", () => {
-			expect(intersection([1, 2, 2, 3, 4], [2, 3, 3, 4], [2, 1, 5, 4, 4, 1], [2, 4, 5, 5, 6, 7])).toEqual([2, 4]);
+		it('should return the intersection of four arrays without duplicates', () => {
+			expect(
+				intersection([1, 2, 2, 3, 4], [2, 3, 3, 4], [2, 1, 5, 4, 4, 1], [2, 4, 5, 5, 6, 7]),
+			).toEqual([2, 4]);
 		});
 	});
 
-	describe("mergeDeep", () => {
+	describe('mergeDeep', () => {
 		test.each([
 			[
-				[[1, 2], [3, 4]],
+				[
+					[1, 2],
+					[3, 4],
+				],
 				{},
 				[3, 4],
 			],
 			[
-				[[1, 2], [3, 4]],
+				[
+					[1, 2],
+					[3, 4],
+				],
 				{ concatArrays: true },
 				[1, 2, 3, 4],
 			],
 			[
-				[[1, 2], [3, 4]],
+				[
+					[1, 2],
+					[3, 4],
+				],
 				{ overwriteArrays: true },
 				[3, 4],
 			],
 			[
-				[[1, 2, 3], [4, 5]],
+				[
+					[1, 2, 3],
+					[4, 5],
+				],
 				{},
 				[4, 5, 3],
 			],
 			[
-				[[1, 2, 3], [4, 5]],
+				[
+					[1, 2, 3],
+					[4, 5],
+				],
 				{ concatArrays: true },
 				[1, 2, 3, 4, 5],
 			],
 			[
-				[[1, 2, 3], [4, 5]],
+				[
+					[1, 2, 3],
+					[4, 5],
+				],
 				{ overwriteArrays: true },
 				[4, 5],
 			],
 			[
-				[[1, 2], [3, 4, 5]],
+				[
+					[1, 2],
+					[3, 4, 5],
+				],
 				{},
 				[3, 4, 5],
 			],
 			[
-				[[1, 2], [3, 4, 5]],
+				[
+					[1, 2],
+					[3, 4, 5],
+				],
 				{ concatArrays: true },
 				[1, 2, 3, 4, 5],
 			],
 			[
-				[[1, 2], [3, 4, 5]],
+				[
+					[1, 2],
+					[3, 4, 5],
+				],
 				{ overwriteArrays: true },
 				[3, 4, 5],
 			],
+			[[{ a: 1, b: [1, 2, { d: 2 }] }, {}], {}, { a: 1, b: [1, 2, { d: 2 }] }],
+			[[{ a: 1, b: [1, 2, { d: 2 }] }, {}], { concatArrays: true }, { a: 1, b: [1, 2, { d: 2 }] }],
 			[
-				[{a:1, b: [1, 2, {d: 2}]},{}],
-				{},
-				{a:1, b: [1, 2, {d:2}]},
-			],
-			[
-				[{a:1, b: [1, 2, {d: 2}]},{}],
-				{ concatArrays: true },
-				{a:1, b: [1, 2, {d:2}]},
-			],
-			[
-				[{a:1, b: [1, 2, {d: 2}]},{}],
+				[{ a: 1, b: [1, 2, { d: 2 }] }, {}],
 				{ overwriteArrays: true },
-				{a:1, b: [1, 2, {d:2}]},
+				{ a: 1, b: [1, 2, { d: 2 }] },
 			],
+			[[[{ a: 1, b: [1, 2, { d: 2 }] }], []], {}, [{ a: 1, b: [1, 2, { d: 2 }] }]],
 			[
-				[[{a:1, b: [1, 2, {d: 2}]}],[]],
-				{},
-				[{a:1, b: [1, 2, {d:2}]}],
-			],
-			[
-				[[{a:1, b: [1, 2, {d: 2}]}],[]],
+				[[{ a: 1, b: [1, 2, { d: 2 }] }], []],
 				{ concatArrays: true },
-				[{a:1, b: [1, 2, {d:2}]}],
+				[{ a: 1, b: [1, 2, { d: 2 }] }],
 			],
+			[[[{ a: 1, b: [1, 2, { d: 2 }] }], []], { overwriteArrays: true }, []],
 			[
-				[[{a:1, b: [1, 2, {d: 2}]}],[]],
-				{ overwriteArrays: true },
-				[],
-			],
-			[
-				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				[
+					{ a: 1, b: [1, 2, 3] },
+					{ a: 2, b: [4, 5, 6, 7], c: '2' },
+					{ a: 3, b: [8, 9], d: '3' },
+				],
 				{},
-				{a: 3, b: [8, 9, 6, 7], c: "2", d: "3"},
+				{ a: 3, b: [8, 9, 6, 7], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				[
+					{ a: 1, b: [1, 2, 3] },
+					{ a: 2, b: [4, 5, 6, 7], c: '2' },
+					{ a: 3, b: [8, 9], d: '3' },
+				],
 				{ concatArrays: true },
-				{a: 3, b: [1, 2, 3, 4, 5, 6, 7, 8, 9], c: "2", d: "3"},
+				{ a: 3, b: [1, 2, 3, 4, 5, 6, 7, 8, 9], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [1, 2, 3]}, {a: 2, b: [4, 5, 6, 7], c: "2"}, {a: 3, b: [8, 9], d: "3"}],
+				[
+					{ a: 1, b: [1, 2, 3] },
+					{ a: 2, b: [4, 5, 6, 7], c: '2' },
+					{ a: 3, b: [8, 9], d: '3' },
+				],
 				{ overwriteArrays: true },
-				{a: 3, b: [8, 9], c: "2", d: "3"},
+				{ a: 3, b: [8, 9], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{},
-				{a: 3, b: [{x: 'a', y: 'b', z: 'c'}], c: "2", d: "3"},
+				{ a: 3, b: [{ x: 'a', y: 'b', z: 'c' }], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{ concatArrays: true },
-				{a: 3, b: [{x: 'a'}, {y: 'b'}, {z: 'c'}], c: "2", d: "3"},
+				{ a: 3, b: [{ x: 'a' }, { y: 'b' }, { z: 'c' }], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{ overwriteArrays: true },
-				{a: 3, b: [{z: 'c'}], c: "2", d: "3"},
+				{ a: 3, b: [{ z: 'c' }], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }, { w: 'd' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{},
-				{a: 3, b: [{z: 'c'}, {w: 'd'}], c: "2", d: "3"},
+				{ a: 3, b: [{ z: 'c' }, { w: 'd' }], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }, { w: 'd' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{ concatArrays: true },
-				{a: 3, b: [{x: 'a'}, {w: 'd'}, {y: 'b'}, {z: 'c'}], c: "2", d: "3"},
+				{ a: 3, b: [{ x: 'a' }, { w: 'd' }, { y: 'b' }, { z: 'c' }], c: '2', d: '3' },
 			],
 			[
-				[{a: 1, b: [{x: 'a'}, {w: 'd'}]}, {a: 2, b: [{y: 'b'}], c: "2"}, {a: 3, b: [{z: 'c'}], d: "3"}],
+				[
+					{ a: 1, b: [{ x: 'a' }, { w: 'd' }] },
+					{ a: 2, b: [{ y: 'b' }], c: '2' },
+					{ a: 3, b: [{ z: 'c' }], d: '3' },
+				],
 				{ overwriteArrays: true },
-				{a: 3, b: [{z: 'c'}], c: "2", d: "3"},
+				{ a: 3, b: [{ z: 'c' }], c: '2', d: '3' },
 			],
 		])(`case %#. input %j, options %j should return %j`, (sources, options, expected) => {
 			expect(mergeDeep([...sources], options)).toEqual(expected);
 		});
 	});
 
-	describe("getSchema", () => {
+	describe('getSchema', () => {
 		test.each([
-			[
-				,
-				{ type: 'undefined', value: 'undefined', path: '' },
-			],
-			[
-				undefined,
-				{ type: 'undefined', value: 'undefined', path: '' },
-			],
-			[
-				null,
-				{ type: 'null', value: '[null]', path: '' },
-			],
-			[
-				'John',
-				{ type: 'string', value: 'John', path: '' },
-			],
-			[
-				'123',
-				{ type: 'string', value: '123', path: '' },
-			],
-			[
-				123,
-				{ type: 'number', value: '123', path: '' },
-			],
-			[
-				true,
-				{ type: 'boolean', value: 'true', path: '' },
-			],
-			[
-				false,
-				{ type: 'boolean', value: 'false', path: '' },
-			],
-			[
-				() => {},
-				{ type: 'function', value: '', path: '' },
-			],
-			[
-				{},
-				{ type: 'object', value: [], path: '' },
-			],
-			[
-				[],
-				{ type: 'array', value: [], path: '' },
-			],
+			[, { type: 'undefined', value: 'undefined', path: '' }],
+			[undefined, { type: 'undefined', value: 'undefined', path: '' }],
+			[null, { type: 'null', value: '[null]', path: '' }],
+			['John', { type: 'string', value: 'John', path: '' }],
+			['123', { type: 'string', value: '123', path: '' }],
+			[123, { type: 'number', value: '123', path: '' }],
+			[true, { type: 'boolean', value: 'true', path: '' }],
+			[false, { type: 'boolean', value: 'false', path: '' }],
+			[() => {}, { type: 'function', value: '', path: '' }],
+			[{}, { type: 'object', value: [], path: '' }],
+			[[], { type: 'array', value: [], path: '' }],
 			[
 				new Date('2022-11-22T00:00:00.000Z'),
 				{ type: 'string', value: '2022-11-22T00:00:00.000Z', path: '' },
 			],
-			[
-				Symbol('x'),
-				{ type: 'symbol', value: 'Symbol(x)', path: '' },
-			],
-			[
-				1n,
-				{ type: 'bigint', value: '1', path: '' },
-			],
+			[Symbol('x'), { type: 'symbol', value: 'Symbol(x)', path: '' }],
+			[1n, { type: 'bigint', value: '1', path: '' }],
 			[
 				['John', 1, true],
-				{ type: 'array', value: [{ type: 'string', value: 'John', key: '0', path: '[0]' }, { type: 'number', value: '1', key: '1', path: '[1]' }, { type: 'boolean', value: 'true', key: '2', path: '[2]' }], path: '' },
+				{
+					type: 'array',
+					value: [
+						{ type: 'string', value: 'John', key: '0', path: '[0]' },
+						{ type: 'number', value: '1', key: '1', path: '[1]' },
+						{ type: 'boolean', value: 'true', key: '2', path: '[2]' },
+					],
+					path: '',
+				},
 			],
 			[
-				{ people: ['Joe', 'John']},
-				{ type: 'object',  value: [{ type: 'array', key: 'people', value: [{ type: 'string', value: 'Joe', key: '0', path: '["people"][0]' }, { type: 'string', value: 'John', key: '1', path: '["people"][1]' }], path: '["people"]' }], path: '' },
+				{ people: ['Joe', 'John'] },
+				{
+					type: 'object',
+					value: [
+						{
+							type: 'array',
+							key: 'people',
+							value: [
+								{ type: 'string', value: 'Joe', key: '0', path: '["people"][0]' },
+								{ type: 'string', value: 'John', key: '1', path: '["people"][1]' },
+							],
+							path: '["people"]',
+						},
+					],
+					path: '',
+				},
 			],
 			[
-				[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }],
-				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0]["age"]' }], path: '[0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[1]["age"]' }], path: '[1]'}], path: '' },
+				[
+					{ name: 'John', age: 22 },
+					{ name: 'Joe', age: 33 },
+				],
+				{
+					type: 'array',
+					value: [
+						{
+							type: 'object',
+							key: '0',
+							value: [
+								{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]' },
+								{ type: 'number', key: 'age', value: '22', path: '[0]["age"]' },
+							],
+							path: '[0]',
+						},
+						{
+							type: 'object',
+							key: '1',
+							value: [
+								{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]' },
+								{ type: 'number', key: 'age', value: '33', path: '[1]["age"]' },
+							],
+							path: '[1]',
+						},
+					],
+					path: '',
+				},
 			],
 			[
-				[{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }],
-				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0]["age"]' }, {type: 'array', key: 'hobbies', value: [{type: 'string', key: '0', value: 'surfing', path: '[0]["hobbies"][0]'},{type: 'string', key: '1', value: 'traveling', path: '[0]["hobbies"][1]'}], path: '[0]["hobbies"]'}], path: '[0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[1]["age"]' }, {type: 'array', key: 'hobbies', value: [{type: 'string', key: '0', value: 'skateboarding', path: '[1]["hobbies"][0]'},{type: 'string', key: '1', value: 'gaming', path: '[1]["hobbies"][1]'}], path: '[1]["hobbies"]'}], path: '[1]'}], path: '' },
+				[
+					{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] },
+					{ name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] },
+				],
+				{
+					type: 'array',
+					value: [
+						{
+							type: 'object',
+							key: '0',
+							value: [
+								{ type: 'string', key: 'name', value: 'John', path: '[0]["name"]' },
+								{ type: 'number', key: 'age', value: '22', path: '[0]["age"]' },
+								{
+									type: 'array',
+									key: 'hobbies',
+									value: [
+										{ type: 'string', key: '0', value: 'surfing', path: '[0]["hobbies"][0]' },
+										{ type: 'string', key: '1', value: 'traveling', path: '[0]["hobbies"][1]' },
+									],
+									path: '[0]["hobbies"]',
+								},
+							],
+							path: '[0]',
+						},
+						{
+							type: 'object',
+							key: '1',
+							value: [
+								{ type: 'string', key: 'name', value: 'Joe', path: '[1]["name"]' },
+								{ type: 'number', key: 'age', value: '33', path: '[1]["age"]' },
+								{
+									type: 'array',
+									key: 'hobbies',
+									value: [
+										{ type: 'string', key: '0', value: 'skateboarding', path: '[1]["hobbies"][0]' },
+										{ type: 'string', key: '1', value: 'gaming', path: '[1]["hobbies"][1]' },
+									],
+									path: '[1]["hobbies"]',
+								},
+							],
+							path: '[1]',
+						},
+					],
+					path: '',
+				},
+			],
+			[[], { type: 'array', value: [], path: '' }],
+			[
+				[[1, 2]],
+				{
+					type: 'array',
+					value: [
+						{
+							type: 'array',
+							key: '0',
+							value: [
+								{ type: 'number', key: '0', value: '1', path: '[0][0]' },
+								{ type: 'number', key: '1', value: '2', path: '[0][1]' },
+							],
+							path: '[0]',
+						},
+					],
+					path: '',
+				},
 			],
 			[
-				[],
-				{ type: 'array', value: [], path: '' },
+				[
+					[
+						{ name: 'John', age: 22 },
+						{ name: 'Joe', age: 33 },
+					],
+				],
+				{
+					type: 'array',
+					value: [
+						{
+							type: 'array',
+							key: '0',
+							value: [
+								{
+									type: 'object',
+									key: '0',
+									value: [
+										{ type: 'string', key: 'name', value: 'John', path: '[0][0]["name"]' },
+										{ type: 'number', key: 'age', value: '22', path: '[0][0]["age"]' },
+									],
+									path: '[0][0]',
+								},
+								{
+									type: 'object',
+									key: '1',
+									value: [
+										{ type: 'string', key: 'name', value: 'Joe', path: '[0][1]["name"]' },
+										{ type: 'number', key: 'age', value: '33', path: '[0][1]["age"]' },
+									],
+									path: '[0][1]',
+								},
+							],
+							path: '[0]',
+						},
+					],
+					path: '',
+				},
 			],
 			[
-				[[1,2]],
-				{ type: 'array', value: [{ type: 'array', key: '0', value: [{type: 'number', key: '0', value: '1', path: '[0][0]'}, {type: 'number', key: '1', value: '2', path: '[0][1]'}], path: '[0]' }], path: '' },
-			],
-			[
-				[[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }]],
-				{ type: 'array', value: [{type: 'array', key: '0', value:[{ type: 'object', key: '0', value: [{ type: 'string', key: 'name', value: 'John', path: '[0][0]["name"]'}, { type: 'number', key: 'age', value: '22', path: '[0][0]["age"]' }], path: '[0][0]'}, { type: 'object', key: '1', value: [{ type: 'string', key: 'name', value: 'Joe', path: '[0][1]["name"]'}, { type: 'number', key: 'age', value: '33', path: '[0][1]["age"]' }], path: '[0][1]'}], path: '[0]'}], path: '' },
-			],
-			[
-				[{ dates: [[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')], [new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')]] }],
-				{ type: 'array', value: [{ type: 'object', key: '0', value: [{ type: 'array', key: 'dates', value: [{ type: 'array', key: '0', value: [{type: 'string', key: '0', value: '2022-11-22T00:00:00.000Z', path: '[0]["dates"][0][0]'}, {type: 'string', key: '1', value: '2022-11-23T00:00:00.000Z', path: '[0]["dates"][0][1]'}], path: '[0]["dates"][0]' }, { type: 'array', key: '1', value: [{type: 'string', key: '0', value: '2022-12-22T00:00:00.000Z', path: '[0]["dates"][1][0]'}, {type: 'string', key: '1', value: '2022-12-23T00:00:00.000Z', path: '[0]["dates"][1][1]'}], path: '[0]["dates"][1]' }], path: '[0]["dates"]' }], path: '[0]' }], path: '' },
+				[
+					{
+						dates: [
+							[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')],
+							[new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')],
+						],
+					},
+				],
+				{
+					type: 'array',
+					value: [
+						{
+							type: 'object',
+							key: '0',
+							value: [
+								{
+									type: 'array',
+									key: 'dates',
+									value: [
+										{
+											type: 'array',
+											key: '0',
+											value: [
+												{
+													type: 'string',
+													key: '0',
+													value: '2022-11-22T00:00:00.000Z',
+													path: '[0]["dates"][0][0]',
+												},
+												{
+													type: 'string',
+													key: '1',
+													value: '2022-11-23T00:00:00.000Z',
+													path: '[0]["dates"][0][1]',
+												},
+											],
+											path: '[0]["dates"][0]',
+										},
+										{
+											type: 'array',
+											key: '1',
+											value: [
+												{
+													type: 'string',
+													key: '0',
+													value: '2022-12-22T00:00:00.000Z',
+													path: '[0]["dates"][1][0]',
+												},
+												{
+													type: 'string',
+													key: '1',
+													value: '2022-12-23T00:00:00.000Z',
+													path: '[0]["dates"][1][1]',
+												},
+											],
+											path: '[0]["dates"][1]',
+										},
+									],
+									path: '[0]["dates"]',
+								},
+							],
+							path: '[0]',
+						},
+					],
+					path: '',
+				},
 			],
 		])('should return the correct json schema for %s', (input, schema) => {
 			expect(getSchema(input)).toEqual(schema);
 		});
 
 		it('should return the correct data when using the generated json path on an object', () => {
-			const input = { people: ['Joe', 'John']};
+			const input = { people: ['Joe', 'John'] };
 			const schema = getSchema(input) as Schema;
-			const pathData = jp.query(input, `$${ ((schema.value as Schema[])[0].value as Schema[])[0].path }`);
+			const pathData = jp.query(
+				input,
+				`$${((schema.value as Schema[])[0].value as Schema[])[0].path}`,
+			);
 			expect(pathData).toEqual(['Joe']);
 		});
 
 		it('should return the correct data when using the generated json path on a list', () => {
-			const input = [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }];
+			const input = [
+				{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] },
+				{ name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] },
+			];
 			const schema = getSchema(input) as Schema;
-			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0].value as Schema[])[2].value as Schema[])[1].path }`);
+			const pathData = jp.query(
+				input,
+				`$${(((schema.value as Schema[])[0].value as Schema[])[2].value as Schema[])[1].path}`,
+			);
 			expect(pathData).toEqual(['traveling']);
 		});
 
 		it('should return the correct data when using the generated json path on a list of list', () => {
-			const input = [[1,2]];
+			const input = [[1, 2]];
 			const schema = getSchema(input) as Schema;
-			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0]).value as Schema[])[1].path }`);
+			const pathData = jp.query(
+				input,
+				`$${((schema.value as Schema[])[0].value as Schema[])[1].path}`,
+			);
 			expect(pathData).toEqual([2]);
 		});
 
 		it('should return the correct data when using the generated json path on a list of list of objects', () => {
-			const input = [[{ name: 'John', age: 22 }, { name: 'Joe', age: 33 }]];
+			const input = [
+				[
+					{ name: 'John', age: 22 },
+					{ name: 'Joe', age: 33 },
+				],
+			];
 			const schema = getSchema(input) as Schema;
-			const pathData = jp.query(input, `$${ (((schema.value as Schema[])[0].value as Schema[])[1].value as Schema[])[1].path}`);
+			const pathData = jp.query(
+				input,
+				`$${(((schema.value as Schema[])[0].value as Schema[])[1].value as Schema[])[1].path}`,
+			);
 			expect(pathData).toEqual([33]);
 		});
 
 		it('should return the correct data when using the generated json path on a list of objects with a list of date tuples', () => {
-			const input = [{ dates: [[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')], [new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')]] }];
+			const input = [
+				{
+					dates: [
+						[new Date('2022-11-22T00:00:00.000Z'), new Date('2022-11-23T00:00:00.000Z')],
+						[new Date('2022-12-22T00:00:00.000Z'), new Date('2022-12-23T00:00:00.000Z')],
+					],
+				},
+			];
 			const schema = getSchema(input) as Schema;
-			const pathData = jp.query(input, `$${ ((((schema.value as Schema[])[0].value as Schema[])[0].value as Schema[])[0].value as Schema[])[0].path}`);
+			const pathData = jp.query(
+				input,
+				`$${
+					(
+						(((schema.value as Schema[])[0].value as Schema[])[0].value as Schema[])[0]
+							.value as Schema[]
+					)[0].path
+				}`,
+			);
 			expect(pathData).toEqual([new Date('2022-11-22T00:00:00.000Z')]);
 		});
 	});
 
-	describe("dateTests", () => {
+	describe('dateTests', () => {
 		test.each([
 			'04-08-2021',
 			'15.11.2022 12:34h',
diff --git a/packages/editor-ui/src/utils/apiUtils.ts b/packages/editor-ui/src/utils/apiUtils.ts
index 89bbe75583..04b97dd78e 100644
--- a/packages/editor-ui/src/utils/apiUtils.ts
+++ b/packages/editor-ui/src/utils/apiUtils.ts
@@ -19,7 +19,10 @@ class ResponseError extends Error {
 	 * @param {number} [httpStatusCode] The HTTP status code the response should have
 	 * @param {string} [stack] The stack trace
 	 */
-	constructor (message: string, options: {errorCode?: number, httpStatusCode?: number, stack?: string} = {}) {
+	constructor(
+		message: string,
+		options: { errorCode?: number; httpStatusCode?: number; stack?: string } = {},
+	) {
 		super(message);
 		this.name = 'ResponseError';
 
@@ -36,7 +39,13 @@ class ResponseError extends Error {
 	}
 }
 
-async function request(config: {method: Method, baseURL: string, endpoint: string, headers?: IDataObject, data?: IDataObject}) {
+async function request(config: {
+	method: Method;
+	baseURL: string;
+	endpoint: string;
+	headers?: IDataObject;
+	data?: IDataObject;
+}) {
 	const { method, baseURL, endpoint, headers, data } = config;
 	const options: AxiosRequestConfig = {
 		method,
@@ -44,7 +53,7 @@ async function request(config: {method: Method, baseURL: string, endpoint: strin
 		baseURL,
 		headers,
 	};
-	if (import.meta.env.NODE_ENV !== 'production' && !baseURL.includes('api.n8n.io') ) {
+	if (import.meta.env.NODE_ENV !== 'production' && !baseURL.includes('api.n8n.io')) {
 		options.withCredentials = true;
 	}
 	if (['POST', 'PATCH', 'PUT'].includes(method)) {
@@ -68,14 +77,23 @@ async function request(config: {method: Method, baseURL: string, endpoint: strin
 				throw errorResponseData;
 			}
 
-			throw new ResponseError(errorResponseData.message, {errorCode: errorResponseData.code, httpStatusCode: error.response.status, stack: errorResponseData.stack});
+			throw new ResponseError(errorResponseData.message, {
+				errorCode: errorResponseData.code,
+				httpStatusCode: error.response.status,
+				stack: errorResponseData.stack,
+			});
 		}
 
 		throw error;
 	}
 }
 
-export async function makeRestApiRequest(context: IRestApiContext, method: Method, endpoint: string, data?: IDataObject) {
+export async function makeRestApiRequest(
+	context: IRestApiContext,
+	method: Method,
+	endpoint: string,
+	data?: IDataObject,
+) {
 	const response = await request({
 		method,
 		baseURL: context.baseUrl,
@@ -88,10 +106,20 @@ export async function makeRestApiRequest(context: IRestApiContext, method: Metho
 	return response.data;
 }
 
-export async function get(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
-	return await request({method: 'GET', baseURL, endpoint, headers, data: params});
+export async function get(
+	baseURL: string,
+	endpoint: string,
+	params?: IDataObject,
+	headers?: IDataObject,
+) {
+	return await request({ method: 'GET', baseURL, endpoint, headers, data: params });
 }
 
-export async function post(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
-	return await request({method: 'POST', baseURL, endpoint, headers, data: params});
+export async function post(
+	baseURL: string,
+	endpoint: string,
+	params?: IDataObject,
+	headers?: IDataObject,
+) {
+	return await request({ method: 'POST', baseURL, endpoint, headers, data: params });
 }
diff --git a/packages/editor-ui/src/utils/canvasUtils.ts b/packages/editor-ui/src/utils/canvasUtils.ts
index ef879f2eb8..984c8a4ac2 100644
--- a/packages/editor-ui/src/utils/canvasUtils.ts
+++ b/packages/editor-ui/src/utils/canvasUtils.ts
@@ -1,9 +1,9 @@
-import { MAIN_HEADER_TABS, VIEWS } from "@/constants";
-import { IZoomConfig } from "@/Interface";
-import { useWorkflowsStore } from "@/stores/workflows";
-import { OnConnectionBindInfo } from "jsplumb";
-import { IConnection } from "n8n-workflow";
-import { Route } from "vue-router";
+import { MAIN_HEADER_TABS, VIEWS } from '@/constants';
+import { IZoomConfig } from '@/Interface';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { OnConnectionBindInfo } from 'jsplumb';
+import { IConnection } from 'n8n-workflow';
+import { Route } from 'vue-router';
 
 /*
 	Constants and utility functions mainly used by canvas store
@@ -13,7 +13,7 @@ import { Route } from "vue-router";
 	'@/utils'.
 */
 
-export const scaleSmaller = ({scale, offset: [xOffset, yOffset]}: IZoomConfig): IZoomConfig => {
+export const scaleSmaller = ({ scale, offset: [xOffset, yOffset] }: IZoomConfig): IZoomConfig => {
 	scale /= 1.25;
 	xOffset /= 1.25;
 	yOffset /= 1.25;
@@ -26,7 +26,7 @@ export const scaleSmaller = ({scale, offset: [xOffset, yOffset]}: IZoomConfig):
 	};
 };
 
-export const scaleBigger = ({scale, offset: [xOffset, yOffset]}: IZoomConfig): IZoomConfig => {
+export const scaleBigger = ({ scale, offset: [xOffset, yOffset] }: IZoomConfig): IZoomConfig => {
 	scale *= 1.25;
 	xOffset -= window.innerWidth / 10;
 	yOffset -= window.innerHeight / 10;
@@ -40,12 +40,12 @@ export const scaleBigger = ({scale, offset: [xOffset, yOffset]}: IZoomConfig): I
 };
 
 export const scaleReset = (config: IZoomConfig): IZoomConfig => {
-	if (config.scale > 1) { // zoomed in
+	if (config.scale > 1) {
+		// zoomed in
 		while (config.scale > 1) {
 			config = scaleSmaller(config);
 		}
-	}
-	else {
+	} else {
 		while (config.scale < 1) {
 			config = scaleBigger(config);
 		}
@@ -56,7 +56,6 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
 	return config;
 };
 
-
 export const closestNumberDivisibleBy = (inputNumber: number, divisibleBy: number): number => {
 	const quotient = Math.ceil(inputNumber / divisibleBy);
 
@@ -64,18 +63,19 @@ export const closestNumberDivisibleBy = (inputNumber: number, divisibleBy: numbe
 	const inputNumber1 = divisibleBy * quotient;
 
 	// 2nd possible closest number
-	const inputNumber2 = (inputNumber * divisibleBy) > 0
-		? (divisibleBy * (quotient + 1))
-		: (divisibleBy * (quotient - 1));
+	const inputNumber2 =
+		inputNumber * divisibleBy > 0 ? divisibleBy * (quotient + 1) : divisibleBy * (quotient - 1);
 
 	// if true, then inputNumber1 is the required closest number
-	if (Math.abs(inputNumber - inputNumber1) < Math.abs(inputNumber - inputNumber2)) return inputNumber1;
+	if (Math.abs(inputNumber - inputNumber1) < Math.abs(inputNumber - inputNumber2)) {
+		return inputNumber1;
+	}
 
 	// else inputNumber2 is the required closest number
 	return inputNumber2;
 };
 
-export const getNodeViewTab = (route: Route): string|null => {
+export const getNodeViewTab = (route: Route): string | null => {
 	const routeMeta = route.meta;
 	if (routeMeta && routeMeta.nodeView === true) {
 		return MAIN_HEADER_TABS.WORKFLOW;
@@ -93,14 +93,16 @@ export const getNodeViewTab = (route: Route): string|null => {
 	return null;
 };
 
-export const getConnectionInfo = (connection: OnConnectionBindInfo): [IConnection, IConnection] | null => {
+export const getConnectionInfo = (
+	connection: OnConnectionBindInfo,
+): [IConnection, IConnection] | null => {
 	const sourceInfo = connection.sourceEndpoint.getParameters();
 	const targetInfo = connection.targetEndpoint.getParameters();
 	const sourceNode = useWorkflowsStore().getNodeById(sourceInfo.nodeId);
 	const targetNode = useWorkflowsStore().getNodeById(targetInfo.nodeId);
 
 	if (sourceNode && targetNode) {
-		return[
+		return [
 			{
 				node: sourceNode.name,
 				type: sourceInfo.type,
diff --git a/packages/editor-ui/src/utils/htmlUtils.ts b/packages/editor-ui/src/utils/htmlUtils.ts
index 5103f4964e..1903a0274d 100644
--- a/packages/editor-ui/src/utils/htmlUtils.ts
+++ b/packages/editor-ui/src/utils/htmlUtils.ts
@@ -5,8 +5,8 @@ import xss, { friendlyAttrValue } from 'xss';
 */
 
 export function sanitizeHtml(dirtyHtml: string) {
-	const allowedAttributes = ['href','name', 'target', 'title', 'class', 'id'];
-	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small' ];
+	const allowedAttributes = ['href', 'name', 'target', 'title', 'class', 'id'];
+	const allowedTags = ['p', 'strong', 'b', 'code', 'a', 'br', 'i', 'em', 'small'];
 
 	const sanitizedHtml = xss(dirtyHtml, {
 		onTagAttr: (tag, name, value) => {
@@ -20,13 +20,15 @@ export function sanitizeHtml(dirtyHtml: string) {
 			}
 
 			// Allow `allowedAttributes` and all `data-*` attributes
-			if(allowedAttributes.includes(name) || name.startsWith('data-')) return `${name}="${friendlyAttrValue(value)}"`;
+			if (allowedAttributes.includes(name) || name.startsWith('data-')) {
+				return `${name}="${friendlyAttrValue(value)}"`;
+			}
 
 			return;
 			// Return nothing, means keep the default handling measure
 		},
 		onTag: (tag) => {
-			if(!allowedTags.includes(tag)) return '';
+			if (!allowedTags.includes(tag)) return '';
 			return;
 		},
 	});
diff --git a/packages/editor-ui/src/utils/nodeTypesUtils.ts b/packages/editor-ui/src/utils/nodeTypesUtils.ts
index 80029c3d0f..62d4c0f7dc 100644
--- a/packages/editor-ui/src/utils/nodeTypesUtils.ts
+++ b/packages/editor-ui/src/utils/nodeTypesUtils.ts
@@ -13,8 +13,21 @@ import {
 	ALL_NODE_FILTER,
 	MAPPING_PARAMS,
 } from '@/constants';
-import { INodeCreateElement, ICategoriesWithNodes, INodeUi, ITemplatesNode, INodeItemProps } from '@/Interface';
-import { IDataObject, INodeExecutionData, INodeProperties, INodeTypeDescription, INodeActionTypeDescription, NodeParameterValueType } from 'n8n-workflow';
+import {
+	INodeCreateElement,
+	ICategoriesWithNodes,
+	INodeUi,
+	ITemplatesNode,
+	INodeItemProps,
+} from '@/Interface';
+import {
+	IDataObject,
+	INodeExecutionData,
+	INodeProperties,
+	INodeTypeDescription,
+	INodeActionTypeDescription,
+	NodeParameterValueType,
+} from 'n8n-workflow';
 import { isResourceLocatorValue, isJsonKeyObject } from '@/utils';
 
 /*
@@ -26,7 +39,12 @@ const CRED_KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 const NODE_KEYWORDS_TO_FILTER = ['Trigger'];
 const COMMUNITY_PACKAGE_NAME_REGEX = /(@\w+\/)?n8n-nodes-(?!base\b)\b\w+/g;
 
-const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescription | INodeActionTypeDescription, category: string, subcategory: string) => {
+const addNodeToCategory = (
+	accu: ICategoriesWithNodes,
+	nodeType: INodeTypeDescription | INodeActionTypeDescription,
+	category: string,
+	subcategory: string,
+) => {
 	if (!accu[category]) {
 		accu[category] = {};
 	}
@@ -45,7 +63,7 @@ const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescri
 		accu[category][subcategory].regularCount++;
 	}
 	accu[category][subcategory].nodes.push({
-		type: nodeType.actionKey ? 'action' : 'node' ,
+		type: nodeType.actionKey ? 'action' : 'node',
 		key: `${category}_${nodeType.name}`,
 		category,
 		properties: {
@@ -57,141 +75,156 @@ const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescri
 	});
 };
 
-export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[], personalizedNodeTypes: string[], uncategorizedSubcategory = UNCATEGORIZED_SUBCATEGORY): ICategoriesWithNodes => {
-	const sorted = [...nodeTypes].sort((a: INodeTypeDescription, b: INodeTypeDescription) => a.displayName > b.displayName? 1 : -1);
-	const result =  sorted.reduce(
-		(accu: ICategoriesWithNodes, nodeType: INodeTypeDescription) => {
-			if (personalizedNodeTypes.includes(nodeType.name)) {
-				addNodeToCategory(accu, nodeType, PERSONALIZED_CATEGORY, uncategorizedSubcategory);
-			}
-
-			if (!nodeType.codex || !nodeType.codex.categories) {
-				addNodeToCategory(accu, nodeType, UNCATEGORIZED_CATEGORY, uncategorizedSubcategory);
-				return accu;
-			}
-
-			nodeType.codex.categories.forEach((_category: string) => {
-				const category = _category.trim();
-				const subcategories = nodeType?.codex?.subcategories?.[category] ?? null;
-
-				if(subcategories === null || subcategories.length === 0) {
-					addNodeToCategory(accu, nodeType, category, uncategorizedSubcategory);
-					return;
-				}
-
-				subcategories.forEach(subcategory => {
-					addNodeToCategory(accu, nodeType, category, subcategory);
-				});
-
-			});
-			return accu;
-		},
-		{},
+export const getCategoriesWithNodes = (
+	nodeTypes: INodeTypeDescription[],
+	personalizedNodeTypes: string[],
+	uncategorizedSubcategory = UNCATEGORIZED_SUBCATEGORY,
+): ICategoriesWithNodes => {
+	const sorted = [...nodeTypes].sort((a: INodeTypeDescription, b: INodeTypeDescription) =>
+		a.displayName > b.displayName ? 1 : -1,
 	);
+	const result = sorted.reduce((accu: ICategoriesWithNodes, nodeType: INodeTypeDescription) => {
+		if (personalizedNodeTypes.includes(nodeType.name)) {
+			addNodeToCategory(accu, nodeType, PERSONALIZED_CATEGORY, uncategorizedSubcategory);
+		}
+
+		if (!nodeType.codex || !nodeType.codex.categories) {
+			addNodeToCategory(accu, nodeType, UNCATEGORIZED_CATEGORY, uncategorizedSubcategory);
+			return accu;
+		}
+
+		nodeType.codex.categories.forEach((_category: string) => {
+			const category = _category.trim();
+			const subcategories = nodeType?.codex?.subcategories?.[category] ?? null;
+
+			if (subcategories === null || subcategories.length === 0) {
+				addNodeToCategory(accu, nodeType, category, uncategorizedSubcategory);
+				return;
+			}
+
+			subcategories.forEach((subcategory) => {
+				addNodeToCategory(accu, nodeType, category, subcategory);
+			});
+		});
+		return accu;
+	}, {});
 	return result;
 };
 
 const getCategories = (categoriesWithNodes: ICategoriesWithNodes): string[] => {
-	const excludeFromSort = [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, UNCATEGORIZED_CATEGORY, PERSONALIZED_CATEGORY, RECOMMENDED_CATEGORY];
+	const excludeFromSort = [
+		CORE_NODES_CATEGORY,
+		CUSTOM_NODES_CATEGORY,
+		UNCATEGORIZED_CATEGORY,
+		PERSONALIZED_CATEGORY,
+		RECOMMENDED_CATEGORY,
+	];
 	const categories = Object.keys(categoriesWithNodes);
-	const sorted = categories.filter(
-		(category: string) =>
-			!excludeFromSort.includes(category),
-	);
+	const sorted = categories.filter((category: string) => !excludeFromSort.includes(category));
 	sorted.sort();
 
-	return [RECOMMENDED_CATEGORY, CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, PERSONALIZED_CATEGORY, ...sorted, UNCATEGORIZED_CATEGORY];
+	return [
+		RECOMMENDED_CATEGORY,
+		CORE_NODES_CATEGORY,
+		CUSTOM_NODES_CATEGORY,
+		PERSONALIZED_CATEGORY,
+		...sorted,
+		UNCATEGORIZED_CATEGORY,
+	];
 };
 
-export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes, categoryIsExpanded = false): INodeCreateElement[] => {
+export const getCategorizedList = (
+	categoriesWithNodes: ICategoriesWithNodes,
+	categoryIsExpanded = false,
+): INodeCreateElement[] => {
 	const categories = getCategories(categoriesWithNodes);
 
-	const result = categories.reduce(
-		(accu: INodeCreateElement[], category: string) => {
-			if (!categoriesWithNodes[category]) {
+	const result = categories.reduce((accu: INodeCreateElement[], category: string) => {
+		if (!categoriesWithNodes[category]) {
+			return accu;
+		}
+
+		const categoryEl: INodeCreateElement = {
+			type: 'category',
+			key: category,
+			category,
+			properties: {
+				expanded: categoryIsExpanded,
+			},
+		};
+
+		const subcategories = Object.keys(categoriesWithNodes[category]);
+		if (subcategories.length === 1) {
+			const subcategory = categoriesWithNodes[category][subcategories[0]];
+			if (subcategory.triggerCount > 0) {
+				categoryEl.includedByTrigger = subcategory.triggerCount > 0;
+			}
+			if (subcategory.regularCount > 0) {
+				categoryEl.includedByRegular = subcategory.regularCount > 0;
+			}
+			return [...accu, categoryEl, ...subcategory.nodes];
+		}
+
+		subcategories.sort();
+		const subcategorized = subcategories.reduce(
+			(accu: INodeCreateElement[], subcategory: string) => {
+				const subcategoryEl: INodeCreateElement = {
+					type: 'subcategory',
+					key: `${category}_${subcategory}`,
+					category,
+					properties: {
+						subcategory,
+						description: SUBCATEGORY_DESCRIPTIONS[category][subcategory],
+					},
+					includedByTrigger: categoriesWithNodes[category][subcategory].triggerCount > 0,
+					includedByRegular: categoriesWithNodes[category][subcategory].regularCount > 0,
+				};
+
+				if (subcategoryEl.includedByTrigger) {
+					categoryEl.includedByTrigger = true;
+				}
+				if (subcategoryEl.includedByRegular) {
+					categoryEl.includedByRegular = true;
+				}
+
+				accu.push(subcategoryEl);
 				return accu;
-			}
+			},
+			[],
+		);
 
-			const categoryEl: INodeCreateElement = {
-				type: 'category',
-				key: category,
-				category,
-				properties: {
-					expanded: categoryIsExpanded,
-				},
-			};
-
-			const subcategories = Object.keys(categoriesWithNodes[category]);
-			if (subcategories.length === 1) {
-				const subcategory = categoriesWithNodes[category][
-					subcategories[0]
-				];
-				if (subcategory.triggerCount > 0) {
-					categoryEl.includedByTrigger = subcategory.triggerCount > 0;
-				}
-				if (subcategory.regularCount > 0) {
-					categoryEl.includedByRegular = subcategory.regularCount > 0;
-				}
-				return [...accu, categoryEl, ...subcategory.nodes];
-			}
-
-			subcategories.sort();
-			const subcategorized = subcategories.reduce(
-				(accu: INodeCreateElement[], subcategory: string) => {
-					const subcategoryEl: INodeCreateElement = {
-						type: 'subcategory',
-						key: `${category}_${subcategory}`,
-						category,
-						properties: {
-							subcategory,
-							description: SUBCATEGORY_DESCRIPTIONS[category][subcategory],
-						},
-						includedByTrigger: categoriesWithNodes[category][subcategory].triggerCount > 0,
-						includedByRegular: categoriesWithNodes[category][subcategory].regularCount > 0,
-					};
-
-					if (subcategoryEl.includedByTrigger) {
-						categoryEl.includedByTrigger = true;
-					}
-					if (subcategoryEl.includedByRegular) {
-						categoryEl.includedByRegular = true;
-					}
-
-					accu.push(subcategoryEl);
-					return accu;
-				},
-				[],
-			);
-
-			return [...accu, categoryEl, ...subcategorized];
-		},
-		[],
-	);
+		return [...accu, categoryEl, ...subcategorized];
+	}, []);
 	return result;
 };
 
 export function getAppNameFromCredType(name: string) {
-	return name.split(' ').filter((word) => !CRED_KEYWORDS_TO_FILTER.includes(word)).join(' ');
+	return name
+		.split(' ')
+		.filter((word) => !CRED_KEYWORDS_TO_FILTER.includes(word))
+		.join(' ');
 }
 
 export function getAppNameFromNodeName(name: string) {
-	return name.split(' ').filter((word) => !NODE_KEYWORDS_TO_FILTER.includes(word)).join(' ');
+	return name
+		.split(' ')
+		.filter((word) => !NODE_KEYWORDS_TO_FILTER.includes(word))
+		.join(' ');
 }
 
-
 export function getTriggerNodeServiceName(nodeType: INodeTypeDescription): string {
 	return nodeType.displayName.replace(/ trigger/i, '');
 }
 
 export function getActivatableTriggerNodes(nodes: INodeUi[]) {
-	return nodes.filter((node: INodeUi) => !node.disabled && !NON_ACTIVATABLE_TRIGGER_NODE_TYPES.includes(node.type));
+	return nodes.filter(
+		(node: INodeUi) => !node.disabled && !NON_ACTIVATABLE_TRIGGER_NODE_TYPES.includes(node.type),
+	);
 }
 
 export function filterTemplateNodes(nodes: ITemplatesNode[]) {
 	const notCoreNodes = nodes.filter((node: ITemplatesNode) => {
-		return !(node.categories || []).some(
-			(category) => category.name === CORE_NODES_CATEGORY,
-		);
+		return !(node.categories || []).some((category) => category.name === CORE_NODES_CATEGORY);
 	});
 
 	const results = notCoreNodes.length > 0 ? notCoreNodes : nodes;
@@ -210,23 +243,31 @@ export function hasExpressionMapping(value: unknown) {
 	return typeof value === 'string' && !!MAPPING_PARAMS.find((param) => value.includes(param));
 }
 
-export function isValueExpression (parameter: INodeProperties, paramValue: NodeParameterValueType): boolean {
+export function isValueExpression(
+	parameter: INodeProperties,
+	paramValue: NodeParameterValueType,
+): boolean {
 	if (parameter.noDataExpression === true) {
 		return false;
 	}
 	if (typeof paramValue === 'string' && paramValue.charAt(0) === '=') {
 		return true;
 	}
-	if (isResourceLocatorValue(paramValue) && paramValue.value && paramValue.value.toString().charAt(0) === '=') {
+	if (
+		isResourceLocatorValue(paramValue) &&
+		paramValue.value &&
+		paramValue.value.toString().charAt(0) === '='
+	) {
 		return true;
 	}
 	return false;
 }
 
-export const executionDataToJson = (inputData: INodeExecutionData[]): IDataObject[] => inputData.reduce<IDataObject[]>(
-	(acc, item) => isJsonKeyObject(item) ? acc.concat(item.json) : acc,
-	[],
-);
+export const executionDataToJson = (inputData: INodeExecutionData[]): IDataObject[] =>
+	inputData.reduce<IDataObject[]>(
+		(acc, item) => (isJsonKeyObject(item) ? acc.concat(item.json) : acc),
+		[],
+	);
 
 export const matchesSelectType = (el: INodeCreateElement, selectedType: string) => {
 	if (selectedType === REGULAR_NODE_FILTER && el.includedByRegular) {
@@ -252,9 +293,15 @@ const matchesAlias = (nodeType: INodeTypeDescription, filter: string): boolean =
 export const matchesNodeType = (el: INodeCreateElement, filter: string) => {
 	const nodeType = (el.properties as INodeItemProps).nodeType;
 
-	return nodeType.displayName.toLowerCase().indexOf(filter) !== -1 || matchesAlias(nodeType, filter);
+	return (
+		nodeType.displayName.toLowerCase().indexOf(filter) !== -1 || matchesAlias(nodeType, filter)
+	);
 };
 
-export const hasOnlyListMode = (parameter: INodeProperties) : boolean => {
-	return parameter.modes !== undefined && parameter.modes.length === 1 && parameter.modes[0].name === 'list';
+export const hasOnlyListMode = (parameter: INodeProperties): boolean => {
+	return (
+		parameter.modes !== undefined &&
+		parameter.modes.length === 1 &&
+		parameter.modes[0].name === 'list'
+	);
 };
diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
index d334620964..63dc465fe6 100644
--- a/packages/editor-ui/src/utils/nodeViewUtils.ts
+++ b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -1,7 +1,7 @@
-import { closestNumberDivisibleBy, getStyleTokenValue, isNumber } from "@/utils";
-import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE, QUICKSTART_NOTE_NAME } from "@/constants";
-import { EndpointStyle, IBounds, INodeUi, XYPosition } from "@/Interface";
-import { AnchorArraySpec, Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
+import { closestNumberDivisibleBy, getStyleTokenValue, isNumber } from '@/utils';
+import { NODE_OUTPUT_DEFAULT_KEY, STICKY_NODE_TYPE, QUICKSTART_NOTE_NAME } from '@/constants';
+import { EndpointStyle, IBounds, INodeUi, XYPosition } from '@/Interface';
+import { AnchorArraySpec, Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from 'jsplumb';
 import {
 	IConnection,
 	INode,
@@ -24,8 +24,8 @@ export const OVERLAY_RUN_ITEMS_ID = 'run-items-label';
 export const OVERLAY_CONNECTION_ACTIONS_ID = 'connection-actions';
 export const JSPLUMB_FLOWCHART_STUB = 26;
 export const OVERLAY_INPUT_NAME_LABEL = 'input-name-label';
-export const OVERLAY_INPUT_NAME_LABEL_POSITION = [-3, .5];
-export const OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED = [-4.5, .5];
+export const OVERLAY_INPUT_NAME_LABEL_POSITION = [-3, 0.5];
+export const OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED = [-4.5, 0.5];
 export const OVERLAY_OUTPUT_NAME_LABEL = 'output-name-label';
 export const GRID_SIZE = 20;
 
@@ -62,35 +62,36 @@ export const WELCOME_STICKY_NODE = {
 	name: QUICKSTART_NOTE_NAME,
 	type: STICKY_NODE_TYPE,
 	typeVersion: 1,
-	position: [
-		0,
-		0,
-	] as XYPosition,
+	position: [0, 0] as XYPosition,
 	parameters: {
 		height: 300,
 		width: 380,
 	},
 };
 
-export const CONNECTOR_FLOWCHART_TYPE = ['N8nCustom', {
-	cornerRadius: 12,
-	stub: JSPLUMB_FLOWCHART_STUB + 10,
-	targetGap: 4,
-	alwaysRespectStubs: false,
-	loopbackVerticalLength: NODE_SIZE + GRID_SIZE, // height of vertical segment when looping
-	loopbackMinimum: LOOPBACK_MINIMUM, // minimum length before flowchart loops around
-	getEndpointOffset(endpoint: Endpoint) {
-		const indexOffset = 10; // stub offset between different endpoints of same node
-		const index = endpoint && endpoint.__meta ? endpoint.__meta.index : 0;
-		const totalEndpoints = endpoint && endpoint.__meta ? endpoint.__meta.totalEndpoints : 0;
+export const CONNECTOR_FLOWCHART_TYPE = [
+	'N8nCustom',
+	{
+		cornerRadius: 12,
+		stub: JSPLUMB_FLOWCHART_STUB + 10,
+		targetGap: 4,
+		alwaysRespectStubs: false,
+		loopbackVerticalLength: NODE_SIZE + GRID_SIZE, // height of vertical segment when looping
+		loopbackMinimum: LOOPBACK_MINIMUM, // minimum length before flowchart loops around
+		getEndpointOffset(endpoint: Endpoint) {
+			const indexOffset = 10; // stub offset between different endpoints of same node
+			const index = endpoint && endpoint.__meta ? endpoint.__meta.index : 0;
+			const totalEndpoints = endpoint && endpoint.__meta ? endpoint.__meta.totalEndpoints : 0;
 
-		const outputOverlay = getOverlay(endpoint, OVERLAY_OUTPUT_NAME_LABEL);
-		const labelOffset = outputOverlay && outputOverlay.label && outputOverlay.label.length > 1 ? 10 : 0;
-		const outputsOffset = totalEndpoints > 3 ? 24 : 0; // avoid intersecting plus
+			const outputOverlay = getOverlay(endpoint, OVERLAY_OUTPUT_NAME_LABEL);
+			const labelOffset =
+				outputOverlay && outputOverlay.label && outputOverlay.label.length > 1 ? 10 : 0;
+			const outputsOffset = totalEndpoints > 3 ? 24 : 0; // avoid intersecting plus
 
-		return index * indexOffset + labelOffset + outputsOffset;
+			return index * indexOffset + labelOffset + outputsOffset;
+		},
 	},
-}];
+];
 
 export const CONNECTOR_PAINT_STYLE_DEFAULT: PaintStyle = {
 	stroke: getStyleTokenValue('--color-foreground-dark'),
@@ -142,12 +143,10 @@ export const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
 export const ANCHOR_POSITIONS: {
 	[key: string]: {
 		[key: number]: AnchorArraySpec[];
-	}
+	};
 } = {
 	input: {
-		1: [
-			[0.01, 0.5, -1, 0],
-		],
+		1: [[0.01, 0.5, -1, 0]],
 		2: [
 			[0.01, 0.3, -1, 0],
 			[0.01, 0.7, -1, 0],
@@ -165,29 +164,29 @@ export const ANCHOR_POSITIONS: {
 		],
 	},
 	output: {
-		1: [
-			[.99, 0.5, 1, 0],
-		],
+		1: [[0.99, 0.5, 1, 0]],
 		2: [
-			[.99, 0.3, 1, 0],
-			[.99, 0.7, 1, 0],
+			[0.99, 0.3, 1, 0],
+			[0.99, 0.7, 1, 0],
 		],
 		3: [
-			[.99, 0.25, 1, 0],
-			[.99, 0.5, 1, 0],
-			[.99, 0.75, 1, 0],
+			[0.99, 0.25, 1, 0],
+			[0.99, 0.5, 1, 0],
+			[0.99, 0.75, 1, 0],
 		],
 		4: [
-			[.99, 0.2, 1, 0],
-			[.99, 0.4, 1, 0],
-			[.99, 0.6, 1, 0],
-			[.99, 0.8, 1, 0],
+			[0.99, 0.2, 1, 0],
+			[0.99, 0.4, 1, 0],
+			[0.99, 0.6, 1, 0],
+			[0.99, 0.8, 1, 0],
 		],
 	},
 };
 
-
-export const getInputEndpointStyle = (nodeTypeData: INodeTypeDescription, color: string): EndpointStyle => ({
+export const getInputEndpointStyle = (
+	nodeTypeData: INodeTypeDescription,
+	color: string,
+): EndpointStyle => ({
 	width: 8,
 	height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20,
 	fill: getStyleTokenValue(color),
@@ -195,7 +194,7 @@ export const getInputEndpointStyle = (nodeTypeData: INodeTypeDescription, color:
 	lineWidth: 0,
 });
 
-export const getInputNameOverlay = (label: string): OverlaySpec => ([
+export const getInputNameOverlay = (label: string): OverlaySpec => [
 	'Label',
 	{
 		id: OVERLAY_INPUT_NAME_LABEL,
@@ -204,7 +203,7 @@ export const getInputNameOverlay = (label: string): OverlaySpec => ([
 		cssClass: 'node-input-endpoint-label',
 		visible: true,
 	},
-]);
+];
 
 export const getOutputEndpointStyle = (nodeTypeData: INodeTypeDescription, color: string) => ({
 	radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
@@ -212,7 +211,7 @@ export const getOutputEndpointStyle = (nodeTypeData: INodeTypeDescription, color
 	outlineStroke: 'none',
 });
 
-export const getOutputNameOverlay = (label: string): OverlaySpec => ([
+export const getOutputNameOverlay = (label: string): OverlaySpec => [
 	'Label',
 	{
 		id: OVERLAY_OUTPUT_NAME_LABEL,
@@ -221,7 +220,7 @@ export const getOutputNameOverlay = (label: string): OverlaySpec => ([
 		cssClass: 'node-output-endpoint-label',
 		visible: true,
 	},
-]);
+];
 
 export const addOverlays = (connection: Connection, overlays: OverlaySpec[]) => {
 	overlays.forEach((overlay: OverlaySpec) => {
@@ -240,34 +239,41 @@ export const getLeftmostTopNode = (nodes: INodeUi[]): INodeUi => {
 };
 
 export const getWorkflowCorners = (nodes: INodeUi[]): IBounds => {
-	return nodes.reduce((accu: IBounds, node: INodeUi) => {
-		const hasCustomDimensions = [STICKY_NODE_TYPE, PLACEHOLDER_BUTTON].includes(node.type);
-		const xOffset = hasCustomDimensions && isNumber(node.parameters.width) ? node.parameters.width : NODE_SIZE;
-		const yOffset = hasCustomDimensions && isNumber(node.parameters.height) ? node.parameters.height : NODE_SIZE;
+	return nodes.reduce(
+		(accu: IBounds, node: INodeUi) => {
+			const hasCustomDimensions = [STICKY_NODE_TYPE, PLACEHOLDER_BUTTON].includes(node.type);
+			const xOffset =
+				hasCustomDimensions && isNumber(node.parameters.width) ? node.parameters.width : NODE_SIZE;
+			const yOffset =
+				hasCustomDimensions && isNumber(node.parameters.height)
+					? node.parameters.height
+					: NODE_SIZE;
 
-		const x = node.position[0];
-		const y = node.position[1];
+			const x = node.position[0];
+			const y = node.position[1];
 
-		if (x < accu.minX) {
-			accu.minX = x;
-		}
-		if (y < accu.minY) {
-			accu.minY = y;
-		}
-		if ((x + xOffset) > accu.maxX) {
-			accu.maxX = x + xOffset;
-		}
-		if ((y + yOffset) > accu.maxY) {
-			accu.maxY = y + yOffset;
-		}
+			if (x < accu.minX) {
+				accu.minX = x;
+			}
+			if (y < accu.minY) {
+				accu.minY = y;
+			}
+			if (x + xOffset > accu.maxX) {
+				accu.maxX = x + xOffset;
+			}
+			if (y + yOffset > accu.maxY) {
+				accu.maxY = y + yOffset;
+			}
 
-		return accu;
-	}, {
-		minX: nodes[0].position[0],
-		minY: nodes[0].position[1],
-		maxX: nodes[0].position[0],
-		maxY: nodes[0].position[1],
-	});
+			return accu;
+		},
+		{
+			minX: nodes[0].position[0],
+			minY: nodes[0].position[1],
+			maxX: nodes[0].position[0],
+			maxY: nodes[0].position[1],
+		},
+	);
 };
 
 export const getOverlay = (item: Connection | Endpoint, overlayId: string) => {
@@ -303,7 +309,9 @@ export const showOrHideMidpointArrow = (connection: Connection) => {
 	const targetEndpoint = connection.endpoints[1];
 
 	const sourcePosition = sourceEndpoint.anchor.lastReturnValue[0];
-	const targetPosition = targetEndpoint.anchor.lastReturnValue ? targetEndpoint.anchor.lastReturnValue[0] : sourcePosition + 1; // lastReturnValue is null when moving connections from node to another
+	const targetPosition = targetEndpoint.anchor.lastReturnValue
+		? targetEndpoint.anchor.lastReturnValue[0]
+		: sourcePosition + 1; // lastReturnValue is null when moving connections from node to another
 
 	const minimum = hasItemsLabel ? 150 : 0;
 	const isBackwards = sourcePosition >= targetPosition;
@@ -312,7 +320,7 @@ export const showOrHideMidpointArrow = (connection: Connection) => {
 	const arrow = getOverlay(connection, OVERLAY_MIDPOINT_ARROW_ID);
 	if (arrow) {
 		arrow.setVisible(isBackwards && isTooLong);
-		arrow.setLocation(hasItemsLabel ? .6: .5);
+		arrow.setLocation(hasItemsLabel ? 0.6 : 0.5);
 	}
 };
 
@@ -334,7 +342,7 @@ const isLoopingBackwards = (connection: Connection) => {
 	const sourcePosition = sourceEndpoint.anchor.lastReturnValue[0];
 	const targetPosition = targetEndpoint.anchor.lastReturnValue[0];
 
-	return targetPosition - sourcePosition < (-1 * LOOPBACK_MINIMUM);
+	return targetPosition - sourcePosition < -1 * LOOPBACK_MINIMUM;
 };
 
 export const showOrHideItemsLabel = (connection: Connection) => {
@@ -357,8 +365,7 @@ export const showOrHideItemsLabel = (connection: Connection) => {
 
 	if (diffX < MIN_X_TO_SHOW_OUTPUT_LABEL && diffY < MIN_Y_TO_SHOW_OUTPUT_LABEL) {
 		overlay.setVisible(false);
-	}
-	else {
+	} else {
 		overlay.setVisible(true);
 	}
 
@@ -366,8 +373,7 @@ export const showOrHideItemsLabel = (connection: Connection) => {
 	if (innerElement) {
 		if (diffY === 0 || isLoopingBackwards(connection)) {
 			innerElement.classList.add('floating');
-		}
-		else {
+		} else {
 			innerElement.classList.remove('floating');
 		}
 	}
@@ -385,7 +391,6 @@ export const getIcon = (name: string): string => {
 	return '';
 };
 
-
 const canUsePosition = (position1: XYPosition, position2: XYPosition) => {
 	if (Math.abs(position1[0] - position2[0]) <= 100) {
 		if (Math.abs(position1[1] - position2[1]) <= 50) {
@@ -396,7 +401,11 @@ const canUsePosition = (position1: XYPosition, position2: XYPosition) => {
 	return true;
 };
 
-export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, movePosition?: XYPosition): XYPosition => {
+export const getNewNodePosition = (
+	nodes: INodeUi[],
+	newPosition: XYPosition,
+	movePosition?: XYPosition,
+): XYPosition => {
 	const targetPosition: XYPosition = [...newPosition];
 
 	targetPosition[0] = closestNumberDivisibleBy(targetPosition[0], GRID_SIZE);
@@ -429,18 +438,30 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, mo
 
 export const getMousePosition = (e: MouseEvent | TouchEvent): XYPosition => {
 	// @ts-ignore
-	const x = e.pageX !== undefined ? e.pageX : (e.touches && e.touches[0] && e.touches[0].pageX ? e.touches[0].pageX : 0);
+	const x =
+		e.pageX !== undefined
+			? e.pageX
+			: e.touches && e.touches[0] && e.touches[0].pageX
+			? e.touches[0].pageX
+			: 0;
 	// @ts-ignore
-	const y = e.pageY !== undefined ? e.pageY : (e.touches && e.touches[0] && e.touches[0].pageY ? e.touches[0].pageY : 0);
+	const y =
+		e.pageY !== undefined
+			? e.pageY
+			: e.touches && e.touches[0] && e.touches[0].pageY
+			? e.touches[0].pageY
+			: 0;
 
 	return [x, y];
 };
 
-export const getRelativePosition = (x: number, y: number, scale: number, offset: XYPosition): XYPosition => {
-	return [
-		(x - offset[0]) / scale,
-		(y - offset[1]) / scale,
-	];
+export const getRelativePosition = (
+	x: number,
+	y: number,
+	scale: number,
+	offset: XYPosition,
+): XYPosition => {
+	return [(x - offset[0]) / scale, (y - offset[1]) / scale];
 };
 
 export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosition => {
@@ -449,14 +470,19 @@ export const getMidCanvasPosition = (scale: number, offset: XYPosition): XYPosit
 	return getRelativePosition(editorWidth / 2, (editorHeight - HEADER_HEIGHT) / 2, scale, offset);
 };
 
-export const getBackgroundStyles = (scale: number, offsetPosition: XYPosition, executionPreview: boolean) => {
+export const getBackgroundStyles = (
+	scale: number,
+	offsetPosition: XYPosition,
+	executionPreview: boolean,
+) => {
 	const squareSize = GRID_SIZE * scale;
 	const dotSize = 1 * scale;
 	const dotPosition = (GRID_SIZE / 2) * scale;
 
 	if (executionPreview) {
 		return {
-			'background-image': 'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)',
+			'background-image':
+				'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)',
 			'background-size': `${squareSize}px ${squareSize}px`,
 			'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
 		};
@@ -496,7 +522,13 @@ export const showConnectionActions = (connection: Connection | null) => {
 };
 
 export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputConnections) => {
-	const outputMap: {[sourceOutputIndex: string]: {[targetNodeName: string]: {[targetInputIndex: string]: {total: number, iterations: number}}}} = {};
+	const outputMap: {
+		[sourceOutputIndex: string]: {
+			[targetNodeName: string]: {
+				[targetInputIndex: string]: { total: number; iterations: number };
+			};
+		};
+	} = {};
 
 	data.forEach((run: ITaskData) => {
 		if (!run.data || !run.data.main) {
@@ -526,25 +558,26 @@ export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputCo
 				return;
 			}
 
-			nodeConnections[sourceOutputIndex]
-				.map((connection: IConnection) => {
-					const targetNodeName = connection.node;
-					const targetInputIndex = connection.index;
+			nodeConnections[sourceOutputIndex].map((connection: IConnection) => {
+				const targetNodeName = connection.node;
+				const targetInputIndex = connection.index;
 
-					if (!outputMap[sourceOutputIndex][targetNodeName]) {
-						outputMap[sourceOutputIndex][targetNodeName] = {};
-					}
+				if (!outputMap[sourceOutputIndex][targetNodeName]) {
+					outputMap[sourceOutputIndex][targetNodeName] = {};
+				}
 
-					if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
-						outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
-							total: 0,
-							iterations: 0,
-						};
-					}
+				if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
+					outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
+						total: 0,
+						iterations: 0,
+					};
+				}
 
-					outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output ? output.length : 0;
-					outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
-				});
+				outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output
+					? output.length
+					: 0;
+				outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
+			});
 		});
 	});
 
@@ -560,14 +593,17 @@ export const resetConnection = (connection: Connection) => {
 	}
 };
 
-export const getRunItemsLabel = (output: {total: number, iterations: number}): string => {
+export const getRunItemsLabel = (output: { total: number; iterations: number }): string => {
 	let label = `${output.total}`;
 	label = output.total > 1 ? `${label} items` : `${label} item`;
 	label = output.iterations > 1 ? `${label} total` : label;
 	return label;
 };
 
-export const addConnectionOutputSuccess = (connection: Connection, output: {total: number, iterations: number}) => {
+export const addConnectionOutputSuccess = (
+	connection: Connection,
+	output: { total: number; iterations: number },
+) => {
 	connection.setPaintStyle(CONNECTOR_PAINT_STYLE_SUCCESS);
 	if (connection.canvas) {
 		connection.canvas.classList.add('success');
@@ -583,7 +619,7 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 			id: OVERLAY_RUN_ITEMS_ID,
 			label: `<span>${getRunItemsLabel(output)}</span>`,
 			cssClass: 'connection-run-items-label',
-			location: .5,
+			location: 0.5,
 		},
 	]);
 
@@ -591,8 +627,7 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 	showOrHideMidpointArrow(connection);
 };
 
-
-const getContentDimensions = (): { editorWidth: number, editorHeight: number } => {
+const getContentDimensions = (): { editorWidth: number; editorHeight: number } => {
 	let contentWidth = window.innerWidth;
 	let contentHeight = window.innerHeight;
 	const nodeViewRoot = document.getElementById('node-view-root');
@@ -608,7 +643,10 @@ const getContentDimensions = (): { editorWidth: number, editorHeight: number } =
 	};
 };
 
-export const getZoomToFit = (nodes: INodeUi[], addFooterPadding = true): {offset: XYPosition, zoomLevel: number} => {
+export const getZoomToFit = (
+	nodes: INodeUi[],
+	addFooterPadding = true,
+): { offset: XYPosition; zoomLevel: number } => {
 	const { minX, minY, maxX, maxY } = getWorkflowCorners(nodes);
 	const { editorWidth, editorHeight } = getContentDimensions();
 	const footerHeight = addFooterPadding ? 200 : 100;
@@ -623,15 +661,18 @@ export const getZoomToFit = (nodes: INodeUi[], addFooterPadding = true): {offset
 
 	const zoomLevel = Math.min(scaleX, scaleY, 1);
 
-	let xOffset = (minX * -1) * zoomLevel; // find top right corner
+	let xOffset = minX * -1 * zoomLevel; // find top right corner
 	xOffset += (editorWidth - (maxX - minX) * zoomLevel) / 2; // add padding to center workflow
 
-	let yOffset = (minY * -1) * zoomLevel; // find top right corner
+	let yOffset = minY * -1 * zoomLevel; // find top right corner
 	yOffset += (editorHeight - (maxY - minY + footerHeight) * zoomLevel) / 2; // add padding to center workflow
 
 	return {
 		zoomLevel,
-		offset: [closestNumberDivisibleBy(xOffset, GRID_SIZE), closestNumberDivisibleBy(yOffset, GRID_SIZE)],
+		offset: [
+			closestNumberDivisibleBy(xOffset, GRID_SIZE),
+			closestNumberDivisibleBy(yOffset, GRID_SIZE),
+		],
 	};
 };
 
@@ -674,7 +715,11 @@ export const moveBackInputLabelPosition = (targetEndpoint: Endpoint) => {
 	}
 };
 
-export const addConnectionActionsOverlay = (connection: Connection, onDelete: Function, onAdd: Function) => {
+export const addConnectionActionsOverlay = (
+	connection: Connection,
+	onDelete: Function,
+	onAdd: Function,
+) => {
 	if (getOverlay(connection, OVERLAY_CONNECTION_ACTIONS_ID)) {
 		return; // avoid free floating actions when moving connection from one node to another
 	}
@@ -682,16 +727,23 @@ export const addConnectionActionsOverlay = (connection: Connection, onDelete: Fu
 		'Label',
 		{
 			id: OVERLAY_CONNECTION_ACTIONS_ID,
-			label: `<div class="add">${getIcon('plus')}</div> <div class="delete">${getIcon('trash')}</div>`,
+			label: `<div class="add">${getIcon('plus')}</div> <div class="delete">${getIcon(
+				'trash',
+			)}</div>`,
 			cssClass: OVERLAY_CONNECTION_ACTIONS_ID,
 			visible: false,
 			events: {
 				mousedown: (overlay: Overlay, event: MouseEvent) => {
 					const element = event.target as HTMLElement;
-					if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) {
+					if (
+						element.classList.contains('delete') ||
+						(element.parentElement && element.parentElement.classList.contains('delete'))
+					) {
 						onDelete();
-					}
-					else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) {
+					} else if (
+						element.classList.contains('add') ||
+						(element.parentElement && element.parentElement.classList.contains('add'))
+					) {
 						onAdd();
 					}
 				},
@@ -717,7 +769,7 @@ export const getFixedNodesList = (workflowNodes: INode[]) => {
 	const diffY = DEFAULT_START_POSITION_Y - leftmostTop.position[1];
 
 	nodes.map((node) => {
-		node.position[0] += diffX + (NODE_SIZE * 2);
+		node.position[0] += diffX + NODE_SIZE * 2;
 		node.position[1] += diffY;
 	});
 
diff --git a/packages/editor-ui/src/utils/pairedItemUtils.ts b/packages/editor-ui/src/utils/pairedItemUtils.ts
index 79ba57c833..3f1d2efc41 100644
--- a/packages/editor-ui/src/utils/pairedItemUtils.ts
+++ b/packages/editor-ui/src/utils/pairedItemUtils.ts
@@ -1,6 +1,6 @@
-import { IPairedItemData, IRunData, ITaskData } from "n8n-workflow";
-import { IExecutionResponse, TargetItem } from "../Interface";
-import { isNotNull } from "@/utils";
+import { IPairedItemData, IRunData, ITaskData } from 'n8n-workflow';
+import { IExecutionResponse, TargetItem } from '../Interface';
+import { isNotNull } from '@/utils';
 
 /*
 	Utility functions that provide shared functionalities used to add paired item support to nodes
@@ -27,7 +27,11 @@ export function getSourceItems(data: IExecutionResponse, target: TargetItem): Ta
 		return [];
 	}
 
-	const pairedItem: IPairedItemData[] = Array.isArray(item.pairedItem) ? item.pairedItem : (typeof item.pairedItem === 'object' ? [item.pairedItem] : [{item: item.pairedItem}]);
+	const pairedItem: IPairedItemData[] = Array.isArray(item.pairedItem)
+		? item.pairedItem
+		: typeof item.pairedItem === 'object'
+		? [item.pairedItem]
+		: [{ item: item.pairedItem }];
 	const sourceItems = pairedItem.map((item) => {
 		const input = item.input || 0;
 		return {
@@ -41,12 +45,18 @@ export function getSourceItems(data: IExecutionResponse, target: TargetItem): Ta
 	return sourceItems.filter((item): item is TargetItem => isNotNull(item));
 }
 
-function addPairing(paths: {[item: string]: string[][]}, pairedItemId: string, pairedItem: IPairedItemData, sources: ITaskData['source']) {
+function addPairing(
+	paths: { [item: string]: string[][] },
+	pairedItemId: string,
+	pairedItem: IPairedItemData,
+	sources: ITaskData['source'],
+) {
 	paths[pairedItemId] = paths[pairedItemId] || [];
 
 	const input = pairedItem.input || 0;
 	const sourceNode = sources[input]?.previousNode;
-	if (!sourceNode) { // trigger nodes for example
+	if (!sourceNode) {
+		// trigger nodes for example
 		paths[pairedItemId].push([pairedItemId]);
 		return;
 	}
@@ -62,7 +72,14 @@ function addPairing(paths: {[item: string]: string[][]}, pairedItemId: string, p
 	});
 }
 
-function addPairedItemIdsRec(node: string, runIndex: number, runData: IRunData, seen: Set<string>, paths: {[item: string]: string[][]}, pinned: Set<string>) {
+function addPairedItemIdsRec(
+	node: string,
+	runIndex: number,
+	runData: IRunData,
+	seen: Set<string>,
+	paths: { [item: string]: string[][] },
+	pinned: Set<string>,
+) {
 	const key = `${node}_r${runIndex}`;
 	if (seen.has(key)) {
 		return;
@@ -86,7 +103,14 @@ function addPairedItemIdsRec(node: string, runIndex: number, runData: IRunData,
 	const sources = data.source || [];
 	sources.forEach((source) => {
 		if (source?.previousNode) {
-			addPairedItemIdsRec(source.previousNode, source.previousNodeRun ?? 0, runData, seen, paths, pinned);
+			addPairedItemIdsRec(
+				source.previousNode,
+				source.previousNodeRun ?? 0,
+				runData,
+				seen,
+				paths,
+				pinned,
+			);
 		}
 	});
 
@@ -116,13 +140,13 @@ function addPairedItemIdsRec(node: string, runIndex: number, runData: IRunData,
 				return;
 			}
 
-			addPairing(paths, pairedItemId, {item: pairedItem}, sources);
+			addPairing(paths, pairedItemId, { item: pairedItem }, sources);
 		});
 	});
 }
 
-function getMapping(paths: {[item: string]: string[][]}): {[item: string]: Set<string>} {
-	const mapping: {[itemId: string]: Set<string>} = {};
+function getMapping(paths: { [item: string]: string[][] }): { [item: string]: Set<string> } {
+	const mapping: { [itemId: string]: Set<string> } = {};
 
 	Object.keys(paths).forEach((item) => {
 		paths?.[item]?.forEach((path) => {
@@ -141,7 +165,9 @@ function getMapping(paths: {[item: string]: string[][]}): {[item: string]: Set<s
 	return mapping;
 }
 
-export function getPairedItemsMapping(executionResponse: IExecutionResponse | null): {[itemId: string]: Set<string>} {
+export function getPairedItemsMapping(executionResponse: IExecutionResponse | null): {
+	[itemId: string]: Set<string>;
+} {
 	if (!executionResponse?.data?.resultData?.runData) {
 		return {};
 	}
@@ -151,7 +177,7 @@ export function getPairedItemsMapping(executionResponse: IExecutionResponse | nu
 
 	const pinned = new Set(Object.keys(executionResponse.data.resultData.pinData || {}));
 
-	const paths: {[item: string]: string[][]} = {};
+	const paths: { [item: string]: string[][] } = {};
 	Object.keys(runData).forEach((node) => {
 		runData[node].forEach((_, runIndex: number) => {
 			addPairedItemIdsRec(node, runIndex, runData, seen, paths, pinned);
diff --git a/packages/editor-ui/src/utils/sortUtils.ts b/packages/editor-ui/src/utils/sortUtils.ts
index 608999f44f..cca9acb702 100644
--- a/packages/editor-ui/src/utils/sortUtils.ts
+++ b/packages/editor-ui/src/utils/sortUtils.ts
@@ -41,7 +41,7 @@ function fuzzyMatchSimple(pattern: string, target: string): boolean {
  * @returns [boolean, number]       a boolean which tells if pattern was
  *                                  found or not and a search score
  */
-function fuzzyMatch(pattern: string, target: string): {matched: boolean, outScore: number} {
+function fuzzyMatch(pattern: string, target: string): { matched: boolean; outScore: number } {
 	const recursionCount = 0;
 	const recursionLimit = 5;
 	const matches: number[] = [];
@@ -72,17 +72,17 @@ function fuzzyMatchRecursive(
 	nextMatch: number,
 	recursionCount: number,
 	recursionLimit: number,
-): {matched: boolean, outScore: number} {
+): { matched: boolean; outScore: number } {
 	let outScore = 0;
 
 	// Return if recursion limit is reached.
 	if (++recursionCount >= recursionLimit) {
-		return {matched: false, outScore};
+		return { matched: false, outScore };
 	}
 
 	// Return if we reached ends of strings.
 	if (patternCurIndex === pattern.length || targetCurrIndex === target.length) {
-		return {matched: false, outScore};
+		return { matched: false, outScore };
 	}
 
 	// Recursion params
@@ -94,11 +94,9 @@ function fuzzyMatchRecursive(
 	let firstMatch = true;
 	while (patternCurIndex < pattern.length && targetCurrIndex < target.length) {
 		// Match found.
-		if (
-			pattern[patternCurIndex].toLowerCase() === target[targetCurrIndex].toLowerCase()
-		) {
+		if (pattern[patternCurIndex].toLowerCase() === target[targetCurrIndex].toLowerCase()) {
 			if (nextMatch >= maxMatches) {
-				return {matched: false, outScore};
+				return { matched: false, outScore };
 			}
 
 			if (firstMatch && targetMatches) {
@@ -143,10 +141,7 @@ function fuzzyMatchRecursive(
 
 		// Apply leading letter penalty
 		let penalty = LEADING_LETTER_PENALTY * matches[0];
-		penalty =
-			penalty < MAX_LEADING_LETTER_PENALTY
-				? MAX_LEADING_LETTER_PENALTY
-				: penalty;
+		penalty = penalty < MAX_LEADING_LETTER_PENALTY ? MAX_LEADING_LETTER_PENALTY : penalty;
 		outScore += penalty;
 
 		//Apply unmatched penalty
@@ -169,13 +164,10 @@ function fuzzyMatchRecursive(
 				// Camel case
 				const neighbor = target[currIdx - 1];
 				const curr = target[currIdx];
-				if (
-					neighbor !== neighbor.toUpperCase() &&
-					curr !== curr.toLowerCase()
-				) {
+				if (neighbor !== neighbor.toUpperCase() && curr !== curr.toLowerCase()) {
 					outScore += CAMEL_BONUS;
 				}
-				const isNeighbourSeparator = neighbor === "_" || neighbor === " ";
+				const isNeighbourSeparator = neighbor === '_' || neighbor === ' ';
 				if (isNeighbourSeparator) {
 					outScore += SEPARATOR_BONUS;
 				}
@@ -190,15 +182,15 @@ function fuzzyMatchRecursive(
 			// Recursive score is better than "this"
 			matches = [...bestRecursiveMatches];
 			outScore = bestRecursiveScore;
-			return {matched: true, outScore};
+			return { matched: true, outScore };
 		} else if (matched) {
 			// "this" score is better than recursive
-			return {matched: true, outScore};
+			return { matched: true, outScore };
 		} else {
-			return {matched: false, outScore};
+			return { matched: false, outScore };
 		}
 	}
-	return {matched: false, outScore};
+	return { matched: false, outScore };
 }
 
 // prop = 'key'
@@ -219,15 +211,18 @@ function getValue<T extends object>(obj: T, prop: string): unknown {
 	return result;
 }
 
-export function sublimeSearch<T extends object>(filter: string, data: Readonly<T[]>, keys: Array<{key: string, weight: number}>): Array<{score: number, item: T}> {
-	const results = data.reduce((accu: Array<{score: number, item: T}>, item: T) => {
-		let values: Array<{value: string, weight: number}> = [];
-		keys.forEach(({key, weight}) => {
+export function sublimeSearch<T extends object>(
+	filter: string,
+	data: Readonly<T[]>,
+	keys: Array<{ key: string; weight: number }>,
+): Array<{ score: number; item: T }> {
+	const results = data.reduce((accu: Array<{ score: number; item: T }>, item: T) => {
+		let values: Array<{ value: string; weight: number }> = [];
+		keys.forEach(({ key, weight }) => {
 			const value = getValue(item, key);
 			if (Array.isArray(value)) {
-				values = values.concat(value.map((v) => ({value: v, weight})));
-			}
-			else if (typeof value === 'string') {
+				values = values.concat(value.map((v) => ({ value: v, weight })));
+			} else if (typeof value === 'string') {
 				values.push({
 					value,
 					weight,
@@ -236,23 +231,29 @@ export function sublimeSearch<T extends object>(filter: string, data: Readonly<T
 		});
 
 		// for each item, check every key and get maximum score
-		const itemMatch = values.reduce((accu: null | {matched: boolean, outScore: number}, {value, weight}: {value: string, weight: number}) => {
-			if (!fuzzyMatchSimple(filter, value)) {
+		const itemMatch = values.reduce(
+			(
+				accu: null | { matched: boolean; outScore: number },
+				{ value, weight }: { value: string; weight: number },
+			) => {
+				if (!fuzzyMatchSimple(filter, value)) {
+					return accu;
+				}
+
+				const match = fuzzyMatch(filter, value);
+				match.outScore *= weight;
+
+				const { matched, outScore } = match;
+				if (!accu && matched) {
+					return match;
+				}
+				if (matched && accu && outScore > accu.outScore) {
+					return match;
+				}
 				return accu;
-			}
-
-			const match = fuzzyMatch(filter, value);
-			match.outScore *= weight;
-
-			const {matched, outScore} = match;
-			if (!accu && matched) {
-				return match;
-			}
-			if (matched && accu && outScore > accu.outScore) {
-				return match;
-			}
-			return accu;
-		}, null);
+			},
+			null,
+		);
 
 		if (itemMatch) {
 			accu.push({
diff --git a/packages/editor-ui/src/utils/typeGuards.ts b/packages/editor-ui/src/utils/typeGuards.ts
index 28c180668a..2082d11589 100644
--- a/packages/editor-ui/src/utils/typeGuards.ts
+++ b/packages/editor-ui/src/utils/typeGuards.ts
@@ -1,5 +1,5 @@
-import {INodeParameterResourceLocator} from "n8n-workflow";
-import {ICredentialsResponse} from "@/Interface";
+import { INodeParameterResourceLocator } from 'n8n-workflow';
+import { ICredentialsResponse } from '@/Interface';
 
 /*
 	Type guards used in editor-ui project
@@ -21,7 +21,8 @@ export function isValidCredentialResponse(value: unknown): value is ICredentials
 	return typeof value === 'object' && value !== null && 'id' in value;
 }
 
-export const isObj = (obj: unknown): obj is object => !!obj && Object.getPrototypeOf(obj) === Object.prototype;
+export const isObj = (obj: unknown): obj is object =>
+	!!obj && Object.getPrototypeOf(obj) === Object.prototype;
 
 export function isString(value: unknown): value is string {
 	return typeof value === 'string';
diff --git a/packages/editor-ui/src/utils/typesUtils.ts b/packages/editor-ui/src/utils/typesUtils.ts
index 47079872f4..112853e9e9 100644
--- a/packages/editor-ui/src/utils/typesUtils.ts
+++ b/packages/editor-ui/src/utils/typesUtils.ts
@@ -1,7 +1,7 @@
 import dateformat from 'dateformat';
 import { IDataObject, jsonParse } from 'n8n-workflow';
-import { Schema, Optional, Primitives } from "@/Interface";
-import { isObj } from "@/utils/typeGuards";
+import { Schema, Optional, Primitives } from '@/Interface';
+import { isObj } from '@/utils/typeGuards';
 
 /*
 	Constants and utility functions than can be used to manipulate different data types and objects
@@ -26,8 +26,8 @@ export function isJsonKeyObject(item: unknown): item is {
 
 export const isEmpty = (value?: unknown): boolean => {
 	if (!value && value !== 0) return true;
-	if(Array.isArray(value)){
-		if(!value.length) return true;
+	if (Array.isArray(value)) {
+		if (!value.length) return true;
 		return value.every(isEmpty);
 	}
 	if (typeof value === 'object') {
@@ -38,7 +38,7 @@ export const isEmpty = (value?: unknown): boolean => {
 
 export const intersection = <T>(...arrays: T[][]): T[] => {
 	const [a, b, ...rest] = arrays;
-	const ab = a.filter(v => b.includes(v));
+	const ab = a.filter((v) => b.includes(v));
 	return [...new Set(rest.length ? intersection(ab, ...rest) : ab)];
 };
 
@@ -54,11 +54,11 @@ export function abbreviateNumber(num: number) {
 	return Number(scaled.toFixed(1)) + suffix;
 }
 
-export function convertToDisplayDate (epochTime: number) {
+export function convertToDisplayDate(epochTime: number) {
 	return dateformat(epochTime, 'yyyy-mm-dd HH:MM:ss');
 }
 
-export function convertToHumanReadableDate (epochTime: number) {
+export function convertToHumanReadableDate(epochTime: number) {
 	return dateformat(epochTime, 'd mmmm, yyyy @ HH:MM Z');
 }
 
@@ -87,19 +87,21 @@ export const convertPath = (path: string): string => {
 	if (inBrackets === null) {
 		inBrackets = [];
 	} else {
-		inBrackets = inBrackets.map(item => item.slice(1, -1)).map(item => {
-			if (item.startsWith('"') && item.endsWith('"')) {
-				return item.slice(1, -1);
-			}
-			return item;
-		});
+		inBrackets = inBrackets
+			.map((item) => item.slice(1, -1))
+			.map((item) => {
+				if (item.startsWith('"') && item.endsWith('"')) {
+					return item.slice(1, -1);
+				}
+				return item;
+			});
 	}
 	const withoutBrackets = path.replace(/\[(.*?)]/g, placeholder);
 	const pathParts = withoutBrackets.split('.');
 	const allParts = [] as string[];
-	pathParts.forEach(part => {
+	pathParts.forEach((part) => {
 		let index = part.indexOf(placeholder);
-		while(index !== -1) {
+		while (index !== -1) {
 			if (index === 0) {
 				allParts.push(inBrackets!.shift() as string);
 				part = part.substr(placeholder.length);
@@ -122,10 +124,9 @@ export const clearJsonKey = (userInput: string | object) => {
 
 	if (!Array.isArray(parsedUserInput)) return parsedUserInput;
 
-	return parsedUserInput.map(item => isJsonKeyObject(item) ? item.json : item);
+	return parsedUserInput.map((item) => (isJsonKeyObject(item) ? item.json : item));
 };
 
-
 // Holds weird date formats that we encounter when working with strings
 // Should be extended as new cases are found
 const CUSTOM_DATE_FORMATS = [
@@ -157,54 +158,59 @@ export const isValidDate = (input: string | number | Date): boolean => {
 	}
 };
 
-export const getObjectKeys = <T extends object, K extends keyof T>(o: T): K[] => Object.keys(o) as K[];
+export const getObjectKeys = <T extends object, K extends keyof T>(o: T): K[] =>
+	Object.keys(o) as K[];
 
-export const mergeDeep = <T extends object | Primitives>(sources: T[], options?: Partial<Record<'overwriteArrays' | 'concatArrays', boolean>>): T => sources.reduce((target, source) => {
-	if(Array.isArray(target) && Array.isArray(source)){
-		const tLength = target.length;
-		const sLength = source.length;
+export const mergeDeep = <T extends object | Primitives>(
+	sources: T[],
+	options?: Partial<Record<'overwriteArrays' | 'concatArrays', boolean>>,
+): T =>
+	sources.reduce((target, source) => {
+		if (Array.isArray(target) && Array.isArray(source)) {
+			const tLength = target.length;
+			const sLength = source.length;
 
-		if(tLength === 0 || options?.overwriteArrays) {
+			if (tLength === 0 || options?.overwriteArrays) {
+				return source;
+			}
+
+			if (sLength === 0) {
+				return target;
+			}
+
+			if (options?.concatArrays) {
+				return [...target, ...source];
+			}
+
+			if (tLength === sLength) {
+				return target.map((item, index) => mergeDeep([item, source[index]], options));
+			} else if (tLength < sLength) {
+				return source.map((item, index) => mergeDeep([target[index], item], options));
+			} else {
+				return [...source, ...target.slice(sLength)];
+			}
+		} else if (isObj(target) && isObj(source)) {
+			const targetKeys = getObjectKeys(target);
+			const sourceKeys = getObjectKeys(source);
+			const allKeys = [...new Set([...targetKeys, ...sourceKeys])];
+			const mergedObject = Object.create(Object.prototype);
+			for (const key of allKeys) {
+				if (targetKeys.includes(key) && sourceKeys.includes(key)) {
+					mergedObject[key] = mergeDeep([target[key] as T, source[key] as T], options);
+				} else if (targetKeys.includes(key)) {
+					mergedObject[key] = target[key];
+				} else {
+					mergedObject[key] = source[key];
+				}
+			}
+			return mergedObject;
+		} else {
 			return source;
 		}
-
-		if(sLength === 0) {
-			return target;
-		}
-
-		if(options?.concatArrays) {
-			return [...target, ...source];
-		}
-
-		if(tLength === sLength) {
-			return target.map((item, index) => mergeDeep([item, source[index]], options));
-		} else if(tLength < sLength) {
-			return source.map((item, index) => mergeDeep([target[index], item], options));
-		} else {
-			return [...source, ...target.slice(sLength)];
-		}
-	} else if(isObj(target) && isObj(source)) {
-		const targetKeys = getObjectKeys(target);
-		const sourceKeys = getObjectKeys(source);
-		const allKeys = [...new Set([...targetKeys, ...sourceKeys])];
-		const mergedObject = Object.create(Object.prototype);
-		for (const key of allKeys) {
-			if (targetKeys.includes(key) && sourceKeys.includes(key)) {
-				mergedObject[key] = mergeDeep([target[key] as T, source[key] as T], options);
-			} else if (targetKeys.includes(key)) {
-				mergedObject[key] = target[key];
-			} else {
-				mergedObject[key] = source[key];
-			}
-		}
-		return mergedObject;
-	} else {
-		return source;
-	}
-}, (Array.isArray(sources[0]) ? [] : {}) as T);
+	}, (Array.isArray(sources[0]) ? [] : {}) as T);
 
 export const getSchema = (input: Optional<Primitives | object>, path = ''): Schema => {
-	let schema:Schema = { type: 'undefined', value: 'undefined', path };
+	let schema: Schema = { type: 'undefined', value: 'undefined', path };
 	switch (typeof input) {
 		case 'object':
 			if (input === null) {
@@ -214,22 +220,28 @@ export const getSchema = (input: Optional<Primitives | object>, path = ''): Sche
 			} else if (Array.isArray(input)) {
 				schema = {
 					type: 'array',
-					value: input.map((item, index) => ({key: index.toString(), ...getSchema(item,`${path}[${index}]`)})),
+					value: input.map((item, index) => ({
+						key: index.toString(),
+						...getSchema(item, `${path}[${index}]`),
+					})),
 					path,
 				};
 			} else if (isObj(input)) {
 				schema = {
 					type: 'object',
-					value: Object.entries(input).map(([k, v]) => ({ key: k, ...getSchema(v, path + `["${ k }"]`)})),
+					value: Object.entries(input).map(([k, v]) => ({
+						key: k,
+						...getSchema(v, path + `["${k}"]`),
+					})),
 					path,
 				};
 			}
 			break;
 		case 'function':
-			schema =  { type: 'function', value: ``, path };
+			schema = { type: 'function', value: ``, path };
 			break;
 		default:
-			schema =  { type: typeof input, value: String(input), path };
+			schema = { type: typeof input, value: String(input), path };
 	}
 
 	return schema;
diff --git a/packages/editor-ui/src/utils/userUtils.ts b/packages/editor-ui/src/utils/userUtils.ts
index b9a31cec51..16cdc0f0b2 100644
--- a/packages/editor-ui/src/utils/userUtils.ts
+++ b/packages/editor-ui/src/utils/userUtils.ts
@@ -1,23 +1,92 @@
-
-import { CALENDLY_TRIGGER_NODE_TYPE, CLEARBIT_NODE_TYPE, COMPANY_SIZE_1000_OR_MORE, COMPANY_SIZE_500_999, SCHEDULE_TRIGGER_NODE_TYPE, ELASTIC_SECURITY_NODE_TYPE, EMAIL_SEND_NODE_TYPE, EXECUTE_COMMAND_NODE_TYPE, FINANCE_WORK_AREA, GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, IF_NODE_TYPE, ITEM_LISTS_NODE_TYPE, IT_ENGINEERING_WORK_AREA, JIRA_TRIGGER_NODE_TYPE, MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE, PAGERDUTY_NODE_TYPE, PRODUCT_WORK_AREA, QUICKBOOKS_NODE_TYPE, SALESFORCE_NODE_TYPE, SALES_BUSINESSDEV_WORK_AREA, SECURITY_WORK_AREA, SEGMENT_NODE_TYPE, SET_NODE_TYPE, SLACK_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE, SWITCH_NODE_TYPE, WEBHOOK_NODE_TYPE, XERO_NODE_TYPE, COMPANY_SIZE_KEY, WORK_AREA_KEY, CODING_SKILL_KEY, COMPANY_TYPE_KEY, ECOMMERCE_COMPANY_TYPE, MSP_COMPANY_TYPE, PERSONAL_COMPANY_TYPE, AUTOMATION_GOAL_KEY, OTHER_AUTOMATION_GOAL, NOT_SURE_YET_GOAL, CUSTOMER_INTEGRATIONS_GOAL, CUSTOMER_SUPPORT_GOAL, FINANCE_ACCOUNTING_GOAL, ZENDESK_TRIGGER_NODE_TYPE, WOOCOMMERCE_TRIGGER_NODE_TYPE, SALES_MARKETING_GOAL, HUBSPOT_TRIGGER_NODE_TYPE, HR_GOAL, WORKABLE_TRIGGER_NODE_TYPE, OPERATIONS_GOAL, PRODUCT_GOAL, NOTION_TRIGGER_NODE_TYPE, SECURITY_GOAL, THE_HIVE_TRIGGER_NODE_TYPE, ZENDESK_NODE_TYPE, SERVICENOW_NODE_TYPE, JIRA_NODE_TYPE, BAMBOO_HR_NODE_TYPE, GOOGLE_SHEETS_NODE_TYPE, CODE_NODE_TYPE } from '@/constants';
-import { IPermissions, IPersonalizationSurveyAnswersV1, IPersonalizationSurveyAnswersV2, IPersonalizationSurveyAnswersV3, IPersonalizationSurveyVersions, IUser } from '@/Interface';
-import { ILogInStatus, IRole, IUserPermissions } from "@/Interface";
+import {
+	CALENDLY_TRIGGER_NODE_TYPE,
+	CLEARBIT_NODE_TYPE,
+	COMPANY_SIZE_1000_OR_MORE,
+	COMPANY_SIZE_500_999,
+	SCHEDULE_TRIGGER_NODE_TYPE,
+	ELASTIC_SECURITY_NODE_TYPE,
+	EMAIL_SEND_NODE_TYPE,
+	EXECUTE_COMMAND_NODE_TYPE,
+	FINANCE_WORK_AREA,
+	GITHUB_TRIGGER_NODE_TYPE,
+	HTTP_REQUEST_NODE_TYPE,
+	IF_NODE_TYPE,
+	ITEM_LISTS_NODE_TYPE,
+	IT_ENGINEERING_WORK_AREA,
+	JIRA_TRIGGER_NODE_TYPE,
+	MICROSOFT_EXCEL_NODE_TYPE,
+	MICROSOFT_TEAMS_NODE_TYPE,
+	PAGERDUTY_NODE_TYPE,
+	PRODUCT_WORK_AREA,
+	QUICKBOOKS_NODE_TYPE,
+	SALESFORCE_NODE_TYPE,
+	SALES_BUSINESSDEV_WORK_AREA,
+	SECURITY_WORK_AREA,
+	SEGMENT_NODE_TYPE,
+	SET_NODE_TYPE,
+	SLACK_NODE_TYPE,
+	SPREADSHEET_FILE_NODE_TYPE,
+	SWITCH_NODE_TYPE,
+	WEBHOOK_NODE_TYPE,
+	XERO_NODE_TYPE,
+	COMPANY_SIZE_KEY,
+	WORK_AREA_KEY,
+	CODING_SKILL_KEY,
+	COMPANY_TYPE_KEY,
+	ECOMMERCE_COMPANY_TYPE,
+	MSP_COMPANY_TYPE,
+	PERSONAL_COMPANY_TYPE,
+	AUTOMATION_GOAL_KEY,
+	OTHER_AUTOMATION_GOAL,
+	NOT_SURE_YET_GOAL,
+	CUSTOMER_INTEGRATIONS_GOAL,
+	CUSTOMER_SUPPORT_GOAL,
+	FINANCE_ACCOUNTING_GOAL,
+	ZENDESK_TRIGGER_NODE_TYPE,
+	WOOCOMMERCE_TRIGGER_NODE_TYPE,
+	SALES_MARKETING_GOAL,
+	HUBSPOT_TRIGGER_NODE_TYPE,
+	HR_GOAL,
+	WORKABLE_TRIGGER_NODE_TYPE,
+	OPERATIONS_GOAL,
+	PRODUCT_GOAL,
+	NOTION_TRIGGER_NODE_TYPE,
+	SECURITY_GOAL,
+	THE_HIVE_TRIGGER_NODE_TYPE,
+	ZENDESK_NODE_TYPE,
+	SERVICENOW_NODE_TYPE,
+	JIRA_NODE_TYPE,
+	BAMBOO_HR_NODE_TYPE,
+	GOOGLE_SHEETS_NODE_TYPE,
+	CODE_NODE_TYPE,
+} from '@/constants';
+import {
+	IPermissions,
+	IPersonalizationSurveyAnswersV1,
+	IPersonalizationSurveyAnswersV2,
+	IPersonalizationSurveyAnswersV3,
+	IPersonalizationSurveyVersions,
+	IUser,
+} from '@/Interface';
+import { ILogInStatus, IRole, IUserPermissions } from '@/Interface';
 
 /*
 	Utility functions used to handle users in n8n
 */
 
-function isPersonalizationV2OrV3(data: IPersonalizationSurveyVersions): data is IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3 {
-	return "version" in data;
+function isPersonalizationV2OrV3(
+	data: IPersonalizationSurveyVersions,
+): data is IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3 {
+	return 'version' in data;
 }
 
-export const ROLE: {Owner: IRole, Member: IRole, Default: IRole} = {
+export const ROLE: { Owner: IRole; Member: IRole; Default: IRole } = {
 	Owner: 'owner',
 	Member: 'member',
 	Default: 'default', // default user with no email when setting up instance
 };
 
-export const LOGIN_STATUS: {LoggedIn: ILogInStatus, LoggedOut: ILogInStatus} = {
+export const LOGIN_STATUS: { LoggedIn: ILogInStatus; LoggedOut: ILogInStatus } = {
 	LoggedIn: 'LoggedIn', // Can be owner or member or default user
 	LoggedOut: 'LoggedOut', // Can only be logged out if UM has been setup
 };
@@ -71,8 +140,7 @@ export const isAuthorized = (permissions: IPermissions, currentUser: IUser | nul
 			if (permissions.deny.role && permissions.deny.role.includes(role)) {
 				return false;
 			}
-		}
-		else if (permissions.deny.role) {
+		} else if (permissions.deny.role) {
 			return false;
 		}
 	}
@@ -99,7 +167,13 @@ export const isAuthorized = (permissions: IPermissions, currentUser: IUser | nul
 	return false;
 };
 
-export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswersV1 | IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3 | null): string[] {
+export function getPersonalizedNodeTypes(
+	answers:
+		| IPersonalizationSurveyAnswersV1
+		| IPersonalizationSurveyAnswersV2
+		| IPersonalizationSurveyAnswersV3
+		| null,
+): string[] {
 	if (!answers) {
 		return [];
 	}
@@ -112,19 +186,21 @@ export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswersV
 }
 
 export function getAccountAge(currentUser: IUser): number {
-	if(currentUser.createdAt) {
+	if (currentUser.createdAt) {
 		const accountCreatedAt = new Date(currentUser.createdAt);
 		const today = new Date();
 
-		return Math.ceil((today.getTime() - accountCreatedAt.getTime()) / (1000* 3600 * 24));
+		return Math.ceil((today.getTime() - accountCreatedAt.getTime()) / (1000 * 3600 * 24));
 	}
 	return -1;
 }
 
-function getPersonalizationV2(answers: IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3) {
+function getPersonalizationV2(
+	answers: IPersonalizationSurveyAnswersV2 | IPersonalizationSurveyAnswersV3,
+) {
 	let nodeTypes: string[] = [];
 
-	const {version, ...data} = answers;
+	const { version, ...data } = answers;
 	if (Object.keys(data).length === 0) {
 		return [];
 	}
@@ -136,7 +212,7 @@ function getPersonalizationV2(answers: IPersonalizationSurveyAnswersV2 | IPerson
 	let codingSkill = null;
 	if (CODING_SKILL_KEY in answers && answers[CODING_SKILL_KEY]) {
 		codingSkill = parseInt(answers[CODING_SKILL_KEY] as string, 10);
-		codingSkill = isNaN(codingSkill)? 0 : codingSkill;
+		codingSkill = isNaN(codingSkill) ? 0 : codingSkill;
 	}
 
 	// slot 1 trigger
@@ -144,13 +220,28 @@ function getPersonalizationV2(answers: IPersonalizationSurveyAnswersV2 | IPerson
 		nodeTypes = nodeTypes.concat(WOOCOMMERCE_TRIGGER_NODE_TYPE);
 	} else if (companyType === MSP_COMPANY_TYPE) {
 		nodeTypes = nodeTypes.concat(JIRA_TRIGGER_NODE_TYPE);
-	} else if((companyType === PERSONAL_COMPANY_TYPE || automationGoal === OTHER_AUTOMATION_GOAL ||  automationGoal === NOT_SURE_YET_GOAL) && codingSkill !== null && codingSkill >= 4) {
+	} else if (
+		(companyType === PERSONAL_COMPANY_TYPE ||
+			automationGoal === OTHER_AUTOMATION_GOAL ||
+			automationGoal === NOT_SURE_YET_GOAL) &&
+		codingSkill !== null &&
+		codingSkill >= 4
+	) {
 		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
-	} else if((companyType === PERSONAL_COMPANY_TYPE || automationGoal === OTHER_AUTOMATION_GOAL ||  automationGoal === NOT_SURE_YET_GOAL) && codingSkill !== null && codingSkill < 3) {
+	} else if (
+		(companyType === PERSONAL_COMPANY_TYPE ||
+			automationGoal === OTHER_AUTOMATION_GOAL ||
+			automationGoal === NOT_SURE_YET_GOAL) &&
+		codingSkill !== null &&
+		codingSkill < 3
+	) {
 		nodeTypes = nodeTypes.concat(SCHEDULE_TRIGGER_NODE_TYPE);
 	} else if (automationGoal === CUSTOMER_INTEGRATIONS_GOAL) {
 		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
-	} else if (automationGoal === CUSTOMER_SUPPORT_GOAL || automationGoal === FINANCE_ACCOUNTING_GOAL) {
+	} else if (
+		automationGoal === CUSTOMER_SUPPORT_GOAL ||
+		automationGoal === FINANCE_ACCOUNTING_GOAL
+	) {
 		nodeTypes = nodeTypes.concat(ZENDESK_TRIGGER_NODE_TYPE);
 	} else if (automationGoal === SALES_MARKETING_GOAL) {
 		nodeTypes = nodeTypes.concat(HUBSPOT_TRIGGER_NODE_TYPE);
@@ -176,8 +267,7 @@ function getPersonalizationV2(answers: IPersonalizationSurveyAnswersV2 | IPerson
 	// slot 3 logic node
 	if (codingSkill !== null && codingSkill < 3) {
 		nodeTypes = nodeTypes.concat(IF_NODE_TYPE);
-	}
-	else {
+	} else {
 		nodeTypes = nodeTypes.concat(SWITCH_NODE_TYPE);
 	}
 
@@ -254,7 +344,7 @@ function getPersonalizationV1(answers: IPersonalizationSurveyAnswersV1) {
 		}
 	}
 
-	const workAreaIsEmpty = !workArea|| workArea.length === 0;
+	const workAreaIsEmpty = !workArea || workArea.length === 0;
 
 	if (companySize === null && workAreaIsEmpty && answers[CODING_SKILL_KEY] === null) {
 		return [];
@@ -263,65 +353,56 @@ function getPersonalizationV1(answers: IPersonalizationSurveyAnswersV1) {
 	let codingSkill = null;
 	if (answers[CODING_SKILL_KEY]) {
 		codingSkill = parseInt(answers[CODING_SKILL_KEY] as string, 10);
-		codingSkill = isNaN(codingSkill)? 0 : codingSkill;
+		codingSkill = isNaN(codingSkill) ? 0 : codingSkill;
 	}
 
 	let nodeTypes = [] as string[];
 	if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
-	}
-	else {
+	} else {
 		nodeTypes = nodeTypes.concat(SCHEDULE_TRIGGER_NODE_TYPE);
 	}
 
 	if (codingSkill !== null && codingSkill >= 4) {
 		nodeTypes = nodeTypes.concat(CODE_NODE_TYPE);
-	}
-	else {
+	} else {
 		nodeTypes = nodeTypes.concat(ITEM_LISTS_NODE_TYPE);
 	}
 
 	if (codingSkill !== null && codingSkill < 3) {
 		nodeTypes = nodeTypes.concat(IF_NODE_TYPE);
-	}
-	else {
+	} else {
 		nodeTypes = nodeTypes.concat(SWITCH_NODE_TYPE);
 	}
 
 	if (companySize === COMPANY_SIZE_500_999 || companySize === COMPANY_SIZE_1000_OR_MORE) {
 		if (isWorkAreaAnswer(SALES_BUSINESSDEV_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat(SALESFORCE_NODE_TYPE);
-		}
-		else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([ELASTIC_SECURITY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
-		}
-		else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, SEGMENT_NODE_TYPE]);
-		}
-		else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
-		}
-		else {
+		} else {
 			nodeTypes = nodeTypes.concat([MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE]);
 		}
-	}
-	else {
+	} else {
 		if (isWorkAreaAnswer(SALES_BUSINESSDEV_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat(CLEARBIT_NODE_TYPE);
-		}
-		else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([PAGERDUTY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
-		}
-		else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, CALENDLY_TRIGGER_NODE_TYPE]);
-		}
-		else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
+		} else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([EXECUTE_COMMAND_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
-		}
-		else if (isWorkAreaAnswer(FINANCE_WORK_AREA)) {
-			nodeTypes = nodeTypes.concat([XERO_NODE_TYPE, QUICKBOOKS_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE]);
-		}
-		else {
+		} else if (isWorkAreaAnswer(FINANCE_WORK_AREA)) {
+			nodeTypes = nodeTypes.concat([
+				XERO_NODE_TYPE,
+				QUICKBOOKS_NODE_TYPE,
+				SPREADSHEET_FILE_NODE_TYPE,
+			]);
+		} else {
 			nodeTypes = nodeTypes.concat([EMAIL_SEND_NODE_TYPE, SLACK_NODE_TYPE]);
 		}
 	}
diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue
index 2096aa36f1..ace8b3d0ae 100644
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -1,10 +1,10 @@
 <template>
 	<div :class="$style.container">
 		<div :class="$style.logoContainer">
-				<Logo />
+			<Logo />
 		</div>
 		<div v-if="subtitle" :class="$style.textContainer">
-			<n8n-text size="large">{{subtitle}}</n8n-text>
+			<n8n-text size="large">{{ subtitle }}</n8n-text>
 		</div>
 		<div :class="$style.formContainer">
 			<n8n-form-box
@@ -30,8 +30,7 @@ export default Vue.extend({
 		Logo,
 	},
 	props: {
-		form: {
-		},
+		form: {},
 		formLoading: {
 			type: Boolean,
 			default: false,
@@ -41,10 +40,10 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		onInput(e: {name: string, value: string}) {
+		onInput(e: { name: string; value: string }) {
 			this.$emit('input', e);
 		},
-		onSubmit(values: {[key: string]: string}) {
+		onSubmit(values: { [key: string]: string }) {
 			this.$emit('submit', values);
 		},
 		onSecondaryClick() {
@@ -86,9 +85,7 @@ body {
 </style>
 
 <style lang="scss">
-
 .el-checkbox__label span {
 	font-size: var(--font-size-2xs) !important;
 }
-
 </style>
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 4f4549734c..7d9015e0d5 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,6 +1,18 @@
 <template>
-	<div :class="$style.container" :style="containerCssVars" ref="container"  data-test-id="canvas-add-button">
-		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="nodeCreatorStore.showScrim" :popper-class="$style.tooltip" :open-delay="700">
+	<div
+		:class="$style.container"
+		:style="containerCssVars"
+		ref="container"
+		data-test-id="canvas-add-button"
+	>
+		<n8n-tooltip
+			placement="top"
+			:value="showTooltip"
+			manual
+			:disabled="nodeCreatorStore.showScrim"
+			:popper-class="$style.tooltip"
+			:open-delay="700"
+		>
 			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
@@ -47,7 +59,7 @@ const containerCssVars = computed(() => ({
 	z-index: 101;
 
 	&:hover .button svg path {
-		fill: var(--color-primary)
+		fill: var(--color-primary);
 	}
 }
 
@@ -65,7 +77,7 @@ const containerCssVars = computed(() => ({
 		width: 26px !important;
 		height: 40px;
 		path {
-			fill: var(--color-foreground-xdark)
+			fill: var(--color-foreground-xdark);
 		}
 	}
 }
@@ -78,7 +90,7 @@ const containerCssVars = computed(() => ({
 	width: max-content;
 	font-weight: var(--font-weight-bold);
 	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-xloose	);
+	line-height: var(--font-line-height-xloose);
 	color: var(--color-text-dark);
 	margin-top: var(--spacing-2xs);
 }
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index b52afe1c04..a40bfefbe2 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -18,9 +18,7 @@ import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'ChangePasswordView',
 	components: {
 		AuthView,
@@ -48,7 +46,7 @@ export default mixins(
 						label: this.$locale.baseText('auth.newPassword'),
 						type: 'password',
 						required: true,
-						validationRules: [{name: 'DEFAULT_PASSWORD_RULES'}],
+						validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
 						infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
 						autocomplete: 'new-password',
 						capitalize: true,
@@ -65,15 +63,21 @@ export default mixins(
 								validate: this.passwordsMatch,
 							},
 						},
-						validationRules: [{name: 'TWO_PASSWORDS_MATCH'}],
+						validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
 						autocomplete: 'new-password',
 						capitalize: true,
 					},
 				},
 			],
 		};
-		const token = (!this.$route.query.token || typeof this.$route.query.token !== 'string') ? null : this.$route.query.token;
-		const userId = (!this.$route.query.userId || typeof this.$route.query.userId !== 'string') ? null : this.$route.query.userId;
+		const token =
+			!this.$route.query.token || typeof this.$route.query.token !== 'string'
+				? null
+				: this.$route.query.token;
+		const userId =
+			!this.$route.query.userId || typeof this.$route.query.userId !== 'string'
+				? null
+				: this.$route.query.userId;
 		try {
 			if (!token) {
 				throw new Error(this.$locale.baseText('auth.changePassword.missingTokenError'));
@@ -84,7 +88,10 @@ export default mixins(
 
 			await this.usersStore.validatePasswordToken({ token, userId });
 		} catch (e) {
-			this.$showMessage({title: this.$locale.baseText('auth.changePassword.tokenValidationError'), type: 'error'});
+			this.$showMessage({
+				title: this.$locale.baseText('auth.changePassword.tokenValidationError'),
+				type: 'error',
+			});
 		}
 	},
 	methods: {
@@ -101,7 +108,7 @@ export default mixins(
 
 			return false;
 		},
-		onInput(e: {name: string, value: string}) {
+		onInput(e: { name: string; value: string }) {
 			if (e.name === 'password') {
 				this.password = e.value;
 			}
@@ -109,11 +116,17 @@ export default mixins(
 		async onSubmit() {
 			try {
 				this.loading = true;
-				const token = (!this.$route.query.token || typeof this.$route.query.token !== 'string') ? null : this.$route.query.token;
-				const userId = (!this.$route.query.userId || typeof this.$route.query.userId !== 'string') ? null : this.$route.query.userId;
+				const token =
+					!this.$route.query.token || typeof this.$route.query.token !== 'string'
+						? null
+						: this.$route.query.token;
+				const userId =
+					!this.$route.query.userId || typeof this.$route.query.userId !== 'string'
+						? null
+						: this.$route.query.userId;
 
 				if (token && userId) {
-					await this.usersStore.changePassword({token, userId, password: this.password});
+					await this.usersStore.changePassword({ token, userId, password: this.password });
 
 					this.$showMessage({
 						type: 'success',
@@ -123,7 +136,10 @@ export default mixins(
 
 					await this.$router.push({ name: VIEWS.SIGNIN });
 				} else {
-					this.$showError(new Error(this.$locale.baseText('auth.validation.missingParameters')), this.$locale.baseText('auth.changePassword.error'));
+					this.$showError(
+						new Error(this.$locale.baseText('auth.validation.missingParameters')),
+						this.$locale.baseText('auth.changePassword.error'),
+					);
 				}
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 0c9a8a1f00..3ff980da74 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -10,7 +10,7 @@
 		@update:filters="filters = $event"
 	>
 		<template #default="{ data }">
-			<credential-card :data="data"/>
+			<credential-card :data="data" />
 		</template>
 		<template #filters="{ setKeyValue }">
 			<div class="mb-s">
@@ -43,22 +43,22 @@
 </template>
 
 <script lang="ts">
-import {showMessage} from '@/mixins/showMessage';
-import {ICredentialsResponse, ICredentialTypeMap, IUser} from '@/Interface';
+import { showMessage } from '@/mixins/showMessage';
+import { ICredentialsResponse, ICredentialTypeMap, IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 
 import SettingsView from './SettingsView.vue';
-import ResourcesListLayout from "@/components/layouts/ResourcesListLayout.vue";
-import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
-import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
-import CredentialCard from "@/components/CredentialCard.vue";
-import {ICredentialType} from "n8n-workflow";
-import TemplateCard from "@/components/TemplateCard.vue";
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
+import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
+import CredentialCard from '@/components/CredentialCard.vue';
+import { ICredentialType } from 'n8n-workflow';
+import TemplateCard from '@/components/TemplateCard.vue';
 import { debounceHelper } from '@/mixins/debounce';
-import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
-import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
-import {CREDENTIAL_SELECT_MODAL_KEY} from '@/constants';
-import Vue from "vue";
+import ResourceOwnershipSelect from '@/components/forms/ResourceOwnershipSelect.ee.vue';
+import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
+import { CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
+import Vue from 'vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
@@ -67,10 +67,7 @@ import { useCredentialsStore } from '@/stores/credentials';
 
 type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
 
-export default mixins(
-	showMessage,
-	debounceHelper,
-).extend({
+export default mixins(showMessage, debounceHelper).extend({
 	name: 'SettingsPersonalView',
 	components: {
 		ResourcesListLayout,
@@ -93,12 +90,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNodeTypesStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useCredentialsStore, useNodeTypesStore, useUIStore, useUsersStore),
 		allCredentials(): ICredentialsResponse[] {
 			return this.credentialsStore.allCredentials;
 		},
@@ -118,7 +110,6 @@ export default mixins(
 			});
 		},
 		async initialize() {
-
 			const loadPromises = [
 				this.credentialsStore.fetchAllCredentials(),
 				this.credentialsStore.fetchCredentialTypes(false),
@@ -132,7 +123,11 @@ export default mixins(
 
 			this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
 		},
-		onFilter(resource: ICredentialsResponse, filters: { type: string[]; search: string; }, matches: boolean): boolean {
+		onFilter(
+			resource: ICredentialsResponse,
+			filters: { type: string[]; search: string },
+			matches: boolean,
+		): boolean {
 			if (filters.type.length > 0) {
 				matches = matches && filters.type.includes(resource.type);
 			}
@@ -140,9 +135,12 @@ export default mixins(
 			if (filters.search) {
 				const searchString = filters.search.toLowerCase();
 
-				matches = matches || (
-					this.credentialTypesById[resource.type] && this.credentialTypesById[resource.type].displayName.toLowerCase().includes(searchString)
-				);
+				matches =
+					matches ||
+					(this.credentialTypesById[resource.type] &&
+						this.credentialTypesById[resource.type].displayName
+							.toLowerCase()
+							.includes(searchString));
 			}
 
 			return matches;
@@ -168,4 +166,3 @@ export default mixins(
 	padding: 0 !important;
 }
 </style>
-
diff --git a/packages/editor-ui/src/views/ErrorView.vue b/packages/editor-ui/src/views/ErrorView.vue
index 62a19fcd96..6da6cab01a 100644
--- a/packages/editor-ui/src/views/ErrorView.vue
+++ b/packages/editor-ui/src/views/ErrorView.vue
@@ -9,14 +9,11 @@
 			</div>
 			<div>
 				<n8n-text size="large" v-if="errorCode">
-					{{errorCode}} {{ $locale.baseText('error') }}
+					{{ errorCode }} {{ $locale.baseText('error') }}
 				</n8n-text>
 			</div>
 		</div>
-		<n8n-button
-			:label="$locale.baseText(redirectTextKey)"
-			@click="onButtonClick"
-		/>
+		<n8n-button :label="$locale.baseText(redirectTextKey)" @click="onButtonClick" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index d8cfe875e8..8da514c3b7 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -1,9 +1,5 @@
 <template>
-	<AuthView
-		:form="formConfig"
-		:formLoading="loading"
-		@submit="onSubmit"
-	/>
+	<AuthView :form="formConfig" :formLoading="loading" @submit="onSubmit" />
 </template>
 
 <script lang="ts">
@@ -16,9 +12,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'ForgotMyPasswordView',
 	components: {
 		AuthView,
@@ -29,10 +23,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useUsersStore,
-		),
+		...mapStores(useSettingsStore, useUsersStore),
 		formConfig(): IFormBoxConfig {
 			const EMAIL_INPUTS: IFormBoxConfig['inputs'] = [
 				{
@@ -41,7 +32,7 @@ export default mixins(
 						label: this.$locale.baseText('auth.email'),
 						type: 'email',
 						required: true,
-						validationRules: [{name: 'VALID_EMAIL'}],
+						validationRules: [{ name: 'VALID_EMAIL' }],
 						autocomplete: 'email',
 						capitalize: true,
 					},
@@ -86,10 +77,9 @@ export default mixins(
 				this.$showMessage({
 					type: 'success',
 					title: this.$locale.baseText('forgotPassword.recoveryEmailSent'),
-					message: this.$locale.baseText(
-						'forgotPassword.emailSentIfExists',
-						{ interpolate: { email: values.email }},
-					),
+					message: this.$locale.baseText('forgotPassword.emailSentIfExists', {
+						interpolate: { email: values.email },
+					}),
 				});
 			} catch (error) {
 				this.$showMessage({
diff --git a/packages/editor-ui/src/views/LoadingView.vue b/packages/editor-ui/src/views/LoadingView.vue
index 03ba2045d3..60c7c91981 100644
--- a/packages/editor-ui/src/views/LoadingView.vue
+++ b/packages/editor-ui/src/views/LoadingView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.wrapper" data-test-id="node-view-loader">
+	<div :class="$style.wrapper" data-test-id="node-view-loader">
 		<div :class="$style.spinner">
 			<n8n-spinner />
 		</div>
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index d89338183b..8025d23a9e 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1,139 +1,159 @@
 <template>
-<div :class="$style['content']">
-	<div
-		class="node-view-root"
-		id="node-view-root"
-		data-test-id="node-view-root"
-	 	@dragover="onDragOver"
-	 	@drop="onDrop"
-	>
+	<div :class="$style['content']">
 		<div
-			class="node-view-wrapper"
-			:class="workflowClasses"
-			@touchstart="mouseDown"
-			@touchend="mouseUp"
-			@touchmove="mouseMoveNodeWorkflow"
-			@mousedown="mouseDown"
-			v-touch:tap="touchTap"
-			@mouseup="mouseUp"
-			@wheel="canvasStore.wheelScroll"
+			class="node-view-root"
+			id="node-view-root"
+			data-test-id="node-view-root"
+			@dragover="onDragOver"
+			@drop="onDrop"
 		>
-			<div id="node-view-background" class="node-view-background" :style="backgroundStyle" />
 			<div
-				id="node-view"
-				class="node-view"
-				:style="workflowStyle"
-				ref="nodeView"
+				class="node-view-wrapper"
+				:class="workflowClasses"
+				@touchstart="mouseDown"
+				@touchend="mouseUp"
+				@touchmove="mouseMoveNodeWorkflow"
+				@mousedown="mouseDown"
+				v-touch:tap="touchTap"
+				@mouseup="mouseUp"
+				@wheel="canvasStore.wheelScroll"
 			>
-				<canvas-add-button
-					:style="canvasAddButtonStyle"
-					@click="showTriggerCreator('trigger_placeholder_button')"
-					v-show="showCanvasAddButton"
-					:showTooltip="!containsTrigger && showTriggerMissingTooltip"
-					:position="canvasStore.canvasAddButtonPosition"
-					@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
-					data-test-id="canvas-add-button"
-				/>
-				<div v-for="nodeData in nodes" :key="nodeData.id">
-					<node
-						v-if="nodeData.type !== STICKY_NODE_TYPE"
-						@duplicateNode="duplicateNode"
-						@deselectAllNodes="deselectAllNodes"
-						@deselectNode="nodeDeselectedByName"
-						@nodeSelected="nodeSelectedByName"
-						@removeNode="(name) => removeNode(name, true)"
-						@runWorkflow="onRunNode"
-						@moved="onNodeMoved"
-						@run="onNodeRun"
-						:key="`${nodeData.id}_node`"
-						:name="nodeData.name"
-						:isReadOnly="isReadOnly"
-						:instance="instance"
-						:isActive="!!activeNode && activeNode.name === nodeData.name"
-						:hideActions="pullConnActive"
-						:isProductionExecutionPreview="isProductionExecutionPreview"
-					>
-						<template #custom-tooltip>
-							<span
-								v-text="$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')"
-							/>
-						</template>
-					</node>
-					<sticky
-						v-else
-						@deselectAllNodes="deselectAllNodes"
-						@deselectNode="nodeDeselectedByName"
-						@nodeSelected="nodeSelectedByName"
-						@removeNode="(name) => removeNode(name, true)"
-						:key="`${nodeData.id}_sticky`"
-						:name="nodeData.name"
-						:isReadOnly="isReadOnly"
-						:instance="instance"
-						:isActive="!!activeNode && activeNode.name === nodeData.name"
-						:nodeViewScale="nodeViewScale"
-						:gridSize="GRID_SIZE"
-						:hideActions="pullConnActive"
+				<div id="node-view-background" class="node-view-background" :style="backgroundStyle" />
+				<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView">
+					<canvas-add-button
+						:style="canvasAddButtonStyle"
+						@click="showTriggerCreator('trigger_placeholder_button')"
+						v-show="showCanvasAddButton"
+						:showTooltip="!containsTrigger && showTriggerMissingTooltip"
+						:position="canvasStore.canvasAddButtonPosition"
+						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
+						data-test-id="canvas-add-button"
 					/>
+					<div v-for="nodeData in nodes" :key="nodeData.id">
+						<node
+							v-if="nodeData.type !== STICKY_NODE_TYPE"
+							@duplicateNode="duplicateNode"
+							@deselectAllNodes="deselectAllNodes"
+							@deselectNode="nodeDeselectedByName"
+							@nodeSelected="nodeSelectedByName"
+							@removeNode="(name) => removeNode(name, true)"
+							@runWorkflow="onRunNode"
+							@moved="onNodeMoved"
+							@run="onNodeRun"
+							:key="`${nodeData.id}_node`"
+							:name="nodeData.name"
+							:isReadOnly="isReadOnly"
+							:instance="instance"
+							:isActive="!!activeNode && activeNode.name === nodeData.name"
+							:hideActions="pullConnActive"
+							:isProductionExecutionPreview="isProductionExecutionPreview"
+						>
+							<template #custom-tooltip>
+								<span
+									v-text="
+										$locale.baseText('nodeView.placeholderNode.addTriggerNodeBeforeExecuting')
+									"
+								/>
+							</template>
+						</node>
+						<sticky
+							v-else
+							@deselectAllNodes="deselectAllNodes"
+							@deselectNode="nodeDeselectedByName"
+							@nodeSelected="nodeSelectedByName"
+							@removeNode="(name) => removeNode(name, true)"
+							:key="`${nodeData.id}_sticky`"
+							:name="nodeData.name"
+							:isReadOnly="isReadOnly"
+							:instance="instance"
+							:isActive="!!activeNode && activeNode.name === nodeData.name"
+							:nodeViewScale="nodeViewScale"
+							:gridSize="GRID_SIZE"
+							:hideActions="pullConnActive"
+						/>
+					</div>
 				</div>
 			</div>
-		</div>
-		<node-details-view
-			:readOnly="isReadOnly"
-			:renaming="renamingActive"
-			:isProductionExecutionPreview="isProductionExecutionPreview"
-			@valueChanged="valueChanged"
-			@stopExecution="stopExecution"
-		/>
-		<node-creation
-			v-if="!isReadOnly"
-			:create-node-active="createNodeActive"
-			:node-view-scale="nodeViewScale"
-			@toggleNodeCreator="onToggleNodeCreator"
-			@addNode="onAddNode"
-		/>
-		<canvas-controls />
-		<div
-			class="workflow-execute-wrapper" v-if="!isReadOnly"
-		>
-			<span
-				@mouseenter="showTriggerMissingToltip(true)"
-				@mouseleave="showTriggerMissingToltip(false)"
-				@click="onRunContainerClick"
-			>
-				<n8n-button
-					@click.stop="onRunWorkflow"
-					:loading="workflowRunning"
-					:label="runButtonText"
-					:title="$locale.baseText('nodeView.executesTheWorkflowFromATriggerNode')"
+			<node-details-view
+				:readOnly="isReadOnly"
+				:renaming="renamingActive"
+				:isProductionExecutionPreview="isProductionExecutionPreview"
+				@valueChanged="valueChanged"
+				@stopExecution="stopExecution"
+			/>
+			<node-creation
+				v-if="!isReadOnly"
+				:create-node-active="createNodeActive"
+				:node-view-scale="nodeViewScale"
+				@toggleNodeCreator="onToggleNodeCreator"
+				@addNode="onAddNode"
+			/>
+			<canvas-controls />
+			<div class="workflow-execute-wrapper" v-if="!isReadOnly">
+				<span
+					@mouseenter="showTriggerMissingToltip(true)"
+					@mouseleave="showTriggerMissingToltip(false)"
+					@click="onRunContainerClick"
+				>
+					<n8n-button
+						@click.stop="onRunWorkflow"
+						:loading="workflowRunning"
+						:label="runButtonText"
+						:title="$locale.baseText('nodeView.executesTheWorkflowFromATriggerNode')"
+						size="large"
+						icon="play-circle"
+						type="primary"
+						:disabled="isExecutionDisabled"
+					/>
+				</span>
+
+				<n8n-icon-button
+					v-if="workflowRunning === true && !executionWaitingForWebhook"
+					icon="stop"
 					size="large"
-					icon="play-circle"
-					type="primary"
-					:disabled="isExecutionDisabled"
+					class="stop-execution"
+					type="secondary"
+					:title="
+						stopExecutionInProgress
+							? $locale.baseText('nodeView.stoppingCurrentExecution')
+							: $locale.baseText('nodeView.stopCurrentExecution')
+					"
+					:loading="stopExecutionInProgress"
+					@click.stop="stopExecution"
 				/>
-			</span>
 
-			<n8n-icon-button v-if="workflowRunning === true && !executionWaitingForWebhook" icon="stop" size="large"
-				class="stop-execution" type="secondary" :title="stopExecutionInProgress
-					? $locale.baseText('nodeView.stoppingCurrentExecution')
-					: $locale.baseText('nodeView.stopCurrentExecution')
-				" :loading="stopExecutionInProgress" @click.stop="stopExecution" />
+				<n8n-icon-button
+					v-if="workflowRunning === true && executionWaitingForWebhook === true"
+					class="stop-execution"
+					icon="stop"
+					size="large"
+					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
+					type="secondary"
+					@click.stop="stopWaitingForWebhook"
+				/>
 
-			<n8n-icon-button v-if="workflowRunning === true && executionWaitingForWebhook === true" class="stop-execution"
-				icon="stop" size="large" :title="$locale.baseText('nodeView.stopWaitingForWebhookCall')" type="secondary"
-				@click.stop="stopWaitingForWebhook" />
-
-			<n8n-icon-button v-if="!isReadOnly && workflowExecution && !workflowRunning && !allTriggersDisabled"
-				:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')" icon="trash" size="large"
-				@click.stop="clearExecutionData" />
+				<n8n-icon-button
+					v-if="!isReadOnly && workflowExecution && !workflowRunning && !allTriggersDisabled"
+					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
+					icon="trash"
+					size="large"
+					@click.stop="clearExecutionData"
+				/>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { mapStores } from 'pinia';
-import type { OnConnectionBindInfo, Connection, Endpoint, N8nPlusEndpoint, jsPlumbInstance } from 'jsplumb';
+import type {
+	OnConnectionBindInfo,
+	Connection,
+	Endpoint,
+	N8nPlusEndpoint,
+	jsPlumbInstance,
+} from 'jsplumb';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
 import once from 'lodash/once';
 
@@ -152,7 +172,8 @@ import {
 	STICKY_NODE_TYPE,
 	VIEWS,
 	WEBHOOK_NODE_TYPE,
-	TRIGGER_NODE_FILTER, EnterpriseEditionFeature,
+	TRIGGER_NODE_FILTER,
+	EnterpriseEditionFeature,
 } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
@@ -231,11 +252,18 @@ import { useTagsStore } from '@/stores/tags';
 import { useNodeCreatorStore } from '@/stores/nodeCreator';
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { useCanvasStore } from '@/stores/canvas';
-import useWorkflowsEEStore from "@/stores/workflows.ee";
+import useWorkflowsEEStore from '@/stores/workflows.ee';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { getAccountAge, getConnectionInfo, getNodeViewTab } from '@/utils';
 import { useHistoryStore } from '@/stores/history';
-import { AddConnectionCommand, AddNodeCommand, MoveNodeCommand, RemoveConnectionCommand, RemoveNodeCommand, RenameNodeCommand } from '@/models/history';
+import {
+	AddConnectionCommand,
+	AddNodeCommand,
+	MoveNodeCommand,
+	RemoveConnectionCommand,
+	RemoveNodeCommand,
+	RenameNodeCommand,
+} from '@/models/history';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -259,98 +287,2175 @@ export default mixins(
 	workflowRun,
 	newVersions,
 	debounceHelper,
-)
-	.extend({
-		name: 'NodeView',
-		components: {
-			NodeDetailsView,
-			Node,
-			NodeCreator,
-			NodeSettings,
-			Sticky,
-			CanvasAddButton,
-			NodeCreation,
-			CanvasControls,
-		},
-		setup() {
-			const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
+).extend({
+	name: 'NodeView',
+	components: {
+		NodeDetailsView,
+		Node,
+		NodeCreator,
+		NodeSettings,
+		Sticky,
+		CanvasAddButton,
+		NodeCreation,
+		CanvasControls,
+	},
+	setup() {
+		const { registerCustomAction, unregisterCustomAction } = useGlobalLinkActions();
 
+		return {
+			registerCustomAction,
+			unregisterCustomAction,
+		};
+	},
+	errorCaptured: (err, vm, info) => {
+		console.error('errorCaptured'); // eslint-disable-line no-console
+		console.error(err); // eslint-disable-line no-console
+	},
+	watch: {
+		// Listen to route changes and load the workflow accordingly
+		$route(to: Route, from: Route) {
+			const currentTab = getNodeViewTab(to);
+			const nodeViewNotInitialized = !this.uiStore.nodeViewInitialized;
+			let workflowChanged =
+				from.params.name !== to.params.name &&
+				// Both 'new' and __EMPTY__ are new workflow names, so ignore them when detecting if wf changed
+				!(from.params.name === 'new' && this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID) &&
+				// Also ignore if workflow id changes when saving new workflow
+				to.params.action !== 'workflowSave';
+			const isOpeningTemplate = to.name === VIEWS.TEMPLATE_IMPORT;
+
+			// When entering this tab:
+			if (currentTab === MAIN_HEADER_TABS.WORKFLOW || isOpeningTemplate) {
+				if (workflowChanged || nodeViewNotInitialized || isOpeningTemplate) {
+					this.startLoading();
+					if (nodeViewNotInitialized) {
+						const previousDirtyState = this.uiStore.stateIsDirty;
+						this.resetWorkspace();
+						this.uiStore.stateIsDirty = previousDirtyState;
+					}
+					this.loadCredentials();
+					this.initView().then(() => {
+						this.stopLoading();
+						if (this.blankRedirect) {
+							this.blankRedirect = false;
+						}
+					});
+				}
+			}
+			// Also, when landing on executions tab, check if workflow data is changed
+			if (currentTab === MAIN_HEADER_TABS.EXECUTIONS) {
+				workflowChanged =
+					from.params.name !== to.params.name &&
+					!(to.params.name === 'new' && from.params.name === undefined);
+				if (workflowChanged) {
+					// This will trigger node view to update next time workflow tab is opened
+					this.uiStore.nodeViewInitialized = false;
+				}
+			}
+		},
+		activeNode() {
+			// When a node gets set as active deactivate the create-menu
+			this.createNodeActive = false;
+		},
+		containsTrigger(containsTrigger) {
+			// Re-center CanvasAddButton if there's no triggers
+			if (containsTrigger === false)
+				this.canvasStore.setRecenteredCanvasAddButtonPosition(this.getNodeViewOffsetPosition);
+			else this.tryToAddWelcomeSticky();
+		},
+		nodeViewScale(newScale) {
+			const element = this.$refs.nodeView as HTMLDivElement;
+			if (element) {
+				element.style.transform = `scale(${newScale})`;
+			}
+		},
+	},
+	async beforeRouteLeave(to, from, next) {
+		const nextTab = getNodeViewTab(to);
+		// Only react if leaving workflow tab and going to a separate page
+		if (!nextTab) {
+			// Skip check if in the middle of template import
+			if (from.name === VIEWS.TEMPLATE_IMPORT) {
+				next();
+				return;
+			}
+			// Make sure workflow id is empty when leaving the editor
+			this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			const result = this.uiStore.stateIsDirty;
+			if (result) {
+				const confirmModal = await this.confirmModal(
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
+					'warning',
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+					true,
+				);
+
+				if (confirmModal === MODAL_CONFIRMED) {
+					const saved = await this.saveCurrentWorkflow({}, false);
+					if (saved) await this.settingsStore.fetchPromptsData();
+					this.uiStore.stateIsDirty = false;
+
+					if (from.name === VIEWS.NEW_WORKFLOW) {
+						// Replace the current route with the new workflow route
+						// before navigating to the new route when saving new workflow.
+						this.$router.replace(
+							{ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } },
+							() => {
+								// We can't use next() here since vue-router
+								// would prevent the navigation with an error
+								this.$router.push(to as RawLocation);
+							},
+						);
+					} else {
+						next();
+					}
+				} else if (confirmModal === MODAL_CANCEL) {
+					await this.resetWorkspace();
+					this.uiStore.stateIsDirty = false;
+
+					next();
+				} else if (confirmModal === MODAL_CLOSE) {
+					next(false);
+				}
+			} else {
+				next();
+			}
+		} else {
+			next();
+		}
+	},
+	computed: {
+		...mapStores(
+			useCanvasStore,
+			useTagsStore,
+			useCredentialsStore,
+			useNodeCreatorStore,
+			useNodeTypesStore,
+			useNDVStore,
+			useRootStore,
+			useSettingsStore,
+			useTemplatesStore,
+			useUIStore,
+			useWorkflowsStore,
+			useUsersStore,
+			useNodeCreatorStore,
+			useWorkflowsEEStore,
+			useHistoryStore,
+		),
+		nativelyNumberSuffixedDefaults(): string[] {
+			return this.rootStore.nativelyNumberSuffixedDefaults;
+		},
+		currentUser(): IUser | null {
+			return this.usersStore.currentUser;
+		},
+		defaultLocale(): string {
+			return this.rootStore.defaultLocale;
+		},
+		isEnglishLocale(): boolean {
+			return this.defaultLocale === 'en';
+		},
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+		executionWaitingForWebhook(): boolean {
+			return this.workflowsStore.executionWaitingForWebhook;
+		},
+		isDemo(): boolean {
+			return this.$route.name === VIEWS.DEMO;
+		},
+		isExecutionView(): boolean {
+			return this.$route.name === VIEWS.EXECUTION;
+		},
+		showCanvasAddButton(): boolean {
+			return (
+				this.loadingService === null &&
+				!this.containsTrigger &&
+				!this.isDemo &&
+				!this.isExecutionView
+			);
+		},
+		lastSelectedNode(): INodeUi | null {
+			return this.uiStore.getLastSelectedNode;
+		},
+		nodes(): INodeUi[] {
+			return this.workflowsStore.allNodes;
+		},
+		runButtonText(): string {
+			if (!this.workflowRunning) {
+				return this.$locale.baseText('nodeView.runButtonText.executeWorkflow');
+			}
+
+			if (this.executionWaitingForWebhook) {
+				return this.$locale.baseText('nodeView.runButtonText.waitingForTriggerEvent');
+			}
+
+			return this.$locale.baseText('nodeView.runButtonText.executingWorkflow');
+		},
+		workflowStyle(): object {
+			const offsetPosition = this.uiStore.nodeViewOffsetPosition;
 			return {
-				registerCustomAction,
-				unregisterCustomAction,
+				left: offsetPosition[0] + 'px',
+				top: offsetPosition[1] + 'px',
 			};
 		},
-		errorCaptured: (err, vm, info) => {
-			console.error('errorCaptured'); // eslint-disable-line no-console
-			console.error(err); // eslint-disable-line no-console
+		canvasAddButtonStyle(): object {
+			return {
+				'pointer-events': this.createNodeActive ? 'none' : 'all',
+			};
 		},
-		watch: {
-			// Listen to route changes and load the workflow accordingly
-			'$route' (to: Route, from: Route) {
-				const currentTab = getNodeViewTab(to);
-				const nodeViewNotInitialized = !this.uiStore.nodeViewInitialized;
-				let workflowChanged =
-					from.params.name !== to.params.name &&
-					// Both 'new' and __EMPTY__ are new workflow names, so ignore them when detecting if wf changed
-					!(from.params.name === 'new' && this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID) &&
-					// Also ignore if workflow id changes when saving new workflow
-					to.params.action !== 'workflowSave';
-				const isOpeningTemplate = to.name === VIEWS.TEMPLATE_IMPORT;
+		backgroundStyle(): object {
+			return NodeViewUtils.getBackgroundStyles(
+				this.nodeViewScale,
+				this.uiStore.nodeViewOffsetPosition,
+				this.isExecutionPreview,
+			);
+		},
+		workflowClasses() {
+			const returnClasses = [];
+			if (this.ctrlKeyPressed) {
+				if (this.uiStore.nodeViewMoveInProgress === true) {
+					returnClasses.push('move-in-process');
+				} else {
+					returnClasses.push('move-active');
+				}
+			}
+			if (this.selectActive || this.ctrlKeyPressed) {
+				// Makes sure that nothing gets selected while select or move is active
+				returnClasses.push('do-not-select');
+			}
+			return returnClasses;
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.workflowsStore.getWorkflowExecution;
+		},
+		workflowRunning(): boolean {
+			return this.uiStore.isActionActive('workflowRunning');
+		},
+		currentWorkflow(): string {
+			return this.$route.params.name || this.workflowsStore.workflowId;
+		},
+		workflowName(): string {
+			return this.workflowsStore.workflowName;
+		},
+		allTriggersDisabled(): boolean {
+			const disabledTriggerNodes = this.triggerNodes.filter((node) => node.disabled);
+			return disabledTriggerNodes.length === this.triggerNodes.length;
+		},
+		triggerNodes(): INodeUi[] {
+			return this.nodes.filter(
+				(node) => node.type === START_NODE_TYPE || this.nodeTypesStore.isTriggerNode(node.type),
+			);
+		},
+		containsTrigger(): boolean {
+			return this.triggerNodes.length > 0;
+		},
+		isExecutionDisabled(): boolean {
+			return !this.containsTrigger || this.allTriggersDisabled;
+		},
+		getNodeViewOffsetPosition(): XYPosition {
+			return this.uiStore.nodeViewOffsetPosition;
+		},
+		nodeViewScale(): number {
+			return this.canvasStore.nodeViewScale;
+		},
+		instance(): jsPlumbInstance {
+			return this.canvasStore.jsPlumbInstance;
+		},
+	},
+	data() {
+		return {
+			GRID_SIZE: NodeViewUtils.GRID_SIZE,
+			STICKY_NODE_TYPE,
+			createNodeActive: false,
+			lastSelectedConnection: null as null | Connection,
+			lastClickPosition: [450, 450] as XYPosition,
+			ctrlKeyPressed: false,
+			stopExecutionInProgress: false,
+			blankRedirect: false,
+			credentialsUpdated: false,
+			newNodeInsertPosition: null as XYPosition | null,
+			pullConnActiveNodeName: null as string | null,
+			pullConnActive: false,
+			dropPrevented: false,
+			renamingActive: false,
+			showStickyButton: false,
+			isExecutionPreview: false,
+			showTriggerMissingTooltip: false,
+			workflowData: null as INewWorkflowData | null,
+			isProductionExecutionPreview: false,
+			// jsplumb automatically deletes all loose connections which is in turn recorded
+			// in undo history as a user action.
+			// This should prevent automatically removed connections from populating undo stack
+			suspendRecordingDetachedConnections: false,
+		};
+	},
+	beforeDestroy() {
+		this.resetWorkspace();
+		// Make sure the event listeners get removed again else we
+		// could add up with them registred multiple times
+		document.removeEventListener('keydown', this.keyDown);
+		document.removeEventListener('keyup', this.keyUp);
+		this.unregisterCustomAction('showNodeCreator');
+	},
+	methods: {
+		showTriggerMissingToltip(isVisible: boolean) {
+			this.showTriggerMissingTooltip = isVisible;
+		},
+		onRunNode(nodeName: string, source: string) {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			const telemetryPayload = {
+				node_type: node ? node.type : null,
+				workflow_id: this.workflowsStore.workflowId,
+				source: 'canvas',
+			};
+			this.$telemetry.track('User clicked execute node button', telemetryPayload);
+			this.$externalHooks().run('nodeView.onRunNode', telemetryPayload);
+			this.runWorkflow(nodeName, source);
+		},
+		async onRunWorkflow() {
+			this.getWorkflowDataToSave().then((workflowData) => {
+				const telemetryPayload = {
+					workflow_id: this.workflowsStore.workflowId,
+					node_graph_string: JSON.stringify(
+						TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes())
+							.nodeGraph,
+					),
+				};
+				this.$telemetry.track('User clicked execute workflow button', telemetryPayload);
+				this.$externalHooks().run('nodeView.onRunWorkflow', telemetryPayload);
+			});
 
-				// When entering this tab:
-				if (currentTab === MAIN_HEADER_TABS.WORKFLOW || isOpeningTemplate) {
-					if (workflowChanged || nodeViewNotInitialized || isOpeningTemplate) {
-						this.startLoading();
-						if (nodeViewNotInitialized) {
-							const previousDirtyState = this.uiStore.stateIsDirty;
-							this.resetWorkspace();
-							this.uiStore.stateIsDirty = previousDirtyState;
-						}
-						this.loadCredentials();
-						this.initView().then(() => {
-							this.stopLoading();
-							if (this.blankRedirect) {
-								this.blankRedirect = false;
-							}
-						});
-					}
-				}
-				// Also, when landing on executions tab, check if workflow data is changed
-				if (currentTab === MAIN_HEADER_TABS.EXECUTIONS) {
-					workflowChanged = from.params.name !== to.params.name && !(to.params.name === 'new' && from.params.name === undefined);
-					if (workflowChanged) {
-						// This will trigger node view to update next time workflow tab is opened
-						this.uiStore.nodeViewInitialized = false;
-					}
-				}
-			},
-			activeNode () {
-				// When a node gets set as active deactivate the create-menu
-				this.createNodeActive = false;
-			},
-			containsTrigger(containsTrigger) {
-				// Re-center CanvasAddButton if there's no triggers
-				if (containsTrigger === false) this.canvasStore.setRecenteredCanvasAddButtonPosition(this.getNodeViewOffsetPosition);
-				else this.tryToAddWelcomeSticky();
-			},
-			nodeViewScale(newScale) {
-				const element = this.$refs.nodeView as HTMLDivElement;
-				if(element) {
-					element.style.transform = `scale(${newScale})`;
-				}
-			},
+			await this.runWorkflow();
 		},
-		async beforeRouteLeave(to, from, next) {
-			const nextTab = getNodeViewTab(to);
-			// Only react if leaving workflow tab and going to a separate page
-			if (!nextTab) {
-				// Skip check if in the middle of template import
-				if (from.name === VIEWS.TEMPLATE_IMPORT) {
-					next();
+		onRunContainerClick() {
+			if (this.containsTrigger && !this.allTriggersDisabled) return;
+
+			const message =
+				this.containsTrigger && this.allTriggersDisabled
+					? this.$locale.baseText('nodeView.addOrEnableTriggerNode')
+					: this.$locale.baseText('nodeView.addATriggerNodeFirst');
+
+			this.registerCustomAction('showNodeCreator', () =>
+				this.showTriggerCreator('no_trigger_execution_tooltip'),
+			);
+			const notice = this.$showMessage({
+				type: 'info',
+				title: this.$locale.baseText('nodeView.cantExecuteNoTrigger'),
+				message,
+				duration: 3000,
+				onClick: () =>
+					setTimeout(() => {
+						// Close the creator panel if user clicked on the link
+						if (this.createNodeActive) notice.close();
+					}, 0),
+			});
+		},
+		clearExecutionData() {
+			this.workflowsStore.workflowExecutionData = null;
+			this.updateNodesExecutionIssues();
+		},
+		translateName(type: string, originalName: string) {
+			return this.$locale.headerText({
+				key: `headers.${this.$locale.shortNodeType(type)}.displayName`,
+				fallback: originalName,
+			});
+		},
+		getUniqueNodeName({
+			originalName,
+			additionalUsedNames = [],
+			type = '',
+		}: {
+			originalName: string;
+			additionalUsedNames?: string[];
+			type?: string;
+		}) {
+			const allNodeNamesOnCanvas = this.workflowsStore.allNodes.map((n: INodeUi) => n.name);
+			originalName = this.isEnglishLocale ? originalName : this.translateName(type, originalName);
+
+			if (
+				!allNodeNamesOnCanvas.includes(originalName) &&
+				!additionalUsedNames.includes(originalName)
+			) {
+				return originalName; // already unique
+			}
+
+			let natives: string[] = this.nativelyNumberSuffixedDefaults;
+			natives = this.isEnglishLocale
+				? natives
+				: natives.map((name) => {
+						const type = name.toLowerCase().replace('_', '');
+						return this.translateName(type, name);
+				  });
+
+			const found = natives.find((n) => originalName.startsWith(n));
+
+			let ignore, baseName, nameIndex, uniqueName;
+			let index = 1;
+
+			if (found) {
+				// name natively ends with number
+				nameIndex = originalName.split(found).pop();
+				if (nameIndex) {
+					index = parseInt(nameIndex, 10);
+				}
+				baseName = uniqueName = found;
+			} else {
+				const nameMatch = originalName.match(/(.*\D+)(\d*)/);
+
+				if (nameMatch === null) {
+					// name is only a number
+					index = parseInt(originalName, 10);
+					baseName = '';
+					uniqueName = baseName + index;
+				} else {
+					// name is string or string/number combination
+					[ignore, baseName, nameIndex] = nameMatch;
+					if (nameIndex !== '') {
+						index = parseInt(nameIndex, 10);
+					}
+					uniqueName = baseName;
+				}
+			}
+
+			while (
+				allNodeNamesOnCanvas.includes(uniqueName) ||
+				additionalUsedNames.includes(uniqueName)
+			) {
+				uniqueName = baseName + index++;
+			}
+
+			return uniqueName;
+		},
+		async onSaveKeyboardShortcut() {
+			const saved = await this.saveCurrentWorkflow();
+			if (saved) await this.settingsStore.fetchPromptsData();
+		},
+		showTriggerCreator(source: string) {
+			if (this.createNodeActive) return;
+			this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
+			this.nodeCreatorStore.setShowScrim(true);
+			this.onToggleNodeCreator({ source, createNodeActive: true });
+			this.$nextTick(() => this.nodeCreatorStore.setShowTabs(false));
+		},
+		async openExecution(executionId: string) {
+			this.startLoading();
+			this.resetWorkspace();
+			let data: IExecutionResponse | undefined;
+			try {
+				data = await this.restApi().getExecution(executionId);
+			} catch (error) {
+				this.$showError(error, this.$locale.baseText('nodeView.showError.openExecution.title'));
+				return;
+			}
+			if (data === undefined) {
+				throw new Error(`Execution with id "${executionId}" could not be found!`);
+			}
+			this.workflowsStore.setWorkflowName({
+				newName: data.workflowData.name,
+				setStateDirty: false,
+			});
+			this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			this.workflowsStore.setWorkflowExecutionData(data);
+			if (data.workflowData.pinData) {
+				this.workflowsStore.setWorkflowPinData(data.workflowData.pinData);
+			}
+
+			await this.addNodes(
+				deepCopy(data.workflowData.nodes),
+				deepCopy(data.workflowData.connections),
+			);
+			this.$nextTick(() => {
+				this.canvasStore.zoomToFit();
+				this.uiStore.stateIsDirty = false;
+			});
+			this.$externalHooks().run('execution.open', {
+				workflowId: data.workflowData.id,
+				workflowName: data.workflowData.name,
+				executionId,
+			});
+			this.$telemetry.track('User opened read-only execution', {
+				workflow_id: data.workflowData.id,
+				execution_mode: data.mode,
+				execution_finished: data.finished,
+			});
+
+			if (!data.finished && data.data?.resultData?.error) {
+				// Check if any node contains an error
+				let nodeErrorFound = false;
+				if (data.data.resultData.runData) {
+					const runData = data.data.resultData.runData;
+					errorCheck: for (const nodeName of Object.keys(runData)) {
+						for (const taskData of runData[nodeName]) {
+							if (taskData.error) {
+								nodeErrorFound = true;
+								break errorCheck;
+							}
+						}
+					}
+				}
+
+				if (!nodeErrorFound && data.data.resultData.error.stack) {
+					// Display some more information for now in console to make debugging easier
+					// TODO: Improve this in the future by displaying in UI
+					console.error(`Execution ${executionId} error:`); // eslint-disable-line no-console
+					console.error(data.data.resultData.error.stack); // eslint-disable-line no-console
+				}
+			}
+			if ((data as IExecutionsSummary).waitTill) {
+				this.$showMessage({
+					title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
+					message: `<a data-action="reload">${this.$locale.baseText(
+						'nodeView.refresh',
+					)}</a> ${this.$locale.baseText(
+						'nodeView.toSeeTheLatestStatus',
+					)}.<br/> <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText(
+						'nodeView.moreInfo',
+					)}</a>`,
+					type: 'warning',
+					duration: 0,
+				});
+			}
+			this.stopLoading();
+		},
+		async importWorkflowExact(data: { workflow: IWorkflowDataUpdate }) {
+			if (!data.workflow.nodes || !data.workflow.connections) {
+				throw new Error('Invalid workflow object');
+			}
+			this.resetWorkspace();
+			data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes);
+
+			await this.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
+
+			if (data.workflow.pinData) {
+				this.workflowsStore.setWorkflowPinData(data.workflow.pinData);
+			}
+
+			this.$nextTick(() => {
+				this.canvasStore.zoomToFit();
+			});
+		},
+		async openWorkflowTemplate(templateId: string) {
+			this.startLoading();
+			this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
+			this.resetWorkspace();
+
+			this.workflowsStore.currentWorkflowExecutions = [];
+			this.workflowsStore.activeWorkflowExecution = null;
+
+			let data: IWorkflowTemplate | undefined;
+			try {
+				this.$externalHooks().run('template.requested', { templateId });
+				data = await this.templatesStore.getWorkflowTemplate(templateId);
+
+				if (!data) {
+					throw new Error(
+						this.$locale.baseText('nodeView.workflowTemplateWithIdCouldNotBeFound', {
+							interpolate: { templateId },
+						}),
+					);
+				}
+			} catch (error) {
+				this.$showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
+				this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
+				return;
+			}
+
+			data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes) as INodeUi[];
+
+			this.blankRedirect = true;
+			this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
+
+			await this.addNodes(data.workflow.nodes, data.workflow.connections);
+			this.workflowData = (await this.workflowsStore.getNewWorkflowData(data.name)) || {};
+			this.$nextTick(() => {
+				this.canvasStore.zoomToFit();
+				this.uiStore.stateIsDirty = true;
+			});
+
+			this.$externalHooks().run('template.open', {
+				templateId,
+				templateName: data.name,
+				workflow: data.workflow,
+			});
+			this.stopLoading();
+		},
+		async openWorkflow(workflowId: string) {
+			this.startLoading();
+			this.resetWorkspace();
+			let data: IWorkflowDb | undefined;
+			try {
+				data = await this.restApi().getWorkflow(workflowId);
+			} catch (error) {
+				this.$showError(error, this.$locale.baseText('nodeView.showError.openWorkflow.title'));
+				return;
+			}
+
+			if (!data) {
+				throw new Error(
+					this.$locale.baseText('nodeView.workflowWithIdCouldNotBeFound', {
+						interpolate: { workflowId },
+					}),
+				);
+			}
+
+			this.workflowsStore.addWorkflow(data);
+			this.workflowsStore.setActive(data.active || false);
+			this.workflowsStore.setWorkflowId(workflowId);
+			this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
+			this.workflowsStore.setWorkflowSettings(data.settings || {});
+			this.workflowsStore.setWorkflowPinData(data.pinData || {});
+			this.workflowsStore.setWorkflowVersionId(data.versionId);
+
+			if (data.ownedBy) {
+				this.workflowsEEStore.setWorkflowOwnedBy({
+					workflowId: data.id,
+					ownedBy: data.ownedBy,
+				});
+			}
+
+			if (data.sharedWith) {
+				this.workflowsEEStore.setWorkflowSharedWith({
+					workflowId: data.id,
+					sharedWith: data.sharedWith,
+				});
+			}
+
+			if (data.usedCredentials) {
+				this.workflowsStore.setUsedCredentials(data.usedCredentials);
+			}
+
+			const tags = (data.tags || []) as ITag[];
+			const tagIds = tags.map((tag) => tag.id);
+			this.workflowsStore.setWorkflowTagIds(tagIds || []);
+			this.tagsStore.upsertTags(tags);
+
+			await this.addNodes(data.nodes, data.connections);
+
+			if (!this.credentialsUpdated) {
+				this.uiStore.stateIsDirty = false;
+			}
+			this.canvasStore.zoomToFit();
+			this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
+			this.workflowsStore.activeWorkflowExecution = null;
+			this.stopLoading();
+			return data;
+		},
+		touchTap(e: MouseEvent | TouchEvent) {
+			if (this.isTouchDevice) {
+				this.mouseDown(e);
+			}
+		},
+		mouseDown(e: MouseEvent | TouchEvent) {
+			// Save the location of the mouse click
+			this.lastClickPosition = this.getMousePositionWithinNodeView(e);
+
+			this.mouseDownMouseSelect(e as MouseEvent);
+			this.mouseDownMoveWorkflow(e as MouseEvent);
+
+			// Hide the node-creator
+			this.createNodeActive = false;
+		},
+		mouseUp(e: MouseEvent) {
+			this.mouseUpMouseSelect(e);
+			this.mouseUpMoveWorkflow(e);
+		},
+		keyUp(e: KeyboardEvent) {
+			if (e.key === this.controlKeyCode) {
+				this.ctrlKeyPressed = false;
+			}
+		},
+		async keyDown(e: KeyboardEvent) {
+			// @ts-ignore
+			const path = e.path || (e.composedPath && e.composedPath());
+
+			// Check if the keys got emitted from a message box or from something
+			// else which should ignore the default keybindings
+			for (const element of path) {
+				if (
+					element.className &&
+					typeof element.className === 'string' &&
+					element.className.includes('ignore-key-press')
+				) {
 					return;
 				}
-				// Make sure workflow id is empty when leaving the editor
-				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			}
+
+			// el-dialog or el-message-box element is open
+			if (window.document.body.classList.contains('el-popup-parent--hidden')) {
+				return;
+			}
+
+			if (e.key === 'Escape') {
+				this.createNodeActive = false;
+				if (this.activeNode) {
+					this.$externalHooks().run('dataDisplay.nodeEditingFinished');
+					this.ndvStore.activeNodeName = null;
+				}
+
+				return;
+			}
+
+			// node modal is open
+			if (this.activeNode) {
+				return;
+			}
+
+			if (e.key === 'd') {
+				this.callDebounced('deactivateSelectedNode', { debounceTime: 350 });
+			} else if (e.key === 'Delete' || e.key === 'Backspace') {
+				e.stopPropagation();
+				e.preventDefault();
+
+				this.callDebounced('deleteSelectedNodes', { debounceTime: 500 });
+			} else if (e.key === 'Tab') {
+				this.onToggleNodeCreator({
+					source: 'tab',
+					createNodeActive: !this.createNodeActive && !this.isReadOnly,
+				});
+			} else if (e.key === this.controlKeyCode) {
+				this.ctrlKeyPressed = true;
+			} else if (e.key === 'F2' && !this.isReadOnly) {
+				const lastSelectedNode = this.lastSelectedNode;
+				if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
+					this.callDebounced('renameNodePrompt', { debounceTime: 1500 }, lastSelectedNode.name);
+				}
+			} else if (e.key === 'a' && this.isCtrlKeyPressed(e) === true) {
+				// Select all nodes
+				e.stopPropagation();
+				e.preventDefault();
+
+				this.callDebounced('selectAllNodes', { debounceTime: 1000 });
+			} else if (e.key === 'c' && this.isCtrlKeyPressed(e)) {
+				this.callDebounced('copySelectedNodes', { debounceTime: 1000 });
+			} else if (e.key === 'x' && this.isCtrlKeyPressed(e)) {
+				// Cut nodes
+				e.stopPropagation();
+				e.preventDefault();
+
+				this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
+			} else if (e.key === 'n' && this.isCtrlKeyPressed(e) && e.altKey) {
+				// Create a new workflow
+				e.stopPropagation();
+				e.preventDefault();
+				if (this.isDemo) {
+					return;
+				}
+
+				if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
+					this.$root.$emit('newWorkflow');
+				} else {
+					this.$router.push({ name: VIEWS.NEW_WORKFLOW });
+				}
+
+				this.$showMessage({
+					title: this.$locale.baseText('nodeView.showMessage.keyDown.title'),
+					type: 'success',
+				});
+			} else if (e.key === 's' && this.isCtrlKeyPressed(e)) {
+				// Save workflow
+				e.stopPropagation();
+				e.preventDefault();
+
+				if (this.isReadOnly) {
+					return;
+				}
+
+				this.callDebounced('onSaveKeyboardShortcut', { debounceTime: 1000 });
+			} else if (e.key === 'Enter') {
+				// Activate the last selected node
+				const lastSelectedNode = this.lastSelectedNode;
+
+				if (lastSelectedNode !== null) {
+					if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
+						return;
+					}
+					this.ndvStore.activeNodeName = lastSelectedNode.name;
+				}
+			} else if (e.key === 'ArrowRight' && e.shiftKey) {
+				// Select all downstream nodes
+				e.stopPropagation();
+				e.preventDefault();
+
+				this.callDebounced('selectDownstreamNodes', { debounceTime: 1000 });
+			} else if (e.key === 'ArrowRight') {
+				// Set child node active
+				const lastSelectedNode = this.lastSelectedNode;
+				if (lastSelectedNode === null) {
+					return;
+				}
+
+				const connections = this.workflowsStore.outgoingConnectionsByNodeName(
+					lastSelectedNode.name,
+				);
+
+				if (connections.main === undefined || connections.main.length === 0) {
+					return;
+				}
+
+				this.callDebounced(
+					'nodeSelectedByName',
+					{ debounceTime: 100 },
+					connections.main[0][0].node,
+					false,
+					true,
+				);
+			} else if (e.key === 'ArrowLeft' && e.shiftKey) {
+				// Select all downstream nodes
+				e.stopPropagation();
+				e.preventDefault();
+
+				this.callDebounced('selectUpstreamNodes', { debounceTime: 1000 });
+			} else if (e.key === 'ArrowLeft') {
+				// Set parent node active
+				const lastSelectedNode = this.lastSelectedNode;
+				if (lastSelectedNode === null) {
+					return;
+				}
+
+				const workflow = this.getCurrentWorkflow();
+
+				if (!workflow.connectionsByDestinationNode.hasOwnProperty(lastSelectedNode.name)) {
+					return;
+				}
+
+				const connections = workflow.connectionsByDestinationNode[lastSelectedNode.name];
+
+				if (connections.main === undefined || connections.main.length === 0) {
+					return;
+				}
+
+				this.callDebounced(
+					'nodeSelectedByName',
+					{ debounceTime: 100 },
+					connections.main[0][0].node,
+					false,
+					true,
+				);
+			} else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+				// Set sibling node as active
+
+				// Check first if it has a parent node
+				const lastSelectedNode = this.lastSelectedNode;
+				if (lastSelectedNode === null) {
+					return;
+				}
+
+				const workflow = this.getCurrentWorkflow();
+
+				if (!workflow.connectionsByDestinationNode.hasOwnProperty(lastSelectedNode.name)) {
+					return;
+				}
+
+				const connections = workflow.connectionsByDestinationNode[lastSelectedNode.name];
+
+				if (!Array.isArray(connections.main) || !connections.main.length) {
+					return;
+				}
+
+				const parentNode = connections.main[0][0].node;
+				const connectionsParent = this.workflowsStore.outgoingConnectionsByNodeName(parentNode);
+
+				if (!Array.isArray(connectionsParent.main) || !connectionsParent.main.length) {
+					return;
+				}
+
+				// Get all the sibling nodes and their x positions to know which one to set active
+				let siblingNode: INodeUi | null;
+				let lastCheckedNodePosition = e.key === 'ArrowUp' ? -99999999 : 99999999;
+				let nextSelectNode: string | null = null;
+				for (const ouputConnections of connectionsParent.main) {
+					for (const ouputConnection of ouputConnections) {
+						if (ouputConnection.node === lastSelectedNode.name) {
+							// Ignore current node
+							continue;
+						}
+						siblingNode = this.workflowsStore.getNodeByName(ouputConnection.node);
+
+						if (siblingNode) {
+							if (e.key === 'ArrowUp') {
+								// Get the next node on the left
+								if (
+									siblingNode.position[1] <= lastSelectedNode.position[1] &&
+									siblingNode.position[1] > lastCheckedNodePosition
+								) {
+									nextSelectNode = siblingNode.name;
+									lastCheckedNodePosition = siblingNode.position[1];
+								}
+							} else {
+								// Get the next node on the right
+								if (
+									siblingNode.position[1] >= lastSelectedNode.position[1] &&
+									siblingNode.position[1] < lastCheckedNodePosition
+								) {
+									nextSelectNode = siblingNode.name;
+									lastCheckedNodePosition = siblingNode.position[1];
+								}
+							}
+						}
+					}
+				}
+
+				if (nextSelectNode !== null) {
+					this.callDebounced(
+						'nodeSelectedByName',
+						{ debounceTime: 100 },
+						nextSelectNode,
+						false,
+						true,
+					);
+				}
+			}
+		},
+
+		deactivateSelectedNode() {
+			if (!this.editAllowedCheck()) {
+				return;
+			}
+			this.disableNodes(this.uiStore.getSelectedNodes, true);
+		},
+
+		deleteSelectedNodes() {
+			// Copy "selectedNodes" as the nodes get deleted out of selection
+			// when they get deleted and if we would use original it would mess
+			// with the index and would so not delete all nodes
+			const nodesToDelete: string[] = this.uiStore.getSelectedNodes.map((node: INodeUi) => {
+				return node.name;
+			});
+			this.historyStore.startRecordingUndo();
+			nodesToDelete.forEach((nodeName: string) => {
+				this.removeNode(nodeName, true, false);
+			});
+			setTimeout(() => {
+				this.historyStore.stopRecordingUndo();
+			}, 200);
+		},
+
+		selectAllNodes() {
+			this.nodes.forEach((node) => {
+				this.nodeSelectedByName(node.name);
+			});
+		},
+
+		selectUpstreamNodes() {
+			const lastSelectedNode = this.lastSelectedNode;
+			if (lastSelectedNode === null) {
+				return;
+			}
+
+			this.deselectAllNodes();
+
+			// Get all upstream nodes and select them
+			const workflow = this.getCurrentWorkflow();
+			for (const nodeName of workflow.getParentNodes(lastSelectedNode.name)) {
+				this.nodeSelectedByName(nodeName);
+			}
+
+			// At the end select the previously selected node again
+			this.nodeSelectedByName(lastSelectedNode.name);
+		},
+		selectDownstreamNodes() {
+			const lastSelectedNode = this.lastSelectedNode;
+			if (lastSelectedNode === null) {
+				return;
+			}
+
+			this.deselectAllNodes();
+
+			// Get all downstream nodes and select them
+			const workflow = this.getCurrentWorkflow();
+			for (const nodeName of workflow.getChildNodes(lastSelectedNode.name)) {
+				this.nodeSelectedByName(nodeName);
+			}
+
+			// At the end select the previously selected node again
+			this.nodeSelectedByName(lastSelectedNode.name);
+		},
+
+		pushDownstreamNodes(sourceNodeName: string, margin: number, recordHistory = false) {
+			const sourceNode = this.workflowsStore.nodesByName[sourceNodeName];
+			const workflow = this.getCurrentWorkflow();
+			const childNodes = workflow.getChildNodes(sourceNodeName);
+			for (const nodeName of childNodes) {
+				const node = this.workflowsStore.nodesByName[nodeName] as INodeUi;
+				const oldPosition = node.position;
+
+				if (node.position[0] < sourceNode.position[0]) {
+					continue;
+				}
+
+				const updateInformation: INodeUpdatePropertiesInformation = {
+					name: nodeName,
+					properties: {
+						position: [node.position[0] + margin, node.position[1]],
+					},
+				};
+
+				this.workflowsStore.updateNodeProperties(updateInformation);
+				this.onNodeMoved(node);
+
+				if (
+					(recordHistory && oldPosition[0] !== node.position[0]) ||
+					oldPosition[1] !== node.position[1]
+				) {
+					this.historyStore.pushCommandToUndo(
+						new MoveNodeCommand(nodeName, oldPosition, node.position, this),
+						recordHistory,
+					);
+				}
+			}
+		},
+
+		cutSelectedNodes() {
+			const deleteCopiedNodes = !this.isReadOnly;
+			this.copySelectedNodes(deleteCopiedNodes);
+			if (deleteCopiedNodes) {
+				this.deleteSelectedNodes();
+			}
+		},
+
+		copySelectedNodes(isCut: boolean) {
+			this.getSelectedNodesToSave().then((data) => {
+				const workflowToCopy: IWorkflowToShare = {
+					meta: {
+						instanceId: this.rootStore.instanceId,
+					},
+					...data,
+				};
+
+				this.removeForeignCredentialsFromWorkflow(
+					workflowToCopy,
+					this.credentialsStore.allCredentials,
+				);
+
+				const nodeData = JSON.stringify(workflowToCopy, null, 2);
+
+				this.copyToClipboard(nodeData);
+				if (data.nodes.length > 0) {
+					if (!isCut) {
+						this.$showMessage({
+							title: 'Copied!',
+							message: '',
+							type: 'success',
+						});
+					}
+					this.$telemetry.track('User copied nodes', {
+						node_types: data.nodes.map((node) => node.type),
+						workflow_id: this.workflowsStore.workflowId,
+					});
+				}
+			});
+		},
+		async stopExecution() {
+			const executionId = this.workflowsStore.activeExecutionId;
+			if (executionId === null) {
+				return;
+			}
+
+			try {
+				this.stopExecutionInProgress = true;
+				await this.restApi().stopCurrentExecution(executionId);
+				this.$showMessage({
+					title: this.$locale.baseText('nodeView.showMessage.stopExecutionTry.title'),
+					type: 'success',
+				});
+			} catch (error) {
+				// Execution stop might fail when the execution has already finished. Let's treat this here.
+				const execution = await this.restApi().getExecution(executionId);
+				if (execution?.finished) {
+					const executedData = {
+						data: execution.data,
+						finished: execution.finished,
+						mode: execution.mode,
+						startedAt: execution.startedAt,
+						stoppedAt: execution.stoppedAt,
+					} as IRun;
+					const pushData = {
+						data: executedData,
+						executionId,
+						retryOf: execution.retryOf,
+					} as IPushDataExecutionFinished;
+					this.workflowsStore.finishActiveExecution(pushData);
+					this.$titleSet(execution.workflowData.name, 'IDLE');
+					this.workflowsStore.executingNode = null;
+					this.workflowsStore.setWorkflowExecutionData(executedData as IExecutionResponse);
+					this.uiStore.removeActiveAction('workflowRunning');
+					this.$showMessage({
+						title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.title'),
+						message: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.message'),
+						type: 'success',
+					});
+				} else {
+					this.$showError(error, this.$locale.baseText('nodeView.showError.stopExecution.title'));
+				}
+			}
+			this.stopExecutionInProgress = false;
+
+			this.getWorkflowDataToSave().then((workflowData) => {
+				const trackProps = {
+					workflow_id: this.workflowsStore.workflowId,
+					node_graph_string: JSON.stringify(
+						TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes())
+							.nodeGraph,
+					),
+				};
+
+				this.$telemetry.track('User clicked stop workflow execution', trackProps);
+			});
+		},
+
+		async stopWaitingForWebhook() {
+			try {
+				await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('nodeView.showError.stopWaitingForWebhook.title'),
+				);
+				return;
+			}
+		},
+		/**
+		 * This method gets called when data got pasted into the window
+		 */
+		async receivedCopyPasteData(plainTextData: string): Promise<void> {
+			const currentTab = getNodeViewTab(this.$route);
+			if (currentTab === MAIN_HEADER_TABS.WORKFLOW) {
+				let workflowData: IWorkflowDataUpdate | undefined;
+				if (this.editAllowedCheck() === false) {
+					return;
+				}
+				// Check if it is an URL which could contain workflow data
+				if (plainTextData.match(/^http[s]?:\/\/.*\.json$/i)) {
+					// Pasted data points to a possible workflow JSON file
+
+					if (!this.editAllowedCheck()) {
+						return;
+					}
+
+					const importConfirm = await this.confirmMessage(
+						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.message', {
+							interpolate: { plainTextData },
+						}),
+						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
+						'warning',
+						this.$locale.baseText(
+							'nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText',
+						),
+						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
+					);
+
+					if (!importConfirm) {
+						return;
+					}
+
+					workflowData = await this.getWorkflowDataFromUrl(plainTextData);
+					if (workflowData === undefined) {
+						return;
+					}
+				} else {
+					// Pasted data is is possible workflow data
+					try {
+						// Check first if it is valid JSON
+						workflowData = JSON.parse(plainTextData);
+
+						if (!this.editAllowedCheck()) {
+							return;
+						}
+					} catch (e) {
+						// Is no valid JSON so ignore
+						return;
+					}
+				}
+
+				return this.importWorkflowData(workflowData!, false, 'paste');
+			}
+		},
+
+		// Returns the workflow data from a given URL. If no data gets found or
+		// data is invalid it returns undefined and displays an error message by itself.
+		async getWorkflowDataFromUrl(url: string): Promise<IWorkflowDataUpdate | undefined> {
+			let workflowData: IWorkflowDataUpdate;
+
+			this.startLoading();
+			try {
+				workflowData = await this.restApi().getWorkflowFromUrl(url);
+			} catch (error) {
+				this.stopLoading();
+				this.$showError(
+					error,
+					this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
+				);
+				return;
+			}
+			this.stopLoading();
+
+			return workflowData;
+		},
+
+		// Imports the given workflow data into the current workflow
+		async importWorkflowData(
+			workflowData: IWorkflowToShare,
+			// eslint-disable-next-line @typescript-eslint/default-param-last
+			importTags = true,
+			source: string,
+		): Promise<void> {
+			// eslint-disable-line @typescript-eslint/default-param-last
+			// If it is JSON check if it looks on the first look like data we can use
+			if (!workflowData.hasOwnProperty('nodes') || !workflowData.hasOwnProperty('connections')) {
+				return;
+			}
+
+			try {
+				const nodeIdMap: { [prev: string]: string } = {};
+				if (workflowData.nodes) {
+					// set all new ids when pasting/importing workflows
+					workflowData.nodes.forEach((node: INode) => {
+						if (node.id) {
+							const newId = uuid();
+							nodeIdMap[newId] = node.id;
+							node.id = newId;
+						} else {
+							node.id = uuid();
+						}
+					});
+				}
+
+				const currInstanceId = this.rootStore.instanceId;
+
+				const nodeGraph = JSON.stringify(
+					TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes(), {
+						nodeIdMap,
+						sourceInstanceId:
+							workflowData.meta && workflowData.meta.instanceId !== currInstanceId
+								? workflowData.meta.instanceId
+								: '',
+					}).nodeGraph,
+				);
+				if (source === 'paste') {
+					this.$telemetry.track('User pasted nodes', {
+						workflow_id: this.workflowsStore.workflowId,
+						node_graph_string: nodeGraph,
+					});
+				} else {
+					this.$telemetry.track('User imported workflow', {
+						source,
+						workflow_id: this.workflowsStore.workflowId,
+						node_graph_string: nodeGraph,
+					});
+				}
+
+				// By default we automatically deselect all the currently
+				// selected nodes and select the new ones
+				this.deselectAllNodes();
+
+				// Fix the node position as it could be totally offscreen
+				// and the pasted nodes would so not be directly visible to
+				// the user
+				this.updateNodePositions(
+					workflowData,
+					NodeViewUtils.getNewNodePosition(this.nodes, this.lastClickPosition),
+				);
+
+				const data = await this.addNodesToWorkflow(workflowData);
+
+				setTimeout(() => {
+					data.nodes!.forEach((node: INodeUi) => {
+						this.nodeSelectedByName(node.name);
+					});
+				});
+
+				if (workflowData.pinData) {
+					this.workflowsStore.setWorkflowPinData(workflowData.pinData);
+				}
+
+				const tagsEnabled = this.settingsStore.areTagsEnabled;
+				if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
+					const allTags = await this.tagsStore.fetchAll();
+					const tagNames = new Set(allTags.map((tag) => tag.name));
+
+					const workflowTags = workflowData.tags as ITag[];
+					const notFound = workflowTags.filter((tag) => !tagNames.has(tag.name));
+
+					const creatingTagPromises: Array<Promise<ITag>> = [];
+					for (const tag of notFound) {
+						const creationPromise = this.tagsStore.create(tag.name).then((tag: ITag) => {
+							allTags.push(tag);
+							return tag;
+						});
+
+						creatingTagPromises.push(creationPromise);
+					}
+
+					await Promise.all(creatingTagPromises);
+
+					const tagIds = workflowTags.reduce((accu: string[], imported: ITag) => {
+						const tag = allTags.find((tag) => tag.name === imported.name);
+						if (tag) {
+							accu.push(tag.id);
+						}
+
+						return accu;
+					}, []);
+
+					this.workflowsStore.addWorkflowTagIds(tagIds);
+				}
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('nodeView.showError.importWorkflowData.title'),
+				);
+			}
+		},
+		onDragOver(event: DragEvent) {
+			event.preventDefault();
+		},
+
+		onDrop(event: DragEvent) {
+			if (!event.dataTransfer) {
+				return;
+			}
+
+			const nodeTypeNames = event.dataTransfer.getData('nodeTypeName').split(',');
+
+			if (nodeTypeNames) {
+				const mousePosition = this.getMousePositionWithinNodeView(event);
+
+				const nodesToAdd = nodeTypeNames.map((nodeTypeName: string, index: number) => {
+					return {
+						nodeTypeName,
+						position: [
+							// If adding more than one node, offset the X position
+							mousePosition[0] -
+								NodeViewUtils.NODE_SIZE / 2 +
+								NodeViewUtils.NODE_SIZE * (index * 2),
+							mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
+						] as XYPosition,
+						dragAndDrop: true,
+					};
+				});
+
+				this.onAddNode(nodesToAdd, true);
+				this.createNodeActive = false;
+			}
+		},
+
+		nodeDeselectedByName(nodeName: string) {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (node) {
+				this.nodeDeselected(node);
+			}
+		},
+
+		nodeSelectedByName(nodeName: string, setActive = false, deselectAllOthers?: boolean) {
+			if (deselectAllOthers === true) {
+				this.deselectAllNodes();
+			}
+
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (node) {
+				this.nodeSelected(node);
+				this.uiStore.lastSelectedNode = node.name;
+				this.uiStore.lastSelectedNodeOutputIndex = null;
+				this.lastSelectedConnection = null;
+				this.newNodeInsertPosition = null;
+
+				if (setActive) {
+					this.ndvStore.activeNodeName = node.name;
+				}
+			}
+		},
+		showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
+			const maxNodes = nodeTypeData.maxNodes;
+			this.$showMessage({
+				title: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
+				message: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.message', {
+					adjustToNumber: maxNodes,
+					interpolate: { nodeTypeDataDisplayName: nodeTypeData.displayName },
+				}),
+				type: 'error',
+				duration: 0,
+			});
+		},
+
+		async getNewNodeWithDefaultCredential(nodeTypeData: INodeTypeDescription) {
+			const newNodeData: INodeUi = {
+				id: uuid(),
+				name: nodeTypeData.defaults.name as string,
+				type: nodeTypeData.name,
+				typeVersion: Array.isArray(nodeTypeData.version)
+					? nodeTypeData.version.slice(-1)[0]
+					: nodeTypeData.version,
+				position: [0, 0],
+				parameters: {},
+			};
+
+			const credentialPerType =
+				nodeTypeData.credentials &&
+				nodeTypeData.credentials
+					.map((type) => this.credentialsStore.getCredentialsByType(type.name))
+					.flat();
+
+			if (credentialPerType && credentialPerType.length === 1) {
+				const defaultCredential = credentialPerType[0];
+
+				const selectedCredentials = this.credentialsStore.getCredentialById(defaultCredential.id);
+				const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
+				const credentials = {
+					[defaultCredential.type]: selected,
+				};
+
+				await this.loadNodesProperties(
+					[newNodeData].map((node) => ({ name: node.type, version: node.typeVersion })),
+				);
+				const nodeType = this.nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
+				const nodeParameters = NodeHelpers.getNodeParameters(
+					nodeType?.properties || [],
+					{},
+					true,
+					false,
+					newNodeData,
+				);
+
+				if (nodeTypeData.credentials) {
+					const authentication = nodeTypeData.credentials.find(
+						(type) => type.name === defaultCredential.type,
+					);
+					if (authentication?.displayOptions?.hide) {
+						return newNodeData;
+					}
+
+					const authDisplayOptions = authentication?.displayOptions?.show;
+					if (!authDisplayOptions) {
+						newNodeData.credentials = credentials;
+						return newNodeData;
+					}
+
+					if (
+						Object.keys(authDisplayOptions).length === 1 &&
+						authDisplayOptions['authentication']
+					) {
+						// ignore complex case when there's multiple dependencies
+						newNodeData.credentials = credentials;
+
+						let parameters: { [key: string]: string } = {};
+						for (const displayOption of Object.keys(authDisplayOptions)) {
+							if (nodeParameters && !nodeParameters[displayOption]) {
+								parameters = {};
+								newNodeData.credentials = undefined;
+								break;
+							}
+							const optionValue = authDisplayOptions[displayOption]?.[0];
+							if (optionValue && typeof optionValue === 'string') {
+								parameters[displayOption] = optionValue;
+							}
+							newNodeData.parameters = {
+								...newNodeData.parameters,
+								...parameters,
+							};
+						}
+					}
+				}
+			}
+			return newNodeData;
+		},
+
+		async injectNode(
+			nodeTypeName: string,
+			options: AddNodeOptions = {},
+			showDetail = true,
+			trackHistory = false,
+		) {
+			const nodeTypeData: INodeTypeDescription | null =
+				this.nodeTypesStore.getNodeType(nodeTypeName);
+
+			if (nodeTypeData === null) {
+				this.$showMessage({
+					title: this.$locale.baseText('nodeView.showMessage.addNodeButton.title'),
+					message: this.$locale.baseText('nodeView.showMessage.addNodeButton.message', {
+						interpolate: { nodeTypeName },
+					}),
+					type: 'error',
+				});
+				return;
+			}
+
+			if (
+				nodeTypeData.maxNodes !== undefined &&
+				this.getNodeTypeCount(nodeTypeName) >= nodeTypeData.maxNodes
+			) {
+				this.showMaxNodeTypeError(nodeTypeData);
+				return;
+			}
+
+			const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData);
+
+			// when pulling new connection from node or injecting into a connection
+			const lastSelectedNode = this.lastSelectedNode;
+
+			if (options.position) {
+				newNodeData.position = NodeViewUtils.getNewNodePosition(
+					this.canvasStore.getNodesWithPlaceholderNode(),
+					options.position,
+				);
+			} else if (lastSelectedNode) {
+				const lastSelectedConnection = this.lastSelectedConnection;
+				if (lastSelectedConnection) {
+					// set when injecting into a connection
+					const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
+					if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
+						this.pushDownstreamNodes(
+							lastSelectedNode.name,
+							NodeViewUtils.PUSH_NODES_OFFSET,
+							trackHistory,
+						);
+					}
+				}
+
+				// set when pulling connections
+				if (this.newNodeInsertPosition) {
+					newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, [
+						this.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
+						this.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
+					]);
+					this.newNodeInsertPosition = null;
+				} else {
+					let yOffset = 0;
+
+					if (lastSelectedConnection) {
+						const sourceNodeType = this.nodeTypesStore.getNodeType(
+							lastSelectedNode.type,
+							lastSelectedNode.typeVersion,
+						);
+						const offsets = [
+							[-100, 100],
+							[-140, 0, 140],
+							[-240, -100, 100, 240],
+						];
+						if (sourceNodeType && sourceNodeType.outputs.length > 1) {
+							const offset = offsets[sourceNodeType.outputs.length - 2];
+							const sourceOutputIndex = lastSelectedConnection.__meta
+								? lastSelectedConnection.__meta.sourceOutputIndex
+								: 0;
+							yOffset = offset[sourceOutputIndex];
+						}
+					}
+
+					// If a node is active then add the new node directly after the current one
+					newNodeData.position = NodeViewUtils.getNewNodePosition(
+						this.nodes,
+						[
+							lastSelectedNode.position[0] + NodeViewUtils.PUSH_NODES_OFFSET,
+							lastSelectedNode.position[1] + yOffset,
+						],
+						[100, 0],
+					);
+				}
+			} else {
+				// If added node is a trigger and it's the first one added to the canvas
+				// we place it at canvasAddButtonPosition to replace the canvas add button
+				const position =
+					this.nodeTypesStore.isTriggerNode(nodeTypeName) && !this.containsTrigger
+						? this.canvasStore.canvasAddButtonPosition
+						: // If no node is active find a free spot
+						  (this.lastClickPosition as XYPosition);
+
+				newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, position);
+			}
+
+			// Check if node-name is unique else find one that is
+			newNodeData.name = this.getUniqueNodeName({
+				originalName: newNodeData.name,
+				type: newNodeData.type,
+			});
+
+			if (nodeTypeData.webhooks && nodeTypeData.webhooks.length) {
+				newNodeData.webhookId = uuid();
+			}
+
+			await this.addNodes([newNodeData], undefined, trackHistory);
+
+			this.uiStore.stateIsDirty = true;
+
+			if (nodeTypeName === STICKY_NODE_TYPE) {
+				this.$telemetry.trackNodesPanel('nodeView.addSticky', {
+					workflow_id: this.workflowsStore.workflowId,
+				});
+			} else {
+				this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
+				const trackProperties: ITelemetryTrackProperties = {
+					node_type: nodeTypeName,
+					workflow_id: this.workflowsStore.workflowId,
+					drag_and_drop: options.dragAndDrop,
+				};
+
+				if (lastSelectedNode) {
+					trackProperties.input_node_type = lastSelectedNode.type;
+				}
+
+				this.$telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
+			}
+
+			// Automatically deselect all nodes and select the current one and also active
+			// current node. But only if it's added manually by the user (not by undo/redo mechanism)
+			if (trackHistory) {
+				this.deselectAllNodes();
+				const preventDetailOpen =
+					window.posthog?.getFeatureFlag &&
+					window.posthog?.getFeatureFlag('prevent-ndv-auto-open') === 'prevent';
+				if (showDetail && !preventDetailOpen) {
+					setTimeout(() => {
+						this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE);
+					});
+				}
+			}
+
+			return newNodeData;
+		},
+		getConnection(
+			sourceNodeName: string,
+			sourceNodeOutputIndex: number,
+			targetNodeName: string,
+			targetNodeOuputIndex: number,
+		): IConnection | undefined {
+			const nodeConnections = (
+				this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections
+			).main;
+			if (nodeConnections) {
+				const connections: IConnection[] | null = nodeConnections[sourceNodeOutputIndex];
+
+				if (connections) {
+					return connections.find(
+						(connection: IConnection) =>
+							connection.node === targetNodeName && connection.index === targetNodeOuputIndex,
+					);
+				}
+			}
+
+			return undefined;
+		},
+		connectTwoNodes(
+			sourceNodeName: string,
+			sourceNodeOutputIndex: number,
+			targetNodeName: string,
+			targetNodeOuputIndex: number,
+			trackHistory = false,
+		) {
+			if (
+				this.getConnection(
+					sourceNodeName,
+					sourceNodeOutputIndex,
+					targetNodeName,
+					targetNodeOuputIndex,
+				)
+			) {
+				return;
+			}
+
+			const connectionData = [
+				{
+					node: sourceNodeName,
+					type: 'main',
+					index: sourceNodeOutputIndex,
+				},
+				{
+					node: targetNodeName,
+					type: 'main',
+					index: targetNodeOuputIndex,
+				},
+			] as [IConnection, IConnection];
+
+			this.__addConnection(connectionData, true);
+		},
+		async addNode(
+			nodeTypeName: string,
+			options: AddNodeOptions = {},
+			showDetail = true,
+			trackHistory = false,
+		) {
+			if (!this.editAllowedCheck()) {
+				return;
+			}
+
+			const lastSelectedConnection = this.lastSelectedConnection;
+			const lastSelectedNode = this.lastSelectedNode;
+			const lastSelectedNodeOutputIndex = this.uiStore.lastSelectedNodeOutputIndex;
+
+			this.historyStore.startRecordingUndo();
+
+			const newNodeData = await this.injectNode(nodeTypeName, options, showDetail, trackHistory);
+			if (!newNodeData) {
+				return;
+			}
+
+			const outputIndex = lastSelectedNodeOutputIndex || 0;
+
+			// If a node is last selected then connect between the active and its child ones
+			if (lastSelectedNode) {
+				await Vue.nextTick();
+
+				if (lastSelectedConnection && lastSelectedConnection.__meta) {
+					this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
+
+					const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
+					const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
+					this.connectTwoNodes(
+						newNodeData.name,
+						0,
+						targetNodeName,
+						targetOutputIndex,
+						trackHistory,
+					);
+				}
+
+				// Connect active node to the newly created one
+				this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0, trackHistory);
+			}
+			this.historyStore.stopRecordingUndo();
+		},
+		initNodeView() {
+			this.instance.importDefaults({
+				Connector: NodeViewUtils.CONNECTOR_FLOWCHART_TYPE,
+				Endpoint: ['Dot', { radius: 5 }],
+				DragOptions: { cursor: 'pointer', zIndex: 5000 },
+				PaintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_DEFAULT,
+				HoverPaintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_PRIMARY,
+				ConnectionOverlays: NodeViewUtils.CONNECTOR_ARROW_OVERLAYS,
+				Container: '#node-view',
+			});
+
+			const insertNodeAfterSelected = (info: {
+				sourceId: string;
+				index: number;
+				eventSource: string;
+				connection?: Connection;
+			}) => {
+				// Get the node and set it as active that new nodes
+				// which get created get automatically connected
+				// to it.
+				const sourceNode = this.workflowsStore.getNodeById(info.sourceId);
+				if (!sourceNode) {
+					return;
+				}
+
+				this.uiStore.lastSelectedNode = sourceNode.name;
+				this.uiStore.lastSelectedNodeOutputIndex = info.index;
+				this.newNodeInsertPosition = null;
+
+				if (info.connection) {
+					this.lastSelectedConnection = info.connection;
+				}
+
+				this.onToggleNodeCreator({ source: info.eventSource, createNodeActive: true });
+			};
+
+			this.instance.bind('connectionAborted', (connection) => {
+				try {
+					if (this.dropPrevented) {
+						this.dropPrevented = false;
+						return;
+					}
+
+					if (this.pullConnActiveNodeName) {
+						const sourceNode = this.workflowsStore.getNodeById(connection.sourceId);
+						if (sourceNode) {
+							const sourceNodeName = sourceNode.name;
+							const outputIndex = connection.getParameters().index;
+
+							this.connectTwoNodes(
+								sourceNodeName,
+								outputIndex,
+								this.pullConnActiveNodeName,
+								0,
+								true,
+							);
+							this.pullConnActiveNodeName = null;
+						}
+						return;
+					}
+
+					insertNodeAfterSelected({
+						sourceId: connection.sourceId,
+						index: connection.getParameters().index,
+						eventSource: 'node_connection_drop',
+					});
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+				}
+			});
+
+			this.instance.bind('beforeDrop', (info) => {
+				try {
+					const sourceInfo = info.connection.endpoints[0].getParameters();
+					// @ts-ignore
+					const targetInfo = info.dropEndpoint.getParameters();
+
+					const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '';
+					const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '';
+
+					// check for duplicates
+					if (
+						this.getConnection(sourceNodeName, sourceInfo.index, targetNodeName, targetInfo.index)
+					) {
+						this.dropPrevented = true;
+						this.pullConnActiveNodeName = null;
+						return false;
+					}
+
+					return true;
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+					return true;
+				}
+			});
+
+			// only one set of visible actions should be visible at the same time
+			let activeConnection: null | Connection = null;
+
+			this.instance.bind('connection', (info: OnConnectionBindInfo) => {
+				try {
+					const sourceInfo = info.sourceEndpoint.getParameters();
+					const targetInfo = info.targetEndpoint.getParameters();
+
+					const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name;
+					const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name;
+
+					if (sourceNodeName && targetNodeName) {
+						info.connection.__meta = {
+							sourceNodeName,
+							sourceOutputIndex: sourceInfo.index,
+							targetNodeName,
+							targetOutputIndex: targetInfo.index,
+						};
+					}
+
+					NodeViewUtils.resetConnection(info.connection);
+
+					if (!this.isReadOnly) {
+						let exitTimer: NodeJS.Timeout | undefined;
+						let enterTimer: NodeJS.Timeout | undefined;
+						info.connection.bind('mouseover', (connection: Connection) => {
+							try {
+								if (exitTimer !== undefined) {
+									clearTimeout(exitTimer);
+									exitTimer = undefined;
+								}
+
+								if (enterTimer) {
+									return;
+								}
+
+								if (!info.connection || info.connection === activeConnection) {
+									return;
+								}
+
+								NodeViewUtils.hideConnectionActions(activeConnection);
+
+								enterTimer = setTimeout(() => {
+									enterTimer = undefined;
+									if (info.connection) {
+										activeConnection = info.connection;
+										NodeViewUtils.showConnectionActions(info.connection);
+									}
+								}, 150);
+							} catch (e) {
+								console.error(e); // eslint-disable-line no-console
+							}
+						});
+
+						info.connection.bind('mouseout', (connection: Connection) => {
+							try {
+								if (exitTimer) {
+									return;
+								}
+
+								if (enterTimer) {
+									clearTimeout(enterTimer);
+									enterTimer = undefined;
+								}
+
+								if (!info.connection || activeConnection !== info.connection) {
+									return;
+								}
+
+								exitTimer = setTimeout(() => {
+									exitTimer = undefined;
+
+									if (info.connection && activeConnection === info.connection) {
+										NodeViewUtils.hideConnectionActions(activeConnection);
+										activeConnection = null;
+									}
+								}, 500);
+							} catch (e) {
+								console.error(e); // eslint-disable-line no-console
+							}
+						});
+
+						NodeViewUtils.addConnectionActionsOverlay(
+							info.connection,
+							() => {
+								activeConnection = null;
+								this.__deleteJSPlumbConnection(info.connection);
+							},
+							() => {
+								setTimeout(() => {
+									insertNodeAfterSelected({
+										sourceId: info.sourceId,
+										index: sourceInfo.index,
+										connection: info.connection,
+										eventSource: 'node_connection_action',
+									});
+								}, 150);
+							},
+						);
+					}
+
+					NodeViewUtils.moveBackInputLabelPosition(info.targetEndpoint);
+
+					const connectionData: [IConnection, IConnection] = [
+						{
+							node: sourceNodeName,
+							type: sourceInfo.type,
+							index: sourceInfo.index,
+						},
+						{
+							node: targetNodeName,
+							type: targetInfo.type,
+							index: targetInfo.index,
+						},
+					];
+
+					this.workflowsStore.addConnection({
+						connection: connectionData,
+						setStateDirty: true,
+					});
+					if (!this.suspendRecordingDetachedConnections) {
+						this.historyStore.pushCommandToUndo(new AddConnectionCommand(connectionData, this));
+					}
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+				}
+			});
+
+			this.instance.bind('connectionMoved', (info) => {
+				try {
+					// When a connection gets moved from one node to another it for some reason
+					// calls the "connection" event but not the "connectionDetached" one. So we listen
+					// additionally to the "connectionMoved" event and then only delete the existing connection.
+
+					NodeViewUtils.resetInputLabelPosition(info.originalTargetEndpoint);
+
+					// @ts-ignore
+					const sourceInfo = info.originalSourceEndpoint.getParameters();
+					// @ts-ignore
+					const targetInfo = info.originalTargetEndpoint.getParameters();
+
+					const connectionInfo = [
+						{
+							node: this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '',
+							type: sourceInfo.type,
+							index: sourceInfo.index,
+						},
+						{
+							node: this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '',
+							type: targetInfo.type,
+							index: targetInfo.index,
+						},
+					] as [IConnection, IConnection];
+
+					this.__removeConnection(connectionInfo, false);
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+				}
+			});
+
+			this.instance.bind('connectionDetached', async (info) => {
+				try {
+					const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
+					NodeViewUtils.resetInputLabelPosition(info.targetEndpoint);
+					info.connection.removeOverlays();
+					this.__removeConnectionByConnectionInfo(info, false, false);
+
+					if (this.pullConnActiveNodeName) {
+						// establish new connection when dragging connection from one node to another
+						this.historyStore.startRecordingUndo();
+						const sourceNode = this.workflowsStore.getNodeById(info.connection.sourceId);
+						const sourceNodeName = sourceNode.name;
+						const outputIndex = info.connection.getParameters().index;
+
+						if (connectionInfo) {
+							this.historyStore.pushCommandToUndo(
+								new RemoveConnectionCommand(connectionInfo, this),
+							);
+						}
+						this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0, true);
+						this.pullConnActiveNodeName = null;
+						await this.$nextTick();
+						this.historyStore.stopRecordingUndo();
+					} else if (
+						!this.historyStore.bulkInProgress &&
+						!this.suspendRecordingDetachedConnections &&
+						connectionInfo
+					) {
+						// Ff connection being detached by user, save this in history
+						// but skip if it's detached as a side effect of bulk undo/redo or node rename process
+						const removeCommand = new RemoveConnectionCommand(connectionInfo, this);
+						this.historyStore.pushCommandToUndo(removeCommand);
+					}
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+				}
+			});
+
+			// @ts-ignore
+			this.instance.bind('connectionDrag', (connection: Connection) => {
+				try {
+					this.pullConnActiveNodeName = null;
+					this.pullConnActive = true;
+					this.newNodeInsertPosition = null;
+					NodeViewUtils.resetConnection(connection);
+
+					const nodes = [...document.querySelectorAll('.node-default')];
+
+					const onMouseMove = (e: MouseEvent | TouchEvent) => {
+						if (!connection) {
+							return;
+						}
+
+						const element = document.querySelector('.jtk-endpoint.dropHover');
+						if (element) {
+							// @ts-ignore
+							NodeViewUtils.showDropConnectionState(connection, element._jsPlumb);
+							return;
+						}
+
+						const inputMargin = 24;
+						const intersecting = nodes.find((element: Element) => {
+							const { top, left, right, bottom } = element.getBoundingClientRect();
+							const [x, y] = NodeViewUtils.getMousePosition(e);
+							if (top <= y && bottom >= y && left - inputMargin <= x && right >= x) {
+								const nodeName = (element as HTMLElement).dataset['name'] as string;
+								const node = this.workflowsStore.getNodeByName(nodeName) as INodeUi | null;
+								if (node) {
+									const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+									if (nodeType && nodeType.inputs && nodeType.inputs.length === 1) {
+										this.pullConnActiveNodeName = node.name;
+										const endpointUUID = this.getInputEndpointUUID(nodeName, 0);
+										if (endpointUUID) {
+											const endpoint = this.instance.getEndpoint(endpointUUID);
+
+											NodeViewUtils.showDropConnectionState(connection, endpoint);
+
+											return true;
+										}
+									}
+								}
+							}
+
+							return false;
+						});
+
+						if (!intersecting) {
+							NodeViewUtils.showPullConnectionState(connection);
+							this.pullConnActiveNodeName = null;
+						}
+					};
+
+					const onMouseUp = (e: MouseEvent | TouchEvent) => {
+						this.pullConnActive = false;
+						this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
+						NodeViewUtils.resetConnectionAfterPull(connection);
+						window.removeEventListener('mousemove', onMouseMove);
+						window.removeEventListener('mouseup', onMouseUp);
+					};
+
+					window.addEventListener('mousemove', onMouseMove);
+					window.addEventListener('touchmove', onMouseMove);
+					window.addEventListener('mouseup', onMouseUp);
+					window.addEventListener('touchend', onMouseMove);
+				} catch (e) {
+					console.error(e); // eslint-disable-line no-console
+				}
+			});
+
+			// @ts-ignore
+			this.instance.bind('plusEndpointClick', (endpoint: Endpoint) => {
+				if (endpoint && endpoint.__meta) {
+					insertNodeAfterSelected({
+						sourceId: endpoint.__meta.nodeId,
+						index: endpoint.__meta.index,
+						eventSource: 'plus_endpoint',
+					});
+				}
+			});
+		},
+		async newWorkflow(): Promise<void> {
+			this.startLoading();
+			await this.resetWorkspace();
+			this.workflowData = await this.workflowsStore.getNewWorkflowData();
+			this.workflowsStore.currentWorkflowExecutions = [];
+			this.workflowsStore.activeWorkflowExecution = null;
+
+			this.uiStore.stateIsDirty = false;
+			this.canvasStore.setZoomLevel(1, 0);
+			this.canvasStore.zoomToFit();
+		},
+		tryToAddWelcomeSticky: once(async function (this: any) {
+			const newWorkflow = this.workflowData;
+			if (window.posthog?.getFeatureFlag?.('welcome-note') === 'test') {
+				// For novice users (onboardingFlowEnabled == true)
+				// Inject welcome sticky note and zoom to fit
+
+				if (newWorkflow?.onboardingFlowEnabled && !this.isReadOnly) {
+					const collisionPadding = NodeViewUtils.GRID_SIZE + NodeViewUtils.NODE_SIZE;
+					// Position the welcome sticky left to the added trigger node
+					let position: XYPosition = [...(this.triggerNodes[0].position as XYPosition)];
+
+					position[0] -=
+						NodeViewUtils.WELCOME_STICKY_NODE.parameters.width + NodeViewUtils.GRID_SIZE * 4;
+					position = NodeViewUtils.getNewNodePosition(this.nodes, position, [
+						collisionPadding,
+						collisionPadding,
+					]);
+
+					await this.addNodes([
+						{
+							id: uuid(),
+							...NodeViewUtils.WELCOME_STICKY_NODE,
+							parameters: {
+								// Use parameters from the template but add translated content
+								...NodeViewUtils.WELCOME_STICKY_NODE.parameters,
+								content: this.$locale.baseText('onboardingWorkflow.stickyContent'),
+							},
+							position,
+						},
+					]);
+					this.$telemetry.track('welcome note inserted');
+				}
+			}
+			this.uiStore.nodeViewInitialized = true;
+			this.historyStore.reset();
+			this.workflowsStore.activeWorkflowExecution = null;
+			this.stopLoading();
+		}),
+		async initView(): Promise<void> {
+			if (this.$route.params.action === 'workflowSave') {
+				// In case the workflow got saved we do not have to run init
+				// as only the route changed but all the needed data is already loaded
+				this.uiStore.stateIsDirty = false;
+				return Promise.resolve();
+			}
+			if (this.blankRedirect) {
+				this.blankRedirect = false;
+			} else if (this.$route.name === VIEWS.TEMPLATE_IMPORT) {
+				const templateId = this.$route.params.id;
+				await this.openWorkflowTemplate(templateId);
+			} else if (this.isExecutionView) {
+				// Load an execution
+				const executionId = this.$route.params.id;
+				await this.openExecution(executionId);
+			} else {
 				const result = this.uiStore.stateIsDirty;
 				if (result) {
 					const confirmModal = await this.confirmModal(
@@ -361,1360 +2466,202 @@ export default mixins(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
 						true,
 					);
-
 					if (confirmModal === MODAL_CONFIRMED) {
-						const saved = await this.saveCurrentWorkflow({}, false);
+						const saved = await this.saveCurrentWorkflow();
 						if (saved) await this.settingsStore.fetchPromptsData();
-						this.uiStore.stateIsDirty = false;
-
-						if(from.name === VIEWS.NEW_WORKFLOW) {
-							// Replace the current route with the new workflow route
-							// before navigating to the new route when saving new workflow.
-							this.$router.replace({ name: VIEWS.WORKFLOW, params: { name: this.currentWorkflow } }, () => {
-
-							// We can't use next() here since vue-router
-							// would prevent the navigation with an error
-							this.$router.push(to as RawLocation);
-							});
-						} else {
-							next();
-						}
-					} else if (confirmModal === MODAL_CANCEL) {
-						await this.resetWorkspace();
-						this.uiStore.stateIsDirty = false;
-
-						next();
 					} else if (confirmModal === MODAL_CLOSE) {
-						next(false);
+						return Promise.resolve();
 					}
-				} else {
-					next();
 				}
+				// Load a workflow
+				let workflowId = null as string | null;
+				if (this.$route.params.name) {
+					workflowId = this.$route.params.name;
+				}
+				if (workflowId !== null) {
+					let workflow;
+					try {
+						workflow = await this.restApi().getWorkflow(workflowId);
+					} catch (error) {
+						this.$showError(error, this.$locale.baseText('openWorkflow.workflowNotFoundError'));
+
+						this.$router.push({
+							name: VIEWS.NEW_WORKFLOW,
+						});
+					}
+
+					if (workflow) {
+						this.$titleSet(workflow.name, 'IDLE');
+						// Open existing workflow
+						await this.openWorkflow(workflowId);
+					}
+				} else if (this.$route.meta?.nodeView === true) {
+					// Create new workflow
+					await this.newWorkflow();
+				}
+			}
+			this.historyStore.reset();
+			this.uiStore.nodeViewInitialized = true;
+			document.addEventListener('keydown', this.keyDown);
+			document.addEventListener('keyup', this.keyUp);
+			window.addEventListener('beforeunload', (e) => {
+				if (this.isDemo) {
+					return;
+				} else if (this.uiStore.stateIsDirty === true) {
+					const confirmationMessage = this.$locale.baseText(
+						'nodeView.itLooksLikeYouHaveBeenEditingSomething',
+					);
+					(e || window.event).returnValue = confirmationMessage; //Gecko + IE
+					return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
+				} else {
+					this.startLoading(this.$locale.baseText('nodeView.redirecting'));
+					return;
+				}
+			});
+		},
+		getOutputEndpointUUID(nodeName: string, index: number): string | null {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (!node) {
+				return null;
+			}
+
+			return NodeViewUtils.getOutputEndpointUUID(node.id, index);
+		},
+		getInputEndpointUUID(nodeName: string, index: number) {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (!node) {
+				return null;
+			}
+
+			return NodeViewUtils.getInputEndpointUUID(node.id, index);
+		},
+		__addConnection(connection: [IConnection, IConnection], addVisualConnection = false) {
+			if (addVisualConnection) {
+				const outputUuid = this.getOutputEndpointUUID(connection[0].node, connection[0].index);
+				const inputUuid = this.getInputEndpointUUID(connection[1].node, connection[1].index);
+				if (!outputUuid || !inputUuid) {
+					return;
+				}
+
+				const uuid: [string, string] = [outputUuid, inputUuid];
+
+				// Create connections in DOM
+				// @ts-ignore
+				this.instance.connect({
+					uuids: uuid,
+					detachable: !this.isReadOnly,
+				});
 			} else {
-				next();
+				const connectionProperties = { connection, setStateDirty: false };
+				// When nodes get connected it gets saved automatically to the storage
+				// so if we do not connect we have to save the connection manually
+				this.workflowsStore.addConnection(connectionProperties);
+			}
+
+			setTimeout(() => {
+				this.addPinDataConnections(this.workflowsStore.pinData);
+			});
+		},
+		__removeConnection(connection: [IConnection, IConnection], removeVisualConnection = false) {
+			if (removeVisualConnection) {
+				const sourceNode = this.workflowsStore.getNodeByName(connection[0].node);
+				const targetNode = this.workflowsStore.getNodeByName(connection[1].node);
+
+				if (!sourceNode || !targetNode) {
+					return;
+				}
+
+				// @ts-ignore
+				const connections = this.instance.getConnections({
+					source: sourceNode.id,
+					target: targetNode.id,
+				});
+
+				// @ts-ignore
+				connections.forEach((connectionInstance) => {
+					if (connectionInstance.__meta) {
+						// Only delete connections from specific indexes (if it can be determined by meta)
+						if (
+							connectionInstance.__meta.sourceOutputIndex === connection[0].index &&
+							connectionInstance.__meta.targetOutputIndex === connection[1].index
+						) {
+							this.__deleteJSPlumbConnection(connectionInstance);
+						}
+					} else {
+						this.__deleteJSPlumbConnection(connectionInstance);
+					}
+				});
+			}
+
+			this.workflowsStore.removeConnection({ connection });
+		},
+		__deleteJSPlumbConnection(connection: Connection, trackHistory = false) {
+			// Make sure to remove the overlay else after the second move
+			// it visibly stays behind free floating without a connection.
+			connection.removeOverlays();
+
+			const sourceEndpoint = connection.endpoints && connection.endpoints[0];
+			this.pullConnActiveNodeName = null; // prevent new connections when connectionDetached is triggered
+			this.instance.deleteConnection(connection); // on delete, triggers connectionDetached event which applies mutation to store
+			if (sourceEndpoint) {
+				const endpoints = this.instance.getEndpoints(sourceEndpoint.elementId);
+				endpoints.forEach((endpoint: Endpoint) => endpoint.repaint()); // repaint both circle and plus endpoint
+			}
+			if (trackHistory && connection.__meta) {
+				const connectionData: [IConnection, IConnection] = [
+					{
+						index: connection.__meta?.sourceOutputIndex,
+						node: connection.__meta.sourceNodeName,
+						type: 'main',
+					},
+					{
+						index: connection.__meta?.targetOutputIndex,
+						node: connection.__meta.targetNodeName,
+						type: 'main',
+					},
+				];
+				const removeCommand = new RemoveConnectionCommand(connectionData, this);
+				this.historyStore.pushCommandToUndo(removeCommand);
 			}
 		},
-		computed: {
-			...mapStores(
-				useCanvasStore,
-				useTagsStore,
-				useCredentialsStore,
-				useNodeCreatorStore,
-				useNodeTypesStore,
-				useNDVStore,
-				useRootStore,
-				useSettingsStore,
-				useTemplatesStore,
-				useUIStore,
-				useWorkflowsStore,
-				useUsersStore,
-				useNodeCreatorStore,
-				useWorkflowsEEStore,
-				useHistoryStore,
-			),
-			nativelyNumberSuffixedDefaults(): string[] {
-				return this.rootStore.nativelyNumberSuffixedDefaults;
-			},
-			currentUser(): IUser | null {
-				return this.usersStore.currentUser;
-			},
-			defaultLocale(): string {
-				return this.rootStore.defaultLocale;
-			},
-			isEnglishLocale(): boolean {
-				return this.defaultLocale === 'en';
-			},
-			activeNode(): INodeUi | null {
-				return this.ndvStore.activeNode;
-			},
-			executionWaitingForWebhook(): boolean {
-				return this.workflowsStore.executionWaitingForWebhook;
-			},
-			isDemo(): boolean {
-				return this.$route.name === VIEWS.DEMO;
-			},
-			isExecutionView(): boolean {
-				return this.$route.name === VIEWS.EXECUTION;
-			},
-			showCanvasAddButton(): boolean {
-				return this.loadingService === null && !this.containsTrigger && !this.isDemo && !this.isExecutionView;
-			},
-			lastSelectedNode(): INodeUi | null {
-				return this.uiStore.getLastSelectedNode;
-			},
-			nodes(): INodeUi[] {
-				return this.workflowsStore.allNodes;
-			},
-			runButtonText(): string {
-				if (!this.workflowRunning) {
-					return this.$locale.baseText('nodeView.runButtonText.executeWorkflow');
-				}
+		__removeConnectionByConnectionInfo(
+			info: OnConnectionBindInfo,
+			removeVisualConnection = false,
+			trackHistory = false,
+		) {
+			const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
 
-				if (this.executionWaitingForWebhook) {
-					return this.$locale.baseText('nodeView.runButtonText.waitingForTriggerEvent');
+			if (connectionInfo) {
+				if (removeVisualConnection) {
+					this.__deleteJSPlumbConnection(info.connection, trackHistory);
+				} else if (trackHistory) {
+					this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo, this));
 				}
-
-				return this.$locale.baseText('nodeView.runButtonText.executingWorkflow');
-			},
-			workflowStyle(): object {
-				const offsetPosition = this.uiStore.nodeViewOffsetPosition;
-				return {
-					left: offsetPosition[0] + 'px',
-					top: offsetPosition[1] + 'px',
-				};
-			},
-			canvasAddButtonStyle(): object {
-				return {
-					'pointer-events': this.createNodeActive ? 'none' : 'all',
-				};
-			},
-			backgroundStyle(): object {
-				return NodeViewUtils.getBackgroundStyles(
-					this.nodeViewScale,
-					this.uiStore.nodeViewOffsetPosition,
-					this.isExecutionPreview,
-				);
-			},
-			workflowClasses() {
-				const returnClasses = [];
-				if (this.ctrlKeyPressed) {
-					if (this.uiStore.nodeViewMoveInProgress === true) {
-						returnClasses.push('move-in-process');
-					} else {
-						returnClasses.push('move-active');
-					}
-				}
-				if (this.selectActive || this.ctrlKeyPressed) {
-					// Makes sure that nothing gets selected while select or move is active
-					returnClasses.push('do-not-select');
-				}
-				return returnClasses;
-			},
-			workflowExecution(): IExecutionResponse | null {
-				return this.workflowsStore.getWorkflowExecution;
-			},
-			workflowRunning(): boolean {
-				return this.uiStore.isActionActive('workflowRunning');
-			},
-			currentWorkflow (): string {
-				return this.$route.params.name || this.workflowsStore.workflowId;
-			},
-			workflowName (): string {
-				return this.workflowsStore.workflowName;
-			},
-			allTriggersDisabled(): boolean {
-				const disabledTriggerNodes = this.triggerNodes.filter(node => node.disabled);
-				return disabledTriggerNodes.length === this.triggerNodes.length;
-			},
-			triggerNodes(): INodeUi[] {
-				return this.nodes.filter(node =>
-					node.type === START_NODE_TYPE ||
-					this.nodeTypesStore.isTriggerNode(node.type),
-				);
-			},
-			containsTrigger(): boolean {
-				return this.triggerNodes.length > 0;
-			},
-			isExecutionDisabled(): boolean {
-				return !this.containsTrigger || this.allTriggersDisabled;
-			},
-			getNodeViewOffsetPosition(): XYPosition {
-				return this.uiStore.nodeViewOffsetPosition;
-			},
-			nodeViewScale(): number {
-				return this.canvasStore.nodeViewScale;
-			},
-			instance(): jsPlumbInstance {
-				return this.canvasStore.jsPlumbInstance;
-			},
+				this.workflowsStore.removeConnection({ connection: connectionInfo });
+			}
 		},
-		data() {
-			return {
-				GRID_SIZE: NodeViewUtils.GRID_SIZE,
-				STICKY_NODE_TYPE,
-				createNodeActive: false,
-				lastSelectedConnection: null as null | Connection,
-				lastClickPosition: [450, 450] as XYPosition,
-				ctrlKeyPressed: false,
-				stopExecutionInProgress: false,
-				blankRedirect: false,
-				credentialsUpdated: false,
-				newNodeInsertPosition: null as XYPosition | null,
-				pullConnActiveNodeName: null as string | null,
-				pullConnActive: false,
-				dropPrevented: false,
-				renamingActive: false,
-				showStickyButton: false,
-				isExecutionPreview: false,
-				showTriggerMissingTooltip: false,
-				workflowData: null as INewWorkflowData | null,
-				isProductionExecutionPreview: false,
-				// jsplumb automatically deletes all loose connections which is in turn recorded
-				// in undo history as a user action.
-				// This should prevent automatically removed connections from populating undo stack
-				suspendRecordingDetachedConnections: false,
-			};
-		},
-		beforeDestroy() {
-			this.resetWorkspace();
-			// Make sure the event listeners get removed again else we
-			// could add up with them registred multiple times
-			document.removeEventListener('keydown', this.keyDown);
-			document.removeEventListener('keyup', this.keyUp);
-			this.unregisterCustomAction('showNodeCreator');
-		},
-		methods: {
-			showTriggerMissingToltip(isVisible: boolean) {
-				this.showTriggerMissingTooltip = isVisible;
-			},
-			onRunNode(nodeName: string, source: string) {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				const telemetryPayload = {
-					node_type: node ? node.type : null,
-					workflow_id: this.workflowsStore.workflowId,
-					source: 'canvas',
-				};
-				this.$telemetry.track('User clicked execute node button', telemetryPayload);
-				this.$externalHooks().run('nodeView.onRunNode', telemetryPayload);
-				this.runWorkflow(nodeName, source);
-			},
-			async onRunWorkflow() {
-				this.getWorkflowDataToSave().then((workflowData) => {
-					const telemetryPayload = {
-						workflow_id: this.workflowsStore.workflowId,
-						node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
-					};
-					this.$telemetry.track('User clicked execute workflow button', telemetryPayload);
-					this.$externalHooks().run('nodeView.onRunWorkflow', telemetryPayload);
+		async duplicateNode(nodeName: string) {
+			if (!this.editAllowedCheck()) {
+				return;
+			}
+			const node = this.workflowsStore.getNodeByName(nodeName);
 
-				});
-
-				await this.runWorkflow();
-			},
-			onRunContainerClick() {
-				if (this.containsTrigger && !this.allTriggersDisabled) return;
-
-				const message = this.containsTrigger && this.allTriggersDisabled
-					? this.$locale.baseText('nodeView.addOrEnableTriggerNode')
-					: this.$locale.baseText('nodeView.addATriggerNodeFirst');
-
-				this.registerCustomAction('showNodeCreator', () => this.showTriggerCreator('no_trigger_execution_tooltip'));
-				const notice = this.$showMessage({
-					type: 'info',
-					title: this.$locale.baseText('nodeView.cantExecuteNoTrigger'),
-					message,
-					duration: 3000,
-					onClick: () => setTimeout(() => {
-						// Close the creator panel if user clicked on the link
-						if(this.createNodeActive) notice.close();
-					}, 0),
-				});
-			},
-			clearExecutionData() {
-				this.workflowsStore.workflowExecutionData = null;
-				this.updateNodesExecutionIssues();
-			},
-			translateName(type: string, originalName: string) {
-				return this.$locale.headerText({
-					key: `headers.${this.$locale.shortNodeType(type)}.displayName`,
-					fallback: originalName,
-				});
-			},
-			getUniqueNodeName({
-				originalName,
-				additionalUsedNames = [],
-				type = '',
-			}: {
-				originalName: string,
-				additionalUsedNames?: string[],
-				type?: string,
-			}) {
-				const allNodeNamesOnCanvas = this.workflowsStore.allNodes.map((n: INodeUi) => n.name);
-				originalName = this.isEnglishLocale ? originalName : this.translateName(type, originalName);
+			if (node) {
+				const nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
 				if (
-					!allNodeNamesOnCanvas.includes(originalName) &&
-					!additionalUsedNames.includes(originalName)
+					nodeTypeData &&
+					nodeTypeData.maxNodes !== undefined &&
+					this.getNodeTypeCount(node.type) >= nodeTypeData.maxNodes
 				) {
-					return originalName; // already unique
-				}
-
-				let natives: string[] = this.nativelyNumberSuffixedDefaults;
-				natives = this.isEnglishLocale ? natives : natives.map(name => {
-					const type = name.toLowerCase().replace('_', '');
-					return this.translateName(type, name);
-				});
-
-				const found = natives.find((n) => originalName.startsWith(n));
-
-				let ignore, baseName, nameIndex, uniqueName;
-				let index = 1;
-
-				if (found) {
-					// name natively ends with number
-					nameIndex = originalName.split(found).pop();
-					if (nameIndex) {
-						index = parseInt(nameIndex, 10);
-					}
-					baseName = uniqueName = found;
-				} else {
-					const nameMatch = originalName.match(/(.*\D+)(\d*)/);
-
-					if (nameMatch === null) {
-						// name is only a number
-						index = parseInt(originalName, 10);
-						baseName = '';
-						uniqueName = baseName + index;
-					} else {
-						// name is string or string/number combination
-						[ignore, baseName, nameIndex] = nameMatch;
-						if (nameIndex !== '') {
-							index = parseInt(nameIndex, 10);
-						}
-						uniqueName = baseName;
-					}
-				}
-
-				while (
-					allNodeNamesOnCanvas.includes(uniqueName) ||
-					additionalUsedNames.includes(uniqueName)
-				) {
-					uniqueName = baseName + (index++);
-				}
-
-				return uniqueName;
-			},
-			async onSaveKeyboardShortcut() {
-				const saved = await this.saveCurrentWorkflow();
-				if (saved) await this.settingsStore.fetchPromptsData();
-			},
-			showTriggerCreator(source: string) {
-				if(this.createNodeActive) return;
-				this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
-				this.nodeCreatorStore.setShowScrim(true);
-				this.onToggleNodeCreator({ source, createNodeActive: true });
-				this.$nextTick(() => this.nodeCreatorStore.setShowTabs(false));
-			},
-			async openExecution(executionId: string) {
-				this.startLoading();
-				this.resetWorkspace();
-				let data: IExecutionResponse | undefined;
-				try {
-					data = await this.restApi().getExecution(executionId);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.openExecution.title'),
-					);
-					return;
-				}
-				if (data === undefined) {
-					throw new Error(`Execution with id "${executionId}" could not be found!`);
-				}
-				this.workflowsStore.setWorkflowName({ newName: data.workflowData.name, setStateDirty: false });
-				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				this.workflowsStore.setWorkflowExecutionData(data);
-				if (data.workflowData.pinData) {
-					this.workflowsStore.setWorkflowPinData(data.workflowData.pinData);
-				}
-
-				await this.addNodes(deepCopy(data.workflowData.nodes), deepCopy(data.workflowData.connections));
-				this.$nextTick(() => {
-					this.canvasStore.zoomToFit();
-					this.uiStore.stateIsDirty = false;
-				});
-				this.$externalHooks().run('execution.open', { workflowId: data.workflowData.id, workflowName: data.workflowData.name, executionId });
-				this.$telemetry.track('User opened read-only execution', { workflow_id: data.workflowData.id, execution_mode: data.mode, execution_finished: data.finished });
-
-				if (!data.finished && data.data?.resultData?.error) {
-					// Check if any node contains an error
-					let nodeErrorFound = false;
-					if (data.data.resultData.runData) {
-						const runData = data.data.resultData.runData;
-						errorCheck:
-						for (const nodeName of Object.keys(runData)) {
-							for (const taskData of runData[nodeName]) {
-								if (taskData.error) {
-									nodeErrorFound = true;
-									break errorCheck;
-								}
-							}
-						}
-					}
-
-					if (!nodeErrorFound && data.data.resultData.error.stack) {
-						// Display some more information for now in console to make debugging easier
-						// TODO: Improve this in the future by displaying in UI
-						console.error(`Execution ${executionId} error:`); // eslint-disable-line no-console
-						console.error(data.data.resultData.error.stack); // eslint-disable-line no-console
-					}
-				}
-				if ((data as IExecutionsSummary).waitTill) {
-					this.$showMessage({
-						title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
-						message: `<a data-action="reload">${this.$locale.baseText('nodeView.refresh')}</a> ${this.$locale.baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText('nodeView.moreInfo')}</a>`,
-						type: 'warning',
-						duration: 0,
-					});
-				}
-				this.stopLoading();
-			},
-			async importWorkflowExact(data: { workflow: IWorkflowDataUpdate }) {
-				if (!data.workflow.nodes || !data.workflow.connections) {
-					throw new Error('Invalid workflow object');
-				}
-				this.resetWorkspace();
-				data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes);
-
-				await this.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
-
-				if (data.workflow.pinData) {
-					this.workflowsStore.setWorkflowPinData(data.workflow.pinData);
-				}
-
-				this.$nextTick(() => {
-					this.canvasStore.zoomToFit();
-				});
-			},
-			async openWorkflowTemplate(templateId: string) {
-				this.startLoading();
-				this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
-				this.resetWorkspace();
-
-				this.workflowsStore.currentWorkflowExecutions = [];
-				this.workflowsStore.activeWorkflowExecution = null;
-
-				let data: IWorkflowTemplate | undefined;
-				try {
-					this.$externalHooks().run('template.requested', { templateId });
-					data = await this.templatesStore.getWorkflowTemplate(templateId);
-
-					if (!data) {
-						throw new Error(
-							this.$locale.baseText(
-								'nodeView.workflowTemplateWithIdCouldNotBeFound',
-								{ interpolate: { templateId } },
-							),
-						);
-					}
-				} catch (error) {
-					this.$showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
-					this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
-					return;
-				}
-
-				data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes) as INodeUi[];
-
-				this.blankRedirect = true;
-				this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
-
-				await this.addNodes(data.workflow.nodes, data.workflow.connections);
-				this.workflowData = await this.workflowsStore.getNewWorkflowData(data.name) || {};
-				this.$nextTick(() => {
-					this.canvasStore.zoomToFit();
-					this.uiStore.stateIsDirty = true;
-				});
-
-				this.$externalHooks().run('template.open', { templateId, templateName: data.name, workflow: data.workflow });
-				this.stopLoading();
-			},
-			async openWorkflow(workflowId: string) {
-				this.startLoading();
-				this.resetWorkspace();
-				let data: IWorkflowDb | undefined;
-				try {
-					data = await this.restApi().getWorkflow(workflowId);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.openWorkflow.title'),
-					);
-					return;
-				}
-
-				if (!data) {
-					throw new Error(
-						this.$locale.baseText(
-							'nodeView.workflowWithIdCouldNotBeFound',
-							{ interpolate: { workflowId } },
-						),
-					);
-				}
-
-				this.workflowsStore.addWorkflow(data);
-				this.workflowsStore.setActive(data.active || false);
-				this.workflowsStore.setWorkflowId(workflowId);
-				this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
-				this.workflowsStore.setWorkflowSettings(data.settings || {});
-				this.workflowsStore.setWorkflowPinData(data.pinData || {});
-				this.workflowsStore.setWorkflowVersionId(data.versionId);
-
-				if (data.ownedBy) {
-					this.workflowsEEStore.setWorkflowOwnedBy({
-						workflowId: data.id,
-						ownedBy: data.ownedBy,
-					});
-				}
-
-				if (data.sharedWith) {
-					this.workflowsEEStore.setWorkflowSharedWith({
-						workflowId: data.id,
-						sharedWith: data.sharedWith,
-					});
-				}
-
-				if (data.usedCredentials) {
-					this.workflowsStore.setUsedCredentials(data.usedCredentials);
-				}
-
-				const tags = (data.tags || []) as ITag[];
-				const tagIds = tags.map((tag) => tag.id);
-				this.workflowsStore.setWorkflowTagIds(tagIds || []);
-				this.tagsStore.upsertTags(tags);
-
-				await this.addNodes(data.nodes, data.connections);
-
-				if (!this.credentialsUpdated) {
-					this.uiStore.stateIsDirty = false;
-				}
-				this.canvasStore.zoomToFit();
-				this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
-				this.workflowsStore.activeWorkflowExecution = null;
-				this.stopLoading();
-				return data;
-			},
-			touchTap(e: MouseEvent | TouchEvent) {
-				if (this.isTouchDevice) {
-					this.mouseDown(e);
-				}
-			},
-			mouseDown(e: MouseEvent | TouchEvent) {
-				// Save the location of the mouse click
-				this.lastClickPosition = this.getMousePositionWithinNodeView(e);
-
-				this.mouseDownMouseSelect(e as MouseEvent);
-				this.mouseDownMoveWorkflow(e as MouseEvent);
-
-				// Hide the node-creator
-				this.createNodeActive = false;
-			},
-			mouseUp(e: MouseEvent) {
-				this.mouseUpMouseSelect(e);
-				this.mouseUpMoveWorkflow(e);
-			},
-			keyUp(e: KeyboardEvent) {
-				if (e.key === this.controlKeyCode) {
-					this.ctrlKeyPressed = false;
-				}
-			},
-			async keyDown(e: KeyboardEvent) {
-				// @ts-ignore
-				const path = e.path || (e.composedPath && e.composedPath());
-
-				// Check if the keys got emitted from a message box or from something
-				// else which should ignore the default keybindings
-				for (const element of path) {
-					if (element.className && typeof element.className === 'string' && (
-						element.className.includes('ignore-key-press')
-					)) {
-						return;
-					}
-				}
-
-				// el-dialog or el-message-box element is open
-				if (window.document.body.classList.contains('el-popup-parent--hidden')) {
-					return;
-				}
-
-				if (e.key === 'Escape') {
-					this.createNodeActive = false;
-					if (this.activeNode) {
-						this.$externalHooks().run('dataDisplay.nodeEditingFinished');
-						this.ndvStore.activeNodeName = null;
-					}
-
-					return;
-				}
-
-				// node modal is open
-				if (this.activeNode) {
-					return;
-				}
-
-				if (e.key === 'd') {
-					this.callDebounced('deactivateSelectedNode', { debounceTime: 350 });
-
-				} else if (e.key === 'Delete' || e.key === 'Backspace') {
-					e.stopPropagation();
-					e.preventDefault();
-
-					this.callDebounced('deleteSelectedNodes', { debounceTime: 500 });
-
-				} else if (e.key === 'Tab') {
-					this.onToggleNodeCreator({ source: 'tab', createNodeActive: !this.createNodeActive && !this.isReadOnly });
-				} else if (e.key === this.controlKeyCode) {
-					this.ctrlKeyPressed = true;
-				} else if (e.key === 'F2' && !this.isReadOnly) {
-					const lastSelectedNode = this.lastSelectedNode;
-					if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
-						this.callDebounced('renameNodePrompt', { debounceTime: 1500 }, lastSelectedNode.name);
-					}
-				} else if ((e.key === 'a') && (this.isCtrlKeyPressed(e) === true)) {
-					// Select all nodes
-					e.stopPropagation();
-					e.preventDefault();
-
-					this.callDebounced('selectAllNodes', { debounceTime: 1000 });
-				} else if ((e.key === 'c') && this.isCtrlKeyPressed(e)) {
-					this.callDebounced('copySelectedNodes', { debounceTime: 1000 });
-				} else if ((e.key === 'x') && this.isCtrlKeyPressed(e)) {
-					// Cut nodes
-					e.stopPropagation();
-					e.preventDefault();
-
-					this.callDebounced('cutSelectedNodes', { debounceTime: 1000 });
-				} else if (e.key === 'n' && this.isCtrlKeyPressed(e) && e.altKey) {
-					// Create a new workflow
-					e.stopPropagation();
-					e.preventDefault();
-					if (this.isDemo) {
-						return;
-					}
-
-					if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
-						this.$root.$emit('newWorkflow');
-					} else {
-						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-					}
-
-					this.$showMessage({
-						title: this.$locale.baseText('nodeView.showMessage.keyDown.title'),
-						type: 'success',
-					});
-				} else if ((e.key === 's') && this.isCtrlKeyPressed(e)) {
-					// Save workflow
-					e.stopPropagation();
-					e.preventDefault();
-
-					if (this.isReadOnly) {
-						return;
-					}
-
-					this.callDebounced('onSaveKeyboardShortcut', { debounceTime: 1000 });
-				} else if (e.key === 'Enter') {
-					// Activate the last selected node
-					const lastSelectedNode = this.lastSelectedNode;
-
-					if (lastSelectedNode !== null) {
-						if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
-							return;
-						}
-						this.ndvStore.activeNodeName = lastSelectedNode.name;
-					}
-				} else if (e.key === 'ArrowRight' && e.shiftKey) {
-					// Select all downstream nodes
-					e.stopPropagation();
-					e.preventDefault();
-
-					this.callDebounced('selectDownstreamNodes', { debounceTime: 1000 });
-				} else if (e.key === 'ArrowRight') {
-					// Set child node active
-					const lastSelectedNode = this.lastSelectedNode;
-					if (lastSelectedNode === null) {
-						return;
-					}
-
-					const connections = this.workflowsStore.outgoingConnectionsByNodeName(lastSelectedNode.name);
-
-					if (connections.main === undefined || connections.main.length === 0) {
-						return;
-					}
-
-					this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, connections.main[0][0].node, false, true);
-				} else if (e.key === 'ArrowLeft' && e.shiftKey) {
-					// Select all downstream nodes
-					e.stopPropagation();
-					e.preventDefault();
-
-					this.callDebounced('selectUpstreamNodes', { debounceTime: 1000 });
-				} else if (e.key === 'ArrowLeft') {
-					// Set parent node active
-					const lastSelectedNode = this.lastSelectedNode;
-					if (lastSelectedNode === null) {
-						return;
-					}
-
-					const workflow = this.getCurrentWorkflow();
-
-					if (!workflow.connectionsByDestinationNode.hasOwnProperty(lastSelectedNode.name)) {
-						return;
-					}
-
-					const connections = workflow.connectionsByDestinationNode[lastSelectedNode.name];
-
-					if (connections.main === undefined || connections.main.length === 0) {
-						return;
-					}
-
-					this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, connections.main[0][0].node, false, true);
-				} else if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-					// Set sibling node as active
-
-					// Check first if it has a parent node
-					const lastSelectedNode = this.lastSelectedNode;
-					if (lastSelectedNode === null) {
-						return;
-					}
-
-					const workflow = this.getCurrentWorkflow();
-
-					if (!workflow.connectionsByDestinationNode.hasOwnProperty(lastSelectedNode.name)) {
-						return;
-					}
-
-					const connections = workflow.connectionsByDestinationNode[lastSelectedNode.name];
-
-					if (!Array.isArray(connections.main) || !connections.main.length) {
-						return;
-					}
-
-					const parentNode = connections.main[0][0].node;
-					const connectionsParent = this.workflowsStore.outgoingConnectionsByNodeName(parentNode);
-
-					if (!Array.isArray(connectionsParent.main) || !connectionsParent.main.length) {
-						return;
-					}
-
-					// Get all the sibling nodes and their x positions to know which one to set active
-					let siblingNode: INodeUi | null;
-					let lastCheckedNodePosition = e.key === 'ArrowUp' ? -99999999 : 99999999;
-					let nextSelectNode: string | null = null;
-					for (const ouputConnections of connectionsParent.main) {
-						for (const ouputConnection of ouputConnections) {
-							if (ouputConnection.node === lastSelectedNode.name) {
-								// Ignore current node
-								continue;
-							}
-							siblingNode = this.workflowsStore.getNodeByName(ouputConnection.node);
-
-							if (siblingNode) {
-								if (e.key === 'ArrowUp') {
-									// Get the next node on the left
-									if (siblingNode.position[1] <= lastSelectedNode.position[1] && siblingNode.position[1] > lastCheckedNodePosition) {
-										nextSelectNode = siblingNode.name;
-										lastCheckedNodePosition = siblingNode.position[1];
-									}
-								} else {
-									// Get the next node on the right
-									if (siblingNode.position[1] >= lastSelectedNode.position[1] && siblingNode.position[1] < lastCheckedNodePosition) {
-										nextSelectNode = siblingNode.name;
-										lastCheckedNodePosition = siblingNode.position[1];
-									}
-								}
-							}
-						}
-					}
-
-					if (nextSelectNode !== null) {
-						this.callDebounced('nodeSelectedByName', { debounceTime: 100 }, nextSelectNode, false, true);
-					}
-				}
-			},
-
-			deactivateSelectedNode() {
-				if (!this.editAllowedCheck()) {
-					return;
-				}
-				this.disableNodes(this.uiStore.getSelectedNodes, true);
-			},
-
-			deleteSelectedNodes() {
-				// Copy "selectedNodes" as the nodes get deleted out of selection
-				// when they get deleted and if we would use original it would mess
-				// with the index and would so not delete all nodes
-				const nodesToDelete: string[] = this.uiStore.getSelectedNodes.map((node: INodeUi) => {
-					return node.name;
-				});
-				this.historyStore.startRecordingUndo();
-				nodesToDelete.forEach((nodeName: string) => {
-					this.removeNode(nodeName, true, false);
-				});
-				setTimeout(() => {
-					this.historyStore.stopRecordingUndo();
-				}, 200);
-			},
-
-			selectAllNodes() {
-				this.nodes.forEach((node) => {
-					this.nodeSelectedByName(node.name);
-				});
-			},
-
-			selectUpstreamNodes() {
-				const lastSelectedNode = this.lastSelectedNode;
-				if (lastSelectedNode === null) {
-					return;
-				}
-
-				this.deselectAllNodes();
-
-				// Get all upstream nodes and select them
-				const workflow = this.getCurrentWorkflow();
-				for (const nodeName of workflow.getParentNodes(lastSelectedNode.name)) {
-					this.nodeSelectedByName(nodeName);
-				}
-
-				// At the end select the previously selected node again
-				this.nodeSelectedByName(lastSelectedNode.name);
-			},
-			selectDownstreamNodes() {
-				const lastSelectedNode = this.lastSelectedNode;
-				if (lastSelectedNode === null) {
-					return;
-				}
-
-				this.deselectAllNodes();
-
-				// Get all downstream nodes and select them
-				const workflow = this.getCurrentWorkflow();
-				for (const nodeName of workflow.getChildNodes(lastSelectedNode.name)) {
-					this.nodeSelectedByName(nodeName);
-				}
-
-				// At the end select the previously selected node again
-				this.nodeSelectedByName(lastSelectedNode.name);
-			},
-
-			pushDownstreamNodes(sourceNodeName: string, margin: number, recordHistory = false) {
-				const sourceNode = this.workflowsStore.nodesByName[sourceNodeName];
-				const workflow = this.getCurrentWorkflow();
-				const childNodes = workflow.getChildNodes(sourceNodeName);
-				for (const nodeName of childNodes) {
-					const node = this.workflowsStore.nodesByName[nodeName] as INodeUi;
-					const oldPosition = node.position;
-
-					if (node.position[0] < sourceNode.position[0]) {
-						continue;
-					}
-
-					const updateInformation: INodeUpdatePropertiesInformation = {
-						name: nodeName,
-						properties: {
-							position: [node.position[0] + margin, node.position[1]],
-						},
-					};
-
-					this.workflowsStore.updateNodeProperties(updateInformation);
-					this.onNodeMoved(node);
-
-					if (recordHistory && oldPosition[0] !== node.position[0] || oldPosition[1] !== node.position[1]) {
-						this.historyStore.pushCommandToUndo(new MoveNodeCommand(nodeName, oldPosition, node.position, this), recordHistory);
-					}
-				}
-			},
-
-			cutSelectedNodes() {
-				const deleteCopiedNodes = !this.isReadOnly;
-				this.copySelectedNodes(deleteCopiedNodes);
-				if (deleteCopiedNodes) {
-					this.deleteSelectedNodes();
-				}
-			},
-
-			copySelectedNodes(isCut: boolean) {
-				this.getSelectedNodesToSave().then((data) => {
-					const workflowToCopy: IWorkflowToShare = {
-						meta: {
-							instanceId: this.rootStore.instanceId,
-						},
-						...data,
-					};
-
-					this.removeForeignCredentialsFromWorkflow(workflowToCopy, this.credentialsStore.allCredentials);
-
-					const nodeData = JSON.stringify(workflowToCopy, null, 2);
-
-					this.copyToClipboard(nodeData);
-					if (data.nodes.length > 0) {
-						if (!isCut) {
-							this.$showMessage({
-								title: 'Copied!',
-								message: '',
-								type: 'success',
-							});
-						}
-						this.$telemetry.track('User copied nodes', {
-							node_types: data.nodes.map((node) => node.type),
-							workflow_id: this.workflowsStore.workflowId,
-						});
-					}
-				});
-			},
-			async stopExecution() {
-				const executionId = this.workflowsStore.activeExecutionId;
-				if (executionId === null) {
-					return;
-				}
-
-				try {
-					this.stopExecutionInProgress = true;
-					await this.restApi().stopCurrentExecution(executionId);
-					this.$showMessage({
-						title: this.$locale.baseText('nodeView.showMessage.stopExecutionTry.title'),
-						type: 'success',
-					});
-				} catch (error) {
-					// Execution stop might fail when the execution has already finished. Let's treat this here.
-					const execution = await this.restApi().getExecution(executionId);
-					if (execution?.finished) {
-						const executedData = {
-							data: execution.data,
-							finished: execution.finished,
-							mode: execution.mode,
-							startedAt: execution.startedAt,
-							stoppedAt: execution.stoppedAt,
-						} as IRun;
-						const pushData = {
-							data: executedData,
-							executionId,
-							retryOf: execution.retryOf,
-						} as IPushDataExecutionFinished;
-						this.workflowsStore.finishActiveExecution(pushData);
-						this.$titleSet(execution.workflowData.name, 'IDLE');
-						this.workflowsStore.executingNode = null;
-						this.workflowsStore.setWorkflowExecutionData(executedData as IExecutionResponse);
-						this.uiStore.removeActiveAction('workflowRunning');
-						this.$showMessage({
-							title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.title'),
-							message: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.message'),
-							type: 'success',
-						});
-					} else {
-						this.$showError(
-							error,
-							this.$locale.baseText('nodeView.showError.stopExecution.title'),
-						);
-					}
-				}
-				this.stopExecutionInProgress = false;
-
-				this.getWorkflowDataToSave().then((workflowData) => {
-					const trackProps = {
-						workflow_id: this.workflowsStore.workflowId,
-						node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
-					};
-
-					this.$telemetry.track('User clicked stop workflow execution', trackProps);
-				});
-			},
-
-			async stopWaitingForWebhook() {
-				try {
-					await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.stopWaitingForWebhook.title'),
-					);
-					return;
-				}
-			},
-			/**
-			 * This method gets called when data got pasted into the window
-			 */
-			async receivedCopyPasteData(plainTextData: string): Promise<void> {
-				const currentTab = getNodeViewTab(this.$route);
-				if (currentTab === MAIN_HEADER_TABS.WORKFLOW) {
-					let workflowData: IWorkflowDataUpdate | undefined;
-					if (this.editAllowedCheck() === false) {
-						return;
-					}
-					// Check if it is an URL which could contain workflow data
-					if (plainTextData.match(/^http[s]?:\/\/.*\.json$/i)) {
-						// Pasted data points to a possible workflow JSON file
-
-						if (!this.editAllowedCheck()) {
-							return;
-						}
-
-						const importConfirm = await this.confirmMessage(
-							this.$locale.baseText(
-								'nodeView.confirmMessage.receivedCopyPasteData.message',
-								{ interpolate: { plainTextData } },
-							),
-							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
-							'warning',
-							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'),
-							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
-						);
-
-						if (!importConfirm) {
-							return;
-						}
-
-						workflowData = await this.getWorkflowDataFromUrl(plainTextData);
-						if (workflowData === undefined) {
-							return;
-						}
-					} else {
-						// Pasted data is is possible workflow data
-						try {
-							// Check first if it is valid JSON
-							workflowData = JSON.parse(plainTextData);
-
-							if (!this.editAllowedCheck()) {
-								return;
-							}
-						} catch (e) {
-							// Is no valid JSON so ignore
-							return;
-						}
-					}
-
-					return this.importWorkflowData(workflowData!, false, 'paste');
-				}
-			},
-
-			// Returns the workflow data from a given URL. If no data gets found or
-			// data is invalid it returns undefined and displays an error message by itself.
-			async getWorkflowDataFromUrl(url: string): Promise<IWorkflowDataUpdate | undefined> {
-				let workflowData: IWorkflowDataUpdate;
-
-				this.startLoading();
-				try {
-					workflowData = await this.restApi().getWorkflowFromUrl(url);
-				} catch (error) {
-					this.stopLoading();
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
-					);
-					return;
-				}
-				this.stopLoading();
-
-				return workflowData;
-			},
-
-			// Imports the given workflow data into the current workflow
-			async importWorkflowData(workflowData: IWorkflowToShare, importTags = true, source: string): Promise<void> { // eslint-disable-line @typescript-eslint/default-param-last
-				// If it is JSON check if it looks on the first look like data we can use
-				if (
-					!workflowData.hasOwnProperty('nodes') ||
-					!workflowData.hasOwnProperty('connections')
-				) {
-					return;
-				}
-
-				try {
-					const nodeIdMap: { [prev: string]: string } = {};
-					if (workflowData.nodes) {
-						// set all new ids when pasting/importing workflows
-						workflowData.nodes.forEach((node: INode) => {
-							if (node.id) {
-								const newId = uuid();
-								nodeIdMap[newId] = node.id;
-								node.id = newId;
-							}
-							else {
-								node.id = uuid();
-							}
-						});
-					}
-
-					const currInstanceId = this.rootStore.instanceId;
-
-					const nodeGraph = JSON.stringify(
-						TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase,
-							this.getNodeTypes(),
-							{
-								nodeIdMap,
-								sourceInstanceId: workflowData.meta && workflowData.meta.instanceId !== currInstanceId ? workflowData.meta.instanceId : '',
-							}).nodeGraph,
-					);
-					if (source === 'paste') {
-						this.$telemetry.track('User pasted nodes', {
-							workflow_id: this.workflowsStore.workflowId,
-							node_graph_string: nodeGraph,
-						});
-					} else {
-						this.$telemetry.track('User imported workflow', { source, workflow_id: this.workflowsStore.workflowId, node_graph_string: nodeGraph });
-					}
-
-					// By default we automatically deselect all the currently
-					// selected nodes and select the new ones
-					this.deselectAllNodes();
-
-					// Fix the node position as it could be totally offscreen
-					// and the pasted nodes would so not be directly visible to
-					// the user
-					this.updateNodePositions(workflowData, NodeViewUtils.getNewNodePosition(this.nodes, this.lastClickPosition));
-
-					const data = await this.addNodesToWorkflow(workflowData);
-
-					setTimeout(() => {
-						data.nodes!.forEach((node: INodeUi) => {
-							this.nodeSelectedByName(node.name);
-						});
-					});
-
-					if (workflowData.pinData) {
-						this.workflowsStore.setWorkflowPinData(workflowData.pinData);
-					}
-
-					const tagsEnabled = this.settingsStore.areTagsEnabled;
-					if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
-						const allTags = await this.tagsStore.fetchAll();
-						const tagNames = new Set(allTags.map((tag) => tag.name));
-
-						const workflowTags = workflowData.tags as ITag[];
-						const notFound = workflowTags.filter((tag) => !tagNames.has(tag.name));
-
-						const creatingTagPromises: Array<Promise<ITag>> = [];
-						for (const tag of notFound) {
-							const creationPromise = this.tagsStore.create(tag.name)
-								.then((tag: ITag) => {
-									allTags.push(tag);
-									return tag;
-								});
-
-							creatingTagPromises.push(creationPromise);
-						}
-
-						await Promise.all(creatingTagPromises);
-
-						const tagIds = workflowTags.reduce((accu: string[], imported: ITag) => {
-							const tag = allTags.find(tag => tag.name === imported.name);
-							if (tag) {
-								accu.push(tag.id);
-							}
-
-							return accu;
-						}, []);
-
-						this.workflowsStore.addWorkflowTagIds(tagIds);
-					}
-
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.importWorkflowData.title'),
-					);
-				}
-			},
-			onDragOver(event: DragEvent) {
-				event.preventDefault();
-			},
-
-			onDrop(event: DragEvent) {
-				if (!event.dataTransfer) {
-					return;
-				}
-
-				const nodeTypeNames = event.dataTransfer.getData('nodeTypeName').split(',');
-
-				if (nodeTypeNames) {
-					const mousePosition = this.getMousePositionWithinNodeView(event);
-
-					const nodesToAdd = nodeTypeNames.map((nodeTypeName: string, index: number) => {
-
-						return {
-							nodeTypeName,
-							position: [
-								// If adding more than one node, offset the X position
-								(mousePosition[0] - NodeViewUtils.NODE_SIZE / 2) + (NodeViewUtils.NODE_SIZE * (index * 2)),
-								mousePosition[1] - NodeViewUtils.NODE_SIZE / 2,
-							] as XYPosition,
-							dragAndDrop: true,
-						};
-					});
-
-					this.onAddNode(nodesToAdd, true);
-					this.createNodeActive = false;
-				}
-			},
-
-			nodeDeselectedByName(nodeName: string) {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (node) {
-					this.nodeDeselected(node);
-				}
-			},
-
-			nodeSelectedByName(nodeName: string, setActive = false, deselectAllOthers?: boolean) {
-				if (deselectAllOthers === true) {
-					this.deselectAllNodes();
-				}
-
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (node) {
-					this.nodeSelected(node);
-					this.uiStore.lastSelectedNode = node.name;
-					this.uiStore.lastSelectedNodeOutputIndex = null;
-					this.lastSelectedConnection = null;
-					this.newNodeInsertPosition = null;
-
-					if (setActive) {
-						this.ndvStore.activeNodeName = node.name;
-					}
-				}
-			},
-			showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
-				const maxNodes = nodeTypeData.maxNodes;
-				this.$showMessage({
-					title: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
-					message: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.message',
-						{
-							adjustToNumber: maxNodes,
-							interpolate: { nodeTypeDataDisplayName: nodeTypeData.displayName },
-						},
-					),
-					type: 'error',
-					duration: 0,
-				});
-			},
-
-			async getNewNodeWithDefaultCredential(nodeTypeData: INodeTypeDescription) {
-				const newNodeData: INodeUi = {
-					id: uuid(),
-					name: nodeTypeData.defaults.name as string,
-					type: nodeTypeData.name,
-					typeVersion: Array.isArray(nodeTypeData.version)
-						? nodeTypeData.version.slice(-1)[0]
-						: nodeTypeData.version,
-					position: [0, 0],
-					parameters: {},
-				};
-
-				const credentialPerType = nodeTypeData.credentials && nodeTypeData.credentials
-					.map(type => this.credentialsStore.getCredentialsByType(type.name))
-					.flat();
-
-				if (credentialPerType && credentialPerType.length === 1) {
-					const defaultCredential = credentialPerType[0];
-
-					const selectedCredentials = this.credentialsStore.getCredentialById(defaultCredential.id);
-					const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
-					const credentials = {
-						[defaultCredential.type]: selected,
-					};
-
-					await this.loadNodesProperties([newNodeData].map(node => ({name: node.type, version: node.typeVersion})));
-					const nodeType = this.nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
-				 	const nodeParameters = NodeHelpers.getNodeParameters(nodeType?.properties || [], {}, true, false, newNodeData);
-
-					if (nodeTypeData.credentials) {
-						const authentication = nodeTypeData.credentials.find(type => type.name === defaultCredential.type);
-						if (authentication?.displayOptions?.hide) {
-							return newNodeData;
-						}
-
-						const authDisplayOptions = authentication?.displayOptions?.show;
-						if (!authDisplayOptions) {
-							newNodeData.credentials = credentials;
-							return newNodeData;
-						}
-
-						if (Object.keys(authDisplayOptions).length === 1 && authDisplayOptions['authentication']) {
-							// ignore complex case when there's multiple dependencies
-							newNodeData.credentials = credentials;
-
-							let parameters: { [key:string]: string } = {};
-							for (const displayOption of Object.keys(authDisplayOptions)) {
-								if (nodeParameters && !nodeParameters[displayOption]) {
-									parameters = {};
-									newNodeData.credentials = undefined;
-									break;
-								}
-								const optionValue = authDisplayOptions[displayOption]?.[0];
-								if (optionValue && typeof optionValue === 'string') {
-									parameters[displayOption] = optionValue;
-								}
-								newNodeData.parameters = {
-									...newNodeData.parameters,
-									...parameters,
-								};
-							}
-						}
-					}
-				}
-				return newNodeData;
-			},
-
-			async injectNode (nodeTypeName: string, options: AddNodeOptions = {}, showDetail = true, trackHistory = false) {
-				const nodeTypeData: INodeTypeDescription | null = this.nodeTypesStore.getNodeType(nodeTypeName);
-
-				if (nodeTypeData === null) {
-					this.$showMessage({
-						title: this.$locale.baseText('nodeView.showMessage.addNodeButton.title'),
-						message: this.$locale.baseText(
-							'nodeView.showMessage.addNodeButton.message',
-							{ interpolate: { nodeTypeName } },
-						),
-						type: 'error',
-					});
-					return;
-				}
-
-				if (nodeTypeData.maxNodes !== undefined && this.getNodeTypeCount(nodeTypeName) >= nodeTypeData.maxNodes) {
 					this.showMaxNodeTypeError(nodeTypeData);
 					return;
 				}
 
-				const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData);
-
-				// when pulling new connection from node or injecting into a connection
-				const lastSelectedNode = this.lastSelectedNode;
-
-				if (options.position) {
-					newNodeData.position = NodeViewUtils.getNewNodePosition(this.canvasStore.getNodesWithPlaceholderNode(), options.position);
-				} else if (lastSelectedNode) {
-					const lastSelectedConnection = this.lastSelectedConnection;
-					if (lastSelectedConnection) { // set when injecting into a connection
-						const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
-						if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
-							this.pushDownstreamNodes(lastSelectedNode.name, NodeViewUtils.PUSH_NODES_OFFSET, trackHistory);
-						}
-					}
-
-					// set when pulling connections
-					if (this.newNodeInsertPosition) {
-						newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, [
-							this.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
-							this.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
-						]);
-						this.newNodeInsertPosition = null;
-					} else {
-						let yOffset = 0;
-
-						if (lastSelectedConnection) {
-							const sourceNodeType = this.nodeTypesStore.getNodeType(lastSelectedNode.type, lastSelectedNode.typeVersion);
-							const offsets = [[-100, 100], [-140, 0, 140], [-240, -100, 100, 240]];
-							if (sourceNodeType && sourceNodeType.outputs.length > 1) {
-								const offset = offsets[sourceNodeType.outputs.length - 2];
-								const sourceOutputIndex = lastSelectedConnection.__meta ? lastSelectedConnection.__meta.sourceOutputIndex : 0;
-								yOffset = offset[sourceOutputIndex];
-							}
-						}
-
-						// If a node is active then add the new node directly after the current one
-						newNodeData.position = NodeViewUtils.getNewNodePosition(
-							this.nodes,
-							[lastSelectedNode.position[0] + NodeViewUtils.PUSH_NODES_OFFSET, lastSelectedNode.position[1] + yOffset],
-							[100, 0],
-						);
-					}
-				} else {
-					// If added node is a trigger and it's the first one added to the canvas
-					// we place it at canvasAddButtonPosition to replace the canvas add button
-					const position = this.nodeTypesStore.isTriggerNode(nodeTypeName) && !this.containsTrigger
-						? this.canvasStore.canvasAddButtonPosition
-						// If no node is active find a free spot
-						: this.lastClickPosition as XYPosition;
-
-					newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, position);
-				}
-
+				// Deep copy the data so that data on lower levels of the node-properties do
+				// not share objects
+				const newNodeData = deepCopy(this.getNodeDataToSave(node));
+				newNodeData.id = uuid();
 
 				// Check if node-name is unique else find one that is
 				newNodeData.name = this.getUniqueNodeName({
@@ -1722,1126 +2669,450 @@ export default mixins(
 					type: newNodeData.type,
 				});
 
-				if (nodeTypeData.webhooks && nodeTypeData.webhooks.length) {
+				newNodeData.position = NodeViewUtils.getNewNodePosition(
+					this.nodes,
+					[node.position[0], node.position[1] + 140],
+					[0, 140],
+				);
+
+				if (newNodeData.webhookId) {
+					// Make sure that the node gets a new unique webhook-ID
 					newNodeData.webhookId = uuid();
 				}
 
-				await this.addNodes([newNodeData], undefined, trackHistory);
+				if (
+					newNodeData.credentials &&
+					this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)
+				) {
+					const usedCredentials = this.workflowsStore.usedCredentials;
+					newNodeData.credentials = Object.fromEntries(
+						Object.entries(newNodeData.credentials).filter(([_, credential]) => {
+							return (
+								credential.id &&
+								(!usedCredentials[credential.id] ||
+									usedCredentials[credential.id]?.currentUserHasAccess)
+							);
+						}),
+					);
+				}
+
+				await this.addNodes([newNodeData], [], true);
+
+				const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
+				if (pinData) {
+					this.workflowsStore.pinData({
+						node: newNodeData,
+						data: pinData,
+					});
+				}
 
 				this.uiStore.stateIsDirty = true;
 
-				if (nodeTypeName === STICKY_NODE_TYPE) {
-					this.$telemetry.trackNodesPanel('nodeView.addSticky', { workflow_id: this.workflowsStore.workflowId });
-				} else {
-					this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
-					const trackProperties: ITelemetryTrackProperties = {
-						node_type: nodeTypeName,
-						workflow_id: this.workflowsStore.workflowId,
-						drag_and_drop: options.dragAndDrop,
-					};
-
-					if (lastSelectedNode) {
-						trackProperties.input_node_type = lastSelectedNode.type;
-					}
-
-					this.$telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
-				}
-
 				// Automatically deselect all nodes and select the current one and also active
-				// current node. But only if it's added manually by the user (not by undo/redo mechanism)
-				if(trackHistory) {
-					this.deselectAllNodes();
-					const preventDetailOpen = window.posthog?.getFeatureFlag && window.posthog?.getFeatureFlag('prevent-ndv-auto-open') === 'prevent';
-					if(showDetail && !preventDetailOpen) {
-						setTimeout(() => {
-							this.nodeSelectedByName(newNodeData.name, nodeTypeName !== STICKY_NODE_TYPE);
-						});
-					}
-				}
-
-				return newNodeData;
-			},
-			getConnection(sourceNodeName: string, sourceNodeOutputIndex: number, targetNodeName: string, targetNodeOuputIndex: number): IConnection | undefined {
-				const nodeConnections = (this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections).main;
-				if (nodeConnections) {
-					const connections: IConnection[] | null = nodeConnections[sourceNodeOutputIndex];
-
-					if (connections) {
-						return connections.find((connection: IConnection) => connection.node === targetNodeName && connection.index === targetNodeOuputIndex);
-					}
-				}
-
-				return undefined;
-			},
-			connectTwoNodes(sourceNodeName: string, sourceNodeOutputIndex: number, targetNodeName: string, targetNodeOuputIndex: number, trackHistory = false) {
-				if (this.getConnection(sourceNodeName, sourceNodeOutputIndex, targetNodeName, targetNodeOuputIndex)) {
-					return;
-				}
-
-				const connectionData = [
-					{
-						node: sourceNodeName,
-						type: 'main',
-						index: sourceNodeOutputIndex,
-					},
-					{
-						node: targetNodeName,
-						type: 'main',
-						index: targetNodeOuputIndex,
-					},
-				] as [IConnection, IConnection];
-
-				this.__addConnection(connectionData, true);
-			},
-			async addNode(nodeTypeName: string, options: AddNodeOptions = {}, showDetail = true, trackHistory = false) {
-				if (!this.editAllowedCheck()) {
-					return;
-				}
-
-				const lastSelectedConnection = this.lastSelectedConnection;
-				const lastSelectedNode = this.lastSelectedNode;
-				const lastSelectedNodeOutputIndex = this.uiStore.lastSelectedNodeOutputIndex;
-
-				this.historyStore.startRecordingUndo();
-
-				const newNodeData = await this.injectNode(nodeTypeName, options, showDetail, trackHistory);
-				if (!newNodeData) {
-					return;
-				}
-
-				const outputIndex = lastSelectedNodeOutputIndex || 0;
-
-				// If a node is last selected then connect between the active and its child ones
-				if (lastSelectedNode) {
-					await Vue.nextTick();
-
-					if (lastSelectedConnection && lastSelectedConnection.__meta) {
-						this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
-
-						const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
-						const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
-						this.connectTwoNodes(newNodeData.name, 0, targetNodeName, targetOutputIndex, trackHistory);
-					}
-
-					// Connect active node to the newly created one
-					this.connectTwoNodes(lastSelectedNode.name, outputIndex, newNodeData.name, 0, trackHistory);
-				}
-				this.historyStore.stopRecordingUndo();
-			},
-			initNodeView() {
-				this.instance.importDefaults({
-					Connector: NodeViewUtils.CONNECTOR_FLOWCHART_TYPE,
-					Endpoint: ['Dot', { radius: 5 }],
-					DragOptions: { cursor: 'pointer', zIndex: 5000 },
-					PaintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_DEFAULT,
-					HoverPaintStyle: NodeViewUtils.CONNECTOR_PAINT_STYLE_PRIMARY,
-					ConnectionOverlays: NodeViewUtils.CONNECTOR_ARROW_OVERLAYS,
-					Container: '#node-view',
-				});
-
-				const insertNodeAfterSelected = (info: { sourceId: string, index: number, eventSource: string, connection?: Connection }) => {
-					// Get the node and set it as active that new nodes
-					// which get created get automatically connected
-					// to it.
-					const sourceNode = this.workflowsStore.getNodeById(info.sourceId);
-					if (!sourceNode) {
-						return;
-					}
-
-					this.uiStore.lastSelectedNode = sourceNode.name;
-					this.uiStore.lastSelectedNodeOutputIndex = info.index;
-					this.newNodeInsertPosition = null;
-
-					if (info.connection) {
-						this.lastSelectedConnection = info.connection;
-					}
-
-					this.onToggleNodeCreator({ source: info.eventSource, createNodeActive: true});
-				};
-
-				this.instance.bind('connectionAborted', (connection) => {
-					try {
-						if (this.dropPrevented) {
-							this.dropPrevented = false;
-							return;
-						}
-
-						if (this.pullConnActiveNodeName) {
-							const sourceNode = this.workflowsStore.getNodeById(connection.sourceId);
-							if (sourceNode) {
-								const sourceNodeName = sourceNode.name;
-								const outputIndex = connection.getParameters().index;
-
-								this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0, true);
-								this.pullConnActiveNodeName = null;
-							}
-							return;
-						}
-
-						insertNodeAfterSelected({
-							sourceId: connection.sourceId,
-							index: connection.getParameters().index,
-							eventSource: 'node_connection_drop',
-						});
-					} catch (e) {
-						console.error(e);  // eslint-disable-line no-console
-					}
-				});
-
-				this.instance.bind('beforeDrop', (info) => {
-					try {
-						const sourceInfo = info.connection.endpoints[0].getParameters();
-						// @ts-ignore
-						const targetInfo = info.dropEndpoint.getParameters();
-
-						const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '';
-						const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '';
-
-						// check for duplicates
-						if (this.getConnection(sourceNodeName, sourceInfo.index, targetNodeName, targetInfo.index)) {
-							this.dropPrevented = true;
-							this.pullConnActiveNodeName = null;
-							return false;
-						}
-
-						return true;
-					} catch (e) {
-						console.error(e);  // eslint-disable-line no-console
-						return true;
-					}
-				});
-
-				// only one set of visible actions should be visible at the same time
-				let activeConnection: null | Connection = null;
-
-				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
-					try {
-						const sourceInfo = info.sourceEndpoint.getParameters();
-						const targetInfo = info.targetEndpoint.getParameters();
-
-						const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name;
-						const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name;
-
-						if (sourceNodeName && targetNodeName) {
-							info.connection.__meta = {
-								sourceNodeName,
-								sourceOutputIndex: sourceInfo.index,
-								targetNodeName,
-								targetOutputIndex: targetInfo.index,
-							};
-						}
-
-						NodeViewUtils.resetConnection(info.connection);
-
-						if (!this.isReadOnly) {
-							let exitTimer: NodeJS.Timeout | undefined;
-							let enterTimer: NodeJS.Timeout | undefined;
-							info.connection.bind('mouseover', (connection: Connection) => {
-								try {
-									if (exitTimer !== undefined) {
-										clearTimeout(exitTimer);
-										exitTimer = undefined;
-									}
-
-									if (enterTimer) {
-										return;
-									}
-
-									if (!info.connection || info.connection === activeConnection) {
-										return;
-									}
-
-									NodeViewUtils.hideConnectionActions(activeConnection);
-
-
-									enterTimer = setTimeout(() => {
-										enterTimer = undefined;
-										if (info.connection) {
-											activeConnection = info.connection;
-											NodeViewUtils.showConnectionActions(info.connection);
-										}
-									}, 150);
-								} catch (e) {
-									console.error(e); // eslint-disable-line no-console
-								}
-							});
-
-							info.connection.bind('mouseout', (connection: Connection) => {
-								try {
-									if (exitTimer) {
-										return;
-									}
-
-									if (enterTimer) {
-										clearTimeout(enterTimer);
-										enterTimer = undefined;
-									}
-
-									if (!info.connection || activeConnection !== info.connection) {
-										return;
-									}
-
-									exitTimer = setTimeout(() => {
-										exitTimer = undefined;
-
-										if (info.connection && activeConnection === info.connection) {
-											NodeViewUtils.hideConnectionActions(activeConnection);
-											activeConnection = null;
-										}
-									}, 500);
-								} catch (e) {
-									console.error(e); // eslint-disable-line no-console
-								}
-							});
-
-							NodeViewUtils.addConnectionActionsOverlay(info.connection,
-								() => {
-									activeConnection = null;
-									this.__deleteJSPlumbConnection(info.connection);
-								},
-								() => {
-									setTimeout(() => {
-										insertNodeAfterSelected({
-											sourceId: info.sourceId,
-											index: sourceInfo.index,
-											connection: info.connection,
-											eventSource: 'node_connection_action',
-										});
-									}, 150);
-								});
-						}
-
-						NodeViewUtils.moveBackInputLabelPosition(info.targetEndpoint);
-
-						const connectionData: [IConnection, IConnection] = [
-							{
-								node: sourceNodeName,
-								type: sourceInfo.type,
-								index: sourceInfo.index,
-							},
-							{
-								node: targetNodeName,
-								type: targetInfo.type,
-								index: targetInfo.index,
-							},
-						];
-
-						this.workflowsStore.addConnection({
-							connection: connectionData,
-							setStateDirty: true,
-						});
-						if (!this.suspendRecordingDetachedConnections) {
-							this.historyStore.pushCommandToUndo(new AddConnectionCommand(connectionData, this));
-						}
-					} catch (e) {
-						console.error(e); // eslint-disable-line no-console
-					}
-				});
-
-				this.instance.bind('connectionMoved', (info) => {
-					try {
-						// When a connection gets moved from one node to another it for some reason
-						// calls the "connection" event but not the "connectionDetached" one. So we listen
-						// additionally to the "connectionMoved" event and then only delete the existing connection.
-
-						NodeViewUtils.resetInputLabelPosition(info.originalTargetEndpoint);
-
-						// @ts-ignore
-						const sourceInfo = info.originalSourceEndpoint.getParameters();
-						// @ts-ignore
-						const targetInfo = info.originalTargetEndpoint.getParameters();
-
-						const connectionInfo = [
-							{
-								node: this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '',
-								type: sourceInfo.type,
-								index: sourceInfo.index,
-							},
-							{
-								node: this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '',
-								type: targetInfo.type,
-								index: targetInfo.index,
-							},
-						] as [IConnection, IConnection];
-
-						this.__removeConnection(connectionInfo, false);
-					} catch (e) {
-						console.error(e); // eslint-disable-line no-console
-					}
-				});
-
-				this.instance.bind('connectionDetached', async (info) => {
-					try {
-						const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
-						NodeViewUtils.resetInputLabelPosition(info.targetEndpoint);
-						info.connection.removeOverlays();
-						this.__removeConnectionByConnectionInfo(info, false, false);
-
-						if (this.pullConnActiveNodeName) { // establish new connection when dragging connection from one node to another
-							this.historyStore.startRecordingUndo();
-							const sourceNode = this.workflowsStore.getNodeById(info.connection.sourceId);
-							const sourceNodeName = sourceNode.name;
-							const outputIndex = info.connection.getParameters().index;
-
-							if (connectionInfo) {
-								this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo, this));
-							}
-							this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0, true);
-							this.pullConnActiveNodeName = null;
-							await this.$nextTick();
-							this.historyStore.stopRecordingUndo();
-						} else if (!this.historyStore.bulkInProgress && !this.suspendRecordingDetachedConnections && connectionInfo) {
-							// Ff connection being detached by user, save this in history
-							// but skip if it's detached as a side effect of bulk undo/redo or node rename process
-							const removeCommand = new RemoveConnectionCommand(connectionInfo, this);
-							this.historyStore.pushCommandToUndo(removeCommand);
-						}
-					} catch (e) {
-						console.error(e); // eslint-disable-line no-console
-					}
-				});
-
-				// @ts-ignore
-				this.instance.bind('connectionDrag', (connection: Connection) => {
-					try {
-						this.pullConnActiveNodeName = null;
-						this.pullConnActive = true;
-						this.newNodeInsertPosition = null;
-						NodeViewUtils.resetConnection(connection);
-
-						const nodes = [...document.querySelectorAll('.node-default')];
-
-						const onMouseMove = (e: MouseEvent | TouchEvent) => {
-							if (!connection) {
-								return;
-							}
-
-							const element = document.querySelector('.jtk-endpoint.dropHover');
-							if (element) {
-								// @ts-ignore
-								NodeViewUtils.showDropConnectionState(connection, element._jsPlumb);
-								return;
-							}
-
-							const inputMargin = 24;
-							const intersecting = nodes.find((element: Element) => {
-								const { top, left, right, bottom } = element.getBoundingClientRect();
-								const [x, y] = NodeViewUtils.getMousePosition(e);
-								if (top <= y && bottom >= y && (left - inputMargin) <= x && right >= x) {
-									const nodeName = (element as HTMLElement).dataset['name'] as string;
-									const node = this.workflowsStore.getNodeByName(nodeName) as INodeUi | null;
-									if (node) {
-										const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-										if (nodeType && nodeType.inputs && nodeType.inputs.length === 1) {
-											this.pullConnActiveNodeName = node.name;
-											const endpointUUID = this.getInputEndpointUUID(nodeName, 0);
-											if (endpointUUID) {
-												const endpoint = this.instance.getEndpoint(endpointUUID);
-
-												NodeViewUtils.showDropConnectionState(connection, endpoint);
-
-												return true;
-											}
-										}
-									}
-								}
-
-								return false;
-							});
-
-							if (!intersecting) {
-								NodeViewUtils.showPullConnectionState(connection);
-								this.pullConnActiveNodeName = null;
-							}
-						};
-
-						const onMouseUp = (e: MouseEvent | TouchEvent) => {
-							this.pullConnActive = false;
-							this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
-							NodeViewUtils.resetConnectionAfterPull(connection);
-							window.removeEventListener('mousemove', onMouseMove);
-							window.removeEventListener('mouseup', onMouseUp);
-						};
-
-						window.addEventListener('mousemove', onMouseMove);
-						window.addEventListener('touchmove', onMouseMove);
-						window.addEventListener('mouseup', onMouseUp);
-						window.addEventListener('touchend', onMouseMove);
-					} catch (e) {
-						console.error(e); // eslint-disable-line no-console
-					}
-				});
-
-				// @ts-ignore
-				this.instance.bind(('plusEndpointClick'), (endpoint: Endpoint) => {
-					if (endpoint && endpoint.__meta) {
-						insertNodeAfterSelected({
-							sourceId: endpoint.__meta.nodeId,
-							index: endpoint.__meta.index,
-							eventSource: 'plus_endpoint',
-						});
-					}
-				});
-			},
-			async newWorkflow(): Promise<void> {
-				this.startLoading();
-				await this.resetWorkspace();
-				this.workflowData = await this.workflowsStore.getNewWorkflowData();
-				this.workflowsStore.currentWorkflowExecutions = [];
-				this.workflowsStore.activeWorkflowExecution = null;
-
-				this.uiStore.stateIsDirty = false;
-				this.canvasStore.setZoomLevel(1, 0);
-				this.canvasStore.zoomToFit();
-			},
-			tryToAddWelcomeSticky: once(async function(this: any) {
-				const newWorkflow = this.workflowData;
-				if (window.posthog?.getFeatureFlag?.('welcome-note') === 'test') {
-					// For novice users (onboardingFlowEnabled == true)
-					// Inject welcome sticky note and zoom to fit
-
-					if (newWorkflow?.onboardingFlowEnabled && !this.isReadOnly) {
-						const collisionPadding = NodeViewUtils.GRID_SIZE + NodeViewUtils.NODE_SIZE;
-						// Position the welcome sticky left to the added trigger node
-						let position: XYPosition = [...(this.triggerNodes[0].position as XYPosition)];
-
-						position[0] -= NodeViewUtils.WELCOME_STICKY_NODE.parameters.width + (NodeViewUtils.GRID_SIZE * 4);
-						position = NodeViewUtils.getNewNodePosition(this.nodes, position, [collisionPadding, collisionPadding]);
-
-						await this.addNodes([{
-							id: uuid(),
-							...NodeViewUtils.WELCOME_STICKY_NODE,
-							parameters: {
-								// Use parameters from the template but add translated content
-								...NodeViewUtils.WELCOME_STICKY_NODE.parameters,
-								content: this.$locale.baseText('onboardingWorkflow.stickyContent'),
-							},
-							position,
-						}]);
-						this.$telemetry.track('welcome note inserted');
-					}
-				}
-				this.uiStore.nodeViewInitialized = true;
-				this.historyStore.reset();
-				this.workflowsStore.activeWorkflowExecution = null;
-				this.stopLoading();
-			}),
-			async initView(): Promise<void> {
-				if (this.$route.params.action === 'workflowSave') {
-					// In case the workflow got saved we do not have to run init
-					// as only the route changed but all the needed data is already loaded
-					this.uiStore.stateIsDirty = false;
-					return Promise.resolve();
-				}
-				if (this.blankRedirect) {
-					this.blankRedirect = false;
-				}
-				else if (this.$route.name === VIEWS.TEMPLATE_IMPORT) {
-					const templateId = this.$route.params.id;
-					await this.openWorkflowTemplate(templateId);
-				}
-				else if (this.isExecutionView) {
-					// Load an execution
-					const executionId = this.$route.params.id;
-					await this.openExecution(executionId);
-				} else {
-					const result = this.uiStore.stateIsDirty;
-					if (result) {
-						const confirmModal = await this.confirmModal(
-							this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
-							this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
-							'warning',
-							this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
-							this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
-							true,
-						);
-						if (confirmModal === MODAL_CONFIRMED) {
-							const saved = await this.saveCurrentWorkflow();
-							if (saved) await this.settingsStore.fetchPromptsData();
-						} else if (confirmModal === MODAL_CLOSE) {
-							return Promise.resolve();
-						}
-					}
-					// Load a workflow
-					let workflowId = null as string | null;
-					if (this.$route.params.name) {
-						workflowId = this.$route.params.name;
-					}
-					if (workflowId !== null) {
-						let workflow;
-						try {
-							workflow = await this.restApi().getWorkflow(workflowId);
-						} catch (error) {
-							this.$showError(error, this.$locale.baseText('openWorkflow.workflowNotFoundError'));
-
-							this.$router.push({
-								name: VIEWS.NEW_WORKFLOW,
-							});
-						}
-
-						if (workflow) {
-							this.$titleSet(workflow.name, 'IDLE');
-							// Open existing workflow
-							await this.openWorkflow(workflowId);
-						}
-					} else if (this.$route.meta?.nodeView === true) {
-						// Create new workflow
-						await this.newWorkflow();
-					}
-				}
-				this.historyStore.reset();
-				this.uiStore.nodeViewInitialized = true;
-				document.addEventListener('keydown', this.keyDown);
-				document.addEventListener('keyup', this.keyUp);
-				window.addEventListener("beforeunload", (e) => {
-					if (this.isDemo){
-						return;
-					}
-					else if (this.uiStore.stateIsDirty === true) {
-						const confirmationMessage = this.$locale.baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething');
-						(e || window.event).returnValue = confirmationMessage; //Gecko + IE
-						return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
-					} else {
-						this.startLoading(
-							this.$locale.baseText('nodeView.redirecting'),
-						);
-						return;
-					}
-				});
-			},
-			getOutputEndpointUUID(nodeName: string, index: number): string | null {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (!node) {
-					return null;
-				}
-
-				return NodeViewUtils.getOutputEndpointUUID(node.id, index);
-			},
-			getInputEndpointUUID(nodeName: string, index: number) {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (!node) {
-					return null;
-				}
-
-				return NodeViewUtils.getInputEndpointUUID(node.id, index);
-			},
-			__addConnection(connection: [IConnection, IConnection], addVisualConnection = false) {
-				if (addVisualConnection) {
-					const outputUuid = this.getOutputEndpointUUID(connection[0].node, connection[0].index);
-					const inputUuid = this.getInputEndpointUUID(connection[1].node, connection[1].index);
-					if (!outputUuid || !inputUuid) {
-						return;
-					}
-
-					const uuid: [string, string] = [
-						outputUuid,
-						inputUuid,
-					];
-
-					// Create connections in DOM
-					// @ts-ignore
-					this.instance.connect({
-						uuids: uuid,
-						detachable: !this.isReadOnly,
-					});
-				} else {
-					const connectionProperties = { connection, setStateDirty: false };
-					// When nodes get connected it gets saved automatically to the storage
-					// so if we do not connect we have to save the connection manually
-					this.workflowsStore.addConnection(connectionProperties);
-				}
-
+				// current node
+				this.deselectAllNodes();
 				setTimeout(() => {
-					this.addPinDataConnections(this.workflowsStore.pinData);
+					this.nodeSelectedByName(newNodeData.name, false);
 				});
-			},
-			__removeConnection(connection: [IConnection, IConnection], removeVisualConnection = false) {
-				if (removeVisualConnection) {
-					const sourceNode = this.workflowsStore.getNodeByName(connection[0].node);
-					const targetNode = this.workflowsStore.getNodeByName(connection[1].node);
 
-					if (!sourceNode || !targetNode) {
-						return;
-					}
+				this.$telemetry.track('User duplicated node', {
+					node_type: node.type,
+					workflow_id: this.workflowsStore.workflowId,
+				});
+			}
+		},
+		getJSPlumbConnection(
+			sourceNodeName: string,
+			sourceOutputIndex: number,
+			targetNodeName: string,
+			targetInputIndex: number,
+		): Connection | undefined {
+			const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
+			const targetNode = this.workflowsStore.getNodeByName(targetNodeName);
+			if (!sourceNode || !targetNode) {
+				return;
+			}
 
-					// @ts-ignore
-					const connections = this.instance.getConnections({
-						source: sourceNode.id,
-						target: targetNode.id,
-					});
+			const sourceId = sourceNode.id;
+			const targetId = targetNode.id;
 
-					// @ts-ignore
-					connections.forEach((connectionInstance) => {
-						if (connectionInstance.__meta) {
-							// Only delete connections from specific indexes (if it can be determined by meta)
-							if (
-								connectionInstance.__meta.sourceOutputIndex === connection[0].index &&
-								connectionInstance.__meta.targetOutputIndex === connection[1].index
-							) {
-								this.__deleteJSPlumbConnection(connectionInstance);
-							}
-						} else {
-							this.__deleteJSPlumbConnection(connectionInstance);
-						}
-					});
-				}
+			const sourceEndpoint = NodeViewUtils.getOutputEndpointUUID(sourceId, sourceOutputIndex);
+			const targetEndpoint = NodeViewUtils.getInputEndpointUUID(targetId, targetInputIndex);
 
-				this.workflowsStore.removeConnection({ connection });
-			},
-			__deleteJSPlumbConnection(connection: Connection, trackHistory = false) {
-				// Make sure to remove the overlay else after the second move
-				// it visibly stays behind free floating without a connection.
-				connection.removeOverlays();
+			// @ts-ignore
+			const connections = this.instance.getConnections({
+				source: sourceId,
+				target: targetId,
+			}) as Connection[];
 
-				const sourceEndpoint = connection.endpoints && connection.endpoints[0];
-				this.pullConnActiveNodeName = null; // prevent new connections when connectionDetached is triggered
-				this.instance.deleteConnection(connection); // on delete, triggers connectionDetached event which applies mutation to store
-				if (sourceEndpoint) {
-					const endpoints = this.instance.getEndpoints(sourceEndpoint.elementId);
-					endpoints.forEach((endpoint: Endpoint) => endpoint.repaint()); // repaint both circle and plus endpoint
-				}
-				if (trackHistory && connection.__meta) {
-					const connectionData: [IConnection, IConnection] = [
-						{ index: connection.__meta?.sourceOutputIndex, node: connection.__meta.sourceNodeName, type: 'main' },
-						{ index: connection.__meta?.targetOutputIndex, node: connection.__meta.targetNodeName, type: 'main' },
-					];
-					const removeCommand = new RemoveConnectionCommand(connectionData, this);
-					this.historyStore.pushCommandToUndo(removeCommand);
-				}
-			},
-			__removeConnectionByConnectionInfo(info: OnConnectionBindInfo, removeVisualConnection = false, trackHistory = false) {
-				const connectionInfo: [IConnection, IConnection] | null = getConnectionInfo(info);
+			return connections.find((connection: Connection) => {
+				const uuids = connection.getUuids();
+				return uuids[0] === sourceEndpoint && uuids[1] === targetEndpoint;
+			});
+		},
+		getJSPlumbEndpoints(nodeName: string): Endpoint[] {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			return this.instance.getEndpoints(node !== null ? node.id : '');
+		},
+		getPlusEndpoint(nodeName: string, outputIndex: number): Endpoint | undefined {
+			const endpoints = this.getJSPlumbEndpoints(nodeName);
+			// @ts-ignore
+			return endpoints.find(
+				(endpoint: Endpoint) =>
+					endpoint.type === 'N8nPlus' && endpoint.__meta && endpoint.__meta.index === outputIndex,
+			);
+		},
+		getIncomingOutgoingConnections(nodeName: string): {
+			incoming: Connection[];
+			outgoing: Connection[];
+		} {
+			const node = this.workflowsStore.getNodeByName(nodeName);
 
-				if (connectionInfo) {
-					if (removeVisualConnection) {
-						this.__deleteJSPlumbConnection(info.connection, trackHistory);
-					} else if (trackHistory) {
-						this.historyStore.pushCommandToUndo(new RemoveConnectionCommand(connectionInfo, this));
-					}
-					this.workflowsStore.removeConnection({ connection: connectionInfo });
-				}
-			},
-			async duplicateNode(nodeName: string) {
-				if (!this.editAllowedCheck()) {
-					return;
-				}
-				const node = this.workflowsStore.getNodeByName(nodeName);
-
-				if (node) {
-					const nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-
-					if (nodeTypeData && nodeTypeData.maxNodes !== undefined && this.getNodeTypeCount(node.type) >= nodeTypeData.maxNodes) {
-						this.showMaxNodeTypeError(nodeTypeData);
-						return;
-					}
-
-					// Deep copy the data so that data on lower levels of the node-properties do
-					// not share objects
-					const newNodeData = deepCopy(this.getNodeDataToSave(node));
-					newNodeData.id = uuid();
-
-					// Check if node-name is unique else find one that is
-					newNodeData.name = this.getUniqueNodeName({
-						originalName: newNodeData.name,
-						type: newNodeData.type,
-					});
-
-					newNodeData.position = NodeViewUtils.getNewNodePosition(
-						this.nodes,
-						[node.position[0], node.position[1] + 140],
-						[0, 140],
-					);
-
-					if (newNodeData.webhookId) {
-						// Make sure that the node gets a new unique webhook-ID
-						newNodeData.webhookId = uuid();
-					}
-
-					if (newNodeData.credentials && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)) {
-						const usedCredentials = this.workflowsStore.usedCredentials;
-						newNodeData.credentials = Object.fromEntries(
-							Object.entries(newNodeData.credentials).filter(([_, credential]) => {
-								return credential.id && (!usedCredentials[credential.id] || usedCredentials[credential.id]?.currentUserHasAccess);
-							}),
-						);
-					}
-
-					await this.addNodes([newNodeData], [], true);
-
-					const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
-					if (pinData) {
-						this.workflowsStore.pinData({
-							node: newNodeData,
-							data: pinData,
-						});
-					}
-
-					this.uiStore.stateIsDirty = true;
-
-					// Automatically deselect all nodes and select the current one and also active
-					// current node
-					this.deselectAllNodes();
-					setTimeout(() => {
-						this.nodeSelectedByName(newNodeData.name, false);
-					});
-
-					this.$telemetry.track('User duplicated node', { node_type: node.type, workflow_id: this.workflowsStore.workflowId });
-				}
-			},
-			getJSPlumbConnection(sourceNodeName: string, sourceOutputIndex: number, targetNodeName: string, targetInputIndex: number): Connection | undefined {
-				const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
-				const targetNode = this.workflowsStore.getNodeByName(targetNodeName);
-				if (!sourceNode || !targetNode) {
-					return;
-				}
-
-				const sourceId = sourceNode.id;
-				const targetId = targetNode.id;
-
-				const sourceEndpoint = NodeViewUtils.getOutputEndpointUUID(sourceId, sourceOutputIndex);
-				const targetEndpoint = NodeViewUtils.getInputEndpointUUID(targetId, targetInputIndex);
+			if (node) {
+				// @ts-ignore
+				const outgoing = this.instance.getConnections({
+					source: node.id,
+				});
 
 				// @ts-ignore
-				const connections = this.instance.getConnections({
-					source: sourceId,
-					target: targetId,
+				const incoming = this.instance.getConnections({
+					target: node.id,
 				}) as Connection[];
 
-				return connections.find((connection: Connection) => {
-					const uuids = connection.getUuids();
-					return uuids[0] === sourceEndpoint && uuids[1] === targetEndpoint;
-				});
-			},
-			getJSPlumbEndpoints(nodeName: string): Endpoint[] {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				return this.instance.getEndpoints(node !== null ? node.id : '');
-			},
-			getPlusEndpoint(nodeName: string, outputIndex: number): Endpoint | undefined {
-				const endpoints = this.getJSPlumbEndpoints(nodeName);
+				return {
+					incoming,
+					outgoing,
+				};
+			}
+			return { incoming: [], outgoing: [] };
+		},
+		onNodeMoved(node: INodeUi) {
+			const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
+
+			[...incoming, ...outgoing].forEach((connection: Connection) => {
+				NodeViewUtils.showOrHideMidpointArrow(connection);
+				NodeViewUtils.showOrHideItemsLabel(connection);
+			});
+		},
+		onNodeRun({
+			name,
+			data,
+			waiting,
+		}: {
+			name: string;
+			data: ITaskData[] | null;
+			waiting: boolean;
+		}) {
+			const pinData = this.workflowsStore.getPinData;
+
+			if (pinData && pinData[name]) return;
+
+			const sourceNodeName = name;
+			const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
+			const sourceId = sourceNode !== null ? sourceNode.id : '';
+
+			if (data === null || data.length === 0 || waiting) {
 				// @ts-ignore
-				return endpoints.find((endpoint: Endpoint) => endpoint.type === 'N8nPlus' && endpoint.__meta && endpoint.__meta.index === outputIndex);
-			},
-			getIncomingOutgoingConnections(nodeName: string): { incoming: Connection[], outgoing: Connection[] } {
-				const node = this.workflowsStore.getNodeByName(nodeName);
+				const outgoing = this.instance.getConnections({
+					source: sourceId,
+				}) as Connection[];
 
-				if (node) {
-					// @ts-ignore
-					const outgoing = this.instance.getConnections({
-						source: node.id,
-					});
-
-					// @ts-ignore
-					const incoming = this.instance.getConnections({
-						target: node.id,
-					}) as Connection[];
-
-					return {
-						incoming,
-						outgoing,
-					};
-				}
-				return { incoming: [], outgoing: [] };
-			},
-			onNodeMoved(node: INodeUi) {
-				const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
-
-				[...incoming, ...outgoing].forEach((connection: Connection) => {
-					NodeViewUtils.showOrHideMidpointArrow(connection);
-					NodeViewUtils.showOrHideItemsLabel(connection);
+				outgoing.forEach((connection: Connection) => {
+					NodeViewUtils.resetConnection(connection);
 				});
-			},
-			onNodeRun({ name, data, waiting }: { name: string, data: ITaskData[] | null, waiting: boolean }) {
-				const pinData = this.workflowsStore.getPinData;
-
-				if (pinData && pinData[name]) return;
-
-				const sourceNodeName = name;
-				const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
-				const sourceId = sourceNode !== null ? sourceNode.id : '';
-
-				if (data === null || data.length === 0 || waiting) {
+				const endpoints = this.getJSPlumbEndpoints(sourceNodeName);
+				endpoints.forEach((endpoint: Endpoint) => {
 					// @ts-ignore
-					const outgoing = this.instance.getConnections({
-						source: sourceId,
-					}) as Connection[];
+					if (endpoint.type === 'N8nPlus') {
+						(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
+					}
+				});
 
-					outgoing.forEach((connection: Connection) => {
-						NodeViewUtils.resetConnection(connection);
-					});
-					const endpoints = this.getJSPlumbEndpoints(sourceNodeName);
-					endpoints.forEach((endpoint: Endpoint) => {
-						// @ts-ignore
-						if (endpoint.type === 'N8nPlus') {
-							(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
-						}
-					});
+				return;
+			}
 
-					return;
-				}
+			const nodeConnections =
+				this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
+			const outputMap = NodeViewUtils.getOutputSummary(data, nodeConnections || []);
 
-				const nodeConnections = this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
-				const outputMap = NodeViewUtils.getOutputSummary(data, nodeConnections || []);
-
-				Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
-					Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
-						Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach((targetInputIndex: string) => {
+			Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
+				Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
+					Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach(
+						(targetInputIndex: string) => {
 							if (targetNodeName) {
-								const connection = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
+								const connection = this.getJSPlumbConnection(
+									sourceNodeName,
+									parseInt(sourceOutputIndex, 10),
+									targetNodeName,
+									parseInt(targetInputIndex, 10),
+								);
 
 								if (connection) {
 									const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
 
 									if (!output || !output.total) {
 										NodeViewUtils.resetConnection(connection);
-									}
-									else {
+									} else {
 										NodeViewUtils.addConnectionOutputSuccess(connection, output);
 									}
 								}
 							}
 
-							const endpoint = this.getPlusEndpoint(sourceNodeName, parseInt(sourceOutputIndex, 10));
+							const endpoint = this.getPlusEndpoint(
+								sourceNodeName,
+								parseInt(sourceOutputIndex, 10),
+							);
 							if (endpoint && endpoint.endpoint) {
 								const output = outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY][0];
 								if (output && output.total > 0) {
-									(endpoint.endpoint as N8nPlusEndpoint).setSuccessOutput(NodeViewUtils.getRunItemsLabel(output));
-								}
-								else {
+									(endpoint.endpoint as N8nPlusEndpoint).setSuccessOutput(
+										NodeViewUtils.getRunItemsLabel(output),
+									);
+								} else {
 									(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
 								}
 							}
-						});
-					});
-				});
-			},
-			removeNode(nodeName: string, trackHistory = false, trackBulk = true) {
-				if (!this.editAllowedCheck()) {
-					return;
-				}
-
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (!node) {
-					return;
-				}
-
-				if (trackHistory && trackBulk) {
-					this.historyStore.startRecordingUndo();
-				}
-
-				// "requiredNodeTypes" are also defined in cli/commands/run.ts
-				const requiredNodeTypes: string[] = [];
-
-				if (requiredNodeTypes.includes(node.type)) {
-					// The node is of the required type so check first
-					// if any node of that type would be left when the
-					// current one would get deleted.
-					let deleteAllowed = false;
-					for (const checkNode of this.nodes) {
-						if (checkNode.name === node.name) {
-							continue;
-						}
-						if (requiredNodeTypes.includes(checkNode.type)) {
-							deleteAllowed = true;
-							break;
-						}
-					}
-
-					if (!deleteAllowed) {
-						return;
-					}
-				}
-
-				if (node.type === STICKY_NODE_TYPE) {
-					this.$telemetry.track(
-						'User deleted workflow note',
-						{
-							workflow_id: this.workflowsStore.workflowId,
-							is_welcome_note: node.name === QUICKSTART_NOTE_NAME,
 						},
 					);
-				} else {
-					this.$externalHooks().run('node.deleteNode', { node });
-					this.$telemetry.track('User deleted node', { node_type: node.type, workflow_id: this.workflowsStore.workflowId });
-				}
+				});
+			});
+		},
+		removeNode(nodeName: string, trackHistory = false, trackBulk = true) {
+			if (!this.editAllowedCheck()) {
+				return;
+			}
 
-				let waitForNewConnection = false;
-				// connect nodes before/after deleted node
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				if (nodeType && nodeType.outputs.length === 1
-					&& nodeType.inputs.length === 1) {
-					const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
-					if (incoming.length === 1 && outgoing.length === 1) {
-						const conn1 = incoming[0];
-						const conn2 = outgoing[0];
-						if (conn1.__meta && conn2.__meta) {
-							waitForNewConnection = true;
-							const sourceNodeName = conn1.__meta.sourceNodeName;
-							const sourceNodeOutputIndex = conn1.__meta.sourceOutputIndex;
-							const targetNodeName = conn2.__meta.targetNodeName;
-							const targetNodeOuputIndex = conn2.__meta.targetOutputIndex;
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (!node) {
+				return;
+			}
 
-							setTimeout(() => {
-								this.connectTwoNodes(sourceNodeName, sourceNodeOutputIndex, targetNodeName, targetNodeOuputIndex, trackHistory);
+			if (trackHistory && trackBulk) {
+				this.historyStore.startRecordingUndo();
+			}
 
-								if (waitForNewConnection) {
-									this.instance.setSuspendDrawing(false, true);
-									waitForNewConnection = false;
-								}
-							}, 100); // just to make it clear to users that this is a new connection
-						}
+			// "requiredNodeTypes" are also defined in cli/commands/run.ts
+			const requiredNodeTypes: string[] = [];
+
+			if (requiredNodeTypes.includes(node.type)) {
+				// The node is of the required type so check first
+				// if any node of that type would be left when the
+				// current one would get deleted.
+				let deleteAllowed = false;
+				for (const checkNode of this.nodes) {
+					if (checkNode.name === node.name) {
+						continue;
+					}
+					if (requiredNodeTypes.includes(checkNode.type)) {
+						deleteAllowed = true;
+						break;
 					}
 				}
 
+				if (!deleteAllowed) {
+					return;
+				}
+			}
+
+			if (node.type === STICKY_NODE_TYPE) {
+				this.$telemetry.track('User deleted workflow note', {
+					workflow_id: this.workflowsStore.workflowId,
+					is_welcome_note: node.name === QUICKSTART_NOTE_NAME,
+				});
+			} else {
+				this.$externalHooks().run('node.deleteNode', { node });
+				this.$telemetry.track('User deleted node', {
+					node_type: node.type,
+					workflow_id: this.workflowsStore.workflowId,
+				});
+			}
+
+			let waitForNewConnection = false;
+			// connect nodes before/after deleted node
+			const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+			if (nodeType && nodeType.outputs.length === 1 && nodeType.inputs.length === 1) {
+				const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
+				if (incoming.length === 1 && outgoing.length === 1) {
+					const conn1 = incoming[0];
+					const conn2 = outgoing[0];
+					if (conn1.__meta && conn2.__meta) {
+						waitForNewConnection = true;
+						const sourceNodeName = conn1.__meta.sourceNodeName;
+						const sourceNodeOutputIndex = conn1.__meta.sourceOutputIndex;
+						const targetNodeName = conn2.__meta.targetNodeName;
+						const targetNodeOuputIndex = conn2.__meta.targetOutputIndex;
+
+						setTimeout(() => {
+							this.connectTwoNodes(
+								sourceNodeName,
+								sourceNodeOutputIndex,
+								targetNodeName,
+								targetNodeOuputIndex,
+								trackHistory,
+							);
+
+							if (waitForNewConnection) {
+								this.instance.setSuspendDrawing(false, true);
+								waitForNewConnection = false;
+							}
+						}, 100); // just to make it clear to users that this is a new connection
+					}
+				}
+			}
+
+			setTimeout(() => {
+				// Suspend drawing
+				this.instance.setSuspendDrawing(true);
+
+				// Remove all endpoints and the connections in jsplumb
+				this.instance.removeAllEndpoints(node.id);
+
+				// Remove the draggable
+				// @ts-ignore
+				this.instance.destroyDraggable(node.id);
+
+				// Remove the connections in data
+				this.workflowsStore.removeAllNodeConnection(node);
+				this.workflowsStore.removeNode(node);
+				this.workflowsStore.clearNodeExecutionData(node.name);
+
+				if (!waitForNewConnection) {
+					// Now it can draw again
+					this.instance.setSuspendDrawing(false, true);
+				}
+
+				// Remove node from selected index if found in it
+				this.uiStore.removeNodeFromSelection(node);
+				if (trackHistory) {
+					this.historyStore.pushCommandToUndo(new RemoveNodeCommand(node, this));
+				}
+			}, 0); // allow other events to finish like drag stop
+			if (trackHistory && trackBulk) {
+				const recordingTimeout = waitForNewConnection ? 100 : 0;
 				setTimeout(() => {
-					// Suspend drawing
-					this.instance.setSuspendDrawing(true);
+					this.historyStore.stopRecordingUndo();
+				}, recordingTimeout);
+			}
+		},
+		valueChanged(parameterData: IUpdateInformation) {
+			if (parameterData.name === 'name' && parameterData.oldValue) {
+				// The name changed so we have to take care that
+				// the connections get changed.
+				this.renameNode(parameterData.oldValue as string, parameterData.value as string);
+			}
+		},
+		async renameNodePrompt(currentName: string) {
+			try {
+				const promptResponsePromise = this.$prompt(
+					this.$locale.baseText('nodeView.prompt.newName') + ':',
+					this.$locale.baseText('nodeView.prompt.renameNode') + `: ${currentName}`,
+					{
+						customClass: 'rename-prompt',
+						confirmButtonText: this.$locale.baseText('nodeView.prompt.rename'),
+						cancelButtonText: this.$locale.baseText('nodeView.prompt.cancel'),
+						inputErrorMessage: this.$locale.baseText('nodeView.prompt.invalidName'),
+						inputValue: currentName,
+					},
+				);
 
-					// Remove all endpoints and the connections in jsplumb
-					this.instance.removeAllEndpoints(node.id);
-
-					// Remove the draggable
-					// @ts-ignore
-					this.instance.destroyDraggable(node.id);
-
-					// Remove the connections in data
-					this.workflowsStore.removeAllNodeConnection(node);
-					this.workflowsStore.removeNode(node);
-					this.workflowsStore.clearNodeExecutionData(node.name);
-
-					if (!waitForNewConnection) {
-						// Now it can draw again
-						this.instance.setSuspendDrawing(false, true);
-					}
-
-					// Remove node from selected index if found in it
-					this.uiStore.removeNodeFromSelection(node);
-					if (trackHistory) {
-						this.historyStore.pushCommandToUndo(new RemoveNodeCommand(node, this));
-					}
-				}, 0); // allow other events to finish like drag stop
-				if (trackHistory && trackBulk) {
-					const recordingTimeout = waitForNewConnection ? 100 : 0;
-					setTimeout(() => {
-						this.historyStore.stopRecordingUndo();
-					}, recordingTimeout);
-				}
-			},
-			valueChanged(parameterData: IUpdateInformation) {
-				if (parameterData.name === 'name' && parameterData.oldValue) {
-					// The name changed so we have to take care that
-					// the connections get changed.
-					this.renameNode(parameterData.oldValue as string, parameterData.value as string);
-				}
-			},
-			async renameNodePrompt(currentName: string) {
-				try {
-					const promptResponsePromise = this.$prompt(
-						this.$locale.baseText('nodeView.prompt.newName') + ':',
-						this.$locale.baseText('nodeView.prompt.renameNode') + `: ${currentName}`,
-						{
-							customClass: 'rename-prompt',
-							confirmButtonText: this.$locale.baseText('nodeView.prompt.rename'),
-							cancelButtonText: this.$locale.baseText('nodeView.prompt.cancel'),
-							inputErrorMessage: this.$locale.baseText('nodeView.prompt.invalidName'),
-							inputValue: currentName,
-						},
-					);
-
-					// Wait till it had time to display
-					await Vue.nextTick();
-
-					// Get the input and select the text in it
-					const nameInput = document.querySelector('.rename-prompt .el-input__inner') as HTMLInputElement | undefined;
-					if (nameInput) {
-						nameInput.focus();
-						nameInput.select();
-					}
-
-					const promptResponse = await promptResponsePromise as MessageBoxInputData;
-
-					this.renameNode(currentName, promptResponse.value, true);
-				} catch (e) { }
-			},
-			async renameNode(currentName: string, newName: string, trackHistory=false) {
-				if (currentName === newName) {
-					return;
-				}
-
-				this.suspendRecordingDetachedConnections = true;
-				if (trackHistory) {
-					this.historyStore.startRecordingUndo();
-				}
-
-				const activeNodeName = this.activeNode && this.activeNode.name;
-				const isActive = activeNodeName === currentName;
-				if (isActive) {
-					this.renamingActive = true;
-				}
-
-				// Check if node-name is unique else find one that is
-				newName = this.getUniqueNodeName({
-					originalName: newName,
-				});
-
-				// Rename the node and update the connections
-				const workflow = this.getCurrentWorkflow(true);
-				workflow.renameNode(currentName, newName);
-
-				if (trackHistory) {
-					this.historyStore.pushCommandToUndo(new RenameNodeCommand(currentName, newName, this));
-				}
-
-				// Update also last selected node and execution data
-				this.workflowsStore.renameNodeSelectedAndExecution({ old: currentName, new: newName });
-
-				// Reset all nodes and connections to load the new ones
-				this.deleteEveryEndpoint();
-
-				this.workflowsStore.removeAllConnections({ setStateDirty: false });
-				this.workflowsStore.removeAllNodes({ removePinData: false, setStateDirty: true });
-
-				// Wait a tick that the old nodes had time to get removed
+				// Wait till it had time to display
 				await Vue.nextTick();
 
-				// Add the new updated nodes
-				await this.addNodes(Object.values(workflow.nodes), workflow.connectionsBySourceNode, false);
-
-				// Make sure that the node is selected again
-				this.deselectAllNodes();
-				this.nodeSelectedByName(newName);
-
-				if (isActive) {
-					this.ndvStore.activeNodeName = newName;
-					this.renamingActive = false;
+				// Get the input and select the text in it
+				const nameInput = document.querySelector('.rename-prompt .el-input__inner') as
+					| HTMLInputElement
+					| undefined;
+				if (nameInput) {
+					nameInput.focus();
+					nameInput.select();
 				}
 
-				if (trackHistory) {
-					this.historyStore.stopRecordingUndo();
-				}
-				this.suspendRecordingDetachedConnections = false;
-			},
-			deleteEveryEndpoint() {
-				// Check as it does not exist on first load
-				if (this.instance) {
-					const nodes = this.workflowsStore.allNodes;
-					nodes.forEach((node: INodeUi) => {
-						try {
-							// important to prevent memory leak
-							// @ts-ignore
-							this.instance.destroyDraggable(node.id);
-						} catch (e) {
-							console.error(e);
-						}
-					});
+				const promptResponse = (await promptResponsePromise) as MessageBoxInputData;
 
-					this.instance.deleteEveryEndpoint();
-				}
-			},
-			matchCredentials(node: INodeUi) {
-				if (!node.credentials) {
-					return;
-				}
-				Object.entries(node.credentials).forEach(([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
+				this.renameNode(currentName, promptResponse.value, true);
+			} catch (e) {}
+		},
+		async renameNode(currentName: string, newName: string, trackHistory = false) {
+			if (currentName === newName) {
+				return;
+			}
+
+			this.suspendRecordingDetachedConnections = true;
+			if (trackHistory) {
+				this.historyStore.startRecordingUndo();
+			}
+
+			const activeNodeName = this.activeNode && this.activeNode.name;
+			const isActive = activeNodeName === currentName;
+			if (isActive) {
+				this.renamingActive = true;
+			}
+
+			// Check if node-name is unique else find one that is
+			newName = this.getUniqueNodeName({
+				originalName: newName,
+			});
+
+			// Rename the node and update the connections
+			const workflow = this.getCurrentWorkflow(true);
+			workflow.renameNode(currentName, newName);
+
+			if (trackHistory) {
+				this.historyStore.pushCommandToUndo(new RenameNodeCommand(currentName, newName, this));
+			}
+
+			// Update also last selected node and execution data
+			this.workflowsStore.renameNodeSelectedAndExecution({ old: currentName, new: newName });
+
+			// Reset all nodes and connections to load the new ones
+			this.deleteEveryEndpoint();
+
+			this.workflowsStore.removeAllConnections({ setStateDirty: false });
+			this.workflowsStore.removeAllNodes({ removePinData: false, setStateDirty: true });
+
+			// Wait a tick that the old nodes had time to get removed
+			await Vue.nextTick();
+
+			// Add the new updated nodes
+			await this.addNodes(Object.values(workflow.nodes), workflow.connectionsBySourceNode, false);
+
+			// Make sure that the node is selected again
+			this.deselectAllNodes();
+			this.nodeSelectedByName(newName);
+
+			if (isActive) {
+				this.ndvStore.activeNodeName = newName;
+				this.renamingActive = false;
+			}
+
+			if (trackHistory) {
+				this.historyStore.stopRecordingUndo();
+			}
+			this.suspendRecordingDetachedConnections = false;
+		},
+		deleteEveryEndpoint() {
+			// Check as it does not exist on first load
+			if (this.instance) {
+				const nodes = this.workflowsStore.allNodes;
+				nodes.forEach((node: INodeUi) => {
+					try {
+						// important to prevent memory leak
+						// @ts-ignore
+						this.instance.destroyDraggable(node.id);
+					} catch (e) {
+						console.error(e);
+					}
+				});
+
+				this.instance.deleteEveryEndpoint();
+			}
+		},
+		matchCredentials(node: INodeUi) {
+			if (!node.credentials) {
+				return;
+			}
+			Object.entries(node.credentials).forEach(
+				([nodeCredentialType, nodeCredentials]: [string, INodeCredentialsDetails]) => {
 					const credentialOptions = this.credentialsStore.getCredentialsByType(nodeCredentialType);
 
 					// Check if workflows applies old credentials style
@@ -2856,12 +3127,18 @@ export default mixins(
 					if (nodeCredentials.id) {
 						// Check whether the id is matching with a credential
 						const credentialsId = nodeCredentials.id.toString(); // due to a fixed bug in the migration UpdateWorkflowCredentials (just sqlite) we have to cast to string and check later if it has been a number
-						const credentialsForId = credentialOptions.find((optionData: ICredentialsResponse) =>
-							optionData.id === credentialsId,
+						const credentialsForId = credentialOptions.find(
+							(optionData: ICredentialsResponse) => optionData.id === credentialsId,
 						);
 						if (credentialsForId) {
-							if (credentialsForId.name !== nodeCredentials.name || typeof nodeCredentials.id === 'number') {
-								node.credentials![nodeCredentialType] = { id: credentialsForId.id, name: credentialsForId.name };
+							if (
+								credentialsForId.name !== nodeCredentials.name ||
+								typeof nodeCredentials.id === 'number'
+							) {
+								node.credentials![nodeCredentialType] = {
+									id: credentialsForId.id,
+									name: credentialsForId.name,
+								};
 								this.credentialsUpdated = true;
 							}
 							return;
@@ -2872,696 +3149,773 @@ export default mixins(
 					node.credentials![nodeCredentialType] = nodeCredentials;
 
 					// check if only one option with the name would exist
-					const credentialsForName = credentialOptions.filter((optionData: ICredentialsResponse) => optionData.name === nodeCredentials.name);
+					const credentialsForName = credentialOptions.filter(
+						(optionData: ICredentialsResponse) => optionData.name === nodeCredentials.name,
+					);
 
 					// only one option exists for the name, take it
 					if (credentialsForName.length === 1) {
 						node.credentials![nodeCredentialType].id = credentialsForName[0].id;
 						this.credentialsUpdated = true;
 					}
-				});
-			},
-			async addNodes(nodes: INodeUi[], connections?: IConnections, trackHistory = false) {
-				if (!nodes || !nodes.length) {
-					return;
-				}
-
-				// Before proceeding we must check if all nodes contain the `properties` attribute.
-				// Nodes are loaded without this information so we must make sure that all nodes
-				// being added have this information.
-				await this.loadNodesProperties(nodes.map(node => ({ name: node.type, version: node.typeVersion })));
-
-				// Add the node to the node-list
-				let nodeType: INodeTypeDescription | null;
-				let foundNodeIssues: INodeIssues | null;
-				nodes.forEach((node) => {
-					if (!node.id) {
-						node.id = uuid();
-					}
-
-					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-
-					// Make sure that some properties always exist
-					if (!node.hasOwnProperty('disabled')) {
-						node.disabled = false;
-					}
-
-					if (!node.hasOwnProperty('parameters')) {
-						node.parameters = {};
-					}
-
-					// Load the defaul parameter values because only values which differ
-					// from the defaults get saved
-					if (nodeType !== null) {
-						let nodeParameters = null;
-						try {
-							nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false, node);
-						} catch (e) {
-							console.error(this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') + `: "${node.name}"`); // eslint-disable-line no-console
-							console.error(e); // eslint-disable-line no-console
-						}
-						node.parameters = nodeParameters !== null ? nodeParameters : {};
-
-						// if it's a webhook and the path is empty set the UUID as the default path
-						if (node.type === WEBHOOK_NODE_TYPE && node.parameters.path === '') {
-							node.parameters.path = node.webhookId as string;
-						}
-					}
-
-					// check and match credentials, apply new format if old is used
-					this.matchCredentials(node);
-
-					foundNodeIssues = this.getNodeIssues(nodeType, node);
-
-					if (foundNodeIssues !== null) {
-						node.issues = foundNodeIssues;
-					}
-
-					this.workflowsStore.addNode(node);
-					if (trackHistory) {
-						this.historyStore.pushCommandToUndo(new AddNodeCommand(node, this));
-					}
-				});
-
-				// Wait for the node to be rendered
-				await Vue.nextTick();
-
-				// Suspend drawing
-				this.instance.setSuspendDrawing(true);
-
-				// Load the connections
-				if (connections !== undefined) {
-					let connectionData;
-					for (const sourceNode of Object.keys(connections)) {
-						for (const type of Object.keys(connections[sourceNode])) {
-							for (let sourceIndex = 0; sourceIndex < connections[sourceNode][type].length; sourceIndex++) {
-								const outwardConnections = connections[sourceNode][type][sourceIndex];
-								if (!outwardConnections) {
-									continue;
-								}
-								outwardConnections.forEach((
-									targetData,
-								) => {
-									connectionData = [
-										{
-											node: sourceNode,
-											type,
-											index: sourceIndex,
-										},
-										{
-											node: targetData.node,
-											type: targetData.type,
-											index: targetData.index,
-										},
-									] as [IConnection, IConnection];
-
-									this.__addConnection(connectionData, true);
-								});
-							}
-						}
-					}
-				}
-
-				// Now it can draw again
-				this.instance.setSuspendDrawing(false, true);
-			},
-			async addNodesToWorkflow(data: IWorkflowDataUpdate): Promise<IWorkflowDataUpdate> {
-				// Because nodes with the same name maybe already exist, it could
-				// be needed that they have to be renamed. Also could it be possible
-				// that nodes are not allowd to be created because they have a create
-				// limit set. So we would then link the new nodes with the already existing ones.
-				// In this object all that nodes get saved in the format:
-				//   old-name -> new-name
-				const nodeNameTable: {
-					[key: string]: string;
-				} = {};
-				const newNodeNames: string[] = [];
-
-				if (!data.nodes) {
-					// No nodes to add
-					throw new Error(
-						this.$locale.baseText('nodeView.noNodesGivenToAdd'),
-					);
-				}
-
-				// Get how many of the nodes of the types which have
-				// a max limit set already exist
-				const nodeTypesCount = this.getNodeTypesMaxCount();
-
-				let oldName: string;
-				let newName: string;
-				const createNodes: INode[] = [];
-
-				await this.loadNodesProperties(data.nodes.map(node => ({ name: node.type, version: node.typeVersion })));
-
-				data.nodes.forEach(node => {
-					if (nodeTypesCount[node.type] !== undefined) {
-						if (nodeTypesCount[node.type].exist >= nodeTypesCount[node.type].max) {
-							// Node is not allowed to be created so
-							// do not add it to the create list but
-							// add the name of the existing node
-							// that this one gets linked up instead.
-							nodeNameTable[node.name] = nodeTypesCount[node.type].nodeNames[0];
-							return;
-						} else {
-							// Node can be created but increment the
-							// counter in case multiple ones are
-							// supposed to be created
-							nodeTypesCount[node.type].exist += 1;
-						}
-					}
-
-					oldName = node.name;
-					newName = this.getUniqueNodeName({
-						originalName: node.name,
-						additionalUsedNames: newNodeNames,
-						type: node.type,
-					});
-
-					newNodeNames.push(newName);
-					nodeNameTable[oldName] = newName;
-
-					createNodes.push(node);
-				});
-
-				// Get only the connections of the nodes that get created
-				const newConnections: IConnections = {};
-				const currentConnections = data.connections!;
-				const createNodeNames = createNodes.map((node) => node.name);
-				let sourceNode, type, sourceIndex, connectionIndex, connectionData;
-				for (sourceNode of Object.keys(currentConnections)) {
-					if (!createNodeNames.includes(sourceNode)) {
-						// Node does not get created so skip output connections
-						continue;
-					}
-
-					const connection: INodeConnections = {};
-
-					for (type of Object.keys(currentConnections[sourceNode])) {
-						connection[type] = [];
-						for (sourceIndex = 0; sourceIndex < currentConnections[sourceNode][type].length; sourceIndex++) {
-							const nodeSourceConnections = [];
-							if (currentConnections[sourceNode][type][sourceIndex]) {
-								for (connectionIndex = 0; connectionIndex < currentConnections[sourceNode][type][sourceIndex].length; connectionIndex++) {
-									connectionData = currentConnections[sourceNode][type][sourceIndex][connectionIndex];
-									if (!createNodeNames.includes(connectionData.node)) {
-										// Node does not get created so skip input connection
-										continue;
-									}
-
-									nodeSourceConnections.push(connectionData);
-									// Add connection
-								}
-							}
-							connection[type].push(nodeSourceConnections);
-						}
-					}
-
-					newConnections[sourceNode] = connection;
-				}
-
-				// Create a workflow with the new nodes and connections that we can use
-				// the rename method
-				const tempWorkflow: Workflow = this.getWorkflow(createNodes, newConnections);
-
-				// Rename all the nodes of which the name changed
-				for (oldName in nodeNameTable) {
-					if (oldName === nodeNameTable[oldName]) {
-						// Name did not change so skip
-						continue;
-					}
-					tempWorkflow.renameNode(oldName, nodeNameTable[oldName]);
-				}
-
-				// Add the nodes with the changed node names, expressions and connections
-				this.historyStore.startRecordingUndo();
-				await this.addNodes(Object.values(tempWorkflow.nodes), tempWorkflow.connectionsBySourceNode, true);
-				this.historyStore.stopRecordingUndo();
-
-				this.uiStore.stateIsDirty = true;
-
-				return {
-					nodes: Object.values(tempWorkflow.nodes),
-					connections: tempWorkflow.connectionsBySourceNode,
-				};
-			},
-			getSelectedNodesToSave(): Promise<IWorkflowData> {
-				const data: IWorkflowData = {
-					nodes: [],
-					connections: {},
-				};
-
-				// Get data of all the selected noes
-				let nodeData;
-				const exportNodeNames: string[] = [];
-
-				for (const node of this.uiStore.getSelectedNodes) {
-					try {
-						nodeData = this.getNodeDataToSave(node);
-						exportNodeNames.push(node.name);
-					} catch (e) {
-						return Promise.reject(e);
-					}
-
-					data.nodes.push(nodeData);
-				}
-
-				// Get only connections of exported nodes and ignore all other ones
-				let connectionToKeep,
-					connections: INodeConnections,
-					type: string,
-					connectionIndex: number,
-					sourceIndex: number,
-					connectionData: IConnection,
-					typeConnections: INodeConnections;
-
-				data.nodes.forEach((node) => {
-					connections = this.workflowsStore.outgoingConnectionsByNodeName(node.name);
-					if (Object.keys(connections).length === 0) {
-						return;
-					}
-
-					// Keep only the connection to node which get also exported
-					// @ts-ignore
-					typeConnections = {};
-					for (type of Object.keys(connections)) {
-						for (sourceIndex = 0; sourceIndex < connections[type].length; sourceIndex++) {
-							connectionToKeep = [];
-							for (connectionIndex = 0; connectionIndex < connections[type][sourceIndex].length; connectionIndex++) {
-								connectionData = connections[type][sourceIndex][connectionIndex];
-								if (exportNodeNames.indexOf(connectionData.node) !== -1) {
-									connectionToKeep.push(connectionData);
-								}
-							}
-
-							if (connectionToKeep.length) {
-								if (!typeConnections.hasOwnProperty(type)) {
-									typeConnections[type] = [];
-								}
-								typeConnections[type][sourceIndex] = connectionToKeep;
-							}
-						}
-					}
-
-					if (Object.keys(typeConnections).length) {
-						data.connections[node.name] = typeConnections;
-					}
-				});
-
-				return Promise.resolve(data);
-			},
-			resetWorkspace() {
-				this.workflowsStore.resetWorkflow();
-
-				// Reset nodes
-				this.deleteEveryEndpoint();
-
-				if (this.executionWaitingForWebhook) {
-					// Make sure that if there is a waiting test-webhook that
-					// it gets removed
-					this.restApi().removeTestWebhook(this.workflowsStore.workflowId)
-						.catch(() => {
-							// Ignore all errors
-						});
-				}
-
-				this.workflowsStore.removeAllConnections({ setStateDirty: false });
-				this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
-
-				// Reset workflow execution data
-				this.workflowsStore.setWorkflowExecutionData(null);
-				this.workflowsStore.resetAllNodesIssues();
-				// vm.$forceUpdate();
-
-				this.workflowsStore.setActive(false);
-				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				this.workflowsStore.setWorkflowName({ newName: '', setStateDirty: false });
-				this.workflowsStore.setWorkflowSettings({});
-				this.workflowsStore.setWorkflowTagIds([]);
-
-				this.workflowsStore.activeExecutionId = null;
-				this.workflowsStore.executingNode = null;
-				this.workflowsStore.executionWaitingForWebhook = false;
-				this.uiStore.removeActiveAction('workflowRunning');
-
-				this.uiStore.resetSelectedNodes();
-				this.uiStore.nodeViewOffsetPosition = [0, 0];
-
-				this.credentialsUpdated = false;
-				return Promise.resolve();
-			},
-			async loadActiveWorkflows(): Promise<void> {
-				const activeWorkflows = await this.restApi().getActiveWorkflows();
-				this.workflowsStore.activeWorkflows = activeWorkflows;
-			},
-			async loadNodeTypes(): Promise<void> {
-				await this.nodeTypesStore.getNodeTypes();
-			},
-			async loadCredentialTypes(): Promise<void> {
-				await this.credentialsStore.fetchCredentialTypes(true);
-			},
-			async loadCredentials(): Promise<void> {
-				await this.credentialsStore.fetchAllCredentials();
-			},
-			async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
-				const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
-
-				const nodesToBeFetched: INodeTypeNameVersion[] = [];
-				allNodes.forEach(node => {
-					const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
-					if (!!nodeInfos.find(n => n.name === node.name && nodeVersions.includes(n.version)) && !node.hasOwnProperty('properties')) {
-						nodesToBeFetched.push({
-							name: node.name,
-							version: Array.isArray(node.version)
-								? node.version.slice(-1)[0]
-								: node.version,
-						});
-					}
-				});
-
-				if (nodesToBeFetched.length > 0) {
-					// Only call API if node information is actually missing
-					this.startLoading();
-					await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
-					this.stopLoading();
-				}
-			},
-			async onPostMessageReceived(message: MessageEvent) {
-				try {
-					const json = JSON.parse(message.data);
-					if (json && json.command === 'openWorkflow') {
-						try {
-							await this.importWorkflowExact(json);
-							this.isExecutionPreview = false;
-						} catch (e) {
-							if (window.top) {
-								window.top.postMessage(JSON.stringify({ command: 'error', message: this.$locale.baseText('openWorkflow.workflowImportError') }), '*');
-							}
-							this.$showMessage({
-								title: this.$locale.baseText('openWorkflow.workflowImportError'),
-								message: (e as Error).message,
-								type: 'error',
-							});
-						}
-					} else if (json && json.command === 'openExecution') {
-						try {
-							// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
-							// so everything it needs has to be sent using post messages and passed down to child components
-							this.isProductionExecutionPreview = json.executionMode !== 'manual';
-
-							await this.openExecution(json.executionId);
-							this.isExecutionPreview = true;
-						} catch (e) {
-							if (window.top) {
-								window.top.postMessage(JSON.stringify({ command: 'error', message: this.$locale.baseText('nodeView.showError.openExecution.title') }), '*');
-							}
-							this.$showMessage({
-								title: this.$locale.baseText('nodeView.showError.openExecution.title'),
-								message: (e as Error).message,
-								type: 'error',
-							});
-						}
-					}
-				} catch (e) {
-				}
-			},
-			async onImportWorkflowDataEvent(data: IDataObject) {
-				await this.importWorkflowData(data.data as IWorkflowDataUpdate, undefined, 'file');
-			},
-			async onImportWorkflowUrlEvent(data: IDataObject) {
-				const workflowData = await this.getWorkflowDataFromUrl(data.url as string);
-				if (workflowData !== undefined) {
-					await this.importWorkflowData(workflowData, undefined, 'url');
-				}
-			},
-			addPinDataConnections(pinData: IPinData) {
-				Object.keys(pinData).forEach((nodeName) => {
-					const node = this.workflowsStore.getNodeByName(nodeName);
-					if (!node) {
-						return;
-					}
-
-					// @ts-ignore
-					const connections = this.instance.getConnections({
-						source: node.id,
-					}) as Connection[];
-
-					connections.forEach((connection) => {
-						NodeViewUtils.addConnectionOutputSuccess(connection, {
-							total: pinData[nodeName].length,
-							iterations: 0,
-						});
-					});
-				});
-			},
-			removePinDataConnections(pinData: IPinData) {
-				Object.keys(pinData).forEach((nodeName) => {
-					const node = this.workflowsStore.getNodeByName(nodeName);
-					if (!node) {
-						return;
-					}
-
-					// @ts-ignore
-					const connections = this.instance.getConnections({
-						source: node.id,
-					}) as Connection[];
-
-					connections.forEach(NodeViewUtils.resetConnection);
-				});
-			},
-			onToggleNodeCreator({ source, createNodeActive }: { source?: string; createNodeActive: boolean }) {
-				if (createNodeActive === this.createNodeActive) return;
-
-				// Default to the trigger tab in node creator if there's no trigger node yet
-				if (!this.containsTrigger) this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
-
-				this.createNodeActive = createNodeActive;
-
-				const mode = this.nodeCreatorStore.selectedType === TRIGGER_NODE_FILTER ? 'trigger' : 'default';
-				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, mode, createNodeActive });
-				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source, mode, createNodeActive, workflow_id: this.workflowsStore.workflowId });
-			},
-			onAddNode(nodeTypes: Array<{ nodeTypeName: string; position: XYPosition }>, dragAndDrop: boolean) {
-				nodeTypes.forEach(({ nodeTypeName, position }, index) => {
-					this.addNode(nodeTypeName, { position, dragAndDrop }, nodeTypes.length === 1 || index > 0, true);
-					if(index === 0) return;
-					// If there's more than one node, we want to connect them
-					// this has to be done in mutation subscriber to make sure both nodes already
-					// exist
-					const actionWatcher = this.workflowsStore.$onAction(({ name, after, args }) => {
-						if(name === 'addNode' && args[0].type === nodeTypeName) {
-							after(() => {
-								const lastAddedNode = this.nodes[this.nodes.length - 1];
-								const previouslyAddedNode = this.nodes[this.nodes.length - 2];
-
-								this.$nextTick(() => this.connectTwoNodes(previouslyAddedNode.name, 0, lastAddedNode.name, 0));
-
-								// Position the added node to the right side of the previsouly added one
-								lastAddedNode.position = [
-									previouslyAddedNode.position[0] + (NodeViewUtils.NODE_SIZE * 2),
-									previouslyAddedNode.position[1],
-								];
-								actionWatcher();
-							});
-						}
-					});
-				});
-			},
-			async saveCurrentWorkflowExternal(callback: () => void) {
-				await this.saveCurrentWorkflow();
-				callback?.();
-			},
-			setSuspendRecordingDetachedConnections(suspend: boolean) {
-				this.suspendRecordingDetachedConnections = suspend;
-			},
-			onMoveNode({nodeName, position}: { nodeName: string, position: XYPosition }): void {
-				this.workflowsStore.updateNodeProperties({ name: nodeName, properties: { position }});
-				setTimeout(() => {
-					const node = this.workflowsStore.getNodeByName(nodeName);
-					if (node) {
-						this.instance.repaintEverything();
-						this.onNodeMoved(node);
-					}
-				}, 0);
-			},
-			onRevertAddNode({node}: {node: INodeUi}): void {
-				this.removeNode(node.name, false);
-			},
-			async onRevertRemoveNode({node}: {node: INodeUi}): Promise<void> {
-				const prevNode = this.workflowsStore.workflow.nodes.find(n => n.id === node.id);
-				if (prevNode) {
-					return;
-				}
-				// For some reason, returning node to canvas with old id
-				// makes it's endpoint to render at wrong position
-				node.id = uuid();
-				await this.addNodes([node]);
-			},
-			onRevertAddConnection({ connection }: { connection: [IConnection, IConnection]}) {
-				this.suspendRecordingDetachedConnections = true;
-				this.__removeConnection(connection, true);
-				this.suspendRecordingDetachedConnections = false;
-			},
-			async onRevertRemoveConnection({ connection }: { connection: [IConnection, IConnection]}) {
-				this.suspendRecordingDetachedConnections = true;
-				this.__addConnection(connection, true);
-				this.suspendRecordingDetachedConnections = false;
-			},
-			async onRevertNameChange({ currentName, newName }: { currentName: string, newName: string }) {
-				await this.renameNode(newName, currentName);
-			},
-			onRevertEnableToggle({ nodeName, isDisabled }: { nodeName: string, isDisabled: boolean }) {
-				const node = this.workflowsStore.getNodeByName(nodeName);
-				if (node) {
-					this.disableNodes([node]);
-				}
-			},
+				},
+			);
 		},
-		async mounted() {
-			this.$titleReset();
-			window.addEventListener('message', this.onPostMessageReceived);
-
-			this.startLoading();
-			this.resetWorkspace();
-
-			const loadPromises = [
-				this.loadActiveWorkflows(),
-				this.loadCredentials(),
-				this.loadCredentialTypes(),
-			];
-
-			if (this.nodeTypesStore.allNodeTypes.length === 0) {
-				loadPromises.push(this.loadNodeTypes());
-			}
-
-			try {
-				await Promise.all(loadPromises);
-			} catch (error) {
-				this.$showError(
-					error,
-					this.$locale.baseText('nodeView.showError.mounted1.title'),
-					this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
-				);
+		async addNodes(nodes: INodeUi[], connections?: IConnections, trackHistory = false) {
+			if (!nodes || !nodes.length) {
 				return;
 			}
 
-			this.instance.ready(async () => {
-				try {
-					try {
-						this.initNodeView();
-					} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
-					await this.initView();
-					if (window.top) {
-						window.top.postMessage(JSON.stringify({ command: 'n8nReady', version: this.rootStore.versionCli }), '*');
-					}
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('nodeView.showError.mounted2.title'),
-						this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
-					);
-				}
-				this.stopLoading();
+			// Before proceeding we must check if all nodes contain the `properties` attribute.
+			// Nodes are loaded without this information so we must make sure that all nodes
+			// being added have this information.
+			await this.loadNodesProperties(
+				nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
+			);
 
-				setTimeout(() => {
-					this.usersStore.showPersonalizationSurvey();
-					this.checkForNewVersions();
-					this.addPinDataConnections(this.workflowsStore.getPinData || {} as IPinData);
-				}, 0);
+			// Add the node to the node-list
+			let nodeType: INodeTypeDescription | null;
+			let foundNodeIssues: INodeIssues | null;
+			nodes.forEach((node) => {
+				if (!node.id) {
+					node.id = uuid();
+				}
+
+				nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
+
+				// Make sure that some properties always exist
+				if (!node.hasOwnProperty('disabled')) {
+					node.disabled = false;
+				}
+
+				if (!node.hasOwnProperty('parameters')) {
+					node.parameters = {};
+				}
+
+				// Load the defaul parameter values because only values which differ
+				// from the defaults get saved
+				if (nodeType !== null) {
+					let nodeParameters = null;
+					try {
+						nodeParameters = NodeHelpers.getNodeParameters(
+							nodeType.properties,
+							node.parameters,
+							true,
+							false,
+							node,
+						);
+					} catch (e) {
+						console.error(
+							this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
+								`: "${node.name}"`,
+						); // eslint-disable-line no-console
+						console.error(e); // eslint-disable-line no-console
+					}
+					node.parameters = nodeParameters !== null ? nodeParameters : {};
+
+					// if it's a webhook and the path is empty set the UUID as the default path
+					if (node.type === WEBHOOK_NODE_TYPE && node.parameters.path === '') {
+						node.parameters.path = node.webhookId as string;
+					}
+				}
+
+				// check and match credentials, apply new format if old is used
+				this.matchCredentials(node);
+
+				foundNodeIssues = this.getNodeIssues(nodeType, node);
+
+				if (foundNodeIssues !== null) {
+					node.issues = foundNodeIssues;
+				}
+
+				this.workflowsStore.addNode(node);
+				if (trackHistory) {
+					this.historyStore.pushCommandToUndo(new AddNodeCommand(node, this));
+				}
 			});
 
-			// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
-			this.$externalHooks().run('nodeView.mount').catch(e => {});
+			// Wait for the node to be rendered
+			await Vue.nextTick();
 
-			if (
-				this.currentUser?.personalizationAnswers !== null &&
-				this.settingsStore.onboardingCallPromptEnabled &&
-				this.currentUser &&
-				getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
-			) {
-				const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
-				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
+			// Suspend drawing
+			this.instance.setSuspendDrawing(true);
 
-				if (onboardingResponse.title && onboardingResponse.description) {
-					setTimeout(async () => {
-						this.$showToast({
-							type: 'info',
-							title: onboardingResponse.title,
-							message: onboardingResponse.description,
-							duration: 0,
-							customClass: 'clickable',
-							closeOnClick: true,
-							onClick: () => {
-								this.$telemetry.track('user clicked onboarding toast', {
-									seq_num: onboardingResponse.toast_sequence_number,
-									title: onboardingResponse.title,
-									description: onboardingResponse.description,
-								});
-								this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
-							},
-						});
-					}, promptTimeout);
+			// Load the connections
+			if (connections !== undefined) {
+				let connectionData;
+				for (const sourceNode of Object.keys(connections)) {
+					for (const type of Object.keys(connections[sourceNode])) {
+						for (
+							let sourceIndex = 0;
+							sourceIndex < connections[sourceNode][type].length;
+							sourceIndex++
+						) {
+							const outwardConnections = connections[sourceNode][type][sourceIndex];
+							if (!outwardConnections) {
+								continue;
+							}
+							outwardConnections.forEach((targetData) => {
+								connectionData = [
+									{
+										node: sourceNode,
+										type,
+										index: sourceIndex,
+									},
+									{
+										node: targetData.node,
+										type: targetData.type,
+										index: targetData.index,
+									},
+								] as [IConnection, IConnection];
+
+								this.__addConnection(connectionData, true);
+							});
+						}
+					}
 				}
 			}
+
+			// Now it can draw again
+			this.instance.setSuspendDrawing(false, true);
 		},
-		activated() {
-			const openSideMenu = this.uiStore.addFirstStepOnLoad;
-			if (openSideMenu) {
-				this.showTriggerCreator('trigger_placeholder_button');
+		async addNodesToWorkflow(data: IWorkflowDataUpdate): Promise<IWorkflowDataUpdate> {
+			// Because nodes with the same name maybe already exist, it could
+			// be needed that they have to be renamed. Also could it be possible
+			// that nodes are not allowd to be created because they have a create
+			// limit set. So we would then link the new nodes with the already existing ones.
+			// In this object all that nodes get saved in the format:
+			//   old-name -> new-name
+			const nodeNameTable: {
+				[key: string]: string;
+			} = {};
+			const newNodeNames: string[] = [];
+
+			if (!data.nodes) {
+				// No nodes to add
+				throw new Error(this.$locale.baseText('nodeView.noNodesGivenToAdd'));
 			}
-			this.uiStore.addFirstStepOnLoad = false;
 
-			document.addEventListener('keydown', this.keyDown);
-			document.addEventListener('keyup', this.keyUp);
-			window.addEventListener('message', this.onPostMessageReceived);
+			// Get how many of the nodes of the types which have
+			// a max limit set already exist
+			const nodeTypesCount = this.getNodeTypesMaxCount();
 
-			this.$root.$on('newWorkflow', this.newWorkflow);
-			this.$root.$on('importWorkflowData', this.onImportWorkflowDataEvent);
-			this.$root.$on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
-			this.$root.$on('nodeMove', this.onMoveNode);
-			this.$root.$on('revertAddNode', this.onRevertAddNode);
-			this.$root.$on('revertRemoveNode', this.onRevertRemoveNode);
-			this.$root.$on('revertAddConnection', this.onRevertAddConnection);
-			this.$root.$on('revertRemoveConnection', this.onRevertRemoveConnection);
-			this.$root.$on('revertRenameNode', this.onRevertNameChange);
-			this.$root.$on('enableNodeToggle', this.onRevertEnableToggle);
+			let oldName: string;
+			let newName: string;
+			const createNodes: INode[] = [];
 
-			dataPinningEventBus.$on('pin-data', this.addPinDataConnections);
-			dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
-			nodeViewEventBus.$on('saveWorkflow', this.saveCurrentWorkflowExternal);
+			await this.loadNodesProperties(
+				data.nodes.map((node) => ({ name: node.type, version: node.typeVersion })),
+			);
 
-			this.canvasStore.isDemo = this.isDemo;
+			data.nodes.forEach((node) => {
+				if (nodeTypesCount[node.type] !== undefined) {
+					if (nodeTypesCount[node.type].exist >= nodeTypesCount[node.type].max) {
+						// Node is not allowed to be created so
+						// do not add it to the create list but
+						// add the name of the existing node
+						// that this one gets linked up instead.
+						nodeNameTable[node.name] = nodeTypesCount[node.type].nodeNames[0];
+						return;
+					} else {
+						// Node can be created but increment the
+						// counter in case multiple ones are
+						// supposed to be created
+						nodeTypesCount[node.type].exist += 1;
+					}
+				}
+
+				oldName = node.name;
+				newName = this.getUniqueNodeName({
+					originalName: node.name,
+					additionalUsedNames: newNodeNames,
+					type: node.type,
+				});
+
+				newNodeNames.push(newName);
+				nodeNameTable[oldName] = newName;
+
+				createNodes.push(node);
+			});
+
+			// Get only the connections of the nodes that get created
+			const newConnections: IConnections = {};
+			const currentConnections = data.connections!;
+			const createNodeNames = createNodes.map((node) => node.name);
+			let sourceNode, type, sourceIndex, connectionIndex, connectionData;
+			for (sourceNode of Object.keys(currentConnections)) {
+				if (!createNodeNames.includes(sourceNode)) {
+					// Node does not get created so skip output connections
+					continue;
+				}
+
+				const connection: INodeConnections = {};
+
+				for (type of Object.keys(currentConnections[sourceNode])) {
+					connection[type] = [];
+					for (
+						sourceIndex = 0;
+						sourceIndex < currentConnections[sourceNode][type].length;
+						sourceIndex++
+					) {
+						const nodeSourceConnections = [];
+						if (currentConnections[sourceNode][type][sourceIndex]) {
+							for (
+								connectionIndex = 0;
+								connectionIndex < currentConnections[sourceNode][type][sourceIndex].length;
+								connectionIndex++
+							) {
+								connectionData = currentConnections[sourceNode][type][sourceIndex][connectionIndex];
+								if (!createNodeNames.includes(connectionData.node)) {
+									// Node does not get created so skip input connection
+									continue;
+								}
+
+								nodeSourceConnections.push(connectionData);
+								// Add connection
+							}
+						}
+						connection[type].push(nodeSourceConnections);
+					}
+				}
+
+				newConnections[sourceNode] = connection;
+			}
+
+			// Create a workflow with the new nodes and connections that we can use
+			// the rename method
+			const tempWorkflow: Workflow = this.getWorkflow(createNodes, newConnections);
+
+			// Rename all the nodes of which the name changed
+			for (oldName in nodeNameTable) {
+				if (oldName === nodeNameTable[oldName]) {
+					// Name did not change so skip
+					continue;
+				}
+				tempWorkflow.renameNode(oldName, nodeNameTable[oldName]);
+			}
+
+			// Add the nodes with the changed node names, expressions and connections
+			this.historyStore.startRecordingUndo();
+			await this.addNodes(
+				Object.values(tempWorkflow.nodes),
+				tempWorkflow.connectionsBySourceNode,
+				true,
+			);
+			this.historyStore.stopRecordingUndo();
+
+			this.uiStore.stateIsDirty = true;
+
+			return {
+				nodes: Object.values(tempWorkflow.nodes),
+				connections: tempWorkflow.connectionsBySourceNode,
+			};
 		},
-		deactivated () {
-			document.removeEventListener('keydown', this.keyDown);
-			document.removeEventListener('keyup', this.keyUp);
-			window.removeEventListener('message', this.onPostMessageReceived);
+		getSelectedNodesToSave(): Promise<IWorkflowData> {
+			const data: IWorkflowData = {
+				nodes: [],
+				connections: {},
+			};
 
-			this.$root.$off('newWorkflow', this.newWorkflow);
-			this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
-			this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
-			this.$root.$off('nodeMove', this.onMoveNode);
-			this.$root.$off('revertAddNode', this.onRevertAddNode);
-			this.$root.$off('revertRemoveNode', this.onRevertRemoveNode);
-			this.$root.$off('revertAddConnection', this.onRevertAddConnection);
-			this.$root.$off('revertRemoveConnection', this.onRevertRemoveConnection);
-			this.$root.$off('revertRenameNode', this.onRevertNameChange);
-			this.$root.$off('enableNodeToggle', this.onRevertEnableToggle);
+			// Get data of all the selected noes
+			let nodeData;
+			const exportNodeNames: string[] = [];
 
-			dataPinningEventBus.$off('pin-data', this.addPinDataConnections);
-			dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
-			nodeViewEventBus.$off('saveWorkflow', this.saveCurrentWorkflowExternal);
+			for (const node of this.uiStore.getSelectedNodes) {
+				try {
+					nodeData = this.getNodeDataToSave(node);
+					exportNodeNames.push(node.name);
+				} catch (e) {
+					return Promise.reject(e);
+				}
+
+				data.nodes.push(nodeData);
+			}
+
+			// Get only connections of exported nodes and ignore all other ones
+			let connectionToKeep,
+				connections: INodeConnections,
+				type: string,
+				connectionIndex: number,
+				sourceIndex: number,
+				connectionData: IConnection,
+				typeConnections: INodeConnections;
+
+			data.nodes.forEach((node) => {
+				connections = this.workflowsStore.outgoingConnectionsByNodeName(node.name);
+				if (Object.keys(connections).length === 0) {
+					return;
+				}
+
+				// Keep only the connection to node which get also exported
+				// @ts-ignore
+				typeConnections = {};
+				for (type of Object.keys(connections)) {
+					for (sourceIndex = 0; sourceIndex < connections[type].length; sourceIndex++) {
+						connectionToKeep = [];
+						for (
+							connectionIndex = 0;
+							connectionIndex < connections[type][sourceIndex].length;
+							connectionIndex++
+						) {
+							connectionData = connections[type][sourceIndex][connectionIndex];
+							if (exportNodeNames.indexOf(connectionData.node) !== -1) {
+								connectionToKeep.push(connectionData);
+							}
+						}
+
+						if (connectionToKeep.length) {
+							if (!typeConnections.hasOwnProperty(type)) {
+								typeConnections[type] = [];
+							}
+							typeConnections[type][sourceIndex] = connectionToKeep;
+						}
+					}
+				}
+
+				if (Object.keys(typeConnections).length) {
+					data.connections[node.name] = typeConnections;
+				}
+			});
+
+			return Promise.resolve(data);
 		},
-		destroyed() {
-			this.resetWorkspace();
-			this.uiStore.stateIsDirty = false;
-			window.removeEventListener('message', this.onPostMessageReceived);
-			this.$root.$off('newWorkflow', this.newWorkflow);
-			this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
-			this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		resetWorkspace() {
+			this.workflowsStore.resetWorkflow();
+
+			// Reset nodes
+			this.deleteEveryEndpoint();
+
+			if (this.executionWaitingForWebhook) {
+				// Make sure that if there is a waiting test-webhook that
+				// it gets removed
+				this.restApi()
+					.removeTestWebhook(this.workflowsStore.workflowId)
+					.catch(() => {
+						// Ignore all errors
+					});
+			}
+
+			this.workflowsStore.removeAllConnections({ setStateDirty: false });
+			this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
+
+			// Reset workflow execution data
+			this.workflowsStore.setWorkflowExecutionData(null);
+			this.workflowsStore.resetAllNodesIssues();
+			// vm.$forceUpdate();
+
+			this.workflowsStore.setActive(false);
 			this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			this.workflowsStore.setWorkflowName({ newName: '', setStateDirty: false });
+			this.workflowsStore.setWorkflowSettings({});
+			this.workflowsStore.setWorkflowTagIds([]);
+
+			this.workflowsStore.activeExecutionId = null;
+			this.workflowsStore.executingNode = null;
+			this.workflowsStore.executionWaitingForWebhook = false;
+			this.uiStore.removeActiveAction('workflowRunning');
+
+			this.uiStore.resetSelectedNodes();
+			this.uiStore.nodeViewOffsetPosition = [0, 0];
+
+			this.credentialsUpdated = false;
+			return Promise.resolve();
 		},
-	});
+		async loadActiveWorkflows(): Promise<void> {
+			const activeWorkflows = await this.restApi().getActiveWorkflows();
+			this.workflowsStore.activeWorkflows = activeWorkflows;
+		},
+		async loadNodeTypes(): Promise<void> {
+			await this.nodeTypesStore.getNodeTypes();
+		},
+		async loadCredentialTypes(): Promise<void> {
+			await this.credentialsStore.fetchCredentialTypes(true);
+		},
+		async loadCredentials(): Promise<void> {
+			await this.credentialsStore.fetchAllCredentials();
+		},
+		async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
+			const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
+
+			const nodesToBeFetched: INodeTypeNameVersion[] = [];
+			allNodes.forEach((node) => {
+				const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
+				if (
+					!!nodeInfos.find((n) => n.name === node.name && nodeVersions.includes(n.version)) &&
+					!node.hasOwnProperty('properties')
+				) {
+					nodesToBeFetched.push({
+						name: node.name,
+						version: Array.isArray(node.version) ? node.version.slice(-1)[0] : node.version,
+					});
+				}
+			});
+
+			if (nodesToBeFetched.length > 0) {
+				// Only call API if node information is actually missing
+				this.startLoading();
+				await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
+				this.stopLoading();
+			}
+		},
+		async onPostMessageReceived(message: MessageEvent) {
+			try {
+				const json = JSON.parse(message.data);
+				if (json && json.command === 'openWorkflow') {
+					try {
+						await this.importWorkflowExact(json);
+						this.isExecutionPreview = false;
+					} catch (e) {
+						if (window.top) {
+							window.top.postMessage(
+								JSON.stringify({
+									command: 'error',
+									message: this.$locale.baseText('openWorkflow.workflowImportError'),
+								}),
+								'*',
+							);
+						}
+						this.$showMessage({
+							title: this.$locale.baseText('openWorkflow.workflowImportError'),
+							message: (e as Error).message,
+							type: 'error',
+						});
+					}
+				} else if (json && json.command === 'openExecution') {
+					try {
+						// If this NodeView is used in preview mode (in iframe) it will not have access to the main app store
+						// so everything it needs has to be sent using post messages and passed down to child components
+						this.isProductionExecutionPreview = json.executionMode !== 'manual';
+
+						await this.openExecution(json.executionId);
+						this.isExecutionPreview = true;
+					} catch (e) {
+						if (window.top) {
+							window.top.postMessage(
+								JSON.stringify({
+									command: 'error',
+									message: this.$locale.baseText('nodeView.showError.openExecution.title'),
+								}),
+								'*',
+							);
+						}
+						this.$showMessage({
+							title: this.$locale.baseText('nodeView.showError.openExecution.title'),
+							message: (e as Error).message,
+							type: 'error',
+						});
+					}
+				}
+			} catch (e) {}
+		},
+		async onImportWorkflowDataEvent(data: IDataObject) {
+			await this.importWorkflowData(data.data as IWorkflowDataUpdate, undefined, 'file');
+		},
+		async onImportWorkflowUrlEvent(data: IDataObject) {
+			const workflowData = await this.getWorkflowDataFromUrl(data.url as string);
+			if (workflowData !== undefined) {
+				await this.importWorkflowData(workflowData, undefined, 'url');
+			}
+		},
+		addPinDataConnections(pinData: IPinData) {
+			Object.keys(pinData).forEach((nodeName) => {
+				const node = this.workflowsStore.getNodeByName(nodeName);
+				if (!node) {
+					return;
+				}
+
+				// @ts-ignore
+				const connections = this.instance.getConnections({
+					source: node.id,
+				}) as Connection[];
+
+				connections.forEach((connection) => {
+					NodeViewUtils.addConnectionOutputSuccess(connection, {
+						total: pinData[nodeName].length,
+						iterations: 0,
+					});
+				});
+			});
+		},
+		removePinDataConnections(pinData: IPinData) {
+			Object.keys(pinData).forEach((nodeName) => {
+				const node = this.workflowsStore.getNodeByName(nodeName);
+				if (!node) {
+					return;
+				}
+
+				// @ts-ignore
+				const connections = this.instance.getConnections({
+					source: node.id,
+				}) as Connection[];
+
+				connections.forEach(NodeViewUtils.resetConnection);
+			});
+		},
+		onToggleNodeCreator({
+			source,
+			createNodeActive,
+		}: {
+			source?: string;
+			createNodeActive: boolean;
+		}) {
+			if (createNodeActive === this.createNodeActive) return;
+
+			// Default to the trigger tab in node creator if there's no trigger node yet
+			if (!this.containsTrigger) this.nodeCreatorStore.setSelectedType(TRIGGER_NODE_FILTER);
+
+			this.createNodeActive = createNodeActive;
+
+			const mode =
+				this.nodeCreatorStore.selectedType === TRIGGER_NODE_FILTER ? 'trigger' : 'default';
+			this.$externalHooks().run('nodeView.createNodeActiveChanged', {
+				source,
+				mode,
+				createNodeActive,
+			});
+			this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', {
+				source,
+				mode,
+				createNodeActive,
+				workflow_id: this.workflowsStore.workflowId,
+			});
+		},
+		onAddNode(
+			nodeTypes: Array<{ nodeTypeName: string; position: XYPosition }>,
+			dragAndDrop: boolean,
+		) {
+			nodeTypes.forEach(({ nodeTypeName, position }, index) => {
+				this.addNode(
+					nodeTypeName,
+					{ position, dragAndDrop },
+					nodeTypes.length === 1 || index > 0,
+					true,
+				);
+				if (index === 0) return;
+				// If there's more than one node, we want to connect them
+				// this has to be done in mutation subscriber to make sure both nodes already
+				// exist
+				const actionWatcher = this.workflowsStore.$onAction(({ name, after, args }) => {
+					if (name === 'addNode' && args[0].type === nodeTypeName) {
+						after(() => {
+							const lastAddedNode = this.nodes[this.nodes.length - 1];
+							const previouslyAddedNode = this.nodes[this.nodes.length - 2];
+
+							this.$nextTick(() =>
+								this.connectTwoNodes(previouslyAddedNode.name, 0, lastAddedNode.name, 0),
+							);
+
+							// Position the added node to the right side of the previsouly added one
+							lastAddedNode.position = [
+								previouslyAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2,
+								previouslyAddedNode.position[1],
+							];
+							actionWatcher();
+						});
+					}
+				});
+			});
+		},
+		async saveCurrentWorkflowExternal(callback: () => void) {
+			await this.saveCurrentWorkflow();
+			callback?.();
+		},
+		setSuspendRecordingDetachedConnections(suspend: boolean) {
+			this.suspendRecordingDetachedConnections = suspend;
+		},
+		onMoveNode({ nodeName, position }: { nodeName: string; position: XYPosition }): void {
+			this.workflowsStore.updateNodeProperties({ name: nodeName, properties: { position } });
+			setTimeout(() => {
+				const node = this.workflowsStore.getNodeByName(nodeName);
+				if (node) {
+					this.instance.repaintEverything();
+					this.onNodeMoved(node);
+				}
+			}, 0);
+		},
+		onRevertAddNode({ node }: { node: INodeUi }): void {
+			this.removeNode(node.name, false);
+		},
+		async onRevertRemoveNode({ node }: { node: INodeUi }): Promise<void> {
+			const prevNode = this.workflowsStore.workflow.nodes.find((n) => n.id === node.id);
+			if (prevNode) {
+				return;
+			}
+			// For some reason, returning node to canvas with old id
+			// makes it's endpoint to render at wrong position
+			node.id = uuid();
+			await this.addNodes([node]);
+		},
+		onRevertAddConnection({ connection }: { connection: [IConnection, IConnection] }) {
+			this.suspendRecordingDetachedConnections = true;
+			this.__removeConnection(connection, true);
+			this.suspendRecordingDetachedConnections = false;
+		},
+		async onRevertRemoveConnection({ connection }: { connection: [IConnection, IConnection] }) {
+			this.suspendRecordingDetachedConnections = true;
+			this.__addConnection(connection, true);
+			this.suspendRecordingDetachedConnections = false;
+		},
+		async onRevertNameChange({ currentName, newName }: { currentName: string; newName: string }) {
+			await this.renameNode(newName, currentName);
+		},
+		onRevertEnableToggle({ nodeName, isDisabled }: { nodeName: string; isDisabled: boolean }) {
+			const node = this.workflowsStore.getNodeByName(nodeName);
+			if (node) {
+				this.disableNodes([node]);
+			}
+		},
+	},
+	async mounted() {
+		this.$titleReset();
+		window.addEventListener('message', this.onPostMessageReceived);
+
+		this.startLoading();
+		this.resetWorkspace();
+
+		const loadPromises = [
+			this.loadActiveWorkflows(),
+			this.loadCredentials(),
+			this.loadCredentialTypes(),
+		];
+
+		if (this.nodeTypesStore.allNodeTypes.length === 0) {
+			loadPromises.push(this.loadNodeTypes());
+		}
+
+		try {
+			await Promise.all(loadPromises);
+		} catch (error) {
+			this.$showError(
+				error,
+				this.$locale.baseText('nodeView.showError.mounted1.title'),
+				this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
+			);
+			return;
+		}
+
+		this.instance.ready(async () => {
+			try {
+				try {
+					this.initNodeView();
+				} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
+				await this.initView();
+				if (window.top) {
+					window.top.postMessage(
+						JSON.stringify({ command: 'n8nReady', version: this.rootStore.versionCli }),
+						'*',
+					);
+				}
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('nodeView.showError.mounted2.title'),
+					this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
+				);
+			}
+			this.stopLoading();
+
+			setTimeout(() => {
+				this.usersStore.showPersonalizationSurvey();
+				this.checkForNewVersions();
+				this.addPinDataConnections(this.workflowsStore.getPinData || ({} as IPinData));
+			}, 0);
+		});
+
+		// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
+		this.$externalHooks()
+			.run('nodeView.mount')
+			.catch((e) => {});
+
+		if (
+			this.currentUser?.personalizationAnswers !== null &&
+			this.settingsStore.onboardingCallPromptEnabled &&
+			this.currentUser &&
+			getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
+		) {
+			const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
+			const promptTimeout =
+				onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
+
+			if (onboardingResponse.title && onboardingResponse.description) {
+				setTimeout(async () => {
+					this.$showToast({
+						type: 'info',
+						title: onboardingResponse.title,
+						message: onboardingResponse.description,
+						duration: 0,
+						customClass: 'clickable',
+						closeOnClick: true,
+						onClick: () => {
+							this.$telemetry.track('user clicked onboarding toast', {
+								seq_num: onboardingResponse.toast_sequence_number,
+								title: onboardingResponse.title,
+								description: onboardingResponse.description,
+							});
+							this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
+						},
+					});
+				}, promptTimeout);
+			}
+		}
+	},
+	activated() {
+		const openSideMenu = this.uiStore.addFirstStepOnLoad;
+		if (openSideMenu) {
+			this.showTriggerCreator('trigger_placeholder_button');
+		}
+		this.uiStore.addFirstStepOnLoad = false;
+
+		document.addEventListener('keydown', this.keyDown);
+		document.addEventListener('keyup', this.keyUp);
+		window.addEventListener('message', this.onPostMessageReceived);
+
+		this.$root.$on('newWorkflow', this.newWorkflow);
+		this.$root.$on('importWorkflowData', this.onImportWorkflowDataEvent);
+		this.$root.$on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		this.$root.$on('nodeMove', this.onMoveNode);
+		this.$root.$on('revertAddNode', this.onRevertAddNode);
+		this.$root.$on('revertRemoveNode', this.onRevertRemoveNode);
+		this.$root.$on('revertAddConnection', this.onRevertAddConnection);
+		this.$root.$on('revertRemoveConnection', this.onRevertRemoveConnection);
+		this.$root.$on('revertRenameNode', this.onRevertNameChange);
+		this.$root.$on('enableNodeToggle', this.onRevertEnableToggle);
+
+		dataPinningEventBus.$on('pin-data', this.addPinDataConnections);
+		dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
+		nodeViewEventBus.$on('saveWorkflow', this.saveCurrentWorkflowExternal);
+
+		this.canvasStore.isDemo = this.isDemo;
+	},
+	deactivated() {
+		document.removeEventListener('keydown', this.keyDown);
+		document.removeEventListener('keyup', this.keyUp);
+		window.removeEventListener('message', this.onPostMessageReceived);
+
+		this.$root.$off('newWorkflow', this.newWorkflow);
+		this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
+		this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		this.$root.$off('nodeMove', this.onMoveNode);
+		this.$root.$off('revertAddNode', this.onRevertAddNode);
+		this.$root.$off('revertRemoveNode', this.onRevertRemoveNode);
+		this.$root.$off('revertAddConnection', this.onRevertAddConnection);
+		this.$root.$off('revertRemoveConnection', this.onRevertRemoveConnection);
+		this.$root.$off('revertRenameNode', this.onRevertNameChange);
+		this.$root.$off('enableNodeToggle', this.onRevertEnableToggle);
+
+		dataPinningEventBus.$off('pin-data', this.addPinDataConnections);
+		dataPinningEventBus.$off('unpin-data', this.removePinDataConnections);
+		nodeViewEventBus.$off('saveWorkflow', this.saveCurrentWorkflowExternal);
+	},
+	destroyed() {
+		this.resetWorkspace();
+		this.uiStore.stateIsDirty = false;
+		window.removeEventListener('message', this.onPostMessageReceived);
+		this.$root.$off('newWorkflow', this.newWorkflow);
+		this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
+		this.$root.$off('importWorkflowUrl', this.onImportWorkflowUrlEvent);
+		this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+	},
+});
 </script>
 
 <style scoped lang="scss">
@@ -3651,7 +4005,12 @@ export default mixins(
 .connection-run-items-label {
 	span {
 		border-radius: 7px;
-		background-color: hsla(var(--color-canvas-background-h), var(--color-canvas-background-s), var(--color-canvas-background-l), .85);
+		background-color: hsla(
+			var(--color-canvas-background-h),
+			var(--color-canvas-background-s),
+			var(--color-canvas-background-l),
+			0.85
+		);
 		line-height: 1.3em;
 		padding: 0px 3px;
 		white-space: nowrap;
@@ -3687,7 +4046,12 @@ export default mixins(
 
 .node-input-endpoint-label,
 .node-output-endpoint-label {
-	background-color: hsla(var(--color-canvas-background-h), var(--color-canvas-background-s), var(--color-canvas-background-l), .85);
+	background-color: hsla(
+		var(--color-canvas-background-h),
+		var(--color-canvas-background-s),
+		var(--color-canvas-background-l),
+		0.85
+	);
 	border-radius: 7px;
 	font-size: 0.7em;
 	padding: 2px;
@@ -3703,7 +4067,7 @@ export default mixins(
 		display: block !important;
 	}
 
-	>div {
+	> div {
 		color: var(--color-foreground-xdark);
 		border: 2px solid var(--color-foreground-xdark);
 		background-color: var(--color-background-xlight);
@@ -3741,7 +4105,6 @@ export default mixins(
 </style>
 
 <style module lang="scss">
-
 .content {
 	position: relative;
 	display: flex;
@@ -3754,21 +4117,25 @@ export default mixins(
 }
 
 @keyframes shake {
-	10%, 90% {
-    transform: translate3d(-1px, 0, 0);
-  }
+	10%,
+	90% {
+		transform: translate3d(-1px, 0, 0);
+	}
 
-  20%, 80% {
-    transform: translate3d(2px, 0, 0);
-  }
+	20%,
+	80% {
+		transform: translate3d(2px, 0, 0);
+	}
 
-  30%, 50%, 70% {
-    transform: translate3d(-4px, 0, 0);
-  }
+	30%,
+	50%,
+	70% {
+		transform: translate3d(-4px, 0, 0);
+	}
 
-  40%, 60% {
-    transform: translate3d(4px, 0, 0);
-  }
+	40%,
+	60% {
+		transform: translate3d(4px, 0, 0);
+	}
 }
-
 </style>
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index 2468355cbf..cc86f6cd9c 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -3,7 +3,7 @@
 		<div :class="$style.header">
 			<n8n-heading size="2xlarge">
 				{{ $locale.baseText('settings.api') }}
-				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)', }">
+				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
 					({{ $locale.baseText('beta') }})
 				</span>
 			</n8n-heading>
@@ -57,7 +57,11 @@
 		</div>
 		<n8n-action-box
 			v-else-if="mounted"
-			:buttonText="$locale.baseText(loading ? 'settings.api.create.button.loading' : 'settings.api.create.button')"
+			:buttonText="
+				$locale.baseText(
+					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
+				)
+			"
 			:description="$locale.baseText('settings.api.create.description')"
 			@click="createApiKey"
 		/>
@@ -75,9 +79,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useUsersStore } from '@/stores/users';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'SettingsPersonalView',
 	components: {
 		CopyInput,
@@ -98,11 +100,7 @@ export default mixins(
 		this.apiPlaygroundPath = `${baseUrl}${apiPath}/v${latestVersion}/docs`;
 	},
 	computed: {
-		...mapStores(
-			useRootStore,
-			useSettingsStore,
-			useUsersStore,
-		),
+		...mapStores(useRootStore, useSettingsStore, useUsersStore),
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
@@ -122,7 +120,7 @@ export default mixins(
 		},
 		async getApiKey() {
 			try {
-				this.apiKey = await this.settingsStore.getApiKey() || '';
+				this.apiKey = (await this.settingsStore.getApiKey()) || '';
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.api.view.error'));
 			} finally {
@@ -133,7 +131,7 @@ export default mixins(
 			this.loading = true;
 
 			try {
-				this.apiKey = await this.settingsStore.createApiKey() || '';
+				this.apiKey = (await this.settingsStore.createApiKey()) || '';
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.api.create.error'));
 			} finally {
@@ -144,7 +142,10 @@ export default mixins(
 		async deleteApiKey() {
 			try {
 				await this.settingsStore.deleteApiKey();
-				this.$showMessage({ title: this.$locale.baseText("settings.api.delete.toast"), type: 'success' });
+				this.$showMessage({
+					title: this.$locale.baseText('settings.api.delete.toast'),
+					type: 'success',
+				});
 				this.apiKey = '';
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.api.delete.error'));
@@ -191,4 +192,3 @@ export default mixins(
 	color: var(--color-text-light);
 }
 </style>
-
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index d9b6ec1d54..cfa3591b67 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -3,7 +3,11 @@
 		<div :class="$style.headingContainer">
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
 			<n8n-button
-				v-if="!settingsStore.isQueueModeEnabled && communityNodesStore.getInstalledPackages.length > 0 && !loading"
+				v-if="
+					!settingsStore.isQueueModeEnabled &&
+					communityNodesStore.getInstalledPackages.length > 0 &&
+					!loading
+				"
 				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
 				size="large"
 				@click="openInstallModal"
@@ -17,10 +21,7 @@
 				:calloutTheme="actionBoxConfig.calloutTheme"
 			/>
 		</div>
-		<div
-			:class="$style.cardsContainer"
-			v-else-if="loading"
-		>
+		<div :class="$style.cardsContainer" v-else-if="loading">
 			<community-package-card
 				v-for="n in 2"
 				:key="'index-' + n"
@@ -44,10 +45,7 @@
 				@click="openInstallModal"
 			/>
 		</div>
-		<div
-			:class="$style.cardsContainer"
-			v-else
-		>
+		<div :class="$style.cardsContainer" v-else>
 			<community-package-card
 				v-for="communityPackage in communityNodesStore.getInstalledPackages"
 				:key="communityPackage.packageName"
@@ -75,14 +73,12 @@ import { useSettingsStore } from '@/stores/settings';
 
 const PACKAGE_COUNT_THRESHOLD = 31;
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'SettingsCommunityNodesView',
 	components: {
 		CommunityPackageCard,
 	},
-	data () {
+	data() {
 		return {
 			loading: false,
 		};
@@ -92,19 +88,22 @@ export default mixins(
 			this.$data.loading = true;
 			await this.communityNodesStore.fetchInstalledPackages();
 
-			const installedPackages: PublicInstalledPackage[] = this.communityNodesStore.getInstalledPackages;
-			const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter(p => p.updateAvailable );
+			const installedPackages: PublicInstalledPackage[] =
+				this.communityNodesStore.getInstalledPackages;
+			const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter(
+				(p) => p.updateAvailable,
+			);
 			this.$telemetry.track('user viewed cnr settings page', {
 				num_of_packages_installed: installedPackages.length,
-				installed_packages: installedPackages.map(p => {
+				installed_packages: installedPackages.map((p) => {
 					return {
 						package_name: p.packageName,
 						package_version: p.installedVersion,
-						package_nodes: p.installedNodes.map(node => `${node.name}-v${node.latestVersion}`),
+						package_nodes: p.installedNodes.map((node) => `${node.name}-v${node.latestVersion}`),
 						is_update_available: p.updateAvailable !== undefined,
 					};
 				}),
-				packages_to_update: packagesToUpdate.map(p => {
+				packages_to_update: packagesToUpdate.map((p) => {
 					return {
 						package_name: p.packageName,
 						package_version_current: p.installedVersion,
@@ -129,25 +128,21 @@ export default mixins(
 		}
 	},
 	computed: {
-		...mapStores(
-			useCommunityNodesStore,
-			useSettingsStore,
-			useUIStore,
-		),
+		...mapStores(useCommunityNodesStore, useSettingsStore, useUIStore),
 		getEmptyStateDescription() {
 			const packageCount = this.communityNodesStore.availablePackageCount;
-			return  packageCount < PACKAGE_COUNT_THRESHOLD ?
-				this.$locale.baseText('settings.communityNodes.empty.description.no-packages', {
-					interpolate: {
-						docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-					},
-				}) :
-				this.$locale.baseText('settings.communityNodes.empty.description', {
-					interpolate: {
-						docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-						count: (Math.floor(packageCount / 10) * 10).toString(),
-					},
-				});
+			return packageCount < PACKAGE_COUNT_THRESHOLD
+				? this.$locale.baseText('settings.communityNodes.empty.description.no-packages', {
+						interpolate: {
+							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+						},
+				  })
+				: this.$locale.baseText('settings.communityNodes.empty.description', {
+						interpolate: {
+							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+							count: (Math.floor(packageCount / 10) * 10).toString(),
+						},
+				  });
 		},
 		shouldShowInstallButton() {
 			return !this.settingsStore.isDesktopDeployment && this.settingsStore.isNpmAvailable;
@@ -163,10 +158,9 @@ export default mixins(
 
 			if (!this.settingsStore.isNpmAvailable) {
 				return {
-					calloutText: this.$locale.baseText(
-						'settings.communityNodes.npmUnavailable.warning',
-						{ interpolate: { npmUrl: COMMUNITY_NODES_NPM_INSTALLATION_URL } },
-					),
+					calloutText: this.$locale.baseText('settings.communityNodes.npmUnavailable.warning', {
+						interpolate: { npmUrl: COMMUNITY_NODES_NPM_INSTALLATION_URL },
+					}),
 					calloutTheme: 'warning',
 					hideButton: true,
 				};
@@ -174,10 +168,9 @@ export default mixins(
 
 			if (this.settingsStore.isQueueModeEnabled) {
 				return {
-					calloutText: this.$locale.baseText(
-						'settings.communityNodes.queueMode.warning',
-						{ interpolate: { docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL } },
-					),
+					calloutText: this.$locale.baseText('settings.communityNodes.queueMode.warning', {
+						interpolate: { docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL },
+					}),
 					calloutTheme: 'warning',
 					hideButton: true,
 				};
@@ -192,7 +185,9 @@ export default mixins(
 	},
 	methods: {
 		openInstallModal(event: MouseEvent) {
-			const telemetryPayload = { is_empty_state: this.communityNodesStore.getInstalledPackages.length === 0 };
+			const telemetryPayload = {
+				is_empty_state: this.communityNodesStore.getInstalledPackages.length === 0,
+			};
 			this.$telemetry.track('user clicked cnr install button', telemetryPayload);
 			this.$externalHooks().run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
 			this.uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
@@ -202,31 +197,31 @@ export default mixins(
 </script>
 
 <style lang="scss" module>
-	.container {
-		height: 100%;
-		padding-right: var(--spacing-2xs);
-		> * {
-			margin-bottom: var(--spacing-2xl);
-		}
+.container {
+	height: 100%;
+	padding-right: var(--spacing-2xs);
+	> * {
+		margin-bottom: var(--spacing-2xl);
 	}
+}
 
-	.headingContainer {
-		display: flex;
-		justify-content: space-between;
-	}
+.headingContainer {
+	display: flex;
+	justify-content: space-between;
+}
 
-	.loadingContainer {
-		display: flex;
-		gap: var(--spacing-xs);
-	}
+.loadingContainer {
+	display: flex;
+	gap: var(--spacing-xs);
+}
 
-	.actionBoxContainer {
-		text-align: center;
-	}
+.actionBoxContainer {
+	text-align: center;
+}
 
-	.cardsContainer {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-2xs);
-	}
+.cardsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2xs);
+}
 </style>
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index f3ecb67767..2df26ff258 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -22,7 +22,7 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapStores(useUIStore),
-		featureInfo(): IFakeDoor|undefined {
+		featureInfo(): IFakeDoor | undefined {
 			return this.uiStore.getFakeDoorById(this.featureId);
 		},
 	},
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 2fb4f43176..374d34797e 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -1,17 +1,25 @@
 <template>
 	<div :class="$style.container">
 		<div :class="$style.header">
-			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.personal.personalSettings') }}</n8n-heading>
+			<n8n-heading size="2xlarge">{{
+				$locale.baseText('settings.personal.personalSettings')
+			}}</n8n-heading>
 			<div class="ph-no-capture" :class="$style.user">
 				<span :class="$style.username">
-					<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
+					<n8n-text color="text-light">{{ currentUser.fullName }}</n8n-text>
 				</span>
-				<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="large" />
+				<n8n-avatar
+					:firstName="currentUser.firstName"
+					:lastName="currentUser.lastName"
+					size="large"
+				/>
 			</div>
 		</div>
 		<div>
 			<div :class="$style.sectionHeader">
-				<n8n-heading size="large">{{ $locale.baseText('settings.personal.basicInformation') }}</n8n-heading>
+				<n8n-heading size="large">{{
+					$locale.baseText('settings.personal.basicInformation')
+				}}</n8n-heading>
 			</div>
 			<div>
 				<n8n-form-inputs
@@ -30,15 +38,22 @@
 			</div>
 			<div>
 				<n8n-input-label :label="$locale.baseText('auth.password')">
-					<n8n-link @click="openPasswordModal">{{ $locale.baseText('auth.changePassword') }}</n8n-link>
+					<n8n-link @click="openPasswordModal">{{
+						$locale.baseText('auth.changePassword')
+					}}</n8n-link>
 				</n8n-input-label>
 			</div>
 		</div>
 		<div>
-			<n8n-button float="right" :label="$locale.baseText('settings.personal.save')" size="large" :disabled="!hasAnyChanges || !readyToSubmit" @click="onSaveClick" />
+			<n8n-button
+				float="right"
+				:label="$locale.baseText('settings.personal.save')"
+				size="large"
+				:disabled="!hasAnyChanges || !readyToSubmit"
+				@click="onSaveClick"
+			/>
 		</div>
 	</div>
-
 </template>
 
 <script lang="ts">
@@ -51,9 +66,7 @@ import { mapStores } from 'pinia';
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'SettingsPersonalView',
 	data() {
 		return {
@@ -94,7 +107,7 @@ export default mixins(
 					label: this.$locale.baseText('auth.email'),
 					type: 'email',
 					required: true,
-					validationRules: [{name: 'VALID_EMAIL'}],
+					validationRules: [{ name: 'VALID_EMAIL' }],
 					autocomplete: 'email',
 					capitalize: true,
 				},
@@ -102,10 +115,7 @@ export default mixins(
 		];
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useUIStore, useUsersStore),
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
@@ -117,7 +127,7 @@ export default mixins(
 		onReadyToSubmit(ready: boolean) {
 			this.readyToSubmit = ready;
 		},
-		async onSubmit(form: {firstName: string, lastName: string, email: string}) {
+		async onSubmit(form: { firstName: string; lastName: string; email: string }) {
 			if (!this.hasAnyChanges || !this.usersStore.currentUserId) {
 				return;
 			}
@@ -134,8 +144,7 @@ export default mixins(
 					type: 'success',
 				});
 				this.hasAnyChanges = false;
-			}
-			catch (e) {
+			} catch (e) {
 				this.$showError(e, this.$locale.baseText('settings.personal.personalSettingsUpdatedError'));
 			}
 		},
@@ -176,7 +185,6 @@ export default mixins(
 	}
 }
 
-
 .username {
 	margin-right: var(--spacing-s);
 	text-align: right;
@@ -192,4 +200,3 @@ export default mixins(
 	margin-bottom: var(--spacing-s);
 }
 </style>
-
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 5262dc97e9..cb16acf6d3 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -3,22 +3,27 @@
 		<div>
 			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
 			<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
-					<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
-						<template #content>
-							<i18n path="settings.users.setupSMTPToInviteUsers" tag="span">
-								<template #action>
-									<a
-										href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
-										target="_blank"
-										v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
-									/>
-								</template>
-							</i18n>
-						</template>
-						<div>
-							<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
-						</div>
-					</n8n-tooltip>
+				<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
+					<template #content>
+						<i18n path="settings.users.setupSMTPToInviteUsers" tag="span">
+							<template #action>
+								<a
+									href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
+									target="_blank"
+									v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
+								/>
+							</template>
+						</i18n>
+					</template>
+					<div>
+						<n8n-button
+							:label="$locale.baseText('settings.users.invite')"
+							@click="onInvite"
+							size="large"
+							:disabled="!settingsStore.isSmtpSetup"
+						/>
+					</div>
+				</n8n-tooltip>
 			</div>
 		</div>
 		<div v-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
@@ -35,7 +40,12 @@
 				:message="$locale.baseText('settings.users.smtpToAddUsersWarning')"
 				:popupClass="$style.alert"
 			/>
-			<n8n-users-list :users="usersStore.allUsers" :currentUserId="usersStore.currentUserId" @delete="onDelete" @reinvite="onReinvite" />
+			<n8n-users-list
+				:users="usersStore.allUsers"
+				:currentUserId="usersStore.currentUserId"
+				@delete="onDelete"
+				@reinvite="onReinvite"
+			/>
 		</div>
 	</div>
 </template>
@@ -63,15 +73,11 @@ export default mixins(showMessage).extend({
 		}
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useSettingsStore, useUIStore, useUsersStore),
 	},
 	methods: {
 		redirectToSetup() {
-			this.$router.push({name: VIEWS.SETUP});
+			this.$router.push({ name: VIEWS.SETUP });
 		},
 		onInvite() {
 			this.uiStore.openModal(INVITE_USER_MODAL_KEY);
@@ -91,10 +97,9 @@ export default mixins(showMessage).extend({
 					this.$showToast({
 						type: 'success',
 						title: this.$locale.baseText('settings.users.inviteResent'),
-						message: this.$locale.baseText(
-							'settings.users.emailSentTo',
-							{ interpolate: { email: user.email || '' } },
-						),
+						message: this.$locale.baseText('settings.users.emailSentTo', {
+							interpolate: { email: user.email || '' },
+						}),
 					});
 				} catch (e) {
 					this.$showError(e, this.$locale.baseText('settings.users.userReinviteError'));
@@ -136,5 +141,4 @@ export default mixins(showMessage).extend({
 .alert {
 	left: calc(50% + 100px);
 }
-
 </style>
diff --git a/packages/editor-ui/src/views/SettingsView.vue b/packages/editor-ui/src/views/SettingsView.vue
index 43002ecc21..a5016ce6a9 100644
--- a/packages/editor-ui/src/views/SettingsView.vue
+++ b/packages/editor-ui/src/views/SettingsView.vue
@@ -26,7 +26,7 @@ const SettingsView = defineComponent({
 		SettingsSidebar,
 	},
 	beforeRouteEnter(to, from, next) {
-		next(vm => {
+		next((vm) => {
 			(vm as unknown as InstanceType<typeof SettingsView>).previousRoute = from;
 		});
 	},
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index 2aa815436a..2e33cd8a48 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -22,11 +22,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useCredentialsStore } from '@/stores/credentials';
 
-
-export default mixins(
-	showMessage,
-	restApi,
-).extend({
+export default mixins(showMessage, restApi).extend({
 	name: 'SetupView',
 	components: {
 		AuthView,
@@ -103,12 +99,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useCredentialsStore, useSettingsStore, useUIStore, useUsersStore),
 	},
 	methods: {
 		async getAllCredentials() {
@@ -124,21 +115,26 @@ export default mixins(
 				return true;
 			}
 
-			const workflows = this.workflowsCount > 0
-				? this.$locale.baseText(
-					'auth.setup.setupConfirmation.existingWorkflows',
-					{ adjustToNumber: this.workflowsCount },
-				)
-				: '';
+			const workflows =
+				this.workflowsCount > 0
+					? this.$locale.baseText('auth.setup.setupConfirmation.existingWorkflows', {
+							adjustToNumber: this.workflowsCount,
+					  })
+					: '';
 
-			const credentials = this.credentialsCount > 0
-				? this.$locale.baseText(
-					'auth.setup.setupConfirmation.credentials',
-					{ adjustToNumber: this.credentialsCount },
-				)
-				: '';
+			const credentials =
+				this.credentialsCount > 0
+					? this.$locale.baseText('auth.setup.setupConfirmation.credentials', {
+							adjustToNumber: this.credentialsCount,
+					  })
+					: '';
 
-			const entities = workflows && credentials ? this.$locale.baseText('auth.setup.setupConfirmation.concatEntities', {interpolate: { workflows, credentials }}) : (workflows || credentials);
+			const entities =
+				workflows && credentials
+					? this.$locale.baseText('auth.setup.setupConfirmation.concatEntities', {
+							interpolate: { workflows, credentials },
+					  })
+					: workflows || credentials;
 			return await this.confirmMessage(
 				this.$locale.baseText('auth.setup.confirmOwnerSetupMessage', {
 					interpolate: {
@@ -151,7 +147,7 @@ export default mixins(
 				this.$locale.baseText('auth.setup.goBack'),
 			);
 		},
-		async onSubmit(values: {[key: string]: string | boolean}) {
+		async onSubmit(values: { [key: string]: string | boolean }) {
 			try {
 				const confirmSetup = await this.confirmSetupOrGoBack();
 				if (!confirmSetup) {
@@ -160,21 +156,21 @@ export default mixins(
 
 				const forceRedirectedHere = this.settingsStore.showSetupPage;
 				this.loading = true;
-				await this.usersStore.createOwner(values as { firstName: string; lastName: string; email: string; password: string;});
+				await this.usersStore.createOwner(
+					values as { firstName: string; lastName: string; email: string; password: string },
+				);
 
 				if (values.agree === true) {
 					try {
 						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
-					} catch { }
+					} catch {}
 				}
 
 				if (forceRedirectedHere) {
 					await this.$router.push({ name: VIEWS.HOMEPAGE });
-				}
-				else {
+				} else {
 					await this.$router.push({ name: VIEWS.USERS_SETTINGS });
 				}
-
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.setup.settingUpOwnerError'));
 			}
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index 947597dc7a..2a0e015e51 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -17,9 +17,7 @@ import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'SigninView',
 	components: {
 		AuthView,
@@ -68,16 +66,17 @@ export default mixins(
 		...mapStores(useUsersStore),
 	},
 	methods: {
-		async onSubmit(values: {[key: string]: string}) {
+		async onSubmit(values: { [key: string]: string }) {
 			try {
 				this.loading = true;
-				await this.usersStore.loginWithCreds(values as {email: string, password: string});
+				await this.usersStore.loginWithCreds(values as { email: string; password: string });
 				this.clearAllStickyNotifications();
 				this.loading = false;
 
 				if (typeof this.$route.query.redirect === 'string') {
 					const redirect = decodeURIComponent(this.$route.query.redirect);
-					if (redirect.startsWith('/')) { // protect against phishing
+					if (redirect.startsWith('/')) {
+						// protect against phishing
 						this.$router.push(redirect);
 
 						return;
diff --git a/packages/editor-ui/src/views/SignupView.vue b/packages/editor-ui/src/views/SignupView.vue
index 44ebebf100..58c2353188 100644
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/packages/editor-ui/src/views/SignupView.vue
@@ -18,9 +18,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
 
-export default mixins(
-	showMessage,
-).extend({
+export default mixins(showMessage).extend({
 	name: 'SignupView',
 	components: {
 		AuthView,
@@ -74,14 +72,20 @@ export default mixins(
 		return {
 			FORM_CONFIG,
 			loading: false,
-			inviter: null as null | {firstName: string, lastName: string},
+			inviter: null as null | { firstName: string; lastName: string },
 			inviterId: null as string | null,
 			inviteeId: null as string | null,
 		};
 	},
 	async mounted() {
-		const inviterId = (!this.$route.query.inviterId || typeof this.$route.query.inviterId !== 'string') ? null : this.$route.query.inviterId;
-		const inviteeId = (!this.$route.query.inviteeId || typeof this.$route.query.inviteeId !== 'string') ? null : this.$route.query.inviteeId;
+		const inviterId =
+			!this.$route.query.inviterId || typeof this.$route.query.inviterId !== 'string'
+				? null
+				: this.$route.query.inviterId;
+		const inviteeId =
+			!this.$route.query.inviteeId || typeof this.$route.query.inviteeId !== 'string'
+				? null
+				: this.$route.query.inviteeId;
 		try {
 			if (!inviterId || !inviteeId) {
 				throw new Error(this.$locale.baseText('auth.signup.missingTokenError'));
@@ -90,43 +94,52 @@ export default mixins(
 			this.inviteeId = inviteeId;
 
 			const invite = await this.usersStore.validateSignupToken({ inviteeId, inviterId });
-			this.inviter = invite.inviter as {firstName: string, lastName: string};
+			this.inviter = invite.inviter as { firstName: string; lastName: string };
 		} catch (e) {
 			this.$showError(e, this.$locale.baseText('auth.signup.tokenValidationError'));
-			this.$router.replace({name: VIEWS.SIGNIN});
+			this.$router.replace({ name: VIEWS.SIGNIN });
 		}
 	},
 	computed: {
-		...mapStores(
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useUIStore, useUsersStore),
 		inviteMessage(): null | string {
 			if (!this.inviter) {
 				return null;
 			}
 
-			return this.$locale.baseText(
-				'settings.signup.signUpInviterInfo',
-				{ interpolate: { firstName: this.inviter.firstName, lastName: this.inviter.lastName }},
-			);
+			return this.$locale.baseText('settings.signup.signUpInviterInfo', {
+				interpolate: { firstName: this.inviter.firstName, lastName: this.inviter.lastName },
+			});
 		},
 	},
 	methods: {
-		async onSubmit(values: {[key: string]: string | boolean}) {
+		async onSubmit(values: { [key: string]: string | boolean }) {
 			if (!this.inviterId || !this.inviteeId) {
-				this.$showError(new Error(this.$locale.baseText('auth.changePassword.tokenValidationError')), this.$locale.baseText('auth.signup.setupYourAccountError'));
+				this.$showError(
+					new Error(this.$locale.baseText('auth.changePassword.tokenValidationError')),
+					this.$locale.baseText('auth.signup.setupYourAccountError'),
+				);
 				return;
 			}
 
 			try {
 				this.loading = true;
-				await this.usersStore.signup({...values, inviterId: this.inviterId,  inviteeId: this.inviteeId} as { inviteeId: string; inviterId: string; firstName: string; lastName: string; password: string;});
+				await this.usersStore.signup({
+					...values,
+					inviterId: this.inviterId,
+					inviteeId: this.inviteeId,
+				} as {
+					inviteeId: string;
+					inviterId: string;
+					firstName: string;
+					lastName: string;
+					password: string;
+				});
 
 				if (values.agree === true) {
 					try {
 						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
-					} catch { }
+					} catch {}
 				}
 
 				await this.$router.push({ name: VIEWS.HOMEPAGE });
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 3823f5d921..fbe29bb8e9 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -13,7 +13,9 @@
 				</div>
 			</div>
 			<div :class="$style.notFound" v-else>
-				<n8n-text color="text-base">{{ $locale.baseText('templates.collectionsNotFound') }}</n8n-text>
+				<n8n-text color="text-base">{{
+					$locale.baseText('templates.collectionsNotFound')
+				}}</n8n-text>
 			</div>
 		</template>
 		<template v-if="!notFoundError" #content>
@@ -74,9 +76,7 @@ export default mixins(workflowHelpers).extend({
 		TemplatesView,
 	},
 	computed: {
-		...mapStores(
-			useTemplatesStore,
-		),
+		...mapStores(useTemplatesStore),
 		collection(): null | ITemplatesCollectionFull {
 			return this.templatesStore.getCollectionById(this.collectionId);
 		},
@@ -110,10 +110,10 @@ export default mixins(workflowHelpers).extend({
 				}
 			}, 50);
 		},
-		onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
+		onOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {
 			this.navigateTo(event, VIEWS.TEMPLATE, id);
 		},
-		onUseWorkflow({event, id}: {event: MouseEvent, id: string}) {
+		onUseWorkflow({ event, id }: { event: MouseEvent; id: string }) {
 			const telemetryPayload = {
 				template_id: id,
 				wf_template_repo_session_id: this.workflowsStore.currentSessionId,
@@ -138,8 +138,7 @@ export default mixins(workflowHelpers).extend({
 		collection(collection: ITemplatesCollection) {
 			if (collection) {
 				setPageTitle(`n8n - Template collection: ${collection.name}`);
-			}
-			else {
+			} else {
 				setPageTitle(`n8n - Templates`);
 			}
 		},
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 92cb609f48..4fb65f0821 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -81,7 +81,12 @@ import TemplateList from '@/components/TemplateList.vue';
 import TemplatesView from './TemplatesView.vue';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
-import { ITemplatesCollection, ITemplatesWorkflow, ITemplatesQuery, ITemplatesCategory } from '@/Interface';
+import {
+	ITemplatesCollection,
+	ITemplatesWorkflow,
+	ITemplatesQuery,
+	ITemplatesCategory,
+} from '@/Interface';
 import mixins from 'vue-typed-mixins';
 import { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/utils';
@@ -123,12 +128,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		};
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useTemplatesStore,
-			useUIStore,
-			useUsersStore,
-		),
+		...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore),
 		totalWorkflows(): number {
 			return this.templatesStore.getSearchedWorkflowsTotal(this.query);
 		},
@@ -145,7 +145,11 @@ export default mixins(genericHelpers, debounceHelper).extend({
 			if (this.workflows.length && this.workflows.length >= this.totalWorkflows) {
 				return this.$locale.baseText('templates.endResult');
 			}
-			if (!this.loadingCollections && this.workflows.length === 0 && this.collections.length === 0) {
+			if (
+				!this.loadingCollections &&
+				this.workflows.length === 0 &&
+				this.collections.length === 0
+			) {
 				if (!this.settingsStore.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {
 					return this.$locale.baseText('templates.connectionWarning');
 				}
@@ -170,10 +174,10 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		},
 	},
 	methods: {
-		onOpenCollection({event, id}: {event: MouseEvent, id: string}) {
+		onOpenCollection({ event, id }: { event: MouseEvent; id: string }) {
 			this.navigateTo(event, VIEWS.COLLECTION, id);
 		},
-		onOpenTemplate({event, id}: {event: MouseEvent, id: string}) {
+		onOpenTemplate({ event, id }: { event: MouseEvent; id: string }) {
 			this.navigateTo(event, VIEWS.TEMPLATE, id);
 		},
 		navigateTo(e: MouseEvent, page: string, id: string) {
@@ -209,7 +213,10 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		},
 		trackSearch() {
 			if (this.searchEventToTrack) {
-				this.$telemetry.track('User searched workflow templates', this.searchEventToTrack as unknown as IDataObject);
+				this.$telemetry.track(
+					'User searched workflow templates',
+					this.searchEventToTrack as unknown as IDataObject,
+				);
 				this.searchEventToTrack = null;
 			}
 		},
@@ -292,7 +299,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		async loadCategories() {
 			try {
 				await this.templatesStore.getCategories();
-			} catch (e) { }
+			} catch (e) {}
 			this.loadingCategories = false;
 		},
 		async loadCollections() {
@@ -302,8 +309,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 					categories: this.categories,
 					search: this.search,
 				});
-			} catch (e) {
-			}
+			} catch (e) {}
 
 			this.loadingCollections = false;
 		},
@@ -352,7 +358,11 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		const contentArea = document.getElementById('content');
 		if (contentArea) {
 			// When leaving this page, store current scroll position in route data
-			if (this.$route.meta && this.$route.meta.setScrollPosition && typeof this.$route.meta.setScrollPosition === 'function') {
+			if (
+				this.$route.meta &&
+				this.$route.meta.setScrollPosition &&
+				typeof this.$route.meta.setScrollPosition === 'function'
+			) {
 				this.$route.meta.setScrollPosition(contentArea.scrollTop);
 			}
 		}
@@ -379,7 +389,9 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		}
 
 		if (typeof this.$route.query.categories === 'string' && this.$route.query.categories.length) {
-			this.categories = this.$route.query.categories.split(',').map((categoryId) => parseInt(categoryId, 10));
+			this.categories = this.$route.query.categories
+				.split(',')
+				.map((categoryId) => parseInt(categoryId, 10));
 			this.areCategoriesPrepopulated = true;
 		}
 	},
@@ -422,5 +434,4 @@ export default mixins(genericHelpers, debounceHelper).extend({
 .header {
 	margin-bottom: var(--spacing-2xs);
 }
-
 </style>
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index ba78f2d4f3..3c5496cc3e 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -75,9 +75,7 @@ export default mixins(workflowHelpers).extend({
 		WorkflowPreview,
 	},
 	computed: {
-		...mapStores(
-			useTemplatesStore,
-		),
+		...mapStores(useTemplatesStore),
 		template(): ITemplatesWorkflow | ITemplatesWorkflowFull {
 			return this.templatesStore.getTemplateById(this.templateId);
 		},
@@ -128,8 +126,7 @@ export default mixins(workflowHelpers).extend({
 		template(template: ITemplatesWorkflowFull) {
 			if (template) {
 				setPageTitle(`n8n - Template template: ${template.name}`);
-			}
-			else {
+			} else {
 				setPageTitle(`n8n - Templates`);
 			}
 		},
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index 163d16b8e3..2c984dd2f0 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -17,20 +17,37 @@
 		<template #empty>
 			<div class="text-center mt-s">
 				<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
-					{{ $locale.baseText(currentUser.firstName ? 'workflows.empty.heading' : 'workflows.empty.heading.userNotSetup', { interpolate: { name: currentUser.firstName } }) }}
+					{{
+						$locale.baseText(
+							currentUser.firstName
+								? 'workflows.empty.heading'
+								: 'workflows.empty.heading.userNotSetup',
+							{ interpolate: { name: currentUser.firstName } },
+						)
+					}}
 				</n8n-heading>
 				<n8n-text size="large" color="text-base">
 					{{ $locale.baseText('workflows.empty.description') }}
 				</n8n-text>
 			</div>
 			<div class="text-center mt-2xl">
-				<n8n-card :class="[$style.emptyStateCard, 'mr-s']" hoverable @click="addWorkflow" data-test-id="new-workflow-card">
+				<n8n-card
+					:class="[$style.emptyStateCard, 'mr-s']"
+					hoverable
+					@click="addWorkflow"
+					data-test-id="new-workflow-card"
+				>
 					<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
 					<n8n-text size="large" class="mt-xs" color="text-base">
 						{{ $locale.baseText('workflows.empty.startFromScratch') }}
 					</n8n-text>
 				</n8n-card>
-				<n8n-card :class="$style.emptyStateCard" hoverable @click="goToTemplates" data-test-id="new-workflow-template-card">
+				<n8n-card
+					:class="$style.emptyStateCard"
+					hoverable
+					@click="goToTemplates"
+					data-test-id="new-workflow-template-card"
+				>
 					<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
 					<n8n-text size="large" class="mt-xs" color="text-base">
 						{{ $locale.baseText('workflows.empty.browseTemplates') }}
@@ -67,7 +84,8 @@
 						v-for="option in statusFilterOptions"
 						:key="option.label"
 						:label="option.label"
-						:value="option.value">
+						:value="option.value"
+					>
 					</n8n-option>
 				</n8n-select>
 			</div>
@@ -76,20 +94,20 @@
 </template>
 
 <script lang="ts">
-import {showMessage} from '@/mixins/showMessage';
+import { showMessage } from '@/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 
 import SettingsView from './SettingsView.vue';
-import ResourcesListLayout from "@/components/layouts/ResourcesListLayout.vue";
-import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
-import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
-import WorkflowCard from "@/components/WorkflowCard.vue";
-import TemplateCard from "@/components/TemplateCard.vue";
-import {EnterpriseEditionFeature, VIEWS} from '@/constants';
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
+import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
+import WorkflowCard from '@/components/WorkflowCard.vue';
+import TemplateCard from '@/components/TemplateCard.vue';
+import { EnterpriseEditionFeature, VIEWS } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
-import Vue from "vue";
-import {ITag, IUser, IWorkflowDb} from "@/Interface";
-import TagsDropdown from "@/components/TagsDropdown.vue";
+import Vue from 'vue';
+import { ITag, IUser, IWorkflowDb } from '@/Interface';
+import TagsDropdown from '@/components/TagsDropdown.vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
@@ -104,10 +122,7 @@ const StatusFilter = {
 	ALL: '',
 };
 
-export default mixins(
-	showMessage,
-	debounceHelper,
-).extend({
+export default mixins(showMessage, debounceHelper).extend({
 	name: 'WorkflowsView',
 	components: {
 		ResourcesListLayout,
@@ -130,22 +145,19 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapStores(
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-			useWorkflowsStore,
-		),
+		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore),
 		currentUser(): IUser {
-			return this.usersStore.currentUser || {} as IUser;
+			return this.usersStore.currentUser || ({} as IUser);
 		},
 		allWorkflows(): IWorkflowDb[] {
 			return this.workflowsStore.allWorkflows;
 		},
 		isShareable(): boolean {
-			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing);
+			return this.settingsStore.isEnterpriseFeatureEnabled(
+				EnterpriseEditionFeature.WorkflowSharing,
+			);
 		},
-		statusFilterOptions(): Array<{ label: string, value: string | boolean }> {
+		statusFilterOptions(): Array<{ label: string; value: string | boolean }> {
 			return [
 				{
 					label: this.$locale.baseText('workflows.filters.status.all'),
@@ -187,11 +199,21 @@ export default mixins(
 				this.filters.tags.push(tagId);
 			}
 		},
-		onFilter(resource: IWorkflowDb, filters: { tags: string[]; search: string; status: string | boolean }, matches: boolean): boolean {
+		onFilter(
+			resource: IWorkflowDb,
+			filters: { tags: string[]; search: string; status: string | boolean },
+			matches: boolean,
+		): boolean {
 			if (this.settingsStore.areTagsEnabled && filters.tags.length > 0) {
-				matches = matches && filters.tags.every(
-					(tag) => (resource.tags as ITag[])?.find((resourceTag) => typeof resourceTag === 'object' ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`),
-				);
+				matches =
+					matches &&
+					filters.tags.every((tag) =>
+						(resource.tags as ITag[])?.find((resourceTag) =>
+							typeof resourceTag === 'object'
+								? `${resourceTag.id}` === `${tag}`
+								: `${resourceTag}` === `${tag}`,
+						),
+					);
 			}
 
 			if (filters.status !== '') {
@@ -233,10 +255,9 @@ export default mixins(
 	font-size: 48px;
 
 	svg {
-		width: 48px!important;
+		width: 48px !important;
 		color: var(--color-foreground-dark);
-		transition: color 0.3s ease;}
+		transition: color 0.3s ease;
+	}
 }
 </style>
-
-
diff --git a/packages/editor-ui/tslint.json b/packages/editor-ui/tslint.json
index 9f199670bc..e689068038 100644
--- a/packages/editor-ui/tslint.json
+++ b/packages/editor-ui/tslint.json
@@ -1,18 +1,11 @@
 {
 	"linterOptions": {
-		"exclude": [
-			"node_modules/**/*",
-			"../../node_modules/**/*",
-			"**/*.json"
-		]
+		"exclude": ["node_modules/**/*", "../../node_modules/**/*", "**/*.json"]
 	},
 	"defaultSeverity": "error",
 	"jsRules": {},
 	"rules": {
-		"array-type": [
-			true,
-			"array-simple"
-		],
+		"array-type": [true, "array-simple"],
 		"arrow-return-shorthand": true,
 		"ban": [
 			true,
@@ -23,36 +16,18 @@
 		],
 		"ban-types": [
 			true,
-			[
-				"Object",
-				"Use {} instead."
-			],
-			[
-				"String",
-				"Use 'string' instead."
-			],
-			[
-				"Number",
-				"Use 'number' instead."
-			],
-			[
-				"Boolean",
-				"Use 'boolean' instead."
-			]
+			["Object", "Use {} instead."],
+			["String", "Use 'string' instead."],
+			["Number", "Use 'number' instead."],
+			["Boolean", "Use 'boolean' instead."]
 		],
 		"class-name": true,
-		"curly": [
-			true,
-			"ignore-same-line"
-		],
+		"curly": [true, "ignore-same-line"],
 		"forin": true,
 		"jsdoc-format": true,
 		"label-position": true,
 		"indent": [true, "tabs", 2],
-		"member-access": [
-			true,
-			"no-public"
-		],
+		"member-access": [true, "no-public"],
 		"new-parens": true,
 		"no-angle-bracket-type-assertion": true,
 		"no-any": true,
@@ -68,18 +43,10 @@
 		"no-unused-expression": true,
 		"no-var-keyword": true,
 		"object-literal-shorthand": true,
-		"only-arrow-functions": [
-			true,
-			"allow-declarations",
-			"allow-named-functions"
-		],
+		"only-arrow-functions": [true, "allow-declarations", "allow-named-functions"],
 		"prefer-const": true,
 		"radix": true,
-		"semicolon": [
-			true,
-			"always",
-			"ignore-bound-class-methods"
-		],
+		"semicolon": [true, "always", "ignore-bound-class-methods"],
 		"switch-default": true,
 		"trailing-comma": [
 			true,
@@ -93,15 +60,9 @@
 				"esSpecCompliant": true
 			}
 		],
-		"triple-equals": [
-			true,
-			"allow-null-check"
-		],
+		"triple-equals": [true, "allow-null-check"],
 		"use-isnan": true,
-		"quotes": [
-			"error",
-			"single"
-		],
+		"quotes": ["error", "single"],
 		"variable-name": [
 			true,
 			"check-format",
diff --git a/packages/editor-ui/vite.config.ts b/packages/editor-ui/vite.config.ts
index 72cc8565fc..7f2325b207 100644
--- a/packages/editor-ui/vite.config.ts
+++ b/packages/editor-ui/vite.config.ts
@@ -1,14 +1,19 @@
 import vue from '@vitejs/plugin-vue2';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import legacy from '@vitejs/plugin-legacy';
-import monacoEditorPlugin from "vite-plugin-monaco-editor";
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 import path, { resolve } from 'path';
-import {defineConfig, mergeConfig, PluginOption} from "vite";
+import { defineConfig, mergeConfig, PluginOption } from 'vite';
 import { defineConfig as defineVitestConfig } from 'vitest/config';
 import packageJSON from './package.json';
 
 const vendorChunks = ['vue', 'vue-router'];
-const ignoreChunks = ['vue2-boring-avatars', 'vue-template-compiler', 'jquery', '@fontsource/open-sans'];
+const ignoreChunks = [
+	'vue2-boring-avatars',
+	'vue-template-compiler',
+	'jquery',
+	'@fontsource/open-sans',
+];
 
 const isScopedPackageToIgnore = (str: string) => /@codemirror\//.test(str);
 
@@ -31,10 +36,10 @@ function renderChunks() {
 
 const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/';
 
-const lodashAliases = ['orderBy', 'camelCase', 'cloneDeep', 'isEqual'].map(name => ({
+const lodashAliases = ['orderBy', 'camelCase', 'cloneDeep', 'isEqual'].map((name) => ({
 	find: new RegExp(`^lodash.${name}$`, 'i'),
 	replacement: require.resolve(`lodash-es/${name}`),
-}))
+}));
 
 export default mergeConfig(
 	defineConfig({
@@ -43,16 +48,17 @@ export default mergeConfig(
 				targets: ['defaults', 'not IE 11'],
 			}),
 			vue(),
-			...createHtmlPlugin({
+			...(createHtmlPlugin({
 				inject: {
 					data: {
 						BASE_PATH: publicPath,
 					},
 				},
-			}) as PluginOption[],
+			}) as PluginOption[]),
 			monacoEditorPlugin({
 				publicPath: 'assets/monaco-editor',
-				customDistPath: (root: string, buildOutDir: string, base: string) => `${root}/${buildOutDir}/assets/monaco-editor`,
+				customDistPath: (root: string, buildOutDir: string, base: string) =>
+					`${root}/${buildOutDir}/assets/monaco-editor`,
 			}) as PluginOption,
 		],
 		resolve: {
@@ -74,7 +80,11 @@ export default mergeConfig(
 				},
 				{
 					find: /element-ui\/(packages|lib)\/button$/,
-					replacement: path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.ts'),
+					replacement: path.resolve(
+						__dirname,
+						'..',
+						'design-system/src/components/N8nButton/overrides/ElButton.ts',
+					),
 				},
 			],
 		},
diff --git a/packages/editor-ui/vue.config.js b/packages/editor-ui/vue.config.js
index eb15513032..acf32e3075 100644
--- a/packages/editor-ui/vue.config.js
+++ b/packages/editor-ui/vue.config.js
@@ -2,7 +2,7 @@ const path = require('path');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
-	chainWebpack: config => {
+	chainWebpack: (config) => {
 		config.resolve.symlinks(false);
 		// config.plugins.delete("prefetch"); // enable when language package grows
 	},
@@ -15,9 +15,9 @@ module.exports = {
 			openAnalyzer: false,
 		},
 		i18n: {
-			locale: "en",
-			fallbackLocale: "en",
-			localeDir: "./src/i18n/locales",
+			locale: 'en',
+			fallbackLocale: 'en',
+			localeDir: './src/i18n/locales',
 			enableInSFC: false,
 		},
 	},
@@ -25,13 +25,19 @@ module.exports = {
 		devServer: {
 			disableHostCheck: true,
 		},
-		plugins: [
-			new MonacoWebpackPlugin({ languages: ['javascript', 'json', 'typescript'] }),
-		],
+		plugins: [new MonacoWebpackPlugin({ languages: ['javascript', 'json', 'typescript'] })],
 		resolve: {
 			alias: {
-				'element-ui/packages/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.vue'),
-				'element-ui/lib/button': path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.vue'),
+				'element-ui/packages/button': path.resolve(
+					__dirname,
+					'..',
+					'design-system/src/components/N8nButton/overrides/ElButton.vue',
+				),
+				'element-ui/lib/button': path.resolve(
+					__dirname,
+					'..',
+					'design-system/src/components/N8nButton/overrides/ElButton.vue',
+				),
 			},
 		},
 	},