From 1eba4788f26d0f5472fa4156b317d8b14d19b927 Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Fri, 31 Mar 2023 08:31:19 +0200
Subject: [PATCH] fix(editor): Prevent NDV schema view pagination (#5844)

* fix(editor): Prevent NDV schema view pagination

* Linting fixes
---
 cypress/e2e/5-ndv.cy.ts                       |  32 +-
 ...Test_workflow_schema_test_pinned_data.json | 574 ++++++++++++++++++
 cypress/pages/ndv.ts                          |   2 +-
 packages/editor-ui/src/components/RunData.vue |  12 +-
 4 files changed, 615 insertions(+), 5 deletions(-)
 create mode 100644 cypress/fixtures/Test_workflow_schema_test_pinned_data.json

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 2c5c770a72..67b318da6d 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -92,13 +92,15 @@ describe('NDV', () => {
 
 	describe('test output schema view', () => {
 		const schemaKeys = ['id', 'name', 'email', 'notes', 'country', 'created', 'objectValue', 'prop1', 'prop2'];
-		beforeEach(() => {
+		function setupSchemaWorkflow() {
 			cy.createFixtureWorkflow('Test_workflow_schema_test.json', `NDV test schema view ${uuid()}`);
 			workflowPage.actions.zoomToFit();
 			workflowPage.actions.openNode('Set');
 			ndv.actions.execute();
-		});
+		}
+
 		it('should switch to output schema view and validate it', () => {
+			setupSchemaWorkflow()
 			ndv.getters.outputDisplayMode().children().should('have.length', 3);
 			ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Table');
 			ndv.getters.outputDisplayMode().contains('Schema').click();
@@ -109,11 +111,13 @@ describe('NDV', () => {
 			});
 		});
 		it('should preserve schema view after execution', () => {
+			setupSchemaWorkflow()
 			ndv.getters.outputDisplayMode().contains('Schema').click();
 			ndv.actions.execute();
 			ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Schema');
 		})
 		it('should collapse and expand nested schema object', () => {
+			setupSchemaWorkflow()
 			const expandedObjectProps = ['prop1', 'prop2'];;
 			const getObjectValueItem = () => ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').filter(':contains("objectValue")');
 			ndv.getters.outputDisplayMode().contains('Schema').click();
@@ -126,5 +130,29 @@ describe('NDV', () => {
 				ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('not.be.visible');
 			});
 		})
+		it('should not display pagination for schema', () => {
+			setupSchemaWorkflow()
+			ndv.getters.backToCanvas().click();
+			workflowPage.getters.canvasNodeByName('Set').click();
+			workflowPage.actions.addNodeToCanvas('Customer Datastore (n8n training)', true, true, 'Get All People');
+			ndv.actions.execute();
+			ndv.getters.outputPanel().contains('25 items').should('exist');
+			ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
+			ndv.getters.outputDisplayMode().contains('Schema').click();
+			ndv.getters.outputPanel().find('[class*=_pagination]').should('not.exist');
+			ndv.getters.outputDisplayMode().contains('JSON').click();
+			ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
+		})
+		it('should display large schema', () => {
+			cy.createFixtureWorkflow('Test_workflow_schema_test_pinned_data.json', `NDV test schema view ${uuid()}`);
+			workflowPage.actions.zoomToFit();
+			workflowPage.actions.openNode('Set');
+
+			ndv.getters.outputPanel().contains('20 items').should('exist');
+			ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
+			ndv.getters.outputDisplayMode().contains('Schema').click();
+			ndv.getters.outputPanel().find('[class*=_pagination]').should('not.exist');
+			ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item] [data-test-id=run-data-schema-item]').should('have.length', 20);
+		})
 	})
 });
