Merge remote-tracking branch 'origin/develop' into update-tsconfigbase

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
-import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings';
 import { Badge, Sidebar, SidebarItemAction } from '@rocket.chat/fuselage';
 import type { useTranslation } from '@rocket.chat/ui-contexts';
 import { useLayout } from '@rocket.chat/ui-contexts';
@@ -17,6 +17,9 @@ const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: ReturnTyp
 	if (!lastMessage) {
 		return t('No_messages_yet');
 	}
+	if (isVideoConfMessage(lastMessage)) {
+		return t('Call_started');
+	}
 	if (!lastMessage.u) {
 		return normalizeSidebarMessage(lastMessage, t);
 	}

apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx

@@ -27,7 +27,7 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 	const incompatibleStatus = versionIncompatible ? appIncompatibleStatusProps() : undefined;
 
 	return (
-		<Box display='flex' flexDirection='row' mbe='x20' w='full'>
+		<Box color='default' display='flex' flexDirection='row' mbe='x20' w='full'>
 			<AppAvatar size='x124' mie='x20' iconFileContent={iconFileContent} iconFileData={iconFileData} />
 			<Box display='flex' flexDirection='column'>
 				<Box display='flex' flexDirection='row' alignItems='center' mbe='x8'>

apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppDetails/AppDetails.tsx

@@ -41,7 +41,7 @@ const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 				</>
 			)}
 
-			<Box display='flex' flexDirection='column'>
+			<Box display='flex' flexDirection='column' color='default'>
 				<Margins block='x17'>
 					{isCarouselVisible && <ScreenshotCarouselAnchor screenshots={screenshots} />}
 

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

@@ -1,7 +1,7 @@
 import type { App } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { Badge, Box } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Badge, Box, Palette } from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { useCurrentRoute, useRoute, useRouteParameter } from '@rocket.chat/ui-contexts';
 import type { KeyboardEvent, MouseEvent, ReactElement } from 'react';
 import React, { memo } from 'react';
