fix: Deprecated filter by query in emoji-custom.all api call

.changeset/clean-feet-worry.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/gazzodown": patch
+"@rocket.chat/rest-typings": patch
+---
+
+Fixes search by name in custom emojis list, by adding a correct parameter to the endpoint `emoji-custom.all`

apps/meteor/app/api/server/v1/emoji-custom.ts

@@ -79,10 +79,18 @@ API.v1.addRoute(
 		async get() {
 			const { offset, count } = await getPaginationItems(this.queryParams);
 			const { sort, query } = await this.parseJsonQuery();
+			const { name } = this.queryParams;
 
 			return API.v1.success(
 				await findEmojisCustom({
-					query,
+					query: name
+						? {
+								name: {
+									$regex: name,
+									$options: 'i',
+								},
+							}
+						: query,
 					pagination: {
 						offset,
 						count,

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

@@ -35,7 +35,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 	const query = useDebouncedValue(
 		useMemo(
 			() => ({
-				query: JSON.stringify({ name: { $regex: escapeRegExp(text), $options: 'i' } }),
+				name: escapeRegExp(text),
 				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
 				count: itemsPerPage,
 				offset: current,

apps/meteor/tests/e2e/emojis.spec.ts

@@ -1,12 +1,13 @@
 import { Users } from './fixtures/userStates';
-import { HomeChannel } from './page-objects';
+import { HomeChannel, AdminEmoji } from './page-objects';
 import { createTargetChannel } from './utils';
 import { test, expect } from './utils/test';
 
 test.use({ storageState: Users.admin.state });
 
 test.describe.serial('emoji', () => {
 	let poHomeChannel: HomeChannel;
+	let poAdminEmoji: AdminEmoji;
 	let targetChannel: string;
 
 	test.beforeAll(async ({ api }) => {
@@ -57,4 +58,51 @@ test.describe.serial('emoji', () => {
 		await poHomeChannel.content.sendMessage('® © ™ # *');
 		await expect(poHomeChannel.content.lastUserMessage).toContainText('® © ™ # *');
 	});
+
+	test('should add a custom emoji, send it, rename it, and check render', async ({ page }) => {
+		const emojiName = 'customemoji';
+		const newEmojiName = 'renamedemoji';
+		const emojiUrl = './tests/e2e/fixtures/files/test-image.jpeg';
+
+		poAdminEmoji = new AdminEmoji(page);
+
+		// Add custom emoji
+		await poHomeChannel.sidenav.openAdministrationByLabel('Workspace');
+		await page.locator('role=link[name="Emoji"]').click();
+		await poAdminEmoji.newButton.click();
+		await poAdminEmoji.addEmoji.nameInput.fill(emojiName);
+
+		const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), page.locator('role=button[name="Custom Emoji"]').click()]);
+		await fileChooser.setFiles(emojiUrl);
+
+		await poAdminEmoji.addEmoji.btnSave.click();
+		await poAdminEmoji.closeAdminButton.click();
+
+		await poHomeChannel.sidenav.openChat(targetChannel);
+
+		await poHomeChannel.content.sendMessage(`:${emojiName}:`);
+		await page.keyboard.press('Enter');
+		await expect(poHomeChannel.content.lastUserMessage.getByTestId(emojiName)).toBeVisible();
+
+		// Rename custom emoji
+		await poHomeChannel.sidenav.openAdministrationByLabel('Workspace');
+		await page.locator('role=link[name="Emoji"]').click();
+		await poAdminEmoji.findEmojiByName(emojiName);
+		await poAdminEmoji.addEmoji.nameInput.fill(newEmojiName);
+
+		await poAdminEmoji.addEmoji.btnSave.click();
+		await poAdminEmoji.closeAdminButton.click();
+
+		await poHomeChannel.sidenav.openChat(targetChannel);
+
+		await poHomeChannel.content.sendMessage(`:${newEmojiName}:`);
+		await page.keyboard.press('Enter');
+		await expect(poHomeChannel.content.lastUserMessage.getByTestId(newEmojiName)).toBeVisible();
+
+		// Remove custom emoji
+		await poHomeChannel.sidenav.openAdministrationByLabel('Workspace');
+		await page.locator('role=link[name="Emoji"]').click();
+		await poAdminEmoji.findEmojiByName(emojiName);
+		await poAdminEmoji.addEmoji.btnDelete.click();
+	});
 });

apps/meteor/tests/e2e/page-objects/admin-emojis.ts

@@ -0,0 +1,31 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { AdminFlextabEmoji } from './fragments/admin-flextab-emoji';
+
+export class AdminEmoji {
+	private readonly page: Page;
+
+	readonly addEmoji: AdminFlextabEmoji;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.addEmoji = new AdminFlextabEmoji(page);
+	}
+
+	get newButton(): Locator {
+		return this.page.locator('role=button[name="New"]');
+	}
+
+	get closeAdminButton(): Locator {
+		return this.page.locator('#sidebar-region').getByRole('button', { name: 'Close' });
+	}
+
+	get searchInput(): Locator {
+		return this.page.locator('role=textbox[name="Search"]');
+	}
+
+	async findEmojiByName(emojiName: string) {
+		await this.searchInput.fill(emojiName);
+		await this.page.locator(`role=link[name=${emojiName}]`).click();
+	}
+}

apps/meteor/tests/e2e/page-objects/fragments/admin-flextab-emoji.ts

@@ -0,0 +1,21 @@
+import type { Locator, Page } from '@playwright/test';
+
+export class AdminFlextabEmoji {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	get nameInput(): Locator {
+		return this.page.locator('role=textbox[name="Name"]');
+	}
+
+	get btnSave(): Locator {
+		return this.page.locator('role=button[name="Save"]');
+	}
+
+	get btnDelete(): Locator {
+		return this.page.locator('role=button[name="Delete"]');
+	}
+}

apps/meteor/tests/e2e/page-objects/index.ts

@@ -1,5 +1,6 @@
 export * from './account-profile';
 export * from './admin-email-inboxes';
+export * from './admin-emojis';
 export * from './admin';
 export * from './auth';
 export * from './home-channel';

packages/gazzodown/src/emoji/EmojiRenderer.tsx

@@ -25,7 +25,7 @@ const EmojiRenderer = ({ big = false, preview = false, ...emoji }: EmojiProps):
 	return (
 		<>
 			{descriptors?.map(({ name, className, image, content }, i) => (
-				<span key={i} title={name}>
+				<span data-testid={name.replace(/:/g, '')} key={i} title={name}>
 					{preview ? (
 						<ThreadMessageEmoji className={className} name={name} image={image}>
 							{content}
@@ -37,7 +37,11 @@ const EmojiRenderer = ({ big = false, preview = false, ...emoji }: EmojiProps):
 					)}
 				</span>
 			)) ?? (
-				<span role='img' aria-label={sanitizedFallback.charAt(0) === ':' ? sanitizedFallback : undefined}>
+				<span
+					data-testid={sanitizedFallback.replace(/:/g, '')}
+					role='img'
+					aria-label={sanitizedFallback.charAt(0) === ':' ? sanitizedFallback : undefined}
+				>
 					{sanitizedFallback}
 				</span>
 			)}

packages/rest-typings/src/v1/emojiCustom.ts

@@ -52,7 +52,7 @@ export const isEmojiCustomList = ajv.compile<emojiCustomList>(emojiCustomListSch
 
 export type EmojiCustomEndpoints = {
 	'/v1/emoji-custom.all': {
-		GET: (params: PaginatedRequest<{ query: string }, 'name'>) => PaginatedResult<{
+		GET: (params: PaginatedRequest<{ query?: string }, 'name'>) => PaginatedResult<{
 			emojis: IEmojiCustom[];
 		}>;
 	};