[FIX] Wrong member's contextualBar on direct multiple (#21452)

* wip

* replace method to endpoint

* add types

* add e2e support

* fix team members

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>

app/apps/client/gameCenter/tabBar.ts

@@ -18,7 +18,7 @@ addAction('game-center', () => {
 		&& !hasError
 		&& hasExternalComponents
 			? {
-				groups: ['channel', 'group', 'direct', 'team'],
+				groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 				id: 'game-center',
 				title: 'Apps_Game_Center',
 				icon: 'game',

app/autotranslate/client/lib/tabBar.ts

@@ -8,7 +8,7 @@ addAction('autotranslate', () => {
 	const hasPermission = usePermission('auto-translate');
 	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
 	return useMemo(() => (hasPermission && autoTranslateEnabled ? {
-		groups: ['channel', 'group', 'direct', 'team'],
+		groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 		id: 'autotranslate',
 		title: 'Auto_Translate',
 		icon: 'language',

app/discussion/client/tabBar.ts

@@ -9,7 +9,7 @@ addAction('discussions', () => {
 	const discussionEnabled = useSetting('Discussion_enabled');
 
 	return useMemo(() => (discussionEnabled ? {
-		groups: ['channel', 'group', 'direct', 'team'],
+		groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 		id: 'discussions',
 		title: 'Discussions',
 		icon: 'discussion',

app/e2e/client/tabbar.ts

@@ -24,7 +24,7 @@ addAction('e2e', ({ room }) => {
 	const enabledOnRoom = !!room.encrypted;
 
 	return useMemo(() => (e2eEnabled && hasPermission ? {
-		groups: ['direct', 'group', 'team'],
+		groups: ['direct', 'direct_multiple', 'group', 'team'],
 		id: 'e2e',
 		title: enabledOnRoom ? 'E2E_disable' : 'E2E_enable',
 		icon: 'key',

app/message-pin/client/tabBar.ts

@@ -6,7 +6,7 @@ import { useSetting } from '../../../client/contexts/SettingsContext';
 addAction('pinned-messages', () => {
 	const pinningAllowed = useSetting('Message_AllowPinning');
 	return useMemo(() => (pinningAllowed ? {
-		groups: ['channel', 'group', 'direct', 'team'],
+		groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 		id: 'pinned-messages',
 		title: 'Pinned_Messages',
 		icon: 'pin',

app/message-snippet/client/tabBar/tabBar.ts

@@ -6,7 +6,7 @@ import { useSetting } from '../../../../client/contexts/SettingsContext';
 addAction('snippeted-messages', () => {
 	const snippetingEnabled = useSetting('Message_AllowSnippeting');
 	return useMemo(() => (snippetingEnabled ? {
-		groups: ['channel', 'group', 'direct', 'team'],
+		groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 		id: 'snippeted-messages',
 		title: 'snippet-message',
 		icon: 'code',

app/message-star/client/tabBar.ts

@@ -1,7 +1,7 @@
 import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('starred-messages', {
-	groups: ['channel', 'group', 'direct', 'team'],
+	groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 	id: 'starred-messages',
 	title: 'Starred_Messages',
 	icon: 'star',

app/push-notifications/client/tabBar.ts

@@ -3,7 +3,7 @@ import { lazy } from 'react';
 import { addAction } from '../../../client/views/room/lib/Toolbox';
 
 addAction('push-notifications', {
-	groups: ['channel', 'group', 'direct', 'team'],
+	groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 	id: 'push-notifications',
 	title: 'Notifications_Preferences',
 	icon: 'bell',

app/threads/client/flextab/threadlist.tsx

@@ -22,7 +22,7 @@ addAction('thread', (options) => {
 	const room = options.room as unknown as ISubscription;
 	const threadsEnabled = useSetting('Threads_enabled');
 	return useMemo(() => (threadsEnabled ? {
-		groups: ['channel', 'group', 'direct', 'team'],
+		groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 		id: 'thread',
 		full: true,
 		title: 'Threads',

app/ui-clean-history/client/lib/tabBar.ts

@@ -9,7 +9,7 @@ const template = lazy(() => import('../../../../client/views/room/contextualBar/
 addAction('clean-history', ({ room }) => {
 	const hasPermission = usePermission('clean-channel-history', room._id);
 	return useMemo(() => (hasPermission ? {
-		groups: ['channel', 'group', 'team', 'direct'],
+		groups: ['channel', 'group', 'team', 'direct_multiple', 'direct'],
 		id: 'clean-history',
 		full: true,
 		title: 'Prune_Messages',

client/contexts/ServerContext/endpoints.ts

@@ -1,5 +1,6 @@
 import { ExternalComponentsEndpoint as AppsExternalComponentsEndpoint } from './endpoints/apps/externalComponents';
 import { FilesEndpoint as ChannelsFilesEndpoint } from './endpoints/v1/channels/files';
+import { ChannelsMembersEndpoint } from './endpoints/v1/channels/members';
 import { FollowMessageEndpoint as ChatFollowMessageEndpoint } from './endpoints/v1/chat/followMessage';
 import { GetDiscussionsEndpoint as ChatGetDiscussionsEndpoint } from './endpoints/v1/chat/getDiscussions';
 import { GetMessageEndpoint as ChatGetMessageEndpoint } from './endpoints/v1/chat/getMessage';
@@ -9,7 +10,9 @@ import { ManualRegisterEndpoint as CloudManualRegisterEndpoint } from './endpoin
 import { ListEndpoint as CustomUserStatusListEndpoint } from './endpoints/v1/custom-user-status/list';
 import { ListEndpoint as EmojiCustomListEndpoint } from './endpoints/v1/emoji-custom/list';
 import { FilesEndpoint as GroupsFilesEndpoint } from './endpoints/v1/groups/files';
+import { GroupsMembersEndpoint } from './endpoints/v1/groups/members';
 import { FilesEndpoint as ImFilesEndpoint } from './endpoints/v1/im/files';
+import { ImMembersEndpoint } from './endpoints/v1/im/members';
 import { AppearanceEndpoint as LivechatAppearanceEndpoint } from './endpoints/v1/livechat/appearance';
 import { LivechatDepartment } from './endpoints/v1/livechat/department';
 import { LivechatDepartmentsByUnit } from './endpoints/v1/livechat/departmentsByUnit';
@@ -32,7 +35,10 @@ export type ServerEndpoints = {
 	'emoji-custom.list': EmojiCustomListEndpoint;
 	'channels.files': ChannelsFilesEndpoint;
 	'im.files': ImFilesEndpoint;
+	'im.members': ImMembersEndpoint;
 	'groups.files': GroupsFilesEndpoint;
+	'groups.members': GroupsMembersEndpoint;
+	'channels.members': ChannelsMembersEndpoint;
 	'users.autocomplete': UsersAutocompleteEndpoint;
 	'livechat/appearance': LivechatAppearanceEndpoint;
 	'custom-user-status.list': CustomUserStatusListEndpoint;

client/contexts/ServerContext/endpoints/v1/channels/members.ts

@@ -0,0 +1,16 @@
+import { IUser } from '../../../../../../definition/IUser';
+
+export type ChannelsMembersEndpoint = {
+	GET: (params: {
+		roomId: string;
+		offset?: number;
+		count?: number;
+		filter?: string;
+		status?: Array<string>;
+	}) => {
+		count: number;
+		offset: number;
+		members: Array<IUser>;
+		total: number;
+	};
+};

client/contexts/ServerContext/endpoints/v1/groups/members.ts

@@ -0,0 +1,3 @@
+import { ChannelsMembersEndpoint } from '../channels/members';
+
+export type GroupsMembersEndpoint = ChannelsMembersEndpoint;

client/contexts/ServerContext/endpoints/v1/im/members.ts

@@ -0,0 +1,3 @@
+import { ChannelsMembersEndpoint } from '../channels/members';
+
+export type ImMembersEndpoint = ChannelsMembersEndpoint;

client/startup/contextualBar/exportMessages.ts

@@ -9,7 +9,7 @@ addAction('export-messages', ({ room }) => {
 		() =>
 			hasPermission
 				? {
-						groups: ['channel', 'group', 'direct'],
+						groups: ['channel', 'group', 'direct', 'direct_multiple', 'team'],
 						id: 'export-messages',
 						anonymous: true,
 						title: 'Export_Messages',

client/views/hooks/useMembersList.ts

@@ -2,18 +2,25 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { getConfig } from '../../../app/ui-utils/client/config';
 import { IUser } from '../../../definition/IUser';
-import { useMethod } from '../../contexts/ServerContext';
+import { useEndpoint } from '../../contexts/ServerContext';
 import { useScrollableRecordList } from '../../hooks/lists/useScrollableRecordList';
 import { useComponentDidUpdate } from '../../hooks/useComponentDidUpdate';
 import { RecordList } from '../../lib/lists/RecordList';
 
 type MembersListOptions = {
 	rid: string;
-	type: 'all' | 'autoJoin';
+	type: 'all' | 'online';
 	limit: number;
 	debouncedText: string;
+	roomType: 'd' | 'p' | 'c';
 };
 
+const endpointsByRoomType = {
+	d: 'im.members',
+	p: 'groups.members',
+	c: 'channels.members',
+} as const;
+
 export const useMembersList = (
 	options: MembersListOptions,
 ): {
@@ -22,7 +29,7 @@ export const useMembersList = (
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
-	const getUsersMethod = useMethod('getUsersOfRoom');
+	const getMembers = useEndpoint('GET', endpointsByRoomType[options.roomType]);
 	const [membersList, setMembersList] = useState(() => new RecordList<IUser>());
 	const reload = useCallback(() => setMembersList(new RecordList<IUser>()), []);
 
@@ -32,25 +39,23 @@ export const useMembersList = (
 
 	const fetchData = useCallback(
 		async (start, end) => {
-			const { records, total } = await getUsersMethod(
-				options.rid,
-				options.type,
-				{
-					limit: end,
-					skip: start,
-				},
-				options.debouncedText,
-			);
+			const { members, total } = await getMembers({
+				roomId: options.rid,
+				offset: start,
+				count: end,
+				...(options.debouncedText && { filter: options.debouncedText }),
+				...(options.type !== 'all' && { status: [options.type] }),
+			});
 
 			return {
-				items: records.map((members: any) => {
+				items: members.map((members: any) => {
 					members._updatedAt = new Date(members._updatedAt);
 					return members;
 				}),
 				itemCount: total,
 			};
 		},
-		[getUsersMethod, options],
+		[getMembers, options],
 	);
 
 	const { loadMoreItems, initialItemCount } = useScrollableRecordList(

client/views/room/contextualBar/RoomMembers/List/RoomMembersWithData.js

@@ -20,6 +20,7 @@ const RoomMembersWithData = ({ rid }) => {
 	const [state, setState] = useState({});
 	const onClickClose = useTabBarClose();
 	const room = useUserRoom(rid);
+
 	room.type = room.t;
 	room.rid = rid;
 
@@ -29,10 +30,11 @@ const RoomMembersWithData = ({ rid }) => {
 	const debouncedText = useDebouncedValue(text, 800);
 
 	const { membersList, loadMoreItems, reload } = useMembersList(
-		useMemo(() => ({ rid, type: type === 'all', limit: 50, debouncedText }), [
+		useMemo(() => ({ rid, type, limit: 50, debouncedText, roomType: room.t }), [
 			rid,
 			type,
 			debouncedText,
+			room.t,
 		]),
 	);
 

client/views/room/providers/VirtualAction.tsx

@@ -12,11 +12,16 @@ const groupsDict = {
 };
 
 const getGroup = (room: IRoom): string => {
+	const group = groupsDict[room.t];
 	if (room.teamMain) {
 		return 'team';
 	}
 
-	return groupsDict[room.t];
+	if (group === groupsDict.d && room.uids.length > 2) {
+		return 'direct_multiple';
+	}
+
+	return group;
 };
 
 const VirtualAction = ({

client/views/teams/contextualBar/members/TeamsMembers.js

@@ -30,10 +30,11 @@ const TeamMembers = ({ rid }) => {
 	const debouncedText = useDebouncedValue(text, 500);
 
 	const { membersList, loadMoreItems, reload } = useMembersList(
-		useMemo(() => ({ rid, type: type === 'all', limit: 50, debouncedText }), [
+		useMemo(() => ({ rid, type, limit: 50, debouncedText, roomType: room.t }), [
 			rid,
 			type,
 			debouncedText,
+			room.t,
 		]),
 	);
 

definition/IRoom.ts

@@ -26,6 +26,7 @@ export interface IRoom extends IRocketChatRecord {
 	topic: any;
 
 	u: Pick<IUser, '_id' | 'username' | 'name'>;
+	uids: Array<string>;
 
 	lastMessage?: IMessage;
 	lm?: Date;