From cb1ca5d60789dbe8b7c02b95edcc854648ce61ac Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 6 Jun 2024 15:31:42 +0200
Subject: [PATCH 01/20] fix(editor): Add move action to workflow card and
 refactor the component to setup script

---
 .../editor-ui/src/components/WorkflowCard.vue | 400 +++++++++---------
 packages/editor-ui/src/permissions.ts         |  10 +-
 .../src/plugins/i18n/locales/en.json          |   1 +
 3 files changed, 211 insertions(+), 200 deletions(-)

diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 250a782f60873..873d7a5acaac9 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -1,3 +1,206 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { IWorkflowDb, IUser } from '@/Interface';
+import { DUPLICATE_MODAL_KEY, MODAL_CONFIRM, VIEWS, WORKFLOW_SHARE_MODAL_KEY } from '@/constants';
+import { useMessage } from '@/composables/useMessage';
+import { useToast } from '@/composables/useToast';
+import { getWorkflowPermissions } from '@/permissions';
+import dateformat from 'dateformat';
+import WorkflowActivator from '@/components/WorkflowActivator.vue';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import TimeAgo from '@/components/TimeAgo.vue';
+import type { ProjectSharingData } from '@/features/projects/projects.types';
+import { useProjectsStore } from '@/features/projects/projects.store';
+import ProjectCardBadge from '@/features/projects/components/ProjectCardBadge.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useRouter } from 'vue-router';
+import { useTelemetry } from '@/composables/useTelemetry';
+
+const WORKFLOW_LIST_ITEM_ACTIONS = {
+	OPEN: 'open',
+	SHARE: 'share',
+	DUPLICATE: 'duplicate',
+	DELETE: 'delete',
+	MOVE: 'move',
+};
+
+const props = withDefaults(
+	defineProps<{
+		data: IWorkflowDb;
+		readOnly: boolean;
+	}>(),
+	{
+		data: () => ({
+			id: '',
+			createdAt: '',
+			updatedAt: '',
+			active: false,
+			connections: {},
+			nodes: [],
+			name: '',
+			sharedWithProjects: [],
+			homeProject: {} as ProjectSharingData,
+			versionId: '',
+		}),
+		readOnly: false,
+	},
+);
+
+const emit = defineEmits<{
+	(event: 'expand:tags'): void;
+	(event: 'click:tag', tagId: string, e: PointerEvent): void;
+}>();
+
+const toast = useToast();
+const message = useMessage();
+const locale = useI18n();
+const router = useRouter();
+const telemetry = useTelemetry();
+
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+const workflowsStore = useWorkflowsStore();
+const projectsStore = useProjectsStore();
+
+const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
+const workflowPermissions = computed(() => getWorkflowPermissions(props.data));
+const actions = computed(() => {
+	const actions = [
+		{
+			label: locale.baseText('workflows.item.open'),
+			value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
+		},
+		{
+			label: locale.baseText('workflows.item.share'),
+			value: WORKFLOW_LIST_ITEM_ACTIONS.SHARE,
+		},
+	];
+
+	if (!props.readOnly) {
+		actions.push({
+			label: locale.baseText('workflows.item.duplicate'),
+			value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
+		});
+	}
+
+	if (workflowPermissions.value.move) {
+		actions.push({
+			label: locale.baseText('workflows.item.move'),
+			value: WORKFLOW_LIST_ITEM_ACTIONS.MOVE,
+		});
+	}
+
+	if (workflowPermissions.value.delete && !props.readOnly) {
+		actions.push({
+			label: locale.baseText('workflows.item.delete'),
+			value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
+		});
+	}
+
+	return actions;
+});
+const formattedCreatedAtDate = computed(() => {
+	const currentYear = new Date().getFullYear().toString();
+
+	return dateformat(
+		props.data.createdAt,
+		`d mmmm${String(props.data.createdAt).startsWith(currentYear) ? '' : ', yyyy'}`,
+	);
+});
+
+async function onClick(event?: KeyboardEvent | PointerEvent) {
+	if (event?.ctrlKey || event?.metaKey) {
+		const route = router.resolve({
+			name: VIEWS.WORKFLOW,
+			params: { name: props.data.id },
+		});
+		window.open(route.href, '_blank');
+
+		return;
+	}
+
+	await router.push({
+		name: VIEWS.WORKFLOW,
+		params: { name: props.data.id },
+	});
+}
+
+function onClickTag(tagId: string, event: PointerEvent) {
+	event.stopPropagation();
+
+	emit('click:tag', tagId, event);
+}
+
+function onExpandTags() {
+	emit('expand:tags');
+}
+
+async function onAction(action: string) {
+	if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
+		await onClick();
+	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
+		uiStore.openModalWithData({
+			name: DUPLICATE_MODAL_KEY,
+			data: {
+				id: props.data.id,
+				name: props.data.name,
+				tags: (props.data.tags ?? []).map((tag) =>
+					typeof tag !== 'string' && 'id' in tag ? tag.id : tag,
+				),
+			},
+		});
+	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.SHARE) {
+		uiStore.openModalWithData({
+			name: WORKFLOW_SHARE_MODAL_KEY,
+			data: { id: props.data.id },
+		});
+
+		telemetry.track('User opened sharing modal', {
+			workflow_id: props.data.id,
+			user_id_sharer: currentUser.value.id,
+			sub_view: 'Workflows listing',
+		});
+	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
+		const deleteConfirmed = await message.confirm(
+			locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+				interpolate: { workflowName: props.data.name },
+			}),
+			locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+			{
+				type: 'warning',
+				confirmButtonText: locale.baseText(
+					'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+				),
+				cancelButtonText: locale.baseText(
+					'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+				),
+			},
+		);
+
+		if (deleteConfirmed !== MODAL_CONFIRM) {
+			return;
+		}
+
+		try {
+			await workflowsStore.deleteWorkflow(props.data.id);
+		} catch (error) {
+			toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
+			return;
+		}
+
+		// Reset tab title since workflow is deleted.
+		toast.showMessage({
+			title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+			type: 'success',
+		});
+	}
+}
+</script>
+
 <template>
 	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #header>
@@ -50,203 +253,6 @@
 	</n8n-card>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import type { IWorkflowDb, IUser } from '@/Interface';
