Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): Add initial code for NodeView and Canvas rewrite (no-changelog) #9135

Merged
merged 29 commits into from
May 23, 2024

Conversation

alexgrozav
Copy link
Contributor

@alexgrozav alexgrozav commented Apr 12, 2024

Summary

This PR contains the initial code for the NodeView and Canvas rewrite. We're going through a big migration to VueFlow which should take our editor experience to the next level.

  • To enable, add the features.NodeViewV2 key with a true value to localStorage
  • To try it out, navigate to /workflow-v2/:id for any workflow
  • Adds NodeView.v2.vue containing basic covered functionality
  • Adds new Canvas.vue component and sub-components for nodes, edges, handles, buttons

Current supported features:

  • Rendering Nodes and Connections
  • Adding nodes
  • Moving nodes
  • Connecting nodes
  • Saving the workflow

We're merging this to facilitate n8n team contributions and progressive reviewing of the added code.

Related tickets and issues

https://linear.app/n8n/project/nodeview-v2-58fb8eb1701b/issues

Review / Merge checklist

  • PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.

    A bug is not considered fixed, unless a test is added to prevent it from happening again.
    A feature is not complete without tests.

@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Apr 12, 2024
@alexgrozav alexgrozav changed the title feat: Canvas V2 feat(editor): Add initial code for NodeView and Canvas rewrite (no-changelog) May 9, 2024
@alexgrozav alexgrozav marked this pull request as ready for review May 9, 2024 12:31
@alexgrozav alexgrozav self-assigned this May 9, 2024
});
</script>

<template>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please add unit tests to all these new components? Would be great to have that

OlegIvaniv
OlegIvaniv previously approved these changes May 23, 2024
Copy link
Contributor

@OlegIvaniv OlegIvaniv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome job, the V2 canvas feels really smooth 👏 Dropped just a few comments but nothing that should prevent merging this in

packages/editor-ui/src/components/canvas/Canvas.vue Outdated Show resolved Hide resolved

const $style = useCssModule();

const emit = defineEmits(['update:modelValue', 'update:node:position', 'create:connection']);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice to add expected types here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

:max-zoom="2"
data-test-id="canvas"
@node-drag-stop="onNodeDragStop"
@connect="onConnect"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know why this emit is not typed here? Looking into the VueFlow it seems like it should 🤔
CleanShot 2024-05-22 at 16 36 33@2x

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No idea. The event works though. 😅

packages/editor-ui/src/views/NodeView.v2.vue Outdated Show resolved Hide resolved
Copy link
Contributor

✅ All Cypress E2E specs passed

Copy link

cypress bot commented May 23, 2024

3 flaky tests on run #5106 ↗︎

0 361 12 0 Flakiness 3

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 alexgrozav 🗃️ e2e/*
Project: n8n Commit: 9f8be0aea5
Status: Passed Duration: 04:42 💡
Started: May 23, 2024 8:10 AM Ended: May 23, 2024 8:14 AM
Flakiness  5-ndv.cy.ts • 2 flaky tests

View Output Video

Test Artifacts
NDV > should not retrieve remote options when required params throw errors Screenshots Video
NDV > Stop listening for trigger event from NDV Screenshots Video
Flakiness  24-ndv-paired-item.cy.ts • 1 flaky test

View Output Video

Test Artifacts
NDV > resolves expression with default item when input node is not parent, while still pairing items Test Replay Screenshots Video

Review all test suite changes for PR #9135 ↗︎

Copy link
Contributor

✅ All Cypress E2E specs passed

@alexgrozav alexgrozav merged commit 70948ec into master May 23, 2024
36 checks passed
@alexgrozav alexgrozav deleted the canvas-v2 branch May 23, 2024 08:42
MiloradFilipovic added a commit that referenced this pull request May 24, 2024
* master:
  refactor(core): Use consistent CSRF state validation across oAuth controllers (#9104)
  feat(core): Print the name of the migration that cannot be reverted when using `n8n db:revert` (#9473)
  fix(editor): Hard load after logout to reset stores (no-changelog) (#9500)
  refactor(core): Stop reporting `EAUTH` error codes to Sentry (no-changelog) (#9496)
  fix(core): Upgrade sheetjs to address CVE-2024-22363 (#9498)
  refactor: Remove skipped tests (no-changelog) (#9497)
  feat(editor): Add initial code for NodeView and Canvas rewrite (no-changelog) (#9135)
  fix(editor): Show input panel with not connected message (#9495)
  fix(editor): Prevent XSS in node-issues tooltip (#9490)

# Conflicts:
#	pnpm-lock.yaml
@janober
Copy link
Member

janober commented May 30, 2024

Got released with n8n@1.44.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants