fix(editor): Fix disappearing NDV header in code nodes (#7290)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

cypress/e2e/29-sql-editor.cy.ts

@@ -9,18 +9,29 @@ describe('SQL editors', () => {
 	});
 
 	it('should preserve changes when opening-closing Postgres node', () => {
-		workflowPage.actions.addInitialNodeToCanvas('Manual');
-		workflowPage.actions.addNodeToCanvas('Postgres');
-		workflowPage.actions.openNode('Postgres');
-		ndv.getters.parameterInput('operation').click();
-		cy.get('div').contains('Execute Query').click();
-		cy.get('div.cm-activeLine').type('SELECT * FROM `testTable`');
+		workflowPage.actions.addInitialNodeToCanvas('Postgres', { action: 'Execute a SQL query', keepNdvOpen: true });
+		ndv.getters.sqlEditorContainer().find('.cm-content').type('SELECT * FROM `testTable`').type('{esc}');
 		ndv.actions.close();
 		workflowPage.actions.openNode('Postgres');
-		cy.get('div.cm-activeLine').type('{end} LIMIT 10');
+		ndv.getters.sqlEditorContainer().find('.cm-content').type('{end} LIMIT 10').type('{esc}');
 		ndv.actions.close();
 		workflowPage.actions.openNode('Postgres');
+		ndv.getters.sqlEditorContainer().should('contain', 'SELECT * FROM `testTable` LIMIT 10');
+	});
 
-		cy.get('div.cm-activeLine').contains('SELECT * FROM `testTable` LIMIT 10');
+	it('should not push NDV header out with a lot of code in Postgres editor', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Postgres', { action: 'Execute a SQL query', keepNdvOpen: true });
+		cy.fixture('Dummy_javascript.txt').then((code) => {
+			ndv.getters.sqlEditorContainer().find('.cm-content').paste(code);
+		});
+		ndv.getters.nodeExecuteButton().should('be.visible');
+	});
+
+	it('should not push NDV header out with a lot of code in MySQL editor', () => {
+		workflowPage.actions.addInitialNodeToCanvas('MySQL', { action: 'Execute a SQL query', keepNdvOpen: true });
+		cy.fixture('Dummy_javascript.txt').then((code) => {
+			ndv.getters.sqlEditorContainer().find('.cm-content').paste(code);
+		});
+		ndv.getters.nodeExecuteButton().should('be.visible');
 	});
 });

cypress/e2e/5-ndv.cy.ts

@@ -1,6 +1,7 @@
 import { WorkflowPage, NDV } from '../pages';
 import { v4 as uuid } from 'uuid';
 import { getPopper, getVisiblePopper, getVisibleSelect } from '../utils';
+import { META_KEY } from '../constants';
 
 const workflowPage = new WorkflowPage();
 const ndv = new NDV();
@@ -346,4 +347,13 @@ describe('NDV', () => {
 		ndv.actions.close();
 		workflowPage.getters.nodeIssuesByName('Webhook').should('not.exist');
 	});
+
+	it('should not push NDV header out with a lot of code in Code node editor', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Code', { keepNdvOpen: true });
+		ndv.getters.parameterInput('jsCode').get('.cm-content').type('{selectall}').type('{backspace}');
+		cy.fixture('Dummy_javascript.txt').then((code) => {
+			ndv.getters.parameterInput('jsCode').get('.cm-content').paste(code);
+		});
+		ndv.getters.nodeExecuteButton().should('be.visible');
+	});
 });

cypress/fixtures/Dummy_javascript.txt

@@ -0,0 +1,42 @@
+var File = function(url, object){
+	File.list = Array.isArray(File.list)? File.list : [];
+	File.progress = File.progress || 0;
+	this.progress = 0;
+	this.object = object;
+	this.url = url;
+};
+
+File.indexOf = function(term){
+	for(var index in File.list){
+		var file = File.list[index];
+		if (file.equals(term) || file.url === term || file.object === term) {
+			return index;
+		}
+	}
+	return -1;
+};
+
+File.find = function(term){
+	var index = File.indexOf(term);
+	return ~index && File.list[index];
+};
+
+File.prototype.equals = function(file){
+	var isFileType = file instanceof File;
+	return isFileType && this.url === file.url && this.object === file.object;
+};
+
+File.prototype.save = function(update){
+	update = typeof update === 'undefined'? true : update;
+	if(Array.isArray(File.list)){
+		var index = File.indexOf(this);
+		if(~index && update) {
+			File.list[index] = this;
+			console.warn('File `%s` has been loaded before and updated now for: %O.', this.url, this);
+		}else File.list.push(this);
+		console.log(File.list)
+	}else{
+		File.list = [this];
+	}
+	return this;
+};

