snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,62 @@
+import type { ICustomSound } from '@rocket.chat/core-typings';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+import { useCustomSound } from '@rocket.chat/ui-contexts';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type CustomSoundRowProps = {
+	onClick: (soundId: ICustomSound['_id']) => () => void;
+	sound: {
+		name: string;
+		_id: string;
+	};
+};
+
+const CustomSoundRow = ({ onClick, sound }: CustomSoundRowProps) => {
+	const { t } = useTranslation();
+	const [isPlay, setPlayAudio] = useState(false);
+	const customSound = useCustomSound();
+
+	const handleToggle = useCallback(
+		(sound: ICustomSound['_id']) => {
+			setPlayAudio(!isPlay);
+			if (!isPlay) {
+				return customSound.play(sound);
+			}
+
+			return customSound.pause(sound);
+		},
+		[customSound, isPlay],
+	);
+
+	return (
+		<GenericTableRow
+			key={sound._id}
+			onKeyDown={onClick(sound._id)}
+			onClick={onClick(sound._id)}
+			tabIndex={0}
+			role='link'
+			action
+			qa-emoji-id={sound._id}
+		>
+			<GenericTableCell>
+				<Box withTruncatedText>{sound.name}</Box>
+			</GenericTableCell>
+			<GenericTableCell>
+				<IconButton
+					icon={!isPlay ? 'play' : 'pause'}
+					small
+					aria-label={!isPlay ? t('Play') : t('Pause')}
+					onClick={(e): void => {
+						e.preventDefault();
+						e.stopPropagation();
+						handleToggle(sound._id);
+					}}
+				/>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default CustomSoundRow;

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

@@ -0,0 +1,35 @@
+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',
+	_updatedAt: '2024-01-01T00:00:00.000Z',
+}));
+
+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,31 @@
+import { Margins } from '@rocket.chat/fuselage';
+import { PageContent } from '@rocket.chat/ui-client';
+import type { Meta, StoryFn } from '@storybook/react';
+import { useRef } from 'react';
+import { action } from 'storybook/actions';
+
+import CustomSoundsTable from './CustomSoundsTable';
+
+export default {
+	component: CustomSoundsTable,
+	decorators: [
+		(fn) => (
+			<PageContent marginBlock='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 = {
+	render: Template,
+
+	args: {
+		onClick: () => action('clicked'),
+	},
+};

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

@@ -0,0 +1,112 @@
+import { Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+
+import CustomSoundRow from './CustomSoundRow';
+import FilterByText from '../../../../components/FilterByText';
+import GenericNoResults from '../../../../components/GenericNoResults';
+
+export type CustomSoundsTableProps = {
+	onClick: (soundId: string) => () => void;
+	reload: MutableRefObject<() => void>;
+};
+
+const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {
+	const t = useTranslation();
+	const { sortBy, sortDirection, setSort } = useSort<'name'>('name');
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+
+	const [text, setText] = useState('');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				name: text,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const getSounds = useEndpoint('GET', '/v1/custom-sounds.list');
+	const { data, refetch, isLoading, isError, isSuccess } = useQuery({
+		queryKey: ['custom-sounds', query],
+		queryFn: async () => getSounds(query),
+		refetchOnMount: false,
+	});
+
+	useEffect(() => {
+		reload.current = refetch;
+	}, [reload, refetch]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x40' key='action' />
+		</>
+	);
+
+	return (
+		<>
+			<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={2} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.sounds.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data.sounds.map((sound) => (
+								<CustomSoundRow key={sound._id} sound={sound} onClick={onClick} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isSuccess && data?.sounds.length === 0 && <GenericNoResults />}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+					<StatesActions>
+						<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+					</StatesActions>
+				</States>
+			)}
+		</>
+	);
+};
+
+export default CustomSoundsTable;

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomSoundsTable';