From 2e9bd6739b5a510b6726bbe55dfe09267107e70f Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 31 May 2024 17:50:42 +0200
Subject: [PATCH] fix(editor): Show owner email in the owner badge if the
 resource owner is a pending user (#9560)

---
 .../projects/components/ProjectCardBadge.vue  |  4 +-
 .../__tests__/ProjectCardBadge.test.ts        | 59 +++++++++++++++++++
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-ui/src/features/projects/components/__tests__/ProjectCardBadge.test.ts

diff --git a/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue b/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
index 4f967891a..54560963e 100644
--- a/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
+++ b/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
@@ -23,8 +23,8 @@ const badgeText = computed(() => {
 	) {
 		return locale.baseText('generic.ownedByMe');
 	} else {
-		const { firstName, lastName } = splitName(props.resource.homeProject?.name ?? '');
-		return `${firstName}${lastName ? ' ' + lastName : ''}`;
+		const { firstName, lastName, email } = splitName(props.resource.homeProject?.name ?? '');
+		return !firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`;
 	}
 });
 
diff --git a/packages/editor-ui/src/features/projects/components/__tests__/ProjectCardBadge.test.ts b/packages/editor-ui/src/features/projects/components/__tests__/ProjectCardBadge.test.ts
new file mode 100644
index 000000000..20fcb938c
--- /dev/null
+++ b/packages/editor-ui/src/features/projects/components/__tests__/ProjectCardBadge.test.ts
@@ -0,0 +1,59 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import ProjectCardBadge from '@/features/projects/components/ProjectCardBadge.vue';
+
+const renderComponent = createComponentRenderer(ProjectCardBadge);
+
+describe('ProjectCardBadge', () => {
+	it('should show "Owned by me" badge if there is no homeProject', () => {
+		const { getByText } = renderComponent({
+			props: {
+				resource: {},
+				personalProject: {},
+			},
+		});
+
+		expect(getByText('Owned by me')).toBeVisible();
+	});
+
+	it('should show "Owned by me" badge if homeProject ID equals personalProject ID', () => {
+		const { getByText } = renderComponent({
+			props: {
+				resource: {
+					homeProject: {
+						id: '1',
+					},
+				},
+				personalProject: {
+					id: '1',
+				},
+			},
+		});
+
+		expect(getByText('Owned by me')).toBeVisible();
+	});
+
+	test.each([
+		['First Last <email@domain.com>', 'First Last'],
+		['First Last Third <email@domain.com>', 'First Last Third'],
+		['First Last Third Fourth <email@domain.com>', 'First Last Third Fourth'],
+		['<email@domain.com>', 'email@domain.com'],
+		[' <email@domain.com>', 'email@domain.com'],
+		['My project', 'My project'],
+		['MyProject', 'MyProject'],
+	])('should show the correct owner badge for project name: "%s"', (name, result) => {
+		const { getByText } = renderComponent({
+			props: {
+				resource: {
+					homeProject: {
+						id: '1',
+						name,
+					},
+				},
+				personalProject: {
+					id: '2',
+				},
+			},
+		});
+		expect(getByText(result)).toBeVisible();
+	});
+});