cypress/fixtures/Dummy_sql.txt

@@ -0,0 +1,49 @@
+CREATE TABLE emp (
+empno INT PRIMARY KEY,
+ename VARCHAR(10),
+job VARCHAR(9),
+mgr INT NULL,
+hiredate DATETIME,
+sal NUMERIC(7,2),
+comm NUMERIC(7,2) NULL,
+dept INT)
+begin
+insert into emp values
+    (1,'JOHNSON','ADMIN',6,'12-17-1990',18000,NULL,4)
+insert into emp values
+    (2,'HARDING','MANAGER',9,'02-02-1998',52000,300,3)
+insert into emp values
+    (3,'TAFT','SALES I',2,'01-02-1996',25000,500,3)
+insert into emp values
+    (4,'HOOVER','SALES I',2,'04-02-1990',27000,NULL,3)
+insert into emp values
+    (5,'LINCOLN','TECH',6,'06-23-1994',22500,1400,4)
+insert into emp values
+    (6,'GARFIELD','MANAGER',9,'05-01-1993',54000,NULL,4)
+insert into emp values
+    (7,'POLK','TECH',6,'09-22-1997',25000,NULL,4)
+insert into emp values
+    (8,'GRANT','ENGINEER',10,'03-30-1997',32000,NULL,2)
+insert into emp values
+    (9,'JACKSON','CEO',NULL,'01-01-1990',75000,NULL,4)
+insert into emp values
+    (10,'FILLMORE','MANAGER',9,'08-09-1994',56000,NULL,2)
+insert into emp values
+    (11,'ADAMS','ENGINEER',10,'03-15-1996',34000,NULL,2)
+insert into emp values
+    (12,'WASHINGTON','ADMIN',6,'04-16-1998',18000,NULL,4)
+insert into emp values
+    (13,'MONROE','ENGINEER',10,'12-03-2000',30000,NULL,2)
+insert into emp values
+    (14,'ROOSEVELT','CPA',9,'10-12-1995',35000,NULL,1)
+end
+CREATE TABLE dept (
+deptno INT NOT NULL,
+dname VARCHAR(14),
+loc VARCHAR(13))
+begin
+insert into dept values (1,'ACCOUNTING','ST LOUIS')
+insert into dept values (2,'RESEARCH','NEW YORK')
+insert into dept values (3,'SALES','ATLANTA')
+insert into dept values (4, 'OPERATIONS','SEATTLE')
+end

cypress/pages/ndv.ts

@@ -75,6 +75,7 @@ export class NDV extends BasePage {
 		resourceMapperRemoveFieldButton: (fieldName: string) => cy.getByTestId(`remove-field-button-${fieldName}`),
 		resourceMapperColumnsOptionsButton: () => cy.getByTestId('columns-parameter-input-options-container'),
 		resourceMapperRemoveAllFieldsOption: () => cy.getByTestId('action-removeAllFields'),
+		sqlEditorContainer: () => cy.getByTestId('sql-editor-container'),
 	};
 
 	actions = {

cypress/pages/workflow.ts

@@ -142,6 +142,12 @@ export class WorkflowPage extends BasePage {
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
 			this.getters.nodeCreatorSearchBar().type('{enter}');
 			if (opts?.action) {
+				// Expand actions category if it's collapsed
+				nodeCreator.getters.getCategoryItem('Actions').parent().then(($el) => {
+					if ($el.attr('data-category-collapsed') === 'true') {
+						nodeCreator.getters.getCategoryItem('Actions').click();
+					}
+				});
 				nodeCreator.getters.getCreatorItem(opts.action).click();
 			} else if (!opts?.keepNdvOpen) {
 				cy.get('body').type('{esc}');

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

@@ -1022,9 +1022,8 @@ export default defineComponent({
 	}
 
 	.node-parameters-wrapper {
-		min-height: 100%;
 		overflow-y: auto;
-		padding: 0 20px 200px 20px;
+		padding: 0 var(--spacing-m) 200px var(--spacing-m);
 	}
 
 	&.dragging {