Bring back raw workflow run output visualizer (#10294)

[My last
PR](https://github.com/twentyhq/twenty/pull/10146#issuecomment-2665863910),
which introduced the workflow run visualizer, made it impossible to
debug an execution as it's not complete yet.

In this PR, I'm bringing back the raw output visualizer and hiding the
flow visualizer as it's been broken by the recent change to the output
format.

packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx

@@ -8,6 +8,7 @@ import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableE
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { CardType } from '@/object-record/record-show/types/CardType';
 import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/ShowPageActivityContainer';
+import { WorkflowRunOutputVisualizer } from '@/workflow/components/WorkflowRunOutputVisualizer';
 import { WorkflowRunVisualizer } from '@/workflow/components/WorkflowRunVisualizer';
 import { WorkflowVersionVisualizer } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizer';
 import { WorkflowVersionVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect';
@@ -95,4 +96,7 @@ export const CardComponents: Record<CardType, CardComponentType> = {
   [CardType.WorkflowRunCard]: ({ targetableObject }) => (
     <WorkflowRunVisualizer workflowRunId={targetableObject.id} />
   ),
+  [CardType.WorkflowRunOutputCard]: ({ targetableObject }) => (
+    <WorkflowRunOutputVisualizer workflowRunId={targetableObject.id} />
+  ),
 };

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts

@@ -13,6 +13,7 @@ import {
   IconCalendarEvent,
   IconMail,
   IconNotes,
+  IconPrinter,
   IconSettings,
 } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -179,11 +180,11 @@ export const useRecordShowContainerTabs = (
     },
     [CoreObjectNameSingular.WorkflowRun]: {
       tabs: {
-        workflowRunFlow: {
-          title: 'Flow',
+        workflowRunOutput: {
+          title: 'Output',
           position: 0,
-          Icon: IconSettings,
-          cards: [{ type: CardType.WorkflowRunCard }],
+          Icon: IconPrinter,
+          cards: [{ type: CardType.WorkflowRunOutputCard }],
           hide: {
             ifMobile: false,
             ifDesktop: false,
@@ -193,6 +194,20 @@ export const useRecordShowContainerTabs = (
             ifRelationsMissing: [],
           },
         },
+        // workflowRunFlow: {
+        //   title: 'Flow',
+        //   position: 0,
+        //   Icon: IconSettings,
+        //   cards: [{ type: CardType.WorkflowRunCard }],
+        //   hide: {
+        //     ifMobile: false,
+        //     ifDesktop: false,
+        //     ifInRightDrawer: false,
+        //     ifFeaturesDisabled: [FeatureFlagKey.IsWorkflowEnabled],
+        //     ifRequiredObjectsInactive: [],
+        //     ifRelationsMissing: [],
+        //   },
+        // },
         timeline: null,
       },
     },

packages/twenty-front/src/modules/object-record/record-show/types/CardType.ts

@@ -9,5 +9,6 @@ export enum CardType {
   WorkflowCard = 'WorkflowCard',
   WorkflowVersionCard = 'WorkflowVersionCard',
   WorkflowRunCard = 'WorkflowRunCard',
+  WorkflowRunOutputCard = 'WorkflowRunOutputCard',
   RichTextCard = 'RichTextCard',
 }

packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx

@@ -0,0 +1,29 @@
+import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared';
+import { CodeEditor } from 'twenty-ui';
+
+const StyledSourceCodeContainer = styled.div`
+  margin: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const WorkflowRunOutputVisualizer = ({
+  workflowRunId,
+}: {
+  workflowRunId: string;
+}) => {
+  const workflowRun = useWorkflowRun({ workflowRunId });
+  if (!isDefined(workflowRun)) {
+    return null;
+  }
+
+  return (
+    <StyledSourceCodeContainer>
+      <CodeEditor
+        value={JSON.stringify(workflowRun.output, null, 2)}
+        language="json"
+        options={{ readOnly: true, domReadOnly: true }}
+      />
+    </StyledSourceCodeContainer>
+  );
+};