Visualize Workflows

packages/twenty-front/package.json

@@ -30,6 +30,7 @@
     "workerDirectory": "public"
   },
   "dependencies": {
+    "@xyflow/react": "^12.0.4",
     "transliteration": "^2.3.5"
   }
 }

packages/twenty-front/src/App.tsx

@@ -84,6 +84,7 @@ import { SettingsBilling } from '~/pages/settings/SettingsBilling';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
+import { WorkflowShowPage } from '~/pages/workflows/WorkflowShowPage';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
 const ProvidersThatNeedRouterContext = () => {
@@ -135,6 +136,7 @@ const createRouter = (
   isBillingEnabled?: boolean,
   isCRMMigrationEnabled?: boolean,
   isServerlessFunctionSettingsEnabled?: boolean,
+  isWorkflowEnabled?: boolean,
 ) =>
   createBrowserRouter(
     createRoutesFromElements(
@@ -163,6 +165,13 @@ const createRouter = (
           <Route path={AppPath.RecordIndexPage} element={<RecordIndexPage />} />
           <Route path={AppPath.RecordShowPage} element={<RecordShowPage />} />
 
+          {isWorkflowEnabled === true ? (
+            <Route
+              path={AppPath.WorkflowShowPage}
+              element={<WorkflowShowPage />}
+            />
+          ) : null}
+
           <Route
             path={AppPath.SettingsCatchAll}
             element={
@@ -326,6 +335,7 @@ export const App = () => {
   const isServerlessFunctionSettingsEnabled = useIsFeatureEnabled(
     'IS_FUNCTION_SETTINGS_ENABLED',
   );
+  const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
 
   const isBillingPageEnabled =
     billing?.isBillingEnabled && !isFreeAccessEnabled;
@@ -336,6 +346,7 @@ export const App = () => {
         isBillingPageEnabled,
         isCRMMigrationEnabled,
         isServerlessFunctionSettingsEnabled,
+        isWorkflowEnabled,
       )}
     />
   );

packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts

@@ -28,4 +28,5 @@ export enum CoreObjectNameSingular {
   Webhook = 'webhook',
   WorkspaceMember = 'workspaceMember',
   MessageThreadSubscriber = 'messageThreadSubscriber',
+  Workflow = 'workflow',
 }

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

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

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -12,6 +12,7 @@ import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/Compo
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
+import { RightDrawerWorkflow } from '@/workflow/components/RightDrawerWorkflow';
 
 const StyledRightDrawerPage = styled.div`
   display: flex;
@@ -35,6 +36,7 @@ const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
   [RightDrawerPages.ViewCalendarEvent]: <RightDrawerCalendarEvent />,
   [RightDrawerPages.ViewRecord]: <RightDrawerRecord />,
   [RightDrawerPages.Copilot]: <RightDrawerAIChat />,
+  [RightDrawerPages.Workflow]: <RightDrawerWorkflow />,
 };
 
 export const RightDrawerRouter = () => {

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageIcons.ts

@@ -5,4 +5,5 @@ export const RIGHT_DRAWER_PAGE_ICONS = {
   [RightDrawerPages.ViewCalendarEvent]: 'IconCalendarEvent',
   [RightDrawerPages.ViewRecord]: 'Icon123',
   [RightDrawerPages.Copilot]: 'IconSparkles',
+  [RightDrawerPages.Workflow]: 'IconSparkles',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageTitles.ts

@@ -5,4 +5,5 @@ export const RIGHT_DRAWER_PAGE_TITLES = {
   [RightDrawerPages.ViewCalendarEvent]: 'Calendar Event',
   [RightDrawerPages.ViewRecord]: 'Record Editor',
   [RightDrawerPages.Copilot]: 'Copilot',
+  [RightDrawerPages.Workflow]: 'Workflow',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -3,4 +3,5 @@ export enum RightDrawerPages {
   ViewCalendarEvent = 'view-calendar-event',
   ViewRecord = 'view-record',
   Copilot = 'copilot',
+  Workflow = 'workflow',
 }

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

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-start;
+  overflow-y: auto;
+  position: relative;
+`;
+
+const StyledChatArea = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  padding: ${({ theme }) => theme.spacing(6)};
+  padding-bottom: 0px;
+`;
+
+const StyledNewMessageArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(6)};
+  padding-top: 0px;
+`;
+
+export const RightDrawerWorkflow = () => {
+  const handleCreateCodeBlock = () => {};
+
+  return (
+    <StyledContainer>
+      <StyledChatArea>{/* TODO */}</StyledChatArea>
+      <StyledNewMessageArea>
+        <button onClick={handleCreateCodeBlock}>Create code block</button>
+      </StyledNewMessageArea>
+    </StyledContainer>
+  );
+};

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

@@ -0,0 +1,86 @@
+import { WorkflowShowPageDiagramCreateStepNode } from '@/workflow/components/WorkflowShowPageDiagramCreateStepNode.tsx';
+import { WorkflowShowPageDiagramStepNode } from '@/workflow/components/WorkflowShowPageDiagramStepNode';
+import { showPageWorkflowDiagramState } from '@/workflow/states/showPageWorkflowDiagramState';
+import {
+  WorkflowDiagram,
+  WorkflowDiagramEdge,
+  WorkflowDiagramNode,
+} from '@/workflow/types/WorkflowDiagram';
+import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram';
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  Background,
+  EdgeChange,
+  NodeChange,
+  ReactFlow,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useMemo } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { GRAY_SCALE, isDefined } from 'twenty-ui';
+
+export const WorkflowShowPageDiagram = ({
+  diagram,
+}: {
+  diagram: WorkflowDiagram;
+}) => {
+  const { nodes, edges } = useMemo(
+    () => getOrganizedDiagram(diagram),
+    [diagram],
+  );
+
+  const setShowPageWorkflowDiagram = useSetRecoilState(
+    showPageWorkflowDiagramState,
+  );
+
+  const handleNodesChange = (
+    nodeChanges: Array<NodeChange<WorkflowDiagramNode>>,
+  ) => {
+    setShowPageWorkflowDiagram((diagram) => {
+      if (isDefined(diagram) === false) {
+        throw new Error(
+          'It must be impossible for the nodes to be updated if the diagram is not defined yet. Be sure the diagram is rendered only when defined.',
+        );
+      }
+
+      return {
+        ...diagram,
+        nodes: applyNodeChanges(nodeChanges, diagram.nodes),
+      };
+    });
+  };
+
+  const handleEdgesChange = (
+    edgeChanges: Array<EdgeChange<WorkflowDiagramEdge>>,
+  ) => {
+    setShowPageWorkflowDiagram((diagram) => {
+      if (isDefined(diagram) === false) {
+        throw new Error(
+          'It must be impossible for the edges to be updated if the diagram is not defined yet. Be sure the diagram is rendered only when defined.',
+        );
+      }
+
+      return {
+        ...diagram,
+        edges: applyEdgeChanges(edgeChanges, diagram.edges),
+      };
+    });
+  };
+
+  return (
+    <ReactFlow
+      nodeTypes={{
+        default: WorkflowShowPageDiagramStepNode,
+        'create-step': WorkflowShowPageDiagramCreateStepNode,
+      }}
+      fitView
+      nodes={nodes.map((node) => ({ ...node, draggable: false }))}
+      edges={edges}
+      onNodesChange={handleNodesChange}
+      onEdgesChange={handleEdgesChange}
+    >
+      <Background color={GRAY_SCALE.gray25} size={2} />
+    </ReactFlow>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import styled from '@emotion/styled';
+import { Handle, Position } from '@xyflow/react';
+import { IconPlus } from 'twenty-ui';
+
+export const StyledTargetHandle = styled(Handle)`
+  visibility: hidden;
+`;
+
+export const WorkflowShowPageDiagramCreateStepNode = () => {
+  const { openRightDrawer } = useRightDrawer();
+
+  const handleCreateStepNodeButtonClick = () => {
+    openRightDrawer(RightDrawerPages.Workflow);
+  };
+
+  return (
+    <div>
+      <StyledTargetHandle type="target" position={Position.Top} />
+
+      <IconButton Icon={IconPlus} onClick={handleCreateStepNodeButtonClick} />
+    </div>
+  );
+};

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

@@ -0,0 +1,87 @@
+import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
+import styled from '@emotion/styled';
+import { Handle, Position } from '@xyflow/react';
+
+const StyledStepNodeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding-bottom: 12px;
+  padding-top: 6px;
+`;
+
+const StyledStepNodeType = styled.div`
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-radius: ${({ theme }) => theme.border.radius.sm}
+    ${({ theme }) => theme.border.radius.sm} 0 0;
+
+  color: ${({ theme }) => theme.color.gray50};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
+  position: absolute;
+  top: 0;
+  transform: translateY(-100%);
+
+  .selectable.selected &,
+  .selectable:focus &,
+  .selectable:focus-visible & {
+    background-color: ${({ theme }) => theme.color.blue};
+    color: ${({ theme }) => theme.font.color.inverted};
+  }
+`;
+
+const StyledStepNodeInnerContainer = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  position: relative;
+  box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
+
+  .selectable.selected &,
+  .selectable:focus &,
+  .selectable:focus-visible & {
+    background-color: ${({ theme }) => theme.color.blue10};
+    border-color: ${({ theme }) => theme.color.blue};
+  }
+`;
+
+const StyledStepNodeLabel = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledSourceHandle = styled(Handle)`
+  background-color: ${({ theme }) => theme.color.gray50};
+`;
+
+export const StyledTargetHandle = styled(Handle)`
+  visibility: hidden;
+`;
+
+export const WorkflowShowPageDiagramStepNode = ({
+  data,
+}: {
+  data: WorkflowDiagramStepNodeData;
+}) => {
+  return (
+    <StyledStepNodeContainer>
+      {data.nodeType !== 'trigger' ? (
+        <StyledTargetHandle type="target" position={Position.Top} />
+      ) : null}
+
+      <StyledStepNodeInnerContainer>
+        <StyledStepNodeType>{data.nodeType}</StyledStepNodeType>
+
+        <StyledStepNodeLabel>{data.label}</StyledStepNodeLabel>
+      </StyledStepNodeInnerContainer>
+
+      <StyledSourceHandle type="source" position={Position.Bottom} />
+    </StyledStepNodeContainer>
+  );
+};