refactor(editor): Refactor project utils splitName (no-changelog) (#10669)

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 ?? '');
+	const { name, email } = splitName(props.credential?.homeProject?.name ?? '');
-	return firstName || lastName ? `${firstName}${lastName ? ' ' + lastName : ''}` : email ?? '';
+	return name ?? email ?? '';
 });
 
 const credentialDataHomeProject = computed<ProjectSharingData | undefined>(() => {

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 ?? '');
+		const { name, email } = splitName(props.resource.homeProject?.name ?? '');
-		return (!firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`) ?? '';
+		return name ?? email ?? '';
 	}
 });
 const badgeIcon = computed(() => {

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 ?? '');
+	const { name, email } = splitName(props.data.resource.homeProject?.name ?? '');
-	return !firstName ? email : `${firstName}${lastName ? ' ' + lastName : ''}`;
+	return name ?? email;
 });
 const availableProjects = computed(() => {
 	return projectsStore.teamProjects.filter((p) => p.id !== props.data.resource.homeProject?.id);

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">

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) {
+			return name
-				if (lastName && email) {
+				? email
-					return `${firstName} ${lastName} (${email})`;
+					? `${name} (${email})`
-				} else {
+					: name
-					return firstName;
+				: email ?? i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
-				}
-			} else {
-				return i18n.baseText('credentialEdit.credentialSharing.info.sharee.fallback');
-			}
 		};
 	});
 

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
+				return name ? (email ? `${name} (${email})` : name) : email ?? fallback;
-					? `${firstName} ${lastName ?? ''} ${email ? `(${email})` : ''}`
-					: fallback;
 			};
 		},
 	},

packages/editor-ui/src/utils/projects.utils.test.ts

@@ -5,54 +5,71 @@ describe('splitName', () => {
 		[
 			'First Last <email@domain.com>',
 			{
-				firstName: 'First',
+				name: 'First Last',
-				lastName: 'Last',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'First Last Third <email@domain.com>',
 			{
-				firstName: 'First Last',
+				name: 'First Last Third',
-				lastName: 'Third',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'First Last Third Fourth <email@domain.com>',
 			{
-				firstName: 'First Last Third',
+				name: 'First Last Third Fourth',
-				lastName: '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,
+				name: undefined,
-				lastName: undefined,
 				email: 'email@domain.com',
 			},
 		],
 		[
 			' <email@domain.com>',
 			{
-				firstName: '',
+				name: undefined,
-				lastName: '',
 				email: 'email@domain.com',
 			},
 		],
 		[
 			'My project',
 			{
-				firstName: 'My',
+				name: 'My project',
-				lastName: '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) => {

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;
+	name?: string;
-	lastName?: string;
 	email?: string;
 } => {
-	const regex = /^(.+)?\s?<([^>]+)>$/;
+	const regex = /^(.*?)(?:\s*<([^>]+)>)?$/;
 	const match = projectName.match(regex);
-
+	const [, name, email] = match ?? [];
-	if (match) {
+	return { name: name.trim() || undefined, email };
-		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 };
-		}
-	}
 };
 
 export const enum ResourceType {