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): Params pane collection improvements #11607

Merged
merged 10 commits into from
Dec 18, 2024

Conversation

ShireenMissi
Copy link
Contributor

@ShireenMissi ShireenMissi commented Nov 6, 2024

Summary

This PR improves the UX for parameter collections by making the following changes:

  • Draggable elements have two icons on the left: 1. Drag icon, 2. Trash icon. The drag icon allows you to drag the item to change the position

  • Icon colors

    • Define two CSS tokens dedicated for these colors (makes it easier to tweak it and improve it for dark mode)
    • The default color of the icons is text-light
    • The drag and delete icons should have an hover state (primary-color)
  • Replace the actual arrows down/up we have

    • Replace the new drag/drop in all nodes we already have
    • Add it to the Edit Field node

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/NODE-1475/params-pane-collection-improvements

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)

@ShireenMissi ShireenMissi marked this pull request as draft November 6, 2024 21:59
@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Nov 6, 2024
@ShireenMissi ShireenMissi force-pushed the node-1475-params-pane-collection-improvements branch 3 times, most recently from cfc9cfb to 7752658 Compare November 7, 2024 08:53
Copy link

codecov bot commented Nov 7, 2024

Codecov Report

Attention: Patch coverage is 59.85401% with 55 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...tor-ui/src/components/FixedCollectionParameter.vue 1.81% 54 Missing ⚠️
...src/components/AssignmentCollection/Assignment.vue 88.88% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@ShireenMissi ShireenMissi force-pushed the node-1475-params-pane-collection-improvements branch 3 times, most recently from f668f15 to 32f7c34 Compare November 26, 2024 17:00
@ShireenMissi ShireenMissi marked this pull request as ready for review November 26, 2024 17:01
elsmr
elsmr previously approved these changes Dec 3, 2024
Copy link
Member

@elsmr elsmr left a comment

Choose a reason for hiding this comment

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

Looks good!

@ShireenMissi ShireenMissi force-pushed the node-1475-params-pane-collection-improvements branch 4 times, most recently from c3c2ed6 to fa555a7 Compare December 10, 2024 16:04
elsmr
elsmr previously approved these changes Dec 17, 2024
Copy link
Contributor

✅ No visual regressions found.

Copy link
Contributor

⚠️ Some Cypress E2E specs are failing, please fix them before merging

Copy link

cypress bot commented Dec 17, 2024

n8n    Run #8402

Run Properties:  status check passed Passed #8402  •  git commit b630fc022f: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 ShireenMissi 🗃️ e2e/*
Project n8n
Branch Review node-1475-params-pane-collection-improvements
Run status status check passed Passed #8402
Run duration 04m 43s
Commit git commit b630fc022f: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 ShireenMissi 🗃️ e2e/*
Committer Shireen Missi
View all properties for this run ↗︎

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

@ShireenMissi ShireenMissi force-pushed the node-1475-params-pane-collection-improvements branch 2 times, most recently from 24c9c92 to c8da540 Compare December 18, 2024 09:25
@ShireenMissi ShireenMissi force-pushed the node-1475-params-pane-collection-improvements branch from c8da540 to b630fc0 Compare December 18, 2024 17:05
Copy link
Contributor

✅ No visual regressions found.

Copy link
Contributor

✅ All Cypress E2E specs passed

@ShireenMissi ShireenMissi merged commit 6e44c71 into master Dec 18, 2024
40 checks passed
@ShireenMissi ShireenMissi deleted the node-1475-params-pane-collection-improvements branch December 18, 2024 20:39
@github-actions github-actions bot mentioned this pull request Dec 19, 2024
@janober
Copy link
Member

janober commented Dec 19, 2024

Got released with n8n@1.73.0

riascho pushed a commit that referenced this pull request Jan 14, 2025
Co-authored-by: Elias Meire <elsmr@users.noreply.github.com>
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.

3 participants