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: https://github.com/twentyhq/twenty/issues/8387. https://github.com/user-attachments/assets/69494a32-5403-4898-be75-7fc38058e263 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
2024-12-23 12:02:10 +03:00 · 2024-11-12 17:52:12 +01:00 · 2024-11-12 17:52:12 +01:00 · 31f03764d6
commit 31f03764d6
parent aadcb49dcb
9 changed files with 131 additions and 52 deletions
--- 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}

--- 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>
  );
 };
--- 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>
  );
 };
--- 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>
  );
 };
--- 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" />
    </>
  );
 };
--- 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>
            );
          }
--- 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();
--- 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,
    });
  }

--- 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;