From e520f8a98f186ecefca8555afdbc08cbc19ef4b0 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 6 Jun 2024 17:14:55 +0200
Subject: [PATCH] fix: Reset pagination when output size changes (#9652)

---
 .../2230-ADO-ndv-reset-data-pagination.cy.ts  | 39 +++++++++++++++
 cypress/fixtures/NDV-debug-generate-data.json | 48 +++++++++++++++++++
 packages/editor-ui/src/components/RunData.vue | 11 ++++-
 3 files changed, 96 insertions(+), 2 deletions(-)
 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 0000000000..5fce177848
--- /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 0000000000..25f771f9ec
--- /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 7d3ac28d9b..2b02fdeab9 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,