feat(editor): Add user info on relations to enhance design of project users list (#15420)

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.test.ts

@@ -0,0 +1,23 @@
+import N8nUserInfo from '.';
+import { createComponentRenderer } from '../../__tests__/render';
+
+const renderComponent = createComponentRenderer(N8nUserInfo);
+
+describe('UserInfo.vue', () => {
+	it('renders correctly for a pending user', () => {
+		const { getByText, queryByText, queryByTestId } = renderComponent({
+			props: {
+				isPendingUser: true,
+				email: 'email@example.com',
+				firstName: 'John',
+				lastName: 'Doe',
+			},
+		});
+
+		expect(queryByText('John Doe')).not.toBeInTheDocument();
+		expect(queryByTestId('user-email')).not.toBeInTheDocument(); // Regular email element is not shown
+
+		expect(getByText('email@example.com')).toBeInTheDocument();
+		expect(getByText('Pending')).toBeInTheDocument();
+	});
+});

packages/frontend/editor-ui/src/views/ProjectSettings.vue

@@ -275,6 +275,19 @@ watch(
 	{ immediate: true },
 );
 
+// Add users property to the relation objects,
+// So that N8nUsersList has access to the full user data
+const relationUsers = computed(() =>
+	formData.value.relations.map((relation: ProjectRelation) => {
+		const user = usersStore.usersById[relation.id];
+		if (!user) return relation as ProjectRelation & IUser;
+		return {
+			...user,
+			...relation,
+		};
+	}),
+);
+
 onBeforeMount(async () => {
 	await usersStore.fetchUsers();
 });
@@ -333,7 +346,7 @@ onMounted(() => {
 				</N8nUserSelect>
 				<N8nUsersList
 					:actions="[]"
-					:users="formData.relations"
+					:users="relationUsers"
 					:current-user-id="usersStore.currentUser?.id"
 					:delete-label="i18n.baseText('workflows.shareModal.list.delete')"
 				>