feat(editor): Add support for schema view in the NDV output (n8n-io#5688

)

* feat(editor): Add support for schema view in the NDV output

* Make intercepts waiting optional in waitForLoad method

* Update RunDataSchema snapshots

* Do not reset output panel view on execution, properly key run RunDataSchemaItem to make sure they are unique across panels

* Update snapshot tests

* Make adding of schema view button option more readable

cypress/e2e/5-ndv.cy.ts

@@ -89,4 +89,42 @@ describe('NDV', () => {
 			cy.get('[class*=hasIssues]').should('have.length', 1);
 		});
 	});
+
+	describe('test output schema view', () => {
+		const schemaKeys = ['id', 'name', 'email', 'notes', 'country', 'created', 'objectValue', 'prop1', 'prop2'];
+		beforeEach(() => {
+			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', () => {
+			ndv.getters.outputDisplayMode().children().should('have.length', 3);
+			ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Table');
+			ndv.getters.outputDisplayMode().contains('Schema').click();
+			ndv.getters.outputDisplayMode().find('[class*=active]').should('contain', 'Schema');
+
+			schemaKeys.forEach((key) => {
+				ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('exist');
+			});
+		});
+		it('should preserve schema view after execution', () => {
+			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', () => {
+			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();
+
+			expandedObjectProps.forEach((key) => {
+				ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('be.visible');
+			});
+			getObjectValueItem().find('label').click();
+			expandedObjectProps.forEach((key) => {
+				ndv.getters.outputPanel().find('[data-test-id=run-data-schema-item]').contains(key).should('not.be.visible');
+			});
+		})
+	})
 });

cypress/e2e/7-workflow-actions.cy.ts

@@ -94,6 +94,7 @@ describe('Workflow Actions', () => {
 		cy.get('.el-message-box').should('be.visible');
 		cy.get('.el-message-box').find('input').type(IMPORT_WORKFLOW_URL);
 		cy.get('body').type('{enter}');
+		cy.waitForLoad(false)
 		WorkflowPage.actions.zoomToFit();
 		WorkflowPage.getters.canvasNodes().should('have.length', 2);
 		WorkflowPage.getters.nodeConnections().should('have.length', 1);
@@ -103,6 +104,7 @@ describe('Workflow Actions', () => {
 		WorkflowPage.getters
 			.workflowImportInput()
 			.selectFile('cypress/fixtures/Test_workflow-actions_paste-data.json', { force: true });
+		cy.waitForLoad(false)
 		WorkflowPage.actions.zoomToFit();
 		WorkflowPage.getters.canvasNodes().should('have.length', 2);
 		WorkflowPage.getters.nodeConnections().should('have.length', 1);

cypress/fixtures/Test_workflow_schema_test.json

@@ -0,0 +1,92 @@
+{
+  "name": "My workflow 8",
+  "nodes": [
+    {
+      "parameters": {
+        "operation": "getAllPeople",
+        "limit": 10
+      },
+      "id": "39cd80ce-5a8f-4339-b3d5-c4af969dd330",
+      "name": "Customer Datastore (n8n training)",
+      "type": "n8n-nodes-base.n8nTrainingCustomerDatastore",
+      "typeVersion": 1,
+      "position": [
+        940,
+        680
+      ]
+    },
+    {
+      "parameters": {
+        "values": {
+          "number": [
+            {
+              "name": "objectValue.prop1",
+              "value": 123
+            }
+          ],
+          "string": [
+            {
+              "name": "objectValue.prop2",
+              "value": "someText"
+            }
+          ]
+        },
+        "options": {
+          "dotNotation": true
+        }
+      },
+      "id": "6e4490f6-ba95-4400-beec-2caefdd4895a",
+      "name": "Set",
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 1,
+      "position": [
+        1300,
+        680
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "58512a93-dabf-4584-817f-27c608c1bdd5",
+      "name": "When clicking \"Execute Workflow\"",
+      "type": "n8n-nodes-base.manualTrigger",
+      "typeVersion": 1,
+      "position": [
+        720,
+        680
+      ]
+    }
+  ],
+  "pinData": {},
+  "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": "4a4f292a-92be-427c-848a-9582527f5ed3",
+  "id": "8",
+  "meta": {
+    "instanceId": "032eceae7493054b723340499be69ecbf4cbe28a7ec6df676b759000750b968d"
+  },
+  "tags": []
+}

cypress/pages/ndv.ts

@@ -13,10 +13,9 @@ export class NDV extends BasePage {
 		outputPanel: () => cy.getByTestId('output-panel'),
 		executingLoader: () => cy.getByTestId('ndv-executing'),
 		inputDataContainer: () => this.getters.inputPanel().findChildByTestId('ndv-data-container'),
-		inputDisplayMode: () => this.getters.inputPanel().getByTestId('ndv-run-data-display-mode'),
+		inputDisplayMode: () => this.getters.inputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
 		outputDataContainer: () => this.getters.outputPanel().findChildByTestId('ndv-data-container'),
-		outputDisplayMode: () => this.getters.outputPanel().getByTestId('ndv-run-data-display-mode'),
-		digital: () => cy.getByTestId('ndv-run-data-display-mode'),
+		outputDisplayMode: () => this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
 		pinDataButton: () => cy.getByTestId('ndv-pin-data'),
 		editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
 		pinnedDataEditor: () => this.getters.outputPanel().find('.monaco-editor[role=code]'),

cypress/support/commands.ts

@@ -39,6 +39,8 @@ Cypress.Commands.add('createFixtureWorkflow', (fixtureKey, workflowName) => {
 	workflowPage.getters
 		.workflowImportInput()
 		.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
+
+	cy.waitForLoad(false);
 	workflowPage.actions.setWorkflowName(workflowName);
 
 	workflowPage.getters.saveButton().should('contain', 'Saved');
@@ -52,11 +54,13 @@ Cypress.Commands.add(
 	},
 );
 
-Cypress.Commands.add('waitForLoad', () => {
+Cypress.Commands.add('waitForLoad', (waitForIntercepts = true) => {
 	// These aliases are set-up before each test in cypress/support/e2e.ts
 	// we can't set them up here because at this point it would be too late
 	// and the requests would already have been made
-	cy.wait(['@loadSettings', '@loadLogin'])
+	if(waitForIntercepts) {
+		cy.wait(['@loadSettings', '@loadLogin'])
+	}
 	cy.getByTestId('node-view-loader', { timeout: 20000 }).should('not.exist');
 	cy.get('.el-loading-mask', { timeout: 20000 }).should('not.exist');
 });

cypress/support/index.ts

@@ -43,7 +43,7 @@ declare global {
 			skipSetup(): void;
 			resetAll(): void;
 			enableFeature(feature: string): void;
-			waitForLoad(): void;
+			waitForLoad(waitForIntercepts?: boolean): void;
 			grantBrowserPermissions(...permissions: string[]): void;
 			readClipboard(): Chainable<string>;
 			paste(pastePayload: string): void;