diff --git a/cypress/e2e/29-sql-editor.cy.ts b/cypress/e2e/29-sql-editor.cy.ts index 964e5c75af..d8e6aed9b4 100644 --- a/cypress/e2e/29-sql-editor.cy.ts +++ b/cypress/e2e/29-sql-editor.cy.ts @@ -9,8 +9,16 @@ describe('SQL editors', () => { }); it('should preserve changes when opening-closing Postgres node', () => { - workflowPage.actions.addInitialNodeToCanvas('Postgres', { action: 'Execute a SQL query', keepNdvOpen: true }); - ndv.getters.sqlEditorContainer().find('.cm-content').type('SELECT * FROM `testTable`').type('{esc}'); + workflowPage.actions.addInitialNodeToCanvas('Postgres', { + action: 'Execute a SQL query', + keepNdvOpen: true, + }); + ndv.getters + .sqlEditorContainer() + .click() + .find('.cm-content') + .type('SELECT * FROM `testTable`') + .type('{esc}'); ndv.actions.close(); workflowPage.actions.openNode('Postgres'); ndv.getters.sqlEditorContainer().find('.cm-content').type('{end} LIMIT 10').type('{esc}'); @@ -20,7 +28,10 @@ describe('SQL editors', () => { }); 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 }); + 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); }); @@ -28,7 +39,10 @@ describe('SQL editors', () => { }); 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 }); + 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); }); diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts index c291bc5748..8f9fbde4d3 100644 --- a/cypress/e2e/4-node-creator.cy.ts +++ b/cypress/e2e/4-node-creator.cy.ts @@ -321,6 +321,35 @@ describe('Node Creator', () => { }); }); + it('should correctly append a No Op node when Loop Over Items node is added (from add button)', () => { + nodeCreatorFeature.actions.openNodeCreator(); + + nodeCreatorFeature.getters.searchBar().find('input').type('Loop Over Items'); + nodeCreatorFeature.getters.getCreatorItem('Loop Over Items').click(); + NDVModal.actions.close(); + + WorkflowPage.getters.canvasNodes().should('have.length', 3); + WorkflowPage.getters.nodeConnections().should('have.length', 3); + + WorkflowPage.getters.getConnectionBetweenNodes('Loop Over Items', 'Replace Me').should('exist'); + WorkflowPage.getters.getConnectionBetweenNodes('Replace Me', 'Loop Over Items').should('exist'); + }); + + it('should correctly append a No Op node when Loop Over Items node is added (from connection)', () => { + WorkflowPage.actions.addNodeToCanvas('Manual'); + cy.get('.plus-endpoint').should('be.visible').click(); + + nodeCreatorFeature.getters.searchBar().find('input').type('Loop Over Items'); + nodeCreatorFeature.getters.getCreatorItem('Loop Over Items').click(); + NDVModal.actions.close(); + + WorkflowPage.getters.canvasNodes().should('have.length', 3); + WorkflowPage.getters.nodeConnections().should('have.length', 3); + + WorkflowPage.getters.getConnectionBetweenNodes('Loop Over Items', 'Replace Me').should('exist'); + WorkflowPage.getters.getConnectionBetweenNodes('Replace Me', 'Loop Over Items').should('exist'); + }); + it('should have most relevenat nodes on top when searching', () => { nodeCreatorFeature.getters.canvasAddButton().click(); diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index 6a6b4737cc..28018f9256 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -1652,3 +1652,27 @@ export type N8nBanners = { component: Component; }; }; + +export type AddedNode = { + type: string; + openDetail?: boolean; + isAutoAdd?: boolean; + name?: string; + position?: XYPosition; +}; + +export type AddedNodeConnection = { + from: { nodeIndex: number; outputIndex?: number }; + to: { nodeIndex: number; inputIndex?: number }; +}; + +export type AddedNodesAndConnections = { + nodes: AddedNode[]; + connections: AddedNodeConnection[]; +}; + +export type ToggleNodeCreatorOptions = { + createNodeActive: boolean; + source?: NodeCreatorOpenSource; + nodeCreatorView?: string; +}; diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue index 376033cf82..106a95b148 100644 --- a/packages/editor-ui/src/components/Node/NodeCreation.vue +++ b/packages/editor-ui/src/components/Node/NodeCreation.vue @@ -1,8 +1,107 @@ + + @@ -15,7 +114,7 @@ :title="$locale.baseText('nodeView.addNode')" /> @@ -37,111 +136,6 @@ - -