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

cypress/e2e/4-node-creator.cy.ts

@@ -70,11 +70,20 @@ describe('Node Creator', () => {
 		.should('exist')
 		.should('contain.text', 'We didn\'t make that... yet');
 
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('edit image');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 1);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('this node totally does not exist');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear()
+		nodeCreatorFeature.getters.getCreatorItem('On App Event').click();
+
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('edit image');
 		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
 		nodeCreatorFeature.getters.noResults()
 		.should('exist')
-		.should('contain.text', 'To see results, click here');
+		.should('contain.text', 'To see all results, click here');
 
 		nodeCreatorFeature.getters.noResults().contains('click here').click();
 		nodeCreatorFeature.getters.nodeCreatorTabs().should('exist');
@@ -85,6 +94,7 @@ describe('Node Creator', () => {
 	})
 
 	it('should add manual trigger node', () => {
+		cy.get('.el-loading-mask').should('not.exist');
 		nodeCreatorFeature.getters.canvasAddButton().click();
 		nodeCreatorFeature.getters.getCreatorItem('Manually').click();
 
@@ -95,7 +105,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.nodeCreator().should('not.exist');
 
 		// TODO: Replace once we have canvas feature utils
-		cy.get('div').contains("On clicking 'execute'").should('exist');
+		cy.get('div').contains("Add first step").should('exist');
 	})
 	it('check if non-core nodes are rendered', () => {
 		cy.wait('@nodesIntercept').then((interception) => {
@@ -144,7 +154,7 @@ describe('Node Creator', () => {
 			nodeCreatorFeature.getters.getCreatorItem(customCategory).should('exist');
 
 			nodeCreatorFeature.actions.toggleCategory(customCategory);
-			nodeCreatorFeature.getters.getCreatorItem(customNode).findChildByTestId('node-item-community-tooltip').should('exist');
+			nodeCreatorFeature.getters.getCreatorItem(customNode).findChildByTestId('node-creator-item-tooltip').should('exist');
 			nodeCreatorFeature.getters.getCreatorItem(customNode).contains(customNodeDescription).should('exist');
 			nodeCreatorFeature.actions.selectNode(customNode);
 

cypress/e2e/7-workflow-actions.cy.ts

@@ -66,7 +66,7 @@ describe('Workflow Actions', () => {
 	it('should add more tags', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.actions.addTags(['Another one']);
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length + 1);
 	});
@@ -74,7 +74,7 @@ describe('Workflow Actions', () => {
 	it('should remove tags by clicking X in tag', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsContainer().find('.el-tag__close').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);
@@ -83,7 +83,7 @@ describe('Workflow Actions', () => {
 	it('should remove tags from dropdown', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsDropdown().find('li').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);

cypress/pages/features/node-creator.ts

@@ -16,12 +16,13 @@ export class NodeCreator extends BasePage {
 		creatorItem: () => cy.getByTestId('item-iterator-item'),
 		communityNodeTooltip: () => cy.getByTestId('node-item-community-tooltip'),
 		noResults: () => cy.getByTestId('categorized-no-results'),
-		nodeItemName: () => cy.getByTestId('node-item-name'),
+		nodeItemName: () => cy.getByTestId('node-creator-item-name'),
 		activeSubcategory: () => cy.getByTestId('categorized-items-subcategory'),
 		expandedCategories: () => this.getters.creatorItem().find('>div').filter('.active').invoke('text'),
 	};
 	actions = {
 		openNodeCreator: () => {
+			cy.get('.el-loading-mask').should('not.exist');
 			this.getters.plusButton().click();
 			this.getters.nodeCreator().should('be.visible')
 		},

cypress/pages/workflow.ts

@@ -10,6 +10,7 @@ export class WorkflowPage extends BasePage {
 		workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
 		workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())),
 		workflowTagElements: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span'),
+		firstWorkflowTagElement: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span:nth-child(1)'),
 		workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
 		newTagLink: () => cy.getByTestId('new-tag-link'),
 		saveButton: () => cy.getByTestId('workflow-save-button'),
@@ -43,12 +44,14 @@ export class WorkflowPage extends BasePage {
 		addInitialNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.canvasPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		addNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.nodeCreatorPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		openNodeNdv: (nodeTypeName: string) => {
 			this.getters.canvasNodeByName(nodeTypeName).dblclick();