Merge branch 'develop' into feat/navigation-phase-3

.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

.changeset/rich-toes-bow.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Prevented uiInteraction to subscribe multiple times

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

apps/meteor/client/hooks/useAppUiKitInteraction.ts

@@ -1,3 +1,4 @@
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useStream, useUserId } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import { useEffect } from 'react';
@@ -6,13 +7,12 @@ export const useAppUiKitInteraction = (handleServerInteraction: (interaction: Ui
 	const notifyUser = useStream('notify-user');
 	const uid = useUserId();
 
+	const handle = useEffectEvent(handleServerInteraction);
 	useEffect(() => {
 		if (!uid) {
 			return;
 		}
 
-		return notifyUser(`${uid}/uiInteraction`, (interaction) => {
-			handleServerInteraction(interaction);
-		});
-	}, [notifyUser, uid, handleServerInteraction]);
+		return notifyUser(`${uid}/uiInteraction`, handle);
+	}, [notifyUser, uid, handle]);
 };

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);

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);

apps/meteor/client/views/room/hooks/useRetentionPolicy.spec.ts

@@ -72,16 +72,13 @@ it('should return enabled and active true global retention is active for rooms o
 	expect(result.current).toEqual(expect.objectContaining({ ...defaultValue, enabled: true, isActive: true }));
 });
 
-it.failing(
-	'should isActive be false if global retention is active for rooms of the type and room has retention.enabled false',
-	async () => {
-		const fakeRoom = createFakeRoom({ t: CHANNELS_TYPE, retention: { enabled: false } });
-
-		const { result } = renderHook(() => useRetentionPolicy(fakeRoom), {
-			legacyRoot: true,
-			wrapper: getGlobalSettings({ enabled: true, ...roomTypeConfig[CHANNELS_TYPE] }).build(),
-		});
-
-		expect(result.current?.isActive).toBe(false);
-	},
-);
+it('should isActive be false if global retention is active for rooms of the type and room has retention.enabled false', async () => {
+	const fakeRoom = createFakeRoom({ t: CHANNELS_TYPE, retention: { enabled: false } });
+
+	const { result } = renderHook(() => useRetentionPolicy(fakeRoom), {
+		legacyRoot: true,
+		wrapper: getGlobalSettings({ enabled: true, ...roomTypeConfig[CHANNELS_TYPE] }).build(),
+	});
+
+	expect(result.current?.isActive).toBe(false);
+});

apps/meteor/client/views/room/hooks/useRetentionPolicy.ts

@@ -4,7 +4,9 @@ import { useSetting } from '@rocket.chat/ui-contexts';
 import { TIMEUNIT, isValidTimespan, timeUnitToMs } from '../../../lib/convertTimeUnit';
 
 const hasRetentionPolicy = (room: IRoom & { retention?: any }): room is IRoomWithRetentionPolicy =>
-	'retention' in room && room.retention !== undefined && 'overrideGlobal' in room.retention && isValidTimespan(room.retention.maxAge);
+	'retention' in room && room.retention !== undefined;
+
+const isRetentionOverridden = (room: IRoom & { retention?: any }) => 'overrideGlobal' in room.retention && room.retention.overrideGlobal;
 
 type RetentionPolicySettings = {
 	enabled: boolean;
@@ -41,31 +43,31 @@ const isActive = (room: IRoom, { enabled, appliesToChannels, appliesToGroups, ap
 };
 
 const extractFilesOnly = (room: IRoom, { filesOnly }: RetentionPolicySettings): boolean => {
-	if (hasRetentionPolicy(room) && room.retention.overrideGlobal) {
+	if (hasRetentionPolicy(room) && isRetentionOverridden(room)) {
 		return room.retention.filesOnly;
 	}
 
 	return filesOnly;
 };
 
 const extractExcludePinned = (room: IRoom, { doNotPrunePinned }: RetentionPolicySettings): boolean => {
-	if (hasRetentionPolicy(room) && room.retention.overrideGlobal) {
+	if (hasRetentionPolicy(room) && isRetentionOverridden(room)) {
 		return room.retention.excludePinned;
 	}
 
 	return doNotPrunePinned;
 };
 
 const extractIgnoreThreads = (room: IRoom, { ignoreThreads }: RetentionPolicySettings): boolean => {
-	if (hasRetentionPolicy(room) && room.retention.overrideGlobal) {
+	if (hasRetentionPolicy(room) && isRetentionOverridden(room)) {
 		return room.retention.ignoreThreads;
 	}
 
 	return ignoreThreads;
 };
 
 const getMaxAge = (room: IRoom, { maxAgeChannels, maxAgeGroups, maxAgeDMs }: RetentionPolicySettings): number => {
-	if (hasRetentionPolicy(room) && room.retention.overrideGlobal) {
+	if (hasRetentionPolicy(room) && isRetentionOverridden(room) && isValidTimespan(room.retention.maxAge)) {
 		return timeUnitToMs(TIMEUNIT.days, room.retention.maxAge);
 	}
 

packages/ui-client/src/components/AnchorPortal.spec.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+
+import AnchorPortal from './AnchorPortal';
+
+it('should render children', () => {
+	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />, { legacyRoot: true });
+
+	expect(screen.getByRole('presentation', { name: 'example' })).toBeInTheDocument();
+});
+
+it('should not recreate the anchor element', () => {
+	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example A' />} />, { legacyRoot: true });
+	const anchorA = document.getElementById('test-anchor');
+
+	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example B' />} />, { legacyRoot: true });
+	const anchorB = document.getElementById('test-anchor');
+
+	expect(anchorA).toBe(anchorB);
+	expect(screen.getByRole('presentation', { name: 'example A' })).toBeInTheDocument();
+	expect(screen.getByRole('presentation', { name: 'example B' })).toBeInTheDocument();
+});
+
+it('should remove the anchor element when unmounted', () => {
+	const { unmount } = render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />, {
+		legacyRoot: true,
+	});
+	expect(document.getElementById('test-anchor')).toBeInTheDocument();
+
+	unmount();
+	expect(document.getElementById('test-anchor')).not.toBeInTheDocument();
+});
+
+it('should not remove the anchor element after unmounting if there are other portals with the same id', () => {
+	const { unmount } = render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />, {
+		legacyRoot: true,
+	});
+	expect(document.getElementById('test-anchor')).toBeInTheDocument();
+
+	render(<AnchorPortal id='test-anchor' children={<div role='presentation' aria-label='example' />} />, {
+		legacyRoot: true,
+	});
+	unmount();
+
+	expect(document.getElementById('test-anchor')).toBeInTheDocument();
+});

packages/ui-client/src/components/AnchorPortal.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ensureAnchorElement, refAnchorElement, unrefAnchorElement } from '../helpers/anchors';
+
+export type AnchorPortalProps = {
+	id: string;
+	children: ReactNode;
+};
+
+const AnchorPortal = ({ id, children }: AnchorPortalProps) => {
+	const anchorElement = ensureAnchorElement(id);
+
+	useLayoutEffect(() => {
+		refAnchorElement(anchorElement);
+
+		return () => {
+			unrefAnchorElement(anchorElement);
+		};
+	}, [anchorElement]);
+
+	return <>{createPortal(children, anchorElement)}</>;
+};
+
+export default AnchorPortal;

packages/ui-client/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as AnchorPortal, AnchorPortalProps } from './AnchorPortal';
 export * from './EmojiPicker';
 export * from './ExternalLink';
 export * from './DotLeader';

packages/ui-client/src/helpers/anchors.ts

@@ -0,0 +1,32 @@
+export const ensureAnchorElement = (id: string): HTMLElement => {
+	const existingAnchor = document.getElementById(id);
+	if (existingAnchor) return existingAnchor;
+
+	const newAnchor = document.createElement('div');
+	newAnchor.id = id;
+	document.body.appendChild(newAnchor);
+	return newAnchor;
+};
+
+const getAnchorRefCount = (anchorElement: HTMLElement): number => {
+	const { refCount } = anchorElement.dataset;
+	if (refCount) return parseInt(refCount, 10);
+	return 0;
+};
+
+const setAnchorRefCount = (anchorElement: HTMLElement, refCount: number): void => {
+	anchorElement.dataset.refCount = String(refCount);
+};
+
+export const refAnchorElement = (anchorElement: HTMLElement): void => {
+	setAnchorRefCount(anchorElement, getAnchorRefCount(anchorElement) + 1);
+};
+
+export const unrefAnchorElement = (anchorElement: HTMLElement): void => {
+	const refCount = getAnchorRefCount(anchorElement) - 1;
+	setAnchorRefCount(anchorElement, refCount);
+
+	if (refCount <= 0) {
+		document.body.removeChild(anchorElement);
+	}
+};