From ab5688c582c05afd7d3e0967eda0f5dc73d6d3ed Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 17 Jul 2024 11:18:13 +0200
Subject: [PATCH] fix(editor): Handle disabled nodes in schema view (#10052)

Co-authored-by: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>
---
 packages/editor-ui/src/components/RunData.vue |  7 ++++--
 .../src/components/RunDataSchema.vue          | 17 ++++++++++----
 .../__tests__/RunDataSchema.test.ts           | 23 ++++++++++++++++++-
 .../__snapshots__/RunDataSchema.test.ts.snap  |  6 +++--
 .../src/plugins/i18n/locales/en.json          |  1 +
 5 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 0efa1bfd1b..ec29b47670 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -253,11 +253,14 @@
 				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
 			</div>
 
-			<div v-else-if="!hasNodeRun" :class="$style.center">
+			<div v-else-if="!hasNodeRun && !(isInputSchemaView && node?.disabled)" :class="$style.center">
 				<slot name="node-not-run"></slot>
 			</div>
 
-			<div v-else-if="paneType === 'input' && node?.disabled" :class="$style.center">
+			<div
+				v-else-if="paneType === 'input' && !isInputSchemaView && node?.disabled"
+				:class="$style.center"
+			>
 				<n8n-text>
 					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
 					<n8n-link @click="enableNode">
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 6df5e6c339..44fe4c683a 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -285,6 +285,7 @@ watch(
 
 					<div :class="$style.title">
 						{{ currentNode.node.name }}
+						<span v-if="currentNode.node.disabled">({{ $locale.baseText('node.disabled') }})</span>
 					</div>
 					<font-awesome-icon
 						v-if="currentNode.nodeType.group.includes('trigger')"
@@ -329,8 +330,16 @@ watch(
 					>
 						<div :class="$style.innerSchema" @transitionstart.stop>
 							<div
-								v-if="isDataEmpty(currentNode.schema)"
-								:class="$style.empty"
+								v-if="currentNode.node.disabled"
+								:class="$style.notice"
+								data-test-id="run-data-schema-disabled"
+							>
+								{{ i18n.baseText('dataMapping.schemaView.disabled') }}
+							</div>
+
+							<div
+								v-else-if="isDataEmpty(currentNode.schema)"
+								:class="$style.notice"
 								data-test-id="run-data-schema-empty"
 							>
 								{{ i18n.baseText('dataMapping.schemaView.emptyData') }}
@@ -421,7 +430,7 @@ watch(
 		scroll-margin-top: var(--header-height);
 	}
 
-	.empty {
+	.notice {
 		padding-left: var(--spacing-l);
 	}
 }
@@ -443,7 +452,7 @@ watch(
 	}
 }
 
-.empty {
+.notice {
 	font-size: var(--font-size-2xs);
 	color: var(--color-text-light);
 }
diff --git a/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts b/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
index dd0acb3119..8ac02d2152 100644
--- a/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
+++ b/packages/editor-ui/src/components/__tests__/RunDataSchema.test.ts
@@ -14,12 +14,21 @@ const mockNode1 = createTestNode({
 	name: 'Set1',
 	type: SET_NODE_TYPE,
 	typeVersion: 1,
+	disabled: false,
 });
 
 const mockNode2 = createTestNode({
 	name: 'Set2',
 	type: SET_NODE_TYPE,
 	typeVersion: 1,
+	disabled: false,
+});
+
+const disabledNode = createTestNode({
+	name: 'Disabled Node',
+	type: SET_NODE_TYPE,
+	typeVersion: 1,
+	disabled: true,
 });
 
 async function setupStore() {
@@ -28,7 +37,7 @@ async function setupStore() {
 		name: 'Test Workflow',
 		connections: {},
 		active: true,
-		nodes: [mockNode1, mockNode2],
+		nodes: [mockNode1, mockNode2, disabledNode],
 	});
 
 	const pinia = createPinia();
@@ -162,6 +171,18 @@ describe('RunDataSchema.vue', () => {
 		expect(getAllByTestId('run-data-schema-empty').length).toBe(1);
 	});
 
+	it('renders disabled nodes correctly', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				nodes: [{ name: disabledNode.name, indicies: [], depth: 1 }],
+			},
+		});
+		expect(getByTestId('run-data-schema-disabled')).toBeInTheDocument();
+		expect(getByTestId('run-data-schema-node-name')).toHaveTextContent(
+			`${disabledNode.name} (Deactivated)`,
+		);
+	});
+
 	test.each([[[{ tx: false }, { tx: false }]], [[{ tx: '' }, { tx: '' }]], [[{ tx: [] }]]])(
 		'renders schema instead of showing no data for %o',
 		(data) => {
diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index fa16085fd1..942eb55aa3 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -1382,7 +1382,8 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
             class="title"
             data-v-46dade00=""
           >
-            Set1
+            Set1 
+            <!--v-if-->
           </div>
           <!--v-if-->
         </div>
@@ -1932,7 +1933,8 @@ exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
             class="title"
             data-v-46dade00=""
           >
-            Set2
+            Set2 
+            <!--v-if-->
           </div>
           <!--v-if-->
         </div>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index e7e262b536..c552869039 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -606,6 +606,7 @@
 	"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
 	"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",
 	"dataMapping.schemaView.emptyData": "No fields - item(s) exist, but they're empty",
+	"dataMapping.schemaView.disabled": "This node is disabled and will just pass data through",
 	"dataMapping.schemaView.noMatches": "No results for '{search}'",
 	"displayWithChange.cancelEdit": "Cancel Edit",
 	"displayWithChange.clickToChange": "Click to Change",