From 53d9b3beac9b82b6db9587d1d62a89a0082135a5 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Wed, 20 Jul 2022 18:35:49 -0300
Subject: [PATCH 1/9] wip

---
 .../InfoPanel/Action.tsx                      |   0
 .../InfoPanel/ActionGroup.tsx                 |   0
 .../InfoPanel/Avatar.tsx                      |   0
 .../{views => components}/InfoPanel/Field.tsx |   0
 .../InfoPanel/InfoPanel.stories.tsx           |   0
 .../InfoPanel/InfoPanel.tsx                   |   0
 .../{views => components}/InfoPanel/Label.tsx |   0
 .../InfoPanel/RetentionPolicyCallout.tsx      |   0
 .../InfoPanel/Section.tsx                     |   0
 .../{views => components}/InfoPanel/Text.tsx  |   0
 .../{views => components}/InfoPanel/Title.tsx |   0
 .../{views => components}/InfoPanel/index.ts  |   0
 .../components/UserCard/UserCardRole.tsx      |   2 +-
 .../components/UserCard/UserCardUsername.tsx  |   2 +-
 .../UserInfo/UserInfo.stories.tsx             |   4 +-
 .../UserInfo/UserInfo.tsx}                    | 135 +++++++++---------
 .../components/UserInfo/UserInfoAction.tsx    |  15 ++
 .../components/UserInfo/UserInfoAvatar.tsx    |   9 ++
 .../components/UserInfo/UserInfoUsername.tsx  |  17 +++
 .../client/components/UserInfo/index.ts       |  13 ++
 .../UserAvatarEditor/UserAvatarEditor.js      |   4 +-
 .../client/hooks/useUserCustomFields.ts       |  42 ++++++
 .../client/lib/utils/getUserEmailVerified.ts  |   2 +-
 .../admin/users/AdminUserInfoActions.tsx      | 124 ++++++++++++++++
 ...oWithData.js => AdminUserInfoWithData.tsx} |  85 ++++++-----
 .../users/hooks/useChangeAdminStatusAction.ts |  28 ++++
 .../users/hooks/useChangeUserStatusAction.ts  |  50 +++++++
 .../admin/users/hooks/useDeleteUserAction.tsx |  72 ++++++++++
 .../users/hooks/useResetE2EKeyAction.tsx      |  43 ++++++
 .../admin/users/hooks/useResetTOTPAction.tsx  |  43 ++++++
 .../admin/users/lib/confirmOwnerChanges.tsx   |  40 ++++++
 .../views/omnichannel/agents/AgentEdit.tsx    |   2 +-
 .../views/omnichannel/agents/AgentInfo.tsx    |   2 +-
 .../calls/contextualBar/InfoField.tsx         |   2 +-
 .../calls/contextualBar/VoipInfo.tsx          |   2 +-
 .../contextualBar/Info/RoomInfo/RoomInfo.js   |   4 +-
 .../room/contextualBar/UserInfo/Action.js     |  11 --
 .../room/contextualBar/UserInfo/Avatar.js     |   7 -
 .../UserActions.js => UserInfoActions.tsx}    |  28 ++--
 .../UserInfo/UserInfoWithData.js              |  10 +-
 .../room/contextualBar/UserInfo/Username.js   |   7 -
 .../room/contextualBar/UserInfo/index.js      |  15 --
 .../room/contextualBar/UserInfo/index.ts      |   1 +
 .../MaxChatsPerAgentDisplay.js                |   2 +-
 packages/core-typings/src/IUser.ts            |   2 +
 45 files changed, 656 insertions(+), 169 deletions(-)
 rename apps/meteor/client/{views => components}/InfoPanel/Action.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/ActionGroup.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Avatar.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Field.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/InfoPanel.stories.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/InfoPanel.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Label.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/RetentionPolicyCallout.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Section.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Text.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/Title.tsx (100%)
 rename apps/meteor/client/{views => components}/InfoPanel/index.ts (100%)
 rename apps/meteor/client/{views/room/contextualBar => components}/UserInfo/UserInfo.stories.tsx (96%)
 rename apps/meteor/client/{views/room/contextualBar/UserInfo/UserInfo.js => components/UserInfo/UserInfo.tsx} (61%)
 create mode 100644 apps/meteor/client/components/UserInfo/UserInfoAction.tsx
 create mode 100644 apps/meteor/client/components/UserInfo/UserInfoAvatar.tsx
 create mode 100644 apps/meteor/client/components/UserInfo/UserInfoUsername.tsx
 create mode 100644 apps/meteor/client/components/UserInfo/index.ts
 create mode 100644 apps/meteor/client/hooks/useUserCustomFields.ts
 create mode 100644 apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
 rename apps/meteor/client/views/admin/users/{AdminUserInfoWithData.js => AdminUserInfoWithData.tsx} (51%)
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
 create mode 100644 apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
 create mode 100644 apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx
 delete mode 100644 apps/meteor/client/views/room/contextualBar/UserInfo/Action.js
 delete mode 100644 apps/meteor/client/views/room/contextualBar/UserInfo/Avatar.js
 rename apps/meteor/client/views/room/contextualBar/UserInfo/{actions/UserActions.js => UserInfoActions.tsx} (50%)
 delete mode 100644 apps/meteor/client/views/room/contextualBar/UserInfo/Username.js
 delete mode 100644 apps/meteor/client/views/room/contextualBar/UserInfo/index.js
 create mode 100644 apps/meteor/client/views/room/contextualBar/UserInfo/index.ts

diff --git a/apps/meteor/client/views/InfoPanel/Action.tsx b/apps/meteor/client/components/InfoPanel/Action.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Action.tsx
rename to apps/meteor/client/components/InfoPanel/Action.tsx
diff --git a/apps/meteor/client/views/InfoPanel/ActionGroup.tsx b/apps/meteor/client/components/InfoPanel/ActionGroup.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/ActionGroup.tsx
rename to apps/meteor/client/components/InfoPanel/ActionGroup.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Avatar.tsx b/apps/meteor/client/components/InfoPanel/Avatar.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Avatar.tsx
rename to apps/meteor/client/components/InfoPanel/Avatar.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Field.tsx b/apps/meteor/client/components/InfoPanel/Field.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Field.tsx
rename to apps/meteor/client/components/InfoPanel/Field.tsx
diff --git a/apps/meteor/client/views/InfoPanel/InfoPanel.stories.tsx b/apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/InfoPanel.stories.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx
diff --git a/apps/meteor/client/views/InfoPanel/InfoPanel.tsx b/apps/meteor/client/components/InfoPanel/InfoPanel.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/InfoPanel.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanel.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Label.tsx b/apps/meteor/client/components/InfoPanel/Label.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Label.tsx
rename to apps/meteor/client/components/InfoPanel/Label.tsx
diff --git a/apps/meteor/client/views/InfoPanel/RetentionPolicyCallout.tsx b/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/RetentionPolicyCallout.tsx
rename to apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Section.tsx b/apps/meteor/client/components/InfoPanel/Section.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Section.tsx
rename to apps/meteor/client/components/InfoPanel/Section.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Text.tsx b/apps/meteor/client/components/InfoPanel/Text.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Text.tsx
rename to apps/meteor/client/components/InfoPanel/Text.tsx
diff --git a/apps/meteor/client/views/InfoPanel/Title.tsx b/apps/meteor/client/components/InfoPanel/Title.tsx
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/Title.tsx
rename to apps/meteor/client/components/InfoPanel/Title.tsx
diff --git a/apps/meteor/client/views/InfoPanel/index.ts b/apps/meteor/client/components/InfoPanel/index.ts
similarity index 100%
rename from apps/meteor/client/views/InfoPanel/index.ts
rename to apps/meteor/client/components/InfoPanel/index.ts
diff --git a/apps/meteor/client/components/UserCard/UserCardRole.tsx b/apps/meteor/client/components/UserCard/UserCardRole.tsx
index e699f2e32c9d..719313009126 100644
--- a/apps/meteor/client/components/UserCard/UserCardRole.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardRole.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, ReactElement } from 'react';
 
 const UserCardRole = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box m='x2' fontScale='c2'>
-		<Tag disabled children={children} />
+		<Tag children={children} />
 	</Box>
 );
 
diff --git a/apps/meteor/client/components/UserCard/UserCardUsername.tsx b/apps/meteor/client/components/UserCard/UserCardUsername.tsx
index 674a9ce0139f..494f2f3e1e25 100644
--- a/apps/meteor/client/components/UserCard/UserCardUsername.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardUsername.tsx
@@ -21,7 +21,7 @@ const UserCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: U
 		withTruncatedText
 		{...props}
 	>
-		{status}{' '}
+		{status}
 		<Box mis='x8' flexGrow={1} withTruncatedText>
 			{name}
 		</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.stories.tsx b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
