Merge remote-tracking branch 'origin/develop' into release-7.0.0

RocketChat · Sep 6, 2024 · c6874ac · c6874ac
2 parents 1df4b0e + cd0d500
commit c6874ac
Show file tree

Hide file tree

Showing 43 changed files with 341 additions and 804 deletions.
diff --git a/.changeset/khaki-cameras-glow.md b/.changeset/khaki-cameras-glow.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where the retention policy warning keep displaying even if the retention is disabled inside the room
diff --git a/.changeset/many-balloons-scream.md b/.changeset/many-balloons-scream.md
@@ -0,0 +1,13 @@
+---
+'@rocket.chat/uikit-playground': minor
+'@rocket.chat/fuselage-ui-kit': minor
+'@rocket.chat/ui-theming': minor
+'@rocket.chat/ui-video-conf': minor
+'@rocket.chat/ui-composer': minor
+'@rocket.chat/gazzodown': minor
+'@rocket.chat/ui-avatar': minor
+'@rocket.chat/ui-client': minor
+'@rocket.chat/meteor': minor
+---
+
+Replaced new `SidebarV2` components under feature preview
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ Free for 30 days. Afterward, choose between continuing to host on our secure clo
 You can follow these instructions to setup a dev environment:
 
 - Install **Node 14.x (LTS)** either [manually](https://nodejs.org/dist/latest-v14.x/) or using a tool like [nvm](https://github.com/creationix/nvm) or [volta](https://volta.sh/) (recommended)
-- Install **Meteor** ([version here](apps/meteor/.meteor/release)): https://www.meteor.com/developers/install
+- Install **Meteor** ([version here](apps/meteor/.meteor/release)): https://docs.meteor.com/about/install.html
 - Install **yarn**: https://yarnpkg.com/getting-started/install
 - Clone this repo: `git clone https://github.com/RocketChat/Rocket.Chat.git`
 - Run `yarn` to install dependencies

diff --git a/apps/meteor/client/lib/utils/createAnchor.ts b/apps/meteor/client/lib/utils/createAnchor.ts
diff --git a/apps/meteor/client/lib/utils/deleteAnchor.ts b/apps/meteor/client/lib/utils/deleteAnchor.ts
diff --git a/apps/meteor/client/portals/TooltipPortal.tsx b/apps/meteor/client/portals/TooltipPortal.tsx
@@ -1,18 +1,15 @@
+import { AnchorPortal } from '@rocket.chat/ui-client';
 import type { ReactNode } from 'react';
-import React, { memo, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { memo } from 'react';
 
-import { createAnchor } from '../lib/utils/createAnchor';
-import { deleteAnchor } from '../lib/utils/deleteAnchor';
+const tooltipAnchorId = 'tooltip-root';
 
 type TooltipPortalProps = {
 	children?: ReactNode;
 };
 
 const TooltipPortal = ({ children }: TooltipPortalProps) => {
-	const [tooltipRoot] = useState(() => createAnchor('tooltip-root'));
-	useEffect(() => (): void => deleteAnchor(tooltipRoot), [tooltipRoot]);
-	return <>{createPortal(children, tooltipRoot)}</>;
+	return <AnchorPortal id={tooltipAnchorId}>{children}</AnchorPortal>;
 };
 
 export default memo(TooltipPortal);
diff --git a/apps/meteor/client/portals/VideoConfPopupPortal.tsx b/apps/meteor/client/portals/VideoConfPopupPortal.tsx
@@ -1,18 +1,15 @@
+import { AnchorPortal } from '@rocket.chat/ui-client';
 import type { ReactElement, ReactNode } from 'react';
-import React, { memo, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { memo } from 'react';
 
-import { createAnchor } from '../lib/utils/createAnchor';
-import { deleteAnchor } from '../lib/utils/deleteAnchor';
+const videoConfAnchorId = 'video-conf-root';
 
 type VideoConfPortalProps = {
 	children?: ReactNode;
 };
 
 const VideoConfPortal = ({ children }: VideoConfPortalProps): ReactElement => {
-	const [videoConfRoot] = useState(() => createAnchor('video-conf-root'));
-	useEffect(() => (): void => deleteAnchor(videoConfRoot), [videoConfRoot]);
-	return <>{createPortal(children, videoConfRoot)}</>;
+	return <AnchorPortal id={videoConfAnchorId}>{children}</AnchorPortal>;
 };
 
 export default memo(VideoConfPortal);
diff --git a/apps/meteor/client/sidebarv2/Item/Condensed.tsx b/apps/meteor/client/sidebarv2/Item/Condensed.tsx
@@ -1,11 +1,11 @@
-import { IconButton, Sidebar } from '@rocket.chat/fuselage';
+import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { ReactElement } from 'react';
 import React, { memo, useState } from 'react';
 
 type CondensedProps = {
-	title: ReactElement | string;
+	title: string;
 	titleIcon?: ReactElement;
 	avatar: ReactElement | boolean;
 	icon?: IconName;
@@ -19,7 +19,7 @@ type CondensedProps = {
 	clickable?: boolean;
 };
 
-const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }: CondensedProps) => {
+const Condensed = ({ icon, title, avatar, actions, href, unread, menu, badges, selected }: CondensedProps) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -32,28 +32,18 @@ const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badg
 	};
 
 	return (
-		<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
-			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
-			<Sidebar.Item.Content>
-				<Sidebar.Item.Wrapper>
-					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
-						{title}
-					</Sidebar.Item.Title>
-				</Sidebar.Item.Wrapper>
-				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
-				{menu && (
-					<Sidebar.Item.Menu {...handleMenuEvent}>
-						{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
-					</Sidebar.Item.Menu>
-				)}
-			</Sidebar.Item.Content>
-			{actions && (
-				<Sidebar.Item.Container>
-					<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
-				</Sidebar.Item.Container>
+		<SidebarV2Item href={href} selected={selected}>
+			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
+			{icon && icon}
+			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			{badges && badges}
+			{actions && actions}
+			{menu && (
+				<SidebarV2ItemMenu {...handleMenuEvent}>
+					{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
+				</SidebarV2ItemMenu>
 			)}
-		</Sidebar.Item>
+		</SidebarV2Item>
 	);
 };
 

diff --git a/apps/meteor/client/sidebarv2/Item/Extended.stories.tsx b/apps/meteor/client/sidebarv2/Item/Extended.stories.tsx
@@ -25,14 +25,7 @@ export default {
 const Template: ComponentStory<typeof Extended> = (args) => (
 	<Extended
 		{...args}
-		title={
-			<Box display='flex' flexDirection='row' w='full' alignItems='center'>
-				<Box flexGrow='1' withTruncatedText>
-					John Doe
-				</Box>
-				<Box fontScale='micro'>15:38</Box>
-			</Box>
-		}
+		title='John Doe'
 		subtitle={
 			<Box display='flex' flexDirection='row' w='full' alignItems='center'>
 				<Box flexGrow='1' withTruncatedText>

diff --git a/apps/meteor/client/sidebarv2/Item/Extended.tsx b/apps/meteor/client/sidebarv2/Item/Extended.tsx
@@ -1,4 +1,14 @@
-import { Sidebar, IconButton } from '@rocket.chat/fuselage';
+import {
+	SidebarV2Item,
+	SidebarV2ItemAvatarWrapper,
+	SidebarV2ItemCol,
+	SidebarV2ItemRow,
+	SidebarV2ItemTitle,
+	SidebarV2ItemTimestamp,
+	SidebarV2ItemContent,
+	SidebarV2ItemMenu,
+	IconButton,
+} from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import React, { memo, useState } from 'react';
@@ -7,7 +17,7 @@ import { useShortTimeAgo } from '../../hooks/useTimeAgo';
 
 type ExtendedProps = {
 	icon?: IconName;
-	title?: React.ReactNode;
+	title: string;
 	avatar?: React.ReactNode | boolean;
 	actions?: React.ReactNode;
 	href?: string;
@@ -24,7 +34,7 @@ type ExtendedProps = {
 
 const Extended = ({
 	icon,
-	title = '',
+	title,
 	avatar,
 	actions,
 	href,
@@ -37,7 +47,6 @@ const Extended = ({
 	threadUnread: _threadUnread,
 	unread,
 	selected,
-	...props
 }: ExtendedProps) => {
 	const formatDate = useShortTimeAgo();
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
@@ -47,42 +56,33 @@ const Extended = ({
 	const handleMenu = useEffectEvent((e) => {
 		setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu));
 	});
-
 	const handleMenuEvent = {
 		[isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: handleMenu,
 	};
 
 	return (
-		<Sidebar.Item selected={selected} highlighted={unread} {...props} {...({ href } as any)} clickable={!!href}>
-			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
-			<Sidebar.Item.Content>
-				<Sidebar.Item.Content>
-					<Sidebar.Item.Wrapper>
-						{icon}
-						<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
-							{title}
-						</Sidebar.Item.Title>
-						{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
-					</Sidebar.Item.Wrapper>
-				</Sidebar.Item.Content>
-				<Sidebar.Item.Content>
-					<Sidebar.Item.Wrapper>
-						<Sidebar.Item.Subtitle className={(unread && 'rcx-sidebar-item--highlighted') as string}>{subtitle}</Sidebar.Item.Subtitle>
-						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
-						{menu && (
-							<Sidebar.Item.Menu {...handleMenuEvent}>
-								{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
-							</Sidebar.Item.Menu>
-						)}
-					</Sidebar.Item.Wrapper>
-				</Sidebar.Item.Content>
-			</Sidebar.Item.Content>
-			{actions && (
-				<Sidebar.Item.Container>
-					<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
-				</Sidebar.Item.Container>
-			)}
-		</Sidebar.Item>
+		<SidebarV2Item href={href} selected={selected}>
+			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
+
+			<SidebarV2ItemCol>
+				<SidebarV2ItemRow>
+					{icon && icon}
+					<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+					{time && <SidebarV2ItemTimestamp>{formatDate(time)}</SidebarV2ItemTimestamp>}
+				</SidebarV2ItemRow>
+
+				<SidebarV2ItemRow>
+					<SidebarV2ItemContent unread={unread}>{subtitle}</SidebarV2ItemContent>
+					{badges && badges}
+					{actions && actions}
+					{menu && (
+						<SidebarV2ItemMenu {...handleMenuEvent}>
+							{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
+						</SidebarV2ItemMenu>
+					)}
+				</SidebarV2ItemRow>
+			</SidebarV2ItemCol>
+		</SidebarV2Item>
 	);
 };
 

diff --git a/apps/meteor/client/sidebarv2/Item/Medium.tsx b/apps/meteor/client/sidebarv2/Item/Medium.tsx
@@ -1,12 +1,13 @@
-import { Sidebar, IconButton } from '@rocket.chat/fuselage';
+import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import React, { memo, useState } from 'react';
 
 type MediumProps = {
-	title: React.ReactNode;
+	title: string;
 	titleIcon?: React.ReactNode;
 	avatar: React.ReactNode | boolean;
-	icon?: string;
+	icon?: IconName;
 	actions?: React.ReactNode;
 	href?: string;
 	unread?: boolean;
@@ -16,7 +17,7 @@ type MediumProps = {
 	menuOptions?: any;
 };
 
-const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }: MediumProps) => {
+const Medium = ({ icon, title, avatar, actions, href, badges, unread, menu, selected }: MediumProps) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -29,28 +30,18 @@ const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu,
 	};
 
 	return (
-		<Sidebar.Item {...props} href={href} clickable={!!href}>
-			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
-			<Sidebar.Item.Content>
-				<Sidebar.Item.Wrapper>
-					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread ? 'rcx-sidebar-item--highlighted' : undefined}>
-						{title}
-					</Sidebar.Item.Title>
-				</Sidebar.Item.Wrapper>
-				{badges && <Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>}
-				{menu && (
-					<Sidebar.Item.Menu {...handleMenuEvent}>
-						{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-item__menu icon='kebab' />}
-					</Sidebar.Item.Menu>
-				)}
-			</Sidebar.Item.Content>
-			{actions && (
-				<Sidebar.Item.Container>
-					<Sidebar.Item.Actions>{actions}</Sidebar.Item.Actions>
-				</Sidebar.Item.Container>
+		<SidebarV2Item href={href} selected={selected}>
+			<SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>
+			{icon && icon}
+			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			{badges && badges}
+			{actions && actions}
+			{menu && (
+				<SidebarV2ItemMenu {...handleMenuEvent}>
+					{menuVisibility ? menu() : <IconButton tabIndex={-1} aria-hidden mini rcx-sidebar-v2-item__menu icon='kebab' />}
+				</SidebarV2ItemMenu>
 			)}
-		</Sidebar.Item>
+		</SidebarV2Item>
 	);
 };