diff --git a/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts b/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts new file mode 100644 index 0000000000000..5fce1778480a6 --- /dev/null +++ b/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts @@ -0,0 +1,39 @@ +import { NDV, WorkflowPage } from '../pages'; + +const workflowPage = new WorkflowPage(); +const ndv = new NDV(); + +describe('ADO-2230 NDV Pagination Reset', () => { + it('should reset pagaintion if data size changes to less than current page', () => { + // setup, load workflow with debughelper node with random seed + workflowPage.actions.visit(); + cy.createFixtureWorkflow('NDV-debug-generate-data.json', `Debug workflow`); + workflowPage.actions.openNode('DebugHelper'); + + // execute node outputting 10 pages, check output of first page + ndv.actions.execute(); + workflowPage.getters + .successToast() + .find('.el-notification__closeBtn') + .click({ multiple: true }); + ndv.getters.outputTbodyCell(1, 1).invoke('text').should('eq', 'Terry.Dach@hotmail.com'); + + // open 4th page, check output + ndv.getters.pagination().should('be.visible'); + ndv.getters.pagination().find('li.number').should('have.length', 5); + ndv.getters.pagination().find('li.number').eq(3).click(); + ndv.getters.outputTbodyCell(1, 1).invoke('text').should('eq', 'Shane.Cormier68@yahoo.com'); + + // output a lot less data + ndv.getters.parameterInput('randomDataCount').find('input').clear().type('20'); + ndv.actions.execute(); + workflowPage.getters + .successToast() + .find('.el-notification__closeBtn') + .click({ multiple: true }); + + // check we are back to second page now + ndv.getters.pagination().find('li.number').should('have.length', 2); + ndv.getters.outputTbodyCell(1, 1).invoke('text').should('eq', 'Sylvia.Weber@hotmail.com'); + }); +}); diff --git a/cypress/fixtures/NDV-debug-generate-data.json b/cypress/fixtures/NDV-debug-generate-data.json new file mode 100644 index 0000000000000..25f771f9ec7aa --- /dev/null +++ b/cypress/fixtures/NDV-debug-generate-data.json @@ -0,0 +1,48 @@ +{ + "meta": { + "templateCredsSetupCompleted": true, + "instanceId": "5b397bc122efafc165b2a6e67d5e8d75b8138f0d24d6352fac713e4845b002a6" + }, + "nodes": [ + { + "parameters": {}, + "id": "df260de7-6f28-4d07-b7b5-29588e27335b", + "name": "When clicking \"Test workflow\"", + "type": "n8n-nodes-base.manualTrigger", + "typeVersion": 1, + "position": [ + 780, + 500 + ] + }, + { + "parameters": { + "category": "randomData", + "randomDataSeed": "0", + "randomDataCount": 100 + }, + "id": "9e9a0708-86dc-474f-a60e-4315e757c08e", + "name": "DebugHelper", + "type": "n8n-nodes-base.debugHelper", + "typeVersion": 1, + "position": [ + 1000, + 500 + ] + } + ], + "connections": { + "When clicking \"Test workflow\"": { + "main": [ + [ + { + "node": "DebugHelper", + "type": "main", + "index": 0 + } + ] + ] + } + }, + "pinData": {} +} diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 7d3ac28d9b379..2b02fdeab91c8 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -1094,6 +1094,9 @@ export default defineComponent({ jsonData(data: IDataObject[], prevData: IDataObject[]) { if (isEqual(data, prevData)) return; this.refreshDataSize(); + if (this.dataCount) { + this.resetCurrentPageIfTooFar(); + } this.showPinDataDiscoveryTooltip(data); }, binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) { @@ -1411,12 +1414,16 @@ export default defineComponent({ items_total: this.dataCount, }); }, - onPageSizeChange(pageSize: number) { - this.pageSize = pageSize; + resetCurrentPageIfTooFar() { const maxPage = Math.ceil(this.dataCount / this.pageSize); if (maxPage < this.currentPage) { this.currentPage = maxPage; } + }, + onPageSizeChange(pageSize: number) { + this.pageSize = pageSize; + + this.resetCurrentPageIfTooFar(); this.$telemetry.track('User changed ndv page size', { node_type: this.activeNode?.type,