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

apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx

@@ -0,0 +1,77 @@
+import { Box, FieldGroup, Field, FieldLabel, FieldRow, FieldError, TextAreaInput, FieldDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useId, type ComponentProps } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export type ReportUserModalProps = {
+	onConfirm: (reasonForReport: string) => void;
+	onClose: () => void;
+	displayName: string;
+	username: string;
+};
+
+type ReportUserModalsFields = {
+	reasonForReport: string;
+};
+
+const ReportUserModal = ({ username, displayName, onConfirm, onClose }: ReportUserModalProps) => {
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<ReportUserModalsFields>({
+		defaultValues: {
+			reasonForReport: '',
+		},
+	});
+
+	const { t } = useTranslation();
+
+	const reasonForReportId = useId();
+
+	return (
+		<GenericModal
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' onSubmit={handleSubmit(({ reasonForReport }) => onConfirm(reasonForReport))} {...props} />
+			)}
+			variant='danger'
+			title={t('Report_User')}
+			onClose={onClose}
+			onCancel={onClose}
+			confirmText={t('Report')}
+		>
+			<Box marginBlockEnd={16} display='flex' alignItems='center'>
+				<UserAvatar username={username} />
+				<Box marginInlineStart={8} fontScale='p2b'>
+					{displayName}
+				</Box>
+			</Box>
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor={reasonForReportId}>{t('Report_reason')}</FieldLabel>
+					<FieldDescription id={`${reasonForReportId}-description`}>{t('Let_moderators_know_what_the_issue_is')}</FieldDescription>
+					<FieldRow>
+						<TextAreaInput
+							id={reasonForReportId}
+							rows={3}
+							{...register('reasonForReport', { required: t('Required_field', { field: t('Reason_for_report') }) })}
+							width='full'
+							marginBlockEnd={4}
+							aria-required='true'
+							aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
+						/>
+					</FieldRow>
+					{errors.reasonForReport && (
+						<FieldError aria-live='assertive' id={`${reasonForReportId}-error`}>
+							{errors.reasonForReport.message}
+						</FieldError>
+					)}
+				</Field>
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default ReportUserModal;

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx

@@ -0,0 +1,74 @@
+import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import { ButtonGroup, IconButton, Skeleton } from '@rocket.chat/fuselage';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UserInfoAction } from '../../../../components/UserInfo';
+import { useMemberExists } from '../../../hooks/useMemberExists';
+import type { UserInfoAction as UserInfoActionType } from '../../hooks/useUserInfoActions';
+import { useUserInfoActions } from '../../hooks/useUserInfoActions';
+
+export type UserInfoActionsProps = {
+	user: Pick<IUser, '_id' | 'username' | 'name' | 'freeSwitchExtension'>;
+	rid: IRoom['_id'];
+	isInvited?: boolean;
+	backToList?: () => void;
+};
+
+const UserInfoActions = ({ user, rid, isInvited, backToList }: UserInfoActionsProps) => {
+	const { t } = useTranslation();
+	const {
+		data: isMemberData,
+		refetch,
+		isSuccess: membershipCheckSuccess,
+		isPending,
+	} = useMemberExists({ roomId: rid, username: user.username as string });
+
+	const isMember = membershipCheckSuccess && isMemberData?.isMember;
+	const { _id: userId, username, name, freeSwitchExtension } = user;
+
+	const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions({
+		rid,
+		user: { _id: userId, username, name, freeSwitchExtension },
+		size: 2,
+		isMember,
+		isInvited,
+		reload: () => {
+			backToList?.();
+			refetch();
+		},
+	});
+
+	const menu = useMemo(() => {
+		if (!menuOptions?.length) {
+			return null;
+		}
+
+		return (
+			<GenericMenu
+				button={<IconButton icon='kebab' secondary />}
+				title={t('More')}
+				key='menu'
+				sections={menuOptions}
+				placement='bottom-end'
+				small={false}
+			/>
+		);
+	}, [menuOptions, t]);
+
+	const actions = useMemo(() => {
+		const mapAction = ([key, action]: [string, UserInfoActionType]) => (
+			<UserInfoAction key={key} title={action.title} label={action.content} onClick={action.onClick} icon={action.icon ?? 'kebab'} />
+		);
+
+		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
+	}, [actionsDefinition, menu]);
+
+	if (isPending) {
+		return <Skeleton width='full' />;
+	}
+	return <ButtonGroup align='center'>{actions}</ButtonGroup>;
+};
+
+export default UserInfoActions;

apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx

@@ -0,0 +1,127 @@
+import type { IUser, IRoom } from '@rocket.chat/core-typings';
+import { Callout } from '@rocket.chat/fuselage';
+import {
+	ContextualbarHeader,
+	ContextualbarBack,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarContent,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRolesDescription } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import UserInfoActions from './UserInfoActions';
+import { getUserEmailAddress } from '../../../../../lib/getUserEmailAddress';
+import { FormSkeleton } from '../../../../components/Skeleton';
+import { UserCardRole } from '../../../../components/UserCard';
+import { UserInfo } from '../../../../components/UserInfo';
+import { ReactiveUserStatus } from '../../../../components/UserStatus';
+import { ReactiveUserStatusText } from '../../../../components/UserStatusText';
+import { usersQueryKeys } from '../../../../lib/queryKeys';
+import { getUserEmailVerified } from '../../../../lib/utils/getUserEmailVerified';
+
+export type UserInfoWithDataProps = {
+	uid?: IUser['_id'];
+	username?: IUser['username'];
+	rid: IRoom['_id'];
+	invitationDate?: string;
+	onClose: () => void;
+	onClickBack?: () => void;
+};
+
+const UserInfoWithData = ({ uid, username, rid, invitationDate, onClose, onClickBack }: UserInfoWithDataProps) => {
+	const { t } = useTranslation();
+	const getRoles = useRolesDescription();
+
+	const getUserInfo = useEndpoint('GET', '/v1/users.info');
+	const { isPending, isError, data } = useQuery({
+		queryKey: usersQueryKeys.userInfo({ uid, username }),
+		queryFn: () => {
+			if (uid) return getUserInfo({ userId: uid });
+			if (username) return getUserInfo({ username });
+			throw new Error('userId or username is required');
+		},
+	});
+
+	const user = useMemo(() => {
+		if (!data?.user) {
+			return;
+		}
+
+		const {
+			_id,
+			name,
+			username,
+			roles = [],
+			bio,
+			utcOffset,
+			lastLogin,
+			customFields,
+			phone,
+			nickname,
+			createdAt,
+			canViewAllInfo,
+			freeSwitchExtension,
+		} = data.user;
+
+		return {
+			_id,
+			name,
+			username,
+			lastLogin,
+			/**
+			 * TODO: We shouldn't use UserCard components outside UserCard
+			 */
+			roles: roles && getRoles(roles).map((role, index) => <UserCardRole key={index}>{role}</UserCardRole>),
+			bio,
+			canViewAllInfo,
+			phone,
+			customFields,
+			verified: getUserEmailVerified(data.user),
+			email: getUserEmailAddress(data.user),
+			utcOffset,
+			createdAt,
+			status: <ReactiveUserStatus uid={_id} />,
+			customStatus: <ReactiveUserStatusText uid={_id} />,
+			nickname,
+			freeSwitchExtension,
+		};
+	}, [data, getRoles]);
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				{onClickBack && <ContextualbarBack onClick={onClickBack} />}
+				{!onClickBack && <ContextualbarIcon name='user' />}
+				<ContextualbarTitle>{t('User_Info')}</ContextualbarTitle>
+				{onClose && <ContextualbarClose onClick={onClose} />}
+			</ContextualbarHeader>
+
+			{isPending && (
+				<ContextualbarContent>
+					<FormSkeleton />
+				</ContextualbarContent>
+			)}
+
+			{isError && !user && (
+				<ContextualbarContent paddingBlock={16}>
+					<Callout type='danger'>{t('User_not_found')}</Callout>
+				</ContextualbarContent>
+			)}
+
+			{!isPending && user && (
+				<UserInfo
+					{...user}
+					invitationDate={invitationDate}
+					actions={<UserInfoActions user={user} rid={rid} isInvited={Boolean(invitationDate)} backToList={onClickBack} />}
+				/>
+			)}
+		</ContextualbarDialog>
+	);
+};
+
+export default UserInfoWithData;

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

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