diff --git a/cypress/fixtures/Test_workflow_schema_test_pinned_data.json b/cypress/fixtures/Test_workflow_schema_test_pinned_data.json
new file mode 100644
index 0000000000..5233a17848
--- /dev/null
+++ b/cypress/fixtures/Test_workflow_schema_test_pinned_data.json
@@ -0,0 +1,574 @@
+{
+  "name": "My workflow",
+  "nodes": [
+    {
+      "parameters": {
+        "operation": "getAllPeople",
+        "limit": 10
+      },
+      "id": "441afcbf-a678-4463-bc89-7e0b6693af5c",
+      "name": "Customer Datastore (n8n training)",
+      "type": "n8n-nodes-base.n8nTrainingCustomerDatastore",
+      "typeVersion": 1,
+      "position": [
+        720,
+        440
+      ]
+    },
+    {
+      "parameters": {
+        "values": {
+          "number": [
+            {
+              "name": "objectValue.prop1",
+              "value": 123
+            }
+          ],
+          "string": [
+            {
+              "name": "objectValue.prop2",
+              "value": "someText"
+            }
+          ]
+        },
+        "options": {
+          "dotNotation": true
+        }
+      },
+      "id": "44094a05-b3b7-49bf-bfbf-a711e6ba45d8",
+      "name": "Set",
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 1,
+      "position": [
+        1080,
+        440
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "3dc7cf26-ff25-4437-b9fd-0e8b127ebec9",
+      "name": "When clicking \"Execute Workflow\"",
+      "type": "n8n-nodes-base.manualTrigger",
+      "typeVersion": 1,
+      "position": [
+        500,
+        440
+      ]
+    }
+  ],
+  "pinData": {
+    "Set": [
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      },
+      {
+        "json": {
+          "key0": 0,
+          "key1": 1,
+          "key2": 2,
+          "key3": 3,
+          "key4": 4,
+          "key5": 5,
+          "key6": 6,
+          "key7": 7,
+          "key8": 8,
+          "key9": 9,
+          "key10": 10,
+          "key11": 11,
+          "key12": 12,
+          "key13": 13,
+          "key14": 14,
+          "key15": 15,
+          "key16": 16,
+          "key17": 17,
+          "key18": 18,
+          "key19": 19
+        }
+      }
+    ]
+  },
+  "connections": {
+    "Customer Datastore (n8n training)": {
+      "main": [
+        [
+          {
+            "node": "Set",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "When clicking \"Execute Workflow\"": {
+      "main": [
+        [
+          {
+            "node": "Customer Datastore (n8n training)",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {},
+  "versionId": "",
+  "meta": {
+    "instanceId": "363581be2c2581d1b11e189456a090887e137f8393a4b5cb85641b1ee4fae479"
+  },
+  "tags": []
+}
diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
index 5a45f2df2d..7ce0c811fe 100644
--- a/cypress/pages/ndv.ts
+++ b/cypress/pages/ndv.ts
@@ -20,7 +20,7 @@ export class NDV extends BasePage {
 		editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
 		pinnedDataEditor: () => this.getters.outputPanel().find('.monaco-editor[role=code]'),
 		runDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
-		savePinnedDataButton: () => this.getters.runDataPaneHeader().find('button').contains('Save'),
+		savePinnedDataButton: () => this.getters.runDataPaneHeader().find('button').filter(':visible').contains('Save'),
 		outputTableRows: () => this.getters.outputDataContainer().find('table tr'),
 		outputTableHeaders: () => this.getters.outputDataContainer().find('table thead th'),
 		outputTableRow: (row: number) => this.getters.outputTableRows().eq(row),
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 70666e31f1..2374907b67 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -322,7 +322,7 @@
 			/>
 
 			<run-data-schema
-				v-else-if="hasNodeRun && displayMode === 'schema'"
+				v-else-if="hasNodeRun && isSchemaView"
 				:data="jsonData"
 				:mappingEnabled="mappingEnabled"
 				:distanceFromActive="distanceFromActive"
@@ -422,7 +422,7 @@
 		</div>
 		<div
 			:class="$style.pagination"
-			v-if="hasNodeRun && !hasRunError && dataCount > pageSize"
+			v-if="hasNodeRun && !hasRunError && dataCount > pageSize && !isSchemaView"
 			v-show="!editMode.enabled"
 		>
 			<el-pagination
@@ -635,6 +635,9 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			}
 			return null;
 		},
+		isSchemaView(): boolean {
+			return this.displayMode === 'schema';
+		},
 		isTriggerNode(): boolean {
 			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
@@ -789,6 +792,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 					  ];
 			}
 
+			// We don't want to paginate the schema view
+			if (this.isSchemaView) {
+				return inputData;
+			}
+
 			const offset = this.pageSize * (this.currentPage - 1);
 			inputData = inputData.slice(offset, offset + this.pageSize);