similarity index 96%
rename from apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.stories.tsx
rename to apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
index 9ca356a80919..7c5f0173a1a1 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.stories.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
@@ -1,8 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import * as Status from '../../../../components/UserStatus';
-import VerticalBar from '../../../../components/VerticalBar';
+import * as Status from '../UserStatus';
+import VerticalBar from '../VerticalBar';
 import UserInfo from './UserInfo';
 
 export default {
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js b/apps/meteor/client/components/UserInfo/UserInfo.tsx
similarity index 61%
rename from apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js
rename to apps/meteor/client/components/UserInfo/UserInfo.tsx
index 7c1e4d66afb0..daefdcd7fbd0 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfo.js
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -1,74 +1,80 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Box, Margins, Tag } from '@rocket.chat/fuselage';
-import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo } from 'react';
-
-import MarkdownText from '../../../../components/MarkdownText';
-import UTCClock from '../../../../components/UTCClock';
-import UserCard from '../../../../components/UserCard';
-import VerticalBar from '../../../../components/VerticalBar';
-import { useTimeAgo } from '../../../../hooks/useTimeAgo';
-import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
-import InfoPanel from '../../../InfoPanel';
-import Avatar from './Avatar';
-
-function UserInfo({
+import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { memo, ReactElement } from 'react';
+
+import { useTimeAgo } from '../../hooks/useTimeAgo';
+import { useUserCustomFields } from '../../hooks/useUserCustomFields';
+import { getUserDisplayName } from '../../lib/getUserDisplayName';
+import InfoPanel from '../InfoPanel';
+import MarkdownText from '../MarkdownText';
+import UTCClock from '../UTCClock';
+import UserCard from '../UserCard';
+import VerticalBar from '../VerticalBar';
+import UserInfoAvatar from './UserInfoAvatar';
+
+type UserInfoProps = {
+	username: IUser['username'];
+	name: IUser['name'];
+	lastLogin: IUser['lastLogin'];
+	nickname: IUser['nickname'];
+	bio: IUser['bio'];
+	avatarETag: IUser['avatarETag'];
+	roles: IUser['roles'];
+	utcOffset: IUser['utcOffset'];
+	phone: IUser['phone'];
+	createdAt: IUser['createdAt'];
+	status: ReactElement;
+	statusText: IUser['statusText'];
+	canViewAllInfo: IUser['canViewAllInfo'];
+	email: string;
+	verified: boolean;
+	actions: ReactElement;
+	showRealNames: unknown;
+	customFields: IUser['customFields'];
+};
+
+const UserInfo = ({
 	username,
+	name,
+	lastLogin,
+	nickname,
 	bio,
-	canViewAllInfo,
+	avatarETag,
+	roles,
+	utcOffset,
+	phone,
 	email,
 	verified,
-	showRealNames,
-	status,
-	phone,
-	customStatus,
-	roles = [],
-	lastLogin,
 	createdAt,
-	utcOffset,
-	customFields = [],
-	name,
-	data,
-	nickname,
+	status,
+	statusText,
+	customFields,
+	canViewAllInfo,
 	actions,
+	showRealNames,
 	...props
-}) {
+}: UserInfoProps): ReactElement => {
 	const t = useTranslation();
 	const timeAgo = useTimeAgo();
-	const customFieldsToShowSetting = useSetting('Accounts_CustomFieldsToShowInUserInfo');
-	let customFieldsToShowObj;
-	try {
-		customFieldsToShowObj = JSON.parse(customFieldsToShowSetting);
-	} catch (error) {
-		customFieldsToShowObj = undefined;
-	}
-
-	const customFieldsToShow = customFieldsToShowObj
-		? Object.values(customFieldsToShowObj).map((value) => {
-				const role = Object.values(value);
-				const roleNameToShow = Object.keys(value);
-				const customField = {};
-				customField[roleNameToShow] = customFields[role];
-				return customField;
-		  })
-		: [];
+	const userCustomFields = useUserCustomFields(customFields);
 
 	return (
 		<VerticalBar.ScrollableContent p='x24' {...props}>
 			<InfoPanel>
-				<InfoPanel.Avatar>
-					<Avatar size={'x332'} username={username} etag={data?.avatarETag} />
-				</InfoPanel.Avatar>
+				{username && (
+					<InfoPanel.Avatar>
+						<UserInfoAvatar username={username} etag={avatarETag} />
+					</InfoPanel.Avatar>
+				)}
 
 				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
 
 				<InfoPanel.Section>
 					<InfoPanel.Title icon={status} title={getUserDisplayName(name, username, !!showRealNames)} />
-
-					{customStatus && (
-						<InfoPanel.Text>
-							<MarkdownText content={customStatus} parseEmoji={true} variant='inline' />
-						</InfoPanel.Text>
-					)}
+					<InfoPanel.Text>
+						<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
+					</InfoPanel.Text>
 				</InfoPanel.Section>
 
 				<InfoPanel.Section>
@@ -79,7 +85,7 @@ function UserInfo({
 						</InfoPanel.Field>
 					)}
 
-					{Number.isInteger(utcOffset) && (
+					{utcOffset && Number.isInteger(utcOffset) && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
 							<InfoPanel.Text>
@@ -127,7 +133,6 @@ function UserInfo({
 
 					{phone && (
 						<InfoPanel.Field>
-							{' '}
 							<InfoPanel.Label>{t('Phone')}</InfoPanel.Label>
 							<InfoPanel.Text display='flex' flexDirection='row' alignItems='center'>
 								<Box is='a' withTruncatedText href={`tel:${phone}`}>
@@ -139,7 +144,6 @@ function UserInfo({
 
 					{email && (
 						<InfoPanel.Field>
-							{' '}
 							<InfoPanel.Label>{t('Email')}</InfoPanel.Label>
 							<InfoPanel.Text display='flex' flexDirection='row' alignItems='center'>
 								<Box is='a' withTruncatedText href={`mailto:${email}`}>
@@ -153,15 +157,16 @@ function UserInfo({
 						</InfoPanel.Field>
 					)}
 
-					{customFieldsToShow.map((customField) =>
-						Object.values(customField)[0] ? (
-							<InfoPanel.Field key={Object.keys(customField)[0]}>
-								<InfoPanel.Label>{t(Object.keys(customField)[0])}</InfoPanel.Label>
-								<InfoPanel.Text>
-									<MarkdownText content={Object.values(customField)[0]} variant='inline' />
-								</InfoPanel.Text>
-							</InfoPanel.Field>
-						) : null,
+					{userCustomFields?.map(
+						(customField) =>
+							customField?.value && (
+								<InfoPanel.Field key={customField.value}>
+									<InfoPanel.Label>{t(customField.label as TranslationKey)}</InfoPanel.Label>
+									<InfoPanel.Text>
+										<MarkdownText content={customField.value} variant='inline' />
+									</InfoPanel.Text>
+								</InfoPanel.Field>
+							),
 					)}
 
 					{createdAt && (
@@ -174,6 +179,6 @@ function UserInfo({
 			</InfoPanel>
 		</VerticalBar.ScrollableContent>
 	);
-}
+};
 
 export default memo(UserInfo);
diff --git a/apps/meteor/client/components/UserInfo/UserInfoAction.tsx b/apps/meteor/client/components/UserInfo/UserInfoAction.tsx
new file mode 100644
index 000000000000..9cd161b0d891
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfoAction.tsx
@@ -0,0 +1,15 @@
+import { Button, Icon } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps } from 'react';
+
+type UserInfoActionProps = {
+	icon: ComponentProps<typeof Icon>['name'];
+} & ComponentProps<typeof Button>;
+
+const UserInfoAction = ({ icon, label, ...props }: UserInfoActionProps): ReactElement => (
+	<Button title={label} {...props} mi='x4'>
+		<Icon name={icon} size='x20' mie='x4' />
+		{label}
+	</Button>
+);
+
+export default UserInfoAction;
diff --git a/apps/meteor/client/components/UserInfo/UserInfoAvatar.tsx b/apps/meteor/client/components/UserInfo/UserInfoAvatar.tsx
new file mode 100644
index 000000000000..4a0340f33817
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfoAvatar.tsx
@@ -0,0 +1,9 @@
+import React, { ComponentProps, ReactElement } from 'react';
+
+import UserAvatar from '../avatar/UserAvatar';
+
+const UserInfoAvatar = ({ username, ...props }: ComponentProps<typeof UserAvatar>): ReactElement => (
+	<UserAvatar title={username} username={username} size='x332' {...props} />
+);
+
+export default UserInfoAvatar;
diff --git a/apps/meteor/client/components/UserInfo/UserInfoUsername.tsx b/apps/meteor/client/components/UserInfo/UserInfoUsername.tsx
new file mode 100644
index 000000000000..61a64e780a11
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfoUsername.tsx
@@ -0,0 +1,17 @@
+import { IUser } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement, ComponentProps } from 'react';
+
+import UserCard from '../UserCard';
+
+type UserInfoUsername = {
+	username: IUser['username'];
+	status: ReactElement;
+} & ComponentProps<typeof Box>;
+
+// TODO: Remove UserCard.Username
+const UserInfoUsername = ({ username, status, ...props }: UserInfoUsername): ReactElement => (
+	<UserCard.Username name={username} status={status} {...props} />
+);
+
+export default UserInfoUsername;
diff --git a/apps/meteor/client/components/UserInfo/index.ts b/apps/meteor/client/components/UserInfo/index.ts
new file mode 100644
index 000000000000..f8fe955dbe49
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/index.ts
@@ -0,0 +1,13 @@
+import InfoPanel from '../InfoPanel';
+import UserInfo from './UserInfo';
+import UserInfoAction from './UserInfoAction';
+import UserInfoAvatar from './UserInfoAvatar';
+import UserInfoUsername from './UserInfoUsername';
+
+export default Object.assign(UserInfo, {
+	Action: UserInfoAction,
+	Avatar: UserInfoAvatar,
+	Info: InfoPanel.Text,
+	Label: InfoPanel.Label,
+	Username: UserInfoUsername,
+});
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
index 23a40edcd0a7..5e2b2418e5c6 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.js
@@ -75,8 +75,8 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, suggestions
 							<Button square mis='none' onClick={clickReset} disabled={disabled} mie='x4' title={t('Accounts_SetDefaultAvatar')}>
 								<Avatar url={`/avatar/%40${username}`} />
 							</Button>
-							<IconButton icon='upload' square secondary onClick={clickUpload} disabled={disabled} title={t('Upload')} />
-							<IconButton icon='permalink' square secondary onClick={clickUrl} disabled={disabled || urlEmpty} title={t('Add URL')} />
+							<IconButton icon='upload' secondary onClick={clickUpload} disabled={disabled} title={t('Upload')} />
+							<IconButton icon='permalink' secondary onClick={clickUrl} disabled={disabled || urlEmpty} title={t('Add URL')} />
 							{suggestions && (
 								<UserAvatarSuggestions
 									suggestions={suggestions}
diff --git a/apps/meteor/client/hooks/useUserCustomFields.ts b/apps/meteor/client/hooks/useUserCustomFields.ts
new file mode 100644
index 000000000000..b66f8c4da7e8
--- /dev/null
+++ b/apps/meteor/client/hooks/useUserCustomFields.ts
@@ -0,0 +1,42 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+
+type CustomField =
+	| {
+			[key: string]: string;
+	  }
+	| undefined;
+
+type CustomFieldDisplay =
+	| {
+			label: string;
+			value?: string;
+	  }
+	| undefined;
+
+export const useUserCustomFields = (customFields: CustomField): CustomFieldDisplay[] | undefined => {
+	const customFieldsToShowSetting = useSetting('Accounts_CustomFieldsToShowInUserInfo');
+
+	let customFieldsToShowObj: CustomField[] | undefined;
+	try {
+		customFieldsToShowObj = JSON.parse(customFieldsToShowSetting as string);
+	} catch (error) {
+		customFieldsToShowObj = undefined;
+	}
+
+	if (!customFieldsToShowObj) {
+		return undefined;
+	}
+
+	const customFieldsToShow = customFieldsToShowObj.map((value) => {
+		if (!value) {
+			return undefined;
+		}
+
+		const [customFieldLabel] = Object.keys(value);
+		const [customFieldValue] = Object.values(value);
+		const fieldValue = customFields?.[customFieldValue];
+		return { label: customFieldLabel, value: fieldValue !== '' ? fieldValue : undefined };
+	});
+
+	return customFieldsToShow;
+};
diff --git a/apps/meteor/client/lib/utils/getUserEmailVerified.ts b/apps/meteor/client/lib/utils/getUserEmailVerified.ts
index fd2cd887a2f3..c47eeba9d0b6 100644
--- a/apps/meteor/client/lib/utils/getUserEmailVerified.ts
+++ b/apps/meteor/client/lib/utils/getUserEmailVerified.ts
@@ -1,4 +1,4 @@
 import type { IUser } from '@rocket.chat/core-typings';
 
-export const getUserEmailVerified = (user: IUser): boolean | undefined =>
+export const getUserEmailVerified = (user: Pick<IUser, 'emails'>): boolean | undefined =>
 	Array.isArray(user.emails) ? user.emails.find(({ verified }) => !!verified)?.verified : undefined;
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
new file mode 100644
index 000000000000..4dd5638649f6
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -0,0 +1,124 @@
+import { IUser } from '@rocket.chat/core-typings';
+import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
+import { useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useCallback, useMemo, ReactElement } from 'react';
+
+import UserInfo from '../../../components/UserInfo';
+import { useActionSpread } from '../../hooks/useActionSpread';
+import { useChangeAdminStatusAction } from './hooks/useChangeAdminStatusAction';
+import { useChangeUserStatusAction } from './hooks/useChangeUserStatusAction';
+import { useDeleteUserAction } from './hooks/useDeleteUserAction';
+import { useResetE2EKeyAction } from './hooks/useResetE2EKeyAction';
+import { useResetTOTPAction } from './hooks/useResetTOTPAction';
+
+type AdminUserInfoActionsProps = {
+	username: IUser['username'];
+	userId: IUser['_id'];
+	isActive: boolean;
+	isAdmin: boolean;
+	onChange: () => void;
+	onReload: () => void;
+};
+
+const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, onReload }: AdminUserInfoActionsProps): ReactElement => {
+	const t = useTranslation();
+	const directRoute = useRoute('direct');
+	const userRoute = useRoute('admin-users');
+	const canDirectMessage = usePermission('create-d');
+	const canEditOtherUserInfo = usePermission('edit-other-user-info');
+
+	const changeAdminStatusAction = useChangeAdminStatusAction(userId, isAdmin, username, onChange);
+	const changeUserStatusAction = useChangeUserStatusAction(userId, isActive, onChange);
+	const deleteUserAction = useDeleteUserAction(userId, onChange, onReload);
+	const resetTOTPAction = useResetTOTPAction(userId);
+	const resetE2EKeyAction = useResetE2EKeyAction(userId);
+
+	const directMessageClick = useCallback(
+		() =>
+			directRoute.push({
+				rid: username,
+			}),
+		[directRoute, username],
+	);
+
+	const editUserClick = useCallback(
+		() =>
+			userRoute.push({
+				context: 'edit',
+				id: userId,
+			}),
+		[userId, userRoute],
+	);
+
+	const options = useMemo(
+		() => ({
+			...(canDirectMessage && {
+				directMessage: {
+					icon: 'balloon',
+					label: t('Direct_Message'),
+					action: directMessageClick,
+				},
+			}),
+			...(canEditOtherUserInfo && {
+				editUser: {
+					icon: 'edit',
+					label: t('Edit'),
+					action: editUserClick,
+				},
+			}),
+			makeAdmin: changeAdminStatusAction,
+			resetE2EKey: resetE2EKeyAction,
+			resetTOTP: resetTOTPAction,
+			delete: deleteUserAction,
+			changeActiveStatus: changeUserStatusAction,
+		}),
+		[
+			t,
+			canDirectMessage,
+			directMessageClick,
+			canEditOtherUserInfo,
+			editUserClick,
+			changeAdminStatusAction,
+			changeUserStatusAction,
+			deleteUserAction,
+			resetE2EKeyAction,
+			resetTOTPAction,
+		],
+	);
+
+	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(options);
+
+	const menu = useMemo(() => {
+		if (!menuOptions) {
+			return null;
+		}
+
+		return (
+			<Menu
+				mi='x4'
+				placement='bottom-start'
+				small={false}
+				secondary
+				flexShrink={0}
+				key='menu'
+				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option label={label} title={label} icon={icon} {...props} />}
+				options={menuOptions}
+			/>
+		);
+	}, [menuOptions]);
+
+	const actions = useMemo(() => {
+		const mapAction = ([key, { label, icon, action }]) => (
+			<UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
+		);
+		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
+	}, [actionsDefinition, menu]);
+
+	return (
+		<ButtonGroup flexGrow={0} justifyContent='center' data-qa-id='UserInfoActions'>
+			{actions}
+		</ButtonGroup>
+	);
+};
+
+export default AdminUserInfoActions;
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.js b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
similarity index 51%
rename from apps/meteor/client/views/admin/users/AdminUserInfoWithData.js
rename to apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index ec777e99f905..a301cf67cf6f 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.js
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -1,22 +1,29 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import { useSetting, useRolesDescription, useRole, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useMemo, ReactElement } from 'react';
 
 import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
 import { FormSkeleton } from '../../../components/Skeleton';
 import UserCard from '../../../components/UserCard';
+import UserInfo from '../../../components/UserInfo';
 import { UserStatus } from '../../../components/UserStatus';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import { getUserEmailVerified } from '../../../lib/utils/getUserEmailVerified';
-import UserInfo from '../../room/contextualBar/UserInfo/UserInfo';
-import { UserInfoActions } from './UserInfoActions';
+import AdminUserInfoActions from './AdminUserInfoActions';
 
-const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
+type AdminUserInfoWithDataProps = {
+	uid: IUser['_id'];
+	onReload: () => void;
+};
+
+const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
+	const isAdmin = useRole('admin');
 	const approveManuallyUsers = useSetting('Accounts_ManuallyApproveNewUsers');
 
 	const {
@@ -26,7 +33,7 @@ const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
 		reload: reloadUserInfo,
 	} = useEndpointData(
 		'/v1/users.info',
-		useMemo(() => ({ ...(uid && { userId: uid }) }), [uid]),
+		useMemo(() => ({ userId: uid }), [uid]),
 	);
 
 	const onChange = useMutableCallback(() => {
@@ -35,31 +42,48 @@ const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
 	});
 
 	const user = useMemo(() => {
-		const { user } = data || { user: {} };
+		if (!data?.user) {
+			return;
+		}
 
-		const { name, username, roles = [], status, statusText, bio, utcOffset, lastLogin, nickname } = user;
+		const {
+			avatarETag,
+			name,
+			username,
+			phone,
+			createdAt,
+			roles = [],
+			status,
+			statusText,
+			bio,
+			utcOffset,
+			lastLogin,
+			nickname,
+			canViewAllInfo,
+		} = data.user;
 
 		return {
+			avatarETag,
 			name,
 			username,
 			lastLogin,
-			showRealNames,
 			roles: roles && getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
 			bio,
-			phone: user.phone,
+			canViewAllInfo,
+			phone,
 			utcOffset,
 			customFields: {
-				...user.customFields,
-				...(approveManuallyUsers && user.active === false && user.reason && { Reason: user.reason }),
+				...data.user.customFields,
+				...(approveManuallyUsers && data.user.active === false && data.user.reason && { Reason: data.user.reason }),
 			},
-			verified: getUserEmailVerified(user),
-			email: getUserEmailAddress(user),
-			createdAt: user.createdAt,
+			verified: data.user && getUserEmailVerified(data.user),
+			email: getUserEmailAddress(data.user),
+			createdAt,
 			status: <UserStatus status={status} />,
-			customStatus: statusText,
+			statusText,
 			nickname,
 		};
-	}, [approveManuallyUsers, data, showRealNames, getRoles]);
+	}, [approveManuallyUsers, data, getRoles]);
 
 	if (state === AsyncStatePhase.LOADING) {
 		return (
@@ -69,31 +93,24 @@ const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
 		);
 	}
 
-	if (error) {
+	if (error || !data?.user) {
 		return <Box mbs='x16'>{t('User_not_found')}</Box>;
 	}
 
-	const admin = data.user?.roles?.includes('admin');
-
 	return (
 		<UserInfo
 			{...user}
-			data={data.user}
-			onChange={onChange}
+			showRealNames={showRealNames}
 			actions={
-				data &&
-				data.user && (
-					<UserInfoActions
-						isActive={data.user.active}
-						isAdmin={admin}
-						_id={data.user._id}
-						username={data.user.username}
-						onChange={onChange}
-						onReload={onReload}
-					/>
-				)
+				<AdminUserInfoActions
+					isActive={data.user.active}
+					isAdmin={isAdmin}
+					userId={data.user._id}
+					username={data.user.username}
+					onChange={onChange}
+					onReload={onReload}
+				/>
 			}
-			{...props}
 		/>
 	);
 };
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
new file mode 100644
index 000000000000..6f3117c56d31
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
@@ -0,0 +1,28 @@
+import { useToastMessageDispatch, useMethod, useTranslation, usePermission } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+
+export const useChangeAdminStatusAction = (_id, isAdmin, username, onChange) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const setAdminStatus = useMethod('setAdminStatus');
+	const canAssignAdminRole = usePermission('assign-admin-role');
+
+	const changeAdminStatus = useCallback(async () => {
+		try {
+			await setAdminStatus(_id, !isAdmin);
+			const message = isAdmin ? 'User_is_no_longer_an_admin' : 'User_is_now_an_admin';
+			dispatchToastMessage({ type: 'success', message: t(message) });
+			onChange();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [_id, dispatchToastMessage, isAdmin, onChange, setAdminStatus, t]);
+
+	return canAssignAdminRole && username
+		? {
+				icon: 'key',
+				label: isAdmin ? t('Remove_Admin') : t('Make_Admin'),
+				action: changeAdminStatus,
+		  }
+		: undefined;
+};
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
new file mode 100644
index 000000000000..2ad6ca38960c
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
@@ -0,0 +1,50 @@
+import { useToastMessageDispatch, useTranslation, useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { confirmOwnerChanges } from '../lib/confirmOwnerChanges';
+
+export const useChangeUserStatusAction = (_id, isActive, onChange) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const canEditOtherUserActiveStatus = usePermission('edit-other-user-active-status');
+
+	const activeStatusQuery = useMemo(
+		() => ({
+			userId: _id,
+			activeStatus: !isActive,
+		}),
+		[_id, isActive],
+	);
+	const changeActiveStatusMessage = isActive ? 'User_has_been_deactivated' : 'User_has_been_activated';
+	const changeActiveStatusRequest = useEndpoint('POST', '/v1/users.setActiveStatus');
+
+	const changeActiveStatus = confirmOwnerChanges(
+		async (confirm = false) => {
+			if (confirm) {
+				activeStatusQuery.confirmRelinquish = confirm;
+			}
+
+			try {
+				const result = await changeActiveStatusRequest(activeStatusQuery);
+				if (result.success) {
+					dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
+					onChange();
+				}
+			} catch (error) {
+				throw error;
+			}
+		},
+		{
+			confirmLabel: t('Yes_deactivate_it'),
+		},
+		onChange,
+	);
+
+	return canEditOtherUserActiveStatus
+		? {
+				icon: 'user',
+				label: isActive ? t('Deactivate') : t('Activate'),
+				action: changeActiveStatus,
+		  }
+		: undefined;
+};
diff --git a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
new file mode 100644
index 000000000000..b31cf468618e
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
@@ -0,0 +1,72 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	useSetModal,
+	useToastMessageDispatch,
+	useRoute,
+	useSetting,
+	usePermission,
+	useEndpoint,
+	useTranslation,
+} from '@rocket.chat/ui-contexts';
+import React, { useMemo, useCallback } from 'react';
+
+import GenericModal from '../../../../components/GenericModal';
+import { confirmOwnerChanges } from '../lib/confirmOwnerChanges';
+
+export const useDeleteUserAction = (_id, onChange, onReload) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+	const handleCloseModal = useMutableCallback((): void => setModal());
+	const userRoute = useRoute('admin-users');
+	const canDeleteUser = usePermission('delete-user');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const handleDeletedUser = (): void => {
+		handleCloseModal();
+		userRoute.push({});
+		onReload();
+	};
+
+	const deleteUserQuery = useMemo(() => ({ userId: _id }), [_id]);
+	const deleteUserEndpoint = useEndpoint('POST', '/v1/users.delete');
+
+	const erasureType = useSetting('Message_ErasureType');
+
+	const deleteUser = confirmOwnerChanges(
+		async (confirm = false) => {
+			if (confirm) {
+				deleteUserQuery.confirmRelinquish = confirm;
+			}
+
+			const result = await deleteUserEndpoint(deleteUserQuery);
+			if (result.success) {
+				handleDeletedUser();
+				dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
+			} else {
+				handleCloseModal();
+			}
+		},
+		{
+			contentTitle: t(`Delete_User_Warning_${erasureType}`),
+			confirmLabel: t('Delete'),
+		},
+		onChange,
+	);
+
+	const confirmDeleteUser = useCallback(() => {
+		setModal(
+			<GenericModal variant='danger' onConfirm={deleteUser} onCancel={handleCloseModal} confirmText={t('Delete')}>
+				{t(`Delete_User_Warning_${erasureType}`)}
+			</GenericModal>,
+		);
+	}, [deleteUser, erasureType, handleCloseModal, setModal, t]);
+
+	return canDeleteUser
+		? {
+				icon: 'trash',
+				label: t('Delete'),
+				action: confirmDeleteUser,
+		  }
+		: undefined;
+};
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
new file mode 100644
index 000000000000..5846abfee63c
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
@@ -0,0 +1,43 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useCallback } from 'react';
+
+import GenericModal from '../../../../components/GenericModal';
+
+export const useResetE2EKeyAction = (_id) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+	const handleCloseModal = useMutableCallback(() => setModal());
+	const canResetE2EEKey = usePermission('edit-other-user-e2ee');
+	const enforcePassword = useSetting('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback');
+	const resetE2EEKeyRequest = useEndpoint('POST', '/v1/users.resetE2EKey');
+
+	const resetE2EEKey = useCallback(async () => {
+		handleCloseModal();
+		const result = await resetE2EEKeyRequest({ userId: _id });
+
+		if (result) {
+			setModal(
+				<GenericModal variant='success' onClose={handleCloseModal} onConfirm={handleCloseModal}>
+					{t('Users_key_has_been_reset')}
+				</GenericModal>,
+			);
+		}
+	}, [resetE2EEKeyRequest, setModal, t, _id, handleCloseModal]);
+
+	const confirmResetE2EEKey = useCallback(() => {
+		setModal(
+			<GenericModal variant='danger' onConfirm={resetE2EEKey} onCancel={handleCloseModal} confirmText={t('Reset')}>
+				{t('E2E_Reset_Other_Key_Warning')}
+			</GenericModal>,
+		);
+	}, [resetE2EEKey, t, setModal, handleCloseModal]);
+
+	return canResetE2EEKey && enforcePassword
+		? {
+				icon: 'key',
+				label: t('Reset_E2E_Key'),
+				action: confirmResetE2EEKey,
+		  }
+		: undefined;
+};
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
new file mode 100644
index 000000000000..5167cf755081
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
@@ -0,0 +1,43 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useCallback } from 'react';
+
+import GenericModal from '../../../../components/GenericModal';
+
+export const useResetTOTPAction = (_id) => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+	const handleCloseModal = useMutableCallback(() => setModal());
+	const canResetTOTP = usePermission('edit-other-user-totp');
+	const resetTOTPRequest = useEndpoint('POST', '/v1/users.resetTOTP');
+	const enforcePassword = useSetting('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback');
+
+	const resetTOTP = useCallback(async () => {
+		setModal();
+		const result = await resetTOTPRequest({ userId: _id });
+
+		if (result) {
+			setModal(
+				<GenericModal variant='success' onClose={handleCloseModal} onConfirm={handleCloseModal}>
+					{t('Users_TOTP_has_been_reset')}
+				</GenericModal>,
+			);
+		}
+	}, [resetTOTPRequest, setModal, t, _id, handleCloseModal]);
+
+	const confirmResetTOTP = useCallback(() => {
+		setModal(
+			<GenericModal variant='danger' onConfirm={resetTOTP} onCancel={handleCloseModal} confirmText={t('Reset')}>
+				{t('TOTP_Reset_Other_Key_Warning')}
+			</GenericModal>,
+		);
+	}, [resetTOTP, t, setModal, handleCloseModal]);
+
+	return canResetTOTP && enforcePassword
+		? {
+				icon: 'key',
+				label: t('Reset_TOTP'),
+				action: confirmResetTOTP,
+		  }
+		: undefined;
+};
diff --git a/apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx b/apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx
new file mode 100644
index 000000000000..caeecc201d1c
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx
@@ -0,0 +1,40 @@
+import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import React from 'react';
+
+import ConfirmOwnerChangeWarningModal from '../../../../components/ConfirmOwnerChangeWarningModal';
+
+export const confirmOwnerChanges =
+	(action, modalProps = {}, onChange) =>
+	async (): Promise<void> => {
+		const setModal = useSetModal();
+		const dispatchToastMessage = useToastMessageDispatch();
+
+		try {
+			return await action();
+		} catch (error) {
+			if (error.xhr?.responseJSON?.errorType === 'user-last-owner') {
+				const { shouldChangeOwner, shouldBeRemoved } = error.xhr.responseJSON.details;
+
+				const handleConfirm = async (): Promise<void> => {
+					await action(true);
+					setModal();
+				};
+
+				const handleCancel = (): void => {
+					setModal();
+					onChange();
+				};
+
+				return setModal(
+					<ConfirmOwnerChangeWarningModal
+						{...modalProps}
+						shouldChangeOwner={shouldChangeOwner}
+						shouldBeRemoved={shouldBeRemoved}
+						onConfirm={handleConfirm}
+						onCancel={handleCancel}
+					/>,
+				);
+			}
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
index cb3721baec75..92a344ccb568 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
@@ -5,9 +5,9 @@ import { useToastMessageDispatch, useRoute, useSetting, useMethod, useTranslatio
 import React, { useMemo, useRef, useState, FC, ReactElement } from 'react';
 
 import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
+import UserInfo from '../../../components/UserInfo';
 import VerticalBar from '../../../components/VerticalBar';
 import { useForm } from '../../../hooks/useForm';
-import UserInfo from '../../room/contextualBar/UserInfo';
 import { useFormsSubscription } from '../additionalForms';
 
 // TODO: TYPE:
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
index d76771f8b5b5..78c37075d5da 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { HTMLAttributes, memo } from 'react';
 
 import { FormSkeleton } from '../../../components/Skeleton';
+import UserInfo from '../../../components/UserInfo';
 import { UserStatus } from '../../../components/UserStatus';
 import VerticalBar from '../../../components/VerticalBar';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
-import UserInfo from '../../room/contextualBar/UserInfo';
 import { useFormsSubscription } from '../additionalForms';
 import AgentInfoAction from './AgentInfoAction';
 
diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx
index 87a2dbf10e7c..adb769df92f9 100644
--- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/InfoField.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 
-import InfoPanel from '../../../../InfoPanel';
+import InfoPanel from '../../../../../components/InfoPanel';
 
 type InfoFieldPropsType = {
 	label: string;
diff --git a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx
index b64f60b848c4..fba024243d7b 100644
--- a/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx
@@ -5,11 +5,11 @@ import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
 import { parseOutboundPhoneNumber } from '../../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
+import InfoPanel from '../../../../../components/InfoPanel';
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
 import { useIsCallReady } from '../../../../../contexts/CallContext';
-import InfoPanel from '../../../../InfoPanel';
 import AgentInfoDetails from '../../../components/AgentInfoDetails';
 import AgentField from '../../chats/contextualBar/AgentField';
 import { InfoField } from './InfoField';
diff --git a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
index 50499bee5a43..c93c16b6a9ae 100644
--- a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
+++ b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
@@ -2,11 +2,11 @@ import { Box, Callout, Menu, Option } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 
+import InfoPanel from '../../../../../components/InfoPanel';
+import RetentionPolicyCallout from '../../../../../components/InfoPanel/RetentionPolicyCallout';
 import MarkdownText from '../../../../../components/MarkdownText';
 import VerticalBar from '../../../../../components/VerticalBar';
 import RoomAvatar from '../../../../../components/avatar/RoomAvatar';
-import InfoPanel from '../../../../InfoPanel';
-import RetentionPolicyCallout from '../../../../InfoPanel/RetentionPolicyCallout';
 import { useActionSpread } from '../../../../hooks/useActionSpread';
 
 const RoomInfo = ({
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/Action.js b/apps/meteor/client/views/room/contextualBar/UserInfo/Action.js
deleted file mode 100644
index ec41cf145b09..000000000000
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/Action.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button, Icon } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Action = ({ icon, label, ...props }) => (
-	<Button title={label} {...props} mi='x4'>
-		<Icon name={icon} size='x20' mie='x4' />
-		{label}
-	</Button>
-);
-
-export default Action;
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/Avatar.js b/apps/meteor/client/views/room/contextualBar/UserInfo/Avatar.js
deleted file mode 100644
index 25175658fbe0..000000000000
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/Avatar.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import UserAvatar from '../../../../components/avatar/UserAvatar';
-
-const Avatar = ({ username, ...props }) => <UserAvatar title={username} username={username} {...props} />;
-
-export default Avatar;
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/actions/UserActions.js b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
similarity index 50%
rename from apps/meteor/client/views/room/contextualBar/UserInfo/actions/UserActions.js
rename to apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index 9075a65e891c..e9dcb3d75368 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/actions/UserActions.js
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -1,12 +1,21 @@
+import { IRoom, IUser } from '@rocket.chat/core-typings';
 import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactElement } from 'react';
 
-import UserInfo from '..';
-import { useActionSpread } from '../../../../hooks/useActionSpread';
-import { useUserInfoActions } from '../../../hooks/useUserInfoActions';
+import UserInfo from '../../../../components/UserInfo';
+import { useActionSpread } from '../../../hooks/useActionSpread';
+import { useUserInfoActions } from '../../hooks/useUserInfoActions';
 
-const UserActions = ({ user, rid, backToList }) => {
-	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(useUserInfoActions(user, rid, backToList));
+type UserInfoActionsProps = {
+	user: Pick<IUser, '_id' | 'username'>;
+	rid: IRoom['_id'];
+	backToList: () => void;
+};
+
+const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => {
+	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(
+		useUserInfoActions({ ...user._id, ...user.username }, rid, backToList),
+	);
 
 	const menu = useMemo(() => {
 		if (!menuOptions) {
@@ -19,8 +28,7 @@ const UserActions = ({ user, rid, backToList }) => {
 				mi='x4'
 				secondary
 				small={false}
-				maxHeight='initial'
-				renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
+				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
 				flexShrink={0}
 				options={menuOptions}
 				data-qa='UserUserInfo-menu'
@@ -37,10 +45,10 @@ const UserActions = ({ user, rid, backToList }) => {
 	}, [actionsDefinition, menu]);
 
 	return (
-		<ButtonGroup mi='neg-x4' flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center' flexShrink={0}>
+		<ButtonGroup mi='neg-x4' flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center'>
 			{actions}
 		</ButtonGroup>
 	);
 };
 
-export default UserActions;
+export default UserInfoActions;
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js
index 2af509354ec7..3c70860e4abf 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js
@@ -5,15 +5,15 @@ import React, { useMemo } from 'react';
 import { getUserEmailAddress } from '../../../../../lib/getUserEmailAddress';
 import { FormSkeleton } from '../../../../components/Skeleton';
 import UserCard from '../../../../components/UserCard';
+import UserInfo from '../../../../components/UserInfo';
 import { ReactiveUserStatus } from '../../../../components/UserStatus';
 import VerticalBar from '../../../../components/VerticalBar';
 import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../../hooks/useEndpointData';
 import { getUserEmailVerified } from '../../../../lib/utils/getUserEmailVerified';
-import UserInfo from './UserInfo';
-import UserActions from './actions/UserActions';
+import UserActions from './UserInfoActions';
 
-function UserInfoWithData({ uid, username, tabBar, rid, onClickClose, onClose = onClickClose, video, onClickBack, ...props }) {
+function UserInfoWithData({ uid, username, rid, onClickClose, onClose = onClickClose, onClickBack }) {
 	const t = useTranslation();
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
@@ -76,9 +76,7 @@ function UserInfoWithData({ uid, username, tabBar, rid, onClickClose, onClose =
 				</VerticalBar.Content>
 			)}
 
-			{!isLoading && !error && (
-				<UserInfo {...user} data={user} actions={<UserActions user={user} rid={rid} backToList={onClickBack} />} {...props} p='x24' />
-			)}
+			{!isLoading && !error && <UserInfo {...user} actions={<UserActions user={user} rid={rid} backToList={onClickBack} />} p='x24' />}
 		</>
 	);
 }
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/Username.js b/apps/meteor/client/views/room/contextualBar/UserInfo/Username.js
deleted file mode 100644
index b9d2bf6ca4a9..000000000000
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/Username.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import UserCard from '../../../../components/UserCard';
-
-const Username = ({ username, status, ...props }) => <UserCard.Username name={username} status={status} {...props} />;
-
-export default Username;
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/index.js b/apps/meteor/client/views/room/contextualBar/UserInfo/index.js
deleted file mode 100644
index 0e581cf8ab58..000000000000
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { memo } from 'react';
-
-import InfoPanel from '../../../InfoPanel';
-import Action from './Action';
-import Avatar from './Avatar';
-import UserInfoWithData from './UserInfoWithData';
-import Username from './Username';
-
-export default Object.assign(memo(UserInfoWithData), {
-	Action,
-	Avatar,
-	Info: InfoPanel.Text,
-	Label: InfoPanel.Label,
-	Username,
-});
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/index.ts b/apps/meteor/client/views/room/contextualBar/UserInfo/index.ts
new file mode 100644
index 000000000000..f5be133739e9
--- /dev/null
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/index.ts
@@ -0,0 +1 @@
+export { default } from './UserInfoWithData';
diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js b/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js
index 9783e69985f9..3915bfd1c98b 100644
--- a/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js
+++ b/apps/meteor/ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay.js
@@ -1,7 +1,7 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import UserInfo from '../../../../client/views/room/contextualBar/UserInfo';
+import UserInfo from '../../../../client/components/UserInfo';
 
 const MaxChatsPerAgentDisplay = ({ data: { livechat: { maxNumberSimultaneousChat = 0 } = {} } = {} }) => {
 	const t = useTranslation();
diff --git a/packages/core-typings/src/IUser.ts b/packages/core-typings/src/IUser.ts
index 60a0ca1f3d55..7591a5087e13 100644
--- a/packages/core-typings/src/IUser.ts
+++ b/packages/core-typings/src/IUser.ts
@@ -144,6 +144,8 @@ export interface IUser extends IRocketChatRecord {
 	extension?: string;
 	inviteToken?: string;
 	federated?: boolean;
+	canViewAllInfo?: boolean;
+	phone?: string;
 }
 
 export interface IRegisterUser extends IUser {

From 937c69a2e12a8f2a7c1355c8963da73b54ea5810 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 21 Jul 2022 19:31:15 -0300
Subject: [PATCH 2/9] fix: actions

---
 ...gModal.tsx => ConfirmOwnerChangeModal.tsx} |  29 +-
 .../account/profile/AccountProfilePage.tsx    |   6 +-
 .../admin/users/AdminUserInfoActions.tsx      |  16 +-
 .../views/admin/users/UserInfoActions.js      | 326 ------------------
 .../users/hooks/useChangeAdminStatusAction.ts |  11 +-
 .../users/hooks/useChangeUserStatusAction.ts  |  55 +--
 .../useConfirmOwnerChanges.tsx}               |  18 +-
 .../admin/users/hooks/useDeleteUserAction.tsx |  63 ++--
 .../users/hooks/useResetE2EKeyAction.tsx      |   8 +-
 .../admin/users/hooks/useResetTOTPAction.tsx  |   8 +-
 .../client/views/hooks/useActionSpread.ts     |   4 +-
 .../UserInfo/UserInfoActions.tsx              |   6 +-
 packages/rest-typings/src/v1/users.ts         |   6 +
 13 files changed, 129 insertions(+), 427 deletions(-)
 rename apps/meteor/client/components/{ConfirmOwnerChangeWarningModal.tsx => ConfirmOwnerChangeModal.tsx} (79%)
 delete mode 100644 apps/meteor/client/views/admin/users/UserInfoActions.js
 rename apps/meteor/client/views/admin/users/{lib/confirmOwnerChanges.tsx => hooks/useConfirmOwnerChanges.tsx} (64%)

diff --git a/apps/meteor/client/components/ConfirmOwnerChangeWarningModal.tsx b/apps/meteor/client/components/ConfirmOwnerChangeModal.tsx
similarity index 79%
rename from apps/meteor/client/components/ConfirmOwnerChangeWarningModal.tsx
rename to apps/meteor/client/components/ConfirmOwnerChangeModal.tsx
index 694ca1b9905c..0ba24e50f167 100644
--- a/apps/meteor/client/components/ConfirmOwnerChangeWarningModal.tsx
+++ b/apps/meteor/client/components/ConfirmOwnerChangeModal.tsx
@@ -1,26 +1,23 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC } from 'react';
+import React, { FC, ComponentProps } from 'react';
 
 import GenericModal from './GenericModal';
 import RawText from './RawText';
 
-type ConfirmOwnerChangeWarningModalProps = {
-	onConfirm: () => void;
-	onCancel: () => void;
-	shouldChangeOwner: Array<string>;
-	shouldBeRemoved: Array<string>;
-	contentTitle: string;
-	confirmLabel: string;
-};
+type ConfirmOwnerChangeModalProps = {
+	shouldChangeOwner: string[];
+	shouldBeRemoved: string[];
+	contentTitle?: string;
+} & Pick<ComponentProps<typeof GenericModal>, 'onConfirm' | 'onCancel' | 'confirmText'>;
 
-const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> = ({
-	onConfirm,
-	onCancel,
-	contentTitle = '',
-	confirmLabel = '',
+const ConfirmOwnerChangeModal: FC<ConfirmOwnerChangeModalProps> = ({
 	shouldChangeOwner,
 	shouldBeRemoved,
+	contentTitle,
+	confirmText,
+	onConfirm,
+	onCancel,
 }) => {
 	const t = useTranslation();
 
@@ -61,7 +58,7 @@ const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> =
 	}
 
 	return (
-		<GenericModal variant='danger' onClose={onCancel} onCancel={onCancel} confirmText={confirmLabel} onConfirm={onConfirm}>
+		<GenericModal variant='danger' onClose={onCancel} onCancel={onCancel} confirmText={confirmText} onConfirm={onConfirm}>
 			{contentTitle}
 
 			{changeOwnerRooms && (
@@ -78,4 +75,4 @@ const ConfirmOwnerChangeWarningModal: FC<ConfirmOwnerChangeWarningModalProps> =
 	);
 };
 
-export default ConfirmOwnerChangeWarningModal;
+export default ConfirmOwnerChangeModal;
diff --git a/apps/meteor/client/views/account/profile/AccountProfilePage.tsx b/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
index 4c15be23640f..ab5d888b4f49 100644
--- a/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
@@ -15,7 +15,7 @@ import { SHA256 } from 'meteor/sha';
 import React, { ReactElement, useMemo, useState, useCallback } from 'react';
 
 import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
-import ConfirmOwnerChangeWarningModal from '../../../components/ConfirmOwnerChangeWarningModal';
+import ConfirmOwnerChangeModal from '../../../components/ConfirmOwnerChangeModal';
 import Page from '../../../components/Page';
 import { useForm } from '../../../hooks/useForm';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
@@ -206,11 +206,11 @@ const AccountProfilePage = (): ReactElement => {
 			};
 
 			return setModal(() => (
-				<ConfirmOwnerChangeWarningModal
+				<ConfirmOwnerChangeModal
 					onConfirm={handleConfirm}
 					onCancel={closeModal}
 					contentTitle={t(`Delete_User_Warning_${erasureType}` as TranslationKey)}
-					confirmLabel={t('Delete')}
+					confirmText={t('Delete')}
 					shouldChangeOwner={shouldChangeOwner}
 					shouldBeRemoved={shouldBeRemoved}
 				/>
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index 4dd5638649f6..fb70baf0e1c2 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -27,7 +27,7 @@ const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, o
 	const canDirectMessage = usePermission('create-d');
 	const canEditOtherUserInfo = usePermission('edit-other-user-info');
 
-	const changeAdminStatusAction = useChangeAdminStatusAction(userId, isAdmin, username, onChange);
+	const changeAdminStatusAction = useChangeAdminStatusAction(userId, isAdmin, onChange);
 	const changeUserStatusAction = useChangeUserStatusAction(userId, isActive, onChange);
 	const deleteUserAction = useDeleteUserAction(userId, onChange, onReload);
 	const resetTOTPAction = useResetTOTPAction(userId);
@@ -35,6 +35,7 @@ const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, o
 
 	const directMessageClick = useCallback(
 		() =>
+			username &&
 			directRoute.push({
 				rid: username,
 			}),
@@ -66,11 +67,11 @@ const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, o
 					action: editUserClick,
 				},
 			}),
-			makeAdmin: changeAdminStatusAction,
-			resetE2EKey: resetE2EKeyAction,
-			resetTOTP: resetTOTPAction,
-			delete: deleteUserAction,
-			changeActiveStatus: changeUserStatusAction,
+			...(changeAdminStatusAction && { makeAdmin: changeAdminStatusAction }),
+			...(resetE2EKeyAction && { resetE2EKey: resetE2EKeyAction }),
+			...(resetTOTPAction && { resetTOTP: resetTOTPAction }),
+			...(deleteUserAction && { delete: deleteUserAction }),
+			...(changeUserStatusAction && { changeActiveStatus: changeUserStatusAction }),
 		}),
 		[
 			t,
@@ -107,8 +108,9 @@ const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, o
 		);
 	}, [menuOptions]);
 
+	// TODO: sanitize Action type to avoid any
 	const actions = useMemo(() => {
-		const mapAction = ([key, { label, icon, action }]) => (
+		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
 			<UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
 		);
 		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
diff --git a/apps/meteor/client/views/admin/users/UserInfoActions.js b/apps/meteor/client/views/admin/users/UserInfoActions.js
deleted file mode 100644
index 6bc211e0cc0c..000000000000
--- a/apps/meteor/client/views/admin/users/UserInfoActions.js
+++ /dev/null
@@ -1,326 +0,0 @@
-import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
-import {
-	useSetModal,
-	useToastMessageDispatch,
-	useRoute,
-	useSetting,
-	usePermission,
-	useMethod,
-	useEndpoint,
-	useTranslation,
-} from '@rocket.chat/ui-contexts';
-import React, { useCallback, useMemo } from 'react';
-
-import ConfirmOwnerChangeWarningModal from '../../../components/ConfirmOwnerChangeWarningModal';
-import GenericModal from '../../../components/GenericModal';
-import { useActionSpread } from '../../hooks/useActionSpread';
-import UserInfo from '../../room/contextualBar/UserInfo';
-
-export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange, onReload }) => {
-	const t = useTranslation();
-	const setModal = useSetModal();
-
-	const directRoute = useRoute('direct');
-	const userRoute = useRoute('admin-users');
-	const dispatchToastMessage = useToastMessageDispatch();
-
-	const canDirectMessage = usePermission('create-d');
-	const canEditOtherUserInfo = usePermission('edit-other-user-info');
-	const canAssignAdminRole = usePermission('assign-admin-role');
-	const canResetE2EEKey = usePermission('edit-other-user-e2ee');
-	const canResetTOTP = usePermission('edit-other-user-totp');
-	const canEditOtherUserActiveStatus = usePermission('edit-other-user-active-status');
-	const canDeleteUser = usePermission('delete-user');
-
-	const enforcePassword = useSetting('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback');
-
-	const handleClose = useCallback(() => {
-		setModal();
-		onChange();
-	}, [setModal, onChange]);
-
-	const handleDeletedUser = () => {
-		setModal();
-		userRoute.push({});
-		onReload();
-	};
-
-	const confirmOwnerChanges =
-		(action, modalProps = {}) =>
-		async () => {
-			try {
-				return await action();
-			} catch (error) {
-				if (error.xhr?.responseJSON?.errorType === 'user-last-owner') {
-					const { shouldChangeOwner, shouldBeRemoved } = error.xhr.responseJSON.details;
-					setModal(
-						<ConfirmOwnerChangeWarningModal
-							shouldChangeOwner={shouldChangeOwner}
-							shouldBeRemoved={shouldBeRemoved}
-							{...modalProps}
-							onConfirm={async () => {
-								await action(true);
-								setModal();
-							}}
-							onCancel={() => {
-								setModal();
-								onChange();
-							}}
-						/>,
-					);
-					return;
-				}
-				dispatchToastMessage({ type: 'error', message: error });
-			}
-		};
-
-	const deleteUserQuery = useMemo(() => ({ userId: _id }), [_id]);
-	const deleteUserEndpoint = useEndpoint('POST', '/v1/users.delete');
-
-	const erasureType = useSetting('Message_ErasureType');
-
-	const deleteUser = confirmOwnerChanges(
-		async (confirm = false) => {
-			if (confirm) {
-				deleteUserQuery.confirmRelinquish = confirm;
-			}
-
-			const result = await deleteUserEndpoint(deleteUserQuery);
-			if (result.success) {
-				handleDeletedUser();
-				dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
-			} else {
-				setModal();
-			}
-		},
-		{
-			contentTitle: t(`Delete_User_Warning_${erasureType}`),
-			confirmLabel: t('Delete'),
-		},
-	);
-
-	const confirmDeleteUser = useCallback(() => {
-		setModal(
-			<GenericModal variant='danger' onConfirm={deleteUser} onCancel={() => setModal()} confirmText={t('Delete')}>
-				{t(`Delete_User_Warning_${erasureType}`)}
-			</GenericModal>,
-		);
-	}, [deleteUser, erasureType, setModal, t]);
-
-	const setAdminStatus = useMethod('setAdminStatus');
-	const changeAdminStatus = useCallback(async () => {
-		try {
-			await setAdminStatus(_id, !isAdmin);
-			const message = isAdmin ? 'User_is_no_longer_an_admin' : 'User_is_now_an_admin';
-			dispatchToastMessage({ type: 'success', message: t(message) });
-			onChange();
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	}, [_id, dispatchToastMessage, isAdmin, onChange, setAdminStatus, t]);
-
-	const resetE2EEKeyRequest = useEndpoint('POST', '/v1/users.resetE2EKey');
-	const resetTOTPRequest = useEndpoint('POST', '/v1/users.resetTOTP');
-	const resetE2EEKey = useCallback(async () => {
-		setModal();
-		const result = await resetE2EEKeyRequest({ userId: _id });
-
-		if (result) {
-			setModal(
-				<GenericModal variant='success' onClose={handleClose} onConfirm={handleClose}>
-					{t('Users_key_has_been_reset')}
-				</GenericModal>,
-			);
-		}
-	}, [resetE2EEKeyRequest, setModal, t, _id, handleClose]);
-
-	const resetTOTP = useCallback(async () => {
-		setModal();
-		const result = await resetTOTPRequest({ userId: _id });
-
-		if (result) {
-			setModal(
-				<GenericModal variant='success' onClose={handleClose} onConfirm={handleClose}>
-					{t('Users_TOTP_has_been_reset')}
-				</GenericModal>,
-			);
-		}
-	}, [resetTOTPRequest, setModal, t, _id, handleClose]);
-
-	const confirmResetE2EEKey = useCallback(() => {
-		setModal(
-			<GenericModal variant='danger' onConfirm={resetE2EEKey} onCancel={() => setModal()} confirmText={t('Reset')}>
-				{t('E2E_Reset_Other_Key_Warning')}
-			</GenericModal>,
-		);
-	}, [resetE2EEKey, t, setModal]);
-
-	const confirmResetTOTP = useCallback(() => {
-		setModal(
-			<GenericModal variant='danger' onConfirm={resetTOTP} onCancel={() => setModal()} confirmText={t('Reset')}>
-				{t('TOTP_Reset_Other_Key_Warning')}
-			</GenericModal>,
-		);
-	}, [resetTOTP, t, setModal]);
-
-	const activeStatusQuery = useMemo(
-		() => ({
-			userId: _id,
-			activeStatus: !isActive,
-		}),
-		[_id, isActive],
-	);
-	const changeActiveStatusMessage = isActive ? 'User_has_been_deactivated' : 'User_has_been_activated';
-	const changeActiveStatusRequest = useEndpoint('POST', '/v1/users.setActiveStatus');
-
-	const changeActiveStatus = confirmOwnerChanges(
-		async (confirm = false) => {
-			if (confirm) {
-				activeStatusQuery.confirmRelinquish = confirm;
-			}
-
-			try {
-				const result = await changeActiveStatusRequest(activeStatusQuery);
-				if (result.success) {
-					dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
-					onChange();
-				}
-			} catch (error) {
-				throw error;
-			}
-		},
-		{
-			confirmLabel: t('Yes_deactivate_it'),
-		},
-	);
-
-	const directMessageClick = useCallback(
-		() =>
-			directRoute.push({
-				rid: username,
-			}),
-		[directRoute, username],
-	);
-
-	const editUserClick = useCallback(
-		() =>
-			userRoute.push({
-				context: 'edit',
-				id: _id,
-			}),
-		[_id, userRoute],
-	);
-
-	const options = useMemo(
-		() => ({
-			...(canDirectMessage && {
-				directMessage: {
-					icon: 'balloon',
-					label: t('Direct_Message'),
-					action: directMessageClick,
-				},
-			}),
-			...(canEditOtherUserInfo && {
-				editUser: {
-					icon: 'edit',
-					label: t('Edit'),
-					action: editUserClick,
-				},
-			}),
-			...(canAssignAdminRole &&
-				username && {
-					makeAdmin: {
-						icon: 'key',
-						label: isAdmin ? t('Remove_Admin') : t('Make_Admin'),
-						action: changeAdminStatus,
-					},
-				}),
-			...(canResetE2EEKey &&
-				enforcePassword && {
-					resetE2EEKey: {
-						icon: 'key',
-						label: t('Reset_E2E_Key'),
-						action: confirmResetE2EEKey,
-					},
-				}),
-			...(canResetTOTP &&
-				enforcePassword && {
-					resetTOTP: {
-						icon: 'key',
-						label: t('Reset_TOTP'),
-						action: confirmResetTOTP,
-					},
-				}),
-			...(canDeleteUser && {
-				delete: {
-					icon: 'trash',
-					label: t('Delete'),
-					action: confirmDeleteUser,
-				},
-			}),
-			...(canEditOtherUserActiveStatus && {
-				changeActiveStatus: {
-					icon: 'user',
-					label: isActive ? t('Deactivate') : t('Activate'),
-					action: changeActiveStatus,
-				},
-			}),
-		}),
-		[
-			t,
-			canDirectMessage,
-			directMessageClick,
-			canEditOtherUserInfo,
-			editUserClick,
-			canAssignAdminRole,
-			isAdmin,
-			changeAdminStatus,
-			canDeleteUser,
-			confirmDeleteUser,
-			canEditOtherUserActiveStatus,
-			isActive,
-			changeActiveStatus,
-			enforcePassword,
-			canResetE2EEKey,
-			canResetTOTP,
-			confirmResetE2EEKey,
-			confirmResetTOTP,
-			username,
-		],
-	);
-
-	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(options);
-
-	const menu = useMemo(() => {
-		if (!menuOptions) {
-			return null;
-		}
-
-		return (
-			<Menu
-				mi='x4'
-				placement='bottom-start'
-				small={false}
-				secondary
-				maxHeight='initial'
-				flexShrink={0}
-				key='menu'
-				renderItem={({ label: { label, icon }, ...props }) => <Option label={label} title={label} icon={icon} {...props} />}
-				options={menuOptions}
-			/>
-		);
-	}, [menuOptions]);
-
-	const actions = useMemo(() => {
-		const mapAction = ([key, { label, icon, action }]) => (
-			<UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
-		);
-		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
-	}, [actionsDefinition, menu]);
-
-	return (
-		<ButtonGroup flexGrow={0} justifyContent='center' data-qa-id='UserInfoActions'>
-			{actions}
-		</ButtonGroup>
-	);
-};
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
index 6f3117c56d31..9918b1d4d0fc 100644
--- a/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
@@ -1,7 +1,10 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { useToastMessageDispatch, useMethod, useTranslation, usePermission } from '@rocket.chat/ui-contexts';
 import { useCallback } from 'react';
 
-export const useChangeAdminStatusAction = (_id, isAdmin, username, onChange) => {
+import { Action } from '../../../hooks/useActionSpread';
+
+export const useChangeAdminStatusAction = (userId: IUser['_id'], isAdmin: boolean, onChange: () => void): Action | undefined => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const setAdminStatus = useMethod('setAdminStatus');
@@ -9,16 +12,16 @@ export const useChangeAdminStatusAction = (_id, isAdmin, username, onChange) =>
 
 	const changeAdminStatus = useCallback(async () => {
 		try {
-			await setAdminStatus(_id, !isAdmin);
+			await setAdminStatus(userId, !isAdmin);
 			const message = isAdmin ? 'User_is_no_longer_an_admin' : 'User_is_now_an_admin';
 			dispatchToastMessage({ type: 'success', message: t(message) });
 			onChange();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
-	}, [_id, dispatchToastMessage, isAdmin, onChange, setAdminStatus, t]);
+	}, [userId, dispatchToastMessage, isAdmin, onChange, setAdminStatus, t]);
 
-	return canAssignAdminRole && username
+	return canAssignAdminRole
 		? {
 				icon: 'key',
 				label: isAdmin ? t('Remove_Admin') : t('Make_Admin'),
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
index 2ad6ca38960c..cb2ccb2a4ee9 100644
--- a/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
@@ -1,44 +1,49 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { useToastMessageDispatch, useTranslation, useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { confirmOwnerChanges } from '../lib/confirmOwnerChanges';
+import { Action } from '../../../hooks/useActionSpread';
+import { useConfirmOwnerChanges } from './useConfirmOwnerChanges';
 
-export const useChangeUserStatusAction = (_id, isActive, onChange) => {
+export const useChangeUserStatusAction = (userId: IUser['_id'], isActive: boolean, onChange: () => void): Action | undefined => {
 	const t = useTranslation();
+	const confirmOwnerChanges = useConfirmOwnerChanges();
 	const dispatchToastMessage = useToastMessageDispatch();
+	const changeActiveStatusRequest = useEndpoint('POST', '/v1/users.setActiveStatus');
 	const canEditOtherUserActiveStatus = usePermission('edit-other-user-active-status');
+	const changeActiveStatusMessage = isActive ? 'User_has_been_deactivated' : 'User_has_been_activated';
 
 	const activeStatusQuery = useMemo(
 		() => ({
-			userId: _id,
+			userId,
 			activeStatus: !isActive,
+			confirmRelinquish: false,
 		}),
-		[_id, isActive],
+		[userId, isActive],
 	);
-	const changeActiveStatusMessage = isActive ? 'User_has_been_deactivated' : 'User_has_been_activated';
-	const changeActiveStatusRequest = useEndpoint('POST', '/v1/users.setActiveStatus');
 
-	const changeActiveStatus = confirmOwnerChanges(
-		async (confirm = false) => {
-			if (confirm) {
-				activeStatusQuery.confirmRelinquish = confirm;
-			}
+	const changeActiveStatus = (): Promise<void> =>
+		confirmOwnerChanges(
+			async (confirm = false) => {
+				if (confirm) {
+					activeStatusQuery.confirmRelinquish = confirm;
+				}
 
-			try {
-				const result = await changeActiveStatusRequest(activeStatusQuery);
-				if (result.success) {
-					dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
-					onChange();
+				try {
+					const result = await changeActiveStatusRequest(activeStatusQuery);
+					if (result) {
+						dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
+						onChange();
+					}
+				} catch (error) {
+					throw error;
 				}
-			} catch (error) {
-				throw error;
-			}
-		},
-		{
-			confirmLabel: t('Yes_deactivate_it'),
-		},
-		onChange,
-	);
+			},
+			{
+				confirmText: t('Yes_deactivate_it'),
+			},
+			onChange,
+		);
 
 	return canEditOtherUserActiveStatus
 		? {
diff --git a/apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx b/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
similarity index 64%
rename from apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx
rename to apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
index caeecc201d1c..15090c5bbd8e 100644
--- a/apps/meteor/client/views/admin/users/lib/confirmOwnerChanges.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
@@ -1,14 +1,17 @@
 import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
-import ConfirmOwnerChangeWarningModal from '../../../../components/ConfirmOwnerChangeWarningModal';
+import ConfirmOwnerChangeWarningModal from '../../../../components/ConfirmOwnerChangeModal';
 
-export const confirmOwnerChanges =
-	(action, modalProps = {}, onChange) =>
-	async (): Promise<void> => {
-		const setModal = useSetModal();
-		const dispatchToastMessage = useToastMessageDispatch();
+export const useConfirmOwnerChanges = (): ((
+	action: (confirm?: boolean) => void,
+	modalProps: Pick<ComponentProps<typeof ConfirmOwnerChangeWarningModal>, 'contentTitle' | 'confirmText'>,
+	onChange: () => void,
+) => Promise<void>) => {
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
 
+	return async (action, modalProps, onChange): Promise<void> => {
 		try {
 			return await action();
 		} catch (error) {
@@ -38,3 +41,4 @@ export const confirmOwnerChanges =
 			dispatchToastMessage({ type: 'error', message: error });
 		}
 	};
+};
diff --git a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
index b31cf468618e..fafd67a9f607 100644
--- a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
@@ -1,3 +1,4 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import {
 	useSetModal,
@@ -7,20 +8,23 @@ import {
 	usePermission,
 	useEndpoint,
 	useTranslation,
+	TranslationKey,
 } from '@rocket.chat/ui-contexts';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 
 import GenericModal from '../../../../components/GenericModal';
-import { confirmOwnerChanges } from '../lib/confirmOwnerChanges';
+import { Action } from '../../../hooks/useActionSpread';
+import { useConfirmOwnerChanges } from './useConfirmOwnerChanges';
 
-export const useDeleteUserAction = (_id, onChange, onReload) => {
+export const useDeleteUserAction = (userId: IUser['_id'], onChange: () => void, onReload: () => void): Action | undefined => {
 	const t = useTranslation();
 	const setModal = useSetModal();
-	const handleCloseModal = useMutableCallback((): void => setModal());
 	const userRoute = useRoute('admin-users');
 	const canDeleteUser = usePermission('delete-user');
-
+	const erasureType = useSetting('Message_ErasureType');
+	const confirmOwnerChanges = useConfirmOwnerChanges();
 	const dispatchToastMessage = useToastMessageDispatch();
+	const handleCloseModal = useMutableCallback((): void => setModal());
 
 	const handleDeletedUser = (): void => {
 		handleCloseModal();
@@ -28,39 +32,38 @@ export const useDeleteUserAction = (_id, onChange, onReload) => {
 		onReload();
 	};
 
-	const deleteUserQuery = useMemo(() => ({ userId: _id }), [_id]);
+	const deleteUserQuery = useMemo(() => ({ userId, confirmRelinquish: false }), [userId]);
 	const deleteUserEndpoint = useEndpoint('POST', '/v1/users.delete');
 
-	const erasureType = useSetting('Message_ErasureType');
-
-	const deleteUser = confirmOwnerChanges(
-		async (confirm = false) => {
-			if (confirm) {
-				deleteUserQuery.confirmRelinquish = confirm;
-			}
+	const deleteUser = (): Promise<void> =>
+		confirmOwnerChanges(
+			async (confirm = false) => {
+				if (confirm) {
+					deleteUserQuery.confirmRelinquish = confirm;
+				}
 
-			const result = await deleteUserEndpoint(deleteUserQuery);
-			if (result.success) {
-				handleDeletedUser();
-				dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
-			} else {
-				handleCloseModal();
-			}
-		},
-		{
-			contentTitle: t(`Delete_User_Warning_${erasureType}`),
-			confirmLabel: t('Delete'),
-		},
-		onChange,
-	);
+				const result = await deleteUserEndpoint(deleteUserQuery);
+				if (result.success) {
+					handleDeletedUser();
+					dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
+				} else {
+					handleCloseModal();
+				}
+			},
+			{
+				contentTitle: t(`Delete_User_Warning_${erasureType}` as TranslationKey),
+				confirmText: t('Delete'),
+			},
+			onChange,
+		);
 
-	const confirmDeleteUser = useCallback(() => {
+	const confirmDeleteUser = useMutableCallback(() => {
 		setModal(
 			<GenericModal variant='danger' onConfirm={deleteUser} onCancel={handleCloseModal} confirmText={t('Delete')}>
-				{t(`Delete_User_Warning_${erasureType}`)}
+				{t(`Delete_User_Warning_${erasureType}` as TranslationKey)}
 			</GenericModal>,
 		);
-	}, [deleteUser, erasureType, handleCloseModal, setModal, t]);
+	});
 
 	return canDeleteUser
 		? {
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
index 5846abfee63c..af8a433fdf48 100644
--- a/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
@@ -1,10 +1,12 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback } from 'react';
 
 import GenericModal from '../../../../components/GenericModal';
+import { Action } from '../../../hooks/useActionSpread';
 
-export const useResetE2EKeyAction = (_id) => {
+export const useResetE2EKeyAction = (userId: IUser['_id']): Action | undefined => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 	const handleCloseModal = useMutableCallback(() => setModal());
@@ -14,7 +16,7 @@ export const useResetE2EKeyAction = (_id) => {
 
 	const resetE2EEKey = useCallback(async () => {
 		handleCloseModal();
-		const result = await resetE2EEKeyRequest({ userId: _id });
+		const result = await resetE2EEKeyRequest({ userId });
 
 		if (result) {
 			setModal(
@@ -23,7 +25,7 @@ export const useResetE2EKeyAction = (_id) => {
 				</GenericModal>,
 			);
 		}
-	}, [resetE2EEKeyRequest, setModal, t, _id, handleCloseModal]);
+	}, [resetE2EEKeyRequest, setModal, t, userId, handleCloseModal]);
 
 	const confirmResetE2EEKey = useCallback(() => {
 		setModal(
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
index 5167cf755081..cad8d836086f 100644
--- a/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
@@ -1,10 +1,12 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback } from 'react';
 
 import GenericModal from '../../../../components/GenericModal';
+import { Action } from '../../../hooks/useActionSpread';
 
-export const useResetTOTPAction = (_id) => {
+export const useResetTOTPAction = (userId: IUser['_id']): Action | undefined => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 	const handleCloseModal = useMutableCallback(() => setModal());
@@ -14,7 +16,7 @@ export const useResetTOTPAction = (_id) => {
 
 	const resetTOTP = useCallback(async () => {
 		setModal();
-		const result = await resetTOTPRequest({ userId: _id });
+		const result = await resetTOTPRequest({ userId });
 
 		if (result) {
 			setModal(
@@ -23,7 +25,7 @@ export const useResetTOTPAction = (_id) => {
 				</GenericModal>,
 			);
 		}
-	}, [resetTOTPRequest, setModal, t, _id, handleCloseModal]);
+	}, [resetTOTPRequest, setModal, t, userId, handleCloseModal]);
 
 	const confirmResetTOTP = useCallback(() => {
 		setModal(
diff --git a/apps/meteor/client/views/hooks/useActionSpread.ts b/apps/meteor/client/views/hooks/useActionSpread.ts
index b1c2fddc9e9b..e742aefda53b 100644
--- a/apps/meteor/client/views/hooks/useActionSpread.ts
+++ b/apps/meteor/client/views/hooks/useActionSpread.ts
@@ -20,7 +20,9 @@ const mapOptions = ([key, { action, label, icon }]: [string, Action]): [string,
 ];
 
 export const useActionSpread = (
-	actions: Action[],
+	actions: {
+		[key: string]: Action;
+	},
 	size = 2,
 ): { actions: [string, Action][]; menu: { [id: string]: MenuOption } | undefined } =>
 	useMemo(() => {
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index e9dcb3d75368..439f5ca15a4a 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -14,7 +14,7 @@ type UserInfoActionsProps = {
 
 const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => {
 	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(
-		useUserInfoActions({ ...user._id, ...user.username }, rid, backToList),
+		useUserInfoActions({ _id: user._id, username: user.username }, rid, backToList),
 	);
 
 	const menu = useMemo(() => {
@@ -28,6 +28,7 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 				mi='x4'
 				secondary
 				small={false}
+				maxHeight='initial'
 				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
 				flexShrink={0}
 				options={menuOptions}
@@ -36,8 +37,9 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 		);
 	}, [menuOptions]);
 
+	// TODO: sanitize Action type to avoid any
 	const actions = useMemo(() => {
-		const mapAction = ([key, { label, icon, action }]) => (
+		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
 			<UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
 		);
 
diff --git a/packages/rest-typings/src/v1/users.ts b/packages/rest-typings/src/v1/users.ts
index 3a49e8c38ceb..4dbef20b3399 100644
--- a/packages/rest-typings/src/v1/users.ts
+++ b/packages/rest-typings/src/v1/users.ts
@@ -300,6 +300,12 @@ export type UsersEndpoints = {
 			message: string;
 		};
 	};
+
+	'/v1/users.delete': {
+		POST: (params: { userId: IUser['_id']; confirmRelinquish?: boolean }) => {
+			success: boolean;
+		};
+	};
 };
 
 export * from './users/UserCreateParamsPOST';

From 338dc0d9b680270838b95e198f74d99720fc6e42 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 21 Jul 2022 19:32:02 -0300
Subject: [PATCH 3/9] fix: UserInfo

---
 .../client/components/InfoPanel/Title.tsx     |  2 +-
 .../components/UserInfo/UserInfo.stories.tsx  |  6 +-
 .../client/components/UserInfo/UserInfo.tsx   | 62 +++++++++-------
 .../admin/users/AdminUserInfoWithData.tsx     | 39 ++++++----
 .../client/views/admin/users/UsersPage.tsx    | 10 ++-
 .../admin/users/UsersTable/UsersTable.tsx     |  1 +
 .../views/omnichannel/agents/AgentEdit.tsx    |  8 +-
 .../views/omnichannel/agents/AgentInfo.tsx    |  8 +-
 .../RoomMembers/List/RoomMembersWithData.js   |  2 +-
 ...erInfoWithData.js => UserInfoWithData.tsx} | 74 +++++++++++++------
 .../DeviceManagementInfo.tsx                  |  2 +-
 packages/core-typings/src/IUser.ts            |  1 +
 12 files changed, 131 insertions(+), 84 deletions(-)
 rename apps/meteor/client/views/room/contextualBar/UserInfo/{UserInfoWithData.js => UserInfoWithData.tsx} (54%)

diff --git a/apps/meteor/client/components/InfoPanel/Title.tsx b/apps/meteor/client/components/InfoPanel/Title.tsx
index dcfdfa0da1c1..7820c9b4bb82 100644
--- a/apps/meteor/client/components/InfoPanel/Title.tsx
+++ b/apps/meteor/client/components/InfoPanel/Title.tsx
@@ -8,7 +8,7 @@ type TitleProps = {
 
 const Title: FC<TitleProps> = ({ title, icon }) => (
 	<Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
-		{typeof icon === 'string' ? icon && <Icon name={icon} size='x22' /> : icon}
+		{typeof icon === 'string' ? <Icon name={icon} size='x22' /> : icon}
 		<Box mis='x8' flexGrow={1} withTruncatedText>
 			{title}
 		</Box>
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
index 7c5f0173a1a1..afdf28c1299f 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
@@ -21,10 +21,9 @@ export const Default = Template.bind({});
 Default.args = {
 	name: 'Guilherme Gazzo',
 	username: 'guilherme.gazzo',
-	customStatus: '🛴 currently working on User Card',
+	statusText: '🛴 currently working on User Card',
 	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	localTime: 'Local Time: 7:44 AM',
 	utcOffset: -3,
 	email: 'rocketchat@rocket.chat',
 	status: <Status.Offline />,
@@ -34,10 +33,9 @@ export const WithNickname = Template.bind({});
 WithNickname.args = {
 	name: 'Guilherme Gazzo',
 	username: 'guilherme.gazzo',
-	customStatus: '🛴 currently working on User Card',
+	statusText: '🛴 currently working on User Card',
 	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
 	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	localTime: 'Local Time: 7:44 AM',
 	utcOffset: -3,
 	email: 'rocketchat@rocket.chat',
 	status: <Status.Offline />,
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index daefdcd7fbd0..9c5ce5028802 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -1,11 +1,11 @@
-import { IUser } from '@rocket.chat/core-typings';
+import { IUser, Serialized } from '@rocket.chat/core-typings';
 import { Box, Margins, Tag } from '@rocket.chat/fuselage';
 import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo, ReactElement } from 'react';
+import React, { memo, ReactElement, ReactNode } from 'react';
 
 import { useTimeAgo } from '../../hooks/useTimeAgo';
 import { useUserCustomFields } from '../../hooks/useUserCustomFields';
-import { getUserDisplayName } from '../../lib/getUserDisplayName';
+import { useUserDisplayName } from '../../hooks/useUserDisplayName';
 import InfoPanel from '../InfoPanel';
 import MarkdownText from '../MarkdownText';
 import UTCClock from '../UTCClock';
@@ -13,25 +13,30 @@ import UserCard from '../UserCard';
 import VerticalBar from '../VerticalBar';
 import UserInfoAvatar from './UserInfoAvatar';
 
-type UserInfoProps = {
-	username: IUser['username'];
-	name: IUser['name'];
-	lastLogin: IUser['lastLogin'];
-	nickname: IUser['nickname'];
-	bio: IUser['bio'];
-	avatarETag: IUser['avatarETag'];
-	roles: IUser['roles'];
-	utcOffset: IUser['utcOffset'];
-	phone: IUser['phone'];
-	createdAt: IUser['createdAt'];
-	status: ReactElement;
-	statusText: IUser['statusText'];
-	canViewAllInfo: IUser['canViewAllInfo'];
-	email: string;
-	verified: boolean;
+type UserInfoDataProps = Serialized<
+	Pick<
+		IUser,
+		| 'name'
+		| 'username'
+		| 'nickname'
+		| 'bio'
+		| 'lastLogin'
+		| 'avatarETag'
+		| 'utcOffset'
+		| 'phone'
+		| 'createdAt'
+		| 'statusText'
+		| 'canViewAllInfo'
+		| 'customFields'
+	>
+>;
+
+type UserInfoProps = UserInfoDataProps & {
+	status: ReactNode;
+	email?: string;
+	verified?: boolean;
 	actions: ReactElement;
-	showRealNames: unknown;
-	customFields: IUser['customFields'];
+	roles: ReactElement[];
 };
 
 const UserInfo = ({
@@ -52,11 +57,11 @@ const UserInfo = ({
 	customFields,
 	canViewAllInfo,
 	actions,
-	showRealNames,
 	...props
 }: UserInfoProps): ReactElement => {
 	const t = useTranslation();
 	const timeAgo = useTimeAgo();
+	const userDisplayName = useUserDisplayName({ name, username });
 	const userCustomFields = useUserCustomFields(customFields);
 
 	return (
@@ -71,10 +76,12 @@ const UserInfo = ({
 				{actions && <InfoPanel.Section>{actions}</InfoPanel.Section>}
 
 				<InfoPanel.Section>
-					<InfoPanel.Title icon={status} title={getUserDisplayName(name, username, !!showRealNames)} />
-					<InfoPanel.Text>
-						<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
-					</InfoPanel.Text>
+					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
+					{statusText && (
+						<InfoPanel.Text>
+							<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
+						</InfoPanel.Text>
+					)}
 				</InfoPanel.Section>
 
 				<InfoPanel.Section>
@@ -150,8 +157,7 @@ const UserInfo = ({
 									{email}
 								</Box>
 								<Margins inline='x4'>
-									{verified && <Tag variant='secondary'>{t('Verified')}</Tag>}
-									{verified || <Tag disabled>{t('Not_verified')}</Tag>}
+									<Tag>{verified ? t('Verified') : t('Not_verified')}</Tag>
 								</Margins>
 							</InfoPanel.Text>
 						</InfoPanel.Field>
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index a301cf67cf6f..590f3b544021 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -1,7 +1,7 @@
 import { IUser } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
+import { Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetting, useRolesDescription, useRole, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, ReactElement } from 'react';
 
 import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
@@ -9,6 +9,7 @@ import { FormSkeleton } from '../../../components/Skeleton';
 import UserCard from '../../../components/UserCard';
 import UserInfo from '../../../components/UserInfo';
 import { UserStatus } from '../../../components/UserStatus';
+import VerticalBar from '../../../components/VerticalBar';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import { getUserEmailVerified } from '../../../lib/utils/getUserEmailVerified';
@@ -21,9 +22,7 @@ type AdminUserInfoWithDataProps = {
 
 const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): ReactElement => {
 	const t = useTranslation();
-	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
-	const isAdmin = useRole('admin');
 	const approveManuallyUsers = useSetting('Accounts_ManuallyApproveNewUsers');
 
 	const {
@@ -47,8 +46,10 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 		}
 
 		const {
+			_id,
 			avatarETag,
 			name,
+			active,
 			username,
 			phone,
 			createdAt,
@@ -63,20 +64,23 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 		} = data.user;
 
 		return {
+			_id,
 			avatarETag,
 			name,
+			active,
+			isAdmin: roles.includes('admin'),
 			username,
 			lastLogin,
-			roles: roles && getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
+			roles: getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
 			bio,
 			canViewAllInfo,
 			phone,
 			utcOffset,
 			customFields: {
 				...data.user.customFields,
-				...(approveManuallyUsers && data.user.active === false && data.user.reason && { Reason: data.user.reason }),
+				...(approveManuallyUsers && !data.user.active && data.user.reason ? { Reason: data.user.reason } : undefined),
 			},
-			verified: data.user && getUserEmailVerified(data.user),
+			verified: getUserEmailVerified(data.user),
 			email: getUserEmailAddress(data.user),
 			createdAt,
 			status: <UserStatus status={status} />,
@@ -87,26 +91,29 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 
 	if (state === AsyncStatePhase.LOADING) {
 		return (
-			<Box p='x24'>
+			<VerticalBar.Content>
 				<FormSkeleton />
-			</Box>
+			</VerticalBar.Content>
 		);
 	}
 
-	if (error || !data?.user) {
-		return <Box mbs='x16'>{t('User_not_found')}</Box>;
+	if (error || !user) {
+		return (
+			<VerticalBar.Content pb='x16'>
+				<Callout type='danger'>{t('User_not_found')}</Callout>
+			</VerticalBar.Content>
+		);
 	}
 
 	return (
 		<UserInfo
 			{...user}
-			showRealNames={showRealNames}
 			actions={
 				<AdminUserInfoActions
-					isActive={data.user.active}
-					isAdmin={isAdmin}
-					userId={data.user._id}
-					username={data.user.username}
+					isActive={user.active}
+					isAdmin={user.isAdmin}
+					userId={user._id}
+					username={user.username}
 					onChange={onChange}
 					onReload={onReload}
 				/>
diff --git a/apps/meteor/client/views/admin/users/UsersPage.tsx b/apps/meteor/client/views/admin/users/UsersPage.tsx
index d71b9849dc68..b0fd3de30d79 100644
--- a/apps/meteor/client/views/admin/users/UsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/UsersPage.tsx
@@ -71,10 +71,12 @@ const UsersPage = (): ReactElement => {
 			{context && (
 				<VerticalBar>
 					<VerticalBar.Header>
-						{context === 'info' && t('User_Info')}
-						{context === 'edit' && t('Edit_User')}
-						{context === 'new' && t('Add_User')}
-						{context === 'invite' && t('Invite_Users')}
+						<VerticalBar.Text>
+							{context === 'info' && t('User_Info')}
+							{context === 'edit' && t('Edit_User')}
+							{context === 'new' && t('Add_User')}
+							{context === 'invite' && t('Invite_Users')}
+						</VerticalBar.Text>
 						<VerticalBar.Close onClick={handleCloseVerticalBar} />
 					</VerticalBar.Header>
 					{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index da2794fb9e80..ff524579f3a6 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -133,6 +133,7 @@ const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
 						</GenericTableBody>
 					</GenericTable>
 					<Pagination
+						divider
 						current={current}
 						itemsPerPage={itemsPerPage}
 						count={value?.total || 0}
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
index 92a344ccb568..2ee9d1b874ea 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
@@ -108,9 +108,11 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 
 	return (
 		<VerticalBar.ScrollableContent is='form' {...props}>
-			<Box alignSelf='center'>
-				<UserInfo.Avatar data-qa='AgentEdit-Avatar' margin='auto' size={'x332'} title={username} username={username} />
-			</Box>
+			{username && (
+				<Box alignSelf='center'>
+					<UserInfo.Avatar data-qa='AgentEdit-Avatar' username={username} />
+				</Box>
+			)}
 			<Field>
 				<Field.Label>{t('Name')}</Field.Label>
 				<Field.Row>
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
index 78c37075d5da..85bee095b6a1 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
@@ -36,9 +36,11 @@ export const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children
 
 	return (
 		<VerticalBar.ScrollableContent p='x24' {...props}>
-			<Box alignSelf='center'>
-				<UserInfo.Avatar data-qa='AgentUserInfoAvatar' size={'x332'} username={username} />
-			</Box>
+			{username && (
+				<Box alignSelf='center'>
+					<UserInfo.Avatar data-qa='AgentUserInfoAvatar' username={username} />
+				</Box>
+			)}
 
 			<ButtonGroup mi='neg-x4' flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center'>
 				{children}
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/List/RoomMembersWithData.js b/apps/meteor/client/views/room/contextualBar/RoomMembers/List/RoomMembersWithData.js
index 572482ce584a..a8a9106de235 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/List/RoomMembersWithData.js
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/List/RoomMembersWithData.js
@@ -63,7 +63,7 @@ const RoomMembersWithData = ({ rid }) => {
 	}, [setState, reload]);
 
 	if (state.tab === 'UserInfo') {
-		return <UserInfoWithData rid={rid} onClickClose={onClickClose} onClickBack={handleBack} username={state.username} />;
+		return <UserInfoWithData rid={rid} onClose={onClickClose} onClickBack={handleBack} username={state.username} />;
 	}
 
 	if (state.tab === 'InviteUsers') {
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
similarity index 54%
rename from apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js
rename to apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
index 3c70860e4abf..b0376585a699 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.js
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
@@ -1,6 +1,7 @@
-import { Box } from '@rocket.chat/fuselage';
-import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import { IUser, IRoom } from '@rocket.chat/core-typings';
+import { Callout } from '@rocket.chat/fuselage';
+import { useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useMemo, ReactElement } from 'react';
 
 import { getUserEmailAddress } from '../../../../../lib/getUserEmailAddress';
 import { FormSkeleton } from '../../../../components/Skeleton';
@@ -11,49 +12,71 @@ import VerticalBar from '../../../../components/VerticalBar';
 import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../../hooks/useEndpointData';
 import { getUserEmailVerified } from '../../../../lib/utils/getUserEmailVerified';
-import UserActions from './UserInfoActions';
+import UserInfoActions from './UserInfoActions';
 
-function UserInfoWithData({ uid, username, rid, onClickClose, onClose = onClickClose, onClickBack }) {
+type UserInfoWithDataProps = {
+	uid: IUser['_id'];
+	username: IUser['username'];
+	rid: IRoom['_id'];
+	onClose: () => void;
+	onClickBack: () => void;
+};
+
+const UserInfoWithData = ({ uid, username, rid, onClose, onClickBack }: UserInfoWithDataProps): ReactElement => {
 	const t = useTranslation();
-	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
 
 	const {
-		value,
+		value: data,
 		phase: state,
 		error,
 	} = useEndpointData(
 		'/v1/users.info',
-		useMemo(() => ({ ...(uid && { userId: uid }), ...(username && { username }) }), [uid, username]),
+		useMemo(() => ({ userId: uid, username }), [uid, username]),
 	);
 
 	const isLoading = state === AsyncStatePhase.LOADING;
 
 	const user = useMemo(() => {
-		const { user } = value || { user: {} };
+		if (!data?.user) {
+			return;
+		}
 
-		const { _id, name, username, roles = [], statusText, bio, utcOffset, lastLogin, nickname, canViewAllInfo } = user;
+		const {
+			_id,
+			name,
+			username,
+			roles = [],
+			statusText,
+			bio,
+			utcOffset,
+			lastLogin,
+			customFields,
+			phone,
+			nickname,
+			createdAt,
+			canViewAllInfo,
+		} = data.user;
 
 		return {
 			_id,
 			name,
 			username,
 			lastLogin,
-			showRealNames,
 			roles: roles && getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
 			bio,
 			canViewAllInfo,
-			phone: user.phone,
-			customFields: user.customFields,
-			verified: getUserEmailVerified(user),
-			email: getUserEmailAddress(user),
+			phone,
+			customFields,
+			verified: getUserEmailVerified(data.user),
+			email: getUserEmailAddress(data.user),
 			utcOffset,
-			createdAt: user.createdAt,
+			createdAt,
 			status: <ReactiveUserStatus uid={_id} />,
-			customStatus: statusText,
+			statusText,
 			nickname,
 		};
-	}, [value, showRealNames, getRoles]);
+	}, [data, getRoles]);
 
 	return (
 		<>
@@ -70,15 +93,20 @@ function UserInfoWithData({ uid, username, rid, onClickClose, onClose = onClickC
 				</VerticalBar.Content>
 			)}
 
-			{error && (
-				<VerticalBar.Content>
-					<Box mbs='x16'>{t('User_not_found')}</Box>
+			{error && !user && (
+				<VerticalBar.Content pb='x16'>
+					<Callout type='danger'>{t('User_not_found')}</Callout>
 				</VerticalBar.Content>
 			)}
 
-			{!isLoading && !error && <UserInfo {...user} actions={<UserActions user={user} rid={rid} backToList={onClickBack} />} p='x24' />}
+			{!isLoading && user && (
+				<UserInfo
+					{...user}
+					actions={<UserInfoActions user={{ _id: user?._id, username: user?.username }} rid={rid} backToList={onClickBack} />}
+				/>
+			)}
 		</>
 	);
-}
+};
 
 export default UserInfoWithData;
diff --git a/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx b/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
index 35e6a7a6c387..6245308bcb04 100644
--- a/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
+++ b/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
@@ -3,11 +3,11 @@ import { Box, Button, ButtonGroup, StatusBullet } from '@rocket.chat/fuselage';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useCallback } from 'react';
 
+import InfoPanel from '../../../../../../client/components/InfoPanel';
 import VerticalBar from '../../../../../../client/components/VerticalBar';
 import UserAvatar from '../../../../../../client/components/avatar/UserAvatar';
 import { useFormatDateAndTime } from '../../../../../../client/hooks/useFormatDateAndTime';
 import { usePresence } from '../../../../../../client/hooks/usePresence';
-import InfoPanel from '../../../../../../client/views/InfoPanel';
 import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
 
 type DeviceManagementInfoProps = DeviceManagementPopulatedSession & {
diff --git a/packages/core-typings/src/IUser.ts b/packages/core-typings/src/IUser.ts
index 7591a5087e13..b4a5c5e7ed2f 100644
--- a/packages/core-typings/src/IUser.ts
+++ b/packages/core-typings/src/IUser.ts
@@ -146,6 +146,7 @@ export interface IUser extends IRocketChatRecord {
 	federated?: boolean;
 	canViewAllInfo?: boolean;
 	phone?: string;
+	reason?: string;
 }
 
 export interface IRegisterUser extends IUser {

From 301cfa5bf17d5f19dfaddc895406377eb350c8fe Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 22 Jul 2022 14:10:06 -0300
Subject: [PATCH 4/9] fix: InfoPanel component naming

---
 .../client/components/InfoPanel/Avatar.tsx    | 11 -------
 .../client/components/InfoPanel/Field.tsx     |  6 ----
 .../{Action.tsx => InfoPanelAction.tsx}       |  4 +--
 ...tionGroup.tsx => InfoPanelActionGroup.tsx} |  6 ++--
 .../components/InfoPanel/InfoPanelAvatar.tsx  | 11 +++++++
 .../components/InfoPanel/InfoPanelField.tsx   |  6 ++++
 .../components/InfoPanel/InfoPanelLabel.tsx   |  6 ++++
 .../components/InfoPanel/InfoPanelSection.tsx |  6 ++++
 .../InfoPanel/{Text.tsx => InfoPanelText.tsx} |  4 +--
 .../{Title.tsx => InfoPanelTitle.tsx}         | 12 ++++---
 .../client/components/InfoPanel/Label.tsx     |  6 ----
 .../InfoPanel/RetentionPolicyCallout.tsx      |  1 -
 .../client/components/InfoPanel/Section.tsx   |  6 ----
 .../client/components/InfoPanel/index.ts      | 32 +++++++++----------
 14 files changed, 59 insertions(+), 58 deletions(-)
 delete mode 100644 apps/meteor/client/components/InfoPanel/Avatar.tsx
 delete mode 100644 apps/meteor/client/components/InfoPanel/Field.tsx
 rename apps/meteor/client/components/InfoPanel/{Action.tsx => InfoPanelAction.tsx} (63%)
 rename apps/meteor/client/components/InfoPanel/{ActionGroup.tsx => InfoPanelActionGroup.tsx} (59%)
 create mode 100644 apps/meteor/client/components/InfoPanel/InfoPanelAvatar.tsx
 create mode 100644 apps/meteor/client/components/InfoPanel/InfoPanelField.tsx
 create mode 100644 apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx
 create mode 100644 apps/meteor/client/components/InfoPanel/InfoPanelSection.tsx
 rename apps/meteor/client/components/InfoPanel/{Text.tsx => InfoPanelText.tsx} (75%)
 rename apps/meteor/client/components/InfoPanel/{Title.tsx => InfoPanelTitle.tsx} (50%)
 delete mode 100644 apps/meteor/client/components/InfoPanel/Label.tsx
 delete mode 100644 apps/meteor/client/components/InfoPanel/Section.tsx

diff --git a/apps/meteor/client/components/InfoPanel/Avatar.tsx b/apps/meteor/client/components/InfoPanel/Avatar.tsx
deleted file mode 100644
index 9211f1453c06..000000000000
--- a/apps/meteor/client/components/InfoPanel/Avatar.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { FC } from 'react';
-
-import Section from './Section';
-
-const Avatar: FC = ({ children }) => (
-	<Section display='flex' justifyContent='center'>
-		{children}
-	</Section>
-);
-
-export default Avatar;
diff --git a/apps/meteor/client/components/InfoPanel/Field.tsx b/apps/meteor/client/components/InfoPanel/Field.tsx
deleted file mode 100644
index 64651ba24054..000000000000
--- a/apps/meteor/client/components/InfoPanel/Field.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { FC } from 'react';
-
-const Field: FC = ({ children }) => <Box mb='x16'>{children}</Box>;
-
-export default Field;
diff --git a/apps/meteor/client/components/InfoPanel/Action.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx
similarity index 63%
rename from apps/meteor/client/components/InfoPanel/Action.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx
index f41839b22ca5..d941fa3a9786 100644
--- a/apps/meteor/client/components/InfoPanel/Action.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx
@@ -1,7 +1,7 @@
 import { Icon, Button } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Action: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof Icon>['name']; label: string }> = ({
+const InfoPanelAction: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof Icon>['name']; label: string }> = ({
 	label,
 	icon,
 	...props
@@ -12,4 +12,4 @@ const Action: FC<ComponentProps<typeof Button> & { icon: ComponentProps<typeof I
 	</Button>
 );
 
-export default Action;
+export default InfoPanelAction;
diff --git a/apps/meteor/client/components/InfoPanel/ActionGroup.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelActionGroup.tsx
similarity index 59%
rename from apps/meteor/client/components/InfoPanel/ActionGroup.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanelActionGroup.tsx
index b37232f820e6..4a08d90623b3 100644
--- a/apps/meteor/client/components/InfoPanel/ActionGroup.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelActionGroup.tsx
@@ -1,12 +1,12 @@
 import { ButtonGroup } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-import Section from './Section';
+import Section from './InfoPanelSection';
 
-const ActionGroup: FC<ComponentProps<typeof ButtonGroup>> = (props) => (
+const InfoPanelActionGroup: FC<ComponentProps<typeof ButtonGroup>> = (props) => (
 	<Section>
 		<ButtonGroup flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center' {...props} />
 	</Section>
 );
 
-export default ActionGroup;
+export default InfoPanelActionGroup;
diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelAvatar.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelAvatar.tsx
new file mode 100644
index 000000000000..bd5b547b3ee3
--- /dev/null
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelAvatar.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+import Section from './InfoPanelSection';
+
+const InfoPanelAvatar: FC = ({ children }) => (
+	<Section display='flex' justifyContent='center'>
+		{children}
+	</Section>
+);
+
+export default InfoPanelAvatar;
diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelField.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelField.tsx
new file mode 100644
index 000000000000..4eaa93b7e327
--- /dev/null
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelField.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const InfoPanelField: FC = ({ children }) => <Box mb='x16'>{children}</Box>;
+
+export default InfoPanelField;
diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx
new file mode 100644
index 000000000000..e3907262bcb5
--- /dev/null
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const InfoPanelLabel: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x8' fontScale='p2m' color='default' {...props} />;
+
+export default InfoPanelLabel;
diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelSection.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelSection.tsx
new file mode 100644
index 000000000000..53af78478943
--- /dev/null
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelSection.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const InfoPanelSection: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x24' {...props} />;
+
+export default InfoPanelSection;
diff --git a/apps/meteor/client/components/InfoPanel/Text.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
similarity index 75%
rename from apps/meteor/client/components/InfoPanel/Text.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
index 702ed39a6c26..bc2486fd90f0 100644
--- a/apps/meteor/client/components/InfoPanel/Text.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
@@ -6,8 +6,8 @@ const wordBreak = css`
 	word-break: break-word;
 `;
 
-const Text: FC<ComponentProps<typeof Box>> = (props) => (
+const InfoPanelText: FC<ComponentProps<typeof Box>> = (props) => (
 	<Box mb='x8' fontScale='p2' color='hint' withTruncatedText className={wordBreak} {...props} />
 );
 
-export default Text;
+export default InfoPanelText;
diff --git a/apps/meteor/client/components/InfoPanel/Title.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
similarity index 50%
rename from apps/meteor/client/components/InfoPanel/Title.tsx
rename to apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
index 7820c9b4bb82..c5fb7bcb727f 100644
--- a/apps/meteor/client/components/InfoPanel/Title.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx
@@ -1,18 +1,20 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC, ReactNode } from 'react';
 
-type TitleProps = {
+type InfoPanelTitleProps = {
 	title: string;
-	icon: ComponentProps<typeof Icon>['name'] | Exclude<ReactNode, string | {}>;
+	icon: ReactNode;
 };
 
-const Title: FC<TitleProps> = ({ title, icon }) => (
+const isValidIcon = (icon: ReactNode): icon is ComponentProps<typeof Icon>['name'] => typeof icon === 'string';
+
+const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
 	<Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
-		{typeof icon === 'string' ? <Icon name={icon} size='x22' /> : icon}
+		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
 		<Box mis='x8' flexGrow={1} withTruncatedText>
 			{title}
 		</Box>
 	</Box>
 );
 
-export default Title;
+export default InfoPanelTitle;
diff --git a/apps/meteor/client/components/InfoPanel/Label.tsx b/apps/meteor/client/components/InfoPanel/Label.tsx
deleted file mode 100644
index 0ed61197486f..000000000000
--- a/apps/meteor/client/components/InfoPanel/Label.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Label: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x8' fontScale='p2m' color='default' {...props} />;
-
-export default Label;
diff --git a/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx b/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx
index c97e0bb07567..fa334c109a2e 100644
--- a/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx
+++ b/apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx
@@ -12,7 +12,6 @@ type RetentionPolicyCalloutProps = {
 
 const RetentionPolicyCallout: FC<RetentionPolicyCalloutProps> = ({ filesOnlyDefault, excludePinnedDefault, maxAgeDefault }) => {
 	const t = useTranslation();
-
 	const time = useFormattedRelativeTime(maxAgeDefault * 1000 * 60 * 60 * 24);
 
 	return (
diff --git a/apps/meteor/client/components/InfoPanel/Section.tsx b/apps/meteor/client/components/InfoPanel/Section.tsx
deleted file mode 100644
index 3ab2527741ec..000000000000
--- a/apps/meteor/client/components/InfoPanel/Section.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Section: FC<ComponentProps<typeof Box>> = (props) => <Box mb='x24' {...props} />;
-
-export default Section;
diff --git a/apps/meteor/client/components/InfoPanel/index.ts b/apps/meteor/client/components/InfoPanel/index.ts
index b04d381e6c99..b2656d62ef37 100644
--- a/apps/meteor/client/components/InfoPanel/index.ts
+++ b/apps/meteor/client/components/InfoPanel/index.ts
@@ -1,20 +1,20 @@
-import Action from './Action';
-import ActionGroup from './ActionGroup';
-import Avatar from './Avatar';
-import Field from './Field';
 import InfoPanel from './InfoPanel';
-import Label from './Label';
-import Section from './Section';
-import Text from './Text';
-import Title from './Title';
+import InfoPanelAction from './InfoPanelAction';
+import InfoPanelActionGroup from './InfoPanelActionGroup';
+import InfoPanelAvatar from './InfoPanelAvatar';
+import InfoPanelField from './InfoPanelField';
+import InfoPanelLabel from './InfoPanelLabel';
+import InfoPanelSection from './InfoPanelSection';
+import InfoPanelText from './InfoPanelText';
+import InfoPanelTitle from './InfoPanelTitle';
 
 export default Object.assign(InfoPanel, {
-	Title,
-	Label,
-	Text,
-	Avatar,
-	Field,
-	Action,
-	Section,
-	ActionGroup,
+	Title: InfoPanelTitle,
+	Label: InfoPanelLabel,
+	Text: InfoPanelText,
+	Avatar: InfoPanelAvatar,
+	Field: InfoPanelField,
+	Action: InfoPanelAction,
+	Section: InfoPanelSection,
+	ActionGroup: InfoPanelActionGroup,
 });

From 4ec7fbdfb3a49aa31942d345c89b71eb78fcd623 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 22 Jul 2022 14:12:10 -0300
Subject: [PATCH 5/9] fix: refactor adjustments

---
 .../admin/users/AdminUserInfoActions.tsx      |  4 +--
 .../admin/users/AdminUserInfoWithData.tsx     | 13 +++------
 .../users/hooks/useChangeAdminStatusAction.ts |  2 +-
 .../users/hooks/useChangeUserStatusAction.ts  |  8 ++---
 .../users/hooks/useConfirmOwnerChanges.tsx    | 16 ++++------
 .../admin/users/hooks/useDeleteUserAction.tsx | 15 +++++-----
 ...eyAction.tsx => useResetE2EEKeyAction.tsx} | 29 +++++++++----------
 .../admin/users/hooks/useResetTOTPAction.tsx  | 27 ++++++++---------
 .../teams/contextualBar/info/TeamsInfo.js     |  7 +++--
 packages/rest-typings/src/v1/users.ts         |  4 +--
 10 files changed, 53 insertions(+), 72 deletions(-)
 rename apps/meteor/client/views/admin/users/hooks/{useResetE2EKeyAction.tsx => useResetE2EEKeyAction.tsx} (58%)

diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
index fb70baf0e1c2..b1ad72abf5e2 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoActions.tsx
@@ -8,7 +8,7 @@ import { useActionSpread } from '../../hooks/useActionSpread';
 import { useChangeAdminStatusAction } from './hooks/useChangeAdminStatusAction';
 import { useChangeUserStatusAction } from './hooks/useChangeUserStatusAction';
 import { useDeleteUserAction } from './hooks/useDeleteUserAction';
-import { useResetE2EKeyAction } from './hooks/useResetE2EKeyAction';
+import { useResetE2EEKeyAction } from './hooks/useResetE2EEKeyAction';
 import { useResetTOTPAction } from './hooks/useResetTOTPAction';
 
 type AdminUserInfoActionsProps = {
@@ -31,7 +31,7 @@ const AdminUserInfoActions = ({ username, userId, isActive, isAdmin, onChange, o
 	const changeUserStatusAction = useChangeUserStatusAction(userId, isActive, onChange);
 	const deleteUserAction = useDeleteUserAction(userId, onChange, onReload);
 	const resetTOTPAction = useResetTOTPAction(userId);
-	const resetE2EKeyAction = useResetE2EKeyAction(userId);
+	const resetE2EKeyAction = useResetE2EEKeyAction(userId);
 
 	const directMessageClick = useCallback(
 		() =>
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index 590f3b544021..f8308747c6ec 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -46,10 +46,8 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 		}
 
 		const {
-			_id,
 			avatarETag,
 			name,
-			active,
 			username,
 			phone,
 			createdAt,
@@ -64,11 +62,8 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 		} = data.user;
 
 		return {
-			_id,
 			avatarETag,
 			name,
-			active,
-			isAdmin: roles.includes('admin'),
 			username,
 			lastLogin,
 			roles: getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
@@ -97,7 +92,7 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 		);
 	}
 
-	if (error || !user) {
+	if (error || !user || !data?.user) {
 		return (
 			<VerticalBar.Content pb='x16'>
 				<Callout type='danger'>{t('User_not_found')}</Callout>
@@ -110,9 +105,9 @@ const AdminUserInfoWithData = ({ uid, onReload }: AdminUserInfoWithDataProps): R
 			{...user}
 			actions={
 				<AdminUserInfoActions
-					isActive={user.active}
-					isAdmin={user.isAdmin}
-					userId={user._id}
+					isActive={data?.user.active}
+					isAdmin={data?.user.roles.includes('admin')}
+					userId={data?.user._id}
 					username={user.username}
 					onChange={onChange}
 					onReload={onReload}
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
index 9918b1d4d0fc..c826b6bf609e 100644
--- a/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeAdminStatusAction.ts
@@ -17,7 +17,7 @@ export const useChangeAdminStatusAction = (userId: IUser['_id'], isAdmin: boolea
 			dispatchToastMessage({ type: 'success', message: t(message) });
 			onChange();
 		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: error as Error });
 		}
 	}, [userId, dispatchToastMessage, isAdmin, onChange, setAdminStatus, t]);
 
diff --git a/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
index cb2ccb2a4ee9..7e5a3e74b30c 100644
--- a/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
+++ b/apps/meteor/client/views/admin/users/hooks/useChangeUserStatusAction.ts
@@ -30,11 +30,9 @@ export const useChangeUserStatusAction = (userId: IUser['_id'], isActive: boolea
 				}
 
 				try {
-					const result = await changeActiveStatusRequest(activeStatusQuery);
-					if (result) {
-						dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
-						onChange();
-					}
+					await changeActiveStatusRequest(activeStatusQuery);
+					dispatchToastMessage({ type: 'success', message: t(changeActiveStatusMessage) });
+					onChange();
 				} catch (error) {
 					throw error;
 				}
diff --git a/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx b/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
index 15090c5bbd8e..582b448224f4 100644
--- a/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useConfirmOwnerChanges.tsx
@@ -4,7 +4,7 @@ import React, { ComponentProps } from 'react';
 import ConfirmOwnerChangeWarningModal from '../../../../components/ConfirmOwnerChangeModal';
 
 export const useConfirmOwnerChanges = (): ((
-	action: (confirm?: boolean) => void,
+	action: (confirm?: boolean) => Promise<void>,
 	modalProps: Pick<ComponentProps<typeof ConfirmOwnerChangeWarningModal>, 'contentTitle' | 'confirmText'>,
 	onChange: () => void,
 ) => Promise<void>) => {
@@ -14,17 +14,13 @@ export const useConfirmOwnerChanges = (): ((
 	return async (action, modalProps, onChange): Promise<void> => {
 		try {
 			return await action();
-		} catch (error) {
-			if (error.xhr?.responseJSON?.errorType === 'user-last-owner') {
-				const { shouldChangeOwner, shouldBeRemoved } = error.xhr.responseJSON.details;
+		} catch (error: any) {
+			if (error.errorType === 'user-last-owner') {
+				const { shouldChangeOwner, shouldBeRemoved } = error.details;
 
 				const handleConfirm = async (): Promise<void> => {
 					await action(true);
 					setModal();
-				};
-
-				const handleCancel = (): void => {
-					setModal();
 					onChange();
 				};
 
@@ -34,11 +30,11 @@ export const useConfirmOwnerChanges = (): ((
 						shouldChangeOwner={shouldChangeOwner}
 						shouldBeRemoved={shouldBeRemoved}
 						onConfirm={handleConfirm}
-						onCancel={handleCancel}
+						onCancel={(): void => setModal()}
 					/>,
 				);
 			}
-			dispatchToastMessage({ type: 'error', message: error });
+			dispatchToastMessage({ type: 'error', message: error as Error });
 		}
 	};
 };
diff --git a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
index fafd67a9f607..1a45dafee944 100644
--- a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx
@@ -24,10 +24,9 @@ export const useDeleteUserAction = (userId: IUser['_id'], onChange: () => void,
 	const erasureType = useSetting('Message_ErasureType');
 	const confirmOwnerChanges = useConfirmOwnerChanges();
 	const dispatchToastMessage = useToastMessageDispatch();
-	const handleCloseModal = useMutableCallback((): void => setModal());
 
 	const handleDeletedUser = (): void => {
-		handleCloseModal();
+		setModal();
 		userRoute.push({});
 		onReload();
 	};
@@ -42,12 +41,12 @@ export const useDeleteUserAction = (userId: IUser['_id'], onChange: () => void,
 					deleteUserQuery.confirmRelinquish = confirm;
 				}
 
-				const result = await deleteUserEndpoint(deleteUserQuery);
-				if (result.success) {
-					handleDeletedUser();
+				try {
+					await deleteUserEndpoint(deleteUserQuery);
 					dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
-				} else {
-					handleCloseModal();
+					handleDeletedUser();
+				} catch (error) {
+					throw error;
 				}
 			},
 			{
@@ -59,7 +58,7 @@ export const useDeleteUserAction = (userId: IUser['_id'], onChange: () => void,
 
 	const confirmDeleteUser = useMutableCallback(() => {
 		setModal(
-			<GenericModal variant='danger' onConfirm={deleteUser} onCancel={handleCloseModal} confirmText={t('Delete')}>
+			<GenericModal variant='danger' onConfirm={deleteUser} onCancel={(): void => setModal()} confirmText={t('Delete')}>
 				{t(`Delete_User_Warning_${erasureType}` as TranslationKey)}
 			</GenericModal>,
 		);
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetE2EEKeyAction.tsx
similarity index 58%
rename from apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
rename to apps/meteor/client/views/admin/users/hooks/useResetE2EEKeyAction.tsx
index af8a433fdf48..87cd3ec010fc 100644
--- a/apps/meteor/client/views/admin/users/hooks/useResetE2EKeyAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useResetE2EEKeyAction.tsx
@@ -1,39 +1,36 @@
 import { IUser } from '@rocket.chat/core-typings';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import React, { useCallback } from 'react';
 
 import GenericModal from '../../../../components/GenericModal';
 import { Action } from '../../../hooks/useActionSpread';
 
-export const useResetE2EKeyAction = (userId: IUser['_id']): Action | undefined => {
+export const useResetE2EEKeyAction = (userId: IUser['_id']): Action | undefined => {
 	const t = useTranslation();
 	const setModal = useSetModal();
-	const handleCloseModal = useMutableCallback(() => setModal());
+	const dispatchToastMessage = useToastMessageDispatch();
 	const canResetE2EEKey = usePermission('edit-other-user-e2ee');
 	const enforcePassword = useSetting('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback');
 	const resetE2EEKeyRequest = useEndpoint('POST', '/v1/users.resetE2EKey');
 
 	const resetE2EEKey = useCallback(async () => {
-		handleCloseModal();
-		const result = await resetE2EEKeyRequest({ userId });
-
-		if (result) {
-			setModal(
-				<GenericModal variant='success' onClose={handleCloseModal} onConfirm={handleCloseModal}>
-					{t('Users_key_has_been_reset')}
-				</GenericModal>,
-			);
+		try {
+			await resetE2EEKeyRequest({ userId });
+			dispatchToastMessage({ type: 'success', message: t('Users_key_has_been_reset') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error as Error });
+		} finally {
+			setModal();
 		}
-	}, [resetE2EEKeyRequest, setModal, t, userId, handleCloseModal]);
+	}, [resetE2EEKeyRequest, setModal, t, userId, dispatchToastMessage]);
 
 	const confirmResetE2EEKey = useCallback(() => {
 		setModal(
-			<GenericModal variant='danger' onConfirm={resetE2EEKey} onCancel={handleCloseModal} confirmText={t('Reset')}>
+			<GenericModal variant='danger' onConfirm={resetE2EEKey} onCancel={(): void => setModal()} confirmText={t('Reset')}>
 				{t('E2E_Reset_Other_Key_Warning')}
 			</GenericModal>,
 		);
-	}, [resetE2EEKey, t, setModal, handleCloseModal]);
+	}, [resetE2EEKey, t, setModal]);
 
 	return canResetE2EEKey && enforcePassword
 		? {
diff --git a/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
index cad8d836086f..ad887ce29a01 100644
--- a/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
+++ b/apps/meteor/client/views/admin/users/hooks/useResetTOTPAction.tsx
@@ -1,6 +1,5 @@
 import { IUser } from '@rocket.chat/core-typings';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useSetModal, useSetting, usePermission, useEndpoint, useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import React, { useCallback } from 'react';
 
 import GenericModal from '../../../../components/GenericModal';
@@ -9,31 +8,29 @@ import { Action } from '../../../hooks/useActionSpread';
 export const useResetTOTPAction = (userId: IUser['_id']): Action | undefined => {
 	const t = useTranslation();
 	const setModal = useSetModal();
-	const handleCloseModal = useMutableCallback(() => setModal());
+	const dispatchToastMessage = useToastMessageDispatch();
 	const canResetTOTP = usePermission('edit-other-user-totp');
 	const resetTOTPRequest = useEndpoint('POST', '/v1/users.resetTOTP');
 	const enforcePassword = useSetting('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback');
 
 	const resetTOTP = useCallback(async () => {
-		setModal();
-		const result = await resetTOTPRequest({ userId });
-
-		if (result) {
-			setModal(
-				<GenericModal variant='success' onClose={handleCloseModal} onConfirm={handleCloseModal}>
-					{t('Users_TOTP_has_been_reset')}
-				</GenericModal>,
-			);
+		try {
+			await resetTOTPRequest({ userId });
+			dispatchToastMessage({ type: 'success', message: t('Users_TOTP_has_been_reset') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error as Error });
+		} finally {
+			setModal();
 		}
-	}, [resetTOTPRequest, setModal, t, userId, handleCloseModal]);
+	}, [resetTOTPRequest, setModal, t, userId, dispatchToastMessage]);
 
 	const confirmResetTOTP = useCallback(() => {
 		setModal(
-			<GenericModal variant='danger' onConfirm={resetTOTP} onCancel={handleCloseModal} confirmText={t('Reset')}>
+			<GenericModal variant='danger' onConfirm={resetTOTP} onCancel={(): void => setModal()} confirmText={t('Reset')}>
 				{t('TOTP_Reset_Other_Key_Warning')}
 			</GenericModal>,
 		);
-	}, [resetTOTP, t, setModal, handleCloseModal]);
+	}, [resetTOTP, t, setModal]);
 
 	return canResetTOTP && enforcePassword
 		? {
diff --git a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.js b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.js
index 4a625b917d6a..2b66560a9b25 100644
--- a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.js
+++ b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.js
@@ -2,10 +2,10 @@ import { Box, Button, Callout, Option, Menu } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 
+import InfoPanel from '../../../../components/InfoPanel';
+import RetentionPolicyCallout from '../../../../components/InfoPanel/RetentionPolicyCallout';
 import VerticalBar from '../../../../components/VerticalBar';
 import RoomAvatar from '../../../../components/avatar/RoomAvatar';
-import InfoPanel from '../../../InfoPanel';
-import RetentionPolicyCallout from '../../../InfoPanel/RetentionPolicyCallout';
 import { useActionSpread } from '../../../hooks/useActionSpread';
 
 const TeamsInfo = ({
@@ -86,7 +86,8 @@ const TeamsInfo = ({
 				flexShrink={0}
 				mi='x2'
 				key='menu'
-				ghost={false}
+				maxHeight='initial'
+				secondary
 				renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
 				options={menuOptions}
 			/>
diff --git a/packages/rest-typings/src/v1/users.ts b/packages/rest-typings/src/v1/users.ts
index 4dbef20b3399..1b07ad614ff7 100644
--- a/packages/rest-typings/src/v1/users.ts
+++ b/packages/rest-typings/src/v1/users.ts
@@ -302,9 +302,7 @@ export type UsersEndpoints = {
 	};
 
 	'/v1/users.delete': {
-		POST: (params: { userId: IUser['_id']; confirmRelinquish?: boolean }) => {
-			success: boolean;
-		};
+		POST: (params: { userId: IUser['_id']; confirmRelinquish?: boolean }) => void;
 	};
 };
 

From efdaacd63698c10e940875808a93926d637259d0 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Tue, 26 Jul 2022 20:04:38 -0300
Subject: [PATCH 6/9] fix: e2e test

---
 .../components/InfoPanel/InfoPanelText.tsx    |   2 +-
 .../client/components/UserInfo/UserInfo.tsx   |   8 +-
 apps/meteor/tests/e2e/11-admin.spec.ts        | 116 ++++++++++--------
 .../tests/e2e/page-objects/administration.ts  |  30 ++++-
 .../page-objects/fragments/admin-flextab.ts   |   2 +-
 5 files changed, 96 insertions(+), 62 deletions(-)

diff --git a/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx b/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
index bc2486fd90f0..fd483f2dc7a4 100644
--- a/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
+++ b/apps/meteor/client/components/InfoPanel/InfoPanelText.tsx
@@ -7,7 +7,7 @@ const wordBreak = css`
 `;
 
 const InfoPanelText: FC<ComponentProps<typeof Box>> = (props) => (
-	<Box mb='x8' fontScale='p2' color='hint' withTruncatedText className={wordBreak} {...props} />
+	<Box mb='x8' fontScale='p2' color='hint' className={wordBreak} {...props} />
 );
 
 export default InfoPanelText;
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index 9c5ce5028802..329ca656e8d3 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -79,7 +79,7 @@ const UserInfo = ({
 					{userDisplayName && <InfoPanel.Title icon={status} title={userDisplayName} />}
 					{statusText && (
 						<InfoPanel.Text>
-							<MarkdownText content={statusText} parseEmoji={true} variant='inline' />
+							<MarkdownText content={statusText} parseEmoji={true} />
 						</InfoPanel.Text>
 					)}
 				</InfoPanel.Section>
@@ -92,12 +92,10 @@ const UserInfo = ({
 						</InfoPanel.Field>
 					)}
 
-					{utcOffset && Number.isInteger(utcOffset) && (
+					{Number.isInteger(utcOffset) && (
 						<InfoPanel.Field>
 							<InfoPanel.Label>{t('Local_Time')}</InfoPanel.Label>
-							<InfoPanel.Text>
-								<UTCClock utcOffset={utcOffset} />
-							</InfoPanel.Text>
+							<InfoPanel.Text>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanel.Text>
 						</InfoPanel.Field>
 					)}
 
diff --git a/apps/meteor/tests/e2e/11-admin.spec.ts b/apps/meteor/tests/e2e/11-admin.spec.ts
index f50284d29e89..af665845b4ea 100644
--- a/apps/meteor/tests/e2e/11-admin.spec.ts
+++ b/apps/meteor/tests/e2e/11-admin.spec.ts
@@ -65,6 +65,7 @@ test.describe('Administration', () => {
 					await expect(pageAdmin.notFoundChannelOrUser).toBeVisible();
 				});
 			});
+
 			test.describe('Filter checkbox', () => {
 				test.beforeAll(async () => {
 					await pageAdmin.roomsSearchForm.click({ clickCount: 3 });
@@ -111,59 +112,74 @@ test.describe('Administration', () => {
 					await pageAdmin.adminCheckBox('Teams').click();
 				});
 			});
-			test.describe('Users', () => {
-				test.beforeAll(async () => {
-					await pageAdmin.usersLink.click();
+		});
+
+		test.describe('Users', () => {
+			test.beforeAll(async () => {
+				await pageAdmin.usersLink.click();
+			});
+
+			test.describe('Filter text', async () => {
+				test.beforeEach(async () => {
+					await pageAdmin.usersFilter.click({ clickCount: 3 });
+					await pageAdmin.usersFilter.type('');
 				});
 
 				test.afterAll(async () => {
-					await pageAdmin.infoLink.click();
-				});
-
-				test.describe('Filter text', async () => {
-					test.beforeEach(async () => {
-						await pageAdmin.usersFilter.click();
-					});
-
-					test.afterAll(async () => {
-						await pageAdmin.usersFilter.click();
-						await pageAdmin.usersFilter.type('');
-					});
-
-					test('expect should show rocket.cat', async () => {
-						await pageAdmin.usersFilter.type('rocket.cat');
-						await page.waitForSelector('//table//tbody//tr[1]//td//div//div//div//div[text()="Rocket.Cat"]');
-					});
-
-					test('expect dont user when write wrong name', async () => {
-						await pageAdmin.usersFilter.type('any_user_wrong');
-						await expect(pageAdmin.notFoundChannels).toBeVisible();
-					});
-				});
-
-				test.describe('Create user', () => {
-					test.beforeAll(async () => {
-						await pageAdmin.tabs.usersAddUserTab.click();
-					});
-
-					test('expect tab user add is rendering', async () => {
-						await expect(pageAdmin.tabs.usersAddUserName).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserUsername).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserEmail).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserVerifiedCheckbox).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserPassword).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserRoleList).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserRandomPassword).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserChangePasswordCheckbox).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserDefaultChannelCheckbox).toBeVisible();
-						await expect(pageAdmin.tabs.usersAddUserWelcomeEmailCheckbox).toBeVisible();
-						await expect(pageAdmin.tabs.usersButtonCancel).toBeVisible();
-						await expect(pageAdmin.tabs.usersButtonSave).toBeVisible();
-
-						await pageAdmin.tabs.usersAddUserTabClose.click();
-
-						await expect(pageAdmin.tabs.addUserTable).not.toBeVisible();
-					});
+					await pageAdmin.usersFilter.click({ clickCount: 3 });
+					await pageAdmin.usersFilter.type('');
+				});
+
+				test('expect show rocket.cat user item', async () => {
+					await pageAdmin.usersFilter.type('rocket.cat');
+					await expect(pageAdmin.userInTable('rocket.cat')).toBeVisible();
+				});
+
+				test('expect not show user when write wrong name', async () => {
+					await pageAdmin.usersFilter.type('any_user_wrong');
+					await expect(pageAdmin.notFoundChannels).toBeVisible();
+				});
+			});
+
+			test.describe('User info', () => {
+				test.beforeAll(async () => {
+					await pageAdmin.usersFilter.type('rocket.cat');
+				});
+
+				test('expect show rocket.cat info panel', async () => {
+					await pageAdmin.userInTable('rocket.cat').click();
+					await expect(pageAdmin.userInfoActions).toBeVisible();
+				});
+
+				test('expect show rocket.cat actions', async () => {
+					await pageAdmin.userInTable('rocket.cat').click();
+					await pageAdmin.userInfoActionsMoreMenu.click();
+					await pageAdmin.verifyUserActionsInList(['Make Admin', 'Reset E2E Key', 'Reset TOTP', 'Delete', 'Deactivate']);
+				});
+			});
+
+			test.describe('Create user', () => {
+				test.beforeAll(async () => {
+					await pageAdmin.tabs.usersAddUserTab.click();
+				});
+
+				test('expect tab user add is rendering', async () => {
+					await expect(pageAdmin.tabs.usersAddUserName).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserUsername).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserEmail).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserVerifiedCheckbox).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserPassword).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserRoleList).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserRandomPassword).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserChangePasswordCheckbox).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserDefaultChannelCheckbox).toBeVisible();
+					await expect(pageAdmin.tabs.usersAddUserWelcomeEmailCheckbox).toBeVisible();
+					await expect(pageAdmin.tabs.usersButtonCancel).toBeVisible();
+					await expect(pageAdmin.tabs.usersButtonSave).toBeVisible();
+
+					await pageAdmin.tabs.usersAddUserTabClose.click();
+
+					await expect(pageAdmin.tabs.addUserTable).not.toBeVisible();
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/page-objects/administration.ts b/apps/meteor/tests/e2e/page-objects/administration.ts
index 541f1fcf281d..9dfb3a51a51f 100644
--- a/apps/meteor/tests/e2e/page-objects/administration.ts
+++ b/apps/meteor/tests/e2e/page-objects/administration.ts
@@ -100,7 +100,31 @@ export class Administration {
 	}
 
 	userInTable(id: string): Locator {
-		return this.page.locator(`tr > td:has-text("${id}")`);
+		return this.page.locator(`tr[qa-user-id="${id}"]`);
+	}
+
+	get userInfoActions(): Locator {
+		return this.page.locator('[data-qa-id="UserInfoActions"]');
+	}
+
+	get userInfoUsername(): Locator {
+		return this.page.locator('[data-qa="UserInfoUserName"]');
+	}
+
+	userActionsInList(id: string): Locator {
+		return this.page.locator(`ol > li[title="${id}"]`);
+	}
+
+	async verifyUserActionsInList(actions: string[]): Promise<void> {
+		const expected = [];
+		for (const action of actions) {
+			expected.push(expect(this.userActionsInList(action)).toBeVisible());
+		}
+		await Promise.all(expected);
+	}
+
+	get userInfoActionsMoreMenu(): Locator {
+		return this.userInfoActions.locator('button[data-testid="menu"]');
 	}
 
 	get rolesSettingsFindInput(): Locator {
@@ -370,8 +394,4 @@ export class Administration {
 	getCheckboxPermission(label: string, column = 6): Locator {
 		return this.page.locator(`tr td:has-text("${label}") ~ td:nth-child(${column})`).locator('label').first();
 	}
-
-	get userInfoActions(): Locator {
-		return this.page.locator('[data-qa-id="UserInfoActions"]');
-	}
 }
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/admin-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/admin-flextab.ts
index 7bbbe1a00b15..de990d251019 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/admin-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/admin-flextab.ts
@@ -60,7 +60,7 @@ export class AdminFlextab {
 	}
 
 	get usersAddUserTabClose(): Locator {
-		return this.page.locator('//div[text()="Add User"]//button');
+		return this.page.locator('[data-qa="VerticalBarActionClose"]');
 	}
 
 	get addUserTable(): Locator {

From eaa1e1ef32bf93afbd15f36fbf49c95f18391e07 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Tue, 26 Jul 2022 21:42:45 -0300
Subject: [PATCH 7/9] fix: test troubleshooting

---
 apps/meteor/playwright.config.ts                     | 4 ++--
 apps/meteor/tests/e2e/page-objects/administration.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/playwright.config.ts b/apps/meteor/playwright.config.ts
index 5ec7008923ce..88276912e32d 100644
--- a/apps/meteor/playwright.config.ts
+++ b/apps/meteor/playwright.config.ts
@@ -3,8 +3,8 @@ import { PlaywrightTestConfig } from '@playwright/test';
 import * as constants from './tests/e2e/utils/constants';
 
 export default {
-	globalSetup: require.resolve('./tests/e2e/configs/setup.ts'),
-	globalTeardown: require.resolve('./tests/e2e/configs/teardown.ts'),
+	// globalSetup: require.resolve('./tests/e2e/configs/setup.ts'),
+	// globalTeardown: require.resolve('./tests/e2e/configs/teardown.ts'),
 	use: {
 		headless: true,
 		viewport: { width: 1368, height: 768 },
diff --git a/apps/meteor/tests/e2e/page-objects/administration.ts b/apps/meteor/tests/e2e/page-objects/administration.ts
index 9dfb3a51a51f..9f43440b5b79 100644
--- a/apps/meteor/tests/e2e/page-objects/administration.ts
+++ b/apps/meteor/tests/e2e/page-objects/administration.ts
@@ -100,7 +100,7 @@ export class Administration {
 	}
 
 	userInTable(id: string): Locator {
-		return this.page.locator(`tr[qa-user-id="${id}"]`);
+		return this.page.locator(`tr > td:has-text("${id}") >> nth=0`);
 	}
 
 	get userInfoActions(): Locator {

From a315ecb4f77571155b9af57e3c8ccfab4affb813 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 28 Jul 2022 10:17:32 -0300
Subject: [PATCH 8/9] fix: broken tests

---
 apps/meteor/tests/e2e/09-channel.spec.ts |  3 +++
 apps/meteor/tests/e2e/11-admin.spec.ts   | 14 +++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/tests/e2e/09-channel.spec.ts b/apps/meteor/tests/e2e/09-channel.spec.ts
index 009fd71b25e4..410b61234c99 100644
--- a/apps/meteor/tests/e2e/09-channel.spec.ts
+++ b/apps/meteor/tests/e2e/09-channel.spec.ts
@@ -67,6 +67,7 @@ test.describe('Channel', () => {
 				await pageHomeChannel.tabs.btnTabInfo.click();
 				await pageHomeChannel.tabs.editNameBtn.click();
 
+				await pageHomeChannel.tabs.editTopicTextInput.click({ clickCount: 3 });
 				await pageHomeChannel.tabs.editTopicTextInput.fill('TOPIC EDITED');
 				await pageHomeChannel.tabs.editNameSave.click();
 
@@ -77,6 +78,7 @@ test.describe('Channel', () => {
 				await pageHomeChannel.tabs.btnTabInfo.click();
 				await pageHomeChannel.tabs.editNameBtn.click();
 
+				await pageHomeChannel.tabs.editAnnouncementTextInput.click({ clickCount: 3 });
 				await pageHomeChannel.tabs.editAnnouncementTextInput.type('ANNOUNCEMENT EDITED');
 				await pageHomeChannel.tabs.editNameSave.click();
 
@@ -87,6 +89,7 @@ test.describe('Channel', () => {
 				await pageHomeChannel.tabs.btnTabInfo.click();
 				await pageHomeChannel.tabs.editNameBtn.click();
 
+				await pageHomeChannel.tabs.editDescriptionTextInput.click({ clickCount: 3 });
 				await pageHomeChannel.tabs.editDescriptionTextInput.type('DESCRIPTION EDITED');
 				await pageHomeChannel.tabs.editNameSave.click();
 				await pageHomeChannel.tabs.mainSideBarBack.click();
diff --git a/apps/meteor/tests/e2e/11-admin.spec.ts b/apps/meteor/tests/e2e/11-admin.spec.ts
index 134647d2b9ba..3323eead0957 100644
--- a/apps/meteor/tests/e2e/11-admin.spec.ts
+++ b/apps/meteor/tests/e2e/11-admin.spec.ts
@@ -104,19 +104,19 @@ test.describe('Administration', () => {
 		});
 
 		test.describe('Users', () => {
-			test.beforeAll(async () => {
+			test.beforeEach(async () => {
 				await pageAdmin.usersLink.click();
 			});
 
 			test.describe('Filter text', async () => {
-				test.beforeEach(async () => {
+				test.beforeEach(async ({ page }) => {
 					await pageAdmin.usersFilter.click({ clickCount: 3 });
-					await pageAdmin.usersFilter.type('');
+					await page.keyboard.press('Backspace');
 				});
 
-				test.afterAll(async () => {
+				test.afterAll(async ({ page }) => {
 					await pageAdmin.usersFilter.click({ clickCount: 3 });
-					await pageAdmin.usersFilter.type('');
+					await page.keyboard.press('Backspace');
 				});
 
 				test('expect show rocket.cat user item', async () => {
@@ -131,7 +131,7 @@ test.describe('Administration', () => {
 			});
 
 			test.describe('User info', () => {
-				test.beforeAll(async () => {
+				test.beforeEach(async () => {
 					await pageAdmin.usersFilter.type('rocket.cat');
 				});
 
@@ -148,7 +148,7 @@ test.describe('Administration', () => {
 			});
 
 			test.describe('Create user', () => {
-				test.beforeAll(async () => {
+				test.beforeEach(async () => {
 					await pageAdmin.tabs.usersAddUserTab.click();
 				});
 

From 5f021eb96d9ffef7545e760bc1dbb371f631a4b8 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 28 Jul 2022 10:22:30 -0300
Subject: [PATCH 9/9] chore: ooops

---
 apps/meteor/playwright.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/playwright.config.ts b/apps/meteor/playwright.config.ts
index 88276912e32d..5ec7008923ce 100644
--- a/apps/meteor/playwright.config.ts
+++ b/apps/meteor/playwright.config.ts
@@ -3,8 +3,8 @@ import { PlaywrightTestConfig } from '@playwright/test';
 import * as constants from './tests/e2e/utils/constants';
 
 export default {
-	// globalSetup: require.resolve('./tests/e2e/configs/setup.ts'),
-	// globalTeardown: require.resolve('./tests/e2e/configs/teardown.ts'),
+	globalSetup: require.resolve('./tests/e2e/configs/setup.ts'),
+	globalTeardown: require.resolve('./tests/e2e/configs/teardown.ts'),
 	use: {
 		headless: true,
 		viewport: { width: 1368, height: 768 },