From 1db04c93e750bc165d565ec27e34dbb260c7c82e Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour Date: Thu, 6 Jun 2024 12:47:26 +0200 Subject: [PATCH 1/4] fix: Reset pagination when data size changes --- packages/editor-ui/src/components/RunData.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 7d3ac28d9b379..220c2fafcd960 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, @@ -1511,7 +1518,6 @@ export default defineComponent({ return inputData; } - this.currentPage = 1; return inputData.filter(({ json }) => searchInObject(json, this.search)); }, getDataCount( From f369d80a76e638078347bf9274d2271675bdacb7 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour Date: Thu, 6 Jun 2024 13:28:47 +0200 Subject: [PATCH 2/4] fix: add tests --- .../2230-ADO-ndv-reset-data-pagination.cy.ts | 45 +++++++++++++++++ cypress/fixtures/NDV-debug-generate-data.json | 48 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts create mode 100644 cypress/fixtures/NDV-debug-generate-data.json 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..da2af9cbfa7c7 --- /dev/null +++ b/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts @@ -0,0 +1,45 @@ +import { v4 as uuid } from 'uuid'; +import { getVisibleSelect } from '../utils'; +import { MANUAL_TRIGGER_NODE_DISPLAY_NAME } from '../constants'; +import { NDV, WorkflowPage } from '../pages'; +import { NodeCreator } from '../pages/features/node-creator'; +import { clickCreateNewCredential } from '../composables/ndv'; +import { setCredentialValues } from '../composables/modals/credential-modal'; + +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": {} +} From f50de024fcaee8bbbcc9b7d1bedd2149916e24c5 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour Date: Thu, 6 Jun 2024 13:44:15 +0200 Subject: [PATCH 3/4] fix: remove unexpected change --- packages/editor-ui/src/components/RunData.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 220c2fafcd960..2b02fdeab91c8 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -1518,6 +1518,7 @@ export default defineComponent({ return inputData; } + this.currentPage = 1; return inputData.filter(({ json }) => searchInObject(json, this.search)); }, getDataCount( From 134a1a42644a91cecec4dc304c93bde40774f936 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour Date: Thu, 6 Jun 2024 13:45:15 +0200 Subject: [PATCH 4/4] chore: clean up types --- cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts b/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts index da2af9cbfa7c7..5fce1778480a6 100644 --- a/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts +++ b/cypress/e2e/2230-ADO-ndv-reset-data-pagination.cy.ts @@ -1,10 +1,4 @@ -import { v4 as uuid } from 'uuid'; -import { getVisibleSelect } from '../utils'; -import { MANUAL_TRIGGER_NODE_DISPLAY_NAME } from '../constants'; import { NDV, WorkflowPage } from '../pages'; -import { NodeCreator } from '../pages/features/node-creator'; -import { clickCreateNewCredential } from '../composables/ndv'; -import { setCredentialValues } from '../composables/modals/credential-modal'; const workflowPage = new WorkflowPage(); const ndv = new NDV();