From 9b46bf65f38cf16896f98360aa23dd43e5bd2ac6 Mon Sep 17 00:00:00 2001
From: Suguru Inoue <suguru@n8n.io>
Date: Wed, 8 Oct 2025 11:04:19 +0200
Subject: [PATCH] fix(editor): Input/output panel in log view shows "N of N
 item(s)" when nothing matched (#20224)

---
 .../src/components/RunDataItemCount.vue       |  4 +-
 .../logs/components/LogsViewRunData.test.ts   | 60 +++++++++++++++++++
 .../logs/components/LogsViewRunData.vue       |  5 +-
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.test.ts

diff --git a/packages/frontend/editor-ui/src/components/RunDataItemCount.vue b/packages/frontend/editor-ui/src/components/RunDataItemCount.vue
index 1e91cd763c8..9162fd0302f 100644
--- a/packages/frontend/editor-ui/src/components/RunDataItemCount.vue
+++ b/packages/frontend/editor-ui/src/components/RunDataItemCount.vue
@@ -17,7 +17,7 @@ const i18n = useI18n();
 </script>
 
 <template>
-	<N8nText v-if="search" :class="$style.itemsText">
+	<N8nText v-if="search" :class="$style.itemsText" data-test-id="run-data-item-count">
 		{{
 			i18n.baseText('ndv.search.items', {
 				adjustToNumber: unfilteredDataCount,
@@ -25,7 +25,7 @@ const i18n = useI18n();
 			})
 		}}
 	</N8nText>
-	<N8nText v-else :class="$style.itemsText">
+	<N8nText v-else :class="$style.itemsText" data-test-id="run-data-item-count">
 		<span>
 			{{
 				i18n.baseText('ndv.output.items', {
diff --git a/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.test.ts b/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.test.ts
new file mode 100644
index 00000000000..83720e65d53
--- /dev/null
+++ b/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.test.ts
@@ -0,0 +1,60 @@
+import { createTestNode, createTestTaskData, createTestWorkflowObject } from '@/__tests__/mocks';
+import { createTestLogEntry } from '../__test__/mocks';
+import { fireEvent, render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import LogsViewRunData from './LogsViewRunData.vue';
+import { createTestingPinia, type TestingPinia } from '@pinia/testing';
+
+describe('LogViewRunData', () => {
+	let pinia: TestingPinia;
+
+	const nodeB = createTestNode({ name: 'B' });
+	const runDataB = createTestTaskData({
+		data: {
+			main: [
+				[{ json: { p: '0' } }, { json: { p: '1' } }, { json: { p: '2' } }, { json: { p: '3' } }],
+			],
+		},
+	});
+	const workflow = createTestWorkflowObject({ nodes: [nodeB] });
+	const logEntry = createTestLogEntry({
+		node: nodeB,
+		runIndex: 0,
+		runData: runDataB,
+		workflow,
+		execution: { resultData: { runData: { B: [runDataB] } } },
+	});
+
+	beforeEach(() => {
+		pinia = createTestingPinia({ stubActions: false, fakeApp: true });
+	});
+
+	it('should display item count', async () => {
+		const rendered = render(LogsViewRunData, {
+			global: { plugins: [pinia] },
+			props: { title: '', logEntry, collapsingTableColumnName: null, paneType: 'output' },
+		});
+
+		expect(rendered.getByTestId('run-data-item-count')).toHaveTextContent('4 items');
+	});
+
+	it('should display matched and total item count unless display mode is schema', async () => {
+		const rendered = render(LogsViewRunData, {
+			global: { plugins: [pinia] },
+			props: { title: '', logEntry, collapsingTableColumnName: null, paneType: 'output' },
+		});
+
+		await fireEvent.click(await rendered.findByTestId('radio-button-table'));
+		await userEvent.type(await rendered.findByTestId('ndv-search'), '0');
+
+		await waitFor(() => {
+			expect(rendered.getByTestId('run-data-item-count')).toHaveTextContent('1 of 4 items');
+		});
+
+		await fireEvent.click(await rendered.findByTestId('radio-button-schema'));
+
+		await waitFor(() => {
+			expect(rendered.getByTestId('run-data-item-count')).toHaveTextContent('4 items');
+		});
+	});
+});
diff --git a/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.vue b/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.vue
index 1671f19682c..0f14f0d69ec 100644
--- a/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.vue
+++ b/packages/frontend/editor-ui/src/features/logs/components/LogsViewRunData.vue
@@ -109,7 +109,10 @@ function handleChangeDisplayMode(value: IRunDataDisplayMode) {
 		</template>
 
 		<template #header-end="itemCountProps">
-			<RunDataItemCount v-bind="itemCountProps" />
+			<RunDataItemCount
+				v-bind="itemCountProps"
+				:search="displayMode === 'schema' ? '' : itemCountProps.search"
+			/>
 		</template>
 
 		<template #no-output-data>