Order the workflow run's output properly in the JsonFieldDisplay (#11583)

In this PR:

- Order the workflow run's output in the JsonField Display; the order
should be: error, stepsOutput, flow
- Ensure the special characters are hidden in the JSON visualizer
- Add missing scenarios to Json Tree's stories as it ensures Chromatic
checks them


https://github.com/user-attachments/assets/2ca5ae1d-fdba-4327-bad2-246fd9d23cb9

Closes https://github.com/twentyhq/core-team-issues/issues/804

packages/twenty-ui/src/json-visualizer/__stories__/JsonTree.stories.tsx

@@ -32,30 +32,85 @@ export const String: Story = {
   args: {
     value: 'Hello',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('Hello');
+
+    expect(node).toBeVisible();
+  },
+};
+
+export const StringWithSpecialCharacters: Story = {
+  args: {
+    value: 'Merry \n Christmas \t 🎄',
+    onNodeValueClick: fn(),
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('Merry Christmas 🎄');
+
+    await userEvent.click(node);
+
+    await waitFor(() => {
+      expect(args.onNodeValueClick).toHaveBeenCalledWith(
+        'Merry \n Christmas \t 🎄',
+      );
+    });
+  },
 };
 
 export const Number: Story = {
   args: {
     value: 42,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('42');
+
+    expect(node).toBeVisible();
+  },
 };
 
 export const Boolean: Story = {
   args: {
     value: true,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('true');
+
+    expect(node).toBeVisible();
+  },
 };
 
 export const Null: Story = {
   args: {
     value: null,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('null');
+
+    expect(node).toBeVisible();
+  },
 };
 
 export const ArraySimple: Story = {
   args: {
     value: [1, 2, 3],
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const node = await canvas.findByText('[3]');
+
+    expect(node).toBeVisible();
+  },
 };
 
 export const ArrayEmpty: Story = {
@@ -130,6 +185,15 @@ export const ObjectSimple: Story = {
       age: 30,
     },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const name = await canvas.findByText('John Doe');
+    expect(name).toBeVisible();
+
+    const age = await canvas.findByText('30');
+    expect(age).toBeVisible();
+  },
 };
 
 export const ObjectEmpty: Story = {
@@ -199,6 +263,15 @@ export const ObjectWithArray: Story = {
       },
     },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const nestedArrayCount = await canvas.findByText('[2]');
+    expect(nestedArrayCount).toBeVisible();
+
+    const nestedObjectCounts = await canvas.findAllByText('{2}');
+    expect(nestedObjectCounts).toHaveLength(3);
+  },
 };
 
 export const NestedElementCanBeCollapsed: Story = {
@@ -422,6 +495,15 @@ export const ReallyDeepNestedObject: Story = {
       },
     },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const finalNodes = await canvas.findAllByText('end');
+
+    expect(finalNodes).toHaveLength(2);
+    expect(finalNodes[0]).toBeVisible();
+    expect(finalNodes[1]).toBeVisible();
+  },
 };
 
 export const LongText: Story = {
@@ -431,6 +513,21 @@ export const LongText: Story = {
         'Ut lobortis ultricies purus, sit amet porta eros. Suspendisse efficitur quam vitae diam imperdiet feugiat. Etiam vel bibendum elit.',
     },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const label = await canvas.findByText(
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis est tincidunt, sagittis neque vitae, sodales purus.',
+    );
+
+    expect(label).toBeVisible();
+
+    const value = await canvas.findByText(
+      'Ut lobortis ultricies purus, sit amet porta eros. Suspendisse efficitur quam vitae diam imperdiet feugiat. Etiam vel bibendum elit.',
+    );
+
+    expect(value).toBeVisible();
+  },
 };
 
 export const BlueHighlighting: Story = {