feat: Introduce User Report Section on Moderation Console

.changeset/rare-eels-fetch.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/model-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/i18n': minor
+---
+
+**Added ‘Reported Users’ Tab to Moderation Console:** Enhances user monitoring by displaying reported users.

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

@@ -4,14 +4,17 @@ import {
 	isReportHistoryProps,
 	isArchiveReportProps,
 	isReportInfoParams,
-	isReportMessageHistoryParams,
+	isGetUserReportsParams,
 	isModerationReportUserPost,
 	isModerationDeleteMsgHistoryParams,
 	isReportsByMsgIdParams,
 } from '@rocket.chat/rest-typings';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 
+import { SystemLogger } from '../../../../server/lib/logger/system';
 import { deleteReportedMessages } from '../../../../server/lib/moderation/deleteReportedMessages';
+import { getUserReports } from '../../../../server/lib/moderation/getUserReports';
+import { getUserReportsByUid } from '../../../../server/lib/moderation/getUserReportsByUid';
 import { API } from '../api';
 import { getPaginationItems } from '../helpers/getPaginationItems';
 
@@ -51,7 +54,7 @@ API.v1.addRoute(
 				});
 			}
 
-			const total = await ModerationReports.countMessageReportsInRange(latest, oldest, escapedSelector);
+			const total = await ModerationReports.getTotalUniqueReportedUsers(latest, oldest, escapedSelector, true);
 
 			return API.v1.success({
 				reports,
@@ -63,11 +66,31 @@ API.v1.addRoute(
 	},
 );
 
+API.v1.addRoute(
+	'moderation.userReports',
+	{
+		authRequired: true,
+		validateParams: isReportHistoryProps,
+		permissionsRequired: ['view-moderation-console'],
+	},
+	{
+		async get() {
+			try {
+				const result = await getUserReports(this.queryParams, this.parseJsonQuery.bind(this));
+				return API.v1.success(result);
+			} catch (error) {
+				SystemLogger.error(error);
+				return API.v1.failure('Error while fetching user reports');
+			}
+		},
+	},
+);
+
 API.v1.addRoute(
 	'moderation.user.reportedMessages',
 	{
 		authRequired: true,
-		validateParams: isReportMessageHistoryParams,
+		validateParams: isGetUserReportsParams,
 		permissionsRequired: ['view-moderation-console'],
 	},
 	{
@@ -113,6 +136,26 @@ API.v1.addRoute(
 	},
 );
 
+API.v1.addRoute(
+	'moderation.user.reportsByUserId',
+	{
+		authRequired: true,
+		validateParams: isGetUserReportsParams,
+		permissionsRequired: ['view-moderation-console'],
+	},
+	{
+		async get() {
+			try {
+				const result = await getUserReportsByUid(this.queryParams, this.parseJsonQuery.bind(this));
+				return API.v1.success(result);
+			} catch (error) {
+				SystemLogger.error(error);
+				return API.v1.failure('Error while fetching user reports');
+			}
+		},
+	},
+);
+
 API.v1.addRoute(
 	'moderation.user.deleteReportedMessages',
 	{
@@ -196,6 +239,33 @@ API.v1.addRoute(
 	},
 );
 
+API.v1.addRoute(
+	'moderation.dismissUserReports',
+	{
+		authRequired: true,
+		validateParams: isArchiveReportProps,
+		permissionsRequired: ['manage-moderation-actions'],
+	},
+	{
+		async post() {
+			const { userId, reason, action: actionParam } = this.bodyParams;
+
+			if (!userId) {
+				return API.v1.failure('error-user-id-param-not-provided');
+			}
+
+			const sanitizedReason: string = reason ?? 'No reason provided';
+			const action: string = actionParam ?? 'None';
+
+			const { userId: moderatorId } = this;
+
+			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,45 @@
+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, { useState } from 'react';
+
+import { Contextualbar, ContextualbarClose } from '../../../components/Contextualbar';
+import UserMessages from './UserMessages';
+import UserReportInfo from './UserReports/UserReportInfo';
+
+type ModConsoleReportDetailsProps = {
+	userId: IUser['_id'];
+	default: string;
+	onRedirect: (mid: string) => void;
+};
+
+const tabs = ['Messages', 'Users'];
+
+const ModConsoleReportDetails = ({ userId, default: defaultTab, onRedirect }: ModConsoleReportDetailsProps): JSX.Element => {
+	const t = useTranslation();
+	const [tab, setTab] = useState<string>(defaultTab);
+	const moderationRoute = useRouter();
+
+	const handleTabClick = (tab: string) => (): void => setTab(tab);
+
+	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 = ['Messages', 'Users'];
 
 const ModerationConsolePage = () => {
 	const t = useTranslation();
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
 	const dispatchToastMessage = useToastMessageDispatch();
+	const [tab, setTab] = useState('Messages');
+
+	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 = (tab: string) => () => setTab(tab);
 
 	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(`Reported_${tabName}` as TranslationKey)}
+							</TabsItem>
+						))}
+					</Tabs>
+					{tab === 'Messages' && <ModerationConsoleTable />} {tab === 'Users' && <ModConsoleUsersTable />}
 				</Page.Content>
 			</Page>
-			{context && <Contextualbar>{context === 'info' && id && <UserMessages userId={id} onRedirect={handleRedirect} />}</Contextualbar>}
+			{context === 'info' && id && <ModConsoleReportDetails userId={id} onRedirect={handleRedirect} default={tab} />}
 		</Page>
 	);
 };

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

@@ -1,11 +1,10 @@
-import { Pagination, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useEndpoint, useToastMessageDispatch, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useToastMessageDispatch, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { FC } from 'react';
 import React, { useMemo, useState } from 'react';
 
-import FilterByText from '../../../components/FilterByText';
 import GenericNoResults from '../../../components/GenericNoResults';
 import {
 	GenericTable,
@@ -17,12 +16,12 @@ import {
 import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import ModerationConsoleTableRow from './ModerationConsoleTableRow';
-import DateRangePicker from './helpers/DateRangePicker';
+import ModerationFilter from './helpers/ModerationFilter';
 
 // TODO: Missing error state
 const ModerationConsoleTable: FC = () => {
 	const [text, setText] = useState('');
-	const moderationRoute = useRoute('moderation-console');
+	const router = useRouter();
 	const t = useTranslation();
 	const isDesktopOrLarger = useMediaQuery('(min-width: 1024px)');
 
@@ -64,13 +63,15 @@ const ModerationConsoleTable: FC = () => {
 	});
 
 	const handleClick = useMutableCallback((id): void => {
-		moderationRoute.push({
-			context: 'info',
-			id,
+		router.navigate({
+			name: 'moderation-console',
+			params: {
+				context: 'info',
+				id,
+			},
 		});
 	});
 
-	// header sequence would be: name, reportedMessage, room, postdate, reports, actions
 	const headers = useMemo(
 		() => [
 			<GenericTableHeaderCell
@@ -80,20 +81,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}
@@ -114,18 +104,12 @@ const ModerationConsoleTable: FC = () => {
 			</GenericTableHeaderCell>,
 			<GenericTableHeaderCell key='actions' width='x48' />,
 		],
-		[sortDirection, sortBy, setSort, t, isDesktopOrLarger],
+		[sortDirection, sortBy, setSort, t],
 	);
 
 	return (
 		<>
-			<FilterByText autoFocus placeholder={t('Search')} onChange={({ text }): void => setText(text)} />
-			<Field alignSelf='stretch'>
-				<FieldLabel>{t('Date')}</FieldLabel>
-				<FieldRow>
-					<DateRangePicker display='flex' flexGrow={1} onChange={setDateRange} />
-				</FieldRow>
-			</Field>
+			<ModerationFilter setText={setText} setDateRange={setDateRange} />
 			{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>