@@ -17,15 +17,16 @@ type AppRowProps = App & { isMarketplace: boolean };
 // TODO: org props
 const AppRow = (props: AppRowProps): ReactElement => {
 	const { name, id, shortDescription, iconFileData, marketplaceVersion, iconFileContent, installed, bundledIn, version } = props;
-
+	const breakpoints = useBreakpoints();
 	const [currentRouteName] = useCurrentRoute();
 	if (!currentRouteName) {
 		throw new Error('No current route name');
 	}
 	const router = useRoute(currentRouteName);
-
 	const context = useRouteParameter('context');
 
+	const isMobile = !breakpoints.includes('md');
+
 	const handleNavigateToAppInfo = (): void => {
 		context &&
 			router.push({
@@ -48,12 +49,12 @@ const AppRow = (props: AppRowProps): ReactElement => {
 		e.stopPropagation();
 	};
 
-	const hover = css`
+	const hoverClass = css`
 		&:hover,
 		&:focus {
 			cursor: pointer;
 			outline: 0;
-			background-color: ${colors.n200} !important;
+			background-color: ${Palette.surface['surface-hover']} !important;
 		}
 	`;
 
@@ -73,26 +74,29 @@ const AppRow = (props: AppRowProps): ReactElement => {
 			bg='surface'
 			mbe='x8'
 			pb='x8'
-			pis='x16'
-			pie='x4'
-			className={hover}
+			pi='x16'
+			borderRadius='x4'
+			className={hoverClass}
 		>
 			<Box display='flex' flexDirection='row' width='80%'>
 				<AppAvatar size='x40' mie='x16' alignSelf='center' iconFileContent={iconFileContent} iconFileData={iconFileData} />
-				<Box display='flex' alignItems='center' color='default' fontScale='p2m' mie='x16' style={{ whiteSpace: 'nowrap' }}>
-					<Box is='span'>{name}</Box>
+				<Box display='flex' alignItems='center' color='default' fontScale='p2m' mie='x16' withTruncatedText>
+					<Box withTruncatedText>{name}</Box>
 				</Box>
 				<Box display='flex' mie='x16' alignItems='center' color='default'>
 					{bundledIn && Boolean(bundledIn.length) && (
-						<Box display='flex' alignItems='center' color='default' mie='x16'>
+						<Box display='flex' alignItems='center' color='default'>
 							<BundleChips bundledIn={bundledIn} />
 						</Box>
 					)}
-					{shortDescription && <Box is='span'>{shortDescription}</Box>}
+					{shortDescription && !isMobile && (
+						<Box is='span' mis='x16'>
+							{shortDescription}
+						</Box>
+					)}
 				</Box>
 			</Box>
-
-			<Box display='flex' flexDirection='row' alignItems='center' justifyContent='flex-end' onClick={preventClickPropagation} width='20%'>
+			<Box display='flex' flexDirection='row' width='20%' alignItems='center' justifyContent='flex-end' onClick={preventClickPropagation}>
 				{canUpdate && <Badge small variant='primary' />}
 				<AppStatus app={props} isAppDetailsPage={false} installed={installed} />
 				<Box minWidth='x32'>

apps/meteor/client/views/admin/apps/AppsList/AppsList.tsx

@@ -16,7 +16,7 @@ const AppsList = ({ apps, title, isMarketplace }: AppsListProps): ReactElement =
 		<Box is='h3' fontScale='h3' color='default' mbe='x20'>
 			{title}
 		</Box>
-		<Box mbe='x36'>
+		<Box mbe='x24'>
 			{apps.map((app) => (
 				<AppRow key={app.id} isMarketplace={isMarketplace} {...app} />
 			))}

apps/meteor/client/views/admin/apps/AppsPage/AppsPageContent.tsx

@@ -1,4 +1,4 @@
-import { Pagination, Divider } from '@rocket.chat/fuselage';
+import { Pagination, Box } from '@rocket.chat/fuselage';
 import { useDebouncedState } from '@rocket.chat/fuselage-hooks';
 import { useCurrentRoute, useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -117,23 +117,23 @@ const AppsPageContent = (): ReactElement => {
 			{appsResult.phase === AsyncStatePhase.RESOLVED &&
 				!noMarketplaceOrInstalledAppMatches &&
 				(!noInstalledAppMatches || !noInstalledAppsFound) && (
-					<>
-						{isMarketplace && !isFiltered && <FeaturedAppsSections appsResult={appsResult.value.allApps} />}
-						{!noInstalledAppsFound && <AppsList apps={appsResult.value.items} title={t('All_Apps')} isMarketplace={isMarketplace} />}
+					<Box display='flex' flexDirection='column' height='100%' overflow='hidden'>
+						<Box height='100%' overflowY='scroll'>
+							{isMarketplace && !isFiltered && <FeaturedAppsSections appsResult={appsResult.value.allApps} />}
+							{!noInstalledAppsFound && <AppsList apps={appsResult.value.items} title={t('All_Apps')} isMarketplace={isMarketplace} />}
+						</Box>
 						{Boolean(appsResult.value.count) && (
-							<>
-								<Divider />
-								<Pagination
-									current={current}
-									itemsPerPage={itemsPerPage}
-									count={appsResult.value.total}
-									onSetItemsPerPage={onSetItemsPerPage}
-									onSetCurrent={onSetCurrent}
-									{...paginationProps}
-								/>
-							</>
+							<Pagination
+								divider
+								current={current}
+								itemsPerPage={itemsPerPage}
+								count={appsResult.value.total}
+								onSetItemsPerPage={onSetItemsPerPage}
+								onSetCurrent={onSetCurrent}
+								{...paginationProps}
+							/>
 						)}
-					</>
+					</Box>
 				)}
 			{noMarketplaceOrInstalledAppMatches && (
 				<NoMarketplaceOrInstalledAppMatchesEmptyState shouldShowSearchText={appsResult.value.shouldShowSearchText} text={text} />

apps/meteor/client/views/admin/apps/AppsPage/FeaturedAppsSections.tsx

@@ -13,7 +13,6 @@ type FeaturedSectionsProps = {
 
 const FeaturedAppsSections = ({ appsResult }: FeaturedSectionsProps): ReactElement | null => {
 	const t = useTranslation();
-
 	const featuredApps = useFeaturedApps();
 
 	if (featuredApps.isSuccess) {

apps/meteor/packages/rocketchat-i18n/i18n/af.i18n.json

@@ -2034,6 +2034,7 @@
   "Reactions": "reaksies",
   "Read_by": "Lees deur",
   "Read_only": "Lees net",
+  "This_room_is_read_only": "Hierdie kamer is slegs gelees",
   "Read_only_changed_successfully": "Lees slegs suksesvol verander",
   "Read_only_channel": "Lees net kanaal",
   "Read_only_group": "Lees slegs groep",

apps/meteor/packages/rocketchat-i18n/i18n/ar.i18n.json

@@ -3522,6 +3522,7 @@
   "Reactions": "التفاعلات",
   "Read_by": "قراءة بواسطة",
   "Read_only": "القراءة فقط",
+  "This_room_is_read_only": "يُمكن قراءة دردشة هذه الغرفة فقط",
   "Read_only_changed_successfully": "تم تغيير وضع القراءة فقط بنجاح",
   "Read_only_channel": "Channel للقراءة فقط",
   "Read_only_group": "مجموعة القراءة فقط",

apps/meteor/packages/rocketchat-i18n/i18n/az.i18n.json

@@ -2034,6 +2034,7 @@
   "Reactions": "Reaksiyalar",
   "Read_by": "Oxumaq",
   "Read_only": "Yalnız oxuyun",
+  "This_room_is_read_only": "Bu otaq yalnız oxunur",
   "Read_only_changed_successfully": "Oxumaq yalnız uğurla dəyişdirildi",
   "Read_only_channel": "Yalnız Kanal oxuyun",
   "Read_only_group": "Yalnız oxu qrupu",

apps/meteor/packages/rocketchat-i18n/i18n/be-BY.i18n.json

@@ -2051,6 +2051,7 @@
   "Reactions": "рэакцыі",
   "Read_by": "чытаюць",
   "Read_only": "толькі для чытання",
+  "This_room_is_read_only": "Нумар прызначаны толькі для чытання",
   "Read_only_changed_successfully": "Толькі для чытання паспяхова зменены",
   "Read_only_channel": "Толькі для чытання канала",
   "Read_only_group": "Толькі чытанне Групы",