feat(editor): Add support for schema view in the NDV output (#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'),
+		outputDisplayMode: () => this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
-		digital: () => cy.getByTestId('ndv-run-data-display-mode'),
 		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;

packages/editor-ui/src/components/RunData.vue

@@ -4,7 +4,7 @@
 			v-if="canPinData && hasPinData && !editMode.enabled && !isProductionExecutionPreview"
 			theme="secondary"
 			icon="thumbtack"
-			:class="$style['pinned-data-callout']"
+			:class="$style.pinnedDataCallout"
 		>
 			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
 			<span class="ml-4xs" v-if="!isReadOnly">
@@ -78,7 +78,7 @@
 					:manual="isControlledPinDataTooltip"
 				>
 					<template #content v-if="!isControlledPinDataTooltip">
-						<div :class="$style['tooltip-container']">
+						<div :class="$style.tooltipContainer">
 							<strong>{{ $locale.baseText('ndv.pinData.pin.title') }}</strong>
 							<n8n-text size="small" tag="p">
 								{{ $locale.baseText('ndv.pinData.pin.description') }}
@@ -90,12 +90,12 @@
 						</div>
 					</template>
 					<template #content v-else>
-						<div :class="$style['tooltip-container']">
+						<div :class="$style.tooltipContainer">
 							{{ $locale.baseText('node.discovery.pinData.ndv') }}
 						</div>
 					</template>
 					<n8n-icon-button
-						:class="['ml-2xs', $style['pin-data-button']]"
+						:class="['ml-2xs', $style.pinDataButton]"
 						type="tertiary"
 						:active="hasPinData"
 						icon="thumbtack"
@@ -105,7 +105,7 @@
 					/>
 				</n8n-tooltip>
 
-				<div :class="$style['edit-mode-actions']" v-show="editMode.enabled">
+				<div :class="$style.editModeActions" v-show="editMode.enabled">
 					<n8n-button
 						type="tertiary"
 						:label="$locale.baseText('runData.editor.cancel')"
@@ -171,14 +171,14 @@
 			</n8n-text>
 		</div>
 
-		<div :class="$style['data-container']" ref="dataContainer" data-test-id="ndv-data-container">
+		<div :class="$style.dataContainer" ref="dataContainer" data-test-id="ndv-data-container">
 			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
 				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
 				<n8n-text>{{ executingMessage }}</n8n-text>
 			</div>
 
-			<div v-else-if="editMode.enabled" :class="$style['edit-mode']">
+			<div v-else-if="editMode.enabled" :class="$style.editMode">
-				<div :class="[$style['edit-mode-body'], 'ignore-key-press']">
+				<div :class="[$style.editModeBody, 'ignore-key-press']">
 					<code-editor
 						:value="editMode.value"
 						:options="{ scrollBeyondLastLine: false }"
@@ -186,8 +186,8 @@
 						@input="ndvStore.setOutputPanelEditModeValue($event)"
 					/>
 				</div>
-				<div :class="$style['edit-mode-footer']">
+				<div :class="$style.editModeFooter">
-					<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
+					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
 						{{ $locale.baseText('runData.editor.copyDataInfo') }}
 						<n8n-link :to="dataEditingDocsUrl" size="small">
 							{{ $locale.baseText('generic.learnMore') }}
@@ -329,6 +329,7 @@
 				:mappingEnabled="mappingEnabled"
 				:distanceFromActive="distanceFromActive"
 				:node="node"
+				:paneType="paneType"
 				:runIndex="runIndex"
 				:totalRuns="maxRunIndex"
 			/>
@@ -656,8 +657,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 				defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary' });
 			}
 
