feat(editor): Show multiple nodes in input pane schema view (#9816)

cypress/e2e/14-mapping.cy.ts

@@ -174,16 +174,22 @@ describe('Data mapping', () => {
 		workflowPage.actions.zoomToFit();
 		workflowPage.actions.openNode('Set1');
 
-		ndv.actions.selectInputNode(SCHEDULE_TRIGGER_NODE_NAME);
-
-		ndv.getters.inputDataContainer().find('span').contains('count').realMouseDown();
+		ndv.actions.executePrevious();
+		ndv.actions.expandSchemaViewNode(SCHEDULE_TRIGGER_NODE_NAME);
 
+		const dataPill = ndv.getters
+			.inputDataContainer()
+			.findChildByTestId('run-data-schema-item')
+			.contains('count')
+			.should('be.visible');
+		dataPill.realMouseDown();
 		ndv.actions.mapToParameter('value');
 		ndv.getters
 			.inlineExpressionEditorInput()
 			.should('have.text', `{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }}`);
 
 		ndv.actions.switchInputMode('Table');
+		ndv.actions.selectInputNode(SCHEDULE_TRIGGER_NODE_NAME);
 		ndv.actions.mapDataFromHeader(1, 'value');
 		ndv.getters
 			.inlineExpressionEditorInput()
@@ -194,7 +200,6 @@ describe('Data mapping', () => {
 
 		ndv.actions.selectInputNode('Set');
 
-		ndv.actions.executePrevious();
 		ndv.getters.executingLoader().should('not.exist');
 		ndv.getters.inputDataContainer().should('exist');
 		ndv.actions.validateExpressionPreview('value', '0 [object Object]');
@@ -291,14 +296,8 @@ describe('Data mapping', () => {
 		ndv.actions.executePrevious();
 		ndv.getters.executingLoader().should('not.exist');
 		ndv.getters.inputDataContainer().should('exist');
-		ndv.getters
-			.inputDataContainer()
-			.should('exist')
-			.find('span')
-			.contains('test_name')
-			.realMouseDown();
-		ndv.actions.mapToParameter('value');
-
+		ndv.actions.switchInputMode('Table');
+		ndv.actions.mapDataFromHeader(1, 'value');
 		ndv.actions.validateExpressionPreview('value', 'test_value');
 		ndv.actions.selectInputNode(SCHEDULE_TRIGGER_NODE_NAME);
 		ndv.actions.validateExpressionPreview('value', 'test_value');

cypress/e2e/24-ndv-paired-item.cy.ts

@@ -112,6 +112,9 @@ describe('NDV', () => {
 		workflowPage.actions.executeWorkflow();
 		workflowPage.actions.openNode('Set3');
 
+		ndv.actions.switchInputMode('Table');
+		ndv.actions.switchOutputMode('Table');
+
 		ndv.getters
 			.inputRunSelector()
 			.should('exist')
@@ -123,9 +126,6 @@ describe('NDV', () => {
 			.find('input')
 			.should('include.value', '2 of 2 (6 items)');
 
-		ndv.actions.switchInputMode('Table');
-		ndv.actions.switchOutputMode('Table');
-
 		ndv.actions.changeOutputRunSelector('1 of 2 (6 items)');
 		ndv.getters.inputRunSelector().find('input').should('include.value', '1 of 2 (6 items)');
 		ndv.getters.outputRunSelector().find('input').should('include.value', '1 of 2 (6 items)');

cypress/e2e/32-node-io-filter.cy.ts

@@ -15,13 +15,13 @@ describe('Node IO Filter', () => {
 		workflowPage.getters.canvasNodes().first().dblclick();
 		ndv.actions.close();
 		workflowPage.getters.canvasNodes().first().dblclick();
-		cy.wait(500);
 		ndv.getters.outputDataContainer().should('be.visible');
+		ndv.getters.outputPanel().findChildByTestId('ndv-search').should('exist');
 		cy.document().trigger('keyup', { key: '/' });
 
 		const searchInput = ndv.getters.searchInput();
 
-		searchInput.filter(':focus').should('exist');
+		searchInput.should('have.focus');
 		ndv.getters.pagination().find('li').should('have.length', 3);
 		ndv.getters.outputDataContainer().find('mark').should('not.exist');
 
@@ -36,19 +36,18 @@ describe('Node IO Filter', () => {
 
 	it('should filter input/output data separately', () => {
 		workflowPage.getters.canvasNodes().eq(1).dblclick();
-		cy.wait(500);
 		ndv.getters.outputDataContainer().should('be.visible');
 		ndv.getters.inputDataContainer().should('be.visible');
 		ndv.actions.switchInputMode('Table');
+		ndv.getters.outputPanel().findChildByTestId('ndv-search').should('exist');
 		cy.document().trigger('keyup', { key: '/' });
 
-		ndv.getters.outputPanel().findChildByTestId('ndv-search').filter(':focus').should('not.exist');
+		ndv.getters.outputPanel().findChildByTestId('ndv-search').should('not.have.focus');
 
 		let focusedInput = ndv.getters
 			.inputPanel()
 			.findChildByTestId('ndv-search')
-			.filter(':focus')
-			.should('exist');
+			.should('have.focus');
 
 		const getInputPagination = () =>
 			ndv.getters.inputPanel().findChildByTestId('ndv-data-pagination');
@@ -82,13 +81,9 @@ describe('Node IO Filter', () => {
 
 		ndv.getters.outputDataContainer().trigger('mouseover');
 		cy.document().trigger('keyup', { key: '/' });
-		ndv.getters.inputPanel().findChildByTestId('ndv-search').filter(':focus').should('not.exist');
+		ndv.getters.inputPanel().findChildByTestId('ndv-search').should('not.have.focus');
 
-		focusedInput = ndv.getters
-			.outputPanel()
-			.findChildByTestId('ndv-search')
-			.filter(':focus')
-			.should('exist');
+		focusedInput = ndv.getters.outputPanel().findChildByTestId('ndv-search').should('have.focus');
 
 		getInputPagination().find('li').should('have.length', 3);
 		getInputCounter().contains('21 items').should('exist');

cypress/e2e/5-ndv.cy.ts

@@ -57,9 +57,10 @@ describe('NDV', () => {
 		cy.createFixtureWorkflow('NDV-test-select-input.json', 'NDV test select input');
 		workflowPage.actions.zoomToFit();
 		workflowPage.getters.canvasNodes().last().dblclick();
+		ndv.actions.switchInputMode('Table');
 		ndv.getters.inputSelect().click();
 		ndv.getters.inputOption().last().click();
-		ndv.getters.inputDataContainer().find('[class*=schema_]').should('exist');
+		ndv.getters.inputDataContainer().should('be.visible');
 		ndv.getters.inputDataContainer().should('contain', 'start');
 		ndv.getters.backToCanvas().click();
 		ndv.getters.container().should('not.be.visible');
@@ -252,6 +253,9 @@ describe('NDV', () => {
 		workflowPage.actions.executeWorkflow();
 		workflowPage.actions.openNode('Set3');
 
+		ndv.actions.switchInputMode('Table');
+		ndv.actions.switchOutputMode('Table');
+
 		ndv.getters
 			.inputRunSelector()
 			.should('exist')
@@ -263,9 +267,6 @@ describe('NDV', () => {
 			.find('input')
 			.should('include.value', '2 of 2 (6 items)');
 
-		ndv.actions.switchInputMode('Table');
-		ndv.actions.switchOutputMode('Table');
-
 		ndv.actions.changeOutputRunSelector('1 of 2 (6 items)');
 		ndv.getters.inputRunSelector().find('input').should('include.value', '1 of 2 (6 items)');
 		ndv.getters.inputTbodyCell(1, 0).should('have.text', '1111');

cypress/pages/ndv.ts

@@ -131,6 +131,8 @@ export class NDV extends BasePage {
 		nodeRunErrorIndicator: () => cy.getByTestId('node-run-info-danger'),
 		nodeRunErrorMessage: () => cy.getByTestId('node-error-message'),
 		nodeRunErrorDescription: () => cy.getByTestId('node-error-description'),
+		schemaViewNode: () => cy.getByTestId('run-data-schema-node'),
+		schemaViewNodeName: () => cy.getByTestId('run-data-schema-node-name'),
 	};
 
 	actions = {
@@ -212,6 +214,9 @@ export class NDV extends BasePage {
 			this.getters.inputSelect().find('.el-select').click();
 			this.getters.inputOption().contains(nodeName).click();
 		},
+		expandSchemaViewNode: (nodeName: string) => {
+			this.getters.schemaViewNodeName().contains(nodeName).click();
+		},
 		addDefaultPinnedData: () => {
 			this.actions.editPinnedData();
 			this.actions.savePinnedData();

cypress/support/commands.ts

@@ -42,13 +42,9 @@ Cypress.Commands.add(
 	},
 );
 
-Cypress.Commands.add(
-	'findChildByTestId',
-	{ prevSubject: true },
-	(subject: Cypress.Chainable<JQuery<HTMLElement>>, childTestId) => {
-		return subject.find(`[data-test-id="${childTestId}"]`);
-	},
-);
+Cypress.Commands.addQuery('findChildByTestId', function (testId: string) {
+	return (subject: Cypress.Chainable) => subject.find(`[data-test-id="${testId}"]`);
+});
 
 Cypress.Commands.add('waitForLoad', (waitForIntercepts = true) => {
 	// These aliases are set-up before each test in cypress/support/e2e.ts