Merge remote-tracking branch 'origin/develop' into fix/login-terms

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,13 @@
+{
+	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+	"changelog": ["@changesets/changelog-github", { "repo": "RocketChat/Rocket.Chat" }],
+	"commit": false,
+	"fixed": [
+		["@rocket.chat/meteor", "@rocket.chat/core-typings", "@rocket.chat/rest-typings"]
+	],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "develop",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.changeset/rare-bats-compare.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+chore: Add `roomName` on Composer placeholder

.github/workflows/changesets.yml

@@ -0,0 +1,51 @@
+name: Changesets
+
+on:
+  push:
+    branches:
+      - develop
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release-versions:
+    name: ⚙️ Variables Setup
+    runs-on: ubuntu-latest
+    outputs:
+      node-version: ${{ steps.var.outputs.node-version }}
+    steps:
+      - uses: Bhacaz/checkout-files@v2
+        with:
+          files: package.json
+          branch: ${{ github.ref }}
+
+      - id: var
+        run: |
+          NODE_VERSION=$(node -p "require('./package.json').engines.node")
+          echo "NODE_VERSION: ${NODE_VERSION}"
+          echo "node-version=${NODE_VERSION}" >> $GITHUB_OUTPUT
+
+  release:
+    name: Release
+    needs: [release-versions]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+        with:
+          node-version: ${{ needs.release-versions.outputs.node-version }}
+          cache-modules: true
+          install: true
+
+      - uses: dtinth/setup-github-actions-caching-for-turbo@v1
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        with:
+          title: 'chore: Bump packages'
+        env:
+          HUSKY: 0
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -96,6 +96,23 @@ jobs:
 
       - uses: dtinth/setup-github-actions-caching-for-turbo@v1
 
+      - name: Start httpbin container and wait for it to be ready
+        run: |
+          docker run -d -p 10000:80 --name httpbin-container kennethreitz/httpbin
+          i=0
+          while [ $i -lt 10 ]; do
+            if curl -s -o /dev/null http://localhost:10000; then
+              echo "httpbin is running"
+              break
+            fi
+            i=$((i + 1))
+            sleep 5
+          done
+          if [ $i -eq 10 ]; then
+            echo "Failed to verify httpbin is running"
+            exit 1
+          fi
+
       - name: yarn build
         run: yarn build
 

.github/workflows/ci.yml

@@ -47,7 +47,7 @@ jobs:
           echo "LOWERCASE_REPOSITORY: ${LOWERCASE_REPOSITORY}"
           echo "lowercase-repo=${LOWERCASE_REPOSITORY}" >> $GITHUB_OUTPUT
 
-          NODE_VERSION=$(node -p "require('./package.json').volta.node")
+          NODE_VERSION=$(node -p "require('./package.json').engines.node")
           echo "NODE_VERSION: ${NODE_VERSION}"
           echo "node-version=${NODE_VERSION}" >> $GITHUB_OUTPUT
 

apps/meteor/client/components/InfiniteListAnchor.tsx

@@ -0,0 +1,39 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+type InfiniteListAnchorProps = {
+	loadMore: () => void;
+} & ComponentProps<typeof Box>;
+
+const InfiniteListAnchor = ({ loadMore, ...props }: InfiniteListAnchorProps) => {
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		const target = ref.current;
+
+		if (!target) {
+			return;
+		}
+
+		const observer = new IntersectionObserver(
+			(e) => {
+				if (e[0].isIntersecting) {
+					loadMore();
+				}
+			},
+			{
+				root: null,
+				threshold: 0.1,
+			},
+		);
+
+		observer.observe(target);
+
+		return () => observer.disconnect();
+	}, [loadMore]);
+
+	return <Box width={5} height={5} ref={ref} {...props} />;
+};
+
+export default InfiniteListAnchor;

apps/meteor/client/hooks/useRoomName.ts

@@ -0,0 +1,25 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+import { useUserSubscription } from '@rocket.chat/ui-contexts';
+
+import { useUserDisplayName } from './useUserDisplayName';
+
+/**
+ *
+ * Hook to get the name of the room
+ *
+ * @param room - Room object
+ * @returns Room name
+ * @public
+ *
+ */
+export const useRoomName = (room: IRoom) => {
+	const subscription = useUserSubscription(room._id);
+	const username = useUserDisplayName({ name: subscription?.fname, username: subscription?.name });
+
+	if (isDirectMessageRoom(room)) {
+		return username;
+	}
+
+	return room.fname || room.name;
+};

