Merge branch 'develop' into convertAcsiiToEmoji-message-rewrite

apps/meteor/client/sidebar/RoomList/RoomList.tsx

@@ -11,27 +11,22 @@ import { useRoomList } from '../hooks/useRoomList';
 import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
 import { useSidebarPaletteColor } from '../hooks/useSidebarPaletteColor';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
-import Row from './Row';
+import RoomListRow from './RoomListRow';
 import ScrollerWithCustomProps from './ScrollerWithCustomProps';
 
 const computeItemKey = (index: number, room: IRoom): IRoom['_id'] | number => room._id || index;
 
 const RoomList = (): ReactElement => {
-	useSidebarPaletteColor();
-
+	const t = useTranslation();
+	const isAnonymous = !useUserId();
+	const roomsList = useRoomList();
+	const avatarTemplate = useAvatarTemplate();
+	const sideBarItemTemplate = useTemplateByViewMode();
 	const { ref } = useResizeObserver({ debounceDelay: 100 });
-
 	const openedRoom = (useSession('openedRoom') as string) || '';
-
 	const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended';
-	const sideBarItemTemplate = useTemplateByViewMode();
-	const avatarTemplate = useAvatarTemplate();
-	const extended = sidebarViewMode === 'extended';
-	const isAnonymous = !useUserId();
-
-	const t = useTranslation();
 
-	const roomsList = useRoomList();
+	const extended = sidebarViewMode === 'extended';
 	const itemData = useMemo(
 		() => ({
 			extended,
@@ -47,14 +42,16 @@ const RoomList = (): ReactElement => {
 
 	usePreventDefault(ref);
 	useShortcutOpenMenu(ref);
+	useSidebarPaletteColor();
+
 	return (
 		<Box h='full' w='full' ref={ref}>
 			<Virtuoso
 				totalCount={roomsList.length}
 				data={roomsList}
 				components={{ Scroller: ScrollerWithCustomProps }}
 				computeItemKey={computeItemKey}
-				itemContent={(_, data): ReactElement => <Row data={itemData} item={data} />}
+				itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
 			/>
 		</Box>
 	);

apps/meteor/client/sidebar/RoomList/Row.tsx → apps/meteor/client/sidebar/RoomList/RoomListRow.tsx

@@ -25,7 +25,7 @@ type RoomListRowProps = {
 	isAnonymous: boolean;
 };
 
-const Row = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRoom }): ReactElement => {
+const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRoom }): ReactElement => {
 	const { extended, t, SideBarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode } = data;
 
 	const acceptCall = useVideoConfAcceptCall();
@@ -62,9 +62,9 @@ const Row = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRo
 			extended={extended}
 			SideBarItemTemplate={SideBarItemTemplate}
 			AvatarTemplate={AvatarTemplate}
-			videoConfActions={currentCall && videoConfActions}
+			videoConfActions={videoConfActions}
 		/>
 	);
 };
 
-export default memo(Row);
+export default memo(RoomListRow);

apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rocket.chat/core-typings';
 import { Badge, Sidebar, SidebarItemAction } from '@rocket.chat/fuselage';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { AllHTMLAttributes, ComponentType, memo, ReactElement, ReactNode } from 'react';
+import React, { AllHTMLAttributes, ComponentType, memo, ReactElement, ReactNode, useMemo } from 'react';
 
 import { RoomIcon } from '../../components/RoomIcon';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
@@ -115,6 +115,17 @@ function SideBarItemTemplateWithData({
 		</Sidebar.Item.Icon>
 	);
 
+	const actions = useMemo(
+		() =>
+			videoConfActions && (
+				<>
+					<SidebarItemAction onClick={videoConfActions.acceptCall} secondary success icon='phone' />
+					<SidebarItemAction onClick={videoConfActions.rejectCall} secondary danger icon='phone-off' />
+				</>
+			),
+		[videoConfActions],
+	);
+
 	const isQueued = isOmnichannelRoom(room) && room.status === 'queued';
 
 	const threadUnread = tunread.length > 0;
@@ -151,14 +162,7 @@ function SideBarItemTemplateWithData({
 			style={style}
 			badges={badges}
 			avatar={AvatarTemplate && <AvatarTemplate {...room} />}
-			actions={
-				videoConfActions && (
-					<>
-						<SidebarItemAction onClick={videoConfActions.acceptCall} secondary success icon='phone' />
-						<SidebarItemAction onClick={videoConfActions.rejectCall} secondary danger icon='phone-off' />
-					</>
-				)
-			}
+			actions={actions}
 			menu={
 				!isAnonymous &&
 				!isQueued &&
@@ -195,6 +199,7 @@ const keys: (keyof RoomListRowProps)[] = [
 	'AvatarTemplate',
 	't',
 	'sidebarViewMode',
+	'videoConfActions',
 ];
 
 // eslint-disable-next-line react/no-multi-comp

apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx

@@ -173,11 +173,7 @@ const CurrentChatsRoute = (): ReactElement => {
 					<GenericTableCell withTruncatedText data-qa='current-chats-cell-status'>
 						{getStatusText(open, onHold)}
 					</GenericTableCell>
-					{canRemoveClosedChats && !open && (
-						<GenericTableCell withTruncatedText>
-							<RemoveChatButton _id={_id} />
-						</GenericTableCell>
-					)}
+					{canRemoveClosedChats && !open && <RemoveChatButton _id={_id} />}
 				</GenericTableRow>
 			);
 		},

apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx

@@ -1,9 +1,10 @@
-import { Table, IconButton } from '@rocket.chat/fuselage';
+import { IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
 import GenericModal from '../../../components/GenericModal';
+import { GenericTableCell } from '../../../components/GenericTable';
 import { useRemoveCurrentChatMutation } from './hooks/useRemoveCurrentChatMutation';
 
 const RemoveChatButton: FC<{ _id: string }> = ({ _id }) => {
@@ -38,9 +39,9 @@ const RemoveChatButton: FC<{ _id: string }> = ({ _id }) => {
 	});
 
 	return (
-		<Table.Cell fontScale='p2' color='hint' withTruncatedText data-qa='current-chats-cell-delete'>
+		<GenericTableCell maxHeight='x36' fontScale='p2' color='hint' withTruncatedText data-qa='current-chats-cell-delete'>
 			<IconButton small icon='trash' title={t('Remove')} disabled={removeCurrentChatMutation.isLoading} onClick={handleDelete} />
-		</Table.Cell>
+		</GenericTableCell>
 	);
 };