Merge branch 'develop' into refactor/teamInfo

.changeset/afraid-poets-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed Security tab visibility to allow password changes when 2FA/E2E is disabled.

.changeset/chilly-glasses-sin.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Increased the timeout between calls for the three remaining Omnichannel Agenda Jobs. This should make them happen less often and reduce the load on MongoDB

.changeset/good-ducks-vanish.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Introduces sidebar navigability, allowing users to navigate on sidebar channels through keyboard

.changeset/sharp-yaks-turn.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed supported versions not being updated in airgapped environments

.changeset/small-moons-matter.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed custom OAuth roles not synced on the first login (on user creation)

apps/meteor/app/api/server/helpers/getInstanceList.ts

@@ -0,0 +1,4 @@
+import { makeFunction } from '@rocket.chat/patch-injection';
+import type { BrokerNode } from 'moleculer';
+
+export const getInstanceList = makeFunction(async (): Promise<BrokerNode[]> => []);

apps/meteor/app/api/server/v1/instances.ts

@@ -1,16 +1,16 @@
 import { InstanceStatus } from '@rocket.chat/models';
 
-import { Instance as InstanceService } from '../../../../ee/server/sdk';
 import { isRunningMs } from '../../../../server/lib/isRunningMs';
 import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission';
 import { API } from '../api';
+import { getInstanceList } from '../helpers/getInstanceList';
 
