feat(editor): Node creator actions (#4696)

* WIP: Node Actions List UI

* WIP: Recommended Actions and preseting of fields

* WIP: Resource category

* 🎨 Moved actions categorisation to the server

* 🏷️ Add missing INodeAction type

* ✨ Improve SSR categorisation, fix adding of mixed actions

* ♻️ Refactor CategorizedItems to composition api, style fixes

* WIP: Adding multiple nodes

* ♻️ Refactor rest of the NodeCreator component to composition API, conver globalLinkActions to composable

* ✨ Allow actions dragging, fix search and refactor passing of actions to categorized items

* 💄 Fix node actions title

* Migrate to the pinia store, add posthog feature and various fixes

* 🐛 Fix filtering of trigger actions when not merged

* fix: N8N-5439 — Do not use simple node item when at NodeHelperPanel root

* 🐛 Design review fixes

* 🐛 Fix disabling of merged actions

* Fix trigger root filtering

* ✨ Allow for custom node actions parser, introduce hubspot parser

* 🐛 Fix initial node params validation, fix position of second added node

* 🐛 Introduce operations category, removed canvas node names overrride, fix API actions display and prevent dragging of action nodes

* ✨ Prevent NDV auto-open feature flag

* 🐛 Inject recommened action for trigger nodes without actions

* Refactored NodeCreatorNode to Storybook, change filtering of merged nodes for the trigger helper panel, minor fixes

* Improve rendering of app nodes and animation

* Cleanup, any only enable accordion transition on triggerhelperpanel

* Hide node creator scrollbars in Firefox

* Minor styles fixes

* Do not copy the array in rendering method

* Removed unused props

* Fix memory leak

* Fix categorisation of regular nodes with a single resource

* Implement telemetry calls for node actions

* Move categorization to FE

* Fix client side actions categorisation

* Skip custom action show

* Only load tooltip for NodeIcon if necessary

* Fix lodash startCase import

* Remove lodash.startcase

* Cleanup

* Fix node creator autofocus on "tab"

* Prevent posthog getFeatureFlag from crashing

* Debugging preview env search issues

* Remove logs

* Make sure the pre-filled params are update not overwritten

* Get rid of transition in itemiterator

* WIP: Rough version of NodeActions keyboard navigation, replace nodeCreator composable with Pinia store module

* Rewrite to add support for ActionItem to ItemIterator and make CategorizedItems accept items props

* Fix category item counter & cleanup

* Add APIHint to actions search no-result, clean up NodeCreatorNode

* Improve node actions no results message

* Remove logging, fix filtering of recommended placeholder category

* Remove unused NodeActions component and node merging feature falg

* Do not show regular nodes without actions

* Make sure to add manual trigger when adding http node via actions hint

* Fixed api hint footer line height

* Prevent pointer-events od NodeIcon img and remove "this" from template

* Address PR points

* Fix e2e specs

* Make sure canvas ia loaded

* Make sure canvas ia loaded before opening nodeCreator in e2e spec

* Fix flaky workflows tags e2e getter

* Imrpove node creator click outside UX, add manual node to regular nodes added from trigger panel

* Add manual trigger node if dragging regular from trigger panel

packages/nodes-base/nodes/Affinity/AffinityTrigger.node.ts

@@ -20,7 +20,7 @@ export class AffinityTrigger implements INodeType {
 		version: 1,
 		description: 'Handle Affinity events via webhooks',
 		defaults: {
-			name: 'Affinity-Trigger',
+			name: 'Affinity Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/AgileCrm/AgileCrm.node.ts

@@ -41,7 +41,7 @@ export class AgileCrm implements INodeType {
 		version: 1,
 		description: 'Consume Agile CRM API',
 		defaults: {
-			name: 'AgileCRM',
+			name: 'Agile CRM',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Asana/AsanaTrigger.node.ts

@@ -25,7 +25,7 @@ export class AsanaTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Asana events occur.',
 		defaults: {
-			name: 'Asana-Trigger',
+			name: 'Asana Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/Aws/AwsSnsTrigger.node.ts

@@ -25,7 +25,7 @@ export class AwsSnsTrigger implements INodeType {
 		version: 1,
 		description: 'Handle AWS SNS events via webhooks',
 		defaults: {
-			name: 'AWS-SNS-Trigger',
+			name: 'AWS SNS Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/Cisco/Webex/CiscoWebex.node.ts

@@ -34,7 +34,7 @@ export class CiscoWebex implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume the Cisco Webex API',
 		defaults: {
-			name: 'Webex',
+			name: 'Webex by Cisco',
 		},
 		credentials: [
 			{

packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts

@@ -23,7 +23,7 @@ export class CiscoWebexTrigger implements INodeType {
 		subtitle: '={{$parameter["resource"] + ":" + $parameter["event"]}}',
 		description: 'Starts the workflow when Cisco Webex events occur.',
 		defaults: {
-			name: 'Webex Trigger',
+			name: 'Webex by Cisco Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts

@@ -22,7 +22,7 @@ export class CustomerIo implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume Customer.io API',
 		defaults: {
-			name: 'CustomerIo',
+			name: 'Customer.io',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/EmailReadImap/v1/EmailReadImapV1.node.ts

@@ -39,7 +39,7 @@ const versionDescription: INodeTypeDescription = {
 	description: 'Triggers the workflow when a new email is received',
 	eventTriggerDescription: 'Waiting for you to receive an email',
 	defaults: {
-		name: 'IMAP Email',
+		name: 'Email Trigger (IMAP)',
 		color: '#44AA22',
 	},
 	// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node

packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts

@@ -39,7 +39,7 @@ const versionDescription: INodeTypeDescription = {
 	description: 'Triggers the workflow when a new email is received',
 	eventTriggerDescription: 'Waiting for you to receive an email',
 	defaults: {
-		name: 'IMAP Email',
+		name: 'Email Trigger (IMAP)',
 		color: '#44AA22',
 	},
 	// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node

packages/nodes-base/nodes/ExecuteWorkflowTrigger/ExecuteWorkflowTrigger.node.ts

@@ -11,7 +11,7 @@ export class ExecuteWorkflowTrigger implements INodeType {
 		description: 'Runs the flow when called by the Execute Workflow node from a different workflow',
 		maxNodes: 1,
 		defaults: {
-			name: 'When Called By Another Workflow',
+			name: 'Execute Workflow Trigger',
 			color: '#ff6d5a',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node

packages/nodes-base/nodes/FunctionItem/FunctionItem.node.ts

@@ -22,7 +22,7 @@ export class FunctionItem implements INodeType {
 		version: 1,
 		description: 'Run custom function code which gets executed once per item',
 		defaults: {
-			name: 'FunctionItem',
+			name: 'Function Item',
 			color: '#ddbb33',
 		},
 		inputs: ['main'],

packages/nodes-base/nodes/Gitlab/Gitlab.node.ts

@@ -20,7 +20,7 @@ export class Gitlab implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Retrieve data from GitLab API',
 		defaults: {
-			name: 'Gitlab',
+			name: 'GitLab',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Gitlab/GitlabTrigger.node.ts

@@ -87,7 +87,7 @@ export class GitlabTrigger implements INodeType {
 			'={{$parameter["owner"] + "/" + $parameter["repository"] + ": " + $parameter["events"].join(", ")}}',
 		description: 'Starts the workflow when GitLab events occur',
 		defaults: {
-			name: 'Gitlab Trigger',
+			name: 'GitLab Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/Hubspot/HubspotTrigger.node.ts

@@ -23,7 +23,7 @@ export class HubspotTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when HubSpot events occur',
 		defaults: {
-			name: 'Hubspot Trigger',
+			name: 'HubSpot Trigger',
 		},
 		inputs: [],
 		outputs: ['main'],

packages/nodes-base/nodes/Jira/Jira.node.ts

@@ -46,7 +46,7 @@ export class Jira implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Consume Jira Software API',
 		defaults: {
-			name: 'Jira',
+			name: 'Jira Software',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/KoBoToolbox/KoBoToolbox.node.ts

@@ -1,7 +1,6 @@
 import { IExecuteFunctions } from 'n8n-core';
 
 import {
-	IBinaryData,
 	IBinaryKeyData,
 	IDataObject,
 	INodeExecutionData,

packages/nodes-base/nodes/ManualTrigger/ManualTrigger.node.ts

@@ -11,7 +11,7 @@ export class ManualTrigger implements INodeType {
 		description: 'Runs the flow on clicking a button in n8n',
 		maxNodes: 1,
 		defaults: {
-			name: "On clicking 'execute'",
+			name: 'When clicking "Execute Workflow"',
 			color: '#909298',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node

packages/nodes-base/nodes/Msg91/Msg91.node.ts

@@ -20,7 +20,7 @@ export class Msg91 implements INodeType {
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 		description: 'Sends transactional SMS via MSG91',
 		defaults: {
-			name: 'Msg91',
+			name: 'MSG91',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/N8nTrainingCustomerDatastore/N8nTrainingCustomerDatastore.node.ts

@@ -55,7 +55,7 @@ export class N8nTrainingCustomerDatastore implements INodeType {
 		subtitle: '={{$parameter["operation"]}}',
 		description: 'Dummy node used for n8n training',
 		defaults: {
-			name: 'Customer Datastore',
+			name: 'Customer Datastore (n8n training)',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/N8nTrainingCustomerMessenger/N8nTrainingCustomerMessenger.node.ts

@@ -11,7 +11,7 @@ export class N8nTrainingCustomerMessenger implements INodeType {
 		version: 1,
 		description: 'Dummy node used for n8n training',
 		defaults: {
-			name: 'Customer Messenger',
+			name: 'Customer Messenger (n8n training)',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/NoOp/NoOp.node.ts

@@ -10,7 +10,7 @@ export class NoOp implements INodeType {
 		version: 1,
 		description: 'No Operation',
 		defaults: {
-			name: 'NoOp',
+			name: 'No Operation, do nothing',
 			color: '#b0b0b0',
 		},
 		inputs: ['main'],

packages/nodes-base/nodes/Notion/NotionTrigger.node.ts

@@ -18,7 +18,7 @@ export class NotionTrigger implements INodeType {
 		description: 'Starts the workflow when Notion events occur',
 		subtitle: '={{$parameter["event"]}}',
 		defaults: {
-			name: 'Notion Trigger',
+			name: 'Notion Trigger (Beta)',
 		},
 		credentials: [
 			{

packages/nodes-base/nodes/Notion/v1/VersionDescription.ts

@@ -20,7 +20,7 @@ export const versionDescription: INodeTypeDescription = {
 	subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 	description: 'Consume Notion API (Beta)',
 	defaults: {
-		name: 'Notion',
+		name: 'Notion (Beta)',
 	},
 	inputs: ['main'],
 	outputs: ['main'],

packages/nodes-base/nodes/Notion/v2/VersionDescription.ts

@@ -20,7 +20,7 @@ export const versionDescription: INodeTypeDescription = {
 	subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
 	description: 'Consume Notion API (Beta)',
 	defaults: {
-		name: 'Notion',
+		name: 'Notion (Beta)',
 	},
 	inputs: ['main'],
 	outputs: ['main'],

packages/nodes-base/nodes/RssFeedRead/RssFeedRead.node.ts

@@ -19,7 +19,7 @@ export class RssFeedRead implements INodeType {
 		version: 1,
 		description: 'Reads data from an RSS Feed',
 		defaults: {
-			name: 'RSS Feed Read',
+			name: 'RSS Read',
 			color: '#b02020',
 		},
 		inputs: ['main'],

packages/nodes-base/nodes/SendInBlue/SendInBlueTrigger.node.ts

@@ -18,7 +18,7 @@ export class SendInBlueTrigger implements INodeType {
 		],
 		displayName: 'SendInBlue Trigger',
 		defaults: {
-			name: 'SendInBlue-Trigger',
+			name: 'SendInBlue Trigger',
 		},
 		description: 'Starts the workflow when SendInBlue events occur',
 		group: ['trigger'],

packages/nodes-base/nodes/SplitInBatches/SplitInBatches.node.ts

@@ -10,7 +10,7 @@ export class SplitInBatches implements INodeType {
 		version: 1,
 		description: 'Split data into batches and iterate over each batch',
 		defaults: {
-			name: 'SplitInBatches',
+			name: 'Split In Batches',
 			color: '#007755',
 		},
 		inputs: ['main'],

packages/nodes-base/nodes/StickyNote/StickyNote.node.ts

@@ -10,7 +10,7 @@ export class StickyNote implements INodeType {
 		version: 1,
 		description: 'Make your workflow easier to understand',
 		defaults: {
-			name: 'Note',
+			name: 'Sticky Note',
 			color: '#FFD233',
 		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node

packages/nodes-base/nodes/StopAndError/StopAndError.node.ts

@@ -22,7 +22,7 @@ export class StopAndError implements INodeType {
 		version: 1,
 		description: 'Throw an error in the workflow',
 		defaults: {
-			name: 'Stop And Error',
+			name: 'Stop and Error',
 			color: '#ff0000',
 		},
 		inputs: ['main'],

packages/nodes-base/nodes/Toggl/TogglTrigger.node.ts

@@ -21,7 +21,7 @@ export class TogglTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Toggl events occur',
 		defaults: {
-			name: 'Toggl',
+			name: 'Toggl Trigger',
 		},
 		credentials: [
 			{

packages/nodes-base/nodes/Venafi/Datacenter/VenafiTlsProtectDatacenter.node.ts

@@ -16,9 +16,9 @@ export class VenafiTlsProtectDatacenter implements INodeType {
 		group: ['input'],
 		version: 1,
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
-		description: 'Consume Venafi TLS Protect Datacenter​',
+		description: 'Consume Venafi TLS Protect Datacenter',
 		defaults: {
-			name: 'Venafi TLS Protect Datacenter​',
+			name: 'Venafi TLS Protect Datacenter',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloud.node.ts

@@ -34,9 +34,9 @@ export class VenafiTlsProtectCloud implements INodeType {
 		group: ['input'],
 		version: 1,
 		subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
-		description: 'Consume Venafi TLS Protect Cloud​ API',
+		description: 'Consume Venafi TLS Protect Cloud API',
 		defaults: {
-			name: 'Venafi TLS Protect Cloud​',
+			name: 'Venafi TLS Protect Cloud',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Venafi/ProtectCloud/VenafiTlsProtectCloudTrigger.node.ts

@@ -19,7 +19,7 @@ export class VenafiTlsProtectCloudTrigger implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when Venafi events occur',
 		defaults: {
-			name: 'Venafi TLS Protect Cloud​ Trigger',
+			name: 'Venafi TLS Protect Cloud Trigger',
 		},
 		credentials: [
 			{

packages/nodes-base/nodes/WhatsApp/WhatsApp.node.ts

@@ -13,7 +13,7 @@ export class WhatsApp implements INodeType {
 		subtitle: '={{ $parameter["resource"] + ": " + $parameter["operation"] }}',
 		description: 'Access WhatsApp API',
 		defaults: {
-			name: 'WhatsApp',
+			name: 'WhatsApp Business Cloud',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Zoho/ZohoCrm.node.ts

@@ -76,7 +76,7 @@ export class ZohoCrm implements INodeType {
 		version: 1,
 		description: 'Consume Zoho CRM API',
 		defaults: {
-			name: 'Zoho',
+			name: 'Zoho CRM',
 		},
 		inputs: ['main'],
 		outputs: ['main'],