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

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

packages/design-system/src/css/_tokens.dark.scss

@@ -240,6 +240,9 @@
 	--color-mfa-recovery-code-color: var(--color-text-dark);
 	--color-mfa-lose-access-text-color: var(--color-danger);
 
+	// Text highlight
+	--color-text-highlight-background: var(--prim-color-alt-d-shade-600);
+
 	// AI
 	--node-type-background-l: 20%;
 	--node-type-supplemental-label-color-h: 235;

packages/design-system/src/css/_tokens.scss

@@ -305,6 +305,9 @@
 	--color-mfa-recovery-code-color: var(--prim-gray-490);
 	--color-mfa-lose-access-text-color: var(--color-danger);
 
+	// Text highlight
+	--color-text-highlight-background: var(--prim-color-alt-d-shade-150);
+
 	// AI
 	--node-type-background-l: 95%;
 	--node-type-supplemental-label-color-h: 235;

packages/design-system/src/css/reset.scss

@@ -207,7 +207,7 @@ ins {
 }
 
 mark {
-	background-color: var(--color-warning);
+	background-color: var(--color-text-highlight-background);
 	color: var(--color-text-dark);
 	font-style: italic;
 	font-weight: bold;

packages/editor-ui/src/components/InputNodeSelect.vue

@@ -157,7 +157,8 @@ function onInputNodeChange(value: string) {
 
 <style lang="scss" module>
 .select {
-	max-width: 224px;
+	--max-select-width: 224px;
+	max-width: var(--max-select-width);
 
 	:global(.el-input--suffix .el-input__inner) {
 		padding-left: calc(var(--spacing-l) + var(--spacing-4xs));
@@ -180,13 +181,19 @@ function onInputNodeChange(value: string) {
 .title {
 	color: var(--color-text-dark);
 	font-weight: var(--font-weight-regular);
+	max-width: var(--max-select-width);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .disabled .title {
 	color: var(--color-text-light);
 }
 
 .subtitle {
+	margin-left: auto;
+	padding-left: var(--spacing-2xs);
 	color: var(--color-text-light);
 	font-weight: var(--font-weight-regular);
 }

packages/editor-ui/src/components/InputPanel.vue

@@ -1,6 +1,7 @@
 <template>
 	<RunData
 		:node="currentNode"
+		:nodes="isMappingMode ? rootNodesParents : parentNodes"
 		:workflow="workflow"
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"

packages/editor-ui/src/components/NDVFloatingNodes.vue

@@ -218,9 +218,9 @@ defineExpose({
 		content: '';
 		position: absolute;
 		top: -35%;
-		right: -30%;
+		right: -15%;
 		bottom: -35%;
-		left: -30%;
+		left: -15%;
 		z-index: -1;
 	}
 	.outputMain &,