feat(editor): Combine Move and Change owner modals #15756

Cadiac · 2025-05-27T13:54:37Z

Summary

This PR combines the existing "Move to Folder" and "Change owner" modals into one generic "Move" modal. This new modal replaces existing MoveToFolderModal and partially replaces ProjectMoveResourceModal, which still used for credentials after this.

The new modal allows moving workflows or folders to other folders. It also supports transferring the folder / workflow ownership to another project (or user), and allows sharing credentials used at the transferred workflows if user wants to do so.

This is also the first time transferring folders to other projects is supported on the UI at all.

move-modal.mp4

The delete modal also uses the new folder dropdown, listing possible folders as the transfer target.

delete-modal.mp4

In order to accomplish this I had to do some amount of refactoring, and I also discovered some type issues / bugs (like we weren't fetching paginated available folders before on the old picker) which I fixed while working on this. The changeset is pretty big, but a large portion of that are tests.

"Move" option isn't available on "Overview" or "Shared with you" pages, for now in order for the modal to work it has to be a page with project ID on its route params.

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/ADO-3161/fe-combine-change-owner-and-move-to-folder-modals
https://linear.app/n8n/issue/ADO-3287/feature-non-flat-list-in-sharingmoving-folders-dialog

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)

…cally, loading all folders

…work

… permissions

…er if already on parent

…ork there

… rename its props. Remove flaky test.

…ker dropdown

codecov · 2025-05-27T15:17:17Z

Codecov Report

Attention: Patch coverage is 85.27607% with 96 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ackages/frontend/editor-ui/src/api/workflows.ee.ts	0.00%	19 Missing ⚠️
packages/frontend/editor-ui/src/api/workflows.ts	0.00%	19 Missing ⚠️
...ges/frontend/editor-ui/src/stores/folders.store.ts	78.75%	17 Missing ⚠️
...or-ui/src/components/Folders/MoveToFolderModal.vue	95.08%	14 Missing and 1 partial ⚠️
...ui/src/components/Folders/MoveToFolderDropdown.vue	87.32%	9 Missing ⚠️
...or-ui/src/components/Folders/DeleteFolderModal.vue	0.00%	6 Missing ⚠️
...ckages/frontend/editor-ui/src/components/Modal.vue	25.00%	3 Missing ⚠️
...or-ui/src/components/Projects/ProjectCardBadge.vue	77.77%	2 Missing ⚠️
...es/frontend/editor-ui/src/stores/projects.store.ts	0.00%	2 Missing ⚠️
...ges/frontend/editor-ui/src/utils/projects.utils.ts	66.66%	2 Missing ⚠️
... and 2 more

📢 Thoughts on this report? Let us know!

packages/frontend/editor-ui/src/components/Folders/MoveToFolderModal.test.ts

…modal tests

cubic-dev-ai

cubic found 3 issues across 22 files. Review them in cubic.dev

_{React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.}

cubic-dev-ai · 2025-05-27T19:23:27Z

cypress/composables/folders.ts

+
+	// The dropdown focuses after a small delay (once modal's slide in animation is done).
+	// On the component we listen for an event, but here the wait should be very predictable.
+	cy.wait(500);


Using a fixed wait time (500ms) can lead to flaky tests. Consider using Cypress's built-in retry and timeout mechanisms instead of arbitrary waits.

Suggested change

cy.wait(500);

getMoveFolderModal().find('input').should('be.visible').should('be.enabled');

This case is tricky, and while I'm not a fan of the fixed timeout here it is way longer than the brief slide in animation that the modal does before opening the dropdown and focusing on it. If the idea is to test that the autofocus works some kind of wait has to happen here - the first couple of letteres typed were ignored before I added this.

Perhaps waiting for a focused field to appear could be the solution...

The reason the dropdown opens & focuses only once the modal stops is that otherwise the popper dropdown gets misplaced if opened mid animation.

packages/frontend/editor-ui/src/components/Modal.vue

packages/frontend/editor-ui/src/components/WorkflowCard.vue

CharlieKolb

Not fully done yet, will want to test the credentials stuff in particular I imagine. But looks really good!

packages/frontend/editor-ui/src/components/Folders/MoveToFolderDropdown.vue