+			const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
 			if (this.isPaneTypeInput) {
-				defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema' });
+				defaults.unshift(schemaView);
+			} else {
+				defaults.push(schemaView);
 			}
 
 			if (
@@ -1305,10 +1309,12 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 				this.activeNode.type === HTML_NODE_TYPE &&
 				this.activeNode.parameters.operation === 'generateHtmlTemplate';
 
-			this.ndvStore.setPanelDisplayMode({
+			if (shouldDisplayHtml) {
-				pane: 'output',
+				this.ndvStore.setPanelDisplayMode({
-				mode: shouldDisplayHtml ? 'html' : 'table',
+					pane: 'output',
-			});
+					mode: 'html',
+				});
+			}
 		},
 	},
 	watch: {
@@ -1380,7 +1386,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	flex-direction: column;
 }
 
-.pinned-data-callout {
+.pinnedDataCallout {
 	border-radius: inherit;
 	border-bottom-right-radius: 0;
 	border-top: 0;
@@ -1403,7 +1409,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	}
 }
 
-.data-container {
+.dataContainer {
 	position: relative;
 	height: 100%;
 
@@ -1421,7 +1427,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	padding: 0 var(--spacing-s) var(--spacing-3xl) var(--spacing-s);
 	right: 0;
 	overflow-y: auto;
-	line-height: 1.5;
+	line-height: var(--font-line-height-xloose);
 	word-break: normal;
 	height: 100%;
 }
@@ -1500,10 +1506,10 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 
 .binaryHeader {
 	color: $color-primary;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	font-size: 1.2em;
-	padding-bottom: 0.5em;
+	padding-bottom: var(--spacing-2xs);
-	margin-bottom: 0.5em;
+	margin-bottom: var(--spacing-2xs);
 	border-bottom: 1px solid var(--color-text-light);
 }
 
@@ -1529,12 +1535,11 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	justify-content: flex-end;
 	flex-grow: 1;
 }
