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 a0cde2c4f..01dfca09b 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 ad610af24..cdf343009 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 2045ba3d6..6a805d0af 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 000000000..836d3bea1
--- /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>
+  );
+};