Merge branch 'develop' into broad

RocketChat · Apr 19, 2022 · 8536529 · 8536529
2 parents bea924e + 4d9dff6
commit 8536529
Show file tree

Hide file tree

Showing 18 changed files with 145 additions and 342 deletions.
diff --git a/apps/meteor/app/2fa/client/overrideMeteorCall.ts b/apps/meteor/app/2fa/client/overrideMeteorCall.ts
@@ -20,7 +20,7 @@ const callWithTotp =
 				(error as { toastrShowed?: true }).toastrShowed = true;
 				dispatchToastMessage({
 					type: 'error',
-					message: t('Invalid_two_factor_code'),
+					message: twoFactorMethod === 'password' ? t('Invalid_password') : t('Invalid_two_factor_code'),
 				});
 				callback(error);
 				return;

diff --git a/apps/meteor/app/emoji/client/lib/EmojiPicker.js b/apps/meteor/app/emoji/client/lib/EmojiPicker.js
@@ -70,8 +70,12 @@ export const EmojiPicker = {
 		const windowHeight = window.innerHeight;
 		const windowWidth = window.innerWidth;
 		const windowBorder = 10;
-		const sourcePos = $(this.source).offset();
-		const { left, top } = sourcePos;
+
+		// get the position of the source element
+		let { left, top } = this.source.getBoundingClientRect();
+		left += window.scrollX;
+		top += window.scrollY;
+
 		const cssProperties = { top, left };
 		const isLargerThanWindow = this.width + windowBorder > windowWidth;
 

diff --git a/apps/meteor/app/ui-utils/client/lib/popover.js b/apps/meteor/app/ui-utils/client/lib/popover.js
@@ -157,6 +157,7 @@ Template.popover.onDestroyed(function () {
 
 Template.popover.events({
 	'click .js-action'(e, instance) {
+		e.stopPropagation();
 		!this.action || this.action.call(this, e, instance.data.data);
 		popover.close();
 	},

diff --git a/apps/meteor/client/components/ErrorBoundary.tsx b/apps/meteor/client/components/ErrorBoundary.tsx
@@ -1,15 +1,19 @@
-import { Component, ReactNode } from 'react';
+import { Component, ReactNode, ErrorInfo } from 'react';
 
-export class ErrorBoundary extends Component<{}, { hasError: boolean }> {
+export class ErrorBoundary extends Component<{ fallback?: ReactNode }, { hasError: boolean }> {
 	state = { hasError: false };
 
 	static getDerivedStateFromError(): { hasError: boolean } {
 		return { hasError: true };
 	}
 
+	componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+		console.error('Uncaught Error:', error, errorInfo);
+	}
+
 	render(): ReactNode {
 		if (this.state.hasError) {
-			return null;
+			return this.props.fallback || null;
 		}
 
 		return this.props.children;

diff --git a/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx b/apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx
@@ -31,16 +31,18 @@ export const WrapUpCallModal = (): ReactElement => {
 		setValue('tags', value);
 	};
 
-	const onSubmit: SubmitHandler<WrapUpCallPayload> = (data): void => {
+	const onSubmit: SubmitHandler<WrapUpCallPayload> = (data: { comment?: string; tags?: string[] }): void => {
 		closeRoom(data);
 		closeModal();
 	};
 
 	const onCancel = (): void => {
-		closeRoom({});
+		closeRoom();
 		closeModal();
 	};
 
+	useEffect(() => closeRoom, [closeRoom]);
+
 	return (
 		<Modal is='form' onSubmit={handleSubmit(onSubmit)}>
 			<Modal.Header>

diff --git a/apps/meteor/client/contexts/CallContext.ts b/apps/meteor/client/contexts/CallContext.ts
@@ -27,7 +27,7 @@ type CallContextReady = {
 	openWrapUpModal: () => void;
 	openRoom: (rid: IVoipRoom['_id']) => void;
 	createRoom: (caller: ICallerInfo) => IVoipRoom['_id'];
-	closeRoom: (data: { comment?: string; tags?: string[] }) => void;
+	closeRoom: (data?: { comment?: string; tags?: string[] }) => void;
 };
 type CallContextError = {
 	enabled: true;

diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx
@@ -294,8 +294,14 @@ export const CallProvider: FC = ({ children }) => {
 				}
 				return '';
 			},
-			closeRoom: async ({ comment, tags }: { comment: string; tags: string[] }): Promise<void> => {
-				roomInfo && (await voipCloseRoomEndpoint({ rid: roomInfo.rid, token: roomInfo.v.token || '', comment: comment || '', tags }));
+			closeRoom: async (data?: { comment: string; tags: string[] }): Promise<void> => {
+				roomInfo &&
+					(await voipCloseRoomEndpoint({
+						rid: roomInfo.rid,
+						token: roomInfo.v.token || '',
+						comment: data?.comment || '',
+						tags: data?.tags,
+					}));
 				homeRoute.push({});
 				const queueAggregator = voipClient.getAggregator();
 				if (queueAggregator) {

diff --git a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.js b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.js
@@ -95,7 +95,7 @@ const AnalyticsPage = () => {
 							alignSelf='stretch'
 						/>
 						<Box display='flex' w='33%' flexDirection='row' justifyContent='stretch' p='x10' mis='x4'>
-							<AgentOverview type={chartName} dateRange={dateRange} departmentId={department} />
+							<AgentOverview type={chartName} dateRange={dateRange} departmentId={department?.value} />
 						</Box>
 					</Box>
 				</Margins>

diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx
@@ -9,6 +9,7 @@ import { useUserSubscription } from '../../../contexts/UserContext';
 import { useFormatDate } from '../../../hooks/useFormatDate';
 import { MessageProvider } from '../providers/MessageProvider';
 import { SelectedMessagesProvider } from '../providers/SelectedMessagesProvider';
+import MessageListErrorBoundary from './MessageListErrorBoundary';
 import Message from './components/Message';
 import MessageSystem from './components/MessageSystem';
 import { ThreadMessagePreview } from './components/ThreadMessagePreview';
@@ -29,69 +30,71 @@ export const MessageList: FC<{ rid: IRoom['_id'] }> = ({ rid }) => {
 	const format = useFormatDate();
 
 	return (
-		<MessageListProvider rid={rid}>
-			<MessageProvider rid={rid} broadcast={isBroadcast}>
-				<SelectedMessagesProvider>
-					<MessageHighlightProvider>
-						{messages.map((message, index, arr) => {
-							const previous = arr[index - 1];
+		<MessageListErrorBoundary>
+			<MessageListProvider rid={rid}>
+				<MessageProvider rid={rid} broadcast={isBroadcast}>
+					<SelectedMessagesProvider>
+						<MessageHighlightProvider>
+							{messages.map((message, index, arr) => {
+								const previous = arr[index - 1];
 
-							const isSequential = isMessageSequential(message, previous, messageGroupingPeriod);
+								const isSequential = isMessageSequential(message, previous, messageGroupingPeriod);
 
-							const isNewDay = isMessageNewDay(message, previous);
-							const isFirstUnread = isMessageFirstUnread(subscription, message, previous);
-							const isUserOwnMessage = isOwnUserMessage(message, subscription);
-							const shouldShowDivider = isNewDay || isFirstUnread;
+								const isNewDay = isMessageNewDay(message, previous);
+								const isFirstUnread = isMessageFirstUnread(subscription, message, previous);
+								const isUserOwnMessage = isOwnUserMessage(message, subscription);
+								const shouldShowDivider = isNewDay || isFirstUnread;
 
-							const shouldShowAsSequential = isSequential && !isNewDay;
+								const shouldShowAsSequential = isSequential && !isNewDay;
 
-							const isSystemMessage = MessageTypes.isSystemMessage(message);
-							const shouldShowMessage = !isThreadMessage(message) && !isSystemMessage;
+								const isSystemMessage = MessageTypes.isSystemMessage(message);
+								const shouldShowMessage = !isThreadMessage(message) && !isSystemMessage;
 
-							return (
-								<Fragment key={message._id}>
-									{shouldShowDivider && (
-										<MessageDivider unreadLabel={isFirstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
-											{isNewDay && format(message.ts)}
-										</MessageDivider>
-									)}
+								return (
+									<Fragment key={message._id}>
+										{shouldShowDivider && (
+											<MessageDivider unreadLabel={isFirstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
+												{isNewDay && format(message.ts)}
+											</MessageDivider>
+										)}
 
-									{shouldShowMessage && (
-										<Message
-											id={message._id}
-											data-id={message._id}
-											data-system-message={Boolean(message.t)}
-											data-mid={message._id}
-											data-unread={isFirstUnread}
-											data-sequential={isSequential}
-											data-own={isUserOwnMessage}
-											data-qa-type='message'
-											sequential={shouldShowAsSequential}
-											message={message}
-											subscription={subscription}
-										/>
-									)}
+										{shouldShowMessage && (
+											<Message
+												id={message._id}
+												data-id={message._id}
+												data-system-message={Boolean(message.t)}
+												data-mid={message._id}
+												data-unread={isFirstUnread}
+												data-sequential={isSequential}
+												data-own={isUserOwnMessage}
+												data-qa-type='message'
+												sequential={shouldShowAsSequential}
+												message={message}
+												subscription={subscription}
+											/>
+										)}
 
-									{isThreadMessage(message) && (
-										<ThreadMessagePreview
-											data-system-message={Boolean(message.t)}
-											data-mid={message._id}
-											data-tmid={message.tmid}
-											data-unread={isFirstUnread}
-											data-sequential={isSequential}
-											sequential={shouldShowAsSequential}
-											message={message as IThreadMessage}
-										/>
-									)}
+										{isThreadMessage(message) && (
+											<ThreadMessagePreview
+												data-system-message={Boolean(message.t)}
+												data-mid={message._id}
+												data-tmid={message.tmid}
+												data-unread={isFirstUnread}
+												data-sequential={isSequential}
+												sequential={shouldShowAsSequential}
+												message={message as IThreadMessage}
+											/>
+										)}
 
-									{isSystemMessage && <MessageSystem message={message} />}
-								</Fragment>
-							);
-						})}
-					</MessageHighlightProvider>
-				</SelectedMessagesProvider>
-			</MessageProvider>
-		</MessageListProvider>
+										{isSystemMessage && <MessageSystem message={message} />}
+									</Fragment>
+								);
+							})}
+						</MessageHighlightProvider>
+					</SelectedMessagesProvider>
+				</MessageProvider>
+			</MessageListProvider>
+		</MessageListErrorBoundary>
 	);
 };
 

diff --git a/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx b/apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx
@@ -0,0 +1,32 @@
+import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage';
+import React, { ReactElement, ReactNode } from 'react';
+
+import { ErrorBoundary } from '../../../components/ErrorBoundary';
+import { useTranslation } from '../../../contexts/TranslationContext';
+
+const MessageListErrorBoundary = ({ children }: { children: ReactNode }): ReactElement => {
+	const t = useTranslation();
+	return (
+		<ErrorBoundary
+			children={children}
+			fallback={
+				<States>
+					<StatesIcon name='circle-exclamation' variation='danger' />
+					<StatesTitle>{t('Error')}</StatesTitle>
+					<StatesSubtitle>{t('Error_something_went_wrong')}</StatesSubtitle>
+					<StatesActions>
+						<StatesAction
+							onClick={(): void => {
+								location.reload();
+							}}
+						>
+							<Icon name='reload' /> {t('Reload')}
+						</StatesAction>
+					</StatesActions>
+				</States>
+			}
+		/>
+	);
+};
+
+export default MessageListErrorBoundary;
diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
@@ -17,8 +17,8 @@ import { UserPresence } from '../../../../lib/presence';
 import MessageBlock from '../../../blocks/MessageBlock';
 import MessageLocation from '../../../location/MessageLocation';
 import { useMessageActions, useMessageOembedIsEnabled, useMessageRunActionLink } from '../../contexts/MessageContext';
-import { useMessageListShowReadReceipt } from '../contexts/MessageListContext';
 import { isOwnUserMessage } from '../lib/isOwnUserMessage';
+import { useMessageListShowReadReceipt, useMessageShowReadReceipt } from '../contexts/MessageListContext';
 import EncryptedMessageRender from './EncryptedMessageRender';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
@@ -36,7 +36,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 	const runActionLink = useMessageRunActionLink();
 
 	const oembedIsEnabled = useMessageOembedIsEnabled();
-	const shouldShowReadReceipt = useMessageListShowReadReceipt();
+	const shouldShowReadReceipt = useMessageShowReadReceipt({ message });
 	const user: UserPresence = { ...message.u, roles: [], ...useUserData(message.u._id) };
 	const isEncryptedMessage = isE2EEMessage(message);
 

diff --git a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx
@@ -5,6 +5,7 @@ export type MessageListContextValue = {
 	useShowTranslated: ({ message }: { message: IMessage }) => boolean;
 	useShowStarred: ({ message }: { message: IMessage }) => boolean;
 	useShowFollowing: ({ message }: { message: IMessage }) => boolean;
+	useShowReadReceipt: ({ message }: { message: IMessage }) => boolean;
 	useMessageDateFormatter: () => (date: Date) => string;
 	useUserHasReacted: (message: IMessage) => (reaction: string) => boolean;
 	useReactToMessage: (message: IMessage) => (reaction: string) => void;
@@ -13,7 +14,6 @@ export type MessageListContextValue = {
 	showRoles: boolean;
 	showRealName: boolean;
 	showUsername: boolean;
-	showReadReceipt: boolean;
 	highlights?:
 		| {
 				highlight: string;
@@ -26,6 +26,7 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	useShowTranslated: () => false,
 	useShowStarred: () => false,
 	useShowFollowing: () => false,
+	useShowReadReceipt: () => false,
 	useUserHasReacted: () => (): boolean => false,
 	useMessageDateFormatter:
 		() =>
@@ -40,7 +41,6 @@ export const MessageListContext = createContext<MessageListContextValue>({
 	showRoles: false,
 	showRealName: false,
 	showUsername: false,
-	showReadReceipt: false,
 });
 
 export const useShowTranslated: MessageListContextValue['useShowTranslated'] = (...args) =>
@@ -51,11 +51,11 @@ export const useShowFollowing: MessageListContextValue['useShowFollowing'] = (..
 	useContext(MessageListContext).useShowFollowing(...args);
 export const useMessageDateFormatter: MessageListContextValue['useMessageDateFormatter'] = (...args) =>
 	useContext(MessageListContext).useMessageDateFormatter(...args);
+export const useMessageShowReadReceipt: MessageListContextValue['useShowReadReceipt'] = (...args) =>
+	useContext(MessageListContext).useShowReadReceipt(...args);
 export const useMessageListShowRoles = (): MessageListContextValue['showRoles'] => useContext(MessageListContext).showRoles;
 export const useMessageListShowRealName = (): MessageListContextValue['showRealName'] => useContext(MessageListContext).showRealName;
 export const useMessageListShowUsername = (): MessageListContextValue['showUsername'] => useContext(MessageListContext).showUsername;
-export const useMessageListShowReadReceipt = (): MessageListContextValue['showReadReceipt'] =>
-	useContext(MessageListContext).showReadReceipt;
 export const useMessageListHighlights = (): MessageListContextValue['highlights'] => useContext(MessageListContext).highlights;
 
 export const useUserHasReacted: MessageListContextValue['useUserHasReacted'] = (message: IMessage) =>

diff --git a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx
@@ -75,6 +75,7 @@ export const MessageListProvider: FC<{
 			useShowStarred: hasSubscription
 				? ({ message }): boolean => Boolean(Array.isArray(message.starred) && message.starred.find((star) => star._id === uid))
 				: (): boolean => false,
+			useShowReadReceipt: ({ message }): boolean => showReadReceipt && !message.unread,
 			useMessageDateFormatter:
 				() =>
 				(date: Date): string =>
@@ -83,7 +84,6 @@ export const MessageListProvider: FC<{
 			showRoles,
 			showRealName,
 			showUsername,
-			showReadReceipt,
 			highlights: highlights
 				?.map((str) => str.trim())
 				.map((highlight) => ({

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
@@ -70,7 +70,7 @@
 		"@babel/register": "^7.14.5",
 		"@playwright/test": "^1.21.0",
 		"@rocket.chat/eslint-config": "^0.4.0",
-		"@rocket.chat/livechat": "^1.12.2",
+		"@rocket.chat/livechat": "1.13.2",
 		"@settlin/spacebars-loader": "^1.0.9",
 		"@storybook/addon-essentials": "~6.4.19",
 		"@storybook/addon-interactions": "~6.4.19",

diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1679,6 +1679,7 @@
   "Enterprise_License_Description": "If your workspace is registered and license is provided by Rocket.Chat Cloud you don't need to manually update the license here.",
   "Entertainment": "Entertainment",
   "Error": "Error",
+  "Error_something_went_wrong": "Oops! Something went wrong. Please reload the page or contact an administrator.",
   "Error_404": "Error:404",
   "Error_changing_password": "Error changing password",
   "Error_loading_pages": "Error loading pages",
@@ -2349,6 +2350,7 @@
   "Invalid_notification_setting_s": "Invalid notification setting: %s",
   "Invalid_or_expired_invite_token": "Invalid or expired invite token",
   "Invalid_pass": "The password must not be empty",
+  "Invalid_password": "Invalid password",
   "Invalid_reason": "The reason to join must not be empty",
   "Invalid_room_name": "<strong>%s</strong> is not a valid room name",
   "Invalid_secret_URL_message": "The URL provided is invalid.",

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
 		"build:services": "turbo run build --filter=rocketchat-services...",
 		"build:ci": "turbo run build:ci",
 		"testunit": "turbo run testunit",
-		"dev": "turbo run dev --parallel --filter=@rocket.chat/meteor",
+		"dev": "turbo run dev --filter=@rocket.chat/meteor...",
 		"lint": "turbo run lint",
 		"storybook": "yarn workspace @rocket.chat/meteor run storybook"
 	},