fix(editor): Showing string numbers and null properly in JSON view (#4513)

* fix(editor): update `vue-json-pretty` package

* fix(editor): JSON view show string numbers and null properly

* fix(editor): testing if RunDataJson.vue display the values according to its type

* chore(editor): resolve package-lock.json conflict

* fix(editor): using @pinia/testing library to mock pinia store

* chore: fix package-lock.json after merge conflicts

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

@@ -371,14 +371,15 @@ import { pinData } from '@/components/mixins/pinData';
 import { CodeEditor } from "@/components/forms";
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { clearJsonKey, executionDataToJson, stringSizeInBytes } from './helpers';
-import RunDataTable from './RunDataTable.vue';
-import RunDataJson from '@/components/RunDataJson.vue';
 import { isEmpty } from '@/utils';
 import { useWorkflowsStore } from "@/stores/workflows";
 import { mapStores } from "pinia";
 import { useNDVStore } from "@/stores/ndv";
 import { useNodeTypesStore } from "@/stores/nodeTypes";
 
+const RunDataTable = () => import('@/components/RunDataTable.vue');
+const RunDataJson = () => import('@/components/RunDataJson.vue');
+
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink',
 };

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

@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import { PiniaVuePlugin } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
+import { render, screen } from '@testing-library/vue';
+import RunDataJson from '@/components/RunDataJson.vue';
+
+Vue.use(PiniaVuePlugin);
+
+describe('RunDataJson.vue', () => {
+	it('renders json values properly', () => {
+		render(RunDataJson, {
+			pinia: createTestingPinia(),
+			props: {
+				mappingEnabled: true,
+				editMode: { enabled: false },
+				inputData: [{
+					json: {
+						list: [1,2,3],
+						record: { name: 'Joe' },
+						myNumber: 123,
+						myStringNumber: '456',
+						myStringText: 'abc',
+						nil: null,
+						d: undefined,
+					},
+				}],
+				node: {
+					parameters: {
+						keepOnlySet: false,
+						values: {},
+						options: {},
+					},
+					id: '820ea733-d8a6-4379-8e73-88a2347ea003',
+					name: 'Set',
+					type: 'n8n-nodes-base.set',
+					typeVersion: 1,
+					position: [
+						380,
+						1060,
+					],
+					disabled: false,
+				},
+			},
+			mocks: {
+				$locale: {
+					baseText() {
+						return '';
+					},
+				},
+				$store: {
+					getters: {},
+				},
+			},
+		});
+		expect(screen.getByText('123')).toBeInTheDocument();
+		expect(screen.getByText('"456"')).toBeInTheDocument();
+		expect(screen.getByText('"abc"')).toBeInTheDocument();
+		expect(screen.getByText('null')).toBeInTheDocument();
+		expect(screen.queryByText('undefined')).not.toBeInTheDocument();
+	});
+});

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

@@ -62,7 +62,7 @@ import VueJsonPretty from 'vue-json-pretty';
 import { LOCAL_STORAGE_MAPPING_FLAG } from '@/constants';
 import { IDataObject, INodeExecutionData } from "n8n-workflow";
 import Draggable from '@/components/Draggable.vue';
-import { convertPath, executionDataToJson, isString, isStringNumber } from "@/components/helpers";
+import { convertPath, executionDataToJson, isString } from "@/components/helpers";
 import { INodeUi } from "@/Interface";
 import { shorten } from './helpers';
 import { externalHooks } from "@/components/mixins/externalHooks";
@@ -143,7 +143,7 @@ export default mixins(externalHooks).extend({
 			useNDVStore,
 		),
 		jsonData(): IDataObject[] {
-			return executionDataToJson(this.inputData as INodeExecutionData[]);
+			return executionDataToJson(this.inputData);
 		},
 		showHint(): boolean {
 			return (
@@ -195,8 +195,8 @@ export default mixins(externalHooks).extend({
 				this.$telemetry.track('User dragged data for mapping', telemetryPayload);
 			}, 1000); // ensure dest data gets set if drop
 		},
-		getContent(value: string): string {
-			return isString(value) && !isStringNumber(value) ? `"${ value }"` : value;
+		getContent(value: unknown): string {
+			return isString(value) ? `"${ value }"` : JSON.stringify(value);
 		},
 	},
 });