fix: custom sounds pagination action buttons when the amount exceeds the specified limit (#40113)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>

Author: nazabucciarelli

.changeset/tall-flowers-return.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes inability to use custom sounds pagination action buttons when the amount exceeds the specified limit

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.spec.tsx

@@ -0,0 +1,34 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+
+import * as stories from './CustomSoundsTable.stories';
+
+const mockSounds = Array.from({ length: 25 }, (_, i) => ({
+	_id: `sound-${i}`,
+	name: `Custom Sound ${i + 1}`,
+	extension: 'mp3',
+}));
+
+const getMockedAppRoot = () =>
+	mockAppRoot().withEndpoint('GET', '/v1/custom-sounds.list', () => ({
+		sounds: mockSounds,
+		total: 50,
+		count: 25,
+		offset: 0,
+	}));
+
+test('should enable pagination when data.total exceeds itemsPerPage', async () => {
+	const { Default } = composeStories(stories);
+	render(<Default />, { wrapper: getMockedAppRoot().build() });
+
+	const firstSound = await screen.findByText('Custom Sound 1');
+	expect(firstSound).toBeInTheDocument();
+
+	const nextPageButton = screen.getByRole('button', { name: 'Next page' });
+	expect(nextPageButton).toBeInTheDocument();
+	expect(nextPageButton).not.toBeDisabled();
+
+	const pageTwoButton = screen.getByRole('button', { name: 'Page 2' });
+	expect(pageTwoButton).toBeInTheDocument();
+});

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx

@@ -0,0 +1,28 @@
+import { Margins } from '@rocket.chat/fuselage';
+import { PageContent } from '@rocket.chat/ui-client';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryFn } from '@storybook/react';
+import { useRef } from 'react';
+
+import CustomSoundsTable from './CustomSoundsTable';
+
+export default {
+	component: CustomSoundsTable,
+	decorators: [
+		(fn) => (
+			<PageContent mb='neg-x8'>
+				<Margins block={8}>{fn()}</Margins>
+			</PageContent>
+		),
+	],
+} satisfies Meta<typeof CustomSoundsTable>;
+
+const Template: StoryFn<typeof CustomSoundsTable> = (args) => {
+	const reloadRef = useRef(() => undefined);
+	return <CustomSoundsTable {...args} reload={reloadRef} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+	onClick: () => action('clicked'),
+};

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx

@@ -88,7 +88,7 @@ const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {
 						divider
 						current={current}
 						itemsPerPage={itemsPerPage}
-						count={data.sounds.length || 0}
+						count={data?.total || 0}
 						onSetItemsPerPage={onSetItemsPerPage}
 						onSetCurrent={onSetCurrent}
 						{...paginationProps}