Set default zoom to workflows

[Devessier]

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

New Behavior

CleanShot.2024-09-30.at.10.29.44.mp4

Notes

Closes #7047

This PR is a simplification of #7151. We'll have to improve the way we manage zoom in another PR.

[greptile-apps]

PR Summary

This PR improves the default zoom behavior of the workflow visualizer in the Twenty application, addressing the issue of initial zoom being too large.

• Added fitView function call in WorkflowDiagramCanvas.tsx with fixed min/max zoom values of 1.3
• Implemented re-rendering of WorkflowDiagramCanvas component with new key on workflow version change
• Modified WorkflowDiagramCreateStepNode.tsx to use 'small' size for the IconButton
• Removed reliance on fitView property of Reactflow component, using onInit callback instead
• Ensured consistent viewing experience across different workflow versions

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[martmull]

lgtm

[github-actions]

	Fails
🚫	node failed.

Log

�[31mError: �[39m RequestError [HttpError]: You have exceeded a secondary rate limit. Please wait a few minutes before you try again. If you reach out to GitHub Support for help, please include the request ID A587:31C237:5AE685:B30CFC:66FA6E99.
    at /home/runner/work/twenty/twenty/node_modules/�[4m@octokit�[24m/request/dist-node/index.js:86:21
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m {
  status: �[33m403�[39m,
  response: {
    url: �[32m'https://api.github.com/search/issues?q=is%3Apr%20author%3ADevessier%20is%3Aclosed%20repo%3Atwentyhq%2Ftwenty&per_page=2&page=1'�[39m,
    status: �[33m403�[39m,
    headers: {
      �[32m'access-control-allow-origin'�[39m: �[32m'*'�[39m,
      �[32m'access-control-expose-headers'�[39m: �[32m'ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset'�[39m,
      connection: �[32m'close'�[39m,
      �[32m'content-encoding'�[39m: �[32m'gzip'�[39m,
      �[32m'content-security-policy'�[39m: �[32m"default-src 'none'"�[39m,
      �[32m'content-type'�[39m: �[32m'application/json; charset=utf-8'�[39m,
      date: �[32m'Mon, 30 Sep 2024 09:25:45 GMT'�[39m,
      �[32m'referrer-policy'�[39m: �[32m'origin-when-cross-origin, strict-origin-when-cross-origin'�[39m,
      server: �[32m'github.com'�[39m,
      �[32m'strict-transport-security'�[39m: �[32m'max-age=31536000; includeSubdomains; preload'�[39m,
      �[32m'transfer-encoding'�[39m: �[32m'chunked'�[39m,
      vary: �[32m'Accept-Encoding, Accept, X-Requested-With'�[39m,
      �[32m'x-content-type-options'�[39m: �[32m'nosniff'�[39m,
      �[32m'x-frame-options'�[39m: �[32m'deny'�[39m,
      �[32m'x-github-api-version-selected'�[39m: �[32m'2022-11-28'�[39m,
      �[32m'x-github-media-type'�[39m: �[32m'github.v3; format=json'�[39m,
      �[32m'x-github-request-id'�[39m: �[32m'A587:31C237:5AE685:B30CFC:66FA6E99'�[39m,
      �[32m'x-ratelimit-limit'�[39m: �[32m'30'�[39m,
      �[32m'x-ratelimit-remaining'�[39m: �[32m'30'�[39m,
      �[32m'x-ratelimit-reset'�[39m: �[32m'1727688354'�[39m,
      �[32m'x-ratelimit-resource'�[39m: �[32m'search'�[39m,
      �[32m'x-ratelimit-used'�[39m: �[32m'2'�[39m,
      �[32m'x-xss-protection'�[39m: �[32m'0'�[39m
    },
    data: {
      documentation_url: �[32m'https://docs.github.com/free-pro-team@latest/rest/overview/rate-limits-for-the-rest-api#about-secondary-rate-limits'�[39m,
      message: �[32m'You have exceeded a secondary rate limit. Please wait a few minutes before you try again. If you reach out to GitHub Support for help, please include the request ID A587:31C237:5AE685:B30CFC:66FA6E99.'�[39m
    }
  },
  request: {
    method: �[32m'GET'�[39m,
    url: �[32m'https://api.github.com/search/issues?q=is%3Apr%20author%3ADevessier%20is%3Aclosed%20repo%3Atwentyhq%2Ftwenty&per_page=2&page=1'�[39m,
    headers: {
      accept: �[32m'application/vnd.github.v3+json'�[39m,
      �[32m'user-agent'�[39m: �[32m'octokit-rest.js/18.12.0 octokit-core.js/3.6.0 Node.js/18.20.4 (linux; x64)'�[39m,
      authorization: �[32m'token [REDACTED]'�[39m
    },
    request: { hook: �[36m[Function: bound bound register]�[39m }
  }
}
danger-results://tmp/danger-results-09343970.json

Generated by 🚫 dangerJS against 2a2bc74