From 804aab6e0bd4d69a57a47939765baed2a14050fe Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 18 Feb 2025 18:14:46 +0100
Subject: [PATCH] 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.
---
 .../record-show/components/CardComponents.tsx |  4 +++
 .../hooks/useRecordShowContainerTabs.ts       | 23 ++++++++++++---
 .../record-show/types/CardType.ts             |  1 +
 .../WorkflowRunOutputVisualizer.tsx           | 29 +++++++++++++++++++
 4 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
index a0cde2c4fd9..01dfca09b42 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/CardComponents.tsx
+++ b/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} />
+  ),
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts
index ad610af2499..cdf34300984 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts
+++ b/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,
       },
     },
diff --git a/packages/twenty-front/src/modules/object-record/record-show/types/CardType.ts b/packages/twenty-front/src/modules/object-record/record-show/types/CardType.ts
index 2045ba3d655..6a805d0af13 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/types/CardType.ts
+++ b/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',
 }
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx
new file mode 100644
index 00000000000..836d3bea16c
--- /dev/null
+++ b/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>
+  );
+};