refactor(editor): RunDataTable render null values more distinct (no-changelog) (#18500)

Co-authored-by: Elias Meire <elias@meire.dev>

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1855,8 +1855,8 @@
 	"runData.openParentExecution": "View parent execution {id}",
 	"runData.emptyItemHint": "This is an item, but it's empty.",
 	"runData.emptyArray": "[empty array]",
-	"runData.emptyString": "[empty]",
-	"runData.emptyObject": "[empty object]",
+	"runData.emptyString": "empty",
+	"runData.emptyObject": "{'{empty object}'}",
 	"runData.unnamedField": "[Unnamed field]",
 	"runData.switchToBinary.info": "This item only has",
 	"runData.switchToBinary.binary": "binary data",

packages/frontend/editor-ui/src/components/RunDataTable.test.ts

@@ -1,7 +1,7 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import RunDataTable from '@/components/RunDataTable.vue';
 import { createTestingPinia } from '@pinia/testing';
-import { cleanup, fireEvent, waitFor } from '@testing-library/vue';
+import { cleanup, fireEvent, waitFor, within } from '@testing-library/vue';
 import { nextTick } from 'vue';
 
 vi.mock('vue-router', () => {
@@ -109,6 +109,48 @@ describe('RunDataTable.vue', () => {
 		});
 	});
 
+	it('renders null values correctly', () => {
+		function getFirstTableCellForColumn(container: HTMLElement, columnName: string) {
+			const headers = within(container).getAllByRole('columnheader');
+			const header = within(container).getByRole('columnheader', { name: columnName });
+			const columnIndex = headers.indexOf(header);
+			const firstRow = within(container).getAllByRole('row')[1];
+			const cells = within(firstRow).getAllByRole('cell');
+			const cell = cells[columnIndex];
+			return cell;
+		}
+
+		const cases = [
+			{ key: 'emptyString', value: '', expected: 'empty' },
+			{ key: 'emptyObject', value: {}, expected: '{empty object}' },
+			{ key: 'null', value: null, expected: 'null' },
+			{ key: 'nullArray', value: [null], expected: '0:null' },
+			{ key: 'arrayWithNull', value: [1, 2, null, 'b'], expected: '2:null' },
+			{ key: 'objectWithNull', value: { a: 1, b: null, c: 'boo' }, expected: 'b:null' },
+		];
+		const inputData = [{ json: Object.fromEntries(cases.map((c) => [c.key, c.value])) }];
+		const { container } = renderComponent({
+			props: { inputData },
+		});
+
+		for (const { key: columnName, expected } of cases) {
+			const cell = getFirstTableCellForColumn(container as HTMLElement, columnName);
+			expect(cell).toHaveTextContent(expected);
+			expect(cell.querySelector('.empty')).toBeInTheDocument();
+		}
+	});
+
+	it('only renders `[null]` for empty arrays', () => {
+		const inputData = { json: { null: null } }; // should not render "[null]"
+
+		const { container } = renderComponent({
+			props: { inputData: [inputData] },
+		});
+		const spans = container.textContent;
+
+		expect(spans).not.toContain('[null]');
+	});
+
 	it('inserts col elements in DOM to specify column widths when collapsing column name is specified', async () => {
 		const inputData = { json: { firstName: 'John', lastName: 'Doe' } };
 		const rendered = renderComponent({

packages/frontend/editor-ui/src/components/RunDataTable.vue

@@ -269,7 +269,7 @@ function getValueToRender(value: unknown): string {
 		return i18n.baseText('runData.emptyObject');
 	}
 	if (value === null || value === undefined) {
-		return `[${value}]`;
+		return `${value}`;
 	}
 	if (value === true || value === false || typeof value === 'number') {
 		return value.toString();
@@ -957,6 +957,7 @@ th.isCollapsingColumn + th {
 
 .empty {
 	color: var(--color-danger);
+	font-style: italic;
 }
 
 .limitColWidth {