feat: Introduce User Report Section on Moderation Console

apps/meteor/app/api/server/v1/moderation.ts

@@ -1,10 +1,10 @@
-import type { IModerationReport, IUser } from '@rocket.chat/core-typings';
+import type { IModerationReport, IUser, IUserEmail } from '@rocket.chat/core-typings';
 import { ModerationReports, Users } from '@rocket.chat/models';
 import {
 	isReportHistoryProps,
 	isArchiveReportProps,
 	isReportInfoParams,
-	isReportMessageHistoryParams,
+	isGetUserReportsParams,
 	isModerationReportUserPost,
 	isModerationDeleteMsgHistoryParams,
 	isReportsByMsgIdParams,
@@ -63,11 +63,59 @@ API.v1.addRoute(
 	},
 );
 
+API.v1.addRoute(
+	'moderation.user.reports',
+	{
+		authRequired: true,
+		validateParams: isReportHistoryProps,
+		permissionsRequired: ['view-moderation-console'],
+	},
+	{
+		async get() {
+			const { latest: _latest, oldest: _oldest, selector = '' } = this.queryParams;
+
+			const { count = 20, offset = 0 } = await getPaginationItems(this.queryParams);
+
+			const { sort } = await this.parseJsonQuery();
+
+			const latest = _latest ? new Date(_latest) : new Date();
+
+			const oldest = _oldest ? new Date(_oldest) : new Date(0);
+
+			const escapedSelector = escapeRegExp(selector);
+
+			const reports = await ModerationReports.findUserReports(latest, oldest, escapedSelector, {
+				offset,
+				count,
+				sort,
+			}).toArray();
+
+			if (reports.length === 0) {
+				return API.v1.success({
+					reports,
+					count: 0,
+					offset,
+					total: 0,
+				});
+			}
+
+			const total = await ModerationReports.countMessageReportsInRange(latest, oldest, escapedSelector);
+
+			return API.v1.success({
+				reports,
+				count: reports.length,
+				offset,
+				total,
+			});
+		},
+	},
+);
+
 API.v1.addRoute(
 	'moderation.user.reportedMessages',
 	{
 		authRequired: true,
-		validateParams: isReportMessageHistoryParams,
+		validateParams: isGetUserReportsParams,
 		permissionsRequired: ['view-moderation-console'],
 	},
 	{
@@ -113,6 +161,61 @@ API.v1.addRoute(
 	},
 );
 
+// api endpoint to get user reports of a userid
+
+API.v1.addRoute(
+	'moderation.user.reportsByUserId',
+	{
+		authRequired: true,
+		validateParams: isGetUserReportsParams,
+		permissionsRequired: ['view-moderation-console'],
+	},
+	{
+		async get() {
+			const { userId, selector = '' } = this.queryParams;
+			const { sort } = await this.parseJsonQuery();
+			const { count = 50, offset = 0 } = await getPaginationItems(this.queryParams);
+
+			const user = await Users.findOneById<IUser>(userId, {
+				projection: {
+					_id: 1,
+					username: 1,
+					name: 1,
+					avatarETag: 1,
+					active: 1,
+					roles: 1,
+					emails: 1,
+					createdAt: 1,
+				},
+			});
+
+			const escapedSelector = escapeRegExp(selector);
+			const { cursor, totalCount } = ModerationReports.findUserReportsByReportedUserId(userId, escapedSelector, {
+				offset,
+				count,
+				sort,
+			});
+
+			const reports = await cursor.toArray();
+			const emailSet = new Map<IUserEmail['address'], IUserEmail>();
+
+			reports.flatMap((report) => report.reportedUser?.emails ?? []).forEach((email) => emailSet.set(email.address, email));
+
+			if (user) {
+				user.emails = Array.from(emailSet.values());
+			}
+
+			return API.v1.success({
+				user,
+				reports,
+				count: reports.length,
+				total: totalCount,
+				offset,
+			});
+		},
+	},
+);
+
 API.v1.addRoute(
 	'moderation.user.deleteReportedMessages',
 	{
@@ -196,6 +299,34 @@ API.v1.addRoute(
 	},
 );
 
+// api endpoint to hide user reports
+API.v1.addRoute(
+	'moderation.dismissUserReports',
+	{
+		authRequired: true,
+		validateParams: isArchiveReportProps,
+		permissionsRequired: ['manage-moderation-actions'],
+	},
+	{
+		async post() {
+			const { userId, reason, action: actionParam } = this.bodyParams;
+
+			const sanitizedReason: string = reason ?? 'No reason provided';
+			const action: string = actionParam ?? 'None';
+
+			const { userId: moderatorId } = this;
+
+			if (!userId) {
+				return API.v1.failure('error-user-id-param-not-provided');
+			}
+
+			await ModerationReports.hideUserReportsByUserId(userId, moderatorId, sanitizedReason, action);
+
+			return API.v1.success();
+		},
+	},
+);
+
 API.v1.addRoute(
 	'moderation.reports',
 	{

apps/meteor/client/views/admin/moderation/MessageContextFooter.tsx

@@ -16,7 +16,7 @@ const MessageContextFooter: FC<{ userId: string; deleted: boolean }> = ({ userId
 	const deleteMessagesAction = useDeleteMessagesAction(userId);
 
 	return (
-		<ButtonGroup width='full' stretch>
+		<ButtonGroup flexGrow={0} width='full' stretch>
 			<Button onClick={dismissUserAction.onClick} title={t('Moderation_Dismiss_all_reports')} aria-label={t('Moderation_Dismiss_reports')}>
 				{t('Moderation_Dismiss_all_reports')}
 			</Button>

apps/meteor/client/views/admin/moderation/ModConsoleReportDetails.tsx

@@ -0,0 +1,44 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { Tabs, TabsItem, ContextualbarHeader, ContextualbarTitle } from '@rocket.chat/fuselage';
+import { type TranslationKey, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import React, { useMemo, useState } from 'react';
+
+import { Contextualbar, ContextualbarClose } from '../../../components/Contextualbar';
+import UserMessages from './UserMessages';
+import UserReportInfo from './UserReports/UserReportInfo';
+
+type ModConsoleReportDetailsProps = {
+	userId: IUser['_id'];
+	onRedirect: (mid: string) => void;
+};
+
+const tabs = ['Messages', 'Users'];
+
+const ModConsoleReportDetails = ({ userId, onRedirect }: ModConsoleReportDetailsProps): JSX.Element => {
+	const t = useTranslation();
+	const [tab, setTab] = useState('Messages');
+	const moderationRoute = useRouter();
+
+	const handleTabClick = useMemo(() => (tab: string) => (): void => setTab(tab), [setTab]);
+
+	return (
+		<Contextualbar>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
+				<ContextualbarClose onClick={() => moderationRoute.navigate('/admin/moderation', { replace: true })} />
+			</ContextualbarHeader>
+			<Tabs>
+				{tabs.map((tabName) => (
+					<TabsItem key={tabName || ''} selected={tab === tabName} onClick={handleTabClick(tabName)}>
+						{t(tabName as TranslationKey)}
+					</TabsItem>
+				))}
+			</Tabs>
+
+			{tab === 'Messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
+			{tab === 'Users' && <UserReportInfo userId={userId} />}
+		</Contextualbar>
+	);
+};
+
+export default ModConsoleReportDetails;

apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx

@@ -1,37 +1,52 @@
-import { useTranslation, useRouteParameter, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { useTranslation, useRouteParameter, useToastMessageDispatch, type TranslationKey } from '@rocket.chat/ui-contexts';
+import React, { useCallback, useState } from 'react';
 
-import { Contextualbar } from '../../../components/Contextualbar';
 import Page from '../../../components/Page';
 import { getPermaLink } from '../../../lib/getPermaLink';
+import ModConsoleReportDetails from './ModConsoleReportDetails';
 import ModerationConsoleTable from './ModerationConsoleTable';
-import UserMessages from './UserMessages';
+import ModConsoleUsersTable from './UserReports/ModConsoleUsersTable';
+
+const tabs = ['Reported_Messages', 'Reported_Users'];
 
 const ModerationConsolePage = () => {
 	const t = useTranslation();
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
 	const dispatchToastMessage = useToastMessageDispatch();
+	const [tab, setTab] = useState('Reported_Users');
+
+	const handleRedirect = useCallback(
+		async (mid: string) => {
+			try {
+				const permalink = await getPermaLink(mid);
+				window.open(permalink, '_self');
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[dispatchToastMessage],
+	);
 
-	const handleRedirect = async (mid: string) => {
-		try {
-			const permalink = await getPermaLink(mid);
-			// open the permalink in same tab
-			window.open(permalink, '_self');
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	};
+	const handleTabClick = useCallback((tab: string) => () => setTab(tab), [setTab]);
 
 	return (
 		<Page flexDirection='row'>
 			<Page>
 				<Page.Header title={t('Moderation')} />
 				<Page.Content>
-					<ModerationConsoleTable />
+					<Tabs>
+						{tabs.map((tabName) => (
+							<TabsItem key={tabName || ''} selected={tab === tabName} onClick={handleTabClick(tabName)}>
+								{t(tabName as TranslationKey)}
+							</TabsItem>
+						))}
+					</Tabs>
+					{tab === 'Reported_Messages' && <ModerationConsoleTable />} {tab === 'Reported_Users' && <ModConsoleUsersTable />}
 				</Page.Content>
 			</Page>
-			{context && <Contextualbar>{context === 'info' && id && <UserMessages userId={id} onRedirect={handleRedirect} />}</Contextualbar>}
+			{context === 'info' && id && <ModConsoleReportDetails userId={id} onRedirect={handleRedirect} />}
 		</Page>
 	);
 };

apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx

@@ -1,4 +1,4 @@
-import { Pagination, Field } from '@rocket.chat/fuselage';
+import { Pagination, Grid, GridItem } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
@@ -80,20 +80,9 @@ const ModerationConsoleTable: FC = () => {
 				onClick={setSort}
 				sort='reports.message.u.username'
 			>
-				{t('Name')}
+				{t('User')}
 			</GenericTableHeaderCell>,
-			isDesktopOrLarger && (
-				<GenericTableHeaderCell
-					w='x140'
-					key='username'
-					direction={sortDirection}
-					active={sortBy === 'reports.message.u.username'}
-					onClick={setSort}
-					sort='reports.message.u.username'
-				>
-					{t('Username')}
-				</GenericTableHeaderCell>
-			),
+
 			<GenericTableHeaderCell
 				key='reportedMessage'
 				direction={sortDirection}
@@ -119,13 +108,15 @@ const ModerationConsoleTable: FC = () => {
 
 	return (
 		<>
-			<FilterByText autoFocus placeholder={t('Search')} onChange={({ text }): void => setText(text)} />
-			<Field alignSelf='stretch'>
-				<Field.Label>{t('Date')}</Field.Label>
-				<Field.Row>
-					<DateRangePicker display='flex' flexGrow={1} onChange={setDateRange} />
-				</Field.Row>
-			</Field>
+			<Grid>
+				<GridItem flexGrow={5}>
+					<FilterByText autoFocus placeholder={t('Search')} onChange={({ text }): void => setText(text)} />
+				</GridItem>
+				<GridItem display='flex' alignItems='center'>
+					<DateRangePicker onChange={setDateRange} />
+				</GridItem>
+			</Grid>
+
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx

@@ -1,11 +1,10 @@
 import type { IModerationAudit, IUser } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { GenericTableCell, GenericTableRow } from '../../../components/GenericTable';
-import UserAvatar from '../../../components/avatar/UserAvatar';
 import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
 import ModerationConsoleActions from './ModerationConsoleActions';
+import UserColumn from './helpers/UserColumn';
 
 export type ModerationConsoleRowProps = {
 	report: IModerationAudit;
@@ -30,34 +29,8 @@ const ModerationConsoleTableRow = ({ report, onClick, isDesktopOrLarger }: Moder
 	return (
 		<GenericTableRow key={_id} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
 			<GenericTableCell withTruncatedText>
-				<Box display='flex' alignItems='center'>
-					{username && (
-						<Box>
-							<UserAvatar size={isDesktopOrLarger ? 'x20' : 'x40'} username={username} />
-						</Box>
-					)}
-					<Box display='flex' mi={8} withTruncatedText>
-						<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
-							<Box fontScale='p2m' color='default' withTruncatedText>
-								{name || username}
-							</Box>
-							{!isDesktopOrLarger && name && (
-								<Box fontScale='p2' color='hint' withTruncatedText>
-									{' '}
-									{`@${username}`}{' '}
-								</Box>
-							)}
-						</Box>
-					</Box>
-				</Box>
+				<UserColumn name={name} username={username} isDesktopOrLarger={isDesktopOrLarger} />
 			</GenericTableCell>
-			{isDesktopOrLarger && (
-				<GenericTableCell>
-					<Box fontScale='p2m' color='hint' withTruncatedText>
-						{username}
-					</Box>
-				</GenericTableCell>
-			)}
 			<GenericTableCell withTruncatedText>{message}</GenericTableCell>
 			<GenericTableCell withTruncatedText>{concatenatedRoomNames}</GenericTableCell>
 			<GenericTableCell withTruncatedText>{formatDateAndTime(ts)}</GenericTableCell>