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): Indicate dirty nodes with yellow borders/connectors on canvas #13040

Draft
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

autologie
Copy link
Contributor

@autologie autologie commented Feb 4, 2025

Summary

This PR adds the new feature to highlight edited nodes after an execution with yellow borders/connectors, including its all downstream nodes. This helps user understand which nodes will run when they do a partial execution.

Screenshot from 2025-02-07 13-10-23

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/SUG-2/feature-changing-dirty-nodes-yellow

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

Copy link

codecov bot commented Feb 4, 2025

@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Feb 4, 2025
@autologie autologie marked this pull request as ready for review February 7, 2025 12:36
@autologie autologie requested a review from mutdmour February 7, 2025 12:49
Copy link
Contributor

@MiloradFilipovic MiloradFilipovic left a comment

Choose a reason for hiding this comment

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

Works as expected and the code is looking good. I left one really minor comment and here's one more minor thing that we probably want to change:
For disabled nodes on the dirty path, the connection that goes through them is green (I guess we want to update it also to yellow?):
image

}

const dirtiness: Record<string, CanvasNodeDirtiness | undefined> = {};
const visitedByName: Record<string, true | undefined> = {};
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: Would using Set to track visited nodes here be clearer and type-safer?

Suggested change
const visitedByName: Record<string, true | undefined> = {};
const visitedByName = new Set<string>();

Copy link
Contributor

✅ All Cypress E2E specs passed

Copy link

cypress bot commented Feb 10, 2025

n8n    Run #9205

Run Properties:  status check passed Passed #9205  •  git commit 73137585f0: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 autologie 🗃️ e2e/*
Project n8n
Branch Review sug-2-indicate-dirty-nodes-on-canvas
Run status status check passed Passed #9205
Run duration 04m 38s
Commit git commit 73137585f0: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 autologie 🗃️ e2e/*
Committer autologie
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 3
Tests that did not run due to a developer annotating a test with .skip  Pending 5
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 434
View all changes introduced in this branch ↗︎

@autologie
Copy link
Contributor Author

Works as expected and the code is looking good. I left one really minor comment and here's one more minor thing that we probably want to change: For disabled nodes on the dirty path, the connection that goes through them is green (I guess we want to update it also to yellow?): image

Thank you for the finding! I will update the color to be aligned with the rest.

@autologie autologie marked this pull request as draft February 10, 2025 16:42
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 ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants