feat: added invitation badge to room members list

Author: aleksandernsilva

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

@@ -1,4 +1,4 @@
-import type { IRoom, IUser, IRole } from '@rocket.chat/core-typings';
+import type { IRoom } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Icon, TextInput, Select, Throbber, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
 import { useAutoFocus, useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
@@ -21,10 +21,9 @@ import { GroupedVirtuoso } from 'react-virtuoso';
 
 import { MembersListDivider } from './MembersListDivider';
 import RoomMembersRow from './RoomMembersRow';
+import type { RoomMemberUser } from './types';
 import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
 
-export type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'status' | 'freeSwitchExtension'> & { roles?: IRole['_id'][] };
-
 type RoomMembersProps = {
 	rid: IRoom['_id'];
 	isTeam?: boolean;

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx

@@ -1,4 +1,4 @@
-import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import type { IRoom } from '@rocket.chat/core-typings';
 import {
 	Option,
 	OptionAvatar,
@@ -16,22 +16,25 @@ import type { ReactElement, MouseEvent } from 'react';
 import { useState } from 'react';
 
 import UserActions from './RoomMembersActions';
+import InvitationBadge from './badges/InvitationBadge';
+import type { RoomMemberUser } from './types';
 import { getUserDisplayNames } from '../../../../../lib/getUserDisplayNames';
 import { ReactiveUserStatus } from '../../../../components/UserStatus';
 import { usePreventPropagation } from '../../../../hooks/usePreventPropagation';
 
-type RoomMembersItemProps = {
+type RoomMembersItemProps = RoomMemberUser & {
 	onClickView: (e: MouseEvent<HTMLElement>) => void;
 	rid: IRoom['_id'];
 	reload: () => void;
 	useRealName: boolean;
-} & Pick<IUser, 'federated' | 'username' | 'name' | '_id' | 'freeSwitchExtension'>;
+};
 
 const RoomMembersItem = ({
 	_id,
 	name,
 	username,
 	federated,
+	status,
 	freeSwitchExtension,
 	onClickView,
 	rid,
@@ -57,6 +60,11 @@ const RoomMembersItem = ({
 			<OptionContent data-qa={`MemberItem-${username}`}>
 				{nameOrUsername} {displayUsername && <OptionDescription>({displayUsername})</OptionDescription>}
 			</OptionContent>
+			{status === 'INVITED' && (
+				<OptionColumn>
+					<InvitationBadge />
+				</OptionColumn>
+			)}
 			<OptionMenu onClick={preventPropagation}>
 				{showButton ? (
 					<UserActions username={username} name={name} rid={rid} _id={_id} freeSwitchExtension={freeSwitchExtension} reload={reload} />

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersRow.tsx

@@ -1,11 +1,12 @@
-import type { IUser, IRoom } from '@rocket.chat/core-typings';
+import type { IRoom } from '@rocket.chat/core-typings';
 import type { MouseEvent, ReactElement } from 'react';
 import { memo } from 'react';
 
 import RoomMembersItem from './RoomMembersItem';
+import type { RoomMemberUser } from './types';
 
 type RoomMembersRowProps = {
-	user: Pick<IUser, 'federated' | 'username' | 'name' | '_id' | 'freeSwitchExtension'>;
+	user: RoomMemberUser;
 	data: {
 		onClickView: (e: MouseEvent<HTMLElement>) => void;
 		rid: IRoom['_id'];
@@ -25,6 +26,7 @@ const RoomMembersRow = ({ user, data: { onClickView, rid }, index, reload, useRe
 			key={index}
 			useRealName={useRealName}
 			username={user.username}
+			status={user.status}
 			_id={user._id}
 			rid={rid}
 			name={user.name}

apps/meteor/client/views/room/contextualBar/RoomMembers/badges/InvitationBadge.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+const InvitationBadge = () => {
+	const { t } = useTranslation();
+
+	return (
+		<Icon
+			role='status'
+			name='mail'
+			mbs={2}
+			size='x20'
+			color='info'
+			title={t('Message_request')}
+			aria-hidden='false'
+			aria-label={t('Message_request')}
+		/>
+	);
+};
+
+export default InvitationBadge;

apps/meteor/client/views/room/contextualBar/RoomMembers/types.ts

@@ -0,0 +1,6 @@
+import type { IUser, IRole, SubscriptionStatus, UserStatus } from '@rocket.chat/core-typings';
+
+export type RoomMemberUser = Pick<IUser, 'username' | '_id' | 'name' | 'freeSwitchExtension' | 'federated'> & {
+	roles?: IRole['_id'][];
+	status?: UserStatus | SubscriptionStatus;
+};

packages/i18n/src/locales/en.i18n.json

@@ -3448,6 +3448,7 @@
   "Message_list": "Message list",
   "Message_pinning": "Message pinning",
   "Message_removed": "message removed",
+  "Message_request": "Message request",
   "Message_sent": "Message sent",
   "Message_sent_by_email": "Message sent by Email",
   "Message_starring": "Message starring",