fix: UserAutoCompleteMultiple not considering UI_Use_Real_name setting

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -1,5 +1,7 @@
 import { Option, OptionDescription } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
 
 import type { UserLabel } from './UserAutoCompleteMultipleOptions';
 
@@ -13,18 +15,28 @@ type UserAutoCompleteMultipleOptionProps = {
 
 const UserAutoCompleteMultipleOption = ({ label, ...props }: UserAutoCompleteMultipleOptionProps) => {
 	const { name, username, _federated } = label;
+	const useRealName = useSetting('UI_Use_Real_Name');
+
+	const optionLabel = useMemo(() => {
+		if (!useRealName || !name) {
+			return <>{username}</>;
+		}
+
+		return (
+			<>
+				{name} {!_federated && <OptionDescription>({username})</OptionDescription>}
+			</>
+		);
+	}, [_federated, name, useRealName, username]);
 
 	return (
 		<Option
 			{...props}
+			aria-label={username}
 			avatar={_federated ? undefined : <UserAvatar username={username || ''} size='x20' />}
 			icon={_federated ? 'globe' : undefined}
 			key={username}
-			label={
-				<>
-					{name || username} {!_federated && <OptionDescription>({username})</OptionDescription>}
-				</>
-			}
+			label={optionLabel}
 		/>
 	);
 };

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.spec.tsx

@@ -1,3 +1,4 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
@@ -26,4 +27,11 @@ describe('UserAvatarChip', () => {
 		screen.getByRole('button').click();
 		expect(handleClick).toHaveBeenCalled();
 	});
+
+	it('should render real name if the setting is enabled', () => {
+		render(<UserAvatarChip username='testuser' name='Test User' />, {
+			wrapper: mockAppRoot().withSetting('UI_Use_Real_Name', true).build(),
+		});
+		expect(screen.getByText('Test User')).toBeInTheDocument();
+	});
 });

apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx

@@ -1,5 +1,6 @@
 import { Box, Chip, Icon } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
 import type { ComponentProps } from 'react';
 
 type UserAvatarChipProps = ComponentProps<typeof Chip> & {
@@ -9,11 +10,12 @@ type UserAvatarChipProps = ComponentProps<typeof Chip> & {
 };
 
 const UserAvatarChip = ({ federated, username, name, ...props }: UserAvatarChipProps) => {
+	const displayName = useUserDisplayName({ name, username });
 	return (
 		<Chip height='x20' {...props}>
 			{federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />}
 			<Box is='span' margin='none' mis={4} verticalAlign='middle'>
-				{name ?? username}
+				{displayName}
 			</Box>
 		</Chip>
 	);

apps/meteor/client/components/UserAutoCompleteMultiple/__snapshots__/UserAvatarChip.spec.tsx.snap

@@ -25,7 +25,7 @@ exports[`UserAvatarChip renders Default without crashing 1`] = `
         <span
           class="rcx-box rcx-box--full rcx-css-1wsppvb"
         >
-          John Doe
+          johndoe
         </span>
       </span>
       <i
@@ -58,7 +58,7 @@ exports[`UserAvatarChip renders Federated without crashing 1`] = `
         <span
           class="rcx-box rcx-box--full rcx-css-1wsppvb"
         >
-          John Doe
+          johndoe
         </span>
       </span>
       <i