backend integration

app/api/server/v1/teams.ts

@@ -218,10 +218,14 @@ API.v1.addRoute('teams.removeMembers', { authRequired: true }, {
 			return API.v1.unauthorized();
 		}
 
-		const { teamId, teamName, members } = this.bodyParams;
+		const { teamId, teamName, members, rooms } = this.bodyParams;
 
 		Promise.await(Team.removeMembers(teamId, teamName, members));
 
+		if (rooms?.length) {
+			Subscriptions.removeByRoomIdsAndUserId(rooms, this.userId);
+		}
+
 		return API.v1.success();
 	},
 });

client/views/room/hooks/useUserInfoActions.js

@@ -16,6 +16,7 @@ import { roomTypes, RoomMemberActions } from '../../../../app/utils';
 import { useEndpointActionExperimental } from '../../../hooks/useEndpointAction';
 import { useUserRoom } from './useUserRoom';
 import { escapeHTML } from '../../../../lib/escapeHTML';
+import RemoveUsersModalWithRooms from '../../teams/members/RemoveUsers';
 
 const useUserHasRoomRole = (uid, rid, role) => useReactiveValue(useCallback(() => !!RoomRoles.findOne({ rid, 'u._id': uid, roles: role }), [uid, rid, role]));
 
@@ -288,8 +289,23 @@ export const useUserInfoActions = (user = {}, rid) => {
 		};
 	}, [closeModal, dispatchToastMessage, isMuted, muteFn, rid, roomCanMute, roomName, setModal, t, user.username, userCanMute]);
 
+	const removeFromTeam = useEndpointActionExperimental('POST', 'teams.removeMembers', t('User_has_been_removed_from_team'));
+
 	const removeUserAction = useEndpointActionExperimental('POST', `${ endpointPrefix }.kick`, t('User_has_been_removed_from_s', roomName));
 	const removeUserOptionAction = useMutableCallback(() => {
+		if (room.teamMain && room.teamId) {
+			return setModal(<RemoveUsersModalWithRooms
+				teamId={room?.teamId}
+				userId={user?._id}
+				onClose={closeModal}
+				onCancel={closeModal}
+				onConfirm={(rooms) => {
+					removeFromTeam({ teamId: room.teamId, members: [{ userId: user._id }], rooms });
+					closeModal();
+				}}
+			/>);
+		}
+
 		setModal(<WarningModal
 			text={t('The_user_will_be_removed_from_s', roomName)}
 			close={closeModal}
@@ -298,10 +314,10 @@ export const useUserInfoActions = (user = {}, rid) => {
 		/>);
 	});
 	const removeUserOption = useMemo(() => roomCanRemove && userCanRemove && {
-		label: <Box color='danger'>{t('Remove_from_room')}</Box>,
+		label: <Box color='danger'>{room.teamMain ? t('Remove_from_team') : t('Remove_from_room')}</Box>,
 		icon: 'sign-out',
 		action: removeUserOptionAction,
-	}, [roomCanRemove, userCanRemove, removeUserOptionAction, t]);
+	}, [room, roomCanRemove, userCanRemove, removeUserOptionAction, t]);
 
 	return useMemo(() => ({
 		...openDirectMessageOption && { openDirectMessage: openDirectMessageOption },

client/views/room/providers/ToolboxProvider.tsx

@@ -18,13 +18,11 @@ const groupsDict = {
 };
 
 const getGroup = (room: IRoom): string => {
-	console.log(room);
-	return 'team';
-	// if (room.teamId) {
-	// 	return 'team';
-	// }
+	if (room.teamId) {
+		return 'team';
+	}
 
-	// return groupsDict[room.t];
+	return groupsDict[room.t];
 };
 
 

client/views/teams/ChannelDesertionTable.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Box, CheckBox, Table, Icon, Margins } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import GenericTable from '../../components/GenericTable';
+import { useRoomIcon } from '../../hooks/useRoomIcon';
+import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
+import { useTranslation } from '../../contexts/TranslationContext';
+
+const ChannelRow = ({ onChange, selected, room, lastOwnerWarning = '', formatDate }) => {
+	const { name, fname, ts, isLastOwner } = room;
+
+	const handleChange = useMutableCallback(() => onChange(room));
+
+	return <Table.Row action>
+		<Table.Cell maxWidth='x300' withTruncatedText >
+			<CheckBox checked={selected} onChange={handleChange} disabled={isLastOwner}/>
+			<Margins inline='x8'>
+				<Icon size='x16' {...useRoomIcon(room)} />
+				{fname ?? name}
+				{isLastOwner && <Icon size='x16' name='info-circled' color='danger' title={lastOwnerWarning}/>}
+			</Margins>
+		</Table.Cell>
+
+		<Table.Cell align='end' withTruncatedText>
+			{formatDate(ts)}
+		</Table.Cell>
+	</Table.Row>;
+};
+
+const ChannelDesertionTable = ({
+	rooms,
+	eligibleRoomsLength,
+	params,
+	onChangeParams,
+	onChangeRoomSelection,
+	selectedRooms,
+	onToggleAllRooms,
+	lastOwnerWarning,
+}) => {
+	const t = useTranslation();
+
+	const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length;
+
+	const checked = eligibleRoomsLength === selectedRoomsLength;
+	const indeterminate = eligibleRoomsLength > selectedRoomsLength && selectedRoomsLength > 0;
+
+	const formatDate = useFormatDateAndTime();
+
+	return <Box display='flex' flexDirection='column' height='x200' mbs='x24'>
+		<GenericTable
+			header={<>
+				<GenericTable.HeaderCell key='name' sort='name'>
+					<CheckBox indeterminate={indeterminate} checked={checked} onChange={onToggleAllRooms}/>
+					<Box mi='x8'>{t('Channel_name')}</Box>
+				</GenericTable.HeaderCell>
+				<GenericTable.HeaderCell key='joinedAt' sort='joinedAt'>
+					<Box width='100%' textAlign='end'>{t('Joined_at')}</Box>
+				</GenericTable.HeaderCell>
+			</>}
+			results={rooms}
+			params={params}
+			setParams={onChangeParams}
+			fixed={false}
+			pagination={false}
+		>
+			{({ key, ...room }) => <ChannelRow
+				formatDate={formatDate}
+				room={room}
+				key={key}
+				onChange={onChangeRoomSelection}
+				selected={!!selectedRooms[room._id]}
+				lastOwnerWarning={lastOwnerWarning}
+			/>}
+		</GenericTable>
+	</Box>;
+};
+
+export default ChannelDesertionTable;

client/views/teams/info/tabBar.ts

@@ -2,17 +2,13 @@ import { FC, lazy, LazyExoticComponent } from 'react';
 
 import { addAction } from '../../room/lib/Toolbox';
 
-addAction('team-info', (room) => {
-	console.log(room);
-
-	return {
-		groups: ['team'],
-		id: 'team-info',
-		anonymous: true,
-		full: true,
-		title: 'Teams_Info',
-		icon: 'info-circled',
-		template: lazy(() => import('./index.js')) as LazyExoticComponent<FC>,
-		order: 7,
-	};
+addAction('team-info', {
+	groups: ['team'],
+	id: 'team-info',
+	anonymous: true,
+	full: true,
+	title: 'Teams_Info',
+	icon: 'info-circled',
+	template: lazy(() => import('./index.js')) as LazyExoticComponent<FC>,
+	order: 7,
 });