From 46bbf09beacad12472d91786b91d845fe2afb26d Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 6 Aug 2024 15:31:03 +0200
Subject: [PATCH] fix(editor): Update design system Avatar component to show
 initials also when only firstName or lastName is given (#10308)

---
 .../src/components/N8nAvatar/Avatar.vue       | 15 ++++++-----
 .../N8nAvatar/__tests__/Avatar.test.ts        | 25 +++++++++++++++++++
 2 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nAvatar/__tests__/Avatar.test.ts

diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index f7993a84a0..348af6ed47 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -1,14 +1,14 @@
 <template>
 	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
 		<Avatar
-			v-if="firstName"
+			v-if="name"
 			:size="getSize(size)"
-			:name="firstName + ' ' + lastName"
+			:name="name"
 			variant="marble"
 			:colors="getColors(colors)"
 		/>
-		<div v-else :class="[$style.empty, $style[size]]"></div>
-		<span v-if="firstName" :class="$style.initials">{{ initials }}</span>
+		<span v-else :class="[$style.empty, $style[size]]" />
+		<span v-if="name" :class="$style.initials">{{ initials }}</span>
 	</span>
 </template>
 
@@ -38,7 +38,8 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 	],
 });
 
-const initials = computed(() => getInitials(`${props.firstName} ${props.lastName}`));
+const name = computed(() => `${props.firstName} ${props.lastName}`.trim());
+const initials = computed(() => getInitials(name.value));
 
 const getColors = (colors: string[]): string[] => {
 	const style = getComputedStyle(document.body);
@@ -62,6 +63,7 @@ const getSize = (size: string): number => sizes[size];
 }
 
 .empty {
+	display: block;
 	border-radius: 50%;
 	background-color: var(--color-foreground-dark);
 	opacity: 0.3;
@@ -72,7 +74,8 @@ const getSize = (size: string): number => sizes[size];
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-avatar-font);
-	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
+	text-shadow: 0 1px 6px rgba(25, 11, 9, 0.3);
+	text-transform: uppercase;
 }
 
 .small {
diff --git a/packages/design-system/src/components/N8nAvatar/__tests__/Avatar.test.ts b/packages/design-system/src/components/N8nAvatar/__tests__/Avatar.test.ts
new file mode 100644
index 0000000000..4fdeef6229
--- /dev/null
+++ b/packages/design-system/src/components/N8nAvatar/__tests__/Avatar.test.ts
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/vue';
+import N8nAvatar from '../Avatar.vue';
+
+describe('components', () => {
+	describe('N8nAlert', () => {
+		test.each([
+			['Firstname', 'Lastname', 'FL'],
+			['Firstname', undefined, 'Fi'],
+			[undefined, 'Lastname', 'La'],
+			[undefined, undefined, ''],
+			['', '', ''],
+		])('should render initials for name "%s %s" as %s', (firstName, lastName, initials) => {
+			const { container, getByText } = render(N8nAvatar, {
+				props: { firstName, lastName },
+			});
+
+			if (firstName || lastName) {
+				expect(container.querySelector('svg')).toBeVisible();
+				expect(getByText(initials)).toBeVisible();
+			} else {
+				expect(container.querySelector('svg')).not.toBeInTheDocument();
+			}
+		});
+	});
+});