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

apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.spec.tsx

@@ -0,0 +1,19 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { VirtuosoMockContext } from 'react-virtuoso';
+
+import * as stories from './BannedUsers.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+const appRoot = mockAppRoot()
+	.wrap((children) => (
+		<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>{children}</VirtuosoMockContext.Provider>
+	))
+	.build();
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: appRoot });
+	expect(baseElement).toMatchSnapshot();
+});

apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.stories.tsx

@@ -0,0 +1,86 @@
+import { Contextualbar } from '@rocket.chat/ui-client';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import BannedUsers from './BannedUsers';
+
+const meta = {
+	component: BannedUsers,
+	parameters: {
+		layout: 'fullscreen',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	args: {
+		useRealName: false,
+	},
+	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+} satisfies Meta<typeof BannedUsers>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		loading: false,
+		bannedUsers: [
+			{
+				_id: 'user1',
+				username: 'john.doe',
+				name: 'John Doe',
+			},
+			{
+				_id: 'user2',
+				username: '@jane.smith:matrix.org',
+				name: 'Jane Smith',
+			},
+			{
+				_id: 'user3',
+				username: 'rocket.cat',
+				name: 'Rocket.Cat',
+			},
+		],
+		useRealName: false,
+		onClickClose: action('onClickClose'),
+		onClickUnban: action('onClickUnban'),
+		onLoadMore: action('onLoadMore'),
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		loading: true,
+		bannedUsers: [],
+		onClickClose: action('onClickClose'),
+		onClickUnban: action('onClickUnban'),
+		onLoadMore: action('onLoadMore'),
+	},
+};
+
+export const WithRealNames: Story = {
+	args: {
+		...Default.args,
+		useRealName: true,
+	},
+};
+
+export const Empty: Story = {
+	args: {
+		loading: false,
+		bannedUsers: [],
+		onClickClose: action('onClickClose'),
+		onClickUnban: action('onClickUnban'),
+		onLoadMore: action('onLoadMore'),
+	},
+};
+
+export const WithError: Story = {
+	args: {
+		loading: false,
+		error: new Error('Failed to load banned users'),
+		bannedUsers: [],
+		onClickClose: action('onClickClose'),
+		onClickUnban: action('onClickUnban'),
+		onLoadMore: action('onLoadMore'),
+	},
+};

apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.tsx

@@ -0,0 +1,72 @@
+import { Box, Throbber } from '@rocket.chat/fuselage';
+import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarDialog,
+	ContextualbarEmptyContent,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	VirtualizedScrollbars,
+} from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import BannedUsersItem from './BannedUsersItem';
+import type { BannedUser } from '../../../hooks/useRoomBannedUsers';
+
+export type BannedUsersProps = {
+	loading: boolean;
+	error?: Error;
+	useRealName?: boolean;
+	bannedUsers: BannedUser[];
+	onClickClose: () => void;
+	onClickUnban: (username: string) => void;
+	onLoadMore: () => void;
+};
+
+const BannedUsers = ({ loading, error, bannedUsers, useRealName = false, onClickClose, onClickUnban, onLoadMore }: BannedUsersProps) => {
+	const { t } = useTranslation();
+
+	const loadMoreBannedUsers = useDebouncedCallback(() => onLoadMore(), 300, [onLoadMore, bannedUsers]);
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='ban' />
+				<ContextualbarTitle>{t('Banned_Users')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClickClose} />
+			</ContextualbarHeader>
+			<ContextualbarContent padding={0} paddingBlock={12}>
+				{loading && (
+					<Box paddingInline={24} paddingBlock={12}>
+						<Throbber size='x12' />
+					</Box>
+				)}
+
+				{error && <ContextualbarEmptyContent icon='warning' title={t('Banned_users_error')} subtitle={t('Please_try_again')} />}
+
+				{!loading && !error && bannedUsers.length === 0 && (
+					<ContextualbarEmptyContent icon='ban' title={t('No_banned_users')} subtitle={t('No_banned_users_description')} />
+				)}
+
+				{!loading && !error && bannedUsers.length > 0 && (
+					<Box width='full' height='full' overflow='hidden' flexShrink={1}>
+						<VirtualizedScrollbars>
+							<Virtuoso
+								style={{ height: '100%', width: '100%' }}
+								data={bannedUsers}
+								overscan={50}
+								endReached={loadMoreBannedUsers}
+								itemContent={(_index, user) => <BannedUsersItem user={user} useRealName={useRealName} onClickUnban={onClickUnban} />}
+							/>
+						</VirtualizedScrollbars>
+					</Box>
+				)}
+			</ContextualbarContent>
+		</ContextualbarDialog>
+	);
+};
+
+export default BannedUsers;

apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsersItem.tsx

@@ -0,0 +1,53 @@
+import { Box, Icon, Option, OptionAvatar, OptionColumn, OptionContent, OptionDescription, OptionMenu } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getUserDisplayNames } from '../../../../../lib/getUserDisplayNames';
+import { normalizeUsername } from '../../../../../lib/utils/normalizeUsername';
+import { ReactiveUserStatus } from '../../../../components/UserStatus';
+import type { BannedUser } from '../../../hooks/useRoomBannedUsers';
+
+export type BannedUsersItemProps = {
+	user: BannedUser;
+	useRealName: boolean;
+	onClickUnban: (username: string) => void;
+};
+
+const BannedUsersItem = ({ user, useRealName, onClickUnban }: BannedUsersItemProps) => {
+	const { t } = useTranslation();
+
+	const [nameOrUsername, displayUsername] = getUserDisplayNames(user.name, user.username, useRealName);
+	const federated = user.username.startsWith('@') && user.username.includes(':');
+
+	const options = useMemo(
+		() => [
+			{
+				id: 'unban-user',
+				content: <Box color='status-font-on-danger'>{t('Unban_user_from_room')}</Box>,
+				icon: 'ban' as const,
+				iconColor: 'status-font-on-danger',
+				onClick: () => onClickUnban(user.username),
+			},
+		],
+		[onClickUnban, t, user.username],
+	);
+
+	return (
+		<Option style={{ paddingInline: 24, cursor: 'default' }}>
+			<OptionAvatar>
+				<UserAvatar username={normalizeUsername(user.username)} size='x28' />
+			</OptionAvatar>
+			<OptionColumn>{federated ? <Icon name='globe' size='x16' /> : <ReactiveUserStatus uid={user._id} />}</OptionColumn>
+			<OptionContent>
+				{nameOrUsername} {displayUsername && <OptionDescription>@{displayUsername}</OptionDescription>}
+			</OptionContent>
+			<OptionMenu>
+				<GenericMenu detached title={t('More')} items={options} placement='bottom-end' />
+			</OptionMenu>
+		</Option>
+	);
+};
+
+export default BannedUsersItem;

apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsersWithData.tsx

@@ -0,0 +1,30 @@
+import { useRoomToolbox, useSetting } from '@rocket.chat/ui-contexts';
+
+import BannedUsers from './BannedUsers';
+import { useRoomBannedUsers } from '../../../hooks/useRoomBannedUsers';
+import { useRoom } from '../../contexts/RoomContext';
+import { useUnbanUser } from '../../hooks/useUnbanUser';
+
+const BannedUsersWithData = () => {
+	const room = useRoom();
+	const { closeTab } = useRoomToolbox();
+	const useRealName = useSetting('UI_Use_Real_Name', false);
+
+	const { data, error, isPending, hasNextPage, fetchNextPage } = useRoomBannedUsers({ rid: room._id });
+
+	const handleUnban = useUnbanUser({ roomId: room._id });
+
+	return (
+		<BannedUsers
+			loading={isPending}
+			error={error ?? undefined}
+			useRealName={useRealName}
+			bannedUsers={data?.bannedUsers ?? []}
+			onClickClose={closeTab}
+			onClickUnban={handleUnban}
+			onLoadMore={hasNextPage ? () => void fetchNextPage() : () => undefined}
+		/>
+	);
+};
+
+export default BannedUsersWithData;

apps/meteor/client/views/room/contextualBar/BannedUsers/index.ts

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