Improve the layout of the Workflow Visualizer (#8372)

- Increase the dimensions of the ReactFlow nodes. This allows to ditch scaling which made it hard to get the width of the nodes as they were visually scaled by 1.3. - Center the flow when the flow mounts and when the state of the right drawer opens. - Put the node type inside of the node so it doesn't overlap with the arrow - Make the edges non deletable We'll have to make a refactor so the viewport can be animated properly: #8387. https://github.com/user-attachments/assets/69494a32-5403-4898-be75-7fc38058e263 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
twentyhq · Nov 12, 2024 · 31f0376 · 31f0376
1 parent aadcb49
commit 31f0376
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 52 deletions.
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramBaseStepNode.tsx
@@ -21,13 +21,12 @@ const StyledStepNodeType = styled.div`
     ${({ theme }) => theme.border.radius.sm} 0 0;
 
   color: ${({ theme }) => theme.color.gray50};
-  font-size: ${({ theme }) => theme.font.size.xs};
+  font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 
+  margin-left: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
-  position: absolute;
-  top: 0;
-  transform: translateY(-100%);
+  align-self: flex-start;
 
   .selectable.selected &,
   .selectable:focus &,
@@ -62,9 +61,9 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
 const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
   align-items: center;
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  column-gap: ${({ theme }) => theme.spacing(2)};
+  column-gap: ${({ theme }) => theme.spacing(3)};
   color: ${({ variant, theme }) =>
     variant === 'placeholder'
       ? theme.font.color.extraLight
@@ -80,9 +79,13 @@ export const StyledTargetHandle = styled(Handle)`
 `;
 
 const StyledRightFloatingElementContainer = styled.div`
+  display: flex;
+  align-items: center;
   position: absolute;
+  right: ${({ theme }) => theme.spacing(-3)};
+  bottom: 0;
+  top: 0;
   transform: translateX(100%);
-  right: ${({ theme }) => theme.spacing(-2)};
 `;
 
 export const WorkflowDiagramBaseStepNode = ({
@@ -104,9 +107,9 @@ export const WorkflowDiagramBaseStepNode = ({
         <StyledTargetHandle type="target" position={Position.Top} />
       ) : null}
 
-      <StyledStepNodeInnerContainer variant={variant}>
-        <StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
+      <StyledStepNodeType>{capitalize(nodeType)}</StyledStepNodeType>
 
+      <StyledStepNodeInnerContainer variant={variant}>
         <StyledStepNodeLabel variant={variant}>
           {Icon}
 

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasBase.tsx
@@ -1,3 +1,6 @@
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { WorkflowVersionStatusTag } from '@/workflow/components/WorkflowVersionStatusTag';
 import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
 import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
@@ -15,14 +18,16 @@ import {
   Background,
   EdgeChange,
   FitViewOptions,
+  getNodesBounds,
   NodeChange,
   NodeProps,
   ReactFlow,
+  useReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import React, { useMemo } from 'react';
-import { useSetRecoilState } from 'recoil';
-import { GRAY_SCALE, isDefined } from 'twenty-ui';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;
@@ -35,6 +40,9 @@ const StyledResetReactflowStyles = styled.div`
   .react-flow__node-output,
   .react-flow__node-group {
     padding: 0;
+    width: auto;
+    text-align: start;
+    white-space: nowrap;
   }
 
   --xy-node-border-radius: none;
@@ -51,10 +59,10 @@ const StyledStatusTagContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-const defaultFitViewOptions: FitViewOptions = {
-  minZoom: 1.3,
-  maxZoom: 1.3,
-};
+const defaultFitViewOptions = {
+  minZoom: 1,
+  maxZoom: 1,
+} satisfies FitViewOptions;
 
 export const WorkflowDiagramCanvasBase = ({
   diagram,
@@ -77,11 +85,29 @@ export const WorkflowDiagramCanvasBase = ({
   >;
   children?: React.ReactNode;
 }) => {
+  const reactflow = useReactFlow();
+
   const { nodes, edges } = useMemo(
     () => getOrganizedDiagram(diagram),
     [diagram],
   );
 
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
+  const isMobile = useIsMobile();
+
+  const rightDrawerState = !isRightDrawerOpen
+    ? 'closed'
+    : isRightDrawerMinimized
+      ? 'minimized'
+      : isMobile
+        ? 'fullScreen'
+        : 'normal';
+
+  const rightDrawerWidth = Number(
+    THEME_COMMON.rightDrawerWidth.replace('px', ''),
+  );
+
   const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
 
   const handleNodesChange = (
@@ -118,27 +144,68 @@ export const WorkflowDiagramCanvasBase = ({
     });
   };
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isDefined(containerRef.current) || !reactflow.viewportInitialized) {
+      return;
+    }
+
+    const currentViewport = reactflow.getViewport();
+
+    const flowBounds = getNodesBounds(reactflow.getNodes());
+
+    let visibleRightDrawerWidth = 0;
+    if (rightDrawerState === 'normal') {
+      visibleRightDrawerWidth = rightDrawerWidth;
+    }
+
+    const viewportX =
+      (containerRef.current.offsetWidth + visibleRightDrawerWidth) / 2 -
+      flowBounds.width / 2;
+
+    reactflow.setViewport(
+      {
+        ...currentViewport,
+        x: viewportX - visibleRightDrawerWidth,
+      },
+      { duration: 300 },
+    );
+  }, [reactflow, rightDrawerState, rightDrawerWidth]);
+
   return (
-    <StyledResetReactflowStyles>
+    <StyledResetReactflowStyles ref={containerRef}>
       <ReactFlow
-        onInit={({ fitView }) => {
-          fitView(defaultFitViewOptions);
+        onInit={() => {
+          if (!isDefined(containerRef.current)) {
+            throw new Error('Expect the container ref to be defined');
+          }
+
+          const flowBounds = getNodesBounds(reactflow.getNodes());
+
+          reactflow.setViewport({
+            x: containerRef.current.offsetWidth / 2 - flowBounds.width / 2,
+            y: 150,
+            zoom: defaultFitViewOptions.maxZoom,
+          });
         }}
+        minZoom={defaultFitViewOptions.minZoom}
+        maxZoom={defaultFitViewOptions.maxZoom}
         nodeTypes={nodeTypes}
-        fitView
         nodes={nodes.map((node) => ({ ...node, draggable: false }))}
         edges={edges}
         onNodesChange={handleNodesChange}
         onEdgesChange={handleEdgesChange}
+        proOptions={{ hideAttribution: true }}
       >
         <Background color={GRAY_SCALE.gray25} size={2} />
 
         {children}
-
-        <StyledStatusTagContainer>
-          <WorkflowVersionStatusTag versionStatus={status} />
-        </StyledStatusTagContainer>
       </ReactFlow>
+
+      <StyledStatusTagContainer>
+        <WorkflowVersionStatusTag versionStatus={status} />
+      </StyledStatusTagContainer>
     </StyledResetReactflowStyles>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditable.tsx
@@ -5,6 +5,7 @@ import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagr
 import { WorkflowDiagramStepNodeEditable } from '@/workflow/components/WorkflowDiagramStepNodeEditable';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { ReactFlowProvider } from '@xyflow/react';
 
 export const WorkflowDiagramCanvasEditable = ({
   diagram,
@@ -14,17 +15,19 @@ export const WorkflowDiagramCanvasEditable = ({
   workflowWithCurrentVersion: WorkflowWithCurrentVersion;
 }) => {
   return (
-    <WorkflowDiagramCanvasBase
-      key={workflowWithCurrentVersion.currentVersion.id}
-      diagram={diagram}
-      status={workflowWithCurrentVersion.currentVersion.status}
-      nodeTypes={{
-        default: WorkflowDiagramStepNodeEditable,
-        'create-step': WorkflowDiagramCreateStepNode,
-        'empty-trigger': WorkflowDiagramEmptyTrigger,
-      }}
-    >
-      <WorkflowDiagramCanvasEditableEffect />
-    </WorkflowDiagramCanvasBase>
+    <ReactFlowProvider>
+      <WorkflowDiagramCanvasBase
+        key={workflowWithCurrentVersion.currentVersion.id}
+        diagram={diagram}
+        status={workflowWithCurrentVersion.currentVersion.status}
+        nodeTypes={{
+          default: WorkflowDiagramStepNodeEditable,
+          'create-step': WorkflowDiagramCreateStepNode,
+          'empty-trigger': WorkflowDiagramEmptyTrigger,
+        }}
+      >
+        <WorkflowDiagramCanvasEditableEffect />
+      </WorkflowDiagramCanvasBase>
+    </ReactFlowProvider>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonly.tsx
@@ -4,6 +4,7 @@ import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagr
 import { WorkflowDiagramStepNodeReadonly } from '@/workflow/components/WorkflowDiagramStepNodeReadonly';
 import { WorkflowVersion } from '@/workflow/types/Workflow';
 import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
+import { ReactFlowProvider } from '@xyflow/react';
 
 export const WorkflowDiagramCanvasReadonly = ({
   diagram,
@@ -13,16 +14,18 @@ export const WorkflowDiagramCanvasReadonly = ({
   workflowVersion: WorkflowVersion;
 }) => {
   return (
-    <WorkflowDiagramCanvasBase
-      key={workflowVersion.id}
-      diagram={diagram}
-      status={workflowVersion.status}
-      nodeTypes={{
-        default: WorkflowDiagramStepNodeReadonly,
-        'empty-trigger': WorkflowDiagramEmptyTrigger,
-      }}
-    >
-      <WorkflowDiagramCanvasReadonlyEffect />
-    </WorkflowDiagramCanvasBase>
+    <ReactFlowProvider>
+      <WorkflowDiagramCanvasBase
+        key={workflowVersion.id}
+        diagram={diagram}
+        status={workflowVersion.status}
+        nodeTypes={{
+          default: WorkflowDiagramStepNodeReadonly,
+          'empty-trigger': WorkflowDiagramEmptyTrigger,
+        }}
+      >
+        <WorkflowDiagramCanvasReadonlyEffect />
+      </WorkflowDiagramCanvasBase>
+    </ReactFlowProvider>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx
@@ -11,7 +11,7 @@ export const WorkflowDiagramCreateStepNode = () => {
     <>
       <StyledTargetHandle type="target" position={Position.Top} />
 
-      <IconButton Icon={IconPlus} size="small" />
+      <IconButton Icon={IconPlus} size="medium" />
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx
@@ -31,7 +31,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconPlaylistAdd
-                  size={theme.icon.size.sm}
+                  size={theme.icon.size.lg}
                   color={theme.font.color.tertiary}
                 />
               </StyledStepNodeLabelIconContainer>
@@ -41,7 +41,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconHandMove
-                  size={theme.icon.size.sm}
+                  size={theme.icon.size.lg}
                   color={theme.font.color.tertiary}
                 />
               </StyledStepNodeLabelIconContainer>
@@ -57,7 +57,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconCode
-                  size={theme.icon.size.sm}
+                  size={theme.icon.size.lg}
                   color={theme.color.orange}
                 />
               </StyledStepNodeLabelIconContainer>
@@ -66,7 +66,7 @@ export const WorkflowDiagramStepNodeBase = ({
           case 'SEND_EMAIL': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconMail size={theme.icon.size.sm} color={theme.color.blue} />
+                <IconMail size={theme.icon.size.lg} color={theme.color.blue} />
               </StyledStepNodeLabelIconContainer>
             );
           }

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeEditable.tsx
@@ -32,6 +32,7 @@ export const WorkflowDiagramStepNodeEditable = ({
       RightFloatingElement={
         selected ? (
           <FloatingIconButton
+            size="medium"
             Icon={IconTrash}
             onClick={() => {
               return deleteOneStep();

diff --git a/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts b/packages/twenty-front/src/modules/workflow/utils/addCreateStepNodes.ts
@@ -36,6 +36,7 @@ export const addCreateStepNodes = ({ nodes, edges }: WorkflowDiagram) => {
       markerEnd: {
         type: MarkerType.ArrowClosed,
       },
+      deletable: false,
     });
   }
 

diff --git a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
@@ -51,6 +51,7 @@ export const generateWorkflowDiagram = ({
       markerEnd: {
         type: MarkerType.ArrowClosed,
       },
+      deletable: false,
     });
 
     return nodeId;