fix: hide 'Delete all closed chats' button when user lacks remove-closed-livechat-rooms permission (RocketChat#40492)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: MartinSchoeler

.changeset/ten-lizards-divide.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes issue that displayed the 'Delete all closed chats' button when user lacks `remove-closed-livechat-rooms` permission

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.spec.tsx

@@ -0,0 +1,70 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ChatsTableFilter from './ChatsTableFilter';
+import type { ChatsContextValue } from '../../contexts/ChatsContext';
+
+jest.mock('../../contexts/ChatsContext', () => ({
+	useChatsContext: (): ChatsContextValue => ({
+		filtersQuery: {
+			guest: '',
+			servedBy: [],
+			status: 'all',
+			department: [],
+			from: '',
+			to: '',
+			tags: [],
+			units: [],
+		},
+		setFiltersQuery: jest.fn(),
+		resetFiltersQuery: jest.fn(),
+		displayFilters: {
+			from: undefined,
+			to: undefined,
+			guest: undefined,
+			servedBy: undefined,
+			department: undefined,
+			status: undefined,
+			tags: undefined,
+		},
+		removeFilter: jest.fn(),
+		hasAppliedFilters: false,
+		textInputRef: null,
+	}),
+}));
+
+jest.mock('../../hooks/useOmnichannelDirectoryRouter', () => ({
+	useOmnichannelDirectoryRouter: () => ({
+		navigate: jest.fn(),
+		getRouteName: jest.fn(),
+	}),
+}));
+
+describe('ChatsTableFilter', () => {
+	it('should show the "More" kebab menu when user has "remove-closed-livechat-rooms" permission', async () => {
+		render(<ChatsTableFilter />, {
+			wrapper: mockAppRoot().withPermission('remove-closed-livechat-rooms').build(),
+		});
+
+		expect(screen.getByRole('button', { name: 'More' })).toBeInTheDocument();
+	});
+
+	it('should not show the "More" kebab menu when user lacks "remove-closed-livechat-rooms" permission', async () => {
+		render(<ChatsTableFilter />, {
+			wrapper: mockAppRoot().build(),
+		});
+
+		expect(screen.queryByRole('button', { name: 'More' })).not.toBeInTheDocument();
+	});
+
+	it('should show "Delete all closed chats" option inside the menu when user has the permission', async () => {
+		render(<ChatsTableFilter />, {
+			wrapper: mockAppRoot().withPermission('remove-closed-livechat-rooms').build(),
+		});
+
+		await userEvent.click(screen.getByRole('button', { name: 'More' }));
+
+		expect(await screen.findByRole('menuitem', { name: 'Delete_all_closed_chats' })).toBeInTheDocument();
+	});
+});

apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Chip } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericMenu, GenericModal } from '@rocket.chat/ui-client';
-import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useEndpoint, usePermission, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +16,7 @@ const ChatsTableFilter = () => {
 	const omnichannelDirectoryRouter = useOmnichannelDirectoryRouter();
 	const queryClient = useQueryClient();
 	const removeClosedRooms = useEndpoint('POST', '/v1/livechat/rooms.removeAllClosedRooms');
+	const canRemoveAllClosedChats = usePermission('remove-closed-livechat-rooms');
 
 	const { filtersQuery, displayFilters, setFiltersQuery, removeFilter, textInputRef } = useChatsContext();
 
@@ -35,19 +36,21 @@ const ChatsTableFilter = () => {
 		setModal(<GenericModal variant='danger' onConfirm={onDeleteAll} onCancel={() => setModal(null)} confirmText={t('Delete')} />);
 	});
 
-	const menuItems = [
-		{
-			items: [
+	const menuItems = canRemoveAllClosedChats
+		? [
 				{
-					id: 'delete-all-closed-chats',
-					variant: 'danger',
-					icon: 'trash',
-					content: t('Delete_all_closed_chats'),
-					onClick: handleRemoveAllClosed,
-				} as const,
-			],
-		},
-	];
+					items: [
+						{
+							id: 'delete-all-closed-chats',
+							variant: 'danger',
+							icon: 'trash',
+							content: t('Delete_all_closed_chats'),
+							onClick: handleRemoveAllClosed,
+						} as const,
+					],
+				},
+			]
+		: [];
 
 	return (
 		<>
@@ -67,7 +70,7 @@ const ChatsTableFilter = () => {
 				>
 					{t('Filters')}
 				</Button>
-				<GenericMenu placement='bottom-end' detached title={t('More')} sections={menuItems} />
+				{menuItems.length > 0 && <GenericMenu placement='bottom-end' detached title={t('More')} sections={menuItems} />}
 			</FilterByText>
 			<Box display='flex' flexWrap='wrap' mbe={4}>
 				{Object.entries(displayFilters).map(([value, label], index) => {