-
+.tooltipContain {
-.tooltip-container {
 	max-width: 240px;
 }
 
-.pin-data-button {
+.pinDataButton {
 	svg {
 		transition: transform 0.3s ease;
 	}
@@ -1552,7 +1557,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	margin-bottom: var(--spacing-s);
 }
 
-.edit-mode {
+.editMode {
 	height: calc(100% - var(--spacing-s));
 	display: flex;
 	flex-direction: column;
@@ -1562,14 +1567,14 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	padding-right: var(--spacing-s);
 }
 
-.edit-mode-body {
+.editModeBody {
 	flex: 1 1 auto;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
 }
 
-.edit-mode-footer {
+.editModeFooter {
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
@@ -1577,13 +1582,13 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 	padding-top: var(--spacing-s);
 }
 
-.edit-mode-footer-infotip {
+.editModeFooterInfotip {
 	display: flex;
 	flex: 1;
 	width: 100%;
 }
 
-.edit-mode-actions {
+.editModeActions {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;

packages/editor-ui/src/components/RunDataSchema.test.ts

@@ -24,6 +24,7 @@ describe('RunDataJsonSchema.vue', () => {
 			distanceFromActive: 1,
 			runIndex: 1,
 			totalRuns: 2,
+			paneType: 'input',
 			node: {
 				parameters: {
 					keepOnlySet: false,

packages/editor-ui/src/components/RunDataSchema.vue

@@ -18,6 +18,7 @@ type Props = {
 	distanceFromActive: number;
 	runIndex: number;
 	totalRuns: number;
+	paneType: 'input' | 'output';
 	node: INodeUi | null;
 };
 
@@ -92,6 +93,7 @@ const onDragEnd = (el: HTMLElement) => {
 						:schema="schema"
 						:level="0"
 						:parent="null"
+						:paneType="paneType"
 						:subKey="`${schema.type}-0-0`"
 						:mappingEnabled="mappingEnabled"
 						:draggingPath="draggingPath"

packages/editor-ui/src/components/RunDataSchemaItem.vue

@@ -9,6 +9,7 @@ type Props = {
 	level: number;
 	parent: Schema | null;
 	subKey: string;
+	paneType: 'input' | 'output';
 	mappingEnabled: boolean;
 	draggingPath: string;
 	distanceFromActive: number;
@@ -72,7 +73,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 </script>
 
 <template>
-	<div :class="$style.item">
+	<div :class="$style.item" data-test-id="run-data-schema-item">
 		<div
 			v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
 			:title="schema.type"
@@ -107,7 +108,8 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 				:schema="s"
 				:level="level + 1"
 				:parent="schema"
-				:subKey="`${s.type}-${level}-${i}`"
+				:paneType="paneType"
+				:subKey="`${paneType}_${s.type}-${level}-${i}`"
 				:mappingEnabled="mappingEnabled"
 				:draggingPath="draggingPath"
 				:distanceFromActive="distanceFromActive"

packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap

@@ -13,6 +13,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
       >
         <div
           class="item"
+          data-test-id="run-data-schema-item"
         >
           <!---->
           <!---->
@@ -23,6 +24,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
           >
             <div
               class="item"
+              data-test-id="run-data-schema-item"
               style="transition-delay: 0s;"
             >
               <div
@@ -60,6 +62,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
             </div>
             <div
               class="item"
+              data-test-id="run-data-schema-item"
               style="transition-delay: 0.033s;"
             >
               <div
@@ -97,6 +100,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
             </div>
             <div
               class="item"
+              data-test-id="run-data-schema-item"
               style="transition-delay: 0.066s;"
             >
               <div
@@ -126,12 +130,12 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
               <!---->
               <input
                 checked="checked"
-                id="array-0-2"
+                id="input_array-0-2"
                 type="checkbox"
               />
               <label
                 class="toggle"
-                for="array-0-2"
+                for="input_array-0-2"
               >
                 <font-awesome-icon-stub
                   icon="angle-up"
@@ -142,6 +146,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
               >
                 <div
                   class="item"
+                  data-test-id="run-data-schema-item"
                   style="transition-delay: 0s;"
                 >
                   <div
@@ -181,6 +186,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
                 </div>
                 <div
                   class="item"
+                  data-test-id="run-data-schema-item"
                   style="transition-delay: 0.033s;"
                 >
                   <div
@@ -273,6 +279,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
       >
         <div
           class="item"
+          data-test-id="run-data-schema-item"
         >
           <!---->
           <!---->
@@ -283,6 +290,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
           >
             <div
               class="item"
+              data-test-id="run-data-schema-item"
               style="transition-delay: 0s;"
             >
               <div
@@ -312,12 +320,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
               <!---->
               <input
                 checked="checked"
-                id="array-0-0"
+                id="input_array-0-0"
                 type="checkbox"
               />
               <label
                 class="toggle"
-                for="array-0-0"
+                for="input_array-0-0"
               >
                 <font-awesome-icon-stub
                   icon="angle-up"
@@ -328,6 +336,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
               >
                 <div
                   class="item"
+                  data-test-id="run-data-schema-item"
                   style="transition-delay: 0s;"
                 >
                   <div
@@ -359,12 +368,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                   <!---->
                   <input
                     checked="checked"
-                    id="object-1-0"
+                    id="input_object-1-0"
                     type="checkbox"
                   />
                   <label
                     class="toggle"
-                    for="object-1-0"
+                    for="input_object-1-0"
                   >
                     <font-awesome-icon-stub
                       icon="angle-up"
@@ -375,6 +384,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                   >
                     <div
                       class="item"
+                      data-test-id="run-data-schema-item"
                       style="transition-delay: 0s;"
                     >
                       <div
@@ -404,12 +414,12 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                       <!---->
                       <input
                         checked="checked"
-                        id="object-2-0"
+                        id="input_object-2-0"
                         type="checkbox"
                       />
                       <label
                         class="toggle"
-                        for="object-2-0"
+                        for="input_object-2-0"
                       >
                         <font-awesome-icon-stub
                           icon="angle-up"
@@ -420,6 +430,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                       >
                         <div
                           class="item"
+                          data-test-id="run-data-schema-item"
                           style="transition-delay: 0s;"
                         >
                           <div
@@ -459,6 +470,7 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
                     </div>
                     <div
                       class="item"
+                      data-test-id="run-data-schema-item"
                       style="transition-delay: 0.033s;"
                     >
                       <div