fix: no spaces between emoji aliases (#33278)

.changeset/spotty-ads-knock.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes display of emoji aliases in custom emoji list by adding commas between aliases

apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx

@@ -0,0 +1,79 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import CustomEmoji from './CustomEmoji';
+
+const appRoot = mockAppRoot().withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+	count: 1,
+	offset: 0,
+	total: 1,
+	success: true,
+	emojis: [
+		{
+			_id: '1',
+			name: 'smile',
+			aliases: ['happy', 'joy'],
+			extension: 'webp',
+			_updatedAt: new Date().toISOString(),
+			etag: 'abcdef',
+		},
+	],
+}));
+
+describe('CustomEmoji Component', () => {
+	const mockRef = { current: jest.fn() };
+	const mockOnClick = jest.fn();
+
+	it('renders emoji list', async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('smile')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases as comma-separated values when aliases is an array", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy, joy')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases values when aliases is a string", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: mockAppRoot()
+				.withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+					count: 1,
+					offset: 0,
+					total: 1,
+					success: true,
+					emojis: [
+						{
+							_id: '1',
+							name: 'smile',
+							aliases: 'happy' as any,
+							extension: 'webp',
+							_updatedAt: new Date().toISOString(),
+							etag: 'abcdef',
+						},
+					],
+				}))
+				.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy')).toBeInTheDocument();
+		});
+	});
+});

apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx

@@ -95,7 +95,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 											<Box withTruncatedText>{emojis.name}</Box>
 										</GenericTableCell>
 										<GenericTableCell color='default'>
-											<Box withTruncatedText>{emojis.aliases.join(', ')}</Box>
+											<Box withTruncatedText>{Array.isArray(emojis.aliases) ? emojis.aliases.join(', ') : emojis.aliases}</Box>
 										</GenericTableCell>
 									</GenericTableRow>
 								))}