Chore: Move components away from /app/

app/e2e/client/rocketchat.e2e.js

@@ -26,8 +26,8 @@ import './tabbar';
 import { log, logError } from './logger';
 import { waitUntilFind } from '../../../client/lib/utils/waitUntilFind';
 import { imperativeModal } from '../../../client/lib/imperativeModal';
-import SaveE2EPasswordModal from './SaveE2EPasswordModal';
-import EnterE2EPasswordModal from './EnterE2EPasswordModal';
+import SaveE2EPasswordModal from '../../../client/views/e2e/SaveE2EPasswordModal';
+import EnterE2EPasswordModal from '../../../client/views/e2e/EnterE2EPasswordModal';
 import { call } from '../../../client/lib/utils/call';
 
 let failedToDecodeKey = false;

app/ui/client/lib/Tooltip.js

@@ -28,7 +28,7 @@ export const openToolTip = (title, anchor) => {
 		anchor,
 	};
 	Dep.changed();
-	unregister = unregister || createEphemeralPortal(() => import('./TooltipComponent'), props, dom);
+	unregister = unregister || createEphemeralPortal(() => import('../../../../client/components/TooltipComponent'), props, dom);
 };
 
 window.matchMedia('(hover: none)').matches || document.body.addEventListener('mouseover', (() => {

client/components/TooltipComponent.tsx

@@ -0,0 +1,24 @@
+import { Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
+import React, { ReactElement, ReactNode, useRef } from 'react';
+
+type TooltipComponentProps = {
+	title: ReactNode;
+	anchor: Element;
+};
+
+export const TooltipComponent = ({ title, anchor }: TooltipComponentProps): ReactElement => {
+	const ref = useRef(anchor);
+
+	return (
+		<PositionAnimated
+			anchor={ref}
+			placement='top-middle'
+			margin={8}
+			visible={AnimatedVisibility.UNHIDING}
+		>
+			<Tooltip>{title}</Tooltip>
+		</PositionAnimated>
+	);
+};
+
+export default TooltipComponent;

app/e2e/client/EnterE2EPasswordModal.tsx → client/views/e2e/EnterE2EPasswordModal.tsx

@@ -1,9 +1,9 @@
 import { Box, PasswordInput, Field, FieldGroup } from '@rocket.chat/fuselage';
-import React, { ReactElement, useState, useCallback } from 'react';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import React, { ReactElement, useState, useCallback } from 'react';
 
-import GenericModal from '../../../client/components/GenericModal';
-import { useTranslation } from '../../../client/contexts/TranslationContext';
+import GenericModal from '../../components/GenericModal';
+import { useTranslation } from '../../contexts/TranslationContext';
 
 const EnterE2EPasswordModal = ({
 	onConfirm,
@@ -18,11 +18,13 @@ const EnterE2EPasswordModal = ({
 	const [password, setPassword] = useState('');
 	const [passwordError, setPasswordError] = useState<string | undefined>();
 
-	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-		e.target.value !== '' && setPasswordError(undefined);
-		setPassword(e.currentTarget.value);
-	}, [setPassword]);
-
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			e.target.value !== '' && setPasswordError(undefined);
+			setPassword(e.currentTarget.value);
+		},
+		[setPassword],
+	);
 
 	const handleConfirm = useMutableCallback((): void => {
 		if (password === '') {

app/e2e/client/SaveE2EPasswordModal.tsx → client/views/e2e/SaveE2EPasswordModal.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
-import GenericModal from '../../../client/components/GenericModal';
-import { useTranslation } from '../../../client/contexts/TranslationContext';
+import GenericModal from '../../components/GenericModal';
+import { useTranslation } from '../../contexts/TranslationContext';
 
 const SaveE2EPasswordModal = ({
 	passwordRevealText,
@@ -26,7 +26,9 @@ const SaveE2EPasswordModal = ({
 			confirmText={t('I_Saved_My_Password')}
 			variant='warning'
 			title={t('Save_Your_Encryption_Password')}
-		><Box dangerouslySetInnerHTML={{ __html: passwordRevealText }} /></GenericModal>
+		>
+			<Box dangerouslySetInnerHTML={{ __html: passwordRevealText }} />
+		</GenericModal>
 	);
 };
 

client/views/room/contextualBar/Threads/ThreadList.tsx

@@ -3,7 +3,6 @@ import { useResizeObserver, useMutableCallback, useAutoFocus } from '@rocket.cha
 import React, { FC, useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import ThreadComponent from '../../../../../app/threads/client/components/ThreadComponent';
 import { IMessage } from '../../../../../definition/IMessage';
 import { IRoom } from '../../../../../definition/IRoom';
 import { IUser } from '../../../../../definition/IUser';
@@ -17,6 +16,7 @@ import {
 import { useSetting } from '../../../../contexts/SettingsContext';
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import { useTabContext } from '../../providers/ToolboxProvider';
+import ThreadComponent from '../../threads/ThreadComponent';
 import Row from './Row';
 import { withData } from './withData';