From e318a6323ad5300e9520f3b7ed226b82b4ffc33e Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 5 Sep 2024 09:17:46 +0200
Subject: [PATCH] refactor(editor): Refactor project utils `splitName`
 (no-changelog) (#10669)

---
 .../CredentialEdit/CredentialSharing.ee.vue   |  4 +-
 .../components/Projects/ProjectCardBadge.vue  |  4 +-
 .../Projects/ProjectMoveResourceModal.vue     |  4 +-
 .../Projects/ProjectSharingInfo.vue           | 11 ++++-
 .../editor-ui/src/stores/credentials.store.ts | 16 +++----
 .../src/stores/workflows.ee.store.ts          |  6 +--
 .../{__tests__ => }/projects.utils.test.ts    | 43 +++++++++++++------
 .../editor-ui/src/utils/projects.utils.ts     | 26 +++--------
 8 files changed, 59 insertions(+), 55 deletions(-)
 rename packages/editor-ui/src/utils/{__tests__ => }/projects.utils.test.ts (58%)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index 8caa52c015..1c2242195c 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -45,8 +45,8 @@ const isSharingEnabled = computed(
 	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
 );
 const credentialOwnerName = computed(() => {
-	const { firstName, lastName, email } = splitName(props.credential?.homeProject?.name ?? '');
-	return firstName || lastName ? `${firstName}${lastName ? ' ' + lastName : ''}` : email ?? '';
+	const { name, email } = splitName(props.credential?.homeProject?.name ?? '');
+	return name ?? email ?? '';
 });
 
 const credentialDataHomeProject = computed<ProjectSharingData | undefined>(() => {
diff --git a/packages/editor-ui/src/components/Projects/ProjectCardBadge.vue b/packages/editor-ui/src/components/Projects/ProjectCardBadge.vue
index 6bcd1aade7..e0ff41f5a8 100644
--- a/packages/editor-ui/src/components/Projects/ProjectCardBadge.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectCardBadge.vue
@@ -59,8 +59,8 @@ const badgeText = computed(() => {
 	) {
 		return i18n.baseText('generic.ownedByMe');
 	} else {
-		const { firstName, lastName, email } = splitName(props.resource.homeProject?.name ?? '');
-		return (!firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`) ?? '';
+		const { name, email } = splitName(props.resource.homeProject?.name ?? '');
+		return name ?? email ?? '';
 	}
 });
 const badgeIcon = computed(() => {
diff --git a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
index fab4d765c8..d115a18f39 100644
--- a/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue
@@ -26,8 +26,8 @@ const telemetry = useTelemetry();
 
 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 { name, email } = splitName(props.data.resource.homeProject?.name ?? '');
+	return name ?? email;
 });
 const availableProjects = computed(() => {
 	return projectsStore.teamProjects.filter((p) => p.id !== props.data.resource.homeProject?.id);
diff --git a/packages/editor-ui/src/components/Projects/ProjectSharingInfo.vue b/packages/editor-ui/src/components/Projects/ProjectSharingInfo.vue
index bf4133f7dd..c138b695db 100644
--- a/packages/editor-ui/src/components/Projects/ProjectSharingInfo.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectSharingInfo.vue
@@ -9,7 +9,16 @@ type Props = {
 
 const props = defineProps<Props>();
 
-const processedName = computed(() => splitName(props.project.name ?? ''));
+const processedName = computed(() => {
+	const { name, email } = splitName(props.project.name ?? '');
+	const nameArray = name?.split(' ');
+	const lastName = nameArray?.pop() ?? '';
+	return {
+		firstName: nameArray?.join(' ') ?? '',
+		lastName,
+		email,
+	};
+});
 </script>
 <template>
 	<div :class="$style.projectInfo" data-test-id="project-sharing-info">
diff --git a/packages/editor-ui/src/stores/credentials.store.ts b/packages/editor-ui/src/stores/credentials.store.ts
index 801559395c..663303572b 100644
--- a/packages/editor-ui/src/stores/credentials.store.ts
+++ b/packages/editor-ui/src/stores/credentials.store.ts
@@ -183,17 +183,13 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 
 	const getCredentialOwnerName = computed(() => {
 		return (credential: ICredentialsResponse | IUsedCredential | undefined): string => {
-			const { firstName, lastName, email } = splitName(credential?.homeProject?.name ?? '');
+			const { name, email } = splitName(credential?.homeProject?.name ?? '');
 
-			if (credential?.homeProject?.name) {
-				if (lastName && email) {
-					return `${firstName} ${lastName} (${email})`;
-				} else {
-					return firstName;
-				}
-			} else {
-				return i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
-			}
+			return name
+				? email
+					? `${name} (${email})`
+					: name
+				: email ?? i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
 		};
 	});
 
diff --git a/packages/editor-ui/src/stores/workflows.ee.store.ts b/packages/editor-ui/src/stores/workflows.ee.store.ts
index ae1c1b3a65..18bb81cdf2 100644
--- a/packages/editor-ui/src/stores/workflows.ee.store.ts
+++ b/packages/editor-ui/src/stores/workflows.ee.store.ts
@@ -19,11 +19,9 @@ export const useWorkflowsEEStore = defineStore(STORES.WORKFLOWS_EE, {
 				fallback = i18n.baseText('workflows.shareModal.info.sharee.fallback'),
 			): string => {
 				const workflow = useWorkflowsStore().getWorkflowById(workflowId);
-				const { firstName, lastName, email } = splitName(workflow?.homeProject?.name ?? '');
+				const { name, email } = splitName(workflow?.homeProject?.name ?? '');
 
-				return workflow?.homeProject?.name
-					? `${firstName} ${lastName ?? ''} ${email ? `(${email})` : ''}`
-					: fallback;
+				return name ? (email ? `${name} (${email})` : name) : email ?? fallback;
 			};
 		},
 	},
diff --git a/packages/editor-ui/src/utils/__tests__/projects.utils.test.ts b/packages/editor-ui/src/utils/projects.utils.test.ts
similarity index 58%
rename from packages/editor-ui/src/utils/__tests__/projects.utils.test.ts
rename to packages/editor-ui/src/utils/projects.utils.test.ts
index d0e455b3c3..2cfcc088a3 100644
--- a/packages/editor-ui/src/utils/__tests__/projects.utils.test.ts
+++ b/packages/editor-ui/src/utils/projects.utils.test.ts
@@ -5,54 +5,71 @@ describe('splitName', () => {
 		[
 			'First Last <email@domain.com>',
 			{
-				firstName: 'First',
-				lastName: 'Last',
+				name: 'First Last',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'First Last Third <email@domain.com>',
 			{
-				firstName: 'First Last',
-				lastName: 'Third',
+				name: 'First Last Third',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'First Last Third Fourth <email@domain.com>',
 			{
-				firstName: 'First Last Third',
-				lastName: 'Fourth',
+				name: 'First Last Third Fourth',
+				email: 'email@domain.com',
+			},
+		],
+		[
+			' First Last Third Fourth <email@domain.com>',
+			{
+				name: 'First Last Third Fourth',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'<email@domain.com>',
 			{
-				firstName: undefined,
-				lastName: undefined,
+				name: undefined,
 				email: 'email@domain.com',
 			},
 		],
 		[
 			' <email@domain.com>',
 			{
-				firstName: '',
-				lastName: '',
+				name: undefined,
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'My project',
 			{
-				firstName: 'My',
-				lastName: 'project',
+				name: 'My project',
+				email: undefined,
+			},
+		],
+		[
+			' My project ',
+			{
+				name: 'My project',
+				email: undefined,
 			},
 		],
 		[
 			'MyProject',
 			{
-				firstName: 'MyProject',
+				name: 'MyProject',
+				email: undefined,
+			},
+		],
+		[
+			undefined,
+			{
+				name: undefined,
+				email: undefined,
 			},
 		],
 	])('should split a name in the format "First Last <email@domain.com>"', (input, result) => {
diff --git a/packages/editor-ui/src/utils/projects.utils.ts b/packages/editor-ui/src/utils/projects.utils.ts
index 99aa8baf05..7b9c6295ab 100644
--- a/packages/editor-ui/src/utils/projects.utils.ts
+++ b/packages/editor-ui/src/utils/projects.utils.ts
@@ -1,30 +1,14 @@
 // Splits a project name into first name, last name, and email when it is in the format "First Last <email@domain.com>"
 export const splitName = (
-	projectName: string,
+	projectName = '',
 ): {
-	firstName: string;
-	lastName?: string;
+	name?: string;
 	email?: string;
 } => {
-	const regex = /^(.+)?\s?<([^>]+)>$/;
+	const regex = /^(.*?)(?:\s*<([^>]+)>)?$/;
 	const match = projectName.match(regex);
-
-	if (match) {
-		const [_, fullName, email] = match;
-		const nameParts = fullName?.trim().split(/\s+/);
-		const lastName = nameParts?.pop();
-		const firstName = nameParts?.join(' ');
-		return { firstName, lastName, email };
-	} else {
-		const nameParts = projectName.split(/\s+/) ?? [];
-		if (nameParts.length < 2) {
-			return { firstName: projectName };
-		} else {
-			const lastName = nameParts.pop();
-			const firstName = nameParts.join(' ');
-			return { firstName, lastName };
-		}
-	}
+	const [, name, email] = match ?? [];
+	return { name: name.trim() || undefined, email };
 };
 
 export const enum ResourceType {