packages/frontend/editor-ui/src/components/Folders/MoveToFolderModal.test.ts

packages/frontend/editor-ui/src/components/Folders/MoveToFolderModal.vue

CharlieKolb · 2025-05-28T11:15:01Z

packages/frontend/editor-ui/src/components/Folders/MoveToFolderModal.vue

+	let folderText = '';
+	let workflowText = '';
+	if (subFolderCount.value > 0) {
+		folderText = i18n.baseText('folders.move.modal.folder.count', {


Looks like doing "| {count} folder | {count} folders" works to show an empty string at 0, though I won't argue that's strictly better, just fyi since I got curious :D

shortstacked · 2025-05-28T14:43:32Z

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

View full workflow run

Tested Ref: e7d15f13377a4c7c5a3a9a13319cf2df25b5086a by @CharlieKolb

⚠️ Warnings (4)

Workflow ID	Workflow Name	Reason
237	BasicLLMChain:AzureChat	Workflow contains new data that previously did not exist.
35	Slack:User:getPresence info:UserProfile:get update...	Workflow contains new data that previously did not exist.
53	ConvertKit:CustomField:create getAll update delete...	Workflow contains new data that previously did not exist.
257	Agent:auto-fix:anthropic	Workflow contains new data that previously did not exist.

…ers with no workflows

…to-folder-modals

github-actions · 2025-05-28T14:48:56Z

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

CharlieKolb

Tested the credentials setup, looks amazing!

shortstacked · 2025-05-28T14:59:05Z

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

View full workflow run

Tested Ref: f43cd7e1fed0ef87d6e71e01b7ce8e4a00f1db4c by @CharlieKolb

⚠️ Warnings (4)

Workflow ID	Workflow Name	Reason
237	BasicLLMChain:AzureChat	Workflow contains new data that previously did not exist.
35	Slack:User:getPresence info:UserProfile:get update...	Workflow contains new data that previously did not exist.
53	ConvertKit:CustomField:create getAll update delete...	Workflow contains new data that previously did not exist.
257	Agent:auto-fix:anthropic	Workflow contains new data that previously did not exist.

github-actions · 2025-05-28T15:04:52Z

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

…ems on DOM

shortstacked · 2025-05-28T20:32:22Z

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

View full workflow run

Tested Ref: aa5499c49529776eae376cce5409e08d009c302d by @RicardoE105

⚠️ Warnings (4)

Workflow ID	Workflow Name	Reason
237	BasicLLMChain:AzureChat	Workflow contains new data that previously did not exist.
35	Slack:User:getPresence info:UserProfile:get update...	Workflow contains new data that previously did not exist.
53	ConvertKit:CustomField:create getAll update delete...	Workflow contains new data that previously did not exist.
257	Agent:auto-fix:anthropic	Workflow contains new data that previously did not exist.

github-actions · 2025-05-28T20:38:13Z

✅ All Cypress E2E specs passed

Cadiac added 21 commits May 27, 2025 16:48

feat(editor): Change the move folder modal to open and focus automati…

f47eeaa

…cally, loading all folders

feat(editor): Display path breadcrumbs on move folder modal

50563fc

feat(editor): Selecting the project to move resources to

9ecbaa0

feat(editor): wip on cross project transfers on the new modal

07c2a8a

feat(editor): Transferring workflows and projects with the single modal

8b53e20

feat(editor): Make transferring workflows and folders to other users …

e581fa0

…work

feat(editor): Fix picking the project on non admin users with limited…

ff0c6cc

… permissions

wip

25d1b90

feat(editor): Update dropdown comments and make it filter parent fold…

9820ac7

…er if already on parent

feat(editor): Ask to share credentials when transferring folders

9c61718

feat(editor): Disable moving of workflows on Shared with you page

8e9b4bb

feat(editor): Make folder picker work if there are many folders

a8e2dfb

Sort the folder results by path

3473338

feat(editor): Shorten the folder dropdown paths and match design styles

42df1dd

feat(editor): Display project icon on ProjectSharing picker

e0e9bda

feat(editor): Display a warning when not sharing credentials at transfer

fa0b06b

test(editor): Make UI tests pass with the updated move modal

d9d4c69

test(editor): Add tests for MoveToFolderModal

c428181

feat(editor): Only show root folder if query matches to it

32f397e

test(editor): Fix e2e tests with the new move folder modal

58eff79

feat(editor): Disable move option from workflows page as it doesn't w…

ba282f1

…ork there

n8n-assistant bot added the n8n team Authored by the n8n team label May 27, 2025

Cadiac added 3 commits May 27, 2025 17:36

refactor(editor): Make MoveToFolderDropdown not use projectsStore and…

b20a188

… rename its props. Remove flaky test.

feat(editor): Make the DeleteFolderModal work with the new folder pic…

24362cc

…ker dropdown

refactor(editor): Remove unused code

890883b

refactor(editor): Bit of cleanup

c5a2b7c

Cadiac commented May 27, 2025

View reviewed changes

packages/frontend/editor-ui/src/components/Folders/MoveToFolderModal.test.ts Show resolved Hide resolved

Cadiac added 2 commits May 27, 2025 21:51

test(editor): Add tests for folder store

2bc6cec

test(editor): Cover case of transferring to personal project on move …

06adddc

…modal tests

Cadiac marked this pull request as ready for review May 27, 2025 19:16

cubic-dev-ai bot reviewed May 27, 2025

View reviewed changes

Cadiac requested review from a team and CharlieKolb May 27, 2025 19:28

fix(editor): Show correct link on workflow transfer target

eb8ae8d

CharlieKolb reviewed May 28, 2025

View reviewed changes

refactor(editor): Move shared project name truncate logic to utils

e7d15f1

CharlieKolb previously approved these changes May 28, 2025

View reviewed changes

Cadiac added 2 commits May 28, 2025 17:43

fix(editor): Prevent extra space from end when only transferring fold…

f52b15c

…ers with no workflows

Merge branch 'master' into ado-3161-fe-combine-change-owner-and-move-…

f43cd7e

…to-folder-modals

Cadiac dismissed CharlieKolb’s stale review via f43cd7e May 28, 2025 14:43

Cadiac requested a review from CharlieKolb May 28, 2025 14:53

CharlieKolb previously approved these changes May 28, 2025

View reviewed changes

Cadiac added 2 commits May 28, 2025 22:38

test(editor): Make e2e tests pass with move to folder modal changes

fe31b8f

fix(editor): don't accidentally apply the list item padding to all it…

aa5499c

…ems on DOM

Cadiac dismissed CharlieKolb’s stale review via aa5499c May 28, 2025 20:17

Cadiac requested a review from RicardoE105 May 28, 2025 20:27

RicardoE105 approved these changes May 28, 2025

View reviewed changes

Cadiac merged commit e860dd6 into master May 28, 2025
35 checks passed

Cadiac deleted the ado-3161-fe-combine-change-owner-and-move-to-folder-modals branch May 28, 2025 20:41

	cy.wait(500);
	getMoveFolderModal().find('input').should('be.visible').should('be.enabled');

feat(editor): Combine Move and Change owner modals #15756

feat(editor): Combine Move and Change owner modals #15756

Conversation

Cadiac commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Linear tickets, Github issues, and Community forum posts

Review / Merge checklist

Uh oh!

codecov bot commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot May 27, 2025

Choose a reason for hiding this comment

Uh oh!

Cadiac May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

CharlieKolb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

CharlieKolb May 28, 2025

Choose a reason for hiding this comment

Uh oh!

shortstacked commented May 28, 2025

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

⚠️ Warnings (4)

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

CharlieKolb left a comment

Choose a reason for hiding this comment

Uh oh!

shortstacked commented May 28, 2025

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

⚠️ Warnings (4)

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

shortstacked commented May 28, 2025

Workflow Test Results 📊 ⚠️ 4 Warnings (0 Failed), 👍 79 Successful out of 83 total workflows.

⚠️ Warnings (4)

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

Uh oh!

Uh oh!

Cadiac commented May 27, 2025 •

edited

Loading

codecov bot commented May 27, 2025 •

edited

Loading

Cadiac May 27, 2025 •

edited

Loading