Merge branch 'develop' of github.com:RocketChat/Rocket.Chat into new/…

…hideUi

* 'develop' of github.com:RocketChat/Rocket.Chat:
  chore: add gitpod config file for quick setup (#30921)
  feat: Allow user to set timeout of outgoing webhook (#31222)
  feat: added modal confirmation before pinning message (#31348)
  fix: not being able to access or create rooms with join code (#31270)
  chore: services changes on lifecycle methods + throw if svc is not available (#31375)
  test: bump playwright (#31376)
  i18n: update translations (#29462)
  i18n: adds video call translations for Persian language (#30406)
  regression: `AppRow` bundleIn verification (#31373)
  feat: Add Desktop PDF viewer (#31279)
  fix: Attachments not collapsing when using incoming webhook (#31318)
  chore: add aria-label to Select Inputs at Engagement Dashboard (#31249)
  fix: engagement dashboard timezone selector (#31248)

.changeset/attachment-collapse.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed Attachments not respecting collapse property when using incoming webhook

.changeset/rude-spoons-pump.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed Engagement Dashboard timezone selector freezing UI

.changeset/stale-monkeys-yell.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed an issue where room access and creation were hindered due to join codes not being fetched correctly in the API.

.changeset/swift-beans-reflect.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Added a modal to confirm the intention to pin a message, preventing users from doing it by mistake

.github/workflows/ci-test-e2e.yml

@@ -160,7 +160,7 @@ jobs:
           path: |
             ~/.cache/ms-playwright
           # This is the version of Playwright that we are using, if you are willing to upgrade, you should update this.
-          key: playwright-1.37.1
+          key: playwright-1.40.1
 
       - name: Install Playwright
         if: inputs.type == 'ui' && steps.cache-playwright.outputs.cache-hit != 'true'

.gitpod.yml

@@ -0,0 +1,26 @@
+tasks:
+  - init: |
+      nvm install $(jq -r .engines.node package.json) &&
+      curl https://install.meteor.com/ | sh &&
+      export PATH="$PATH:$HOME/.meteor" &&
+      yarn &&
+      export ROOT_URL=$(gp url 3000)
+    command: yarn build && yarn dev
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-preview 
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
+vscode:
+  extensions:
+    - esbenp.prettier-vscode       

README.md

@@ -67,6 +67,14 @@ yarn dsv # run only meteor (front and back) with pre-built packages
 
 After initialized, you can access the server at http://localhost:3000
 
+# Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/RocketChat/Rocket.Chat)
+
 **Starting Rocket.Chat in microservices mode:**
 
 ```bash

apps/meteor/app/integrations/server/lib/triggerHandler.js

@@ -503,6 +503,7 @@ class RocketChatIntegrationHandler {
 			{
 				method: opts.method,
 				headers: opts.headers,
+				...(opts.timeout && { timeout: opts.timeout }),
 				...(opts.data && { body: opts.data }),
 			},
 			settings.get('Allow_Invalid_SelfSigned_Certs'),

apps/meteor/app/statistics/server/lib/statistics.ts

@@ -592,7 +592,11 @@ export const statistics = {
 		const defaultLoggedInCustomScript = (await Settings.findOneById('Custom_Script_Logged_In'))?.packageValue;
 		statistics.loggedInCustomScriptChanged = settings.get('Custom_Script_Logged_In') !== defaultLoggedInCustomScript;
 
-		statistics.dailyPeakConnections = await Presence.getPeakConnections(true);
+		try {
+			statistics.dailyPeakConnections = await Presence.getPeakConnections(true);
+		} catch {
+			statistics.dailyPeakConnections = 0;
+		}
 
 		const peak = await Statistics.findMonthlyPeakConnections();
 		statistics.maxMonthlyPeakConnections = Math.max(statistics.dailyPeakConnections, peak?.dailyPeakConnections || 0);

apps/meteor/client/components/message/content/Attachments.tsx

@@ -6,15 +6,14 @@ import AttachmentsItem from './attachments/AttachmentsItem';
 
 type AttachmentsProps = {
 	attachments: MessageAttachmentBase[];
-	collapsed?: boolean;
 	id?: string | undefined;
 };
 
-const Attachments = ({ attachments, collapsed, id }: AttachmentsProps): ReactElement => {
+const Attachments = ({ attachments, id }: AttachmentsProps): ReactElement => {
 	return (
 		<>
 			{attachments?.map((attachment, index) => (
-				<AttachmentsItem key={index} id={id} attachment={{ ...attachment, collapsed }} />
+				<AttachmentsItem key={index} id={id} attachment={{ ...attachment }} />
 			))}
 		</>
 	);

apps/meteor/client/components/message/content/attachments/QuoteAttachment.tsx

@@ -68,7 +68,7 @@ export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps): ReactElem
 					{attachment.md ? <MessageContentBody md={attachment.md} /> : attachment.text.substring(attachment.text.indexOf('\n') + 1)}
 					{attachment.attachments && (
 						<AttachmentInner>
-							<Attachments attachments={attachment.attachments} collapsed={attachment.collapsed} />
+							<Attachments attachments={attachment.attachments} />
 						</AttachmentInner>
 					)}
 				</AttachmentDetails>

apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx

@@ -7,7 +7,7 @@ import {
 	MessageGenericPreviewDescription,
 } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import type { FC } from 'react';
+import type { UIEvent } from 'react';
 import React from 'react';
 
 import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
@@ -16,7 +16,11 @@ import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
 import AttachmentSize from '../structure/AttachmentSize';
 
-export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
+const openDocumentViewer = window.RocketChatDesktop?.openDocumentViewer;
+
+type GenericFileAttachmentProps = MessageAttachmentBase;
+
+export const GenericFileAttachment = ({
 	title,
 	description,
 	descriptionMd,
@@ -25,9 +29,24 @@ export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
 	size,
 	format,
 	collapsed,
-}) => {
+}: GenericFileAttachmentProps) => {
 	const getURL = useMediaUrl();
 
+	const handleTitleClick = (event: UIEvent): void => {
+		if (openDocumentViewer && link && format === 'PDF') {
+			event.preventDefault();
+			openDocumentViewer(getURL(link), format, '');
+		}
+	};
+
+	const getExternalUrl = () => {
+		if (!hasDownload || !link) return undefined;
+
+		if (openDocumentViewer) return `${getURL(link)}?download`;
+
+		return getURL(link);
+	};
+
 	return (
 		<>
 			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
@@ -36,7 +55,7 @@ export const GenericFileAttachment: FC<MessageAttachmentBase> = ({
 					<MessageGenericPreviewContent
 						thumb={<MessageGenericPreviewIcon name='attachment-file' type={format || getFileExtension(title)} />}
 					>
-						<MessageGenericPreviewTitle externalUrl={hasDownload && link ? getURL(link) : undefined} data-qa-type='attachment-title-link'>
+						<MessageGenericPreviewTitle externalUrl={getExternalUrl()} onClick={handleTitleClick} data-qa-type='attachment-title-link'>
 							{title}
 						</MessageGenericPreviewTitle>
 						{size && (

apps/meteor/client/definitions/IRocketChatDesktop.ts

@@ -0,0 +1,10 @@
+type OutlookEventsResponse = { status: 'success' | 'canceled' };
+
+export interface IRocketChatDesktop {
+	openInternalVideoChatWindow?: (url: string, options: { providerName: string | undefined }) => void;
+	getOutlookEvents?: (date: Date) => Promise<OutlookEventsResponse>;
+	setOutlookExchangeUrl?: (url: string, userId: string) => Promise<void>;
+	hasOutlookCredentials?: () => Promise<boolean>;
+	clearOutlookCredentials?: () => void;
+	openDocumentViewer?: (url: string, format: string, options: any) => void;
+}

apps/meteor/client/definitions/global.d.ts

@@ -0,0 +1,8 @@
+import type { IRocketChatDesktop } from './IRocketChatDesktop';
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Window {
+		RocketChatDesktop?: IRocketChatDesktop;
+	}
+}

apps/meteor/client/startup/actionButtons/pinMessage.ts → apps/meteor/client/startup/actionButtons/pinMessage.tsx

@@ -4,10 +4,12 @@ import { hasAtLeastOnePermission } from '../../../app/authorization/client';
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { imperativeModal } from '../../lib/imperativeModal';
 import { queryClient } from '../../lib/queryClient';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { dispatchToastMessage } from '../../lib/toast';
 import { messageArgs } from '../../lib/utils/messageArgs';
+import PinMessageModal from '../../views/room/modals/PinMessageModal';
 
 Meteor.startup(() => {
 	MessageAction.addButton({
@@ -18,13 +20,25 @@ Meteor.startup(() => {
 		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
 		async action(_, props) {
 			const { message = messageArgs(this).msg } = props;
-			message.pinned = true;
-			try {
-				await sdk.call('pinMessage', message);
-				queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-			}
+			const onConfirm = async () => {
+				message.pinned = true;
+				try {
+					await sdk.call('pinMessage', message);
+					queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
+				} catch (error) {
+					dispatchToastMessage({ type: 'error', message: error });
+				}
+				imperativeModal.close();
+			};
+
+			imperativeModal.open({
+				component: PinMessageModal,
+				props: {
+					message,
+					onConfirm,
+					onCancel: () => imperativeModal.close(),
+				},
+			});
 		},
 		condition({ message, subscription, room }) {
 			if (!settings.get('Message_AllowPinning') || message.pinned || !subscription) {

apps/meteor/client/views/marketplace/AppsList/AppRow.tsx

@@ -66,7 +66,7 @@ const AppRow = ({ className, ...props }: App & { className?: string }): ReactEle
 							<CardTitle variant='h5' id={`${id}-title`}>
 								{name}
 							</CardTitle>
-							{Boolean(bundledIn.length) && <BundleChips bundledIn={bundledIn} />}
+							{Boolean(bundledIn?.length) && <BundleChips bundledIn={bundledIn} />}
 						</CardHeader>
 						{shortDescription && <CardBody id={`${id}-description`}>{shortDescription}</CardBody>}
 					</CardCol>

apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx

@@ -0,0 +1,45 @@
+import type { MessageQuoteAttachment, IMessage } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { useTranslation, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, ReactElement } from 'react';
+import React from 'react';
+
+import GenericModal from '../../../../components/GenericModal';
+import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
+import { useUserDisplayName } from '../../../../hooks/useUserDisplayName';
+
+type PinMessageModalProps = { message: IMessage } & ComponentProps<typeof GenericModal>;
+
+const PinMessageModal = ({ message, ...props }: PinMessageModalProps): ReactElement => {
+	const t = useTranslation();
+	const getUserAvatarPath = useUserAvatarPath();
+	const displayName = useUserDisplayName(message.u);
+	const avatarUrl = getUserAvatarPath(message.u.username);
+
+	const attachment = {
+		author_name: String(displayName),
+		author_link: '',
+		author_icon: avatarUrl,
+		message_link: '',
+		text: message.msg,
+		attachments: message.attachments as MessageQuoteAttachment[],
+		md: message.md,
+	};
+
+	return (
+		<GenericModal icon='pin' title={t('Pin_Message')} variant='warning' confirmText={t('Yes_pin_message')} {...props}>
+			<Box mbe={16} is='p'>
+				{t('Are_you_sure_you_want_to_pin_this_message')}
+			</Box>
+			<QuoteAttachment attachment={attachment} />
+			<Box is='p' fontScale='c1' mbs={16}>
+				{t('Pinned_messages_are_visible_to_everyone')}
+			</Box>
+			<Box is='p' fontScale='c1'>
+				{t('Starred_messages_are_only_visible_to_you')}
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default PinMessageModal;

apps/meteor/client/views/room/modals/PinMessageModal/index.ts

@@ -0,0 +1 @@
+export { default } from './PinMessageModal';

apps/meteor/ee/client/components/dashboards/PeriodSelector.tsx

@@ -18,7 +18,15 @@ const PeriodSelector = <TPeriod extends Period['key']>({ periods, value, name, o
 
 	const options = useMemo<[string, string][]>(() => periods.map((period) => [period, t(...getPeriod(period).label)]), [periods, t]);
 
-	return <Select name={name} options={options} value={value} onChange={(value): void => onChange(value as TPeriod)} />;
+	return (
+		<Select
+			name={name}
+			options={options}
+			value={value}
+			onChange={(value): void => onChange(value as TPeriod)}
+			aria-label={t('Select_period')}
+		/>
+	);
 };
 
 export default PeriodSelector;

apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx

@@ -35,7 +35,12 @@ const EngagementDashboardPage = ({ tab = 'users', onSelectTab }: EngagementDashb
 	return (
 		<Page background='tint'>
 			<PageHeader title={t('Engagement')}>
-				<Select options={timezoneOptions} value={timezoneId} onChange={(value) => handleTimezoneChange(String(value))} />
+				<Select
+					options={timezoneOptions}
+					value={timezoneId}
+					onChange={(value) => handleTimezoneChange(String(value))}
+					aria-label={t('Default_Timezone_For_Reporting')}
+				/>
 			</PageHeader>
 			<Tabs>
 				<Tabs.Item selected={tab === 'users'} onClick={handleTabClick('users')}>

apps/meteor/ee/client/views/admin/engagementDashboard/users/BusiestChatTimesSection.tsx

@@ -45,7 +45,12 @@ const BusiestChatTimesSection = ({ timezone }: BusiestChatTimesSectionProps): Re
 	return (
 		<>
 			<EngagementDashboardCardFilter>
-				<Select options={timeUnitOptions} value={timeUnit} onChange={(value) => handleTimeUnitChange(String(value))} />
+				<Select
+					options={timeUnitOptions}
+					value={timeUnit}
+					onChange={(value) => handleTimeUnitChange(String(value))}
+					aria-label={t('Select_period')}
+				/>
 			</EngagementDashboardCardFilter>
 			<Content
 				displacement={displacement}