fix(core): Fix populating of node custom api call options (#5347)

* feat(core): Fix populating of node custom api call options

* lint fixes

* Adress PR comments

* Add e2e test and only inject custom API options for latest version

* Make sure to injectCustomApiCallOption for the latest version of node

* feat(cli): Move apiCallOption injection to LoadNodesAndCredentials and add e2e tests to check for custom nodes credentials

* Load nodes and credentials fixtures from a single place

* Console warning if credential is invalid during customApiOptions injection

cypress/e2e/2-credentials.cy.ts

@@ -1,4 +1,3 @@
-import { HTTP_REQUEST_NODE_TYPE } from './../../packages/editor-ui/src/constants';
 import {
 	NEW_NOTION_ACCOUNT_NAME,
 	NOTION_NODE_NAME,
@@ -6,7 +5,6 @@ import {
 	HTTP_REQUEST_NODE_NAME,
 	NEW_QUERY_AUTH_ACCOUNT_NAME,
 } from './../constants';
-import { visit } from 'recast';
 import {
 	DEFAULT_USER_EMAIL,
 	DEFAULT_USER_PASSWORD,
@@ -252,4 +250,24 @@ describe('Credentials', () => {
 		credentialsModal.actions.fillCredentialsForm();
 		workflowPage.getters.nodeCredentialsSelect().should('contain', NEW_QUERY_AUTH_ACCOUNT_NAME);
 	});
+
+	it('should render custom node with n8n credential', () => {
+		workflowPage.actions.visit();
+		workflowPage.actions.addNodeToCanvas('Manual Trigger');
+		workflowPage.actions.addNodeToCanvas('E2E Node with native n8n credential', true, true);
+		workflowPage.getters.nodeCredentialsLabel().click();
+		cy.contains('Create New Credential').click();
+		credentialsModal.getters.editCredentialModal().should('be.visible');
+		credentialsModal.getters.editCredentialModal().should('contain.text', 'Notion API');
+	})
+
+	it('should render custom node with custom credential', () => {
+		workflowPage.actions.visit();
+		workflowPage.actions.addNodeToCanvas('Manual Trigger');
+		workflowPage.actions.addNodeToCanvas('E2E Node with custom credential', true, true);
+		workflowPage.getters.nodeCredentialsLabel().click();
+		cy.contains('Create New Credential').click();
+		credentialsModal.getters.editCredentialModal().should('be.visible');
+		credentialsModal.getters.editCredentialModal().should('contain.text', 'Custom E2E Credential');
+	})
 });

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

@@ -1,6 +1,5 @@
 import { NodeCreator } from '../pages/features/node-creator';
 import { INodeTypeDescription } from 'n8n-workflow';
-import CustomNodeFixture from '../fixtures/Custom_node.json';
 import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from '../constants';
 import { randFirstName, randLastName } from '@ngneat/falso';
 
@@ -19,20 +18,6 @@ describe('Node Creator', () => {
 	beforeEach(() => {
 		cy.signin({ email, password });
 
-		cy.intercept('GET', '/types/nodes.json', (req) => {
-			// Delete caching headers so that we can intercept the request
-			['etag', 'if-none-match', 'if-modified-since'].forEach((header) => {
-				delete req.headers[header];
-			});
-
-			req.continue((res) => {
-				const nodes = res.body as INodeTypeDescription[];
-
-				nodes.push(CustomNodeFixture as INodeTypeDescription);
-				res.send(nodes);
-			});
-		}).as('nodesIntercept');
-
 		cy.visit(nodeCreatorFeature.url);
 		cy.waitForLoad();
 	});
@@ -153,6 +138,7 @@ describe('Node Creator', () => {
 	});
 
 	it('should render and select community node', () => {
+		cy.intercept('GET', '/types/nodes.json').as('nodesIntercept');
 		cy.wait('@nodesIntercept').then(() => {
 			const customCategory = 'Custom Category';
 			const customNode = 'E2E Node';

cypress/e2e/5-ndv.cy.ts

@@ -9,11 +9,13 @@ describe('NDV', () => {
 	beforeEach(() => {
 		cy.resetAll();
 		cy.skipSetup();
+
 		workflowsPage.actions.createWorkflowFromCard();
 		workflowPage.actions.renameWorkflow(uuid());
 		workflowPage.actions.saveWorkflowOnButtonClick();
 	});
 
+
 	it('should show up when double clicked on a node and close when Back to canvas clicked', () => {
 		workflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
 		workflowPage.getters.canvasNodes().first().dblclick();

cypress/fixtures/Custom_credential.json

@@ -0,0 +1,19 @@
+{
+	"name": "customE2eCredential",
+	"displayName": "Custom E2E Credential",
+	"properties": [{
+		"displayName": "API Key",
+		"name": "apiKey",
+		"type": "string",
+		"default": "",
+		"required": false
+	}],
+	"authenticate": {
+		"type": "generic",
+		"properties": {
+			"qs": {
+				"auth": "={{$credentials.apiKey}}"
+			}
+		}
+	}
+}

cypress/fixtures/Custom_node_custom_credential.json

@@ -0,0 +1,57 @@
+{
+	"properties": [
+		{
+			"displayName": "Test property",
+			"name": "testProp",
+			"type": "string",
+			"required": true,
+			"noDataExpression": false,
+			"default": "Some default"
+		},
+		{
+			"displayName": "Resource",
+			"name": "resource",
+			"type": "options",
+			"noDataExpression": true,
+			"options": [
+				{
+					"name": "option1",
+					"value": "option1"
+				},
+				{
+					"name": "option2",
+					"value": "option2"
+				},
+				{
+					"name": "option3",
+					"value": "option3"
+				},
+				{
+					"name": "option4",
+					"value": "option4"
+				}
+			],
+			"default": "option2"
+		}
+	],
+	"displayName": "E2E Node with custom credential",
+	"name": "@e2e/n8n-nodes-e2e-custom-credential",
+	"group": ["transform"],
+	"codex": {
+		"categories": ["Custom Category"]
+	},
+	"version": 1,
+	"description": "Demonstrate rendering of node with custom credential",
+	"defaults": {
+		"name": "E2E Node with custom credential"
+	},
+	"inputs": ["main"],
+	"outputs": ["main"],
+	"icon": "fa:network-wired",
+	"credentials": [
+		{
+			"name": "customE2eCredential",
+			"required": true
+		}
+	]
+}

cypress/fixtures/Custom_node_n8n_credential.json

@@ -0,0 +1,57 @@
+{
+	"properties": [
+		{
+			"displayName": "Test property",
+			"name": "testProp",
+			"type": "string",
+			"required": true,
+			"noDataExpression": false,
+			"default": "Some default"
+		},
+		{
+			"displayName": "Resource",
+			"name": "resource",
+			"type": "options",
+			"noDataExpression": true,
+			"options": [
+				{
+					"name": "option1",
+					"value": "option1"
+				},
+				{
+					"name": "option2",
+					"value": "option2"
+				},
+				{
+					"name": "option3",
+					"value": "option3"
+				},
+				{
+					"name": "option4",
+					"value": "option4"
+				}
+			],
+			"default": "option2"
+		}
+	],
+	"displayName": "E2E Node with native n8n credential",
+	"name": "@e2e/n8n-nodes-e2e-credential",
+	"group": ["transform"],
+	"codex": {
+		"categories": ["Custom Category"]
+	},
+	"version": 1,
+	"description": "Demonstrate rendering of node with native credential",
+	"defaults": {
+		"name": "E2E Node with native n8n credential"
+	},
+	"inputs": ["main"],
+	"outputs": ["main"],
+	"icon": "fa:network-wired",
+	"credentials": [
+		{
+			"name": "notionApi",
+			"required": true
+		}
+	]
+}

cypress/pages/ndv.ts

@@ -27,6 +27,7 @@ export class NDV extends BasePage {
 		parameterInput: (parameterName: string) => cy.getByTestId(`parameter-input-${parameterName}`),
 		nodeNameContainer: () => cy.getByTestId('node-title-container'),
 		nodeRenameInput: () => cy.getByTestId('node-rename-input'),
+		httpRequestNotice: () => cy.getByTestId('node-parameters-http-notice'),
 	};
 
 	actions = {

cypress/support/commands.ts

@@ -57,8 +57,8 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add('waitForLoad', () => {
-	cy.getByTestId('node-view-loader').should('not.exist', { timeout: 10000 });
-	cy.get('.el-loading-mask').should('not.exist', { timeout: 10000 });
+	cy.getByTestId('node-view-loader', { timeout: 10000 }).should('not.exist');
+	cy.get('.el-loading-mask', { timeout: 10000 }).should('not.exist');
 });
 
 Cypress.Commands.add('signin', ({ email, password }) => {

cypress/support/e2e.ts

@@ -14,3 +14,30 @@
 // ***********************************************************
 
 import './commands';
+import CustomNodeFixture from '../fixtures/Custom_node.json';
+import CustomNodeWithN8nCredentialFixture from '../fixtures/Custom_node_n8n_credential.json';
+import CustomNodeWithCustomCredentialFixture from '../fixtures/Custom_node_custom_credential.json';
+import CustomCredential from '../fixtures/Custom_credential.json';
+
+// Load custom nodes and credentials fixtures
+beforeEach(() => {
+	cy.intercept('GET', '/types/nodes.json', (req) => {
+		req.continue((res) => {
+			const nodes = res.body;
+
+			res.headers['cache-control'] = 'no-cache, no-store';
+			nodes.push(CustomNodeFixture, CustomNodeWithN8nCredentialFixture, CustomNodeWithCustomCredentialFixture);
+			res.send(nodes);
+		});
+	}).as('nodesIntercept');
+
+	cy.intercept('GET', '/types/credentials.json', (req) => {
+		req.continue((res) => {
+			const credentials = res.body;
+
+			res.headers['cache-control'] = 'no-cache, no-store';
+			credentials.push(CustomCredential);
+			res.send(credentials);
+		});
+	}).as('credentialsIntercept');
+})