apps/meteor/client/views/admin/invites/InvitesPage.tsx

@@ -68,16 +68,20 @@ const InvitesPage = (): ReactElement => {
 	const notSmall = useMediaQuery('(min-width: 768px)');
 
 	const headers = useMemo(
-		() => [
-			<GenericTableHeaderCell w={notSmall ? '20%' : '80%'}>{t('Token')}</GenericTableHeaderCell>,
-			notSmall && [
-				<GenericTableHeaderCell w='35%'>{t('Created_at')}</GenericTableHeaderCell>,
-				<GenericTableHeaderCell w='20%'>{t('Expiration')}</GenericTableHeaderCell>,
-				<GenericTableHeaderCell w='10%'>{t('Uses')}</GenericTableHeaderCell>,
-				<GenericTableHeaderCell w='10%'>{t('Uses_left')}</GenericTableHeaderCell>,
-				<GenericTableHeaderCell />,
-			],
-		],
+		() => (
+			<>
+				<GenericTableHeaderCell w={notSmall ? '20%' : '80%'}>{t('Token')}</GenericTableHeaderCell>
+				{notSmall && (
+					<>
+						<GenericTableHeaderCell w='35%'>{t('Created_at')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell w='20%'>{t('Expiration')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell w='10%'>{t('Uses')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell w='10%'>{t('Uses_left')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell />
+					</>
+				)}
+			</>
+		),
 		[notSmall, t],
 	);
 

apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx

@@ -2,7 +2,7 @@ import type { App } from '@rocket.chat/core-typings';
 import { Box, Pagination } from '@rocket.chat/fuselage';
 import type { PaginatedResult } from '@rocket.chat/rest-typings';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import type { AsyncState } from '../../../lib/asyncState';
 import AppsList from '../AppsList';
@@ -37,12 +37,13 @@ const AppsPageContentBody = ({
 	noErrorsOcurred,
 }: AppsPageContentBodyProps) => {
 	const t = useTranslation();
+	const scrollableRef = useRef<HTMLDivElement>(null);
 
 	return (
 		<>
 			<Box display='flex' flexDirection='column' overflow='hidden' height='100%' pi='x24'>
 				{noErrorsOcurred && (
-					<Box overflowY='scroll' height='100%'>
+					<Box overflowY='scroll' height='100%' ref={scrollableRef}>
 						{isMarketplace && !isFiltered && <FeaturedAppsSections appsResult={appsResult?.value?.allApps || []} />}
 						<AppsList apps={appsResult?.value?.items || []} title={isMarketplace ? t('All_Apps') : ''} />
 					</Box>
@@ -55,7 +56,10 @@ const AppsPageContentBody = ({
 					itemsPerPage={itemsPerPage}
 					count={appsResult?.value?.total || 0}
 					onSetItemsPerPage={onSetItemsPerPage}
-					onSetCurrent={onSetCurrent}
+					onSetCurrent={(value) => {
+						onSetCurrent(value);
+						scrollableRef.current?.scrollTo(0, 0);
+					}}
 					bg='light'
 					{...paginationProps}
 				/>

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx

@@ -11,7 +11,7 @@ import {
 	MessageComposerActionsDivider,
 	MessageComposerToolbarSubmit,
 } from '@rocket.chat/ui-composer';
-import { useTranslation, useUserPreference, useLayout } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUserPreference, useLayout, useUserRoom } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { ReactElement, MouseEventHandler, FormEvent, KeyboardEventHandler, KeyboardEvent, Ref, ClipboardEventHandler } from 'react';
 import React, { memo, useRef, useReducer, useCallback } from 'react';
@@ -40,6 +40,7 @@ import MessageBoxActionsToolbar from './MessageBoxActionsToolbar';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
 import MessageBoxReplies from './MessageBoxReplies';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
+import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
 
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;
@@ -107,16 +108,17 @@ const MessageBox = ({
 	readOnly,
 	tshow,
 }: MessageBoxProps): ReactElement => {
+	const chat = useChat();
+	const t = useTranslation();
+	const room = useUserRoom(rid);
+	const composerPlaceholder = useMessageBoxPlaceholder(t('Message'), room);
+
 	const [typing, setTyping] = useReducer(reducer, false);
 
 	const { isMobile } = useLayout();
 	const sendOnEnterBehavior = useUserPreference<'normal' | 'alternative' | 'desktop'>('sendOnEnter') || isMobile;
 	const sendOnEnter = sendOnEnterBehavior == null || sendOnEnterBehavior === 'normal' || (sendOnEnterBehavior === 'desktop' && !isMobile);
 
-	const t = useTranslation();
-
-	const chat = useChat();
-
 	if (!chat) {
 		throw new Error('Chat context not found');
 	}
@@ -373,12 +375,12 @@ const MessageBox = ({
 				{isRecordingAudio && <AudioMessageRecorder rid={rid} isMicrophoneDenied={isMicrophoneDenied} />}
 				<MessageComposerInput
 					ref={mergedRefs as unknown as Ref<HTMLInputElement>}
-					aria-label={t('Message')}
+					aria-label={composerPlaceholder}
 					name='msg'
 					disabled={isRecording || !canSend}
 					onChange={setTyping}
 					style={textAreaStyle}
-					placeholder={t('Message')}
+					placeholder={composerPlaceholder}
 					onKeyDown={handler}
 					onPaste={handlePaste}
 					aria-activedescendant={ariaActiveDescendant}

apps/meteor/client/views/room/components/body/composer/messageBox/hooks/useMessageBoxPlaceholder.ts

@@ -0,0 +1,18 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+
+import { useRoomName } from '../../../../../../../hooks/useRoomName';
+
+export const useMessageBoxPlaceholder = (placeholder: string, room?: IRoom) => {
+	if (!room) {
+		throw new Error('In order to get the placeholder a `room` must be provided');
+	}
+
+	const roomName = useRoomName(room);
+
+	if (isDirectMessageRoom(room)) {
+		return `${placeholder} @${roomName}`;
+	}
+
+	return `${placeholder} #${roomName}`;
+};

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx

@@ -1,12 +1,13 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Icon, TextInput, Margins, Select, Throbber, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
-import { useMutableCallback, useAutoFocus } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback, useAutoFocus, useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, FormEventHandler, ComponentProps, MouseEvent } from 'react';
 import React, { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
+import InfiniteListAnchor from '../../../../components/InfiniteListAnchor';
 import ScrollableContentWrapper from '../../../../components/ScrollableContentWrapper';
 import VerticalBar from '../../../../components/VerticalBar';
 import RoomMembersRow from './RoomMembersRow';
@@ -67,6 +68,18 @@ const RoomMembers = ({
 		[t],
 	);
 
+	const loadMoreMembers = useDebouncedCallback(
+		() => {
+			if (members.length >= total) {
+				return;
+			}
+
+			loadMore(members.length);
+		},
+		300,
+		[loadMore, members],
+	);
+
 	return (
 		<>
 			<VerticalBar.Header data-qa-id='RoomHeader-Members'>
@@ -135,10 +148,10 @@ const RoomMembers = ({
 								width: '100%',
 							}}
 							totalCount={total}
-							endReached={loadMore}
 							overscan={50}
 							data={members}
-							components={{ Scroller: ScrollableContentWrapper }}
+							// eslint-disable-next-line react/no-multi-comp
+							components={{ Scroller: ScrollableContentWrapper, Footer: () => <InfiniteListAnchor loadMore={loadMoreMembers} /> }}
 							itemContent={(index, data): ReactElement => <RowComponent data={itemData} user={data} index={index} reload={reload} />}
 						/>
 					)}

apps/meteor/client/views/root/AppRoot.tsx

@@ -15,9 +15,9 @@ const AppRoot = (): ReactElement => (
 		{createPortal(
 			<>
 				<meta charSet='utf-8' />
-				<meta http-equiv='content-type' content='text/html; charset=utf-8' />
-				<meta http-equiv='expires' content='-1' />
-				<meta http-equiv='X-UA-Compatible' content='IE=edge' />
+				<meta httpEquiv='content-type' content='text/html; charset=utf-8' />
+				<meta httpEquiv='expires' content='-1' />
+				<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
 				<meta name='fragment' content='!' />
 				<meta name='distribution' content='global' />
 				<meta