Display workflow visualizer on show page (#6894)

- Removed the route I previously used to visualize workflows
- Created another tab in the `<ShowPageRightContainer />` component in
which we display the visualizer

Questions:

- Should I use a feature flag to hide the feature?

Closes #6858

packages/twenty-front/src/modules/types/AppPath.ts

@@ -26,8 +26,6 @@ export enum AppPath {
   Developers = `developers`,
   DevelopersCatchAll = `/${Developers}/*`,
 
-  WorkflowShowPage = `/workflow/:workflowId`,
-
   // Impersonate
   Impersonate = '/impersonate/:userId',
 

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx

@@ -254,17 +254,6 @@ const testCases = [
   { loc: AppPath.Impersonate, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.InviteTeam, res: true },
   { loc: AppPath.Impersonate, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.Completed, res: false },
 
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.Completed, res: false },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.Completed, res: false },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.Completed, res: false },
-  { loc: AppPath.WorkflowShowPage, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WorkspaceActivation, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.ProfileCreation, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SyncEmail, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.InviteTeam, res: true },
-  { loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.Completed, res: false },
-
   { loc: AppPath.Authorize, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: true },
   { loc: AppPath.Authorize, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.Completed, res: false },
   { loc: AppPath.Authorize, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.Completed, res: false },

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -7,6 +7,7 @@ import {
   IconMail,
   IconNotes,
   IconPaperclip,
+  IconSettings,
   IconTimelineEvent,
 } from 'twenty-ui';
 
@@ -22,6 +23,8 @@ import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/Show
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { Workflow } from '@/workflow/components/Workflow';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
 const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
@@ -95,6 +98,12 @@ export const ShowPageRightContainer = ({
     CoreObjectNameSingular.Person,
   ].includes(targetObjectNameSingular);
 
+  const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
+  const isWorkflow =
+    isWorkflowEnabled &&
+    targetableObject.targetObjectNameSingular ===
+      CoreObjectNameSingular.Workflow;
+
   const shouldDisplayCalendarTab = isCompanyOrPerson;
   const shouldDisplayEmailsTab = emails && isCompanyOrPerson;
 
@@ -122,7 +131,7 @@ export const ShowPageRightContainer = ({
       id: 'timeline',
       title: 'Timeline',
       Icon: IconTimelineEvent,
-      hide: !timeline || isInRightDrawer,
+      hide: !timeline || isInRightDrawer || isWorkflow,
     },
     {
       id: 'tasks',
@@ -133,7 +142,8 @@ export const ShowPageRightContainer = ({
         targetableObject.targetObjectNameSingular ===
           CoreObjectNameSingular.Note ||
         targetableObject.targetObjectNameSingular ===
-          CoreObjectNameSingular.Task,
+          CoreObjectNameSingular.Task ||
+        isWorkflow,
     },
     {
       id: 'notes',
@@ -144,13 +154,14 @@ export const ShowPageRightContainer = ({
         targetableObject.targetObjectNameSingular ===
           CoreObjectNameSingular.Note ||
         targetableObject.targetObjectNameSingular ===
-          CoreObjectNameSingular.Task,
+          CoreObjectNameSingular.Task ||
+        isWorkflow,
     },
     {
       id: 'files',
       title: 'Files',
       Icon: IconPaperclip,
-      hide: !notes,
+      hide: !notes || isWorkflow,
     },
     {
       id: 'emails',
@@ -164,6 +175,12 @@ export const ShowPageRightContainer = ({
       Icon: IconCalendarEvent,
       hide: !shouldDisplayCalendarTab,
     },
+    {
+      id: 'workflow',
+      title: 'Workflow',
+      Icon: IconSettings,
+      hide: !isWorkflow,
+    },
   ];
   const renderActiveTabContent = () => {
     switch (activeTabId) {
@@ -202,6 +219,8 @@ export const ShowPageRightContainer = ({
         return <EmailThreads targetableObject={targetableObject} />;
       case 'calendar':
         return <Calendar targetableObject={targetableObject} />;
+      case 'workflow':
+        return <Workflow targetableObject={targetableObject} />;
       default:
         return <></>;
     }

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

@@ -0,0 +1,48 @@
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { WorkflowDiagramCanvas } from '@/workflow/components/WorkflowDiagramCanvas';
+import { WorkflowShowPageEffect } from '@/workflow/components/WorkflowShowPageEffect';
+import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import styled from '@emotion/styled';
+import '@xyflow/react/dist/style.css';
+import { useRecoilValue } from 'recoil';
+
+const StyledFlowContainer = styled.div`
+  height: 100%;
+  width: 100%;
+
+  /* Below we reset the default styling of Reactflow */
+  .react-flow__node-input,
+  .react-flow__node-default,
+  .react-flow__node-output,
+  .react-flow__node-group {
+    padding: 0;
+  }
+
+  --xy-node-border-radius: none;
+  --xy-node-border: none;
+  --xy-node-background-color: none;
+  --xy-node-boxshadow-hover: none;
+  --xy-node-boxshadow-selected: none;
+`;
+
+export const Workflow = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const workflowId = targetableObject.id;
+
+  const workflowDiagram = useRecoilValue(workflowDiagramState);
+
+  return (
+    <>
+      <WorkflowShowPageEffect workflowId={workflowId} />
+
+      <StyledFlowContainer>
+        {workflowDiagram === undefined ? null : (
+          <WorkflowDiagramCanvas diagram={workflowDiagram} />
+        )}
+      </StyledFlowContainer>
+    </>
+  );
+};