From 5d1208f8af3f16bc5147356b53f529b66ecb9a1e Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Mon, 30 Sep 2024 11:24:57 +0200
Subject: [PATCH] Set default zoom to workflows (#7331)

## Improvements

- This PR calls `fitView` when the Reactflow component inits. It tries
to fit the flow in a view with a fixed min and max zoom.
- Every time the WorkflowDiagramCanvas is rendered for a different
`workflowVersionId`, the `fitView` will be re-called. This is
implemented with a React `key`.
- The canvas will be re-rendered when an activated/deactivated version
is updated (and a new draft version is created.)
- It will also be re-rendered when the user selects another workflow
version and this doesn't cause the `WorkflowDiagramCanvas` component to
unmount. It happens if the user wants to go the previous or next
workflow or workflow version.

## Previous Behavior

![CleanShot 2024-09-30 at 10 32
06@2x](https://github.com/user-attachments/assets/ea43cd43-8c9c-491c-a535-8cca9168fb22)

## New Behavior

![CleanShot 2024-09-30 at 10 26
47@2x](https://github.com/user-attachments/assets/7bfb91b2-1782-47a1-ab5a-3eaa9f1be923)


https://github.com/user-attachments/assets/cb73f456-58b1-49c3-bd31-a1650810e9dd

## Notes

Closes #7047

This PR is a simplification of #7151. We'll have to improve the way we
manage zoom in another PR.
---
 .../workflow/components/WorkflowDiagramCanvas.tsx      | 10 ++++++++++
 .../components/WorkflowDiagramCreateStepNode.tsx       |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
index 83b9c0c67..43a494b94 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvas.tsx
@@ -17,6 +17,7 @@ import {
   applyNodeChanges,
   Background,
   EdgeChange,
+  FitViewOptions,
   NodeChange,
   ReactFlow,
 } from '@xyflow/react';
@@ -32,6 +33,11 @@ const StyledStatusTagContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
+const defaultFitViewOptions: FitViewOptions = {
+  minZoom: 1.3,
+  maxZoom: 1.3,
+};
+
 export const WorkflowDiagramCanvas = ({
   diagram,
   workflowWithCurrentVersion,
@@ -83,6 +89,10 @@ export const WorkflowDiagramCanvas = ({
   return (
     <>
       <ReactFlow
+        key={workflowWithCurrentVersion.currentVersion.id}
+        onInit={({ fitView }) => {
+          fitView(defaultFitViewOptions);
+        }}
         nodeTypes={{
           default: WorkflowDiagramStepNode,
           'create-step': WorkflowDiagramCreateStepNode,
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx
index 27706668b..2e1b1328a 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCreateStepNode.tsx
@@ -12,7 +12,7 @@ export const WorkflowDiagramCreateStepNode = () => {
     <>
       <StyledTargetHandle type="target" position={Position.Top} />
 
-      <IconButton Icon={IconPlus} />
+      <IconButton Icon={IconPlus} size="small" />
     </>
   );
 };