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-front/src/modules/object-record/record-field/meta-types/hooks/useFormattedJsonFieldValue.ts

@@ -0,0 +1,25 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { orderWorkflowRunOutput } from '@/object-record/record-field/meta-types/utils/orderWorkflowRunOutput';
+import { FieldJsonValue } from '@/object-record/record-field/types/FieldMetadata';
+import { useContext } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useFormattedJsonFieldValue = ({
+  fieldValue,
+}: {
+  fieldValue: FieldJsonValue | undefined;
+}): FieldJsonValue | undefined => {
+  const { fieldDefinition } = useContext(FieldContext);
+
+  if (
+    fieldDefinition.metadata.objectMetadataNameSingular ===
+      CoreObjectNameSingular.WorkflowRun &&
+    fieldDefinition.metadata.fieldName === 'output' &&
+    isDefined(fieldValue)
+  ) {
+    return orderWorkflowRunOutput(fieldValue) as FieldJsonValue;
+  }
+
+  return fieldValue;
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useJsonFieldDisplay.ts

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { FieldJsonValue } from '@/object-record/record-field/types/FieldMetadata';
 import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 
+import { useFormattedJsonFieldValue } from '@/object-record/record-field/meta-types/hooks/useFormattedJsonFieldValue';
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useJsonFieldDisplay = () => {
@@ -15,9 +16,13 @@ export const useJsonFieldDisplay = () => {
     fieldName,
   );
 
+  const formattedFieldValue = useFormattedJsonFieldValue({
+    fieldValue,
+  });
+
   return {
     maxWidth,
     fieldDefinition,
-    fieldValue,
+    fieldValue: formattedFieldValue,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/usePrecomputedJsonDraftValue.ts

@@ -1,7 +1,6 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { WorkflowRunOutput } from '@/workflow/types/Workflow';
-import { workflowRunOutputSchema } from '@/workflow/validation-schemas/workflowSchema';
+import { orderWorkflowRunOutput } from '@/object-record/record-field/meta-types/utils/orderWorkflowRunOutput';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { JsonObject, JsonValue } from 'type-fest';
@@ -22,26 +21,7 @@ export const usePrecomputedJsonDraftValue = ({
     fieldDefinition.metadata.fieldName === 'output' &&
     isDefined(draftValue)
   ) {
-    const parsedValue = workflowRunOutputSchema.safeParse(parsedJsonValue);
-    if (!parsedValue.success) {
-      return null;
-    }
-
-    const orderedWorkflowRunOutput: WorkflowRunOutput = {
-      ...(isDefined(parsedValue.data.error)
-        ? {
-            error: parsedValue.data.error,
-          }
-        : {}),
-      ...(isDefined(parsedValue.data.stepsOutput)
-        ? {
-            stepsOutput: parsedValue.data.stepsOutput,
-          }
-        : {}),
-      flow: parsedValue.data.flow,
-    };
-
-    return orderedWorkflowRunOutput as JsonObject;
+    return orderWorkflowRunOutput(parsedJsonValue) as JsonObject;
   }
 
   return parsedJsonValue;

packages/twenty-front/src/modules/object-record/record-field/meta-types/utils/orderWorkflowRunOutput.ts

@@ -0,0 +1,27 @@
+import { WorkflowRunOutput } from '@/workflow/types/Workflow';
+import { workflowRunOutputSchema } from '@/workflow/validation-schemas/workflowSchema';
+import { isDefined } from 'twenty-shared/utils';
+import { JsonValue } from 'type-fest';
+
+export const orderWorkflowRunOutput = (value: JsonValue) => {
+  const parsedValue = workflowRunOutputSchema.safeParse(value);
+  if (!parsedValue.success) {
+    return null;
+  }
+
+  const orderedWorkflowRunOutput: WorkflowRunOutput = {
+    ...(isDefined(parsedValue.data.error)
+      ? {
+          error: parsedValue.data.error,
+        }
+      : {}),
+    ...(isDefined(parsedValue.data.stepsOutput)
+      ? {
+          stepsOutput: parsedValue.data.stepsOutput,
+        }
+      : {}),
+    flow: parsedValue.data.flow,
+  };
+
+  return orderedWorkflowRunOutput;
+};