Merge branch 'develop' into message-composer-with-quill

.changeset/cyan-countries-impress.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed matrix homeserver domain setting not being visible in admin panel

.changeset/rich-dingos-mix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Added reactions tooltip loader

.gitignore

@@ -48,3 +48,5 @@ yarn-error.log*
 .envrc
 
 *.sublime-workspace
+
+**/.vim/

apps/meteor/app/ui-utils/client/lib/messageActionDefault.ts

@@ -10,7 +10,7 @@ import { dispatchToastMessage } from '../../../../client/lib/toast';
 import { messageArgs } from '../../../../client/lib/utils/messageArgs';
 import { router } from '../../../../client/providers/RouterProvider';
 import ForwardMessageModal from '../../../../client/views/room/modals/ForwardMessageModal/ForwardMessageModal';
-import ReactionList from '../../../../client/views/room/modals/ReactionListModal';
+import ReactionListModal from '../../../../client/views/room/modals/ReactionListModal';
 import ReportMessageModal from '../../../../client/views/room/modals/ReportMessageModal';
 import { hasAtLeastOnePermission, hasPermission } from '../../../authorization/client';
 import { ChatRoom, Subscriptions } from '../../../models/client';
@@ -266,10 +266,10 @@ Meteor.startup(async () => {
 		label: 'Reactions',
 		context: ['message', 'message-mobile', 'threads', 'videoconf', 'videoconf-threads'],
 		type: 'interaction',
-		action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg }) {
+		action(this: unknown, _, { message: { reactions = {} } = messageArgs(this).msg, chat }) {
 			imperativeModal.open({
-				component: ReactionList,
-				props: { reactions, onClose: imperativeModal.close },
+				component: ReactionListModal,
+				props: { reactions, onOpenUserCard: chat?.userCard.openUserCard, onClose: imperativeModal.close },
 			});
 		},
 		condition({ message: { reactions } }) {

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -51,7 +51,10 @@ export class ChatMessages implements ChatAPI {
 
 	public ActionManager: any;
 
-	public userCard: { open(username: string): (event: UIEvent) => void; close(): void };
+	public userCard: {
+		openUserCard(event: UIEvent, username: string): void;
+		closeUserCard(): void;
+	};
 
 	public emojiPicker: {
 		open(el: Element, cb: (emoji: string) => void): void;
@@ -166,8 +169,8 @@ export class ChatMessages implements ChatAPI {
 		this.readStateManager = new ReadStateManager(rid);
 
 		this.userCard = {
-			open: unimplemented,
-			close: unimplemented,
+			openUserCard: unimplemented,
+			closeUserCard: unimplemented,
 		};
 
 		this.emojiPicker = {

apps/meteor/client/components/GazzodownText.tsx

@@ -25,7 +25,9 @@ type GazzodownTextProps = {
 };
 
 const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTextProps) => {
+	const chat = useChat();
 	const highlights = useMessageListHighlights();
+
 	const highlightRegex = useMemo(() => {
 		if (!highlights?.length) {
 			return;
@@ -51,8 +53,6 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 	const ownUserId = useUserId();
 	const showMentionSymbol = Boolean(useUserPreference<boolean>('mentionsWithSymbol'));
 
-	const chat = useChat();
-
 	const resolveUserMention = useCallback(
 		(mention: string) => {
 			if (mention === 'all' || mention === 'here') {
@@ -75,7 +75,7 @@ const GazzodownText = ({ mentions, channels, searchText, children }: GazzodownTe
 
 			return (event: UIEvent): void => {
 				event.stopPropagation();
-				chat?.userCard.open(username)(event);
+				chat?.userCard.openUserCard(event, username);
 			};
 		},
 		[chat?.userCard],

apps/meteor/client/components/RoomAutoComplete/Avatar.tsx

@@ -1,9 +1,8 @@
 import { Options } from '@rocket.chat/fuselage';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import type { FC } from 'react';
 import React from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
-
 type AvatarProps = {
 	value: string;
 	type: string;

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -1,11 +1,11 @@
 import { AutoComplete, Option, Box } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
 import Avatar from './Avatar';
 
 const generateQuery = (

apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Option, Chip, Box, Skeleton } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import RoomAvatar from '../avatar/RoomAvatar';
-
 const generateQuery = (
 	term = '',
 ): {

apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx

@@ -2,13 +2,12 @@ import { isDirectMessageRoom } from '@rocket.chat/core-typings';
 import { AutoComplete, Box, Option, OptionAvatar, OptionContent, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
+import { RoomAvatar, UserAvatar } from '@rocket.chat/ui-avatar';
 import { useUser, useUserSubscriptions } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
-import RoomAvatar from '../avatar/RoomAvatar';
-import UserAvatar from '../avatar/UserAvatar';
 
 type UserAndRoomAutoCompleteMultipleProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'>;
 

apps/meteor/client/components/UserAutoComplete/UserAutoComplete.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Option, Box, Chip, Options } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 const query = (
 	term = '',
 	conditions = {},

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx

@@ -1,12 +1,11 @@
 import { AutoComplete, Box, OptionAvatar, Option, OptionContent, Chip, OptionDescription } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 const query = (
 	term = '',
 ): {

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -1,11 +1,11 @@
 import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, AllHTMLAttributes } from 'react';
 import React, { memo, useState, useCallback, useMemo } from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
 import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';
 
 type UserAutoCompleteMultipleFederatedProps = {

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOption.tsx

@@ -1,10 +1,9 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { Option, OptionDescription } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import UserAvatar from '../avatar/UserAvatar';
-
 type UserAutoCompleteMultipleOptionProps = {
 	label: {
 		_federated?: boolean;

apps/meteor/client/components/UserCard/UserCard.stories.tsx

@@ -1,7 +1,7 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import UserCard from '.';
+import { UserCard, UserCardRole, UserCardAction } from '.';
 
 export default {
 	title: 'Components/UserCard',
@@ -14,16 +14,16 @@ export default {
 		customStatus: '🛴 currently working on User Card',
 		roles: (
 			<>
-				<UserCard.Role>Admin</UserCard.Role>
-				<UserCard.Role>Rocket.Chat</UserCard.Role>
-				<UserCard.Role>Team</UserCard.Role>
+				<UserCardRole>Admin</UserCardRole>
+				<UserCardRole>Rocket.Chat</UserCardRole>
+				<UserCardRole>Team</UserCardRole>
 			</>
 		),
 		bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 		actions: (
 			<>
-				<UserCard.Action icon='message' />
-				<UserCard.Action icon='phone' />
+				<UserCardAction icon='message' />
+				<UserCardAction icon='phone' />
 			</>
 		),
 		localTime: 'Local Time: 7:44 AM',