-const getMatrixInstances = (() => {
+const getConnections = (() => {
 	if (isRunningMs()) {
 		return () => [];
 	}
 
-	return () => InstanceService.getInstances();
+	return () => getInstanceList();
 })();
 
 API.v1.addRoute(
@@ -24,7 +24,7 @@ API.v1.addRoute(
 
 			const instanceRecords = await InstanceStatus.find().toArray();
 
-			const connections = await getMatrixInstances();
+			const connections = await getConnections();
 
 			const result = instanceRecords.map((instanceRecord) => {
 				const connection = connections.find((c) => c.id === instanceRecord._id);

apps/meteor/app/cloud/server/functions/syncWorkspace/index.ts

@@ -15,7 +15,6 @@ export async function syncWorkspace() {
 	try {
 		await announcementSync();
 		await syncCloudData();
-		await getCachedSupportedVersionsToken.reset();
 	} catch (err) {
 		switch (true) {
 			case err instanceof CloudWorkspaceRegistrationError:
@@ -34,7 +33,6 @@ export async function syncWorkspace() {
 				});
 				try {
 					await legacySyncWorkspace();
-					await getCachedSupportedVersionsToken.reset();
 				} catch (err) {
 					switch (true) {
 						case err instanceof CloudWorkspaceRegistrationError:
@@ -52,5 +50,7 @@ export async function syncWorkspace() {
 				}
 			}
 		}
+	} finally {
+		await getCachedSupportedVersionsToken.reset();
 	}
 }

apps/meteor/client/components/FilterByText.tsx

@@ -23,7 +23,7 @@ const isFilterByTextPropsWithButton = (props: any): props is FilterByTextPropsWi
 	'displayButton' in props && props.displayButton === true;
 
 const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
-	{ placeholder, onChange: setFilter, shouldAutoFocus, children, ...props },
+	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
 	ref,
 ) {
 	const t = useTranslation();

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

@@ -15,6 +15,8 @@ import { useRoomList } from '../hooks/useRoomList';
 import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
 import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import RoomListRow from './RoomListRow';
+import RoomListRowWrapper from './RoomListRowWrapper';
+import RoomListWrapper from './RoomListWrapper';
 
 const computeItemKey = (index: number, room: IRoom): IRoom['_id'] | number => room._id || index;
 
@@ -116,12 +118,12 @@ const RoomList = (): ReactElement => {
 	`;
 
 	return (
-		<Box className={[roomsListStyle, 'sidebar--custom-colors'].filter(Boolean)} aria-label={t('Channels')} role='navigation'>
+		<Box className={[roomsListStyle, 'sidebar--custom-colors'].filter(Boolean)}>
 			<Box h='full' w='full' ref={ref}>
 				<Virtuoso
 					totalCount={roomsList.length}
 					data={roomsList}
-					components={{ Scroller: VirtuosoScrollbars }}
+					components={{ Item: RoomListRowWrapper, List: RoomListWrapper, Scroller: VirtuosoScrollbars }}
 					computeItemKey={computeItemKey}
 					itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
 				/>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+const RoomListRoomWrapper = forwardRef(function RoomListRoomWrapper(props: HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) {
+	return <div role='listitem' ref={ref} {...props} />;
+});
+
+export default RoomListRoomWrapper;

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

@@ -0,0 +1,16 @@
+import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { HTMLAttributes, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import { useSidebarListNavigation } from './useSidebarListNavigation';
+
+const RoomListWrapper = forwardRef(function RoomListWrapper(props: HTMLAttributes<HTMLDivElement>, ref: Ref<HTMLDivElement>) {
+	const t = useTranslation();
+	const { sidebarListRef } = useSidebarListNavigation();
+	const mergedRefs = useMergedRefs(ref, sidebarListRef);
+
+	return <div role='list' aria-label={t('Channels')} ref={mergedRefs} {...props} />;
+});
+
+export default RoomListWrapper;

apps/meteor/client/sidebar/RoomList/useSidebarListNavigation.ts

@@ -0,0 +1,99 @@
+import { useFocusManager } from '@react-aria/focus';
+import { useCallback } from 'react';
+
+const isListItem = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item');
+const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-item__menu');
+
+/**
+ * Custom hook to provide the sidebar navigation by keyboard.
+ * @param ref - A ref to the message list DOM element.
+ */
+export const useSidebarListNavigation = () => {
+	const sidebarListFocusManager = useFocusManager();
+
+	const sidebarListRef = useCallback(
+		(node: HTMLElement | null) => {
+			let lastItemFocused: HTMLElement | null = null;
+
+			if (!node) {
+				return;
+			}
+
+			node.addEventListener('keydown', (e) => {
+				if (!e.target) {
+					return;
+				}
+
+				if (!isListItem(e.target)) {
+					return;
+				}
+
+				if (e.key === 'Tab') {
+					e.preventDefault();
+					e.stopPropagation();
+
+					if (e.shiftKey) {
+						sidebarListFocusManager.focusPrevious({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node),
+						});
+					} else if (isListItemMenu(e.target)) {
+						sidebarListFocusManager.focusNext({
+							accept: (node) => !isListItem(node) && !isListItemMenu(node),
+						});
+					} else {
+						sidebarListFocusManager.focusNext({
+							accept: (node) => !isListItem(node),
+						});
+					}
+				}
+
+				if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+					if (e.key === 'ArrowUp') {
+						sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) });
+					}
+
+					if (e.key === 'ArrowDown') {
+						sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) });
+					}
+
+					lastItemFocused = document.activeElement as HTMLElement;
+				}
+			});
+
+			node.addEventListener(
+				'blur',
+				(e) => {
+					if (
+						!(e.relatedTarget as HTMLElement)?.classList.contains('focus-visible') ||
+						!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)
+					) {
+						return;
+					}
+
+					if (!e.currentTarget.contains(e.relatedTarget) && !lastItemFocused) {
+						lastItemFocused = e.target as HTMLElement;
+					}
+				},
+				{ capture: true },
+			);
+
+			node.addEventListener(
+				'focus',
+				(e) => {
+					const triggeredByKeyboard = (e.target as HTMLElement)?.classList.contains('focus-visible');
+					if (!triggeredByKeyboard || !(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) {
+						return;
+					}
+
+					if (lastItemFocused && !e.currentTarget.contains(e.relatedTarget) && node.contains(e.target as HTMLElement)) {
+						lastItemFocused?.focus();
+					}
+				},
+				{ capture: true },
+			);
+		},
+		[sidebarListFocusManager],
+	);
+
+	return { sidebarListRef };
+};

apps/meteor/client/sidebar/RoomMenu.tsx

@@ -251,7 +251,6 @@ const RoomMenu = ({
 			title={t('Options')}
 			mini
 			aria-keyshortcuts='alt'
-			tabIndex={-1}
 			options={menuOptions}
 			maxHeight={300}
 			renderItem={({ label: { label, icon }, ...props }): JSX.Element => <Option label={label} icon={icon} {...props} />}

apps/meteor/client/sidebar/Sidebar.tsx

@@ -27,28 +27,25 @@ const Sidebar = () => {
 	`;
 
 	return (
-		<>
-			<Box
-				display='flex'
-				flexDirection='column'
-				height='100%'
-				is='nav'
-				className={[
-					'rcx-sidebar--main',
-					`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
-					sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
-					sidebarLink,
-				].filter(Boolean)}
-				role='navigation'
-				data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
-			>
-				<SidebarHeader />
-				{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
-				{showOmnichannel && <OmnichannelSection />}
-				<SidebarRoomList />
-				<SidebarFooter />
-			</Box>
-		</>
+		<Box
+			display='flex'
+			flexDirection='column'
+			height='100%'
+			is='nav'
+			className={[
+				'rcx-sidebar--main',
+				`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
+				sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
+				sidebarLink,
+			].filter(Boolean)}
+			data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
+		>
+			<SidebarHeader />
+			{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
+			{showOmnichannel && <OmnichannelSection />}
+			<SidebarRoomList />
+			<SidebarFooter />
+		</Box>
 	);
 };
 

apps/meteor/client/sidebar/SidebarRegion.tsx

@@ -3,6 +3,7 @@ import { Box } from '@rocket.chat/fuselage';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import React, { lazy, memo } from 'react';
+import { FocusScope } from 'react-aria';
 
 import Sidebar from './Sidebar';
 
@@ -101,17 +102,19 @@ const SidebarRegion = () => {
 					<></>
 				</FeaturePreviewOff>
 			</FeaturePreview>
-			<Box
-				id='sidebar-region'
-				className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle, isMobile && sidebarMobileClass].filter(
-					Boolean,
+			<FocusScope>
+				<Box
+					id='sidebar-region'
+					className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle, isMobile && sidebarMobileClass].filter(
+						Boolean,
+					)}
+				>
+					<Sidebar />
+				</Box>
+				{isMobile && (
+					<Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
 				)}
-			>
-				<Sidebar />
-			</Box>
-			{isMobile && (
-				<Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
-			)}
+			</FocusScope>
 		</>
 	);
 };

apps/meteor/client/sidebar/header/UserAvatarWithStatus.tsx

@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
-import { useSetting, useUser, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetting, useUser } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import { UserStatus } from '../../components/UserStatus';
@@ -20,7 +20,6 @@ const anon = {
  */
 
 const UserAvatarWithStatus = () => {
-	const t = useTranslation();
 	const user = useUser();
 	const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
 
@@ -32,9 +31,6 @@ const UserAvatarWithStatus = () => {
 			className={css`
 				cursor: pointer;
 			`}
-			aria-label={t('User_menu')}
-			role='button'
-			data-qa='sidebar-avatar-button'
 		>
 			{username && <UserAvatar size='x24' username={username} etag={avatarETag} />}
 			<Box