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.

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,

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