-import { DUPLICATE_MODAL_KEY, MODAL_CONFIRM, VIEWS, WORKFLOW_SHARE_MODAL_KEY } from '@/constants';
-import { useMessage } from '@/composables/useMessage';
-import { useToast } from '@/composables/useToast';
-import type { PermissionsMap } from '@/permissions';
-import type { WorkflowScope } from '@n8n/permissions';
-import { getWorkflowPermissions } from '@/permissions';
-import dateformat from 'dateformat';
-import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import TimeAgo from '@/components/TimeAgo.vue';
-import type { ProjectSharingData } from '@/features/projects/projects.types';
-import { useProjectsStore } from '@/features/projects/projects.store';
-import ProjectCardBadge from '@/features/projects/components/ProjectCardBadge.vue';
-
-export const WORKFLOW_LIST_ITEM_ACTIONS = {
-	OPEN: 'open',
-	SHARE: 'share',
-	DUPLICATE: 'duplicate',
-	DELETE: 'delete',
-};
-
-export default defineComponent({
-	components: {
-		TimeAgo,
-		WorkflowActivator,
-		ProjectCardBadge,
-	},
-	props: {
-		data: {
-			type: Object as PropType<IWorkflowDb>,
-			required: true,
-			default: (): IWorkflowDb => ({
-				id: '',
-				createdAt: '',
-				updatedAt: '',
-				active: false,
-				connections: {},
-				nodes: [],
-				name: '',
-				sharedWithProjects: [],
-				homeProject: {} as ProjectSharingData,
-				versionId: '',
-			}),
-		},
-		readOnly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		return {
-			...useToast(),
-			...useMessage(),
-		};
-	},
-	computed: {
-		...mapStores(useSettingsStore, useUIStore, useUsersStore, useWorkflowsStore, useProjectsStore),
-		currentUser(): IUser {
-			return this.usersStore.currentUser || ({} as IUser);
-		},
-		workflowPermissions(): PermissionsMap<WorkflowScope> {
-			return getWorkflowPermissions(this.data);
-		},
-		actions(): Array<{ label: string; value: string }> {
-			const actions = [
-				{
-					label: this.$locale.baseText('workflows.item.open'),
-					value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
-				},
-				{
-					label: this.$locale.baseText('workflows.item.share'),
-					value: WORKFLOW_LIST_ITEM_ACTIONS.SHARE,
-				},
-			];
-
-			if (!this.readOnly) {
-				actions.push({
-					label: this.$locale.baseText('workflows.item.duplicate'),
-					value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
-				});
-			}
-
-			if (this.workflowPermissions.delete && !this.readOnly) {
-				actions.push({
-					label: this.$locale.baseText('workflows.item.delete'),
-					value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
-				});
-			}
-
-			return actions;
-		},
-		formattedCreatedAtDate(): string {
-			const currentYear = new Date().getFullYear().toString();
-
-			return dateformat(
-				this.data.createdAt,
-				`d mmmm${String(this.data.createdAt).startsWith(currentYear) ? '' : ', yyyy'}`,
-			);
-		},
-	},
-	methods: {
-		async onClick(event?: KeyboardEvent | PointerEvent) {
-			if (event?.ctrlKey || event?.metaKey) {
-				const route = this.$router.resolve({
-					name: VIEWS.WORKFLOW,
-					params: { name: this.data.id },
-				});
-				window.open(route.href, '_blank');
-
-				return;
-			}
-
-			await this.$router.push({
-				name: VIEWS.WORKFLOW,
-				params: { name: this.data.id },
-			});
-		},
-		onClickTag(tagId: string, event: PointerEvent) {
-			event.stopPropagation();
-
-			this.$emit('click:tag', tagId, event);
-		},
-		onExpandTags() {
-			this.$emit('expand:tags');
-		},
-		async onAction(action: string) {
-			if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
-				await this.onClick();
-			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
-				this.uiStore.openModalWithData({
-					name: DUPLICATE_MODAL_KEY,
-					data: {
-						id: this.data.id,
-						name: this.data.name,
-						tags: (this.data.tags ?? []).map((tag) =>
-							typeof tag !== 'string' && 'id' in tag ? tag.id : tag,
-						),
-					},
-				});
-			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.SHARE) {
-				this.uiStore.openModalWithData({
-					name: WORKFLOW_SHARE_MODAL_KEY,
-					data: { id: this.data.id },
-				});
-
-				this.$telemetry.track('User opened sharing modal', {
-					workflow_id: this.data.id,
-					user_id_sharer: this.currentUser.id,
-					sub_view: 'Workflows listing',
-				});
-			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirm(
-					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
-						interpolate: { workflowName: this.data.name },
-					}),
-					this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-					{
-						type: 'warning',
-						confirmButtonText: this.$locale.baseText(
-							'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
-						),
-						cancelButtonText: this.$locale.baseText(
-							'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
-						),
-					},
-				);
-
-				if (deleteConfirmed !== MODAL_CONFIRM) {
-					return;
-				}
-
-				try {
-					await this.workflowsStore.deleteWorkflow(this.data.id);
-				} catch (error) {
-					this.showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
-					return;
-				}
-
-				// Reset tab title since workflow is deleted.
-				this.showMessage({
-					title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-					type: 'success',
-				});
-			}
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .cardLink {
 	transition: box-shadow 0.3s ease;
diff --git a/packages/editor-ui/src/permissions.ts b/packages/editor-ui/src/permissions.ts
index 266d5611ffb58..6d602d4680290 100644
--- a/packages/editor-ui/src/permissions.ts
+++ b/packages/editor-ui/src/permissions.ts
@@ -13,13 +13,16 @@ export type PermissionsMap<T> = {
 	[K in ExtractAfterColon<T>]: boolean;
 };
 
-const mapScopesToPermissions = (scopes: Scope[], scopeSet: Set<Scope>): PermissionsMap<Scope> =>
+const mapScopesToPermissions = <T extends Scope>(
+	scopes: T[],
+	scopeSet: Set<T>,
+): PermissionsMap<T> =>
 	scopes.reduce(
-		(permissions: PermissionsMap<Scope>, scope: Scope) => ({
+		(permissions: PermissionsMap<T>, scope: T) => ({
 			...permissions,
 			[scope.split(':')[1]]: scopeSet.has(scope),
 		}),
-		{} as PermissionsMap<Scope>,
+		{} as PermissionsMap<T>,
 	);
 
 export const getCredentialPermissions = (
@@ -47,6 +50,7 @@ export const getWorkflowPermissions = (workflow: IWorkflowDb): PermissionsMap<Wo
 			'workflow:list',
 			'workflow:share',
 			'workflow:execute',
+			'workflow:move',
 		],
 		new Set(workflow?.scopes ?? []),
 	);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 1495915890e9e..7bcf197fd36f1 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2168,6 +2168,7 @@
 	"workflows.item.share": "Share...",
 	"workflows.item.duplicate": "Duplicate",
 	"workflows.item.delete": "Delete",
+	"workflows.item.move": "Move",
 	"workflows.item.updated": "Last updated",
 	"workflows.item.created": "Created",
 	"workflows.search.placeholder": "Search workflows...",

From 3b629d2c43177454cf4eb95580063b35de40008a Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 6 Jun 2024 16:11:58 +0200
Subject: [PATCH 02/20] fix(editor): Fix test

---
 .../{__tests__ => }/WorkflowCard.test.ts      |  37 +++--
 .../editor-ui/src/components/WorkflowCard.vue | 143 ++++++++++--------
 2 files changed, 103 insertions(+), 77 deletions(-)
 rename packages/editor-ui/src/components/{__tests__ => }/WorkflowCard.test.ts (87%)

diff --git a/packages/editor-ui/src/components/__tests__/WorkflowCard.test.ts b/packages/editor-ui/src/components/WorkflowCard.test.ts
similarity index 87%
rename from packages/editor-ui/src/components/__tests__/WorkflowCard.test.ts
rename to packages/editor-ui/src/components/WorkflowCard.test.ts
index 2c818b00f0ed3..f3c1da501c343 100644
--- a/packages/editor-ui/src/components/__tests__/WorkflowCard.test.ts
+++ b/packages/editor-ui/src/components/WorkflowCard.test.ts
@@ -10,20 +10,23 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IWorkflowDb } from '@/Interface';
-
-const $router = {
-	push: vi.fn(),
-	resolve: vi.fn().mockImplementation(() => ({ href: '' })),
-};
-
-const renderComponent = createComponentRenderer(WorkflowCard, {
-	global: {
-		mocks: {
-			$router,
-		},
-	},
+import { useRouter } from 'vue-router';
+
+vi.mock('vue-router', () => {
+	const push = vi.fn();
+	const resolve = vi.fn().mockReturnValue({ href: '' });
+	return {
+		useRouter: () => ({
+			push,
+			resolve,
+		}),
+		useRoute: () => ({}),
+		RouterLink: vi.fn(),
+	};
 });
 
+const renderComponent = createComponentRenderer(WorkflowCard);
+
 const createWorkflow = (overrides = {}): IWorkflowDb => ({
 	id: '1',
 	name: 'My Workflow',
@@ -43,6 +46,7 @@ describe('WorkflowCard', () => {
 	let settingsStore: ReturnType<typeof useSettingsStore>;
 	let usersStore: ReturnType<typeof useUsersStore>;
 	let workflowsStore: ReturnType<typeof useWorkflowsStore>;
+	let router: ReturnType<typeof useRouter>;
 
 	beforeEach(async () => {
 		pinia = createPinia();
@@ -51,6 +55,7 @@ describe('WorkflowCard', () => {
 		settingsStore = useSettingsStore();
 		usersStore = useUsersStore();
 		workflowsStore = useWorkflowsStore();
+		router = useRouter();
 		windowOpenSpy = vi.spyOn(window, 'open');
 	});
 
@@ -67,7 +72,7 @@ describe('WorkflowCard', () => {
 
 		await userEvent.click(cardTitle);
 		await waitFor(() => {
-			expect($router.push).toHaveBeenCalledWith({
+			expect(router.push).toHaveBeenCalledWith({
 				name: VIEWS.WORKFLOW,
 				params: { name: data.id },
 			});
@@ -79,7 +84,7 @@ describe('WorkflowCard', () => {
 		await user.keyboard('[ControlLeft>]');
 		await user.click(cardTitle);
 		await waitFor(() => {
-			expect($router.push).toHaveBeenCalledTimes(1);
+			expect(router.push).toHaveBeenCalledTimes(1);
 		});
 		expect(windowOpenSpy).toHaveBeenCalled();
 	});
@@ -98,7 +103,7 @@ describe('WorkflowCard', () => {
 
 		await userEvent.click(cardActions);
 		await waitFor(() => {
-			expect($router.push).not.toHaveBeenCalled();
+			expect(router.push).not.toHaveBeenCalled();
 		});
 
 		const actions = document.querySelector(`#${controllingId}`);
@@ -107,7 +112,7 @@ describe('WorkflowCard', () => {
 		});
 		await userEvent.click(actions!.querySelectorAll('li')[0]);
 		await waitFor(() => {
-			expect($router.push).toHaveBeenCalledWith({
+			expect(router.push).toHaveBeenCalledWith({
 				name: VIEWS.WORKFLOW,
 				params: { name: data.id },
 			});
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 5621b93eb936e..15be8f8cba5a8 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -69,7 +69,7 @@ const projectsStore = useProjectsStore();
 const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
 const workflowPermissions = computed(() => getWorkflowPermissions(props.data));
 const actions = computed(() => {
-	const actions = [
+	const items = [
 		{
 			label: locale.baseText('workflows.item.open'),
 			value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
@@ -81,27 +81,27 @@ const actions = computed(() => {
 	];
 
 	if (!props.readOnly) {
-		actions.push({
+		items.push({
 			label: locale.baseText('workflows.item.duplicate'),
 			value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
 		});
 	}
 
 	if (workflowPermissions.value.move) {
-		actions.push({
+		items.push({
 			label: locale.baseText('workflows.item.move'),
 			value: WORKFLOW_LIST_ITEM_ACTIONS.MOVE,
 		});
 	}
 
 	if (workflowPermissions.value.delete && !props.readOnly) {
-		actions.push({
+		items.push({
 			label: locale.baseText('workflows.item.delete'),
 			value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE,
 		});
 	}
 
-	return actions;
+	return items;
 });
 const formattedCreatedAtDate = computed(() => {
 	const currentYear = new Date().getFullYear().toString();
@@ -140,64 +140,85 @@ function onExpandTags() {
 }
 
 async function onAction(action: string) {
-	if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
-		await onClick();
-	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
-		uiStore.openModalWithData({
-			name: DUPLICATE_MODAL_KEY,
-			data: {
-				id: props.data.id,
-				name: props.data.name,
-				tags: (props.data.tags ?? []).map((tag) =>
-					typeof tag !== 'string' && 'id' in tag ? tag.id : tag,
-				),
-			},
-		});
-	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.SHARE) {
-		uiStore.openModalWithData({
-			name: WORKFLOW_SHARE_MODAL_KEY,
-			data: { id: props.data.id },
-		});
+	switch (action) {
+		case WORKFLOW_LIST_ITEM_ACTIONS.OPEN:
+			await onClick();
+			break;
+		case WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE:
+			uiStore.openModalWithData({
+				name: DUPLICATE_MODAL_KEY,
+				data: {
+					id: props.data.id,
+					name: props.data.name,
+					tags: (props.data.tags ?? []).map((tag) =>
+						typeof tag !== 'string' && 'id' in tag ? tag.id : tag,
+					),
+				},
+			});
+			break;
+		case WORKFLOW_LIST_ITEM_ACTIONS.SHARE:
+			uiStore.openModalWithData({
+				name: WORKFLOW_SHARE_MODAL_KEY,
+				data: { id: props.data.id },
+			});
 
-		telemetry.track('User opened sharing modal', {
-			workflow_id: props.data.id,
-			user_id_sharer: currentUser.value.id,
-			sub_view: 'Workflows listing',
-		});
-	} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
-		const deleteConfirmed = await message.confirm(
-			locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
-				interpolate: { workflowName: props.data.name },
-			}),
-			locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-			{
-				type: 'warning',
-				confirmButtonText: locale.baseText(
-					'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
-				),
-				cancelButtonText: locale.baseText(
-					'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
-				),
-			},
-		);
-
-		if (deleteConfirmed !== MODAL_CONFIRM) {
-			return;
-		}
-
-		try {
-			await workflowsStore.deleteWorkflow(props.data.id);
-		} catch (error) {
-			toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
-			return;
-		}
-
-		// Reset tab title since workflow is deleted.
-		toast.showMessage({
-			title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-			type: 'success',
-		});
+			telemetry.track('User opened sharing modal', {
+				workflow_id: props.data.id,
+				user_id_sharer: currentUser.value.id,
+				sub_view: 'Workflows listing',
+			});
+			break;
+		case WORKFLOW_LIST_ITEM_ACTIONS.DELETE:
+			await deleteWorkflow();
+			break;
+		case WORKFLOW_LIST_ITEM_ACTIONS.MOVE:
+			await moveWorkflow();
+			break;
+	}
+}
+
+async function deleteWorkflow() {
+	const deleteConfirmed = await message.confirm(
+		locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+			interpolate: { workflowName: props.data.name },
+		}),
+		locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+		{
+			type: 'warning',
+			confirmButtonText: locale.baseText(
+				'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+			),
+			cancelButtonText: locale.baseText(
+				'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+			),
+		},
+	);
+
+	if (deleteConfirmed !== MODAL_CONFIRM) {
+		return;
+	}
+
+	try {
+		await workflowsStore.deleteWorkflow(props.data.id);
+	} catch (error) {
+		toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
+		return;
 	}
+
+	// Reset tab title since workflow is deleted.
+	toast.showMessage({
+		title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+		type: 'success',
+	});
+}
+
+async function moveWorkflow() {
+	uiStore.openModalWithData({
+		name: 'move-workflow',
+		data: {
+			workflowId: props.data.id,
+		},
+	});
 }
 </script>
 

From 302fb9da6e29e136478e3739808a03ffaeffcf5a Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 6 Jun 2024 16:20:22 +0200
Subject: [PATCH 03/20] fix(editor): Refactor Modals to setup script

---
 packages/editor-ui/src/components/Modals.vue | 204 ++++++-------------
 1 file changed, 67 insertions(+), 137 deletions(-)

diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 14eed1b4460ac..d597d4073ef5e 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import {
+	ABOUT_MODAL_KEY,
+	CHAT_EMBED_MODAL_KEY,
+	CHANGE_PASSWORD_MODAL_KEY,
+	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
+	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
+	CONTACT_PROMPT_MODAL_KEY,
+	CREDENTIAL_EDIT_MODAL_KEY,
+	CREDENTIAL_SELECT_MODAL_KEY,
+	DELETE_USER_MODAL_KEY,
+	DUPLICATE_MODAL_KEY,
+	INVITE_USER_MODAL_KEY,
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
+	PERSONALIZATION_MODAL_KEY,
+	TAGS_MANAGER_MODAL_KEY,
+	VALUE_SURVEY_MODAL_KEY,
+	VERSIONS_MODAL_KEY,
+	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_LM_CHAT_MODAL_KEY,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+	WORKFLOW_SHARE_MODAL_KEY,
+	IMPORT_CURL_MODAL_KEY,
+	LOG_STREAM_MODAL_KEY,
+	SOURCE_CONTROL_PUSH_MODAL_KEY,
+	SOURCE_CONTROL_PULL_MODAL_KEY,
+	EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
+	DEBUG_PAYWALL_MODAL_KEY,
+	MFA_SETUP_MODAL_KEY,
+	WORKFLOW_HISTORY_VERSION_RESTORE,
+	SETUP_CREDENTIALS_MODAL_KEY,
+	GENERATE_CURL_MODAL_KEY,
+} from '@/constants';
+
+import AboutModal from '@/components/AboutModal.vue';
+import ChatEmbedModal from '@/components/ChatEmbedModal.vue';
+import CommunityPackageManageConfirmModal from '@/components/CommunityPackageManageConfirmModal.vue';
+import CommunityPackageInstallModal from '@/components/CommunityPackageInstallModal.vue';
+import ChangePasswordModal from '@/components/ChangePasswordModal.vue';
+import ContactPromptModal from '@/components/ContactPromptModal.vue';
+import CredentialEdit from '@/components/CredentialEdit/CredentialEdit.vue';
+import InviteUsersModal from '@/components/InviteUsersModal.vue';
+import CredentialsSelectModal from '@/components/CredentialsSelectModal.vue';
+import DuplicateWorkflowDialog from '@/components/DuplicateWorkflowDialog.vue';
+import ModalRoot from '@/components/ModalRoot.vue';
+import OnboardingCallSignupModal from '@/components/OnboardingCallSignupModal.vue';
+import PersonalizationModal from '@/components/PersonalizationModal.vue';
+import TagsManager from '@/components/TagsManager/TagsManager.vue';
+import UpdatesPanel from '@/components/UpdatesPanel.vue';
+import ValueSurvey from '@/components/ValueSurvey.vue';
+import WorkflowLMChat from '@/components/WorkflowLMChat.vue';
+import WorkflowSettings from '@/components/WorkflowSettings.vue';
+import DeleteUserModal from '@/components/DeleteUserModal.vue';
+import ActivationModal from '@/components/ActivationModal.vue';
+import ImportCurlModal from '@/components/ImportCurlModal.vue';
+import GenerateCurlModal from '@/components/GenerateCurlModal.vue';
+import MfaSetupModal from '@/components/MfaSetupModal.vue';
+import WorkflowShareModal from '@/components/WorkflowShareModal.ee.vue';
+import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
+import SourceControlPushModal from '@/components/SourceControlPushModal.ee.vue';
+import SourceControlPullModal from '@/components/SourceControlPullModal.ee.vue';
+import ExternalSecretsProviderModal from '@/components/ExternalSecretsProviderModal.ee.vue';
+import DebugPaywallModal from '@/components/DebugPaywallModal.vue';
+import WorkflowHistoryVersionRestoreModal from '@/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue';
+import SetupWorkflowCredentialsModal from '@/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue';
+</script>
+
 <template>
 	<div>
 		<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
@@ -169,140 +236,3 @@
 		</ModalRoot>
 	</div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import {
-	ABOUT_MODAL_KEY,
-	CHAT_EMBED_MODAL_KEY,
-	CHANGE_PASSWORD_MODAL_KEY,
-	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
-	CONTACT_PROMPT_MODAL_KEY,
-	CREDENTIAL_EDIT_MODAL_KEY,
-	CREDENTIAL_SELECT_MODAL_KEY,
-	DELETE_USER_MODAL_KEY,
-	DUPLICATE_MODAL_KEY,
-	INVITE_USER_MODAL_KEY,
-	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
-	PERSONALIZATION_MODAL_KEY,
-	TAGS_MANAGER_MODAL_KEY,
-	VALUE_SURVEY_MODAL_KEY,
-	VERSIONS_MODAL_KEY,
-	WORKFLOW_ACTIVE_MODAL_KEY,
-	WORKFLOW_LM_CHAT_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_SHARE_MODAL_KEY,
-	IMPORT_CURL_MODAL_KEY,
-	LOG_STREAM_MODAL_KEY,
-	SOURCE_CONTROL_PUSH_MODAL_KEY,
-	SOURCE_CONTROL_PULL_MODAL_KEY,
-	EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
-	DEBUG_PAYWALL_MODAL_KEY,
-	MFA_SETUP_MODAL_KEY,
-	WORKFLOW_HISTORY_VERSION_RESTORE,
-	SETUP_CREDENTIALS_MODAL_KEY,
-	GENERATE_CURL_MODAL_KEY,
-} from '@/constants';
-
-import AboutModal from './AboutModal.vue';
-import ChatEmbedModal from './ChatEmbedModal.vue';
-import CommunityPackageManageConfirmModal from './CommunityPackageManageConfirmModal.vue';
-import CommunityPackageInstallModal from './CommunityPackageInstallModal.vue';
-import ChangePasswordModal from './ChangePasswordModal.vue';
-import ContactPromptModal from './ContactPromptModal.vue';
-import CredentialEdit from './CredentialEdit/CredentialEdit.vue';
-import InviteUsersModal from './InviteUsersModal.vue';
-import CredentialsSelectModal from './CredentialsSelectModal.vue';
-import DuplicateWorkflowDialog from './DuplicateWorkflowDialog.vue';
-import ModalRoot from './ModalRoot.vue';
-import OnboardingCallSignupModal from './OnboardingCallSignupModal.vue';
-import PersonalizationModal from './PersonalizationModal.vue';
-import TagsManager from './TagsManager/TagsManager.vue';
-import UpdatesPanel from './UpdatesPanel.vue';
-import ValueSurvey from './ValueSurvey.vue';
-import WorkflowLMChat from './WorkflowLMChat.vue';
-import WorkflowSettings from './WorkflowSettings.vue';
-import DeleteUserModal from './DeleteUserModal.vue';
-import ActivationModal from './ActivationModal.vue';
-import ImportCurlModal from './ImportCurlModal.vue';
-import GenerateCurlModal from './GenerateCurlModal.vue';
-import MfaSetupModal from './MfaSetupModal.vue';
-import WorkflowShareModal from './WorkflowShareModal.ee.vue';
-import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
-import SourceControlPushModal from '@/components/SourceControlPushModal.ee.vue';
-import SourceControlPullModal from '@/components/SourceControlPullModal.ee.vue';
-import ExternalSecretsProviderModal from '@/components/ExternalSecretsProviderModal.ee.vue';
-import DebugPaywallModal from '@/components/DebugPaywallModal.vue';
-import WorkflowHistoryVersionRestoreModal from '@/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue';
-import SetupWorkflowCredentialsModal from '@/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue';
-
-export default defineComponent({
-	name: 'Modals',
-	components: {
-		AboutModal,
-		ActivationModal,
-		ChatEmbedModal,
-		CommunityPackageInstallModal,
-		CommunityPackageManageConfirmModal,
-		ContactPromptModal,
-		ChangePasswordModal,
-		CredentialEdit,
-		CredentialsSelectModal,
-		DeleteUserModal,
-		DuplicateWorkflowDialog,
-		InviteUsersModal,
-		ModalRoot,
-		OnboardingCallSignupModal,
-		PersonalizationModal,
-		TagsManager,
-		UpdatesPanel,
-		ValueSurvey,
-		WorkflowLMChat,
-		WorkflowSettings,
-		WorkflowShareModal,
-		ImportCurlModal,
-		GenerateCurlModal,
-		EventDestinationSettingsModal,
-		SourceControlPushModal,
-		SourceControlPullModal,
-		ExternalSecretsProviderModal,
-		DebugPaywallModal,
-		MfaSetupModal,
-		WorkflowHistoryVersionRestoreModal,
-		SetupWorkflowCredentialsModal,
-	},
-	data: () => ({
-		CHAT_EMBED_MODAL_KEY,
-		COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-		COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
-		CONTACT_PROMPT_MODAL_KEY,
-		CREDENTIAL_EDIT_MODAL_KEY,
-		CREDENTIAL_SELECT_MODAL_KEY,
-		ABOUT_MODAL_KEY,
-		CHANGE_PASSWORD_MODAL_KEY,
-		DELETE_USER_MODAL_KEY,
-		DUPLICATE_MODAL_KEY,
-		ONBOARDING_CALL_SIGNUP_MODAL_KEY,
-		PERSONALIZATION_MODAL_KEY,
-		INVITE_USER_MODAL_KEY,
-		TAGS_MANAGER_MODAL_KEY,
-		VERSIONS_MODAL_KEY,
-		WORKFLOW_LM_CHAT_MODAL_KEY,
-		WORKFLOW_SETTINGS_MODAL_KEY,
-		WORKFLOW_SHARE_MODAL_KEY,
-		VALUE_SURVEY_MODAL_KEY,
-		WORKFLOW_ACTIVE_MODAL_KEY,
-		IMPORT_CURL_MODAL_KEY,
-		GENERATE_CURL_MODAL_KEY,
-		LOG_STREAM_MODAL_KEY,
-		SOURCE_CONTROL_PUSH_MODAL_KEY,
-		SOURCE_CONTROL_PULL_MODAL_KEY,
-		EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
-		DEBUG_PAYWALL_MODAL_KEY,
-		MFA_SETUP_MODAL_KEY,
-		WORKFLOW_HISTORY_VERSION_RESTORE,
-		SETUP_CREDENTIALS_MODAL_KEY,
-	}),
-});
-</script>

From 76a22239a0eee214657ebd2445f72b4492b29d93 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 6 Jun 2024 17:52:04 +0200
Subject: [PATCH 04/20] fix(editor): Scaffolding resource move process

---
 packages/editor-ui/src/api/projects.api.ts    |   8 ++
 .../editor-ui/src/components/ModalRoot.vue    |  47 ++++----
 packages/editor-ui/src/components/Modals.vue  |  22 ++++
 .../ProjectMoveResourceConfirmModal.vue       |  57 ++++++++++
 .../Projects/ProjectMoveResourceModal.vue     | 100 ++++++++++++++++++
 .../editor-ui/src/components/WorkflowCard.vue |  17 ++-
 packages/editor-ui/src/constants.ts           |   2 +
 .../src/plugins/i18n/locales/en.json          |   5 +
 .../editor-ui/src/stores/projects.store.ts    |   5 +
 packages/editor-ui/src/stores/ui.store.ts     |   4 +
 10 files changed, 233 insertions(+), 34 deletions(-)
 create mode 100644 packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
 create mode 100644 packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue

diff --git a/packages/editor-ui/src/api/projects.api.ts b/packages/editor-ui/src/api/projects.api.ts
index b3bae3fbf1564..88e02be3e11dd 100644
--- a/packages/editor-ui/src/api/projects.api.ts
+++ b/packages/editor-ui/src/api/projects.api.ts
@@ -57,3 +57,11 @@ export const deleteProject = async (
 export const getProjectsCount = async (context: IRestApiContext): Promise<ProjectsCount> => {
 	return await makeRestApiRequest(context, 'GET', '/projects/count');
 };
+
+export const moveResourceToProject = async (
+	context: IRestApiContext,
+	resourceId: string,
+	projectId: string,
+): Promise<void> => {
+	return await makeRestApiRequest(context, 'POST', '/projects/move', { resourceId, projectId });
+};
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index d9ed7f4137bac..436f31e8108c8 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,34 +1,23 @@
+<script setup lang="ts">
+import { useUIStore } from '@/stores/ui.store';
+
+const props = defineProps<{
+	name: string;
+	keepAlive?: boolean;
+}>();
+
+const uiStore = useUIStore();
+</script>
+
 <template>
-	<div v-if="uiStore.isModalOpen(name) || keepAlive">
+	<div v-if="uiStore.isModalOpen(props.name) || props.keepAlive">
 		<slot
-			:modal-name="name"
-			:active="uiStore.isModalActive(name)"
-			:open="uiStore.isModalOpen(name)"
-			:active-id="uiStore.getModalActiveId(name)"
-			:mode="uiStore.getModalMode(name)"
-			:data="uiStore.getModalData(name)"
+			:modal-name="props.name"
+			:active="uiStore.isModalActive(props.name)"
+			:open="uiStore.isModalOpen(props.name)"
+			:active-id="uiStore.getModalActiveId(props.name)"
+			:mode="uiStore.getModalMode(props.name)"
+			:data="uiStore.getModalData(props.name)"
 		></slot>
 	</div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useUIStore } from '@/stores/ui.store';
-import { mapStores } from 'pinia';
-
-export default defineComponent({
-	name: 'ModalRoot',
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		keepAlive: {
-			type: Boolean,
-		},
-	},
-	computed: {
-		...mapStores(useUIStore),
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index d597d4073ef5e..1cdb1486f1d60 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -30,6 +30,8 @@ import {
 	WORKFLOW_HISTORY_VERSION_RESTORE,
 	SETUP_CREDENTIALS_MODAL_KEY,
 	GENERATE_CURL_MODAL_KEY,
+	PROJECT_MOVE_RESOURCE_MODAL,
+	PROJECT_MOVE_RESOURCE_CONFIRM_MODAL,
 } from '@/constants';
 
 import AboutModal from '@/components/AboutModal.vue';
@@ -63,6 +65,8 @@ import ExternalSecretsProviderModal from '@/components/ExternalSecretsProviderMo
 import DebugPaywallModal from '@/components/DebugPaywallModal.vue';
 import WorkflowHistoryVersionRestoreModal from '@/components/WorkflowHistory/WorkflowHistoryVersionRestoreModal.vue';
 import SetupWorkflowCredentialsModal from '@/components/SetupWorkflowCredentialsModal/SetupWorkflowCredentialsModal.vue';
+import ProjectMoveResourceModal from '@/components/Projects/ProjectMoveResourceModal.vue';
+import ProjectMoveResourceConfirmModal from '@/components/Projects/ProjectMoveResourceConfirmModal.vue';
 </script>
 
 <template>
@@ -234,5 +238,23 @@ import SetupWorkflowCredentialsModal from '@/components/SetupWorkflowCredentials
 				/>
 			</template>
 		</ModalRoot>
+		<ModalRoot :name="PROJECT_MOVE_RESOURCE_MODAL">
+			<template #default="{ modalName, data }">
+				<ProjectMoveResourceModal
+					data-test-id="project-move-resource-modal"
+					:modal-name="modalName"
+					:data="data"
+				/>
+			</template>
+		</ModalRoot>
+		<ModalRoot :name="PROJECT_MOVE_RESOURCE_CONFIRM_MODAL">
+			<template #default="{ modalName, data }">
+				<ProjectMoveResourceConfirmModal
+					data-test-id="project-move-resource-confirm-modal"
+					:modal-name="modalName"
+					:data="data"
+				/>
+			</template>
+		</ModalRoot>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
new file mode 100644
index 0000000000000..52c68fef59fc7
--- /dev/null
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import { useUIStore } from '@/stores/ui.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import Modal from '@/components/Modal.vue';
+
+const props = defineProps<{
+	modalName: string;
+	data: {
+		resource: IWorkflowDb | ICredentialsResponse;
+		resourceType: ReturnType<typeof i18n.baseText>;
+		projectId: string;
+		beforeClose: () => void;
+	};
+}>();
+
+const i18n = useI18n();
+const uiStore = useUIStore();
+const projectsStore = useProjectsStore();
+
+const closeModal = () => {
+	uiStore.closeModal(props.modalName);
+};
+
+const confirm = async () => {
+	await projectsStore.moveResourceToProject(props.data.resource.id, props.data.projectId);
+	closeModal();
+};
+</script>
+<template>
+	<Modal width="500px" :name="props.modalName" :before-close="props.data.beforeClose">
+		<template #header>
+			<N8nHeading tag="h2" size="xlarge" class="mb-m">
+				{{ i18n.baseText('projects.move.resource.confirm.modal.title') }}
+			</N8nHeading>
+		</template>
+		<template #content> </template>
+		<template #footer>
+			<div :class="$style.buttons">
+				<N8nButton type="secondary" text class="mr-2xs" @click="closeModal">
+					{{ i18n.baseText('generic.cancel') }}
+				</N8nButton>
+				<N8nButton type="primary" @click="confirm">
+					{{ i18n.baseText('projects.move.resource.confirm.modal.button.confirm') }}
+				</N8nButton>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.buttons {
+	display: flex;
+	justify-content: flex-end;
+}
+</style>
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
new file mode 100644
index 0000000000000..497c5a354312a
--- /dev/null
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import { useUIStore } from '@/stores/ui.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import Modal from '@/components/Modal.vue';
+import { ref } from 'vue';
+import { PROJECT_MOVE_RESOURCE_CONFIRM_MODAL } from '@/constants';
+
+const props = defineProps<{
+	modalName: string;
+	data: {
+		resource: IWorkflowDb | ICredentialsResponse;
+		resourceType: ReturnType<typeof i18n.baseText>;
+		beforeClose: () => void;
+	};
+}>();
+
+const i18n = useI18n();
+const uiStore = useUIStore();
+const projectsStore = useProjectsStore();
+
+const projectId = ref<string | null>(null);
+
+const updateProject = (value: string) => {
+	projectId.value = value;
+};
+
+const closeModal = () => {
+	uiStore.closeModal(props.modalName);
+};
+
+const next = () => {
+	closeModal();
+	uiStore.openModalWithData({
+		name: PROJECT_MOVE_RESOURCE_CONFIRM_MODAL,
+		data: {
+			resource: props.data.resource,
+			resourceType: props.data.resourceType,
+			projectId: projectId.value,
+		},
+	});
+};
+</script>
+<template>
+	<Modal width="500px" :name="props.modalName" :before-close="props.data.beforeClose">
+		<template #header>
+			<N8nHeading tag="h2" size="xlarge" class="mb-m">
+				{{
+					i18n.baseText('projects.move.resource.modal.title', {
+						interpolate: { resourceType: props.data.resourceType },
+					})
+				}}
+			</N8nHeading>
+			<N8nText>
+				<i18n-t keypath="projects.move.resource.modal.message">
+					<template #resourceName
+						><strong>{{ props.data.resource.name }}</strong></template
+					>
+					<template #resourceHomeProjectName>{{ props.data.resource.homeProject?.name }}</template>
+					<template #resourceType>{{ props.data.resourceType }}</template>
+				</i18n-t>
+			</N8nText>
+		</template>
+		<template #content>
+			<div>
+				<N8nSelect
+					class="mr-2xs"
+					:model-value="projectId"
+					size="small"
+					@update:model-value="updateProject"
+				>
+					<N8nOption
+						v-for="p in projectsStore.teamProjects"
+						:key="p.id"
+						:value="p.id"
+						:label="p.name"
+					></N8nOption>
+				</N8nSelect>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.buttons">
+				<N8nButton type="secondary" text class="mr-2xs" @click="closeModal">
+					{{ i18n.baseText('generic.cancel') }}
+				</N8nButton>
+				<N8nButton :disabled="!projectId" type="primary" @click="next">
+					{{ i18n.baseText('generic.next') }}
+				</N8nButton>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.buttons {
+	display: flex;
+	justify-content: flex-end;
+}
+</style>
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 15be8f8cba5a8..27f92ec5125c6 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { IWorkflowDb, IUser } from '@/Interface';
-import { DUPLICATE_MODAL_KEY, MODAL_CONFIRM, VIEWS, WORKFLOW_SHARE_MODAL_KEY } from '@/constants';
+import {
+	DUPLICATE_MODAL_KEY,
+	MODAL_CONFIRM,
+	PROJECT_MOVE_RESOURCE_MODAL,
+	VIEWS,
+	WORKFLOW_SHARE_MODAL_KEY,
+} from '@/constants';
 import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
 import { getWorkflowPermissions } from '@/permissions';
@@ -172,7 +178,7 @@ async function onAction(action: string) {
 			await deleteWorkflow();
 			break;
 		case WORKFLOW_LIST_ITEM_ACTIONS.MOVE:
-			await moveWorkflow();
+			moveWorkflow();
 			break;
 	}
 }
@@ -212,11 +218,12 @@ async function deleteWorkflow() {
 	});
 }
 
-async function moveWorkflow() {
+function moveWorkflow() {
 	uiStore.openModalWithData({
-		name: 'move-workflow',
+		name: PROJECT_MOVE_RESOURCE_MODAL,
 		data: {
-			workflowId: props.data.id,
+			resource: props.data,
+			resourceType: locale.baseText('generic.workflow').toLocaleLowerCase(),
 		},
 	});
 }
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 4f19cd5f44c96..f08027babd942 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -64,6 +64,8 @@ export const DEBUG_PAYWALL_MODAL_KEY = 'debugPaywall';
 export const MFA_SETUP_MODAL_KEY = 'mfaSetup';
 export const WORKFLOW_HISTORY_VERSION_RESTORE = 'workflowHistoryVersionRestore';
 export const SETUP_CREDENTIALS_MODAL_KEY = 'setupCredentials';
+export const PROJECT_MOVE_RESOURCE_MODAL = 'projectMoveResourceModal';
+export const PROJECT_MOVE_RESOURCE_CONFIRM_MODAL = 'projectMoveResourceConfirmModal';
 
 export const EXTERNAL_SECRETS_PROVIDER_MODAL_KEY = 'externalSecretsProvider';
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 7bcf197fd36f1..a922e81c83436 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -69,6 +69,7 @@
 	"generic.and": "and",
 	"generic.ownedByMe": "Owned by me",
 	"generic.moreInfo": "More info",
+	"generic.next": "Next",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -2485,6 +2486,10 @@
 	"projects.create.limit": "{num} project | {num} projects",
 	"projects.create.limitReached": "You have reached the {planName} plan limit of {limit}. Upgrade your plan to unlock more projects. {link}",
 	"projects.create.limitReached.link": "View plans",
+	"projects.move.resource.modal.title": "Choose a project to move this {resourceType} to",
+	"projects.move.resource.modal.message": "\"{resourceName}\" is currently in the \"{resourceHomeProjectName}\" project. Which project would you like to move this {resourceType} to?",
+	"projects.move.resource.confirm.modal.title": "Please confirm the following",
+	"projects.move.resource.confirm.modal.button.confirm": "Confirm move to new project",
 	"mfa.setup.invalidAuthenticatorCode": "{code} is not a valid number",
 	"mfa.setup.invalidCode": "Two-factor code failed. Please try again.",
 	"mfa.code.modal.title": "Two-factor authentication",
diff --git a/packages/editor-ui/src/stores/projects.store.ts b/packages/editor-ui/src/stores/projects.store.ts
index b05589af3a47b..3cf089c000371 100644
--- a/packages/editor-ui/src/stores/projects.store.ts
+++ b/packages/editor-ui/src/stores/projects.store.ts
@@ -135,6 +135,10 @@ export const useProjectsStore = defineStore('projects', () => {
 		}
 	};
 
+	const moveResourceToProject = async (resourceId: string, projectId: string) => {
+		await projectsApi.moveResourceToProject(rootStore.getRestApiContext, resourceId, projectId);
+	};
+
 	watch(
 		route,
 		async (newRoute) => {
@@ -188,5 +192,6 @@ export const useProjectsStore = defineStore('projects', () => {
 		deleteProject,
 		getProjectsCount,
 		setProjectNavActiveIdByWorkflowHomeProject,
+		moveResourceToProject,
 	};
 });
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index d762d2f82fb8d..27ff926c4707a 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -39,6 +39,8 @@ import {
 	WORKFLOW_HISTORY_VERSION_RESTORE,
 	SETUP_CREDENTIALS_MODAL_KEY,
 	GENERATE_CURL_MODAL_KEY,
+	PROJECT_MOVE_RESOURCE_MODAL,
+	PROJECT_MOVE_RESOURCE_CONFIRM_MODAL,
 } from '@/constants';
 import type {
 	CloudUpdateLinkSourceType,
@@ -118,6 +120,8 @@ export const useUIStore = defineStore(STORES.UI, {
 					DEBUG_PAYWALL_MODAL_KEY,
 					WORKFLOW_HISTORY_VERSION_RESTORE,
 					SETUP_CREDENTIALS_MODAL_KEY,
+					PROJECT_MOVE_RESOURCE_MODAL,
+					PROJECT_MOVE_RESOURCE_CONFIRM_MODAL,
 				].map((modalKey) => [modalKey, { open: false }]),
 			),
 			[DELETE_USER_MODAL_KEY]: {

From dcbeebc0d86c42c4a0edc49a07a868d235c24dd1 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 04:52:19 +0200
Subject: [PATCH 05/20] fix(editor): Refactor credential card to setup script,
 fix unit test

---
 .../src/__tests__/permissions.spec.ts         |   1 +
 .../src/components/CredentialCard.vue         | 251 ++++++++----------
 .../editor-ui/src/components/WorkflowCard.vue |   1 -
 3 files changed, 113 insertions(+), 140 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/permissions.spec.ts b/packages/editor-ui/src/__tests__/permissions.spec.ts
index e126b76741a5c..12bcba6fed1a8 100644
--- a/packages/editor-ui/src/__tests__/permissions.spec.ts
+++ b/packages/editor-ui/src/__tests__/permissions.spec.ts
@@ -101,6 +101,7 @@ describe('permissions', () => {
 					'workflow:list',
 					'workflow:share',
 					'workflow:execute',
+					'workflow:move',
 				],
 			} as IWorkflowDb),
 		).toEqual({
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 04425af7d3f24..4cf1f0eb90e16 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -1,3 +1,113 @@
+<script setup lang="ts">
+import type { ICredentialsResponse } from '@/Interface';
+import { MODAL_CONFIRM } from '@/constants';
+import { useMessage } from '@/composables/useMessage';
+import CredentialIcon from '@/components/CredentialIcon.vue';
+import { getCredentialPermissions } from '@/permissions';
+import dateformat from 'dateformat';
+import { useUIStore } from '@/stores/ui.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import TimeAgo from '@/components/TimeAgo.vue';
+import type { ProjectSharingData } from '@/types/projects.types';
+import { useProjectsStore } from '@/stores/projects.store';
+import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
+import { useI18n } from '@/composables/useI18n';
+import { computed } from 'vue';
+
+const CREDENTIAL_LIST_ITEM_ACTIONS = {
+	OPEN: 'open',
+	DELETE: 'delete',
+};
+
+const props = withDefaults(
+	defineProps<{
+		data: ICredentialsResponse;
+		readOnly: boolean;
+	}>(),
+	{
+		data: () => ({
+			id: '',
+			createdAt: '',
+			updatedAt: '',
+			type: '',
+			name: '',
+			sharedWithProjects: [],
+			homeProject: {} as ProjectSharingData,
+		}),
+		readOnly: false,
+	},
+);
+
+const locale = useI18n();
+const message = useMessage();
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+const credentialsStore = useCredentialsStore();
+const projectsStore = useProjectsStore();
+
+const currentUser = computed(() => usersStore.currentUser);
+const credentialType = computed(() => credentialsStore.getCredentialTypeByName(props.data.type));
+const credentialPermissions = computed(() =>
+	!currentUser.value ? null : getCredentialPermissions(props.data),
+);
+const actions = computed(() => {
+	if (!credentialPermissions.value) {
+		return [];
+	}
+
+	return [
+		{
+			label: locale.baseText('credentials.item.open'),
+			value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
+		},
+	].concat(
+		credentialPermissions.value.delete
+			? [
+					{
+						label: locale.baseText('credentials.item.delete'),
+						value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
+					},
+				]
+			: [],
+	);
+});
+const formattedCreatedAtDate = computed(() => {
+	const currentYear = new Date().getFullYear().toString();
+
+	return dateformat(
+		props.data.createdAt,
+		`d mmmm${props.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
+	);
+});
+
+function onClick() {
+	uiStore.openExistingCredential(props.data.id);
+}
+
+async function onAction(action: string) {
+	if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
+		onClick();
+	} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
+		const deleteConfirmed = await message.confirm(
+			locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
+				interpolate: { savedCredentialName: props.data.name },
+			}),
+			locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
+			{
+				confirmButtonText: locale.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+				),
+			},
+		);
+
+		if (deleteConfirmed === MODAL_CONFIRM) {
+			await credentialsStore.deleteCredential({ id: props.data.id });
+		}
+	}
+}
+</script>
+
 <template>
 	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #prepend>
@@ -20,151 +130,14 @@
 			</n8n-text>
 		</div>
 		<template #append>
-			<ProjectCardBadge :resource="data" :personal-project="projectsStore.personalProject" />
-			<div ref="cardActions" :class="$style.cardActions">
+			<div :class="$style.cardActions" @click.stop>
+				<ProjectCardBadge :resource="data" :personal-project="projectsStore.personalProject" />
 				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" @click.stop />
 			</div>
 		</template>
 	</n8n-card>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import type { ICredentialsResponse, IUser } from '@/Interface';
-import type { ICredentialType } from 'n8n-workflow';
-import { MODAL_CONFIRM } from '@/constants';
-import { useMessage } from '@/composables/useMessage';
-import CredentialIcon from '@/components/CredentialIcon.vue';
-import type { PermissionsMap } from '@/permissions';
-import { getCredentialPermissions } from '@/permissions';
-import dateformat from 'dateformat';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useCredentialsStore } from '@/stores/credentials.store';
-import TimeAgo from '@/components/TimeAgo.vue';
-import type { ProjectSharingData } from '@/types/projects.types';
-import { useProjectsStore } from '@/stores/projects.store';
-import type { CredentialScope } from '@n8n/permissions';
-import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
-
-export const CREDENTIAL_LIST_ITEM_ACTIONS = {
-	OPEN: 'open',
-	DELETE: 'delete',
-};
-
-export default defineComponent({
-	components: {
-		TimeAgo,
-		CredentialIcon,
-		ProjectCardBadge,
-	},
-	props: {
-		data: {
-			type: Object as PropType<ICredentialsResponse>,
-			required: true,
-			default: (): ICredentialsResponse => ({
-				id: '',
-				createdAt: '',
-				updatedAt: '',
-				type: '',
-				name: '',
-				sharedWithProjects: [],
-				homeProject: {} as ProjectSharingData,
-			}),
-		},
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		return {
-			...useMessage(),
-		};
-	},
-	computed: {
-		...mapStores(useCredentialsStore, useUIStore, useUsersStore, useProjectsStore),
-		currentUser(): IUser | null {
-			return this.usersStore.currentUser;
-		},
-		credentialType(): ICredentialType | undefined {
-			return this.credentialsStore.getCredentialTypeByName(this.data.type);
-		},
-		credentialPermissions(): PermissionsMap<CredentialScope> | null {
-			return !this.currentUser ? null : getCredentialPermissions(this.data);
-		},
-		actions(): Array<{ label: string; value: string }> {
-			if (!this.credentialPermissions) {
-				return [];
-			}
-
-			return [
-				{
-					label: this.$locale.baseText('credentials.item.open'),
-					value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
-				},
-			].concat(
-				this.credentialPermissions.delete
-					? [
-							{
-								label: this.$locale.baseText('credentials.item.delete'),
-								value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
-							},
-						]
-					: [],
-			);
-		},
-		formattedCreatedAtDate(): string {
-			const currentYear = new Date().getFullYear().toString();
-
-			return dateformat(
-				this.data.createdAt,
-				`d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
-			);
-		},
-	},
-	methods: {
-		async onClick(event: Event) {
-			const cardActionsEl = this.$refs.cardActions as HTMLDivElement | undefined;
-			const clickTarget = event.target as HTMLElement | null;
-			if (cardActionsEl === clickTarget || (clickTarget && cardActionsEl?.contains(clickTarget))) {
-				return;
-			}
-
-			this.uiStore.openExistingCredential(this.data.id);
-		},
-		async onAction(action: string) {
-			if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
-				await this.onClick(new Event('click'));
-			} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirm(
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
-						{
-							interpolate: { savedCredentialName: this.data.name },
-						},
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
-					),
-					{
-						confirmButtonText: this.$locale.baseText(
-							'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-						),
-					},
-				);
-
-				if (deleteConfirmed === MODAL_CONFIRM) {
-					await this.credentialsStore.deleteCredential({ id: this.data.id });
-				}
-			}
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .cardLink {
 	transition: box-shadow 0.3s ease;
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 27f92ec5125c6..06bf9acdeece3 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -137,7 +137,6 @@ async function onClick(event?: KeyboardEvent | PointerEvent) {
 
 function onClickTag(tagId: string, event: PointerEvent) {
 	event.stopPropagation();
-
 	emit('click:tag', tagId, event);
 }
 

From 4e5f6f4229ebfef82c9350055dd0b37a4f7082f5 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 05:40:26 +0200
Subject: [PATCH 06/20] fix(editor): Adding confirmation labels

---
 .../src/__tests__/permissions.spec.ts         |   3 +
 .../src/components/CredentialCard.vue         | 103 +++++++++++-------
 .../ProjectMoveResourceConfirmModal.vue       |  24 +++-
 .../Projects/ProjectMoveResourceModal.vue     |   2 +-
 .../editor-ui/src/components/WorkflowCard.vue |   4 +-
 packages/editor-ui/src/permissions.ts         |   1 +
 .../src/plugins/i18n/locales/en.json          |   5 +
 7 files changed, 94 insertions(+), 48 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/permissions.spec.ts b/packages/editor-ui/src/__tests__/permissions.spec.ts
index 12bcba6fed1a8..3e5a22123a7cc 100644
--- a/packages/editor-ui/src/__tests__/permissions.spec.ts
+++ b/packages/editor-ui/src/__tests__/permissions.spec.ts
@@ -78,6 +78,7 @@ describe('permissions', () => {
 					'credential:delete',
 					'credential:list',
 					'credential:share',
+					'credential:move',
 				],
 			} as ICredentialsResponse),
 		).toEqual({
@@ -87,6 +88,7 @@ describe('permissions', () => {
 			delete: true,
 			list: true,
 			share: true,
+			move: true,
 		});
 	});
 
@@ -112,6 +114,7 @@ describe('permissions', () => {
 			list: true,
 			share: true,
 			execute: true,
+			move: true,
 		});
 	});
 });
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 4cf1f0eb90e16..ea28c653ba828 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import dateformat from 'dateformat';
 import type { ICredentialsResponse } from '@/Interface';
-import { MODAL_CONFIRM } from '@/constants';
+import { MODAL_CONFIRM, PROJECT_MOVE_RESOURCE_MODAL } from '@/constants';
 import { useMessage } from '@/composables/useMessage';
 import CredentialIcon from '@/components/CredentialIcon.vue';
 import { getCredentialPermissions } from '@/permissions';
-import dateformat from 'dateformat';
 import { useUIStore } from '@/stores/ui.store';
-import { useUsersStore } from '@/stores/users.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import TimeAgo from '@/components/TimeAgo.vue';
 import type { ProjectSharingData } from '@/types/projects.types';
 import { useProjectsStore } from '@/stores/projects.store';
 import ProjectCardBadge from '@/components/Projects/ProjectCardBadge.vue';
 import { useI18n } from '@/composables/useI18n';
-import { computed } from 'vue';
 
 const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
 	DELETE: 'delete',
+	MOVE: 'move',
 };
 
 const props = withDefaults(
@@ -42,35 +42,34 @@ const props = withDefaults(
 const locale = useI18n();
 const message = useMessage();
 const uiStore = useUIStore();
-const usersStore = useUsersStore();
 const credentialsStore = useCredentialsStore();
 const projectsStore = useProjectsStore();
 
-const currentUser = computed(() => usersStore.currentUser);
 const credentialType = computed(() => credentialsStore.getCredentialTypeByName(props.data.type));
-const credentialPermissions = computed(() =>
-	!currentUser.value ? null : getCredentialPermissions(props.data),
-);
+const credentialPermissions = computed(() => getCredentialPermissions(props.data));
 const actions = computed(() => {
-	if (!credentialPermissions.value) {
-		return [];
-	}
-
-	return [
+	const items = [
 		{
 			label: locale.baseText('credentials.item.open'),
 			value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
 		},
-	].concat(
-		credentialPermissions.value.delete
-			? [
-					{
-						label: locale.baseText('credentials.item.delete'),
-						value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
-					},
-				]
-			: [],
-	);
+	];
+
+	if (credentialPermissions.value.delete) {
+		items.push({
+			label: locale.baseText('credentials.item.delete'),
+			value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
+		});
+	}
+
+	if (credentialPermissions.value.move) {
+		items.push({
+			label: locale.baseText('credentials.item.move'),
+			value: CREDENTIAL_LIST_ITEM_ACTIONS.MOVE,
+		});
+	}
+
+	return items;
 });
 const formattedCreatedAtDate = computed(() => {
 	const currentYear = new Date().getFullYear().toString();
@@ -86,26 +85,46 @@ function onClick() {
 }
 
 async function onAction(action: string) {
-	if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
-		onClick();
-	} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
-		const deleteConfirmed = await message.confirm(
-			locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
-				interpolate: { savedCredentialName: props.data.name },
-			}),
-			locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
-			{
-				confirmButtonText: locale.baseText(
-					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-				),
-			},
-		);
-
-		if (deleteConfirmed === MODAL_CONFIRM) {
-			await credentialsStore.deleteCredential({ id: props.data.id });
-		}
+	switch (action) {
+		case CREDENTIAL_LIST_ITEM_ACTIONS.OPEN:
+			onClick();
+			break;
+		case CREDENTIAL_LIST_ITEM_ACTIONS.DELETE:
+			await deleteResource();
+			break;
+		case CREDENTIAL_LIST_ITEM_ACTIONS.MOVE:
+			moveResource();
+			break;
+	}
+}
+
+async function deleteResource() {
+	const deleteConfirmed = await message.confirm(
+		locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
+			interpolate: { savedCredentialName: props.data.name },
+		}),
+		locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
+		{
+			confirmButtonText: locale.baseText(
+				'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+			),
+		},
+	);
+
+	if (deleteConfirmed === MODAL_CONFIRM) {
+		await credentialsStore.deleteCredential({ id: props.data.id });
 	}
 }
+
+function moveResource() {
+	uiStore.openModalWithData({
+		name: PROJECT_MOVE_RESOURCE_MODAL,
+		data: {
+			resource: props.data,
+			resourceType: locale.baseText('generic.credential').toLocaleLowerCase(),
+		},
+	});
+}
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index 52c68fef59fc7..78c2dfe0a55f6 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -1,15 +1,17 @@
 <script lang="ts" setup>
+import { ref, computed } from 'vue';
 import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
 import { useProjectsStore } from '@/stores/projects.store';
 import Modal from '@/components/Modal.vue';
+import { N8nCheckbox } from 'n8n-design-system';
 
 const props = defineProps<{
 	modalName: string;
 	data: {
 		resource: IWorkflowDb | ICredentialsResponse;
-		resourceType: ReturnType<typeof i18n.baseText>;
+		resourceType: 'workflow' | 'credential';
 		projectId: string;
 		beforeClose: () => void;
 	};
@@ -19,6 +21,15 @@ const i18n = useI18n();
 const uiStore = useUIStore();
 const projectsStore = useProjectsStore();
 
+const checks = ref([false, false]);
+const allChecked = computed(() => checks.value.every(Boolean));
+
+const moveResourceLabel = computed(() =>
+	props.data.resourceType === 'workflow'
+		? i18n.baseText('projects.move.workflow.confirm.modal.label')
+		: i18n.baseText('projects.move.credential.confirm.modal.label'),
+);
+
 const closeModal = () => {
 	uiStore.closeModal(props.modalName);
 };
@@ -35,13 +46,20 @@ const confirm = async () => {
 				{{ i18n.baseText('projects.move.resource.confirm.modal.title') }}
 			</N8nHeading>
 		</template>
-		<template #content> </template>
+		<template #content>
+			<N8nCheckbox v-model="checks[0]" :label="moveResourceLabel" />
+			<N8nCheckbox v-model="checks[1]">
+				<i18n-t keypath="projects.move.resource.confirm.modal.label">
+					<template #resourceType>{{ props.data.resourceType }}</template>
+				</i18n-t>
+			</N8nCheckbox>
+		</template>
 		<template #footer>
 			<div :class="$style.buttons">
 				<N8nButton type="secondary" text class="mr-2xs" @click="closeModal">
 					{{ i18n.baseText('generic.cancel') }}
 				</N8nButton>
-				<N8nButton type="primary" @click="confirm">
+				<N8nButton :disabled="!allChecked" type="primary" @click="confirm">
 					{{ i18n.baseText('projects.move.resource.confirm.modal.button.confirm') }}
 				</N8nButton>
 			</div>
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
index 497c5a354312a..fbba9c7b197e8 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 	modalName: string;
 	data: {
 		resource: IWorkflowDb | ICredentialsResponse;
-		resourceType: ReturnType<typeof i18n.baseText>;
+		resourceType: 'workflow' | 'credential';
 		beforeClose: () => void;
 	};
 }>();
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 06bf9acdeece3..1ba4e41b35eac 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -177,7 +177,7 @@ async function onAction(action: string) {
 			await deleteWorkflow();
 			break;
 		case WORKFLOW_LIST_ITEM_ACTIONS.MOVE:
-			moveWorkflow();
+			moveResource();
 			break;
 	}
 }
@@ -217,7 +217,7 @@ async function deleteWorkflow() {
 	});
 }
 
-function moveWorkflow() {
+function moveResource() {
 	uiStore.openModalWithData({
 		name: PROJECT_MOVE_RESOURCE_MODAL,
 		data: {
diff --git a/packages/editor-ui/src/permissions.ts b/packages/editor-ui/src/permissions.ts
index a722f07ced61c..3a28d2f3a6501 100644
--- a/packages/editor-ui/src/permissions.ts
+++ b/packages/editor-ui/src/permissions.ts
@@ -36,6 +36,7 @@ export const getCredentialPermissions = (
 			'credential:delete',
 			'credential:list',
 			'credential:share',
+			'credential:move',
 		],
 		new Set(credential?.scopes ?? []),
 	);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index a922e81c83436..e34e956758d07 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -61,6 +61,7 @@
 	"generic.unsavedWork.confirmMessage.cancelButtonText": "Leave without saving",
 	"generic.upgrade": "Upgrade",
 	"generic.upgradeNow": "Upgrade now",
+	"generic.credential": "Credential",
 	"generic.workflow": "Workflow",
 	"generic.workflowSaved": "Workflow changes saved",
 	"generic.editor": "Editor",
@@ -580,6 +581,7 @@
 	"credentials.empty.button": "Add first credential",
 	"credentials.item.open": "Open",
 	"credentials.item.delete": "Delete",
+	"credentials.item.move": "Move",
 	"credentials.item.updated": "Last updated",
 	"credentials.item.created": "Created",
 	"credentials.item.owner": "Owner",
@@ -2490,6 +2492,9 @@
 	"projects.move.resource.modal.message": "\"{resourceName}\" is currently in the \"{resourceHomeProjectName}\" project. Which project would you like to move this {resourceType} to?",
 	"projects.move.resource.confirm.modal.title": "Please confirm the following",
 	"projects.move.resource.confirm.modal.button.confirm": "Confirm move to new project",
+	"projects.move.workflow.confirm.modal.label": "This workflow may stop working if the credentials used with it do not exist in the project its being moved to",
+	"projects.move.credential.confirm.modal.label": "This credential may cause workflows using it to stop working",
+	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed.",
 	"mfa.setup.invalidAuthenticatorCode": "{code} is not a valid number",
 	"mfa.setup.invalidCode": "Two-factor code failed. Please try again.",
 	"mfa.code.modal.title": "Two-factor authentication",

From bb3a9e8cae79f70845853777faf0a42a325c1d0e Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 05:44:02 +0200
Subject: [PATCH 07/20] fix(editor): Move tests

---
 .../src/components/{__tests__ => }/CredentialCard.test.ts         | 0
 packages/editor-ui/src/{__tests__ => }/permissions.spec.ts        | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/editor-ui/src/components/{__tests__ => }/CredentialCard.test.ts (100%)
 rename packages/editor-ui/src/{__tests__ => }/permissions.spec.ts (100%)

diff --git a/packages/editor-ui/src/components/__tests__/CredentialCard.test.ts b/packages/editor-ui/src/components/CredentialCard.test.ts
similarity index 100%
rename from packages/editor-ui/src/components/__tests__/CredentialCard.test.ts
rename to packages/editor-ui/src/components/CredentialCard.test.ts
diff --git a/packages/editor-ui/src/__tests__/permissions.spec.ts b/packages/editor-ui/src/permissions.spec.ts
similarity index 100%
rename from packages/editor-ui/src/__tests__/permissions.spec.ts
rename to packages/editor-ui/src/permissions.spec.ts

From 521e3f1f9b6b9fdbb8d79c8dd624dbcd8962db07 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 06:03:39 +0200
Subject: [PATCH 08/20] fix(editor): Move workflow to project

---
 packages/editor-ui/src/api/projects.api.ts    |  8 --------
 packages/editor-ui/src/api/workflows.ee.ts    | 10 ++++++++++
 .../ProjectMoveResourceConfirmModal.vue       |  6 +++++-
 .../editor-ui/src/stores/projects.store.ts    | 20 +++++++++++++++++--
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/api/projects.api.ts b/packages/editor-ui/src/api/projects.api.ts
index 88e02be3e11dd..b3bae3fbf1564 100644
--- a/packages/editor-ui/src/api/projects.api.ts
+++ b/packages/editor-ui/src/api/projects.api.ts
@@ -57,11 +57,3 @@ export const deleteProject = async (
 export const getProjectsCount = async (context: IRestApiContext): Promise<ProjectsCount> => {
 	return await makeRestApiRequest(context, 'GET', '/projects/count');
 };
-
-export const moveResourceToProject = async (
-	context: IRestApiContext,
-	resourceId: string,
-	projectId: string,
-): Promise<void> => {
-	return await makeRestApiRequest(context, 'POST', '/projects/move', { resourceId, projectId });
-};
diff --git a/packages/editor-ui/src/api/workflows.ee.ts b/packages/editor-ui/src/api/workflows.ee.ts
index 19e99335b9d1a..5563de0953494 100644
--- a/packages/editor-ui/src/api/workflows.ee.ts
+++ b/packages/editor-ui/src/api/workflows.ee.ts
@@ -14,3 +14,13 @@ export async function setWorkflowSharedWith(
 		data as unknown as IDataObject,
 	);
 }
+
+export async function moveWorkflowToProject(
+	context: IRestApiContext,
+	id: string,
+	destinationProjectId: string,
+): Promise<IWorkflowsShareResponse> {
+	return await makeRestApiRequest(context, 'PUT', `/workflows/${id}/transfer`, {
+		destinationProjectId,
+	});
+}
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index 78c2dfe0a55f6..30671999e8221 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -35,7 +35,11 @@ const closeModal = () => {
 };
 
 const confirm = async () => {
-	await projectsStore.moveResourceToProject(props.data.resource.id, props.data.projectId);
+	await projectsStore.moveResourceToProject(
+		props.data.resourceType,
+		props.data.resource.id,
+		props.data.projectId,
+	);
 	closeModal();
 };
 </script>
diff --git a/packages/editor-ui/src/stores/projects.store.ts b/packages/editor-ui/src/stores/projects.store.ts
index 3cf089c000371..34d502eb7e13a 100644
--- a/packages/editor-ui/src/stores/projects.store.ts
+++ b/packages/editor-ui/src/stores/projects.store.ts
@@ -3,6 +3,7 @@ import { ref, watch, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import * as projectsApi from '@/api/projects.api';
+import * as workflowsEEApi from '@/api/workflows.ee';
 import type {
 	Project,
 	ProjectCreateRequest,
@@ -14,11 +15,13 @@ import { ProjectTypes } from '@/types/projects.types';
 import { useSettingsStore } from '@/stores/settings.store';
 import { hasPermission } from '@/utils/rbac/permissions';
 import type { IWorkflowDb } from '@/Interface';
+import { useWorkflowsStore } from './workflows.store';
 
 export const useProjectsStore = defineStore('projects', () => {
 	const route = useRoute();
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
+	const workflowsStore = useWorkflowsStore();
 
 	const projects = ref<ProjectListItem[]>([]);
 	const myProjects = ref<ProjectListItem[]>([]);
@@ -135,8 +138,21 @@ export const useProjectsStore = defineStore('projects', () => {
 		}
 	};
 
-	const moveResourceToProject = async (resourceId: string, projectId: string) => {
-		await projectsApi.moveResourceToProject(rootStore.getRestApiContext, resourceId, projectId);
+	const moveResourceToProject = async (
+		resourceType: 'workflow' | 'credential',
+		resourceId: string,
+		projectId: string,
+	) => {
+		if (resourceType === 'workflow') {
+			await workflowsEEApi.moveWorkflowToProject(
+				rootStore.getRestApiContext,
+				resourceId,
+				projectId,
+			);
+			await workflowsStore.fetchAllWorkflows(currentProjectId.value);
+		} else {
+			// await credentialsApi.moveCredentialToProject(rootStore.getRestApiContext, resourceId, projectId);
+		}
 	};
 
 	watch(

From d764788f3564699e7c488801607c849dfea91179 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 06:09:12 +0200
Subject: [PATCH 09/20] fix(editor): Add credential move

---
 packages/editor-ui/src/api/credentials.ee.ts    | 10 ++++++++++
 packages/editor-ui/src/api/workflows.ee.ts      |  2 +-
 packages/editor-ui/src/stores/projects.store.ts | 12 ++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/api/credentials.ee.ts b/packages/editor-ui/src/api/credentials.ee.ts
index d6bc1cfe3c2aa..590047a01c15f 100644
--- a/packages/editor-ui/src/api/credentials.ee.ts
+++ b/packages/editor-ui/src/api/credentials.ee.ts
@@ -14,3 +14,13 @@ export async function setCredentialSharedWith(
 		data as unknown as IDataObject,
 	);
 }
+
+export async function moveCredentialToProject(
+	context: IRestApiContext,
+	id: string,
+	destinationProjectId: string,
+): Promise<void> {
+	return await makeRestApiRequest(context, 'PUT', `/credentials/${id}/transfer`, {
+		destinationProjectId,
+	});
+}
diff --git a/packages/editor-ui/src/api/workflows.ee.ts b/packages/editor-ui/src/api/workflows.ee.ts
index 5563de0953494..993d0d872550e 100644
--- a/packages/editor-ui/src/api/workflows.ee.ts
+++ b/packages/editor-ui/src/api/workflows.ee.ts
@@ -19,7 +19,7 @@ export async function moveWorkflowToProject(
 	context: IRestApiContext,
 	id: string,
 	destinationProjectId: string,
-): Promise<IWorkflowsShareResponse> {
+): Promise<void> {
 	return await makeRestApiRequest(context, 'PUT', `/workflows/${id}/transfer`, {
 		destinationProjectId,
 	});
diff --git a/packages/editor-ui/src/stores/projects.store.ts b/packages/editor-ui/src/stores/projects.store.ts
index 34d502eb7e13a..90d02f7ef5e85 100644
--- a/packages/editor-ui/src/stores/projects.store.ts
+++ b/packages/editor-ui/src/stores/projects.store.ts
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import * as projectsApi from '@/api/projects.api';
 import * as workflowsEEApi from '@/api/workflows.ee';
+import * as credentialsEEApi from '@/api/credentials.ee';
 import type {
 	Project,
 	ProjectCreateRequest,
@@ -15,13 +16,15 @@ import { ProjectTypes } from '@/types/projects.types';
 import { useSettingsStore } from '@/stores/settings.store';
 import { hasPermission } from '@/utils/rbac/permissions';
 import type { IWorkflowDb } from '@/Interface';
-import { useWorkflowsStore } from './workflows.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useCredentialsStore } from '@/stores/credentials.store';
 
 export const useProjectsStore = defineStore('projects', () => {
 	const route = useRoute();
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 	const workflowsStore = useWorkflowsStore();
+	const credentialsStore = useCredentialsStore();
 
 	const projects = ref<ProjectListItem[]>([]);
 	const myProjects = ref<ProjectListItem[]>([]);
@@ -151,7 +154,12 @@ export const useProjectsStore = defineStore('projects', () => {
 			);
 			await workflowsStore.fetchAllWorkflows(currentProjectId.value);
 		} else {
-			// await credentialsApi.moveCredentialToProject(rootStore.getRestApiContext, resourceId, projectId);
+			await credentialsEEApi.moveCredentialToProject(
+				rootStore.getRestApiContext,
+				resourceId,
+				projectId,
+			);
+			await credentialsStore.fetchAllCredentials(currentProjectId.value);
 		}
 	};
 

From 643f28926a98e54d08583e2333d0967bd6547e8f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 06:22:07 +0200
Subject: [PATCH 10/20] fix(editor): Add error toast to move resource

---
 .../ProjectMoveResourceConfirmModal.vue       | 26 ++++++++++++++-----
 .../src/plugins/i18n/locales/en.json          |  1 +
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index 30671999e8221..4a8ab7430430b 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -6,6 +6,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useProjectsStore } from '@/stores/projects.store';
 import Modal from '@/components/Modal.vue';
 import { N8nCheckbox } from 'n8n-design-system';
+import { useToast } from '@/composables/useToast';
 
 const props = defineProps<{
 	modalName: string;
@@ -18,6 +19,7 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
+const toast = useToast();
 const uiStore = useUIStore();
 const projectsStore = useProjectsStore();
 
@@ -35,12 +37,24 @@ const closeModal = () => {
 };
 
 const confirm = async () => {
-	await projectsStore.moveResourceToProject(
-		props.data.resourceType,
-		props.data.resource.id,
-		props.data.projectId,
-	);
-	closeModal();
+	try {
+		await projectsStore.moveResourceToProject(
+			props.data.resourceType,
+			props.data.resource.id,
+			props.data.projectId,
+		);
+		closeModal();
+	} catch (error) {
+		toast.showError(
+			error.message,
+			i18n.baseText('projects.move.resource.error.title', {
+				interpolate: {
+					resourceType: props.data.resourceType,
+					resourceName: props.data.resource.name,
+				},
+			}),
+		);
+	}
 };
 </script>
 <template>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index e34e956758d07..c0e29acd9d844 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2495,6 +2495,7 @@
 	"projects.move.workflow.confirm.modal.label": "This workflow may stop working if the credentials used with it do not exist in the project its being moved to",
 	"projects.move.credential.confirm.modal.label": "This credential may cause workflows using it to stop working",
 	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed.",
+	"projects.move.resource.error.title": "Error moving {resourceName} {resourceType}",
 	"mfa.setup.invalidAuthenticatorCode": "{code} is not a valid number",
 	"mfa.setup.invalidCode": "Two-factor code failed. Please try again.",
 	"mfa.code.modal.title": "Two-factor authentication",

From 5b5234a2aa8740007fc0648cc654502a1f766f35 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 12:46:53 +0200
Subject: [PATCH 11/20] fix(editor): Fix some data and add test id

---
 .../ProjectMoveResourceConfirmModal.vue         |  3 +--
 .../Projects/ProjectMoveResourceModal.vue       | 17 ++++++++++++-----
 .../src/components/Projects/ProjectSettings.vue |  4 ++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index 4a8ab7430430b..7d174659ce3be 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -14,7 +14,6 @@ const props = defineProps<{
 		resource: IWorkflowDb | ICredentialsResponse;
 		resourceType: 'workflow' | 'credential';
 		projectId: string;
-		beforeClose: () => void;
 	};
 }>();
 
@@ -58,7 +57,7 @@ const confirm = async () => {
 };
 </script>
 <template>
-	<Modal width="500px" :name="props.modalName" :before-close="props.data.beforeClose">
+	<Modal width="500px" :name="props.modalName" data-test-id="project-move-resource-confirm-modal">
 		<template #header>
 			<N8nHeading tag="h2" size="xlarge" class="mb-m">
 				{{ i18n.baseText('projects.move.resource.confirm.modal.title') }}
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
index fbba9c7b197e8..a51c7edebc913 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
+import { ref, computed } from 'vue';
 import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
 import { useProjectsStore } from '@/stores/projects.store';
 import Modal from '@/components/Modal.vue';
-import { ref } from 'vue';
 import { PROJECT_MOVE_RESOURCE_CONFIRM_MODAL } from '@/constants';
+import { splitName } from '@/utils/projects.utils';
 
 const props = defineProps<{
 	modalName: string;
 	data: {
 		resource: IWorkflowDb | ICredentialsResponse;
 		resourceType: 'workflow' | 'credential';
-		beforeClose: () => void;
 	};
 }>();
 
@@ -21,6 +21,13 @@ const uiStore = useUIStore();
 const projectsStore = useProjectsStore();
 
 const projectId = ref<string | null>(null);
+const processedName = computed(() => {
+	const { firstName, lastName, email } = splitName(props.data.resource.homeProject?.name ?? '');
+	return !firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`;
+});
+const availableProjects = computed(() => {
+	return projectsStore.teamProjects.filter((p) => p.id !== props.data.resource.homeProject?.id);
+});
 
 const updateProject = (value: string) => {
 	projectId.value = value;
@@ -43,7 +50,7 @@ const next = () => {
 };
 </script>
 <template>
-	<Modal width="500px" :name="props.modalName" :before-close="props.data.beforeClose">
+	<Modal width="500px" :name="props.modalName" data-test-id="project-move-resource-modal">
 		<template #header>
 			<N8nHeading tag="h2" size="xlarge" class="mb-m">
 				{{
@@ -57,7 +64,7 @@ const next = () => {
 					<template #resourceName
 						><strong>{{ props.data.resource.name }}</strong></template
 					>
-					<template #resourceHomeProjectName>{{ props.data.resource.homeProject?.name }}</template>
+					<template #resourceHomeProjectName>{{ processedName }}</template>
 					<template #resourceType>{{ props.data.resourceType }}</template>
 				</i18n-t>
 			</N8nText>
@@ -71,7 +78,7 @@ const next = () => {
 					@update:model-value="updateProject"
 				>
 					<N8nOption
-						v-for="p in projectsStore.teamProjects"
+						v-for="p in availableProjects"
 						:key="p.id"
 						:value="p.id"
 						:label="p.name"
diff --git a/packages/editor-ui/src/components/Projects/ProjectSettings.vue b/packages/editor-ui/src/components/Projects/ProjectSettings.vue
index 514ab2e27cdb1..42c99baca745d 100644
--- a/packages/editor-ui/src/components/Projects/ProjectSettings.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectSettings.vue
@@ -255,9 +255,9 @@ onBeforeMount(async () => {
 		</div>
 		<form @submit.prevent="onSubmit">
 			<fieldset>
-				<label for="name">{{ locale.baseText('projects.settings.name') }}</label>
+				<label for="projectName">{{ locale.baseText('projects.settings.name') }}</label>
 				<N8nInput
-					id="name"
+					id="projectName"
 					ref="nameInput"
 					v-model="formData.name"
 					type="text"

From cc1a96160343c3cf2671bf4640f70301d76cf85f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 13:42:30 +0200
Subject: [PATCH 12/20] test: Add e2e test to move workflow from home project

---
 cypress/composables/projects.ts               |   6 +-
 cypress/e2e/39-projects.cy.ts                 | 182 ++++++++++++++++--
 cypress/pages/workflows.ts                    |   2 +
 .../ProjectMoveResourceConfirmModal.vue       |  10 +-
 .../Projects/ProjectMoveResourceModal.vue     |   1 +
 5 files changed, 185 insertions(+), 16 deletions(-)

diff --git a/cypress/composables/projects.ts b/cypress/composables/projects.ts
index dd25c3f20c839..e6aaef0117f73 100644
--- a/cypress/composables/projects.ts
+++ b/cypress/composables/projects.ts
@@ -11,8 +11,12 @@ export const getProjectSettingsCancelButton = () =>
 export const getProjectSettingsDeleteButton = () =>
 	cy.getByTestId('project-settings-delete-button');
 export const getProjectMembersSelect = () => cy.getByTestId('project-members-select');
-
 export const addProjectMember = (email: string) => {
 	getProjectMembersSelect().click();
 	getProjectMembersSelect().get('.el-select-dropdown__item').contains(email.toLowerCase()).click();
 };
+export const getProjectNameInput = () => cy.get('#projectName');
+export const getResourceMoveModal = () => cy.getByTestId('project-move-resource-modal');
+export const getResourceMoveConfirmModal = () =>
+	cy.getByTestId('project-move-resource-confirm-modal');
+export const getProjectMoveSelect = () => cy.getByTestId('project-move-resource-modal-select');
diff --git a/cypress/e2e/39-projects.cy.ts b/cypress/e2e/39-projects.cy.ts
index 21685dd58cf6c..69d9653f51e9f 100644
--- a/cypress/e2e/39-projects.cy.ts
+++ b/cypress/e2e/39-projects.cy.ts
@@ -1,4 +1,10 @@
-import { INSTANCE_ADMIN, INSTANCE_MEMBERS, INSTANCE_OWNER, MANUAL_TRIGGER_NODE_NAME, NOTION_NODE_NAME } from '../constants';
+import {
+	INSTANCE_ADMIN,
+	INSTANCE_MEMBERS,
+	INSTANCE_OWNER,
+	MANUAL_TRIGGER_NODE_NAME,
+	NOTION_NODE_NAME,
+} from '../constants';
 import {
 	WorkflowsPage,
 	WorkflowPage,
@@ -260,7 +266,9 @@ describe('Projects', () => {
 			credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
 			credentialsModal.getters.newCredentialTypeOption('Notion API').click();
 			credentialsModal.getters.newCredentialTypeButton().click();
-			credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+			credentialsModal.getters
+				.connectionParameter('Internal Integration Secret')
+				.type('1234567890');
 			credentialsModal.actions.setName('Notion account project 1');
 
 			cy.intercept('POST', '/rest/credentials').as('credentialSave');
@@ -283,7 +291,9 @@ describe('Projects', () => {
 			credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
 			credentialsModal.getters.newCredentialTypeOption('Notion API').click();
 			credentialsModal.getters.newCredentialTypeButton().click();
-			credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+			credentialsModal.getters
+				.connectionParameter('Internal Integration Secret')
+				.type('1234567890');
 			credentialsModal.actions.setName('Notion account project 2');
 
 			credentialsModal.actions.save();
@@ -303,12 +313,14 @@ describe('Projects', () => {
 			credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
 			credentialsModal.getters.newCredentialTypeOption('Notion API').click();
 			credentialsModal.getters.newCredentialTypeButton().click();
-			credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+			credentialsModal.getters
+				.connectionParameter('Internal Integration Secret')
+				.type('1234567890');
 			credentialsModal.actions.setName('Notion account personal project');
 
 			cy.intercept('POST', '/rest/credentials').as('credentialSave');
 			credentialsModal.actions.save();
-			cy.wait('@credentialSave')
+			cy.wait('@credentialSave');
 			credentialsModal.actions.close();
 
 			// Go to the first project and create a workflow
@@ -318,14 +330,22 @@ describe('Projects', () => {
 			workflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
 			workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account project 1');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account project 1');
 			ndv.getters.backToCanvas().click();
 			workflowPage.actions.saveWorkflowOnButtonClick();
 
 			cy.reload();
 			workflowPage.getters.canvasNodeByName(NOTION_NODE_NAME).should('be.visible').dblclick();
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account project 1');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account project 1');
 			ndv.getters.backToCanvas().click();
 
 			// Go to the second project and create a workflow
@@ -335,14 +355,22 @@ describe('Projects', () => {
 			workflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
 			workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account project 2');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account project 2');
 			ndv.getters.backToCanvas().click();
 			workflowPage.actions.saveWorkflowOnButtonClick();
 
 			cy.reload();
 			workflowPage.getters.canvasNodeByName(NOTION_NODE_NAME).should('be.visible').dblclick();
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account project 2');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account project 2');
 			ndv.getters.backToCanvas().click();
 
 			// Go to the Home project and create a workflow
@@ -356,15 +384,147 @@ describe('Projects', () => {
 			workflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
 			workflowPage.actions.addNodeToCanvas(NOTION_NODE_NAME, true, true);
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account personal project');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account personal project');
 			ndv.getters.backToCanvas().click();
 			workflowPage.actions.saveWorkflowOnButtonClick();
 
 			cy.reload();
 			workflowPage.getters.canvasNodeByName(NOTION_NODE_NAME).should('be.visible').dblclick();
 			workflowPage.getters.nodeCredentialsSelect().first().click();
-			getVisibleSelect().find('li').should('have.length', 2).first().should('contain.text', 'Notion account personal project');
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Notion account personal project');
+		});
 
+		it.only('should move resources between projects', () => {
+			cy.signin(INSTANCE_OWNER);
+			cy.visit(workflowsPage.url);
+
+			// Create a workflow and a credential in the Home project
+			workflowsPage.getters.workflowCards().should('not.have.length');
+			workflowsPage.getters.newWorkflowButtonCard().click();
+			createWorkflow('Test_workflow_1.json', 'Workflow in Home project');
+
+			projects.getHomeButton().click();
+			projects.getProjectTabCredentials().should('be.visible').click();
+			credentialsPage.getters.emptyListCreateCredentialButton().click();
+			createCredential('Credential in Home project');
+
+			// Create a project and add a credential and a workflow to it
+			createProject('Project 1');
+			projects.getProjectTabCredentials().click();
+			credentialsPage.getters.emptyListCreateCredentialButton().click();
+			createCredential('Credential in Project 1');
+
+			projects.getProjectTabWorkflows().click();
+			workflowsPage.getters.newWorkflowButtonCard().click();
+			createWorkflow('Test_workflow_1.json', 'Workflow in Project 1');
+
+			// Create another project and add a credential and a workflow to it
+			createProject('Project 2');
+			projects.getProjectTabCredentials().click();
+			credentialsPage.getters.emptyListCreateCredentialButton().click();
+			createCredential('Credential in Project 2');
+
+			projects.getProjectTabWorkflows().click();
+			workflowsPage.getters.newWorkflowButtonCard().click();
+			createWorkflow('Test_workflow_1.json', 'Workflow in Project 2');
+
+			// Move the workflow owned by me from Home to Project 1
+			projects.getHomeButton().click();
+			workflowsPage.getters
+				.workflowCards()
+				.should('have.length', 3)
+				.filter(':contains("Owned by me")')
+				.should('exist');
+			workflowsPage.getters.workflowCardActions('Workflow in Home project').click();
+			workflowsPage.getters.workflowMoveButton().click();
+
+			projects
+				.getResourceMoveModal()
+				.should('be.visible')
+				.find('button:contains("Next")')
+				.should('be.disabled');
+			projects.getProjectMoveSelect().click();
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 2)
+				.first()
+				.should('contain.text', 'Project 1')
+				.click();
+			projects.getResourceMoveModal().find('button:contains("Next")').click();
+
+			projects
+				.getResourceMoveConfirmModal()
+				.should('be.visible')
+				.find('button:contains("Confirm")')
+				.should('be.disabled');
+
+			projects
+				.getResourceMoveConfirmModal()
+				.find('input[type="checkbox"]')
+				.first()
+				.parents('label')
+				.click();
+			projects
+				.getResourceMoveConfirmModal()
+				.find('button:contains("Confirm")')
+				.should('be.disabled');
+			projects
+				.getResourceMoveConfirmModal()
+				.find('input[type="checkbox"]')
+				.last()
+				.parents('label')
+				.click();
+			projects
+				.getResourceMoveConfirmModal()
+				.find('button:contains("Confirm")')
+				.should('not.be.disabled')
+				.click();
+
+			workflowsPage.getters
+				.workflowCards()
+				.should('have.length', 3)
+				.filter(':contains("Owned by me")')
+				.should('not.exist');
 		});
 	});
 });
+
+function createProject(name: string) {
+	projects.getAddProjectButton().should('be.visible').click();
+	projects
+		.getProjectNameInput()
+		.should('be.visible')
+		.should('be.focused')
+		.should('have.value', 'My project')
+		.clear()
+		.type(name);
+	projects.getProjectSettingsSaveButton().click();
+}
+
+function createWorkflow(fixtureKey: string, name: string) {
+	workflowPage.getters
+		.workflowImportInput()
+		.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
+	workflowPage.actions.setWorkflowName(name);
+	workflowPage.getters.saveButton().should('contain', 'Saved');
+	workflowPage.actions.zoomToFit();
+}
+
+function createCredential(name: string) {
+	credentialsModal.getters.newCredentialModal().should('be.visible');
+	credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
+	credentialsModal.getters.newCredentialTypeOption('Notion API').click();
+	credentialsModal.getters.newCredentialTypeButton().click();
+	credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+	credentialsModal.actions.setName(name);
+	credentialsModal.actions.save();
+	credentialsModal.actions.close();
+}
diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts
index 370a2ae0e3e71..2401717a77226 100644
--- a/cypress/pages/workflows.ts
+++ b/cypress/pages/workflows.ts
@@ -23,6 +23,8 @@ export class WorkflowsPage extends BasePage {
 			this.getters.workflowCard(workflowName).findChildByTestId('workflow-card-actions'),
 		workflowDeleteButton: () =>
 			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete'),
+		workflowMoveButton: () =>
+			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Move'),
 		workflowFilterButton: () => cy.getByTestId('resources-list-filters-trigger').filter(':visible'),
 		workflowTagsDropdown: () => cy.getByTestId('tags-dropdown'),
 		workflowTagItem: (tag: string) => cy.getByTestId('tag').contains(tag),
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index 7d174659ce3be..a14ae8ab4cc28 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -5,7 +5,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useUIStore } from '@/stores/ui.store';
 import { useProjectsStore } from '@/stores/projects.store';
 import Modal from '@/components/Modal.vue';
-import { N8nCheckbox } from 'n8n-design-system';
+import { N8nCheckbox, N8nText } from 'n8n-design-system';
 import { useToast } from '@/composables/useToast';
 
 const props = defineProps<{
@@ -66,9 +66,11 @@ const confirm = async () => {
 		<template #content>
 			<N8nCheckbox v-model="checks[0]" :label="moveResourceLabel" />
 			<N8nCheckbox v-model="checks[1]">
-				<i18n-t keypath="projects.move.resource.confirm.modal.label">
-					<template #resourceType>{{ props.data.resourceType }}</template>
-				</i18n-t>
+				<N8nText>
+					<i18n-t keypath="projects.move.resource.confirm.modal.label">
+						<template #resourceType>{{ props.data.resourceType }}</template>
+					</i18n-t>
+				</N8nText>
 			</N8nCheckbox>
 		</template>
 		<template #footer>
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
index a51c7edebc913..c8a8934f5f4ea 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -75,6 +75,7 @@ const next = () => {
 					class="mr-2xs"
 					:model-value="projectId"
 					size="small"
+					data-test-id="project-move-resource-modal-select"
 					@update:model-value="updateProject"
 				>
 					<N8nOption

From 01022955a56e17076e8ee380113f0d380b788ae7 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jun 2024 13:57:48 +0200
Subject: [PATCH 13/20] fix(editor): Update translation

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index c0e29acd9d844..f736f67057ef3 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2493,8 +2493,8 @@
 	"projects.move.resource.confirm.modal.title": "Please confirm the following",
 	"projects.move.resource.confirm.modal.button.confirm": "Confirm move to new project",
 	"projects.move.workflow.confirm.modal.label": "This workflow may stop working if the credentials used with it do not exist in the project its being moved to",
-	"projects.move.credential.confirm.modal.label": "This credential may cause workflows using it to stop working",
-	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed.",
+	"projects.move.credential.confirm.modal.label": "Any workflows currently using this credential will stop working once this credential has been moved",
+	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed",
 	"projects.move.resource.error.title": "Error moving {resourceName} {resourceType}",
 	"mfa.setup.invalidAuthenticatorCode": "{code} is not a valid number",
 	"mfa.setup.invalidCode": "Two-factor code failed. Please try again.",

From 5953ff5cc496f18fa30558b5bae4a4baf0754a7a Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 10 Jun 2024 10:40:02 +0200
Subject: [PATCH 14/20] fix(editor): Add e2e test for credential move

---
 cypress/e2e/39-projects.cy.ts                 | 56 ++++++++++++++++++-
 cypress/pages/credentials.ts                  |  2 +
 .../src/components/CredentialCard.vue         |  8 ++-
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/39-projects.cy.ts b/cypress/e2e/39-projects.cy.ts
index 69d9653f51e9f..c16547612c21c 100644
--- a/cypress/e2e/39-projects.cy.ts
+++ b/cypress/e2e/39-projects.cy.ts
@@ -402,7 +402,7 @@ describe('Projects', () => {
 				.should('contain.text', 'Notion account personal project');
 		});
 
-		it.only('should move resources between projects', () => {
+		it('should move resources between projects', () => {
 			cy.signin(INSTANCE_OWNER);
 			cy.visit(workflowsPage.url);
 
@@ -493,6 +493,60 @@ describe('Projects', () => {
 				.should('have.length', 3)
 				.filter(':contains("Owned by me")')
 				.should('not.exist');
+
+			// Move the credential from Project 1 to Project 2
+			projects.getMenuItems().first().click();
+			workflowsPage.getters.workflowCards().should('have.length', 2);
+			projects.getProjectTabCredentials().click();
+			credentialsPage.getters.credentialCards().should('have.length', 1);
+			credentialsPage.getters.credentialCardActions('Credential in Project 1').click();
+			credentialsPage.getters.credentialMoveButton().click();
+
+			projects
+				.getResourceMoveModal()
+				.should('be.visible')
+				.find('button:contains("Next")')
+				.should('be.disabled');
+			projects.getProjectMoveSelect().click();
+			getVisibleSelect()
+				.find('li')
+				.should('have.length', 1)
+				.first()
+				.should('contain.text', 'Project 2')
+				.click();
+			projects.getResourceMoveModal().find('button:contains("Next")').click();
+
+			projects
+				.getResourceMoveConfirmModal()
+				.should('be.visible')
+				.find('button:contains("Confirm")')
+				.should('be.disabled');
+
+			projects
+				.getResourceMoveConfirmModal()
+				.find('input[type="checkbox"]')
+				.first()
+				.parents('label')
+				.click();
+			projects
+				.getResourceMoveConfirmModal()
+				.find('button:contains("Confirm")')
+				.should('be.disabled');
+			projects
+				.getResourceMoveConfirmModal()
+				.find('input[type="checkbox"]')
+				.last()
+				.parents('label')
+				.click();
+			projects
+				.getResourceMoveConfirmModal()
+				.find('button:contains("Confirm")')
+				.should('not.be.disabled')
+				.click();
+			credentialsPage.getters.credentialCards().should('not.have.length');
+			projects.getMenuItems().last().click();
+			projects.getProjectTabCredentials().click();
+			credentialsPage.getters.credentialCards().should('have.length', 2);
 		});
 	});
 });
diff --git a/cypress/pages/credentials.ts b/cypress/pages/credentials.ts
index 7ae2d0f3b415c..a49667080a3fa 100644
--- a/cypress/pages/credentials.ts
+++ b/cypress/pages/credentials.ts
@@ -17,6 +17,8 @@ export class CredentialsPage extends BasePage {
 			this.getters.credentialCard(credentialName).findChildByTestId('credential-card-actions'),
 		credentialDeleteButton: () =>
 			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete'),
+		credentialMoveButton: () =>
+			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Move'),
 		sort: () => cy.getByTestId('resources-list-sort').first(),
 		sortOption: (label: string) =>
 			cy.getByTestId('resources-list-sort-item').contains(label).first(),
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index ea28c653ba828..42fa5a1c8f078 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -151,7 +151,13 @@ function moveResource() {
 		<template #append>
 			<div :class="$style.cardActions" @click.stop>
 				<ProjectCardBadge :resource="data" :personal-project="projectsStore.personalProject" />
-				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" @click.stop />
+				<n8n-action-toggle
+					data-test-id="credential-card-actions"
+					:actions="actions"
+					theme="dark"
+					@action="onAction"
+					@click.stop
+				/>
 			</div>
 		</template>
 	</n8n-card>

From 76a58358c437ff32ee58e200e3de84fa1a5697f7 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 10 Jun 2024 16:39:29 +0200
Subject: [PATCH 15/20] fix(editor): Apply review requests

---
 cypress/composables/projects.ts               | 37 ++++++++++++++
 cypress/e2e/39-projects.cy.ts                 | 48 ++++---------------
 .../src/components/CredentialCard.vue         |  1 -
 packages/editor-ui/src/permissions.ts         |  7 +--
 4 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/cypress/composables/projects.ts b/cypress/composables/projects.ts
index e6aaef0117f73..14667cc32bc50 100644
--- a/cypress/composables/projects.ts
+++ b/cypress/composables/projects.ts
@@ -1,3 +1,8 @@
+import { CredentialsModal, WorkflowPage } from '../pages';
+
+const workflowPage = new WorkflowPage();
+const credentialsModal = new CredentialsModal();
+
 export const getHomeButton = () => cy.getByTestId('project-home-menu-item');
 export const getMenuItems = () => cy.getByTestId('project-menu-item');
 export const getAddProjectButton = () => cy.getByTestId('add-project-menu-item');
@@ -20,3 +25,35 @@ export const getResourceMoveModal = () => cy.getByTestId('project-move-resource-
 export const getResourceMoveConfirmModal = () =>
 	cy.getByTestId('project-move-resource-confirm-modal');
 export const getProjectMoveSelect = () => cy.getByTestId('project-move-resource-modal-select');
+
+export function createProject(name: string) {
+	getAddProjectButton().should('be.visible').click();
+
+	getProjectNameInput()
+		.should('be.visible')
+		.should('be.focused')
+		.should('have.value', 'My project')
+		.clear()
+		.type(name);
+	getProjectSettingsSaveButton().click();
+}
+
+export function createWorkflow(fixtureKey: string, name: string) {
+	workflowPage.getters
+		.workflowImportInput()
+		.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
+	workflowPage.actions.setWorkflowName(name);
+	workflowPage.getters.saveButton().should('contain', 'Saved');
+	workflowPage.actions.zoomToFit();
+}
+
+export function createCredential(name: string) {
+	credentialsModal.getters.newCredentialModal().should('be.visible');
+	credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
+	credentialsModal.getters.newCredentialTypeOption('Notion API').click();
+	credentialsModal.getters.newCredentialTypeButton().click();
+	credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
+	credentialsModal.actions.setName(name);
+	credentialsModal.actions.save();
+	credentialsModal.actions.close();
+}
diff --git a/cypress/e2e/39-projects.cy.ts b/cypress/e2e/39-projects.cy.ts
index c16547612c21c..6cec66d1cd44f 100644
--- a/cypress/e2e/39-projects.cy.ts
+++ b/cypress/e2e/39-projects.cy.ts
@@ -409,32 +409,32 @@ describe('Projects', () => {
 			// Create a workflow and a credential in the Home project
 			workflowsPage.getters.workflowCards().should('not.have.length');
 			workflowsPage.getters.newWorkflowButtonCard().click();
-			createWorkflow('Test_workflow_1.json', 'Workflow in Home project');
+			projects.createWorkflow('Test_workflow_1.json', 'Workflow in Home project');
 
 			projects.getHomeButton().click();
 			projects.getProjectTabCredentials().should('be.visible').click();
 			credentialsPage.getters.emptyListCreateCredentialButton().click();
-			createCredential('Credential in Home project');
+			projects.createCredential('Credential in Home project');
 
 			// Create a project and add a credential and a workflow to it
-			createProject('Project 1');
+			projects.createProject('Project 1');
 			projects.getProjectTabCredentials().click();
 			credentialsPage.getters.emptyListCreateCredentialButton().click();
-			createCredential('Credential in Project 1');
+			projects.createCredential('Credential in Project 1');
 
 			projects.getProjectTabWorkflows().click();
 			workflowsPage.getters.newWorkflowButtonCard().click();
-			createWorkflow('Test_workflow_1.json', 'Workflow in Project 1');
+			projects.createWorkflow('Test_workflow_1.json', 'Workflow in Project 1');
 
 			// Create another project and add a credential and a workflow to it
-			createProject('Project 2');
+			projects.createProject('Project 2');
 			projects.getProjectTabCredentials().click();
 			credentialsPage.getters.emptyListCreateCredentialButton().click();
-			createCredential('Credential in Project 2');
+			projects.createCredential('Credential in Project 2');
 
 			projects.getProjectTabWorkflows().click();
 			workflowsPage.getters.newWorkflowButtonCard().click();
-			createWorkflow('Test_workflow_1.json', 'Workflow in Project 2');
+			projects.createWorkflow('Test_workflow_1.json', 'Workflow in Project 2');
 
 			// Move the workflow owned by me from Home to Project 1
 			projects.getHomeButton().click();
@@ -550,35 +550,3 @@ describe('Projects', () => {
 		});
 	});
 });
-
-function createProject(name: string) {
-	projects.getAddProjectButton().should('be.visible').click();
-	projects
-		.getProjectNameInput()
-		.should('be.visible')
-		.should('be.focused')
-		.should('have.value', 'My project')
-		.clear()
-		.type(name);
-	projects.getProjectSettingsSaveButton().click();
-}
-
-function createWorkflow(fixtureKey: string, name: string) {
-	workflowPage.getters
-		.workflowImportInput()
-		.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
-	workflowPage.actions.setWorkflowName(name);
-	workflowPage.getters.saveButton().should('contain', 'Saved');
-	workflowPage.actions.zoomToFit();
-}
-
-function createCredential(name: string) {
-	credentialsModal.getters.newCredentialModal().should('be.visible');
-	credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
-	credentialsModal.getters.newCredentialTypeOption('Notion API').click();
-	credentialsModal.getters.newCredentialTypeButton().click();
-	credentialsModal.getters.connectionParameter('Internal Integration Secret').type('1234567890');
-	credentialsModal.actions.setName(name);
-	credentialsModal.actions.save();
-	credentialsModal.actions.close();
-}
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index 42fa5a1c8f078..bac96df489a0a 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -156,7 +156,6 @@ function moveResource() {
 					:actions="actions"
 					theme="dark"
 					@action="onAction"
-					@click.stop
 				/>
 			</div>
 		</template>
diff --git a/packages/editor-ui/src/permissions.ts b/packages/editor-ui/src/permissions.ts
index 3a28d2f3a6501..38e27fa33f73d 100644
--- a/packages/editor-ui/src/permissions.ts
+++ b/packages/editor-ui/src/permissions.ts
@@ -13,12 +13,9 @@ export type PermissionsMap<T> = {
 	[K in ExtractAfterColon<T>]: boolean;
 };
 
-const mapScopesToPermissions = <T extends Scope>(
-	scopes: T[],
-	scopeSet: Set<T>,
-): PermissionsMap<T> =>
+const mapScopesToPermissions = <T extends Scope>(scopes: T[], scopeSet: Set<T>) =>
 	scopes.reduce(
-		(permissions: PermissionsMap<T>, scope: T) => ({
+		(permissions, scope) => ({
 			...permissions,
 			[scope.split(':')[1]]: scopeSet.has(scope),
 		}),

From cf39c1758a3c7454bdc3bbeddb7adce6a6efc320 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 09:25:32 +0200
Subject: [PATCH 16/20] fix(editor): Roll back setup script implementation
 because of causing a ton of type issues

---
 .../editor-ui/src/components/ModalRoot.vue    | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index 436f31e8108c8..d9ed7f4137bac 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,23 +1,34 @@
-<script setup lang="ts">
-import { useUIStore } from '@/stores/ui.store';
-
-const props = defineProps<{
-	name: string;
-	keepAlive?: boolean;
-}>();
-
-const uiStore = useUIStore();
-</script>
-
 <template>
-	<div v-if="uiStore.isModalOpen(props.name) || props.keepAlive">
+	<div v-if="uiStore.isModalOpen(name) || keepAlive">
 		<slot
-			:modal-name="props.name"
-			:active="uiStore.isModalActive(props.name)"
-			:open="uiStore.isModalOpen(props.name)"
-			:active-id="uiStore.getModalActiveId(props.name)"
-			:mode="uiStore.getModalMode(props.name)"
-			:data="uiStore.getModalData(props.name)"
+			:modal-name="name"
+			:active="uiStore.isModalActive(name)"
+			:open="uiStore.isModalOpen(name)"
+			:active-id="uiStore.getModalActiveId(name)"
+			:mode="uiStore.getModalMode(name)"
+			:data="uiStore.getModalData(name)"
 		></slot>
 	</div>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useUIStore } from '@/stores/ui.store';
+import { mapStores } from 'pinia';
+
+export default defineComponent({
+	name: 'ModalRoot',
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		keepAlive: {
+			type: Boolean,
+		},
+	},
+	computed: {
+		...mapStores(useUIStore),
+	},
+});
+</script>

From 2294838594131cb2fb7bc9f4cfdfa7d811b12efb Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 11:05:05 +0200
Subject: [PATCH 17/20] fix(editor): Fix modals after conflict

---
 packages/editor-ui/src/components/Modals.vue | 73 --------------------
 1 file changed, 73 deletions(-)

diff --git a/packages/editor-ui/src/components/Modals.vue b/packages/editor-ui/src/components/Modals.vue
index 46a410976fe63..046572c5e5083 100644
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -258,76 +258,3 @@ import ProjectMoveResourceConfirmModal from '@/components/Projects/ProjectMoveRe
 		</ModalRoot>
 	</div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'Modals',
-	components: {
-		AboutModal,
-		ActivationModal,
-		ChatEmbedModal,
-		CommunityPackageInstallModal,
-		CommunityPackageManageConfirmModal,
-		ContactPromptModal,
-		ChangePasswordModal,
-		CredentialEdit,
-		CredentialsSelectModal,
-		DeleteUserModal,
-		DuplicateWorkflowDialog,
-		InviteUsersModal,
-		ModalRoot,
-		OnboardingCallSignupModal,
-		PersonalizationModal,
-		TagsManager,
-		UpdatesPanel,
-		NpsSurvey,
-		WorkflowLMChat,
-		WorkflowSettings,
-		WorkflowShareModal,
-		ImportCurlModal,
-		GenerateCurlModal,
-		EventDestinationSettingsModal,
-		SourceControlPushModal,
-		SourceControlPullModal,
-		ExternalSecretsProviderModal,
-		DebugPaywallModal,
-		MfaSetupModal,
-		WorkflowHistoryVersionRestoreModal,
-		SetupWorkflowCredentialsModal,
-	},
-	data: () => ({
-		CHAT_EMBED_MODAL_KEY,
-		COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-		COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
-		CONTACT_PROMPT_MODAL_KEY,
-		CREDENTIAL_EDIT_MODAL_KEY,
-		CREDENTIAL_SELECT_MODAL_KEY,
-		ABOUT_MODAL_KEY,
-		CHANGE_PASSWORD_MODAL_KEY,
-		DELETE_USER_MODAL_KEY,
-		DUPLICATE_MODAL_KEY,
-		ONBOARDING_CALL_SIGNUP_MODAL_KEY,
-		PERSONALIZATION_MODAL_KEY,
-		INVITE_USER_MODAL_KEY,
-		TAGS_MANAGER_MODAL_KEY,
-		VERSIONS_MODAL_KEY,
-		WORKFLOW_LM_CHAT_MODAL_KEY,
-		WORKFLOW_SETTINGS_MODAL_KEY,
-		WORKFLOW_SHARE_MODAL_KEY,
-		VALUE_SURVEY_MODAL_KEY,
-		WORKFLOW_ACTIVE_MODAL_KEY,
-		IMPORT_CURL_MODAL_KEY,
-		GENERATE_CURL_MODAL_KEY,
-		LOG_STREAM_MODAL_KEY,
-		SOURCE_CONTROL_PUSH_MODAL_KEY,
-		SOURCE_CONTROL_PULL_MODAL_KEY,
-		EXTERNAL_SECRETS_PROVIDER_MODAL_KEY,
-		DEBUG_PAYWALL_MODAL_KEY,
-		MFA_SETUP_MODAL_KEY,
-		WORKFLOW_HISTORY_VERSION_RESTORE,
-		SETUP_CREDENTIALS_MODAL_KEY,
-	}),
-});
-</script>

From 4341581132e6c0fd1fb8914a88f889a4b668931c Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 11:43:27 +0200
Subject: [PATCH 18/20] fix(editor): Use sharedWithProjects length in label

---
 .../Projects/ProjectMoveResourceConfirmModal.vue          | 8 ++++++++
 packages/editor-ui/src/plugins/i18n/locales/en.json       | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
index a14ae8ab4cc28..962dbaeef16f9 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceConfirmModal.vue
@@ -69,6 +69,14 @@ const confirm = async () => {
 				<N8nText>
 					<i18n-t keypath="projects.move.resource.confirm.modal.label">
 						<template #resourceType>{{ props.data.resourceType }}</template>
+						<template #numberOfUsers>{{
+							i18n.baseText('projects.move.resource.confirm.modal.numberOfUsers', {
+								interpolate: {
+									numberOfUsers: props.data.resource.sharedWithProjects?.length ?? 0,
+								},
+								adjustToNumber: props.data.resource.sharedWithProjects?.length,
+							})
+						}}</template>
 					</i18n-t>
 				</N8nText>
 			</N8nCheckbox>
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 166345bea0a55..d7698f0df2f97 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2504,7 +2504,8 @@
 	"projects.move.resource.confirm.modal.button.confirm": "Confirm move to new project",
 	"projects.move.workflow.confirm.modal.label": "This workflow may stop working if the credentials used with it do not exist in the project its being moved to",
 	"projects.move.credential.confirm.modal.label": "Any workflows currently using this credential will stop working once this credential has been moved",
-	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed",
+	"projects.move.resource.confirm.modal.label": "Any individual sharing currently associated with this {resourceType} will be removed. (currently shared with {numberOfUsers})",
+	"projects.move.resource.confirm.modal.numberOfUsers": "{numberOfUsers} user | {numberOfUsers} users",
 	"projects.move.resource.error.title": "Error moving {resourceName} {resourceType}",
 	"mfa.setup.invalidAuthenticatorCode": "{code} is not a valid number",
 	"mfa.setup.invalidCode": "Two-factor code failed. Please try again.",

From de015979e8d8eef3503c53b36e4561d6f37b2748 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 11:50:35 +0200
Subject: [PATCH 19/20] fix(editor): Fix e2e fixture path

---
 cypress/composables/projects.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/cypress/composables/projects.ts b/cypress/composables/projects.ts
index 14667cc32bc50..eb8f8b1eb4f12 100644
--- a/cypress/composables/projects.ts
+++ b/cypress/composables/projects.ts
@@ -39,9 +39,7 @@ export function createProject(name: string) {
 }
 
 export function createWorkflow(fixtureKey: string, name: string) {
-	workflowPage.getters
-		.workflowImportInput()
-		.selectFile(`cypress/fixtures/${fixtureKey}`, { force: true });
+	workflowPage.getters.workflowImportInput().selectFile(`fixtures/${fixtureKey}`, { force: true });
 	workflowPage.actions.setWorkflowName(name);
 	workflowPage.getters.saveButton().should('contain', 'Saved');
 	workflowPage.actions.zoomToFit();

From 52da916407bb84964aebffe60affd0b2d6d8117d Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 12:55:59 +0200
Subject: [PATCH 20/20] fix(editor): Add scopes to resource list layout
 component

---
 .../editor-ui/src/components/layouts/ResourcesListLayout.vue    | 2 ++
 packages/editor-ui/src/views/CredentialsView.vue                | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 5305935b7c947..249cf057097ac 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -159,6 +159,7 @@ import { useRoute } from 'vue-router';
 
 // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
 import type { BaseTextKey } from '@/plugins/i18n';
+import type { Scope } from '@n8n/permissions';
 
 export type IResource = {
 	id: string;
@@ -167,6 +168,7 @@ export type IResource = {
 	updatedAt?: string;
 	createdAt?: string;
 	homeProject?: ProjectSharingData;
+	scopes?: Scope[];
 };
 
 interface IFilters {
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index b2322f2226aab..fb4c6cdb4dd13 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -114,6 +114,8 @@ export default defineComponent({
 				value: '',
 				updatedAt: credential.updatedAt,
 				createdAt: credential.createdAt,
+				homeProject: credential.homeProject,
+				scopes: credential.scopes,
 			}));
 		},
 		allCredentialTypes(): ICredentialType[] {