From 5a287fff1df02c5136217aa4f7074c3564655275 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 10 Jun 2022 16:57:41 -0300
Subject: [PATCH 01/36] Chore: Add auto label and improve Kodiak configuration
 (#25829)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .github/auto-label-action-config.json |  1 +
 .github/workflows/auto-label.yml      | 11 +++++++++++
 .kodiak.toml                          |  7 +++++--
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .github/auto-label-action-config.json
 create mode 100644 .github/workflows/auto-label.yml

diff --git a/.github/auto-label-action-config.json b/.github/auto-label-action-config.json
new file mode 100644
index 0000000000000..0967ef424bce6
--- /dev/null
+++ b/.github/auto-label-action-config.json
@@ -0,0 +1 @@
+{}
diff --git a/.github/workflows/auto-label.yml b/.github/workflows/auto-label.yml
new file mode 100644
index 0000000000000..2a453ccdb4d25
--- /dev/null
+++ b/.github/workflows/auto-label.yml
@@ -0,0 +1,11 @@
+name: 'Auto label QA'
+on:
+  pull_request:
+    types: [opened, synchronize, labeled, unlabeled]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: ggazzo/gh-action-auto-label@beta-5
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.kodiak.toml b/.kodiak.toml
index bbbfca713a5ea..3865c8954586f 100644
--- a/.kodiak.toml
+++ b/.kodiak.toml
@@ -1,10 +1,13 @@
 # .kodiak.toml
 version = 1
 
-
 [merge]
 method = "squash"
-automerge_label = ["stat: ready to merge", "QA tested", "automerge"]
+automerge_label = ["stat: ready to merge", "automerge"]
+block_on_neutral_required_check_runs = true
+blocking_labels = ["stat: needs QA", "Invalid PR Title"]
+prioritize_ready_to_merge =  true
+
 
 [merge.message]
 title = "pull_request_title" # default: "github_default"

From e3d184bc4e6d6c7bd44fde4dfbf75f798a8ea52c Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 10 Jun 2022 17:41:55 -0300
Subject: [PATCH 02/36] Regression: Fix users.create call (#25834)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 apps/meteor/client/views/admin/users/AddUser.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/admin/users/AddUser.js b/apps/meteor/client/views/admin/users/AddUser.js
index 5aa3eb2cf9c9d..79e523cee7f84 100644
--- a/apps/meteor/client/views/admin/users/AddUser.js
+++ b/apps/meteor/client/views/admin/users/AddUser.js
@@ -77,8 +77,8 @@ export function AddUser({ roles, onReload, ...props }) {
 		[router],
 	);
 
-	const saveAction = useEndpointAction('POST', 'users.create', values, t('User_created_successfully!'));
-	const eventStats = useEndpointAction('POST', 'statistics.telemetry', {
+	const saveAction = useEndpointAction('POST', '/v1/users.create', values, t('User_created_successfully!'));
+	const eventStats = useEndpointAction('POST', '/v1/statistics.telemetry', {
 		params: [{ eventName: 'updateCounter', settingsId: 'Manual_Entry_User_Count' }],
 	});
 

From e01c8eac92467fd1e4e6a21c19539e2950d4f8dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Fri, 10 Jun 2022 19:18:50 -0300
Subject: [PATCH 03/36] Chore: Convert MemoizedSetting, Setting, Section
 (#25572)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>
---
 .../client/components/Sidebar/Header.tsx      |  4 +-
 .../contexts/TranslationContextMock.tsx       |  4 +-
 .../views/admin/EditableSettingsContext.ts    | 20 +++---
 .../settings/EditableSettingsProvider.tsx     | 12 ++--
 .../client/views/admin/settings/GroupPage.tsx |  4 +-
 ...MemoizedSetting.js => MemoizedSetting.tsx} | 67 +++++++++++++------
 .../settings/{Section.js => Section.tsx}      | 54 +++++++++++----
 .../settings/{Setting.js => Setting.tsx}      | 53 +++++++++------
 .../settings/inputs/BooleanSettingInput.tsx   |  4 +-
 .../ui-contexts/src/TranslationContext.ts     |  4 +-
 10 files changed, 144 insertions(+), 82 deletions(-)
 rename apps/meteor/client/views/admin/settings/{MemoizedSetting.js => MemoizedSetting.tsx} (54%)
 rename apps/meteor/client/views/admin/settings/{Section.js => Section.tsx} (57%)
 rename apps/meteor/client/views/admin/settings/{Setting.js => Setting.tsx} (52%)

diff --git a/apps/meteor/client/components/Sidebar/Header.tsx b/apps/meteor/client/components/Sidebar/Header.tsx
index 2bc7e5cfb4809..278f474015871 100644
--- a/apps/meteor/client/components/Sidebar/Header.tsx
+++ b/apps/meteor/client/components/Sidebar/Header.tsx
@@ -1,8 +1,8 @@
 import { Box, ActionButton } from '@rocket.chat/fuselage';
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 type HeaderProps = {
-	title?: ReactElement | string;
+	title?: ReactNode;
 	onClose?: () => void;
 };
 
diff --git a/apps/meteor/client/stories/contexts/TranslationContextMock.tsx b/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
index d4ffd14591548..059f3147dba6e 100644
--- a/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
+++ b/apps/meteor/client/stories/contexts/TranslationContextMock.tsx
@@ -1,4 +1,4 @@
-import { TranslationContext } from '@rocket.chat/ui-contexts';
+import { TranslationContext, TranslationKey } from '@rocket.chat/ui-contexts';
 import i18next from 'i18next';
 import React, { ContextType, ReactElement, ReactNode, useContext, useMemo } from 'react';
 
@@ -41,7 +41,7 @@ const TranslationContextMock = ({ children }: TranslationContextMockProps): Reac
 			});
 		};
 
-		translate.has = (key: string): boolean => !!key && i18next.exists(key);
+		translate.has = (key: string | undefined): key is TranslationKey => !!key && i18next.exists(key);
 
 		return {
 			...parent,
diff --git a/apps/meteor/client/views/admin/EditableSettingsContext.ts b/apps/meteor/client/views/admin/EditableSettingsContext.ts
index af21e8d7f4d4d..2c74b679fc9eb 100644
--- a/apps/meteor/client/views/admin/EditableSettingsContext.ts
+++ b/apps/meteor/client/views/admin/EditableSettingsContext.ts
@@ -1,24 +1,24 @@
-import { ISettingBase, SectionName, SettingId, GroupId, TabId } from '@rocket.chat/core-typings';
+import { ISettingBase, SectionName, SettingId, GroupId, TabId, ISettingColor } from '@rocket.chat/core-typings';
 import { SettingsContextQuery } from '@rocket.chat/ui-contexts';
 import { createContext, useContext, useMemo } from 'react';
 import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
 
-export interface IEditableSetting extends ISettingBase {
+export type EditableSetting = (ISettingBase | ISettingColor) & {
 	disabled: boolean;
 	changed: boolean;
 	invisible: boolean;
-}
+};
 
 export type EditableSettingsContextQuery = SettingsContextQuery & {
 	changed?: boolean;
 };
 
 export type EditableSettingsContextValue = {
-	readonly queryEditableSetting: (_id: SettingId) => Subscription<IEditableSetting | undefined>;
-	readonly queryEditableSettings: (query: EditableSettingsContextQuery) => Subscription<IEditableSetting[]>;
+	readonly queryEditableSetting: (_id: SettingId) => Subscription<EditableSetting | undefined>;
+	readonly queryEditableSettings: (query: EditableSettingsContextQuery) => Subscription<EditableSetting[]>;
 	readonly queryGroupSections: (_id: GroupId, tab?: TabId) => Subscription<SectionName[]>;
 	readonly queryGroupTabs: (_id: GroupId) => Subscription<TabId[]>;
-	readonly dispatch: (changes: Partial<IEditableSetting>[]) => void;
+	readonly dispatch: (changes: Partial<EditableSetting>[]) => void;
 };
 
 export const EditableSettingsContext = createContext<EditableSettingsContextValue>({
@@ -27,7 +27,7 @@ export const EditableSettingsContext = createContext<EditableSettingsContextValu
 		subscribe: (): Unsubscribe => (): void => undefined,
 	}),
 	queryEditableSettings: () => ({
-		getCurrentValue: (): IEditableSetting[] => [],
+		getCurrentValue: (): EditableSetting[] => [],
 		subscribe: (): Unsubscribe => (): void => undefined,
 	}),
 	queryGroupSections: () => ({
@@ -41,14 +41,14 @@ export const EditableSettingsContext = createContext<EditableSettingsContextValu
 	dispatch: () => undefined,
 });
 
-export const useEditableSetting = (_id: SettingId): IEditableSetting | undefined => {
+export const useEditableSetting = (_id: SettingId): EditableSetting | undefined => {
 	const { queryEditableSetting } = useContext(EditableSettingsContext);
 
 	const subscription = useMemo(() => queryEditableSetting(_id), [queryEditableSetting, _id]);
 	return useSubscription(subscription);
 };
 
-export const useEditableSettings = (query?: EditableSettingsContextQuery): IEditableSetting[] => {
+export const useEditableSettings = (query?: EditableSettingsContextQuery): EditableSetting[] => {
 	const { queryEditableSettings } = useContext(EditableSettingsContext);
 	const subscription = useMemo(() => queryEditableSettings(query ?? {}), [queryEditableSettings, query]);
 	return useSubscription(subscription);
@@ -68,5 +68,5 @@ export const useEditableSettingsGroupTabs = (_id: SettingId): TabId[] => {
 	return useSubscription(subscription);
 };
 
-export const useEditableSettingsDispatch = (): ((changes: Partial<IEditableSetting>[]) => void) =>
+export const useEditableSettingsDispatch = (): ((changes: Partial<EditableSetting>[]) => void) =>
 	useContext(EditableSettingsContext).dispatch;
diff --git a/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx b/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx
index 4c0d102baa9fa..4a469f0532180 100644
--- a/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx
+++ b/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx
@@ -7,7 +7,7 @@ import { FilterQuery } from 'mongodb';
 import React, { useEffect, useMemo, FunctionComponent, useRef, MutableRefObject } from 'react';
 
 import { createReactiveSubscriptionFactory } from '../../../providers/createReactiveSubscriptionFactory';
-import { EditableSettingsContext, IEditableSetting, EditableSettingsContextValue } from '../EditableSettingsContext';
+import { EditableSettingsContext, EditableSetting, EditableSettingsContextValue } from '../EditableSettingsContext';
 
 const defaultQuery: SettingsContextQuery = {};
 
@@ -16,7 +16,7 @@ type EditableSettingsProviderProps = {
 };
 
 const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps> = ({ children, query = defaultQuery }) => {
-	const settingsCollectionRef = useRef<Mongo.Collection<IEditableSetting>>(null) as MutableRefObject<Mongo.Collection<IEditableSetting>>;
+	const settingsCollectionRef = useRef<Mongo.Collection<EditableSetting>>(null) as MutableRefObject<Mongo.Collection<EditableSetting>>;
 	const persistedSettings = useSettings(query);
 
 	const getSettingsCollection = useMutableCallback(() => {
@@ -25,7 +25,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 		}
 
 		return settingsCollectionRef.current;
-	}) as () => Mongo.Collection<IEditableSetting>;
+	}) as () => Mongo.Collection<EditableSetting>;
 
 	useEffect(() => {
 		const settingsCollection = getSettingsCollection();
@@ -39,7 +39,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 	const queryEditableSetting = useMemo(() => {
 		const validateSettingQueries = (
 			query: undefined | string | FilterQuery<ISetting> | FilterQuery<ISetting>[],
-			settingsCollection: Mongo.Collection<IEditableSetting>,
+			settingsCollection: Mongo.Collection<EditableSetting>,
 		): boolean => {
 			if (!query) {
 				return true;
@@ -49,7 +49,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 			return queries.every((query) => settingsCollection.find(query).count() > 0);
 		};
 
-		return createReactiveSubscriptionFactory((_id: SettingId): IEditableSetting | undefined => {
+		return createReactiveSubscriptionFactory((_id: SettingId): EditableSetting | undefined => {
 			const settingsCollection = getSettingsCollection();
 			const editableSetting = settingsCollection.findOne(_id);
 
@@ -169,7 +169,7 @@ const EditableSettingsProvider: FunctionComponent<EditableSettingsProviderProps>
 		[getSettingsCollection],
 	);
 
-	const dispatch = useMutableCallback((changes: Partial<IEditableSetting>[]): void => {
+	const dispatch = useMutableCallback((changes: Partial<EditableSetting>[]): void => {
 		for (const { _id, ...data } of changes) {
 			if (!_id) {
 				continue;
diff --git a/apps/meteor/client/views/admin/settings/GroupPage.tsx b/apps/meteor/client/views/admin/settings/GroupPage.tsx
index 19b16adee851b..20510393b48b3 100644
--- a/apps/meteor/client/views/admin/settings/GroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/GroupPage.tsx
@@ -14,7 +14,7 @@ import {
 import React, { useMemo, memo, FC, ReactNode, FormEvent, MouseEvent } from 'react';
 
 import Page from '../../../components/Page';
-import { useEditableSettingsDispatch, useEditableSettings, IEditableSetting } from '../EditableSettingsContext';
+import { useEditableSettingsDispatch, useEditableSettings, EditableSetting } from '../EditableSettingsContext';
 import GroupPageSkeleton from './GroupPageSkeleton';
 
 type GroupPageProps = {
@@ -129,7 +129,7 @@ const GroupPage: FC<GroupPageProps> = ({
 				};
 			})
 			.filter(Boolean);
-		dispatchToEditing(settingsToDispatch as Partial<IEditableSetting>[]);
+		dispatchToEditing(settingsToDispatch as Partial<EditableSetting>[]);
 	});
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
diff --git a/apps/meteor/client/views/admin/settings/MemoizedSetting.js b/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx
similarity index 54%
rename from apps/meteor/client/views/admin/settings/MemoizedSetting.js
rename to apps/meteor/client/views/admin/settings/MemoizedSetting.tsx
index f3b93d838e28e..446958d390d2b 100644
--- a/apps/meteor/client/views/admin/settings/MemoizedSetting.js
+++ b/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx
@@ -1,5 +1,6 @@
+import { ISettingBase, SettingEditor, SettingValue } from '@rocket.chat/core-typings';
 import { Callout, Field, Margins } from '@rocket.chat/fuselage';
-import React, { memo } from 'react';
+import React, { ElementType, memo, ReactElement, ReactNode } from 'react';
 
 import ActionSettingInput from './inputs/ActionSettingInput';
 import AssetSettingInput from './inputs/AssetSettingInput';
@@ -18,40 +19,62 @@ import SelectSettingInput from './inputs/SelectSettingInput';
 import SelectTimezoneSettingInput from './inputs/SelectTimezoneSettingInput';
 import StringSettingInput from './inputs/StringSettingInput';
 
+// @todo: the props are loosely typed because `Setting` needs to typecheck them.
+const inputsByType: Record<ISettingBase['type'], ElementType<any>> = {
+	boolean: BooleanSettingInput,
+	string: StringSettingInput,
+	relativeUrl: RelativeUrlSettingInput,
+	password: PasswordSettingInput,
+	int: IntSettingInput,
+	select: SelectSettingInput,
+	multiSelect: MultiSelectSettingInput,
+	language: LanguageSettingInput,
+	color: ColorSettingInput,
+	font: FontSettingInput,
+	code: CodeSettingInput,
+	action: ActionSettingInput,
+	asset: AssetSettingInput,
+	roomPick: RoomPickSettingInput,
+	timezone: SelectTimezoneSettingInput,
+	date: GenericSettingInput, // @todo: implement
+	group: GenericSettingInput, // @todo: implement
+};
+
+type MemoizedSettingProps = {
+	_id?: string;
+	type: ISettingBase['type'];
+	hint?: ReactNode;
+	callout?: ReactNode;
+	value?: SettingValue;
+	editor?: SettingEditor;
+	onChangeValue?: (value: unknown) => void;
+	onChangeEditor?: (value: unknown) => void;
+	onResetButtonClick?: () => void;
+	className?: string;
+	invisible?: boolean;
+	label?: string;
+	sectionChanged?: boolean;
+	hasResetButton?: boolean;
+	actionText?: string;
+};
+
 const MemoizedSetting = ({
 	type,
 	hint = undefined,
 	callout = undefined,
 	value = undefined,
 	editor = undefined,
-	onChangeValue = () => {},
-	onChangeEditor = () => {},
+	onChangeValue,
+	onChangeEditor,
 	className = undefined,
 	invisible = undefined,
 	...inputProps
-}) => {
+}: MemoizedSettingProps): ReactElement | null => {
 	if (invisible) {
 		return null;
 	}
 
-	const InputComponent =
-		{
-			boolean: BooleanSettingInput,
-			string: StringSettingInput,
-			relativeUrl: RelativeUrlSettingInput,
-			password: PasswordSettingInput,
-			int: IntSettingInput,
-			select: SelectSettingInput,
-			multiSelect: MultiSelectSettingInput,
-			language: LanguageSettingInput,
-			color: ColorSettingInput,
-			font: FontSettingInput,
-			code: CodeSettingInput,
-			action: ActionSettingInput,
-			asset: AssetSettingInput,
-			roomPick: RoomPickSettingInput,
-			timezone: SelectTimezoneSettingInput,
-		}[type] || GenericSettingInput;
+	const InputComponent = inputsByType[type];
 
 	return (
 		<Field className={className}>
diff --git a/apps/meteor/client/views/admin/settings/Section.js b/apps/meteor/client/views/admin/settings/Section.tsx
similarity index 57%
rename from apps/meteor/client/views/admin/settings/Section.js
rename to apps/meteor/client/views/admin/settings/Section.tsx
index e2c4ca138e66d..4649426e10a0a 100644
--- a/apps/meteor/client/views/admin/settings/Section.js
+++ b/apps/meteor/client/views/admin/settings/Section.tsx
@@ -1,13 +1,24 @@
+import { isSettingColor } from '@rocket.chat/core-typings';
 import { Accordion, Box, Button, FieldGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 
 import { useEditableSettings, useEditableSettingsDispatch } from '../EditableSettingsContext';
 import SectionSkeleton from './SectionSkeleton';
 import Setting from './Setting';
 
-function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, ...props }) {
+type SectionProps = {
+	groupId: string;
+	hasReset?: boolean;
+	sectionName: string;
+	tabName?: string;
+	solo: boolean;
+	help?: ReactNode;
+	children?: ReactNode;
+};
+
+function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, help, children }: SectionProps): ReactElement {
 	const editableSettings = useEditableSettings(
 		useMemo(
 			() => ({
@@ -32,26 +43,41 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, ..
 		dispatch(
 			editableSettings
 				.filter(({ disabled }) => !disabled)
-				.map(({ _id, value, packageValue, editor, packageEditor }) => ({
-					_id,
-					value: packageValue,
-					editor: packageEditor,
-					changed: JSON.stringify(value) !== JSON.stringify(packageValue) || JSON.stringify(editor) !== JSON.stringify(packageEditor),
-				})),
+				.map((setting) => {
+					if (isSettingColor(setting)) {
+						return {
+							_id: setting._id,
+							value: setting.packageValue,
+							editor: setting.packageEditor,
+							changed:
+								JSON.stringify(setting.value) !== JSON.stringify(setting.packageValue) ||
+								JSON.stringify(setting.editor) !== JSON.stringify(setting.packageEditor),
+						};
+					}
+					return {
+						_id: setting._id,
+						value: setting.packageValue,
+						changed: JSON.stringify(setting.value) !== JSON.stringify(setting.packageValue),
+					};
+				}),
 		);
 	});
 
 	const t = useTranslation();
 
-	const handleResetSectionClick = () => {
+	const handleResetSectionClick = (): void => {
 		reset();
 	};
 
 	return (
-		<Accordion.Item data-qa-section={sectionName} noncollapsible={solo || !sectionName} title={sectionName && t(sectionName)}>
-			{props.help && (
+		<Accordion.Item
+			data-qa-section={sectionName}
+			noncollapsible={solo || !sectionName}
+			title={sectionName && t(sectionName as TranslationKey)}
+		>
+			{help && (
 				<Box is='p' color='hint' fontScale='p2'>
-					{props.help}
+					{help}
 				</Box>
 			)}
 
@@ -60,7 +86,7 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, ..
 					<Setting key={setting._id} settingId={setting._id} sectionChanged={changed} />
 				))}
 
-				{props.children}
+				{children}
 			</FieldGroup>
 			{hasReset && canReset && (
 				<Button
diff --git a/apps/meteor/client/views/admin/settings/Setting.js b/apps/meteor/client/views/admin/settings/Setting.tsx
similarity index 52%
rename from apps/meteor/client/views/admin/settings/Setting.js
rename to apps/meteor/client/views/admin/settings/Setting.tsx
index 90aed6711025f..89a9a1f52ab61 100644
--- a/apps/meteor/client/views/admin/settings/Setting.js
+++ b/apps/meteor/client/views/admin/settings/Setting.tsx
@@ -1,20 +1,31 @@
+import { ISettingColor, isSettingColor, SettingEditor, SettingValue } from '@rocket.chat/core-typings';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useSettingStructure, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import React, { useEffect, useMemo, useState, useCallback, ReactElement } from 'react';
 
 import MarkdownText from '../../../components/MarkdownText';
 import { useEditableSetting, useEditableSettingsDispatch } from '../EditableSettingsContext';
 import MemoizedSetting from './MemoizedSetting';
 import SettingSkeleton from './SettingSkeleton';
 
-function Setting({ className, settingId, sectionChanged }) {
-	const setting = useEditableSetting(settingId);
+type SettingProps = {
+	className?: string;
+	settingId: string;
+	sectionChanged?: boolean;
+};
 
+function Setting({ className = undefined, settingId, sectionChanged }: SettingProps): ReactElement {
+	const setting = useEditableSetting(settingId);
 	const persistedSetting = useSettingStructure(settingId);
+
+	if (!setting || !persistedSetting) {
+		throw new Error(`Setting ${settingId} not found`);
+	}
+
 	const dispatch = useEditableSettingsDispatch();
 
 	const update = useDebouncedCallback(
-		({ value, editor }) => {
+		({ value, editor }: { value?: SettingValue; editor?: SettingEditor }) => {
 			if (!persistedSetting) {
 				return;
 			}
@@ -26,7 +37,7 @@ function Setting({ className, settingId, sectionChanged }) {
 					...(editor !== undefined && { editor }),
 					changed:
 						JSON.stringify(persistedSetting.value) !== JSON.stringify(value) ||
-						JSON.stringify(persistedSetting.editor) !== JSON.stringify(editor),
+						(isSettingColor(persistedSetting) && JSON.stringify(persistedSetting.editor) !== JSON.stringify(editor)),
 				},
 			]);
 		},
@@ -37,15 +48,16 @@ function Setting({ className, settingId, sectionChanged }) {
 	const t = useTranslation();
 
 	const [value, setValue] = useState(setting.value);
-	const [editor, setEditor] = useState(setting.editor);
+	const [editor, setEditor] = useState(isSettingColor(setting) ? setting.editor : undefined);
 
 	useEffect(() => {
 		setValue(setting.value);
 	}, [setting.value]);
 
 	useEffect(() => {
-		setEditor(setting.editor);
-	}, [setting.editor]);
+		setEditor(isSettingColor(setting) ? setting.editor : undefined);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [(setting as ISettingColor).editor]);
 
 	const onChangeValue = useCallback(
 		(value) => {
@@ -65,34 +77,35 @@ function Setting({ className, settingId, sectionChanged }) {
 
 	const onResetButtonClick = useCallback(() => {
 		setValue(setting.value);
-		setEditor(setting.editor);
+		setEditor(isSettingColor(setting) ? setting.editor : undefined);
 		update({
 			value: persistedSetting.packageValue,
-			editor: persistedSetting.packageEditor,
+			...(isSettingColor(persistedSetting) && { editor: persistedSetting.packageEditor }),
 		});
-	}, [setting.value, setting.editor, update, persistedSetting]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [setting.value, (setting as ISettingColor).editor, update, persistedSetting]);
 
-	const { _id, disabled, disableReset, readonly, type, packageEditor, packageValue, i18nLabel, i18nDescription, alert, invisible } =
-		setting;
+	const { _id, disabled, readonly, type, packageValue, i18nLabel, i18nDescription, alert, invisible } = setting;
 
-	const label = (i18nLabel && t(i18nLabel)) || _id || t(_id);
+	const label = (t.has(i18nLabel) && t(i18nLabel)) || (t.has(_id) && t(_id));
 	const hint = useMemo(
-		() => t.has(i18nDescription) && <MarkdownText preserveHtml={true} content={t(i18nDescription)} />,
+		() => (t.has(i18nDescription) ? <MarkdownText preserveHtml content={t(i18nDescription)} /> : undefined),
 		[i18nDescription, t],
 	);
-	const callout = useMemo(() => alert && <span dangerouslySetInnerHTML={{ __html: t(alert) }} />, [alert, t]);
+	const callout = useMemo(() => (alert && t.has(alert) ? <span dangerouslySetInnerHTML={{ __html: t(alert) }} /> : undefined), [alert, t]);
 	const hasResetButton =
-		!disableReset &&
 		!readonly &&
 		type !== 'asset' &&
-		(JSON.stringify(packageEditor) !== JSON.stringify(editor) || JSON.stringify(value) !== JSON.stringify(packageValue)) &&
+		((isSettingColor(setting) && JSON.stringify(setting.packageEditor) !== JSON.stringify(editor)) ||
+			JSON.stringify(value) !== JSON.stringify(packageValue)) &&
 		!disabled;
 
+	// @todo: type check props based on setting type
+
 	return (
 		<MemoizedSetting
 			className={className}
-			type={type}
-			label={label}
+			label={label || undefined}
 			hint={hint}
 			callout={callout}
 			sectionChanged={sectionChanged}
diff --git a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx
index 6c6a44c832eba..203f88356bf74 100644
--- a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx
@@ -6,8 +6,8 @@ import ResetSettingButton from '../ResetSettingButton';
 type BooleanSettingInputProps = {
 	_id: string;
 	label: string;
-	disabled: boolean;
-	readonly: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
 	value: boolean;
 	hasResetButton: boolean;
 	onChangeValue: (value: boolean) => void;
diff --git a/packages/ui-contexts/src/TranslationContext.ts b/packages/ui-contexts/src/TranslationContext.ts
index 7ae94bca3d0ca..4bb4701028088 100644
--- a/packages/ui-contexts/src/TranslationContext.ts
+++ b/packages/ui-contexts/src/TranslationContext.ts
@@ -18,7 +18,7 @@ export type TranslationContextValue = {
 	loadLanguage: (language: TranslationLanguage['key']) => Promise<void>;
 	translate: {
 		(key: TranslationKey, ...replaces: unknown[]): string;
-		has: (key: TranslationKey) => boolean;
+		has: (key: string | undefined) => key is TranslationKey;
 	};
 };
 
@@ -33,6 +33,6 @@ export const TranslationContext = createContext<TranslationContextValue>({
 	language: '',
 	loadLanguage: async () => undefined,
 	translate: Object.assign((key: string) => key, {
-		has: () => true,
+		has: (key: string | undefined): key is TranslationKey => Boolean(key),
 	}),
 });

From ffd64572464786c7b4a34c840c99dc80fd23d365 Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Sat, 11 Jun 2022 04:35:59 +0530
Subject: [PATCH 04/36] Chore: Notification Preferences to TS (#25827)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

- Notifications Preferences to TS.
- Fix broken save action.

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 ...erences.js => NotificationPreferences.tsx} | 19 ++++++-
 ...js => NotificationPreferencesWithData.tsx} | 50 ++++++++++++-------
 ...onByDevice.js => NotificationByDevice.tsx} | 10 +++-
 ...cationToogle.js => NotificationToogle.tsx} | 13 +++--
 .../{Preferences.js => Preferences.tsx}       | 13 ++++-
 packages/core-typings/src/ISubscription.ts    | 16 +++---
 packages/rest-typings/src/v1/rooms.ts         | 17 ++++++-
 .../ui-contexts/src/CustomSoundContext.ts     |  3 ++
 8 files changed, 107 insertions(+), 34 deletions(-)
 rename apps/meteor/client/views/room/contextualBar/NotificationPreferences/{NotificationPreferences.js => NotificationPreferences.tsx} (86%)
 rename apps/meteor/client/views/room/contextualBar/NotificationPreferences/{NotificationPreferencesWithData.js => NotificationPreferencesWithData.tsx} (60%)
 rename apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/{NotificationByDevice.js => NotificationByDevice.tsx} (53%)
 rename apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/{NotificationToogle.js => NotificationToogle.tsx} (65%)
 rename apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/{Preferences.js => Preferences.tsx} (52%)

diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx
similarity index 86%
rename from apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
rename to apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx
index 6b30b8ee0b729..c18510e52e3d7 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.tsx
@@ -1,12 +1,27 @@
 import { Button, ButtonGroup, FieldGroup, Icon } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import VerticalBar from '../../../../components/VerticalBar';
+import { NotificationFormValues } from './NotificationPreferencesWithData';
 import NotificationByDevice from './components/NotificationByDevice';
 import NotificationToogle from './components/NotificationToogle';
 import { Preferences } from './components/Preferences';
 
+type NotificationPreferencesProps = {
+	handleClose: () => void;
+	formValues: NotificationFormValues;
+	formHandlers: Record<string, (e: unknown) => void>;
+	formHasUnsavedChanges: boolean;
+	handlePlaySound: () => void;
+	handleOptions: {
+		alerts: [string, string][];
+		audio: [string, string][];
+		sound: [string, string][];
+	};
+	handleSaveButton: () => void;
+};
+
 const NotificationPreferences = ({
 	handleClose,
 	formValues,
@@ -15,7 +30,7 @@ const NotificationPreferences = ({
 	handlePlaySound,
 	handleOptions,
 	handleSaveButton,
-}) => {
+}: NotificationPreferencesProps): ReactElement => {
 	const t = useTranslation();
 
 	return (
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx
similarity index 60%
rename from apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.js
rename to apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx
index aa027578eb503..c3e402a31b1c1 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesWithData.tsx
@@ -1,20 +1,31 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useCustomSound, useUserSubscription, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo } from 'react';
+import React, { memo, ReactElement } from 'react';
 
 import { useEndpointActionExperimental } from '../../../../hooks/useEndpointActionExperimental';
 import { useForm } from '../../../../hooks/useForm';
 import { useTabBarClose } from '../../providers/ToolboxProvider';
 import NotificationPreferences from './NotificationPreferences';
 
-const NotificationPreferencesWithData = ({ rid }) => {
+export type NotificationFormValues = {
+	turnOn: boolean;
+	muteGroupMentions: boolean;
+	showCounter: boolean;
+	showMentions: boolean;
+	desktopAlert: string;
+	desktopSound: string;
+	mobileAlert: string;
+	emailAlert: string;
+};
+
+const NotificationPreferencesWithData = ({ rid }: { rid: string }): ReactElement => {
 	const t = useTranslation();
 
 	const subscription = useUserSubscription(rid);
 
 	const customSound = useCustomSound();
 	const handleClose = useTabBarClose();
-	const saveSettings = useEndpointActionExperimental('POST', 'rooms.saveNotification', t('Room_updated_successfully'));
+	const saveSettings = useEndpointActionExperimental('POST', '/v1/rooms.saveNotification', t('Room_updated_successfully'));
 
 	const { values, handlers, hasUnsavedChanges, commit } = useForm({
 		turnOn: !subscription?.disableNotifications,
@@ -27,34 +38,37 @@ const NotificationPreferencesWithData = ({ rid }) => {
 		emailAlert: (subscription?.emailPrefOrigin === 'subscription' && subscription.emailNotifications) || 'default',
 	});
 
-	const defaultOption = [
+	const { turnOn, muteGroupMentions, showCounter, showMentions, desktopAlert, desktopSound, mobileAlert, emailAlert } =
+		values as NotificationFormValues;
+
+	const defaultOption: [string, string][] = [
 		['default', t('Default')],
 		['all', t('All_messages')],
 		['mentions', t('Mentions')],
 		['nothing', t('Nothing')],
 	];
 
-	const customSoundAsset = Object.entries(customSound.list.get()).map((value) => [value[0], value[1].name]);
+	const customSoundAsset = customSound?.getList()?.map((value) => [value._id, value.name]) || [];
 
 	const handleOptions = {
 		alerts: defaultOption,
 		audio: defaultOption,
-		sound: [['none None', t('None')], ['default', t('Default')], ...customSoundAsset],
+		sound: [['none None', t('None')], ['default', t('Default')], ...customSoundAsset] as [string, string][],
 	};
 
-	const handlePlaySound = () => customSound.play(values.desktopSound);
+	const handlePlaySound = (): void => customSound.play(desktopSound);
 
 	const handleSaveButton = useMutableCallback(() => {
-		const notifications = {};
-
-		notifications.disableNotifications = values.turnOn ? '0' : '1';
-		notifications.muteGroupMentions = values.muteGroupMentions ? '1' : '0';
-		notifications.hideUnreadStatus = values.showCounter ? '0' : '1';
-		notifications.hideMentionStatus = values.showMentions ? '0' : '1';
-		notifications.desktopNotifications = values.desktopAlert;
-		notifications.audioNotificationValue = values.desktopSound;
-		notifications.mobilePushNotifications = values.mobileAlert;
-		notifications.emailNotifications = values.emailAlert;
+		const notifications = {
+			disableNotifications: turnOn ? '0' : '1',
+			muteGroupMentions: muteGroupMentions ? '1' : '0',
+			hideUnreadStatus: showCounter ? '0' : '1',
+			hideMentionStatus: showMentions ? '0' : '1',
+			desktopNotifications: desktopAlert,
+			audioNotificationValue: desktopSound,
+			mobilePushNotifications: mobileAlert,
+			emailNotifications: emailAlert,
+		};
 
 		saveSettings({
 			roomId: rid,
@@ -67,7 +81,7 @@ const NotificationPreferencesWithData = ({ rid }) => {
 	return (
 		<NotificationPreferences
 			handleClose={handleClose}
-			formValues={values}
+			formValues={values as NotificationFormValues}
 			formHandlers={handlers}
 			formHasUnsavedChanges={hasUnsavedChanges}
 			handlePlaySound={handlePlaySound}
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
similarity index 53%
rename from apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.js
rename to apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
index 599853a0fc3e9..eb3ddf309a026 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
@@ -1,7 +1,13 @@
 import { Box, Accordion, Icon, FieldGroup } from '@rocket.chat/fuselage';
-import React, { memo } from 'react';
+import React, { ComponentProps, memo, ReactElement, ReactNode } from 'react';
 
-export const NotificationByDevice = ({ device, icon, children }) => (
+type NotificationByDeviceProps = {
+	device: string;
+	icon: ComponentProps<typeof Icon>['name'];
+	children: ReactNode;
+};
+
+export const NotificationByDevice = ({ device, icon, children }: NotificationByDeviceProps): ReactElement => (
 	<Accordion.Item
 		title={
 			<Box display='flex' alignItems='center'>
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.tsx
similarity index 65%
rename from apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.js
rename to apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.tsx
index b97afb73fc651..cda4ca0998664 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToogle.tsx
@@ -1,8 +1,15 @@
 import { Box, Field, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import React, { memo } from 'react';
+import React, { memo, ReactElement } from 'react';
 
-const NotificationToogle = ({ label, description, onChange, defaultChecked }) => {
+type NotificationToogleProps = {
+	label: string;
+	description?: string;
+	onChange: (e: unknown) => void;
+	defaultChecked: boolean;
+};
+
+const NotificationToogle = ({ label, description, onChange, defaultChecked }: NotificationToogleProps): ReactElement => {
 	const id = useUniqueId();
 
 	return (
@@ -10,7 +17,7 @@ const NotificationToogle = ({ label, description, onChange, defaultChecked }) =>
 			<Box display='flex' justifyContent='space-between' alignItems='start'>
 				<Box display='flex' flexDirection='column'>
 					<Field.Label htmlFor={id}>{label}</Field.Label>
-					<Field.Description>{description}</Field.Description>
+					{description && <Field.Description>{description}</Field.Description>}
 				</Box>
 				<ToggleSwitch id={id} onChange={onChange} defaultChecked={defaultChecked} />
 			</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.js b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.tsx
similarity index 52%
rename from apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.js
rename to apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.tsx
index e2afd495c5cb0..f1f892bcd4efd 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.js
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/Preferences.tsx
@@ -1,7 +1,16 @@
 import { Field, Select } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-export const Preferences = ({ name, options, onChange, optionDefault, children, ...props }) => (
+type PreferencesProps = {
+	id: string;
+	name: string;
+	options: [string, string][];
+	onChange: (e: unknown) => void;
+	optionDefault: string;
+	children?: ReactElement;
+};
+
+export const Preferences = ({ name, options, onChange, optionDefault, children, ...props }: PreferencesProps): ReactElement => (
 	<Field {...props}>
 		<Field.Label>{name}</Field.Label>
 		<Field.Row>
diff --git a/packages/core-typings/src/ISubscription.ts b/packages/core-typings/src/ISubscription.ts
index e0f07d277ebaa..3dcdccd2fa95c 100644
--- a/packages/core-typings/src/ISubscription.ts
+++ b/packages/core-typings/src/ISubscription.ts
@@ -46,19 +46,23 @@ export interface ISubscription extends IRocketChatRecord {
 
 	code?: unknown;
 	archived?: unknown;
-	audioNotificationValue?: unknown;
-	desktopNotifications?: unknown;
-	mobilePushNotifications?: unknown;
-	emailNotifications?: unknown;
+	audioNotificationValue?: string;
+	desktopNotifications?: 'all' | 'mentions' | 'nothing';
+	mobilePushNotifications?: 'all' | 'mentions' | 'nothing';
+	emailNotifications?: 'all' | 'mentions' | 'nothing';
 	blocked?: unknown;
 	blocker?: unknown;
 	autoTranslate?: unknown;
 	autoTranslateLanguage?: string;
-	disableNotifications?: unknown;
-	muteGroupMentions?: unknown;
+	disableNotifications?: boolean;
+	muteGroupMentions?: boolean;
 	ignored?: unknown;
 
 	department?: unknown;
+
+	desktopPrefOrigin?: 'subscription' | 'user';
+	mobilePrefOrigin?: 'subscription' | 'user';
+	emailPrefOrigin?: 'subscription' | 'user';
 }
 
 export interface IOmnichannelSubscription extends ISubscription {
diff --git a/packages/rest-typings/src/v1/rooms.ts b/packages/rest-typings/src/v1/rooms.ts
index 8cf6f32f49d47..5a6c95d672884 100644
--- a/packages/rest-typings/src/v1/rooms.ts
+++ b/packages/rest-typings/src/v1/rooms.ts
@@ -456,7 +456,6 @@ export type RoomsEndpoints = {
 			success: boolean;
 		};
 	};
-
 	'/v1/rooms.upload/:rid': {
 		POST: (params: {
 			file: File;
@@ -469,4 +468,20 @@ export type RoomsEndpoints = {
 			tmid?: string;
 		}) => { message: IMessage };
 	};
+	'/v1/rooms.saveNotification': {
+		POST: (params: {
+			roomId: string;
+			notifications: {
+				disableNotifications: string;
+				muteGroupMentions: string;
+				hideUnreadStatus: string;
+				desktopNotifications: string;
+				audioNotificationValue: string;
+				mobilePushNotifications: string;
+				emailNotifications: string;
+			};
+		}) => {
+			success: boolean;
+		};
+	};
 };
diff --git a/packages/ui-contexts/src/CustomSoundContext.ts b/packages/ui-contexts/src/CustomSoundContext.ts
index 46e0aff2eaa06..f2cb49cc5e065 100644
--- a/packages/ui-contexts/src/CustomSoundContext.ts
+++ b/packages/ui-contexts/src/CustomSoundContext.ts
@@ -1,9 +1,12 @@
+import type { ICustomSound } from '@rocket.chat/core-typings';
 import { createContext } from 'react';
 
 export type CustomSoundContextValue = {
 	play: (sound: string, options?: { volume?: number; loop?: boolean }) => void;
+	getList: () => ICustomSound[] | undefined;
 };
 
 export const CustomSoundContext = createContext<CustomSoundContextValue>({
 	play: () => undefined,
+	getList: () => undefined,
 });

From 0d8a2aa2a6467acef6b7af76ffd07850fdda2de1 Mon Sep 17 00:00:00 2001
From: Weslley Campos <30299972+weslley543@users.noreply.github.com>
Date: Fri, 10 Jun 2022 21:58:58 -0300
Subject: [PATCH 05/36] Chore: Add tests for agents screens (#25637)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
Add some tests for omnichannel agents screen and add some data-qa in components f
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../VerticalBar/VerticalBarClose.tsx          |   2 +-
 .../views/omnichannel/agents/AgentEdit.tsx    |  33 ++++--
 .../views/omnichannel/agents/AgentInfo.tsx    |   6 +-
 .../omnichannel/agents/AgentInfoAction.tsx    |   2 +-
 .../views/omnichannel/agents/AgentsPage.tsx   |   2 +-
 apps/meteor/playwright.config.ts              |   2 +
 apps/meteor/tests/e2e/13-permissions.spec.ts  |  11 +-
 .../tests/e2e/omnichannel-agents.spec.ts      | 107 +++++++++++++++++
 .../e2e/utils/mocks/userAndPasswordMock.ts    |  16 ++-
 .../tests/e2e/utils/pageobjects/Agents.ts     | 110 ++++++++++++++++++
 .../tests/e2e/utils/pageobjects/BasePage.ts   |  18 ++-
 .../tests/e2e/utils/pageobjects/Global.ts     |   4 -
 .../tests/e2e/utils/pageobjects/SideNav.ts    |   4 +
 13 files changed, 288 insertions(+), 29 deletions(-)
 create mode 100644 apps/meteor/tests/e2e/omnichannel-agents.spec.ts
 create mode 100644 apps/meteor/tests/e2e/utils/pageobjects/Agents.ts

diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarClose.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarClose.tsx
index e6d908d8150e3..13b9215b2a4ff 100644
--- a/apps/meteor/client/components/VerticalBar/VerticalBarClose.tsx
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarClose.tsx
@@ -7,7 +7,7 @@ type VerticalBarCloseProps = Partial<ComponentProps<typeof VerticalBarAction>>;
 
 const VerticalBarClose = (props: VerticalBarCloseProps): ReactElement => {
 	const t = useTranslation();
-	return <VerticalBarAction {...props} title={t('Close')} name='cross' />;
+	return <VerticalBarAction data-qa='VerticalBarActionClose' {...props} title={t('Close')} name='cross' />;
 };
 
 export default memo(VerticalBarClose);
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
index b05e1eb504edb..b9ed52e54b9b0 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
@@ -110,30 +110,31 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 	return (
 		<VerticalBar.ScrollableContent is='form' {...props}>
 			<Box alignSelf='center'>
-				<UserInfo.Avatar margin='auto' size={'x332'} title={username} username={username} />
+				<UserInfo.Avatar data-qa='AgentEdit-Avatar' margin='auto' size={'x332'} title={username} username={username} />
 			</Box>
 			<Field>
 				<Field.Label>{t('Name')}</Field.Label>
 				<Field.Row>
-					<TextInput flexGrow={1} value={name} disabled />
+					<TextInput data-qa='AgentEditTextInput-Name' flexGrow={1} value={name} disabled />
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Label>{t('Username')}</Field.Label>
 				<Field.Row>
-					<TextInput flexGrow={1} value={username} disabled addon={<Icon name='at' size='x20' />} />
+					<TextInput data-qa='AgentEditTextInput-Username' flexGrow={1} value={username} disabled addon={<Icon name='at' size='x20' />} />
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Label>{t('Email')}</Field.Label>
 				<Field.Row>
-					<TextInput flexGrow={1} value={email} disabled addon={<Icon name='mail' size='x20' />} />
+					<TextInput data-qa='AgentEditTextInput-Email' flexGrow={1} value={email} disabled addon={<Icon name='mail' size='x20' />} />
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Label>{t('Departments')}</Field.Label>
 				<Field.Row>
 					<MultiSelect
+						data-qa='AgentEditTextInput-Departaments'
 						options={options}
 						value={departments}
 						placeholder={t('Select_an_option')}
@@ -146,6 +147,7 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 				<Field.Label>{t('Status')}</Field.Label>
 				<Field.Row>
 					<Select
+						data-qa='AgentEditTextInput-Status'
 						options={[
 							['available', t('Available')],
 							['not-available', t('Not_Available')],
@@ -164,7 +166,12 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 				<Field>
 					<Field.Label>{t('VoIP_Extension')}</Field.Label>
 					<Field.Row>
-						<TextInput flexGrow={1} value={voipExtension as string} onChange={handleVoipExtension} />
+						<TextInput
+							data-qa='AgentEditTextInput-VoIP_Extension'
+							flexGrow={1}
+							value={voipExtension as string}
+							onChange={handleVoipExtension}
+						/>
 					</Field.Row>
 				</Field>
 			)}
@@ -172,10 +179,22 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 			<Field.Row>
 				<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
 					<Margins inlineEnd='x4'>
-						<Button flexGrow={1} type='reset' disabled={!hasUnsavedChanges && !maxChatUnsaved} onClick={handleReset}>
+						<Button
+							data-qa='AgentEditButtonReset'
+							flexGrow={1}
+							type='reset'
+							disabled={!hasUnsavedChanges && !maxChatUnsaved}
+							onClick={handleReset}
+						>
 							{t('Reset')}
 						</Button>
-						<Button mie='none' flexGrow={1} disabled={!hasUnsavedChanges && !maxChatUnsaved} onClick={handleSave}>
+						<Button
+							data-qa='AgentEditButtonSave'
+							mie='none'
+							flexGrow={1}
+							disabled={!hasUnsavedChanges && !maxChatUnsaved}
+							onClick={handleSave}
+						>
 							{t('Save')}
 						</Button>
 					</Margins>
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
index f53192c345cfd..d76771f8b5b5d 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
@@ -37,7 +37,7 @@ export const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children
 	return (
 		<VerticalBar.ScrollableContent p='x24' {...props}>
 			<Box alignSelf='center'>
-				<UserInfo.Avatar size='x332' username={username} />
+				<UserInfo.Avatar data-qa='AgentUserInfoAvatar' size={'x332'} username={username} />
 			</Box>
 
 			<ButtonGroup mi='neg-x4' flexShrink={0} flexWrap='nowrap' withTruncatedText justifyContent='center'>
@@ -46,12 +46,12 @@ export const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children
 
 			<Margins block='x4'>
 				<Box mb='x2'>
-					<UserInfo.Username username={username} status={<UserStatus status={userStatus} />} />
+					<UserInfo.Username data-qa='AgentInfoUserInfoUserName' username={username} status={<UserStatus status={userStatus} />} />
 				</Box>
 
 				{statusLivechat && (
 					<>
-						<UserInfo.Label>{t('Livechat_status')}</UserInfo.Label>
+						<UserInfo.Label data-qa='AgentInfoUserInfoLabel'>{t('Livechat_status')}</UserInfo.Label>
 						<UserInfo.Info>{t(statusLivechat === 'available' ? 'Available' : 'Not_Available')}</UserInfo.Info>
 					</>
 				)}
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx b/apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx
index 99cb056f564af..cb8f94145ff92 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx
@@ -8,7 +8,7 @@ type AgentInfoActionProps = {
 } & Omit<HtmlHTMLAttributes<HTMLElement>, 'is'>;
 
 const AgentInfoAction: FC<AgentInfoActionProps> = ({ icon, label, ...props }) => (
-	<Button title={label} {...props} mi='x4'>
+	<Button data-qa={`AgentInfoAction-${label}`} title={label} {...props} mi='x4'>
 		<Icon name={icon} size='x20' mie='x4' />
 		{label}
 	</Button>
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx
index 2872143427298..ac5c35ed643c2 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx
@@ -87,7 +87,7 @@ const AgentsPage = (): ReactElement => {
 							</GenericTableHeaderCell>
 							<GenericTableHeaderCell w='x60'>{t('Remove')}</GenericTableHeaderCell>
 						</GenericTableHeader>
-						<GenericTableBody>
+						<GenericTableBody data-qa='GenericTableAgentInfoBody'>
 							{result.phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={4} />}
 							{result.phase === AsyncStatePhase.RESOLVED &&
 								result.value.users.map((user) => <AgentsPageRow key={user._id} user={user} mediaQuery={mediaQuery} reload={reload} />)}
diff --git a/apps/meteor/playwright.config.ts b/apps/meteor/playwright.config.ts
index 744accb7eb416..8401640d940e0 100644
--- a/apps/meteor/playwright.config.ts
+++ b/apps/meteor/playwright.config.ts
@@ -27,5 +27,7 @@ const config: PlaywrightTestConfig = {
 	testDir: 'tests/e2e',
 	retries: 3,
 	workers: 1,
+	timeout: 42 * 1000,
 };
+
 export default config;
diff --git a/apps/meteor/tests/e2e/13-permissions.spec.ts b/apps/meteor/tests/e2e/13-permissions.spec.ts
index 0b4edda751b70..e92e6cba316e1 100644
--- a/apps/meteor/tests/e2e/13-permissions.spec.ts
+++ b/apps/meteor/tests/e2e/13-permissions.spec.ts
@@ -28,8 +28,9 @@ test.describe('[Permissions]', () => {
 
 		await page.goto('/');
 		await loginPage.login(adminLogin);
-		await sideNav.general().click();
-		await page.goto('/admin/users');
+		await sideNav.sidebarUserMenu().click();
+		await sideNav.admin().click();
+		await sideNav.users.click();
 	});
 
 	test('expect create a user via admin view', async () => {
@@ -45,7 +46,7 @@ test.describe('[Permissions]', () => {
 
 	test('expect user be show on list', async () => {
 		await admin.usersFilter().type(userToBeCreated.email, { delay: 200 });
-		expect(await admin.userInTable(userToBeCreated.email).isVisible()).toBeTruthy();
+		await expect(admin.userInTable(userToBeCreated.email)).toBeVisible();
 	});
 
 	test.describe('disable "userToBeCreated" permissions', () => {
@@ -83,10 +84,10 @@ test.describe('[Permissions]', () => {
 		test('expect not be abble to "mention all"', async () => {
 			await mainContent.sendMessage('@all any_message');
 
-			expect(mainContent.lastMessage()).toContainText('not allowed');
+			await expect(mainContent.lastMessage()).toContainText('not allowed');
 		});
 
-		test('expect not be abble to "delete own message"', async () => {
+		test('expect not be able to "delete own message"', async () => {
 			await mainContent.doReload();
 			await mainContent.sendMessage(`any_message_${uuid()}`);
 			await mainContent.openMessageActionMenu();
diff --git a/apps/meteor/tests/e2e/omnichannel-agents.spec.ts b/apps/meteor/tests/e2e/omnichannel-agents.spec.ts
new file mode 100644
index 0000000000000..ccc689b734199
--- /dev/null
+++ b/apps/meteor/tests/e2e/omnichannel-agents.spec.ts
@@ -0,0 +1,107 @@
+import { test, expect, Page } from '@playwright/test';
+
+import { adminLogin } from './utils/mocks/userAndPasswordMock';
+import LoginPage from './utils/pageobjects/LoginPage';
+import SideNav from './utils/pageobjects/SideNav';
+import Agents from './utils/pageobjects/Agents';
+
+test.describe('[Agents]', () => {
+	let loginPage: LoginPage;
+	let page: Page;
+	let sideNav: SideNav;
+	let agents: Agents;
+	test.beforeAll(async ({ browser }) => {
+		page = await browser.newPage();
+		const rootPath = '/';
+		await page.goto(rootPath);
+		loginPage = new LoginPage(page);
+		sideNav = new SideNav(page);
+		agents = new Agents(page);
+
+		await loginPage.login(adminLogin);
+		await sideNav.sidebarUserMenu().click();
+		await sideNav.omnichannel().click();
+		await agents.agentsLink().click();
+		await agents.doAddAgent();
+	});
+
+	test('expect admin/manager is able to add an agent', async () => {
+		await expect(agents.agentAdded()).toBeVisible();
+		await expect(agents.agentAdded()).toHaveText('Rocket.Cat');
+	});
+	test('expect open new agent info on tab', async () => {
+		await agents.agentAdded().click();
+		await expect(agents.userInfoTab()).toBeVisible();
+		await expect(agents.agentInfo()).toBeVisible();
+	});
+	test('expect close agent info on tab', async () => {
+		await agents.btnClose().click();
+		await expect(agents.userInfoTab()).not.toBeVisible();
+		await expect(agents.agentInfo()).not.toBeVisible();
+		await agents.agentAdded().click();
+	});
+
+	test.describe('[Render]', () => {
+		test('expect show profile image', async () => {
+			await expect(agents.userAvatar()).toBeVisible();
+		});
+		test('expect show action buttons', async () => {
+			await expect(agents.btnClose()).toBeVisible();
+			await expect(agents.btnEdit()).toBeVisible();
+			await expect(agents.btnRemove()).toBeVisible();
+		});
+
+		test('expect show livechat status', async () => {
+			await expect(agents.agentInfoUserInfoLabel()).toBeVisible();
+		});
+	});
+	test.describe('[Edit button]', async () => {
+		test.describe('[Render]', async () => {
+			test.beforeAll(async () => {
+				await agents.btnEdit().click();
+			});
+			test('expect show fields', async () => {
+				await agents.getListOfExpectedInputs();
+			});
+		});
+
+		test.describe('[Action]', async () => {
+			test('expect change user status', async () => {
+				await agents.doChangeUserStatus('not-available');
+				await expect(agents.agentListStatus()).toHaveText('Not Available');
+			});
+			test.describe('[Modal Actions]', async () => {
+				test.beforeEach(async () => {
+					await agents.doRemoveAgent();
+				});
+				test('expect modal is not visible after cancel delete agent', async () => {
+					await agents.btnModalCancel().click();
+					await expect(agents.modal()).not.toBeVisible();
+				});
+				test('expect agent is removed from user info tab', async () => {
+					await agents.btnModalRemove().click();
+					await expect(agents.modal()).not.toBeVisible();
+					await expect(agents.agentAdded()).not.toBeVisible();
+				});
+			});
+
+			test.describe('[Remove from table]', async () => {
+				test.beforeAll(async () => {
+					await agents.doAddAgent();
+				});
+				test.beforeEach(async () => {
+					await agents.btnTableRemove().click();
+				});
+				test('expect modal is not visible after cancel delete agent', async () => {
+					await agents.btnModalCancel().click();
+					await expect(agents.modal()).not.toBeVisible();
+				});
+				test('expect agent is removed from agents table', async () => {
+					await agents.btnModalRemove().click();
+					await expect(agents.modal()).not.toBeVisible();
+					await expect(agents.agentAdded()).not.toBeVisible();
+				});
+			});
+		});
+	});
+});
diff --git a/apps/meteor/tests/e2e/utils/mocks/userAndPasswordMock.ts b/apps/meteor/tests/e2e/utils/mocks/userAndPasswordMock.ts
index 68aaadc809505..8c755a4aa5a54 100644
--- a/apps/meteor/tests/e2e/utils/mocks/userAndPasswordMock.ts
+++ b/apps/meteor/tests/e2e/utils/mocks/userAndPasswordMock.ts
@@ -28,12 +28,16 @@ export const registerUser: IRegister = {
 	name: faker.name.findName(),
 };
 
-export const createRegisterUser = (): IRegister => ({
-	email: validEmail,
-	password: 'any_password',
-	name: faker.name.findName(),
-	username: faker.internet.userName(),
-});
+export const createRegisterUser = (): IRegister => {
+	const name = faker.name.findName();
+	const [firstName] = name.split(' ');
+	return {
+		email: faker.internet.email(firstName.toLocaleLowerCase()),
+		password: 'any_password',
+		name,
+		username: faker.internet.userName(),
+	};
+};
 
 export const validUser: ILogin = {
 	email: validEmail,
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts b/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts
new file mode 100644
index 0000000000000..89733b6419a13
--- /dev/null
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts
@@ -0,0 +1,110 @@
+import { Locator, expect } from '@playwright/test';
+
+import BasePage from './BasePage';
+
+export default class Agents extends BasePage {
+	public agentsLink(): Locator {
+		return this.getPage().locator('a[href="omnichannel/agents"]');
+	}
+
+	public textAgentsTitle(): Locator {
+		return this.getPage().locator('h2 >> text="Agents"');
+	}
+
+	public inputAgentsUserName(): Locator {
+		return this.getPage().locator('input').first();
+	}
+
+	public userOption(): Locator {
+		return this.getPage().locator('.rcx-option >> text="Rocket.Cat"');
+	}
+
+	public btnAddAgents(): Locator {
+		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Add"');
+	}
+
+	public agentAdded(): Locator {
+		return this.getPage().locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:first-child');
+	}
+
+	public agentListStatus(): Locator {
+		return this.getPage().locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(4)');
+	}
+
+	public userInfoTab(): Locator {
+		return this.getPage().locator('h3 div');
+	}
+
+	public agentInfo(): Locator {
+		return this.getPage().locator('[data-qa="AgentInfoUserInfoUserName"]');
+	}
+
+	public agentInfoUserInfoLabel(): Locator {
+		return this.getPage().locator('[data-qa="AgentInfoUserInfoLabel"]');
+	}
+
+	public btnClose(): Locator {
+		return this.getPage().locator('[data-qa="VerticalBarActionClose"]');
+	}
+
+	public userAvatar(): Locator {
+		return this.getPage().locator('[data-qa="AgentUserInfoAvatar"]');
+	}
+
+	public btnEdit(): Locator {
+		return this.getPage().locator('[data-qa="AgentInfoAction-Edit"]');
+	}
+
+	public btnRemove(): Locator {
+		return this.getPage().locator('[data-qa="AgentInfoAction-Remove"]');
+	}
+
+	public availabilityOption(availability: string): Locator {
+		return this.getPage().locator(`div.rcx-options[role="listbox"] div.rcx-box ol[role="listbox"] li[value="${availability}"]`);
+	}
+
+	public btnTableRemove(): Locator {
+		return this.getPage().locator(
+			'[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(5) [title="Remove"]',
+		);
+	}
+
+	public agentStatus(): Locator {
+		return this.getPage().locator('[data-qa="AgentEditTextInput-Status"]');
+	}
+
+	public btnAgentSave(): Locator {
+		return this.getPage().locator('[data-qa="AgentEditButtonSave"]');
+	}
+
+	public getAgentInputs(id: string): Locator {
+		return this.getPage().locator(`[data-qa="AgentEditTextInput-${id}"]`);
+	}
+
+	public async doAddAgent(): Promise<void> {
+		await this.textAgentsTitle().waitFor();
+		await this.inputAgentsUserName().type('Rocket.Cat', { delay: 50 });
+
+		await this.userOption().click();
+		await this.btnAddAgents().click();
+	}
+
+	public async getListOfExpectedInputs(): Promise<void> {
+		const inputs = ['Name', 'Username', 'Email', 'Departaments', 'Status'].map((id) => this.getAgentInputs(id));
+		await Promise.all(inputs.map((input) => expect(input).toBeVisible()));
+		await this.btnClose().click();
+	}
+
+	public async doChangeUserStatus(availability: string): Promise<void> {
+		await this.agentAdded().click();
+		await this.btnEdit().click();
+		await this.agentStatus().click();
+		await this.availabilityOption(availability).click();
+		await this.btnAgentSave().click();
+	}
+
+	public async doRemoveAgent(): Promise<void> {
+		await this.agentAdded().click();
+		await this.btnRemove().click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts b/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
index 6b2f85211cf1d..79ea81fb81ac9 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { Page, Locator } from '@playwright/test';
 
 class BasePage {
 	private page: Page;
@@ -22,5 +22,21 @@ class BasePage {
 	public async keyboardPress(key: string): Promise<void> {
 		await this.getPage().keyboard.press(key);
 	}
+
+	public modal(): Locator {
+		return this.getPage().locator('#modal-root');
+	}
+
+	public btnModalCancel(): Locator {
+		return this.getPage().locator(
+			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--ghost.rcx-button',
+		);
+	}
+
+	public btnModalRemove(): Locator {
+		return this.getPage().locator(
+			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--primary-danger.rcx-button',
+		);
+	}
 }
 export default BasePage;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
index 7877c9d5815f6..189aa471b42bd 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
@@ -8,10 +8,6 @@ class Global extends BasePage {
 		return this.getPage().locator('.rc-modal-wrapper');
 	}
 
-	public modal(): Locator {
-		return this.getPage().locator('.rcx-modal');
-	}
-
 	public modalConfirm(): Locator {
 		return this.getPage().locator('.rcx-modal .rcx-button--primary-danger');
 	}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
index 5781b67f8ca2a..9b44ef109993e 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
@@ -89,6 +89,10 @@ class SideNav extends BasePage {
 		return this.getPage().locator('li.rcx-option >> text="Omnichannel"');
 	}
 
+	get users(): Locator {
+		return this.getPage().locator('.flex-nav [href="/admin/users"]');
+	}
+
 	public logout(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]');
 	}

From 5a37518e42dec114e0ed1a71b5d103b4a62e9b58 Mon Sep 17 00:00:00 2001
From: Ben Wiederhake <BenWiederhake.GitHub@gmx.de>
Date: Mon, 13 Jun 2022 15:08:39 +0200
Subject: [PATCH 06/36] [FIX] Client-generated sort parameters in channel
 directory  (#25768)

## Proposed changes (including videos or screenshots)
- In the web-client, sorting the channel directory by "Last Message" raises the error "Invalid sort parameter provided".

I don't think a screenshot is necessary, but if you'd like one anyway, here it is:

![Bildschirmfoto_2022-06-06_12-54-34](https://user-images.githubusercontent.com/2690845/172147996-e9942daf-6819-4eee-afa4-b1c6bce7a650.png)


## Issue(s)
Closes #25695

## Steps to test or reproduce

- Open the web client, i.e. navigate your browser to `https://rocketchat.$DOMAIN/home`
- Click the "Directory" button in the top left, (or just navigate directly to `https://rocketchat.$DOMAIN/directory/channels`)
- In the table header, click on "Last message" once
- In the table header, click on "Last message" again

Expected behavior: Clicking "Last message" turns on and then toggles sorting by the date of the last message, either first ascending and then descending, or the other way around.

Actual behavior: The first click sorts the messages in ascending order (good!), the second click shows a red warning box "FIXME", the table content disappears, and is replaced by throbbing grey placeholders.

### "Good" request (ascending order):

`https://rocketchat.domain.org/api/v1/directory?query=%7B%22type%22%3A%22channels%22%2C%22text%22%3A%22%22%2C%22workspace%22%3A%22local%22%7D&sort=%7B%22lastMessage%22%3A1%7D&count=25`

More easily readable GET parameters:

```
query | {"type":"channels","text":"","workspace":"local"}
sort | {"lastMessage":1}
count | 25
```

Response:
```
{"result":[{"_id":"AAAAAAAAAAAAAAAAA","name":"foobar","fname":"foobar","t":"c","usersCount":10,"ts":"2019-01-01T00:00:00.000Z","default":false,"lastMessage":{"_id":"AAAAAAAAAAAAAAAAA","rid":"AAAAAAAAAAAAAAAAA","msg":"Hello, World!","ts":"2019-01-01T00:00:00.000Z","u":{"_id":"AAAAAAAAAAAAAAAAA","username":"normaluser","name":"normaluser"},"unread":true,"_updatedAt":"2019-01-01T00:00:00.000Z","urls":[],"mentions":[],"channels":[]},"description":"Obviously, this JSON response is heavily censored."}],"count":25,"offset":0,"total":52,"success":true}
```

(Obviously, this JSON response is heavily censored, but you get the gist: It was successful.)

### "Bad" request (descending order):

`https://rocketchat.domain.org/api/v1/directory?query=%7B%22type%22%3A%22channels%22%2C%22text%22%3A%22%22%2C%22workspace%22%3A%22local%22%7D&sort=%7B%22lastMessage%22%3A0%7D&count=25`

More easily readable GET parameters:

```
query | {"type":"channels","text":"","workspace":"local"}
sort | {"lastMessage":0}
count | 25
```

Response:
```
{"success":false,"error":"Invalid sort parameter provided: \"{\"lastMessage\":0}\" [error-invalid-sort]","errorType":"error-invalid-sort","details":{"helperMethod":"parseJsonQuery"}}
```

## Further comments

Version on the server where I noticed this: `https://rocketchat.$DOMAIN/api/info` returns `{"version":"4.8","success":true}`. According to the "Releases" page, this version appeared 5 days ago, so I believe this is up to date.

### The journey to here

For some reason, the descending order uses the wrong magic number "0", and the server can't interpret that. However, this *used* to work, so I'm not very sure about this.

The error message appears in the source code of the entire organization exactly once: https://github.com/RocketChat/Rocket.Chat/blob/31ae30f30ad71d9e5a1b0cad494b3471a7dd8807/apps/meteor/app/api/server/helpers/parseJsonQuery.ts#L42
So I'll guess that this is the line of code that generated this particular message.

A few lines above we see that the server only knows 1 and -1 as magic numbers for the sorting:
https://github.com/RocketChat/Rocket.Chat/blob/31ae30f30ad71d9e5a1b0cad494b3471a7dd8807/apps/meteor/app/api/server/helpers/parseJsonQuery.ts#L35
This matches the observed bug: The browser sends 1 (which works) and 0 (which doesn't work).

Generally, it seems that the web client actually uses the strings "asc" and "desc" internally, which are hard to mix up. So I assume that it's the conversion of that is broken somehow.

Exactly this seems to be the case here:
https://github.com/RocketChat/Rocket.Chat/blob/31ae30f30ad71d9e5a1b0cad494b3471a7dd8807/apps/meteor/client/views/directory/hooks.js#L11

The code around it produces exactly the kind of query seen in the network log, and can also produce the buggy parameter `sort: 0`. This either fixes bug #25695, or a different bug of the same kind.

I am not sure how to add tests for this, can someone do this for me or show me where to start? I'm actually just an end-user and "accidentally" found the fix for the bug while writing the bug report ^^'

EDIT: Rebased for convenience, and to re-check CI.
---
 apps/meteor/client/views/directory/hooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/directory/hooks.js b/apps/meteor/client/views/directory/hooks.js
index 2142779dc892f..5a1d151ef22c9 100644
--- a/apps/meteor/client/views/directory/hooks.js
+++ b/apps/meteor/client/views/directory/hooks.js
@@ -8,7 +8,7 @@ export function useQuery({ text, itemsPerPage, current }, [column, direction], t
 				text,
 				workspace,
 			}),
-			sort: JSON.stringify({ [column]: direction === 'asc' ? 1 : 0 }),
+			sort: JSON.stringify({ [column]: direction === 'asc' ? 1 : -1 }),
 			...(itemsPerPage && { count: itemsPerPage }),
 			...(current && { offset: current }),
 		}),

From 322b6150829d6a9678bcee136c03ac2dfc9b5014 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 13 Jun 2022 11:50:13 -0300
Subject: [PATCH 07/36] Chore: Typescript Sidebar RoomList (#25835)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../client/components/RoomIcon/RoomIcon.tsx   |  13 +-
 .../RoomList/{RoomList.js => RoomList.tsx}    |  17 +--
 .../sidebar/RoomList/{Row.js => Row.tsx}      |  22 +++-
 .../RoomList/ScrollerWithCustomProps.js       |  16 ---
 .../RoomList/ScrollerWithCustomProps.tsx      |  14 +++
 ...ata.js => SideBarItemTemplateWithData.tsx} | 114 +++++++++++++-----
 ...rMessage.js => normalizeSidebarMessage.ts} |   8 +-
 .../sidebar/hooks/useAvatarTemplate.tsx       |   6 +-
 .../client/sidebar/hooks/useRoomList.ts       |   4 +-
 ...yViewMode.js => useTemplateByViewMode.tsx} |   4 +-
 packages/core-typings/src/IRoom.ts            |   1 +
 11 files changed, 145 insertions(+), 74 deletions(-)
 rename apps/meteor/client/sidebar/RoomList/{RoomList.js => RoomList.tsx} (81%)
 rename apps/meteor/client/sidebar/RoomList/{Row.js => Row.tsx} (51%)
 delete mode 100644 apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.js
 create mode 100644 apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.tsx
 rename apps/meteor/client/sidebar/RoomList/{SideBarItemTemplateWithData.js => SideBarItemTemplateWithData.tsx} (53%)
 rename apps/meteor/client/sidebar/RoomList/{normalizeSidebarMessage.js => normalizeSidebarMessage.ts} (61%)
 rename apps/meteor/client/sidebar/hooks/{useTemplateByViewMode.js => useTemplateByViewMode.tsx} (80%)

diff --git a/apps/meteor/client/components/RoomIcon/RoomIcon.tsx b/apps/meteor/client/components/RoomIcon/RoomIcon.tsx
index 61d6e7472ed67..22bcd3cde2d34 100644
--- a/apps/meteor/client/components/RoomIcon/RoomIcon.tsx
+++ b/apps/meteor/client/components/RoomIcon/RoomIcon.tsx
@@ -1,16 +1,19 @@
 import { IRoom, isDirectMessageRoom, isOmnichannelRoom } from '@rocket.chat/core-typings';
 import { Icon } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
+import React, { ComponentProps, ReactElement } from 'react';
 
 import { ReactiveUserStatus } from '../UserStatus';
 import { OmnichannelRoomIcon } from './OmnichannelRoomIcon';
 
-export const RoomIcon: FC<{
+export const RoomIcon = ({
+	room,
+	size = 'x16',
+	placement,
+}: {
 	room: IRoom;
-	size: ComponentProps<typeof Icon>['size'];
-	highlighted?: boolean;
+	size?: ComponentProps<typeof Icon>['size'];
 	placement: 'sidebar' | 'default';
-}> = ({ room, size = 'x16', placement }) => {
+}): ReactElement | null => {
 	if (room.prid) {
 		return <Icon name='baloons' size={size} />;
 	}
diff --git a/apps/meteor/client/sidebar/RoomList/RoomList.js b/apps/meteor/client/sidebar/RoomList/RoomList.tsx
similarity index 81%
rename from apps/meteor/client/sidebar/RoomList/RoomList.js
rename to apps/meteor/client/sidebar/RoomList/RoomList.tsx
index 136bff2ac01bb..c9b1c47a2c0ea 100644
--- a/apps/meteor/client/sidebar/RoomList/RoomList.js
+++ b/apps/meteor/client/sidebar/RoomList/RoomList.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import { useSession, useUserPreference, useUserId, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useMemo, ReactElement } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
@@ -13,14 +13,14 @@ import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import Row from './Row';
 import ScrollerWithCustomProps from './ScrollerWithCustomProps';
 
-const RoomList = () => {
+const RoomList = (): ReactElement => {
 	useSidebarPaletteColor();
-	const listRef = useRef();
+
 	const { ref } = useResizeObserver({ debounceDelay: 100 });
 
-	const openedRoom = useSession('openedRoom');
+	const openedRoom = (useSession('openedRoom') as string) || '';
 
-	const sidebarViewMode = useUserPreference('sidebarViewMode');
+	const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended';
 	const sideBarItemTemplate = useTemplateByViewMode();
 	const avatarTemplate = useAvatarTemplate();
 	const extended = sidebarViewMode === 'extended';
@@ -44,18 +44,13 @@ const RoomList = () => {
 
 	usePreventDefault(ref);
 	useShortcutOpenMenu(ref);
-
-	useEffect(() => {
-		listRef.current?.resetAfterIndex(0);
-	}, [sidebarViewMode]);
-
 	return (
 		<Box h='full' w='full' ref={ref}>
 			<Virtuoso
 				totalCount={roomsList.length}
 				data={roomsList}
 				components={{ Scroller: ScrollerWithCustomProps }}
-				itemContent={(index, data) => <Row data={itemData} item={data} />}
+				itemContent={(_, data): ReactElement => <Row data={itemData} item={data} />}
 			/>
 		</Box>
 	);
diff --git a/apps/meteor/client/sidebar/RoomList/Row.js b/apps/meteor/client/sidebar/RoomList/Row.tsx
similarity index 51%
rename from apps/meteor/client/sidebar/RoomList/Row.js
rename to apps/meteor/client/sidebar/RoomList/Row.tsx
index 540237ce2a8ca..5cbe5a707e2af 100644
--- a/apps/meteor/client/sidebar/RoomList/Row.js
+++ b/apps/meteor/client/sidebar/RoomList/Row.tsx
@@ -1,14 +1,30 @@
+import { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { SidebarSection } from '@rocket.chat/fuselage';
-import React, { memo } from 'react';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ComponentType, memo, ReactElement } from 'react';
 
+import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
+import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import OmnichannelSection from '../sections/OmnichannelSection';
 import SideBarItemTemplateWithData from './SideBarItemTemplateWithData';
 
-const sections = {
+const sections: {
+	[key: string]: ComponentType<any>;
+} = {
 	Omnichannel: OmnichannelSection,
 };
 
-const Row = ({ data, item }) => {
+type RoomListRowProps = {
+	extended: boolean;
+	t: ReturnType<typeof useTranslation>;
+	SideBarItemTemplate: ReturnType<typeof useTemplateByViewMode>;
+	AvatarTemplate: ReturnType<typeof useAvatarTemplate>;
+	openedRoom: string;
+	sidebarViewMode: 'extended' | 'condensed' | 'medium';
+	isAnonymous: boolean;
+};
+
+const Row = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRoom }): ReactElement => {
 	const { extended, t, SideBarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode } = data;
 
 	if (typeof item === 'string') {
diff --git a/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.js b/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.js
deleted file mode 100644
index f71e4397b6a2c..0000000000000
--- a/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import ScrollableContentWrapper from '../../components/ScrollableContentWrapper';
-
-const ScrollerWithCustomProps = forwardRef(function ScrollerWithCustomProps(props, ref) {
-	return (
-		<ScrollableContentWrapper
-			{...props}
-			ref={ref}
-			renderView={({ style, ...props }) => <div {...props} style={{ ...style }} />}
-			renderTrackHorizontal={(props) => <div {...props} style={{ display: 'none' }} className='track-horizontal' />}
-		/>
-	);
-});
-
-export default ScrollerWithCustomProps;
diff --git a/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.tsx b/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.tsx
new file mode 100644
index 0000000000000..215a3ebe19c3a
--- /dev/null
+++ b/apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.tsx
@@ -0,0 +1,14 @@
+import React, { forwardRef, ReactElement } from 'react';
+
+import ScrollableContentWrapper from '../../components/ScrollableContentWrapper';
+
+export default forwardRef<HTMLElement>(function ScrollerWithCustomProps(props, ref): ReactElement {
+	return (
+		<ScrollableContentWrapper
+			{...props}
+			ref={ref}
+			renderView={({ style, ...props }): ReactElement => <div {...props} style={{ ...style }} />}
+			renderTrackHorizontal={(props): ReactElement => <div {...props} style={{ display: 'none' }} className='track-horizontal' />}
+		/>
+	);
+});
diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.js b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
similarity index 53%
rename from apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.js
rename to apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
index 2f40b37473c7f..a9cb0476d5b7d 100644
--- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.js
+++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
@@ -1,13 +1,23 @@
+/* eslint-disable react/display-name */
+import {
+	IMessage,
+	IRoom,
+	isDirectMessageRoom,
+	isMultipleDirectMessageRoom,
+	isOmnichannelRoom,
+	ISubscription,
+} from '@rocket.chat/core-typings';
 import { Badge, Sidebar } from '@rocket.chat/fuselage';
-import { useLayout } from '@rocket.chat/ui-contexts';
-import React, { memo } from 'react';
+import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { AllHTMLAttributes, ComponentType, memo, ReactElement, ReactNode } from 'react';
 
 import { RoomIcon } from '../../components/RoomIcon';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import RoomMenu from '../RoomMenu';
+import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { normalizeSidebarMessage } from './normalizeSidebarMessage';
 
-const getMessage = (room, lastMessage, t) => {
+const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: ReturnType<typeof useTranslation>): string | undefined => {
 	if (!lastMessage) {
 		return t('No_messages_yet');
 	}
@@ -17,28 +27,67 @@ const getMessage = (room, lastMessage, t) => {
 	if (lastMessage.u?.username === room.u?.username) {
 		return `${t('You')}: ${normalizeSidebarMessage(lastMessage, t)}`;
 	}
-	if (room.t === 'd' && room.uids && room.uids.length <= 2) {
+	if (isDirectMessageRoom(room) && !isMultipleDirectMessageRoom(room)) {
 		return normalizeSidebarMessage(lastMessage, t);
 	}
 	return `${lastMessage.u.name || lastMessage.u.username}: ${normalizeSidebarMessage(lastMessage, t)}`;
 };
 
+type RoomListRowProps = {
+	extended: boolean;
+	t: ReturnType<typeof useTranslation>;
+	SideBarItemTemplate: ComponentType<
+		{
+			icon: ReactNode;
+			title: ReactNode;
+			avatar: ReactNode;
+			// actions: unknown;
+			href: string;
+			time?: Date;
+			menu?: ReactNode;
+			menuOptions?: unknown;
+			subtitle?: ReactNode;
+			titleIcon?: string;
+			badges?: ReactNode;
+			threadUnread?: boolean;
+			unread?: boolean;
+			selected?: boolean;
+			is?: string;
+		} & AllHTMLAttributes<HTMLElement>
+	>;
+	AvatarTemplate: ReturnType<typeof useAvatarTemplate>;
+	openedRoom?: string;
+	// sidebarViewMode: 'extended';
+	isAnonymous?: boolean;
+
+	room: ISubscription & IRoom;
+	lastMessage?: IMessage;
+	id?: string;
+	/* @deprecated */
+	style?: AllHTMLAttributes<HTMLElement>['style'];
+
+	selected: boolean;
+
+	sidebarViewMode: unknown;
+};
+
 function SideBarItemTemplateWithData({
 	room,
 	id,
-	extended,
 	selected,
+	style,
+
+	extended,
 	SideBarItemTemplate,
 	AvatarTemplate,
 	t,
-	style,
 	// sidebarViewMode,
 	isAnonymous,
-}) {
+}: RoomListRowProps): ReactElement {
 	const { sidebar } = useLayout();
 
-	const href = roomCoordinator.getRouteLink(room.t, room);
-	const title = roomCoordinator.getRoomName(room.t, room);
+	const href = roomCoordinator.getRouteLink(room.t, room) || '';
+	const title = roomCoordinator.getRoomName(room.t, room) || '';
 
 	const {
 		lastMessage,
@@ -55,14 +104,15 @@ function SideBarItemTemplateWithData({
 		cl,
 	} = room;
 
-	const highlighted = !hideUnreadStatus && (alert || unread);
+	const highlighted = Boolean(!hideUnreadStatus && (alert || unread));
 	const icon = (
-		<Sidebar.Item.Icon highlighted={highlighted}>
-			<RoomIcon highlighted={highlighted} room={room} placement='sidebar' />
+		// TODO: Remove icon='at'
+		<Sidebar.Item.Icon highlighted={highlighted} icon='at'>
+			<RoomIcon room={room} placement='sidebar' />
 		</Sidebar.Item.Icon>
 	);
 
-	const isQueued = room.status === 'queued';
+	const isQueued = isOmnichannelRoom(room) && room.status === 'queued';
 
 	const threadUnread = tunread.length > 0;
 	const message = extended && getMessage(room, lastMessage, t);
@@ -74,7 +124,8 @@ function SideBarItemTemplateWithData({
 	const showBadge = !hideUnreadStatus || (!hideMentionStatus && userMentions);
 	const badges =
 		showBadge && isUnread ? (
-			<Badge style={{ flexShrink: 0 }} variant={variant}>
+			// TODO: Remove any
+			<Badge {...({ style: { flexShrink: 0 } } as any)} variant={variant}>
 				{unread + tunread?.length}
 			</Badge>
 		) : null;
@@ -84,12 +135,12 @@ function SideBarItemTemplateWithData({
 			is='a'
 			id={id}
 			data-qa='sidebar-item'
-			aria-level='2'
+			aria-level={2}
 			unread={highlighted}
 			threadUnread={threadUnread}
 			selected={selected}
 			href={href}
-			onClick={() => !selected && sidebar.toggle()}
+			onClick={(): void => !selected && sidebar.toggle()}
 			aria-label={title}
 			title={title}
 			time={lastMessage?.ts}
@@ -101,7 +152,7 @@ function SideBarItemTemplateWithData({
 			menu={
 				!isAnonymous &&
 				!isQueued &&
-				(() => (
+				((): ReactElement => (
 					<RoomMenu
 						alert={alert}
 						threadUnread={threadUnread}
@@ -111,7 +162,6 @@ function SideBarItemTemplateWithData({
 						type={type}
 						cl={cl}
 						name={title}
-						status={room.status}
 					/>
 				))
 			}
@@ -119,19 +169,27 @@ function SideBarItemTemplateWithData({
 	);
 }
 
-function safeDateNotEqualCheck(a, b) {
+function safeDateNotEqualCheck(a: Date | string | undefined, b: Date | string | undefined): boolean {
 	if (!a || !b) {
 		return a !== b;
 	}
 	return new Date(a).toISOString() !== new Date(b).toISOString();
 }
 
-const propsAreEqual = (prevProps, nextProps) => {
-	if (
-		['id', 'style', 'extended', 'selected', 'SideBarItemTemplate', 'AvatarTemplate', 't', 'sidebarViewMode'].some(
-			(key) => prevProps[key] !== nextProps[key],
-		)
-	) {
+const keys: (keyof RoomListRowProps)[] = [
+	'id',
+	'style',
+	'extended',
+	'selected',
+	'SideBarItemTemplate',
+	'AvatarTemplate',
+	't',
+	'sidebarViewMode',
+];
+
+// eslint-disable-next-line react/no-multi-comp
+export default memo(SideBarItemTemplateWithData, (prevProps, nextProps) => {
+	if (keys.some((key) => prevProps[key] !== nextProps[key])) {
 		return false;
 	}
 
@@ -151,7 +209,7 @@ const propsAreEqual = (prevProps, nextProps) => {
 	if (prevProps.room.alert !== nextProps.room.alert) {
 		return false;
 	}
-	if (prevProps.room.v?.status !== nextProps.room.v?.status) {
+	if (isOmnichannelRoom(prevProps.room) && isOmnichannelRoom(nextProps.room) && prevProps.room.v.status !== nextProps.room.v.status) {
 		return false;
 	}
 	if (prevProps.room.teamMain !== nextProps.room.teamMain) {
@@ -159,6 +217,4 @@ const propsAreEqual = (prevProps, nextProps) => {
 	}
 
 	return true;
-};
-
-export default memo(SideBarItemTemplateWithData, propsAreEqual);
+});
diff --git a/apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.js b/apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.ts
similarity index 61%
rename from apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.js
rename to apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.ts
index b5aae26c9514a..c2919fddbb1a7 100644
--- a/apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.js
+++ b/apps/meteor/client/sidebar/RoomList/normalizeSidebarMessage.ts
@@ -1,8 +1,10 @@
+import { IMessage } from '@rocket.chat/core-typings';
 import { escapeHTML } from '@rocket.chat/string-helpers';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 
 import { filterMarkdown } from '../../../app/markdown/lib/markdown';
 
-export const normalizeSidebarMessage = (message, t) => {
+export const normalizeSidebarMessage = (message: IMessage, t: ReturnType<typeof useTranslation>): string | undefined => {
 	if (message.msg) {
 		return escapeHTML(filterMarkdown(message.msg));
 	}
@@ -10,11 +12,11 @@ export const normalizeSidebarMessage = (message, t) => {
 	if (message.attachments) {
 		const attachment = message.attachments.find((attachment) => attachment.title || attachment.description);
 
-		if (attachment && attachment.description) {
+		if (attachment?.description) {
 			return escapeHTML(attachment.description);
 		}
 
-		if (attachment && attachment.title) {
+		if (attachment?.title) {
 			return escapeHTML(attachment.title);
 		}
 
diff --git a/apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx b/apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx
index 09836e19250b4..425c2081c81c5 100644
--- a/apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx
+++ b/apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx
@@ -1,13 +1,13 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useUserPreference } from '@rocket.chat/ui-contexts';
-import React, { ReactNode, useMemo } from 'react';
+import React, { ComponentType, useMemo } from 'react';
 
 import RoomAvatar from '../../components/avatar/RoomAvatar';
 
 export const useAvatarTemplate = (
 	sidebarViewMode?: 'extended' | 'medium' | 'condensed',
 	sidebarDisplayAvatar?: boolean,
-): null | ((room: IRoom & { rid: string }) => ReactNode) => {
+): null | ComponentType<IRoom & { rid: string }> => {
 	const sidebarViewModeFromSettings = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode');
 	const sidebarDisplayAvatarFromSettings = useUserPreference('sidebarDisplayAvatar');
 
@@ -30,7 +30,7 @@ export const useAvatarTemplate = (
 			}
 		})();
 
-		const renderRoomAvatar = (room: IRoom & { rid: string }): ReactNode => (
+		const renderRoomAvatar: ComponentType<IRoom & { rid: string }> = (room) => (
 			<RoomAvatar size={size} room={{ ...room, _id: room.rid || room._id, type: room.t }} />
 		);
 
diff --git a/apps/meteor/client/sidebar/hooks/useRoomList.ts b/apps/meteor/client/sidebar/hooks/useRoomList.ts
index 3abc6ce70b4c4..202c8afb29d94 100644
--- a/apps/meteor/client/sidebar/hooks/useRoomList.ts
+++ b/apps/meteor/client/sidebar/hooks/useRoomList.ts
@@ -11,8 +11,8 @@ const query = { open: { $ne: false } };
 
 const emptyQueue: IRoom[] = [];
 
-export const useRoomList = (): Array<ISubscription> => {
-	const [roomList, setRoomList] = useDebouncedState<ISubscription[]>([], 150);
+export const useRoomList = (): Array<ISubscription & IRoom> => {
+	const [roomList, setRoomList] = useDebouncedState<(ISubscription & IRoom)[]>([], 150);
 
 	const showOmnichannel = useOmnichannelEnabled();
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
diff --git a/apps/meteor/client/sidebar/hooks/useTemplateByViewMode.js b/apps/meteor/client/sidebar/hooks/useTemplateByViewMode.tsx
similarity index 80%
rename from apps/meteor/client/sidebar/hooks/useTemplateByViewMode.js
rename to apps/meteor/client/sidebar/hooks/useTemplateByViewMode.tsx
index 2e518ee2dec8f..6d2c2899c0cd5 100644
--- a/apps/meteor/client/sidebar/hooks/useTemplateByViewMode.js
+++ b/apps/meteor/client/sidebar/hooks/useTemplateByViewMode.tsx
@@ -1,11 +1,11 @@
 import { useUserPreference } from '@rocket.chat/ui-contexts';
-import { useMemo } from 'react';
+import { ComponentType, useMemo } from 'react';
 
 import Condensed from '../Item/Condensed';
 import Extended from '../Item/Extended';
 import Medium from '../Item/Medium';
 
-export const useTemplateByViewMode = () => {
+export const useTemplateByViewMode = (): ComponentType<any> => {
 	const sidebarViewMode = useUserPreference('sidebarViewMode');
 	return useMemo(() => {
 		switch (sidebarViewMode) {
diff --git a/packages/core-typings/src/IRoom.ts b/packages/core-typings/src/IRoom.ts
index 647fbe2901718..4bfed06a3bd8f 100644
--- a/packages/core-typings/src/IRoom.ts
+++ b/packages/core-typings/src/IRoom.ts
@@ -173,6 +173,7 @@ export interface IOmnichannelGenericRoom extends Omit<IRoom, 'default' | 'featur
 	priorityId: any;
 	livechatData: any;
 	queuedAt?: Date;
+	status?: 'queued'; // TODO: missing types for this
 
 	ts: Date;
 	label?: string;

From 79d229bf1667b1009e89f8f96fb14559792f2c32 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 13 Jun 2022 11:50:27 -0300
Subject: [PATCH 08/36] Chore: Typescript Sidebar RoomList (#25835)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

From 2a40792c3a2fb7e7aed00756c63afd2f832dbb5d Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 13 Jun 2022 11:50:42 -0300
Subject: [PATCH 09/36] Chore: Typescript Sidebar RoomList (#25835)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

From 554091c3cf96cde62cb6ea838d874a3a911ed977 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Mon, 13 Jun 2022 13:43:29 -0300
Subject: [PATCH 10/36] [FIX] Attachments and OEmbed margins (#25713)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../message/Attachments/Attachment/Action.tsx |  6 ---
 .../Attachment/AttachmentAction.tsx           |  8 ++++
 .../{Author.tsx => AttachmentAuthor.tsx}      |  4 +-
 .../Attachment/AttachmentAuthorAvatar.tsx     |  7 +++
 .../Attachment/AttachmentAuthorName.tsx       |  6 +++
 .../{Block.tsx => AttachmentBlock.tsx}        |  8 +++-
 .../{Collapse.tsx => AttachmentCollapse.tsx}  |  6 +--
 .../Attachment/AttachmentContent.tsx          |  6 +++
 .../Attachment/AttachmentDescription.tsx      |  8 ++++
 .../{Details.tsx => AttachmentDetails.tsx}    |  4 +-
 .../{Download.tsx => AttachmentDownload.tsx}  |  6 +--
 .../Attachment/AttachmentInner.tsx            |  6 +++
 .../Attachment/{Row.tsx => AttachmentRow.tsx} |  4 +-
 .../{Size.tsx => AttachmentSize.tsx}          |  6 +--
 .../Attachments/Attachment/AttachmentText.tsx |  6 +++
 .../{Thumb.tsx => AttachmentThumb.tsx}        |  4 +-
 .../Attachment/AttachmentTitle.tsx            |  8 ++++
 ...{TitleLink.tsx => AttachmentTitleLink.tsx} |  6 +--
 .../Attachments/Attachment/AuthorAvatar.tsx   |  7 ---
 .../Attachments/Attachment/AuthorName.tsx     |  6 ---
 .../Attachments/Attachment/Content.tsx        |  6 ---
 .../message/Attachments/Attachment/Inner.tsx  |  6 ---
 .../message/Attachments/Attachment/Text.tsx   |  6 ---
 .../message/Attachments/Attachment/Title.tsx  |  6 ---
 .../message/Attachments/Attachment/index.tsx  | 35 +--------------
 .../message/Attachments/DefaultAttachment.tsx | 45 +++++++++++--------
 .../Attachments/Files/AudioAttachment.tsx     | 24 ++++++----
 .../Files/GenericFileAttachment.tsx           | 31 +++++++------
 .../Attachments/Files/ImageAttachment.tsx     | 26 +++++++----
 .../Attachments/Files/PDFAttachment.tsx       | 38 ----------------
 .../Attachments/Files/VideoAttachment.tsx     | 24 ++++++----
 .../message/Attachments/QuoteAttachment.tsx   | 29 +++++++-----
 .../message/Attachments/hooks/useCollapse.tsx |  4 +-
 .../MessageList/components/MessageContent.tsx |  2 +-
 .../components/UrlPreview/PreviewList.tsx     | 18 +++++---
 35 files changed, 208 insertions(+), 214 deletions(-)
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/Action.tsx
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{Author.tsx => AttachmentAuthor.tsx} (64%)
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorAvatar.tsx
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorName.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{Block.tsx => AttachmentBlock.tsx} (66%)
 rename apps/meteor/client/components/message/Attachments/Attachment/{Collapse.tsx => AttachmentCollapse.tsx} (56%)
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentContent.tsx
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentDescription.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{Details.tsx => AttachmentDetails.tsx} (65%)
 rename apps/meteor/client/components/message/Attachments/Attachment/{Download.tsx => AttachmentDownload.tsx} (64%)
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentInner.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{Row.tsx => AttachmentRow.tsx} (67%)
 rename apps/meteor/client/components/message/Attachments/Attachment/{Size.tsx => AttachmentSize.tsx} (63%)
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentText.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{Thumb.tsx => AttachmentThumb.tsx} (63%)
 create mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitle.tsx
 rename apps/meteor/client/components/message/Attachments/Attachment/{TitleLink.tsx => AttachmentTitleLink.tsx} (50%)
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AuthorAvatar.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/AuthorName.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/Content.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/Inner.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/Text.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Attachment/Title.tsx
 delete mode 100644 apps/meteor/client/components/message/Attachments/Files/PDFAttachment.tsx

diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Action.tsx b/apps/meteor/client/components/message/Attachments/Attachment/Action.tsx
deleted file mode 100644
index f98f4397e719e..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/Action.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ActionButton } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Action: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => <ActionButton mi='x2' mini ghost {...props} />;
-
-export default Action;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
new file mode 100644
index 0000000000000..e006cc947896a
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAction.tsx
@@ -0,0 +1,8 @@
+import { ActionButton } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentAction: FC<ComponentProps<typeof ActionButton> & { icon: string }> = (props) => (
+	<ActionButton mi='x2' mini ghost {...props} />
+);
+
+export default AttachmentAction;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Author.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthor.tsx
similarity index 64%
rename from apps/meteor/client/components/message/Attachments/Attachment/Author.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthor.tsx
index 914bd381e8da6..cf510147a55a4 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Author.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthor.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
-const Author: FC<ComponentProps<typeof Box>> = (props) => (
+const AttachmentAuthor: FC<ComponentProps<typeof Box>> = (props) => (
 	<Box display='flex' flexDirection='row' alignItems='center' mbe='x4' {...props} />
 );
 
-export default Author;
+export default AttachmentAuthor;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorAvatar.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorAvatar.tsx
new file mode 100644
index 0000000000000..ff37bbaa67088
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorAvatar.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+
+import BaseAvatar from '../../../avatar/BaseAvatar';
+
+const AttachmentAuthorAvatar = ({ url }: { url: string }): ReactElement => <BaseAvatar url={url} size='x24' />;
+
+export default AttachmentAuthorAvatar;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorName.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorName.tsx
new file mode 100644
index 0000000000000..7b4e19707530b
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentAuthorName.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentAuthorName: FC<ComponentProps<typeof Box>> = (props) => <Box withTruncatedText fontScale='p2m' mi='x8' {...props} />;
+
+export default AttachmentAuthorName;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Block.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx
similarity index 66%
rename from apps/meteor/client/components/message/Attachments/Attachment/Block.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx
index 560911b1eef0a..61b91196843ab 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Block.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx
@@ -3,7 +3,11 @@ import React, { FC } from 'react';
 
 import Attachment from './Attachment';
 
-const Block: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({ pre, color = 'neutral-600', children }) => (
+const AttachmentBlock: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({
+	pre,
+	color = 'neutral-600',
+	children,
+}) => (
 	<Attachment>
 		{pre}
 		<Box
@@ -19,4 +23,4 @@ const Block: FC<{ pre?: JSX.Element | string | undefined; color?: string | undef
 	</Attachment>
 );
 
-export default Block;
+export default AttachmentBlock;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Collapse.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentCollapse.tsx
similarity index 56%
rename from apps/meteor/client/components/message/Attachments/Attachment/Collapse.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentCollapse.tsx
index dd1477d157cb6..6ea3e1c44b096 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Collapse.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentCollapse.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
 
-import Action from './Action';
+import Action from './AttachmentAction';
 
-const Collapse: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { collapsed?: boolean }> = ({ collapsed = false, ...props }) => {
+const AttachmentCollapse: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { collapsed?: boolean }> = ({ collapsed = false, ...props }) => {
 	const t = useTranslation();
 	return <Action title={collapsed ? t('Uncollapse') : t('Collapse')} icon={!collapsed ? 'chevron-down' : 'chevron-left'} {...props} />;
 };
 
-export default Collapse;
+export default AttachmentCollapse;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentContent.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentContent.tsx
new file mode 100644
index 0000000000000..26625e53cf26d
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentContent.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentContent: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box rcx-attachment__content width='full' mb='x4' {...props} />;
+
+export default AttachmentContent;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDescription.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDescription.tsx
new file mode 100644
index 0000000000000..252ff98bf367b
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDescription.tsx
@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, ReactElement } from 'react';
+
+const AttachmentDescription = ({ ...props }: ComponentProps<typeof Box>): ReactElement => (
+	<Box rcx-attachment__description mbe='x4' {...props} />
+);
+
+export default AttachmentDescription;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Details.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx
similarity index 65%
rename from apps/meteor/client/components/message/Attachments/Attachment/Details.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx
index 2d3ced46ff37d..8f15f3b083116 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Details.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';
 
-const Details: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
+const AttachmentDetails: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
 	<Box rcx-attachment__details fontScale='p2' color='info' bg='neutral-100' pi='x16' pb='x16' {...props} />
 );
 
-export default Details;
+export default AttachmentDetails;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Download.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDownload.tsx
similarity index 64%
rename from apps/meteor/client/components/message/Attachments/Attachment/Download.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentDownload.tsx
index 1d2b46fb2f230..68249f5747253 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Download.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentDownload.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
 
-import Action from './Action';
+import Action from './AttachmentAction';
 
-const Download: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string }> = ({
+const AttachmentDownload: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: string | undefined; href: string }> = ({
 	title,
 	href,
 	...props
@@ -23,4 +23,4 @@ const Download: FC<Omit<ComponentProps<typeof Action>, 'icon'> & { title?: strin
 	);
 };
 
-export default Download;
+export default AttachmentDownload;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentInner.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentInner.tsx
new file mode 100644
index 0000000000000..0b9e7aaaabe95
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentInner.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentInner: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box {...props} />;
+
+export default AttachmentInner;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Row.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentRow.tsx
similarity index 67%
rename from apps/meteor/client/components/message/Attachments/Attachment/Row.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentRow.tsx
index 91d3832107081..ac5ac4bc7623b 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Row.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentRow.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';
 
-const Row: FC<ComponentProps<typeof Box>> = (props) => (
+const AttachmentRow: FC<ComponentProps<typeof Box>> = (props) => (
 	<Box mi='neg-x2' mbe='x2' rcx-message-attachment display='flex' alignItems='center' {...props} />
 );
 
-export default Row;
+export default AttachmentRow;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Size.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentSize.tsx
similarity index 63%
rename from apps/meteor/client/components/message/Attachments/Attachment/Size.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentSize.tsx
index 6d21f40ac875c..5dbe8b107f549 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Size.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentSize.tsx
@@ -2,9 +2,9 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { ComponentProps, FC } from 'react';
 
 import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
-import Title from './Title';
+import Title from './AttachmentTitle';
 
-const Size: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...props }) => {
+const AttachmentSize: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...props }) => {
 	const format = useFormatMemorySize();
 	return (
 		<Title flexShrink={0} {...props}>
@@ -13,4 +13,4 @@ const Size: FC<ComponentProps<typeof Box> & { size: number }> = ({ size, ...prop
 	);
 };
 
-export default Size;
+export default AttachmentSize;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentText.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentText.tsx
new file mode 100644
index 0000000000000..b144df13b2cb3
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentText.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentText: FC<ComponentProps<typeof Box>> = (props) => <Box mbe='x4' mi='x2' fontScale='p2' color='default' {...props}></Box>;
+
+export default AttachmentText;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Thumb.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentThumb.tsx
similarity index 63%
rename from apps/meteor/client/components/message/Attachments/Attachment/Thumb.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentThumb.tsx
index 0c8a7e8c6e199..712cd575dd959 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/Thumb.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentThumb.tsx
@@ -1,10 +1,10 @@
 import { Box, Avatar } from '@rocket.chat/fuselage';
 import React, { FC, memo } from 'react';
 
-const Thumb: FC<{ url: string }> = ({ url }) => (
+const AttachmentThumb: FC<{ url: string }> = ({ url }) => (
 	<Box mis='x8'>
 		<Avatar {...({ url, size: 'x48' } as any)} />
 	</Box>
 );
 
-export default memo(Thumb);
+export default memo(AttachmentThumb);
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitle.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitle.tsx
new file mode 100644
index 0000000000000..85db6c0d1819f
--- /dev/null
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitle.tsx
@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const AttachmentTitle: FC<ComponentProps<typeof Box>> = (props) => (
+	<Box withTruncatedText mi='x2' fontScale='c1' color='hint' {...props}></Box>
+);
+
+export default AttachmentTitle;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/TitleLink.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitleLink.tsx
similarity index 50%
rename from apps/meteor/client/components/message/Attachments/Attachment/TitleLink.tsx
rename to apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitleLink.tsx
index 946145df27a37..0e4b9bee75587 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/TitleLink.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/AttachmentTitleLink.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
-import Title from './Title';
+import Title from './AttachmentTitle';
 
-const TitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
+const AttachmentTitleLink: FC<{ link: string; title?: string | undefined }> = ({ link, title }) => (
 	<Title is='a' href={`${link}?download`} color={undefined} target='_blank' download={title} rel='noopener noreferrer'>
 		{title}
 	</Title>
 );
 
-export default TitleLink;
+export default AttachmentTitleLink;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AuthorAvatar.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AuthorAvatar.tsx
deleted file mode 100644
index 315e3831a0db8..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/AuthorAvatar.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, { FC } from 'react';
-
-import BaseAvatar from '../../../avatar/BaseAvatar';
-
-const AuthorAvatar: FC<{ url: string }> = ({ url }) => <BaseAvatar {...({ url, size: 'x24' } as any)} />;
-
-export default AuthorAvatar;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/AuthorName.tsx b/apps/meteor/client/components/message/Attachments/Attachment/AuthorName.tsx
deleted file mode 100644
index 53c08df56757c..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/AuthorName.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const AuthorName: FC<ComponentProps<typeof Box>> = (props) => <Box withTruncatedText fontScale='p2m' mi='x8' {...props} />;
-
-export default AuthorName;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Content.tsx b/apps/meteor/client/components/message/Attachments/Attachment/Content.tsx
deleted file mode 100644
index aa8c156582f79..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/Content.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Content: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box rcx-attachment__content width='full' mb='x4' {...props} />;
-
-export default Content;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Inner.tsx b/apps/meteor/client/components/message/Attachments/Attachment/Inner.tsx
deleted file mode 100644
index 4cc1f96fb4e80..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/Inner.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Inner: FC<ComponentProps<typeof Box>> = ({ ...props }) => <Box {...props} />;
-
-export default Inner;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Text.tsx b/apps/meteor/client/components/message/Attachments/Attachment/Text.tsx
deleted file mode 100644
index b73b9c301c34c..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/Text.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Text: FC<ComponentProps<typeof Box>> = (props) => <Box mbe='x4' mi='x2' fontScale='p2' color='default' {...props}></Box>;
-
-export default Text;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/Title.tsx b/apps/meteor/client/components/message/Attachments/Attachment/Title.tsx
deleted file mode 100644
index e34770dbdf60a..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Attachment/Title.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, FC } from 'react';
-
-const Title: FC<ComponentProps<typeof Box>> = (props) => <Box withTruncatedText mi='x2' fontScale='c1' color='hint' {...props}></Box>;
-
-export default Title;
diff --git a/apps/meteor/client/components/message/Attachments/Attachment/index.tsx b/apps/meteor/client/components/message/Attachments/Attachment/index.tsx
index 6ce4be6967ed2..883a34b494aa5 100644
--- a/apps/meteor/client/components/message/Attachments/Attachment/index.tsx
+++ b/apps/meteor/client/components/message/Attachments/Attachment/index.tsx
@@ -1,36 +1,3 @@
-import Image from '../components/Image';
 import Attachment from './Attachment';
-import Author from './Author';
-import AuthorAvatar from './AuthorAvatar';
-import AuthorName from './AuthorName';
-import Block from './Block';
-import Collapse from './Collapse';
-import Content from './Content';
-import Details from './Details';
-import Download from './Download';
-import Inner from './Inner';
-import Row from './Row';
-import Size from './Size';
-import Text from './Text';
-import Thumb from './Thumb';
-import Title from './Title';
-import TitleLink from './TitleLink';
 
-export default Object.assign(Attachment, {
-	Image,
-	Row,
-	Title,
-	Text,
-	TitleLink,
-	Size,
-	Thumb,
-	Collapse,
-	Download,
-	Content,
-	Details,
-	Inner,
-	Block,
-	Author,
-	AuthorAvatar,
-	AuthorName,
-});
+export default Attachment;
diff --git a/apps/meteor/client/components/message/Attachments/DefaultAttachment.tsx b/apps/meteor/client/components/message/Attachments/DefaultAttachment.tsx
index f526356fceed6..618a4d787ed3f 100644
--- a/apps/meteor/client/components/message/Attachments/DefaultAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/DefaultAttachment.tsx
@@ -3,8 +3,17 @@ import React, { FC, ReactNode, ComponentProps } from 'react';
 
 import MarkdownText from '../../MarkdownText';
 import { ActionAttachment } from './ActionAttachtment';
-import Attachment from './Attachment';
+import AttachmentAuthor from './Attachment/AttachmentAuthor';
+import AttachmentAuthorAvatar from './Attachment/AttachmentAuthorAvatar';
+import AttachmentAuthorName from './Attachment/AttachmentAuthorName';
+import AttachmentBlock from './Attachment/AttachmentBlock';
+import AttachmentContent from './Attachment/AttachmentContent';
+import AttachmentRow from './Attachment/AttachmentRow';
+import AttachmentText from './Attachment/AttachmentText';
+import AttachmentThumb from './Attachment/AttachmentThumb';
+import AttachmentTitle from './Attachment/AttachmentTitle';
 import FieldsAttachment from './FieldsAttachment';
+import AttachmentImage from './components/Image';
 import { useCollapse } from './hooks/useCollapse';
 
 const applyMarkdownIfRequires = (
@@ -18,19 +27,19 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);
 
 	return (
-		<Attachment.Block
+		<AttachmentBlock
 			color={attachment.color}
 			pre={
 				attachment.pretext && (
-					<Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'pretext', attachment.pretext)}</Attachment.Text>
+					<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'pretext', attachment.pretext)}</AttachmentText>
 				)
 			}
 		>
-			<Attachment.Content>
+			<AttachmentContent>
 				{attachment.author_name && (
-					<Attachment.Author>
-						{attachment.author_icon && <Attachment.AuthorAvatar url={attachment.author_icon} />}
-						<Attachment.AuthorName
+					<AttachmentAuthor>
+						{attachment.author_icon && <AttachmentAuthorAvatar url={attachment.author_icon} />}
+						<AttachmentAuthorName
 							{...(attachment.author_link && {
 								is: 'a',
 								href: attachment.author_link,
@@ -39,12 +48,12 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 							})}
 						>
 							{attachment.author_name}
-						</Attachment.AuthorName>
-					</Attachment.Author>
+						</AttachmentAuthorName>
+					</AttachmentAuthor>
 				)}
 				{attachment.title && (
-					<Attachment.Row>
-						<Attachment.Title
+					<AttachmentRow>
+						<AttachmentTitle
 							{...(attachment.title_link && {
 								is: 'a',
 								href: attachment.title_link,
@@ -53,14 +62,14 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 							})}
 						>
 							{attachment.title}
-						</Attachment.Title>{' '}
+						</AttachmentTitle>{' '}
 						{collapse}
-					</Attachment.Row>
+					</AttachmentRow>
 				)}
 				{!collapsed && (
 					<>
 						{attachment.text && (
-							<Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, 'document')}</Attachment.Text>
+							<AttachmentText>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, 'document')}</AttachmentText>
 						)}
 						{/* {attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />} */}
 						{attachment.fields && (
@@ -80,14 +89,14 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 								})}
 							/>
 						)}
-						{attachment.image_url && <Attachment.Image {...(attachment.image_dimensions as any)} src={attachment.image_url} />}
+						{attachment.image_url && <AttachmentImage {...(attachment.image_dimensions as any)} src={attachment.image_url} />}
 						{/* DEPRECATED */}
 						{isActionAttachment(attachment) && <ActionAttachment {...attachment} />}
 					</>
 				)}
-			</Attachment.Content>
-			{attachment.thumb_url && <Attachment.Thumb url={attachment.thumb_url} />}
-		</Attachment.Block>
+			</AttachmentContent>
+			{attachment.thumb_url && <AttachmentThumb url={attachment.thumb_url} />}
+		</AttachmentBlock>
 	);
 };
 
diff --git a/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx
index 771042e517aa8..d8d63747cd37d 100644
--- a/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/Files/AudioAttachment.tsx
@@ -4,6 +4,12 @@ import React, { FC } from 'react';
 
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
+import AttachmentContent from '../Attachment/AttachmentContent';
+import AttachmentDescription from '../Attachment/AttachmentDescription';
+import AttachmentDownload from '../Attachment/AttachmentDownload';
+import AttachmentRow from '../Attachment/AttachmentRow';
+import AttachmentSize from '../Attachment/AttachmentSize';
+import AttachmentTitle from '../Attachment/AttachmentTitle';
 import { useCollapse } from '../hooks/useCollapse';
 
 export const AudioAttachment: FC<AudioAttachmentProps> = ({
@@ -20,19 +26,21 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			<MarkdownText parseEmoji variant='inline' content={description} />
-			<Attachment.Row>
-				<Attachment.Title>{title}</Attachment.Title>
-				{size && <Attachment.Size size={size} />}
+			<AttachmentDescription>
+				<MarkdownText parseEmoji variant='inline' content={description} />
+			</AttachmentDescription>
+			<AttachmentRow>
+				<AttachmentTitle>{title}</AttachmentTitle>
+				{size && <AttachmentSize size={size} />}
 				{collapse}
-				{hasDownload && link && <Attachment.Download title={title} href={getURL(link)} />}
-			</Attachment.Row>
+				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
+			</AttachmentRow>
 			{!collapsed && (
-				<Attachment.Content border='none'>
+				<AttachmentContent border='none'>
 					<audio controls preload='metadata'>
 						<source src={getURL(url)} type={type} />
 					</audio>
-				</Attachment.Content>
+				</AttachmentContent>
 			)}
 		</Attachment>
 	);
diff --git a/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx
index bb571a379a299..5cffc1016c8ee 100644
--- a/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/Files/GenericFileAttachment.tsx
@@ -4,6 +4,12 @@ import React, { FC } from 'react';
 
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
+import AttachmentDescription from '../Attachment/AttachmentDescription';
+import AttachmentDownload from '../Attachment/AttachmentDownload';
+import AttachmentRow from '../Attachment/AttachmentRow';
+import AttachmentSize from '../Attachment/AttachmentSize';
+import AttachmentTitle from '../Attachment/AttachmentTitle';
+import AttachmentTitleLink from '../Attachment/AttachmentTitleLink';
 
 export type GenericFileAttachmentProps = {
 	file?: FileProp;
@@ -25,20 +31,17 @@ export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			{description && <MarkdownText parseEmoji content={description} />}
-			<Attachment.Row>
-				{hasDownload && link ? <Attachment.TitleLink link={getURL(link)} title={title} /> : <Attachment.Title>{title}</Attachment.Title>}
-				{size && <Attachment.Size size={size} />}
-				{/* {collapse} */}
-				{hasDownload && link && <Attachment.Download title={title} href={getURL(link)} />}
-			</Attachment.Row>
-			{/* { !collapsed && <Attachment.Content>
-			<Attachment.Details>
-				{hasDownload && link && <Attachment.Download href={link}/>}
-				<Attachment.Row><Attachment.Title { ...hasDownload && link && { is: 'a', href: link } } >{name}</Attachment.Title></Attachment.Row>
-				<Attachment.Row>{size && <Attachment.Size size={size}/>}<Attachment.Title>{format && size && ' | '}{format}</Attachment.Title></Attachment.Row>
-			</Attachment.Details>
-		</Attachment.Content> } */}
+			{description && (
+				<AttachmentDescription>
+					<MarkdownText parseEmoji content={description} />
+				</AttachmentDescription>
+			)}
+			<AttachmentRow>
+				{hasDownload && link ? <AttachmentTitleLink link={getURL(link)} title={title} /> : <AttachmentTitle>{title}</AttachmentTitle>}
+				{size && <AttachmentSize size={size} />}
+
+				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
+			</AttachmentRow>
 		</Attachment>
 	);
 };
diff --git a/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx
index a45a96c4b22c0..0665c1b232ca3 100644
--- a/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/Files/ImageAttachment.tsx
@@ -4,6 +4,12 @@ import React, { FC } from 'react';
 
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
+import AttachmentContent from '../Attachment/AttachmentContent';
+import AttachmentDescription from '../Attachment/AttachmentDescription';
+import AttachmentDownload from '../Attachment/AttachmentDownload';
+import AttachmentRow from '../Attachment/AttachmentRow';
+import AttachmentSize from '../Attachment/AttachmentSize';
+import AttachmentTitle from '../Attachment/AttachmentTitle';
 import Image from '../components/Image';
 import { useCollapse } from '../hooks/useCollapse';
 import { useLoadImage } from '../hooks/useLoadImage';
@@ -27,15 +33,19 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 	const getURL = useMediaUrl();
 	return (
 		<Attachment>
-			{description && <MarkdownText parseEmoji variant='inline' content={description} />}
-			<Attachment.Row>
-				<Attachment.Title>{title}</Attachment.Title>
-				{size && <Attachment.Size size={size} />}
+			{description && (
+				<AttachmentDescription>
+					<MarkdownText parseEmoji variant='inline' content={description} />
+				</AttachmentDescription>
+			)}
+			<AttachmentRow>
+				<AttachmentTitle>{title}</AttachmentTitle>
+				{size && <AttachmentSize size={size} />}
 				{collapse}
-				{hasDownload && link && <Attachment.Download title={title} href={getURL(link)} />}
-			</Attachment.Row>
+				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
+			</AttachmentRow>
 			{!collapsed && (
-				<Attachment.Content>
+				<AttachmentContent>
 					<Image
 						{...imageDimensions}
 						loadImage={loadImage}
@@ -44,7 +54,7 @@ export const ImageAttachment: FC<ImageAttachmentProps> = ({
 						src={getURL(url)}
 						previewUrl={`data:image/png;base64,${imagePreview}`}
 					/>
-				</Attachment.Content>
+				</AttachmentContent>
 			)}
 		</Attachment>
 	);
diff --git a/apps/meteor/client/components/message/Attachments/Files/PDFAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/PDFAttachment.tsx
deleted file mode 100644
index 5efedf8df2733..0000000000000
--- a/apps/meteor/client/components/message/Attachments/Files/PDFAttachment.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { PDFAttachmentProps } from '@rocket.chat/core-typings';
-import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC } from 'react';
-
-import MarkdownText from '../../../MarkdownText';
-import Attachment from '../Attachment';
-import { useCollapse } from '../hooks/useCollapse';
-
-export const PDFAttachment: FC<PDFAttachmentProps> = ({
-	collapsed: collapsedDefault = false,
-	description,
-	title_link: link,
-	title_link_download: hasDownload,
-	file,
-}) => {
-	const t = useTranslation();
-	const [collapsed, collapse] = useCollapse(collapsedDefault);
-	return (
-		<Attachment>
-			{description && <MarkdownText variant='inline' content={description} />}
-			<Attachment.Row>
-				<Attachment.Title>{t('PDF')}</Attachment.Title>
-				{collapse}
-				{hasDownload && link && <Attachment.Download href={link} />}
-			</Attachment.Row>
-			{!collapsed && (
-				<Attachment.Content>
-					<canvas id={file._id} className='attachment-canvas'></canvas>
-					{/* <div id="js-loading-{{fileId}}" class="attachment-pdf-loading">
-			<Attachment.Title>{title}</Attachment.Title>
-			{file.size && <Attachment.Size size={file.size}/>}
-					{{> icon block="rc-input__icon-svg" icon="loading"}}
-				</div>*/}
-				</Attachment.Content>
-			)}
-		</Attachment>
-	);
-};
diff --git a/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx b/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx
index 2205d54f5b1c8..a2b6327f9b7b0 100644
--- a/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx
@@ -5,6 +5,12 @@ import React, { FC } from 'react';
 
 import MarkdownText from '../../../MarkdownText';
 import Attachment from '../Attachment';
+import AttachmentContent from '../Attachment/AttachmentContent';
+import AttachmentDetails from '../Attachment/AttachmentDetails';
+import AttachmentDownload from '../Attachment/AttachmentDownload';
+import AttachmentRow from '../Attachment/AttachmentRow';
+import AttachmentSize from '../Attachment/AttachmentSize';
+import AttachmentTitle from '../Attachment/AttachmentTitle';
 import { useCollapse } from '../hooks/useCollapse';
 
 export const VideoAttachment: FC<VideoAttachmentProps> = ({
@@ -22,23 +28,23 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({
 
 	return (
 		<Attachment>
-			<Attachment.Row>
-				<Attachment.Title>{title}</Attachment.Title>
-				{size && <Attachment.Size size={size} />}
+			<AttachmentRow>
+				<AttachmentTitle>{title}</AttachmentTitle>
+				{size && <AttachmentSize size={size} />}
 				{collapse}
-				{hasDownload && link && <Attachment.Download title={title} href={getURL(link)} />}
-			</Attachment.Row>
+				{hasDownload && link && <AttachmentDownload title={title} href={getURL(link)} />}
+			</AttachmentRow>
 			{!collapsed && (
-				<Attachment.Content width='full'>
+				<AttachmentContent width='full'>
 					<Box is='video' width='full' controls preload='metadata'>
 						<source src={getURL(url)} type={type} />
 					</Box>
 					{description && (
-						<Attachment.Details is='figcaption'>
+						<AttachmentDetails is='figcaption'>
 							<MarkdownText parseEmoji variant='inline' content={description} />
-						</Attachment.Details>
+						</AttachmentDetails>
 					)}
-				</Attachment.Content>
+				</AttachmentContent>
 			)}
 		</Attachment>
 	);
diff --git a/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx b/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx
index d0296152c3cc0..2ef7f40ca8398 100644
--- a/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx
+++ b/apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx
@@ -7,7 +7,12 @@ import React, { FC } from 'react';
 import Attachments from '.';
 import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import MarkdownText from '../../MarkdownText';
-import Attachment from './Attachment';
+import AttachmentAuthor from './Attachment/AttachmentAuthor';
+import AttachmentAuthorAvatar from './Attachment/AttachmentAuthorAvatar';
+import AttachmentAuthorName from './Attachment/AttachmentAuthorName';
+import AttachmentContent from './Attachment/AttachmentContent';
+import AttachmentDetails from './Attachment/AttachmentDetails';
+import AttachmentInner from './Attachment/AttachmentInner';
 
 const hover = css`
 	&:hover,
@@ -32,8 +37,8 @@ export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
 	const format = useTimeAgo();
 	return (
 		<>
-			<Attachment.Content className={hover} width='full'>
-				<Attachment.Details
+			<AttachmentContent className={hover} width='full'>
+				<AttachmentDetails
 					is='blockquote'
 					borderRadius='x2'
 					borderWidth='x2'
@@ -41,25 +46,25 @@ export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
 					borderColor='neutral-200'
 					borderInlineStartColor='neutral-600'
 				>
-					<Attachment.Author>
-						<Attachment.AuthorAvatar url={url} />
-						<Attachment.AuthorName {...(authorLink && { is: 'a', href: authorLink, target: '_blank', color: undefined })}>
+					<AttachmentAuthor>
+						<AttachmentAuthorAvatar url={url} />
+						<AttachmentAuthorName {...(authorLink && { is: 'a', href: authorLink, target: '_blank', color: undefined })}>
 							{name}
-						</Attachment.AuthorName>
+						</AttachmentAuthorName>
 						{ts && (
 							<Box fontScale='c1' {...(messageLink ? { is: 'a', href: messageLink } : { color: 'hint' })}>
 								{format(ts)}
 							</Box>
 						)}
-					</Attachment.Author>
+					</AttachmentAuthor>
 					<MarkdownText parseEmoji variant='document' content={text} />
 					{attachments && (
-						<Attachment.Inner>
+						<AttachmentInner>
 							<Attachments attachments={attachments} />
-						</Attachment.Inner>
+						</AttachmentInner>
 					)}
-				</Attachment.Details>
-			</Attachment.Content>
+				</AttachmentDetails>
+			</AttachmentContent>
 		</>
 	);
 };
diff --git a/apps/meteor/client/components/message/Attachments/hooks/useCollapse.tsx b/apps/meteor/client/components/message/Attachments/hooks/useCollapse.tsx
index 5f320a87480d6..56bb1b7ffa93c 100644
--- a/apps/meteor/client/components/message/Attachments/hooks/useCollapse.tsx
+++ b/apps/meteor/client/components/message/Attachments/hooks/useCollapse.tsx
@@ -2,10 +2,10 @@ import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { useAttachmentIsCollapsedByDefault } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import Attachment from '../Attachment';
+import AttachmentCollapse from '../Attachment/AttachmentCollapse';
 
 export const useCollapse = (attachmentCollapsed: boolean): [boolean, JSX.Element] => {
 	const collpaseByDefault = useAttachmentIsCollapsedByDefault();
 	const [collapsed, toogleCollapsed] = useToggle(collpaseByDefault || attachmentCollapsed);
-	return [collapsed, <Attachment.Collapse collapsed={collapsed} onClick={toogleCollapsed as any} />];
+	return [collapsed, <AttachmentCollapse collapsed={collapsed} onClick={toogleCollapsed as any} />];
 };
diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
index d0e4fa98290c2..edddebb5ae169 100644
--- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
+++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
@@ -47,7 +47,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 
 	return (
 		<>
-			{!message.blocks && (
+			{!message.blocks && (message.md || message.msg) && (
 				<MessageBody data-qa-type='message-body'>
 					{!isEncryptedMessage && <MessageContentBody message={message} />}
 					{isEncryptedMessage && message.e2e === 'done' && <MessageContentBody message={message} />}
diff --git a/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx b/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx
index d412957ecdc73..5e866878c5c45 100644
--- a/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx
+++ b/apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@rocket.chat/fuselage';
+import { MessageBlock } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
 import { useMessageOembedMaxWidth } from '../../../contexts/MessageContext';
@@ -117,14 +117,22 @@ const PreviewList = ({ urls }: PreviewListProps): ReactElement | null => {
 	const metaAndHeaders = urls.map(processMetaAndHeaders).filter(isPreviewData);
 
 	return (
-		<Box width={oembedWidth}>
+		<>
 			{metaAndHeaders.map(({ type, data }, index) => {
 				if (isMetaPreview(data, type)) {
-					return <OEmbedResolver meta={data} key={index} />;
+					return (
+						<MessageBlock width={oembedWidth}>
+							<OEmbedResolver meta={data} key={index} />
+						</MessageBlock>
+					);
 				}
-				return <UrlPreview {...data} key={index} />;
+				return (
+					<MessageBlock width={oembedWidth}>
+						<UrlPreview {...data} key={index} />
+					</MessageBlock>
+				);
 			})}
-		</Box>
+		</>
 	);
 };
 

From 813883181a362e6e1614bae89c583fed0b16ae5f Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Mon, 13 Jun 2022 22:54:08 +0530
Subject: [PATCH 11/36] Chore: RouteGroup for My Account sidebar  (#25632)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->
Refactoring My Accounts routes. Allows to add "my account" routes for EE.
<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
---
 .../app/ui/client/views/app/burger.html       |  2 +-
 .../components/BurgerMenu/BurgerMenu.tsx      |  4 +-
 .../BurgerMenu/BurgerMenuButton.tsx           |  1 +
 apps/meteor/client/main.ts                    |  1 +
 .../client/providers/LayoutProvider.tsx       |  3 +-
 .../client/sidebar/header/UserDropdown.tsx    |  2 +-
 apps/meteor/client/startup/routes.tsx         | 12 ----
 .../client/views/account/AccountRoute.js      | 65 -------------------
 .../client/views/account/AccountRouter.tsx    | 31 +++++++++
 .../{AccountSidebar.js => AccountSidebar.tsx} | 15 +++--
 apps/meteor/client/views/account/index.ts     |  2 +
 .../AccountIntegrationsPage.tsx               |  8 +--
 .../integrations/AccountIntegrationsRoute.tsx | 17 +++++
 .../{ => profile}/AccountProfileForm.js       | 12 ++--
 .../{ => profile}/AccountProfilePage.js       | 10 +--
 .../account/profile/AccountProfileRoute.tsx   | 17 +++++
 .../{ => profile}/ActionConfirmModal.tsx      |  2 +-
 apps/meteor/client/views/account/routes.tsx   | 34 ++++++++++
 .../account/security/AccountSecurityRoute.tsx | 19 ++++++
 .../client/views/account/sidebarItems.ts      | 15 ++---
 .../account/tokens/AccountTokensRoute.tsx     | 17 +++++
 .../rocketchat-i18n/i18n/en.i18n.json         |  1 +
 apps/meteor/tests/e2e/08-resolutions.spec.ts  |  9 ++-
 .../e2e/utils/pageobjects/Administration.ts   |  8 ---
 .../tests/e2e/utils/pageobjects/Global.ts     |  5 ++
 .../tests/e2e/utils/pageobjects/SideNav.ts    |  6 +-
 packages/ui-contexts/src/LayoutContext.ts     |  2 +
 27 files changed, 193 insertions(+), 127 deletions(-)
 delete mode 100644 apps/meteor/client/views/account/AccountRoute.js
 create mode 100644 apps/meteor/client/views/account/AccountRouter.tsx
 rename apps/meteor/client/views/account/{AccountSidebar.js => AccountSidebar.tsx} (67%)
 create mode 100644 apps/meteor/client/views/account/index.ts
 rename apps/meteor/client/views/account/{ => integrations}/AccountIntegrationsPage.tsx (90%)
 create mode 100644 apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx
 rename apps/meteor/client/views/account/{ => profile}/AccountProfileForm.js (95%)
 rename apps/meteor/client/views/account/{ => profile}/AccountProfilePage.js (95%)
 create mode 100644 apps/meteor/client/views/account/profile/AccountProfileRoute.tsx
 rename apps/meteor/client/views/account/{ => profile}/ActionConfirmModal.tsx (96%)
 create mode 100644 apps/meteor/client/views/account/routes.tsx
 create mode 100644 apps/meteor/client/views/account/security/AccountSecurityRoute.tsx
 create mode 100644 apps/meteor/client/views/account/tokens/AccountTokensRoute.tsx

diff --git a/apps/meteor/app/ui/client/views/app/burger.html b/apps/meteor/app/ui/client/views/app/burger.html
index 825dcd4f18c25..f854eae0648e1 100644
--- a/apps/meteor/app/ui/client/views/app/burger.html
+++ b/apps/meteor/app/ui/client/views/app/burger.html
@@ -1,5 +1,5 @@
 <template name="burger">
-	<div class="rc-old burger {{isMenuOpen}}">
+	<div data-qa-id="burger-menu" class="rc-old burger {{isMenuOpen}}">
 		<i></i>
 		<i></i>
 		<i></i>
diff --git a/apps/meteor/client/components/BurgerMenu/BurgerMenu.tsx b/apps/meteor/client/components/BurgerMenu/BurgerMenu.tsx
index aca62a4578a64..129d9b743469d 100644
--- a/apps/meteor/client/components/BurgerMenu/BurgerMenu.tsx
+++ b/apps/meteor/client/components/BurgerMenu/BurgerMenu.tsx
@@ -6,11 +6,11 @@ import { useEmbeddedLayout } from '../../hooks/useEmbeddedLayout';
 import BurgerMenuButton from './BurgerMenuButton';
 
 const BurgerMenu = (): ReactElement => {
-	const { sidebar } = useLayout();
+	const { sidebar, sidenav } = useLayout();
 	const isLayoutEmbedded = useEmbeddedLayout();
 	const unreadMessagesBadge = useSession('unread');
 
-	const isSidebarOpen = sidebar.isOpen();
+	const isSidebarOpen = sidebar.isOpen() || sidenav.opened;
 	const toggleSidebar = useMutableCallback(() => sidebar.toggle());
 
 	return (
diff --git a/apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx b/apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx
index 53c923f9a4dfb..6712a93fc9de7 100644
--- a/apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx
+++ b/apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx
@@ -18,6 +18,7 @@ const BurgerMenuButton = ({ open, badge, onClick }: BurgerMenuButtonProps): Reac
 	return (
 		<Box
 			is='button'
+			data-qa-id='burger-menu'
 			aria-label={open ? t('Close_menu') : t('Open_menu')}
 			type='button'
 			position='relative'
diff --git a/apps/meteor/client/main.ts b/apps/meteor/client/main.ts
index 628050600a12f..092d002e9280f 100644
--- a/apps/meteor/client/main.ts
+++ b/apps/meteor/client/main.ts
@@ -18,5 +18,6 @@ import './methods/toggleFavorite';
 import './methods/updateMessage';
 import './startup';
 import './views/admin';
+import './views/account';
 import './views/teams';
 import './templates';
diff --git a/apps/meteor/client/providers/LayoutProvider.tsx b/apps/meteor/client/providers/LayoutProvider.tsx
index 1eafe3000b318..3e20ddb717616 100644
--- a/apps/meteor/client/providers/LayoutProvider.tsx
+++ b/apps/meteor/client/providers/LayoutProvider.tsx
@@ -2,7 +2,7 @@ import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { LayoutContext, useQueryStringParameter, useSetting } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
 
-import { menu } from '../../app/ui-utils/client';
+import { menu, SideNav } from '../../app/ui-utils/client';
 
 const LayoutProvider: FC = ({ children }) => {
 	const showTopNavbarEmbeddedLayout = Boolean(useSetting('UI_Show_top_navbar_embedded_layout'));
@@ -19,6 +19,7 @@ const LayoutProvider: FC = ({ children }) => {
 					isEmbedded,
 					showTopNavbarEmbeddedLayout,
 					sidebar: menu,
+					sidenav: SideNav,
 					size: {
 						sidebar: '240px',
 						// eslint-disable-next-line no-nested-ternary
diff --git a/apps/meteor/client/sidebar/header/UserDropdown.tsx b/apps/meteor/client/sidebar/header/UserDropdown.tsx
index d74898a8e173d..56e4862594e83 100644
--- a/apps/meteor/client/sidebar/header/UserDropdown.tsx
+++ b/apps/meteor/client/sidebar/header/UserDropdown.tsx
@@ -63,7 +63,7 @@ type UserDropdownProps = {
 
 const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 	const t = useTranslation();
-	const accountRoute = useRoute('account');
+	const accountRoute = useRoute('account-index');
 	const adminRoute = useRoute('admin-index');
 	const logout = useLogout();
 	const { sidebar, isMobile } = useLayout();
diff --git a/apps/meteor/client/startup/routes.tsx b/apps/meteor/client/startup/routes.tsx
index 8aa9a42172fe6..50d0b81c2441d 100644
--- a/apps/meteor/client/startup/routes.tsx
+++ b/apps/meteor/client/startup/routes.tsx
@@ -26,7 +26,6 @@ const MeetPage = lazy(() => import('../views/meet/MeetPage'));
 const DirectoryPage = lazy(() => import('../views/directory/DirectoryPage'));
 const OmnichannelDirectoryPage = lazy(() => import('../views/omnichannel/directory/OmnichannelDirectoryPage'));
 const OmnichannelQueueList = lazy(() => import('../views/omnichannel/queueList'));
-const AccountRoute = lazy(() => import('../views/account/AccountRoute'));
 
 FlowRouter.wait();
 
@@ -164,17 +163,6 @@ FlowRouter.route('/livechat-queue', {
 	},
 });
 
-FlowRouter.route('/account/:group?', {
-	name: 'account',
-	action: () => {
-		appLayout.render(
-			<MainLayout>
-				<AccountRoute />
-			</MainLayout>,
-		);
-	},
-});
-
 FlowRouter.route('/terms-of-service', {
 	name: 'terms-of-service',
 	action: () => {
diff --git a/apps/meteor/client/views/account/AccountRoute.js b/apps/meteor/client/views/account/AccountRoute.js
deleted file mode 100644
index 7daab6e21cdea..0000000000000
--- a/apps/meteor/client/views/account/AccountRoute.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useRouteParameter, useRoute, useCurrentRoute, useSetting, usePermission } from '@rocket.chat/ui-contexts';
-import React, { useEffect } from 'react';
-
-import { SideNav } from '../../../app/ui-utils/client';
-import NotAuthorizedPage from '../notAuthorized/NotAuthorizedPage';
-import AccountIntegrationsPage from './AccountIntegrationsPage';
-import AccountProfilePage from './AccountProfilePage';
-import AccountPreferencesPage from './preferences/AccountPreferencesPage';
-import AccountSecurityPage from './security/AccountSecurityPage';
-import AccountTokensPage from './tokens/AccountTokensPage';
-import './sidebarItems';
-
-const AccountRoute = () => {
-	const [routeName] = useCurrentRoute();
-	const page = useRouteParameter('group');
-	const router = useRoute('account');
-
-	useEffect(() => {
-		if (routeName !== 'account') {
-			return;
-		}
-
-		!page && router.push({ group: 'profile' });
-	}, [routeName, page, router]);
-
-	useEffect(() => {
-		SideNav.setFlex('accountFlex');
-		SideNav.openFlex();
-	});
-
-	const webdavEnabled = useSetting('Webdav_Integration_Enabled');
-	const canCreateTokens = usePermission('create-personal-access-tokens');
-
-	if (page === 'profile') {
-		return <AccountProfilePage />;
-	}
-
-	if (page === 'preferences') {
-		return <AccountPreferencesPage />;
-	}
-
-	if (page === 'security') {
-		return <AccountSecurityPage />;
-	}
-
-	if (page === 'integrations') {
-		if (!webdavEnabled) {
-			return <NotAuthorizedPage />;
-		}
-
-		return <AccountIntegrationsPage />;
-	}
-
-	if (page === 'tokens') {
-		if (!canCreateTokens) {
-			return <NotAuthorizedPage />;
-		}
-
-		return <AccountTokensPage />;
-	}
-
-	return null;
-};
-
-export default AccountRoute;
diff --git a/apps/meteor/client/views/account/AccountRouter.tsx b/apps/meteor/client/views/account/AccountRouter.tsx
new file mode 100644
index 0000000000000..43a5c13c6ed74
--- /dev/null
+++ b/apps/meteor/client/views/account/AccountRouter.tsx
@@ -0,0 +1,31 @@
+import { useCurrentRoute, useRoute } from '@rocket.chat/ui-contexts';
+import React, { Suspense, ReactElement, useEffect, ReactNode } from 'react';
+
+import { SideNav } from '../../../app/ui-utils/client';
+import PageSkeleton from '../../components/PageSkeleton';
+
+type AccountRouterProps = {
+	children?: ReactNode;
+};
+
+const AccountRouter = ({ children }: AccountRouterProps): ReactElement => {
+	const [routeName] = useCurrentRoute();
+	const defaultRoute = useRoute('profile');
+
+	useEffect(() => {
+		if (routeName !== 'account-index') {
+			return;
+		}
+
+		defaultRoute.replace();
+	}, [routeName, defaultRoute]);
+
+	useEffect(() => {
+		SideNav.setFlex('accountFlex');
+		SideNav.openFlex(() => undefined);
+	}, []);
+
+	return children ? <Suspense fallback={<PageSkeleton />}>{children}</Suspense> : <PageSkeleton />;
+};
+
+export default AccountRouter;
diff --git a/apps/meteor/client/views/account/AccountSidebar.js b/apps/meteor/client/views/account/AccountSidebar.tsx
similarity index 67%
rename from apps/meteor/client/views/account/AccountSidebar.js
rename to apps/meteor/client/views/account/AccountSidebar.tsx
index dc78560b2c2fe..aff5500e00f89 100644
--- a/apps/meteor/client/views/account/AccountSidebar.js
+++ b/apps/meteor/client/views/account/AccountSidebar.tsx
@@ -1,14 +1,14 @@
 import { useRoutePath, useCurrentRoute, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, ReactElement, useCallback, useEffect } from 'react';
 import { useSubscription } from 'use-subscription';
 
+import { itemsSubscription } from '.';
 import { menu, SideNav } from '../../../app/ui-utils/client';
 import Sidebar from '../../components/Sidebar';
 import { isLayoutEmbedded } from '../../lib/utils/isLayoutEmbedded';
 import SettingsProvider from '../../providers/SettingsProvider';
-import { itemsSubscription } from './sidebarItems';
 
-const AccountSidebar = () => {
+const AccountSidebar = (): ReactElement => {
 	const t = useTranslation();
 
 	const items = useSubscription(itemsSubscription);
@@ -22,14 +22,15 @@ const AccountSidebar = () => {
 		SideNav.closeFlex();
 	}, []);
 
-	const [currentRouteName, ...rest] = useCurrentRoute();
-	const currentPath = useRoutePath(currentRouteName, ...rest);
+	const currentRoute = useCurrentRoute();
+	const [currentRouteName, currentRouteParams, currentQueryStringParams, currentRouteGroupName] = currentRoute;
+	const currentPath = useRoutePath(currentRouteName || '', currentRouteParams, currentQueryStringParams);
 
 	useEffect(() => {
-		if (currentRouteName !== 'account') {
+		if (currentRouteGroupName !== 'account') {
 			SideNav.closeFlex();
 		}
-	}, [currentRouteName]);
+	}, [currentRouteGroupName]);
 
 	// TODO: uplift this provider
 	return (
diff --git a/apps/meteor/client/views/account/index.ts b/apps/meteor/client/views/account/index.ts
new file mode 100644
index 0000000000000..01c25a32a8095
--- /dev/null
+++ b/apps/meteor/client/views/account/index.ts
@@ -0,0 +1,2 @@
+export { registerAccountRoute } from './routes';
+export { registerAccountSidebarItem, unregisterSidebarItem, itemsSubscription } from './sidebarItems';
diff --git a/apps/meteor/client/views/account/AccountIntegrationsPage.tsx b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
similarity index 90%
rename from apps/meteor/client/views/account/AccountIntegrationsPage.tsx
rename to apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
index 4fd35110f3ffc..23242ac1ee059 100644
--- a/apps/meteor/client/views/account/AccountIntegrationsPage.tsx
+++ b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
@@ -3,10 +3,10 @@ import { Box, Select, SelectOption, Field, Button } from '@rocket.chat/fuselage'
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, useCallback, ReactElement } from 'react';
 
-import { WebdavAccounts } from '../../../app/models/client';
-import Page from '../../components/Page';
-import { useForm } from '../../hooks/useForm';
-import { useReactiveValue } from '../../hooks/useReactiveValue';
+import { WebdavAccounts } from '../../../../app/models/client';
+import Page from '../../../components/Page';
+import { useForm } from '../../../hooks/useForm';
+import { useReactiveValue } from '../../../hooks/useReactiveValue';
 
 type WebdavAccountIntegration = Omit<IWebdavAccount, 'userId' | 'password' | '_updatedAt'>;
 
diff --git a/apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx b/apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx
new file mode 100644
index 0000000000000..dc70fb738887b
--- /dev/null
+++ b/apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx
@@ -0,0 +1,17 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import AccountIntegrationsPage from './AccountIntegrationsPage';
+
+const AccountIntegrationsRoute = (): ReactElement => {
+	const webdavEnabled = useSetting('Webdav_Integration_Enabled');
+
+	if (!webdavEnabled) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <AccountIntegrationsPage />;
+};
+
+export default AccountIntegrationsRoute;
diff --git a/apps/meteor/client/views/account/AccountProfileForm.js b/apps/meteor/client/views/account/profile/AccountProfileForm.js
similarity index 95%
rename from apps/meteor/client/views/account/AccountProfileForm.js
rename to apps/meteor/client/views/account/profile/AccountProfileForm.js
index cf26eab7d4fb4..daea0d891b85f 100644
--- a/apps/meteor/client/views/account/AccountProfileForm.js
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.js
@@ -15,12 +15,12 @@ import { useDebouncedCallback, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
 
-import { validateEmail } from '../../../lib/emailValidator';
-import { getUserEmailAddress } from '../../../lib/getUserEmailAddress';
-import CustomFieldsForm from '../../components/CustomFieldsForm';
-import { USER_STATUS_TEXT_MAX_LENGTH } from '../../components/UserStatus';
-import UserStatusMenu from '../../components/UserStatusMenu';
-import UserAvatarEditor from '../../components/avatar/UserAvatarEditor';
+import { validateEmail } from '../../../../lib/emailValidator';
+import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
+import CustomFieldsForm from '../../../components/CustomFieldsForm';
+import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../components/UserStatus';
+import UserStatusMenu from '../../../components/UserStatusMenu';
+import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 
 function AccountProfileForm({ values, handlers, user, settings, onSaveStateChange, ...props }) {
 	const t = useTranslation();
diff --git a/apps/meteor/client/views/account/AccountProfilePage.js b/apps/meteor/client/views/account/profile/AccountProfilePage.js
similarity index 95%
rename from apps/meteor/client/views/account/AccountProfilePage.js
rename to apps/meteor/client/views/account/profile/AccountProfilePage.js
index 7694764d011bd..c57e71b87e193 100644
--- a/apps/meteor/client/views/account/AccountProfilePage.js
+++ b/apps/meteor/client/views/account/profile/AccountProfilePage.js
@@ -12,11 +12,11 @@ import {
 import { SHA256 } from 'meteor/sha';
 import React, { useMemo, useState, useCallback } from 'react';
 
-import { getUserEmailAddress } from '../../../lib/getUserEmailAddress';
-import ConfirmOwnerChangeWarningModal from '../../components/ConfirmOwnerChangeWarningModal';
-import Page from '../../components/Page';
-import { useForm } from '../../hooks/useForm';
-import { useUpdateAvatar } from '../../hooks/useUpdateAvatar';
+import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
+import ConfirmOwnerChangeWarningModal from '../../../components/ConfirmOwnerChangeWarningModal';
+import Page from '../../../components/Page';
+import { useForm } from '../../../hooks/useForm';
+import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import AccountProfileForm from './AccountProfileForm';
 import ActionConfirmModal from './ActionConfirmModal';
 
diff --git a/apps/meteor/client/views/account/profile/AccountProfileRoute.tsx b/apps/meteor/client/views/account/profile/AccountProfileRoute.tsx
new file mode 100644
index 0000000000000..4f8b25b9adb98
--- /dev/null
+++ b/apps/meteor/client/views/account/profile/AccountProfileRoute.tsx
@@ -0,0 +1,17 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import AccountProfilePage from './AccountProfilePage';
+
+const AccountProfileRoute = (): ReactElement => {
+	const canViewProfile = useSetting('Accounts_AllowUserProfileChange');
+
+	if (!canViewProfile) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <AccountProfilePage />;
+};
+
+export default AccountProfileRoute;
diff --git a/apps/meteor/client/views/account/ActionConfirmModal.tsx b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
similarity index 96%
rename from apps/meteor/client/views/account/ActionConfirmModal.tsx
rename to apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
index 35b1a2208f6e3..126aa2901510b 100644
--- a/apps/meteor/client/views/account/ActionConfirmModal.tsx
+++ b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
@@ -2,7 +2,7 @@ import { Box, PasswordInput, TextInput, FieldGroup, Field } from '@rocket.chat/f
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useState, useCallback, FC } from 'react';
 
-import GenericModal from '../../components/GenericModal';
+import GenericModal from '../../../components/GenericModal';
 
 type ActionConfirmModalProps = {
 	isPassword: boolean;
diff --git a/apps/meteor/client/views/account/routes.tsx b/apps/meteor/client/views/account/routes.tsx
new file mode 100644
index 0000000000000..ab55dbd95c60e
--- /dev/null
+++ b/apps/meteor/client/views/account/routes.tsx
@@ -0,0 +1,34 @@
+import { lazy } from 'react';
+
+import { createRouteGroup } from '../../lib/createRouteGroup';
+
+export const registerAccountRoute = createRouteGroup(
+	'account',
+	'/account',
+	lazy(() => import('./AccountRouter')),
+);
+
+registerAccountRoute('/preferences', {
+	name: 'preferences',
+	component: lazy(() => import('./preferences/AccountPreferencesPage')),
+});
+
+registerAccountRoute('/profile', {
+	name: 'profile',
+	component: lazy(() => import('./profile/AccountProfileRoute')),
+});
+
+registerAccountRoute('/security', {
+	name: 'security',
+	component: lazy(() => import('./security/AccountSecurityRoute')),
+});
+
+registerAccountRoute('/integrations', {
+	name: 'integrations',
+	component: lazy(() => import('./integrations/AccountIntegrationsRoute')),
+});
+
+registerAccountRoute('/tokens', {
+	name: 'tokens',
+	component: lazy(() => import('./tokens/AccountTokensRoute')),
+});
diff --git a/apps/meteor/client/views/account/security/AccountSecurityRoute.tsx b/apps/meteor/client/views/account/security/AccountSecurityRoute.tsx
new file mode 100644
index 0000000000000..41da07aa5f330
--- /dev/null
+++ b/apps/meteor/client/views/account/security/AccountSecurityRoute.tsx
@@ -0,0 +1,19 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import AccountSecurityPage from './AccountSecurityPage';
+
+const AccountSecurityRoute = (): ReactElement => {
+	const isTwoFactorEnabled = useSetting('Accounts_TwoFactorAuthentication_Enabled');
+	const isE2EEnabled = useSetting('E2E_Enable');
+	const canViewSecurity = isTwoFactorEnabled || isE2EEnabled;
+
+	if (!canViewSecurity) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <AccountSecurityPage />;
+};
+
+export default AccountSecurityRoute;
diff --git a/apps/meteor/client/views/account/sidebarItems.ts b/apps/meteor/client/views/account/sidebarItems.ts
index 21fdce12f04ec..8ce98bc85e86b 100644
--- a/apps/meteor/client/views/account/sidebarItems.ts
+++ b/apps/meteor/client/views/account/sidebarItems.ts
@@ -8,35 +8,30 @@ export const {
 	itemsSubscription,
 } = createSidebarItems([
 	{
-		pathSection: 'account',
-		pathGroup: 'preferences',
+		href: 'preferences',
 		i18nLabel: 'Preferences',
 		icon: 'customize',
 	},
 	{
-		pathSection: 'account',
-		pathGroup: 'profile',
+		href: 'profile',
 		i18nLabel: 'Profile',
 		icon: 'user',
 		permissionGranted: (): boolean => settings.get('Accounts_AllowUserProfileChange'),
 	},
 	{
-		pathSection: 'account',
-		pathGroup: 'security',
+		href: 'security',
 		i18nLabel: 'Security',
 		icon: 'lock',
 		permissionGranted: (): boolean => settings.get('Accounts_TwoFactorAuthentication_Enabled') || settings.get('E2E_Enable'),
 	},
 	{
-		pathSection: 'account',
-		pathGroup: 'integrations',
+		href: 'integrations',
 		i18nLabel: 'Integrations',
 		icon: 'code',
 		permissionGranted: (): boolean => settings.get('Webdav_Integration_Enabled'),
 	},
 	{
-		pathSection: 'account',
-		pathGroup: 'tokens',
+		href: 'tokens',
 		i18nLabel: 'Personal_Access_Tokens',
 		icon: 'key',
 		permissionGranted: (): boolean => hasPermission('create-personal-access-tokens'),
diff --git a/apps/meteor/client/views/account/tokens/AccountTokensRoute.tsx b/apps/meteor/client/views/account/tokens/AccountTokensRoute.tsx
new file mode 100644
index 0000000000000..156ae90e3d509
--- /dev/null
+++ b/apps/meteor/client/views/account/tokens/AccountTokensRoute.tsx
@@ -0,0 +1,17 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+import AccountTokensPage from './AccountTokensPage';
+
+const AccountTokensRoute = (): ReactElement => {
+	const canCreateTokens = usePermission('create-personal-access-tokens');
+
+	if (!canCreateTokens) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <AccountTokensPage />;
+};
+
+export default AccountTokensRoute;
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 3e3c83355f4d1..057856b477317 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -34,6 +34,7 @@
   "access-setting-permissions_description": "Permission to modify setting-based permissions",
   "Accessing_permissions": "Accessing permissions",
   "Account_SID": "Account SID",
+  "Account": "Account",
   "Accounts": "Accounts",
   "Accounts_Description": "Modify workspace member account settings.",
   "Accounts_Admin_Email_Approval_Needed_Default": "<p>The user <b>[name] ([email])</b> has been registered.</p><p>Please check \"Administration -> Users\" to activate or delete it.</p>",
diff --git a/apps/meteor/tests/e2e/08-resolutions.spec.ts b/apps/meteor/tests/e2e/08-resolutions.spec.ts
index 26fdc3042f3fc..c1197a1814a5b 100644
--- a/apps/meteor/tests/e2e/08-resolutions.spec.ts
+++ b/apps/meteor/tests/e2e/08-resolutions.spec.ts
@@ -3,11 +3,13 @@ import { test, expect, Browser } from '@playwright/test';
 import MainContent from './utils/pageobjects/MainContent';
 import SideNav from './utils/pageobjects/SideNav';
 import LoginPage from './utils/pageobjects/LoginPage';
+import Global from './utils/pageobjects/Global';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 let loginPage: LoginPage;
 let mainContent: MainContent;
 let sideNav: SideNav;
+let global: Global;
 
 async function initConfig(
 	browser: Browser,
@@ -23,6 +25,7 @@ async function initConfig(
 	await loginPage.login(adminLogin);
 	sideNav = new SideNav(page);
 	mainContent = new MainContent(page);
+	global = new Global(page);
 	return { loginPage, sideNav, mainContent };
 }
 
@@ -90,19 +93,19 @@ test.describe('[Resolution]', function () {
 				test('expect close the sidenav when press the preferences link', async () => {
 					await sideNav.preferences().click();
 					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await sideNav.isSideBarOpen()).toBeTruthy;
+					await expect(await global.flexNav().isVisible()).toBeFalsy;
 				});
 
 				test('expect close the sidenav when press the profile link', async () => {
 					await sideNav.profile().click();
 					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await sideNav.isSideBarOpen()).toBeTruthy;
+					await expect(await sideNav.flexNav().isVisible()).toBeFalsy;
 				});
 
 				test('expect close the preferences nav', async () => {
 					await sideNav.preferencesClose().click();
 					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await sideNav.isSideBarOpen()).toBeFalsy;
+					await expect(await sideNav.flexNav().isVisible()).toBeTruthy;
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
index 3df941244c7ad..759bc14636fa1 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
@@ -3,14 +3,6 @@ import { Locator, expect } from '@playwright/test';
 import BasePage from './BasePage';
 
 export default class Administration extends BasePage {
-	public flexNav(): Locator {
-		return this.getPage().locator('.flex-nav');
-	}
-
-	public flexNavContent(): Locator {
-		return this.getPage().locator('.flex-nav');
-	}
-
 	public settingsSearch(): Locator {
 		return this.getPage().locator('input[type=search]');
 	}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
index 189aa471b42bd..18146873ba526 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
@@ -48,6 +48,11 @@ class Global extends BasePage {
 		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--success');
 	}
 
+	// Flexnav refers account sidebar and admin sidebar
+	public flexNav(): Locator {
+		return this.getPage().locator('.flex-nav');
+	}
+
 	public async confirmPopup(): Promise<void> {
 		await this.modalConfirm().waitFor();
 		// browser.pause(500);
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
index 9b44ef109993e..6d7ec1fdd9a82 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
@@ -101,6 +101,10 @@ class SideNav extends BasePage {
 		return this.getPage().locator('.sidebar');
 	}
 
+	public flexNav(): Locator {
+		return this.getPage().locator('.flex-nav');
+	}
+
 	// Toolbar
 	public spotlightSearchIcon(): Locator {
 		return this.getPage().locator('[data-qa="sidebar-search"]');
@@ -161,7 +165,7 @@ class SideNav extends BasePage {
 	}
 
 	public burgerBtn(): Locator {
-		return this.getPage().locator('.burger, [aria-label="Open_menu"]');
+		return this.getPage().locator('[data-qa-id="burger-menu"]');
 	}
 
 	public sidebarWrap(): Locator {
diff --git a/packages/ui-contexts/src/LayoutContext.ts b/packages/ui-contexts/src/LayoutContext.ts
index 0bfd009cedef4..874a0add89940 100644
--- a/packages/ui-contexts/src/LayoutContext.ts
+++ b/packages/ui-contexts/src/LayoutContext.ts
@@ -10,6 +10,7 @@ export type LayoutContextValue = {
 	showTopNavbarEmbeddedLayout: boolean;
 	isMobile: boolean;
 	sidebar: any;
+	sidenav: any;
 	size: SizeLayout;
 	contextualBarExpanded: boolean;
 	contextualBarPosition: 'absolute' | 'relative' | 'fixed';
@@ -20,6 +21,7 @@ export const LayoutContext = createContext<LayoutContextValue>({
 	showTopNavbarEmbeddedLayout: false,
 	isMobile: false,
 	sidebar: {},
+	sidenav: {},
 	size: {
 		sidebar: '380px',
 		contextualBar: '380px',

From 22383aaab17fa9fc66fc13f6112a07d78fc1d3e9 Mon Sep 17 00:00:00 2001
From: Diego Sampaio <chinello@gmail.com>
Date: Mon, 13 Jun 2022 14:37:30 -0300
Subject: [PATCH 12/36] Chore: Fix version on develop branch (#25842)

---
 apps/meteor/.docker/Dockerfile.rhel   | 2 +-
 apps/meteor/app/utils/rocketchat.info | 2 +-
 apps/meteor/package.json              | 2 +-
 package.json                          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/.docker/Dockerfile.rhel b/apps/meteor/.docker/Dockerfile.rhel
index 7ee11ce244155..f4591110f5300 100644
--- a/apps/meteor/.docker/Dockerfile.rhel
+++ b/apps/meteor/.docker/Dockerfile.rhel
@@ -1,6 +1,6 @@
 FROM registry.access.redhat.com/ubi8/nodejs-12
 
-ENV RC_VERSION 5.0.0
+ENV RC_VERSION 5.0.0-develop
 
 MAINTAINER buildmaster@rocket.chat
 
diff --git a/apps/meteor/app/utils/rocketchat.info b/apps/meteor/app/utils/rocketchat.info
index 5c57c10153f0d..a4ca0bd04a13b 100644
--- a/apps/meteor/app/utils/rocketchat.info
+++ b/apps/meteor/app/utils/rocketchat.info
@@ -1,3 +1,3 @@
 {
-	"version": "5.0.0"
+	"version": "5.0.0-develop"
 }
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index e6df684266083..25e7677f20ed3 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/meteor",
 	"description": "The Ultimate Open Source WebChat Platform",
-	"version": "5.0.0",
+	"version": "5.0.0-develop",
 	"private": true,
 	"author": {
 		"name": "Rocket.Chat",
diff --git a/package.json b/package.json
index 36f1c2c2d07c3..b1b19ff5cf1a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "rocket.chat",
-	"version": "5.0.0",
+	"version": "5.0.0-develop",
 	"description": "Rocket.Chat Monorepo",
 	"main": "index.js",
 	"private": true,

From 3c1bc073ea287775ef6debbd10f9650d576053a0 Mon Sep 17 00:00:00 2001
From: Pierre Lehnen <55164754+pierre-lehnen-rc@users.noreply.github.com>
Date: Mon, 13 Jun 2022 15:02:39 -0300
Subject: [PATCH 13/36] Chore: Remove unused tokenpass integration code 
 (#25831)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 apps/meteor/app/api/server/v1/misc.ts         |   2 -
 .../server/functions/canAccessRoom.ts         |   1 -
 .../server/functions/saveRoomTokens.js        |  14 ---
 .../server/methods/saveRoomSettings.js        |  16 +--
 .../lib/server/methods/createPrivateGroup.js  |  16 ---
 .../meteor/app/lib/server/methods/joinRoom.ts |  25 ++--
 apps/meteor/app/models/server/models/Rooms.js |  45 -------
 apps/meteor/app/models/server/models/Users.js |  24 ----
 apps/meteor/app/tokenpass/README.md           |   3 -
 .../app/tokenpass/client/channelSettings.css  |  47 -------
 apps/meteor/app/tokenpass/client/index.js     |   8 --
 .../app/tokenpass/client/login-button.css     |  14 ---
 apps/meteor/app/tokenpass/client/startup.js   |  21 ----
 apps/meteor/app/tokenpass/client/styles.css   |  12 --
 .../tokenpass/client/tokenChannelsList.html   |  14 ---
 .../app/tokenpass/client/tokenChannelsList.js |  33 -----
 .../client/tokenpassChannelSettings.html      |  39 ------
 .../client/tokenpassChannelSettings.js        | 119 ------------------
 apps/meteor/app/tokenpass/lib/common.js       |   2 +-
 apps/meteor/app/tokenpass/server/Tokenpass.js |   8 --
 .../app/tokenpass/server/cronRemoveUsers.js   |  52 --------
 .../getProtectedTokenpassBalances.js          |  25 ----
 .../functions/getPublicTokenpassBalances.js   |  25 ----
 .../functions/saveRoomTokensMinimumBalance.js |  17 ---
 .../functions/updateUserTokenpassBalances.js  |  18 ---
 apps/meteor/app/tokenpass/server/index.js     |   9 --
 .../server/methods/findTokenChannels.js       |  27 ----
 .../server/methods/getChannelTokenpass.js     |  26 ----
 .../roomAccessValidator.compatibility.js      |  18 ---
 .../roomAccessValidator.internalService.ts    |  21 ----
 apps/meteor/app/tokenpass/server/startup.js   |  23 ----
 apps/meteor/app/ui-sidenav/client/roomList.js |   7 --
 .../server/functions/getDefaultUserFields.ts  |   1 -
 apps/meteor/lib/rooms/adminFields.ts          |   1 -
 .../rocketchat-i18n/i18n/en.i18n.json         |   3 -
 .../server/modules/watchers/publishFields.ts  |   1 -
 .../meteor/server/sdk/types/IAuthorization.ts |   2 +-
 .../sdk/types/IAuthorizationTokenpass.ts      |   5 -
 .../services/authorization/canAccessRoom.ts   |   2 -
 .../authorization/canAccessRoomTokenpass.ts   |  14 ---
 .../server/services/authorization/service.ts  |   4 +-
 apps/meteor/server/services/startup.ts        |   2 -
 .../meteor/server/startup/migrations/index.ts |   1 +
 apps/meteor/server/startup/migrations/v269.ts |  10 ++
 packages/core-typings/src/IRoom.ts            |   8 --
 packages/rest-typings/src/v1/rooms.ts         |   5 -
 .../ServerContext/methods/saveRoomSettings.ts |   1 -
 47 files changed, 22 insertions(+), 769 deletions(-)
 delete mode 100644 apps/meteor/app/channel-settings/server/functions/saveRoomTokens.js
 delete mode 100644 apps/meteor/app/tokenpass/README.md
 delete mode 100644 apps/meteor/app/tokenpass/client/channelSettings.css
 delete mode 100644 apps/meteor/app/tokenpass/client/login-button.css
 delete mode 100644 apps/meteor/app/tokenpass/client/startup.js
 delete mode 100644 apps/meteor/app/tokenpass/client/styles.css
 delete mode 100644 apps/meteor/app/tokenpass/client/tokenChannelsList.html
 delete mode 100644 apps/meteor/app/tokenpass/client/tokenChannelsList.js
 delete mode 100644 apps/meteor/app/tokenpass/client/tokenpassChannelSettings.html
 delete mode 100644 apps/meteor/app/tokenpass/client/tokenpassChannelSettings.js
 delete mode 100644 apps/meteor/app/tokenpass/server/Tokenpass.js
 delete mode 100644 apps/meteor/app/tokenpass/server/cronRemoveUsers.js
 delete mode 100644 apps/meteor/app/tokenpass/server/functions/getProtectedTokenpassBalances.js
 delete mode 100644 apps/meteor/app/tokenpass/server/functions/getPublicTokenpassBalances.js
 delete mode 100644 apps/meteor/app/tokenpass/server/functions/saveRoomTokensMinimumBalance.js
 delete mode 100644 apps/meteor/app/tokenpass/server/functions/updateUserTokenpassBalances.js
 delete mode 100644 apps/meteor/app/tokenpass/server/methods/findTokenChannels.js
 delete mode 100644 apps/meteor/app/tokenpass/server/methods/getChannelTokenpass.js
 delete mode 100644 apps/meteor/app/tokenpass/server/roomAccessValidator.compatibility.js
 delete mode 100644 apps/meteor/app/tokenpass/server/roomAccessValidator.internalService.ts
 delete mode 100644 apps/meteor/server/sdk/types/IAuthorizationTokenpass.ts
 delete mode 100644 apps/meteor/server/services/authorization/canAccessRoomTokenpass.ts
 create mode 100644 apps/meteor/server/startup/migrations/v269.ts

diff --git a/apps/meteor/app/api/server/v1/misc.ts b/apps/meteor/app/api/server/v1/misc.ts
index 841cca8e885ba..38e884bd66008 100644
--- a/apps/meteor/app/api/server/v1/misc.ts
+++ b/apps/meteor/app/api/server/v1/misc.ts
@@ -104,8 +104,6 @@ import { SystemLogger } from '../../../../server/lib/logger/system';
  *                            type: object
  *                          gitlab:
  *                            type: object
- *                          tokenpass:
- *                            type: object
  *                          password:
  *                            type: object
  *                            properties:
diff --git a/apps/meteor/app/authorization/server/functions/canAccessRoom.ts b/apps/meteor/app/authorization/server/functions/canAccessRoom.ts
index 7b0361f7719d4..16e0a76b51e5f 100644
--- a/apps/meteor/app/authorization/server/functions/canAccessRoom.ts
+++ b/apps/meteor/app/authorization/server/functions/canAccessRoom.ts
@@ -8,7 +8,6 @@ export const roomAccessAttributes = {
 	t: 1,
 	teamId: 1,
 	prid: 1,
-	tokenpass: 1,
 };
 
 export const canAccessRoom = (...args: Parameters<IAuthorization['canAccessRoom']>): boolean => Promise.await(canAccessRoomAsync(...args));
diff --git a/apps/meteor/app/channel-settings/server/functions/saveRoomTokens.js b/apps/meteor/app/channel-settings/server/functions/saveRoomTokens.js
deleted file mode 100644
index 400da0386611f..0000000000000
--- a/apps/meteor/app/channel-settings/server/functions/saveRoomTokens.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Match } from 'meteor/check';
-
-import { Rooms } from '../../../models';
-
-export const saveRoomTokenpass = function (rid, tokenpass) {
-	if (!Match.test(rid, String)) {
-		throw new Meteor.Error('invalid-room', 'Invalid room', {
-			function: 'RocketChat.saveRoomTokens',
-		});
-	}
-
-	return Rooms.setTokenpassById(rid, tokenpass);
-};
diff --git a/apps/meteor/app/channel-settings/server/methods/saveRoomSettings.js b/apps/meteor/app/channel-settings/server/methods/saveRoomSettings.js
index 3462c720a5700..0027ba0856837 100644
--- a/apps/meteor/app/channel-settings/server/methods/saveRoomSettings.js
+++ b/apps/meteor/app/channel-settings/server/methods/saveRoomSettings.js
@@ -1,5 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import { Match, check } from 'meteor/check';
+import { Match } from 'meteor/check';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
 
 import { setRoomAvatar } from '../../../lib/server/functions/setRoomAvatar';
@@ -15,7 +15,6 @@ import { saveRoomType } from '../functions/saveRoomType';
 import { saveRoomReadOnly } from '../functions/saveRoomReadOnly';
 import { saveReactWhenReadOnly } from '../functions/saveReactWhenReadOnly';
 import { saveRoomSystemMessages } from '../functions/saveRoomSystemMessages';
-import { saveRoomTokenpass } from '../functions/saveRoomTokens';
 import { saveRoomEncrypted } from '../functions/saveRoomEncrypted';
 import { saveStreamingOptions } from '../functions/saveStreamingOptions';
 import { Team } from '../../../../server/sdk';
@@ -36,7 +35,6 @@ const fields = [
 	'systemMessages',
 	'default',
 	'joinCode',
-	'tokenpass',
 	'streamingOptions',
 	'retentionEnabled',
 	'retentionMaxAge',
@@ -195,18 +193,6 @@ const settingSavers = {
 			Team.update(user._id, room.teamId, { type, updateRoom: false });
 		}
 	},
-	tokenpass({ value, rid }) {
-		check(value, {
-			require: String,
-			tokens: [
-				{
-					token: String,
-					balance: String,
-				},
-			],
-		});
-		saveRoomTokenpass(rid, value);
-	},
 	streamingOptions({ value, rid }) {
 		saveStreamingOptions(rid, value);
 	},
diff --git a/apps/meteor/app/lib/server/methods/createPrivateGroup.js b/apps/meteor/app/lib/server/methods/createPrivateGroup.js
index c274cca5840d7..a9b4f62406f1a 100644
--- a/apps/meteor/app/lib/server/methods/createPrivateGroup.js
+++ b/apps/meteor/app/lib/server/methods/createPrivateGroup.js
@@ -19,22 +19,6 @@ Meteor.methods({
 			throw new Meteor.Error('error-not-allowed', 'Not allowed', { method: 'createPrivateGroup' });
 		}
 
-		// validate extra data schema
-		check(
-			extraData,
-			Match.ObjectIncluding({
-				tokenpass: Match.Maybe({
-					require: String,
-					tokens: [
-						{
-							token: String,
-							balance: String,
-						},
-					],
-				}),
-			}),
-		);
-
 		return createRoom('p', name, Meteor.user() && Meteor.user().username, members, readOnly, {
 			customFields,
 			...extraData,
diff --git a/apps/meteor/app/lib/server/methods/joinRoom.ts b/apps/meteor/app/lib/server/methods/joinRoom.ts
index fad1bb88dea0d..dcde906be1afc 100644
--- a/apps/meteor/app/lib/server/methods/joinRoom.ts
+++ b/apps/meteor/app/lib/server/methods/joinRoom.ts
@@ -3,7 +3,6 @@ import { check } from 'meteor/check';
 
 import { hasPermission, canAccessRoom } from '../../../authorization/server';
 import { Rooms } from '../../../models/server';
-import { Tokenpass, updateUserTokenpassBalances } from '../../../tokenpass/server';
 import { addUserToRoom } from '../functions';
 import { roomCoordinator } from '../../../../server/lib/rooms/roomCoordinator';
 import { RoomMemberActions } from '../../../../definition/IRoomTypeConfig';
@@ -28,23 +27,13 @@ Meteor.methods({
 			throw new Meteor.Error('error-not-allowed', 'Not allowed', { method: 'joinRoom' });
 		}
 
-		// TODO we should have a 'beforeJoinRoom' call back so external services can do their own validations
-
-		if (room.tokenpass && user && user.services && user.services.tokenpass) {
-			const balances = updateUserTokenpassBalances(user);
-
-			if (!Tokenpass.validateAccess(room.tokenpass, balances)) {
-				throw new Meteor.Error('error-not-allowed', 'Token required', { method: 'joinRoom' });
-			}
-		} else {
-			if (!canAccessRoom(room, user)) {
-				throw new Meteor.Error('error-not-allowed', 'Not allowed', { method: 'joinRoom' });
-			}
-			if (room.joinCodeRequired === true && code !== room.joinCode && !hasPermission(user._id, 'join-without-join-code')) {
-				throw new Meteor.Error('error-code-invalid', 'Invalid Room Password', {
-					method: 'joinRoom',
-				});
-			}
+		if (!canAccessRoom(room, user)) {
+			throw new Meteor.Error('error-not-allowed', 'Not allowed', { method: 'joinRoom' });
+		}
+		if (room.joinCodeRequired === true && code !== room.joinCode && !hasPermission(user._id, 'join-without-join-code')) {
+			throw new Meteor.Error('error-code-invalid', 'Invalid Room Password', {
+				method: 'joinRoom',
+			});
 		}
 
 		return addUserToRoom(rid, user);
diff --git a/apps/meteor/app/models/server/models/Rooms.js b/apps/meteor/app/models/server/models/Rooms.js
index 593fdab626da8..e86f9fa054c01 100644
--- a/apps/meteor/app/models/server/models/Rooms.js
+++ b/apps/meteor/app/models/server/models/Rooms.js
@@ -17,9 +17,6 @@ export class Rooms extends Base {
 		this.tryEnsureIndex({ t: 1 });
 		this.tryEnsureIndex({ 'u._id': 1 });
 		this.tryEnsureIndex({ ts: 1 });
-		// Tokenpass
-		this.tryEnsureIndex({ 'tokenpass.tokens.token': 1 }, { sparse: true });
-		this.tryEnsureIndex({ tokenpass: 1 }, { sparse: true });
 		// discussions
 		this.tryEnsureIndex({ prid: 1 }, { sparse: true });
 		this.tryEnsureIndex({ fname: 1 }, { sparse: true });
@@ -95,38 +92,6 @@ export class Rooms extends Base {
 		return this.update(query, update);
 	}
 
-	findByTokenpass(tokens) {
-		const query = {
-			'tokenpass.tokens.token': {
-				$in: tokens,
-			},
-		};
-
-		return this._db.find(query).fetch();
-	}
-
-	setTokensById(_id, tokens) {
-		const update = {
-			$set: {
-				'tokenpass.tokens.token': tokens,
-			},
-		};
-
-		return this.update({ _id }, update);
-	}
-
-	findAllTokenChannels() {
-		const query = {
-			tokenpass: { $exists: true },
-		};
-		const options = {
-			fields: {
-				tokenpass: 1,
-			},
-		};
-		return this._db.find(query, options);
-	}
-
 	setReactionsInLastMessage(roomId, lastMessage) {
 		return this.update({ _id: roomId }, { $set: { 'lastMessage.reactions': lastMessage.reactions } });
 	}
@@ -242,16 +207,6 @@ export class Rooms extends Base {
 		return this.update({ _id }, update);
 	}
 
-	setTokenpassById(_id, tokenpass) {
-		const update = {
-			$set: {
-				tokenpass,
-			},
-		};
-
-		return this.update({ _id }, update);
-	}
-
 	setReadOnlyById(_id, readOnly) {
 		const query = {
 			_id,
diff --git a/apps/meteor/app/models/server/models/Users.js b/apps/meteor/app/models/server/models/Users.js
index 3e8eb705d3d38..dd42ac05b0555 100644
--- a/apps/meteor/app/models/server/models/Users.js
+++ b/apps/meteor/app/models/server/models/Users.js
@@ -338,30 +338,6 @@ export class Users extends Base {
 		return this.findOne(query, options);
 	}
 
-	setTokenpassTcaBalances(_id, tcaBalances) {
-		const update = {
-			$set: {
-				'services.tokenpass.tcaBalances': tcaBalances,
-			},
-		};
-
-		return this.update(_id, update);
-	}
-
-	getTokenBalancesByUserId(userId) {
-		const query = {
-			_id: userId,
-		};
-
-		const options = {
-			fields: {
-				'services.tokenpass.tcaBalances': 1,
-			},
-		};
-
-		return this.findOne(query, options);
-	}
-
 	roleBaseQuery(userId) {
 		return { _id: userId };
 	}
diff --git a/apps/meteor/app/tokenpass/README.md b/apps/meteor/app/tokenpass/README.md
deleted file mode 100644
index 8eb3a0c7a37ab..0000000000000
--- a/apps/meteor/app/tokenpass/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tokenpass OAuth Flow
-
-An implementation of the Tokenpass OAuth flow with Tokenpass using RocketChat CustomOAuth. See the [Tokenpass API Reference](http://apidocs.tokenly.com/tokenpass/#oauth-integration) for more details.
diff --git a/apps/meteor/app/tokenpass/client/channelSettings.css b/apps/meteor/app/tokenpass/client/channelSettings.css
deleted file mode 100644
index 08c0275b14c4f..0000000000000
--- a/apps/meteor/app/tokenpass/client/channelSettings.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.channelSettings-tokenpass {
-	flex-direction: column;
-
-	&.tokenpass__editing {
-		& .button.edit {
-			visibility: hidden !important;
-		}
-	}
-
-	& .details {
-		padding-left: 1rem;
-	}
-
-	& button {
-		margin: 0 5px 0 0 !important;
-	}
-
-	& button[disabled] {
-		opacity: 0.5;
-	}
-
-	& button[disabled]:hover {
-		opacity: 0.5;
-	}
-
-	& .js-edit {
-		float: right;
-	}
-
-	& .chip-container {
-		margin: 0;
-
-		& > li {
-			padding: 2px 8px;
-		}
-	}
-
-	&__form .button {
-		visibility: visible !important;
-	}
-
-	&__input {
-		height: auto !important;
-		margin: 0 0 10px !important;
-		padding: 10px !important;
-	}
-}
diff --git a/apps/meteor/app/tokenpass/client/index.js b/apps/meteor/app/tokenpass/client/index.js
index e51844feeee84..e44dbe195eff9 100644
--- a/apps/meteor/app/tokenpass/client/index.js
+++ b/apps/meteor/app/tokenpass/client/index.js
@@ -1,9 +1 @@
 import '../lib/common';
-import './startup';
-import './tokenChannelsList.html';
-import './tokenChannelsList';
-import './tokenpassChannelSettings.html';
-import './tokenpassChannelSettings';
-import './login-button.css';
-import './channelSettings.css';
-import './styles.css';
diff --git a/apps/meteor/app/tokenpass/client/login-button.css b/apps/meteor/app/tokenpass/client/login-button.css
deleted file mode 100644
index 1171df2633ccd..0000000000000
--- a/apps/meteor/app/tokenpass/client/login-button.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.icon-tokenpass.service-icon {
-	display: inline-block;
-
-	width: 25px;
-	height: 1em;
-
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAddEVYdFRpdGxlAFRva2VubHlfTG9nb19JY29uX1doaXRldF224QAAAapJREFUOI2lk89OE1EUxn9nrumS2GZIhiaFBFekQsILsME/JC7AF2DVpT4BBI3GNRvZoG58Ad0SdCEvwKJW3ehCQmfajB1YAr33uJiZOg2hbeK3u1/O/d1zvnuvUFCr1SqVK/4h6EruqdAAVJR3/yrlKOnF9+v1+mXueEVQpeI/LUJulq6Uy/6TojMAhWE4raLb4yF5U/qs2+0G10Aq8hLl9sQgmOo793wIFEXRIkoj834C8QhAnNWA0jjpdJYAbgGosgsY4EqdfYQxDwTuAmDlBwBG99O9fNW+OfCMbQIlz+kusCrtdmcD0Q/ZaSeoe2iMuRg1k7W2hHgHwGzamTyWdhh9AxbGRzJS37202/+WymkUrYvyMTN+o25t3GiXIsZYdwjMpRQ2BCAMo08Kq6RhLxbDVivvAcToJlwPW+DzzExwTyC9fqcck97cL2AK8LPTGgCivM0aioFz4A5gPWE5CIKmBxAEQRP0TVY4n0NukJ9BAN1P9xZetu33t4DeqGyGJJyhupMvB6BardZD5dXEIMeLarU6+AFDvz9J4tcgRxNgviTJn72i8RdLE6KbF5O00AAAAABJRU5ErkJggg==);
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-.button.external-login.tokenpass {
-	background-color: #4170a0;
-}
diff --git a/apps/meteor/app/tokenpass/client/startup.js b/apps/meteor/app/tokenpass/client/startup.js
deleted file mode 100644
index 164e2cc50b872..0000000000000
--- a/apps/meteor/app/tokenpass/client/startup.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-
-import { ChannelSettings } from '../../channel-settings';
-import { Rooms } from '../../models';
-
-Meteor.startup(function () {
-	ChannelSettings.addOption({
-		group: ['room'],
-		id: 'tokenpass',
-		template: 'channelSettings__tokenpass',
-		validation(data) {
-			if (data && data.rid) {
-				const room = Rooms.findOne(data.rid, { fields: { tokenpass: 1 } });
-
-				return room && room.tokenpass;
-			}
-
-			return false;
-		},
-	});
-});
diff --git a/apps/meteor/app/tokenpass/client/styles.css b/apps/meteor/app/tokenpass/client/styles.css
deleted file mode 100644
index 126731991bd74..0000000000000
--- a/apps/meteor/app/tokenpass/client/styles.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.icon-tokenpass {
-	display: inline-block;
-
-	width: 24px;
-	height: 0.8em;
-
-	margin-bottom: -1px;
-
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MzIgMzgxLjUiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDE3MGEwO308L3N0eWxlPjwvZGVmcz48dGl0bGU+VG9rZW5seV9JY29uPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQyOC4zMSwxNzcsMzM0LjA3LDEzLjc2QTI3LjUyLDI3LjUyLDAsMCwwLDMxMC4yNCwwaC03OS40VjEzMy44OWg3NFYxMTIuODRoMTcuNzJsMTguMTMsMzEuNGExMi41MiwxMi41MiwwLDAsMSwwLDEyLjcxLDEyLjc1LDEyLjc1LDAsMCwxLTExLjIyLDYuNTRIMTAyLjU2YTEyLjc1LDEyLjc1LDAsMCwxLTExLjIyLTYuNTQsMTIuNTIsMTIuNTIsMCwwLDEsMC0xMi43MWwxOC4xMy0zMS40aDE3LjcydjIxLjA1aDc0VjBoLTc5LjRBMjcuNTIsMjcuNTIsMCwwLDAsOTcuOTMsMTMuNzZMMy42OSwxNzdhMjcuNTIsMjcuNTIsMCwwLDAsMCwyNy41Mkw5Ny45MywzNjcuNzRhMjcuNTIsMjcuNTIsMCwwLDAsMjMuODQsMTMuNzZoNzkuNFYyNDcuNjFoLTc0djIxLjA2SDEwOS40N2wtMTguMTMtMzEuNGExMi41MiwxMi41MiwwLDAsMSwwLTEyLjcxQTEyLjc1LDEyLjc1LDAsMCwxLDEwMi41NiwyMThIMzI5LjQ0YTEyLjc1LDEyLjc1LDAsMCwxLDExLjIyLDYuNTQsMTIuNTIsMTIuNTIsMCwwLDEsMCwxMi43MWwtMTguMTMsMzEuNEgzMDQuODFWMjQ3LjYxaC03NFYzODEuNWg3OS40YTI3LjUyLDI3LjUyLDAsMCwwLDIzLjg0LTEzLjc2bDk0LjI0LTE2My4yM0EyNy41MiwyNy41MiwwLDAsMCw0MjguMzEsMTc3WiIvPjwvZz48L2c+PC9zdmc+);
-	background-repeat: no-repeat;
-	background-position: center center;
-}
diff --git a/apps/meteor/app/tokenpass/client/tokenChannelsList.html b/apps/meteor/app/tokenpass/client/tokenChannelsList.html
deleted file mode 100644
index ae892bfd614a8..0000000000000
--- a/apps/meteor/app/tokenpass/client/tokenChannelsList.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<template name="tokenChannelsList">
-	<h3 class="rooms-list__type">
-		Token Channels
-	</h3>
-	<ul class="rooms-list__list">
-		<ul class="rooms-list__list">
-			{{#each room in rooms}}
-				{{> chatRoomItem room }}
-			{{else}}
-				<p class="rooms-list__empty-room">{{_ "No_channels_yet" }}</p>
-			{{/each}}
-		</ul>
-	</ul>
-</template>
diff --git a/apps/meteor/app/tokenpass/client/tokenChannelsList.js b/apps/meteor/app/tokenpass/client/tokenChannelsList.js
deleted file mode 100644
index 032ec605985d9..0000000000000
--- a/apps/meteor/app/tokenpass/client/tokenChannelsList.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Tracker } from 'meteor/tracker';
-import { Template } from 'meteor/templating';
-
-import { Subscriptions } from '../../models';
-
-Template.tokenChannelsList.helpers({
-	rooms() {
-		return Template.instance()
-			.tokenpassRooms.get()
-			.filter((room) => Subscriptions.find({ rid: room._id }).count() === 0);
-	},
-});
-
-Template.tokenChannelsList.onRendered(function () {
-	Tracker.autorun((c) => {
-		const user = Meteor.user();
-		if (user && user.services && user.services.tokenpass) {
-			c.stop();
-
-			Meteor.call('findTokenChannels', (error, result) => {
-				if (!error) {
-					this.tokenpassRooms.set(result);
-				}
-			});
-		}
-	});
-});
-
-Template.tokenChannelsList.onCreated(function () {
-	this.tokenpassRooms = new ReactiveVar([]);
-});
diff --git a/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.html b/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.html
deleted file mode 100644
index 2ecda3b6d6262..0000000000000
--- a/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<template name="channelSettings__tokenpass">
-	<li class="channelSettings-tokenpass setting-block {{editing}}">
-		<div class="header">
-			<button type="button" class="rc-button rc-button--secondary edit js-edit">
-				<i class="icon-pencil"></i>
-			</button>
-
-			<label>Tokenpass</label>
-		</div>
-		<div class="details">
-			<div class="boolean">
-				<label>{{requiredLabel}}</label>
-				<div class="setting-block">
-					<div class="input checkbox toggle">
-						<input type="checkbox" id="requireAllTokens" name="requireAllTokens" {{requiredChecked}} {{requiredDisabled}}>
-						<label for="requireAllTokens"></label>
-					</div>
-				</div>
-			</div>
-
-			{{#if list}}
-				<ul class="chip-container">
-					{{#each list}}
-					<li class="js-remove" title="balance: {{balance}}" aria-label="{{token}} {{balance}}">{{#if editing}}<i class="icon-cancel-circled"></i>{{/if}}{{token}}</li>
-					{{/each}}
-				</ul>
-			{{/if}}
-			{{#if editing}}
-				<form class="channelSettings-tokenpass__form">
-					<input type="text" name="token" class="channelSettings-tokenpass__input content-background-color editing" placeholder="{{_ "Token_required"}}"/>
-					<input type="number" min="0" name="balance" class="channelSettings-tokenpass__input content-background-color editing" placeholder="{{_ "Minimum_balance"}}" />
-					<button type="button" class="rc-button rc-button--secondary js-add" title="{{_ 'Add'}}" {{addDisabled}}><i class="icon-plus"></i></button>
-					<button type="button" class="rc-button rc-button--secondary js-cancel" title="{{_ 'Cancel'}}" >{{_ "Cancel"}}</button>
-					{{#if save}}<button type="button" class="rc-button rc-button--primary js-save">{{_ "Save"}}</button>{{/if}}
-				</form>
-			{{/if}}
-		</div>
-	</li>
-</template>
diff --git a/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.js b/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.js
deleted file mode 100644
index c92260c88a048..0000000000000
--- a/apps/meteor/app/tokenpass/client/tokenpassChannelSettings.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Template } from 'meteor/templating';
-import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-
-import { t } from '../../utils';
-import { ChatRoom } from '../../models';
-import { handleError } from '../../../client/lib/utils/handleError';
-import { dispatchToastMessage } from '../../../client/lib/toast';
-
-Template.channelSettings__tokenpass.helpers({
-	addDisabled() {
-		const { balance, token } = Template.instance();
-		return balance.get() && token.get() ? '' : 'disabled';
-	},
-	list() {
-		return Template.instance().list.get();
-	},
-	save() {
-		const { list, initial } = Template.instance();
-		return JSON.stringify(list.get()) !== JSON.stringify(initial);
-	},
-	editing() {
-		return Template.instance().editing.get() ? 'tokenpass__editing' : '';
-	},
-	requiredChecked() {
-		return Template.instance().requireAll.get() ? 'checked' : '';
-	},
-	requiredLabel() {
-		return Template.instance().requireAll.get() ? t('Require_all_tokens') : t('Require_any_token');
-	},
-	requiredDisabled() {
-		return !Template.instance().editing.get() ? 'disabled' : '';
-	},
-	editDisabled() {
-		return Template.instance().editing.get() ? 'disabled' : '';
-	},
-});
-
-Template.channelSettings__tokenpass.onCreated(function () {
-	const room = ChatRoom.findOne(this.data.rid, { fields: { tokenpass: 1 } });
-
-	this.editing = new ReactiveVar(false);
-	this.initial = room.tokenpass;
-	this.requireAll = new ReactiveVar(room.tokenpass.require === 'all');
-	this.list = new ReactiveVar(this.initial.tokens);
-	this.token = new ReactiveVar('');
-	this.balance = new ReactiveVar('');
-});
-
-Template.channelSettings__tokenpass.events({
-	'click .js-edit'(e, i) {
-		i.editing.set(true);
-	},
-	'input [name=token]'(e, i) {
-		i.token.set(e.target.value);
-	},
-	'input [name=balance]'(e, i) {
-		i.balance.set(e.target.value);
-	},
-	'click .js-add'(e, i) {
-		e.preventDefault();
-		const instance = Template.instance();
-		const { balance, token, list } = instance;
-		list.set([...list.get().filter((t) => t.token !== token), { token: token.get(), balance: balance.get() }]);
-
-		[...i.findAll('input')].forEach((el) => {
-			el.value = '';
-		});
-		return balance.set('') && token.set('');
-	},
-	'click .js-remove'(e, instance) {
-		e.preventDefault();
-		const { list, editing } = instance;
-
-		if (!editing.get()) {
-			return;
-		}
-		list.set(list.get().filter((t) => t.token !== this.token));
-	},
-	'click .js-save'(e, i) {
-		e.preventDefault();
-
-		const tokenpass = {
-			require: i.find('[name=requireAllTokens]').checked ? 'all' : 'any',
-			tokens: i.list.get(),
-		};
-
-		Meteor.call('saveRoomSettings', this.rid, 'tokenpass', tokenpass, function (err) {
-			if (err) {
-				return handleError(err);
-			}
-			i.editing.set(false);
-			i.token.set('');
-			i.balance.set('');
-			i.initial = tokenpass;
-			[...i.findAll('input')].forEach((el) => {
-				el.value = '';
-			});
-			return dispatchToastMessage({
-				type: 'success',
-				message: TAPi18n.__('Room_tokenpass_config_changed_successfully'),
-			});
-		});
-	},
-	'click .js-cancel'(e, i) {
-		e.preventDefault();
-		i.editing.set(false);
-		i.list.set(i.initial.tokens);
-		i.token.set('');
-		i.balance.set('');
-		[...i.findAll('input')].forEach((el) => {
-			el.value = '';
-		});
-	},
-	'change [name=requireAllTokens]'(e, instance) {
-		instance.requireAll.set(e.currentTarget.checked);
-	},
-});
diff --git a/apps/meteor/app/tokenpass/lib/common.js b/apps/meteor/app/tokenpass/lib/common.js
index 0cd6868a3672c..46e9f0151e7d3 100644
--- a/apps/meteor/app/tokenpass/lib/common.js
+++ b/apps/meteor/app/tokenpass/lib/common.js
@@ -9,7 +9,7 @@ const config = {
 	identityPath: '/oauth/user',
 	authorizePath: '/oauth/authorize',
 	tokenPath: '/oauth/access-token',
-	scope: 'user,tca,private-balances',
+	scope: 'user',
 	tokenSentVia: 'payload',
 	usernameField: 'username',
 	mergeUsers: true,
diff --git a/apps/meteor/app/tokenpass/server/Tokenpass.js b/apps/meteor/app/tokenpass/server/Tokenpass.js
deleted file mode 100644
index 53707063167ae..0000000000000
--- a/apps/meteor/app/tokenpass/server/Tokenpass.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const Tokenpass = {
-	validateAccess(tokenpass, balances) {
-		const compFunc = tokenpass.require === 'any' ? 'some' : 'every';
-		return tokenpass.tokens[compFunc]((config) =>
-			balances.some((userToken) => config.token === userToken.asset && parseFloat(config.balance) <= parseFloat(userToken.balance)),
-		);
-	},
-};
diff --git a/apps/meteor/app/tokenpass/server/cronRemoveUsers.js b/apps/meteor/app/tokenpass/server/cronRemoveUsers.js
deleted file mode 100644
index 2376fc7824344..0000000000000
--- a/apps/meteor/app/tokenpass/server/cronRemoveUsers.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { SyncedCron } from 'meteor/littledata:synced-cron';
-
-import { updateUserTokenpassBalances } from './functions/updateUserTokenpassBalances';
-import { Tokenpass } from './Tokenpass';
-import { Rooms, Subscriptions, Users } from '../../models';
-import { removeUserFromRoom } from '../../lib/server/functions/removeUserFromRoom';
-
-function removeUsersFromTokenChannels() {
-	const rooms = {};
-
-	Rooms.findAllTokenChannels().forEach((room) => {
-		rooms[room._id] = room.tokenpass;
-	});
-
-	const users = {};
-
-	Subscriptions.findByRoomIds(Object.keys(rooms)).forEach((sub) => {
-		if (!users[sub.u._id]) {
-			users[sub.u._id] = [];
-		}
-		users[sub.u._id].push(sub.rid);
-	});
-
-	Object.keys(users).forEach((user) => {
-		const userInfo = Users.findOneById(user);
-
-		if (userInfo && userInfo.services && userInfo.services.tokenpass) {
-			const balances = updateUserTokenpassBalances(userInfo);
-
-			users[user].forEach((roomId) => {
-				const valid = Tokenpass.validateAccess(rooms[roomId], balances);
-
-				if (!valid) {
-					Promise.await(removeUserFromRoom(roomId, userInfo));
-				}
-			});
-		}
-	});
-}
-
-Meteor.startup(function () {
-	Meteor.defer(function () {
-		removeUsersFromTokenChannels();
-
-		SyncedCron.add({
-			name: 'Remove users from Token Channels',
-			schedule: (parser) => parser.cron('0 * * * *'),
-			job: removeUsersFromTokenChannels,
-		});
-	});
-});
diff --git a/apps/meteor/app/tokenpass/server/functions/getProtectedTokenpassBalances.js b/apps/meteor/app/tokenpass/server/functions/getProtectedTokenpassBalances.js
deleted file mode 100644
index c6059608697bc..0000000000000
--- a/apps/meteor/app/tokenpass/server/functions/getProtectedTokenpassBalances.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { HTTP } from 'meteor/http';
-
-import { settings } from '../../../settings';
-
-let userAgent = 'Meteor';
-if (Meteor.release) {
-	userAgent += `/${Meteor.release}`;
-}
-
-export const getProtectedTokenpassBalances = function (accessToken) {
-	try {
-		return HTTP.get(`${settings.get('API_Tokenpass_URL')}/api/v1/tca/protected/balances`, {
-			headers: {
-				'Accept': 'application/json',
-				'User-Agent': userAgent,
-			},
-			params: {
-				oauth_token: accessToken,
-			},
-		}).data;
-	} catch (error) {
-		throw new Error(`Failed to fetch protected tokenpass balances from Tokenpass. ${error.message}`);
-	}
-};
diff --git a/apps/meteor/app/tokenpass/server/functions/getPublicTokenpassBalances.js b/apps/meteor/app/tokenpass/server/functions/getPublicTokenpassBalances.js
deleted file mode 100644
index ead13ad26f838..0000000000000
--- a/apps/meteor/app/tokenpass/server/functions/getPublicTokenpassBalances.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { HTTP } from 'meteor/http';
-
-import { settings } from '../../../settings';
-
-let userAgent = 'Meteor';
-if (Meteor.release) {
-	userAgent += `/${Meteor.release}`;
-}
-
-export const getPublicTokenpassBalances = function (accessToken) {
-	try {
-		return HTTP.get(`${settings.get('API_Tokenpass_URL')}/api/v1/tca/public/balances`, {
-			headers: {
-				'Accept': 'application/json',
-				'User-Agent': userAgent,
-			},
-			params: {
-				oauth_token: accessToken,
-			},
-		}).data;
-	} catch (error) {
-		throw new Error(`Failed to fetch public tokenpass balances from Tokenpass. ${error.message}`);
-	}
-};
diff --git a/apps/meteor/app/tokenpass/server/functions/saveRoomTokensMinimumBalance.js b/apps/meteor/app/tokenpass/server/functions/saveRoomTokensMinimumBalance.js
deleted file mode 100644
index 5361c58856bae..0000000000000
--- a/apps/meteor/app/tokenpass/server/functions/saveRoomTokensMinimumBalance.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Match } from 'meteor/check';
-import { escapeHTML } from '@rocket.chat/string-helpers';
-
-import { Rooms } from '../../../models';
-
-export const saveRoomTokensMinimumBalance = function (rid, roomTokensMinimumBalance) {
-	if (!Match.test(rid, String)) {
-		throw new Meteor.Error('invalid-room', 'Invalid room', {
-			function: 'RocketChat.saveRoomTokensMinimumBalance',
-		});
-	}
-
-	const minimumTokenBalance = parseFloat(escapeHTML(roomTokensMinimumBalance));
-
-	return Rooms.setMinimumTokenBalanceById(rid, minimumTokenBalance);
-};
diff --git a/apps/meteor/app/tokenpass/server/functions/updateUserTokenpassBalances.js b/apps/meteor/app/tokenpass/server/functions/updateUserTokenpassBalances.js
deleted file mode 100644
index e85992a55dd68..0000000000000
--- a/apps/meteor/app/tokenpass/server/functions/updateUserTokenpassBalances.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import _ from 'underscore';
-
-import { getPublicTokenpassBalances } from './getPublicTokenpassBalances';
-import { getProtectedTokenpassBalances } from './getProtectedTokenpassBalances';
-import { Users } from '../../../models';
-
-export const updateUserTokenpassBalances = function (user) {
-	if (user && user.services && user.services.tokenpass) {
-		const tcaPublicBalances = getPublicTokenpassBalances(user.services.tokenpass.accessToken);
-		const tcaProtectedBalances = getProtectedTokenpassBalances(user.services.tokenpass.accessToken);
-
-		const balances = _.uniq(_.union(tcaPublicBalances, tcaProtectedBalances), false, (item) => item.asset);
-
-		Users.setTokenpassTcaBalances(user._id, balances);
-
-		return balances;
-	}
-};
diff --git a/apps/meteor/app/tokenpass/server/index.js b/apps/meteor/app/tokenpass/server/index.js
index ba1cf78e09394..086f6cc5d704c 100644
--- a/apps/meteor/app/tokenpass/server/index.js
+++ b/apps/meteor/app/tokenpass/server/index.js
@@ -1,11 +1,2 @@
 import '../lib/common';
 import './startup';
-import './functions/getProtectedTokenpassBalances';
-import './functions/getPublicTokenpassBalances';
-import './functions/saveRoomTokensMinimumBalance';
-import './methods/findTokenChannels';
-import './methods/getChannelTokenpass';
-import './cronRemoveUsers';
-
-export { updateUserTokenpassBalances } from './functions/updateUserTokenpassBalances';
-export { Tokenpass } from './Tokenpass';
diff --git a/apps/meteor/app/tokenpass/server/methods/findTokenChannels.js b/apps/meteor/app/tokenpass/server/methods/findTokenChannels.js
deleted file mode 100644
index c4003aeb12fcf..0000000000000
--- a/apps/meteor/app/tokenpass/server/methods/findTokenChannels.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-
-import { Rooms } from '../../../models';
-import { Tokenpass } from '../Tokenpass';
-
-Meteor.methods({
-	findTokenChannels() {
-		if (!Meteor.userId()) {
-			return [];
-		}
-
-		const user = Meteor.user();
-
-		if (user.services && user.services.tokenpass && user.services.tokenpass.tcaBalances) {
-			const tokens = {};
-			user.services.tokenpass.tcaBalances.forEach((token) => {
-				tokens[token.asset] = 1;
-			});
-
-			return Rooms.findByTokenpass(Object.keys(tokens)).filter((room) =>
-				Tokenpass.validateAccess(room.tokenpass, user.services.tokenpass.tcaBalances),
-			);
-		}
-
-		return [];
-	},
-});
diff --git a/apps/meteor/app/tokenpass/server/methods/getChannelTokenpass.js b/apps/meteor/app/tokenpass/server/methods/getChannelTokenpass.js
deleted file mode 100644
index 89a449798781c..0000000000000
--- a/apps/meteor/app/tokenpass/server/methods/getChannelTokenpass.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { check } from 'meteor/check';
-
-import { Rooms } from '../../../models';
-
-Meteor.methods({
-	getChannelTokenpass(rid) {
-		check(rid, String);
-
-		if (!Meteor.userId()) {
-			throw new Meteor.Error('error-invalid-user', 'Invalid user', {
-				method: 'getChannelTokenpass',
-			});
-		}
-
-		const room = Rooms.findOneById(rid);
-
-		if (!room) {
-			throw new Meteor.Error('error-invalid-room', 'Invalid room', {
-				method: 'getChannelTokenpass',
-			});
-		}
-
-		return room.tokenpass;
-	},
-});
diff --git a/apps/meteor/app/tokenpass/server/roomAccessValidator.compatibility.js b/apps/meteor/app/tokenpass/server/roomAccessValidator.compatibility.js
deleted file mode 100644
index 637a58317532a..0000000000000
--- a/apps/meteor/app/tokenpass/server/roomAccessValidator.compatibility.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tokenpass } from './Tokenpass';
-import { Users } from '../../models';
-
-export function validateTokenAccess(userData, roomData) {
-	if (!userData || !userData.services || !userData.services.tokenpass || !userData.services.tokenpass.tcaBalances) {
-		return false;
-	}
-
-	return Tokenpass.validateAccess(roomData.tokenpass, userData.services.tokenpass.tcaBalances);
-}
-
-export const validators = [
-	function (room, user) {
-		const userData = Users.getTokenBalancesByUserId(user._id);
-
-		return validateTokenAccess(userData, room);
-	},
-];
diff --git a/apps/meteor/app/tokenpass/server/roomAccessValidator.internalService.ts b/apps/meteor/app/tokenpass/server/roomAccessValidator.internalService.ts
deleted file mode 100644
index 4d5bd027ba687..0000000000000
--- a/apps/meteor/app/tokenpass/server/roomAccessValidator.internalService.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { IRoom, IUser } from '@rocket.chat/core-typings';
-
-import { ServiceClassInternal } from '../../../server/sdk/types/ServiceClass';
-import { validators } from './roomAccessValidator.compatibility';
-import { IAuthorizationTokenpass } from '../../../server/sdk/types/IAuthorizationTokenpass';
-
-export class AuthorizationTokenpass extends ServiceClassInternal implements IAuthorizationTokenpass {
-	protected name = 'authorization-tokenpass';
-
-	protected internal = true;
-
-	async canAccessRoom(room: Pick<IRoom, '_id' | 't' | 'teamId' | 'prid' | 'tokenpass'>, user: Pick<IUser, '_id'>): Promise<boolean> {
-		for (const validator of validators) {
-			if (validator(room, user)) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-}
diff --git a/apps/meteor/app/tokenpass/server/startup.js b/apps/meteor/app/tokenpass/server/startup.js
index 0d39a0867ec6f..d9f52f6dabd11 100644
--- a/apps/meteor/app/tokenpass/server/startup.js
+++ b/apps/meteor/app/tokenpass/server/startup.js
@@ -1,11 +1,4 @@
-import { Meteor } from 'meteor/meteor';
-import { Accounts } from 'meteor/accounts-base';
-
-import { updateUserTokenpassBalances } from './functions/updateUserTokenpassBalances';
 import { settingsRegistry } from '../../settings/server';
-import { callbacks } from '../../../lib/callbacks';
-import { validateTokenAccess } from './roomAccessValidator.compatibility';
-import './roomAccessValidator.internalService';
 
 settingsRegistry.addGroup('OAuth', function () {
 	this.section('Tokenpass', function () {
@@ -31,19 +24,3 @@ settingsRegistry.addGroup('OAuth', function () {
 		});
 	});
 });
-
-Meteor.startup(function () {
-	callbacks.add('beforeJoinRoom', function (user, room) {
-		if (room.tokenpass && !validateTokenAccess(user, room)) {
-			throw new Meteor.Error('error-not-allowed', 'Token required', { method: 'joinRoom' });
-		}
-
-		return user;
-	});
-});
-
-Accounts.onLogin(function ({ user }) {
-	if (user && user.services && user.services.tokenpass) {
-		updateUserTokenpassBalances(user);
-	}
-});
diff --git a/apps/meteor/app/ui-sidenav/client/roomList.js b/apps/meteor/app/ui-sidenav/client/roomList.js
index 23bb768cf3e82..972ad86ffa07b 100644
--- a/apps/meteor/app/ui-sidenav/client/roomList.js
+++ b/apps/meteor/app/ui-sidenav/client/roomList.js
@@ -26,7 +26,6 @@ Template.roomList.helpers({
 				'settings.preferences.sidebarSortby': 1,
 				'settings.preferences.sidebarShowFavorites': 1,
 				'settings.preferences.sidebarShowUnread': 1,
-				'services.tokenpass': 1,
 				'messageViewMode': 1,
 			},
 		});
@@ -74,12 +73,6 @@ Template.roomList.helpers({
 				types = ['c', 'p'];
 			}
 
-			if (['c', 'p'].includes(this.identifier)) {
-				query.tokens = { $exists: false };
-			} else if (this.identifier === 'tokens' && user && user.services && user.services.tokenpass) {
-				query.tokens = { $exists: true };
-			}
-
 			if (getUserPreference(user, 'sidebarShowUnread')) {
 				query.$or = [
 					{ alert: { $ne: true } },
diff --git a/apps/meteor/app/utils/server/functions/getDefaultUserFields.ts b/apps/meteor/app/utils/server/functions/getDefaultUserFields.ts
index 2f0dce22cd89a..c5c939cfcaa5a 100644
--- a/apps/meteor/app/utils/server/functions/getDefaultUserFields.ts
+++ b/apps/meteor/app/utils/server/functions/getDefaultUserFields.ts
@@ -26,7 +26,6 @@ export const getDefaultUserFields = (): DefaultUserFields => ({
 	'requirePasswordChangeReason': 1,
 	'services.github': 1,
 	'services.gitlab': 1,
-	'services.tokenpass': 1,
 	'services.password.bcrypt': 1,
 	'services.totp.enabled': 1,
 	'services.email2fa.enabled': 1,
diff --git a/apps/meteor/lib/rooms/adminFields.ts b/apps/meteor/lib/rooms/adminFields.ts
index 3375e44eaa1de..e5af56ac0986c 100644
--- a/apps/meteor/lib/rooms/adminFields.ts
+++ b/apps/meteor/lib/rooms/adminFields.ts
@@ -19,7 +19,6 @@ export const adminFields: Partial<Record<keyof IRoom, 1>> = {
 	topic: 1,
 	msgs: 1,
 	archived: 1,
-	tokenpass: 1,
 	teamId: 1,
 	teamMain: 1,
 	announcement: 1,
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 057856b477317..f4ce7d194e917 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3811,7 +3811,6 @@
   "Room_password_changed_successfully": "Room password changed successfully",
   "room_removed_read_only": "Room added writing permission by <em>__user_by__</em>",
   "room_set_read_only": "Room set as Read Only by <em>__user_by__</em>",
-  "Room_tokenpass_config_changed_successfully": "Room tokenpass configuration changed successfully",
   "Room_topic_changed_successfully": "Room topic changed successfully",
   "Room_type_changed_successfully": "Room type changed successfully",
   "Room_type_of_default_rooms_cant_be_changed": "This is a default room and the type can not be changed, please consult with your administrator.",
@@ -4448,8 +4447,6 @@
   "Token_Access": "Token Access",
   "Token_Controlled_Access": "Token Controlled Access",
   "Token_required": "Token required",
-  "Tokenpass_Channel_Label": "Tokenpass Channel",
-  "Tokenpass_Channels": "Tokenpass Channels",
   "Tokens_Minimum_Needed_Balance": "Minimum needed token balance",
   "Tokens_Minimum_Needed_Balance_Description": "Set minimum needed balance on each token. Blank or \"0\" for not limit.",
   "Tokens_Minimum_Needed_Balance_Placeholder": "Balance value",
diff --git a/apps/meteor/server/modules/watchers/publishFields.ts b/apps/meteor/server/modules/watchers/publishFields.ts
index 6a0ff581ef50b..525b9259088be 100644
--- a/apps/meteor/server/modules/watchers/publishFields.ts
+++ b/apps/meteor/server/modules/watchers/publishFields.ts
@@ -84,7 +84,6 @@ export const roomFields = {
 	reactWhenReadOnly: 1,
 	sysMes: 1,
 	sentiment: 1,
-	tokenpass: 1,
 	streamingOptions: 1,
 	broadcast: 1,
 	encrypted: 1,
diff --git a/apps/meteor/server/sdk/types/IAuthorization.ts b/apps/meteor/server/sdk/types/IAuthorization.ts
index 87ec73665cb3f..1e8e670d54a33 100644
--- a/apps/meteor/server/sdk/types/IAuthorization.ts
+++ b/apps/meteor/server/sdk/types/IAuthorization.ts
@@ -1,7 +1,7 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 
 export type RoomAccessValidator = (
-	room: Pick<IRoom, '_id' | 't' | 'teamId' | 'prid' | 'tokenpass'>,
+	room: Pick<IRoom, '_id' | 't' | 'teamId' | 'prid'>,
 	user: Pick<IUser, '_id'>,
 	extraData?: Record<string, any>,
 ) => Promise<boolean>;
diff --git a/apps/meteor/server/sdk/types/IAuthorizationTokenpass.ts b/apps/meteor/server/sdk/types/IAuthorizationTokenpass.ts
deleted file mode 100644
index 14860dff49eb9..0000000000000
--- a/apps/meteor/server/sdk/types/IAuthorizationTokenpass.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { RoomAccessValidator } from './IAuthorization';
-
-export interface IAuthorizationTokenpass {
-	canAccessRoom: RoomAccessValidator;
-}
diff --git a/apps/meteor/server/services/authorization/canAccessRoom.ts b/apps/meteor/server/services/authorization/canAccessRoom.ts
index 9cc05fec53082..5cc7b67002a60 100644
--- a/apps/meteor/server/services/authorization/canAccessRoom.ts
+++ b/apps/meteor/server/services/authorization/canAccessRoom.ts
@@ -5,7 +5,6 @@ import { Authorization } from '../../sdk';
 import { RoomAccessValidator } from '../../sdk/types/IAuthorization';
 import { canAccessRoomLivechat } from './canAccessRoomLivechat';
 import { canAccessRoomVoip } from './canAccessRoomVoip';
-import { canAccessRoomTokenpass } from './canAccessRoomTokenpass';
 import { Subscriptions, Rooms, Settings, TeamMembers, Team } from './service';
 
 async function canAccessPublicRoom(user: Partial<IUser>): Promise<boolean> {
@@ -77,7 +76,6 @@ const roomAccessValidators: RoomAccessValidator[] = [
 	},
 
 	canAccessRoomLivechat,
-	canAccessRoomTokenpass,
 	canAccessRoomVoip,
 ];
 
diff --git a/apps/meteor/server/services/authorization/canAccessRoomTokenpass.ts b/apps/meteor/server/services/authorization/canAccessRoomTokenpass.ts
deleted file mode 100644
index 3c23280da908d..0000000000000
--- a/apps/meteor/server/services/authorization/canAccessRoomTokenpass.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { IAuthorizationTokenpass } from '../../sdk/types/IAuthorizationTokenpass';
-import { proxifyWithWait } from '../../sdk/lib/proxify';
-import { RoomAccessValidator } from '../../sdk/types/IAuthorization';
-
-export const AuthorizationTokenpass = proxifyWithWait<IAuthorizationTokenpass>('authorization-tokenpass');
-
-export const canAccessRoomTokenpass: RoomAccessValidator = async (room, user): Promise<boolean> => {
-	if (!room?.tokenpass) {
-		return false;
-	}
-
-	// Call back core temporarily
-	return AuthorizationTokenpass.canAccessRoom(room, user);
-};
diff --git a/apps/meteor/server/services/authorization/service.ts b/apps/meteor/server/services/authorization/service.ts
index a77bcbc62b19b..b12f233733274 100644
--- a/apps/meteor/server/services/authorization/service.ts
+++ b/apps/meteor/server/services/authorization/service.ts
@@ -16,7 +16,6 @@ import { UsersRaw } from '../../../app/models/server/raw/Users';
 import { License } from '../../sdk';
 
 import './canAccessRoomLivechat';
-import './canAccessRoomTokenpass';
 
 export let Subscriptions: SubscriptionsRaw;
 export let Settings: SettingsRaw;
@@ -116,13 +115,12 @@ export class Authorization extends ServiceClass implements IAuthorization {
 	}
 
 	async canAccessRoomId(rid: IRoom['_id'], uid: IUser['_id']): Promise<boolean> {
-		const room = await Rooms.findOneById<Pick<IRoom, '_id' | 't' | 'teamId' | 'prid' | 'tokenpass'>>(rid, {
+		const room = await Rooms.findOneById<Pick<IRoom, '_id' | 't' | 'teamId' | 'prid'>>(rid, {
 			projection: {
 				_id: 1,
 				t: 1,
 				teamId: 1,
 				prid: 1,
-				tokenpass: 1,
 			},
 		});
 
diff --git a/apps/meteor/server/services/startup.ts b/apps/meteor/server/services/startup.ts
index c41e6c87ad041..a996b234425eb 100644
--- a/apps/meteor/server/services/startup.ts
+++ b/apps/meteor/server/services/startup.ts
@@ -3,7 +3,6 @@ import { MongoInternals } from 'meteor/mongo';
 import { AnalyticsService } from './analytics/service';
 import { api } from '../sdk/api';
 import { AuthorizationLivechat } from '../../app/livechat/server/roomAccessValidator.internalService';
-import { AuthorizationTokenpass } from '../../app/tokenpass/server/roomAccessValidator.internalService';
 import { BannerService } from './banner/service';
 import { LDAPService } from './ldap/service';
 import { MediaService } from './image/service';
@@ -21,7 +20,6 @@ const { db } = MongoInternals.defaultRemoteCollectionDriver().mongo;
 
 api.registerService(new AnalyticsService(db));
 api.registerService(new AuthorizationLivechat());
-api.registerService(new AuthorizationTokenpass());
 api.registerService(new BannerService(db));
 api.registerService(new LDAPService());
 api.registerService(new MediaService());
diff --git a/apps/meteor/server/startup/migrations/index.ts b/apps/meteor/server/startup/migrations/index.ts
index 6c045d2f447b2..f589e6e4d2f24 100644
--- a/apps/meteor/server/startup/migrations/index.ts
+++ b/apps/meteor/server/startup/migrations/index.ts
@@ -92,4 +92,5 @@ import './v265';
 import './v266';
 import './v267';
 import './v268';
+import './v269';
 import './xrun';
diff --git a/apps/meteor/server/startup/migrations/v269.ts b/apps/meteor/server/startup/migrations/v269.ts
new file mode 100644
index 0000000000000..220e5c2cac8ca
--- /dev/null
+++ b/apps/meteor/server/startup/migrations/v269.ts
@@ -0,0 +1,10 @@
+import { addMigration } from '../../lib/migrations';
+import { Rooms } from '../../../app/models/server';
+
+addMigration({
+	version: 269,
+	up() {
+		Rooms.tryDropIndex({ 'tokenpass.tokens.token': 1 });
+		Rooms.tryDropIndex({ tokenpass: 1 });
+	},
+});
diff --git a/packages/core-typings/src/IRoom.ts b/packages/core-typings/src/IRoom.ts
index 4bfed06a3bd8f..920cca99d5626 100644
--- a/packages/core-typings/src/IRoom.ts
+++ b/packages/core-typings/src/IRoom.ts
@@ -51,13 +51,6 @@ export interface IRoom extends IRocketChatRecord {
 
 	prid?: string;
 	avatarETag?: string;
-	tokenpass?: {
-		require: string;
-		tokens: {
-			token: string;
-			balance: number;
-		}[];
-	};
 
 	teamMain?: boolean;
 	teamId?: string;
@@ -259,7 +252,6 @@ export type RoomAdminFieldsType =
 	| 'topic'
 	| 'msgs'
 	| 'archived'
-	| 'tokenpass'
 	| 'teamId'
 	| 'teamMain'
 	| 'announcement'
diff --git a/packages/rest-typings/src/v1/rooms.ts b/packages/rest-typings/src/v1/rooms.ts
index 5a6c95d672884..0f5ef83c5655d 100644
--- a/packages/rest-typings/src/v1/rooms.ts
+++ b/packages/rest-typings/src/v1/rooms.ts
@@ -310,7 +310,6 @@ type RoomsSaveRoomSettingsProps = {
 	readOnly?: boolean;
 	reactWhenReadOnly?: boolean;
 	default?: boolean;
-	tokenpass?: string;
 	encrypted?: boolean;
 	favorite?: {
 		defaultValue?: boolean;
@@ -364,10 +363,6 @@ const RoomsSaveRoomSettingsSchema = {
 			type: 'boolean',
 			nullable: true,
 		},
-		tokenpass: {
-			type: 'string',
-			nullable: true,
-		},
 		encrypted: {
 			type: 'boolean',
 			nullable: true,
diff --git a/packages/ui-contexts/src/ServerContext/methods/saveRoomSettings.ts b/packages/ui-contexts/src/ServerContext/methods/saveRoomSettings.ts
index baeed20b128f5..33191cb463ac7 100644
--- a/packages/ui-contexts/src/ServerContext/methods/saveRoomSettings.ts
+++ b/packages/ui-contexts/src/ServerContext/methods/saveRoomSettings.ts
@@ -14,7 +14,6 @@ type RoomSettings = {
 	systemMessages: unknown;
 	default: unknown;
 	joinCode: unknown;
-	tokenpass: unknown;
 	streamingOptions: unknown;
 	retentionEnabled: unknown;
 	retentionMaxAge: unknown;

From e23cd3e01c94fc476f013f9acf320e708081f970 Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Mon, 13 Jun 2022 17:42:54 -0300
Subject: [PATCH 14/36] Chore: add _id and name options to JSON Schemas
 (#25813)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->
This pull request adds the `roomId` and `roomName` options for the Ajv JSON Schemas on the `packages/rest-typings/src/v1/channels/` and `packages/rest-typings/src/v1/dm/` folders.
<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com>
---
 apps/meteor/app/api/server/v1/channels.ts     |  70 ++++----
 ...hannelsGetAllUserMentionsByChannelProps.ts |  24 ++-
 .../src/v1/channels/ChannelsHistoryProps.ts   | 152 ++++++++++++------
 .../src/v1/channels/ChannelsJoinProps.ts      |  40 +++--
 .../src/v1/channels/ChannelsKickProps.ts      |  37 +++--
 .../src/v1/channels/ChannelsLeaveProps.ts     |  30 +++-
 .../src/v1/channels/ChannelsMessagesProps.ts  |  29 ++--
 .../v1/channels/ChannelsModeratorsProps.ts    |  27 +++-
 .../src/v1/channels/ChannelsOpenProps.ts      |  79 +++++++--
 .../channels/ChannelsSetAnnouncementProps.ts  |  37 +++--
 .../v1/channels/ChannelsSetReadOnlyProps.ts   |  29 +++-
 .../rest-typings/src/v1/channels/channels.ts  |  49 +++---
 .../rest-typings/src/v1/dm/DmCloseProps.ts    |  10 +-
 .../rest-typings/src/v1/dm/DmCreateProps.ts   |   4 +-
 .../rest-typings/src/v1/dm/DmDeleteProps.ts   |   4 +-
 .../rest-typings/src/v1/dm/DmHistoryProps.ts  |   4 +-
 .../rest-typings/src/v1/dm/DmKickProps.ts     |   4 +-
 .../rest-typings/src/v1/dm/DmLeaveProps.ts    |  46 ++++--
 18 files changed, 459 insertions(+), 216 deletions(-)

diff --git a/apps/meteor/app/api/server/v1/channels.ts b/apps/meteor/app/api/server/v1/channels.ts
index e1ab4da8e8d93..484c2a0770811 100644
--- a/apps/meteor/app/api/server/v1/channels.ts
+++ b/apps/meteor/app/api/server/v1/channels.ts
@@ -129,9 +129,9 @@ API.v1.addRoute(
 	},
 	{
 		get() {
-			const { roomId, unreads, oldest, latest, showThreadMessages, inclusive } = this.queryParams;
+			const { unreads, oldest, latest, showThreadMessages, inclusive, ...params } = this.queryParams;
 			const findResult = findChannelByIdOrName({
-				params: { roomId },
+				params,
 				checkedArchived: false,
 			});
 
@@ -184,13 +184,13 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId, joinCode } = this.bodyParams;
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const { joinCode, ...params } = this.bodyParams;
+			const findResult = findChannelByIdOrName({ params });
 
 			Meteor.call('joinRoom', findResult._id, joinCode);
 
 			return API.v1.success({
-				channel: findChannelByIdOrName({ params: { roomId }, userId: this.userId }),
+				channel: findChannelByIdOrName({ params, userId: this.userId }),
 			});
 		},
 	},
@@ -204,15 +204,15 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId /* userId */ } = this.bodyParams;
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const { ...params /* userId */ } = this.bodyParams;
+			const findResult = findChannelByIdOrName({ params });
 
 			const user = this.getUserFromParams();
 
 			Meteor.call('removeUserFromRoom', { rid: findResult._id, username: user.username });
 
 			return API.v1.success({
-				channel: findChannelByIdOrName({ params: { roomId }, userId: this.userId }),
+				channel: findChannelByIdOrName({ params, userId: this.userId }),
 			});
 		},
 	},
@@ -226,15 +226,15 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId } = this.bodyParams;
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const { ...params } = this.bodyParams;
+			const findResult = findChannelByIdOrName({ params });
 
 			Meteor.runAsUser(this.userId, () => {
 				Meteor.call('leaveRoom', findResult._id);
 			});
 
 			return API.v1.success({
-				channel: findChannelByIdOrName({ params: { roomId }, userId: this.userId }),
+				channel: findChannelByIdOrName({ params, userId: this.userId }),
 			});
 		},
 	},
@@ -297,10 +297,10 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId } = this.bodyParams;
+			const { ...params } = this.bodyParams;
 
 			const findResult = findChannelByIdOrName({
-				params: { roomId },
+				params,
 				checkedArchived: false,
 			});
 
@@ -329,9 +329,7 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId } = this.bodyParams;
-
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const findResult = findChannelByIdOrName({ params: this.bodyParams });
 
 			if (findResult.ro === this.bodyParams.readOnly) {
 				return API.v1.failure('The channel read only setting is the same as what it would be changed to.');
@@ -340,7 +338,7 @@ API.v1.addRoute(
 			Meteor.call('saveRoomSettings', findResult._id, 'readOnly', this.bodyParams.readOnly);
 
 			return API.v1.success({
-				channel: findChannelByIdOrName({ params: { roomId }, userId: this.userId }),
+				channel: findChannelByIdOrName({ params: this.bodyParams, userId: this.userId }),
 			});
 		},
 	},
@@ -354,9 +352,9 @@ API.v1.addRoute(
 	},
 	{
 		post() {
-			const { roomId, announcement } = this.bodyParams;
+			const { announcement, ...params } = this.bodyParams;
 
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const findResult = findChannelByIdOrName({ params });
 
 			Meteor.call('saveRoomSettings', findResult._id, 'roomAnnouncement', announcement);
 
@@ -379,23 +377,19 @@ API.v1.addRoute(
 			const { offset, count } = this.getPaginationItems();
 			const { sort } = this.parseJsonQuery();
 
-			const mentions = Meteor.runAsUser(this.userId, () =>
-				Meteor.call('getUserMentionsByChannel', {
-					roomId,
-					options: {
-						sort: sort || { ts: 1 },
-						skip: offset,
-						limit: count,
-					},
-				}),
-			);
-
-			const allMentions = Meteor.runAsUser(this.userId, () =>
-				Meteor.call('getUserMentionsByChannel', {
-					roomId,
-					options: {},
-				}),
-			);
+			const mentions = Meteor.call('getUserMentionsByChannel', {
+				roomId,
+				options: {
+					sort: sort || { ts: 1 },
+					skip: offset,
+					limit: count,
+				},
+			});
+
+			const allMentions = Meteor.call('getUserMentionsByChannel', {
+				roomId,
+				options: {},
+			});
 
 			return API.v1.success({
 				mentions,
@@ -415,9 +409,9 @@ API.v1.addRoute(
 	},
 	{
 		get() {
-			const { roomId } = this.queryParams;
+			const { ...params } = this.queryParams;
 
-			const findResult = findChannelByIdOrName({ params: { roomId } });
+			const findResult = findChannelByIdOrName({ params });
 
 			const moderators = Subscriptions.findByRoomIdAndRoles(findResult._id, ['moderator'], {
 				fields: { u: 1 },
diff --git a/packages/rest-typings/src/v1/channels/ChannelsGetAllUserMentionsByChannelProps.ts b/packages/rest-typings/src/v1/channels/ChannelsGetAllUserMentionsByChannelProps.ts
index 8797fbf57a131..b022674974d5d 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsGetAllUserMentionsByChannelProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsGetAllUserMentionsByChannelProps.ts
@@ -9,11 +9,25 @@ export type ChannelsGetAllUserMentionsByChannelProps = PaginatedRequest<{ roomId
 const channelsGetAllUserMentionsByChannelPropsSchema = {
 	type: 'object',
 	properties: {
-		roomId: { type: 'string' },
-		offset: { type: 'number' },
-		count: { type: 'number' },
-		sort: { type: 'string' },
-		query: { type: 'string' },
+		roomId: {
+			type: 'string',
+		},
+		offset: {
+			type: 'number',
+			nullable: true,
+		},
+		count: {
+			type: 'number',
+			nullable: true,
+		},
+		sort: {
+			type: 'string',
+			nullable: true,
+		},
+		query: {
+			type: 'string',
+			nullable: true,
+		},
 	},
 	required: ['roomId'],
 
diff --git a/packages/rest-typings/src/v1/channels/ChannelsHistoryProps.ts b/packages/rest-typings/src/v1/channels/ChannelsHistoryProps.ts
index 3cf656e8db06e..fc34e2f3b7ec3 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsHistoryProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsHistoryProps.ts
@@ -1,55 +1,117 @@
 import Ajv from 'ajv';
 
-const ajv = new Ajv({ coerceTypes: true });
+import type { PaginatedRequest } from '../../helpers/PaginatedRequest';
 
-export type ChannelsHistoryProps = {
-	roomId: string;
-	latest?: string;
-	showThreadMessages?: 'false' | 'true';
-	oldest?: string;
-	unreads?: 'true' | 'false';
-	inclusive?: 'false' | 'true';
-};
+const ajv = new Ajv({ coerceTypes: true });
 
+export type ChannelsHistoryProps = PaginatedRequest<
+	({ roomId: string } | { roomName: string }) & {
+		latest?: string;
+		showThreadMessages?: 'false' | 'true';
+		oldest?: string;
+		unreads?: 'true' | 'false';
+		inclusive?: 'false' | 'true';
+	}
+>;
 const channelsHistoryPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
-			minLength: 1,
-		},
-		latest: {
-			type: 'string',
-			minLength: 1,
-		},
-		showThreadMessages: {
-			type: 'string',
-			enum: ['false', 'true'],
-		},
-		oldest: {
-			type: 'string',
-			minLength: 1,
-		},
-		inclusive: {
-			type: 'string',
-			enum: ['false', 'true'],
-		},
-		unreads: {
-			type: 'string',
-			enum: ['true', 'false'],
-		},
-		count: {
-			type: 'number',
-		},
-		offset: {
-			type: 'number',
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+					minLength: 1,
+				},
+				latest: {
+					type: 'string',
+					minLength: 1,
+					nullable: true,
+				},
+				showThreadMessages: {
+					type: 'string',
+					enum: ['false', 'true'],
+					nullable: true,
+				},
+				oldest: {
+					type: 'string',
+					minLength: 1,
+					nullable: true,
+				},
+				inclusive: {
+					type: 'string',
+					enum: ['false', 'true'],
+					nullable: true,
+				},
+				unreads: {
+					type: 'string',
+					enum: ['true', 'false'],
+					nullable: true,
+				},
+				count: {
+					type: 'number',
+					nullable: true,
+				},
+				offset: {
+					type: 'number',
+					nullable: true,
+				},
+				sort: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['roomId'],
+			additionalProperties: false,
 		},
-		sort: {
-			type: 'string',
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+					minLength: 1,
+				},
+				latest: {
+					type: 'string',
+					minLength: 1,
+					nullable: true,
+				},
+				showThreadMessages: {
+					type: 'string',
+					enum: ['false', 'true'],
+					nullable: true,
+				},
+				oldest: {
+					type: 'string',
+					minLength: 1,
+					nullable: true,
+				},
+				inclusive: {
+					type: 'string',
+					enum: ['false', 'true'],
+					nullable: true,
+				},
+				unreads: {
+					type: 'string',
+					enum: ['true', 'false'],
+					nullable: true,
+				},
+				count: {
+					type: 'number',
+					nullable: true,
+				},
+				offset: {
+					type: 'number',
+					nullable: true,
+				},
+				sort: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['roomName'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId'],
-	additionalProperties: false,
+	],
 };
 
 export const isChannelsHistoryProps = ajv.compile<ChannelsHistoryProps>(channelsHistoryPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsJoinProps.ts b/packages/rest-typings/src/v1/channels/ChannelsJoinProps.ts
index 24ba1c4fab2a3..50fb56fc4a6e8 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsJoinProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsJoinProps.ts
@@ -2,21 +2,39 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsJoinProps = { roomId: string; joinCode?: string };
+export type ChannelsJoinProps = { roomId: string; joinCode?: string } | { roomName: string; joinCode?: string };
 
 const channelsJoinPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+				},
+				joinCode: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['roomId'],
+			additionalProperties: false,
 		},
-		joinCode: {
-			type: 'string',
-			nullable: true,
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+				joinCode: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['roomName'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId'],
-	additionalProperties: false,
+	],
 };
 
 export const isChannelsJoinProps = ajv.compile<ChannelsJoinProps>(channelsJoinPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsKickProps.ts b/packages/rest-typings/src/v1/channels/ChannelsKickProps.ts
index d1c99063281bf..c6e71bf7aa2de 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsKickProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsKickProps.ts
@@ -2,20 +2,37 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsKickProps = { roomId: string; userId: string };
+export type ChannelsKickProps = { roomId: string; userId: string } | { roomName: string; userId: string };
 
 const channelsKickPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+				},
+				userId: {
+					type: 'string',
+				},
+			},
+			required: ['roomId', 'userId'],
+			additionalProperties: false,
 		},
-		userId: {
-			type: 'string',
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+				userId: {
+					type: 'string',
+				},
+			},
+			required: ['roomName', 'userId'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId', 'userId'],
-	additionalProperties: false,
+	],
 };
 
 export const isChannelsKickProps = ajv.compile<ChannelsKickProps>(channelsKickPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsLeaveProps.ts b/packages/rest-typings/src/v1/channels/ChannelsLeaveProps.ts
index 52e0c48a0d887..418a004dad1d1 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsLeaveProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsLeaveProps.ts
@@ -2,17 +2,31 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsLeaveProps = { roomId: string };
+export type ChannelsLeaveProps = { roomId: string } | { roomName: string };
 
 const channelsLeavePropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+				},
+			},
+			required: ['roomId'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId'],
-	additionalProperties: false,
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+			},
+			required: ['roomName'],
+			additionalProperties: false,
+		},
+	],
 };
 
 export const isChannelsLeaveProps = ajv.compile<ChannelsLeaveProps>(channelsLeavePropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsMessagesProps.ts b/packages/rest-typings/src/v1/channels/ChannelsMessagesProps.ts
index 959b9a3ef3573..e385f74d00af8 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsMessagesProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsMessagesProps.ts
@@ -5,23 +5,30 @@ import type { PaginatedRequest } from '../../helpers/PaginatedRequest';
 
 const ajv = new Ajv({ coerceTypes: true });
 
-export type ChannelsMessagesProps = PaginatedRequest<
-	{
-		roomId: IRoom['_id'];
-		// query: { 'mentions._id': { $in: string[] } } | { 'starred._id': { $in: string[] } } | { pinned: boolean };
-	},
-	'ts'
->;
+// query: { 'mentions._id': { $in: string[] } } | { 'starred._id': { $in: string[] } } | { pinned: boolean };
+export type ChannelsMessagesProps = PaginatedRequest<{ roomId: IRoom['_id'] }, 'ts'>;
 
 const channelsMessagesPropsSchema = {
 	type: 'object',
 	properties: {
-		roomId: { type: 'string' },
-		query: { type: 'string' },
-		count: { type: 'number' },
-		offset: { type: 'number' },
+		roomId: {
+			type: 'string',
+		},
+		query: {
+			type: 'string',
+			nullable: true,
+		},
+		count: {
+			type: 'number',
+			nullable: true,
+		},
+		offset: {
+			type: 'number',
+			nullable: true,
+		},
 		sort: {
 			type: 'string',
+			nullable: true,
 		},
 	},
 
diff --git a/packages/rest-typings/src/v1/channels/ChannelsModeratorsProps.ts b/packages/rest-typings/src/v1/channels/ChannelsModeratorsProps.ts
index 8f04f1ab46a9b..4dabaece8106d 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsModeratorsProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsModeratorsProps.ts
@@ -2,16 +2,29 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsModeratorsProps = { roomId: string };
+export type ChannelsModeratorsProps = { roomId: string } | { roomName: string };
 
 const channelsModeratorsPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: { type: 'string' },
-	},
-	required: ['roomId'],
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: { type: 'string' },
+			},
+			required: ['roomId'],
 
-	additionalProperties: false,
+			additionalProperties: false,
+		},
+		{
+			type: 'object',
+			properties: {
+				roomName: { type: 'string' },
+			},
+			required: ['roomName'],
+
+			additionalProperties: false,
+		},
+	],
 };
 
 export const isChannelsModeratorsProps = ajv.compile<ChannelsModeratorsProps>(channelsModeratorsPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsOpenProps.ts b/packages/rest-typings/src/v1/channels/ChannelsOpenProps.ts
index 7e1d9521e1832..1150b8536a3bb 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsOpenProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsOpenProps.ts
@@ -2,28 +2,77 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsOpenProps = {
-	roomId: string;
-	query?: string; // { 'mentions._id': { $in: string[] } } | { 'starred._id': { $in: string[] } } | { pinned: boolean };
-	sort?: { ts: 1 | -1 };
-};
+export type ChannelsOpenProps =
+	| {
+			roomId: string;
+			query?: string; // { 'mentions._id': { $in: string[] } } | { 'starred._id': { $in: string[] } } | { pinned: boolean };
+			sort?: { ts: 1 | -1 };
+	  }
+	| {
+			roomName: string;
+			query?: string;
+			sort?: { ts: 1 | -1 };
+	  };
 
 const channelsOpenPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: { type: 'string' },
-		query: { type: 'string' },
-		sort: {
+	oneOf: [
+		{
 			type: 'object',
 			properties: {
-				ts: { type: 'number' },
+				roomId: {
+					type: 'string',
+				},
+				query: {
+					type: 'string',
+					nullable: true,
+				},
+				sort: {
+					type: 'object',
+					properties: {
+						ts: {
+							type: 'number',
+							enum: [1, -1],
+						},
+					},
+					required: ['ts'],
+
+					additionalProperties: false,
+					nullable: true,
+				},
 			},
-			required: ['ts'],
+
+			required: ['roomId'],
+			additionalProperties: false,
 		},
-	},
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+				query: {
+					type: 'string',
+					nullable: true,
+				},
+				sort: {
+					type: 'object',
+					properties: {
+						ts: {
+							type: 'number',
+							enum: [1, -1],
+						},
+					},
+					required: ['ts'],
+
+					additionalProperties: false,
+					nullable: true,
+				},
+			},
 
-	required: ['roomId'],
-	additionalProperties: false,
+			required: ['roomName'],
+			additionalProperties: false,
+		},
+	],
 };
 
 export const isChannelsOpenProps = ajv.compile<ChannelsOpenProps>(channelsOpenPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsSetAnnouncementProps.ts b/packages/rest-typings/src/v1/channels/ChannelsSetAnnouncementProps.ts
index d073cb06d5534..5bd1ed535e80c 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsSetAnnouncementProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsSetAnnouncementProps.ts
@@ -2,20 +2,37 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsSetAnnouncementProps = { roomId: string; announcement: string };
+export type ChannelsSetAnnouncementProps = { roomId: string; announcement: string } | { roomName: string; announcement: string };
 
 const channelsSetAnnouncementPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+				},
+				announcement: {
+					type: 'string',
+				},
+			},
+			required: ['roomId', 'announcement'],
+			additionalProperties: false,
 		},
-		announcement: {
-			type: 'string',
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+				announcement: {
+					type: 'string',
+				},
+			},
+			required: ['roomName', 'announcement'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId', 'announcement'],
-	additionalProperties: false,
+	],
 };
 
 export const isChannelsSetAnnouncementProps = ajv.compile<ChannelsSetAnnouncementProps>(channelsSetAnnouncementPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/ChannelsSetReadOnlyProps.ts b/packages/rest-typings/src/v1/channels/ChannelsSetReadOnlyProps.ts
index e526e0aba6479..c8475bc4c8c9b 100644
--- a/packages/rest-typings/src/v1/channels/ChannelsSetReadOnlyProps.ts
+++ b/packages/rest-typings/src/v1/channels/ChannelsSetReadOnlyProps.ts
@@ -2,16 +2,29 @@ import Ajv from 'ajv';
 
 const ajv = new Ajv();
 
-export type ChannelsSetReadOnlyProps = { roomId: string; readOnly: boolean };
+export type ChannelsSetReadOnlyProps = { roomId: string; readOnly: boolean } | { roomName: string; readOnly: boolean };
 
 const channelsSetReadOnlyPropsSchema = {
-	type: 'object',
-	properties: {
-		roomId: { type: 'string' },
-		readOnly: { type: 'boolean' },
-	},
-	required: ['roomId', 'readOnly'],
-	additionalProperties: false,
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: { type: 'string' },
+				readOnly: { type: 'boolean' },
+			},
+			required: ['roomId', 'readOnly'],
+			additionalProperties: false,
+		},
+		{
+			type: 'object',
+			properties: {
+				roomName: { type: 'string' },
+				readOnly: { type: 'boolean' },
+			},
+			required: ['roomName', 'readOnly'],
+			additionalProperties: false,
+		},
+	],
 };
 
 export const isChannelsSetReadOnlyProps = ajv.compile<ChannelsSetReadOnlyProps>(channelsSetReadOnlyPropsSchema);
diff --git a/packages/rest-typings/src/v1/channels/channels.ts b/packages/rest-typings/src/v1/channels/channels.ts
index dd33611722441..eb1ab118a02b8 100644
--- a/packages/rest-typings/src/v1/channels/channels.ts
+++ b/packages/rest-typings/src/v1/channels/channels.ts
@@ -6,6 +6,7 @@ import type { ChannelsAddAllProps } from './ChannelsAddAllProps';
 import type { ChannelsArchiveProps } from './ChannelsArchiveProps';
 import type { ChannelsDeleteProps } from './ChannelsDeleteProps';
 import type { ChannelsGetAllUserMentionsByChannelProps } from './ChannelsGetAllUserMentionsByChannelProps';
+import type { ChannelsHistoryProps } from './ChannelsHistoryProps';
 import type { ChannelsMessagesProps } from './ChannelsMessagesProps';
 import type { ChannelsOpenProps } from './ChannelsOpenProps';
 import type { ChannelsSetAnnouncementProps } from './ChannelsSetAnnouncementProps';
@@ -13,25 +14,21 @@ import type { ChannelsUnarchiveProps } from './ChannelsUnarchiveProps';
 
 export type ChannelsEndpoints = {
 	'/v1/channels.files': {
-		GET: (params: PaginatedRequest<{ roomId: IRoom['_id'] }>) => PaginatedResult<{
+		GET: (params: PaginatedRequest<{ roomId: string } | { roomName: string }>) => PaginatedResult<{
 			files: IUpload[];
 		}>;
 	};
 	'/v1/channels.members': {
-		GET: (params: PaginatedRequest<{ roomId: IRoom['_id']; filter?: string; status?: string[] }>) => PaginatedResult<{
+		GET: (
+			params: PaginatedRequest<
+				{ roomId: string; filter?: string; status?: string[] } | { roomName: string; filter?: string; status?: string[] }
+			>,
+		) => PaginatedResult<{
 			members: IUser[];
 		}>;
 	};
 	'/v1/channels.history': {
-		GET: (
-			params: PaginatedRequest<{
-				roomId: string;
-				latest?: string;
-				showThreadMessages?: 'false' | 'true';
-				oldest?: string;
-				inclusive?: 'false' | 'true';
-			}>,
-		) => PaginatedResult<{
+		GET: (params: ChannelsHistoryProps) => PaginatedResult<{
 			messages: IMessage[];
 		}>;
 	};
@@ -61,10 +58,10 @@ export type ChannelsEndpoints = {
 		};
 	};
 	'/v1/channels.info': {
-		GET: (params: { roomId: string }) => { channel: IRoom };
+		GET: (params: { roomId: string } | { roomName: string }) => { channel: IRoom };
 	};
 	'/v1/channels.counters': {
-		GET: (params: { roomId: string }) => {
+		GET: (params: { roomId: string } | { roomName: string }) => {
 			joined: boolean;
 			members: number;
 			unreads: number;
@@ -75,42 +72,42 @@ export type ChannelsEndpoints = {
 		};
 	};
 	'/v1/channels.join': {
-		POST: (params: { roomId: string; joinCode?: string }) => {
+		POST: (params: { roomId: string; joinCode?: string } | { roomName: string; joinCode?: string }) => {
 			channel: IRoom;
 		};
 	};
 	'/v1/channels.close': {
-		POST: (params: { roomId: string }) => {};
+		POST: (params: { roomId: string } | { roomName: string }) => {};
 	};
 	'/v1/channels.kick': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.delete': {
 		POST: (params: ChannelsDeleteProps) => void;
 	};
 	'/v1/channels.leave': {
-		POST: (params: { roomId: string }) => {};
+		POST: (params: { roomId: string } | { roomName: string }) => {};
 	};
 	'/v1/channels.addModerator': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.removeModerator': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.addOwner': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.removeOwner': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.addLeader': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.removeLeader': {
-		POST: (params: { roomId: string; userId: string }) => {};
+		POST: (params: { roomId: string; userId: string } | { roomName: string; userId: string }) => {};
 	};
 	'/v1/channels.roles': {
-		GET: (params: { roomId: string }) => { roles: IGetRoomRoles[] };
+		GET: (params: { roomId: string } | { roomName: string }) => { roles: IGetRoomRoles[] };
 	};
 	'/v1/channels.messages': {
 		GET: (params: ChannelsMessagesProps) => PaginatedResult<{
@@ -121,7 +118,7 @@ export type ChannelsEndpoints = {
 		POST: (params: ChannelsOpenProps) => void;
 	};
 	'/v1/channels.setReadOnly': {
-		POST: (params: { roomId: string; readOnly: boolean }) => {
+		POST: (params: { roomId: string; readOnly: boolean } | { roomName: string; readOnly: boolean }) => {
 			channel: IRoom;
 		};
 	};
@@ -144,6 +141,6 @@ export type ChannelsEndpoints = {
 		}>;
 	};
 	'/v1/channels.moderators': {
-		GET: (params: { roomId: string }) => { moderators: Pick<IUser, '_id' | 'name' | 'username'>[] };
+		GET: (params: { roomId: string } | { roomName: string }) => { moderators: Pick<IUser, '_id' | 'name' | 'username'>[] };
 	};
 };
diff --git a/packages/rest-typings/src/v1/dm/DmCloseProps.ts b/packages/rest-typings/src/v1/dm/DmCloseProps.ts
index 1a1ea759680ac..4a2d186896f1e 100644
--- a/packages/rest-typings/src/v1/dm/DmCloseProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmCloseProps.ts
@@ -1,12 +1,14 @@
-import Ajv, { JSONSchemaType } from 'ajv';
+import Ajv from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
 export type DmCloseProps = {
 	roomId: string;
 };
 
-const DmClosePropsSchema: JSONSchemaType<DmCloseProps> = {
+const DmClosePropsSchema = {
 	type: 'object',
 	properties: {
 		roomId: {
@@ -17,4 +19,4 @@ const DmClosePropsSchema: JSONSchemaType<DmCloseProps> = {
 	additionalProperties: false,
 };
 
-export const isDmCloseProps = ajv.compile(DmClosePropsSchema);
+export const isDmCloseProps = ajv.compile<DmCloseProps>(DmClosePropsSchema);
diff --git a/packages/rest-typings/src/v1/dm/DmCreateProps.ts b/packages/rest-typings/src/v1/dm/DmCreateProps.ts
index 3b15bbe2863f1..48903925ea13b 100644
--- a/packages/rest-typings/src/v1/dm/DmCreateProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmCreateProps.ts
@@ -1,6 +1,8 @@
 import Ajv from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
 export type DmCreateProps = (
 	| {
diff --git a/packages/rest-typings/src/v1/dm/DmDeleteProps.ts b/packages/rest-typings/src/v1/dm/DmDeleteProps.ts
index a0d801300773a..7c96ce9668e3a 100644
--- a/packages/rest-typings/src/v1/dm/DmDeleteProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmDeleteProps.ts
@@ -1,6 +1,8 @@
 import Ajv from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
 export type DmDeleteProps =
 	| {
diff --git a/packages/rest-typings/src/v1/dm/DmHistoryProps.ts b/packages/rest-typings/src/v1/dm/DmHistoryProps.ts
index 0a836961f3665..dc8d46f4341df 100644
--- a/packages/rest-typings/src/v1/dm/DmHistoryProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmHistoryProps.ts
@@ -1,7 +1,9 @@
 import type { PaginatedRequest } from '@rocket.chat/rest-typings/src/helpers/PaginatedRequest';
 import Ajv from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
 export type DmHistoryProps = PaginatedRequest<{
 	roomId: string;
diff --git a/packages/rest-typings/src/v1/dm/DmKickProps.ts b/packages/rest-typings/src/v1/dm/DmKickProps.ts
index beca20ef5dc80..eb56b52a3cd6f 100644
--- a/packages/rest-typings/src/v1/dm/DmKickProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmKickProps.ts
@@ -1,6 +1,8 @@
 import Ajv, { JSONSchemaType } from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
 type DmKickProps = {
 	roomId: string;
diff --git a/packages/rest-typings/src/v1/dm/DmLeaveProps.ts b/packages/rest-typings/src/v1/dm/DmLeaveProps.ts
index a91ee8ba9a910..384455a124ae0 100644
--- a/packages/rest-typings/src/v1/dm/DmLeaveProps.ts
+++ b/packages/rest-typings/src/v1/dm/DmLeaveProps.ts
@@ -1,20 +1,38 @@
-import Ajv, { JSONSchemaType } from 'ajv';
+import Ajv from 'ajv';
 
-const ajv = new Ajv();
+const ajv = new Ajv({
+	coerceTypes: true,
+});
 
-export type DmLeaveProps = {
-	roomId: string;
-};
+export type DmLeaveProps =
+	| {
+			roomId: string;
+	  }
+	| { roomName: string };
 
-const DmLeavePropsSchema: JSONSchemaType<DmLeaveProps> = {
-	type: 'object',
-	properties: {
-		roomId: {
-			type: 'string',
+const DmLeavePropsSchema = {
+	oneOf: [
+		{
+			type: 'object',
+			properties: {
+				roomId: {
+					type: 'string',
+				},
+			},
+			required: ['roomId'],
+			additionalProperties: false,
+		},
+		{
+			type: 'object',
+			properties: {
+				roomName: {
+					type: 'string',
+				},
+			},
+			required: ['roomName'],
+			additionalProperties: false,
 		},
-	},
-	required: ['roomId'],
-	additionalProperties: false,
+	],
 };
 
-export const isDmLeaveProps = ajv.compile(DmLeavePropsSchema);
+export const isDmLeaveProps = ajv.compile<DmLeaveProps>(DmLeavePropsSchema);

From 949fcae91975ade218c092d7b4c8cd7675f5c032 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 13 Jun 2022 18:02:38 -0300
Subject: [PATCH 15/36] Chore: Rewrite Admin UsersTable to Typescript (#25698)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>
---
 .../client/views/admin/users/AddUser.js       |   6 +-
 .../{UserInfo.js => AdminUserInfoWithData.js} |   8 +-
 ...itUserWithData.js => EditUserWithData.tsx} |  16 +-
 .../users/{InviteUsers.js => InviteUsers.tsx} |  18 +-
 .../admin/users/UserPageHeaderContent.tsx     |  31 ----
 .../client/views/admin/users/UserRow.js       |  61 -------
 .../client/views/admin/users/UsersPage.js     | 122 -------------
 .../client/views/admin/users/UsersPage.tsx    |  90 ++++++++++
 .../users/{UsersRoute.js => UsersRoute.tsx}   |   6 +-
 .../client/views/admin/users/UsersTable.js    | 126 --------------
 .../admin/users/UsersTable/UsersTable.tsx     | 161 ++++++++++++++++++
 .../admin/users/UsersTable/UsersTableRow.tsx  |  63 +++++++
 .../views/admin/users/UsersTable/index.ts     |   1 +
 .../rocketchat-i18n/i18n/en.i18n.json         |   2 +
 apps/meteor/tests/e2e/11-admin.spec.ts        |   2 +-
 .../e2e/utils/pageobjects/Administration.ts   |   4 +
 packages/rest-typings/src/v1/users.ts         |   8 +
 17 files changed, 365 insertions(+), 360 deletions(-)
 rename apps/meteor/client/views/admin/users/{UserInfo.js => AdminUserInfoWithData.js} (93%)
 rename apps/meteor/client/views/admin/users/{EditUserWithData.js => EditUserWithData.tsx} (67%)
 rename apps/meteor/client/views/admin/users/{InviteUsers.js => InviteUsers.tsx} (70%)
 delete mode 100644 apps/meteor/client/views/admin/users/UserPageHeaderContent.tsx
 delete mode 100644 apps/meteor/client/views/admin/users/UserRow.js
 delete mode 100644 apps/meteor/client/views/admin/users/UsersPage.js
 create mode 100644 apps/meteor/client/views/admin/users/UsersPage.tsx
 rename apps/meteor/client/views/admin/users/{UsersRoute.js => UsersRoute.tsx} (80%)
 delete mode 100644 apps/meteor/client/views/admin/users/UsersTable.js
 create mode 100644 apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
 create mode 100644 apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
 create mode 100644 apps/meteor/client/views/admin/users/UsersTable/index.ts

diff --git a/apps/meteor/client/views/admin/users/AddUser.js b/apps/meteor/client/views/admin/users/AddUser.js
index 79e523cee7f84..11163b2e696cf 100644
--- a/apps/meteor/client/views/admin/users/AddUser.js
+++ b/apps/meteor/client/views/admin/users/AddUser.js
@@ -8,7 +8,7 @@ import { useEndpointData } from '../../../hooks/useEndpointData';
 import { useForm } from '../../../hooks/useForm';
 import UserForm from './UserForm';
 
-export function AddUser({ roles, onReload, ...props }) {
+const AddUser = ({ onReload, ...props }) => {
 	const t = useTranslation();
 
 	const router = useRoute('admin-users');
@@ -126,4 +126,6 @@ export function AddUser({ roles, onReload, ...props }) {
 	return (
 		<UserForm errors={errors} formValues={values} formHandlers={handlers} availableRoles={availableRoles} append={append} {...props} />
 	);
-}
+};
+
+export default AddUser;
diff --git a/apps/meteor/client/views/admin/users/UserInfo.js b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.js
similarity index 93%
rename from apps/meteor/client/views/admin/users/UserInfo.js
rename to apps/meteor/client/views/admin/users/AdminUserInfoWithData.js
index 0be62c9531617..ec777e99f9050 100644
--- a/apps/meteor/client/views/admin/users/UserInfo.js
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.js
@@ -13,7 +13,7 @@ import { getUserEmailVerified } from '../../../lib/utils/getUserEmailVerified';
 import UserInfo from '../../room/contextualBar/UserInfo/UserInfo';
 import { UserInfoActions } from './UserInfoActions';
 
-export function UserInfoWithData({ uid, username, onReload, ...props }) {
+const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
 	const t = useTranslation();
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
@@ -26,7 +26,7 @@ export function UserInfoWithData({ uid, username, onReload, ...props }) {
 		reload: reloadUserInfo,
 	} = useEndpointData(
 		'/v1/users.info',
-		useMemo(() => ({ ...(uid && { userId: uid }), ...(username && { username }) }), [uid, username]),
+		useMemo(() => ({ ...(uid && { userId: uid }) }), [uid]),
 	);
 
 	const onChange = useMutableCallback(() => {
@@ -96,4 +96,6 @@ export function UserInfoWithData({ uid, username, onReload, ...props }) {
 			{...props}
 		/>
 	);
-}
+};
+
+export default AdminUserInfoWithData;
diff --git a/apps/meteor/client/views/admin/users/EditUserWithData.js b/apps/meteor/client/views/admin/users/EditUserWithData.tsx
similarity index 67%
rename from apps/meteor/client/views/admin/users/EditUserWithData.js
rename to apps/meteor/client/views/admin/users/EditUserWithData.tsx
index 0e4ba0328ac40..84b63b12d3c00 100644
--- a/apps/meteor/client/views/admin/users/EditUserWithData.js
+++ b/apps/meteor/client/views/admin/users/EditUserWithData.tsx
@@ -1,15 +1,21 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Box, Callout } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactElement } from 'react';
 
 import { FormSkeleton } from '../../../components/Skeleton';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import EditUser from './EditUser';
 
-function EditUserWithData({ uid, ...props }) {
+type EditUserWithDataProps = {
+	uid: IUser['_id'];
+	onReload: () => void;
+};
+
+const EditUserWithData = ({ uid, onReload, ...props }: EditUserWithDataProps): ReactElement => {
 	const t = useTranslation();
-	const { value: roleData, phase: roleState, error: roleError } = useEndpointData('/v1/roles.list', '');
+	const { value: roleData, phase: roleState, error: roleError } = useEndpointData('/v1/roles.list');
 	const {
 		value: data,
 		phase: state,
@@ -35,7 +41,7 @@ function EditUserWithData({ uid, ...props }) {
 		);
 	}
 
-	return <EditUser data={data.user} roles={roleData.roles} {...props} />;
-}
+	return <EditUser data={data?.user} roles={roleData?.roles} onReload={onReload} {...props} />;
+};
 
 export default EditUserWithData;
diff --git a/apps/meteor/client/views/admin/users/InviteUsers.js b/apps/meteor/client/views/admin/users/InviteUsers.tsx
similarity index 70%
rename from apps/meteor/client/views/admin/users/InviteUsers.js
rename to apps/meteor/client/views/admin/users/InviteUsers.tsx
index 7344fcb85ebde..082c90115f322 100644
--- a/apps/meteor/client/views/admin/users/InviteUsers.js
+++ b/apps/meteor/client/views/admin/users/InviteUsers.tsx
@@ -1,17 +1,20 @@
 import { Box, Button, Icon, TextAreaInput } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, ReactElement, ChangeEvent, ComponentProps } from 'react';
 
 import { validateEmail } from '../../../../lib/emailValidator';
 import VerticalBar from '../../../components/VerticalBar';
 
-export function InviteUsers({ data, ...props }) {
+type InviteUsersProps = ComponentProps<typeof VerticalBar.ScrollableContent>;
+
+const InviteUsers = (props: InviteUsersProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const [text, setText] = useState('');
 	const sendInvites = useMethod('sendInvitationEmail');
-	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val) => validateEmail(val)), []);
-	const handleClick = async () => {
+	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val: string) => validateEmail(val)), []);
+
+	const handleClick = async (): Promise<void> => {
 		try {
 			await sendInvites(getEmails(text));
 			dispatchToastMessage({ type: 'success', message: t('Emails_sent_successfully!') });
@@ -19,6 +22,7 @@ export function InviteUsers({ data, ...props }) {
 			dispatchToastMessage({ type: 'error', message: error.message });
 		}
 	};
+
 	return (
 		<VerticalBar.ScrollableContent {...props}>
 			<Box is='h2' fontScale='h2' mb='x8'>
@@ -27,11 +31,13 @@ export function InviteUsers({ data, ...props }) {
 			<Box fontScale='p2' mb='x8'>
 				{t('Send_invitation_email_info')}
 			</Box>
-			<TextAreaInput rows={5} flexGrow={0} onChange={(e) => setText(e.currentTarget.value)} />
+			<TextAreaInput rows={5} flexGrow={0} onChange={(e: ChangeEvent<HTMLInputElement>): void => setText(e.currentTarget.value)} />
 			<Button primary onClick={handleClick} disabled={!getEmails(text).length} alignItems='stretch' mb='x8'>
 				<Icon name='send' size='x16' />
 				{t('Send')}
 			</Button>
 		</VerticalBar.ScrollableContent>
 	);
-}
+};
+
+export default InviteUsers;
diff --git a/apps/meteor/client/views/admin/users/UserPageHeaderContent.tsx b/apps/meteor/client/views/admin/users/UserPageHeaderContent.tsx
deleted file mode 100644
index f7bb9928f68d2..0000000000000
--- a/apps/meteor/client/views/admin/users/UserPageHeaderContent.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
-import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { ReactElement } from 'react';
-
-const UserPageHeaderContent = (): ReactElement => {
-	const usersRoute = useRoute('admin-users');
-	const t = useTranslation();
-
-	const handleNewButtonClick = (): void => {
-		usersRoute.push({ context: 'new' });
-	};
-
-	const handleInviteButtonClick = (): void => {
-		usersRoute.push({ context: 'invite' });
-	};
-
-	return (
-		<>
-			<ButtonGroup>
-				<Button onClick={handleNewButtonClick}>
-					<Icon size='x20' name='user-plus' /> {t('New')}
-				</Button>
-				<Button onClick={handleInviteButtonClick}>
-					<Icon size='x20' name='mail' /> {t('Invite')}
-				</Button>
-			</ButtonGroup>
-		</>
-	);
-};
-
-export default UserPageHeaderContent;
diff --git a/apps/meteor/client/views/admin/users/UserRow.js b/apps/meteor/client/views/admin/users/UserRow.js
deleted file mode 100644
index 5844c6bcb4a09..0000000000000
--- a/apps/meteor/client/views/admin/users/UserRow.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Box, Table } from '@rocket.chat/fuselage';
-import { capitalize } from '@rocket.chat/string-helpers';
-import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
-
-import { Roles } from '../../../../app/models/client';
-import UserAvatar from '../../../components/avatar/UserAvatar';
-
-const style = {
-	whiteSpace: 'nowrap',
-	textOverflow: 'ellipsis',
-	overflow: 'hidden',
-};
-
-const UserRow = ({ emails, _id, username, name, roles, status, avatarETag, onClick, mediaQuery, active }) => {
-	const t = useTranslation();
-
-	const statusText = active ? t(capitalize(status)) : t('Disabled');
-	const roleNames = (roles || [])
-		.map((roleId) => Roles.findOne(roleId, { fields: { name: 1 } })?.name)
-		.filter((roleName) => !!roleName)
-		.join(', ');
-
-	return (
-		<Table.Row onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
-			<Table.Cell style={style}>
-				<Box display='flex' alignItems='center'>
-					<UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag} />
-					<Box display='flex' style={style} mi='x8'>
-						<Box display='flex' flexDirection='column' alignSelf='center' style={style}>
-							<Box fontScale='p2m' style={style} color='default'>
-								{name || username}
-							</Box>
-							{!mediaQuery && name && (
-								<Box fontScale='p2' color='hint' style={style}>
-									{' '}
-									{`@${username}`}{' '}
-								</Box>
-							)}
-						</Box>
-					</Box>
-				</Box>
-			</Table.Cell>
-			{mediaQuery && (
-				<Table.Cell>
-					<Box fontScale='p2m' style={style} color='hint'>
-						{username}
-					</Box>{' '}
-					<Box mi='x4' />
-				</Table.Cell>
-			)}
-			<Table.Cell style={style}>{emails && emails.length && emails[0].address}</Table.Cell>
-			{mediaQuery && <Table.Cell style={style}>{roleNames}</Table.Cell>}
-			<Table.Cell fontScale='p2' color='hint' style={style}>
-				{statusText}
-			</Table.Cell>
-		</Table.Row>
-	);
-};
-
-export default UserRow;
diff --git a/apps/meteor/client/views/admin/users/UsersPage.js b/apps/meteor/client/views/admin/users/UsersPage.js
deleted file mode 100644
index 5dab712b1b53e..0000000000000
--- a/apps/meteor/client/views/admin/users/UsersPage.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import UserPageHeaderContentWithSeatsCap from '../../../../ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap';
-import { useSeatsCap } from '../../../../ee/client/views/admin/users/useSeatsCap';
-import Page from '../../../components/Page';
-import VerticalBar from '../../../components/VerticalBar';
-import { useEndpointData } from '../../../hooks/useEndpointData';
-import { AddUser } from './AddUser';
-import EditUserWithData from './EditUserWithData';
-import { InviteUsers } from './InviteUsers';
-import { UserInfoWithData } from './UserInfo';
-import UserPageHeaderContent from './UserPageHeaderContent';
-import UsersTable from './UsersTable';
-
-const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
-
-const useQuery = ({ text, itemsPerPage, current }, sortFields) =>
-	useMemo(
-		() => ({
-			fields: JSON.stringify({
-				name: 1,
-				username: 1,
-				emails: 1,
-				roles: 1,
-				status: 1,
-				avatarETag: 1,
-				active: 1,
-			}),
-			query: JSON.stringify({
-				$or: [
-					{ 'emails.address': { $regex: text || '', $options: 'i' } },
-					{ username: { $regex: text || '', $options: 'i' } },
-					{ name: { $regex: text || '', $options: 'i' } },
-				],
-			}),
-			sort: JSON.stringify(
-				sortFields.reduce((agg, [column, direction]) => {
-					agg[column] = sortDir(direction);
-					return agg;
-				}, {}),
-			),
-			...(itemsPerPage && { count: itemsPerPage }),
-			...(current && { offset: current }),
-		}),
-		[text, itemsPerPage, current, sortFields],
-	);
-
-function UsersPage() {
-	const context = useRouteParameter('context');
-	const id = useRouteParameter('id');
-	const seatsCap = useSeatsCap();
-	const usersRoute = useRoute('admin-users');
-
-	useEffect(() => {
-		if (!context || !seatsCap) {
-			return;
-		}
-
-		if (seatsCap.activeUsers >= seatsCap.maxActiveUsers && !['edit', 'info'].includes(context)) {
-			usersRoute.push({});
-		}
-	}, [context, seatsCap, usersRoute]);
-
-	const t = useTranslation();
-
-	const handleVerticalBarCloseButtonClick = () => {
-		usersRoute.push({});
-	};
-	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
-	const [sort, setSort] = useState([
-		['name', 'asc'],
-		['usernames', 'asc'],
-	]);
-
-	const debouncedParams = useDebouncedValue(params, 500);
-	const debouncedSort = useDebouncedValue(sort, 500);
-	const query = useQuery(debouncedParams, debouncedSort);
-	const { value: data = {}, reload: reloadList } = useEndpointData('/v1/users.list', query);
-
-	const reload = () => {
-		seatsCap?.reload();
-		reloadList();
-	};
-
-	return (
-		<Page flexDirection='row'>
-			<Page>
-				<Page.Header title={t('Users')}>
-					{seatsCap &&
-						(seatsCap.maxActiveUsers < Number.POSITIVE_INFINITY ? (
-							<UserPageHeaderContentWithSeatsCap {...seatsCap} />
-						) : (
-							<UserPageHeaderContent />
-						))}
-				</Page.Header>
-				<Page.Content>
-					<UsersTable users={data.users} total={data.total} params={params} onChangeParams={setParams} sort={sort} onChangeSort={setSort} />
-				</Page.Content>
-			</Page>
-			{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.Close onClick={handleVerticalBarCloseButtonClick} />
-					</VerticalBar.Header>
-
-					{context === 'info' && id && <UserInfoWithData uid={id} onReload={reload} />}
-					{context === 'edit' && <EditUserWithData uid={id} onReload={reload} />}
-					{context === 'new' && <AddUser onReload={reload} />}
-					{context === 'invite' && <InviteUsers />}
-				</VerticalBar>
-			)}
-		</Page>
-	);
-}
-
-export default UsersPage;
diff --git a/apps/meteor/client/views/admin/users/UsersPage.tsx b/apps/meteor/client/views/admin/users/UsersPage.tsx
new file mode 100644
index 0000000000000..d71b9849dc682
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/UsersPage.tsx
@@ -0,0 +1,90 @@
+import { Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
+import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useEffect, ReactElement, useRef } from 'react';
+
+import UserPageHeaderContentWithSeatsCap from '../../../../ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap';
+import { useSeatsCap } from '../../../../ee/client/views/admin/users/useSeatsCap';
+import Page from '../../../components/Page';
+import VerticalBar from '../../../components/VerticalBar';
+import AddUser from './AddUser';
+import AdminUserInfoWithData from './AdminUserInfoWithData';
+import EditUserWithData from './EditUserWithData';
+import InviteUsers from './InviteUsers';
+import UsersTable from './UsersTable';
+
+const UsersPage = (): ReactElement => {
+	const t = useTranslation();
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const seatsCap = useSeatsCap();
+	const reload = useRef(() => null);
+	const usersRoute = useRoute('admin-users');
+
+	useEffect(() => {
+		if (!context || !seatsCap) {
+			return;
+		}
+
+		if (seatsCap.activeUsers >= seatsCap.maxActiveUsers && !['edit', 'info'].includes(context)) {
+			usersRoute.push({});
+		}
+	}, [context, seatsCap, usersRoute]);
+
+	const handleCloseVerticalBar = (): void => {
+		usersRoute.push({});
+	};
+
+	const handleNewUser = (): void => {
+		usersRoute.push({ context: 'new' });
+	};
+
+	const handleInviteUser = (): void => {
+		usersRoute.push({ context: 'invite' });
+	};
+
+	const handleReload = (): void => {
+		seatsCap?.reload();
+		reload.current();
+	};
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<Page.Header title={t('Users')}>
+					{seatsCap && seatsCap.maxActiveUsers < Number.POSITIVE_INFINITY ? (
+						<UserPageHeaderContentWithSeatsCap {...seatsCap} />
+					) : (
+						<ButtonGroup>
+							<Button onClick={handleNewUser}>
+								<Icon size='x20' name='user-plus' /> {t('New')}
+							</Button>
+							<Button onClick={handleInviteUser}>
+								<Icon size='x20' name='mail' /> {t('Invite')}
+							</Button>
+						</ButtonGroup>
+					)}
+				</Page.Header>
+				<Page.Content>
+					<UsersTable reload={reload} />
+				</Page.Content>
+			</Page>
+			{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.Close onClick={handleCloseVerticalBar} />
+					</VerticalBar.Header>
+					{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
+					{context === 'edit' && id && <EditUserWithData uid={id} onReload={handleReload} />}
+					{context === 'new' && <AddUser onReload={handleReload} />}
+					{context === 'invite' && <InviteUsers />}
+				</VerticalBar>
+			)}
+		</Page>
+	);
+};
+
+export default UsersPage;
diff --git a/apps/meteor/client/views/admin/users/UsersRoute.js b/apps/meteor/client/views/admin/users/UsersRoute.tsx
similarity index 80%
rename from apps/meteor/client/views/admin/users/UsersRoute.js
rename to apps/meteor/client/views/admin/users/UsersRoute.tsx
index 827cdf1b86f17..ace289e93dbae 100644
--- a/apps/meteor/client/views/admin/users/UsersRoute.js
+++ b/apps/meteor/client/views/admin/users/UsersRoute.tsx
@@ -1,10 +1,10 @@
 import { usePermission } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import UsersPage from './UsersPage';
 
-function UsersRoute() {
+const UsersRoute = (): ReactElement => {
 	const canViewUserAdministration = usePermission('view-user-administration');
 
 	if (!canViewUserAdministration) {
@@ -12,6 +12,6 @@ function UsersRoute() {
 	}
 
 	return <UsersPage />;
-}
+};
 
 export default UsersRoute;
diff --git a/apps/meteor/client/views/admin/users/UsersTable.js b/apps/meteor/client/views/admin/users/UsersTable.js
deleted file mode 100644
index 08b59da047d96..0000000000000
--- a/apps/meteor/client/views/admin/users/UsersTable.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback } from 'react';
-
-import FilterByText from '../../../components/FilterByText';
-import GenericTable from '../../../components/GenericTable';
-import UserRow from './UserRow';
-
-function UsersTable({ params, onChangeParams, sort, onChangeSort, ...props }) {
-	const t = useTranslation();
-
-	const usersRoute = useRoute('admin-users');
-
-	const onClick = useCallback(
-		(username) => () =>
-			usersRoute.push({
-				context: 'info',
-				id: username,
-			}),
-		[usersRoute],
-	);
-
-	const onHeaderClick = useCallback(
-		(id) => {
-			const preparedSort = [];
-
-			const [[sortBy, sortDirection]] = sort;
-
-			if (sortBy === id) {
-				preparedSort.push([id, sortDirection === 'asc' ? 'desc' : 'asc']);
-			} else {
-				preparedSort.push([id, 'asc']);
-			}
-
-			//
-			// Special cases
-
-			// If the sortable field is `name`, we should also add `usernames`
-			if (id === 'name') {
-				preparedSort.push(['usernames', sortDirection]);
-			}
-
-			// If the sortable field is `name`, we should also add `usernames`
-			if (id === 'status') {
-				preparedSort.push(['active', sortDirection === 'asc' ? 'desc' : 'asc']);
-			}
-
-			onChangeSort(preparedSort);
-		},
-		[onChangeSort, sort],
-	);
-
-	const mediaQuery = useMediaQuery('(min-width: 1024px)');
-
-	return (
-		<GenericTable
-			header={
-				<>
-					<GenericTable.HeaderCell
-						key={'name'}
-						direction={sort[0][1]}
-						active={sort[0][0] === 'name'}
-						onClick={onHeaderClick}
-						sort='name'
-						w='x200'
-					>
-						{t('Name')}
-					</GenericTable.HeaderCell>
-					{mediaQuery && (
-						<GenericTable.HeaderCell
-							key={'username'}
-							direction={sort[0][1]}
-							active={sort[0][0] === 'username'}
-							onClick={onHeaderClick}
-							sort='username'
-							w='x140'
-						>
-							{t('Username')}
-						</GenericTable.HeaderCell>
-					)}
-					<GenericTable.HeaderCell
-						key={'email'}
-						direction={sort[0][1]}
-						active={sort[0][0] === 'emails.adress'}
-						onClick={onHeaderClick}
-						sort='emails.address'
-						w='x120'
-					>
-						{t('Email')}
-					</GenericTable.HeaderCell>
-					{mediaQuery && (
-						<GenericTable.HeaderCell
-							key={'roles'}
-							direction={sort[0][1]}
-							active={sort[0][0] === 'roles'}
-							onClick={onHeaderClick}
-							sort='roles'
-							w='x120'
-						>
-							{t('Roles')}
-						</GenericTable.HeaderCell>
-					)}
-					<GenericTable.HeaderCell
-						key={'status'}
-						direction={sort[0][1]}
-						active={sort[0][0] === 'status'}
-						onClick={onHeaderClick}
-						sort='status'
-						w='x100'
-					>
-						{t('Status')}
-					</GenericTable.HeaderCell>
-				</>
-			}
-			results={props.users}
-			total={props.total}
-			setParams={onChangeParams}
-			params={params}
-			renderFilter={({ onChange, ...props }) => <FilterByText placeholder={t('Search_Users')} onChange={onChange} {...props} />}
-		>
-			{(props) => <UserRow key={props._id} onClick={onClick} mediaQuery={mediaQuery} {...props} />}
-		</GenericTable>
-	);
-}
-
-export default UsersTable;
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
new file mode 100644
index 0000000000000..eb16bb1ad851a
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -0,0 +1,161 @@
+import { States, StatesIcon, StatesTitle, Pagination } from '@rocket.chat/fuselage';
+import { useMediaQuery, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, useMemo, MutableRefObject, useState, useEffect } from 'react';
+
+import FilterByText from '../../../../components/FilterByText';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+} from '../../../../components/GenericTable';
+import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
+import { useSort } from '../../../../components/GenericTable/hooks/useSort';
+import { useEndpointData } from '../../../../hooks/useEndpointData';
+import { AsyncStatePhase } from '../../../../lib/asyncState';
+import UsersTableRow from './UsersTableRow';
+
+type UsersTableProps = {
+	reload: MutableRefObject<() => void>;
+};
+
+const UsersTable = ({ reload }: UsersTableProps): ReactElement | null => {
+	const t = useTranslation();
+	const usersRoute = useRoute('admin-users');
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+	const [text, setText] = useState('');
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'status'>('name');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				fields: JSON.stringify({
+					name: 1,
+					username: 1,
+					emails: 1,
+					roles: 1,
+					status: 1,
+					avatarETag: 1,
+					active: 1,
+				}),
+				query: JSON.stringify({
+					$or: [
+						{ 'emails.address': { $regex: text || '', $options: 'i' } },
+						{ username: { $regex: text || '', $options: 'i' } },
+						{ name: { $regex: text || '', $options: 'i' } },
+					],
+				}),
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				count: itemsPerPage,
+				offset: current,
+			}),
+			[text, itemsPerPage, current, sortBy, sortDirection],
+		),
+		500,
+	);
+
+	const { value, phase, reload: reloadList } = useEndpointData('/v1/users.list', query);
+
+	useEffect(() => {
+		reload.current = reloadList;
+	}, [reload, reloadList]);
+
+	const handleClick = useMutableCallback((id): void =>
+		usersRoute.push({
+			context: 'info',
+			id,
+		}),
+	);
+
+	if (phase === AsyncStatePhase.REJECTED) {
+		return null;
+	}
+
+	return (
+		<>
+			<FilterByText placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
+			{value?.users.length === 0 && (
+				<States>
+					<StatesIcon name='magnifier' />
+					<StatesTitle>{t('No_results_found')}</StatesTitle>
+				</States>
+			)}
+			{value?.users && value.users.length > 0 && (
+				<>
+					<GenericTable>
+						<GenericTableHeader>
+							<GenericTableHeaderCell
+								w='x200'
+								key='name'
+								direction={sortDirection}
+								active={sortBy === 'name'}
+								onClick={setSort}
+								sort='name'
+							>
+								{t('Name')}
+							</GenericTableHeaderCell>
+							{mediaQuery && (
+								<GenericTableHeaderCell
+									w='x140'
+									key='username'
+									direction={sortDirection}
+									active={sortBy === 'username'}
+									onClick={setSort}
+									sort='username'
+								>
+									{t('Username')}
+								</GenericTableHeaderCell>
+							)}
+							<GenericTableHeaderCell
+								w='x120'
+								key='email'
+								direction={sortDirection}
+								active={sortBy === 'emails.address'}
+								onClick={setSort}
+								sort='emails.address'
+							>
+								{t('Email')}
+							</GenericTableHeaderCell>
+							{mediaQuery && (
+								<GenericTableHeaderCell w='x120' key='roles' onClick={setSort}>
+									{t('Roles')}
+								</GenericTableHeaderCell>
+							)}
+							<GenericTableHeaderCell
+								w='x100'
+								key='status'
+								direction={sortDirection}
+								active={sortBy === 'status'}
+								onClick={setSort}
+								sort='status'
+							>
+								{t('Status')}
+							</GenericTableHeaderCell>
+						</GenericTableHeader>
+						<GenericTableBody>
+							{phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={5} />}
+							{value?.users.map((user) => (
+								<UsersTableRow key={user._id} onClick={handleClick} mediaQuery={mediaQuery} user={user} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					{phase === AsyncStatePhase.RESOLVED && (
+						<Pagination
+							current={current}
+							itemsPerPage={itemsPerPage}
+							count={value?.total || 0}
+							onSetItemsPerPage={onSetItemsPerPage}
+							onSetCurrent={onSetCurrent}
+							{...paginationProps}
+						/>
+					)}
+				</>
+			)}
+		</>
+	);
+};
+
+export default UsersTable;
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
new file mode 100644
index 0000000000000..a7157802391c3
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -0,0 +1,63 @@
+import { IRole, IUser } from '@rocket.chat/core-typings';
+import { Box, TableRow, TableCell } from '@rocket.chat/fuselage';
+import { capitalize } from '@rocket.chat/string-helpers';
+import { useTranslation, TranslationKey } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import { Roles } from '../../../../../app/models/client';
+import UserAvatar from '../../../../components/avatar/UserAvatar';
+
+type UsersTableRowProps = {
+	user: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>;
+	onClick: (id: IUser['_id']) => void;
+	mediaQuery: boolean;
+};
+
+const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): ReactElement => {
+	const t = useTranslation();
+	const { _id, emails, username, name, roles, status, active, avatarETag } = user;
+	const statusText = active ? t(capitalize(status as string) as TranslationKey) : t('Disabled');
+
+	const roleNames = (roles || [])
+		.map((roleId) => (Roles.findOne(roleId, { fields: { name: 1 } }) as IRole | undefined)?.name)
+		.filter((roleName): roleName is string => !!roleName)
+		.join(', ');
+
+	return (
+		<TableRow onKeyDown={(): void => onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
+			<TableCell withTruncatedText>
+				<Box display='flex' alignItems='center'>
+					{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} username={username} etag={avatarETag} />}
+					<Box display='flex' mi='x8' withTruncatedText>
+						<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+							<Box fontScale='p2m' color='default' withTruncatedText>
+								{name || username}
+							</Box>
+							{!mediaQuery && name && (
+								<Box fontScale='p2' color='hint' withTruncatedText>
+									{' '}
+									{`@${username}`}{' '}
+								</Box>
+							)}
+						</Box>
+					</Box>
+				</Box>
+			</TableCell>
+			{mediaQuery && (
+				<TableCell>
+					<Box fontScale='p2m' color='hint' withTruncatedText>
+						{username}
+					</Box>{' '}
+					<Box mi='x4' />
+				</TableCell>
+			)}
+			<TableCell withTruncatedText>{emails?.length && emails[0].address}</TableCell>
+			{mediaQuery && <TableCell withTruncatedText>{roleNames}</TableCell>}
+			<TableCell fontScale='p2' color='hint' withTruncatedText>
+				{statusText}
+			</TableCell>
+		</TableRow>
+	);
+};
+
+export default UsersTableRow;
diff --git a/apps/meteor/client/views/admin/users/UsersTable/index.ts b/apps/meteor/client/views/admin/users/UsersTable/index.ts
new file mode 100644
index 0000000000000..4b01807f4f6c3
--- /dev/null
+++ b/apps/meteor/client/views/admin/users/UsersTable/index.ts
@@ -0,0 +1 @@
+export { default } from './UsersTable';
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index f4ce7d194e917..b68930eb02d90 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -271,6 +271,7 @@
   "Add_Reaction": "Add Reaction",
   "Add_Role": "Add Role",
   "Add_Sender_To_ReplyTo": "Add Sender to Reply-To",
+  "Add_URL": "Add URL",
   "Add_user": "Add user",
   "Add_User": "Add User",
   "Add_users": "Add users",
@@ -3776,6 +3777,7 @@
   "Unsafe_Url": "Unsafe URL",
   "Rocket_Chat_Alert": "Rocket.Chat Alert",
   "Role": "Role",
+  "Roles": "Roles",
   "Role_Editing": "Role Editing",
   "Role_Mapping": "Role mapping",
   "Role_removed": "Role removed",
diff --git a/apps/meteor/tests/e2e/11-admin.spec.ts b/apps/meteor/tests/e2e/11-admin.spec.ts
index d4f1f1dc16f28..450aa0e2408ba 100644
--- a/apps/meteor/tests/e2e/11-admin.spec.ts
+++ b/apps/meteor/tests/e2e/11-admin.spec.ts
@@ -147,7 +147,7 @@ test.describe('[Administration]', () => {
 					});
 					test('expect dont user when write wrong name', async () => {
 						await admin.usersFilter().type('any_user_wrong');
-						await expect(admin.notFoundChannelOrUser()).toBeVisible();
+						await expect(admin.notFoundChannels()).toBeVisible();
 					});
 				});
 
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
index 759bc14636fa1..4fcf3d4c9fa78 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
@@ -99,6 +99,10 @@ export default class Administration extends BasePage {
 		return this.getPage().locator("//div[text()='No data found']");
 	}
 
+	public notFoundChannels(): Locator {
+		return this.getPage().locator("//div[text()='No results found']");
+	}
+
 	public usersRocketCat(): Locator {
 		return this.getPage().locator('td=Rocket.Cat');
 	}
diff --git a/packages/rest-typings/src/v1/users.ts b/packages/rest-typings/src/v1/users.ts
index df11fb399124e..9d9413034dde5 100644
--- a/packages/rest-typings/src/v1/users.ts
+++ b/packages/rest-typings/src/v1/users.ts
@@ -1,6 +1,9 @@
 import type { ITeam, IUser } from '@rocket.chat/core-typings';
 import Ajv from 'ajv';
 
+import type { PaginatedRequest } from '../helpers/PaginatedRequest';
+import type { PaginatedResult } from '../helpers/PaginatedResult';
+
 const ajv = new Ajv({
 	coerceTypes: true,
 });
@@ -137,6 +140,11 @@ export type UsersEndpoints = {
 			items: Required<Pick<IUser, '_id' | 'name' | 'username' | 'nickname' | 'status' | 'avatarETag'>>[];
 		};
 	};
+	'/v1/users.list': {
+		GET: (params: PaginatedRequest<{ query: string }>) => PaginatedResult<{
+			users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[];
+		}>;
+	};
 	'/v1/users.listTeams': {
 		GET: (params: UsersListTeams) => { teams: Array<ITeam> };
 	};

From f8065bf4fb961d68d19daaa28e33739c9983e5fb Mon Sep 17 00:00:00 2001
From: Martin Schoeler <martin.schoeler@rocket.chat>
Date: Mon, 13 Jun 2022 19:08:37 -0300
Subject: [PATCH 16/36] [FIX] fixes HTML sanitizing error. (#25410)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->
If the user sent a HTML message over our product to a livechat user the HTML would get rendered on the message box, this prevents it from happening.

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->
try to send some html tags in livechat

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

**Will be ready to review as soon as https://github.com/RocketChat/Rocket.Chat/pull/25312 is merged**

Co-authored-by: Cauê Felchar <11652381+cauefcr@users.noreply.github.com>
---
 packages/livechat/src/lib/room.js              | 4 +---
 packages/livechat/src/lib/threads.js           | 4 +++-
 packages/livechat/src/routes/Chat/container.js | 4 +---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/livechat/src/lib/room.js b/packages/livechat/src/lib/room.js
index 31b7e7a1675e4..18e5be2b8282e 100644
--- a/packages/livechat/src/lib/room.js
+++ b/packages/livechat/src/lib/room.js
@@ -3,7 +3,7 @@ import { route } from 'preact-router';
 
 import { Livechat } from '../api';
 import { CallStatus, isCallOngoing } from '../components/Calls/CallStatus';
-import { setCookies, upsert, canRenderMessage, parse } from '../components/helpers';
+import { setCookies, upsert, canRenderMessage } from '../components/helpers';
 import { store, initialState } from '../store';
 import { normalizeAgent } from './api';
 import Commands from './commands';
@@ -175,8 +175,6 @@ Livechat.onMessage(async (message) => {
 
 	message = transformAgentInformationOnMessage(message);
 
-	message.msg = parse(message.msg);
-
 	await store.setState({
 		messages: upsert(store.state.messages, message, ({ _id }) => _id === message._id, ({ ts }) => ts),
 	});
diff --git a/packages/livechat/src/lib/threads.js b/packages/livechat/src/lib/threads.js
index 61db657ab7198..2af951adf55a5 100644
--- a/packages/livechat/src/lib/threads.js
+++ b/packages/livechat/src/lib/threads.js
@@ -1,5 +1,5 @@
 import { Livechat } from '../api';
-import { upsert } from '../components/helpers';
+import { parse, upsert } from '../components/helpers';
 import { store } from '../store';
 import { createToken } from './random';
 
@@ -60,6 +60,8 @@ export const normalizeMessage = async (message) => {
 		return null;
 	}
 
+	message.msg = parse(message.msg);
+
 	if (message && message.tmid && !message.threadMsg) {
 		return normalizeThreadMessage(message);
 	}
diff --git a/packages/livechat/src/routes/Chat/container.js b/packages/livechat/src/routes/Chat/container.js
index be30d7b3fc52e..aa119a019542f 100644
--- a/packages/livechat/src/routes/Chat/container.js
+++ b/packages/livechat/src/routes/Chat/container.js
@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 import { Livechat } from '../../api';
 import { ModalManager } from '../../components/Modal';
-import { debounce, getAvatarUrl, canRenderMessage, throttle, upsert, parse } from '../../components/helpers';
+import { debounce, getAvatarUrl, canRenderMessage, throttle, upsert } from '../../components/helpers';
 import { normalizeQueueAlert } from '../../lib/api';
 import constants from '../../lib/constants';
 import { loadConfig } from '../../lib/main';
@@ -117,8 +117,6 @@ class ChatContainer extends Component {
 			return;
 		}
 
-		msg = parse(msg);
-
 		await this.grantUser();
 		const { _id: rid } = await this.getRoom();
 		const { alerts, dispatch, token, user } = this.props;

From 666740adb59bdc418491e93bd9ff14b52f50aa05 Mon Sep 17 00:00:00 2001
From: souzaramon <ramon.souza@objective.com.br>
Date: Mon, 13 Jun 2022 19:28:22 -0300
Subject: [PATCH 17/36] Chore: remove unused locators from e2e tests (#25860)

## Proposed changes (including videos or screenshots)
- Remove unused locators
---
 apps/meteor/tests/e2e/06-messaging.spec.ts    |   2 +-
 .../e2e/utils/pageobjects/Administration.ts   | 336 ------------------
 .../tests/e2e/utils/pageobjects/FlexTab.ts    | 153 +-------
 .../tests/e2e/utils/pageobjects/Global.ts     |  31 +-
 .../tests/e2e/utils/pageobjects/LoginPage.ts  |  24 +-
 .../e2e/utils/pageobjects/MainContent.ts      | 102 +-----
 .../pageobjects/PreferencesMainContent.ts     |  21 +-
 .../e2e/utils/pageobjects/SetupWizard.ts      |  30 +-
 .../tests/e2e/utils/pageobjects/SideNav.ts    |  92 +----
 9 files changed, 14 insertions(+), 777 deletions(-)

diff --git a/apps/meteor/tests/e2e/06-messaging.spec.ts b/apps/meteor/tests/e2e/06-messaging.spec.ts
index 6be22de57680c..584d52648d605 100644
--- a/apps/meteor/tests/e2e/06-messaging.spec.ts
+++ b/apps/meteor/tests/e2e/06-messaging.spec.ts
@@ -158,7 +158,7 @@ test.describe('[Messaging]', () => {
 				});
 
 				test('expect not show modal after click in cancel button', async () => {
-					await mainContent.cancelClick();
+					await mainContent.modalCancelButton().click();
 					await expect(mainContent.modalFilePreview()).not.toBeVisible();
 				});
 
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
index 4fcf3d4c9fa78..b5470b5d629d6 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
@@ -15,10 +15,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('button[title="Back"]');
 	}
 
-	public layoutLink(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/Layout"]');
-	}
-
 	public infoLink(): Locator {
 		return this.getPage().locator('//div[contains(text(),"Info")]');
 	}
@@ -47,18 +43,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('.flex-nav [href="/admin/permissions"]');
 	}
 
-	public customScriptBtn(): Locator {
-		return this.getPage().locator('.section:nth-of-type(6) .collapse');
-	}
-
-	public customScriptLoggedOutTextArea(): Locator {
-		return this.getPage().locator('.section:nth-of-type(6) .CodeMirror-scroll');
-	}
-
-	public customScriptLoggedInTextArea(): Locator {
-		return this.getPage().locator('.CodeMirror.cm-s-default:nth-of-type(2)');
-	}
-
 	public infoDeployment(): Locator {
 		return this.getPage().locator('//div[text()="Deployment"]');
 	}
@@ -79,10 +63,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('input[placeholder ="Search Rooms"]');
 	}
 
-	public roomsChannelsCheckbox(): Locator {
-		return this.getPage().locator('label:nth-of-type(1) input[name="room-type"]');
-	}
-
 	public async verifyCheckBoxRendered(checkBoxes: string[]): Promise<void> {
 		const expected = [];
 		for (const checkBox of checkBoxes) {
@@ -103,18 +83,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator("//div[text()='No results found']");
 	}
 
-	public usersRocketCat(): Locator {
-		return this.getPage().locator('td=Rocket.Cat');
-	}
-
-	public usersInternalAdmin(): Locator {
-		return this.getPage().locator('.rcx-table__cell:contains("@rocketchat.internal.admin.test")');
-	}
-
-	public usersInRole(): Locator {
-		return this.getPage().locator('button:contains("Users in role")');
-	}
-
 	public usersFilter(): Locator {
 		return this.getPage().locator('input[placeholder="Search Users"]');
 	}
@@ -123,50 +91,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator(`tr > td:has-text("${id}")`);
 	}
 
-	public rolesNewRolesButton(): Locator {
-		return this.getPage().locator('button[aria-label="New"]');
-	}
-
-	public rolesPermissionGrid(): Locator {
-		return this.getPage().locator('[role=tab]:contains("Permission")');
-	}
-
-	public rolesAdmin(): Locator {
-		return this.getPage().locator('.rcx-table__cell--header:contains("Admin")');
-	}
-
-	public rolesModerator(): Locator {
-		return this.getPage().locator('[title="Moderator"]');
-	}
-
-	public rolesOwner(): Locator {
-		return this.getPage().locator('[title="Owner"]');
-	}
-
-	public rolesReturnLink(): Locator {
-		return this.getPage().locator('[href="/admin/permissions"]');
-	}
-
-	public rolesNewRoleName(): Locator {
-		return this.getPage().locator('input[placeholder="Role"]');
-	}
-
-	public rolesNewRoleDesc(): Locator {
-		return this.getPage().locator('input[placeholder="Description"]');
-	}
-
-	public rolesNewRoleScope(): Locator {
-		return this.getPage().locator('label:contains("Scope")');
-	}
-
-	public rolesAddBtn(): Locator {
-		return this.getPage().locator('button.add');
-	}
-
-	public rolesRoomsSearchForm(): Locator {
-		return this.getPage().locator('.search [name="room"]');
-	}
-
 	public rolesSettingsFindInput(): Locator {
 		return this.getPage().locator('[data-qa="PermissionTable-PermissionsTableFilter"]');
 	}
@@ -175,73 +99,10 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa="PermissionTable-Settings"]');
 	}
 
-	public rolesPermissionsTab(): Locator {
-		return this.getPage().locator('[data-qa="PermissionTable-Permissions"]');
-	}
-
 	public homeTitleInput(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Layout_Home_Title"]');
 	}
 
-	// permissions grids checkboxes
-
-	public rolesUserCreateC(): Locator {
-		return this.getPage().locator('[name="perm[user][create-c]"]');
-	}
-
-	public rolesUserCreateP(): Locator {
-		return this.getPage().locator('[name="perm[user][create-p]"]');
-	}
-
-	public rolesUserCreateD(): Locator {
-		return this.getPage().locator('[name="perm[user][create-d]"]');
-	}
-
-	public rolesUserMentionAll(): Locator {
-		return this.getPage().locator('[name="perm[user][mention-all]"]');
-	}
-
-	public rolesUserPreviewC(): Locator {
-		return this.getPage().locator('[name="perm[user][preview-c-room]"]');
-	}
-
-	public rolesUserViewC(): Locator {
-		return this.getPage().locator('[name="perm[user][view-c-room]"]');
-	}
-
-	public rolesUserViewD(): Locator {
-		return this.getPage().locator('[name="perm[user][view-d-room]"]');
-	}
-
-	public rolesUserViewP(): Locator {
-		return this.getPage().locator('[name="perm[user][view-p-room]"]');
-	}
-
-	public rolesUserHistory(): Locator {
-		return this.getPage().locator('[name="perm[user][view-history]"]');
-	}
-
-	public rolesOwnerDeleteMessage(): Locator {
-		return this.getPage().locator('[name="perm[owner][delete-message]"]');
-	}
-
-	public rolesOwnerEditMessage(): Locator {
-		return this.getPage().locator('[name="perm[owner][edit-message]"]');
-	}
-
-	public rolesManageSettingsPermissions(): Locator {
-		return this.getPage().locator('[name="perm[user][manage-selected-settings]"]');
-	}
-
-	public rolesSettingLayoutTitle(): Locator {
-		return this.getPage().locator('[name="perm[user][change-setting-Layout_Home_Title]"');
-	}
-
-	public emojiFilter(): Locator {
-		return this.getPage().locator('#emoji-filter');
-	}
-
-	// settings
 	public buttonSave(): Locator {
 		return this.getPage().locator('button.save');
 	}
@@ -298,10 +159,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-setting-id="Language"]');
 	}
 
-	public generalLanguagePtOption(): Locator {
-		return this.getPage().locator('[value="pt"]');
-	}
-
 	public generalSelfSignedCerts(): Locator {
 		return this.getPage().locator('//label[@data-qa-setting-id="Allow_Invalid_SelfSigned_Certs"]//i');
 	}
@@ -318,14 +175,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-reset-setting-id="Favorite_Rooms"]');
 	}
 
-	public generalOpenFirstChannel(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="First_Channel_After_Login"]');
-	}
-
-	public generalOpenFirstChannelReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="First_Channel_After_Login"]');
-	}
-
 	public generalCdnPrefix(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="CDN_PREFIX"]');
 	}
@@ -358,14 +207,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-reset-setting-id="Bugsnag_api_key"]');
 	}
 
-	public displayLastMessage(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Store_Last_Message"]');
-	}
-
-	public displayLastMessageReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Store_Last_Message"]');
-	}
-
 	public robotsFileContents(): Locator {
 		return this.getPage().locator('#Robot_Instructions_File_Content');
 	}
@@ -390,18 +231,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_send_enable"]');
 	}
 
-	public generalIframeSendReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Iframe_Integration_send_enable"]');
-	}
-
-	public generalIframeSendTarpublicOrigin(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_send_tarpublic_origin"]');
-	}
-
-	public generalIframeSendTarpublicOriginReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Iframe_Integration_send_tarpublic_origin"]');
-	}
-
 	public generalIframeReceive(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_receive_enable"]');
 	}
@@ -410,42 +239,22 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_receive_origin"]');
 	}
 
-	public generalIframeReceiveOriginReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Iframe_Integration_receive_origin"]');
-	}
-
 	public generalNotificationsMaxRoomMembers(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Notifications_Max_Room_Members"]');
 	}
 
-	public generalNotificationsMaxRoomMembersReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Notifications_Max_Room_Members"]');
-	}
-
 	public generalRestApiUserLimit(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="API_User_Limit"]');
 	}
 
-	public generalRestApiUserLimitReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="API_User_Limit"]');
-	}
-
 	public generalReporting(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Statistics_reporting"]');
 	}
 
-	public generalReportingReset(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Statistics_reporting"]');
-	}
-
 	public generalStreamCastAddress(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Stream_Cast_Address"]');
 	}
 
-	public generalStreamCastAddressReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Stream_Cast_Address"]');
-	}
-
 	public generalUTF8UsernamesRegex(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="UTF8_User_Names_Validation"]');
 	}
@@ -454,23 +263,10 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-setting-id="UTF8_Channel_Names_Validation"]');
 	}
 
-	public generalUTF8RegexReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="UTF8_User_Names_Validation"]');
-	}
-
 	public generalUTF8NamesSlug(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="UTF8_Names_Slugify"]');
 	}
 
-	public generalUTF8NamesSlugReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="UTF8_Names_Slugify"]');
-	}
-
-	public generalLayoutTitle(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Layout_Home_Title"]');
-	}
-
-	// accounts
 	public accountsSectionDefaultUserPreferences(): Locator {
 		return this.getPage().locator('[data-qa-section="Accounts_Default_User_Preferences"]');
 	}
@@ -479,214 +275,82 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_enableAutoAway"]');
 	}
 
-	public accountsEnableAutoAwayReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_enableAutoAway"]');
-	}
-
 	public accountsIdleTimeLimit(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_idleTimeLimit"]');
 	}
 
-	public accountsIdleTimeLimitReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_idleTimeLimit"]');
-	}
-
 	public accountsDesktopNotifications(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_desktopNotifications"]');
 	}
 
-	public accountsDesktopNotificationsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_desktopNotifications"]');
-	}
-
 	public accountsMobileNotifications(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_pushNotifications"]');
 	}
 
-	public accountsMobileNotificationsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_pushNotifications"]');
-	}
-
 	public accountsUnreadAlert(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_unreadAlert"]');
 	}
 
-	public accountsUnreadAlertReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_unreadAlert"]');
-	}
-
-	public accountsUseEmojis(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_useEmojis"]');
-	}
-
-	public accountsUseEmojisReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_useEmojis"]');
-	}
-
 	public accountsConvertAsciiEmoji(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_convertAsciiEmoji"]');
 	}
 
-	public accountsConvertAsciiEmojiReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_convertAsciiEmoji"]');
-	}
-
 	public accountsAutoImageLoad(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_autoImageLoad"]');
 	}
 
-	public accountsAutoImageLoadReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_autoImageLoad"]');
-	}
-
 	public accountsSaveMobileBandwidth(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_saveMobileBandwidth"]');
 	}
 
-	public accountsSaveMobileBandwidthReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_saveMobileBandwidth"]');
-	}
-
 	public accountsCollapseMediaByDefault(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_collapseMediaByDefault"]');
 	}
 
-	public accountsCollapseMediaByDefaultReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_collapseMediaByDefault"]');
-	}
-
 	public accountsHideUsernames(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideUsernames"]');
 	}
 
-	public accountsHideUsernamesReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_hideUsernames"]');
-	}
-
 	public accountsHideRoles(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideRoles"]');
 	}
 
-	public accountsHideRolesReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_hideRoles"]');
-	}
-
 	public accountsHideFlexTab(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideFlexTab"]');
 	}
 
-	public accountsHideFlexTabReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_hideFlexTab"]');
-	}
-
-	public DisplayAvatars(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="displayAvatars"]');
-	}
-
-	public DisplayAvatarsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="displayAvatars"]');
-	}
-
 	public accountsDisplayAvatars(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_displayAvatars"]');
 	}
 
-	public accountsMergeChannels(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_mergeChannels"]');
-	}
-
-	public accountsMergeChannelsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_mergeChannels"]');
-	}
-
 	public accountsSendOnEnter(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_sendOnEnter"]');
 	}
 
-	public accountsSendOnEnterReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_sendOnEnter"]');
-	}
-
 	public accountsMessageViewMode(): Locator {
 		return this.getPage().locator('//div[@data-qa-setting-id="Accounts_Default_User_Preferences_messageViewMode"]//div//span');
 	}
 
-	public accountsMessageViewModeReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_messageViewMode"]');
-	}
-
 	public accountsEmailNotificationMode(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_emailNotificationMode"]');
 	}
 
-	public accountsEmailNotificationModeReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_emailNotificationMode"]');
-	}
-
 	public accountsNewRoomNotification(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newRoomNotification"]');
 	}
 
-	public accountsNewRoomNotificationReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_newRoomNotification"]');
-	}
-
 	public accountsNewMessageNotification(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newMessageNotification"]');
 	}
 
-	public accountsNewMessageNotificationReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_newMessageNotification"]');
-	}
-
-	public accountsMuteFocusedConversations(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_muteFocusedConversations"]');
-	}
-
-	public accountsMuteFocusedConversationsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_muteFocusedConversations"]');
-	}
-
 	public accountsNotificationsSoundVolume(): Locator {
 		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_notificationsSoundVolume"]');
 	}
 
-	public accountsNotificationsSoundVolumeReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Accounts_Default_User_Preferences_notificationsSoundVolume"]');
-	}
-
-	public accountsRealNameChange(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_AllowRealNameChange"]');
-	}
-
-	public accountsUserStatusMessageChange(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_AllowUserStatusMessageChange"]');
-	}
-
-	public accountsUsernameChange(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_AllowUsernameChange"]');
-	}
-
-	public layoutButtonExpandContent(): Locator {
-		return this.getPage().locator('.section:nth-of-type(2) .rc-button.rc-button--nude');
-	}
-
-	public modalCancel(): Locator {
-		return this.getPage().locator('//button[text()="Cancel"]');
-	}
-
-	public async publicUserFromList(user: string): Promise<void> {
-		await expect(this.getPage().locator(`.rcx-table__cell:first-child:contains(${user}) figure`)).toBeVisible();
-	}
-
 	public adminCheckBox(checkBox: string): Locator {
 		return this.getPage().locator(`//label[text()="${checkBox}"]/preceding-sibling::label/i`);
 	}
 
-	public async adminSaveChanges(): Promise<void> {
-		await this.buttonSave().click();
-	}
-
 	public inputPermissionsSearch(): Locator {
 		return this.getPage().locator('.main-content input[placeholder="Search"]');
 	}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts b/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
index ca31a404944d2..2c2a8f6ac1282 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
@@ -3,7 +3,7 @@ import { expect, Locator } from '@playwright/test';
 import BasePage from './BasePage';
 import Global from './Global';
 
-class FlexTab extends BasePage {
+export default class FlexTab extends BasePage {
 	private global = new Global(this.getPage());
 
 	public mainSideBar(): Locator {
@@ -22,23 +22,10 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('//main/header//*[contains(@class, "rcx-icon--name-kebab")]/..');
 	}
 
-	public moreActions(): Locator {
-		return this.getPage().locator('.rcx-button-group__item:not(.hidden) .rcx-icon--name-kebab');
-	}
-
-	public sendBtn(): Locator {
-		return this.getPage().locator('.rcx-vertical-bar .rc-message-box__icon.js-send');
-	}
-
 	public messageInput(): Locator {
 		return this.getPage().locator('.rcx-vertical-bar .js-input-message');
 	}
 
-	public threadTab(): Locator {
-		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-thread');
-	}
-
-	// Channel Info Tab
 	public channelTab(): Locator {
 		return this.getPage().locator('(//main//*[contains(@class, "rcx-icon--name-info-circled")])[1]/..');
 	}
@@ -49,50 +36,10 @@ class FlexTab extends BasePage {
 		);
 	}
 
-	public channelSettingName(): Locator {
-		return this.getPage().locator('.channel-settings .rc-user-info__name');
-	}
-
-	public archiveBtn(): Locator {
-		return this.getPage().locator('.clearfix:last-child .icon-pencil');
-	}
-
-	public archiveRadio(): Locator {
-		return this.getPage().locator('.editing');
-	}
-
-	public archiveSave(): Locator {
-		return this.getPage().locator('.save');
-	}
-
 	public editNameBtn(): Locator {
 		return this.getPage().locator('//aside//button[contains(text(), "Edit")]');
 	}
 
-	public editTopicBtn(): Locator {
-		return this.getPage().locator('[data-edit="topic"]');
-	}
-
-	public editAnnouncementBtn(): Locator {
-		return this.getPage().locator('[data-edit="announcement"]');
-	}
-
-	public editDescriptionBtn(): Locator {
-		return this.getPage().locator('[data-edit="description"]');
-	}
-
-	public editNotificationBtn(): Locator {
-		return this.getPage().locator('[data-edit="desktopNotifications"]');
-	}
-
-	public editMobilePushBtn(): Locator {
-		return this.getPage().locator('[data-edit="mobilePushNotifications"]');
-	}
-
-	public editEmailNotificationBtn(): Locator {
-		return this.getPage().locator('[data-edit="emailNotifications"]');
-	}
-
 	public editUnreadAlertBtn(): Locator {
 		return this.getPage().locator('[data-edit="unreadAlert"]');
 	}
@@ -117,11 +64,6 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('//aside//button[contains(text(), "Save")]');
 	}
 
-	public deleteBtn(): Locator {
-		return this.getPage().locator('.channel-settings .js-delete');
-	}
-
-	// Members Tab
 	public membersTab(): Locator {
 		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-members');
 	}
@@ -130,14 +72,6 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-members');
 	}
 
-	public userSearchBar(): Locator {
-		return this.getPage().locator('//*[@placeholder="Search by username"]');
-	}
-
-	public removeUserBtn(): Locator {
-		return this.getPage().locator('.remove-user');
-	}
-
 	public setOwnerBtn(): Locator {
 		return this.getPage().locator('//main//aside//button[contains(text(), "Set as owner")]');
 	}
@@ -150,39 +84,14 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('[value="muteUser"]');
 	}
 
-	public viewAllBtn(): Locator {
-		return this.getPage().locator('.button.back');
-	}
-
-	public startVideoCall(): Locator {
-		return this.getPage().locator('.start-video-call');
-	}
-
-	public startAudioCall(): Locator {
-		return this.getPage().locator('.start-audio-call');
-	}
-
-	public showAll(): Locator {
-		return this.getPage().locator('.see-all');
-	}
-
-	public membersUserInfo(): Locator {
-		return this.getPage().locator('.flex-tab-container .info');
-	}
-
 	public avatarImage(): Locator {
 		return this.getPage().locator('(//aside[contains(@class, "rcx-vertical-bar")]//*[contains(@class, "avatar")])[1]');
 	}
 
-	public memberUserName(): Locator {
-		return this.getPage().locator('.info h3');
-	}
-
 	public memberRealName(): Locator {
 		return this.getPage().locator('[data-qa="UserInfoUserName"]');
 	}
 
-	// Search Tab
 	public searchTab(): Locator {
 		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-magnifier');
 	}
@@ -199,33 +108,22 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('.new-day');
 	}
 
-	// Notifications Tab
 	public notificationsTab(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Notifications Preferences")]');
-		// return this.getPage().locator('.rcx-option__content:contains("Notifications Preferences")');
 	}
 
 	public notificationsSettings(): Locator {
 		return this.getPage().locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-bell');
 	}
 
-	// Files Tab
 	public filesTab(): Locator {
 		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-clip');
 	}
 
-	public fileItem(): Locator {
-		return this.getPage().locator('.uploaded-files-list ul:first-child');
-	}
-
 	public filesTabContent(): Locator {
 		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-attachment');
 	}
 
-	public fileDelete(): Locator {
-		return this.getPage().locator('.uploaded-files-list ul:first-child .file-delete');
-	}
-
 	public fileDownload(): Locator {
 		return this.getPage().locator('.uploaded-files-list ul:first-child .file-download');
 	}
@@ -234,17 +132,14 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('.uploaded-files-list ul:first-child .room-file-item');
 	}
 
-	// Mentions Tab
 	public mentionsTab(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Mentions")]');
 	}
 
 	public mentionsTabContent(): Locator {
 		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-at');
-		// aside//h3//div//i[contains(@class, "i.rcx-icon--name-at")]
 	}
 
-	// Starred Tab
 	public starredTab(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Starred Messages")]');
 	}
@@ -253,7 +148,6 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-star');
 	}
 
-	// Pinned Tab
 	public pinnedTab(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Pinned Messages")]');
 	}
@@ -278,11 +172,6 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('//main//aside//div[contains(text(), "Description")]//following-sibling::div');
 	}
 
-	// admin view flexTab items
-	public usersSendInvitationTab(): Locator {
-		return this.getPage().locator('.tab-button:not(.hidden) .tab-button-icon--send');
-	}
-
 	public usersAddUserTab(): Locator {
 		return this.getPage().locator('//button[text()="New"]');
 	}
@@ -291,18 +180,10 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('//div[text()="Add User"]//button');
 	}
 
-	public usersSendInvitationTextArea(): Locator {
-		return this.getPage().locator('#inviteEmails');
-	}
-
 	public usersButtonCancel(): Locator {
 		return this.getPage().locator('//button[text()="Cancel"]');
 	}
 
-	public usersSendInvitationSend(): Locator {
-		return this.getPage().locator('.button.send');
-	}
-
 	public usersButtonSave(): Locator {
 		return this.getPage().locator('//button[text()="Save"]');
 	}
@@ -353,26 +234,6 @@ class FlexTab extends BasePage {
 		return this.getPage().locator('//div[text()="Set random password and send by email"]/following-sibling::label//input');
 	}
 
-	public emojiNewAliases(): Locator {
-		return this.getPage().locator('#aliases');
-	}
-
-	public emojiNewImageInput(): Locator {
-		return this.getPage().locator('#image');
-	}
-
-	public usersView(): Locator {
-		return this.getPage().locator('.rcx-vertical-bar:contains("User Info")');
-	}
-
-	public usersActivate(): Locator {
-		return this.getPage().locator('.rcx-option__content:contains("Activate")');
-	}
-
-	public usersDeactivate(): Locator {
-		return this.getPage().locator('.rcx-option__content:contains("Deactivate")');
-	}
-
 	public closeThreadMessage(): Locator {
 		return this.getPage().locator(
 			'//html//body//div[1]//div//div[3]//div[1]//main//div//aside//div[2]//div//div//h3//div//div[2]//button[2]',
@@ -435,22 +296,12 @@ class FlexTab extends BasePage {
 		await userEl.click();
 	}
 
-	public async archiveChannel(): Promise<void> {
-		await this.archiveBtn().waitFor();
-		await this.archiveBtn().click();
-		await this.archiveRadio().waitFor();
-		await this.archiveRadio().click();
-		await this.archiveSave().click();
-	}
-
 	public async addPeopleToChannel(user: string): Promise<void> {
 		await this.addUserButton().click();
 		await this.chooseUserSearch().type(user);
 		await this.getPage().waitForTimeout(3000);
 		await this.chooseUserOptions().click();
 		await this.addUserButtonAfterChoose().click();
-		// await this.getPage().waitForSelector('.-autocomplete-item');
-		// await this.getPage().click('.-autocomplete-item');
 	}
 
 	public async operateFlexTab(desiredTab: string, desiredState: boolean): Promise<void> {
@@ -554,5 +405,3 @@ class FlexTab extends BasePage {
 		await this.getPage().locator(`li[value=${role}]`).click();
 	}
 }
-
-export default FlexTab;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
index 18146873ba526..4874f40af229a 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
@@ -2,40 +2,15 @@ import { Locator } from '@playwright/test';
 
 import BasePage from './BasePage';
 
-class Global extends BasePage {
-	// Modal
-	public modalOverlay(): Locator {
-		return this.getPage().locator('.rc-modal-wrapper');
-	}
-
+export default class Global extends BasePage {
 	public modalConfirm(): Locator {
 		return this.getPage().locator('.rcx-modal .rcx-button--primary-danger');
 	}
 
-	public modalCancel(): Locator {
-		return this.getPage().locator('.rc-modal .js-modal');
-	}
-
-	public modalPasswordField(): Locator {
-		return this.getPage().locator('.rc-modal [type="password"]');
-	}
-
-	public modalFileName(): Locator {
-		return this.getPage().locator('.rc-modal #file-name');
-	}
-
-	public modalFileDescription(): Locator {
-		return this.getPage().locator('.rc-modal #file-description');
-	}
-
 	public modalFilePreview(): Locator {
 		return this.getPage().locator('.rc-modal .upload-preview-file');
 	}
 
-	public modalFileTitle(): Locator {
-		return this.getPage().locator('.rc-modal .upload-preview-title');
-	}
-
 	public getToastBar(): Locator {
 		return this.getPage().locator('.rcx-toastbar');
 	}
@@ -48,14 +23,12 @@ class Global extends BasePage {
 		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--success');
 	}
 
-	// Flexnav refers account sidebar and admin sidebar
 	public flexNav(): Locator {
 		return this.getPage().locator('.flex-nav');
 	}
 
 	public async confirmPopup(): Promise<void> {
 		await this.modalConfirm().waitFor();
-		// browser.pause(500);
 		await this.modalConfirm().click();
 	}
 
@@ -63,5 +36,3 @@ class Global extends BasePage {
 		await this.getToastBar().locator('button').click();
 	}
 }
-
-export default Global;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts b/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
index d13f1c03546aa..e62277ccd5fb7 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
@@ -4,7 +4,7 @@ import { ILogin, IRegister } from '../interfaces/Login';
 import BasePage from './BasePage';
 import { HOME_SELECTOR, REGISTER_STEP2_BUTTON } from '../mocks/waitSelectorsMock';
 
-class LoginPage extends BasePage {
+export default class LoginPage extends BasePage {
 	private registerButton(): Locator {
 		return this.getPage().locator('button.register');
 	}
@@ -21,10 +21,6 @@ class LoginPage extends BasePage {
 		return this.getPage().locator('button[data-loading-text=" Please_wait ..."]');
 	}
 
-	public registerMessage(): Locator {
-		return this.getPage().locator('//form[@id["login-card"]]//header//p');
-	}
-
 	public emailOrUsernameField(): Locator {
 		return this.getPage().locator('[name=emailOrUsername]');
 	}
@@ -41,18 +37,10 @@ class LoginPage extends BasePage {
 		return this.getPage().locator('[name=pass]');
 	}
 
-	public userNameField(): Locator {
-		return this.getPage().locator('[name=username]');
-	}
-
 	public confirmPasswordField(): Locator {
 		return this.getPage().locator('[name=confirm-pass]');
 	}
 
-	public emailOrUsernameInvalidText(): Locator {
-		return this.getPage().locator('[name=emailOrUsername]~.input-error');
-	}
-
 	public nameInvalidText(): Locator {
 		return this.getPage().locator('[name=name]~.input-error');
 	}
@@ -69,18 +57,10 @@ class LoginPage extends BasePage {
 		return this.getPage().locator('[name=confirm-pass]~.input-error');
 	}
 
-	public getHomeMessage(): Locator {
-		return this.getPage().locator('//span[@class="rc-header__block"]');
-	}
-
 	public getSideBarAvatarButton(): Locator {
 		return this.getPage().locator('[data-qa="sidebar-avatar-button"]');
 	}
 
-	public async open(path: string): Promise<void> {
-		await super.goto(path);
-	}
-
 	public async gotToRegister(): Promise<void> {
 		await this.registerButton().click();
 	}
@@ -137,5 +117,3 @@ class LoginPage extends BasePage {
 		await this.getPage().locator('li.rcx-option >> text="Logout"').click();
 	}
 }
-
-export default LoginPage;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
index 38ce5a9f29e01..d5af8fdb46537 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
@@ -9,7 +9,6 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('.main-content');
 	}
 
-	// Main Content Header (Channel Title Area)
 	public emptyFavoriteStar(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-room-header")]//*[contains(@class, "rcx-icon--name-star")]');
 	}
@@ -22,7 +21,6 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('.rcx-room-header', { hasText: title });
 	}
 
-	// Main Content Footer (Message Input Area)
 	public messageInput(): Locator {
 		return this.getPage().locator('[name="msg"]');
 	}
@@ -59,15 +57,6 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('.popup-item.selected');
 	}
 
-	public mentionAllPopUp(): Locator {
-		return this.getPage().locator('.popup-item[data-id="all"]');
-	}
-
-	public joinChannelBtn(): Locator {
-		return this.getPage().locator('.button.join');
-	}
-
-	// Messages
 	public lastMessageUser(): Locator {
 		return this.getPage().locator('.message:last-child div:nth-child(2) button');
 	}
@@ -80,68 +69,26 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('.messages-box [data-qa-type="message"]').last();
 	}
 
-	public lastMessageDesc(): Locator {
-		return this.getPage().locator('.message:last-child .body .attachment-description');
-	}
-
-	public lastMessageReply(): Locator {
-		return this.getPage().locator(
-			'//li[@data-username="rocketchat.internal.admin.test"][last()]//div[@class="thread-replied js-open-thread"]//span//span',
-		);
-	}
-
 	public lastMessageRoleAdded(): Locator {
 		return this.getPage().locator('.message:last-child.subscription-role-added .body');
 	}
 
-	public beforeLastMessage(): Locator {
-		return this.getPage().locator('.message:nth-last-child(2) .body');
-	}
-
 	public lastMessageUserTag(): Locator {
 		return this.getPage().locator('.message:last-child .role-tag');
 	}
 
-	public lastMessageImg(): Locator {
-		return this.getPage().locator('.message:last-child .attachment-image img');
-	}
-
-	public lastMessageTextAttachment(): Locator {
-		return this.getPage().locator('.message:last-child .attachment-text');
-	}
-
 	public lastMessageForMessageTest(): Locator {
 		return this.getPage().locator('[data-qa-type="message"]:last-child div.message-body-wrapper div:nth-child(2)');
 	}
 
-	public beforeLastMessageQuote(): Locator {
-		return this.getPage().locator('.message:nth-last-child(2)');
-	}
-
-	public lastMessageQuote(): Locator {
-		return this.getPage().locator('.message:last-child');
-	}
-
-	public messageOptionsBtn(): Locator {
-		return this.getPage().locator('//li[@data-username="rocketchat.internal.admin.test"][last()]//div[@class="message-body-wrapper"]');
-	}
-
 	public messageOptionsBtns(): Locator {
 		return this.getPage().locator('.message:last-child .message-actions');
 	}
 
-	public messageActionMenu(): Locator {
-		return this.getPage().locator('[data-qa-type="message-action-menu-options"]');
-	}
-
 	public messageReply(): Locator {
 		return this.getPage().locator('[data-qa-id="reply-in-thread"]');
 	}
 
-	public reply(): Locator {
-		return this.getPage().locator('[data-title="Replies"]');
-	}
-
 	public messageEdit(): Locator {
 		return this.getPage().locator('[data-qa-id="edit-message"]');
 	}
@@ -170,17 +117,6 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('[data-id="mark-message-as-unread"][data-type="message-action"]');
 	}
 
-	public messageReplyInDM(): Locator {
-		return this.getPage().locator('[data-id="reply-directly"][data-type="message-action"]');
-	}
-
-	// public messageReaction(): Locator { return this.getPage().locator('.message-actions__button[data-message-action="reaction-message"]'); }
-	public messagePin(): Locator {
-		return this.getPage().locator('[data-id="pin-message"][data-type="message-action"]');
-	}
-	// public messageClose(): Locator { return this.getPage().locator('[data-id="rc-popover-close"][data-type="message-action"]'); }
-
-	// Emojis
 	public emojiPickerMainScreen(): Locator {
 		return this.getPage().locator('.emoji-picker');
 	}
@@ -217,28 +153,16 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-flags")]');
 	}
 
-	public emojiPickerModifierIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-symbols")]');
-	}
-
-	public emojiPickerChangeTone(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "change-tone")]');
-	}
-
 	public emojiPickerCustomIcon(): Locator {
 		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-rocket")]');
 	}
 
-	public emojiPickerRecentIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-recent")]');
-	}
-
 	public emojiPickerFilter(): Locator {
 		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "js-emojipicker-search")]');
 	}
 
-	public emojiPickerEmojiContainer(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "emojis")]');
+	public emojiPickerChangeTone(): Locator {
+		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "change-tone")]');
 	}
 
 	public emojiGrinning(): Locator {
@@ -279,11 +203,6 @@ export default class MainContent extends BasePage {
 		return this.getPage().locator('//div[@id="modal-root"]//fieldset//div[2]//label');
 	}
 
-	// Popovermodal
-	public popoverWrapper(): Locator {
-		return this.getPage().locator('.rc-popover');
-	}
-
 	public async waitForLastMessageEqualsHtml(text: string): Promise<void> {
 		await expect(this.getPage().locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
 	}
@@ -297,7 +216,6 @@ export default class MainContent extends BasePage {
 		await this.keyboardPress('Enter');
 	}
 
-	// adds text to the input
 	public async addTextToInput(text: any): Promise<void> {
 		await this.messageInput().type(text);
 	}
@@ -327,10 +245,6 @@ export default class MainContent extends BasePage {
 		);
 	}
 
-	public async cancelClick(): Promise<void> {
-		await this.modalCancelButton().click();
-	}
-
 	public async sendFileClick(): Promise<void> {
 		await this.buttonSend().click();
 	}
@@ -412,18 +326,6 @@ export default class MainContent extends BasePage {
 		await this.modalDeleteMessageButton().click();
 	}
 
-	public getQuotedMessage(): Locator {
-		return this.getPage().locator('//li[@data-username="rocketchat.internal.admin.test"][last()]//blockquote//div[2]');
-	}
-
-	public lastMessageThread(): Locator {
-		return this.getPage().locator('//div[@class="rcx-message rcx-message--thread"][last()]//div//div[2]');
-	}
-
-	public lastMessageQuoted(): Locator {
-		return this.getPage().locator('//div[@class="rcx-message"][last()]//blockquote//div[2]');
-	}
-
 	public waitForLastMessageTextAttachmentEqualsText(): Locator {
 		return this.getPage().locator('[data-qa-type="message"]:last-child .rcx-attachment__details .rcx-box--with-inline-elements');
 	}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts b/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
index 7e3dedaa41b91..5d8c95441ccf8 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
@@ -2,11 +2,7 @@ import { expect, Locator } from '@playwright/test';
 
 import BasePage from './BasePage';
 
-class PreferencesMainContent extends BasePage {
-	public formTextInput(): Locator {
-		return this.getPage().locator('.rocket-form');
-	}
-
+export default class PreferencesMainContent extends BasePage {
 	public realNameTextInput(): Locator {
 		return this.getPage().locator('//label[contains(text(), "Name")]/..//input');
 	}
@@ -23,10 +19,6 @@ class PreferencesMainContent extends BasePage {
 		return this.getPage().locator('//label[contains(text(), "Password")]/..//input');
 	}
 
-	public resendVerificationEmailBtn(): Locator {
-		return this.getPage().locator('#resend-verification-email');
-	}
-
 	public avatarFileInput(): Locator {
 		return this.getPage().locator('.avatar-file-input');
 	}
@@ -47,19 +39,8 @@ class PreferencesMainContent extends BasePage {
 		await this.realNameTextInput().fill(realName);
 	}
 
-	public async changeEmail(email: string): Promise<void> {
-		await this.emailTextInput().fill(email);
-	}
-
 	public async saveChanges(): Promise<void> {
 		await expect(this.submitBtn()).toBeEnabled();
 		await this.submitBtn().click();
 	}
-
-	public async changeAvatarUpload(url: string): Promise<void> {
-		await this.avatarFileInput().setInputFiles(url);
-		await this.useUploadedAvatar().click();
-	}
 }
-
-export default PreferencesMainContent;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts b/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
index acb07905ad4c9..f32d5a3c9913d 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
@@ -5,7 +5,7 @@ import { reason, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from '../mocks/userAndPas
 import { IRegister } from '../interfaces/Login';
 import { BACKSPACE } from '../mocks/keyboardKeyMock';
 
-class SetupWizard extends BasePage {
+export default class SetupWizard extends BasePage {
 	private nextStep(): Locator {
 		return this.getPage().locator('//button[contains(text(), "Next")]');
 	}
@@ -114,33 +114,24 @@ class SetupWizard extends BasePage {
 		return this.getPage().locator('//div[@name="country"]/../following-sibling::span');
 	}
 
-	public async goNext(): Promise<void> {
-		await this.nextStep().click();
-	}
-
 	private stepThreeInputInvalidMail(): Locator {
 		return this.getPage().locator('//input[@name="email"]/../../span[contains(text(), "This field is required")]');
 	}
 
 	public async stepTwoSuccess(): Promise<void> {
 		await this.organizationName().type(reason);
-
 		await this.organizationType().click();
 		await this.organizationTypeSelect().click();
 		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-
 		await this.industry().click();
 		await this.industrySelect().click();
 		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-
 		await this.size().click();
 		await this.sizeSelect().click();
 		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-
 		await this.country().click();
 		await this.countrySelect().click();
-
-		await this.goNext();
+		await this.nextStep().click();
 	}
 
 	public async stepThreeSuccess(): Promise<void> {
@@ -148,8 +139,7 @@ class SetupWizard extends BasePage {
 	}
 
 	public async stepOneFailedBlankFields(): Promise<void> {
-		await this.goNext();
-
+		await this.nextStep().click();
 		await expect(this.fullNameInvalidText()).toBeVisible();
 		await expect(this.userNameInvalidText()).toBeVisible();
 		await expect(this.companyEmailInvalidText()).toBeVisible();
@@ -161,15 +151,12 @@ class SetupWizard extends BasePage {
 		await this.userName().type(adminCredentials.name);
 		await this.companyEmail().type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
 		await this.password().type(adminCredentials.password);
-
-		await this.goNext();
-
+		await this.nextStep().click();
 		await expect(this.companyEmail()).toBeFocused();
 	}
 
 	public async stepTwoFailedWithBlankFields(): Promise<void> {
-		await this.goNext();
-
+		await this.nextStep().click();
 		await expect(this.organizationName()).toBeVisible();
 		await expect(this.industryInvalidSelect()).toBeVisible();
 		await expect(this.sizeInvalidSelect()).toBeVisible();
@@ -180,13 +167,6 @@ class SetupWizard extends BasePage {
 		await this.registeredServer().type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
 		await this.registeredServer().click({ clickCount: 3 });
 		await this.keyboardPress(BACKSPACE);
-
 		await expect(this.stepThreeInputInvalidMail()).toBeVisible();
 	}
-
-	async goToHome(): Promise<void> {
-		await this.goToWorkspace().click();
-	}
 }
-
-export default SetupWizard;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
index 6d7ec1fdd9a82..0546d1c735d6c 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
+++ b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
@@ -1,21 +1,15 @@
 import { expect, Locator } from '@playwright/test';
 
 import BasePage from './BasePage';
-// import mainContent from './main-content.page';
 import { ENTER } from '../mocks/keyboardKeyMock';
 
-class SideNav extends BasePage {
-	// New channel
+export default class SideNav extends BasePage {
 	public channelType(): Locator {
 		return this.getPage().locator(
 			'//*[@id="modal-root"]//*[contains(@class, "rcx-field") and contains(text(), "Private")]/../following-sibling::label/i',
 		);
 	}
 
-	public channelReadOnly(): Locator {
-		return this.getPage().locator('.create-channel__switches .rc-switch__button');
-	}
-
 	public channelName(): Locator {
 		return this.getPage().locator('#modal-root [placeholder="Channel Name"]');
 	}
@@ -24,43 +18,10 @@ class SideNav extends BasePage {
 		return this.getPage().locator('//*[@id="modal-root"]//button[contains(text(), "Create")]');
 	}
 
-	// Account box
-	public getPopOverContent(): Locator {
-		return this.getPage().locator('.rc-popover__content');
-	}
-
-	public accountBoxUserName(): Locator {
-		return this.getPage().locator('.sidebar__account-username');
-	}
-
-	public accountBoxUserAvatar(): Locator {
-		return this.getPage().locator('.sidebar__account .avatar-image');
-	}
-
-	public accountMenu(): Locator {
-		return this.getPage().locator('.sidebar__account');
-	}
-
-	public sidebarHeader(): Locator {
-		return this.getPage().locator('.sidebar__header');
-	}
-
 	public sidebarUserMenu(): Locator {
 		return this.getPage().locator('[data-qa="sidebar-avatar-button"]');
 	}
 
-	public sidebarMenu(): Locator {
-		return this.getPage().locator('.sidebar__toolbar-button-icon--menu');
-	}
-
-	public popOverContent(): Locator {
-		return this.getPage().locator('.rc-popover__content');
-	}
-
-	public popOverHideOption(): Locator {
-		return this.getPage().locator('.rcx-option__content:contains("Hide")');
-	}
-
 	public statusOnline(): Locator {
 		return this.getPage().locator('(//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "online")])[1]');
 	}
@@ -105,7 +66,6 @@ class SideNav extends BasePage {
 		return this.getPage().locator('.flex-nav');
 	}
 
-	// Toolbar
 	public spotlightSearchIcon(): Locator {
 		return this.getPage().locator('[data-qa="sidebar-search"]');
 	}
@@ -126,28 +86,10 @@ class SideNav extends BasePage {
 		return this.getPage().locator('li.rcx-option >> text="Channel"');
 	}
 
-	public newDiscussionBtn(): Locator {
-		return this.getPage().locator('li.rcx-option >> text="Discussion"');
-	}
-
-	public newChannelIcon(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-create-channel"]');
-	}
-
-	// Rooms List
 	public general(): Locator {
 		return this.getChannelFromList('general');
 	}
 
-	public channelLeave(): Locator {
-		return this.getPage().locator('.leave-room');
-	}
-
-	public channelHoverIcon(): Locator {
-		return this.getPage().locator('.rooms-list > .wrapper > ul [title="general"] .icon-eye-off');
-	}
-
-	// Account
 	public preferences(): Locator {
 		return this.getPage().locator('[href="/account/preferences"]');
 	}
@@ -156,10 +98,6 @@ class SideNav extends BasePage {
 		return this.getPage().locator('[href="/account/profile"]');
 	}
 
-	public avatar(): Locator {
-		return this.getPage().locator('[href="/changeavatar"]');
-	}
-
 	public preferencesClose(): Locator {
 		return this.getPage().locator('//*[contains(@class,"flex-nav")]//i[contains(@class, "rcx-icon--name-cross")]');
 	}
@@ -168,39 +106,24 @@ class SideNav extends BasePage {
 		return this.getPage().locator('[data-qa-id="burger-menu"]');
 	}
 
-	public sidebarWrap(): Locator {
-		return this.getPage().locator('.sidebar-wrap');
-	}
-
-	public firstSidebarItem(): Locator {
-		return this.getPage().locator('.sidebar-item');
-	}
-
 	public firstSidebarItemMenu(): Locator {
 		return this.getPage().locator('[data-qa=sidebar-avatar-button]');
 	}
 
-	public popoverOverlay(): Locator {
-		return this.getPage().locator('.rc-popover.rc-popover--sidebar-item');
-	}
-
 	public returnToMenuInLowResolution(): Locator {
 		return this.getPage().locator('//button[@aria-label="Close menu"]');
 	}
 
-	// Check if navbar is open
 	public async isSideBarOpen(): Promise<boolean> {
 		return !!(await this.sideNavBar().getAttribute('style'));
 	}
 
-	// Opens a channel via rooms list
-	public async openChannel(channelName: any): Promise<void> {
+	public async openChannel(channelName: string): Promise<void> {
 		await this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).scrollIntoViewIfNeeded();
 		await this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).click();
 		await expect(this.getPage().locator('.rcx-room-header')).toContainText(channelName);
 	}
 
-	// Opens a channel via spotlight search
 	public async searchChannel(channelName: string): Promise<void> {
 		await expect(this.spotlightSearch()).toBeVisible();
 
@@ -214,10 +137,6 @@ class SideNav extends BasePage {
 		await this.spotlightSearchPopUp().click();
 	}
 
-	public async searchChannelAndOpen(channelName: string): Promise<void> {
-		await this.searchChannel(channelName);
-	}
-
 	public getChannelFromList(channelName: any): Locator {
 		return this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName });
 	}
@@ -243,13 +162,8 @@ class SideNav extends BasePage {
 
 		await expect(this.saveChannelBtn()).toBeEnabled();
 
-		// if (isReadOnly) {
-		// 	this.channelReadOnly.click();
-		// }
-
 		await this.saveChannelBtn().click();
 		await expect(this.channelType()).not.toBeVisible();
-		// mainContent.messageInput().should('be.focused');
 	}
 
 	public async findForChat(target: string): Promise<void> {
@@ -264,5 +178,3 @@ class SideNav extends BasePage {
 		await this.logout().click();
 	}
 }
-
-export default SideNav;

From 83ec2f90ac22325757e57910ea711f08eaa6c0c5 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 13 Jun 2022 19:41:31 -0300
Subject: [PATCH 18/36] Chore: Rewrite RoomWithData (#25858)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../client/components/Sidebar/SidebarItemsAssembler.tsx    | 1 -
 apps/meteor/client/views/room/Room/Aside.js                | 7 -------
 apps/meteor/client/views/room/Room/Body.js                 | 7 -------
 apps/meteor/client/views/room/Room/Footer.js               | 7 -------
 .../views/room/Room/{RoomWithData.js => RoomWithData.tsx}  | 4 ++--
 5 files changed, 2 insertions(+), 24 deletions(-)
 delete mode 100644 apps/meteor/client/views/room/Room/Aside.js
 delete mode 100644 apps/meteor/client/views/room/Room/Body.js
 delete mode 100644 apps/meteor/client/views/room/Room/Footer.js
 rename apps/meteor/client/views/room/Room/{RoomWithData.js => RoomWithData.tsx} (75%)

diff --git a/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx b/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx
index 18c1c692ba9b3..52eb00bc76a7c 100644
--- a/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx
+++ b/apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx
@@ -25,7 +25,6 @@ const SidebarItemsAssembler: FC<SidebarItemsAssemblerProps> = ({ items, currentP
 					tag={t.has(tag as Parameters<typeof t>[0]) ? t(tag as Parameters<typeof t>[0]) : undefined}
 				/>
 			))}
-			;
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/room/Room/Aside.js b/apps/meteor/client/views/room/Room/Aside.js
deleted file mode 100644
index 5ad066acc18f1..0000000000000
--- a/apps/meteor/client/views/room/Room/Aside.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function Aside({ children }) {
-	return <>{children}</>;
-}
-
-export default Aside;
diff --git a/apps/meteor/client/views/room/Room/Body.js b/apps/meteor/client/views/room/Room/Body.js
deleted file mode 100644
index b234968104617..0000000000000
--- a/apps/meteor/client/views/room/Room/Body.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function Body({ children }) {
-	return <>{children}</>;
-}
-
-export default Body;
diff --git a/apps/meteor/client/views/room/Room/Footer.js b/apps/meteor/client/views/room/Room/Footer.js
deleted file mode 100644
index 16bd45fe2c8d8..0000000000000
--- a/apps/meteor/client/views/room/Room/Footer.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function Footer({ children }) {
-	return <>{children}</>;
-}
-
-export default Footer;
diff --git a/apps/meteor/client/views/room/Room/RoomWithData.js b/apps/meteor/client/views/room/Room/RoomWithData.tsx
similarity index 75%
rename from apps/meteor/client/views/room/Room/RoomWithData.js
rename to apps/meteor/client/views/room/Room/RoomWithData.tsx
index abd48bfa918fa..0da9132bd4a96 100644
--- a/apps/meteor/client/views/room/Room/RoomWithData.js
+++ b/apps/meteor/client/views/room/Room/RoomWithData.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { useOpenedRoom } from '../../../lib/RoomManager';
 import RoomProvider from '../providers/RoomProvider';
 import { Room } from './Room';
 
-const RoomWithData = () => {
+const RoomWithData = (): ReactElement | null => {
 	const rid = useOpenedRoom();
 	return rid ? (
 		<RoomProvider rid={rid}>

From b32d3803b82d87e029b2eddade9769c021d4a081 Mon Sep 17 00:00:00 2001
From: Jean Brito <jeanfbrito@gmail.com>
Date: Mon, 13 Jun 2022 22:41:09 -0300
Subject: [PATCH 19/36] Chore: Convert sidebar/item (#25634)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../Item/{Condensed.js => Condensed.tsx}      | 25 +++++++--
 .../Item/{Extended.js => Extended.tsx}        | 54 +++++++++----------
 ...tendedSkeleton.js => ExtendedSkeleton.tsx} |  4 +-
 .../sidebar/Item/{Medium.js => Medium.tsx}    | 22 ++++++--
 ...ensedSkeleton.js => CondensedSkeleton.tsx} |  4 +-
 .../{MediumSkeleton.js => MediumSkeleton.tsx} |  4 +-
 6 files changed, 70 insertions(+), 43 deletions(-)
 rename apps/meteor/client/sidebar/Item/{Condensed.js => Condensed.tsx} (63%)
 rename apps/meteor/client/sidebar/Item/{Extended.js => Extended.tsx} (65%)
 rename apps/meteor/client/sidebar/Item/{ExtendedSkeleton.js => ExtendedSkeleton.tsx} (77%)
 rename apps/meteor/client/sidebar/Item/{Medium.js => Medium.tsx} (68%)
 rename apps/meteor/client/sidebar/Item/skeletons/{CondensedSkeleton.js => CondensedSkeleton.tsx} (75%)
 rename apps/meteor/client/sidebar/Item/skeletons/{MediumSkeleton.js => MediumSkeleton.tsx} (75%)

diff --git a/apps/meteor/client/sidebar/Item/Condensed.js b/apps/meteor/client/sidebar/Item/Condensed.tsx
similarity index 63%
rename from apps/meteor/client/sidebar/Item/Condensed.js
rename to apps/meteor/client/sidebar/Item/Condensed.tsx
index fe4e9ecd7642a..70b197a2312e5 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.js
+++ b/apps/meteor/client/sidebar/Item/Condensed.tsx
@@ -1,8 +1,23 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { FC, memo, ReactElement, useState } from 'react';
 
-const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, unread, menu, badges, threadUnread, ...props }) => {
+type CondensedProps = {
+	title: ReactElement | string;
+	titleIcon?: ReactElement;
+	avatar: ReactElement | boolean;
+	icon?: IconProps['name'];
+	actions?: ReactElement;
+	href?: string;
+	unread?: boolean;
+	menu?: () => ReactElement;
+	menuOptions?: any;
+	selected?: boolean;
+	badges?: ReactElement;
+	clickable?: boolean;
+};
+
+const Condensed: FC<CondensedProps> = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -15,12 +30,12 @@ const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOpt
 	};
 
 	return (
-		<Sidebar.Item {...props} href={href} clickable={!!href}>
+		<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>
diff --git a/apps/meteor/client/sidebar/Item/Extended.js b/apps/meteor/client/sidebar/Item/Extended.tsx
similarity index 65%
rename from apps/meteor/client/sidebar/Item/Extended.js
rename to apps/meteor/client/sidebar/Item/Extended.tsx
index 1e205136a59fe..26f7144ff40ca 100644
--- a/apps/meteor/client/sidebar/Item/Extended.js
+++ b/apps/meteor/client/sidebar/Item/Extended.tsx
@@ -1,27 +1,27 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
 
-/**
- * @param {Object} props
- * @param {React.ReactNode} props.icon
- * @param {React.ReactNode} props.title
- * @param {any} props.avatar
- * @param {any} props.actions
- * @param {any} props.href
- * @param {any} props.time
- * @param {any} props.menu
- * @param {any} props.menuOptions
- * @param {React.ReactNode} props.subtitle
- * @param {any} props.titleIcon
- * @param {any} props.badges
- * @param {any} props.threadUnread
- * @param {any} props.unread
- * @param {any} props.selected
- */
-const Extended = ({
+type ExtendedProps = {
+	icon?: IconProps['name'];
+	title?: React.ReactNode;
+	avatar?: React.ReactNode | boolean;
+	actions?: React.ReactNode;
+	href?: string;
+	time?: any;
+	menu?: () => React.ReactNode;
+	subtitle?: React.ReactNode;
+	badges?: React.ReactNode;
+	unread?: boolean;
+	selected?: boolean;
+	menuOptions?: any;
+	titleIcon?: React.ReactNode;
+	threadUnread?: boolean;
+};
+
+const Extended: VFC<ExtendedProps> = ({
 	icon,
 	title = '',
 	avatar,
@@ -29,11 +29,11 @@ const Extended = ({
 	href,
 	time,
 	menu,
-	menuOptions,
+	menuOptions: _menuOptions,
 	subtitle = '',
-	titleIcon,
+	titleIcon: _titleIcon,
 	badges,
-	threadUnread,
+	threadUnread: _threadUnread,
 	unread,
 	selected,
 	...props
@@ -52,13 +52,13 @@ const Extended = ({
 	};
 
 	return (
-		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} href={href} clickable={!!href}>
+		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} {...(href as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
 						{icon}
-						<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+						<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 							{title}
 						</Sidebar.Item.Title>
 						{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
@@ -66,9 +66,7 @@ const Extended = ({
 				</Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
-						<Sidebar.Item.Subtitle tabIndex='-1' className={unread && 'rcx-sidebar-item--highlighted'}>
-							{subtitle}
-						</Sidebar.Item.Subtitle>
+						<Sidebar.Item.Subtitle className={(unread && 'rcx-sidebar-item--highlighted') as string}>{subtitle}</Sidebar.Item.Subtitle>
 						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
 						{menu && (
 							<Sidebar.Item.Menu {...handleMenuEvent}>
diff --git a/apps/meteor/client/sidebar/Item/ExtendedSkeleton.js b/apps/meteor/client/sidebar/Item/ExtendedSkeleton.tsx
similarity index 77%
rename from apps/meteor/client/sidebar/Item/ExtendedSkeleton.js
rename to apps/meteor/client/sidebar/Item/ExtendedSkeleton.tsx
index 635cc0beaefc2..d6adcb25f8a84 100644
--- a/apps/meteor/client/sidebar/Item/ExtendedSkeleton.js
+++ b/apps/meteor/client/sidebar/Item/ExtendedSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Extended from './Extended';
 
-const ExtendedSkeleton = ({ showAvatar }) => (
+const ExtendedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x44'>
 		<Extended
 			title={<Skeleton width='100%' />}
diff --git a/apps/meteor/client/sidebar/Item/Medium.js b/apps/meteor/client/sidebar/Item/Medium.tsx
similarity index 68%
rename from apps/meteor/client/sidebar/Item/Medium.js
rename to apps/meteor/client/sidebar/Item/Medium.tsx
index 3e74f980d816e..35a29a951a74e 100644
--- a/apps/meteor/client/sidebar/Item/Medium.js
+++ b/apps/meteor/client/sidebar/Item/Medium.tsx
@@ -1,8 +1,22 @@
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
-const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, badges, unread, threadUnread, menu, ...props }) => {
+type MediumProps = {
+	title: React.ReactNode;
+	titleIcon?: React.ReactNode;
+	avatar: React.ReactNode | boolean;
+	icon?: string;
+	actions?: React.ReactNode;
+	href?: string;
+	unread?: boolean;
+	menu?: () => React.ReactNode;
+	badges?: React.ReactNode;
+	selected?: boolean;
+	menuOptions?: any;
+};
+
+const Medium: VFC<MediumProps> = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -15,12 +29,12 @@ const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOption
 	};
 
 	return (
-		<Sidebar.Item {...props} href={href} clickable={!!href}>
+		<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>
diff --git a/apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.js b/apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.tsx
similarity index 75%
rename from apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.js
rename to apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.tsx
index 7f73252460ec9..184a887ec13d2 100644
--- a/apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.js
+++ b/apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Condensed from '../Condensed';
 
-const CondensedSkeleton = ({ showAvatar }) => (
+const CondensedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x28'>
 		<Condensed
 			title={<Skeleton width='100%' />}
diff --git a/apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.js b/apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.tsx
similarity index 75%
rename from apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.js
rename to apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.tsx
index e67dcf7858e82..73386fd7b80a6 100644
--- a/apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.js
+++ b/apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.tsx
@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Medium from '../Medium';
 
-const MediumSkeleton = ({ showAvatar }) => (
+const MediumSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x36'>
 		<Medium
 			title={<Skeleton width='100%' />}

From 36fe4998a4dce70416f268d897f968440ba166a8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 14 Jun 2022 02:51:45 +0000
Subject: [PATCH 20/36] Chore(deps): Bump sharp from 0.30.4 to 0.30.6 (#25719)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [sharp](https://github.com/lovell/sharp) from 0.30.4 to 0.30.6.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/lovell/sharp/blob/main/docs/changelog.md">sharp's changelog</a>.</em></p>
<blockquote>
<h3>v0.30.6 - 30th May 2022</h3>
<ul>
<li>
<p>Allow values for <code>limitInputPixels</code> larger than 32-bit.
<a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3238">#3238</a></p>
</li>
<li>
<p>Ensure brew-installed <code>vips</code> can be detected (regression in 0.30.5).
<a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3239">#3239</a></p>
</li>
</ul>
<h3>v0.30.5 - 23rd May 2022</h3>
<ul>
<li>
<p>Install: pass <code>PKG_CONFIG_PATH</code> via env rather than substitution.
<a href="https://github.com/dwisiswant0"><code>@​dwisiswant0</code></a></p>
</li>
<li>
<p>Add support for <code>--libc</code> flag to improve cross-platform installation.
<a href="https://github-redirect.dependabot.com/lovell/sharp/pull/3160">#3160</a>
<a href="https://github.com/joonamo"><code>@​joonamo</code></a></p>
</li>
<li>
<p>Allow installation of prebuilt libvips binaries from filesystem.
<a href="https://github-redirect.dependabot.com/lovell/sharp/pull/3196">#3196</a>
<a href="https://github.com/ankurparihar"><code>@​ankurparihar</code></a></p>
</li>
<li>
<p>Fix rotate-then-extract for EXIF orientation 2.
<a href="https://github-redirect.dependabot.com/lovell/sharp/pull/3218">#3218</a>
<a href="https://github.com/jakob0fischl"><code>@​jakob0fischl</code></a></p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="https://github.com/lovell/sharp/commit/b91875d3d9fd628b572a12a155df2e783e0812a5"><code>b91875d</code></a> Release v0.30.6</li>
<li><a href="https://github.com/lovell/sharp/commit/a0568ec0c312e7fa290874ddfa6797b93ffe0a67"><code>a0568ec</code></a> Allow values for limitInputPixels larger than 32-bit <a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3238">#3238</a></li>
<li><a href="https://github.com/lovell/sharp/commit/48e3ea5e29b98d6e9a5ac842782053e9941d5d00"><code>48e3ea5</code></a> Ensure brew-installed vips can be detected <a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3239">#3239</a></li>
<li><a href="https://github.com/lovell/sharp/commit/93b29057e4d759ff9251cdef374c62416a16d26b"><code>93b2905</code></a> Docs: changelog and credit for <a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3160">#3160</a></li>
<li><a href="https://github.com/lovell/sharp/commit/db654de385e06ee6c56a05aa11a11a2e2f781b14"><code>db654de</code></a> Release v0.30.5</li>
<li><a href="https://github.com/lovell/sharp/commit/a6aeef612be50f5868a77481848b1de674216f0c"><code>a6aeef6</code></a> Install: pass <code>PKG_CONFIG_PATH</code> via env rather than substitution</li>
<li><a href="https://github.com/lovell/sharp/commit/7bf6cbd66973a4feedbf670aa20ff184f30553d1"><code>7bf6cbd</code></a> Docs: correct links to libvips documentation</li>
<li><a href="https://github.com/lovell/sharp/commit/04c31b35a7e2d88931e1cb7cde0fe1720e4685b7"><code>04c31b3</code></a> Install: warn about filesystem owner running npm v8+ as root</li>
<li><a href="https://github.com/lovell/sharp/commit/ee9cdb65987735caca614eceb7098726ebe5fd3c"><code>ee9cdb6</code></a> Bump deps</li>
<li><a href="https://github.com/lovell/sharp/commit/8960eb8309629c1c97f06aa45e605dad8c97f0c1"><code>8960eb8</code></a> Docs: changelog entry for <a href="https://github-redirect.dependabot.com/lovell/sharp/issues/3218">#3218</a></li>
<li>Additional commits viewable in <a href="https://github.com/lovell/sharp/compare/v0.30.4...v0.30.6">compare view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=sharp&package-manager=npm_and_yarn&previous-version=0.30.4&new-version=0.30.6)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)


</details>

Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com>
---
 apps/meteor/package.json          |  2 +-
 ee/apps/ddp-streamer/package.json |  2 +-
 yarn.lock                         | 35 +++++++++++++++----------------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 25e7677f20ed3..018ee275e36e5 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -329,7 +329,7 @@
 		"react-virtuoso": "^1.11.1",
 		"redis": "^4.0.6",
 		"semver": "^7.3.7",
-		"sharp": "^0.30.4",
+		"sharp": "^0.30.6",
 		"sip.js": "^0.20.0",
 		"sodium-native": "^3.3.0",
 		"sodium-plus": "^0.9.0",
diff --git a/ee/apps/ddp-streamer/package.json b/ee/apps/ddp-streamer/package.json
index 836070ceb8881..be83b6cfe9aa5 100644
--- a/ee/apps/ddp-streamer/package.json
+++ b/ee/apps/ddp-streamer/package.json
@@ -27,7 +27,7 @@
 		"mongodb": "^3.6.10",
 		"nats": "^2.4.0",
 		"pino": "^7.9.2",
-		"sharp": "^0.30.4",
+		"sharp": "^0.30.6",
 		"uuid": "^7.0.3",
 		"ws": "^8.5.0"
 	},
diff --git a/yarn.lock b/yarn.lock
index 9d7d07407dd72..aecd04a4d02b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4379,7 +4379,7 @@ __metadata:
     nats: ^2.4.0
     pino: ^7.9.2
     pino-pretty: ^7.6.0
-    sharp: ^0.30.4
+    sharp: ^0.30.6
     typescript: ~4.3.5
     uuid: ^7.0.3
     ws: ^8.5.0
@@ -5033,7 +5033,7 @@ __metadata:
     redis: ^4.0.6
     rewire: ^6.0.0
     semver: ^7.3.7
-    sharp: ^0.30.4
+    sharp: ^0.30.6
     sinon: ^14.0.0
     sip.js: ^0.20.0
     sodium-native: ^3.3.0
@@ -23892,12 +23892,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-addon-api@npm:^4.3.0":
-  version: 4.3.0
-  resolution: "node-addon-api@npm:4.3.0"
+"node-addon-api@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "node-addon-api@npm:5.0.0"
   dependencies:
     node-gyp: latest
-  checksum: 3de396e23cc209f539c704583e8e99c148850226f6e389a641b92e8967953713228109f919765abc1f4355e801e8f41842f96210b8d61c7dcc10a477002dcf00
+  checksum: 7c5e2043ac37f6108784d94ed73a44ae6d3e68eb968de60680922fc6bc3d17fa69448c0feb4e0c9d3f4c74a0324822e566a8340a56916d9d6f23cb3e85620334
   languageName: node
   linkType: hard
 
@@ -24297,7 +24297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npmlog@npm:^4.0.1, npmlog@npm:^4.0.2":
+"npmlog@npm:^4.0.2":
   version: 4.1.2
   resolution: "npmlog@npm:4.1.2"
   dependencies:
@@ -26762,9 +26762,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prebuild-install@npm:^7.0.1":
-  version: 7.1.0
-  resolution: "prebuild-install@npm:7.1.0"
+"prebuild-install@npm:^7.1.0":
+  version: 7.1.1
+  resolution: "prebuild-install@npm:7.1.1"
   dependencies:
     detect-libc: ^2.0.0
     expand-template: ^2.0.3
@@ -26773,7 +26773,6 @@ __metadata:
     mkdirp-classic: ^0.5.3
     napi-build-utils: ^1.0.1
     node-abi: ^3.3.0
-    npmlog: ^4.0.1
     pump: ^3.0.0
     rc: ^1.2.7
     simple-get: ^4.0.0
@@ -26781,7 +26780,7 @@ __metadata:
     tunnel-agent: ^0.6.0
   bin:
     prebuild-install: bin.js
-  checksum: 204f2d89c6d6179fa1039036514aa72f7d0b537e421ef72c40840286e318f41489f00f22c6acc725cce6e10d43825b69dcabeaadfc917db781c58cd56fc25f90
+  checksum: dbf96d0146b6b5827fc8f67f72074d2e19c69628b9a7a0a17d0fad1bf37e9f06922896972e074197fc00a52eae912993e6ef5a0d471652f561df5cb516f3f467
   languageName: node
   linkType: hard
 
@@ -29740,20 +29739,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sharp@npm:^0.30.4":
-  version: 0.30.4
-  resolution: "sharp@npm:0.30.4"
+"sharp@npm:^0.30.6":
+  version: 0.30.6
+  resolution: "sharp@npm:0.30.6"
   dependencies:
     color: ^4.2.3
     detect-libc: ^2.0.1
-    node-addon-api: ^4.3.0
+    node-addon-api: ^5.0.0
     node-gyp: latest
-    prebuild-install: ^7.0.1
+    prebuild-install: ^7.1.0
     semver: ^7.3.7
     simple-get: ^4.0.1
     tar-fs: ^2.1.1
     tunnel-agent: ^0.6.0
-  checksum: 80070d8cad5fe20e7bbb2a1cfddda3f7d421f6af8302c05af8307c0b3b1972e6ed2690563e90b2897b4b499b32967d28a15e37f5d196a1f8867d630609052211
+  checksum: 2560b5769d78ee660d767e59f6fa56531c448d16383f9700e4ecb8016382104c1bb42991bdd4ea741c0f4d934ea5246c5d602fc5f39062bcc1c2c8786421fd5a
   languageName: node
   linkType: hard
 

From 7990a01be917adf9120d131605f3a5aa036cb8ec Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 14 Jun 2022 01:06:15 -0300
Subject: [PATCH 21/36] Chore: Remove old rest api code (#25863)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../app/utils/client/lib/_RestApiClient.d.ts  |  34 ---
 .../app/utils/client/lib/_RestApiClient.js    | 195 ------------------
 2 files changed, 229 deletions(-)
 delete mode 100644 apps/meteor/app/utils/client/lib/_RestApiClient.d.ts
 delete mode 100644 apps/meteor/app/utils/client/lib/_RestApiClient.js

diff --git a/apps/meteor/app/utils/client/lib/_RestApiClient.d.ts b/apps/meteor/app/utils/client/lib/_RestApiClient.d.ts
deleted file mode 100644
index ede0c5034e5f0..0000000000000
--- a/apps/meteor/app/utils/client/lib/_RestApiClient.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Serialized } from '@rocket.chat/core-typings';
-import { RestClientInterface } from '@rocket.chat/api-client';
-
-export declare const APIClient: {
-	delete<P, R = any>(endpoint: string, params?: Serialized<P>): Promise<Serialized<R>>;
-	get<P, R = any>(endpoint: string, params?: void extends P ? void : Serialized<P>): Promise<Serialized<R>>;
-	post<P, B, R = any>(endpoint: string, params?: Serialized<P>, body?: B): Promise<Serialized<R>>;
-	upload<P, B, R = any>(
-		endpoint: string,
-		params?: Serialized<P>,
-		formData?: B,
-		xhrOptions?: {
-			progress: (amount: number) => void;
-			error: (ev: ProgressEvent<XMLHttpRequestEventTarget>) => void;
-		},
-	): { promise: Promise<Serialized<R>> };
-	getCredentials(): {
-		'X-User-Id': string;
-		'X-Auth-Token': string;
-	};
-	_jqueryCall(method?: string, endpoint?: string, params?: any, body?: any, headers?: Record<string, string>, dataType?: string): any;
-	/* @deprecated */
-	v1: {
-		upload<P, B, R = any>(
-			endpoint: string,
-			params?: Serialized<P>,
-			formData?: B,
-			xhrOptions?: {
-				progress: (amount: number) => void;
-				error: (ev: ProgressEvent<XMLHttpRequestEventTarget>) => void;
-			},
-		): { promise: Promise<Serialized<R>> };
-	} & RestClientInterface;
-};
diff --git a/apps/meteor/app/utils/client/lib/_RestApiClient.js b/apps/meteor/app/utils/client/lib/_RestApiClient.js
deleted file mode 100644
index abaab75f447ce..0000000000000
--- a/apps/meteor/app/utils/client/lib/_RestApiClient.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Accounts } from 'meteor/accounts-base';
-import jQuery from 'jquery';
-
-import { process2faReturn } from '../../../../client/lib/2fa/process2faReturn';
-import { baseURI } from '../../../../client/lib/baseURI';
-
-export const APIClient = {
-	delete(endpoint, params) {
-		return APIClient._jqueryCall('DELETE', endpoint, params);
-	},
-
-	get(endpoint, params) {
-		return APIClient._jqueryCall('GET', endpoint, params);
-	},
-
-	post(endpoint, params, body) {
-		if (!body) {
-			body = params;
-			params = {};
-		}
-
-		return APIClient._jqueryCall('POST', endpoint, params, body);
-	},
-
-	put(endpoint, params, body) {
-		if (!body) {
-			body = params;
-			params = {};
-		}
-
-		return APIClient._jqueryCall('PUT', endpoint, params, body);
-	},
-
-	upload(endpoint, params, formData, xhrOptions) {
-		if (!formData) {
-			formData = params;
-			params = {};
-		}
-
-		return APIClient._jqueryFormDataCall(endpoint, params, formData, xhrOptions);
-	},
-
-	getCredentials() {
-		return {
-			'X-User-Id': Meteor._localStorage.getItem(Accounts.USER_ID_KEY),
-			'X-Auth-Token': Meteor._localStorage.getItem(Accounts.LOGIN_TOKEN_KEY),
-		};
-	},
-
-	_generateQueryFromParams(params) {
-		let query = '';
-		if (params && typeof params === 'object') {
-			Object.keys(params).forEach((key) => {
-				query += query === '' ? '?' : '&';
-
-				if (Array.isArray(params[key])) {
-					const encodedParams = params[key].map((value) => encodeURIComponent(value));
-					const joinedArray = encodedParams.join(`&${key}[]=`);
-					query += `${key}[]=${joinedArray}`;
-				} else {
-					query += `${key}=${encodeURIComponent(params[key])}`;
-				}
-			});
-		}
-
-		return query;
-	},
-
-	_jqueryCall(method, endpoint, params, body, headers = {}, dataType) {
-		const query = APIClient._generateQueryFromParams(params);
-
-		return new Promise(function _rlRestApiGet(resolve, reject) {
-			jQuery.ajax({
-				method,
-				url: `${baseURI}api/${endpoint}${query}`,
-				headers: Object.assign(
-					{
-						'Content-Type': 'application/json',
-						...APIClient.getCredentials(),
-					},
-					headers,
-				),
-				data: JSON.stringify(body),
-				dataType,
-				success: function _rlGetSuccess(result) {
-					resolve(result);
-				},
-				error: function _rlGetFailure(xhr, status, errorThrown) {
-					APIClient.processTwoFactorError({
-						xhr,
-						params: [method, endpoint, params, body, headers],
-						resolve,
-						reject,
-						originalCallback() {
-							const error = new Error(errorThrown);
-							error.xhr = xhr;
-							reject(error);
-						},
-					});
-				},
-			});
-		});
-	},
-
-	_jqueryFormDataCall(endpoint, params, formData, { progress = () => {}, error = () => {} } = {}) {
-		const ret = {};
-
-		const query = APIClient._generateQueryFromParams(params);
-
-		if (!(formData instanceof FormData)) {
-			throw new Error('The formData parameter MUST be an instance of the FormData class.');
-		}
-
-		ret.promise = new Promise(function _jqueryFormDataPromise(resolve, reject) {
-			ret.xhr = jQuery.ajax({
-				xhr() {
-					const xhr = new window.XMLHttpRequest();
-
-					xhr.upload.addEventListener(
-						'progress',
-						function (evt) {
-							if (evt.lengthComputable) {
-								const percentComplete = evt.loaded / evt.total;
-								progress(percentComplete * 100);
-							}
-						},
-						false,
-					);
-
-					xhr.upload.addEventListener('error', error, false);
-
-					return xhr;
-				},
-				url: `${baseURI}api/${endpoint}${query}`,
-				headers: APIClient.getCredentials(),
-				data: formData,
-				processData: false,
-				contentType: false,
-				type: 'POST',
-				success: function _jqueryFormDataSuccess(result) {
-					resolve(result);
-				},
-				error: function _jqueryFormDataError(xhr, status, errorThrown) {
-					const error = new Error(errorThrown);
-					error.xhr = xhr;
-					reject(error);
-				},
-			});
-		});
-
-		return ret;
-	},
-
-	processTwoFactorError({ xhr, params, originalCallback, resolve, reject }) {
-		if (!xhr.responseJSON || !xhr.responseJSON.errorType) {
-			return originalCallback();
-		}
-
-		process2faReturn({
-			error: xhr.responseJSON,
-			originalCallback,
-			onCode(code, method) {
-				const headers = params[params.length - 1];
-				headers['x-2fa-code'] = code;
-				headers['x-2fa-method'] = method;
-				APIClient._jqueryCall(...params)
-					.then(resolve)
-					.catch(reject);
-			},
-		});
-	},
-
-	v1: {
-		delete(endpoint, params) {
-			return APIClient.delete(`v1/${endpoint}`, params);
-		},
-
-		get(endpoint, params) {
-			return APIClient.get(`v1/${endpoint}`, params);
-		},
-
-		post(endpoint, params, body) {
-			return APIClient.post(`v1/${endpoint}`, params, body);
-		},
-
-		upload(endpoint, params, formData) {
-			return APIClient.upload(`v1/${endpoint}`, params, formData);
-		},
-
-		put(endpoint, params, body) {
-			return APIClient.put(`v1/${endpoint}`, params, body);
-		},
-	},
-};

From 8064fbe073c452922392c7edcf43b73ee6a74790 Mon Sep 17 00:00:00 2001
From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com>
Date: Tue, 14 Jun 2022 11:31:07 -0300
Subject: [PATCH 22/36] [FIX] User avatar reseting and getting random image
 (#25603)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->
- resolve user avatar not being saved after editing the user profile issue
- resolve user avatar not getting another user picture due to database deletion error

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->
1. As a user log in to the app
2. Click on Avatar/My account
3. Change the username
4. Click on `Save changes` -> Should not change the avatar image
6. Logout and create a new user on the same server
7. Repeat steps 1 to 4 -> Should not change the avatar image as well

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Filipe Marins <9275105+filipemarins@users.noreply.github.com>
Co-authored-by: Matheus Barbosa Silva <36537004+matheusbsilva137@users.noreply.github.com>
---
 apps/meteor/app/lib/server/functions/deleteUser.ts       | 2 +-
 apps/meteor/app/lib/server/functions/saveUserIdentity.ts | 8 ++++++--
 apps/meteor/client/hooks/useUpdateAvatar.ts              | 7 ++++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/app/lib/server/functions/deleteUser.ts b/apps/meteor/app/lib/server/functions/deleteUser.ts
index 63339692bb5d8..056b3750a2d5a 100644
--- a/apps/meteor/app/lib/server/functions/deleteUser.ts
+++ b/apps/meteor/app/lib/server/functions/deleteUser.ts
@@ -75,7 +75,7 @@ export async function deleteUser(userId: string, confirmRelinquish = false): Pro
 		}
 
 		// removes user's avatar
-		if (user.avatarOrigin === 'upload' || user.avatarOrigin === 'url') {
+		if (user.avatarOrigin === 'upload' || user.avatarOrigin === 'url' || user.avatarOrigin === 'rest') {
 			FileUpload.getStore('Avatars').deleteByName(user.username);
 		}
 
diff --git a/apps/meteor/app/lib/server/functions/saveUserIdentity.ts b/apps/meteor/app/lib/server/functions/saveUserIdentity.ts
index a5d6313b1be31..7ba891c38a357 100644
--- a/apps/meteor/app/lib/server/functions/saveUserIdentity.ts
+++ b/apps/meteor/app/lib/server/functions/saveUserIdentity.ts
@@ -70,9 +70,13 @@ export function saveUserIdentity({
 			LivechatDepartmentAgents.replaceUsernameOfAgentByUserId(user._id, username);
 
 			const fileStore = FileUpload.getStore('Avatars');
-			const file = fileStore.model.findOneByName(previousUsername);
+			const previousFile = Promise.await(fileStore.model.findOneByName(previousUsername));
+			const file = Promise.await(fileStore.model.findOneByName(username));
 			if (file) {
-				fileStore.model.updateFileNameById(file._id, username);
+				fileStore.model.deleteFile(file._id);
+			}
+			if (previousFile) {
+				fileStore.model.updateFileNameById(previousFile._id, username);
 			}
 		}
 
diff --git a/apps/meteor/client/hooks/useUpdateAvatar.ts b/apps/meteor/client/hooks/useUpdateAvatar.ts
index fdcac425c9288..a1735c241be78 100644
--- a/apps/meteor/client/hooks/useUpdateAvatar.ts
+++ b/apps/meteor/client/hooks/useUpdateAvatar.ts
@@ -19,10 +19,11 @@ type AvatarServiceObject = {
 
 type AvatarObject = AvatarReset | AvatarUrlObj | FormData | AvatarServiceObject;
 
-const isAvatarReset = (avatarObj: AvatarObject): avatarObj is AvatarReset => typeof avatarObj === 'string';
-const isServiceObject = (avatarObj: AvatarObject): avatarObj is AvatarServiceObject => !isAvatarReset(avatarObj) && 'service' in avatarObj;
+const isAvatarReset = (avatarObj: AvatarObject): avatarObj is AvatarReset => avatarObj === 'reset';
+const isServiceObject = (avatarObj: AvatarObject): avatarObj is AvatarServiceObject =>
+	!isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' in avatarObj;
 const isAvatarUrl = (avatarObj: AvatarObject): avatarObj is AvatarUrlObj =>
-	!isAvatarReset(avatarObj) && 'service' && 'avatarUrl' in avatarObj;
+	!isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' && 'avatarUrl' in avatarObj;
 
 export const useUpdateAvatar = (avatarObj: AvatarObject, userId: IUser['_id']): (() => void) => {
 	const t = useTranslation();

From 66c5a77c18d221e27f325a0ec6b55f4cfc9217b4 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 14 Jun 2022 12:41:44 -0300
Subject: [PATCH 23/36] Chore: Broken Storybook (#25714)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

There is another small improvement on the way we got storybook files.

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>
---
 apps/meteor/.storybook/main.js                |   20 +-
 apps/meteor/client/definitions/css.d.ts       |    3 +
 .../admin/settings/inputs/CodeMirror.tsx      |   22 +-
 apps/meteor/package.json                      |   10 +-
 packages/livechat/.storybook/main.js          |    1 +
 packages/livechat/.storybook/preview.js       |    1 -
 .../livechat/.storybook/webpack.config.js     |    6 +-
 packages/livechat/package.json                |   40 +-
 .../livechat/src/components/Footer/index.js   |    1 -
 .../Messages/AudioAttachment/stories.js       |    2 +-
 .../components/Messages/Message/stories.js    |    9 -
 .../Messages/VideoAttachment/stories.js       |    2 +-
 .../livechat/src/components/Sound/stories.js  |    4 +-
 .../uiKit/message/actions.stories.js          |    2 -
 packages/livechat/tsconfig.json               |    1 -
 packages/livechat/webpack.config.js           |    4 +-
 yarn.lock                                     | 4593 +++++------------
 17 files changed, 1305 insertions(+), 3416 deletions(-)
 create mode 100644 apps/meteor/client/definitions/css.d.ts

diff --git a/apps/meteor/.storybook/main.js b/apps/meteor/.storybook/main.js
index afb264d668512..71d317a497ca1 100644
--- a/apps/meteor/.storybook/main.js
+++ b/apps/meteor/.storybook/main.js
@@ -3,8 +3,24 @@ const { resolve, relative, join } = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-	stories: ['../app/**/*.stories.{js,tsx}', '../client/**/*.stories.{js,tsx}', '../ee/**/*.stories.{js,tsx}'],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-postcss'],
+	stories: [
+		'../client/**/*.stories.{js,tsx}',
+		'../app/**/*.stories.{js,tsx}',
+		'../ee/app/**/*.stories.{js,tsx}',
+		'../ee/client/**/*.stories.{js,tsx}',
+	],
+	addons: [
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		{
+			name: '@storybook/addon-postcss',
+			options: {
+				postcssLoaderOptions: {
+					implementation: require('postcss'),
+				},
+			},
+		},
+	],
 	webpackFinal: async (config) => {
 		const cssRule = config.module.rules.find(({ test }) => test.test('index.css'));
 
diff --git a/apps/meteor/client/definitions/css.d.ts b/apps/meteor/client/definitions/css.d.ts
new file mode 100644
index 0000000000000..14e83a9be3580
--- /dev/null
+++ b/apps/meteor/client/definitions/css.d.ts
@@ -0,0 +1,3 @@
+declare module '*.css' {
+	export = undefined;
+}
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx b/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx
index 500a55fc1d47c..71a10765aa0d5 100644
--- a/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx
+++ b/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx
@@ -1,4 +1,5 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { Editor, EditorFromTextArea } from 'codemirror';
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 
 const defaultGutters = ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'];
@@ -44,7 +45,7 @@ function CodeMirror({
 	const [value, setValue] = useState(valueProp || defaultValue);
 
 	const textAreaRef = useRef<HTMLTextAreaElement>(null);
-	const editorRef = useRef<HTMLFormElement | null>(null);
+	const editorRef = useRef<EditorFromTextArea | null>(null);
 	const handleChange = useMutableCallback(onChange);
 
 	useEffect(() => {
@@ -53,11 +54,16 @@ function CodeMirror({
 		}
 
 		const setupCodeMirror = async (): Promise<void> => {
-			const jsPath = 'codemirror/lib/codemirror.js';
-			const CodeMirror = await import(jsPath);
-			await import('../../../../../app/ui/client/lib/codeMirror/codeMirror');
-			const cssPath = 'codemirror/lib/codemirror.css';
-			await import(cssPath);
+			const CodeMirror = await import('codemirror');
+			await Promise.all([
+				import('../../../../../app/ui/client/lib/codeMirror/codeMirror'),
+				import('codemirror/addon/edit/matchbrackets'),
+				import('codemirror/addon/edit/closebrackets'),
+				import('codemirror/addon/edit/matchtags'),
+				import('codemirror/addon/edit/trailingspace'),
+				import('codemirror/addon/search/match-highlighter'),
+				import('codemirror/lib/codemirror.css'),
+			]);
 
 			if (!textAreaRef.current) {
 				return;
@@ -77,7 +83,7 @@ function CodeMirror({
 				readOnly,
 			});
 
-			editorRef?.current?.on('change', (doc: HTMLFormElement) => {
+			editorRef.current.on('change', (doc: Editor) => {
 				const value = doc.getValue();
 				setValue(value);
 				handleChange(value);
@@ -119,7 +125,7 @@ function CodeMirror({
 		}
 
 		if (value !== editorRef.current.getValue()) {
-			editorRef.current.setValue(value);
+			editorRef.current.setValue(value ?? '');
 		}
 	}, [textAreaRef, value]);
 
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 018ee275e36e5..f73336794d109 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -71,11 +71,11 @@
 		"@rocket.chat/eslint-config": "workspace:^",
 		"@rocket.chat/livechat": "workspace:^",
 		"@settlin/spacebars-loader": "^1.0.9",
-		"@storybook/addon-essentials": "~6.4.22",
-		"@storybook/addon-interactions": "~6.4.22",
+		"@storybook/addon-essentials": "~6.5.8",
+		"@storybook/addon-interactions": "~6.5.8",
 		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/addons": "~6.4.22",
-		"@storybook/react": "~6.4.22",
+		"@storybook/addons": "~6.5.8",
+		"@storybook/react": "~6.5.8",
 		"@storybook/testing-library": "0.0.11",
 		"@testing-library/react": "~12.1.5",
 		"@testing-library/user-event": "^13.5.0",
@@ -89,6 +89,7 @@
 		"@types/chai-dom": "0.0.12",
 		"@types/chai-spies": "^1.0.3",
 		"@types/clipboard": "^2.0.7",
+		"@types/codemirror": "^5",
 		"@types/cookie-parser": "^1.4.2",
 		"@types/dompurify": "^2.2.2",
 		"@types/ejson": "^2.2.0",
@@ -318,6 +319,7 @@
 		"prometheus-gc-stats": "^0.6.3",
 		"proxy-from-env": "^1.1.0",
 		"psl": "^1.8.0",
+		"query-string": "^7.1.1",
 		"queue-fifo": "^0.2.6",
 		"rc-scrollbars": "^1.1.3",
 		"react": "~17.0.2",
diff --git a/packages/livechat/.storybook/main.js b/packages/livechat/.storybook/main.js
index dd5ca2c73ae3d..e012921b13525 100644
--- a/packages/livechat/.storybook/main.js
+++ b/packages/livechat/.storybook/main.js
@@ -7,6 +7,7 @@ module.exports = {
 			}
 		},
 		'@storybook/addon-knobs',
+		'@storybook/addon-postcss'
   ],
   stories: [
 		'../src/**/stories.js',
diff --git a/packages/livechat/.storybook/preview.js b/packages/livechat/.storybook/preview.js
index 104f5955b2369..0815e7123c982 100644
--- a/packages/livechat/.storybook/preview.js
+++ b/packages/livechat/.storybook/preview.js
@@ -1,5 +1,4 @@
 import { addDecorator, addParameters } from '@storybook/react';
-import 'loki/configure-react';
 import 'emoji-mart/css/emoji-mart.css';
 import '../src/styles/index.scss';
 
diff --git a/packages/livechat/.storybook/webpack.config.js b/packages/livechat/.storybook/webpack.config.js
index 2912e86ad557f..d0c7942071fb2 100644
--- a/packages/livechat/.storybook/webpack.config.js
+++ b/packages/livechat/.storybook/webpack.config.js
@@ -1,8 +1,10 @@
 module.exports = ({ config }) => {
 	config.resolve.alias = {
 		...config.resolve.alias,
-		react: require.resolve('preact/compat'),
-		'react-dom': require.resolve('preact/compat'),
+		"react": "preact/compat",
+		"react-dom/test-utils": "preact/test-utils",
+		"react-dom": "preact/compat",
+		"react/jsx-runtime": "preact/jsx-runtime",
 		[require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'),
 	};
 
diff --git a/packages/livechat/package.json b/packages/livechat/package.json
index a7135de9f2bb1..942c461d5a139 100644
--- a/packages/livechat/package.json
+++ b/packages/livechat/package.json
@@ -8,7 +8,8 @@
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/RocketChat/Rocket.Chat.Livechat"
+		"url": "https://github.com/RocketChat/Rocket.Chat",
+		"directory": "packages/livechat"
 	},
 	"scripts": {
 		"clean": "rimraf dist",
@@ -18,25 +19,20 @@
 		"eslint": "eslint src",
 		"stylelint": "stylelint 'src/**/*.scss'",
 		"storybook": "start-storybook -p 9001 -c .storybook",
-		"loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"loki:test-ci": "loki test --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"loki:update": "loki update --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-		"build-storybook": "build-storybook",
-		"build-storybook:loki": "cross-env NODE_ENV=loki build-storybook",
-		"update-storybook": "cross-env NODE_ENV=loki run-s build-storybook loki:update"
+		"build-storybook": "build-storybook"
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.11.5",
 		"@rocket.chat/eslint-config": "^0.4.0",
-		"@storybook/addon-actions": "^6.0.12",
-		"@storybook/addon-backgrounds": "^6.0.12",
-		"@storybook/addon-essentials": "^6.0.16",
-		"@storybook/addon-knobs": "^6.0.12",
-		"@storybook/addon-viewport": "^6.0.12",
-		"@storybook/react": "^6.0.12",
-		"@storybook/storybook-deployer": "^2.8.6",
-		"@storybook/theming": "^6.0.12",
-		"@types/react-dom": "^18",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-backgrounds": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-knobs": "^6.4.0",
+		"@storybook/addon-postcss": "^2.0.0",
+		"@storybook/addon-viewport": "^6.5.8",
+		"@storybook/react": "^6.5.8",
+		"@storybook/theming": "^6.5.8",
+		"@types/react-dom": "^17",
 		"autoprefixer": "^9.8.6",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
@@ -55,7 +51,6 @@
 		"husky": "^4.2.5",
 		"if-env": "^1.0.4",
 		"image-webpack-loader": "^6.0.0",
-		"loki": "^0.24.0",
 		"lorem-ipsum": "^2.0.3",
 		"mini-css-extract-plugin": "^0.11.0",
 		"npm-run-all": "^4.1.5",
@@ -66,7 +61,7 @@
 		"postcss-loader": "^3.0.0",
 		"postcss-logical": "^4.0.2",
 		"postcss-selector-not": "^4.0.0",
-		"react-dom": "^18.1.0",
+		"react-dom": "~17",
 		"rimraf": "^3.0.2",
 		"sass": "^1.49.10",
 		"sass-loader": "^9.0.2",
@@ -113,14 +108,5 @@
 		"updateFiles": [
 			"package.json"
 		]
-	},
-	"loki": {
-		"configurations": {
-			"chrome": {
-				"target": "chrome.docker",
-				"width": 365,
-				"height": 500
-			}
-		}
 	}
 }
diff --git a/packages/livechat/src/components/Footer/index.js b/packages/livechat/src/components/Footer/index.js
index 98d21cb95f5c5..1d011199456ab 100644
--- a/packages/livechat/src/components/Footer/index.js
+++ b/packages/livechat/src/components/Footer/index.js
@@ -5,7 +5,6 @@ import { PopoverMenu } from '../Menu';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
-
 export const Footer = ({ children, className, ...props }) => (
 	<footer className={createClassName(styles, 'footer', {}, [className])} {...props}>
 		{children}
diff --git a/packages/livechat/src/components/Messages/AudioAttachment/stories.js b/packages/livechat/src/components/Messages/AudioAttachment/stories.js
index 723ae8136d308..2365c889b9e0d 100644
--- a/packages/livechat/src/components/Messages/AudioAttachment/stories.js
+++ b/packages/livechat/src/components/Messages/AudioAttachment/stories.js
@@ -13,4 +13,4 @@ storiesOf('Messages/AudioAttachment', module)
 		<AudioAttachment
 			url={text('url', sampleAudio)}
 		/>
-	), { loki: { skip: true } });
+	));
diff --git a/packages/livechat/src/components/Messages/Message/stories.js b/packages/livechat/src/components/Messages/Message/stories.js
index 6619d235357d5..2f93854105a2f 100644
--- a/packages/livechat/src/components/Messages/Message/stories.js
+++ b/packages/livechat/src/components/Messages/Message/stories.js
@@ -239,9 +239,6 @@ WithAudioAttachment.args = {
 		audio_url: sampleAudio,
 	}],
 };
-WithAudioAttachment.parameters = {
-	loki: { skip: true },
-};
 
 export const WithVideoAttachment = (args) => (
 	<Message
@@ -263,9 +260,6 @@ WithVideoAttachment.args = {
 		video_url: sampleVideo,
 	}],
 };
-WithVideoAttachment.parameters = {
-	loki: { skip: true },
-};
 
 export const WithImageAttachment = (args) => (
 	<Message
@@ -343,9 +337,6 @@ WithMultipleAttachments.args = {
 		},
 	],
 };
-WithMultipleAttachments.parameters = {
-	loki: { skip: true },
-};
 
 export const WithUiKitBlocks = (args) => (
 	<Message
diff --git a/packages/livechat/src/components/Messages/VideoAttachment/stories.js b/packages/livechat/src/components/Messages/VideoAttachment/stories.js
index 645bebd680cec..3d84e93b74d4f 100644
--- a/packages/livechat/src/components/Messages/VideoAttachment/stories.js
+++ b/packages/livechat/src/components/Messages/VideoAttachment/stories.js
@@ -13,4 +13,4 @@ storiesOf('Messages/VideoAttachment', module)
 		<VideoAttachment
 			url={text('url', sampleVideo)}
 		/>
-	), { loki: { skip: true } });
+	));
diff --git a/packages/livechat/src/components/Sound/stories.js b/packages/livechat/src/components/Sound/stories.js
index 44db39677f3f6..a26259b1bfb6e 100644
--- a/packages/livechat/src/components/Sound/stories.js
+++ b/packages/livechat/src/components/Sound/stories.js
@@ -18,7 +18,7 @@ storiesOf('Components/Sound', module)
 			onStart={action('start')}
 			onStop={action('stop')}
 		/>
-	), { loki: { skip: true } })
+	))
 	.add('long', () => (
 		<Sound
 			src={text('src', sampleAudio)}
@@ -26,4 +26,4 @@ storiesOf('Components/Sound', module)
 			onStart={action('start')}
 			onStop={action('stop')}
 		/>
-	), { loki: { skip: true } });
+	));
diff --git a/packages/livechat/src/components/uiKit/message/actions.stories.js b/packages/livechat/src/components/uiKit/message/actions.stories.js
index b40ea26dc4165..64cea4dd1457b 100644
--- a/packages/livechat/src/components/uiKit/message/actions.stories.js
+++ b/packages/livechat/src/components/uiKit/message/actions.stories.js
@@ -110,7 +110,6 @@ export const FilteredConversationsSelect = () =>
 		},
 	]);
 FilteredConversationsSelect.storyName = 'filtered conversations select';
-FilteredConversationsSelect.parameters = { loki: { skip: true } };
 
 export const SelectsWithInitialOptions = () =>
 	renderMessageBlocks([
@@ -148,7 +147,6 @@ export const SelectsWithInitialOptions = () =>
 		},
 	]);
 SelectsWithInitialOptions.storyName = 'selects with initial options';
-SelectsWithInitialOptions.parameters = { loki: { skip: true } };
 
 export const Button = () =>
 	renderMessageBlocks([
diff --git a/packages/livechat/tsconfig.json b/packages/livechat/tsconfig.json
index 286861613866d..dfa1e194f1b0c 100644
--- a/packages/livechat/tsconfig.json
+++ b/packages/livechat/tsconfig.json
@@ -6,7 +6,6 @@
 		"outDir": "./dist",
 		"allowJs": true,
 		"checkJs": false,
-
 		"noImplicitAny": true,
 	},
 	"exclude": [
diff --git a/packages/livechat/webpack.config.js b/packages/livechat/webpack.config.js
index 9f06e7b51832d..85eff1c5aca2d 100644
--- a/packages/livechat/webpack.config.js
+++ b/packages/livechat/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = (env, argv) => [
 		resolve: {
 			extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			alias: {
-				'react': 'preact/compat',
+				react: 'preact/compat',
 				'react-dom': 'preact/compat',
 			},
 		},
@@ -189,7 +189,7 @@ module.exports = (env, argv) => [
 		resolve: {
 			extensions: ['.js', '.jsx', '.ts', '.tsx'],
 			alias: {
-				'react': 'preact/compat',
+				react: 'preact/compat',
 				'react-dom': 'preact/compat',
 			},
 		},
diff --git a/yarn.lock b/yarn.lock
index aecd04a4d02b1..8509f25ad3cce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,14 +39,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.13.11, @babel/compat-data@npm:^7.16.8, @babel/compat-data@npm:^7.17.0, @babel/compat-data@npm:^7.17.7":
-  version: 7.17.7
-  resolution: "@babel/compat-data@npm:7.17.7"
-  checksum: bf13476676884ce9afc199747ff82f3bcd6d42a9cfb01ce91bdb762b83ea11ec619b6ec532d1a80469ab14f191f33b5d4b9f8796fa8be3bc728d42b0c5e737e3
-  languageName: node
-  linkType: hard
-
-"@babel/compat-data@npm:^7.17.10":
+"@babel/compat-data@npm:^7.13.11, @babel/compat-data@npm:^7.17.10":
   version: 7.17.10
   resolution: "@babel/compat-data@npm:7.17.10"
   checksum: e85051087cd4690de5061909a2dd2d7f8b6434a3c2e30be6c119758db2027ae1845bcd75a81127423dd568b706ac6994a1a3d7d701069a23bf5cfe900728290b
@@ -77,30 +70,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:>=7.9.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.5.5, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0":
-  version: 7.17.9
-  resolution: "@babel/core@npm:7.17.9"
-  dependencies:
-    "@ampproject/remapping": ^2.1.0
-    "@babel/code-frame": ^7.16.7
-    "@babel/generator": ^7.17.9
-    "@babel/helper-compilation-targets": ^7.17.7
-    "@babel/helper-module-transforms": ^7.17.7
-    "@babel/helpers": ^7.17.9
-    "@babel/parser": ^7.17.9
-    "@babel/template": ^7.16.7
-    "@babel/traverse": ^7.17.9
-    "@babel/types": ^7.17.0
-    convert-source-map: ^1.7.0
-    debug: ^4.1.0
-    gensync: ^1.0.0-beta.2
-    json5: ^2.2.1
-    semver: ^6.3.0
-  checksum: 2d301e4561a170bb584a735ec412de8fdc40b2052e12380d4a5e36781be5af1fd2a60552e7f0764b0a491a242f20105265bd2a10ff57b30c2842684f02dbb5a2
-  languageName: node
-  linkType: hard
-
-"@babel/core@npm:^7.17.9":
+"@babel/core@npm:>=7.9.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.17.9, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0":
   version: 7.18.2
   resolution: "@babel/core@npm:7.18.2"
   dependencies:
@@ -123,18 +93,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.17.9, @babel/generator@npm:^7.7.2":
-  version: 7.17.9
-  resolution: "@babel/generator@npm:7.17.9"
-  dependencies:
-    "@babel/types": ^7.17.0
-    jsesc: ^2.5.1
-    source-map: ^0.5.0
-  checksum: afbdd4afbf731ba0a17e7e2d9a2291e6461259af887f88f1178f63514a86e9c18cec462ae8f9cd6df9ba15a18296f47b0e151202bb4f834f7338ac0c07ec8dc8
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.18.2":
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.18.2, @babel/generator@npm:^7.7.2":
   version: 7.18.2
   resolution: "@babel/generator@npm:7.18.2"
   dependencies:
@@ -164,21 +123,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.13.0, @babel/helper-compilation-targets@npm:^7.16.7, @babel/helper-compilation-targets@npm:^7.17.7":
-  version: 7.17.7
-  resolution: "@babel/helper-compilation-targets@npm:7.17.7"
-  dependencies:
-    "@babel/compat-data": ^7.17.7
-    "@babel/helper-validator-option": ^7.16.7
-    browserslist: ^4.17.5
-    semver: ^6.3.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 24bf851539d5ec8e73779304b5d1ad5b0be09a74459ecc7d9baee9a0fa38ad016e9eaf4b5704504ae8da32f91ce0e31857bbbd9686854caeffd38f58226d3760
-  languageName: node
-  linkType: hard
-
-"@babel/helper-compilation-targets@npm:^7.17.10, @babel/helper-compilation-targets@npm:^7.18.2":
+"@babel/helper-compilation-targets@npm:^7.13.0, @babel/helper-compilation-targets@npm:^7.16.7, @babel/helper-compilation-targets@npm:^7.17.10, @babel/helper-compilation-targets@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/helper-compilation-targets@npm:7.18.2"
   dependencies:
@@ -192,24 +137,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.16.10, @babel/helper-create-class-features-plugin@npm:^7.16.7, @babel/helper-create-class-features-plugin@npm:^7.17.6":
-  version: 7.17.6
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.17.6"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.7
-    "@babel/helper-environment-visitor": ^7.16.7
-    "@babel/helper-function-name": ^7.16.7
-    "@babel/helper-member-expression-to-functions": ^7.16.7
-    "@babel/helper-optimise-call-expression": ^7.16.7
-    "@babel/helper-replace-supers": ^7.16.7
-    "@babel/helper-split-export-declaration": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: d85a5b3f9a18a661372d77462e6ea2a6a03f1083f8b3055ed165284214af9ea6ad677f6bcc4b5ce215da27f95fa93064580d4b6723b578c480ecf17dd31a4307
-  languageName: node
-  linkType: hard
-
-"@babel/helper-create-class-features-plugin@npm:^7.17.12, @babel/helper-create-class-features-plugin@npm:^7.18.0":
+"@babel/helper-create-class-features-plugin@npm:^7.16.7, @babel/helper-create-class-features-plugin@npm:^7.17.12, @babel/helper-create-class-features-plugin@npm:^7.17.6, @babel/helper-create-class-features-plugin@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/helper-create-class-features-plugin@npm:7.18.0"
   dependencies:
@@ -226,19 +154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.16.7":
-  version: 7.17.0
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.17.0"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.7
-    regexpu-core: ^5.0.1
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: eb66d9241544c705e9ce96d2d122b595ef52d926e6e031653e09af8a01050bd9d7e7fee168bf33a863342774d7d6a8cc7e8e9e5a45b955e9c01121c7a2d51708
-  languageName: node
-  linkType: hard
-
-"@babel/helper-create-regexp-features-plugin@npm:^7.17.12":
+"@babel/helper-create-regexp-features-plugin@npm:^7.16.7, @babel/helper-create-regexp-features-plugin@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.17.12"
   dependencies:
@@ -286,16 +202,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/helper-environment-visitor@npm:7.16.7"
-  dependencies:
-    "@babel/types": ^7.16.7
-  checksum: c03a10105d9ebd1fe632a77356b2e6e2f3c44edba9a93b0dc3591b6a66bd7a2e323dd9502f9ce96fc6401234abff1907aa877b6674f7826b61c953f7c8204bbe
-  languageName: node
-  linkType: hard
-
-"@babel/helper-environment-visitor@npm:^7.18.2":
+"@babel/helper-environment-visitor@npm:^7.16.7, @babel/helper-environment-visitor@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/helper-environment-visitor@npm:7.18.2"
   checksum: 1a9c8726fad454a082d077952a90f17188e92eabb3de236cb4782c49b39e3f69c327e272b965e9a20ff8abf37d30d03ffa6fd7974625a6c23946f70f7527f5e9
@@ -330,7 +237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-member-expression-to-functions@npm:^7.16.7, @babel/helper-member-expression-to-functions@npm:^7.17.7":
+"@babel/helper-member-expression-to-functions@npm:^7.17.7":
   version: 7.17.7
   resolution: "@babel/helper-member-expression-to-functions@npm:7.17.7"
   dependencies:
@@ -348,23 +255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.12.1, @babel/helper-module-transforms@npm:^7.16.7, @babel/helper-module-transforms@npm:^7.17.7":
-  version: 7.17.7
-  resolution: "@babel/helper-module-transforms@npm:7.17.7"
-  dependencies:
-    "@babel/helper-environment-visitor": ^7.16.7
-    "@babel/helper-module-imports": ^7.16.7
-    "@babel/helper-simple-access": ^7.17.7
-    "@babel/helper-split-export-declaration": ^7.16.7
-    "@babel/helper-validator-identifier": ^7.16.7
-    "@babel/template": ^7.16.7
-    "@babel/traverse": ^7.17.3
-    "@babel/types": ^7.17.0
-  checksum: 0b8f023aa7ff82dc4864349d54c4557865ad8ba54d78f6d78a86b05ca40f65c2d60acb4a54c5c309e7a4356beb9a89b876e54af4b3c4801ad25f62ec3721f0ae
-  languageName: node
-  linkType: hard
-
-"@babel/helper-module-transforms@npm:^7.18.0":
+"@babel/helper-module-transforms@npm:^7.12.1, @babel/helper-module-transforms@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/helper-module-transforms@npm:7.18.0"
   dependencies:
@@ -396,14 +287,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
-  version: 7.16.7
-  resolution: "@babel/helper-plugin-utils@npm:7.16.7"
-  checksum: d08dd86554a186c2538547cd537552e4029f704994a9201d41d82015c10ed7f58f9036e8d1527c3760f042409163269d308b0b3706589039c5f1884619c6d4ce
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.17.12":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.17.12, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.17.12
   resolution: "@babel/helper-plugin-utils@npm:7.17.12"
   checksum: 4813cf0ddb0f143de032cb88d4207024a2334951db330f8216d6fa253ea320c02c9b2667429ef1a34b5e95d4cfbd085f6cb72d418999751c31d0baf2422cc61d
@@ -421,20 +305,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/helper-replace-supers@npm:7.16.7"
-  dependencies:
-    "@babel/helper-environment-visitor": ^7.16.7
-    "@babel/helper-member-expression-to-functions": ^7.16.7
-    "@babel/helper-optimise-call-expression": ^7.16.7
-    "@babel/traverse": ^7.16.7
-    "@babel/types": ^7.16.7
-  checksum: e5c0b6eb3dad8410a6255f93b580dde9b3c1564646c6ef751de59d5b2a65b5caa80cc9e568155f04bbae895ad0f54305c2e833dbd971a4f641f970c90b3d892b
-  languageName: node
-  linkType: hard
-
-"@babel/helper-replace-supers@npm:^7.18.2":
+"@babel/helper-replace-supers@npm:^7.16.7, @babel/helper-replace-supers@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/helper-replace-supers@npm:7.18.2"
   dependencies:
@@ -447,16 +318,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-simple-access@npm:^7.17.7":
-  version: 7.17.7
-  resolution: "@babel/helper-simple-access@npm:7.17.7"
-  dependencies:
-    "@babel/types": ^7.17.0
-  checksum: 58a9bfd054720024f6ff47fbb113c96061dc2bd31a5e5285756bd3c2e83918c6926900e00150d0fb175d899494fe7d69bf2a8b278c32ef6f6bea8d032e6a3831
-  languageName: node
-  linkType: hard
-
-"@babel/helper-simple-access@npm:^7.18.2":
+"@babel/helper-simple-access@npm:^7.17.7, @babel/helper-simple-access@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/helper-simple-access@npm:7.18.2"
   dependencies:
@@ -509,18 +371,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.17.9":
-  version: 7.17.9
-  resolution: "@babel/helpers@npm:7.17.9"
-  dependencies:
-    "@babel/template": ^7.16.7
-    "@babel/traverse": ^7.17.9
-    "@babel/types": ^7.17.0
-  checksum: 3c6db861e4c82fff2de3efb4ad12e32658c50c29920597cd0979390659b202e5849acd9542e0e2453167a52ccc30156ee4455d64d0e330f020d991d7551566f8
-  languageName: node
-  linkType: hard
-
-"@babel/helpers@npm:^7.18.2":
+"@babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/helpers@npm:7.18.2"
   dependencies:
@@ -542,16 +393,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.17.9, @babel/parser@npm:^7.7.0":
-  version: 7.17.9
-  resolution: "@babel/parser@npm:7.17.9"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: ea59c985ebfae7c0299c8ea63ed34903202f51665db8d59c55b4366e20270b74d7367a2c211fdd2db20f25750df89adcc85ab6c8692061c6459a88efb79f43e6
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.18.0":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.18.0, @babel/parser@npm:^7.7.0":
   version: 7.18.4
   resolution: "@babel/parser@npm:7.18.4"
   bin:
@@ -560,17 +402,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: bbb0f82a4cf297bdbb9110eea570addd4b883fd1b61535558d849822b087aa340fe4e9c31f8a39b087595c8310b58d0f5548d6be0b72c410abefb23a5734b7bc
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.17.12"
@@ -582,19 +413,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.16.0
-    "@babel/plugin-proposal-optional-chaining": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.13.0
-  checksum: 81b372651a7d886a06596b02df7fb65ea90265a8bd60c9f0d5c1777590a598e6cccbdc3239033ee0719abf904813e69577eeb0ed5960b40e07978df023b17a6a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.17.12"
@@ -608,19 +426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-async-generator-functions@npm:^7.16.8":
-  version: 7.16.8
-  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.16.8"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-remap-async-to-generator": ^7.16.8
-    "@babel/plugin-syntax-async-generators": ^7.8.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: abd2c2c67de262720d37c5509dafe2ce64d6cee2dc9a8e863bbba1796b77387214442f37618373c6a4521ca624bfc7dcdbeb1376300d16f2a474405ee0ca2e69
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-async-generator-functions@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.17.12"
@@ -634,19 +439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-class-properties@npm:7.16.7"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 3977e841e17b45b47be749b9a5b67b9e8b25ff0840f9fdad3f00cbcb35db4f5ff15f074939fe19b01207a29688c432cc2c682351959350834d62920b7881f803
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-class-properties@npm:^7.17.12":
+"@babel/plugin-proposal-class-properties@npm:^7.12.1, @babel/plugin-proposal-class-properties@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-class-properties@npm:7.17.12"
   dependencies:
@@ -658,19 +451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-static-block@npm:^7.16.7":
-  version: 7.17.6
-  resolution: "@babel/plugin-proposal-class-static-block@npm:7.17.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.17.6
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-class-static-block": ^7.14.5
-  peerDependencies:
-    "@babel/core": ^7.12.0
-  checksum: 0ef00d73b4a7667059f71614669fb5ec989a0a6d5fe58118310c892507f2556a6f3ae66f0c547cd06e50bdf3ff528ef486e611079d41ef321300c967d2c26e1d
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-class-static-block@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-proposal-class-static-block@npm:7.18.0"
@@ -723,18 +503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-export-namespace-from@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 5016079a5305c1c130fea587b42cdce501574739cfefa5b63469dbc1f32d436df0ff42fabf04089fe8b6a00f4ea7563869e944744b457e186c677995983cb166
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-export-namespace-from@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.17.12"
@@ -747,18 +515,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-json-strings@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-json-strings@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-json-strings": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: ea6487918f8d88322ac2a4e5273be6163b0d84a34330c31cee346e23525299de3b4f753bc987951300a79f55b8f4b1971b24d04c0cdfcb7ceb4d636975c215e8
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-json-strings@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-json-strings@npm:7.17.12"
@@ -771,18 +527,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-logical-assignment-operators@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-logical-assignment-operators@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: c4cf18e10f900d40eaa471c4adce4805e67bd845f997a4b9d5653eced4e653187b9950843b2bf7eab6c0c3e753aba222b1d38888e3e14e013f87295c5b014f19
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-logical-assignment-operators@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-logical-assignment-operators@npm:7.17.12"
@@ -795,19 +539,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: bfafc2701697b5c763dbbb65dd97b56979bfb0922e35be27733699a837aeff22316313ddfdd0fb45129efa3f86617219b77110d05338bc4dca4385d8ce83dd19
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.17.12":
+"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.16.7, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.17.12"
   dependencies:
@@ -844,22 +576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-object-rest-spread@npm:^7.12.1, @babel/plugin-proposal-object-rest-spread@npm:^7.16.7, @babel/plugin-proposal-object-rest-spread@npm:^7.5.5":
-  version: 7.17.3
-  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.17.3"
-  dependencies:
-    "@babel/compat-data": ^7.17.0
-    "@babel/helper-compilation-targets": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-transform-parameters": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 02810f158db4aaf6883131621b5d2c7d901ea3c034df2c2b78663f8b26813795d78a346c37e56770a720c54773732fd1d7fe40947dbf11d1d8de0e9a38e856d3
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-object-rest-spread@npm:^7.18.0":
+"@babel/plugin-proposal-object-rest-spread@npm:^7.12.1, @babel/plugin-proposal-object-rest-spread@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.18.0"
   dependencies:
@@ -886,20 +603,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-optional-chaining@npm:^7.12.7, @babel/plugin-proposal-optional-chaining@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-optional-chaining@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.16.0
-    "@babel/plugin-syntax-optional-chaining": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: e4a6c1ac7e6817b92a673ea52ab0b7dc1fb39d29fb0820cd414e10ae2cd132bd186b4238dcca881a29fc38fe9d38ed24fc111ba22ca20086481682d343f4f130
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-optional-chaining@npm:^7.17.12":
+"@babel/plugin-proposal-optional-chaining@npm:^7.12.7, @babel/plugin-proposal-optional-chaining@npm:^7.16.7, @babel/plugin-proposal-optional-chaining@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-optional-chaining@npm:7.17.12"
   dependencies:
@@ -912,19 +616,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-methods@npm:^7.12.1, @babel/plugin-proposal-private-methods@npm:^7.16.11":
-  version: 7.16.11
-  resolution: "@babel/plugin-proposal-private-methods@npm:7.16.11"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.16.10
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: b333e5aa91c265bb394a57b5f4ae1a34fc8ee73a8d75506b12df258d8b5342107cbd9261f95e606bd3264a5b023db77f1f95be30c2e526683916c57f793f7943
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-private-methods@npm:^7.17.12":
+"@babel/plugin-proposal-private-methods@npm:^7.12.1, @babel/plugin-proposal-private-methods@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-private-methods@npm:7.17.12"
   dependencies:
@@ -936,21 +628,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-property-in-object@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.16.7"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.7
-    "@babel/helper-create-class-features-plugin": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 666d668f51d8c01aaf0dd87b27a83fc0392884d2c8e9d8e17b3b7011c0d348865dee94b44dc2d7070726e58e3b579728dc2588aaa8140d563f7390743ee90f0a
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-private-property-in-object@npm:^7.17.12":
+"@babel/plugin-proposal-private-property-in-object@npm:^7.12.1, @babel/plugin-proposal-private-property-in-object@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.17.12"
   dependencies:
@@ -964,19 +642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-unicode-property-regex@npm:^7.16.7, @babel/plugin-proposal-unicode-property-regex@npm:^7.4.4":
-  version: 7.16.7
-  resolution: "@babel/plugin-proposal-unicode-property-regex@npm:7.16.7"
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 2b8a33713d456183f0b7d011011e7bd932c08cc06216399a7b2015ab39284b511993dc10a89bbb15d1d728e6a2ef42ca08c3202619aa148cbd48052422ea3995
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-unicode-property-regex@npm:^7.17.12":
+"@babel/plugin-proposal-unicode-property-regex@npm:^7.17.12, @babel/plugin-proposal-unicode-property-regex@npm:^7.4.4":
   version: 7.17.12
   resolution: "@babel/plugin-proposal-unicode-property-regex@npm:7.17.12"
   dependencies:
@@ -1131,17 +797,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-syntax-jsx@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: cd9b0e53c50e8ddb0afaf0f42e0b221a94e4f59aee32a591364266a31195c48cac5fef288d02c1c935686bda982d2e0f1ed61cceb995fc9f6fb09ef5ebecdd2b
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-jsx@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-syntax-jsx@npm:7.17.12"
@@ -1252,18 +907,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.12.1, @babel/plugin-transform-arrow-functions@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 2a6aa982c6fc80f4de7ccd973507ce5464fab129987cb6661136a7b9b6a020c2b329b912cbc46a68d39b5a18451ba833dcc8d1ca8d615597fec98624ac2add54
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-arrow-functions@npm:^7.17.12":
+"@babel/plugin-transform-arrow-functions@npm:^7.12.1, @babel/plugin-transform-arrow-functions@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.17.12"
   dependencies:
@@ -1274,29 +918,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.16.8":
-  version: 7.16.8
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.16.8"
+"@babel/plugin-transform-async-to-generator@npm:^7.17.12":
+  version: 7.17.12
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.17.12"
   dependencies:
     "@babel/helper-module-imports": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
+    "@babel/helper-plugin-utils": ^7.17.12
     "@babel/helper-remap-async-to-generator": ^7.16.8
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 3a2e781800e3dea1f526324ed259d1f9064c5ea3c9909c0c22b445d4c648ad489c579f358ae20ada11f7725ba67e0ddeb1e0241efadc734771e87dabd4c6820a
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-async-to-generator@npm:^7.17.12":
-  version: 7.17.12
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.17.12"
-  dependencies:
-    "@babel/helper-module-imports": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.17.12
-    "@babel/helper-remap-async-to-generator": ^7.16.8
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 052dd56eb3b10bc31f5aaced0f75fc7307713f74049ccfb91cd087bebfc890a6d462b59445c5299faaca9030814172cac290c941c76b731a38dcb267377c9187
+  checksum: 052dd56eb3b10bc31f5aaced0f75fc7307713f74049ccfb91cd087bebfc890a6d462b59445c5299faaca9030814172cac290c941c76b731a38dcb267377c9187
   languageName: node
   linkType: hard
 
@@ -1311,18 +942,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.12.12, @babel/plugin-transform-block-scoping@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: f93b5441af573fc274655f1707aeb4f67a43e926b58f56d89cc35a27877ae0bf198648603cbc19f442579489138f93c3838905895f109aa356996dbc3ed97a68
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-block-scoping@npm:^7.17.12":
+"@babel/plugin-transform-block-scoping@npm:^7.12.12, @babel/plugin-transform-block-scoping@npm:^7.17.12":
   version: 7.18.4
   resolution: "@babel/plugin-transform-block-scoping@npm:7.18.4"
   dependencies:
@@ -1333,25 +953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.12.1, @babel/plugin-transform-classes@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-classes@npm:7.16.7"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.7
-    "@babel/helper-environment-visitor": ^7.16.7
-    "@babel/helper-function-name": ^7.16.7
-    "@babel/helper-optimise-call-expression": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-replace-supers": ^7.16.7
-    "@babel/helper-split-export-declaration": ^7.16.7
-    globals: ^11.1.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 791526a1bf3c4659b94d619536e3181d3ad54887d50539066628c6e695789a3bb264dc1fbc8540169d62a222f623df54defb490c1811ae63bad1e3557d6b3bb0
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-classes@npm:^7.17.12":
+"@babel/plugin-transform-classes@npm:^7.12.1, @babel/plugin-transform-classes@npm:^7.17.12":
   version: 7.18.4
   resolution: "@babel/plugin-transform-classes@npm:7.18.4"
   dependencies:
@@ -1369,17 +971,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 28b17f7cfe643f45920b76dc040cab40d4e54eccf5074fba2658c484feacda9b4885b3854ffaf26292189783fdecc97211519c61831b6708fcbf739cfbcbf31c
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-computed-properties@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-computed-properties@npm:7.17.12"
@@ -1391,18 +982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.12.1, @babel/plugin-transform-destructuring@npm:^7.16.7, @babel/plugin-transform-destructuring@npm:^7.5.0":
-  version: 7.17.7
-  resolution: "@babel/plugin-transform-destructuring@npm:7.17.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 767ecf6640fea9a06a4859f0c34daa30ac7d146a96476caa1f77081d5b6e43699f45e14acd52682078f2b7c230ff0814312b41f61b21ca2b5f9c5a2cc93c2b58
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-destructuring@npm:^7.18.0":
+"@babel/plugin-transform-destructuring@npm:^7.12.1, @babel/plugin-transform-destructuring@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-transform-destructuring@npm:7.18.0"
   dependencies:
@@ -1425,17 +1005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: b96f6e9f7b33a91ad0eb6b793e4da58b7a0108b58269109f391d57078d26e043b3872c95429b491894ae6400e72e44d9b744c9b112b8433c99e6969b767e30ed
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-duplicate-keys@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-duplicate-keys@npm:7.17.12"
@@ -1471,18 +1040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.12.1, @babel/plugin-transform-for-of@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-for-of@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 35c9264ee4bef814818123d70afe8b2f0a85753a0a9dc7b73f93a71cadc5d7de852f1a3e300a7c69a491705805704611de1e2ccceb5686f7828d6bca2e5a7306
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-for-of@npm:^7.18.1":
+"@babel/plugin-transform-for-of@npm:^7.12.1, @babel/plugin-transform-for-of@npm:^7.18.1":
   version: 7.18.1
   resolution: "@babel/plugin-transform-for-of@npm:7.18.1"
   dependencies:
@@ -1506,17 +1064,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-literals@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: a9565d999fc7a72a391ef843cf66028c38ca858537c7014d9ea8ea587a59e5f952d9754bdcca6ca0446e84653e297d417d4faedccb9e4221af1aa30f25d918e0
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-literals@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-literals@npm:7.17.12"
@@ -1539,19 +1086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.16.7"
-  dependencies:
-    "@babel/helper-module-transforms": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    babel-plugin-dynamic-import-node: ^2.3.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 9ac251ee96183b10cf9b4ec8f9e8d52e14ec186a56103f6c07d0c69e99faa60391f6bac67da733412975e487bd36adb403e2fc99bae6b785bf1413e9d928bc71
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-amd@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-transform-modules-amd@npm:7.18.0"
@@ -1565,20 +1099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.16.8":
-  version: 7.17.7
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.17.7"
-  dependencies:
-    "@babel/helper-module-transforms": ^7.17.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-simple-access": ^7.17.7
-    babel-plugin-dynamic-import-node: ^2.3.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d84385d89465f8241cbeed8069dc54fb15ee0465119a3326c65ee93ce93019b7a9953b23e22a67203aa2ebf81ac444eadf6d37912d453ec7ba2dce9872bb6490
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-commonjs@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.18.2"
@@ -1593,21 +1113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.16.7":
-  version: 7.17.8
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.17.8"
-  dependencies:
-    "@babel/helper-hoist-variables": ^7.16.7
-    "@babel/helper-module-transforms": ^7.17.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-validator-identifier": ^7.16.7
-    babel-plugin-dynamic-import-node: ^2.3.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 058c0e7987aab64c4019bc9eab3f80c5dd05bec737e230e5c60e9222dfb3d01b2dfa3aa1db6cbb75a4095c40af3bba2e3a60170b1570a158d3e781376569ce49
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-systemjs@npm:^7.18.0":
   version: 7.18.4
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.18.4"
@@ -1623,18 +1128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.16.7"
-  dependencies:
-    "@babel/helper-module-transforms": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d1433f8b0e0b3c9f892aa530f08fe3ba653a5e51fe1ed6034ac7d45d4d6f22c3ba99186b72e41ad9ce5d8dcf964104c3da2419f15fcdcf5ba05c5fda3ea2cefc
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-modules-umd@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-transform-modules-umd@npm:7.18.0"
@@ -1647,17 +1140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.16.8":
-  version: 7.16.8
-  resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.16.8"
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 73e149f5ff690f5b8e3764a881e8e5240f12f394256e7d5217705d0cbeae074c3faff394783190fe1a41f9fc5a53b960b6021158b7e5174391b5fc38f4ba047a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-named-capturing-groups-regex@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.17.12"
@@ -1670,17 +1152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-new-target@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 7410c3e68abc835f87a98d40269e65fb1a05c131decbb6721a80ed49a01bd0c53abb6b8f7f52d5055815509022790e1accca32e975c02f2231ac3cf13d8af768
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-new-target@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-new-target@npm:7.17.12"
@@ -1704,18 +1175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-parameters@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 4d6904376db82d0b35f0a6cce08f630daf8608d94e903d6c7aff5bd742b251651bd1f88cdf9f16cad98aba5fc7c61da8635199364865fad6367d5ae37cf56cc1
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-parameters@npm:^7.17.12":
+"@babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-parameters@npm:7.17.12"
   dependencies:
@@ -1759,22 +1219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.16.7, @babel/plugin-transform-react-jsx@npm:^7.3.0":
-  version: 7.17.3
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.17.3"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.16.7
-    "@babel/helper-module-imports": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/plugin-syntax-jsx": ^7.16.7
-    "@babel/types": ^7.17.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 7e33a3fb78a3b7352b56f48211160ae60dc3654bae314ea0352bfc179d10eaac789792ccb3701172388ec4e4dbdb94952cdf3386980f3af402d99ceadd91149b
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-jsx@npm:^7.17.12":
+"@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.16.7, @babel/plugin-transform-react-jsx@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-react-jsx@npm:7.17.12"
   dependencies:
@@ -1801,17 +1246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-regenerator@npm:7.16.7"
-  dependencies:
-    regenerator-transform: ^0.14.2
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 12b1f9a4f324027af69f49522fbe7feea2ac53285ca5c7e27a70de09f56c74938bfda8b09ac06e57fa1207e441f00efb7adbc462afc9be5e8abd0c2a07715e01
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-regenerator@npm:^7.18.0":
   version: 7.18.0
   resolution: "@babel/plugin-transform-regenerator@npm:7.18.0"
@@ -1824,17 +1258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 00218a646e99a97c1f10b77c41c178ca1b91d0e6cf18dd4ca3c59b8a5ad721db04ef508f49be4cd0dcca7742490dbb145307b706a2dbea1917d5e5f7ba2f31b7
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-reserved-words@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-reserved-words@npm:7.17.12"
@@ -1857,19 +1280,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.12.1, @babel/plugin-transform-spread@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-spread@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.16.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 6e961af1a70586bb72dd85e8296cee857c5dadd73225fccd0fe261c0d98652a82d69c65f3e9dc31ce019a12e9677262678479b96bd2d9140ddf6514618362828
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-spread@npm:^7.17.12":
+"@babel/plugin-transform-spread@npm:^7.12.1, @babel/plugin-transform-spread@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-spread@npm:7.17.12"
   dependencies:
@@ -1892,18 +1303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.12.1, @babel/plugin-transform-template-literals@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-template-literals@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: b55a519dd8b957247ebad3cab21918af5adca4f6e6c87819501cfe3d4d4bccda25bc296c7dfc8a30909b4ad905902aeb9d55ad955cb9f5cbc74b42dab32baa18
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-template-literals@npm:^7.18.2":
+"@babel/plugin-transform-template-literals@npm:^7.12.1, @babel/plugin-transform-template-literals@npm:^7.18.2":
   version: 7.18.2
   resolution: "@babel/plugin-transform-template-literals@npm:7.18.2"
   dependencies:
@@ -1914,17 +1314,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.16.7":
-  version: 7.16.7
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 739a8c439dacbd9af62cfbfa0a7cbc3f220849e5fc774e5ef708a09186689a724c41a1d11323e7d36588d24f5481c8b702c86ff7be8da2e2fed69bed0175f625
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-typeof-symbol@npm:^7.17.12":
   version: 7.17.12
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.17.12"
@@ -1972,91 +1361,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.11.5, @babel/preset-env@npm:^7.12.11":
-  version: 7.16.11
-  resolution: "@babel/preset-env@npm:7.16.11"
-  dependencies:
-    "@babel/compat-data": ^7.16.8
-    "@babel/helper-compilation-targets": ^7.16.7
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-validator-option": ^7.16.7
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.16.7
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.16.7
-    "@babel/plugin-proposal-async-generator-functions": ^7.16.8
-    "@babel/plugin-proposal-class-properties": ^7.16.7
-    "@babel/plugin-proposal-class-static-block": ^7.16.7
-    "@babel/plugin-proposal-dynamic-import": ^7.16.7
-    "@babel/plugin-proposal-export-namespace-from": ^7.16.7
-    "@babel/plugin-proposal-json-strings": ^7.16.7
-    "@babel/plugin-proposal-logical-assignment-operators": ^7.16.7
-    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.16.7
-    "@babel/plugin-proposal-numeric-separator": ^7.16.7
-    "@babel/plugin-proposal-object-rest-spread": ^7.16.7
-    "@babel/plugin-proposal-optional-catch-binding": ^7.16.7
-    "@babel/plugin-proposal-optional-chaining": ^7.16.7
-    "@babel/plugin-proposal-private-methods": ^7.16.11
-    "@babel/plugin-proposal-private-property-in-object": ^7.16.7
-    "@babel/plugin-proposal-unicode-property-regex": ^7.16.7
-    "@babel/plugin-syntax-async-generators": ^7.8.4
-    "@babel/plugin-syntax-class-properties": ^7.12.13
-    "@babel/plugin-syntax-class-static-block": ^7.14.5
-    "@babel/plugin-syntax-dynamic-import": ^7.8.3
-    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-    "@babel/plugin-syntax-json-strings": ^7.8.3
-    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
-    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
-    "@babel/plugin-syntax-numeric-separator": ^7.10.4
-    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
-    "@babel/plugin-syntax-optional-chaining": ^7.8.3
-    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
-    "@babel/plugin-syntax-top-level-await": ^7.14.5
-    "@babel/plugin-transform-arrow-functions": ^7.16.7
-    "@babel/plugin-transform-async-to-generator": ^7.16.8
-    "@babel/plugin-transform-block-scoped-functions": ^7.16.7
-    "@babel/plugin-transform-block-scoping": ^7.16.7
-    "@babel/plugin-transform-classes": ^7.16.7
-    "@babel/plugin-transform-computed-properties": ^7.16.7
-    "@babel/plugin-transform-destructuring": ^7.16.7
-    "@babel/plugin-transform-dotall-regex": ^7.16.7
-    "@babel/plugin-transform-duplicate-keys": ^7.16.7
-    "@babel/plugin-transform-exponentiation-operator": ^7.16.7
-    "@babel/plugin-transform-for-of": ^7.16.7
-    "@babel/plugin-transform-function-name": ^7.16.7
-    "@babel/plugin-transform-literals": ^7.16.7
-    "@babel/plugin-transform-member-expression-literals": ^7.16.7
-    "@babel/plugin-transform-modules-amd": ^7.16.7
-    "@babel/plugin-transform-modules-commonjs": ^7.16.8
-    "@babel/plugin-transform-modules-systemjs": ^7.16.7
-    "@babel/plugin-transform-modules-umd": ^7.16.7
-    "@babel/plugin-transform-named-capturing-groups-regex": ^7.16.8
-    "@babel/plugin-transform-new-target": ^7.16.7
-    "@babel/plugin-transform-object-super": ^7.16.7
-    "@babel/plugin-transform-parameters": ^7.16.7
-    "@babel/plugin-transform-property-literals": ^7.16.7
-    "@babel/plugin-transform-regenerator": ^7.16.7
-    "@babel/plugin-transform-reserved-words": ^7.16.7
-    "@babel/plugin-transform-shorthand-properties": ^7.16.7
-    "@babel/plugin-transform-spread": ^7.16.7
-    "@babel/plugin-transform-sticky-regex": ^7.16.7
-    "@babel/plugin-transform-template-literals": ^7.16.7
-    "@babel/plugin-transform-typeof-symbol": ^7.16.7
-    "@babel/plugin-transform-unicode-escapes": ^7.16.7
-    "@babel/plugin-transform-unicode-regex": ^7.16.7
-    "@babel/preset-modules": ^0.1.5
-    "@babel/types": ^7.16.8
-    babel-plugin-polyfill-corejs2: ^0.3.0
-    babel-plugin-polyfill-corejs3: ^0.5.0
-    babel-plugin-polyfill-regenerator: ^0.3.0
-    core-js-compat: ^3.20.2
-    semver: ^6.3.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: c8029c272073df787309d983ae458dd094b57f87152b8ccad95c7c8b1e82b042c1077e169538aae5f98b7659de0632d10708d9c85acf21a5e9406d7dd3656d8c
-  languageName: node
-  linkType: hard
-
-"@babel/preset-env@npm:^7.16.11":
+"@babel/preset-env@npm:^7.11.5, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.16.11":
   version: 7.18.2
   resolution: "@babel/preset-env@npm:7.18.2"
   dependencies:
@@ -2169,23 +1474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.10":
-  version: 7.16.7
-  resolution: "@babel/preset-react@npm:7.16.7"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.16.7
-    "@babel/helper-validator-option": ^7.16.7
-    "@babel/plugin-transform-react-display-name": ^7.16.7
-    "@babel/plugin-transform-react-jsx": ^7.16.7
-    "@babel/plugin-transform-react-jsx-development": ^7.16.7
-    "@babel/plugin-transform-react-pure-annotations": ^7.16.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d0a052a418891ab6a02df9c75f0202964ad3b936c20bc44c81bcf3f02c057383f2fa329e0cc79baaac1b4e5e5c8924d3df93a2dd9319efe8042e3b33849978b3
-  languageName: node
-  linkType: hard
-
-"@babel/preset-react@npm:^7.16.7":
+"@babel/preset-react@npm:^7.12.10, @babel/preset-react@npm:^7.16.7":
   version: 7.17.12
   resolution: "@babel/preset-react@npm:7.17.12"
   dependencies:
@@ -2229,16 +1518,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
-  version: 7.17.9
-  resolution: "@babel/runtime@npm:7.17.9"
+"@babel/runtime@npm:7.7.2":
+  version: 7.7.2
+  resolution: "@babel/runtime@npm:7.7.2"
   dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: 4d56bdb82890f386d5a57c40ef985a0ed7f0a78f789377a2d0c3e8826819e0f7f16ba0fe906d9b2241c5f7ca56630ef0653f5bb99f03771f7b87ff8af4bf5fe3
+    regenerator-runtime: ^0.13.2
+  checksum: 4319b6a1771f2e0181de26a983ae2788f1af428dcac3c0225d459be8a50167cee5be0d66856306b8eab53c1b3e1cae68cb481ef1be5ca2259f997ce3b12557b7
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.17.9":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.17.9, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.18.3
   resolution: "@babel/runtime@npm:7.18.3"
   dependencies:
@@ -2247,6 +1536,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:~7.5.4":
+  version: 7.5.5
+  resolution: "@babel/runtime@npm:7.5.5"
+  dependencies:
+    regenerator-runtime: ^0.13.2
+  checksum: b04ed65993bbf4371a880f7afc289f1f2a5f5a9e882c64448b41481aa289ed650a2b6155c6179f3d32fccf159f9be947989af5ff7a4f9b847f60f25e631ad533
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.12.7, @babel/template@npm:^7.16.7, @babel/template@npm:^7.3.3":
   version: 7.16.7
   resolution: "@babel/template@npm:7.16.7"
@@ -2258,27 +1556,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.16.7, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.17.3, @babel/traverse@npm:^7.17.9, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2":
-  version: 7.17.9
-  resolution: "@babel/traverse@npm:7.17.9"
-  dependencies:
-    "@babel/code-frame": ^7.16.7
-    "@babel/generator": ^7.17.9
-    "@babel/helper-environment-visitor": ^7.16.7
-    "@babel/helper-function-name": ^7.17.9
-    "@babel/helper-hoist-variables": ^7.16.7
-    "@babel/helper-split-export-declaration": ^7.16.7
-    "@babel/parser": ^7.17.9
-    "@babel/types": ^7.17.0
-    debug: ^4.1.0
-    globals: ^11.1.0
-  checksum: d907c71d1617589cc0cddc9837cb27bcb9b8f2117c379e13e72653745abe01da24e8c072bd0c91b9db33323ddb1086722756fbc50b487b2608733baf9dd6fd2c
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.18.0, @babel/traverse@npm:^7.18.2":
-  version: 7.18.2
-  resolution: "@babel/traverse@npm:7.18.2"
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.18.0, @babel/traverse@npm:^7.18.2, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2":
+  version: 7.18.2
+  resolution: "@babel/traverse@npm:7.18.2"
   dependencies:
     "@babel/code-frame": ^7.16.7
     "@babel/generator": ^7.18.2
@@ -2294,17 +1574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.16.0, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.17.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
-  version: 7.17.0
-  resolution: "@babel/types@npm:7.17.0"
-  dependencies:
-    "@babel/helper-validator-identifier": ^7.16.7
-    to-fast-properties: ^2.0.0
-  checksum: 12e5a287986fe557188e87b2c5202223f1dc83d9239a196ab936fdb9f8c1eb0be717ff19f934b5fad4e29a75586d5798f74bed209bccea1c20376b9952056f0e
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.17.12, @babel/types@npm:^7.18.0, @babel/types@npm:^7.18.2":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.16.0, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.17.0, @babel/types@npm:^7.17.12, @babel/types@npm:^7.18.0, @babel/types@npm:^7.18.2, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
   version: 7.18.4
   resolution: "@babel/types@npm:7.18.4"
   dependencies:
@@ -2451,6 +1721,72 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@design-systems/utils@npm:2.12.0":
+  version: 2.12.0
+  resolution: "@design-systems/utils@npm:2.12.0"
+  dependencies:
+    "@babel/runtime": ^7.11.2
+    clsx: ^1.0.4
+    focus-lock: ^0.8.0
+    react-merge-refs: ^1.0.0
+  peerDependencies:
+    "@types/react": "*"
+    react: ">= 16.8.6"
+    react-dom: ">= 16.8.6"
+  checksum: 6659eadb485b55d25d465b0b262c22e7d196f35b27aa1f8f7b6f3bacda9d7c5f6186a46afe56dd223c70f91c61392c81a541ea7dec588960499d049a8c06f3b7
+  languageName: node
+  linkType: hard
+
+"@devtools-ds/object-inspector@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "@devtools-ds/object-inspector@npm:1.2.0"
+  dependencies:
+    "@babel/runtime": 7.7.2
+    "@devtools-ds/object-parser": ^1.2.0
+    "@devtools-ds/themes": ^1.2.0
+    "@devtools-ds/tree": ^1.2.0
+    clsx: 1.1.0
+  peerDependencies:
+    react: ">= 16.8.6"
+  checksum: f5254fe95afae4bb9dcc7fa9b5c5460b3a566ed97df2d40b338571c4028e346d81516e058fa86cf0e0a005342d7920d8ccbefadf436fc29dfffb4977a43e3f8a
+  languageName: node
+  linkType: hard
+
+"@devtools-ds/object-parser@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@devtools-ds/object-parser@npm:1.2.0"
+  dependencies:
+    "@babel/runtime": ~7.5.4
+  checksum: 1fb1cb20f6697553ec41a7874e838a397881a6271bcd89ce59a87bf5d36612df9ee43cd7cecadc8bffeea62d21cc73de5528c8fe51f4499610ac6a04d0ee28d7
+  languageName: node
+  linkType: hard
+
+"@devtools-ds/themes@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@devtools-ds/themes@npm:1.2.0"
+  dependencies:
+    "@babel/runtime": ~7.5.4
+    "@design-systems/utils": 2.12.0
+    clsx: 1.1.0
+  peerDependencies:
+    react: ">= 16.8.6"
+  checksum: fc1db88056b18481abacc1dcffb86419fc05d66ddab375684dc66a6365ed348388b34137c9480ae30a623cb6c0348e18ecc67b24ba6a4a0da48b45a0e1b51c45
+  languageName: node
+  linkType: hard
+
+"@devtools-ds/tree@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@devtools-ds/tree@npm:1.2.0"
+  dependencies:
+    "@babel/runtime": 7.7.2
+    "@devtools-ds/themes": ^1.2.0
+    clsx: 1.1.0
+  peerDependencies:
+    react: ">= 16.8.6"
+  checksum: fd0b2c8ae606d9ff5ed722371f91278b62da06b0162cf5b104ac7d176a555fc531942370c084bf27bd3525d61981bacdd3f8ac71411dcbc4bc1827b07f1482a0
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -2470,7 +1806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.0.9, @emotion/core@npm:^10.1.1":
+"@emotion/core@npm:^10.0.9":
   version: 10.3.1
   resolution: "@emotion/core@npm:10.3.1"
   dependencies:
@@ -2504,15 +1840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:0.8.8, @emotion/is-prop-valid@npm:^0.8.6":
-  version: 0.8.8
-  resolution: "@emotion/is-prop-valid@npm:0.8.8"
-  dependencies:
-    "@emotion/memoize": 0.7.4
-  checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac
-  languageName: node
-  linkType: hard
-
 "@emotion/memoize@npm:0.7.4":
   version: 0.7.4
   resolution: "@emotion/memoize@npm:0.7.4"
@@ -2540,34 +1867,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled-base@npm:^10.3.0":
-  version: 10.3.0
-  resolution: "@emotion/styled-base@npm:10.3.0"
-  dependencies:
-    "@babel/runtime": ^7.5.5
-    "@emotion/is-prop-valid": 0.8.8
-    "@emotion/serialize": ^0.11.15
-    "@emotion/utils": 0.11.3
-  peerDependencies:
-    "@emotion/core": ^10.0.28
-    react: ">=16.3.0"
-  checksum: ac0bb8f39e92fda12686afe5d398f7215cc7276d66195d5937f58ee7dae516e58017594cc74deed72859043623db824fdaf8213d29276316749ebff2ef7a5e4d
-  languageName: node
-  linkType: hard
-
-"@emotion/styled@npm:^10.0.27":
-  version: 10.3.0
-  resolution: "@emotion/styled@npm:10.3.0"
-  dependencies:
-    "@emotion/styled-base": ^10.3.0
-    babel-plugin-emotion: ^10.0.27
-  peerDependencies:
-    "@emotion/core": ^10.0.27
-    react: ">=16.3.0"
-  checksum: 9d9609c008c009d8b9249fdbb2017a404b1fc6c9118c84ec9a916e86670d4c61f03fee24297ad10b460dab628ff8260066338617ee99ede3ae7969ce5995e9bc
-  languageName: node
-  linkType: hard
-
 "@emotion/stylis@npm:0.8.5":
   version: 0.8.5
   resolution: "@emotion/stylis@npm:0.8.5"
@@ -2613,23 +1912,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@eslint/eslintrc@npm:1.2.1"
-  dependencies:
-    ajv: ^6.12.4
-    debug: ^4.3.2
-    espree: ^9.3.1
-    globals: ^13.9.0
-    ignore: ^5.2.0
-    import-fresh: ^3.2.1
-    js-yaml: ^4.1.0
-    minimatch: ^3.0.4
-    strip-json-comments: ^3.1.1
-  checksum: 1f797b9f94d71b965992cf6c44e3bcb574643014fd1e3d4862d25056bd5568f59c488461a7e9a1c1758ca7f0def5d3cb69c3d8b38581bcf4a53af74371243797
-  languageName: node
-  linkType: hard
-
 "@eslint/eslintrc@npm:^1.3.0":
   version: 1.3.0
   resolution: "@eslint/eslintrc@npm:1.3.0"
@@ -2716,48 +1998,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hapi/address@npm:2.x.x":
-  version: 2.1.4
-  resolution: "@hapi/address@npm:2.1.4"
-  checksum: 10341c3b650746c79ac2c57118efb05d45d850b33aef82a6f2ba89419fdbf1b6d337c8b085cc9bc1af7a5fb18379c07edaf3be7584426f40bd370ed6de29e965
-  languageName: node
-  linkType: hard
-
-"@hapi/bourne@npm:1.x.x":
-  version: 1.3.2
-  resolution: "@hapi/bourne@npm:1.3.2"
-  checksum: 8403a2e8297fbb49a0e4fca30e874590d96ecaf7165740804037ff30625f3fdea6353d9f7f4422607eb069a3f471900a3037df34285a95135d15c6a8b10094b0
-  languageName: node
-  linkType: hard
-
-"@hapi/hoek@npm:8.x.x, @hapi/hoek@npm:^8.3.0":
-  version: 8.5.1
-  resolution: "@hapi/hoek@npm:8.5.1"
-  checksum: 8f8ce36be4f5e5d7a712072d4a028a4a95beec7a7da3a7a6e9a0c07d697f04c19b37d93751db352c314ea831f7e2120569a035dc6a351ed8c0444f1d3b275621
-  languageName: node
-  linkType: hard
-
-"@hapi/joi@npm:^15.0.3":
-  version: 15.1.1
-  resolution: "@hapi/joi@npm:15.1.1"
-  dependencies:
-    "@hapi/address": 2.x.x
-    "@hapi/bourne": 1.x.x
-    "@hapi/hoek": 8.x.x
-    "@hapi/topo": 3.x.x
-  checksum: 5bc3df9d43d4a53c41fd172d2958a4a846dbacbe2a2abe16830059109c436776d7be98144f14af9d328ebd107dbebafe55e00a9032a905aef45aadff988b54bf
-  languageName: node
-  linkType: hard
-
-"@hapi/topo@npm:3.x.x":
-  version: 3.1.6
-  resolution: "@hapi/topo@npm:3.1.6"
-  dependencies:
-    "@hapi/hoek": ^8.3.0
-  checksum: 34278bc13b4023d6d0d7c913605a254b2d728dc6489cd465269eebaa7d8d2d81cda3f2157398dca87d3cb9e1a8aa8a1158ce2564c71a8e289b807c144e3b4c1e
-  languageName: node
-  linkType: hard
-
 "@humanwhocodes/config-array@npm:^0.5.0":
   version: 0.5.0
   resolution: "@humanwhocodes/config-array@npm:0.5.0"
@@ -3069,6 +2309,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/source-map@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "@jridgewell/source-map@npm:0.3.2"
+  dependencies:
+    "@jridgewell/gen-mapping": ^0.3.0
+    "@jridgewell/trace-mapping": ^0.3.9
+  checksum: 1b83f0eb944e77b70559a394d5d3b3f98a81fcc186946aceb3ef42d036762b52ef71493c6c0a3b7c1d2f08785f53ba2df1277fe629a06e6109588ff4cdcf7482
+  languageName: node
+  linkType: hard
+
 "@jridgewell/sourcemap-codec@npm:^1.4.10":
   version: 1.4.11
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.11"
@@ -3076,17 +2326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.0":
-  version: 0.3.4
-  resolution: "@jridgewell/trace-mapping@npm:0.3.4"
-  dependencies:
-    "@jridgewell/resolve-uri": ^3.0.3
-    "@jridgewell/sourcemap-codec": ^1.4.10
-  checksum: ab8bce84bbbc8c34f3ba8325ed926f8f2d3098983c10442a80c55764c4eb6e47d5b92d8ff20a0dd868c3e76a3535651fd8a0138182c290dbfc8396195685c37b
-  languageName: node
-  linkType: hard
-
-"@jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.0, @jridgewell/trace-mapping@npm:^0.3.7, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.13
   resolution: "@jridgewell/trace-mapping@npm:0.3.13"
   dependencies:
@@ -3117,194 +2357,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@loki/browser@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/browser@npm:0.24.0"
-  dependencies:
-    "@loki/integration-core": ^0.24.0
-  checksum: 165d0c212b299f68e8a75d4c229a202a71034d6e0721ea2c9b63a2c5de476edd06fee8bbaeaa514472264cb13dc410ac4b15d63667e99ae34dcc31d9197f7b28
-  languageName: node
-  linkType: hard
-
-"@loki/core@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/core@npm:0.24.0"
-  dependencies:
-    shelljs: ^0.8.3
-  checksum: 3e335af735c98abd416de75237a0f12efe1a64e6411be02093d3370dfd5a57c6f43cb82d55df6eeaa6c2190c9489524a9ea2a3741f6092e7c6c2e32e7a1e30e3
-  languageName: node
-  linkType: hard
-
-"@loki/diff-graphics-magick@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/diff-graphics-magick@npm:0.24.0"
-  dependencies:
-    fs-extra: ^8.1.0
-    gm: ^1.23.1
-  checksum: 3216e93d9bd2e952c87762c5a061d002a8da4017231eabf41d528da000a8e76ceb9211df4b29b4e28da4fc0a3a60a2264f30d8dcd2270ed204366b9427814200
-  languageName: node
-  linkType: hard
-
-"@loki/diff-looks-same@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/diff-looks-same@npm:0.24.0"
-  dependencies:
-    "@loki/browser": ^0.24.0
-    fs-extra: ^8.1.0
-    looks-same: ^4.0.0
-  checksum: 9c04d296f391f7808eea5f42e6eb31bad961f015ce72e293fbe01a0f9d6b28e25709eb83555f094eb0c91cb88b31bcab0b4e7274e0f0ac7ecf3e846f21bd3096
-  languageName: node
-  linkType: hard
-
-"@loki/integration-core@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/integration-core@npm:0.24.0"
-  checksum: 8812e8a94a00a773cf72095e07aa12544ad1ecbf44c09b7268d9a600ec4cc55b7b6f8a1bb2d1ef907540b67b7b2e3e97e4503291f20ef96213d5a3348ed8ed75
-  languageName: node
-  linkType: hard
-
-"@loki/integration-react-native@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/integration-react-native@npm:0.24.0"
-  dependencies:
-    "@loki/integration-core": ^0.24.0
-  checksum: 49d80573df6444d801e2f0a5e96afdf4bd4d1c5773bb37869ada0f0ff67de2fa71ead2a39277b9f51c6add96c11fdb3e30f6c1fcbd441a0a2c96b4794f8f4338
-  languageName: node
-  linkType: hard
-
-"@loki/integration-react@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/integration-react@npm:0.24.0"
-  dependencies:
-    "@loki/browser": ^0.24.0
-  checksum: f8356b7e1d32e2950ec527619c93fa78933809fcd779c16c9661aff37a4c1817e1a6b27081d4e44e46cde7036c6db91e49ba26089a4e966b9a0b1f8703cf85c3
-  languageName: node
-  linkType: hard
-
-"@loki/integration-vue@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/integration-vue@npm:0.24.0"
-  dependencies:
-    "@loki/browser": ^0.24.0
-  checksum: fe6f7eaebfee24d658b381633208c3b008be5490600f01700796d717f772b569e0b39574d38a5cf526fe2e6e11187a453754d115be45c7cebf44a0097405e8ec
-  languageName: node
-  linkType: hard
-
-"@loki/runner@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/runner@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    "@loki/diff-graphics-magick": ^0.24.0
-    "@loki/diff-looks-same": ^0.24.0
-    "@loki/target-chrome-app": ^0.24.0
-    "@loki/target-chrome-aws-lambda": ^0.24.0
-    "@loki/target-chrome-docker": ^0.24.0
-    "@loki/target-native-android-emulator": ^0.24.0
-    "@loki/target-native-ios-simulator": ^0.24.0
-    async: ^3.0.1
-    chalk: ^3.0.0
-    ci-info: ^2.0.0
-    cosmiconfig: ^6.0.0
-    fs-extra: ^8.1.0
-    import-jsx: ^3.0.0
-    ink: ^2.6.0
-    minimist: ^1.2.0
-    ramda: ^0.26.1
-    react: ^16.12.0
-    transliteration: ^1.6.6
-  bin:
-    loki: bin/loki
-  checksum: 3e4e14abea436b92b0936b43c33d2876d6884b08d09f592bd5a66d090a23e9d7c4c47829b64ee5eeb81000458a1f7bd77a97e4bb355c5f178683ca066e1d61ac
-  languageName: node
-  linkType: hard
-
-"@loki/target-chrome-app@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-chrome-app@npm:0.24.0"
-  dependencies:
-    "@loki/target-chrome-core": ^0.24.0
-    chrome-launcher: ^0.13.0
-    chrome-remote-interface: ^0.28.0
-    debug: ^4.1.1
-  checksum: 22aef9686b9986932c5c41ee24f3adc23958f011f5f71bfb8c9765dfe248612b6bcbdbbd0d74d171a7b24c252648ec7f777b9c39561885ddca5019d70ec6c880
-  languageName: node
-  linkType: hard
-
-"@loki/target-chrome-aws-lambda@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-chrome-aws-lambda@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    aws-sdk: ^2.588.0
-    debug: ^4.1.1
-  checksum: 292deefe5f2d6fa676285a38c476ffe170cc8adff5037e4da2a09ce36ee13287b54e19e617c8cbaa1bab305b9c2b06f96a68a8c1b498795f45ea595019428467
-  languageName: node
-  linkType: hard
-
-"@loki/target-chrome-core@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-chrome-core@npm:0.24.0"
-  dependencies:
-    "@loki/browser": ^0.24.0
-    "@loki/core": ^0.24.0
-  checksum: e9c245c5e79917bee158eaa8aa8dde543c5647e5aa1d69b53eea09de93b8f4e290d99de7a0af8b232b0a1c0be9801c3b97e4a9adc2884ab8f03fbcf8ab879483
-  languageName: node
-  linkType: hard
-
-"@loki/target-chrome-docker@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-chrome-docker@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    "@loki/target-chrome-core": ^0.24.0
-    chrome-remote-interface: ^0.28.0
-    debug: ^4.1.1
-    execa: ^1.0.0
-    fs-extra: ^8.1.0
-    get-port: ^5.0.0
-    wait-on: ^3.3.0
-  checksum: df705ae8226acd9dac146fc3750b5f9b15d1a35fcf1fdbebd0ffc100e0cf33419f411305eda45fd6752a8ee9833d893dfcfbed2141783b72bddfcd69b18652ff
-  languageName: node
-  linkType: hard
-
-"@loki/target-native-android-emulator@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-native-android-emulator@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    "@loki/target-native-core": ^0.24.0
-    fs-extra: ^8.1.0
-    osnap: ^1.1.0
-    tempy: ^0.3.0
-  checksum: 2b8b81923d491b3928bdb5c0eb4cf82736523fb73716166fe765e476bd32305c718f36392299784cc39c20dd0f4bb52c81cd19ca8e6ff36d95b96721653d4de9
-  languageName: node
-  linkType: hard
-
-"@loki/target-native-core@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-native-core@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    debug: ^4.1.1
-    ws: ^7.2.0
-  checksum: 4f3981dd47ec6d5ecb506b89453e308c013409723196590f2a6203b2539cb37c464eb0e6cbf0a6cfae1fd21082b0d7392d1fe819016985ce4896b8a6885bd8d1
-  languageName: node
-  linkType: hard
-
-"@loki/target-native-ios-simulator@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@loki/target-native-ios-simulator@npm:0.24.0"
-  dependencies:
-    "@loki/core": ^0.24.0
-    "@loki/target-native-core": ^0.24.0
-    fs-extra: ^8.1.0
-    osnap: ^1.1.0
-    tempy: ^0.3.0
-  checksum: f830af7af2608d50a96cf42a8d7d3f69fd9fe7554c9c3d64e1be4a4a3220c3be1bf67c01c36474d94175a5aa52749c46e8a41bfc7293b8eded5fb8f9a88c2f25
-  languageName: node
-  linkType: hard
-
 "@mapbox/node-pre-gyp@npm:^1.0.0":
   version: 1.0.9
   resolution: "@mapbox/node-pre-gyp@npm:1.0.9"
@@ -3324,18 +2376,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/loader@npm:^1.6.22":
-  version: 1.6.22
-  resolution: "@mdx-js/loader@npm:1.6.22"
-  dependencies:
-    "@mdx-js/mdx": 1.6.22
-    "@mdx-js/react": 1.6.22
-    loader-utils: 2.0.0
-  checksum: 5ce4b92824555c6dd06c12ee7b9fc036e41499a5026218597316236d62253b6ff6417a416445a71f685716b57bbfc45593f156373252d1f53510b9ef9666334a
-  languageName: node
-  linkType: hard
-
-"@mdx-js/mdx@npm:1.6.22, @mdx-js/mdx@npm:^1.6.22":
+"@mdx-js/mdx@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/mdx@npm:1.6.22"
   dependencies:
@@ -3362,7 +2403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:1.6.22, @mdx-js/react@npm:^1.6.22":
+"@mdx-js/react@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/react@npm:1.6.22"
   peerDependencies:
@@ -4054,9 +3095,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1":
-  version: 0.5.5
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.5"
+"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3":
+  version: 0.5.7
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.7"
   dependencies:
     ansi-html-community: ^0.0.8
     common-path-prefix: ^3.0.0
@@ -4089,14 +3130,7 @@ __metadata:
       optional: true
     webpack-plugin-serve:
       optional: true
-  checksum: 9914430fc3c5bb6a907cc94faaf6232ee7fdcc8b631a33d3541ae1273f46cdd719eca87932755abf8433c9297666484ed6707c568a131a7a0f55bb442b0e6243
-  languageName: node
-  linkType: hard
-
-"@popperjs/core@npm:^2.5.4, @popperjs/core@npm:^2.6.0":
-  version: 2.11.5
-  resolution: "@popperjs/core@npm:2.11.5"
-  checksum: fd7f9dca3fb716d7426332b6ee283f88d2724c0ab342fb678865a640bad403dfb9eeebd8204a406986162f7e2b33394f104320008b74d0e9066d7322f70ea35d
+  checksum: 3490649181878cc8808fb91f3870ef095e5a1fb9647b3ac83740df07379c9d1cf540f24bf2b09d5f26a3a8c805b2c6b9c5be7192bdb9317d0ffffa67426e9f66
   languageName: node
   linkType: hard
 
@@ -4241,7 +3275,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/apps-engine@npm:1.32.0":
+"@rocket.chat/apps-engine@npm:1.32.0, @rocket.chat/apps-engine@npm:^1.31.0":
   version: 1.32.0
   resolution: "@rocket.chat/apps-engine@npm:1.32.0"
   dependencies:
@@ -4255,20 +3289,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/apps-engine@npm:^1.31.0":
-  version: 1.31.0
-  resolution: "@rocket.chat/apps-engine@npm:1.31.0"
-  dependencies:
-    adm-zip: ^0.4.9
-    cryptiles: ^4.1.3
-    lodash.clonedeep: ^4.5.0
-    semver: ^5.5.0
-    stack-trace: 0.0.10
-    uuid: ^3.2.1
-  checksum: 3d748ddc14b4b5c7ca8b5e74d0d4b2e0cd5333d85226a66e2ad6a89878cd679d58344a6f0592d14fdaf3a2016c87452e2c03278241778d08e0bbc1ff03d39a34
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/core-typings@workspace:^, @rocket.chat/core-typings@workspace:packages/core-typings":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/core-typings@workspace:packages/core-typings"
@@ -4285,19 +3305,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/css-in-js@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/css-in-js@npm:0.31.11"
-  dependencies:
-    "@emotion/hash": ^0.8.0
-    "@rocket.chat/css-supports": ^0.31.11
-    "@rocket.chat/memo": ^0.31.11
-    "@rocket.chat/stylis-logical-props-middleware": ^0.31.11
-    stylis: ~4.0.13
-  checksum: a6e67b89f431e01d364b9d79774e3be369b77f9b2dd5559f9ea6822032104876e980919116b4fdb46e80d76675ee44555c628850cfe75c3e4811cbb84fdf59db
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/css-in-js@npm:^0.31.13, @rocket.chat/css-in-js@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/css-in-js@npm:0.31.13"
@@ -4324,15 +3331,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/css-supports@npm:0.31.11"
-  dependencies:
-    "@rocket.chat/memo": ^0.31.11
-  checksum: 9db06cef9dd116c86629a10e6ee72db6beff3295b95b4bbc4ec5b37db4c9320f68bb29139c4af5af805d549c5096f08c026578425ed9043f03c06399b8d895c2
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/css-supports@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/css-supports@npm:0.31.13"
@@ -4386,14 +3384,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/emitter@npm:^0.31.11, @rocket.chat/emitter@npm:~0.31.9":
-  version: 0.31.11
-  resolution: "@rocket.chat/emitter@npm:0.31.11"
-  checksum: 12b008c350c11276a66901efbd2015be1c135e7604f20c261504207f2a5de5b6a83d91a11191cdc896d14f6147711b189f229a82fadceeeed419cfea200550bb
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/emitter@npm:~0.31.12":
+"@rocket.chat/emitter@npm:^0.31.11, @rocket.chat/emitter@npm:~0.31.12, @rocket.chat/emitter@npm:~0.31.9":
   version: 0.31.13
   resolution: "@rocket.chat/emitter@npm:0.31.13"
   checksum: a6b00781b68eb4b584b184e67ad129a3599bb190f153f17d91547d1dacbe83d142c2e202ffbee664459cb9888497d4084d37a83cbd1d2f257c571967c0ee6afb
@@ -4490,20 +3481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-hooks@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/fuselage-hooks@npm:0.31.11"
-  dependencies:
-    "@testing-library/user-event": ^13.5.0
-  peerDependencies:
-    "@rocket.chat/fuselage-tokens": "*"
-    react: ^17.0.2
-    use-subscription: ^1.5.1
-  checksum: 923d0e30616609651ed4e7b3dbf2342de3788cee2a7e8ce3612b22291c2ecc3291e981f4d2111bf3465b3678f8f7d592c7a19c400fd9a60ada88c2a7b850fb93
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/fuselage-hooks@npm:^0.31.13, @rocket.chat/fuselage-hooks@npm:~0.31.12":
+"@rocket.chat/fuselage-hooks@npm:^0.31.11, @rocket.chat/fuselage-hooks@npm:^0.31.13, @rocket.chat/fuselage-hooks@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-hooks@npm:0.31.13"
   dependencies:
@@ -4558,20 +3536,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.12":
+"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.11, @rocket.chat/fuselage-tokens@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-tokens@npm:0.31.13"
   checksum: 848a800e6bd8c8fc46d473f18152168515e54ecf5b5a51ec4920d5478a28797e9d5bad652708b988305484cf646b3a167d0bff4bf0689bfbc7999f50f4bbf3ef
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:~0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.31.11"
-  checksum: 084ae967f460018002bdf6b0a790c03be520ee76eb7df280bd8efa15d53570f9958692d38edf9e3cc8361d196f2aed66b21ab521737b3008fae7b9d267e3eec7
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/fuselage-ui-kit@npm:~0.31.14-dev.1":
   version: 0.31.14-dev.1
   resolution: "@rocket.chat/fuselage-ui-kit@npm:0.31.14-dev.1"
@@ -4612,14 +3583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/icons@npm:^0.31.0, @rocket.chat/icons@npm:^0.31.9":
-  version: 0.31.9
-  resolution: "@rocket.chat/icons@npm:0.31.9"
-  checksum: 6238ed8a85115e7f8f64b94d1b293d44a93cd14f1b0ac4d696a6126367dcdbb99d4dd78d222f1873959cd2e4b39a6cddcd20701e9ffee0ace9f001fc5c66e1dd
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/icons@npm:^0.31.13, @rocket.chat/icons@npm:~0.31.12":
+"@rocket.chat/icons@npm:^0.31.0, @rocket.chat/icons@npm:^0.31.13, @rocket.chat/icons@npm:^0.31.9, @rocket.chat/icons@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/icons@npm:0.31.13"
   checksum: 17b9a6555a2bdfefdcbaabdbfcad766eb24f66ee5e02ac1e11b75918d8bf4256fdf42a082b1b56f4d748eb6171a7d54ff544e740e9e00702c79822710f9dc51f
@@ -4637,15 +3601,15 @@ __metadata:
     "@rocket.chat/logo": ^0.31.11
     "@rocket.chat/sdk": ^1.0.0-alpha.42
     "@rocket.chat/ui-kit": ^0.14.1
-    "@storybook/addon-actions": ^6.0.12
-    "@storybook/addon-backgrounds": ^6.0.12
-    "@storybook/addon-essentials": ^6.0.16
-    "@storybook/addon-knobs": ^6.0.12
-    "@storybook/addon-viewport": ^6.0.12
-    "@storybook/react": ^6.0.12
-    "@storybook/storybook-deployer": ^2.8.6
-    "@storybook/theming": ^6.0.12
-    "@types/react-dom": ^18
+    "@storybook/addon-actions": ^6.5.8
+    "@storybook/addon-backgrounds": ^6.5.8
+    "@storybook/addon-essentials": ^6.5.8
+    "@storybook/addon-knobs": ^6.4.0
+    "@storybook/addon-postcss": ^2.0.0
+    "@storybook/addon-viewport": ^6.5.8
+    "@storybook/react": ^6.5.8
+    "@storybook/theming": ^6.5.8
+    "@types/react-dom": ^17
     autoprefixer: ^9.8.6
     babel-eslint: ^10.1.0
     babel-loader: ^8.1.0
@@ -4671,7 +3635,6 @@ __metadata:
     i18next: ^21.3.3
     if-env: ^1.0.4
     image-webpack-loader: ^6.0.0
-    loki: ^0.24.0
     lorem-ipsum: ^2.0.3
     markdown-it: ^11.0.0
     mem: ^6.1.0
@@ -4688,7 +3651,7 @@ __metadata:
     preact: ^10.4.6
     preact-router: ^3.2.1
     query-string: ^6.13.1
-    react-dom: ^18.1.0
+    react-dom: ~17
     react-i18next: ^11.13.0
     rimraf: ^3.0.2
     sass: ^1.49.10
@@ -4708,21 +3671,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/logo@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/logo@npm:0.31.11"
-  dependencies:
-    "@rocket.chat/fuselage-hooks": ^0.31.11
-    "@rocket.chat/styled": ^0.31.11
-    tslib: ^2.3.1
-  peerDependencies:
-    react: 17.0.2
-    react-dom: 17.0.2
-  checksum: 526fb6a2eb857dd496cace047cffc60cb91f8dd1fd93acde1ebbc2321b059ab27d1010b5677581642be6950d40fcff5739cfa94d476b546b0b2930c4640a12f7
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/logo@npm:^0.31.13, @rocket.chat/logo@npm:~0.31.12":
+"@rocket.chat/logo@npm:^0.31.11, @rocket.chat/logo@npm:^0.31.13, @rocket.chat/logo@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/logo@npm:0.31.13"
   dependencies:
@@ -4736,13 +3685,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/memo@npm:0.31.11"
-  checksum: b486505242092adfad7bd5aeefe079556ea2f231ffdb5254ad7c2d24235c5881a3b6751985722cd74997c6663b13823f55ca3946eae83bfe990eabac009f8918
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/memo@npm:^0.31.13, @rocket.chat/memo@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/memo@npm:0.31.13"
@@ -4819,11 +3761,11 @@ __metadata:
     "@settlin/spacebars-loader": ^1.0.9
     "@slack/client": ^4.12.0
     "@slack/rtm-api": ^6.0.0
-    "@storybook/addon-essentials": ~6.4.22
-    "@storybook/addon-interactions": ~6.4.22
+    "@storybook/addon-essentials": ~6.5.8
+    "@storybook/addon-interactions": ~6.5.8
     "@storybook/addon-postcss": ^2.0.0
-    "@storybook/addons": ~6.4.22
-    "@storybook/react": ~6.4.22
+    "@storybook/addons": ~6.5.8
+    "@storybook/react": ~6.5.8
     "@storybook/testing-library": 0.0.11
     "@testing-library/react": ~12.1.5
     "@testing-library/user-event": ^13.5.0
@@ -4837,6 +3779,7 @@ __metadata:
     "@types/chai-dom": 0.0.12
     "@types/chai-spies": ^1.0.3
     "@types/clipboard": ^2.0.7
+    "@types/codemirror": ^5
     "@types/cookie": ^0.5.1
     "@types/cookie-parser": ^1.4.2
     "@types/dompurify": ^2.2.2
@@ -5021,6 +3964,7 @@ __metadata:
     prometheus-gc-stats: ^0.6.3
     proxy-from-env: ^1.1.0
     psl: ^1.8.0
+    query-string: ^7.1.1
     queue-fifo: ^0.2.6
     rc-scrollbars: ^1.1.3
     react: ~17.0.2
@@ -5134,7 +4078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/string-helpers@npm:~0.31.12":
+"@rocket.chat/string-helpers@npm:~0.31.12, @rocket.chat/string-helpers@npm:~0.31.9":
   version: 0.31.13
   resolution: "@rocket.chat/string-helpers@npm:0.31.13"
   dependencies:
@@ -5143,25 +4087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/string-helpers@npm:~0.31.9":
-  version: 0.31.9
-  resolution: "@rocket.chat/string-helpers@npm:0.31.9"
-  dependencies:
-    tslib: ^2.3.1
-  checksum: c402d9f864d28b0dfb0c9dacdd69068c8abc607cd0ccf7a2ec6fa54a784a6b699b29e1eeeb7476f282cadd8536703b27d154b3ec848a7970e5f13cd3676355f1
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/styled@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/styled@npm:0.31.11"
-  dependencies:
-    "@rocket.chat/css-in-js": ^0.31.11
-    tslib: ^2.3.1
-  checksum: 5a870b15c06eaf2657a7c2837d2519741907fb3574de6351a17334e3520c3ff3937064d0a2031feddfd1b6a014e665cde4a3eee7ac407757c7ee329ba39de529
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/styled@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/styled@npm:0.31.13"
@@ -5182,18 +4107,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/stylis-logical-props-middleware@npm:^0.31.11":
-  version: 0.31.11
-  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.11"
-  dependencies:
-    "@rocket.chat/css-supports": ^0.31.11
-    tslib: ^2.3.1
-  peerDependencies:
-    stylis: 4.0.10
-  checksum: a711eb247c5911b03d67a2f1b66e6673f43a22c334e9ef29c283cd64251254f0596805bf8c6c91b89b3e504ed3b1659d42b0b4ed6632887b71b54ce402d74126
-  languageName: node
-  linkType: hard
-
 "@rocket.chat/stylis-logical-props-middleware@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.13"
@@ -5253,14 +4166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/ui-kit@npm:^0.31.6, @rocket.chat/ui-kit@npm:~0.31.9":
-  version: 0.31.11
-  resolution: "@rocket.chat/ui-kit@npm:0.31.11"
-  checksum: 976ed0a00ec3b886667a1bc59429c9d4867e62cb04c4e762bd41320f602ae35560393b4d36b2460e0ea621f73fb71b4cc869fa17ad4c78da9c862df70b84d0e1
-  languageName: node
-  linkType: hard
-
-"@rocket.chat/ui-kit@npm:~0.31.12":
+"@rocket.chat/ui-kit@npm:^0.31.6, @rocket.chat/ui-kit@npm:~0.31.12, @rocket.chat/ui-kit@npm:~0.31.9":
   version: 0.31.13
   resolution: "@rocket.chat/ui-kit@npm:0.31.13"
   checksum: 94926dee4687e69b2a51a3570d09ba051b0638b3364499daed864e36480b56c538a20e3b66b02563492c7c2fe15b101ab03850d86bdac46f3fab442a9f93ef10
@@ -5432,51 +4338,52 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:6.4.22, @storybook/addon-actions@npm:^6.0.12":
-  version: 6.4.22
-  resolution: "@storybook/addon-actions@npm:6.4.22"
+"@storybook/addon-actions@npm:6.5.8, @storybook/addon-actions@npm:^6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-actions@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
     lodash: ^4.17.21
-    polished: ^4.0.5
+    polished: ^4.2.2
     prop-types: ^15.7.2
     react-inspector: ^5.1.0
     regenerator-runtime: ^0.13.7
-    telejson: ^5.3.2
+    telejson: ^6.0.8
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
     uuid-browser: ^3.1.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: ca0f9140fdf1b7a83ac7cf0b6199a53b441128b34c4299908aa8d239f9d98b89355812eb6c20a875ab2c6eae9936dad293eb1bb16b9932e54bcdb7e69cd2b08e
+  checksum: 985587c943403b25292a667e3111091de9dd615194979cac089032cb2e26ceae769c68a9964cba8ce45e421266946bca760c8404891e57142f3220ada182c083
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:6.4.22, @storybook/addon-backgrounds@npm:^6.0.12":
-  version: 6.4.22
-  resolution: "@storybook/addon-backgrounds@npm:6.4.22"
+"@storybook/addon-backgrounds@npm:6.5.8, @storybook/addon-backgrounds@npm:^6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-backgrounds@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
@@ -5484,116 +4391,125 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: e0c3328cf4e4887e9b6c9ed27d453d83011b44b8e50d7b769a36f358df2445bbd298a8beb7a8770cca4f604cbc1cbd4f08a428a31e137b94b335b454a5401d17
+  checksum: 9c27457955c107f42072788a90d154539a86e05f102628f4ed1116a447c9af38e5f333c67a45bcc54e07544217619e7f180373b84c295349c4759eac7fd5f9fc
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-controls@npm:6.4.22"
+"@storybook/addon-controls@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-controls@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.22
-    "@storybook/store": 6.4.22
-    "@storybook/theming": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/node-logger": 6.5.8
+    "@storybook/store": 6.5.8
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 6f73962c4d2addede41a2d1866ae0ff2c25ef2a4f07567cc528e98b78ad34f69a73d36cab58b9ca1258b556c4861bed9b6eaddae9f21fcf3e4b86b032e9841ca
+  checksum: 4be91f9de83fc0ece68c2d4b53b59dce7ff32df6e8201922501dfdff54aca1940b437813fcf17ae20974bf3aa250e1b2f8effffbb8c13a14d9061fd55b45e3c6
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-docs@npm:6.4.22"
+"@storybook/addon-docs@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-docs@npm:6.5.8"
   dependencies:
-    "@babel/core": ^7.12.10
-    "@babel/generator": ^7.12.11
-    "@babel/parser": ^7.12.11
     "@babel/plugin-transform-react-jsx": ^7.12.12
     "@babel/preset-env": ^7.12.11
     "@jest/transform": ^26.6.2
-    "@mdx-js/loader": ^1.6.22
-    "@mdx-js/mdx": ^1.6.22
     "@mdx-js/react": ^1.6.22
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/builder-webpack4": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.4.22
-    "@storybook/node-logger": 6.4.22
-    "@storybook/postinstall": 6.4.22
-    "@storybook/preview-web": 6.4.22
-    "@storybook/source-loader": 6.4.22
-    "@storybook/store": 6.4.22
-    "@storybook/theming": 6.4.22
-    acorn: ^7.4.1
-    acorn-jsx: ^5.3.1
-    acorn-walk: ^7.2.0
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/docs-tools": 6.5.8
+    "@storybook/mdx1-csf": ^0.0.1
+    "@storybook/node-logger": 6.5.8
+    "@storybook/postinstall": 6.5.8
+    "@storybook/preview-web": 6.5.8
+    "@storybook/source-loader": 6.5.8
+    "@storybook/store": 6.5.8
+    "@storybook/theming": 6.5.8
+    babel-loader: ^8.0.0
     core-js: ^3.8.2
-    doctrine: ^3.0.0
-    escodegen: ^2.0.0
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
-    html-tags: ^3.1.0
-    js-string-escape: ^1.0.1
-    loader-utils: ^2.0.0
     lodash: ^4.17.21
-    nanoid: ^3.1.23
-    p-limit: ^3.1.0
-    prettier: ">=2.2.1 <=2.3.0"
-    prop-types: ^15.7.2
-    react-element-to-jsx-string: ^14.3.4
     regenerator-runtime: ^0.13.7
     remark-external-links: ^8.0.0
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    "@storybook/angular": 6.4.22
-    "@storybook/html": 6.4.22
-    "@storybook/react": 6.4.22
-    "@storybook/vue": 6.4.22
-    "@storybook/vue3": 6.4.22
-    "@storybook/web-components": 6.4.22
-    lit: ^2.0.0
-    lit-html: ^1.4.1 || ^2.0.0
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-    svelte: ^3.31.2
-    sveltedoc-parser: ^4.1.0
-    vue: ^2.6.10 || ^3.0.0
-    webpack: "*"
+    "@storybook/mdx2-csf": ^0.0.3
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@storybook/mdx2-csf":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 4de04976f1aeab923b34d8a93cba5098c03233f26caa643ebd8011baf20518468a381433ddae28ed172de3657b0f7a605388890a6fe086ed51e17a4d58c4e5b7
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-essentials@npm:^6.5.8, @storybook/addon-essentials@npm:~6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-essentials@npm:6.5.8"
+  dependencies:
+    "@storybook/addon-actions": 6.5.8
+    "@storybook/addon-backgrounds": 6.5.8
+    "@storybook/addon-controls": 6.5.8
+    "@storybook/addon-docs": 6.5.8
+    "@storybook/addon-measure": 6.5.8
+    "@storybook/addon-outline": 6.5.8
+    "@storybook/addon-toolbars": 6.5.8
+    "@storybook/addon-viewport": 6.5.8
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/node-logger": 6.5.8
+    core-js: ^3.8.2
+    regenerator-runtime: ^0.13.7
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    "@babel/core": ^7.9.6
   peerDependenciesMeta:
     "@storybook/angular":
       optional: true
-    "@storybook/html":
+    "@storybook/builder-manager4":
       optional: true
-    "@storybook/react":
+    "@storybook/builder-manager5":
+      optional: true
+    "@storybook/builder-webpack4":
+      optional: true
+    "@storybook/builder-webpack5":
+      optional: true
+    "@storybook/html":
       optional: true
     "@storybook/vue":
       optional: true
@@ -5617,83 +4533,42 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: e1086af6b9ba3605c7246c472dc60f0842c8ff41636cfae31023c7986480f8d100807a253d93e7bc31eb9e2885c539453b44d2dd7b47782988e21f248d79f60c
+  checksum: 9a281356bae256fad477daecc4023a59f72d3382ec67abdaa80ecdc2acbe278658995ac69dacc018cb50362d74232f1dde84be9aa37367486eb0dbe8b95b4442
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^6.0.16, @storybook/addon-essentials@npm:~6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-essentials@npm:6.4.22"
+"@storybook/addon-interactions@npm:~6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-interactions@npm:6.5.8"
   dependencies:
-    "@storybook/addon-actions": 6.4.22
-    "@storybook/addon-backgrounds": 6.4.22
-    "@storybook/addon-controls": 6.4.22
-    "@storybook/addon-docs": 6.4.22
-    "@storybook/addon-measure": 6.4.22
-    "@storybook/addon-outline": 6.4.22
-    "@storybook/addon-toolbars": 6.4.22
-    "@storybook/addon-viewport": 6.4.22
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/node-logger": 6.4.22
+    "@devtools-ds/object-inspector": ^1.1.2
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/instrumenter": 6.5.8
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
-    regenerator-runtime: ^0.13.7
-    ts-dedent: ^2.0.0
-  peerDependencies:
-    "@babel/core": ^7.9.6
-    "@storybook/vue": 6.4.22
-    "@storybook/web-components": 6.4.22
-    babel-loader: ^8.0.0
-    lit-html: ^1.4.1 || ^2.0.0-rc.3
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-    webpack: "*"
-  peerDependenciesMeta:
-    "@storybook/vue":
-      optional: true
-    "@storybook/web-components":
-      optional: true
-    lit-html:
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-    webpack:
-      optional: true
-  checksum: 7f2889fe5888307524125a308055e1eb27bd92352c0899d3fd3e8c2e3a25c6f6091e15b8647e836f527a2009f49a7a7a4482c8454bdfeb3d7b8f44a818b5755c
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-interactions@npm:~6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-interactions@npm:6.4.22"
-  dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/instrumenter": 6.4.22
-    "@storybook/theming": 6.4.22
     global: ^4.4.0
     jest-mock: ^27.0.6
-    polished: ^4.0.5
+    polished: ^4.2.2
     ts-dedent: ^2.2.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 560fd9932f111efeb25c0c76d82e477e07c96530b51d47898a1572e002f1c0143ec0da1c1136ed46d7770b6f9df2b0305df80d0ab272f323cfecd67078c779b6
+  checksum: c7754c219f339e1bb18e2ee4ff0286674cbeb58d4ff89881c4ca74475a0722e9c49016c673871fca38fab9ce8f731cc3253b6259480913c6fff6eae880bc362b
   languageName: node
   linkType: hard
 
-"@storybook/addon-knobs@npm:^6.0.12":
+"@storybook/addon-knobs@npm:^6.4.0":
   version: 6.4.0
   resolution: "@storybook/addon-knobs@npm:6.4.0"
   dependencies:
@@ -5725,53 +4600,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-measure@npm:6.4.22"
+"@storybook/addon-measure@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-measure@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     global: ^4.4.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 17eea8b26383d7ed9aafa441a6fd933863056e1a2a991920ae0e101d267a842cef87d638d7b19be6e95da71ea62605329e6bb8656b40ed70bd577ca7a039b1ea
+  checksum: 77a4dafd49805312656c936d829c67049a92f97129f2a11dd0d2b033384e0bcc93729060edfa15c3e0c3b0157541a2e77430a436657eec3d07ff84dea912a61a
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-outline@npm:6.4.22"
+"@storybook/addon-outline@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-outline@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 34e8b32b1c9ce3896b365d5d6afb83ad018108260e221f3e64e386f82285de921ef4b025fc88a57c7e2b270ad39b77b40467762933cde36475b9c20bf6048b10
+  checksum: 90ef996bb8cbf47f05af7508cdadec23a720069a019a3e4a6173748da31dd1b4238d114c9a359f2fcbe2937b03543817765ec32f923a7a9d5acd38c9cc71a1fd
   languageName: node
   linkType: hard
 
@@ -5788,138 +4663,89 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addon-toolbars@npm:6.4.22"
+"@storybook/addon-toolbars@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-toolbars@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/theming": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: ca814cc8c7b00a6248ce1b505fbf9dea93f0c653e861929ae60d0d53b65e02320fa41e197737b69d9368d0d39dc0f50dac3f18522785e4782f6f9e65112739d1
+  checksum: 0ca1391956346bf89e3f35c3490e31e54e548e061a89283ae917a96bdda9bbcf6517430bf6a0f6dea824af7c5d293d69d10338f449873fc5618714f25f4ec374
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:6.4.22, @storybook/addon-viewport@npm:^6.0.12":
-  version: 6.4.22
-  resolution: "@storybook/addon-viewport@npm:6.4.22"
+"@storybook/addon-viewport@npm:6.5.8, @storybook/addon-viewport@npm:^6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addon-viewport@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/theming": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     global: ^4.4.0
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 8d54855c769edafbc666b10b5a3ea2939c1dfe2085e35c6681a278535c1b8f06581bc93f1f9025291a8996889c8bf0d2c6fe742d5cc7cc5799aba62e44182805
+  checksum: ba51d7cdb6abc207c19dcdaf4ff09b06662e65994808d48fdd3feb462e0c982cc0692aaefc2785133795e24554b1d3392bb1dd3891386dbbc59da912404e67f2
   languageName: node
   linkType: hard
 
-"@storybook/addons@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/addons@npm:6.4.20"
+"@storybook/addons@npm:6.5.8, @storybook/addons@npm:~6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/addons@npm:6.5.8"
   dependencies:
-    "@storybook/api": 6.4.20
-    "@storybook/channels": 6.4.20
-    "@storybook/client-logger": 6.4.20
-    "@storybook/core-events": 6.4.20
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.20
-    "@storybook/theming": 6.4.20
+    "@storybook/api": 6.5.8
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.8
+    "@storybook/theming": 6.5.8
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
     global: ^4.4.0
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: d6b28b585a494b6f706e4980578ae0650fcdd8f5e56324a61db74625b182ec9a6b373e60fbbea626aa978f5bbf636f4a30cb3b78cada922d89a6061f9bf500d7
-  languageName: node
-  linkType: hard
-
-"@storybook/addons@npm:6.4.22, @storybook/addons@npm:~6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/addons@npm:6.4.22"
-  dependencies:
-    "@storybook/api": 6.4.22
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.22
-    "@storybook/theming": 6.4.22
-    "@types/webpack-env": ^1.16.0
-    core-js: ^3.8.2
-    global: ^4.4.0
-    regenerator-runtime: ^0.13.7
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: c1372cb5e04ebc08b3f2df764630f370b9ccce0c7b47b5126c4964d53971e8a21efb1ef913a376cb6c289e6c492133e5273a36bd6ee4e39e1073acc12be51ee2
-  languageName: node
-  linkType: hard
-
-"@storybook/api@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/api@npm:6.4.20"
-  dependencies:
-    "@storybook/channels": 6.4.20
-    "@storybook/client-logger": 6.4.20
-    "@storybook/core-events": 6.4.20
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.20
-    "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.20
-    core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    lodash: ^4.17.21
-    memoizerific: ^1.11.3
-    regenerator-runtime: ^0.13.7
-    store2: ^2.12.0
-    telejson: ^5.3.2
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 8fe31d8af8c0d8c8ec2880f61a50a181b636a2d6d73c0b76877f4dedc9467f7cd041bffbb670c740b07242084a2de501e6dc1e241a8a420ed930fd543ef3ef7e
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: c3bd91f1f49eeb75c0b0ff549361f52ecee56f3fa2361206d00794d7e46dc1bf6fd8968c2615876cb9f0b26634e815b05936448814412da6429eb081460f91ee
   languageName: node
   linkType: hard
 
-"@storybook/api@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/api@npm:6.4.22"
+"@storybook/api@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/api@npm:6.5.8"
   dependencies:
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/router": 6.4.22
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.8
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.22
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -5927,63 +4753,41 @@ __metadata:
     memoizerific: ^1.11.3
     regenerator-runtime: ^0.13.7
     store2: ^2.12.0
-    telejson: ^5.3.2
+    telejson: ^6.0.8
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 3320bc73a892db6a2d0c0448c844084db14c898dd74b79de86df732e73fbe1c274fd8d109da5e8683e9b74c2d7a0f1a365ebc45bd0227a4e7e93db36402a391e
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 46fa1a2e96a8c7744e9b93939e7d8c4bbbdabe90b30caba1ca79a17e0c80e5e95cb846baf5d3a26fa0ed9b293bcabf244ea16a785c29fbf38784af41c7111464
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack4@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/builder-webpack4@npm:6.4.22"
+"@storybook/builder-webpack4@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/builder-webpack4@npm:6.5.8"
   dependencies:
     "@babel/core": ^7.12.10
-    "@babel/plugin-proposal-class-properties": ^7.12.1
-    "@babel/plugin-proposal-decorators": ^7.12.12
-    "@babel/plugin-proposal-export-default-from": ^7.12.1
-    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.12.1
-    "@babel/plugin-proposal-object-rest-spread": ^7.12.1
-    "@babel/plugin-proposal-optional-chaining": ^7.12.7
-    "@babel/plugin-proposal-private-methods": ^7.12.1
-    "@babel/plugin-syntax-dynamic-import": ^7.8.3
-    "@babel/plugin-transform-arrow-functions": ^7.12.1
-    "@babel/plugin-transform-block-scoping": ^7.12.12
-    "@babel/plugin-transform-classes": ^7.12.1
-    "@babel/plugin-transform-destructuring": ^7.12.1
-    "@babel/plugin-transform-for-of": ^7.12.1
-    "@babel/plugin-transform-parameters": ^7.12.1
-    "@babel/plugin-transform-shorthand-properties": ^7.12.1
-    "@babel/plugin-transform-spread": ^7.12.1
-    "@babel/plugin-transform-template-literals": ^7.12.1
-    "@babel/preset-env": ^7.12.11
-    "@babel/preset-react": ^7.12.10
-    "@babel/preset-typescript": ^7.12.7
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/channel-postmessage": 6.4.22
-    "@storybook/channels": 6.4.22
-    "@storybook/client-api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/node-logger": 6.4.22
-    "@storybook/preview-web": 6.4.22
-    "@storybook/router": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/channel-postmessage": 6.5.8
+    "@storybook/channels": 6.5.8
+    "@storybook/client-api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/node-logger": 6.5.8
+    "@storybook/preview-web": 6.5.8
+    "@storybook/router": 6.5.8
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.22
-    "@storybook/theming": 6.4.22
-    "@storybook/ui": 6.4.22
-    "@types/node": ^14.0.10
+    "@storybook/store": 6.5.8
+    "@storybook/theming": 6.5.8
+    "@storybook/ui": 6.5.8
+    "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     autoprefixer: ^9.8.6
     babel-loader: ^8.0.0
-    babel-plugin-macros: ^2.8.0
-    babel-plugin-polyfill-corejs3: ^0.1.0
     case-sensitive-paths-webpack-plugin: ^2.3.0
     core-js: ^3.8.2
     css-loader: ^3.6.0
@@ -6011,76 +4815,65 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: fe6d0f0100b507dc6421f8e593dc3852376a021a01b00ec0fdee4365af2ea7afbcd905fd559e04512a992d72f059f57c1e47c577074f79bf903fc7559a4f78c6
+  checksum: 66c817ba0eecd162eea63d25b99c5dd2332688a079ecc30c81ceb6beabe58c3d9b55c44491cd26f71fb86e0c3b2334ddd0027f4db6b28c2a4144398d3d4dfd04
   languageName: node
   linkType: hard
 
-"@storybook/channel-postmessage@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/channel-postmessage@npm:6.4.22"
+"@storybook/channel-postmessage@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/channel-postmessage@npm:6.5.8"
   dependencies:
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
     core-js: ^3.8.2
     global: ^4.4.0
     qs: ^6.10.0
-    telejson: ^5.3.2
-  checksum: 870258cbc84ef4021603f3ab9a1cc24c696ac81124b90bcd1b4b9217e0ad84e0e4729832f54bf3adaccd2fa3508ba02fc50954531c3f3489dfd2e4998545520c
+    telejson: ^6.0.8
+  checksum: fc677e080c55d939876ec5c73ca8067c84fe58f4e2a3edfe92507b38349441a0a7c0b42909a0a560f948e3f1671dba017f3ea31d2b03b2b34aad1698f3428e0b
   languageName: node
   linkType: hard
 
-"@storybook/channel-websocket@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/channel-websocket@npm:6.4.22"
+"@storybook/channel-websocket@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/channel-websocket@npm:6.5.8"
   dependencies:
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
     core-js: ^3.8.2
     global: ^4.4.0
-    telejson: ^5.3.2
-  checksum: c3be4a928924e490629b88c4cffa076ab7c46f67b784f2e794647317997d911c77b7eec785c32a367e6ef859a9b16eccabca830fe1d5769580a275eff881f275
-  languageName: node
-  linkType: hard
-
-"@storybook/channels@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/channels@npm:6.4.20"
-  dependencies:
-    core-js: ^3.8.2
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  checksum: 4cd8420ee2b21b93b44f81574d0f4fcaf28ea981417997fc962f7ca86d11ffbdddbfcd24896387589b036fea6134baf1c1c2ee6956bc4e898c8b994502a777d4
+    telejson: ^6.0.8
+  checksum: 4a4177d08493b869a1f82905273797805e1ed935571e54fa06ed33267ebbe912eb71e87386d0e6e58a927afbe8dda34e15c889ee10e259056960edcd2ed994fb
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/channels@npm:6.4.22"
+"@storybook/channels@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/channels@npm:6.5.8"
   dependencies:
     core-js: ^3.8.2
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
-  checksum: cffd2055906e995719b392ccf2928cd244fc0ec278988c290b5d3a8bc8a0d2b2ef679c03e1959fa19134c41bea4f7490ccc9f85ab4211a58c597170c65caa77e
+  checksum: 7f129c7eccebdc1d5c40436ed9602ac43b7cbb86cb81934177e87c4de7505a05ccf0b5eeb74397641afdd3fafdf2060ba3357ca01411dc942152da302827d9cd
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/client-api@npm:6.4.22"
+"@storybook/client-api@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/client-api@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/channel-postmessage": 6.4.22
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/channel-postmessage": 6.5.8
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/store": 6.5.8
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.0
     core-js: ^3.8.2
@@ -6095,81 +4888,56 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 606bde50ca49467863370062957f45ca83a39897c2c1997b87af08420deb2a60afba643c0eddebff74219cae1584c4a05e4a1ff69ca0e0bdff087a20939d87ce
-  languageName: node
-  linkType: hard
-
-"@storybook/client-logger@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/client-logger@npm:6.4.20"
-  dependencies:
-    core-js: ^3.8.2
-    global: ^4.4.0
-  checksum: 1b6f89ebce09ee6021de9f0acdf6c499570723f733d8081478ef449581337d12ef016ab66891f2b9a5e833f3847185cb430d586206f12f3df21c288a26a96c8b
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: d368c93c27f09ac287a615a0f6d8e18e1d68854b4b2f2dde3db8ec80cc14b72b08d44aba3bc280ac7024ede1f35ad46a64df6f622e1a8b943136b240542ebaf9
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:6.4.22, @storybook/client-logger@npm:^6.4.0 || >=6.5.0-0":
-  version: 6.4.22
-  resolution: "@storybook/client-logger@npm:6.4.22"
+"@storybook/client-logger@npm:6.5.8, @storybook/client-logger@npm:^6.4.0 || >=6.5.0-0":
+  version: 6.5.8
+  resolution: "@storybook/client-logger@npm:6.5.8"
   dependencies:
     core-js: ^3.8.2
     global: ^4.4.0
-  checksum: ed615b4f4e022830565b47fe850fa4dc7f75169b84710b5807e95cb75e45b58cba3f514154e039e3fe6ad96519faacaa096e3fd26af5b31322c29946e066c5b2
+  checksum: 6d85471e5f987708ffd35b420651715f433213889b473bf74e3190194d912ad941bb0c01824f968191e75ae12a696f13ecd93d10938f5d472aa912cb0a994d16
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/components@npm:6.4.22"
+"@storybook/components@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/components@npm:6.5.8"
   dependencies:
-    "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/theming": 6.4.22
-    "@types/color-convert": ^2.0.0
-    "@types/overlayscrollbars": ^1.12.0
+    "@storybook/client-logger": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/theming": 6.5.8
     "@types/react-syntax-highlighter": 11.0.5
-    color-convert: ^2.0.1
     core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    lodash: ^4.17.21
-    markdown-to-jsx: ^7.1.3
-    memoizerific: ^1.11.3
-    overlayscrollbars: ^1.13.1
-    polished: ^4.0.5
-    prop-types: ^15.7.2
-    react-colorful: ^5.1.2
-    react-popper-tooltip: ^3.1.1
-    react-syntax-highlighter: ^13.5.3
-    react-textarea-autosize: ^8.3.0
+    qs: ^6.10.0
+    react-syntax-highlighter: ^15.4.5
     regenerator-runtime: ^0.13.7
-    ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: c558f9148aec6fc8fea746883d183163991c5b0887556abd9a5ffc2561c11f470177e4e83b08b34f11e2a3c344b73b0800c2cf1b3d6b82d1b8dbe0ee9e0ca468
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 6109c2f4e43943dae63c9eb6ef7660493ec39371fc3f0e1d13bf91aeb13ec3aa6ddb747b51260405b1281effccbf80f9e3bd2b2d6739a021ad145292507c5574
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/core-client@npm:6.4.22"
+"@storybook/core-client@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/core-client@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/channel-postmessage": 6.4.22
-    "@storybook/channel-websocket": 6.4.22
-    "@storybook/client-api": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/preview-web": 6.4.22
-    "@storybook/store": 6.4.22
-    "@storybook/ui": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/channel-postmessage": 6.5.8
+    "@storybook/channel-websocket": 6.5.8
+    "@storybook/client-api": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/preview-web": 6.5.8
+    "@storybook/store": 6.5.8
+    "@storybook/ui": 6.5.8
     airbnb-js-shims: ^2.2.1
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
@@ -6181,19 +4949,19 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 6b93171f3b57aee995ad2a031194ceaf1ae55aa05e58ae0d0612758e8fff216de0f14c4a98e3fd294da9984f34e1db94556c025bf551b3bf191b217c71b10a5a
+  checksum: 51f83765581f5acd07f6284bf1e883a053d97ab6346ef1c9310fdefbc75b69c60ed709be1859fd120fb2b04c7c8c4d1ee017ede8f4c06e9a1bb8fa381afa9a3b
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/core-common@npm:6.4.22"
+"@storybook/core-common@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/core-common@npm:6.5.8"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-proposal-class-properties": ^7.12.1
@@ -6203,6 +4971,7 @@ __metadata:
     "@babel/plugin-proposal-object-rest-spread": ^7.12.1
     "@babel/plugin-proposal-optional-chaining": ^7.12.7
     "@babel/plugin-proposal-private-methods": ^7.12.1
+    "@babel/plugin-proposal-private-property-in-object": ^7.12.1
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-transform-arrow-functions": ^7.12.1
     "@babel/plugin-transform-block-scoping": ^7.12.12
@@ -6216,9 +4985,9 @@ __metadata:
     "@babel/preset-react": ^7.12.10
     "@babel/preset-typescript": ^7.12.7
     "@babel/register": ^7.12.1
-    "@storybook/node-logger": 6.4.22
+    "@storybook/node-logger": 6.5.8
     "@storybook/semver": ^7.3.2
-    "@types/node": ^14.0.10
+    "@types/node": ^14.0.10 || ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
     babel-loader: ^8.0.0
     babel-plugin-macros: ^3.0.1
@@ -6240,54 +5009,46 @@ __metadata:
     pretty-hrtime: ^1.0.3
     resolve-from: ^5.0.0
     slash: ^3.0.0
-    telejson: ^5.3.2
+    telejson: ^6.0.8
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
     webpack: 4
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: afcbeb5878a3e01ec8b6258a64bb74610345419f10db6e8a9d9c5149b83a6dc4db8c5e60dac5967e0d0fe2c45b6cefb1877975756689c2b6ad7721f117f4c634
+  checksum: a9dfe67d077a319976ad70b2dabd2e9e2a1de27d04e013e84f0952570f9d1fd0a8244ef4e7ea11626bac375d77c810aed56dd169532b8d14f1042aa9cc7ae7ea
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/core-events@npm:6.4.20"
+"@storybook/core-events@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/core-events@npm:6.5.8"
   dependencies:
     core-js: ^3.8.2
-  checksum: 5f8db3f4f940db309d67a23cdd41d7b326b4cbede70fa19f906a145b7b9863f5985ef01b5bf70ce71c8cd35457092974790d26629db8d8e78d6368fb237f349c
+  checksum: 70b6c24930e1c9b859b851f1989aaf00a40354cff42731311a128bc418720a43f1262fea02229f156e671aad01f1d48598d34f1e37ddb354df271122e3ec9115
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/core-events@npm:6.4.22"
-  dependencies:
-    core-js: ^3.8.2
-  checksum: d114e0ab9e6fbffb232f38cb964eaead5d3fa3752863cafd0be2afb249127b21f833a6f536655cabb41f1748e690e95fc749f5f2956989ea3d9b676f593a3b0b
-  languageName: node
-  linkType: hard
-
-"@storybook/core-server@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/core-server@npm:6.4.22"
+"@storybook/core-server@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/core-server@npm:6.5.8"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-webpack4": 6.4.22
-    "@storybook/core-client": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/csf-tools": 6.4.22
-    "@storybook/manager-webpack4": 6.4.22
-    "@storybook/node-logger": 6.4.22
+    "@storybook/builder-webpack4": 6.5.8
+    "@storybook/core-client": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/csf-tools": 6.5.8
+    "@storybook/manager-webpack4": 6.5.8
+    "@storybook/node-logger": 6.5.8
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.22
-    "@types/node": ^14.0.10
+    "@storybook/store": 6.5.8
+    "@storybook/telemetry": 6.5.8
+    "@types/node": ^14.0.10 || ^16.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
     "@types/webpack": ^4.41.26
@@ -6301,28 +5062,28 @@ __metadata:
     cpy: ^8.1.2
     detect-port: ^1.3.0
     express: ^4.17.1
-    file-system-cache: ^1.0.5
     fs-extra: ^9.0.1
+    global: ^4.4.0
     globby: ^11.0.2
-    ip: ^1.1.5
+    ip: ^2.0.0
     lodash: ^4.17.21
-    node-fetch: ^2.6.1
+    node-fetch: ^2.6.7
+    open: ^8.4.0
     pretty-hrtime: ^1.0.3
     prompts: ^2.4.0
     regenerator-runtime: ^0.13.7
     serve-favicon: ^2.5.0
     slash: ^3.0.0
-    telejson: ^5.3.3
+    telejson: ^6.0.8
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
     watchpack: ^2.2.0
     webpack: 4
     ws: ^8.2.3
+    x-default-browser: ^0.4.0
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.22
-    "@storybook/manager-webpack5": 6.4.22
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
       optional: true
@@ -6330,33 +5091,34 @@ __metadata:
       optional: true
     typescript:
       optional: true
-  checksum: 38183ededd79f644374b75807f533111e7430d7aa2d761b9bb0f3e603e5c881cd08a38cad5e6b77d9560e3534b64e7b35043a3d5701b2cc2319b3d29c8298b6c
+  checksum: c931bdfd578e1ccb06e861e1a6b73c1daa8ec1f5ade167467d48d50c192ca0069f69092ed611eda56cd03ac4b3686283ce12b3153667663ef08169330cce8113
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/core@npm:6.4.22"
+"@storybook/core@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/core@npm:6.5.8"
   dependencies:
-    "@storybook/core-client": 6.4.22
-    "@storybook/core-server": 6.4.22
+    "@storybook/core-client": 6.5.8
+    "@storybook/core-server": 6.5.8
   peerDependencies:
-    "@storybook/builder-webpack5": 6.4.22
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     webpack: "*"
   peerDependenciesMeta:
     "@storybook/builder-webpack5":
       optional: true
+    "@storybook/manager-webpack5":
+      optional: true
     typescript:
       optional: true
-  checksum: ae7728f9b3d160331eb3b08b83a17891c148b1af13e0c041eaf1f2f700c9e9846a095d9756977d3e13349d5bd1977762278169a083cc6b07198488ca60df6744
+  checksum: ee6a2cfe72a5b0ba84374313a20d12929f54ade6dd980144e4c480bc4b1ebc98f40771e35d30d676f6b8c98610be32e016eabd63bb5b66bf3748f4d4590965b2
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/csf-tools@npm:6.4.22"
+"@storybook/csf-tools@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/csf-tools@npm:6.5.8"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/generator": ^7.12.11
@@ -6365,67 +5127,73 @@ __metadata:
     "@babel/preset-env": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
-    "@mdx-js/mdx": ^1.6.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/mdx1-csf": ^0.0.1
     core-js: ^3.8.2
     fs-extra: ^9.0.1
     global: ^4.4.0
-    js-string-escape: ^1.0.1
-    lodash: ^4.17.21
-    prettier: ">=2.2.1 <=2.3.0"
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
-  checksum: 7f9e05d8579049fdfb3f1e726f8eb856499210169077da6f5e9b4e1cb4adf724c4a3a5dee299494ec57ccebbe2e8d286d48ed54d91f67157b0249c12632f0458
+  peerDependencies:
+    "@storybook/mdx2-csf": ^0.0.3
+  peerDependenciesMeta:
+    "@storybook/mdx2-csf":
+      optional: true
+  checksum: c285c8d7d95c19cc2168d8592ce259d8b594119e6005cf13d8709e3fbb56a141b1fcac5ecadb163dbd4ccab41037bca9e3149f6ec1a071ce4658df1ffdf55f40
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:0.0.2--canary.87bc651.0":
-  version: 0.0.2--canary.87bc651.0
-  resolution: "@storybook/csf@npm:0.0.2--canary.87bc651.0"
+"@storybook/csf@npm:0.0.2--canary.4566f4d.1":
+  version: 0.0.2--canary.4566f4d.1
+  resolution: "@storybook/csf@npm:0.0.2--canary.4566f4d.1"
   dependencies:
     lodash: ^4.17.15
-  checksum: 1533ff81f7fb59c06fc608f452de3cfcafba5806da68dd2c88813e8284a7aa1c158daee6a58b028b7ccd03d96974b5d3727deaae1d1d38e304b2a7cdcd8a678d
+  checksum: afac948e1eae72f020b3708538dd2553524f291bc129ecb2941983668fd62b17448e52f9c9be5b8edeea7a64d96f620bbac78b8acc10ece11b8279930a1deb03
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/instrumenter@npm:6.4.22"
+"@storybook/docs-tools@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/docs-tools@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    global: ^4.4.0
-  checksum: 27b613ea7d575c2af18bb4e40cffeadfa2dfa8988e0437053a7078e985cc5a906d690ab3cc56c57c8546db287ad8b2b52d84bccf479116ae445564564a475743
+    "@babel/core": ^7.12.10
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/store": 6.5.8
+    core-js: ^3.8.2
+    doctrine: ^3.0.0
+    lodash: ^4.17.21
+    regenerator-runtime: ^0.13.7
+  checksum: caab9e88668d21760039186954c23dc4cc0b013d4073a179f5916856d062027c29c3b0b49208979dbea99b469d2c0ef3a8196dd657f1c5405e133adfed7b3f4b
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:^6.4.0 || >=6.5.0-0":
-  version: 6.4.20
-  resolution: "@storybook/instrumenter@npm:6.4.20"
+"@storybook/instrumenter@npm:6.5.8, @storybook/instrumenter@npm:^6.4.0 || >=6.5.0-0":
+  version: 6.5.8
+  resolution: "@storybook/instrumenter@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.20
-    "@storybook/client-logger": 6.4.20
-    "@storybook/core-events": 6.4.20
+    "@storybook/addons": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    core-js: ^3.8.2
     global: ^4.4.0
-  checksum: 2ad0c74fd7a59cef334f0f10943ba63676e45bf9e178e177abd173d31f8f1cf321edad6a618d910ee92711c754c09b2a236d2e5f0c97b7f2c23f423d949e7fda
+  checksum: 9ff85bf8ff818f3e48a1bb60aee5fb3e46a1e64d6daaa56c68951316750589393d6eedaacd7f571ea50e70b6d3c7d6b66168a49295312e79bc970ff4765ffdd2
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack4@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/manager-webpack4@npm:6.4.22"
+"@storybook/manager-webpack4@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/manager-webpack4@npm:6.5.8"
   dependencies:
     "@babel/core": ^7.12.10
     "@babel/plugin-transform-template-literals": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@storybook/addons": 6.4.22
-    "@storybook/core-client": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/node-logger": 6.4.22
-    "@storybook/theming": 6.4.22
-    "@storybook/ui": 6.4.22
-    "@types/node": ^14.0.10
+    "@storybook/addons": 6.5.8
+    "@storybook/core-client": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/node-logger": 6.5.8
+    "@storybook/theming": 6.5.8
+    "@storybook/ui": 6.5.8
+    "@types/node": ^14.0.10 || ^16.0.0
     "@types/webpack": ^4.41.26
     babel-loader: ^8.0.0
     case-sensitive-paths-webpack-plugin: ^2.3.0
@@ -6434,17 +5202,16 @@ __metadata:
     css-loader: ^3.6.0
     express: ^4.17.1
     file-loader: ^6.2.0
-    file-system-cache: ^1.0.5
     find-up: ^5.0.0
     fs-extra: ^9.0.1
     html-webpack-plugin: ^4.0.0
-    node-fetch: ^2.6.1
+    node-fetch: ^2.6.7
     pnp-webpack-plugin: 1.6.4
     read-pkg-up: ^7.0.1
     regenerator-runtime: ^0.13.7
     resolve-from: ^5.0.0
     style-loader: ^1.3.0
-    telejson: ^5.3.2
+    telejson: ^6.0.8
     terser-webpack-plugin: ^4.2.3
     ts-dedent: ^2.0.0
     url-loader: ^4.1.1
@@ -6453,47 +5220,66 @@ __metadata:
     webpack-dev-middleware: ^3.7.3
     webpack-virtual-modules: ^0.2.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 8e203256420fe03534716f816fb23eb2a67f22ba7b6eedb0815ed91a40a67137b5da624e83b8e7c6419ee434506b01f61f3cf5a90e024d83a31d536265c9bc4e
+  checksum: e3336978c6fe365c8486bc9a3baa7c1f969fdb229c2d33bed0a48513931b3dd5c337c5ecc51cadee4cf129add4c9d97dc26ae09a12dab4eb029a4d5a44f3b83f
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:6.4.22, @storybook/node-logger@npm:^6.1.14":
-  version: 6.4.22
-  resolution: "@storybook/node-logger@npm:6.4.22"
+"@storybook/mdx1-csf@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@storybook/mdx1-csf@npm:0.0.1"
+  dependencies:
+    "@babel/generator": ^7.12.11
+    "@babel/parser": ^7.12.11
+    "@babel/preset-env": ^7.12.11
+    "@babel/types": ^7.12.11
+    "@mdx-js/mdx": ^1.6.22
+    "@types/lodash": ^4.14.167
+    js-string-escape: ^1.0.1
+    loader-utils: ^2.0.0
+    lodash: ^4.17.21
+    prettier: ">=2.2.1 <=2.3.0"
+    ts-dedent: ^2.0.0
+  checksum: 34f952f4d00d4fbf680aadea53ca0d9b02b10c94ea492a47a6df916474ea1e36d08eece70ffaba760a4cdf6f634a8684360dc49355cf8a1461050b8a470d2666
+  languageName: node
+  linkType: hard
+
+"@storybook/node-logger@npm:6.5.8, @storybook/node-logger@npm:^6.1.14":
+  version: 6.5.8
+  resolution: "@storybook/node-logger@npm:6.5.8"
   dependencies:
     "@types/npmlog": ^4.1.2
     chalk: ^4.1.0
     core-js: ^3.8.2
     npmlog: ^5.0.1
     pretty-hrtime: ^1.0.3
-  checksum: 9025f1c4d6bddaeddfd98471b3490b16747f9d8198292c58bd9311fd5d7e9fecc8ce7b20ea1bb52877eb2b21d6d1b9d4072ac4d5d21ef926e1c809b42f6f36ce
+  checksum: aa183f8681ba727b342ba40b8d5f69087e56fca046ec0f22d718cbdca305badb7a75079a889afb87244a118e8665b0fbeeae62a6c9eb6451938d03ff03bd405e
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/postinstall@npm:6.4.22"
+"@storybook/postinstall@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/postinstall@npm:6.5.8"
   dependencies:
     core-js: ^3.8.2
-  checksum: d406b2fdfc4350d52bcfe2f2447e90f66ae82bddaa659456e8d8211c335a3bf18968b2701ec7aafc0a3640d816c61f0081f143438b75be9bd4da2c515f534fc5
+  checksum: 52b0c02bed8c6c968485b48c879127536bf0aca63390c3a6c12a6de31726498e510781a847f08021d57e2acaca30f08ac7d510b4123e29623f4a96fda5458469
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/preview-web@npm:6.4.22"
+"@storybook/preview-web@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/preview-web@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/channel-postmessage": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/store": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/channel-postmessage": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/store": 6.5.8
     ansi-to-html: ^0.6.11
     core-js: ^3.8.2
     global: ^4.4.0
@@ -6505,116 +5291,106 @@ __metadata:
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 378a908621391b405855ab6bfd0d912073d314f1fe989ee5390cc904bd10f92f96ed37d606e847bcfe3c5c682188a1182cb218e5f0f86da2354e19b66fc188db
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: de0928f2a66f896e5dbf5f7b3e2b60b8e64c0830c2f73c8fb52727348d707c5133b2eb27d5d50fdd4df71c975873e07c5722067fb563e8ba8079fc2f7378415a
   languageName: node
   linkType: hard
 
-"@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0":
-  version: 1.0.2-canary.253f8c1.0
-  resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0"
+"@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0":
+  version: 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
+  resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0"
   dependencies:
     debug: ^4.1.1
     endent: ^2.0.1
     find-cache-dir: ^3.3.1
     flat-cache: ^3.0.4
     micromatch: ^4.0.2
-    react-docgen-typescript: ^2.0.0
+    react-docgen-typescript: ^2.1.1
     tslib: ^2.0.0
   peerDependencies:
     typescript: ">= 3.x"
     webpack: ">= 4"
-  checksum: 7d2d1309e9291fd9c9a776f17df8682036352548384bc213dcf7625ccae770c13db396ec3a07917810651eee91fe4577ee7c1fe913fac416df7d0ae3334ef673
+  checksum: 91a3015d384e93d9ffb4def904cad51218eb1a9eaf504c758083f2988a97d8bf8748bc280aa629864eb26fd9f7fc05bd087df95383d719e0c914c722016804b9
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^6.0.12, @storybook/react@npm:~6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/react@npm:6.4.22"
+"@storybook/react@npm:^6.5.8, @storybook/react@npm:~6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/react@npm:6.5.8"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
-    "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
-    "@storybook/addons": 6.4.22
-    "@storybook/core": 6.4.22
-    "@storybook/core-common": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
-    "@storybook/node-logger": 6.4.22
-    "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.253f8c1.0
+    "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
+    "@storybook/addons": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core": 6.5.8
+    "@storybook/core-common": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/docs-tools": 6.5.8
+    "@storybook/node-logger": 6.5.8
+    "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
-    "@storybook/store": 6.4.22
+    "@storybook/store": 6.5.8
+    "@types/estree": ^0.0.51
+    "@types/node": ^14.14.20 || ^16.0.0
     "@types/webpack-env": ^1.16.0
+    acorn: ^7.4.1
+    acorn-jsx: ^5.3.1
+    acorn-walk: ^7.2.0
     babel-plugin-add-react-displayname: ^0.0.5
-    babel-plugin-named-asset-import: ^0.3.1
     babel-plugin-react-docgen: ^4.2.1
     core-js: ^3.8.2
+    escodegen: ^2.0.0
+    fs-extra: ^9.0.1
     global: ^4.4.0
+    html-tags: ^3.1.0
     lodash: ^4.17.21
     prop-types: ^15.7.2
+    react-element-to-jsx-string: ^14.3.4
     react-refresh: ^0.11.0
     read-pkg-up: ^7.0.1
     regenerator-runtime: ^0.13.7
     ts-dedent: ^2.0.0
-    webpack: 4
+    util-deprecate: ^1.0.2
+    webpack: ">=4.43.0 <6.0.0"
   peerDependencies:
     "@babel/core": ^7.11.5
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    require-from-string: ^2.0.2
   peerDependenciesMeta:
     "@babel/core":
       optional: true
+    "@storybook/builder-webpack4":
+      optional: true
+    "@storybook/builder-webpack5":
+      optional: true
+    "@storybook/manager-webpack4":
+      optional: true
+    "@storybook/manager-webpack5":
+      optional: true
     typescript:
       optional: true
   bin:
     build-storybook: bin/build.js
     start-storybook: bin/index.js
     storybook-server: bin/index.js
-  checksum: ea49920d827e9651ca179e5f7321fe225bfba169cfe7353dc19c3c2e5d2a8cbff4b6e817847c9c7059a673b6a40b07c1fae28ccc2042181e1da96ce0b9880a8c
-  languageName: node
-  linkType: hard
-
-"@storybook/router@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/router@npm:6.4.20"
-  dependencies:
-    "@storybook/client-logger": 6.4.20
-    core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    history: 5.0.0
-    lodash: ^4.17.21
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    react-router: ^6.0.0
-    react-router-dom: ^6.0.0
-    ts-dedent: ^2.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 3aac1445f0795773b07e8ef6cec881a3018df5ceccfe7758654acf4a06229c3cfaa425b74cb9bc55df45c1b6f33f2f672b50a322346d97838fb9d7185c6b0efc
+  checksum: 66aebd4d1b4744daf368ffb13c390cf3857b664380638f929c273cc6f0c816c02729da6b8f983355af1b8b07dc4c18241bcbe85eddb1a9f17cbb5842ffaba373
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/router@npm:6.4.22"
+"@storybook/router@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/router@npm:6.5.8"
   dependencies:
-    "@storybook/client-logger": 6.4.22
+    "@storybook/client-logger": 6.5.8
     core-js: ^3.8.2
-    fast-deep-equal: ^3.1.3
-    global: ^4.4.0
-    history: 5.0.0
-    lodash: ^4.17.21
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    react-router: ^6.0.0
-    react-router-dom: ^6.0.0
-    ts-dedent: ^2.0.0
+    regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 107f7e6fa244325f053bbd32a36c891db513d2c6802908964a5fa2f03302256d33c3a85b95e999f36dc8097fb89503999881f56affc8c542874a1dc0468781c7
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: e23c16a03a9c3dbe674649c0fe2e03a5b11b0f563b23d712a03cd37b3a6df66a01471a993dfce1837816a0c2be1d41bdb57c7a1052378dccb65314282f11feeb
   languageName: node
   linkType: hard
 
@@ -6630,13 +5406,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/source-loader@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/source-loader@npm:6.4.22"
+"@storybook/source-loader@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/source-loader@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     estraverse: ^5.2.0
     global: ^4.4.0
@@ -6645,20 +5421,20 @@ __metadata:
     prettier: ">=2.2.1 <=2.3.0"
     regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 2b64533932f19e52f988c16648c9047784da0752365339737a6cffac5806b8573f2623540a7a6b1f1fb96dddb3ee9ab07421064bd6cafb6bd752f73b8eec9667
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 817d59ef2a9777d5912e6246268be8ad0e3fd43056fd498974577ca8a517aa47f2a3c0cfbf7862540f3b6e936086ec091a3e5e8d9c8fd2b871f260f50e78996f
   languageName: node
   linkType: hard
 
-"@storybook/store@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/store@npm:6.4.22"
+"@storybook/store@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/store@npm:6.5.8"
   dependencies:
-    "@storybook/addons": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/csf": 0.0.2--canary.87bc651.0
+    "@storybook/addons": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
     core-js: ^3.8.2
     fast-deep-equal: ^3.1.3
     global: ^4.4.0
@@ -6671,25 +5447,29 @@ __metadata:
     ts-dedent: ^2.0.0
     util-deprecate: ^1.0.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: b2bd7be4aa3b71f17d371b0acb9cc5e39cd76c485b8f6c830f313ffb899a93496a352f17755d42c315108b6ab6b2ff576e7536c167fbe47a93ba65c55bf33874
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5b529cefed504c5b776d14bb0ad1bf883afc1d039421c1dbdcf3a7c007253136f41ec6afd5e85110bbac70d6a77b1463c7aaaedec0c156b13b37cd9261849e17
   languageName: node
   linkType: hard
 
-"@storybook/storybook-deployer@npm:^2.8.6":
-  version: 2.8.11
-  resolution: "@storybook/storybook-deployer@npm:2.8.11"
+"@storybook/telemetry@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/telemetry@npm:6.5.8"
   dependencies:
-    git-url-parse: ^11.1.2
-    glob: ^7.1.3
-    parse-repo: ^1.0.4
-    shelljs: ^0.8.1
-    yargs: ^15.0.0
-  bin:
-    storybook-to-aws-s3: bin/storybook_to_aws_s3
-    storybook-to-ghpages: bin/storybook_to_ghpages
-  checksum: 528fd76bd22448bcab44249014d81e9e8e5c6eb523558345b9e9406f69cf0c713ad37734e9a15932a8dd30ac1e9b3076909eb532b4942e5db6890eee9fdda551
+    "@storybook/client-logger": 6.5.8
+    "@storybook/core-common": 6.5.8
+    chalk: ^4.1.0
+    core-js: ^3.8.2
+    detect-package-manager: ^2.0.1
+    fetch-retry: ^5.0.2
+    fs-extra: ^9.0.1
+    global: ^4.4.0
+    isomorphic-unfetch: ^3.1.0
+    nanoid: ^3.3.1
+    read-pkg-up: ^7.0.1
+    regenerator-runtime: ^0.13.7
+  checksum: 8d0d204c41569679b56930aaa4441d864a98156d2ad37b5932df1d766bc4d742ac640081c1ce3ab5cb0820464303725f5f89415c7933721074e4af83534bc972
   languageName: node
   linkType: hard
 
@@ -6697,97 +5477,49 @@ __metadata:
   version: 0.0.11
   resolution: "@storybook/testing-library@npm:0.0.11"
   dependencies:
-    "@storybook/client-logger": ^6.4.0 || >=6.5.0-0
-    "@storybook/instrumenter": ^6.4.0 || >=6.5.0-0
-    "@testing-library/dom": ^8.3.0
-    "@testing-library/user-event": ^13.2.1
-    ts-dedent: ^2.2.0
-  checksum: 9d5204e1330cde81811ecacd6fade3246892db45b469a4ac31d906b0d1f330f2a039fa281801f3eb83cf01e67ea429e21d86a92a68ffd2bd0c228d1436affbaa
-  languageName: node
-  linkType: hard
-
-"@storybook/theming@npm:6.4.20":
-  version: 6.4.20
-  resolution: "@storybook/theming@npm:6.4.20"
-  dependencies:
-    "@emotion/core": ^10.1.1
-    "@emotion/is-prop-valid": ^0.8.6
-    "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.4.20
-    core-js: ^3.8.2
-    deep-object-diff: ^1.1.0
-    emotion-theming: ^10.0.27
-    global: ^4.4.0
-    memoizerific: ^1.11.3
-    polished: ^4.0.5
-    resolve-from: ^5.0.0
-    ts-dedent: ^2.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 38c73bac73e6c9d42673d60cf52aa835c051a7508de316b1f4d051d66fc3d4063342ae7d3b8bb65044b3ec632c8c564994915d6add7e3c9decd219c671b66b6a
+    "@storybook/client-logger": ^6.4.0 || >=6.5.0-0
+    "@storybook/instrumenter": ^6.4.0 || >=6.5.0-0
+    "@testing-library/dom": ^8.3.0
+    "@testing-library/user-event": ^13.2.1
+    ts-dedent: ^2.2.0
+  checksum: 9d5204e1330cde81811ecacd6fade3246892db45b469a4ac31d906b0d1f330f2a039fa281801f3eb83cf01e67ea429e21d86a92a68ffd2bd0c228d1436affbaa
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:6.4.22, @storybook/theming@npm:^6.0.12":
-  version: 6.4.22
-  resolution: "@storybook/theming@npm:6.4.22"
+"@storybook/theming@npm:6.5.8, @storybook/theming@npm:^6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/theming@npm:6.5.8"
   dependencies:
-    "@emotion/core": ^10.1.1
-    "@emotion/is-prop-valid": ^0.8.6
-    "@emotion/styled": ^10.0.27
-    "@storybook/client-logger": 6.4.22
+    "@storybook/client-logger": 6.5.8
     core-js: ^3.8.2
-    deep-object-diff: ^1.1.0
-    emotion-theming: ^10.0.27
-    global: ^4.4.0
-    memoizerific: ^1.11.3
-    polished: ^4.0.5
-    resolve-from: ^5.0.0
-    ts-dedent: ^2.0.0
+    regenerator-runtime: ^0.13.7
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: bb95f7fa400f09eb01ac55ebb2ab65b03300033971fe921ab019dc01b9ccd110ed714da8788c0286a6b59ed1b31e6f65296b3319c332835d302cacf0259a0b44
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 6003dd1c3ac9f226c73d10b9991c4714a6580f8c04d6bb4fdd98e4b710609fda3a9e2ad402535078bd08f47738a94fa2bc84c41e357518a775e438a4bdd8bde1
   languageName: node
   linkType: hard
 
-"@storybook/ui@npm:6.4.22":
-  version: 6.4.22
-  resolution: "@storybook/ui@npm:6.4.22"
+"@storybook/ui@npm:6.5.8":
+  version: 6.5.8
+  resolution: "@storybook/ui@npm:6.5.8"
   dependencies:
-    "@emotion/core": ^10.1.1
-    "@storybook/addons": 6.4.22
-    "@storybook/api": 6.4.22
-    "@storybook/channels": 6.4.22
-    "@storybook/client-logger": 6.4.22
-    "@storybook/components": 6.4.22
-    "@storybook/core-events": 6.4.22
-    "@storybook/router": 6.4.22
+    "@storybook/addons": 6.5.8
+    "@storybook/api": 6.5.8
+    "@storybook/channels": 6.5.8
+    "@storybook/client-logger": 6.5.8
+    "@storybook/components": 6.5.8
+    "@storybook/core-events": 6.5.8
+    "@storybook/router": 6.5.8
     "@storybook/semver": ^7.3.2
-    "@storybook/theming": 6.4.22
-    copy-to-clipboard: ^3.3.1
+    "@storybook/theming": 6.5.8
     core-js: ^3.8.2
-    core-js-pure: ^3.8.2
-    downshift: ^6.0.15
-    emotion-theming: ^10.0.27
-    fuse.js: ^3.6.1
-    global: ^4.4.0
-    lodash: ^4.17.21
-    markdown-to-jsx: ^7.1.3
-    memoizerific: ^1.11.3
-    polished: ^4.0.5
-    qs: ^6.10.0
-    react-draggable: ^4.4.3
-    react-helmet-async: ^1.0.7
-    react-sizeme: ^3.0.1
     regenerator-runtime: ^0.13.7
     resolve-from: ^5.0.0
-    store2: ^2.12.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: acc403f6f98b61f202b4cf3fd054696089d27c025d7630c413ab564f3a477239398258a3be075b23df504a064f4f31310ce6d19cdb3fdb859e53b701f2090a65
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 455611abd5b32883cd777fa6ce8679aaab262db294214ca92d3bcba4880239c58453a94402ba9768fdb3fbb1211f56aedd2fcf185512c4ad2f2c408f58af7416
   languageName: node
   linkType: hard
 
@@ -7051,19 +5783,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/color-convert@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@types/color-convert@npm:2.0.0"
+"@types/codemirror@npm:^5":
+  version: 5.60.5
+  resolution: "@types/codemirror@npm:5.60.5"
   dependencies:
-    "@types/color-name": "*"
-  checksum: 027b68665dc2278cc2d83e796ada0a05a08aa5a11297e227c48c7f9f6eac518dec98578ab0072bd211963d3e4b431da70b20ea28d6c3136d0badfd3f9913baee
-  languageName: node
-  linkType: hard
-
-"@types/color-name@npm:*":
-  version: 1.1.1
-  resolution: "@types/color-name@npm:1.1.1"
-  checksum: b71fcad728cc68abcba1d405742134410c8f8eb3c2ef18113b047afca158ad23a4f2c229bcf71a38f4a818dead375c45b20db121d0e69259c2d81e97a740daa6
+    "@types/tern": "*"
+  checksum: 423b6378b6415b626d9f54d37d69477f96940b30a695d4ec36402feb59a96f7ab42d1c17b8472fbb222a0966f6061deee234e37bcd3e34c75836e989dc95929d
   languageName: node
   linkType: hard
 
@@ -7108,20 +5833,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ejson@npm:^2.1.3":
-  version: 2.1.3
-  resolution: "@types/ejson@npm:2.1.3"
-  checksum: 8bccd9a7d01848f4b14090e17af69ac1c46163a195a01668db063b7505a21babda763738b0eae57e694cea73e0d1fcbc4f4eec568075fa2d38d5799db4cf4023
-  languageName: node
-  linkType: hard
-
-"@types/ejson@npm:^2.2.0":
+"@types/ejson@npm:^2.1.3, @types/ejson@npm:^2.2.0":
   version: 2.2.0
   resolution: "@types/ejson@npm:2.2.0"
   checksum: 0cbc610c58a60847822353782d133f7a3cf362223d58f6a2b6ce0ae6e1f22885dc8f2a6ca7676df2556ed631e74c5a4880575704b964fdef89d216dc69ac0ad6
   languageName: node
   linkType: hard
 
+"@types/eslint-scope@npm:^3.7.3":
+  version: 3.7.3
+  resolution: "@types/eslint-scope@npm:3.7.3"
+  dependencies:
+    "@types/eslint": "*"
+    "@types/estree": "*"
+  checksum: 6772b05e1b92003d1f295e81bc847a61f4fbe8ddab77ffa49e84ed3f9552513bdde677eb53ef167753901282857dd1d604d9f82eddb34a233495932b2dc3dc17
+  languageName: node
+  linkType: hard
+
 "@types/eslint-visitor-keys@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/eslint-visitor-keys@npm:1.0.0"
@@ -7129,6 +5857,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/eslint@npm:*":
+  version: 8.4.3
+  resolution: "@types/eslint@npm:8.4.3"
+  dependencies:
+    "@types/estree": "*"
+    "@types/json-schema": "*"
+  checksum: cc199be84e22754cc625b171c90852da2b563088d32f4161d310b70470eab47f9bc812774c61eab6530083a214fe634abc32d06ef38e0a5e29f68436331cfabb
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:*, @types/estree@npm:^0.0.51":
+  version: 0.0.51
+  resolution: "@types/estree@npm:0.0.51"
+  checksum: e56a3bcf759fd9185e992e7fdb3c6a5f81e8ff120e871641607581fb3728d16c811702a7d40fa5f869b7f7b4437ab6a87eb8d98ffafeee51e85bbe955932a189
+  languageName: node
+  linkType: hard
+
 "@types/events@npm:*":
   version: 3.0.0
   resolution: "@types/events@npm:3.0.0"
@@ -7313,7 +6058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.3, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.3, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
   checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
@@ -7384,14 +6129,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:*":
-  version: 4.14.181
-  resolution: "@types/lodash@npm:4.14.181"
-  checksum: 0d1863d8383fd2f8bb42e9e3fc1d6255bb88ff034d6df848941063698944313dae944fc1270315613e3d303fae7c7a9a86085ad3235ed6204c56c4b0b3699aa9
-  languageName: node
-  linkType: hard
-
-"@types/lodash@npm:^4.14.182":
+"@types/lodash@npm:*, @types/lodash@npm:^4.14.167, @types/lodash@npm:^4.14.182":
   version: 4.14.182
   resolution: "@types/lodash@npm:4.14.182"
   checksum: 7dd137aa9dbabd632408bd37009d984655164fa1ecc3f2b6eb94afe35bf0a5852cbab6183148d883e9c73a958b7fec9a9bcf7c8e45d41195add6a18c34958209
@@ -7543,28 +6281,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>=6.0.0":
-  version: 17.0.23
-  resolution: "@types/node@npm:17.0.23"
-  checksum: a3517554737cbb042e76c30d0e5482192ac4d9bea0eeb086e2622d9cabf460a0eb52a696b99fcd18e7fcc93c96db6cc7ae507f6608f256ef0b5c1d8c87a5a470
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:>=12.0.0, @types/node@npm:>=8.9.0":
+"@types/node@npm:*, @types/node@npm:>=12.0.0, @types/node@npm:>=6.0.0, @types/node@npm:>=8.9.0":
   version: 17.0.40
   resolution: "@types/node@npm:17.0.40"
   checksum: e3b2fe876672fbe4be84ce17773944eb2f5eaba50e2c6c0536bdf6d4972ed6488581580581f154183fdc8f2d56fa42a42e3d6e83b9b71ee25adea16a84765e92
   languageName: node
   linkType: hard
 
-"@types/node@npm:^14.0.10, @types/node@npm:^14.0.26, @types/node@npm:^14.14.37, @types/node@npm:^14.18.12":
-  version: 14.18.12
-  resolution: "@types/node@npm:14.18.12"
-  checksum: 8a0273caa0584020adb8802784fc7d4f18f05e6c205335b7f3818a91d6b0c22736b9f51da3428d5bc54076ad47f1a4d6d57990a3ce8489a520ac66b2b3ff24bc
+"@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0":
+  version: 16.11.39
+  resolution: "@types/node@npm:16.11.39"
+  checksum: bc97b9773ac6b3194800f990b349fad7f66c6126dacef59291b10a2c8b6813d6f67f947b7e12a6c9952790f7065d576fe38355b8fe034a6af60f317cfc570f69
   languageName: node
   linkType: hard
 
-"@types/node@npm:^14.18.15":
+"@types/node@npm:^14.0.26, @types/node@npm:^14.14.37, @types/node@npm:^14.18.12, @types/node@npm:^14.18.15":
   version: 14.18.20
   resolution: "@types/node@npm:14.18.20"
   checksum: 999d8ef25c983c9ca7c3365d6878a7f9387a90e10fdec9b6fc26764ae0b52768b8ca4f7e3fcab6056326dcc613b730f2a58b59acacdc5d5863fa4b7a09c1f85f
@@ -7601,13 +6332,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/overlayscrollbars@npm:^1.12.0":
-  version: 1.12.1
-  resolution: "@types/overlayscrollbars@npm:1.12.1"
-  checksum: 4d539db07ad5a268d6eb8f3af84f64126dd2e99831895f0a7a82839dae6d7405dbb7dacecc0ecd6f6aef403f6c5ae946f9d65dd1fa8fa44f0cb9926f01032f3c
-  languageName: node
-  linkType: hard
-
 "@types/p-cancelable@npm:^1.0.0":
   version: 1.0.1
   resolution: "@types/p-cancelable@npm:1.0.1"
@@ -7735,7 +6459,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:<18.0.0":
+"@types/react-dom@npm:<18.0.0, @types/react-dom@npm:^17, @types/react-dom@npm:~17.0.14":
   version: 17.0.17
   resolution: "@types/react-dom@npm:17.0.17"
   dependencies:
@@ -7744,24 +6468,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18":
-  version: 18.0.2
-  resolution: "@types/react-dom@npm:18.0.2"
-  dependencies:
-    "@types/react": "*"
-  checksum: 2b0b138d8634ccfd8a86b17cb5414b122ee0cb6f650377d772f6008761a27e4c2531c08e3cab71aaa19b6893af6a508c664aa314db3ebcff5b8179173c9c9307
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:~17.0.14":
-  version: 17.0.14
-  resolution: "@types/react-dom@npm:17.0.14"
-  dependencies:
-    "@types/react": "*"
-  checksum: b54cd0ef573236b3d87fe7493e6d1c36d8b4ca37a3b46364272a5c91ac178e3296b68ea1aeb299ce68f12ad663c5720ee890d0539b14881c6754bdcbdb0befa0
-  languageName: node
-  linkType: hard
-
 "@types/react-syntax-highlighter@npm:11.0.5":
   version: 11.0.5
   resolution: "@types/react-syntax-highlighter@npm:11.0.5"
@@ -7771,18 +6477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:~17.0.42":
-  version: 17.0.43
-  resolution: "@types/react@npm:17.0.43"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 981b0993f5b3ea9d3488b8cc883201e8ae47ba7732929f788f450a79fd72829e658080d5084e67caa008e58d989b0abc1d5f36ff0a1cda09315ea3a3c0c9dc11
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^17":
+"@types/react@npm:*, @types/react@npm:^17, @types/react@npm:~17.0.42":
   version: 17.0.44
   resolution: "@types/react@npm:17.0.44"
   dependencies:
@@ -7953,6 +6648,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tern@npm:*":
+  version: 0.23.4
+  resolution: "@types/tern@npm:0.23.4"
+  dependencies:
+    "@types/estree": "*"
+  checksum: d8fd304f147ed08f1d075f09cb8d440b7f785f69c9ec5c30eadf98132fe3f58f3b1bbbd11283858bb261afac5a2039c1c255f290b0f6e4a47cd6a746f30a6aa8
+  languageName: node
+  linkType: hard
+
 "@types/tmp@npm:^0.2.2":
   version: 0.2.3
   resolution: "@types/tmp@npm:0.2.3"
@@ -8146,13 +6850,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yoga-layout@npm:1.9.2":
-  version: 1.9.2
-  resolution: "@types/yoga-layout@npm:1.9.2"
-  checksum: dbc3d6ab997d50fe1fcca5dd6822982c8fe586145ab648e0e97c3bc4ebc93d0b40c9edd75febaba374d61f60c1379b639f6be652965c776a901bf1068f2eac87
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:^2.34.0":
   version: 2.34.0
   resolution: "@typescript-eslint/eslint-plugin@npm:2.34.0"
@@ -8357,6 +7054,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/ast@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/ast@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/helper-numbers": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+  checksum: 1eee1534adebeece635362f8e834ae03e389281972611408d64be7895fc49f48f98fddbbb5339bf8a72cb101bcb066e8bca3ca1bf1ef47dadf89def0395a8d87
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/ast@npm:1.9.0"
@@ -8368,6 +7075,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/floating-point-hex-parser@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/floating-point-hex-parser@npm:1.11.1"
+  checksum: b8efc6fa08e4787b7f8e682182d84dfdf8da9d9c77cae5d293818bc4a55c1f419a87fa265ab85252b3e6c1fd323d799efea68d825d341a7c365c64bc14750e97
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/floating-point-hex-parser@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/floating-point-hex-parser@npm:1.9.0"
@@ -8375,6 +7089,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/helper-api-error@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-api-error@npm:1.11.1"
+  checksum: 0792813f0ed4a0e5ee0750e8b5d0c631f08e927f4bdfdd9fe9105dc410c786850b8c61bff7f9f515fdfb149903bec3c976a1310573a4c6866a94d49bc7271959
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/helper-api-error@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/helper-api-error@npm:1.9.0"
@@ -8382,6 +7103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/helper-buffer@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-buffer@npm:1.11.1"
+  checksum: a337ee44b45590c3a30db5a8b7b68a717526cf967ada9f10253995294dbd70a58b2da2165222e0b9830cd4fc6e4c833bf441a721128d1fe2e9a7ab26b36003ce
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/helper-buffer@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/helper-buffer@npm:1.9.0"
@@ -8414,6 +7142,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/helper-numbers@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-numbers@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser": 1.11.1
+    "@webassemblyjs/helper-api-error": 1.11.1
+    "@xtuc/long": 4.2.2
+  checksum: 44d2905dac2f14d1e9b5765cf1063a0fa3d57295c6d8930f6c59a36462afecc6e763e8a110b97b342a0f13376166c5d41aa928e6ced92e2f06b071fd0db59d3a
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-wasm-bytecode@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-wasm-bytecode@npm:1.11.1"
+  checksum: eac400113127832c88f5826bcc3ad1c0db9b3dbd4c51a723cfdb16af6bfcbceb608170fdaac0ab7731a7e18b291be7af68a47fcdb41cfe0260c10857e7413d97
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/helper-wasm-bytecode@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/helper-wasm-bytecode@npm:1.9.0"
@@ -8421,6 +7167,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/helper-wasm-section@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-wasm-section@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+  checksum: 617696cfe8ecaf0532763162aaf748eb69096fb27950219bb87686c6b2e66e11cd0614d95d319d0ab1904bc14ebe4e29068b12c3e7c5e020281379741fe4bedf
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/helper-wasm-section@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/helper-wasm-section@npm:1.9.0"
@@ -8433,6 +7191,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/ieee754@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/ieee754@npm:1.11.1"
+  dependencies:
+    "@xtuc/ieee754": ^1.2.0
+  checksum: 23a0ac02a50f244471631802798a816524df17e56b1ef929f0c73e3cde70eaf105a24130105c60aff9d64a24ce3b640dad443d6f86e5967f922943a7115022ec
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ieee754@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/ieee754@npm:1.9.0"
@@ -8442,6 +7209,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/leb128@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/leb128@npm:1.11.1"
+  dependencies:
+    "@xtuc/long": 4.2.2
+  checksum: 33ccc4ade2f24de07bf31690844d0b1ad224304ee2062b0e464a610b0209c79e0b3009ac190efe0e6bd568b0d1578d7c3047fc1f9d0197c92fc061f56224ff4a
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/leb128@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/leb128@npm:1.9.0"
@@ -8451,6 +7227,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/utf8@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/utf8@npm:1.11.1"
+  checksum: 972c5cfc769d7af79313a6bfb96517253a270a4bf0c33ba486aa43cac43917184fb35e51dfc9e6b5601548cd5931479a42e42c89a13bb591ffabebf30c8a6a0b
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/utf8@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/utf8@npm:1.9.0"
@@ -8458,6 +7241,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/wasm-edit@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-edit@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/helper-wasm-section": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+    "@webassemblyjs/wasm-opt": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    "@webassemblyjs/wast-printer": 1.11.1
+  checksum: 6d7d9efaec1227e7ef7585a5d7ff0be5f329f7c1c6b6c0e906b18ed2e9a28792a5635e450aca2d136770d0207225f204eff70a4b8fd879d3ac79e1dcc26dbeb9
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/wasm-edit@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/wasm-edit@npm:1.9.0"
@@ -8474,6 +7273,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/wasm-gen@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-gen@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/ieee754": 1.11.1
+    "@webassemblyjs/leb128": 1.11.1
+    "@webassemblyjs/utf8": 1.11.1
+  checksum: 1f6921e640293bf99fb16b21e09acb59b340a79f986c8f979853a0ae9f0b58557534b81e02ea2b4ef11e929d946708533fd0693c7f3712924128fdafd6465f5b
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/wasm-gen@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/wasm-gen@npm:1.9.0"
@@ -8487,6 +7299,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/wasm-opt@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-opt@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+  checksum: 21586883a20009e2b20feb67bdc451bbc6942252e038aae4c3a08e6f67b6bae0f5f88f20bfc7bd0452db5000bacaf5ab42b98cf9aa034a6c70e9fc616142e1db
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/wasm-opt@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/wasm-opt@npm:1.9.0"
@@ -8499,6 +7323,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/wasm-parser@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-parser@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-api-error": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/ieee754": 1.11.1
+    "@webassemblyjs/leb128": 1.11.1
+    "@webassemblyjs/utf8": 1.11.1
+  checksum: 1521644065c360e7b27fad9f4bb2df1802d134dd62937fa1f601a1975cde56bc31a57b6e26408b9ee0228626ff3ba1131ae6f74ffb7d718415b6528c5a6dbfc2
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/wasm-parser@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/wasm-parser@npm:1.9.0"
@@ -8527,6 +7365,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webassemblyjs/wast-printer@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wast-printer@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@xtuc/long": 4.2.2
+  checksum: f15ae4c2441b979a3b4fce78f3d83472fb22350c6dc3fd34bfe7c3da108e0b2360718734d961bba20e7716cb8578e964b870da55b035e209e50ec9db0378a3f7
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/wast-printer@npm:1.9.0":
   version: 1.9.0
   resolution: "@webassemblyjs/wast-printer@npm:1.9.0"
@@ -8616,6 +7464,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn-import-assertions@npm:^1.7.6":
+  version: 1.8.0
+  resolution: "acorn-import-assertions@npm:1.8.0"
+  peerDependencies:
+    acorn: ^8
+  checksum: 5c4cf7c850102ba7ae0eeae0deb40fb3158c8ca5ff15c0bca43b5c47e307a1de3d8ef761788f881343680ea374631ae9e9615ba8876fee5268dbe068c98bcba6
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^5.2.0, acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -8657,16 +7514,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.0":
-  version: 8.7.0
-  resolution: "acorn@npm:8.7.0"
-  bin:
-    acorn: bin/acorn
-  checksum: e0f79409d68923fbf1aa6d4166f3eedc47955320d25c89a20cc822e6ba7c48c5963d5bc657bc242d68f7a4ac9faf96eef033e8f73656da6c640d4219935fdfd0
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.7.1":
+"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.0, acorn@npm:^8.7.1":
   version: 8.7.1
   resolution: "acorn@npm:8.7.1"
   bin:
@@ -9260,20 +8108,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.0.3, array-includes@npm:^3.1.4":
-  version: 3.1.4
-  resolution: "array-includes@npm:3.1.4"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-    get-intrinsic: ^1.1.1
-    is-string: ^1.0.7
-  checksum: 69967c38c52698f84b50a7aed5554aadc89c6ac6399b6d92ad061a5952f8423b4bba054c51d40963f791dfa294d7247cdd7988b6b1f2c5861477031c6386e1c0
-  languageName: node
-  linkType: hard
-
-"array-includes@npm:^3.1.5":
+"array-includes@npm:^3.0.3, array-includes@npm:^3.1.4, array-includes@npm:^3.1.5":
   version: 3.1.5
   resolution: "array-includes@npm:3.1.5"
   dependencies:
@@ -9286,20 +8121,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-parallel@npm:~0.1.3":
-  version: 0.1.3
-  resolution: "array-parallel@npm:0.1.3"
-  checksum: 0d7e26ad68d073e1ba9f70bfd8403b4f8d810e32fbca616c422e06fdeb0e96a5589ae5816a0ac17707a1b499efd72ded9c6c5b796a8c1d92e743892ad62dcb15
-  languageName: node
-  linkType: hard
-
-"array-series@npm:~0.1.5":
-  version: 0.1.5
-  resolution: "array-series@npm:0.1.5"
-  checksum: 09f500cfd71b27e39ecb2a5fb4f141cd879283f9afb3b9145012b6ff3b3897323ef9a5edfea546963f92ec810cf58737473f0550004c3f8125a47875b1af458b
-  languageName: node
-  linkType: hard
-
 "array-union@npm:^1.0.1, array-union@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-union@npm:1.0.2"
@@ -9348,18 +8169,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "array.prototype.flatmap@npm:1.2.5"
-  dependencies:
-    call-bind: ^1.0.0
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.0
-  checksum: a14119a28e5687a13cf3fd6756a8e7810563a9e81cd4227e27a25c31d362df47ac72553f06a271fd728741e199047933ad43d561d64a28da0b4e1a26f74e939e
-  languageName: node
-  linkType: hard
-
-"array.prototype.flatmap@npm:^1.3.0":
+"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.3.0":
   version: 1.3.0
   resolution: "array.prototype.flatmap@npm:1.3.0"
   dependencies:
@@ -9589,7 +8399,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^3.0.1, async@npm:^3.2.0, async@npm:^3.2.3, async@npm:~3.2.0":
+"async@npm:^3.2.0, async@npm:^3.2.3, async@npm:~3.2.0":
   version: 3.2.3
   resolution: "async@npm:3.2.3"
   checksum: c4bee57ab2249af3dc83ca3ef9acfa8e822c0d5e5aa41bae3eaf7f673648343cd64ecd7d26091ffd357f3f044428b17b5f00098494b6cf8b6b3e9681f0636ca1
@@ -9633,13 +8443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"auto-bind@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "auto-bind@npm:4.0.0"
-  checksum: 00cad71cce5742faccb7dd65c1b55ebc4f45add4b0c9a1547b10b05bab22813230133b0c892c67ba3eb969a4524710c5e43cc45c72898ec84e56f3a596e7a04f
-  languageName: node
-  linkType: hard
-
 "autolinker@npm:^3.15.0":
   version: 3.15.0
   resolution: "autolinker@npm:3.15.0"
@@ -9690,23 +8493,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aws-sdk@npm:^2.588.0":
-  version: 2.1120.0
-  resolution: "aws-sdk@npm:2.1120.0"
-  dependencies:
-    buffer: 4.9.2
-    events: 1.1.1
-    ieee754: 1.1.13
-    jmespath: 0.16.0
-    querystring: 0.2.0
-    sax: 1.2.1
-    url: 0.10.3
-    uuid: 3.3.2
-    xml2js: 0.4.19
-  checksum: 3ff5aed04001da73177bfa33ebf15fe7e8803e587433428377abbb59014d1a28c97b0f6d154a4e1ad0b1754eb182db13f46c3062c3915023c7489d43f7a66755
-  languageName: node
-  linkType: hard
-
 "aws-sign2@npm:~0.7.0":
   version: 0.7.0
   resolution: "aws-sign2@npm:0.7.0"
@@ -9913,7 +8699,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.8.0":
+"babel-plugin-macros@npm:^2.0.0":
   version: 2.8.0
   resolution: "babel-plugin-macros@npm:2.8.0"
   dependencies:
@@ -9935,15 +8721,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-named-asset-import@npm:^0.3.1":
-  version: 0.3.8
-  resolution: "babel-plugin-named-asset-import@npm:0.3.8"
-  peerDependencies:
-    "@babel/core": ^7.1.0
-  checksum: d1e58df8cb75d91d070feea31087bc989906d3465144bde7e9f3c3690b514a90a55d3aebf3e65e76c5d4c743ecedde5f640f09f43a21fa60f1a5d413cb3f7a67
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.3.0":
   version: 0.3.1
   resolution: "babel-plugin-polyfill-corejs2@npm:0.3.1"
@@ -10165,13 +8942,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"batch-processor@npm:1.0.0":
-  version: 1.0.0
-  resolution: "batch-processor@npm:1.0.0"
-  checksum: 5519b024f6cd0e95a543bb3edf0ae19e5badae0c32b30b41839b4469bbb1f91e14fc04bff3759cd9c2621aa9e16def48c938783e9027e7ec977fba62d537a468
-  languageName: node
-  linkType: hard
-
 "batch@npm:0.6.1":
   version: 0.6.1
   resolution: "batch@npm:0.6.1"
@@ -10207,7 +8977,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"big-integer@npm:^1.6.16, big-integer@npm:^1.6.51":
+"big-integer@npm:^1.6.16, big-integer@npm:^1.6.51, big-integer@npm:^1.6.7":
   version: 1.6.51
   resolution: "big-integer@npm:1.6.51"
   checksum: 3d444173d1b2e20747e2c175568bedeebd8315b0637ea95d75fd27830d3b8e8ba36c6af40374f36bdaea7b5de376dcada1b07587cb2a79a928fccdb6e6e3c518
@@ -10508,6 +9278,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bplist-parser@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "bplist-parser@npm:0.1.1"
+  dependencies:
+    big-integer: ^1.6.7
+  checksum: 1501d52f009c9f23ecee6855940e84ac55a6120c0f05570b1f51c8d494023416ec12f4d91b5ac97d6c0941d96dd41d7cb0bc1a9c0a02092df5b4b511acb8dda5
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -10671,18 +9450,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.17.5, browserslist@npm:^4.19.1, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3":
-  version: 4.20.3
-  resolution: "browserslist@npm:4.20.3"
+"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.14.5, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3":
+  version: 4.20.4
+  resolution: "browserslist@npm:4.20.4"
   dependencies:
-    caniuse-lite: ^1.0.30001332
-    electron-to-chromium: ^1.4.118
+    caniuse-lite: ^1.0.30001349
+    electron-to-chromium: ^1.4.147
     escalade: ^3.1.1
-    node-releases: ^2.0.3
+    node-releases: ^2.0.5
     picocolors: ^1.0.0
   bin:
     browserslist: cli.js
-  checksum: 1e4b719ac2ca0fe235218a606e8b8ef16b8809e0973b924158c39fbc435a0b0fe43437ea52dd6ef5ad2efcb83fcb07431244e472270177814217f7c563651f7d
+  checksum: 0e56c42da765524e5c31bc9a1f08afaa8d5dba085071137cf21e56dc78d0cf0283764143df4c7d1c0cd18c3187fc9494e1d93fa0255004f0be493251a28635f9
   languageName: node
   linkType: hard
 
@@ -11166,10 +9945,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001332":
-  version: 1.0.30001332
-  resolution: "caniuse-lite@npm:1.0.30001332"
-  checksum: e54182ea42ab3d2ff1440f9a6480292f7ab23c00c188df7ad65586312e4da567e8bedd5cb5fb8f0ff4193dc027a54e17e0b3c0b6db5d5a3fb61c7726ff9c45b3
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001349":
+  version: 1.0.30001352
+  resolution: "caniuse-lite@npm:1.0.30001352"
+  checksum: 575ad031349e56224471859decd100d0f90c804325bf1b543789b212d6126f6e18925766b325b1d96f75e48df0036e68f92af26d1fb175803fd6ad935bc807ac
   languageName: node
   linkType: hard
 
@@ -11307,7 +10086,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:3.0.0, chalk@npm:^3.0.0, chalk@npm:~3.0.0":
+"chalk@npm:3.0.0, chalk@npm:~3.0.0":
   version: 3.0.0
   resolution: "chalk@npm:3.0.0"
   dependencies:
@@ -11546,32 +10325,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chrome-launcher@npm:^0.13.0":
-  version: 0.13.4
-  resolution: "chrome-launcher@npm:0.13.4"
-  dependencies:
-    "@types/node": "*"
-    escape-string-regexp: ^1.0.5
-    is-wsl: ^2.2.0
-    lighthouse-logger: ^1.0.0
-    mkdirp: ^0.5.3
-    rimraf: ^3.0.2
-  checksum: 9da52a74f53242f7b281290cdccc7ba3902984933f88ab0f489b5e868ba4e939b82cf72669527ed38a4425bd3602fc6ba8fa4c00d197a0d99aab4c1779c45dd5
-  languageName: node
-  linkType: hard
-
-"chrome-remote-interface@npm:^0.28.0":
-  version: 0.28.2
-  resolution: "chrome-remote-interface@npm:0.28.2"
-  dependencies:
-    commander: 2.11.x
-    ws: ^7.2.0
-  bin:
-    chrome-remote-interface: bin/client.js
-  checksum: e740f5fd4679328fd9654eb0aa0bc496df2e737631bca15a307957b0f4134b328ef65a4e66cebe62a202bd633287283570e42b91d8d987f1d59a42d3815fc5ef
-  languageName: node
-  linkType: hard
-
 "chrome-trace-event@npm:^1.0.2":
   version: 1.0.3
   resolution: "chrome-trace-event@npm:1.0.3"
@@ -11699,16 +10452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-truncate@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "cli-truncate@npm:2.1.0"
-  dependencies:
-    slice-ansi: ^3.0.0
-    string-width: ^4.2.0
-  checksum: bf1e4e6195392dc718bf9cd71f317b6300dc4a9191d052f31046b8773230ece4fa09458813bf0e3455a5e68c0690d2ea2c197d14a8b85a7b5e01c97f4b5feb5d
-  languageName: node
-  linkType: hard
-
 "cli-width@npm:^2.0.0":
   version: 2.2.1
   resolution: "cli-width@npm:2.2.1"
@@ -11751,17 +10494,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^4.0.0":
-  version: 4.1.0
-  resolution: "cliui@npm:4.1.0"
-  dependencies:
-    string-width: ^2.1.1
-    strip-ansi: ^4.0.0
-    wrap-ansi: ^2.0.0
-  checksum: 0f8a77e55c66ab4400f8cc24a46e496af186ebfbf301709341a24c26d398200c2ccc5cac892566d586c3c393a079974f34f0ce05210df336f97b70805c02865e
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^5.0.0":
   version: 5.0.0
   resolution: "cliui@npm:5.0.0"
@@ -11773,17 +10505,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cliui@npm:6.0.0"
-  dependencies:
-    string-width: ^4.2.0
-    strip-ansi: ^6.0.0
-    wrap-ansi: ^6.2.0
-  checksum: 4fcfd26d292c9f00238117f39fc797608292ae36bac2168cfee4c85923817d0607fe21b3329a8621e01aedf512c99b7eaa60e363a671ffd378df6649fb48ae42
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^7.0.2":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
@@ -11824,7 +10545,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.1.1":
+"clsx@npm:1.1.0":
+  version: 1.1.0
+  resolution: "clsx@npm:1.1.0"
+  checksum: 50e889839a557b8a2fca063ee7ea22ba8c261e7f9f7aadc257065fc77f16fa0a98ce826fb2b126d05fb736560333971dbb882874054df7bb8f4317e224ec1978
+  languageName: node
+  linkType: hard
+
+"clsx@npm:^1.0.4":
   version: 1.1.1
   resolution: "clsx@npm:1.1.1"
   checksum: ff052650329773b9b245177305fc4c4dc3129f7b2be84af4f58dc5defa99538c61d4207be7419405a5f8f3d92007c954f4daba5a7b74e563d5de71c28c830063
@@ -11912,20 +10640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-convert@npm:~0.5.0":
-  version: 0.5.3
-  resolution: "color-convert@npm:0.5.3"
-  checksum: 1074989a2c216d0171a397b870a0d698ef802ab3f9ece72b35bd92c4d20aeab31f222ea525dd5d3fad175a3f256a750eadd14ab882caed0089efc1cb7ba74086
-  languageName: node
-  linkType: hard
-
-"color-diff@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "color-diff@npm:1.2.0"
-  checksum: 9663b72e35276eb1b4d0f31bbb72d6aad59c28ec2ea40a4c0e384c5f8b4f577b2e21cdbd2fa4a5507ae7783c84a55447c117542a00d5e471213109b11d61e17c
-  languageName: node
-  linkType: hard
-
 "color-name@npm:1.1.3":
   version: 1.1.3
   resolution: "color-name@npm:1.1.3"
@@ -12026,13 +10740,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:2.11.x":
-  version: 2.11.0
-  resolution: "commander@npm:2.11.0"
-  checksum: 0d0c622d129a801699b9bbf6fa518108c7e221e51ae12457119aec52f1142ab759b6cd3348ee253604e934639e200c8f0e1cf8342a2ba4b28b3565a7322ead14
-  languageName: node
-  linkType: hard
-
 "commander@npm:2.15.1":
   version: 2.15.1
   resolution: "commander@npm:2.15.1"
@@ -12140,13 +10847,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.17":
-  version: 1.0.17
-  resolution: "compute-scroll-into-view@npm:1.0.17"
-  checksum: b20c05a10c37813c5a6e4bf053c00f65c88d23afed7a6bd7a2a69e05e2ffc2df3483ecfe407d36bf16b8cec8be21ae1966c9c523093a03117e567156cd79a51e
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -12154,7 +10854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-stream@npm:^1.5.0, concat-stream@npm:^1.6.2":
+"concat-stream@npm:^1.5.0":
   version: 1.6.2
   resolution: "concat-stream@npm:1.6.2"
   dependencies:
@@ -12379,17 +11079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.20.2, core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.8.1":
-  version: 3.21.1
-  resolution: "core-js-compat@npm:3.21.1"
-  dependencies:
-    browserslist: ^4.19.1
-    semver: 7.0.0
-  checksum: 6af1bcbc94ede50b109e54bf3f5a9ca28b8a303124e07c2bf76c2257a8a94a0b550cf4a318f6ec0594b351b6f9a5453fd4516e3681560b6d984b95d1988baf13
-  languageName: node
-  linkType: hard
-
-"core-js-compat@npm:^3.22.1":
+"core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.22.1, core-js-compat@npm:^3.8.1":
   version: 3.22.8
   resolution: "core-js-compat@npm:3.22.8"
   dependencies:
@@ -12399,7 +11089,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-pure@npm:^3.8.1, core-js-pure@npm:^3.8.2":
+"core-js-pure@npm:^3.8.1":
   version: 3.21.1
   resolution: "core-js-pure@npm:3.21.1"
   checksum: 00a5dff599b7fb0b30746a638b9d0edbdc0df24ed1580ca56be595fbe3c78c375d37fc4e1bff23627109229702c9ee8ea2587a66b8280eb33b85160aa4e401e9
@@ -12413,7 +11103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.4.0, core-js@npm:^2.5.0, core-js@npm:^2.6.5":
+"core-js@npm:^2.4.0, core-js@npm:^2.5.0":
   version: 2.6.12
   resolution: "core-js@npm:2.6.12"
   checksum: 44fa9934a85f8c78d61e0c8b7b22436330471ffe59ec5076fe7f324d6e8cf7f824b14b1c81ca73608b13bdb0fef035bd820989bf059767ad6fa13123bb8bd016
@@ -12627,16 +11317,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "cross-spawn@npm:4.0.2"
-  dependencies:
-    lru-cache: ^4.0.1
-    which: ^1.2.9
-  checksum: 8ce57b3e11c5c798542a21ddfdc1edef33ab6fe001958b31f3340a6ff684e3334a8baad2751efa78b6200aad442cf12b939396d758b0dd5c42c9b782c28fe06e
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^5.0.1":
   version: 5.1.0
   resolution: "cross-spawn@npm:5.1.0"
@@ -13536,13 +12216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-object-diff@npm:^1.1.0":
-  version: 1.1.7
-  resolution: "deep-object-diff@npm:1.1.7"
-  checksum: 543fb1ae87b138ad260691e6949e72bf7dc144825084b7ad1886bb725d2ace1c19ed1ef1280f1116243e86bf2c6b942f45c670958b1468f644613f28c5dc97ea
-  languageName: node
-  linkType: hard
-
 "deepmerge@npm:^4.2.2":
   version: 4.2.2
   resolution: "deepmerge@npm:4.2.2"
@@ -13550,6 +12223,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"default-browser-id@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "default-browser-id@npm:1.0.4"
+  dependencies:
+    bplist-parser: ^0.1.0
+    meow: ^3.1.0
+    untildify: ^2.0.0
+  bin:
+    default-browser-id: cli.js
+  checksum: c6576428ebdd304d209e09c40803c974de3236232fdfa564d82bd1e985246a0d0f0b344f2b207fcbf663b925c20d30ab4d77fbe2755d2be3a6073f12620b9056
+  languageName: node
+  linkType: hard
+
 "default-gateway@npm:^4.2.0":
   version: 4.2.0
   resolution: "default-gateway@npm:4.2.0"
@@ -13560,16 +12246,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.2, define-properties@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "define-properties@npm:1.1.3"
-  dependencies:
-    object-keys: ^1.0.12
-  checksum: da80dba55d0cd76a5a7ab71ef6ea0ebcb7b941f803793e4e0257b384cb772038faa0c31659d244e82c4342edef841c1a1212580006a05a5068ee48223d787317
+"define-lazy-prop@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "define-lazy-prop@npm:2.0.0"
+  checksum: 0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.4":
+"define-properties@npm:^1.1.2, define-properties@npm:^1.1.3, define-properties@npm:^1.1.4":
   version: 1.1.4
   resolution: "define-properties@npm:1.1.4"
   dependencies:
@@ -13776,6 +12460,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-package-manager@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "detect-package-manager@npm:2.0.1"
+  dependencies:
+    execa: ^5.1.1
+  checksum: e72b910182d5ad479198d4235be206ac64a479257b32201bb06f3c842cc34c65ea851d46f72cc1d4bf535bcc6c4b44b5b86bb29fe1192b8c9c07b46883672f28
+  languageName: node
+  linkType: hard
+
 "detect-port@npm:^1.3.0":
   version: 1.3.0
   resolution: "detect-port@npm:1.3.0"
@@ -14197,21 +12890,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downshift@npm:^6.0.15":
-  version: 6.1.7
-  resolution: "downshift@npm:6.1.7"
-  dependencies:
-    "@babel/runtime": ^7.14.8
-    compute-scroll-into-view: ^1.0.17
-    prop-types: ^15.7.2
-    react-is: ^17.0.2
-    tslib: ^2.3.0
-  peerDependencies:
-    react: ">=16.12.0"
-  checksum: 0904ed8f285d31ee00e471dcddd57e72468bee354b191167bcaebe690ec292647fe4c31f483665094d750e72dd71e5d7db695acef33ab5dba6a39fed0112bab6
-  languageName: node
-  linkType: hard
-
 "duplexer2@npm:~0.0.2":
   version: 0.0.2
   resolution: "duplexer2@npm:0.0.2"
@@ -14292,10 +12970,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.118":
-  version: 1.4.118
-  resolution: "electron-to-chromium@npm:1.4.118"
-  checksum: b1941bdff3ff8cb10a6f75f60527bff37fc43878b2ff4e0c1b5d6aa5062ea97df4e8c75e6d4c6eb97f0bab1cac6f8f1d799b7316e69f66b6a4b9b6773af97de2
+"electron-to-chromium@npm:^1.4.147":
+  version: 1.4.152
+  resolution: "electron-to-chromium@npm:1.4.152"
+  checksum: d1e3405adc8a8ddbcf5a91f33739f2f3f5fa7612a4e2b6cc6a85d9ebccc87f59cf9e99d2de93c7959b34aa7c633c6c162d912bf895a0e4b79d0c2ce35594948f
   languageName: node
   linkType: hard
 
@@ -14306,15 +12984,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"element-resize-detector@npm:^1.2.2":
-  version: 1.2.4
-  resolution: "element-resize-detector@npm:1.2.4"
-  dependencies:
-    batch-processor: 1.0.0
-  checksum: 81c47b7e229c303889d3a9d78ec3f3232e88a6682f1e2424fb0632d9b4f503b2ca011e6954321060604da07749a5a972b6a175fdf6c6806093a3b80a304cde7b
-  languageName: node
-  linkType: hard
-
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -14407,20 +13076,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emotion-theming@npm:^10.0.27":
-  version: 10.3.0
-  resolution: "emotion-theming@npm:10.3.0"
-  dependencies:
-    "@babel/runtime": ^7.5.5
-    "@emotion/weak-memoize": 0.2.5
-    hoist-non-react-statics: ^3.3.0
-  peerDependencies:
-    "@emotion/core": ^10.0.27
-    react: ">=16.3.0"
-  checksum: 2b0366afadbf60ab8d3d15750f0ac2949a74d580faa42713dad5c4fbe1652abee39e94ed9b228c47869111bf57d960d547da7a5844cd1ab86c9cdbfe62da9e99
-  languageName: node
-  linkType: hard
-
 "enabled@npm:2.0.x":
   version: 2.0.0
   resolution: "enabled@npm:2.0.0"
@@ -14482,6 +13137,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.9.3":
+  version: 5.9.3
+  resolution: "enhanced-resolve@npm:5.9.3"
+  dependencies:
+    graceful-fs: ^4.2.4
+    tapable: ^2.2.0
+  checksum: 64c2dbbdd608d1a4df93b6e60786c603a1faf3b2e66dfd051d62cf4cfaeeb5e800166183685587208d62e9f7afff3f78f3d5978e32cd80125ba0c83b59a79d78
+  languageName: node
+  linkType: hard
+
 "enquirer@npm:2.3.6, enquirer@npm:^2.3.5":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
@@ -14588,35 +13253,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.17.2, es-abstract@npm:^1.18.5, es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1":
-  version: 1.19.5
-  resolution: "es-abstract@npm:1.19.5"
-  dependencies:
-    call-bind: ^1.0.2
-    es-to-primitive: ^1.2.1
-    function-bind: ^1.1.1
-    get-intrinsic: ^1.1.1
-    get-symbol-description: ^1.0.0
-    has: ^1.0.3
-    has-symbols: ^1.0.3
-    internal-slot: ^1.0.3
-    is-callable: ^1.2.4
-    is-negative-zero: ^2.0.2
-    is-regex: ^1.1.4
-    is-shared-array-buffer: ^1.0.2
-    is-string: ^1.0.7
-    is-weakref: ^1.0.2
-    object-inspect: ^1.12.0
-    object-keys: ^1.1.1
-    object.assign: ^4.1.2
-    string.prototype.trimend: ^1.0.4
-    string.prototype.trimstart: ^1.0.4
-    unbox-primitive: ^1.0.1
-  checksum: 55199b0f179a12b3b0ec9c9f2e3a27a7561686e4f88d46f9ef32c836448a336e367c14d8f792612fc83a64113896e478259e4dffbbcffb3efdd06650f6360324
-  languageName: node
-  linkType: hard
-
-"es-abstract@npm:^1.19.2, es-abstract@npm:^1.19.5":
+"es-abstract@npm:^1.17.2, es-abstract@npm:^1.18.5, es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1, es-abstract@npm:^1.19.2, es-abstract@npm:^1.19.5":
   version: 1.20.1
   resolution: "es-abstract@npm:1.20.1"
   dependencies:
@@ -14670,6 +13307,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-module-lexer@npm:^0.9.0":
+  version: 0.9.3
+  resolution: "es-module-lexer@npm:0.9.3"
+  checksum: 84bbab23c396281db2c906c766af58b1ae2a1a2599844a504df10b9e8dc77ec800b3211fdaa133ff700f5703d791198807bba25d9667392d27a5e9feda344da8
+  languageName: node
+  linkType: hard
+
 "es-shim-unscopables@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-shim-unscopables@npm:1.0.0"
@@ -14902,16 +13546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:^4.1.0":
-  version: 4.4.0
-  resolution: "eslint-plugin-react-hooks@npm:4.4.0"
-  peerDependencies:
-    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 350b50d45677cb2df682b9e54475912746bd2f56fc342e4d47fad78d71eb1b2b742e702f1e6c04ab2196346d3d7a2e327b5eee826f5b96bfb84b5c41d35e44e9
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-react-hooks@npm:^4.4.0":
+"eslint-plugin-react-hooks@npm:^4.1.0, eslint-plugin-react-hooks@npm:^4.4.0":
   version: 4.5.0
   resolution: "eslint-plugin-react-hooks@npm:4.5.0"
   peerDependencies:
@@ -14920,31 +13555,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.20.5":
-  version: 7.29.4
-  resolution: "eslint-plugin-react@npm:7.29.4"
-  dependencies:
-    array-includes: ^3.1.4
-    array.prototype.flatmap: ^1.2.5
-    doctrine: ^2.1.0
-    estraverse: ^5.3.0
-    jsx-ast-utils: ^2.4.1 || ^3.0.0
-    minimatch: ^3.1.2
-    object.entries: ^1.1.5
-    object.fromentries: ^2.0.5
-    object.hasown: ^1.1.0
-    object.values: ^1.1.5
-    prop-types: ^15.8.1
-    resolve: ^2.0.0-next.3
-    semver: ^6.3.0
-    string.prototype.matchall: ^4.0.6
-  peerDependencies:
-    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: bb7d3715ccd7f3e0d7bfaa2125b26d96865695bcfea4a3d510a5763342a74ab5b99a88e13aad9245f9461ad87e4bce69c33fc946888115d576233f9b6e69700d
-  languageName: node
-  linkType: hard
-
-"eslint-plugin-react@npm:^7.29.4":
+"eslint-plugin-react@npm:^7.20.5, eslint-plugin-react@npm:^7.29.4":
   version: 7.30.0
   resolution: "eslint-plugin-react@npm:7.30.0"
   dependencies:
@@ -14979,23 +13590,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "eslint-scope@npm:4.0.3"
+"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.0.0, eslint-scope@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "eslint-scope@npm:5.1.1"
   dependencies:
-    esrecurse: ^4.1.0
+    esrecurse: ^4.3.0
     estraverse: ^4.1.1
-  checksum: c5f835f681884469991fe58d76a554688d9c9e50811299ccd4a8f79993a039f5bcb0ee6e8de2b0017d97c794b5832ef3b21c9aac66228e3aa0f7a0485bcfb65b
+  checksum: 47e4b6a3f0cc29c7feedee6c67b225a2da7e155802c6ea13bbef4ac6b9e10c66cd2dcb987867ef176292bf4e64eccc680a49e35e9e9c669f4a02bac17e86abdb
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^5.0.0, eslint-scope@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "eslint-scope@npm:5.1.1"
+"eslint-scope@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "eslint-scope@npm:4.0.3"
   dependencies:
-    esrecurse: ^4.3.0
+    esrecurse: ^4.1.0
     estraverse: ^4.1.1
-  checksum: 47e4b6a3f0cc29c7feedee6c67b225a2da7e155802c6ea13bbef4ac6b9e10c66cd2dcb987867ef176292bf4e64eccc680a49e35e9e9c669f4a02bac17e86abdb
+  checksum: c5f835f681884469991fe58d76a554688d9c9e50811299ccd4a8f79993a039f5bcb0ee6e8de2b0017d97c794b5832ef3b21c9aac66228e3aa0f7a0485bcfb65b
   languageName: node
   linkType: hard
 
@@ -15156,52 +13767,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.12.0":
-  version: 8.13.0
-  resolution: "eslint@npm:8.13.0"
-  dependencies:
-    "@eslint/eslintrc": ^1.2.1
-    "@humanwhocodes/config-array": ^0.9.2
-    ajv: ^6.10.0
-    chalk: ^4.0.0
-    cross-spawn: ^7.0.2
-    debug: ^4.3.2
-    doctrine: ^3.0.0
-    escape-string-regexp: ^4.0.0
-    eslint-scope: ^7.1.1
-    eslint-utils: ^3.0.0
-    eslint-visitor-keys: ^3.3.0
-    espree: ^9.3.1
-    esquery: ^1.4.0
-    esutils: ^2.0.2
-    fast-deep-equal: ^3.1.3
-    file-entry-cache: ^6.0.1
-    functional-red-black-tree: ^1.0.1
-    glob-parent: ^6.0.1
-    globals: ^13.6.0
-    ignore: ^5.2.0
-    import-fresh: ^3.0.0
-    imurmurhash: ^0.1.4
-    is-glob: ^4.0.0
-    js-yaml: ^4.1.0
-    json-stable-stringify-without-jsonify: ^1.0.1
-    levn: ^0.4.1
-    lodash.merge: ^4.6.2
-    minimatch: ^3.0.4
-    natural-compare: ^1.4.0
-    optionator: ^0.9.1
-    regexpp: ^3.2.0
-    strip-ansi: ^6.0.1
-    strip-json-comments: ^3.1.0
-    text-table: ^0.2.0
-    v8-compile-cache: ^2.0.3
-  bin:
-    eslint: bin/eslint.js
-  checksum: bc7d2fc9a046d42cb2c8987573ecaf534c1fae14747c4695e32388e179c5f21b83eefdb3e4f35924bf76152e226d7cc9dfb21f12348baf12c803109005b17439
-  languageName: node
-  linkType: hard
-
-"eslint@npm:^8.14.0":
+"eslint@npm:^8.12.0, eslint@npm:^8.14.0":
   version: 8.17.0
   resolution: "eslint@npm:8.17.0"
   dependencies:
@@ -15268,17 +13834,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^9.3.1":
-  version: 9.3.1
-  resolution: "espree@npm:9.3.1"
-  dependencies:
-    acorn: ^8.7.0
-    acorn-jsx: ^5.3.1
-    eslint-visitor-keys: ^3.3.0
-  checksum: d7161db30b65427e0799383699ac4c441533a38faee005153694b68b933ba7a24666680edfc490fa77e3a84a22dbd955768034a6f811af5049774eead83063a5
-  languageName: node
-  linkType: hard
-
 "espree@npm:^9.3.2":
   version: 9.3.2
   resolution: "espree@npm:9.3.2"
@@ -15414,7 +13969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"events@npm:*, events@npm:^3.0.0":
+"events@npm:*, events@npm:^3.0.0, events@npm:^3.2.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
   checksum: f6f487ad2198aa41d878fa31452f1a3c00958f46e9019286ff4787c84aac329332ab45c9cdc8c445928fc6d7ded294b9e005a7fce9426488518017831b272780
@@ -15483,21 +14038,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "execa@npm:0.6.3"
-  dependencies:
-    cross-spawn: ^5.0.1
-    get-stream: ^3.0.0
-    is-stream: ^1.1.0
-    npm-run-path: ^2.0.0
-    p-finally: ^1.0.0
-    signal-exit: ^3.0.0
-    strip-eof: ^1.0.0
-  checksum: 2c66177731273a7c0a4c031af81b486b67ec1eeeb8f353ebc68e0cfe7f63aca9ebc1e6fe03ba10f130f2bd179c0ac69b35668fe2bfc1ceb68fbf5291d0783457
-  languageName: node
-  linkType: hard
-
 "execa@npm:^0.7.0":
   version: 0.7.0
   resolution: "execa@npm:0.7.0"
@@ -15543,7 +14083,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^5.0.0":
+"execa@npm:^5.0.0, execa@npm:^5.1.1":
   version: 5.1.1
   resolution: "execa@npm:5.1.1"
   dependencies:
@@ -15984,6 +14524,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fetch-retry@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "fetch-retry@npm:5.0.2"
+  checksum: 888d81e2a872cd47d4e5cf9156e13e7b73cb902a677f882a88fb3d8d5fb029a4238b44b07328dfb7735860b038fdc3d92acbef7f07d8633a314e4809d2f1f9c0
+  languageName: node
+  linkType: hard
+
 "fflate@npm:^0.7.3":
   version: 0.7.3
   resolution: "fflate@npm:0.7.3"
@@ -16427,6 +14974,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"focus-lock@npm:^0.8.0":
+  version: 0.8.1
+  resolution: "focus-lock@npm:0.8.1"
+  dependencies:
+    tslib: ^1.9.3
+  checksum: 3b25b06bb8e23a3a826a8eda89e547593a688486df531db92f6b767d96d397dc1efed4529ec3a44cb3ec1fbdd44abe50a30d0ce498f732501b36f5f18b619003
+  languageName: node
+  linkType: hard
+
 "focus-visible@npm:^5.2.0":
   version: 5.2.0
   resolution: "focus-visible@npm:5.2.0"
@@ -16450,17 +15006,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.4, follow-redirects@npm:^1.14.8":
-  version: 1.14.9
-  resolution: "follow-redirects@npm:1.14.9"
-  peerDependenciesMeta:
-    debug:
-      optional: true
-  checksum: f5982e0eb481818642492d3ca35a86989c98af1128b8e1a62911a3410621bc15d2b079e8170b35b19d3bdee770b73ed431a257ed86195af773771145baa57845
-  languageName: node
-  linkType: hard
-
-"follow-redirects@npm:^1.14.9":
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.4, follow-redirects@npm:^1.14.8, follow-redirects@npm:^1.14.9":
   version: 1.15.1
   resolution: "follow-redirects@npm:1.15.1"
   peerDependenciesMeta:
@@ -16820,13 +15366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fuse.js@npm:^3.6.1":
-  version: 3.6.1
-  resolution: "fuse.js@npm:3.6.1"
-  checksum: 958aa877ace65dc900df776becd39a03df68d7eebc7890b5fd2fc8c5d88e2fff238f60c37f80013ce70e9d9e7ac8efa9f503695fdd23d1eca3cc983797b50191
-  languageName: node
-  linkType: hard
-
 "gauge@npm:^2.7.4, gauge@npm:~2.7.3":
   version: 2.7.4
   resolution: "gauge@npm:2.7.4"
@@ -16964,7 +15503,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-caller-file@npm:^1.0.1, get-caller-file@npm:^1.0.2":
+"get-caller-file@npm:^1.0.2":
   version: 1.0.3
   resolution: "get-caller-file@npm:1.0.3"
   checksum: 2b90a7f848896abcebcdc0acc627a435bcf05b9cd280599bc980ebfcdc222416c3df12c24c4845f69adc4346728e8966f70b758f9369f3534182791dfbc25c05
@@ -17017,7 +15556,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-port@npm:^5.0.0, get-port@npm:^5.1.1":
+"get-port@npm:^5.1.1":
   version: 5.1.1
   resolution: "get-port@npm:5.1.1"
   checksum: 0162663ffe5c09e748cd79d97b74cd70e5a5c84b760a475ce5767b357fb2a57cb821cee412d646aa8a156ed39b78aab88974eddaa9e5ee926173c036c0713787
@@ -17197,25 +15736,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"git-up@npm:^4.0.0":
-  version: 4.0.5
-  resolution: "git-up@npm:4.0.5"
-  dependencies:
-    is-ssh: ^1.3.0
-    parse-url: ^6.0.0
-  checksum: dd8f39a115ec0523b7da369cd4c6dc94a9b11fcc652e6fc9d011a93c287e27cc34e1d1c89cff8864f9ab11a1b2bea49786951d8eb3f1e5babd351afcc63f6135
-  languageName: node
-  linkType: hard
-
-"git-url-parse@npm:^11.1.2":
-  version: 11.6.0
-  resolution: "git-url-parse@npm:11.6.0"
-  dependencies:
-    git-up: ^4.0.0
-  checksum: 18a7d0bbac76c55fe8a501d4bd4c6b5f5528883a4dadcfce1152b4902e3e5831df8e97f36ea3f564de633e9ab44d9ab09bb2f319e41af1b6e4f627af139d35d5
-  languageName: node
-  linkType: hard
-
 "github-from-package@npm:0.0.0":
   version: 0.0.0
   resolution: "github-from-package@npm:0.0.0"
@@ -17385,7 +15905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.15.0":
+"globals@npm:^13.15.0, globals@npm:^13.6.0, globals@npm:^13.9.0":
   version: 13.15.0
   resolution: "globals@npm:13.15.0"
   dependencies:
@@ -17394,15 +15914,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.6.0, globals@npm:^13.9.0":
-  version: 13.13.0
-  resolution: "globals@npm:13.13.0"
-  dependencies:
-    type-fest: ^0.20.2
-  checksum: c55ea8fd3afecb72567bac41605577e19e68476993dfb0ca4c49b86075af5f0ae3f0f5502525f69010f7c5ea5db6a1c540a80a4f80ebdfb2f686d87b0f05d7e9
-  languageName: node
-  linkType: hard
-
 "globalthis@npm:^1.0.0":
   version: 1.0.2
   resolution: "globalthis@npm:1.0.2"
@@ -17492,18 +16003,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gm@npm:^1.23.1":
-  version: 1.23.1
-  resolution: "gm@npm:1.23.1"
-  dependencies:
-    array-parallel: ~0.1.3
-    array-series: ~0.1.5
-    cross-spawn: ^4.0.0
-    debug: ^3.1.0
-  checksum: 33180fce816bd1c2680e5dfdb7dbe6da58b52c627379df2bfca06bbb03d03ad657530da3a3c70f65f8020d19cbb8ed23711a2c0fb5c75d9ae941deca6511bf40
-  languageName: node
-  linkType: hard
-
 "gonzales-pe@npm:^4.3.0":
   version: 4.3.0
   resolution: "gonzales-pe@npm:4.3.0"
@@ -17786,14 +16285,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-bigints@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "has-bigints@npm:1.0.1"
-  checksum: 44ab55868174470065d2e0f8f6def1c990d12b82162a8803c679699fa8a39f966e336f2a33c185092fe8aea7e8bf2e85f1c26add5f29d98f2318bd270096b183
-  languageName: node
-  linkType: hard
-
-"has-bigints@npm:^1.0.2":
+"has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
   checksum: 390e31e7be7e5c6fe68b81babb73dfc35d413604d7ee5f56da101417027a4b4ce6a27e46eff97ad040c835b5d228676eae99a9b5c3bc0e23c8e81a49241ff45b
@@ -18083,7 +16575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"highlight.js@npm:^10.1.1, highlight.js@npm:~10.7.0":
+"highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"
   checksum: defeafcd546b535d710d8efb8e650af9e3b369ef53e28c3dc7893eacfe263200bba4c5fcf43524ae66d5c0c296b1af0870523ceae3e3104d24b7abf6374a4fea
@@ -18097,16 +16589,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"history@npm:5.0.0":
-  version: 5.0.0
-  resolution: "history@npm:5.0.0"
-  dependencies:
-    "@babel/runtime": ^7.7.6
-  checksum: 14eab13619b4d297eeda0ae7adcf2dd8e6cec48fc9fac903b8dfb626337f8f6fc12743c286be819885c71f522daf0e9e7f814aa126ae5e1b01ab4a3d6801b5f5
-  languageName: node
-  linkType: hard
-
-"history@npm:^5.0.0, history@npm:^5.2.0":
+"history@npm:^5.0.0":
   version: 5.3.0
   resolution: "history@npm:5.3.0"
   dependencies:
@@ -18140,15 +16623,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.0":
-  version: 3.3.2
-  resolution: "hoist-non-react-statics@npm:3.3.2"
-  dependencies:
-    react-is: ^16.7.0
-  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
-  languageName: node
-  linkType: hard
-
 "homedir-polyfill@npm:^1.0.1":
   version: 1.0.3
   resolution: "homedir-polyfill@npm:1.0.3"
@@ -18913,21 +17387,7 @@ __metadata:
   resolution: "import-from@npm:2.1.0"
   dependencies:
     resolve-from: ^3.0.0
-  checksum: 91f6f89f46a07227920ef819181bb52eb93023ccc0bdf00224fdfb326f8f753e279ad06819f39a02bb88c9d3a4606adc85b0cc995285e5d65feeb59f1421a1d4
-  languageName: node
-  linkType: hard
-
-"import-jsx@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "import-jsx@npm:3.1.0"
-  dependencies:
-    "@babel/core": ^7.5.5
-    "@babel/plugin-proposal-object-rest-spread": ^7.5.5
-    "@babel/plugin-transform-destructuring": ^7.5.0
-    "@babel/plugin-transform-react-jsx": ^7.3.0
-    caller-path: ^2.0.0
-    resolve-from: ^3.0.0
-  checksum: 067626abc9b04d80c4a84689623fff4456e9f5c3bcce1f2ac4e027c6500e8fdaa99a17b8c8e9f6fb00121a8e7c2b1a3236abde6ff23027b4ee90c11ad095c280
+  checksum: 91f6f89f46a07227920ef819181bb52eb93023ccc0bdf00224fdfb326f8f753e279ad06819f39a02bb88c9d3a4606adc85b0cc995285e5d65feeb59f1421a1d4
   languageName: node
   linkType: hard
 
@@ -19065,38 +17525,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ink@npm:^2.6.0":
-  version: 2.7.1
-  resolution: "ink@npm:2.7.1"
-  dependencies:
-    ansi-escapes: ^4.2.1
-    arrify: ^2.0.1
-    auto-bind: ^4.0.0
-    chalk: ^3.0.0
-    cli-cursor: ^3.1.0
-    cli-truncate: ^2.1.0
-    is-ci: ^2.0.0
-    lodash.throttle: ^4.1.1
-    log-update: ^3.0.0
-    prop-types: ^15.6.2
-    react-reconciler: ^0.24.0
-    scheduler: ^0.18.0
-    signal-exit: ^3.0.2
-    slice-ansi: ^3.0.0
-    string-length: ^3.1.0
-    widest-line: ^3.1.0
-    wrap-ansi: ^6.2.0
-    yoga-layout-prebuilt: ^1.9.3
-  peerDependencies:
-    "@types/react": ">=16.8.0"
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 1432368a3de42619e0d5e0785a1ba7a31a39423bc8d3ed771d650a9064f1758f5168aa8c06cd2a5f52ff66ba78500d8305145133b5b595b6fc893b992853c5ed
-  languageName: node
-  linkType: hard
-
 "inline-style-parser@npm:0.1.1":
   version: 0.1.1
   resolution: "inline-style-parser@npm:0.1.1"
@@ -19207,13 +17635,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invert-kv@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "invert-kv@npm:2.0.0"
-  checksum: 52ea317354101ad6127c6e4c1c6a2d27ae8d3010b6438b60d76d6a920e55410e03547f97f9d1f52031becf5656bbef91d36ee7daa9e26ebc374a9cb342e1f127
-  languageName: node
-  linkType: hard
-
 "ip-address@npm:^7.1.0":
   version: 7.1.0
   resolution: "ip-address@npm:7.1.0"
@@ -19257,6 +17678,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ip@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "ip@npm:2.0.0"
+  checksum: cfcfac6b873b701996d71ec82a7dd27ba92450afdb421e356f44044ed688df04567344c36cbacea7d01b1c39a4c732dc012570ebe9bebfb06f27314bca625349
+  languageName: node
+  linkType: hard
+
 "ipaddr.js@npm:1.9.1, ipaddr.js@npm:^1.0.1, ipaddr.js@npm:^1.9.0":
   version: 1.9.1
   resolution: "ipaddr.js@npm:1.9.1"
@@ -19519,7 +17947,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-docker@npm:^2.0.0":
+"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
   version: 2.2.1
   resolution: "is-docker@npm:2.2.1"
   bin:
@@ -19922,15 +18350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-ssh@npm:^1.3.0":
-  version: 1.3.3
-  resolution: "is-ssh@npm:1.3.3"
-  dependencies:
-    protocols: ^1.1.0
-  checksum: 7a751facad3c61abf080eefe4f5df488d37f690ac2b130a8012001ecee4d7991306561bcb25896894d19268ea0512b20497f243e74d21c5901187a8f55f1c08c
-  languageName: node
-  linkType: hard
-
 "is-stream@npm:^1.0.0, is-stream@npm:^1.0.1, is-stream@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-stream@npm:1.1.0"
@@ -20141,6 +18560,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-unfetch@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "isomorphic-unfetch@npm:3.1.0"
+  dependencies:
+    node-fetch: ^2.6.1
+    unfetch: ^4.2.0
+  checksum: 82b92fe4ec2823a81ab0fc0d11bd94d710e6f9a940d56b3cba31896d4345ec9ffc7949f4ff31ebcae84f6b95f7ebf3474c4c7452b834eb4078ea3f2c37e459c5
+  languageName: node
+  linkType: hard
+
 "isstream@npm:~0.1.2":
   version: 0.1.2
   resolution: "isstream@npm:0.1.2"
@@ -20767,7 +19196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^27.5.1":
+"jest-worker@npm:^27.4.5, jest-worker@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-worker@npm:27.5.1"
   dependencies:
@@ -20991,7 +19420,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-parse-even-better-errors@npm:^2.3.0":
+"json-parse-even-better-errors@npm:^2.3.0, json-parse-even-better-errors@npm:^2.3.1":
   version: 2.3.1
   resolution: "json-parse-even-better-errors@npm:2.3.1"
   checksum: 798ed4cf3354a2d9ccd78e86d2169515a0097a5c133337807cdf7f1fc32e1391d207ccfc276518cc1d7d8d4db93288b8a50ba4293d212ad1336e52a8ec0a941f
@@ -21391,15 +19820,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lcid@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "lcid@npm:2.0.0"
-  dependencies:
-    invert-kv: ^2.0.0
-  checksum: 278e27b5a0707cf9ab682146963ebff2328795be10cd6f8ea8edae293439325d345ac5e33079cce77ac3a86a3dcfb97a34f279dbc46b03f3e419aa39b5915a16
-  languageName: node
-  linkType: hard
-
 "ldap-escape@npm:^2.0.6":
   version: 2.0.6
   resolution: "ldap-escape@npm:2.0.6"
@@ -21562,16 +19982,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lighthouse-logger@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "lighthouse-logger@npm:1.3.0"
-  dependencies:
-    debug: ^2.6.9
-    marky: ^1.2.2
-  checksum: 82655f1862779dc5a917de62567a23dbf47bbde9a53abbdd4d72b2cf80d6c2595bc84de7ef836c94c76a2e4e3f3ec613a2e1ec021367959d397aeb5aae97a7cb
-  languageName: node
-  linkType: hard
-
 "lilconfig@npm:^2.0.5":
   version: 2.0.5
   resolution: "lilconfig@npm:2.0.5"
@@ -21645,6 +20055,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loader-runner@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "loader-runner@npm:4.3.0"
+  checksum: a90e00dee9a16be118ea43fec3192d0b491fe03a32ed48a4132eb61d498f5536a03a1315531c19d284392a8726a4ecad71d82044c28d7f22ef62e029bf761569
+  languageName: node
+  linkType: hard
+
 "loader-utils@npm:0.2.x":
   version: 0.2.17
   resolution: "loader-utils@npm:0.2.17"
@@ -21657,17 +20074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:2.0.0":
-  version: 2.0.0
-  resolution: "loader-utils@npm:2.0.0"
-  dependencies:
-    big.js: ^5.2.2
-    emojis-list: ^3.0.0
-    json5: ^2.1.2
-  checksum: 6856423131b50b6f5f259da36f498cfd7fc3c3f8bb17777cf87fdd9159e797d4ba4288d9a96415fd8da62c2906960e88f74711dee72d03a9003bddcd0d364a51
-  languageName: node
-  linkType: hard
-
 "loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0":
   version: 1.4.0
   resolution: "loader-utils@npm:1.4.0"
@@ -21849,13 +20255,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.throttle@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "lodash.throttle@npm:4.1.1"
-  checksum: 129c0a28cee48b348aef146f638ef8a8b197944d4e9ec26c1890c19d9bf5a5690fe11b655c77a4551268819b32d27f4206343e30c78961f60b561b8608c8c805
-  languageName: node
-  linkType: hard
-
 "lodash.trim@npm:^4.5.1":
   version: 4.5.1
   resolution: "lodash.trim@npm:4.5.1"
@@ -21891,7 +20290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4, lodash@npm:^4.14.0, lodash@npm:^4.17.11, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.3, lodash@npm:^4.17.4, lodash@npm:^4.7.0":
+"lodash@npm:4, lodash@npm:^4.14.0, lodash@npm:^4.17.11, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -21922,17 +20321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"log-update@npm:^3.0.0":
-  version: 3.4.0
-  resolution: "log-update@npm:3.4.0"
-  dependencies:
-    ansi-escapes: ^3.2.0
-    cli-cursor: ^2.1.0
-    wrap-ansi: ^5.0.0
-  checksum: 83e1e00c263716ce1241ebe7874d623b610566683eaac25a6d053707ba726bea8e09c6b1cd9bb6784ed8e892a79d064696afa8c73aa5dbee167e5a709f473c7c
-  languageName: node
-  linkType: hard
-
 "logalot@npm:^2.0.0, logalot@npm:^2.1.0":
   version: 2.1.0
   resolution: "logalot@npm:2.1.0"
@@ -21963,24 +20351,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loki@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "loki@npm:0.24.0"
-  dependencies:
-    "@loki/integration-react": ^0.24.0
-    "@loki/integration-react-native": ^0.24.0
-    "@loki/integration-vue": ^0.24.0
-    "@loki/runner": ^0.24.0
-    "@loki/target-chrome-app": ^0.24.0
-    "@loki/target-chrome-docker": ^0.24.0
-    "@loki/target-native-android-emulator": ^0.24.0
-    "@loki/target-native-ios-simulator": ^0.24.0
-  bin:
-    loki: bin/loki
-  checksum: 3c22b8ec0abec5acb5347ad877161c44a5585376c4564e9226e8cfe13711bc281832252c5a133d0e1f470034b11e98ac836f2229594c821d7135e258cd9797c7
-  languageName: node
-  linkType: hard
-
 "long@npm:^2.4.0":
   version: 2.4.0
   resolution: "long@npm:2.4.0"
@@ -22009,19 +20379,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"looks-same@npm:^4.0.0":
-  version: 4.1.0
-  resolution: "looks-same@npm:4.1.0"
-  dependencies:
-    color-diff: ^1.1.0
-    concat-stream: ^1.6.2
-    lodash: ^4.17.3
-    parse-color: ^1.0.0
-    pngjs: ^3.3.3
-  checksum: 80715d2ac8dd5326921c1f1252c38910747c3a5f803ac88e093e5c9e0fc55d72abad1e0876dc77b7c1ee75d5b237271a3ba753555d96185a0ab06d2ce27d9485
-  languageName: node
-  linkType: hard
-
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -22099,7 +20456,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lowlight@npm:^1.14.0":
+"lowlight@npm:^1.17.0":
   version: 1.20.0
   resolution: "lowlight@npm:1.20.0"
   dependencies:
@@ -22338,15 +20695,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.1.3":
-  version: 7.1.7
-  resolution: "markdown-to-jsx@npm:7.1.7"
-  peerDependencies:
-    react: ">= 0.14.0"
-  checksum: b2c0ea7d0988fad0c709989b3b1b3a5600d1e80b60266f9618386f7afead4a6b5eba9ee1a3943df6a3dcb1599ea89e58467d1b17b6dd3af3c60984c60a85d06d
-  languageName: node
-  linkType: hard
-
 "marked@npm:^0.7.0":
   version: 0.7.0
   resolution: "marked@npm:0.7.0"
@@ -22356,13 +20704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marky@npm:^1.2.2":
-  version: 1.2.4
-  resolution: "marky@npm:1.2.4"
-  checksum: b6f555f62af5a867429af48a6e3154cfa271c0a3b49f2c7373298cde5592264019c03254dff65d9d4d4a5d8b6ef77ae749498c9c563bbd72b5415aebdb61988d
-  languageName: node
-  linkType: hard
-
 "match-sorter@npm:^6.0.2":
   version: 6.3.1
   resolution: "match-sorter@npm:6.3.1"
@@ -22662,7 +21003,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^3.3.0":
+"meow@npm:^3.1.0, meow@npm:^3.3.0":
   version: 3.7.0
   resolution: "meow@npm:3.7.0"
   dependencies:
@@ -23659,7 +22000,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.1":
+"nanoid@npm:^3.3.1":
   version: 3.3.2
   resolution: "nanoid@npm:3.3.2"
   bin:
@@ -23701,16 +22042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nats@npm:^2.4.0":
-  version: 2.6.1
-  resolution: "nats@npm:2.6.1"
-  dependencies:
-    nkeys.js: ^1.0.0-9
-  checksum: 554b0b1e9b4cf3638da06a08549fd76759f317c9cb13caadb10caa5028273f970d8917dc913b26ffaf17b6a043320ce75885ed04ed7f1362ffcff002507caf87
-  languageName: node
-  linkType: hard
-
-"nats@npm:^2.6.1":
+"nats@npm:^2.4.0, nats@npm:^2.6.1":
   version: 2.7.1
   resolution: "nats@npm:2.7.1"
   dependencies:
@@ -24062,10 +22394,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "node-releases@npm:2.0.3"
-  checksum: 5e555fbbebb3343a5d1e5f4e10e1737998bedc57472a35027410d17b2678ed9bc0e5fae008f513798a960eb8687159331b1f46f82a3210d39bd7c40d3c9dcead
+"node-releases@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "node-releases@npm:2.0.5"
+  checksum: e85d949addd19f8827f32569d2be5751e7812ccf6cc47879d49f79b5234ff4982225e39a3929315f96370823b070640fb04d79fc0ddec8b515a969a03493a42f
   languageName: node
   linkType: hard
 
@@ -24199,13 +22531,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-url@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "normalize-url@npm:6.1.0"
-  checksum: 4a4944631173e7d521d6b80e4c85ccaeceb2870f315584fa30121f505a6dfd86439c5e3fdd8cd9e0e291290c41d0c3599f0cb12ab356722ed242584c30348e50
-  languageName: node
-  linkType: hard
-
 "npm-bundled@npm:^1.0.1":
   version: 1.1.2
   resolution: "npm-bundled@npm:1.1.2"
@@ -24431,7 +22756,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-keys@npm:^1.0.12, object-keys@npm:^1.1.1":
+"object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
   checksum: b363c5e7644b1e1b04aa507e88dcb8e3a2f52b6ffd0ea801e4c7a62d5aa559affe21c55a07fd4b1fd55fc03a33c610d73426664b20032405d7b92a1414c34d6a
@@ -24499,16 +22824,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.hasown@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "object.hasown@npm:1.1.0"
-  dependencies:
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-  checksum: 5c5d0b1b793514609f7a635f3110fbd346e142c9afd2485b802775e1ef6c90e48ff6e8e8744927933370ba30964e21af9c5fcf782b47f34d650aa6b277565330
-  languageName: node
-  linkType: hard
-
 "object.hasown@npm:^1.1.1":
   version: 1.1.1
   resolution: "object.hasown@npm:1.1.1"
@@ -24638,6 +22953,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "open@npm:8.4.0"
+  dependencies:
+    define-lazy-prop: ^2.0.0
+    is-docker: ^2.1.1
+    is-wsl: ^2.2.0
+  checksum: e9545bec64cdbf30a0c35c1bdc310344adf8428a117f7d8df3c0af0a0a24c513b304916a6d9b11db0190ff7225c2d578885080b761ed46a3d5f6f1eebb98b63c
+  languageName: node
+  linkType: hard
+
 "opencollective-postinstall@npm:^2.0.2":
   version: 2.0.3
   resolution: "opencollective-postinstall@npm:2.0.3"
@@ -24762,17 +23088,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"os-locale@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "os-locale@npm:3.1.0"
-  dependencies:
-    execa: ^1.0.0
-    lcid: ^2.0.0
-    mem: ^4.0.0
-  checksum: 53c542b11af3c5fe99624b09c7882b6944f9ae7c69edbc6006b7d42cff630b1f7fd9d63baf84ed31d1ef02b34823b6b31f23a1ecdd593757873d716bc6374099
-  languageName: node
-  linkType: hard
-
 "os-tmpdir@npm:^1.0.0, os-tmpdir@npm:~1.0.2":
   version: 1.0.2
   resolution: "os-tmpdir@npm:1.0.2"
@@ -24790,21 +23105,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"osnap@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "osnap@npm:1.1.0"
-  dependencies:
-    execa: ^0.6.3
-    minimist: ^1.2.0
-    pify: ^3.0.0
-    tempfile: ^2.0.0
-    which: ^1.2.14
-  bin:
-    osnap: bin/osnap
-  checksum: 8f975a0713405d6448faa28f9dcd8a23c2a28a74b18c9b19bde93f805cb56c4d743fa84be463ad78f9a1c36b9a8d8b9b8109ac15044be64332224eb433bdc965
-  languageName: node
-  linkType: hard
-
 "outdent@npm:~0.8.0":
   version: 0.8.0
   resolution: "outdent@npm:0.8.0"
@@ -24812,13 +23112,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"overlayscrollbars@npm:^1.13.1":
-  version: 1.13.1
-  resolution: "overlayscrollbars@npm:1.13.1"
-  checksum: 6f3be25b60dd9c2adcb6bd42d51f1ac72a1538247dfa991f5238602fc941ede0ec1fb0f04d4e1367d85ac2e95bdb27d81e05c7e3bfdff585c48a5cd611af9271
-  languageName: node
-  linkType: hard
-
 "ow@npm:^0.13.2":
   version: 0.13.2
   resolution: "ow@npm:0.13.2"
@@ -24954,7 +23247,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-limit@npm:^3.0.1, p-limit@npm:^3.0.2, p-limit@npm:^3.1.0":
+"p-limit@npm:^3.0.1, p-limit@npm:^3.0.2":
   version: 3.1.0
   resolution: "p-limit@npm:3.1.0"
   dependencies:
@@ -25092,7 +23385,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-retry@npm:^4.0.0":
+"p-retry@npm:^4.0.0, p-retry@npm:^4.5.0":
   version: 4.6.2
   resolution: "p-retry@npm:4.6.2"
   dependencies:
@@ -25102,16 +23395,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-retry@npm:^4.5.0":
-  version: 4.6.1
-  resolution: "p-retry@npm:4.6.1"
-  dependencies:
-    "@types/retry": ^0.12.0
-    retry: ^0.13.1
-  checksum: e6d540413bb3d0b96e0db44f74a7af1dce41f5005e6e84d617960110b148348c86a3987be07797749e3ddd55817dd3a8ffd6eae3428758bc2994d987e48c3a70
-  languageName: node
-  linkType: hard
-
 "p-timeout@npm:^1.1.1":
   version: 1.2.1
   resolution: "p-timeout@npm:1.2.1"
@@ -25250,15 +23533,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-color@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "parse-color@npm:1.0.0"
-  dependencies:
-    color-convert: ~0.5.0
-  checksum: 0e6e1821eacb4cd21dff380eceafa229052fe22b9951a891c7cac6080a681f29cb2ac50050398ae6cba089cde87f640bcaf8439bf16d468de029691275c175ef
-  languageName: node
-  linkType: hard
-
 "parse-entities@npm:^2.0.0":
   version: 2.0.0
   resolution: "parse-entities@npm:2.0.0"
@@ -25311,25 +23585,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-path@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "parse-path@npm:4.0.3"
-  dependencies:
-    is-ssh: ^1.3.0
-    protocols: ^1.4.0
-    qs: ^6.9.4
-    query-string: ^6.13.8
-  checksum: d1704c0027489b64838c608c3f075fe3599c18a7413fa92e7074a0157e5bcc1a4ef73e7ae9bd9dbf5fad1809137437310cc69a57e5f5130ea17226165f3e942a
-  languageName: node
-  linkType: hard
-
-"parse-repo@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "parse-repo@npm:1.0.4"
-  checksum: b0d32a182cdb2287adfb1d9141f7f694890e0ad659e80f75ec2e266339c5a728328f08cb72caf85cb7524b5dbbc4122b17efdd48e0d17d96ed9863ec512e0141
-  languageName: node
-  linkType: hard
-
 "parse-srcset@npm:^1.0.2":
   version: 1.0.2
   resolution: "parse-srcset@npm:1.0.2"
@@ -25337,18 +23592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-url@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "parse-url@npm:6.0.0"
-  dependencies:
-    is-ssh: ^1.3.0
-    normalize-url: ^6.1.0
-    parse-path: ^4.0.0
-    protocols: ^1.4.0
-  checksum: 6b680d1fdfba15fc54106c1130540bf61a415bc3085351b8609a213b2fdf551c53ec8d32703d8ea9b6c5fbf2da92ee1593c99f682032512b15ce87f9013d2a39
-  languageName: node
-  linkType: hard
-
 "parse5-htmlparser2-tree-adapter@npm:^6.0.1":
   version: 6.0.1
   resolution: "parse5-htmlparser2-tree-adapter@npm:6.0.1"
@@ -25956,13 +24199,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pngjs@npm:^3.3.3":
-  version: 3.4.0
-  resolution: "pngjs@npm:3.4.0"
-  checksum: 8bd40bd698abd16b72c97b85cb858c80894fbedc76277ce72a784aa441e14795d45d9856e97333ca469b34b67528860ffc8a7317ca6beea349b645366df00bcd
-  languageName: node
-  linkType: hard
-
 "pngquant-bin@npm:^5.0.0":
   version: 5.0.2
   resolution: "pngquant-bin@npm:5.0.2"
@@ -25986,12 +24222,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"polished@npm:^4.0.5":
-  version: 4.2.1
-  resolution: "polished@npm:4.2.1"
+"polished@npm:^4.2.2":
+  version: 4.2.2
+  resolution: "polished@npm:4.2.2"
   dependencies:
     "@babel/runtime": ^7.17.8
-  checksum: a5dd8393894a394fef4c1350fa85ded92fe6dc918f9401948bb7e949bb6372a4fa72db3e1f03f65b0aee564dd106c000f3400483acff400a531d177682ca54c8
+  checksum: 97fb927dc55cd34aeb11b31ae2a3332463f114351c86e8aa6580d7755864a0120164fdc3770e6160c8b1775052f0eda14db9a6e34402cd4b08ab2d658a593725
   languageName: node
   linkType: hard
 
@@ -26881,7 +25117,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prismjs@npm:^1.21.0, prismjs@npm:~1.27.0":
+"prismjs@npm:^1.27.0":
+  version: 1.28.0
+  resolution: "prismjs@npm:1.28.0"
+  checksum: bde93fb2beb45b7243219fc53855f59ee54b3fa179f315e8f9d66244d756ef984462e10561bbdc6713d3d7e051852472d7c284f5794a8791eeaefea2fb910b16
+  languageName: node
+  linkType: hard
+
+"prismjs@npm:~1.27.0":
   version: 1.27.0
   resolution: "prismjs@npm:1.27.0"
   checksum: 85c7f4a3e999073502cc9e1882af01e3709706369ec254b60bff1149eda701f40d02512acab956012dc7e61cfd61743a3a34c1bd0737e8dbacd79141e5698bbc
@@ -27070,13 +25313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"protocols@npm:^1.1.0, protocols@npm:^1.4.0":
-  version: 1.4.8
-  resolution: "protocols@npm:1.4.8"
-  checksum: 2d555c013df0b05402970f67f7207c9955a92b1d13ffa503c814b5fe2f6dde7ac6a03320e0975c1f5832b0113327865e0b3b28bfcad023c25ddb54b53fab8684
-  languageName: node
-  linkType: hard
-
 "proxy-addr@npm:~2.0.7":
   version: 2.0.7
   resolution: "proxy-addr@npm:2.0.7"
@@ -27237,7 +25473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.10.3, qs@npm:^6.10.0, qs@npm:^6.5.1, qs@npm:^6.9.4, qs@npm:^6.9.6":
+"qs@npm:6.10.3":
   version: 6.10.3
   resolution: "qs@npm:6.10.3"
   dependencies:
@@ -27260,7 +25496,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.10.3":
+"qs@npm:^6.10.0, qs@npm:^6.10.3, qs@npm:^6.5.1, qs@npm:^6.9.4, qs@npm:^6.9.6":
   version: 6.10.4
   resolution: "qs@npm:6.10.4"
   dependencies:
@@ -27297,7 +25533,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"query-string@npm:^6.13.1, query-string@npm:^6.13.8":
+"query-string@npm:^6.13.1":
   version: 6.14.1
   resolution: "query-string@npm:6.14.1"
   dependencies:
@@ -27418,13 +25654,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:^0.26.1":
-  version: 0.26.1
-  resolution: "ramda@npm:0.26.1"
-  checksum: 19c2730e44c129538151ae034c89be9b2c6a4ccc7c65cff57497418bc532ce09282f98cd927c39b0b03c6bc3f1d1a12d822b7b07f96a1634f4958a6c05b7b384
-  languageName: node
-  linkType: hard
-
 "randexp@npm:0.4.6":
   version: 0.4.6
   resolution: "randexp@npm:0.4.6"
@@ -27614,7 +25843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen-typescript@npm:^2.0.0":
+"react-docgen-typescript@npm:^2.1.1":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
   peerDependencies:
@@ -27643,19 +25872,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.1.0":
-  version: 18.1.0
-  resolution: "react-dom@npm:18.1.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    scheduler: ^0.22.0
-  peerDependencies:
-    react: ^18.1.0
-  checksum: bb0d48eeb0b297c79c2a03978baa29f5b3ff7ba3d070b21e34c9af1a6e7fdf0ca8b8d73e41f9214d91ad40eeb6d1f3559f884cbbc338713374a51320637c23df
-  languageName: node
-  linkType: hard
-
-"react-dom@npm:~17.0.2":
+"react-dom@npm:~17, react-dom@npm:~17.0.2":
   version: 17.0.2
   resolution: "react-dom@npm:17.0.2"
   dependencies:
@@ -27668,19 +25885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-draggable@npm:^4.4.3":
-  version: 4.4.4
-  resolution: "react-draggable@npm:4.4.4"
-  dependencies:
-    clsx: ^1.1.1
-    prop-types: ^15.6.0
-  peerDependencies:
-    react: ">= 16.3.0"
-    react-dom: ">= 16.3.0"
-  checksum: b8258a58938c261a79f1b9ffd67774283c1ac732423c1c9c9f5fe4d17a06886edd659891e445ba089828ca59f1885e5b909262e24cf60640b8ed05c8499c88bb
-  languageName: node
-  linkType: hard
-
 "react-element-to-jsx-string@npm:^14.3.4":
   version: 14.3.4
   resolution: "react-element-to-jsx-string@npm:14.3.4"
@@ -27695,29 +25899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "react-fast-compare@npm:3.2.0"
-  checksum: 8ef272c825ae329f61633ce4ce7f15aa5b84e5214d88bc0823880236e03e985a13195befa2c7a4eda7db3b017dc7985729152d88445823f652403cf36c2b86aa
-  languageName: node
-  linkType: hard
-
-"react-helmet-async@npm:^1.0.7":
-  version: 1.2.3
-  resolution: "react-helmet-async@npm:1.2.3"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    invariant: ^2.2.4
-    prop-types: ^15.7.2
-    react-fast-compare: ^3.2.0
-    shallowequal: ^1.1.0
-  peerDependencies:
-    react: ^16.6.0 || ^17.0.0
-    react-dom: ^16.6.0 || ^17.0.0
-  checksum: af7041314f6ebaefa64f3c06f75cf1ad62602b93228798615c2ca3365065688ee2b8c58bde98a9ae0d728aecfda5a757e9fc7695da3af2a504ff7e5291c716c9
-  languageName: node
-  linkType: hard
-
 "react-hook-form@npm:^7.30.0":
   version: 7.30.0
   resolution: "react-hook-form@npm:7.30.0"
@@ -27779,14 +25960,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:17.0.2, react-is@npm:^17.0.1, react-is@npm:^17.0.2":
+"react-is@npm:17.0.2, react-is@npm:^17.0.1":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
+"react-is@npm:^16.13.1, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -27826,6 +26007,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-merge-refs@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "react-merge-refs@npm:1.1.0"
+  checksum: 90884352999002d868ab9f1bcfe3222fb0f2178ed629f1da7e98e5a9b02a2c96b4aa72800db92aabd69d2483211b4be57a2088e89a11a0b660e7ada744d4ddf7
+  languageName: node
+  linkType: hard
+
 "react-motion@npm:^0.5.2":
   version: 0.5.2
   resolution: "react-motion@npm:0.5.2"
@@ -27839,33 +26027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-popper-tooltip@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "react-popper-tooltip@npm:3.1.1"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    "@popperjs/core": ^2.5.4
-    react-popper: ^2.2.4
-  peerDependencies:
-    react: ^16.6.0 || ^17.0.0
-    react-dom: ^16.6.0 || ^17.0.0
-  checksum: c820122a4fdce46ff446b2c7bfe45727de42eacf1c2981fe8f8562da246a289dc7349f0732e36390a08ce50717dc52c4e8ab8e418af19cdd2ded7795ea6b8017
-  languageName: node
-  linkType: hard
-
-"react-popper@npm:^2.2.4":
-  version: 2.2.5
-  resolution: "react-popper@npm:2.2.5"
-  dependencies:
-    react-fast-compare: ^3.0.1
-    warning: ^4.0.2
-  peerDependencies:
-    "@popperjs/core": ^2.0.0
-    react: ^16.8.0 || ^17
-  checksum: 915fcf08e1da4fd48a200074fcdd936f601ee2173f1e730cfed8a54fd47716aa8bf9cce2392463e3bcbe64a096d0baf463809ed2874b94d3a9d430ae6d817b5d
-  languageName: node
-  linkType: hard
-
 "react-query@npm:^3.38.0":
   version: 3.38.0
   resolution: "react-query@npm:3.38.0"
@@ -27884,20 +26045,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-reconciler@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "react-reconciler@npm:0.24.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-    scheduler: ^0.18.0
-  peerDependencies:
-    react: ^16.0.0
-  checksum: c9c74208325a940ca36e031b71499f6d8e62e96ee673d69e35cc9e6a661aa746a2b0750f2ffcd1bae0a29eaf3d127dc8197ab7e801e6a3a2ab7d45a71b464630
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.11.0":
   version: 0.11.0
   resolution: "react-refresh@npm:0.11.0"
@@ -27905,30 +26052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.0.0":
-  version: 6.3.0
-  resolution: "react-router-dom@npm:6.3.0"
-  dependencies:
-    history: ^5.2.0
-    react-router: 6.3.0
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
-  languageName: node
-  linkType: hard
-
-"react-router@npm:6.3.0, react-router@npm:^6.0.0":
-  version: 6.3.0
-  resolution: "react-router@npm:6.3.0"
-  dependencies:
-    history: ^5.2.0
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 7be673f5e72104be01e6ab274516bdb932efd93305243170690f6560e3bd1035dd1df3d3c9ce1e0f452638a2529f43a1e77dcf0934fc8031c4783da657be13ca
-  languageName: node
-  linkType: hard
-
 "react-select@npm:^3.2.0":
   version: 3.2.0
   resolution: "react-select@npm:3.2.0"
@@ -27940,51 +26063,26 @@ __metadata:
     memoize-one: ^5.0.0
     prop-types: ^15.6.0
     react-input-autosize: ^3.0.0
-    react-transition-group: ^4.3.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: 082c818369fb8c7ce50bbd51260b21794f58dd41e9df5e0798c10e10478fb44b9fd88247f24720d5b443d77a6ec8afa733ecdd15a7722fde85c27bb87c379962
-  languageName: node
-  linkType: hard
-
-"react-sizeme@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "react-sizeme@npm:3.0.2"
-  dependencies:
-    element-resize-detector: ^1.2.2
-    invariant: ^2.2.4
-    shallowequal: ^1.1.0
-    throttle-debounce: ^3.0.1
-  checksum: 97cb852c24bbd50acb310da89df564e0d069415f6635676dae3d3bdc583ece88090c0f2ee88a6b0dc36d2793af4a11e83bf6bbb41b86225dd0cf338e8f7e8552
+    react-transition-group: ^4.3.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 082c818369fb8c7ce50bbd51260b21794f58dd41e9df5e0798c10e10478fb44b9fd88247f24720d5b443d77a6ec8afa733ecdd15a7722fde85c27bb87c379962
   languageName: node
   linkType: hard
 
-"react-syntax-highlighter@npm:^13.5.3":
-  version: 13.5.3
-  resolution: "react-syntax-highlighter@npm:13.5.3"
+"react-syntax-highlighter@npm:^15.4.5":
+  version: 15.5.0
+  resolution: "react-syntax-highlighter@npm:15.5.0"
   dependencies:
     "@babel/runtime": ^7.3.1
-    highlight.js: ^10.1.1
-    lowlight: ^1.14.0
-    prismjs: ^1.21.0
-    refractor: ^3.1.0
+    highlight.js: ^10.4.1
+    lowlight: ^1.17.0
+    prismjs: ^1.27.0
+    refractor: ^3.6.0
   peerDependencies:
     react: ">= 0.14.0"
-  checksum: fa03880a887bc0c79c0be25fc35924980d75f684f8d05620272bdfcbb9f119f45bb7f8ddd92b9e944103964a4e094b99750d0b19c992fd86f2ce0b70266e89c3
-  languageName: node
-  linkType: hard
-
-"react-textarea-autosize@npm:^8.3.0":
-  version: 8.3.3
-  resolution: "react-textarea-autosize@npm:8.3.3"
-  dependencies:
-    "@babel/runtime": ^7.10.2
-    use-composed-ref: ^1.0.0
-    use-latest: ^1.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-  checksum: da3d0192825df3d9f27eef33e7eddf928359a7e3e2b01ae7f7f672ecf4e5c1f7a34f27bdde9ccc24e2e9fbe1d1b9dd2a39c7d47323c9bdf63e7b9bd05c325a71
+  checksum: c082b48f30f8ba8d0c55ed1d761910630860077c7ff5793c4c912adcb5760df06436ed0ad62be0de28113aac9ad2af55eccd995f8eee98df53382e4ced2072fb
   languageName: node
   linkType: hard
 
@@ -28016,17 +26114,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.12.0":
-  version: 16.14.0
-  resolution: "react@npm:16.14.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-  checksum: 8484f3ecb13414526f2a7412190575fc134da785c02695eb92bb6028c930bfe1c238d7be2a125088fec663cc7cda0a3623373c46807cf2c281f49c34b79881ac
-  languageName: node
-  linkType: hard
-
 "react@npm:~17.0.2":
   version: 17.0.2
   resolution: "react@npm:17.0.2"
@@ -28313,7 +26400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"refractor@npm:^3.1.0":
+"refractor@npm:^3.6.0":
   version: 3.6.0
   resolution: "refractor@npm:3.6.0"
   dependencies:
@@ -28354,22 +26441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
+"regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
   version: 0.13.9
   resolution: "regenerator-runtime@npm:0.13.9"
   checksum: 65ed455fe5afd799e2897baf691ca21c2772e1a969d19bb0c4695757c2d96249eb74ee3553ea34a91062b2a676beedf630b4c1551cc6299afb937be1426ec55e
   languageName: node
   linkType: hard
 
-"regenerator-transform@npm:^0.14.2":
-  version: 0.14.5
-  resolution: "regenerator-transform@npm:0.14.5"
-  dependencies:
-    "@babel/runtime": ^7.8.4
-  checksum: a467a3b652b4ec26ff964e9c5f1817523a73fc44cb928b8d21ff11aebeac5d10a84d297fe02cea9f282bcec81a0b0d562237da69ef0f40a0160b30a4fa98bc94
-  languageName: node
-  linkType: hard
-
 "regenerator-transform@npm:^0.15.0":
   version: 0.15.0
   resolution: "regenerator-transform@npm:0.15.0"
@@ -28740,13 +26818,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-main-filename@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "require-main-filename@npm:1.0.1"
-  checksum: 1fef30754da961f4e13c450c3eb60c7ae898a529c6ad6fa708a70bd2eed01564ceb299187b2899f5562804d797a059f39a5789884d0ac7b7ae1defc68fba4abf
-  languageName: node
-  linkType: hard
-
 "require-main-filename@npm:^2.0.0":
   version: 2.0.0
   resolution: "require-main-filename@npm:2.0.0"
@@ -29148,13 +27219,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rx@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "rx@npm:4.1.0"
-  checksum: 64edd278f2e32361bdbaa44bd503e2d1caf1331cece2db87852925b4f58f407563d879ce9df0ac2a593b4588c552437e18bbd53ea361f0b3f2f274a7a5cc4c21
-  languageName: node
-  linkType: hard
-
 "rxjs@npm:^6.4.0, rxjs@npm:^6.6.0":
   version: 6.6.7
   resolution: "rxjs@npm:6.6.7"
@@ -29311,16 +27375,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "scheduler@npm:0.18.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b6e0b9e0086b200b114f1ef7f9fcac966ad5d84cd3b1867174be0549d3ff713d1fd22d5574cb024b7d3eadf3307f2afc1cb5bfbf28b0d3bc34b200183800fcae
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.20.2":
   version: 0.20.2
   resolution: "scheduler@npm:0.20.2"
@@ -29331,15 +27385,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.22.0":
-  version: 0.22.0
-  resolution: "scheduler@npm:0.22.0"
-  dependencies:
-    loose-envify: ^1.1.0
-  checksum: a8ef5cab769c020cd6382ad9ecc3f72dbde56a50a36639b3a42ad9c11f7724f03700bcad373044059b8067d4a6365154dc7c0ca8027ef20ff4900cf58a0fc2c5
-  languageName: node
-  linkType: hard
-
 "schema-utils@npm:2.7.0":
   version: 2.7.0
   resolution: "schema-utils@npm:2.7.0"
@@ -29373,7 +27418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.0.0":
+"schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.0, schema-utils@npm:^3.1.1":
   version: 3.1.1
   resolution: "schema-utils@npm:3.1.1"
   dependencies:
@@ -29569,7 +27614,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serialize-javascript@npm:6.0.0":
+"serialize-javascript@npm:6.0.0, serialize-javascript@npm:^6.0.0":
   version: 6.0.0
   resolution: "serialize-javascript@npm:6.0.0"
   dependencies:
@@ -29732,13 +27777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "shallowequal@npm:1.1.0"
-  checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
-  languageName: node
-  linkType: hard
-
 "sharp@npm:^0.30.6":
   version: 0.30.6
   resolution: "sharp@npm:0.30.6"
@@ -29804,7 +27842,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shelljs@npm:^0.8.1, shelljs@npm:^0.8.3, shelljs@npm:^0.8.4":
+"shelljs@npm:^0.8.4":
   version: 0.8.5
   resolution: "shelljs@npm:0.8.5"
   dependencies:
@@ -29929,17 +27967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slice-ansi@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "slice-ansi@npm:3.0.0"
-  dependencies:
-    ansi-styles: ^4.0.0
-    astral-regex: ^2.0.0
-    is-fullwidth-code-point: ^3.0.0
-  checksum: 5ec6d022d12e016347e9e3e98a7eb2a592213a43a65f1b61b74d2c78288da0aded781f665807a9f3876b9daa9ad94f64f77d7633a0458876c3a4fdc4eb223f24
-  languageName: node
-  linkType: hard
-
 "slice-ansi@npm:^4.0.0":
   version: 4.0.0
   resolution: "slice-ansi@npm:4.0.0"
@@ -30205,7 +28232,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.7.3, source-map@npm:~0.7.2":
+"source-map@npm:^0.7.3":
   version: 0.7.3
   resolution: "source-map@npm:0.7.3"
   checksum: cd24efb3b8fa69b64bf28e3c1b1a500de77e84260c5b7f2b873f88284df17974157cc88d386ee9b6d081f08fdd8242f3fc05c953685a6ad81aad94c7393dedea
@@ -30668,16 +28695,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-length@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "string-length@npm:3.1.0"
-  dependencies:
-    astral-regex: ^1.0.0
-    strip-ansi: ^5.2.0
-  checksum: b09ccacc2f96ba3ade9f2b3163901e05f668a2b14bc353853165c1f3b19185421ac004e9957b62827083d163e049c41a1b15170e252eaf44fdd686553c372714
-  languageName: node
-  linkType: hard
-
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"
@@ -30789,7 +28806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.6, string.prototype.matchall@npm:^4.0.7":
+"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.7":
   version: 4.0.7
   resolution: "string.prototype.matchall@npm:4.0.7"
   dependencies:
@@ -30827,16 +28844,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimend@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "string.prototype.trimend@npm:1.0.4"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-  checksum: 17e5aa45c3983f582693161f972c1c1fa4bbbdf22e70e582b00c91b6575f01680dc34e83005b98e31abe4d5d29e0b21fcc24690239c106c7b2315aade6a898ac
-  languageName: node
-  linkType: hard
-
 "string.prototype.trimend@npm:^1.0.5":
   version: 1.0.5
   resolution: "string.prototype.trimend@npm:1.0.5"
@@ -30848,16 +28855,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimstart@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "string.prototype.trimstart@npm:1.0.4"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-  checksum: 3fb06818d3cccac5fa3f5f9873d984794ca0e9f6616fae6fcc745885d9efed4e17fe15f832515d9af5e16c279857fdbffdfc489ca4ed577811b017721b30302f
-  languageName: node
-  linkType: hard
-
 "string.prototype.trimstart@npm:^1.0.5":
   version: 1.0.5
   resolution: "string.prototype.trimstart@npm:1.0.5"
@@ -31378,6 +29375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tapable@npm:^2.1.1, tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 3b7a1b4d86fa940aad46d9e73d1e8739335efd4c48322cb37d073eb6f80f5281889bf0320c6d8ffcfa1a0dd5bfdbd0f9d037e252ef972aca595330538aac4d51
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1":
   version: 2.1.1
   resolution: "tar-fs@npm:2.1.1"
@@ -31469,9 +29473,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"telejson@npm:^5.3.2, telejson@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "telejson@npm:5.3.3"
+"telejson@npm:^6.0.8":
+  version: 6.0.8
+  resolution: "telejson@npm:6.0.8"
   dependencies:
     "@types/is-function": ^1.0.0
     global: ^4.4.0
@@ -31481,7 +29485,7 @@ __metadata:
     isobject: ^4.0.0
     lodash: ^4.17.21
     memoizerific: ^1.11.3
-  checksum: 16a3152bd49e1eb634856de8bf45d82e9b0ccea5ac4ae0092bced4abbd5536a60fb0a2a20fdd930b56242125a51baa86a3d15b7beb8d3640353548c7b5c2516a
+  checksum: 7411a5e78a35720bd0654a544409d3ce467b1dbb2073c73f36476b4c0905d97dbf539d6cbae737bb1fd8c872c2058f2a5450163a15117ed3fa031b2a2b8b33f6
   languageName: node
   linkType: hard
 
@@ -31516,17 +29520,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tempy@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "tempy@npm:0.3.0"
-  dependencies:
-    temp-dir: ^1.0.0
-    type-fest: ^0.3.1
-    unique-string: ^1.0.0
-  checksum: f81ef72a7ee6d512439af8d8891e4fc6595309451910d7ac9d760f1242a1f87272b2b97c830c8f74aaa93a3aa550483bb16db17e6345601f64d614d240edc322
-  languageName: node
-  linkType: hard
-
 "term-size@npm:^1.2.0":
   version: 1.2.0
   resolution: "term-size@npm:1.2.0"
@@ -31584,6 +29577,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"terser-webpack-plugin@npm:^5.1.3":
+  version: 5.3.3
+  resolution: "terser-webpack-plugin@npm:5.3.3"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.7
+    jest-worker: ^27.4.5
+    schema-utils: ^3.1.1
+    serialize-javascript: ^6.0.0
+    terser: ^5.7.2
+  peerDependencies:
+    webpack: ^5.1.0
+  peerDependenciesMeta:
+    "@swc/core":
+      optional: true
+    esbuild:
+      optional: true
+    uglify-js:
+      optional: true
+  checksum: 4b8d508d8a0f6e604addb286975f1fa670f8c3964a67abc03a7cfcfd4cdeca4b07dda6655e1c4425427fb62e4d2b0ca59d84f1b2cd83262ff73616d5d3ccdeb5
+  languageName: node
+  linkType: hard
+
 "terser@npm:^4.1.2, terser@npm:^4.6.3":
   version: 4.8.0
   resolution: "terser@npm:4.8.0"
@@ -31597,17 +29612,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.3.4":
-  version: 5.12.1
-  resolution: "terser@npm:5.12.1"
+"terser@npm:^5.3.4, terser@npm:^5.7.2":
+  version: 5.14.1
+  resolution: "terser@npm:5.14.1"
   dependencies:
+    "@jridgewell/source-map": ^0.3.2
     acorn: ^8.5.0
     commander: ^2.20.0
-    source-map: ~0.7.2
     source-map-support: ~0.5.20
   bin:
     terser: bin/terser
-  checksum: dd33af5d87a1159bcc38f354707505f1449a33d1491c512e9536f11fea7c3474cdc40e2e5fdf75f58658cfaab8ef47cb7454acd6406b2ce487675cb1978c6275
+  checksum: 7b0e51f3d193a11cad82f07e3b0c1d62122eec786f809bdf2a54b865aaa1450872c3a7b6c33b5a40e264834060ffc1d4e197f971a76da5b0137997d756eb7548
   languageName: node
   linkType: hard
 
@@ -31665,13 +29680,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"throttle-debounce@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "throttle-debounce@npm:3.0.1"
-  checksum: e34ef638e8df3a9154249101b68afcbf2652a139c803415ef8a2f6a8bc577bcd4d79e4bb914ad3cd206523ac78b9fb7e80885bfa049f64fbb1927f99d98b5736
-  languageName: node
-  linkType: hard
-
 "through2@npm:^2.0.0, through2@npm:~2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
@@ -31947,18 +29955,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"transliteration@npm:^1.6.6":
-  version: 1.6.6
-  resolution: "transliteration@npm:1.6.6"
-  dependencies:
-    yargs: ^12.0.1
-  bin:
-    slugify: lib/bin/slugify
-    transliterate: lib/bin/transliterate
-  checksum: bfafc172f36b92dc0b5ac5bbdf548652fc310bea9605f60b45dbd9f7c91a72ed016a59806e8afe31658c10e5f56d79d412bacdb914b81cbbbdb43481174ab787
-  languageName: node
-  linkType: hard
-
 "trim-newlines@npm:^1.0.0":
   version: 1.0.0
   resolution: "trim-newlines@npm:1.0.0"
@@ -32140,7 +30136,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1, tslib@npm:^1.9.0":
+"tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
@@ -32441,13 +30437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "type-fest@npm:0.3.1"
-  checksum: 347ff46c2285616635cb59f722e7f396bee81b8988b6fc1f1536b725077f2abf6ccfa22ab7a78e9b6ce7debea0e6614bbf5946cbec6674ec1bde12113af3a65c
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.5.1":
   version: 0.5.2
   resolution: "type-fest@npm:0.5.2"
@@ -32579,18 +30568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unbox-primitive@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "unbox-primitive@npm:1.0.1"
-  dependencies:
-    function-bind: ^1.1.1
-    has-bigints: ^1.0.1
-    has-symbols: ^1.0.2
-    which-boxed-primitive: ^1.0.2
-  checksum: 89d950e18fb45672bc6b3c961f1e72c07beb9640c7ceed847b571ba6f7d2af570ae1a2584cfee268b9d9ea1e3293f7e33e0bc29eaeb9f8e8a0bab057ff9e6bba
-  languageName: node
-  linkType: hard
-
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -32933,6 +30910,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"untildify@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "untildify@npm:2.1.0"
+  dependencies:
+    os-homedir: ^1.0.0
+  checksum: 071b394053fc94747d9df8c7f7ca50af41355c1207c8a0bf9f35f52b0d9ad5142a1920b018bc2b6ff04340a4f9c599ad50c9b8f4ff2c689ae52b1463ebbda94e
+  languageName: node
+  linkType: hard
+
 "unzip-response@npm:^2.0.1":
   version: 2.0.1
   resolution: "unzip-response@npm:2.0.1"
@@ -33095,41 +31081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-composed-ref@npm:^1.0.0":
-  version: 1.2.1
-  resolution: "use-composed-ref@npm:1.2.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-  checksum: 27238fef7184bfdd4be24901188d3f5fe641536a7aee0f7b435166d3c0bc958b7d84c4c512c4737422a623b07ca7ee95f5eca2fa3ea52722fcc66bc367bd32bc
-  languageName: node
-  linkType: hard
-
-"use-isomorphic-layout-effect@npm:^1.0.0":
-  version: 1.1.2
-  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
-  languageName: node
-  linkType: hard
-
-"use-latest@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "use-latest@npm:1.2.0"
-  dependencies:
-    use-isomorphic-layout-effect: ^1.0.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: f0cb3a49119e14ed46db8a946b1aa17b838b8834c8a652bde314877ede6057c55b50654a97ee802597a5839c070180195e58ea3a756b7c33db7f540642f0ddea
-  languageName: node
-  linkType: hard
-
 "use-strict@npm:1.0.1":
   version: 1.0.1
   resolution: "use-strict@npm:1.0.1"
@@ -33270,15 +31221,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:3.3.2":
-  version: 3.3.2
-  resolution: "uuid@npm:3.3.2"
-  bin:
-    uuid: ./bin/uuid
-  checksum: 8793629d2799f500aeea9fcd0aec6c4e9fbcc4d62ed42159ad96be345c3fffac1bbf61a23e18e2782600884fee05e6d4012ce4b70d0037c8e987533ae6a77870
-  languageName: node
-  linkType: hard
-
 "uuid@npm:8.0.0":
   version: 8.0.0
   resolution: "uuid@npm:8.0.0"
@@ -33487,21 +31429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wait-on@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "wait-on@npm:3.3.0"
-  dependencies:
-    "@hapi/joi": ^15.0.3
-    core-js: ^2.6.5
-    minimist: ^1.2.0
-    request: ^2.88.0
-    rx: ^4.1.0
-  bin:
-    wait-on: bin/wait-on
-  checksum: f376a8d3cb4b339c947272842adcb8ee02c66af755b13304c068f33a992c21ec2d2ce69e0cc02aafc9b8cd833c73bfad301f594658c76d750150a8b89103d2c5
-  languageName: node
-  linkType: hard
-
 "walker@npm:^1.0.7, walker@npm:~1.0.5":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"
@@ -33511,15 +31438,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: ^1.0.0
-  checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
-  languageName: node
-  linkType: hard
-
 "watchpack-chokidar2@npm:^2.0.1":
   version: 2.0.1
   resolution: "watchpack-chokidar2@npm:2.0.1"
@@ -33546,13 +31464,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack@npm:^2.2.0":
-  version: 2.3.1
-  resolution: "watchpack@npm:2.3.1"
+"watchpack@npm:^2.2.0, watchpack@npm:^2.3.1":
+  version: 2.4.0
+  resolution: "watchpack@npm:2.4.0"
   dependencies:
     glob-to-regexp: ^0.4.1
     graceful-fs: ^4.1.2
-  checksum: 70a34f92842d94b5d842980f866d568d7a467de667c96ae5759c759f46587e49265863171f4650bdbafc5f3870a28f2b4453e9e847098ec4b718b38926d47d22
+  checksum: 23d4bc58634dbe13b86093e01c6a68d8096028b664ab7139d58f0c37d962d549a940e98f2f201cecdabd6f9c340338dc73ef8bf094a2249ef582f35183d1a131
   languageName: node
   linkType: hard
 
@@ -33776,6 +31694,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-sources@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "webpack-sources@npm:3.2.3"
+  checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
+  languageName: node
+  linkType: hard
+
 "webpack-virtual-modules@npm:^0.2.2":
   version: 0.2.2
   resolution: "webpack-virtual-modules@npm:0.2.2"
@@ -33823,6 +31748,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack@npm:>=4.43.0 <6.0.0":
+  version: 5.73.0
+  resolution: "webpack@npm:5.73.0"
+  dependencies:
+    "@types/eslint-scope": ^3.7.3
+    "@types/estree": ^0.0.51
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/wasm-edit": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    acorn: ^8.4.1
+    acorn-import-assertions: ^1.7.6
+    browserslist: ^4.14.5
+    chrome-trace-event: ^1.0.2
+    enhanced-resolve: ^5.9.3
+    es-module-lexer: ^0.9.0
+    eslint-scope: 5.1.1
+    events: ^3.2.0
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.2.9
+    json-parse-even-better-errors: ^2.3.1
+    loader-runner: ^4.2.0
+    mime-types: ^2.1.27
+    neo-async: ^2.6.2
+    schema-utils: ^3.1.0
+    tapable: ^2.1.1
+    terser-webpack-plugin: ^5.1.3
+    watchpack: ^2.3.1
+    webpack-sources: ^3.2.3
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: aa434a241bad6176b68e1bf0feb1972da4dcbf27cb3d94ae24f6eb31acc37dceb9c4aae55e068edca75817bfe91f13cd20b023ac55d9b1b2f8b66a4037c9468f
+  languageName: node
+  linkType: hard
+
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"
@@ -34081,17 +32043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "wrap-ansi@npm:2.1.0"
-  dependencies:
-    string-width: ^1.0.1
-    strip-ansi: ^3.0.1
-  checksum: 2dacd4b3636f7a53ee13d4d0fe7fa2ed9ad81e9967e17231924ea88a286ec4619a78288de8d41881ee483f4449ab2c0287cde8154ba1bd0126c10271101b2ee3
-  languageName: node
-  linkType: hard
-
-"wrap-ansi@npm:^5.0.0, wrap-ansi@npm:^5.1.0":
+"wrap-ansi@npm:^5.1.0":
   version: 5.1.0
   resolution: "wrap-ansi@npm:5.1.0"
   dependencies:
@@ -34102,17 +32054,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "wrap-ansi@npm:6.2.0"
-  dependencies:
-    ansi-styles: ^4.0.0
-    string-width: ^4.1.0
-    strip-ansi: ^6.0.0
-  checksum: 6cd96a410161ff617b63581a08376f0cb9162375adeb7956e10c8cd397821f7eb2a6de24eb22a0b28401300bf228c86e50617cd568209b5f6775b93c97d2fe3a
-  languageName: node
-  linkType: hard
-
 "wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -34192,7 +32133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^7.0.0, ws@npm:^7.2.0, ws@npm:^7.4.6":
+"ws@npm:^7.0.0, ws@npm:^7.4.6":
   version: 7.5.7
   resolution: "ws@npm:7.5.7"
   peerDependencies:
@@ -34237,6 +32178,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"x-default-browser@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "x-default-browser@npm:0.4.0"
+  dependencies:
+    default-browser-id: ^1.0.4
+  dependenciesMeta:
+    default-browser-id:
+      optional: true
+  bin:
+    x-default-browser: bin/x-default-browser.js
+  checksum: 9649fe6b4b91de93d5a48a5042b55a6e15c87d2514bc4f2e12582f8b25c1a6810fafc6f4c454fb531540e431e32a0a26ac130e418c0ce5c6ca892fb01945ea9e
+  languageName: node
+  linkType: hard
+
 "xdg-basedir@npm:^3.0.0":
   version: 3.0.0
   resolution: "xdg-basedir@npm:3.0.0"
@@ -34385,7 +32340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"y18n@npm:^3.2.1 || ^4.0.0, y18n@npm:^4.0.0":
+"y18n@npm:^4.0.0":
   version: 4.0.3
   resolution: "y18n@npm:4.0.3"
   checksum: 014dfcd9b5f4105c3bb397c1c8c6429a9df004aa560964fb36732bfb999bfe83d45ae40aeda5b55d21b1ee53d8291580a32a756a443e064317953f08025b1aa4
@@ -34461,16 +32416,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^11.1.1":
-  version: 11.1.1
-  resolution: "yargs-parser@npm:11.1.1"
-  dependencies:
-    camelcase: ^5.0.0
-    decamelize: ^1.2.0
-  checksum: 91a82f4e6295745269f5683d1ab11d636f1d2fa732fb1c1795ad4637f31feb54530c2072ca2c2e39d3c4d506c3645214ff08c781f4a5b48fc959788706a54f83
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:^13.1.2":
   version: 13.1.2
   resolution: "yargs-parser@npm:13.1.2"
@@ -34481,16 +32426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^18.1.2":
-  version: 18.1.3
-  resolution: "yargs-parser@npm:18.1.3"
-  dependencies:
-    camelcase: ^5.0.0
-    decamelize: ^1.2.0
-  checksum: 60e8c7d1b85814594d3719300ecad4e6ae3796748b0926137bfec1f3042581b8646d67e83c6fc80a692ef08b8390f21ddcacb9464476c39bbdf52e34961dd4d9
-  languageName: node
-  linkType: hard
-
 "yargs-unparser@npm:2.0.0":
   version: 2.0.0
   resolution: "yargs-unparser@npm:2.0.0"
@@ -34518,26 +32453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^12.0.1":
-  version: 12.0.5
-  resolution: "yargs@npm:12.0.5"
-  dependencies:
-    cliui: ^4.0.0
-    decamelize: ^1.2.0
-    find-up: ^3.0.0
-    get-caller-file: ^1.0.1
-    os-locale: ^3.0.0
-    require-directory: ^2.1.1
-    require-main-filename: ^1.0.1
-    set-blocking: ^2.0.0
-    string-width: ^2.0.0
-    which-module: ^2.0.0
-    y18n: ^3.2.1 || ^4.0.0
-    yargs-parser: ^11.1.1
-  checksum: 716f467be3f4dd5ed346f7e07eabfbf4b915e818bf2e6582b27c8d23f17c6ee59126b1c6896234d0ca1f615ee09d1901602677c5ee294540e87f914cd27a3c9b
-  languageName: node
-  linkType: hard
-
 "yargs@npm:^13.3.2":
   version: 13.3.2
   resolution: "yargs@npm:13.3.2"
@@ -34556,25 +32471,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^15.0.0":
-  version: 15.4.1
-  resolution: "yargs@npm:15.4.1"
-  dependencies:
-    cliui: ^6.0.0
-    decamelize: ^1.2.0
-    find-up: ^4.1.0
-    get-caller-file: ^2.0.1
-    require-directory: ^2.1.1
-    require-main-filename: ^2.0.0
-    set-blocking: ^2.0.0
-    string-width: ^4.2.0
-    which-module: ^2.0.0
-    y18n: ^4.0.0
-    yargs-parser: ^18.1.2
-  checksum: 40b974f508d8aed28598087720e086ecd32a5fd3e945e95ea4457da04ee9bdb8bdd17fd91acff36dc5b7f0595a735929c514c40c402416bbb87c03f6fb782373
-  languageName: node
-  linkType: hard
-
 "yargs@npm:^2.1.1":
   version: 2.3.0
   resolution: "yargs@npm:2.3.0"
@@ -34615,15 +32511,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoga-layout-prebuilt@npm:^1.9.3":
-  version: 1.10.0
-  resolution: "yoga-layout-prebuilt@npm:1.10.0"
-  dependencies:
-    "@types/yoga-layout": 1.9.2
-  checksum: 6954c7c7b04c585a1c974391bea4734611adb85702b5e9131549a1d3dc5b94e69bcfea34121cdaeb5e702663bf290fcce5374910128e54d1031503a57c062865
-  languageName: node
-  linkType: hard
-
 "zip-stream@npm:^2.1.2":
   version: 2.1.3
   resolution: "zip-stream@npm:2.1.3"

From 6eb84146e92aef85c8c6edf2c57f5d2fc32ae817 Mon Sep 17 00:00:00 2001
From: Matheus Barbosa Silva
 <36537004+matheusbsilva137@users.noreply.github.com>
Date: Tue, 14 Jun 2022 18:12:38 -0300
Subject: [PATCH 24/36] [BREAK] Deactivated team members are added to auto-join
 rooms (#25016)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->
- Do not add deactivated users to auto-join rooms.

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->
1. Create a new team and add a team member to it;
2. Go to **Administration > Users** and deactivate one of the team members;
3. Return to the team and add an auto-join channel/group. **_Expected behavior:_** the deactivated user should not be added to the room.

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 apps/meteor/app/models/server/raw/Users.js  | 6 ++++++
 apps/meteor/server/services/team/service.ts | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/app/models/server/raw/Users.js b/apps/meteor/app/models/server/raw/Users.js
index da01f11cbd3c8..88c36e118aee5 100644
--- a/apps/meteor/app/models/server/raw/Users.js
+++ b/apps/meteor/app/models/server/raw/Users.js
@@ -147,6 +147,12 @@ export class UsersRaw extends BaseRaw {
 		return this.find(query, options);
 	}
 
+	findActive(query, options = {}) {
+		Object.assign(query, { active: true });
+
+		return this.find(query, options);
+	}
+
 	findActiveByIds(userIds, options = {}) {
 		const query = {
 			_id: { $in: userIds },
diff --git a/apps/meteor/server/services/team/service.ts b/apps/meteor/server/services/team/service.ts
index 7df0e05958e7a..bcc44b0a9be70 100644
--- a/apps/meteor/server/services/team/service.ts
+++ b/apps/meteor/server/services/team/service.ts
@@ -647,7 +647,7 @@ export class TeamService extends ServiceClassInternal implements ITeamService {
 			};
 		}
 
-		const users = await this.Users.find({ ...query }).toArray();
+		const users = await this.Users.findActive({ ...query }).toArray();
 		const userIds = users.map((m) => m._id);
 		const cursor = this.TeamMembersModel.findMembersInfoByTeamId(teamId, count, offset, {
 			userId: { $in: userIds },

From bff2f4af8a39a1c134e23a4906d8af1ea19f72f5 Mon Sep 17 00:00:00 2001
From: souzaramon <ramon.souza@objective.com.br>
Date: Wed, 15 Jun 2022 09:36:27 -0300
Subject: [PATCH 25/36] Chore: update pageobjects to use es6 getters and remove
 export default (#25867)

## Proposed changes (including videos or screenshots)
- Simplify imports of pageobjects
- Refactor pageobjects to use es6 getters
- Move BagePage stuff to Global page object
---
 apps/meteor/tests/e2e/00-wizard.spec.ts       |  24 +-
 .../tests/e2e/01-forgot-password.spec.ts      |  17 +-
 apps/meteor/tests/e2e/02-register.spec.ts     |   2 +-
 apps/meteor/tests/e2e/03-login.spec.ts        |   5 +-
 .../tests/e2e/04-main-elements-render.spec.ts |  83 ++--
 .../tests/e2e/05-channel-creation.spec.ts     |   3 +-
 apps/meteor/tests/e2e/06-messaging.spec.ts    |  85 ++--
 apps/meteor/tests/e2e/07-emoji.spec.ts        |  60 ++-
 apps/meteor/tests/e2e/08-resolutions.spec.ts  |  45 +-
 apps/meteor/tests/e2e/09-channel.spec.ts      |  88 ++--
 .../tests/e2e/10-user-preferences.spec.ts     |  44 +-
 apps/meteor/tests/e2e/11-admin.spec.ts        | 345 +++++++--------
 apps/meteor/tests/e2e/12-settings.spec.ts     |  44 +-
 apps/meteor/tests/e2e/13-permissions.spec.ts  |  34 +-
 .../tests/e2e/14-setting-permissions.spec.ts  |  82 ++--
 .../meteor/tests/e2e/15-message-popup.spec.ts |  14 +-
 apps/meteor/tests/e2e/16-discussion.spec.ts   |   9 +-
 .../tests/e2e/omnichannel-agents.spec.ts      |  67 +--
 .../e2e/omnichannel-departaments.spec.ts      |   9 +-
 .../tests/e2e/pageobjects/Administration.ts   | 365 ++++++++++++++++
 apps/meteor/tests/e2e/pageobjects/Agents.ts   | 110 +++++
 apps/meteor/tests/e2e/pageobjects/BasePage.ts |  21 +
 .../tests/e2e/pageobjects/ChannelCreation.ts  |  75 ++++
 .../{utils => }/pageobjects/Departments.ts    |  44 +-
 .../tests/e2e/pageobjects/Discussion.ts       |  54 +++
 apps/meteor/tests/e2e/pageobjects/FlexTab.ts  | 410 ++++++++++++++++++
 apps/meteor/tests/e2e/pageobjects/Global.ts   |  54 +++
 .../meteor/tests/e2e/pageobjects/LoginPage.ts | 119 +++++
 .../tests/e2e/pageobjects/MainContent.ts      | 345 +++++++++++++++
 .../e2e/pageobjects/PreferencesMainContent.ts |  46 ++
 .../tests/e2e/pageobjects/SetupWizard.ts      | 172 ++++++++
 apps/meteor/tests/e2e/pageobjects/SideNav.ts  | 180 ++++++++
 apps/meteor/tests/e2e/pageobjects/index.ts    |  12 +
 .../e2e/utils/pageobjects/Administration.ts   | 365 ----------------
 .../tests/e2e/utils/pageobjects/Agents.ts     | 110 -----
 .../tests/e2e/utils/pageobjects/BasePage.ts   |  42 --
 .../e2e/utils/pageobjects/ChannelCreation.ts  |  75 ----
 .../tests/e2e/utils/pageobjects/Discussion.ts |  54 ---
 .../tests/e2e/utils/pageobjects/FlexTab.ts    | 407 -----------------
 .../tests/e2e/utils/pageobjects/Global.ts     |  38 --
 .../tests/e2e/utils/pageobjects/LoginPage.ts  | 119 -----
 .../e2e/utils/pageobjects/MainContent.ts      | 345 ---------------
 .../pageobjects/PreferencesMainContent.ts     |  46 --
 .../e2e/utils/pageobjects/SetupWizard.ts      | 172 --------
 .../tests/e2e/utils/pageobjects/SideNav.ts    | 180 --------
 .../tests/e2e/utils/pageobjects/index.ts      |   9 -
 .../tests/e2e/utils/types/ChatContext.ts      |   7 -
 47 files changed, 2486 insertions(+), 2550 deletions(-)
 create mode 100644 apps/meteor/tests/e2e/pageobjects/Administration.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/Agents.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/BasePage.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/ChannelCreation.ts
 rename apps/meteor/tests/e2e/{utils => }/pageobjects/Departments.ts (60%)
 create mode 100644 apps/meteor/tests/e2e/pageobjects/Discussion.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/FlexTab.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/Global.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/LoginPage.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/MainContent.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/PreferencesMainContent.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/SetupWizard.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/SideNav.ts
 create mode 100644 apps/meteor/tests/e2e/pageobjects/index.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/Agents.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/ChannelCreation.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/Discussion.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/Global.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/pageobjects/index.ts
 delete mode 100644 apps/meteor/tests/e2e/utils/types/ChatContext.ts

diff --git a/apps/meteor/tests/e2e/00-wizard.spec.ts b/apps/meteor/tests/e2e/00-wizard.spec.ts
index 2a1b9f1c29208..ee404312d1804 100644
--- a/apps/meteor/tests/e2e/00-wizard.spec.ts
+++ b/apps/meteor/tests/e2e/00-wizard.spec.ts
@@ -1,14 +1,14 @@
 import { test, expect } from '@playwright/test';
 
-import SetupWizard from './utils/pageobjects/SetupWizard';
 import { VALID_EMAIL, adminLogin } from './utils/mocks/userAndPasswordMock';
 import { setupWizardStepRegex } from './utils/mocks/urlMock';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';
-import LoginPage from './utils/pageobjects/LoginPage';
+import { LoginPage, SetupWizard } from './pageobjects';
 
 test.describe('[Wizard]', () => {
 	let setupWizard: SetupWizard;
 	let loginPage: LoginPage;
+
 	test.beforeEach(async ({ page }) => {
 		setupWizard = new SetupWizard(page);
 		loginPage = new LoginPage(page);
@@ -27,7 +27,7 @@ test.describe('[Wizard]', () => {
 
 		test('expect go to Step 3 successfully', async () => {
 			await setupWizard.stepTwoSuccess();
-			await expect(setupWizard.getPage()).toHaveURL(setupWizardStepRegex._3);
+			await expect(setupWizard.page).toHaveURL(setupWizardStepRegex._3);
 		});
 	});
 
@@ -39,11 +39,11 @@ test.describe('[Wizard]', () => {
 		});
 
 		test('expect have email field to register the server', async () => {
-			await expect(setupWizard.registeredServer()).toBeVisible();
+			await expect(setupWizard.registeredServer).toBeVisible();
 		});
 
 		test('expect start "Register" button disabled', async () => {
-			await expect(setupWizard.registerButton()).toBeDisabled();
+			await expect(setupWizard.registerButton).toBeDisabled();
 		});
 
 		test('expect show an error on invalid email', async () => {
@@ -51,13 +51,13 @@ test.describe('[Wizard]', () => {
 		});
 
 		test('expect enable "Register" button when email is valid and terms checked', async () => {
-			await setupWizard.registeredServer().type(VALID_EMAIL);
-			await setupWizard.agreementField().click();
-			await expect(setupWizard.registerButton()).toBeEnabled();
+			await setupWizard.registeredServer.type(VALID_EMAIL);
+			await setupWizard.agreementField.click();
+			await expect(setupWizard.registerButton).toBeEnabled();
 		});
 
 		test('expect have option for standalone server', async () => {
-			await expect(setupWizard.standaloneServer()).toBeVisible();
+			await expect(setupWizard.standaloneServer).toBeVisible();
 		});
 	});
 
@@ -70,12 +70,12 @@ test.describe('[Wizard]', () => {
 		});
 
 		test('expect confirm the standalone option', async () => {
-			await expect(setupWizard.goToWorkspace()).toBeVisible();
-			await expect(setupWizard.standaloneConfirmText()).toBeVisible();
+			await expect(setupWizard.goToWorkspace).toBeVisible();
+			await expect(setupWizard.standaloneConfirmText).toBeVisible();
 		});
 
 		test('expect confirm standalone', async () => {
-			await setupWizard.goToWorkspace().click();
+			await setupWizard.goToWorkspace.click();
 			await setupWizard.waitForSelector(HOME_SELECTOR);
 		});
 	});
diff --git a/apps/meteor/tests/e2e/01-forgot-password.spec.ts b/apps/meteor/tests/e2e/01-forgot-password.spec.ts
index 7f087fff746c7..3f2c1edeb03ef 100644
--- a/apps/meteor/tests/e2e/01-forgot-password.spec.ts
+++ b/apps/meteor/tests/e2e/01-forgot-password.spec.ts
@@ -1,7 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import LoginPage from './utils/pageobjects/LoginPage';
-import Global from './utils/pageobjects/Global';
+import { Global, LoginPage } from './pageobjects';
 import { VALID_EMAIL, INVALID_EMAIL, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Forgot Password]', () => {
@@ -19,24 +18,24 @@ test.describe('[Forgot Password]', () => {
 	test('expect be required', async () => {
 		loginPage.submit();
 
-		await expect(loginPage.emailInvalidText()).toBeVisible();
+		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect invalid for email without domain', async () => {
-		await loginPage.emailField().type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
+		await loginPage.emailField.type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
 		await loginPage.submit();
-		await expect(loginPage.emailInvalidText()).toBeVisible();
+		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect be invalid for email with invalid domain', async () => {
-		await loginPage.emailField().type(INVALID_EMAIL);
+		await loginPage.emailField.type(INVALID_EMAIL);
 		await loginPage.submit();
-		await expect(loginPage.emailInvalidText()).toBeVisible();
+		await expect(loginPage.emailInvalidText).toBeVisible();
 	});
 
 	test('expect user type a valid email', async () => {
-		await loginPage.emailField().type(VALID_EMAIL);
+		await loginPage.emailField.type(VALID_EMAIL);
 		await loginPage.submit();
-		await expect(global.getToastBarSuccess()).toBeVisible();
+		await expect(global.getToastBarSuccess).toBeVisible();
 	});
 });
diff --git a/apps/meteor/tests/e2e/02-register.spec.ts b/apps/meteor/tests/e2e/02-register.spec.ts
index 0e2503956462d..ec81337f05e72 100644
--- a/apps/meteor/tests/e2e/02-register.spec.ts
+++ b/apps/meteor/tests/e2e/02-register.spec.ts
@@ -1,7 +1,7 @@
 import { test } from '@playwright/test';
 
 import { registerUser, WRONG_PASSWORD } from './utils/mocks/userAndPasswordMock';
-import LoginPage from './utils/pageobjects/LoginPage';
+import { LoginPage } from './pageobjects';
 
 test.describe('[Register]', () => {
 	let loginPage: LoginPage;
diff --git a/apps/meteor/tests/e2e/03-login.spec.ts b/apps/meteor/tests/e2e/03-login.spec.ts
index 223262a0afb8b..17b8a558e8baf 100644
--- a/apps/meteor/tests/e2e/03-login.spec.ts
+++ b/apps/meteor/tests/e2e/03-login.spec.ts
@@ -1,8 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 import { validUser } from './utils/mocks/userAndPasswordMock';
-import LoginPage from './utils/pageobjects/LoginPage';
-import Global from './utils/pageobjects/Global';
+import { Global, LoginPage } from './pageobjects';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';
 
 test.describe('[Login]', () => {
@@ -22,7 +21,7 @@ test.describe('[Login]', () => {
 			password: 'any_password1',
 		};
 		await loginPage.login(invalidUserPassword);
-		await expect(global.getToastBarError()).toBeVisible();
+		await expect(global.getToastBarError).toBeVisible();
 	});
 
 	test('expect user make login', async () => {
diff --git a/apps/meteor/tests/e2e/04-main-elements-render.spec.ts b/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
index 497e08c35c9ad..7f3106d813b54 100644
--- a/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
+++ b/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
@@ -1,9 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import FlexTab from './utils/pageobjects/FlexTab';
-import LoginPage from './utils/pageobjects/LoginPage';
+import { LoginPage, FlexTab, SideNav, MainContent } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Main Elements Render]', function () {
@@ -28,64 +25,64 @@ test.describe('[Main Elements Render]', function () {
 	test.describe('[Side Nav Bar]', () => {
 		test.describe('[Render]', () => {
 			test('expect show the new channel button', async () => {
-				await expect(sideNav.newChannelBtnToolbar()).toBeVisible();
+				await expect(sideNav.newChannelBtnToolbar).toBeVisible();
 			});
 
 			test('expect show "general" channel', async () => {
-				await expect(sideNav.general()).toBeVisible();
+				await expect(sideNav.general).toBeVisible();
 			});
 		});
 
 		test.describe('[Spotlight search bar]', () => {
 			test('expect show spotlight search bar', async () => {
-				await sideNav.spotlightSearchIcon().click();
-				await expect(sideNav.spotlightSearch()).toBeVisible();
+				await sideNav.spotlightSearchIcon.click();
+				await expect(sideNav.spotlightSearch).toBeVisible();
 			});
 
 			test('expect click the spotlight and show the channel list', async () => {
-				await sideNav.spotlightSearch().click();
-				await expect(sideNav.spotlightSearchPopUp()).toBeVisible();
+				await sideNav.spotlightSearch.click();
+				await expect(sideNav.spotlightSearchPopUp).toBeVisible();
 			});
 
 			test('expect add text to the spotlight and show the channel list', async () => {
-				await sideNav.spotlightSearch().type('rocket.cat');
-				await expect(sideNav.spotlightSearchPopUp()).toBeVisible();
-				await sideNav.getPage().locator('//*[@data-qa="sidebar-search-result"]//*[@data-index="0"]').click();
+				await sideNav.spotlightSearch.type('rocket.cat');
+				await expect(sideNav.spotlightSearchPopUp).toBeVisible();
+				await sideNav.page.locator('//*[@data-qa="sidebar-search-result"]//*[@data-index="0"]').click();
 			});
 		});
 	});
 	test.describe('[User Options]', () => {
 		test.describe('[Render]', () => {
 			test.beforeEach(async () => {
-				await sideNav.sidebarUserMenu().click();
+				await sideNav.sidebarUserMenu.click();
 			});
 
 			test.afterEach(async () => {
-				await sideNav.sidebarUserMenu().click();
+				await sideNav.sidebarUserMenu.click();
 			});
 
 			test('expect show online button', async () => {
-				await expect(sideNav.statusOnline()).toBeVisible();
+				await expect(sideNav.statusOnline).toBeVisible();
 			});
 
 			test('expect show away button', async () => {
-				await expect(sideNav.statusAway()).toBeVisible();
+				await expect(sideNav.statusAway).toBeVisible();
 			});
 
 			test('expect show busy button', async () => {
-				await expect(sideNav.statusBusy()).toBeVisible();
+				await expect(sideNav.statusBusy).toBeVisible();
 			});
 
 			test('expect show offline button', async () => {
-				await expect(sideNav.statusOffline()).toBeVisible();
+				await expect(sideNav.statusOffline).toBeVisible();
 			});
 
 			test('expect show my account button', async () => {
-				await expect(sideNav.account()).toBeVisible();
+				await expect(sideNav.account).toBeVisible();
 			});
 
 			test('expect show logout button', async () => {
-				await expect(sideNav.logout()).toBeVisible();
+				await expect(sideNav.logout).toBeVisible();
 			});
 		});
 	});
@@ -101,42 +98,42 @@ test.describe('[Main Elements Render]', function () {
 			});
 
 			test('expect show the empty favorite star (before)', async () => {
-				await expect(mainContent.emptyFavoriteStar()).toBeVisible();
+				await expect(mainContent.emptyFavoriteStar).toBeVisible();
 			});
 
 			test('expect click the empty star', async () => {
-				await mainContent.emptyFavoriteStar().click();
+				await mainContent.emptyFavoriteStar.click();
 			});
 
 			test('expect show the filled favorite star', async () => {
-				await expect(mainContent.favoriteStar()).toBeVisible();
+				await expect(mainContent.favoriteStar).toBeVisible();
 			});
 
 			test('expect click the star', async () => {
-				await mainContent.favoriteStar().click();
+				await mainContent.favoriteStar.click();
 			});
 
 			test('expect show the empty favorite star (after)', async () => {
-				await expect(mainContent.emptyFavoriteStar()).toBeVisible();
+				await expect(mainContent.emptyFavoriteStar).toBeVisible();
 			});
 
 			test('expect show the message input bar', async () => {
-				await expect(mainContent.messageInput()).toBeVisible();
+				await expect(mainContent.messageInput).toBeVisible();
 			});
 
 			test('expect show the message box actions button', async () => {
-				await expect(mainContent.messageBoxActions()).toBeVisible();
+				await expect(mainContent.messageBoxActions).toBeVisible();
 			});
 
 			test('expect show the audio recording button', async () => {
-				await expect(mainContent.recordBtn()).toBeVisible();
+				await expect(mainContent.recordBtn).toBeVisible();
 			});
 
 			test('expect show the emoji button', async () => {
-				await expect(mainContent.emojiBtn()).toBeVisible();
+				await expect(mainContent.emojiBtn).toBeVisible();
 			});
 			test('expect not show the Admin tag', async () => {
-				await expect(mainContent.lastMessageUserTag()).not.toBeVisible();
+				await expect(mainContent.lastMessageUserTag).not.toBeVisible();
 			});
 		});
 	});
@@ -157,11 +154,11 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the room info button', async () => {
-					await expect(flexTab.channelTab()).toBeVisible();
+					await expect(flexTab.channelTab).toBeVisible();
 				});
 
 				test('expect show the room info tab content', async () => {
-					await expect(flexTab.channelSettings()).toBeVisible();
+					await expect(flexTab.channelSettings).toBeVisible();
 				});
 			});
 
@@ -175,11 +172,11 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the message search  button', async () => {
-					await expect(flexTab.searchTab()).toBeVisible();
+					await expect(flexTab.searchTab).toBeVisible();
 				});
 
 				test('expect show the message tab content', async () => {
-					await expect(flexTab.searchTabContent()).toBeVisible();
+					await expect(flexTab.searchTabContent).toBeVisible();
 				});
 			});
 
@@ -193,11 +190,11 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the members tab button', () => {
-					expect(flexTab.membersTab().isVisible()).toBeTruthy();
+					expect(flexTab.membersTab.isVisible()).toBeTruthy();
 				});
 
 				test('expect show the members content', async () => {
-					expect(flexTab.membersTabContent().isVisible()).toBeTruthy();
+					expect(flexTab.membersTabContent.isVisible()).toBeTruthy();
 				});
 			});
 
@@ -211,11 +208,11 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect not show the notifications button', async () => {
-					await expect(flexTab.notificationsTab()).not.toBeVisible();
+					await expect(flexTab.notificationsTab).not.toBeVisible();
 				});
 
 				test('expect show the notifications Tab content', async () => {
-					await expect(flexTab.notificationsSettings()).toBeVisible();
+					await expect(flexTab.notificationsSettings).toBeVisible();
 				});
 			});
 
@@ -229,7 +226,7 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the files Tab content', async () => {
-					await expect(flexTab.filesTabContent()).toBeVisible();
+					await expect(flexTab.filesTabContent).toBeVisible();
 				});
 			});
 
@@ -243,7 +240,7 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the mentions Tab content', async () => {
-					await expect(flexTab.mentionsTabContent()).toBeVisible();
+					await expect(flexTab.mentionsTabContent).toBeVisible();
 				});
 			});
 
@@ -257,7 +254,7 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the starred messages Tab content', async () => {
-					await expect(flexTab.starredTabContent()).toBeVisible();
+					await expect(flexTab.starredTabContent).toBeVisible();
 				});
 			});
 
@@ -271,7 +268,7 @@ test.describe('[Main Elements Render]', function () {
 				});
 
 				test('expect show the pinned messages Tab content', async () => {
-					await expect(flexTab.pinnedTabContent()).toBeVisible();
+					await expect(flexTab.pinnedTabContent).toBeVisible();
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/05-channel-creation.spec.ts b/apps/meteor/tests/e2e/05-channel-creation.spec.ts
index d75a06e288dab..8a5ca373d87a3 100644
--- a/apps/meteor/tests/e2e/05-channel-creation.spec.ts
+++ b/apps/meteor/tests/e2e/05-channel-creation.spec.ts
@@ -1,8 +1,7 @@
 import { test } from '@playwright/test';
 import { faker } from '@faker-js/faker';
 
-import ChannelCreation from './utils/pageobjects/ChannelCreation';
-import LoginPage from './utils/pageobjects/LoginPage';
+import { LoginPage, ChannelCreation } from './pageobjects';
 import { validUserInserted, ROCKET_CAT } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Channel]', async () => {
diff --git a/apps/meteor/tests/e2e/06-messaging.spec.ts b/apps/meteor/tests/e2e/06-messaging.spec.ts
index 584d52648d605..694465574c6cb 100644
--- a/apps/meteor/tests/e2e/06-messaging.spec.ts
+++ b/apps/meteor/tests/e2e/06-messaging.spec.ts
@@ -1,13 +1,15 @@
 import { expect, test, Browser } from '@playwright/test';
 
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import LoginPage from './utils/pageobjects/LoginPage';
-import FlexTab from './utils/pageobjects/FlexTab';
+import { FlexTab, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin, validUserInserted } from './utils/mocks/userAndPasswordMock';
-import { ChatContext } from './utils/types/ChatContext';
 
-const createBrowserContextForChat = async (browser: Browser, baseURL: string): Promise<ChatContext> => {
+const createBrowserContextForChat = async (
+	browser: Browser,
+	baseURL: string,
+): Promise<{
+	mainContent: MainContent;
+	sideNav: SideNav;
+}> => {
 	const page = await browser.newPage();
 
 	const loginPage = new LoginPage(page);
@@ -40,22 +42,25 @@ test.describe('[Messaging]', () => {
 	});
 
 	test.describe('[Normal messaging]', async () => {
-		let anotherContext: ChatContext;
+		let anotherContext: {
+			mainContent: MainContent;
+			sideNav: SideNav;
+		};
 
 		test.describe('[General channel]', async () => {
 			test.beforeAll(async ({ browser, baseURL }) => {
 				anotherContext = await createBrowserContextForChat(browser, baseURL as string);
-				await anotherContext.sideNav.general().click();
+				await anotherContext.sideNav.general.click();
 				await anotherContext.mainContent.sendMessage('Hello');
-				await sideNav.general().click();
+				await sideNav.general.click();
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
-				await anotherContext.mainContent.getPage().close();
+				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.getPage().locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.getPage().locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -70,11 +75,11 @@ test.describe('[Messaging]', () => {
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
-				await anotherContext.mainContent.getPage().close();
+				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.getPage().locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.getPage().locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -90,11 +95,11 @@ test.describe('[Messaging]', () => {
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
-				await anotherContext.mainContent.getPage().close();
+				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.getPage().locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.getPage().locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -110,11 +115,11 @@ test.describe('[Messaging]', () => {
 				await mainContent.sendMessage('Hello');
 			});
 			test.afterAll(async () => {
-				await anotherContext.mainContent.getPage().close();
+				await anotherContext.mainContent.page.close();
 			});
 			test('expect received message is visible for two context', async () => {
-				const anotherUserMessage = mainContent.getPage().locator('li.message[data-own="false"]').last();
-				const mainUserMessage = anotherContext.mainContent.getPage().locator('li.message[data-own="false"]').last();
+				const anotherUserMessage = mainContent.page.locator('li.message[data-own="false"]').last();
+				const mainUserMessage = anotherContext.mainContent.page.locator('li.message[data-own="false"]').last();
 
 				await expect(anotherUserMessage).toBeVisible();
 				await expect(mainUserMessage).toBeVisible();
@@ -123,33 +128,33 @@ test.describe('[Messaging]', () => {
 
 		test.describe('[File Upload]', async () => {
 			test.beforeAll(async () => {
-				await sideNav.general().click();
+				await sideNav.general.click();
 			});
 			test.describe('[Render]', async () => {
 				test.beforeAll(async () => {
 					await mainContent.dragAndDropFile();
 				});
 				test('expect modal is visible', async () => {
-					await expect(mainContent.modalTitle()).toHaveText('File Upload');
+					await expect(mainContent.modalTitle).toHaveText('File Upload');
 				});
 				test('expect cancel button is visible', async () => {
-					await expect(mainContent.modalCancelButton()).toBeVisible();
+					await expect(mainContent.modalCancelButton).toBeVisible();
 				});
 				test('expect confirm button is visible', async () => {
-					await expect(mainContent.buttonSend()).toBeVisible();
+					await expect(mainContent.buttonSend).toBeVisible();
 				});
 				test('expect file preview is visible', async () => {
-					await expect(mainContent.modalFilePreview()).toBeVisible();
+					await expect(mainContent.modalFilePreview).toBeVisible();
 				});
 
 				test('expect file name input is visible', async () => {
-					await expect(mainContent.fileName()).toBeVisible();
-					await expect(mainContent.fileName()).toHaveText('File name');
+					await expect(mainContent.fileName).toBeVisible();
+					await expect(mainContent.fileName).toHaveText('File name');
 				});
 
 				test('expect file description is visible', async () => {
-					await expect(mainContent.fileDescription()).toBeVisible();
-					await expect(mainContent.fileDescription()).toHaveText('File description');
+					await expect(mainContent.fileDescription).toBeVisible();
+					await expect(mainContent.fileDescription).toHaveText('File description');
 				});
 			});
 			test.describe('[Actions]', async () => {
@@ -158,24 +163,24 @@ test.describe('[Messaging]', () => {
 				});
 
 				test('expect not show modal after click in cancel button', async () => {
-					await mainContent.modalCancelButton().click();
-					await expect(mainContent.modalFilePreview()).not.toBeVisible();
+					await mainContent.modalCancelButton.click();
+					await expect(mainContent.modalFilePreview).not.toBeVisible();
 				});
 
 				test('expect send file not show modal', async () => {
 					await mainContent.sendFileClick();
-					await expect(mainContent.modalFilePreview()).not.toBeVisible();
+					await expect(mainContent.modalFilePreview).not.toBeVisible();
 				});
 				test('expect send file with description', async () => {
 					await mainContent.setDescription();
 					await mainContent.sendFileClick();
-					await expect(mainContent.getFileDescription()).toHaveText('any_description');
+					await expect(mainContent.getFileDescription).toHaveText('any_description');
 				});
 
 				test('expect send file with different file name', async () => {
 					await mainContent.setFileName();
 					await mainContent.sendFileClick();
-					await expect(mainContent.lastMessageFileName()).toContainText('any_file1.txt');
+					await expect(mainContent.lastMessageFileName).toContainText('any_file1.txt');
 				});
 			});
 		});
@@ -183,7 +188,7 @@ test.describe('[Messaging]', () => {
 		test.describe('[Messaging actions]', async () => {
 			test.describe('[Usage]', async () => {
 				test.beforeAll(async () => {
-					await sideNav.general().click();
+					await sideNav.general.click();
 				});
 				test.describe('[Reply]', async () => {
 					test.beforeAll(async () => {
@@ -192,10 +197,10 @@ test.describe('[Messaging]', () => {
 					});
 					test('expect reply the message', async () => {
 						await mainContent.selectAction('reply');
-						await flexTab.messageInput().type('this is a reply message');
+						await flexTab.messageInput.type('this is a reply message');
 						await flexTab.keyboardPress('Enter');
-						await expect(flexTab.flexTabViewThreadMessage()).toHaveText('this is a reply message');
-						await flexTab.closeThreadMessage().click();
+						await expect(flexTab.flexTabViewThreadMessage).toHaveText('this is a reply message');
+						await flexTab.closeThreadMessage.click();
 					});
 				});
 
@@ -231,7 +236,7 @@ test.describe('[Messaging]', () => {
 
 					test('it should quote the message', async () => {
 						await mainContent.selectAction('quote');
-						await expect(mainContent.waitForLastMessageTextAttachmentEqualsText()).toHaveText(message);
+						await expect(mainContent.waitForLastMessageTextAttachmentEqualsText).toHaveText(message);
 					});
 				});
 
diff --git a/apps/meteor/tests/e2e/07-emoji.spec.ts b/apps/meteor/tests/e2e/07-emoji.spec.ts
index 847e5fa463479..da2bdc52cc177 100644
--- a/apps/meteor/tests/e2e/07-emoji.spec.ts
+++ b/apps/meteor/tests/e2e/07-emoji.spec.ts
@@ -1,8 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import LoginPage from './utils/pageobjects/LoginPage';
+import { SideNav, MainContent, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Emoji]', function () {
@@ -26,89 +24,89 @@ test.describe('[Emoji]', function () {
 
 	test.describe('Render:', () => {
 		test.beforeAll(async () => {
-			await mainContent.emojiBtn().click();
+			await mainContent.emojiBtn.click();
 		});
 
 		test.afterAll(async () => {
-			await mainContent.emojiSmile().first().click();
+			await mainContent.emojiSmile.first().click();
 			await mainContent.setTextToInput('');
 		});
 
 		test('expect show the emoji picker menu', async () => {
-			await expect(mainContent.emojiPickerMainScreen()).toBeVisible();
+			await expect(mainContent.emojiPickerMainScreen).toBeVisible();
 		});
 
 		test('expect click the emoji picker people tab', async () => {
-			await mainContent.emojiPickerPeopleIcon().click();
+			await mainContent.emojiPickerPeopleIcon.click();
 		});
 
 		test('expect show the emoji picker people tab', async () => {
-			await expect(mainContent.emojiPickerPeopleIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerPeopleIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker nature tab', async () => {
-			await expect(mainContent.emojiPickerNatureIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerNatureIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker food tab', async () => {
-			await expect(mainContent.emojiPickerFoodIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerFoodIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker activity tab', async () => {
-			await expect(mainContent.emojiPickerActivityIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerActivityIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker travel tab', async () => {
-			await expect(mainContent.emojiPickerTravelIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerTravelIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker objects tab', async () => {
-			await expect(mainContent.emojiPickerObjectsIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerObjectsIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker symbols tab', async () => {
-			await expect(mainContent.emojiPickerSymbolsIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerSymbolsIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker flags tab', async () => {
-			await expect(mainContent.emojiPickerFlagsIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerFlagsIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker custom tab', async () => {
-			await expect(mainContent.emojiPickerCustomIcon()).toBeVisible();
+			await expect(mainContent.emojiPickerCustomIcon).toBeVisible();
 		});
 
 		test('expect show the emoji picker change tone button', async () => {
-			await expect(mainContent.emojiPickerChangeTone()).toBeVisible();
+			await expect(mainContent.emojiPickerChangeTone).toBeVisible();
 		});
 
 		test('expect show the emoji picker search bar', async () => {
-			await expect(mainContent.emojiPickerFilter()).toBeVisible();
+			await expect(mainContent.emojiPickerFilter).toBeVisible();
 		});
 	});
 
 	test.describe('[Usage]', () => {
 		test.describe('send emoji via screen:', () => {
 			test.beforeAll(async () => {
-				await mainContent.emojiBtn().click();
-				await mainContent.emojiPickerPeopleIcon().click();
+				await mainContent.emojiBtn.click();
+				await mainContent.emojiPickerPeopleIcon.click();
 			});
 
 			test('expect select a grinning emoji', async () => {
-				await mainContent.emojiGrinning().first().click();
+				await mainContent.emojiGrinning.first().click();
 			});
 
 			test('expect be that the value on the message input is the same as the emoji clicked', async () => {
-				await expect(mainContent.messageInput()).toHaveValue(':grinning: ');
+				await expect(mainContent.messageInput).toHaveValue(':grinning: ');
 			});
 
 			test('expect send the emoji', async () => {
 				await mainContent.addTextToInput(' ');
-				await mainContent.getPage().keyboard.press('Enter');
+				await mainContent.page.keyboard.press('Enter');
 			});
 
 			test('expect be that the value on the message is the same as the emoji clicked', async () => {
-				await expect(mainContent.lastMessage()).toContainText('😀');
+				await expect(mainContent.lastMessage).toContainText('😀');
 			});
 		});
 
@@ -118,31 +116,31 @@ test.describe('[Emoji]', function () {
 			});
 
 			test('expect show the emoji popup bar', async () => {
-				await expect(mainContent.messagePopUp()).toBeVisible();
+				await expect(mainContent.messagePopUp).toBeVisible();
 			});
 
 			test('expect be that the emoji popup bar title is emoji', async () => {
-				await expect(mainContent.messagePopUpTitle()).toContainText('Emoji');
+				await expect(mainContent.messagePopUpTitle).toContainText('Emoji');
 			});
 
 			test('expect show the emoji popup bar items', async () => {
-				await expect(mainContent.messagePopUpItems()).toBeVisible();
+				await expect(mainContent.messagePopUpItems).toBeVisible();
 			});
 
 			test('expect click the first emoji on the popup list', async () => {
-				await mainContent.messagePopUpFirstItem().click();
+				await mainContent.messagePopUpFirstItem.click();
 			});
 
 			test('expect be that the value on the message input is the same as the emoji clicked', async () => {
-				await expect(mainContent.messageInput()).toHaveValue(':smiley: ');
+				await expect(mainContent.messageInput).toHaveValue(':smiley: ');
 			});
 
 			test('expect send the emoji', async () => {
-				await mainContent.sendBtn().click();
+				await mainContent.sendBtn.click();
 			});
 
 			test('expect be that the value on the message is the same as the emoji clicked', async () => {
-				await expect(mainContent.lastMessage()).toContainText('😃');
+				await expect(mainContent.lastMessage).toContainText('😃');
 			});
 		});
 
diff --git a/apps/meteor/tests/e2e/08-resolutions.spec.ts b/apps/meteor/tests/e2e/08-resolutions.spec.ts
index c1197a1814a5b..d7e5dd9648e16 100644
--- a/apps/meteor/tests/e2e/08-resolutions.spec.ts
+++ b/apps/meteor/tests/e2e/08-resolutions.spec.ts
@@ -1,9 +1,6 @@
 import { test, expect, Browser } from '@playwright/test';
 
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import LoginPage from './utils/pageobjects/LoginPage';
-import Global from './utils/pageobjects/Global';
+import { Global, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 let loginPage: LoginPage;
@@ -38,11 +35,11 @@ test.describe('[Resolution]', function () {
 		test.afterAll(async ({ browser, baseURL }) => {
 			await initConfig(browser, baseURL, { viewport: { width: 1600, height: 1600 } });
 
-			await expect(sideNav.spotlightSearchIcon()).toBeVisible();
+			await expect(sideNav.spotlightSearchIcon).toBeVisible();
 		});
 
 		test('expect close the sidenav', async () => {
-			const position = await mainContent.mainContent().boundingBox();
+			const position = await mainContent.mainContent.boundingBox();
 			await expect(position?.x).toEqual(0);
 			await expect(await sideNav.isSideBarOpen()).toBeFalsy;
 		});
@@ -50,25 +47,25 @@ test.describe('[Resolution]', function () {
 		test.describe('moving elements:', async () => {
 			test.beforeEach(async () => {
 				if (!(await sideNav.isSideBarOpen())) {
-					await sideNav.burgerBtn().click({ force: true });
+					await sideNav.burgerBtn.click({ force: true });
 				}
 			});
 
 			test('expect open the sidenav', async () => {
-				const position = await mainContent.mainContent().boundingBox();
+				const position = await mainContent.mainContent.boundingBox();
 				await expect(position?.x).toEqual(0);
 				await expect(await sideNav.isSideBarOpen()).toBeTruthy;
 			});
 
 			test('expect not close sidebar on pressing the sidebar item menu', async () => {
-				await sideNav.firstSidebarItemMenu().click();
+				await sideNav.firstSidebarItemMenu.click();
 
-				const position = await mainContent.mainContent().boundingBox();
+				const position = await mainContent.mainContent.boundingBox();
 				await expect(position?.x).toEqual(0);
 
 				await expect(await sideNav.isSideBarOpen()).toBeTruthy;
 
-				await sideNav.firstSidebarItemMenu().click();
+				await sideNav.firstSidebarItemMenu.click();
 			});
 
 			test('expect close the sidenav when open general channel', async () => {
@@ -79,33 +76,33 @@ test.describe('[Resolution]', function () {
 			test.describe('Preferences', async () => {
 				test.beforeAll(async () => {
 					if (!(await sideNav.isSideBarOpen())) {
-						await sideNav.burgerBtn().click({ force: true });
+						await sideNav.burgerBtn.click({ force: true });
 					}
 
-					await sideNav.sidebarUserMenu().click();
-					await sideNav.account().click();
+					await sideNav.sidebarUserMenu.click();
+					await sideNav.account.click();
 				});
 
 				test.afterEach(async () => {
-					await sideNav.returnToMenuInLowResolution().click();
+					await sideNav.returnToMenuInLowResolution.click();
 				});
 
 				test('expect close the sidenav when press the preferences link', async () => {
-					await sideNav.preferences().click();
-					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await global.flexNav().isVisible()).toBeFalsy;
+					await sideNav.preferences.click();
+					await sideNav.page.mouse.click(640, 30);
+					await expect(await global.flexNav.isVisible()).toBeFalsy;
 				});
 
 				test('expect close the sidenav when press the profile link', async () => {
-					await sideNav.profile().click();
-					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await sideNav.flexNav().isVisible()).toBeFalsy;
+					await sideNav.profile.click();
+					await sideNav.page.mouse.click(640, 30);
+					await expect(await sideNav.flexNav.isVisible()).toBeFalsy;
 				});
 
 				test('expect close the preferences nav', async () => {
-					await sideNav.preferencesClose().click();
-					await sideNav.getPage().mouse.click(640, 30);
-					await expect(await sideNav.flexNav().isVisible()).toBeTruthy;
+					await sideNav.preferencesClose.click();
+					await sideNav.page.mouse.click(640, 30);
+					await expect(await sideNav.flexNav.isVisible()).toBeTruthy;
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/09-channel.spec.ts b/apps/meteor/tests/e2e/09-channel.spec.ts
index 555d6e3ce4649..cc5d989e98bf2 100644
--- a/apps/meteor/tests/e2e/09-channel.spec.ts
+++ b/apps/meteor/tests/e2e/09-channel.spec.ts
@@ -1,10 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import FlexTab from './utils/pageobjects/FlexTab';
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import LoginPage from './utils/pageobjects/LoginPage';
-import Global from './utils/pageobjects/Global';
+import { Global, FlexTab, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { LOCALHOST } from './utils/mocks/urlMock';
 import { publicChannelCreated, setPublicChannelCreated } from './utils/mocks/checks';
@@ -43,7 +39,7 @@ test.describe('[Channel]', () => {
 		test.describe('[SpotlightSearch]', async () => {
 			test.describe('general:', () => {
 				test('expect search general', async () => {
-					await sideNav.spotlightSearchIcon().click();
+					await sideNav.spotlightSearchIcon.click();
 					await sideNav.searchChannel('general');
 				});
 
@@ -55,7 +51,7 @@ test.describe('[Channel]', () => {
 
 			test.describe('user created channel:', () => {
 				test('expect search the user created channel', async () => {
-					await sideNav.spotlightSearchIcon().click();
+					await sideNav.spotlightSearchIcon.click();
 					await sideNav.searchChannel(publicChannelName);
 				});
 
@@ -68,7 +64,7 @@ test.describe('[Channel]', () => {
 
 		test.describe('[SideNav Channel List]', () => {
 			test.beforeAll(async () => {
-				await mainContent.messageInput().click();
+				await mainContent.messageInput.click();
 			});
 
 			test.describe('general:', async () => {
@@ -102,14 +98,14 @@ test.describe('[Channel]', () => {
 
 		test.describe('Adding a user to the room:', async () => {
 			test.beforeAll(async () => {
-				if (await global.getToastBar().isVisible()) {
+				if (await global.getToastBar.isVisible()) {
 					await global.dismissToastBar();
 				}
 				await flexTab.operateFlexTab('members', true);
 			});
 
 			test.afterAll(async () => {
-				if (await global.getToastBar().isVisible()) {
+				if (await global.getToastBar.isVisible()) {
 					await global.dismissToastBar();
 				}
 				await flexTab.operateFlexTab('members', false);
@@ -118,7 +114,7 @@ test.describe('[Channel]', () => {
 			test('expect add people to the room', async () => {
 				await flexTab.addPeopleToChannel(targetUser);
 				hasUserAddedInChannel = true;
-				await expect(global.getToastBarSuccess()).toBeVisible();
+				await expect(global.getToastBarSuccess).toBeVisible();
 			});
 		});
 
@@ -126,24 +122,24 @@ test.describe('[Channel]', () => {
 			test.describe('[Channel topic edit]', async () => {
 				test.beforeAll(async () => {
 					await flexTab.operateFlexTab('info', true);
-					await flexTab.editNameBtn().click();
+					await flexTab.editNameBtn.click();
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
-					if (await flexTab.mainSideBar().isVisible()) {
-						await flexTab.mainSideBarClose().click();
+					if (await flexTab.mainSideBar.isVisible()) {
+						await flexTab.mainSideBarClose.click();
 					}
 				});
 
 				test('expect edit the topic input', async () => {
-					await flexTab.editTopicTextInput().fill('TOPIC EDITED');
+					await flexTab.editTopicTextInput.fill('TOPIC EDITED');
 				});
 
 				test('expect save the topic', async () => {
-					await flexTab.editNameSave().click();
+					await flexTab.editNameSave.click();
 				});
 
 				test('expect show the new topic', async () => {
@@ -154,57 +150,57 @@ test.describe('[Channel]', () => {
 			test.describe('[Channel announcement edit]', async () => {
 				test.beforeAll(async () => {
 					await flexTab.operateFlexTab('info', true);
-					await flexTab.editNameBtn().click();
+					await flexTab.editNameBtn.click();
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
-					if (await flexTab.mainSideBar().isVisible()) {
-						await flexTab.mainSideBarClose().click();
+					if (await flexTab.mainSideBar.isVisible()) {
+						await flexTab.mainSideBarClose.click();
 					}
 				});
 
 				test('expect edit the announcement input', async () => {
-					await flexTab.editAnnouncementTextInput().type('ANNOUNCEMENT EDITED');
+					await flexTab.editAnnouncementTextInput.type('ANNOUNCEMENT EDITED');
 				});
 
 				test('expect save the announcement', async () => {
-					await flexTab.editNameSave().click();
+					await flexTab.editNameSave.click();
 				});
 
 				test('expect show the new announcement', async () => {
-					await expect(flexTab.thirdSetting()).toHaveText('ANNOUNCEMENT EDITED');
+					await expect(flexTab.thirdSetting).toHaveText('ANNOUNCEMENT EDITED');
 				});
 			});
 
 			test.describe('[Channel description edit]', async () => {
 				test.beforeAll(async () => {
 					await flexTab.operateFlexTab('info', true);
-					await flexTab.editNameBtn().click();
+					await flexTab.editNameBtn.click();
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
-					if (await flexTab.mainSideBar().isVisible()) {
-						await flexTab.mainSideBarClose().click();
+					if (await flexTab.mainSideBar.isVisible()) {
+						await flexTab.mainSideBarClose.click();
 					}
 				});
 
 				test('expect edit the description input', async () => {
-					await flexTab.editDescriptionTextInput().type('DESCRIPTION EDITED');
+					await flexTab.editDescriptionTextInput.type('DESCRIPTION EDITED');
 				});
 
 				test('expect save the description', async () => {
-					await flexTab.editNameSave().click();
+					await flexTab.editNameSave.click();
 				});
 
 				test('expect show the new description', async () => {
-					await flexTab.mainSideBarBack().click();
-					await expect(flexTab.fourthSetting()).toHaveText('DESCRIPTION EDITED');
+					await flexTab.mainSideBarBack.click();
+					await expect(flexTab.fourthSetting).toHaveText('DESCRIPTION EDITED');
 				});
 			});
 		});
@@ -221,7 +217,7 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
@@ -243,7 +239,7 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
@@ -254,17 +250,17 @@ test.describe('[Channel]', () => {
 				});
 
 				test('expect dismiss the toast', async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 				});
 
 				test('expect the last message should be a subscription role added', async () => {
-					await expect(mainContent.lastMessageRoleAdded()).toBeVisible();
+					await expect(mainContent.lastMessageRoleAdded).toBeVisible();
 				});
 
 				test('expect show the target username in owner add message', async () => {
-					await expect(mainContent.lastMessageRoleAdded()).toContainText(targetUser);
+					await expect(mainContent.lastMessageRoleAdded).toContainText(targetUser);
 				});
 			});
 
@@ -279,7 +275,7 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
@@ -290,42 +286,42 @@ test.describe('[Channel]', () => {
 				});
 
 				test('expect be that the last message is a subscription role added', async () => {
-					await expect(mainContent.lastMessageRoleAdded()).toBeVisible();
+					await expect(mainContent.lastMessageRoleAdded).toBeVisible();
 				});
 			});
 
 			test.describe('Channel name edit', async () => {
 				test.beforeAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('info', true);
 				});
 
 				test.afterAll(async () => {
-					if (await global.getToastBar().isVisible()) {
+					if (await global.getToastBar.isVisible()) {
 						await global.dismissToastBar();
 					}
 
-					if (await flexTab.mainSideBar().isVisible()) {
+					if (await flexTab.mainSideBar.isVisible()) {
 						await flexTab.operateFlexTab('info', false);
 					}
 				});
 
 				test('expect show the old name', async () => {
-					await expect(flexTab.firstSetting()).toHaveText(publicChannelName);
+					await expect(flexTab.firstSetting).toHaveText(publicChannelName);
 				});
 
 				test('expect click the edit name', async () => {
-					await flexTab.editNameBtn().click();
+					await flexTab.editNameBtn.click();
 				});
 
 				test('expect edit the name input', async () => {
-					await flexTab.editNameTextInput().fill(`NAME-EDITED-${publicChannelName}`);
+					await flexTab.editNameTextInput.fill(`NAME-EDITED-${publicChannelName}`);
 				});
 
 				test('expect save the name', async () => {
-					await flexTab.editNameSave().click();
+					await flexTab.editNameSave.click();
 				});
 
 				test('expect show the new name', async () => {
diff --git a/apps/meteor/tests/e2e/10-user-preferences.spec.ts b/apps/meteor/tests/e2e/10-user-preferences.spec.ts
index 69df180bee2f9..864cbcd6c238d 100644
--- a/apps/meteor/tests/e2e/10-user-preferences.spec.ts
+++ b/apps/meteor/tests/e2e/10-user-preferences.spec.ts
@@ -1,11 +1,7 @@
 import { test, expect } from '@playwright/test';
 import faker from '@faker-js/faker';
 
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import LoginPage from './utils/pageobjects/LoginPage';
-import FlexTab from './utils/pageobjects/FlexTab';
-import PreferencesMainContent from './utils/pageobjects/PreferencesMainContent';
+import { PreferencesMainContent, MainContent, SideNav, LoginPage, FlexTab } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { clearMessages } from './utils/helpers/clearMessages';
 import { verifyTestBaseUrl } from './utils/configs/verifyTestBaseUrl';
@@ -37,51 +33,51 @@ test.describe('[User Preferences]', () => {
 			preferencesMainContent = new PreferencesMainContent(page);
 			flexTab = new FlexTab(page);
 
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.account().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.account.click();
 		});
 
 		test.describe('render:', () => {
 			test('expect show the preferences link', async () => {
-				await expect(sideNav.preferences()).toBeVisible();
+				await expect(sideNav.preferences).toBeVisible();
 			});
 
 			test('expect show the profile link', async () => {
-				await expect(sideNav.profile()).toBeVisible();
+				await expect(sideNav.profile).toBeVisible();
 			});
 
 			test('expect click on the profile link', async () => {
-				await sideNav.profile().click();
+				await sideNav.profile.click();
 			});
 
 			test('expect show the username input', async () => {
-				await expect(preferencesMainContent.userNameTextInput()).toBeVisible();
+				await expect(preferencesMainContent.userNameTextInput).toBeVisible();
 			});
 
 			test('expect show the real name input', async () => {
-				await expect(preferencesMainContent.realNameTextInput()).toBeVisible();
+				await expect(preferencesMainContent.realNameTextInput).toBeVisible();
 			});
 
 			test('expect show the email input', async () => {
-				await expect(preferencesMainContent.emailTextInput()).toBeVisible(); // .scrollIntoView()
+				await expect(preferencesMainContent.emailTextInput).toBeVisible(); // .scrollIntoView()
 			});
 
 			test('expect show the password input', async () => {
-				await expect(preferencesMainContent.passwordTextInput()).toBeVisible(); // .scrollIntoView()
+				await expect(preferencesMainContent.passwordTextInput).toBeVisible(); // .scrollIntoView()
 			});
 
 			test('expect show the submit button', async () => {
-				await expect(preferencesMainContent.submitBtn()).toBeVisible();
-				await expect(preferencesMainContent.submitBtn()).toBeDisabled();
+				await expect(preferencesMainContent.submitBtn).toBeVisible();
+				await expect(preferencesMainContent.submitBtn).toBeDisabled();
 			});
 		});
 
 		test.describe('[User Info Change]', () => {
 			const newName = faker.name.findName();
-			const newUserName = `${faker.name.lastName()}${faker.name.firstName()}`;
+			const newUserName = `${faker.internet.userName(newName)}`;
 
 			test('expect click on the profile link', async () => {
-				await sideNav.profile().click();
+				await sideNav.profile.click();
 			});
 
 			test('expect change the name field', async () => {
@@ -97,7 +93,7 @@ test.describe('[User Preferences]', () => {
 			});
 
 			test('expect close the preferences menu', async () => {
-				await sideNav.preferencesClose().click();
+				await sideNav.preferencesClose.click();
 				await sideNav.getChannelFromList('general').scrollIntoViewIfNeeded();
 				await sideNav.getChannelFromList('general').click();
 			});
@@ -107,17 +103,17 @@ test.describe('[User Preferences]', () => {
 			});
 
 			test('expect be that the name on the last message is the edited one', async () => {
-				await expect(mainContent.lastMessageUser()).toContainText(newUserName);
+				await expect(mainContent.lastMessageUser).toContainText(newUserName);
 			});
 
 			test('expect be that the user name on the members flex tab is the edited one', async () => {
-				await mainContent.lastMessageUser().click();
-				await expect(mainContent.userCard()).toBeVisible();
+				await mainContent.lastMessageUser.click();
+				await expect(mainContent.userCard).toBeVisible();
 			});
 
 			test('expect that the real name on the members flex tab is the edited one', async () => {
-				await mainContent.viewUserProfile().click();
-				await expect(flexTab.memberRealName()).toHaveText(newUserName);
+				await mainContent.viewUserProfile.click();
+				await expect(flexTab.memberRealName).toHaveText(newUserName);
 			});
 		});
 	});
diff --git a/apps/meteor/tests/e2e/11-admin.spec.ts b/apps/meteor/tests/e2e/11-admin.spec.ts
index 450aa0e2408ba..95ed3527df921 100644
--- a/apps/meteor/tests/e2e/11-admin.spec.ts
+++ b/apps/meteor/tests/e2e/11-admin.spec.ts
@@ -1,10 +1,7 @@
 import { test, expect } from '@playwright/test';
 
-import LoginPage from './utils/pageobjects/LoginPage';
-import SideNav from './utils/pageobjects/SideNav';
 import { adminLogin, ROCKET_CAT } from './utils/mocks/userAndPasswordMock';
-import Administration from './utils/pageobjects/Administration';
-import FlexTab from './utils/pageobjects/FlexTab';
+import { FlexTab, Administration, LoginPage, SideNav } from './pageobjects';
 import { ROCKET_CAT_SELECTOR } from './utils/mocks/waitSelectorsMock';
 import { Checkbox } from './utils/enums/Checkbox';
 
@@ -26,463 +23,435 @@ test.describe('[Administration]', () => {
 	});
 	test.describe('[Admin View]', () => {
 		test.beforeAll(async () => {
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.admin().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.admin.click();
 		});
 
 		test.describe('[Info]', () => {
 			test('expect admin page is showed', async () => {
-				await admin.infoLink().click();
-				await expect(admin.infoDeployment()).toBeVisible();
-				await expect(admin.infoLicense()).toBeVisible();
-				await expect(admin.infoUsage()).toBeVisible();
-				await expect(admin.infoFederation()).toBeVisible();
+				await admin.infoLink.click();
+				await expect(admin.infoDeployment).toBeVisible();
+				await expect(admin.infoLicense).toBeVisible();
+				await expect(admin.infoUsage).toBeVisible();
+				await expect(admin.infoFederation).toBeVisible();
 			});
 		});
 
 		test.describe('[Rooms]', () => {
 			test.beforeAll(async () => {
-				await admin.roomsLink().click();
+				await admin.roomsLink.click();
 			});
 
 			test.afterAll(async () => {
-				await admin.infoLink().click();
+				await admin.infoLink.click();
 			});
 
 			test.describe('[Render]', () => {
 				test('expect rom page is rendered is rendered', async () => {
 					await admin.verifyCheckBoxRendered(checkBoxesSelectors);
-					await expect(admin.roomsSearchForm()).toBeVisible();
+					await expect(admin.roomsSearchForm).toBeVisible();
 				});
 			});
 
 			test.describe('[Filter search input]', () => {
 				test.beforeAll(async () => {
-					await admin.roomsSearchForm().click();
+					await admin.roomsSearchForm.click();
 				});
 
 				test.afterAll(async () => {
-					await admin.roomsSearchForm().click({ clickCount: 3 });
+					await admin.roomsSearchForm.click({ clickCount: 3 });
 					await admin.keyboardPress('Backspace');
 				});
 
 				test('expect show the general channel', async () => {
-					await admin.roomsSearchForm().type('general');
-					await expect(admin.roomsGeneralChannel()).toBeVisible();
+					await admin.roomsSearchForm.type('general');
+					await expect(admin.roomsGeneralChannel).toBeVisible();
 				});
 
 				test('expect dont show rooms when room dont exist', async () => {
-					await admin.roomsSearchForm().type('any_room');
-					await expect(admin.notFoundChannelOrUser()).toBeVisible();
+					await admin.roomsSearchForm.type('any_room');
+					await expect(admin.notFoundChannelOrUser).toBeVisible();
 				});
 			});
 			test.describe('[Filter checkbox]', () => {
 				test.beforeAll(async () => {
-					await admin.roomsSearchForm().click({ clickCount: 3 });
+					await admin.roomsSearchForm.click({ clickCount: 3 });
 					await admin.keyboardPress('Backspace');
 				});
 
 				test('expect not show the general channel with direct', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Direct]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'detached' });
-					await expect(admin.roomsGeneralChannel()).not.toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'detached' });
+					await expect(admin.roomsGeneralChannel).not.toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Direct]).click();
 				});
 
 				test('expect show the general channel with public ', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Public]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'visible' });
-					await expect(admin.roomsGeneralChannel()).toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'visible' });
+					await expect(admin.roomsGeneralChannel).toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Public]).click();
 				});
 
 				test('expect not show the general channel with private ', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Private]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'detached' });
-					await expect(admin.roomsGeneralChannel()).not.toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'detached' });
+					await expect(admin.roomsGeneralChannel).not.toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Private]).click();
 				});
 
 				test('expect not show the general channel with omnichannel', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Omnichannel]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'detached' });
-					await expect(admin.roomsGeneralChannel()).not.toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'detached' });
+					await expect(admin.roomsGeneralChannel).not.toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Omnichannel]).click();
 				});
 				test('expect not show the general channel with discussion', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Discussions]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'detached' });
-					await expect(admin.roomsGeneralChannel()).not.toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'detached' });
+					await expect(admin.roomsGeneralChannel).not.toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Discussions]).click();
 				});
 				test('expect not show the general channel with teams', async () => {
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Teams]).click();
-					await admin.roomsGeneralChannel().waitFor({ state: 'detached' });
-					await expect(admin.roomsGeneralChannel()).not.toBeVisible();
+					await admin.roomsGeneralChannel.waitFor({ state: 'detached' });
+					await expect(admin.roomsGeneralChannel).not.toBeVisible();
 					await admin.adminCheckBox(checkBoxesSelectors[Checkbox.Teams]).click();
 				});
 			});
 			test.describe('[Users]', () => {
 				test.beforeAll(async () => {
-					await admin.usersLink().click();
+					await admin.usersLink.click();
 				});
 
 				test.afterAll(async () => {
-					await admin.infoLink().click();
+					await admin.infoLink.click();
 				});
 
 				test.describe('[Filter text]', async () => {
 					test.beforeEach(async () => {
-						await admin.usersFilter().click();
+						await admin.usersFilter.click();
 					});
 
 					test.afterAll(async () => {
-						await admin.usersFilter().click();
-						await admin.usersFilter().type('');
+						await admin.usersFilter.click();
+						await admin.usersFilter.type('');
 					});
 
 					test('expect should show rocket.cat', async () => {
-						await admin.usersFilter().type(ROCKET_CAT);
+						await admin.usersFilter.type(ROCKET_CAT);
 						await admin.waitForSelector(ROCKET_CAT_SELECTOR);
 					});
 					test('expect dont user when write wrong name', async () => {
-						await admin.usersFilter().type('any_user_wrong');
-						await expect(admin.notFoundChannels()).toBeVisible();
+						await admin.usersFilter.type('any_user_wrong');
+						await expect(admin.notFoundChannels).toBeVisible();
 					});
 				});
 
 				test.describe('[Create user]', () => {
 					test.beforeAll(async () => {
-						await flexTab.usersAddUserTab().click();
+						await flexTab.usersAddUserTab.click();
 					});
 
 					test('expect tab user add is rendering', async () => {
-						await expect(flexTab.usersAddUserName()).toBeVisible();
-						await expect(flexTab.usersAddUserUsername()).toBeVisible();
-						await expect(flexTab.usersAddUserEmail()).toBeVisible();
-						await expect(flexTab.usersAddUserVerifiedCheckbox()).toBeVisible();
-						await expect(flexTab.usersAddUserPassword()).toBeVisible();
-						await expect(flexTab.usersAddUserRandomPassword()).toBeVisible();
-						await expect(flexTab.usersAddUserChangePasswordCheckbox()).toBeVisible();
-						await expect(flexTab.usersAddUserRoleList()).toBeVisible();
-						await expect(flexTab.usersAddUserDefaultChannelCheckbox()).toBeVisible();
-						await expect(flexTab.usersAddUserWelcomeEmailCheckbox()).toBeVisible();
-						await expect(flexTab.usersButtonSave()).toBeVisible();
-						await expect(flexTab.usersButtonCancel()).toBeVisible();
-
-						await flexTab.usersAddUserTabClose().waitFor();
-						await flexTab.usersAddUserTabClose().click();
-
-						await expect(flexTab.addUserTable()).not.toBeVisible();
+						await expect(flexTab.usersAddUserName).toBeVisible();
+						await expect(flexTab.usersAddUserUsername).toBeVisible();
+						await expect(flexTab.usersAddUserEmail).toBeVisible();
+						await expect(flexTab.usersAddUserVerifiedCheckbox).toBeVisible();
+						await expect(flexTab.usersAddUserPassword).toBeVisible();
+						await expect(flexTab.usersAddUserRandomPassword).toBeVisible();
+						await expect(flexTab.usersAddUserChangePasswordCheckbox).toBeVisible();
+						await expect(flexTab.usersAddUserRoleList).toBeVisible();
+						await expect(flexTab.usersAddUserDefaultChannelCheckbox).toBeVisible();
+						await expect(flexTab.usersAddUserWelcomeEmailCheckbox).toBeVisible();
+						await expect(flexTab.usersButtonSave).toBeVisible();
+						await expect(flexTab.usersButtonCancel).toBeVisible();
+
+						await flexTab.usersAddUserTabClose.waitFor();
+						await flexTab.usersAddUserTabClose.click();
+
+						await expect(flexTab.addUserTable).not.toBeVisible();
 					});
 				});
 			});
 		});
 
-		// TODO verify how is make o invite
-		// 	describe('[Flex Tab] ', () => {
-		// 		describe('send invitation:', () => {
-		// 			before(() => {
-		// 				flexTab.usersSendInvitationTab.waitForVisible(5000);
-		// 				flexTab.usersSendInvitationTab.click();
-		// 				flexTab.usersSendInvitationTextArea.waitForVisible(5000);
-		// 			});
-
-		// 			after(() => {
-		// 				flexTab.usersSendInvitationTab.waitForVisible(5000);
-		// 				flexTab.usersSendInvitationTab.click();
-		// 				flexTab.usersSendInvitationTextArea.waitForVisible(5000, true);
-		// 			});
-
-		// 			test('it should show the send invitation text area', () => {
-		// 				flexTab.usersSendInvitationTextArea.should('be.visible');
-		// 			});
-
-		// 			it('it should show the cancel button', () => {
-		// 				flexTab.usersButtonCancel.should('be.visible');
-		// 			});
-
-		// 			it('it should show the send button', () => {
-		// 				flexTab.usersSendInvitationSend.should('be.visible');
-		// 			});
-		// 		});
-
 		test.describe('[General Settings]', () => {
 			test.beforeAll(async () => {
-				await admin.settingsLink().click();
-				await admin.settingsSearch().type('general');
-				await admin.generalSettingsButton().click();
+				await admin.settingsLink.click();
+				await admin.settingsSearch.type('general');
+				await admin.generalSettingsButton.click();
 			});
 
 			test.describe('[General]', () => {
 				test('expect change site url reset button is showed', async () => {
-					await admin.generalSiteUrl().type('something');
-					await expect(admin.generalSiteUrlReset()).toBeVisible();
+					await admin.generalSiteUrl.type('something');
+					await expect(admin.generalSiteUrlReset).toBeVisible();
 				});
 
 				test('expect change site name reset button is showed', async () => {
-					await admin.generalSiteName().type('something');
-					await expect(admin.generalSiteNameReset()).toBeVisible();
+					await admin.generalSiteName.type('something');
+					await expect(admin.generalSiteNameReset).toBeVisible();
 				});
 
 				test('expect show language field', async () => {
-					await expect(admin.generalLanguage()).toBeVisible();
+					await expect(admin.generalLanguage).toBeVisible();
 				});
 
 				test('expect aloow invalid self-signed certs reset button is showed', async () => {
-					await admin.generalSelfSignedCerts().click();
-					await expect(admin.generalSelfSignedCertsReset()).toBeVisible();
-					await admin.generalSelfSignedCerts().click();
-					await expect(admin.generalSelfSignedCertsReset()).not.toBeVisible();
+					await admin.generalSelfSignedCerts.click();
+					await expect(admin.generalSelfSignedCertsReset).toBeVisible();
+					await admin.generalSelfSignedCerts.click();
+					await expect(admin.generalSelfSignedCertsReset).not.toBeVisible();
 				});
 
 				test('expect reset enable favorite room is showed', async () => {
-					await admin.generalFavoriteRoom().click();
-					await expect(admin.generalFavoriteRoomReset()).toBeVisible();
-					await admin.generalFavoriteRoomReset().click();
-					await expect(admin.generalFavoriteRoomReset()).not.toBeVisible();
+					await admin.generalFavoriteRoom.click();
+					await expect(admin.generalFavoriteRoomReset).toBeVisible();
+					await admin.generalFavoriteRoomReset.click();
+					await expect(admin.generalFavoriteRoomReset).not.toBeVisible();
 				});
 
 				test('expect CDN prefix reset not show after reset', async () => {
-					await admin.generalCdnPrefix().type('something');
-					await expect(admin.generalCdnPrefixReset()).toBeVisible();
-					await admin.generalCdnPrefixReset().click();
-					await expect(admin.generalCdnPrefixReset()).not.toBeVisible();
+					await admin.generalCdnPrefix.type('something');
+					await expect(admin.generalCdnPrefixReset).toBeVisible();
+					await admin.generalCdnPrefixReset.click();
+					await expect(admin.generalCdnPrefixReset).not.toBeVisible();
 				});
 
 				test('expect SSL reset not showing after reset', async () => {
-					await admin.generalForceSSL().click();
-					await expect(admin.generalForceSSLReset()).toBeVisible();
-					await admin.generalForceSSLReset().click();
-					await expect(admin.generalForceSSLReset()).not.toBeVisible();
+					await admin.generalForceSSL.click();
+					await expect(admin.generalForceSSLReset).toBeVisible();
+					await admin.generalForceSSLReset.click();
+					await expect(admin.generalForceSSLReset).not.toBeVisible();
 				});
 
 				test('expect google tag reset is not visible after reset', async () => {
-					await admin.generalGoogleTagId().type('something');
-					await expect(admin.generalGoogleTagIdReset()).toBeVisible();
-					await admin.generalGoogleTagIdReset().click();
-					await expect(admin.generalGoogleTagIdReset()).not.toBeVisible();
+					await admin.generalGoogleTagId.type('something');
+					await expect(admin.generalGoogleTagIdReset).toBeVisible();
+					await admin.generalGoogleTagIdReset.click();
+					await expect(admin.generalGoogleTagIdReset).not.toBeVisible();
 				});
 
 				test('expect when change bugsnag API Key dont show reset button after reset', async () => {
-					await admin.generalBugsnagKey().type('something');
-					await expect(admin.generalBugsnagKeyReset()).toBeVisible();
-					await admin.generalBugsnagKeyReset().click();
-					await expect(admin.generalBugsnagKeyReset()).not.toBeVisible();
+					await admin.generalBugsnagKey.type('something');
+					await expect(admin.generalBugsnagKeyReset).toBeVisible();
+					await admin.generalBugsnagKeyReset.click();
+					await expect(admin.generalBugsnagKeyReset).not.toBeVisible();
 				});
 				test('expect when change Robots dont show reset button after reset', async () => {
-					await admin.robotsFileContents().type('aa');
-					await expect(admin.robotsFileContentsReset()).toBeVisible();
-					await admin.robotsFileContentsReset().click();
-					await expect(admin.robotsFileContentsReset()).not.toBeVisible();
+					await admin.robotsFileContents.type('aa');
+					await expect(admin.robotsFileContentsReset).toBeVisible();
+					await admin.robotsFileContentsReset.click();
+					await expect(admin.robotsFileContentsReset).not.toBeVisible();
 				});
 				test('expect when change Default Referrer Policy dont show reset button after reset', async () => {
-					await admin.defaultReferrerPolicy().click();
-					await admin.defaultReferrerPolicyOptions().click();
-					await expect(admin.defaultReferrerPolicyReset()).toBeVisible();
-					await admin.defaultReferrerPolicyReset().click();
-					await expect(admin.defaultReferrerPolicyReset()).not.toBeVisible();
+					await admin.defaultReferrerPolicy.click();
+					await admin.defaultReferrerPolicyOptions.click();
+					await expect(admin.defaultReferrerPolicyReset).toBeVisible();
+					await admin.defaultReferrerPolicyReset.click();
+					await expect(admin.defaultReferrerPolicyReset).not.toBeVisible();
 				});
 			});
 
 			test.describe('[Iframe]', () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionIframeIntegration().click();
+					await admin.generalSectionIframeIntegration.click();
 				});
 
 				test('expect iframe integration is rendering', async () => {
-					await expect(admin.generalIframeSend()).toBeVisible();
-					await expect(admin.generalIframeSendTargetOrigin()).toBeVisible();
-					await expect(admin.generalIframeReceive()).toBeVisible();
-					await expect(admin.generalIframeReceiveOrigin()).toBeVisible();
+					await expect(admin.generalIframeSend).toBeVisible();
+					await expect(admin.generalIframeSendTargetOrigin).toBeVisible();
+					await expect(admin.generalIframeReceive).toBeVisible();
+					await expect(admin.generalIframeReceiveOrigin).toBeVisible();
 				});
 			});
 
 			test.describe('[Notifications]', () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionNotifications().click();
+					await admin.generalSectionNotifications.click();
 				});
 
 				test('expect the max room members field', async () => {
-					await expect(admin.generalNotificationsMaxRoomMembers()).toBeVisible();
+					await expect(admin.generalNotificationsMaxRoomMembers).toBeVisible();
 				});
 			});
 
 			test.describe('[Rest api]', async () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionRestApi().click();
+					await admin.generalSectionRestApi.click();
 				});
 
 				test('expect show the API user add limit field', async () => {
-					await expect(admin.generalRestApiUserLimit()).toBeVisible();
+					await expect(admin.generalRestApiUserLimit).toBeVisible();
 				});
 			});
 
 			test.describe('[Reporting]', async () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionReporting().click();
+					await admin.generalSectionReporting.click();
 				});
 
 				test('expect show the report to rocket.chat toggle', async () => {
-					await expect(admin.generalReporting()).toBeVisible();
+					await expect(admin.generalReporting).toBeVisible();
 				});
 			});
 
 			test.describe('[Stream cast]', async () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionStreamCast().click();
+					await admin.generalSectionStreamCast.click();
 				});
 
 				test('expect show the stream cast address field', async () => {
-					await expect(admin.generalStreamCastAddress()).toBeVisible();
+					await expect(admin.generalStreamCastAddress).toBeVisible();
 				});
 			});
 
 			test.describe('UTF-8', () => {
 				test.beforeAll(async () => {
-					await admin.generalSectionUTF8().click();
+					await admin.generalSectionUTF8.click();
 				});
 
 				test('expect show the usernames utf8 regex field', async () => {
-					await expect(admin.generalUTF8UsernamesRegex()).toBeVisible();
+					await expect(admin.generalUTF8UsernamesRegex).toBeVisible();
 				});
 
 				test('expect show the channels utf8 regex field', async () => {
-					await expect(admin.generalUTF8ChannelsRegex()).toBeVisible();
+					await expect(admin.generalUTF8ChannelsRegex).toBeVisible();
 				});
 
 				test('expect show the utf8 names slug checkboxes', async () => {
-					await expect(admin.generalUTF8NamesSlug()).toBeVisible();
+					await expect(admin.generalUTF8NamesSlug).toBeVisible();
 				});
 			});
 		});
 
 		test.describe('[Accounts]', () => {
 			test.beforeAll(async () => {
-				await admin.groupSettingsPageBack().click();
-				await admin.settingsSearch().type('accounts');
-				await admin.accountSettingsButton().click();
+				await admin.groupSettingsPageBack.click();
+				await admin.settingsSearch.type('accounts');
+				await admin.accountSettingsButton.click();
 			});
 
 			test.describe('[Default user preferences]', () => {
 				test.beforeAll(async () => {
-					await admin.accountsSectionDefaultUserPreferences().click();
+					await admin.accountsSectionDefaultUserPreferences.click();
 				});
 
 				test('expect show the enable auto away field', async () => {
-					await expect(admin.accountsEnableAutoAway()).toBeVisible();
+					await expect(admin.accountsEnableAutoAway).toBeVisible();
 				});
 
 				test('the enable auto away field value should be true', async () => {
-					await admin.accountsEnableAutoAway().check();
+					await admin.accountsEnableAutoAway.check();
 				});
 
 				test('expect show the idle timeout limit field', async () => {
-					await expect(admin.accountsIdleTimeLimit()).toBeVisible();
-					const inputValue = await admin.accountsIdleTimeLimit().inputValue();
+					await expect(admin.accountsIdleTimeLimit).toBeVisible();
+					const inputValue = await admin.accountsIdleTimeLimit.inputValue();
 					expect(inputValue).toEqual('300');
 				});
 
 				test('expect show desktop audio notifications to be visible', async () => {
-					await expect(admin.accountsDesktopNotifications()).toBeVisible();
-					await expect(admin.accountsDesktopNotifications().locator('.rcx-select__item')).toHaveText('All messages');
+					await expect(admin.accountsDesktopNotifications).toBeVisible();
+					await expect(admin.accountsDesktopNotifications.locator('.rcx-select__item')).toHaveText('All messages');
 				});
 
 				test('expect show mobile notifications to be visible and option have value', async () => {
-					await expect(admin.accountsMobileNotifications()).toBeVisible();
-					await expect(admin.accountsMobileNotifications().locator('.rcx-select__item')).toHaveText('All messages');
+					await expect(admin.accountsMobileNotifications).toBeVisible();
+					await expect(admin.accountsMobileNotifications.locator('.rcx-select__item')).toHaveText('All messages');
 				});
 
 				test('expect show the unread tray icon and icon alert field is true', async () => {
-					await expect(admin.accountsUnreadAlert()).toBeVisible();
-					await expect(admin.accountsUnreadAlert().locator('input')).toBeChecked();
+					await expect(admin.accountsUnreadAlert).toBeVisible();
+					await expect(admin.accountsUnreadAlert.locator('input')).toBeChecked();
 				});
 
 				test('expect show the convert ascii and check is true', async () => {
-					await expect(admin.accountsConvertAsciiEmoji().locator('input')).toBeVisible();
-					await expect(admin.accountsConvertAsciiEmoji().locator('input')).toBeChecked();
+					await expect(admin.accountsConvertAsciiEmoji.locator('input')).toBeVisible();
+					await expect(admin.accountsConvertAsciiEmoji.locator('input')).toBeChecked();
 				});
 
 				test('expect show message is visible and check is true', async () => {
-					await expect(admin.accountsAutoImageLoad()).toBeVisible();
-					await expect(admin.accountsAutoImageLoad().locator('input')).toBeChecked();
+					await expect(admin.accountsAutoImageLoad).toBeVisible();
+					await expect(admin.accountsAutoImageLoad.locator('input')).toBeChecked();
 				});
 
 				test('expect show image is visible and check is true', async () => {
-					await expect(admin.accountsAutoImageLoad()).toBeVisible();
-					await expect(admin.accountsAutoImageLoad().locator('input')).toBeChecked();
+					await expect(admin.accountsAutoImageLoad).toBeVisible();
+					await expect(admin.accountsAutoImageLoad.locator('input')).toBeChecked();
 				});
 
 				test('expect account mobile bandwidth is showed ans check is true', async () => {
-					await expect(admin.accountsSaveMobileBandwidth()).toBeVisible();
-					await expect(admin.accountsSaveMobileBandwidth().locator('input')).toBeVisible();
+					await expect(admin.accountsSaveMobileBandwidth).toBeVisible();
+					await expect(admin.accountsSaveMobileBandwidth.locator('input')).toBeVisible();
 				});
 
 				test('expect show the collapse embedded media by default field and not be checked', async () => {
-					await expect(admin.accountsCollapseMediaByDefault()).toBeVisible();
-					await expect(admin.accountsCollapseMediaByDefault()).not.toBeChecked();
+					await expect(admin.accountsCollapseMediaByDefault).toBeVisible();
+					await expect(admin.accountsCollapseMediaByDefault).not.toBeChecked();
 				});
 
 				test('expect show the hide usernames field', async () => {
-					await expect(admin.accountsHideUsernames()).toBeVisible();
-					await expect(admin.accountsHideUsernames()).not.toBeChecked();
+					await expect(admin.accountsHideUsernames).toBeVisible();
+					await expect(admin.accountsHideUsernames).not.toBeChecked();
 				});
 
 				test('expect show admin hide roles and verify if checked', async () => {
-					await expect(admin.accountsHideRoles()).toBeVisible();
-					await expect(admin.accountsHideRoles()).not.toBeChecked();
+					await expect(admin.accountsHideRoles).toBeVisible();
+					await expect(admin.accountsHideRoles).not.toBeChecked();
 				});
 
 				test('expect show the hide right sidebar with click field and not checked', async () => {
-					await expect(admin.accountsHideFlexTab()).toBeVisible();
-					await expect(admin.accountsHideFlexTab().locator('input')).not.toBeChecked();
+					await expect(admin.accountsHideFlexTab).toBeVisible();
+					await expect(admin.accountsHideFlexTab.locator('input')).not.toBeChecked();
 				});
 
 				test('expect show display avatars and is checked', async () => {
-					await expect(admin.accountsDisplayAvatars().locator('input')).toBeVisible();
-					await expect(admin.accountsDisplayAvatars().locator('input')).toBeChecked();
+					await expect(admin.accountsDisplayAvatars.locator('input')).toBeVisible();
+					await expect(admin.accountsDisplayAvatars.locator('input')).toBeChecked();
 				});
 
 				test('expect show the enter key behavior field', async () => {
-					await expect(admin.accountsSendOnEnter()).toBeVisible();
+					await expect(admin.accountsSendOnEnter).toBeVisible();
 
-					await expect(admin.accountsSendOnEnter().locator('.rcx-select__item')).toHaveText('Normal mode (send with Enter)');
+					await expect(admin.accountsSendOnEnter.locator('.rcx-select__item')).toHaveText('Normal mode (send with Enter)');
 				});
 
 				test('the view mode field value should be ""', async () => {
-					await expect(admin.accountsMessageViewMode()).toHaveText('');
+					await expect(admin.accountsMessageViewMode).toHaveText('');
 				});
 
 				test('expect show the offline email notification field and field value to be all', async () => {
-					await expect(admin.accountsEmailNotificationMode()).toBeVisible();
+					await expect(admin.accountsEmailNotificationMode).toBeVisible();
 				});
 
 				test('expect the offline email notification field value should be all', async () => {
-					await expect(admin.accountsEmailNotificationMode().locator('.rcx-select__item')).toHaveText('Every Mention/DM');
+					await expect(admin.accountsEmailNotificationMode.locator('.rcx-select__item')).toHaveText('Every Mention/DM');
 				});
 
 				test('expect show the new room notification field', async () => {
-					await expect(admin.accountsNewRoomNotification()).toBeVisible();
+					await expect(admin.accountsNewRoomNotification).toBeVisible();
 				});
 
 				test('expect the new room notification field value should be door', async () => {
-					await expect(admin.accountsNewRoomNotification().locator('.rcx-select__item')).toHaveText('Default');
+					await expect(admin.accountsNewRoomNotification.locator('.rcx-select__item')).toHaveText('Default');
 				});
 
 				test('expect show the new message notification field', async () => {
-					await expect(admin.accountsNewMessageNotification()).toBeVisible();
+					await expect(admin.accountsNewMessageNotification).toBeVisible();
 				});
 
 				test('expect the new message notification field value should be chime', async () => {
-					await expect(admin.accountsNewMessageNotification().locator('.rcx-select__item')).toHaveText('Default');
+					await expect(admin.accountsNewMessageNotification.locator('.rcx-select__item')).toHaveText('Default');
 				});
 
 				test('expect show the notification sound volume field', async () => {
-					await expect(admin.accountsNotificationsSoundVolume()).toBeVisible();
+					await expect(admin.accountsNotificationsSoundVolume).toBeVisible();
 				});
 
 				test('the notification sound volume field value should be 100', async () => {
-					await expect(admin.accountsNotificationsSoundVolume()).toHaveValue('100');
+					await expect(admin.accountsNotificationsSoundVolume).toHaveValue('100');
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/12-settings.spec.ts b/apps/meteor/tests/e2e/12-settings.spec.ts
index d0893272dc61f..4acbbcffcf0d3 100644
--- a/apps/meteor/tests/e2e/12-settings.spec.ts
+++ b/apps/meteor/tests/e2e/12-settings.spec.ts
@@ -3,11 +3,7 @@ import { v4 as uuid } from 'uuid';
 
 import { BASE_API_URL } from './utils/mocks/urlMock';
 import { adminLogin, validUserInserted, registerUser } from './utils/mocks/userAndPasswordMock';
-import LoginPage from './utils/pageobjects/LoginPage';
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
-import Administration from './utils/pageobjects/Administration';
-import PreferencesMainContent from './utils/pageobjects/PreferencesMainContent';
+import { LoginPage, MainContent, SideNav, Administration, PreferencesMainContent } from './pageobjects';
 
 const apiSessionHeaders = { 'X-Auth-Token': '', 'X-User-Id': '' };
 
@@ -29,7 +25,7 @@ test.describe.skip('[Settings]', async () => {
 
 		await loginPage.goto('/');
 		await loginPage.login(validUserInserted);
-		await sideNav.general().click();
+		await sideNav.general.click();
 	});
 
 	test.beforeAll(async ({ request }) => {
@@ -140,7 +136,7 @@ test.describe.skip('[Settings]', async () => {
 		test('(UI) expect option(upload audio) not be visible', async () => {
 			await mainContent.doReload();
 
-			expect(await mainContent.recordBtn().isVisible()).toBeFalsy();
+			expect(await mainContent.recordBtn.isVisible()).toBeFalsy();
 		});
 
 		test('(API) expect enable audio files', async ({ request }) => {
@@ -157,7 +153,7 @@ test.describe.skip('[Settings]', async () => {
 		test('(UI) expect option(upload audio) be visible', async () => {
 			await mainContent.doReload();
 
-			expect(await mainContent.recordBtn().isVisible()).toBeTruthy();
+			expect(await mainContent.recordBtn.isVisible()).toBeTruthy();
 		});
 	});
 
@@ -341,13 +337,13 @@ test.describe.skip('[Settings]', async () => {
 		});
 
 		test.skip('(UI) expect options(update profile) be disabled', async () => {
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.account().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.account.click();
 
-			expect(userPreferences.avatarFileInput().isDisabled()).toBeTruthy();
-			expect(userPreferences.emailTextInput().isDisabled()).toBeTruthy();
-			expect(userPreferences.realNameTextInput().isDisabled()).toBeTruthy();
-			expect(userPreferences.userNameTextInput().isDisabled()).toBeTruthy();
+			expect(userPreferences.avatarFileInput.isDisabled()).toBeTruthy();
+			expect(userPreferences.emailTextInput.isDisabled()).toBeTruthy();
+			expect(userPreferences.realNameTextInput.isDisabled()).toBeTruthy();
+			expect(userPreferences.userNameTextInput.isDisabled()).toBeTruthy();
 		});
 
 		test('(API) expect enable profile change', async ({ request }) => {
@@ -375,10 +371,10 @@ test.describe.skip('[Settings]', async () => {
 		});
 
 		test.skip('(UI) expect option(update avatar) be disabled', async () => {
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.account().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.account.click();
 
-			expect(userPreferences.avatarFileInput().isDisabled()).toBeTruthy();
+			expect(userPreferences.avatarFileInput.isDisabled()).toBeTruthy();
 		});
 
 		test('(API) expect enable avatar change', async ({ request }) => {
@@ -412,7 +408,7 @@ test.describe.skip('[Settings (admin)]', async () => {
 
 		await loginPage.goto('/');
 		await loginPage.login(adminLogin);
-		await sideNav.general().click();
+		await sideNav.general.click();
 	});
 
 	test.beforeAll(async ({ request }) => {
@@ -478,22 +474,22 @@ test.describe.skip('[Settings (admin)]', async () => {
 		test.describe('(UI) expect activate/deactivate flow as admin', () => {
 			test('expect open /users as admin', async () => {
 				await admin.goto('/admin');
-				await admin.usersLink().click();
+				await admin.usersLink.click();
 			});
 
 			test('expect find registered user', async () => {
-				await admin.usersFilter().type(registerUser.email, { delay: 200 });
+				await admin.usersFilter.type(registerUser.email, { delay: 200 });
 				await admin.userInTable(registerUser.email).click();
 			});
 
 			test('expect activate registered user', async () => {
-				await admin.userInfoActions().locator('button:nth-child(3)').click();
-				await admin.getPage().locator('[value="changeActiveStatus"]').click();
+				await admin.userInfoActions.locator('button:nth-child(3)').click();
+				await admin.page.locator('[value="changeActiveStatus"]').click();
 			});
 
 			test('expect deactivate registered user', async () => {
-				await admin.userInfoActions().locator('button:nth-child(3)').click();
-				await admin.getPage().locator('[value="changeActiveStatus"]').click();
+				await admin.userInfoActions.locator('button:nth-child(3)').click();
+				await admin.page.locator('[value="changeActiveStatus"]').click();
 			});
 		});
 
diff --git a/apps/meteor/tests/e2e/13-permissions.spec.ts b/apps/meteor/tests/e2e/13-permissions.spec.ts
index e92e6cba316e1..1e9a84499c817 100644
--- a/apps/meteor/tests/e2e/13-permissions.spec.ts
+++ b/apps/meteor/tests/e2e/13-permissions.spec.ts
@@ -1,7 +1,7 @@
 import { Page, test, expect } from '@playwright/test';
 import { v4 as uuid } from 'uuid';
 
-import { LoginPage, FlexTab, Administration, MainContent, SideNav } from './utils/pageobjects';
+import { LoginPage, FlexTab, Administration, MainContent, SideNav } from './pageobjects';
 import { adminLogin, createRegisterUser } from './utils/mocks/userAndPasswordMock';
 import { BACKSPACE } from './utils/mocks/keyboardKeyMock';
 
@@ -28,34 +28,34 @@ test.describe('[Permissions]', () => {
 
 		await page.goto('/');
 		await loginPage.login(adminLogin);
-		await sideNav.sidebarUserMenu().click();
-		await sideNav.admin().click();
+		await sideNav.sidebarUserMenu.click();
+		await sideNav.admin.click();
 		await sideNav.users.click();
 	});
 
 	test('expect create a user via admin view', async () => {
-		await flexTab.usersAddUserTab().click();
-		await flexTab.usersAddUserName().type(userToBeCreated.name);
-		await flexTab.usersAddUserUsername().type(userToBeCreated.username ?? '');
-		await flexTab.usersAddUserEmail().type(userToBeCreated.email);
-		await flexTab.usersAddUserVerifiedCheckbox().click();
-		await flexTab.usersAddUserPassword().type(userToBeCreated.password);
+		await flexTab.usersAddUserTab.click();
+		await flexTab.usersAddUserName.type(userToBeCreated.name);
+		await flexTab.usersAddUserUsername.type(userToBeCreated.username ?? '');
+		await flexTab.usersAddUserEmail.type(userToBeCreated.email);
+		await flexTab.usersAddUserVerifiedCheckbox.click();
+		await flexTab.usersAddUserPassword.type(userToBeCreated.password);
 		await flexTab.doAddRole('user');
-		await flexTab.usersButtonSave().click();
+		await flexTab.usersButtonSave.click();
 	});
 
 	test('expect user be show on list', async () => {
-		await admin.usersFilter().type(userToBeCreated.email, { delay: 200 });
+		await admin.usersFilter.type(userToBeCreated.email, { delay: 200 });
 		await expect(admin.userInTable(userToBeCreated.email)).toBeVisible();
 	});
 
 	test.describe('disable "userToBeCreated" permissions', () => {
 		test('expect open permissions table', async () => {
-			await admin.permissionsLink().click();
+			await admin.permissionsLink.click();
 		});
 
 		test('expect remove "mention all" permission from user', async () => {
-			await admin.inputPermissionsSearch().type('all');
+			await admin.inputPermissionsSearch.type('all');
 
 			if (await admin.getCheckboxPermission('Mention All').locator('input').isChecked()) {
 				await admin.getCheckboxPermission('Mention All').click();
@@ -63,9 +63,9 @@ test.describe('[Permissions]', () => {
 		});
 
 		test('expect remove "delete message" permission from user', async () => {
-			await admin.inputPermissionsSearch().click({ clickCount: 3 });
+			await admin.inputPermissionsSearch.click({ clickCount: 3 });
 			await page.keyboard.press(BACKSPACE);
-			await admin.inputPermissionsSearch().type('delete');
+			await admin.inputPermissionsSearch.type('delete');
 
 			if (await admin.getCheckboxPermission('Delete Own Message').locator('input').isChecked()) {
 				await admin.getCheckboxPermission('Delete Own Message').click();
@@ -78,13 +78,13 @@ test.describe('[Permissions]', () => {
 			await sideNav.doLogout();
 			await loginPage.goto('/');
 			await loginPage.login(userToBeCreated);
-			await sideNav.general().click();
+			await sideNav.general.click();
 		});
 
 		test('expect not be abble to "mention all"', async () => {
 			await mainContent.sendMessage('@all any_message');
 
-			await expect(mainContent.lastMessage()).toContainText('not allowed');
+			await expect(mainContent.lastMessage).toContainText('not allowed');
 		});
 
 		test('expect not be able to "delete own message"', async () => {
diff --git a/apps/meteor/tests/e2e/14-setting-permissions.spec.ts b/apps/meteor/tests/e2e/14-setting-permissions.spec.ts
index 94c621b6a00a6..f4cd066ea0de7 100644
--- a/apps/meteor/tests/e2e/14-setting-permissions.spec.ts
+++ b/apps/meteor/tests/e2e/14-setting-permissions.spec.ts
@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import faker from '@faker-js/faker';
 
-import LoginPage from './utils/pageobjects/LoginPage';
 import { adminLogin, validUserInserted } from './utils/mocks/userAndPasswordMock';
-import Administration from './utils/pageobjects/Administration';
-import SideNav from './utils/pageobjects/SideNav';
+import { SideNav, Administration, LoginPage } from './pageobjects';
 
 test.describe('[Rocket.Chat Settings based permissions]', () => {
 	let admin: Administration;
@@ -23,9 +21,9 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		test.beforeAll(async () => {
 			await loginPage.goto('/');
 			await loginPage.login(adminLogin);
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.admin().click();
-			await admin.permissionsLink().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.admin.click();
+			await admin.permissionsLink.click();
 		});
 
 		test.afterAll(async () => {
@@ -34,23 +32,23 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		});
 
 		test('Set permission for user to manage settings', async () => {
-			await admin.rolesSettingsFindInput().type('settings');
-			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
-			const isOptionChecked = await admin.getPage().isChecked('table tbody tr:first-child td:nth-child(6) label input');
+			await admin.rolesSettingsFindInput.type('settings');
+			await admin.page.locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
+			const isOptionChecked = await admin.page.isChecked('table tbody tr:first-child td:nth-child(6) label input');
 			if (!isOptionChecked) {
-				await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
+				await admin.page.click('table tbody tr:first-child td:nth-child(6) label');
 			}
 		});
 
 		test('Set Permission for user to change title page title', async () => {
-			await admin.rolesSettingsTab().click();
-			await admin.rolesSettingsFindInput().fill('Layout');
-			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
-			const isOptionChecked = await admin.getPage().isChecked('table tbody tr:first-child td:nth-child(6) label input');
-			const changeHomeTitleSelected = await admin.getPage().isChecked('table tbody tr:nth-child(3) td:nth-child(6) label input');
+			await admin.rolesSettingsTab.click();
+			await admin.rolesSettingsFindInput.fill('Layout');
+			await admin.page.locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
+			const isOptionChecked = await admin.page.isChecked('table tbody tr:first-child td:nth-child(6) label input');
+			const changeHomeTitleSelected = await admin.page.isChecked('table tbody tr:nth-child(3) td:nth-child(6) label input');
 			if (!isOptionChecked && !changeHomeTitleSelected) {
-				await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
-				await admin.getPage().click('table tbody tr:nth-child(3) td:nth-child(6) label');
+				await admin.page.click('table tbody tr:first-child td:nth-child(6) label');
+				await admin.page.click('table tbody tr:nth-child(3) td:nth-child(6) label');
 			}
 		});
 	});
@@ -59,10 +57,10 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		test.beforeAll(async () => {
 			await loginPage.goto('/');
 			await loginPage.login(validUserInserted);
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.admin().click();
-			await admin.settingsLink().click();
-			await admin.layoutSettingsButton().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.admin.click();
+			await admin.settingsLink.click();
+			await admin.layoutSettingsButton.click();
 		});
 		test.afterAll(async () => {
 			await loginPage.goto('/home');
@@ -70,8 +68,8 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		});
 
 		test('expect new permissions is enabled for user', async () => {
-			await admin.homeTitleInput().fill(newHomeTitle);
-			await admin.buttonSave().click();
+			await admin.homeTitleInput.fill(newHomeTitle);
+			await admin.buttonSave.click();
 		});
 	});
 
@@ -79,11 +77,11 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		test.beforeAll(async () => {
 			await loginPage.goto('/');
 			await loginPage.login(adminLogin);
-			await sideNav.sidebarUserMenu().click();
-			await sideNav.admin().click();
-			await admin.settingsLink().click();
-			await admin.settingsSearch().type('Layout');
-			await admin.layoutSettingsButton().click();
+			await sideNav.sidebarUserMenu.click();
+			await sideNav.admin.click();
+			await admin.settingsLink.click();
+			await admin.settingsSearch.type('Layout');
+			await admin.layoutSettingsButton.click();
 		});
 
 		test.afterAll(async () => {
@@ -92,25 +90,25 @@ test.describe('[Rocket.Chat Settings based permissions]', () => {
 		});
 
 		test('New settings value visible for admin as well', async () => {
-			await admin.getPage().locator('[data-qa-section="Content"]').click();
-			await admin.homeTitleInput().waitFor();
-			const text = await admin.homeTitleInput().inputValue();
-			await admin.generalHomeTitleReset().click();
-			await admin.buttonSave().click();
+			await admin.page.locator('[data-qa-section="Content"]').click();
+			await admin.homeTitleInput.waitFor();
+			const text = await admin.homeTitleInput.inputValue();
+			await admin.generalHomeTitleReset.click();
+			await admin.buttonSave.click();
 			expect(text).toEqual(newHomeTitle);
 		});
 
 		test('Clear all user permissions', async () => {
-			await admin.permissionsLink().click();
-			await admin.rolesSettingsFindInput().type('settings');
-			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
-			await admin.getPage().click('table tbody tr:first-child td:nth-child(6) label');
+			await admin.permissionsLink.click();
+			await admin.rolesSettingsFindInput.type('settings');
+			await admin.page.locator('table tbody tr:first-child td:nth-child(1) >> text="Change some settings"').waitFor();
+			await admin.page.click('table tbody tr:first-child td:nth-child(6) label');
 
-			await admin.rolesSettingsTab().click();
-			await admin.rolesSettingsFindInput().fill('Layout');
-			await admin.getPage().locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
-			await admin.getPage().click('table tbody tr td:nth-child(6) label');
-			await admin.getPage().click('table tbody tr:nth-child(3) td:nth-child(6) label');
+			await admin.rolesSettingsTab.click();
+			await admin.rolesSettingsFindInput.fill('Layout');
+			await admin.page.locator('table tbody tr:first-child td:nth-child(1) >> text="Layout"').waitFor();
+			await admin.page.click('table tbody tr td:nth-child(6) label');
+			await admin.page.click('table tbody tr:nth-child(3) td:nth-child(6) label');
 		});
 	});
 });
diff --git a/apps/meteor/tests/e2e/15-message-popup.spec.ts b/apps/meteor/tests/e2e/15-message-popup.spec.ts
index 2752ddec723e4..b7a1e6b33593e 100644
--- a/apps/meteor/tests/e2e/15-message-popup.spec.ts
+++ b/apps/meteor/tests/e2e/15-message-popup.spec.ts
@@ -2,9 +2,7 @@ import { Page, test, expect } from '@playwright/test';
 
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { userMock } from './utils/mocks/userMock';
-import LoginPage from './utils/pageobjects/LoginPage';
-import MainContent from './utils/pageobjects/MainContent';
-import SideNav from './utils/pageobjects/SideNav';
+import { LoginPage, MainContent, SideNav } from './pageobjects';
 
 test.describe('[Message Popup]', () => {
 	let page: Page;
@@ -28,27 +26,27 @@ test.describe('[Message Popup]', () => {
 	test.describe('User mentions', () => {
 		test('expect show message popup', async () => {
 			await mainContent.setTextToInput('@');
-			expect(await mainContent.messagePopUp().isVisible()).toBeTruthy();
+			expect(await mainContent.messagePopUp.isVisible()).toBeTruthy();
 		});
 
 		test('expect popup title to be people', async () => {
 			await mainContent.setTextToInput('@');
-			expect(await mainContent.messagePopUpTitle().locator('text=People').isVisible()).toBeTruthy();
+			expect(await mainContent.messagePopUpTitle.locator('text=People').isVisible()).toBeTruthy();
 		});
 
 		test('expect show "userMock.username" in options', async () => {
 			await mainContent.setTextToInput('@');
-			expect(await mainContent.messagePopUpItems().locator(`text=${userMock.username}`).isVisible()).toBeTruthy();
+			expect(await mainContent.messagePopUpItems.locator(`text=${userMock.username}`).isVisible()).toBeTruthy();
 		});
 
 		test('expect show "all" option', async () => {
 			await mainContent.setTextToInput('@');
-			expect(await mainContent.messagePopUpItems().locator('text=all').isVisible()).toBeTruthy();
+			expect(await mainContent.messagePopUpItems.locator('text=all').isVisible()).toBeTruthy();
 		});
 
 		test('expect show "here" option', async () => {
 			await mainContent.setTextToInput('@');
-			expect(await mainContent.messagePopUpItems().locator('text=here').isVisible()).toBeTruthy();
+			expect(await mainContent.messagePopUpItems.locator('text=here').isVisible()).toBeTruthy();
 		});
 	});
 });
diff --git a/apps/meteor/tests/e2e/16-discussion.spec.ts b/apps/meteor/tests/e2e/16-discussion.spec.ts
index 2f7f7698c70c8..50721afe9159e 100644
--- a/apps/meteor/tests/e2e/16-discussion.spec.ts
+++ b/apps/meteor/tests/e2e/16-discussion.spec.ts
@@ -2,10 +2,7 @@ import { test, Page } from '@playwright/test';
 import { faker } from '@faker-js/faker';
 import { v4 as uuid } from 'uuid';
 
-import Discussion from './utils/pageobjects/Discussion';
-import LoginPage from './utils/pageobjects/LoginPage';
-import SideNav from './utils/pageobjects/SideNav';
-import MainContent from './utils/pageobjects/MainContent';
+import { MainContent, Discussion, LoginPage, SideNav } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Discussion]', () => {
@@ -34,7 +31,7 @@ test.describe('[Discussion]', () => {
 		test('expect discussion is created', async () => {
 			discussionName = faker.animal.type();
 			message = faker.animal.type();
-			await sideNav.newChannelBtnToolbar().click();
+			await sideNav.newChannelBtnToolbar.click();
 			await discussion.createDiscussion('public channel', discussionName, message);
 		});
 	});
@@ -47,7 +44,7 @@ test.describe('[Discussion]', () => {
 		});
 
 		test('expect show a dialog for starting a discussion', async () => {
-			await mainContent.getPage().waitForLoadState('domcontentloaded', { timeout: 3000 });
+			await mainContent.page.waitForLoadState('domcontentloaded', { timeout: 3000 });
 			await mainContent.openMessageActionMenu();
 			await discussion.createDiscussionInContext(message);
 		});
diff --git a/apps/meteor/tests/e2e/omnichannel-agents.spec.ts b/apps/meteor/tests/e2e/omnichannel-agents.spec.ts
index ccc689b734199..1765371b131b9 100644
--- a/apps/meteor/tests/e2e/omnichannel-agents.spec.ts
+++ b/apps/meteor/tests/e2e/omnichannel-agents.spec.ts
@@ -1,15 +1,15 @@
 import { test, expect, Page } from '@playwright/test';
 
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
-import LoginPage from './utils/pageobjects/LoginPage';
-import SideNav from './utils/pageobjects/SideNav';
-import Agents from './utils/pageobjects/Agents';
+import { LoginPage, SideNav, Agents, Global } from './pageobjects';
 
 test.describe('[Agents]', () => {
 	let loginPage: LoginPage;
 	let page: Page;
 	let sideNav: SideNav;
 	let agents: Agents;
+	let global: Global;
+
 	test.beforeAll(async ({ browser }) => {
 		page = await browser.newPage();
 		const rootPath = '/';
@@ -17,48 +17,49 @@ test.describe('[Agents]', () => {
 		loginPage = new LoginPage(page);
 		sideNav = new SideNav(page);
 		agents = new Agents(page);
+		global = new Global(page);
 
 		await loginPage.login(adminLogin);
-		await sideNav.sidebarUserMenu().click();
-		await sideNav.omnichannel().click();
-		await agents.agentsLink().click();
+		await sideNav.sidebarUserMenu.click();
+		await sideNav.omnichannel.click();
+		await agents.agentsLink.click();
 		await agents.doAddAgent();
 	});
 
 	test('expect admin/manager is able to add an agent', async () => {
-		await expect(agents.agentAdded()).toBeVisible();
-		await expect(agents.agentAdded()).toHaveText('Rocket.Cat');
+		await expect(agents.agentAdded).toBeVisible();
+		await expect(agents.agentAdded).toHaveText('Rocket.Cat');
 	});
 	test('expect open new agent info on tab', async () => {
-		await agents.agentAdded().click();
-		await expect(agents.userInfoTab()).toBeVisible();
-		await expect(agents.agentInfo()).toBeVisible();
+		await agents.agentAdded.click();
+		await expect(agents.userInfoTab).toBeVisible();
+		await expect(agents.agentInfo).toBeVisible();
 	});
 	test('expect close agent info on tab', async () => {
-		await agents.btnClose().click();
-		await expect(agents.userInfoTab()).not.toBeVisible();
-		await expect(agents.agentInfo()).not.toBeVisible();
-		await agents.agentAdded().click();
+		await agents.btnClose.click();
+		await expect(agents.userInfoTab).not.toBeVisible();
+		await expect(agents.agentInfo).not.toBeVisible();
+		await agents.agentAdded.click();
 	});
 
 	test.describe('[Render]', () => {
 		test('expect show profile image', async () => {
-			await expect(agents.userAvatar()).toBeVisible();
+			await expect(agents.userAvatar).toBeVisible();
 		});
 		test('expect show action buttons', async () => {
-			await expect(agents.btnClose()).toBeVisible();
-			await expect(agents.btnEdit()).toBeVisible();
-			await expect(agents.btnRemove()).toBeVisible();
+			await expect(agents.btnClose).toBeVisible();
+			await expect(agents.btnEdit).toBeVisible();
+			await expect(agents.btnRemove).toBeVisible();
 		});
 
 		test('expect show livechat status', async () => {
-			await expect(agents.agentInfoUserInfoLabel()).toBeVisible();
+			await expect(agents.agentInfoUserInfoLabel).toBeVisible();
 		});
 	});
 	test.describe('[Edit button]', async () => {
 		test.describe('[Render]', async () => {
 			test.beforeAll(async () => {
-				await agents.btnEdit().click();
+				await agents.btnEdit.click();
 			});
 			test('expect show fields', async () => {
 				await agents.getListOfExpectedInputs();
@@ -68,20 +69,20 @@ test.describe('[Agents]', () => {
 		test.describe('[Action]', async () => {
 			test('expect change user status', async () => {
 				await agents.doChangeUserStatus('not-available');
-				await expect(agents.agentListStatus()).toHaveText('Not Available');
+				await expect(agents.agentListStatus).toHaveText('Not Available');
 			});
 			test.describe('[Modal Actions]', async () => {
 				test.beforeEach(async () => {
 					await agents.doRemoveAgent();
 				});
 				test('expect modal is not visible after cancel delete agent', async () => {
-					await agents.btnModalCancel().click();
-					await expect(agents.modal()).not.toBeVisible();
+					await global.btnModalCancel.click();
+					await expect(global.modal).not.toBeVisible();
 				});
 				test('expect agent is removed from user info tab', async () => {
-					await agents.btnModalRemove().click();
-					await expect(agents.modal()).not.toBeVisible();
-					await expect(agents.agentAdded()).not.toBeVisible();
+					await global.btnModalRemove.click();
+					await expect(global.modal).not.toBeVisible();
+					await expect(agents.agentAdded).not.toBeVisible();
 				});
 			});
 
@@ -90,16 +91,16 @@ test.describe('[Agents]', () => {
 					await agents.doAddAgent();
 				});
 				test.beforeEach(async () => {
-					await agents.btnTableRemove().click();
+					await agents.btnTableRemove.click();
 				});
 				test('expect modal is not visible after cancel delete agent', async () => {
-					await agents.btnModalCancel().click();
-					await expect(agents.modal()).not.toBeVisible();
+					await global.btnModalCancel.click();
+					await expect(global.modal).not.toBeVisible();
 				});
 				test('expect agent is removed from agents table', async () => {
-					await agents.btnModalRemove().click();
-					await expect(agents.modal()).not.toBeVisible();
-					await expect(agents.agentAdded()).not.toBeVisible();
+					await global.btnModalRemove.click();
+					await expect(global.modal).not.toBeVisible();
+					await expect(agents.agentAdded).not.toBeVisible();
 				});
 			});
 		});
diff --git a/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts b/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts
index 1237156c2efd5..ba74234189fc3 100644
--- a/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts
+++ b/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts
@@ -1,9 +1,6 @@
 import { test, Page, expect } from '@playwright/test';
 
-import LoginPage from './utils/pageobjects/LoginPage';
-import Global from './utils/pageobjects/Global';
-import SideNav from './utils/pageobjects/SideNav';
-import Departments from './utils/pageobjects/Departments';
+import { Departments, SideNav, Global, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Department]', () => {
@@ -24,8 +21,8 @@ test.describe('[Department]', () => {
 		global = new Global(page);
 
 		await loginPage.login(adminLogin);
-		await sideNav.sidebarUserMenu().click();
-		await sideNav.omnichannel().click();
+		await sideNav.sidebarUserMenu.click();
+		await sideNav.omnichannel.click();
 	});
 
 	test.describe('[Render]', async () => {
diff --git a/apps/meteor/tests/e2e/pageobjects/Administration.ts b/apps/meteor/tests/e2e/pageobjects/Administration.ts
new file mode 100644
index 0000000000000..b0c4e45c5a598
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/Administration.ts
@@ -0,0 +1,365 @@
+import { Locator, expect } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class Administration extends BasePage {
+	get settingsSearch(): Locator {
+		return this.page.locator('input[type=search]');
+	}
+
+	get settingsLink(): Locator {
+		return this.page.locator('.flex-nav [href="/admin/settings"]');
+	}
+
+	get groupSettingsPageBack(): Locator {
+		return this.page.locator('button[title="Back"]');
+	}
+
+	get infoLink(): Locator {
+		return this.page.locator('//div[contains(text(),"Info")]');
+	}
+
+	get roomsLink(): Locator {
+		return this.page.locator('.flex-nav [href="/admin/rooms"]');
+	}
+
+	get usersLink(): Locator {
+		return this.page.locator('.flex-nav [href="/admin/users"]');
+	}
+
+	get accountSettingsButton(): Locator {
+		return this.page.locator('[data-qa-id="Accounts"] button');
+	}
+
+	get generalSettingsButton(): Locator {
+		return this.page.locator('[data-qa-id="General"] button');
+	}
+
+	get layoutSettingsButton(): Locator {
+		return this.page.locator('[data-qa-id="Layout"] button');
+	}
+
+	get permissionsLink(): Locator {
+		return this.page.locator('.flex-nav [href="/admin/permissions"]');
+	}
+
+	get infoDeployment(): Locator {
+		return this.page.locator('//div[text()="Deployment"]');
+	}
+
+	get infoLicense(): Locator {
+		return this.page.locator('//div[text()="License"]');
+	}
+
+	get infoUsage(): Locator {
+		return this.page.locator('//div[text()="Usage"]');
+	}
+
+	get infoFederation(): Locator {
+		return this.page.locator('//section[@data-qa="admin-info"]//div[text()="Federation"]');
+	}
+
+	get roomsSearchForm(): Locator {
+		return this.page.locator('input[placeholder ="Search Rooms"]');
+	}
+
+	public async verifyCheckBoxRendered(checkBoxes: string[]): Promise<void> {
+		const expected = [];
+		for (const checkBox of checkBoxes) {
+			expected.push(expect(this.adminCheckBox(checkBox)).toBeVisible());
+		}
+		await Promise.all(expected);
+	}
+
+	get roomsGeneralChannel(): Locator {
+		return this.page.locator('//table//tbody//tr[1]//..//div//div//div//div[text()="general"]');
+	}
+
+	get notFoundChannelOrUser(): Locator {
+		return this.page.locator("//div[text()='No data found']");
+	}
+
+	get notFoundChannels(): Locator {
+		return this.page.locator("//div[text()='No results found']");
+	}
+
+	get usersFilter(): Locator {
+		return this.page.locator('input[placeholder="Search Users"]');
+	}
+
+	public userInTable(id: string): Locator {
+		return this.page.locator(`tr > td:has-text("${id}")`);
+	}
+
+	get rolesSettingsFindInput(): Locator {
+		return this.page.locator('[data-qa="PermissionTable-PermissionsTableFilter"]');
+	}
+
+	get rolesSettingsTab(): Locator {
+		return this.page.locator('[data-qa="PermissionTable-Settings"]');
+	}
+
+	get homeTitleInput(): Locator {
+		return this.page.locator('[data-qa-setting-id="Layout_Home_Title"]');
+	}
+
+	get buttonSave(): Locator {
+		return this.page.locator('button.save');
+	}
+
+	get generalSectionIframeIntegration(): Locator {
+		return this.page.locator('[data-qa-section="Iframe_Integration"]');
+	}
+
+	get generalIframeSendTargetOrigin(): Locator {
+		return this.page.locator('[data-qa-setting-id="Iframe_Integration_send_target_origin"]');
+	}
+
+	get generalSectionNotifications(): Locator {
+		return this.page.locator('[data-qa-section="Notifications"]');
+	}
+
+	get generalSectionRestApi(): Locator {
+		return this.page.locator('[data-qa-section="REST API"]');
+	}
+
+	get generalSectionReporting(): Locator {
+		return this.page.locator('[data-qa-section="Reporting"]');
+	}
+
+	get generalSectionStreamCast(): Locator {
+		return this.page.locator('[data-qa-section="Stream_Cast"]');
+	}
+
+	get generalSectionUTF8(): Locator {
+		return this.page.locator('[data-qa-section="UTF8"]');
+	}
+
+	get generalSiteUrl(): Locator {
+		return this.page.locator('[data-qa-setting-id="Site_Url"]');
+	}
+
+	get generalSiteUrlReset(): Locator {
+		return this.page.locator('//label[@title="Site_Url"]//following-sibling::button');
+	}
+
+	get generalSiteName(): Locator {
+		return this.page.locator('[data-qa-setting-id="Site_Name"]');
+	}
+
+	get generalSiteNameReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Site_Name"]');
+	}
+
+	get generalHomeTitleReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Layout_Home_Title"]');
+	}
+
+	get generalLanguage(): Locator {
+		return this.page.locator('[data-qa-setting-id="Language"]');
+	}
+
+	get generalSelfSignedCerts(): Locator {
+		return this.page.locator('//label[@data-qa-setting-id="Allow_Invalid_SelfSigned_Certs"]//i');
+	}
+
+	get generalSelfSignedCertsReset(): Locator {
+		return this.page.locator('//button[@data-qa-reset-setting-id="Allow_Invalid_SelfSigned_Certs"]');
+	}
+
+	get generalFavoriteRoom(): Locator {
+		return this.page.locator('[data-qa-setting-id="Favorite_Rooms"]');
+	}
+
+	get generalFavoriteRoomReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Favorite_Rooms"]');
+	}
+
+	get generalCdnPrefix(): Locator {
+		return this.page.locator('[data-qa-setting-id="CDN_PREFIX"]');
+	}
+
+	get generalCdnPrefixReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="CDN_PREFIX"]');
+	}
+
+	get generalForceSSL(): Locator {
+		return this.page.locator('[data-qa-setting-id="Force_SSL"]');
+	}
+
+	get generalForceSSLReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Force_SSL"]');
+	}
+
+	get generalGoogleTagId(): Locator {
+		return this.page.locator('[data-qa-setting-id="GoogleTagManager_id"]');
+	}
+
+	get generalGoogleTagIdReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="GoogleTagManager_id"]');
+	}
+
+	get generalBugsnagKey(): Locator {
+		return this.page.locator('[data-qa-setting-id="Bugsnag_api_key"]');
+	}
+
+	get generalBugsnagKeyReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Bugsnag_api_key"]');
+	}
+
+	get robotsFileContents(): Locator {
+		return this.page.locator('#Robot_Instructions_File_Content');
+	}
+
+	get robotsFileContentsReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Robot_Instructions_File_Content"]');
+	}
+
+	get defaultReferrerPolicy(): Locator {
+		return this.page.locator('//div[@data-qa-setting-id="Default_Referrer_Policy"]');
+	}
+
+	get defaultReferrerPolicyReset(): Locator {
+		return this.page.locator('[data-qa-reset-setting-id="Default_Referrer_Policy"]');
+	}
+
+	get defaultReferrerPolicyOptions(): Locator {
+		return this.page.locator('.rcx-options .rcx-option:first-child');
+	}
+
+	get generalIframeSend(): Locator {
+		return this.page.locator('[data-qa-setting-id="Iframe_Integration_send_enable"]');
+	}
+
+	get generalIframeReceive(): Locator {
+		return this.page.locator('[data-qa-setting-id="Iframe_Integration_receive_enable"]');
+	}
+
+	get generalIframeReceiveOrigin(): Locator {
+		return this.page.locator('[data-qa-setting-id="Iframe_Integration_receive_origin"]');
+	}
+
+	get generalNotificationsMaxRoomMembers(): Locator {
+		return this.page.locator('[data-qa-setting-id="Notifications_Max_Room_Members"]');
+	}
+
+	get generalRestApiUserLimit(): Locator {
+		return this.page.locator('[data-qa-setting-id="API_User_Limit"]');
+	}
+
+	get generalReporting(): Locator {
+		return this.page.locator('[data-qa-setting-id="Statistics_reporting"]');
+	}
+
+	get generalStreamCastAddress(): Locator {
+		return this.page.locator('[data-qa-setting-id="Stream_Cast_Address"]');
+	}
+
+	get generalUTF8UsernamesRegex(): Locator {
+		return this.page.locator('[data-qa-setting-id="UTF8_User_Names_Validation"]');
+	}
+
+	get generalUTF8ChannelsRegex(): Locator {
+		return this.page.locator('[data-qa-setting-id="UTF8_Channel_Names_Validation"]');
+	}
+
+	get generalUTF8NamesSlug(): Locator {
+		return this.page.locator('[data-qa-setting-id="UTF8_Names_Slugify"]');
+	}
+
+	get accountsSectionDefaultUserPreferences(): Locator {
+		return this.page.locator('[data-qa-section="Accounts_Default_User_Preferences"]');
+	}
+
+	get accountsEnableAutoAway(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_enableAutoAway"]');
+	}
+
+	get accountsIdleTimeLimit(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_idleTimeLimit"]');
+	}
+
+	get accountsDesktopNotifications(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_desktopNotifications"]');
+	}
+
+	get accountsMobileNotifications(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_pushNotifications"]');
+	}
+
+	get accountsUnreadAlert(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_unreadAlert"]');
+	}
+
+	get accountsConvertAsciiEmoji(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_convertAsciiEmoji"]');
+	}
+
+	get accountsAutoImageLoad(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_autoImageLoad"]');
+	}
+
+	get accountsSaveMobileBandwidth(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_saveMobileBandwidth"]');
+	}
+
+	get accountsCollapseMediaByDefault(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_collapseMediaByDefault"]');
+	}
+
+	get accountsHideUsernames(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideUsernames"]');
+	}
+
+	get accountsHideRoles(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideRoles"]');
+	}
+
+	get accountsHideFlexTab(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideFlexTab"]');
+	}
+
+	get accountsDisplayAvatars(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_displayAvatars"]');
+	}
+
+	get accountsSendOnEnter(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_sendOnEnter"]');
+	}
+
+	get accountsMessageViewMode(): Locator {
+		return this.page.locator('//div[@data-qa-setting-id="Accounts_Default_User_Preferences_messageViewMode"]//div//span');
+	}
+
+	get accountsEmailNotificationMode(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_emailNotificationMode"]');
+	}
+
+	get accountsNewRoomNotification(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newRoomNotification"]');
+	}
+
+	get accountsNewMessageNotification(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newMessageNotification"]');
+	}
+
+	get accountsNotificationsSoundVolume(): Locator {
+		return this.page.locator('[data-qa-setting-id="Accounts_Default_User_Preferences_notificationsSoundVolume"]');
+	}
+
+	public adminCheckBox(checkBox: string): Locator {
+		return this.page.locator(`//label[text()="${checkBox}"]/preceding-sibling::label/i`);
+	}
+
+	get inputPermissionsSearch(): Locator {
+		return this.page.locator('.main-content input[placeholder="Search"]');
+	}
+
+	public 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/pageobjects/Agents.ts b/apps/meteor/tests/e2e/pageobjects/Agents.ts
new file mode 100644
index 0000000000000..784f5c9cee7e7
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/Agents.ts
@@ -0,0 +1,110 @@
+import { Locator, expect } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class Agents extends BasePage {
+	get agentsLink(): Locator {
+		return this.page.locator('a[href="omnichannel/agents"]');
+	}
+
+	get textAgentsTitle(): Locator {
+		return this.page.locator('h2 >> text="Agents"');
+	}
+
+	get inputAgentsUserName(): Locator {
+		return this.page.locator('input').first();
+	}
+
+	get userOption(): Locator {
+		return this.page.locator('.rcx-option >> text="Rocket.Cat"');
+	}
+
+	get btnAddAgents(): Locator {
+		return this.page.locator('button.rcx-button--primary.rcx-button >> text="Add"');
+	}
+
+	get agentAdded(): Locator {
+		return this.page.locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:first-child');
+	}
+
+	get agentListStatus(): Locator {
+		return this.page.locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(4)');
+	}
+
+	get userInfoTab(): Locator {
+		return this.page.locator('h3 div');
+	}
+
+	get agentInfo(): Locator {
+		return this.page.locator('[data-qa="AgentInfoUserInfoUserName"]');
+	}
+
+	get agentInfoUserInfoLabel(): Locator {
+		return this.page.locator('[data-qa="AgentInfoUserInfoLabel"]');
+	}
+
+	get btnClose(): Locator {
+		return this.page.locator('[data-qa="VerticalBarActionClose"]');
+	}
+
+	get userAvatar(): Locator {
+		return this.page.locator('[data-qa="AgentUserInfoAvatar"]');
+	}
+
+	get btnEdit(): Locator {
+		return this.page.locator('[data-qa="AgentInfoAction-Edit"]');
+	}
+
+	get btnRemove(): Locator {
+		return this.page.locator('[data-qa="AgentInfoAction-Remove"]');
+	}
+
+	public availabilityOption(availability: string): Locator {
+		return this.page.locator(`div.rcx-options[role="listbox"] div.rcx-box ol[role="listbox"] li[value="${availability}"]`);
+	}
+
+	get btnTableRemove(): Locator {
+		return this.page.locator(
+			'[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(5) [title="Remove"]',
+		);
+	}
+
+	get agentStatus(): Locator {
+		return this.page.locator('[data-qa="AgentEditTextInput-Status"]');
+	}
+
+	get btnAgentSave(): Locator {
+		return this.page.locator('[data-qa="AgentEditButtonSave"]');
+	}
+
+	public getAgentInputs(id: string): Locator {
+		return this.page.locator(`[data-qa="AgentEditTextInput-${id}"]`);
+	}
+
+	public async doAddAgent(): Promise<void> {
+		await this.textAgentsTitle.waitFor();
+		await this.inputAgentsUserName.type('Rocket.Cat', { delay: 50 });
+
+		await this.userOption.click();
+		await this.btnAddAgents.click();
+	}
+
+	public async getListOfExpectedInputs(): Promise<void> {
+		const inputs = ['Name', 'Username', 'Email', 'Departaments', 'Status'].map((id) => this.getAgentInputs(id));
+		await Promise.all(inputs.map((input) => expect(input).toBeVisible()));
+		await this.btnClose.click();
+	}
+
+	public async doChangeUserStatus(availability: string): Promise<void> {
+		await this.agentAdded.click();
+		await this.btnEdit.click();
+		await this.agentStatus.click();
+		await this.availabilityOption(availability).click();
+		await this.btnAgentSave.click();
+	}
+
+	public async doRemoveAgent(): Promise<void> {
+		await this.agentAdded.click();
+		await this.btnRemove.click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/BasePage.ts b/apps/meteor/tests/e2e/pageobjects/BasePage.ts
new file mode 100644
index 0000000000000..424e88a43e329
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/BasePage.ts
@@ -0,0 +1,21 @@
+import { Page } from '@playwright/test';
+
+export class BasePage {
+	public page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	async goto(path: string): Promise<void> {
+		await this.page.goto(path);
+	}
+
+	async waitForSelector(selector: string): Promise<void> {
+		await this.page.waitForSelector(selector);
+	}
+
+	async keyboardPress(key: string): Promise<void> {
+		await this.page.keyboard.press(key);
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/ChannelCreation.ts b/apps/meteor/tests/e2e/pageobjects/ChannelCreation.ts
new file mode 100644
index 0000000000000..b853bda1dd958
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/ChannelCreation.ts
@@ -0,0 +1,75 @@
+import { Locator, expect } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+import { ENTER } from '../utils/mocks/keyboardKeyMock';
+
+export class ChannelCreation extends BasePage {
+	private get buttonCreate(): Locator {
+		return this.page.locator('[data-qa="sidebar-create"]');
+	}
+
+	private get inputChannelName(): Locator {
+		return this.page.locator('[placeholder="Channel Name"]');
+	}
+
+	private get inputChannelDescription(): Locator {
+		return this.page.locator('[placeholder="What is this channel about?"]');
+	}
+
+	private get buttonCreateChannel(): Locator {
+		return this.page.locator('//ul[@class="rc-popover__list"]//li[@class="rcx-option"][1]');
+	}
+
+	private get channelName(): Locator {
+		return this.page.locator('//header//div//div//div//div[2]');
+	}
+
+	private get buttonConfirmCreation(): Locator {
+		return this.page.locator('//button[contains(text(), "Create" )]');
+	}
+
+	private get privateChannel(): Locator {
+		return this.page.locator('//label[contains(text(),"Private")]/../following-sibling::label/i');
+	}
+
+	private get searchChannel(): Locator {
+		return this.page.locator('[data-qa="sidebar-search"]');
+	}
+
+	private get searchChannelInput(): Locator {
+		return this.page.locator('[data-qa="sidebar-search-input"]');
+	}
+
+	private get textArea(): Locator {
+		return this.page.locator('.rc-message-box__textarea');
+	}
+
+	private get lastMessage(): Locator {
+		return this.page.locator('.message:last-child .body');
+	}
+
+	public async createChannel(name: string, isPrivate: boolean): Promise<void> {
+		await this.buttonCreate.click();
+		await this.buttonCreateChannel.click();
+		await this.inputChannelName.type(name);
+		await this.inputChannelDescription.type('any_description');
+		if (!isPrivate) {
+			await this.privateChannel.click();
+		}
+		await this.buttonConfirmCreation.click();
+
+		await expect(this.channelName).toHaveText(name);
+	}
+
+	public async sendMessage(targetUser: string, message: string): Promise<void> {
+		await this.searchChannel.click();
+		await this.searchChannelInput.type(targetUser, { delay: 200 });
+		await this.keyboardPress(ENTER);
+
+		await this.textArea.type(message);
+		await this.keyboardPress(ENTER);
+
+		await expect(this.lastMessage).toBeVisible();
+		await expect(this.lastMessage).toHaveText(message);
+	}
+}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Departments.ts b/apps/meteor/tests/e2e/pageobjects/Departments.ts
similarity index 60%
rename from apps/meteor/tests/e2e/utils/pageobjects/Departments.ts
rename to apps/meteor/tests/e2e/pageobjects/Departments.ts
index 09b6af0c147c0..21837bfb563a9 100644
--- a/apps/meteor/tests/e2e/utils/pageobjects/Departments.ts
+++ b/apps/meteor/tests/e2e/pageobjects/Departments.ts
@@ -1,87 +1,87 @@
 import { Locator, expect } from '@playwright/test';
 
-import BasePage from './BasePage';
+import { BasePage } from './BasePage';
 
-export default class Departments extends BasePage {
+export class Departments extends BasePage {
 	get departmentsLink(): Locator {
-		return this.getPage().locator('a[href="omnichannel/departments"]');
+		return this.page.locator('a[href="omnichannel/departments"]');
 	}
 
 	get btnNewDepartment(): Locator {
-		return this.getPage().locator('button.rcx-button >> text="New"');
+		return this.page.locator('button.rcx-button >> text="New"');
 	}
 
 	get btnSaveDepartment(): Locator {
-		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Save"');
+		return this.page.locator('button.rcx-button--primary.rcx-button >> text="Save"');
 	}
 
 	get btnBack(): Locator {
-		return this.getPage().locator('button.rcx-button >> text="Back"');
+		return this.page.locator('button.rcx-button >> text="Back"');
 	}
 
 	get enabledToggle(): Locator {
 		// temporary selector
-		return this.getPage().locator('[data-qa="DepartmentEditToggle-Enabled"] span label');
+		return this.page.locator('[data-qa="DepartmentEditToggle-Enabled"] span label');
 	}
 
 	get nameInput(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Name"]');
+		return this.page.locator('[data-qa="DepartmentEditTextInput-Name"]');
 	}
 
 	get descriptionInput(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Description"]');
+		return this.page.locator('[data-qa="DepartmentEditTextInput-Description"]');
 	}
 
 	get showOnRegistrationPage(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentEditToggle-ShowOnRegistrationPage"] span label');
+		return this.page.locator('[data-qa="DepartmentEditToggle-ShowOnRegistrationPage"] span label');
 	}
 
 	get emailInput(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Email"]');
+		return this.page.locator('[data-qa="DepartmentEditTextInput-Email"]');
 	}
 
 	get showOnOfflinePageToggle(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentEditToggle-ShowOnOfflinePage"] span label');
+		return this.page.locator('[data-qa="DepartmentEditToggle-ShowOnOfflinePage"] span label');
 	}
 
 	get selectLiveChatDepartmentOfflineMessageToChannel(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentSelect-LivechatDepartmentOfflineMessageToChannel"]');
+		return this.page.locator('[data-qa="DepartmentSelect-LivechatDepartmentOfflineMessageToChannel"]');
 	}
 
 	get requestTagBeforeClosingChatToggle(): Locator {
-		return this.getPage().locator('[data-qa="DiscussionToggle-RequestTagBeforeCLosingChat"] span label');
+		return this.page.locator('[data-qa="DiscussionToggle-RequestTagBeforeCLosingChat"] span label');
 	}
 
 	get selectAgentsTable(): Locator {
-		return this.getPage().locator('[data-qa="DepartmentSelect-AgentsTable"]');
+		return this.page.locator('[data-qa="DepartmentSelect-AgentsTable"]');
 	}
 
 	get btnAddAgent(): Locator {
-		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Add"');
+		return this.page.locator('button.rcx-button--primary.rcx-button >> text="Add"');
 	}
 
 	public virtuosoOptions(option: string): Locator {
-		return this.getPage().locator(`[data-test-id="virtuoso-scroller"] .rcx-option >> text="${option}"`);
+		return this.page.locator(`[data-test-id="virtuoso-scroller"] .rcx-option >> text="${option}"`);
 	}
 
 	get departmentAdded(): Locator {
-		return this.getPage().locator('table tr:first-child td:first-child ');
+		return this.page.locator('table tr:first-child td:first-child ');
 	}
 
 	get btnTableDeleteDepartment(): Locator {
-		return this.getPage().locator('table tr:first-child td:nth-child(6) button');
+		return this.page.locator('table tr:first-child td:nth-child(6) button');
 	}
 
 	get btnModalCancelDeleteDepartment(): Locator {
-		return this.getPage().locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--ghost');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--ghost');
 	}
 
 	get btnModalDeleteDepartment(): Locator {
-		return this.getPage().locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--primary-danger');
+		return this.page.locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--primary-danger');
 	}
 
 	get modalDepartment(): Locator {
-		return this.getPage().locator('#modal-root');
+		return this.page.locator('#modal-root');
 	}
 
 	public async getAddScreen(): Promise<void> {
diff --git a/apps/meteor/tests/e2e/pageobjects/Discussion.ts b/apps/meteor/tests/e2e/pageobjects/Discussion.ts
new file mode 100644
index 0000000000000..859aea57c1e19
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/Discussion.ts
@@ -0,0 +1,54 @@
+import { Locator, expect } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class Discussion extends BasePage {
+	get startDiscussionContextItem(): Locator {
+		return this.page.locator('[data-qa-id="start-discussion"][data-qa-type="message-action"]');
+	}
+
+	get createDiscussionBtn(): Locator {
+		return this.page.locator('.rcx-option__content >> text="Discussion"');
+	}
+
+	get channelName(): Locator {
+		return this.page.locator('.rcx-input-box--undecorated.rcx-input-box').first();
+	}
+
+	get discussionName(): Locator {
+		return this.page.locator('[placeholder="A meaningful name for the discussion room"]');
+	}
+
+	get discussionMessage(): Locator {
+		return this.page.locator('textarea.rcx-input-box');
+	}
+
+	get buttonCreateDiscussion(): Locator {
+		return this.page.locator('button.rcx-button--primary.rcx-button >> text="Create"');
+	}
+
+	public discussionCreated(discussionName: string): Locator {
+		return this.page.locator(`[data-qa="sidebar-item-title"] >> text='${discussionName}'`);
+	}
+
+	async createDiscussion(channelName: string, discussionName: string, message: string): Promise<void> {
+		await this.createDiscussionBtn.click();
+		await this.channelName.type(channelName);
+		await this.page.keyboard.press('Enter');
+
+		await this.discussionName.type(discussionName);
+		await this.discussionMessage.type(message);
+
+		await this.buttonCreateDiscussion.click();
+
+		await expect(this.discussionCreated(discussionName)).toBeVisible();
+	}
+
+	async createDiscussionInContext(message: string): Promise<void> {
+		await this.startDiscussionContextItem.waitFor();
+		await this.page.pause();
+		await this.startDiscussionContextItem.click();
+		await this.buttonCreateDiscussion.click();
+		await expect(this.discussionCreated(message)).toBeVisible();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/FlexTab.ts b/apps/meteor/tests/e2e/pageobjects/FlexTab.ts
new file mode 100644
index 0000000000000..284ce14fb20a0
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/FlexTab.ts
@@ -0,0 +1,410 @@
+import { expect, Locator, Page } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+import { Global } from './Global';
+
+export class FlexTab extends BasePage {
+	private global: Global;
+
+	constructor(page: Page) {
+		super(page);
+		this.global = new Global(page);
+	}
+
+	get mainSideBar(): Locator {
+		return this.page.locator('//main//aside');
+	}
+
+	get mainSideBarBack(): Locator {
+		return this.page.locator('(//main//aside/h3//button)[1]');
+	}
+
+	get mainSideBarClose(): Locator {
+		return this.page.locator('//main//aside/h3//i[contains(@class, "rcx-icon--name-cross")]/..');
+	}
+
+	get headerMoreActions(): Locator {
+		return this.page.locator('//main/header//*[contains(@class, "rcx-icon--name-kebab")]/..');
+	}
+
+	get messageInput(): Locator {
+		return this.page.locator('.rcx-vertical-bar .js-input-message');
+	}
+
+	get channelTab(): Locator {
+		return this.page.locator('(//main//*[contains(@class, "rcx-icon--name-info-circled")])[1]/..');
+	}
+
+	get channelSettings(): Locator {
+		return this.page.locator(
+			'//aside/h3/div/i[contains(@class,"rcx-icon--name-info-circled") and contains(@class,"rcx-icon--name-info-circled")]',
+		);
+	}
+
+	get editNameBtn(): Locator {
+		return this.page.locator('//aside//button[contains(text(), "Edit")]');
+	}
+
+	get editUnreadAlertBtn(): Locator {
+		return this.page.locator('[data-edit="unreadAlert"]');
+	}
+
+	get editNameTextInput(): Locator {
+		return this.page.locator('//aside//label[contains(text(), "Name")]/..//input');
+	}
+
+	get editTopicTextInput(): Locator {
+		return this.page.locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
+	}
+
+	get editAnnouncementTextInput(): Locator {
+		return this.page.locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
+	}
+
+	get editDescriptionTextInput(): Locator {
+		return this.page.locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
+	}
+
+	get editNameSave(): Locator {
+		return this.page.locator('//aside//button[contains(text(), "Save")]');
+	}
+
+	get membersTab(): Locator {
+		return this.page.locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-members');
+	}
+
+	get membersTabContent(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-members');
+	}
+
+	get setOwnerBtn(): Locator {
+		return this.page.locator('//main//aside//button[contains(text(), "Set as owner")]');
+	}
+
+	get setModeratorBtn(): Locator {
+		return this.page.locator('[value="changeModerator"]');
+	}
+
+	get muteUserBtn(): Locator {
+		return this.page.locator('[value="muteUser"]');
+	}
+
+	get avatarImage(): Locator {
+		return this.page.locator('(//aside[contains(@class, "rcx-vertical-bar")]//*[contains(@class, "avatar")])[1]');
+	}
+
+	get memberRealName(): Locator {
+		return this.page.locator('[data-qa="UserInfoUserName"]');
+	}
+
+	get searchTab(): Locator {
+		return this.page.locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-magnifier');
+	}
+
+	get searchTabContent(): Locator {
+		return this.page.locator('.rocket-search-result');
+	}
+
+	get messageSearchBar(): Locator {
+		return this.page.locator('#message-search');
+	}
+
+	get searchResult(): Locator {
+		return this.page.locator('.new-day');
+	}
+
+	get notificationsTab(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Notifications Preferences")]');
+	}
+
+	get notificationsSettings(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-bell');
+	}
+
+	get filesTab(): Locator {
+		return this.page.locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-clip');
+	}
+
+	get filesTabContent(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-icon--name-attachment');
+	}
+
+	get fileDownload(): Locator {
+		return this.page.locator('.uploaded-files-list ul:first-child .file-download');
+	}
+
+	get fileName(): Locator {
+		return this.page.locator('.uploaded-files-list ul:first-child .room-file-item');
+	}
+
+	get mentionsTab(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Mentions")]');
+	}
+
+	get mentionsTabContent(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-icon--name-at');
+	}
+
+	get starredTab(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Starred Messages")]');
+	}
+
+	get starredTabContent(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-icon--name-star');
+	}
+
+	get pinnedTab(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Pinned Messages")]');
+	}
+
+	get pinnedTabContent(): Locator {
+		return this.page.locator('aside > h3 > div > i.rcx-icon--name-pin');
+	}
+
+	get firstSetting(): Locator {
+		return this.page.locator('//aside//i[contains(@class, "rcx-icon--name-hashtag")]/../div');
+	}
+
+	public secondSetting(topic: string): Locator {
+		return this.page.locator(`//header//*[contains(text(), "${topic}")]`);
+	}
+
+	get thirdSetting(): Locator {
+		return this.page.locator('[data-qa="AnnouncementAnnoucementComponent"] div:nth-child(1)');
+	}
+
+	get fourthSetting(): Locator {
+		return this.page.locator('//main//aside//div[contains(text(), "Description")]//following-sibling::div');
+	}
+
+	get usersAddUserTab(): Locator {
+		return this.page.locator('//button[text()="New"]');
+	}
+
+	get usersAddUserTabClose(): Locator {
+		return this.page.locator('//div[text()="Add User"]//button');
+	}
+
+	get usersButtonCancel(): Locator {
+		return this.page.locator('//button[text()="Cancel"]');
+	}
+
+	get usersButtonSave(): Locator {
+		return this.page.locator('//button[text()="Save"]');
+	}
+
+	get usersAddUserName(): Locator {
+		return this.page.locator('//label[text()="Name"]/following-sibling::span//input');
+	}
+
+	get usersAddUserUsername(): Locator {
+		return this.page.locator('//label[text()="Username"]/following-sibling::span//input');
+	}
+
+	get usersAddUserEmail(): Locator {
+		return this.page.locator('//label[text()="Email"]/following-sibling::span//input').first();
+	}
+
+	get usersAddUserRoleList(): Locator {
+		return this.page.locator('//label[text()="Roles"]/following-sibling::span//input');
+	}
+
+	get fileDescription(): Locator {
+		return this.page.locator(
+			'//li[@data-username="rocketchat.internal.admin.test"][last()]//div[@class="js-block-wrapper"]/following-sibling::div//div//p',
+		);
+	}
+
+	get usersAddUserPassword(): Locator {
+		return this.page.locator('//label[text()="Password"]/following-sibling::span//input');
+	}
+
+	get usersAddUserVerifiedCheckbox(): Locator {
+		return this.page.locator('//label[text()="Email"]/following-sibling::span//input/following-sibling::i');
+	}
+
+	get usersAddUserChangePasswordCheckbox(): Locator {
+		return this.page.locator('//div[text()="Require password change"]/following-sibling::label//input');
+	}
+
+	get usersAddUserDefaultChannelCheckbox(): Locator {
+		return this.page.locator('//div[text()="Join default channels"]/following-sibling::label//input');
+	}
+
+	get usersAddUserWelcomeEmailCheckbox(): Locator {
+		return this.page.locator('//div[text()="Send welcome email"]/following-sibling::label//input');
+	}
+
+	get usersAddUserRandomPassword(): Locator {
+		return this.page.locator('//div[text()="Set random password and send by email"]/following-sibling::label//input');
+	}
+
+	get closeThreadMessage(): Locator {
+		return this.page.locator('//html//body//div[1]//div//div[3]//div[1]//main//div//aside//div[2]//div//div//h3//div//div[2]//button[2]');
+	}
+
+	public getUserEl(username: string): Locator {
+		return this.page.locator(`[data-qa="MemberItem-${username}"]`);
+	}
+
+	get addUserTable(): Locator {
+		return this.page.locator('//div[text()="Add User"]');
+	}
+
+	get addUserButton(): Locator {
+		return this.page.locator('//button[contains(text(), "Add")]');
+	}
+
+	get addUserButtonAfterChoose(): Locator {
+		return this.page.locator('//button[contains(text(), "Add users")]');
+	}
+
+	get chooseUserSearch(): Locator {
+		return this.page.locator('//label[contains(text(), "Choose users")]/..//input');
+	}
+
+	get chooseUserOptions(): Locator {
+		return this.page.locator('(//div[@role="option"]//ol/li)[1]');
+	}
+
+	get userMoreActions(): Locator {
+		return this.page.locator('[data-qa="UserUserInfo-menu"]');
+	}
+
+	public async setUserOwner(user: string): Promise<void> {
+		await this.enterUserView(user);
+		await this.setOwnerBtn.waitFor();
+		await this.setOwnerBtn.click();
+	}
+
+	public async setUserModerator(user: string): Promise<void> {
+		await this.enterUserView(user);
+		await this.userMoreActions.click();
+		await this.setModeratorBtn.waitFor();
+		await this.setModeratorBtn.click();
+	}
+
+	public async muteUser(user: string): Promise<void> {
+		await this.enterUserView(user);
+		await this.userMoreActions.click();
+		await this.muteUserBtn.waitFor();
+		await this.muteUserBtn.click();
+		await this.global.confirmPopup();
+		await this.mainSideBarBack.click();
+	}
+
+	public async enterUserView(user: string): Promise<void> {
+		const userEl = this.getUserEl(user);
+		await userEl.waitFor();
+		await userEl.click();
+	}
+
+	public async addPeopleToChannel(user: string): Promise<void> {
+		await this.addUserButton.click();
+		await this.chooseUserSearch.type(user);
+		await this.page.waitForTimeout(3000);
+		await this.chooseUserOptions.click();
+		await this.addUserButtonAfterChoose.click();
+	}
+
+	public async operateFlexTab(desiredTab: string, desiredState: boolean): Promise<void> {
+		// desiredState true=open false=closed
+		const locator: { [K: string]: Locator } = {
+			channelSettings: this.channelSettings,
+			messageSearchBar: this.messageSearchBar,
+			avatarImage: this.avatarImage,
+			notificationsSettings: this.notificationsSettings,
+			filesTabContent: this.filesTabContent,
+			mentionsTabContent: this.mentionsTabContent,
+			starredTabContent: this.starredTabContent,
+			pinnedTabContent: this.pinnedTabContent,
+			channelTab: this.channelTab,
+			searchTab: this.searchTab,
+			membersTab: this.membersTab,
+			notificationsTab: this.notificationsTab,
+			filesTab: this.filesTab,
+			mentionsTab: this.mentionsTab,
+			starredTab: this.starredTab,
+			pinnedTab: this.pinnedTab,
+		};
+
+		const operate = async (tab: string, panel: string, more: boolean): Promise<void> => {
+			// this[panel].should(!desiredState ? 'be.visible' : 'not.exist');
+			if (!desiredState) {
+				await expect(locator[panel]).toBeVisible();
+			} else {
+				await expect(locator[panel]).not.toBeVisible();
+			}
+
+			if (more) {
+				await this.headerMoreActions.click();
+			}
+
+			await locator[tab].click();
+
+			// The button "more" keeps the focus when popover is closed from a click
+			// on an item, need to click again to change the status to unselected and
+			// allow the next click to open the popover again
+			if (more) {
+				await this.headerMoreActions.click();
+			}
+
+			if (desiredState) {
+				await expect(locator[panel]).toBeVisible();
+			} else {
+				await expect(locator[panel]).not.toBeVisible();
+			}
+		};
+
+		const tabs: { [K: string]: Function } = {
+			info: async (): Promise<void> => {
+				await operate('channelTab', 'channelSettings', false);
+			},
+
+			search: async (): Promise<void> => {
+				await operate('searchTab', 'messageSearchBar', false);
+			},
+
+			members: async (): Promise<void> => {
+				await operate('membersTab', 'avatarImage', false);
+			},
+
+			notifications: async (): Promise<void> => {
+				await operate('notificationsTab', 'notificationsSettings', true);
+			},
+
+			files: async (): Promise<void> => {
+				await operate('filesTab', 'filesTabContent', false);
+			},
+
+			mentions: async (): Promise<void> => {
+				await operate('mentionsTab', 'mentionsTabContent', true);
+			},
+
+			starred: async (): Promise<void> => {
+				await operate('starredTab', 'starredTabContent', true);
+			},
+
+			pinned: async (): Promise<void> => {
+				await operate('pinnedTab', 'pinnedTabContent', true);
+			},
+		};
+
+		const callFunctionTabs = async (name: string): Promise<void> => {
+			return tabs[name]();
+		};
+
+		await callFunctionTabs(desiredTab);
+	}
+
+	get flexTabViewThreadMessage(): Locator {
+		return this.page.locator(
+			'div.thread-list.js-scroll-thread ul.thread [data-qa-type="message"]:last-child div.message-body-wrapper [data-qa-type="message-body"]',
+		);
+	}
+
+	public async doAddRole(role: string): Promise<void> {
+		await this.usersAddUserRoleList.click();
+		await this.page.locator(`li[value=${role}]`).click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/Global.ts b/apps/meteor/tests/e2e/pageobjects/Global.ts
new file mode 100644
index 0000000000000..1b0ee13cd91ab
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/Global.ts
@@ -0,0 +1,54 @@
+import { Locator } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class Global extends BasePage {
+	get modalConfirm(): Locator {
+		return this.page.locator('.rcx-modal .rcx-button--primary-danger');
+	}
+
+	get modalFilePreview(): Locator {
+		return this.page.locator('.rc-modal .upload-preview-file');
+	}
+
+	get getToastBar(): Locator {
+		return this.page.locator('.rcx-toastbar');
+	}
+
+	get getToastBarError(): Locator {
+		return this.page.locator('.rcx-toastbar.rcx-toastbar--error');
+	}
+
+	get getToastBarSuccess(): Locator {
+		return this.page.locator('.rcx-toastbar.rcx-toastbar--success');
+	}
+
+	get flexNav(): Locator {
+		return this.page.locator('.flex-nav');
+	}
+
+	public async confirmPopup(): Promise<void> {
+		await this.modalConfirm.waitFor();
+		await this.modalConfirm.click();
+	}
+
+	public async dismissToastBar(): Promise<void> {
+		await this.getToastBar.locator('button').click();
+	}
+
+	get modal(): Locator {
+		return this.page.locator('#modal-root');
+	}
+
+	get btnModalCancel(): Locator {
+		return this.page.locator(
+			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--ghost.rcx-button',
+		);
+	}
+
+	get btnModalRemove(): Locator {
+		return this.page.locator(
+			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--primary-danger.rcx-button',
+		);
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/LoginPage.ts b/apps/meteor/tests/e2e/pageobjects/LoginPage.ts
new file mode 100644
index 0000000000000..4c1ea2e923258
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/LoginPage.ts
@@ -0,0 +1,119 @@
+import { Locator, expect } from '@playwright/test';
+
+import { ILogin, IRegister } from '../utils/interfaces/Login';
+import { BasePage } from './BasePage';
+import { HOME_SELECTOR, REGISTER_STEP2_BUTTON } from '../utils/mocks/waitSelectorsMock';
+
+export class LoginPage extends BasePage {
+	private get registerButton(): Locator {
+		return this.page.locator('button.register');
+	}
+
+	private get forgotPasswordButton(): Locator {
+		return this.page.locator('.forgot-password');
+	}
+
+	get submitButton(): Locator {
+		return this.page.locator('.login');
+	}
+
+	get registerNextButton(): Locator {
+		return this.page.locator('button[data-loading-text=" Please_wait ..."]');
+	}
+
+	get emailOrUsernameField(): Locator {
+		return this.page.locator('[name=emailOrUsername]');
+	}
+
+	get nameField(): Locator {
+		return this.page.locator('[name=name]');
+	}
+
+	get emailField(): Locator {
+		return this.page.locator('[name=email]');
+	}
+
+	get passwordField(): Locator {
+		return this.page.locator('[name=pass]');
+	}
+
+	get confirmPasswordField(): Locator {
+		return this.page.locator('[name=confirm-pass]');
+	}
+
+	get nameInvalidText(): Locator {
+		return this.page.locator('[name=name]~.input-error');
+	}
+
+	get emailInvalidText(): Locator {
+		return this.page.locator('[name=email]~.input-error');
+	}
+
+	get passwordInvalidText(): Locator {
+		return this.page.locator('[name=pass]~.input-error');
+	}
+
+	get confirmPasswordInvalidText(): Locator {
+		return this.page.locator('[name=confirm-pass]~.input-error');
+	}
+
+	get getSideBarAvatarButton(): Locator {
+		return this.page.locator('[data-qa="sidebar-avatar-button"]');
+	}
+
+	public async gotToRegister(): Promise<void> {
+		await this.registerButton.click();
+	}
+
+	public async gotToForgotPassword(): Promise<void> {
+		await this.forgotPasswordButton.click();
+	}
+
+	public async registerNewUser({ name, email, password }: IRegister): Promise<void> {
+		await this.nameField.type(name);
+		await this.emailField.type(email);
+		await this.passwordField.type(password);
+		await this.confirmPasswordField.type(password);
+		await this.submit();
+
+		await this.waitForSelector(REGISTER_STEP2_BUTTON);
+		await this.registerNextButton.click();
+		await this.waitForSelector(HOME_SELECTOR);
+	}
+
+	public async login({ email, password }: ILogin): Promise<void> {
+		await this.emailOrUsernameField.type(email);
+		await this.passwordField.type(password);
+		await this.submitButton.click();
+	}
+
+	public async submit(): Promise<void> {
+		await this.submitButton.click();
+	}
+
+	public async registerFail(): Promise<void> {
+		await this.gotToRegister();
+		await this.submit();
+
+		await expect(this.nameInvalidText).toBeVisible();
+		await expect(this.emailInvalidText).toBeVisible();
+		await expect(this.passwordInvalidText).toBeVisible();
+	}
+
+	public async registerFailWithDifferentPassword({ name, email, password }: IRegister, invalidPassword: string): Promise<void> {
+		await this.gotToRegister();
+		await this.passwordField.type(password);
+		await this.emailField.type(email);
+		await this.nameField.type(name);
+		await this.confirmPasswordField.type(invalidPassword);
+
+		await this.submit();
+		await expect(this.confirmPasswordInvalidText).toBeVisible();
+		await expect(this.confirmPasswordInvalidText).toHaveText('The password confirmation does not match password');
+	}
+
+	public async logout(): Promise<void> {
+		await this.getSideBarAvatarButton.click();
+		await this.page.locator('li.rcx-option >> text="Logout"').click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
new file mode 100644
index 0000000000000..c3b098d0c4fb9
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/MainContent.ts
@@ -0,0 +1,345 @@
+import fs from 'fs';
+
+import { expect, Locator } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class MainContent extends BasePage {
+	get mainContent(): Locator {
+		return this.page.locator('.main-content');
+	}
+
+	get emptyFavoriteStar(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-room-header")]//*[contains(@class, "rcx-icon--name-star")]');
+	}
+
+	get favoriteStar(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-room-header")]//*[contains(@class, "rcx-icon--name-star-filled")]');
+	}
+
+	public channelTitle(title: string): Locator {
+		return this.page.locator('.rcx-room-header', { hasText: title });
+	}
+
+	get messageInput(): Locator {
+		return this.page.locator('[name="msg"]');
+	}
+
+	get sendBtn(): Locator {
+		return this.page.locator('.rc-message-box__icon.js-send');
+	}
+
+	get messageBoxActions(): Locator {
+		return this.page.locator('(//*[contains(@class, "rc-message-box__icon")])[1]');
+	}
+
+	get recordBtn(): Locator {
+		return this.page.locator('[data-qa-id="audio-record"]');
+	}
+
+	get emojiBtn(): Locator {
+		return this.page.locator('.rc-message-box__icon.emoji-picker-icon');
+	}
+
+	get messagePopUp(): Locator {
+		return this.page.locator('.message-popup');
+	}
+
+	get messagePopUpTitle(): Locator {
+		return this.page.locator('.message-popup-title');
+	}
+
+	get messagePopUpItems(): Locator {
+		return this.page.locator('.message-popup-items');
+	}
+
+	get messagePopUpFirstItem(): Locator {
+		return this.page.locator('.popup-item.selected');
+	}
+
+	get lastMessageUser(): Locator {
+		return this.page.locator('.message:last-child div:nth-child(2) button');
+	}
+
+	get lastMessageFileName(): Locator {
+		return this.page.locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div a:nth-child(1)');
+	}
+
+	get lastMessage(): Locator {
+		return this.page.locator('.messages-box [data-qa-type="message"]').last();
+	}
+
+	get lastMessageRoleAdded(): Locator {
+		return this.page.locator('.message:last-child.subscription-role-added .body');
+	}
+
+	get lastMessageUserTag(): Locator {
+		return this.page.locator('.message:last-child .role-tag');
+	}
+
+	get lastMessageForMessageTest(): Locator {
+		return this.page.locator('[data-qa-type="message"]:last-child div.message-body-wrapper div:nth-child(2)');
+	}
+
+	get messageOptionsBtns(): Locator {
+		return this.page.locator('.message:last-child .message-actions');
+	}
+
+	get messageReply(): Locator {
+		return this.page.locator('[data-qa-id="reply-in-thread"]');
+	}
+
+	get messageEdit(): Locator {
+		return this.page.locator('[data-qa-id="edit-message"]');
+	}
+
+	get messageDelete(): Locator {
+		return this.page.locator('[data-qa-id="delete-message"]');
+	}
+
+	get messagePermalink(): Locator {
+		return this.page.locator('[data-qa-id="permalink"]');
+	}
+
+	get messageCopy(): Locator {
+		return this.page.locator('[data-qa-id="copy"]');
+	}
+
+	get messageQuote(): Locator {
+		return this.page.locator('[data-qa-id="quote-message"]');
+	}
+
+	get messageStar(): Locator {
+		return this.page.locator('[data-qa-id="star-message"]');
+	}
+
+	get messageUnread(): Locator {
+		return this.page.locator('[data-id="mark-message-as-unread"][data-type="message-action"]');
+	}
+
+	get emojiPickerMainScreen(): Locator {
+		return this.page.locator('.emoji-picker');
+	}
+
+	get emojiPickerPeopleIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-people")]');
+	}
+
+	get emojiPickerNatureIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-nature")]');
+	}
+
+	get emojiPickerFoodIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-food")]');
+	}
+
+	get emojiPickerActivityIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-activity")]');
+	}
+
+	get emojiPickerTravelIcon(): Locator {
+		return this.page.locator('.emoji-picker .icon-travel');
+	}
+
+	get emojiPickerObjectsIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-objects")]');
+	}
+
+	get emojiPickerSymbolsIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-symbols")]');
+	}
+
+	get emojiPickerFlagsIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-flags")]');
+	}
+
+	get emojiPickerCustomIcon(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-rocket")]');
+	}
+
+	get emojiPickerFilter(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "js-emojipicker-search")]');
+	}
+
+	get emojiPickerChangeTone(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "change-tone")]');
+	}
+
+	get emojiGrinning(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "emoji-grinning")]');
+	}
+
+	get emojiSmile(): Locator {
+		return this.page.locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "emoji-smile")]');
+	}
+
+	get modalTitle(): Locator {
+		return this.page.locator('#modal-root .rcx-modal__title');
+	}
+
+	get modalCancelButton(): Locator {
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--ghost');
+	}
+
+	get modalDeleteMessageButton(): Locator {
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--primary-danger');
+	}
+
+	get buttonSend(): Locator {
+		return this.page.locator('#modal-root .rcx-button-group--align-end .rcx-button--primary');
+	}
+
+	get modalFilePreview(): Locator {
+		return this.page.locator(
+			'//div[@id="modal-root"]//header//following-sibling::div[1]//div//div//img | //div[@id="modal-root"]//header//following-sibling::div[1]//div//div//div//i',
+		);
+	}
+
+	get fileName(): Locator {
+		return this.page.locator('//div[@id="modal-root"]//fieldset//div[1]//label');
+	}
+
+	get fileDescription(): Locator {
+		return this.page.locator('//div[@id="modal-root"]//fieldset//div[2]//label');
+	}
+
+	public async waitForLastMessageEqualsHtml(text: string): Promise<void> {
+		await expect(this.page.locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
+	}
+
+	public async waitForLastMessageEqualsText(text: string): Promise<void> {
+		await expect(this.page.locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
+	}
+
+	public async sendMessage(text: string): Promise<void> {
+		await this.setTextToInput(text);
+		await this.keyboardPress('Enter');
+	}
+
+	public async addTextToInput(text: any): Promise<void> {
+		await this.messageInput.type(text);
+	}
+
+	public async setTextToInput(text: string, options: { delay?: number } = {}): Promise<void> {
+		await this.messageInput.click({ clickCount: 3 });
+		await this.page.keyboard.press('Backspace');
+		await this.messageInput.type(text, { delay: options.delay ?? 0 });
+	}
+
+	public async dragAndDropFile(): Promise<void> {
+		const contract = await fs.promises.readFile('./tests/e2e/utils/fixtures/any_file.txt', 'utf-8');
+
+		const dataTransfer = await this.page.evaluateHandle((contract) => {
+			const data = new DataTransfer();
+			const file = new File([`${contract}`], 'any_file.txt', {
+				type: 'text/plain',
+			});
+			data.items.add(file);
+			return data;
+		}, contract);
+
+		await this.page.dispatchEvent(
+			'div.dropzone-overlay.dropzone-overlay--enabled.background-transparent-darkest.color-content-background-color',
+			'drop',
+			{ dataTransfer },
+		);
+	}
+
+	public async sendFileClick(): Promise<void> {
+		await this.buttonSend.click();
+	}
+
+	get descriptionInput(): Locator {
+		return this.page.locator('//div[@id="modal-root"]//fieldset//div[2]//span//input');
+	}
+
+	get fileNameInput(): Locator {
+		return this.page.locator('//div[@id="modal-root"]//fieldset//div[1]//span//input');
+	}
+
+	public async setFileName(): Promise<void> {
+		await this.fileNameInput.fill('any_file1.txt');
+	}
+
+	public async setDescription(): Promise<void> {
+		await this.descriptionInput.type('any_description');
+	}
+
+	get getFileDescription(): Locator {
+		return this.page.locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div p');
+	}
+
+	public async selectAction(action: string): Promise<void> {
+		switch (action) {
+			case 'edit':
+				await this.messageEdit.click();
+				await this.messageInput.fill('this message was edited');
+				await this.keyboardPress('Enter');
+				await expect(this.lastMessageForMessageTest).toHaveText('this message was edited');
+				break;
+			case 'reply':
+				this.messageReply.click();
+				break;
+			case 'delete':
+				await this.messageDelete.click();
+				await this.acceptDeleteMessage();
+				await expect(this.lastMessageForMessageTest).not.toHaveText('Message for Message Delete Tests');
+				break;
+			case 'permalink':
+				await this.messagePermalink.click();
+				break;
+			case 'copy':
+				await this.messageCopy.click();
+				break;
+			case 'quote':
+				await this.messageQuote.click();
+				await this.messageInput.type('this is a quote message');
+				await this.keyboardPress('Enter');
+				break;
+			case 'star':
+				await this.messageStar.click();
+				await expect(this.page.locator('div.rcx-toastbar:has-text("Message has been starred")')).toBeVisible();
+				break;
+			case 'unread':
+				await this.messageUnread.click();
+				break;
+			case 'reaction':
+				await this.messageReply.click();
+				await this.emojiPickerPeopleIcon.click();
+				await this.emojiGrinning.click();
+				break;
+		}
+	}
+
+	public async openMessageActionMenu(): Promise<void> {
+		await this.page.locator('.messages-box [data-qa-type="message"]:last-child').hover();
+		await this.page.locator('[data-qa-type="message"]:last-child div.message-actions__menu').waitFor();
+		await this.page.locator('[data-qa-type="message"]:last-child div.message-actions__menu').click();
+	}
+
+	public async openMoreActionMenu(): Promise<void> {
+		await this.page.locator('.rc-message-box [data-qa-id="menu-more-actions"]').click();
+		await this.page.waitForSelector('.rc-popover__content');
+	}
+
+	public async acceptDeleteMessage(): Promise<void> {
+		await this.modalDeleteMessageButton.click();
+	}
+
+	get waitForLastMessageTextAttachmentEqualsText(): Locator {
+		return this.page.locator('[data-qa-type="message"]:last-child .rcx-attachment__details .rcx-box--with-inline-elements');
+	}
+
+	get userCard(): Locator {
+		return this.page.locator('[data-qa="UserCard"]');
+	}
+
+	get viewUserProfile(): Locator {
+		return this.page.locator('[data-qa="UserCard"] a');
+	}
+
+	public async doReload(): Promise<void> {
+		await this.page.reload({ waitUntil: 'load' });
+		await this.page.waitForSelector('.messages-box');
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/PreferencesMainContent.ts b/apps/meteor/tests/e2e/pageobjects/PreferencesMainContent.ts
new file mode 100644
index 0000000000000..6111ebed34f6c
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/PreferencesMainContent.ts
@@ -0,0 +1,46 @@
+import { expect, Locator } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+
+export class PreferencesMainContent extends BasePage {
+	get realNameTextInput(): Locator {
+		return this.page.locator('//label[contains(text(), "Name")]/..//input');
+	}
+
+	get userNameTextInput(): Locator {
+		return this.page.locator('//label[contains(text(), "Username")]/..//input');
+	}
+
+	get emailTextInput(): Locator {
+		return this.page.locator('//label[contains(text(), "Email")]/..//input');
+	}
+
+	get passwordTextInput(): Locator {
+		return this.page.locator('//label[contains(text(), "Password")]/..//input');
+	}
+
+	get avatarFileInput(): Locator {
+		return this.page.locator('.avatar-file-input');
+	}
+
+	get useUploadedAvatar(): Locator {
+		return this.page.locator('.avatar-suggestion-item:nth-of-type(2) .select-service');
+	}
+
+	get submitBtn(): Locator {
+		return this.page.locator('[data-qa="AccountProfilePageSaveButton"]');
+	}
+
+	public async changeUsername(userName: string): Promise<void> {
+		await this.userNameTextInput.fill(userName);
+	}
+
+	public async changeRealName(realName: string): Promise<void> {
+		await this.realNameTextInput.fill(realName);
+	}
+
+	public async saveChanges(): Promise<void> {
+		await expect(this.submitBtn).toBeEnabled();
+		await this.submitBtn.click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/SetupWizard.ts b/apps/meteor/tests/e2e/pageobjects/SetupWizard.ts
new file mode 100644
index 0000000000000..89ce5c70e457c
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/SetupWizard.ts
@@ -0,0 +1,172 @@
+import { expect, Locator } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+import { reason, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from '../utils/mocks/userAndPasswordMock';
+import { IRegister } from '../utils/interfaces/Login';
+import { BACKSPACE } from '../utils/mocks/keyboardKeyMock';
+
+export class SetupWizard extends BasePage {
+	private get nextStep(): Locator {
+		return this.page.locator('//button[contains(text(), "Next")]');
+	}
+
+	private get fullName(): Locator {
+		return this.page.locator('[name="fullname"]');
+	}
+
+	private get userName(): Locator {
+		return this.page.locator('[name="username"]');
+	}
+
+	private get companyEmail(): Locator {
+		return this.page.locator('[name="companyEmail"]');
+	}
+
+	private get password(): Locator {
+		return this.page.locator('[name="password"]');
+	}
+
+	get goToWorkspace(): Locator {
+		return this.page.locator('//button[contains(text(), "Confirm")]');
+	}
+
+	get organizationType(): Locator {
+		return this.page.locator('[name="organizationType"]');
+	}
+
+	get organizationTypeSelect(): Locator {
+		return this.page.locator('.rcx-options .rcx-option:first-child');
+	}
+
+	get organizationName(): Locator {
+		return this.page.locator('[name="organizationName"]');
+	}
+
+	get industry(): Locator {
+		return this.page.locator('[name="organizationIndustry"]');
+	}
+
+	get industrySelect(): Locator {
+		return this.page.locator('.rcx-options .rcx-option:first-child');
+	}
+
+	get size(): Locator {
+		return this.page.locator('[name="organizationSize"]');
+	}
+
+	get sizeSelect(): Locator {
+		return this.page.locator('.rcx-options .rcx-option:first-child');
+	}
+
+	get country(): Locator {
+		return this.page.locator('[name="country"]');
+	}
+
+	get countrySelect(): Locator {
+		return this.page.locator('.rcx-options .rcx-option:first-child');
+	}
+
+	get registeredServer(): Locator {
+		return this.page.locator('input[name=email]');
+	}
+
+	get registerButton(): Locator {
+		return this.page.locator('//button[contains(text(), "Register")]');
+	}
+
+	get agreementField(): Locator {
+		return this.page.locator('//input[@name="agreement"]/../i[contains(@class, "rcx-check-box")]');
+	}
+
+	get standaloneServer(): Locator {
+		return this.page.locator('//button[contains(text(), "Continue as standalone")]');
+	}
+
+	get standaloneConfirmText(): Locator {
+		return this.page.locator('//*[contains(text(), "Standalone Server Confirmation")]');
+	}
+
+	get fullNameInvalidText(): Locator {
+		return this.page.locator('//input[@name="fullname"]/../following-sibling::span');
+	}
+
+	get userNameInvalidText(): Locator {
+		return this.page.locator('//input[@name="username"]/../following-sibling::span');
+	}
+
+	get companyEmailInvalidText(): Locator {
+		return this.page.locator('//input[@name="companyEmail"]/../following-sibling::span');
+	}
+
+	get passwordInvalidText(): Locator {
+		return this.page.locator('//input[@name="password"]/../../../span[contains(@class, "rcx-field__error")]');
+	}
+
+	get industryInvalidSelect(): Locator {
+		return this.page.locator('//div[@name="organizationIndustry"]/../following-sibling::span');
+	}
+
+	get sizeInvalidSelect(): Locator {
+		return this.page.locator('//div[@name="organizationSize"]/../following-sibling::span');
+	}
+
+	get countryInvalidSelect(): Locator {
+		return this.page.locator('//div[@name="country"]/../following-sibling::span');
+	}
+
+	get stepThreeInputInvalidMail(): Locator {
+		return this.page.locator('//input[@name="email"]/../../span[contains(text(), "This field is required")]');
+	}
+
+	public async stepTwoSuccess(): Promise<void> {
+		await this.organizationName.type(reason);
+		await this.organizationType.click();
+		await this.organizationTypeSelect.click();
+		await expect(this.page.locator('.rcx-options')).toHaveCount(0);
+		await this.industry.click();
+		await this.industrySelect.click();
+		await expect(this.page.locator('.rcx-options')).toHaveCount(0);
+		await this.size.click();
+		await this.sizeSelect.click();
+		await expect(this.page.locator('.rcx-options')).toHaveCount(0);
+		await this.country.click();
+		await this.countrySelect.click();
+		await this.nextStep.click();
+	}
+
+	public async stepThreeSuccess(): Promise<void> {
+		await this.standaloneServer.click();
+	}
+
+	public async stepOneFailedBlankFields(): Promise<void> {
+		await this.nextStep.click();
+		await expect(this.fullNameInvalidText).toBeVisible();
+		await expect(this.userNameInvalidText).toBeVisible();
+		await expect(this.companyEmailInvalidText).toBeVisible();
+		await expect(this.passwordInvalidText).toBeVisible();
+	}
+
+	public async stepOneFailedWithInvalidEmail(adminCredentials: IRegister): Promise<void> {
+		await this.fullName.type(adminCredentials.name);
+		await this.userName.type(adminCredentials.name);
+		await this.companyEmail.type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
+		await this.password.type(adminCredentials.password);
+		await this.nextStep.click();
+		await expect(this.companyEmail).toBeFocused();
+	}
+
+	public async stepTwoFailedWithBlankFields(): Promise<void> {
+		await this.nextStep.click();
+		await expect(this.organizationName).toBeVisible();
+		await expect(this.industryInvalidSelect).toBeVisible();
+		await expect(this.sizeInvalidSelect).toBeVisible();
+		await expect(this.countryInvalidSelect).toBeVisible();
+	}
+
+	public async stepThreeFailedWithInvalidField(): Promise<void> {
+		await this.registeredServer.type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
+		await this.registeredServer.click({ clickCount: 3 });
+		await this.keyboardPress(BACKSPACE);
+		await expect(this.stepThreeInputInvalidMail).toBeVisible();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/SideNav.ts b/apps/meteor/tests/e2e/pageobjects/SideNav.ts
new file mode 100644
index 0000000000000..cc80467929abb
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/SideNav.ts
@@ -0,0 +1,180 @@
+import { expect, Locator } from '@playwright/test';
+
+import { BasePage } from './BasePage';
+import { ENTER } from '../utils/mocks/keyboardKeyMock';
+
+export class SideNav extends BasePage {
+	get channelType(): Locator {
+		return this.page.locator(
+			'//*[@id="modal-root"]//*[contains(@class, "rcx-field") and contains(text(), "Private")]/../following-sibling::label/i',
+		);
+	}
+
+	get channelName(): Locator {
+		return this.page.locator('#modal-root [placeholder="Channel Name"]');
+	}
+
+	get saveChannelBtn(): Locator {
+		return this.page.locator('//*[@id="modal-root"]//button[contains(text(), "Create")]');
+	}
+
+	get sidebarUserMenu(): Locator {
+		return this.page.locator('[data-qa="sidebar-avatar-button"]');
+	}
+
+	get statusOnline(): Locator {
+		return this.page.locator('(//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "online")])[1]');
+	}
+
+	get statusAway(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "away")]');
+	}
+
+	get statusBusy(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "busy")]');
+	}
+
+	get statusOffline(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "offline")]');
+	}
+
+	get account(): Locator {
+		return this.page.locator('//li[@class="rcx-option"]//div[contains(text(), "My Account")]');
+	}
+
+	get admin(): Locator {
+		return this.page.locator('//li[@class="rcx-option"]//div[contains(text(), "Administration")]');
+	}
+
+	get omnichannel(): Locator {
+		return this.page.locator('li.rcx-option >> text="Omnichannel"');
+	}
+
+	get users(): Locator {
+		return this.page.locator('.flex-nav [href="/admin/users"]');
+	}
+
+	get logout(): Locator {
+		return this.page.locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]');
+	}
+
+	get sideNavBar(): Locator {
+		return this.page.locator('.sidebar');
+	}
+
+	get flexNav(): Locator {
+		return this.page.locator('.flex-nav');
+	}
+
+	get spotlightSearchIcon(): Locator {
+		return this.page.locator('[data-qa="sidebar-search"]');
+	}
+
+	get spotlightSearch(): Locator {
+		return this.page.locator('[data-qa="sidebar-search-input"]');
+	}
+
+	get spotlightSearchPopUp(): Locator {
+		return this.page.locator('[data-qa="sidebar-search-result"]');
+	}
+
+	get newChannelBtnToolbar(): Locator {
+		return this.page.locator('[data-qa="sidebar-create"]');
+	}
+
+	get newChannelBtn(): Locator {
+		return this.page.locator('li.rcx-option >> text="Channel"');
+	}
+
+	get general(): Locator {
+		return this.getChannelFromList('general');
+	}
+
+	get preferences(): Locator {
+		return this.page.locator('[href="/account/preferences"]');
+	}
+
+	get profile(): Locator {
+		return this.page.locator('[href="/account/profile"]');
+	}
+
+	get preferencesClose(): Locator {
+		return this.page.locator('//*[contains(@class,"flex-nav")]//i[contains(@class, "rcx-icon--name-cross")]');
+	}
+
+	get burgerBtn(): Locator {
+		return this.page.locator('[data-qa-id="burger-menu"]');
+	}
+
+	get firstSidebarItemMenu(): Locator {
+		return this.page.locator('[data-qa=sidebar-avatar-button]');
+	}
+
+	get returnToMenuInLowResolution(): Locator {
+		return this.page.locator('//button[@aria-label="Close menu"]');
+	}
+
+	public async isSideBarOpen(): Promise<boolean> {
+		return !!(await this.sideNavBar.getAttribute('style'));
+	}
+
+	public async openChannel(channelName: string): Promise<void> {
+		await this.page.locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).scrollIntoViewIfNeeded();
+		await this.page.locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).click();
+		await expect(this.page.locator('.rcx-room-header')).toContainText(channelName);
+	}
+
+	public async searchChannel(channelName: string): Promise<void> {
+		await expect(this.spotlightSearch).toBeVisible();
+
+		await this.spotlightSearch.click();
+
+		await expect(this.spotlightSearch).toBeFocused();
+		await this.spotlightSearch.type(channelName);
+
+		await expect(this.page.locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).first()).toContainText(channelName);
+
+		await this.spotlightSearchPopUp.click();
+	}
+
+	public getChannelFromList(channelName: any): Locator {
+		return this.page.locator('[data-qa="sidebar-item-title"]', { hasText: channelName });
+	}
+
+	get searchUser(): Locator {
+		return this.page.locator('[data-qa="sidebar-search"]');
+	}
+
+	get searchInput(): Locator {
+		return this.page.locator('[data-qa="sidebar-search-input"]');
+	}
+
+	public async createChannel(channelName: any, isPrivate: any /* isReadOnly*/): Promise<void> {
+		await this.newChannelBtnToolbar.click();
+
+		await this.newChannelBtn.click();
+
+		if (!isPrivate) {
+			await this.channelType.click();
+		}
+
+		await this.channelName.type(channelName);
+
+		await expect(this.saveChannelBtn).toBeEnabled();
+
+		await this.saveChannelBtn.click();
+		await expect(this.channelType).not.toBeVisible();
+	}
+
+	public async findForChat(target: string): Promise<void> {
+		await this.searchUser.click();
+		await this.searchInput.type(target, { delay: 100 });
+		await this.page.keyboard.press(ENTER);
+	}
+
+	public async doLogout(): Promise<void> {
+		await this.page.goto('/home');
+		await this.sidebarUserMenu.click();
+		await this.logout.click();
+	}
+}
diff --git a/apps/meteor/tests/e2e/pageobjects/index.ts b/apps/meteor/tests/e2e/pageobjects/index.ts
new file mode 100644
index 0000000000000..7a9bcd67006ea
--- /dev/null
+++ b/apps/meteor/tests/e2e/pageobjects/index.ts
@@ -0,0 +1,12 @@
+export * from './Administration';
+export * from './Agents';
+export * from './ChannelCreation';
+export * from './FlexTab';
+export * from './Global';
+export * from './LoginPage';
+export * from './MainContent';
+export * from './PreferencesMainContent';
+export * from './SetupWizard';
+export * from './SideNav';
+export * from './Discussion';
+export * from './Departments';
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts b/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
deleted file mode 100644
index b5470b5d629d6..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/Administration.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-import { Locator, expect } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class Administration extends BasePage {
-	public settingsSearch(): Locator {
-		return this.getPage().locator('input[type=search]');
-	}
-
-	public settingsLink(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/settings"]');
-	}
-
-	public groupSettingsPageBack(): Locator {
-		return this.getPage().locator('button[title="Back"]');
-	}
-
-	public infoLink(): Locator {
-		return this.getPage().locator('//div[contains(text(),"Info")]');
-	}
-
-	public roomsLink(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/rooms"]');
-	}
-
-	public usersLink(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/users"]');
-	}
-
-	public accountSettingsButton(): Locator {
-		return this.getPage().locator('[data-qa-id="Accounts"] button');
-	}
-
-	public generalSettingsButton(): Locator {
-		return this.getPage().locator('[data-qa-id="General"] button');
-	}
-
-	public layoutSettingsButton(): Locator {
-		return this.getPage().locator('[data-qa-id="Layout"] button');
-	}
-
-	public permissionsLink(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/permissions"]');
-	}
-
-	public infoDeployment(): Locator {
-		return this.getPage().locator('//div[text()="Deployment"]');
-	}
-
-	public infoLicense(): Locator {
-		return this.getPage().locator('//div[text()="License"]');
-	}
-
-	public infoUsage(): Locator {
-		return this.getPage().locator('//div[text()="Usage"]');
-	}
-
-	public infoFederation(): Locator {
-		return this.getPage().locator('//section[@data-qa="admin-info"]//div[text()="Federation"]');
-	}
-
-	public roomsSearchForm(): Locator {
-		return this.getPage().locator('input[placeholder ="Search Rooms"]');
-	}
-
-	public async verifyCheckBoxRendered(checkBoxes: string[]): Promise<void> {
-		const expected = [];
-		for (const checkBox of checkBoxes) {
-			expected.push(expect(this.adminCheckBox(checkBox)).toBeVisible());
-		}
-		await Promise.all(expected);
-	}
-
-	public roomsGeneralChannel(): Locator {
-		return this.getPage().locator('//table//tbody//tr[1]//..//div//div//div//div[text()="general"]');
-	}
-
-	public notFoundChannelOrUser(): Locator {
-		return this.getPage().locator("//div[text()='No data found']");
-	}
-
-	public notFoundChannels(): Locator {
-		return this.getPage().locator("//div[text()='No results found']");
-	}
-
-	public usersFilter(): Locator {
-		return this.getPage().locator('input[placeholder="Search Users"]');
-	}
-
-	public userInTable(id: string): Locator {
-		return this.getPage().locator(`tr > td:has-text("${id}")`);
-	}
-
-	public rolesSettingsFindInput(): Locator {
-		return this.getPage().locator('[data-qa="PermissionTable-PermissionsTableFilter"]');
-	}
-
-	public rolesSettingsTab(): Locator {
-		return this.getPage().locator('[data-qa="PermissionTable-Settings"]');
-	}
-
-	public homeTitleInput(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Layout_Home_Title"]');
-	}
-
-	public buttonSave(): Locator {
-		return this.getPage().locator('button.save');
-	}
-
-	public generalSectionIframeIntegration(): Locator {
-		return this.getPage().locator('[data-qa-section="Iframe_Integration"]');
-	}
-
-	public generalIframeSendTargetOrigin(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_send_target_origin"]');
-	}
-
-	public generalSectionNotifications(): Locator {
-		return this.getPage().locator('[data-qa-section="Notifications"]');
-	}
-
-	public generalSectionRestApi(): Locator {
-		return this.getPage().locator('[data-qa-section="REST API"]');
-	}
-
-	public generalSectionReporting(): Locator {
-		return this.getPage().locator('[data-qa-section="Reporting"]');
-	}
-
-	public generalSectionStreamCast(): Locator {
-		return this.getPage().locator('[data-qa-section="Stream_Cast"]');
-	}
-
-	public generalSectionUTF8(): Locator {
-		return this.getPage().locator('[data-qa-section="UTF8"]');
-	}
-
-	public generalSiteUrl(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Site_Url"]');
-	}
-
-	public generalSiteUrlReset(): Locator {
-		return this.getPage().locator('//label[@title="Site_Url"]//following-sibling::button');
-	}
-
-	public generalSiteName(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Site_Name"]');
-	}
-
-	public generalSiteNameReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Site_Name"]');
-	}
-
-	public generalHomeTitleReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Layout_Home_Title"]');
-	}
-
-	public generalLanguage(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Language"]');
-	}
-
-	public generalSelfSignedCerts(): Locator {
-		return this.getPage().locator('//label[@data-qa-setting-id="Allow_Invalid_SelfSigned_Certs"]//i');
-	}
-
-	public generalSelfSignedCertsReset(): Locator {
-		return this.getPage().locator('//button[@data-qa-reset-setting-id="Allow_Invalid_SelfSigned_Certs"]');
-	}
-
-	public generalFavoriteRoom(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Favorite_Rooms"]');
-	}
-
-	public generalFavoriteRoomReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Favorite_Rooms"]');
-	}
-
-	public generalCdnPrefix(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="CDN_PREFIX"]');
-	}
-
-	public generalCdnPrefixReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="CDN_PREFIX"]');
-	}
-
-	public generalForceSSL(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Force_SSL"]');
-	}
-
-	public generalForceSSLReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Force_SSL"]');
-	}
-
-	public generalGoogleTagId(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="GoogleTagManager_id"]');
-	}
-
-	public generalGoogleTagIdReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="GoogleTagManager_id"]');
-	}
-
-	public generalBugsnagKey(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Bugsnag_api_key"]');
-	}
-
-	public generalBugsnagKeyReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Bugsnag_api_key"]');
-	}
-
-	public robotsFileContents(): Locator {
-		return this.getPage().locator('#Robot_Instructions_File_Content');
-	}
-
-	public robotsFileContentsReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Robot_Instructions_File_Content"]');
-	}
-
-	public defaultReferrerPolicy(): Locator {
-		return this.getPage().locator('//div[@data-qa-setting-id="Default_Referrer_Policy"]');
-	}
-
-	public defaultReferrerPolicyReset(): Locator {
-		return this.getPage().locator('[data-qa-reset-setting-id="Default_Referrer_Policy"]');
-	}
-
-	public defaultReferrerPolicyOptions(): Locator {
-		return this.getPage().locator('.rcx-options .rcx-option:first-child');
-	}
-
-	public generalIframeSend(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_send_enable"]');
-	}
-
-	public generalIframeReceive(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_receive_enable"]');
-	}
-
-	public generalIframeReceiveOrigin(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Iframe_Integration_receive_origin"]');
-	}
-
-	public generalNotificationsMaxRoomMembers(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Notifications_Max_Room_Members"]');
-	}
-
-	public generalRestApiUserLimit(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="API_User_Limit"]');
-	}
-
-	public generalReporting(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Statistics_reporting"]');
-	}
-
-	public generalStreamCastAddress(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Stream_Cast_Address"]');
-	}
-
-	public generalUTF8UsernamesRegex(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="UTF8_User_Names_Validation"]');
-	}
-
-	public generalUTF8ChannelsRegex(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="UTF8_Channel_Names_Validation"]');
-	}
-
-	public generalUTF8NamesSlug(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="UTF8_Names_Slugify"]');
-	}
-
-	public accountsSectionDefaultUserPreferences(): Locator {
-		return this.getPage().locator('[data-qa-section="Accounts_Default_User_Preferences"]');
-	}
-
-	public accountsEnableAutoAway(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_enableAutoAway"]');
-	}
-
-	public accountsIdleTimeLimit(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_idleTimeLimit"]');
-	}
-
-	public accountsDesktopNotifications(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_desktopNotifications"]');
-	}
-
-	public accountsMobileNotifications(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_pushNotifications"]');
-	}
-
-	public accountsUnreadAlert(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_unreadAlert"]');
-	}
-
-	public accountsConvertAsciiEmoji(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_convertAsciiEmoji"]');
-	}
-
-	public accountsAutoImageLoad(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_autoImageLoad"]');
-	}
-
-	public accountsSaveMobileBandwidth(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_saveMobileBandwidth"]');
-	}
-
-	public accountsCollapseMediaByDefault(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_collapseMediaByDefault"]');
-	}
-
-	public accountsHideUsernames(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideUsernames"]');
-	}
-
-	public accountsHideRoles(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideRoles"]');
-	}
-
-	public accountsHideFlexTab(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_hideFlexTab"]');
-	}
-
-	public accountsDisplayAvatars(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_displayAvatars"]');
-	}
-
-	public accountsSendOnEnter(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_sendOnEnter"]');
-	}
-
-	public accountsMessageViewMode(): Locator {
-		return this.getPage().locator('//div[@data-qa-setting-id="Accounts_Default_User_Preferences_messageViewMode"]//div//span');
-	}
-
-	public accountsEmailNotificationMode(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_emailNotificationMode"]');
-	}
-
-	public accountsNewRoomNotification(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newRoomNotification"]');
-	}
-
-	public accountsNewMessageNotification(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_newMessageNotification"]');
-	}
-
-	public accountsNotificationsSoundVolume(): Locator {
-		return this.getPage().locator('[data-qa-setting-id="Accounts_Default_User_Preferences_notificationsSoundVolume"]');
-	}
-
-	public adminCheckBox(checkBox: string): Locator {
-		return this.getPage().locator(`//label[text()="${checkBox}"]/preceding-sibling::label/i`);
-	}
-
-	public inputPermissionsSearch(): Locator {
-		return this.getPage().locator('.main-content input[placeholder="Search"]');
-	}
-
-	public getCheckboxPermission(label: string, column = 6): Locator {
-		return this.getPage().locator(`tr td:has-text("${label}") ~ td:nth-child(${column})`).locator('label').first();
-	}
-
-	public userInfoActions(): Locator {
-		return this.getPage().locator('[data-qa-id="UserInfoActions"]');
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts b/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts
deleted file mode 100644
index 89733b6419a13..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/Agents.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Locator, expect } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class Agents extends BasePage {
-	public agentsLink(): Locator {
-		return this.getPage().locator('a[href="omnichannel/agents"]');
-	}
-
-	public textAgentsTitle(): Locator {
-		return this.getPage().locator('h2 >> text="Agents"');
-	}
-
-	public inputAgentsUserName(): Locator {
-		return this.getPage().locator('input').first();
-	}
-
-	public userOption(): Locator {
-		return this.getPage().locator('.rcx-option >> text="Rocket.Cat"');
-	}
-
-	public btnAddAgents(): Locator {
-		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Add"');
-	}
-
-	public agentAdded(): Locator {
-		return this.getPage().locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:first-child');
-	}
-
-	public agentListStatus(): Locator {
-		return this.getPage().locator('[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(4)');
-	}
-
-	public userInfoTab(): Locator {
-		return this.getPage().locator('h3 div');
-	}
-
-	public agentInfo(): Locator {
-		return this.getPage().locator('[data-qa="AgentInfoUserInfoUserName"]');
-	}
-
-	public agentInfoUserInfoLabel(): Locator {
-		return this.getPage().locator('[data-qa="AgentInfoUserInfoLabel"]');
-	}
-
-	public btnClose(): Locator {
-		return this.getPage().locator('[data-qa="VerticalBarActionClose"]');
-	}
-
-	public userAvatar(): Locator {
-		return this.getPage().locator('[data-qa="AgentUserInfoAvatar"]');
-	}
-
-	public btnEdit(): Locator {
-		return this.getPage().locator('[data-qa="AgentInfoAction-Edit"]');
-	}
-
-	public btnRemove(): Locator {
-		return this.getPage().locator('[data-qa="AgentInfoAction-Remove"]');
-	}
-
-	public availabilityOption(availability: string): Locator {
-		return this.getPage().locator(`div.rcx-options[role="listbox"] div.rcx-box ol[role="listbox"] li[value="${availability}"]`);
-	}
-
-	public btnTableRemove(): Locator {
-		return this.getPage().locator(
-			'[data-qa="GenericTableAgentInfoBody"] .rcx-table__row--action .rcx-table__cell:nth-child(5) [title="Remove"]',
-		);
-	}
-
-	public agentStatus(): Locator {
-		return this.getPage().locator('[data-qa="AgentEditTextInput-Status"]');
-	}
-
-	public btnAgentSave(): Locator {
-		return this.getPage().locator('[data-qa="AgentEditButtonSave"]');
-	}
-
-	public getAgentInputs(id: string): Locator {
-		return this.getPage().locator(`[data-qa="AgentEditTextInput-${id}"]`);
-	}
-
-	public async doAddAgent(): Promise<void> {
-		await this.textAgentsTitle().waitFor();
-		await this.inputAgentsUserName().type('Rocket.Cat', { delay: 50 });
-
-		await this.userOption().click();
-		await this.btnAddAgents().click();
-	}
-
-	public async getListOfExpectedInputs(): Promise<void> {
-		const inputs = ['Name', 'Username', 'Email', 'Departaments', 'Status'].map((id) => this.getAgentInputs(id));
-		await Promise.all(inputs.map((input) => expect(input).toBeVisible()));
-		await this.btnClose().click();
-	}
-
-	public async doChangeUserStatus(availability: string): Promise<void> {
-		await this.agentAdded().click();
-		await this.btnEdit().click();
-		await this.agentStatus().click();
-		await this.availabilityOption(availability).click();
-		await this.btnAgentSave().click();
-	}
-
-	public async doRemoveAgent(): Promise<void> {
-		await this.agentAdded().click();
-		await this.btnRemove().click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts b/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
deleted file mode 100644
index 79ea81fb81ac9..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Page, Locator } from '@playwright/test';
-
-class BasePage {
-	private page: Page;
-
-	constructor(page: Page) {
-		this.page = page;
-	}
-
-	public getPage(): Page {
-		return this.page;
-	}
-
-	public async goto(path: string): Promise<void> {
-		await this.getPage().goto(path);
-	}
-
-	public async waitForSelector(selector: string): Promise<void> {
-		await this.getPage().waitForSelector(selector);
-	}
-
-	public async keyboardPress(key: string): Promise<void> {
-		await this.getPage().keyboard.press(key);
-	}
-
-	public modal(): Locator {
-		return this.getPage().locator('#modal-root');
-	}
-
-	public btnModalCancel(): Locator {
-		return this.getPage().locator(
-			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--ghost.rcx-button',
-		);
-	}
-
-	public btnModalRemove(): Locator {
-		return this.getPage().locator(
-			'#modal-root div dialog div.rcx-modal__inner div.rcx-modal__footer div div button.rcx-button--primary-danger.rcx-button',
-		);
-	}
-}
-export default BasePage;
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/ChannelCreation.ts b/apps/meteor/tests/e2e/utils/pageobjects/ChannelCreation.ts
deleted file mode 100644
index 4928918c8f016..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/ChannelCreation.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Locator, expect } from '@playwright/test';
-
-import BasePage from './BasePage';
-import { ENTER } from '../mocks/keyboardKeyMock';
-
-export default class ChannelCreation extends BasePage {
-	private buttonCreate(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-create"]');
-	}
-
-	private inputChannelName(): Locator {
-		return this.getPage().locator('[placeholder="Channel Name"]');
-	}
-
-	private inputChannelDescription(): Locator {
-		return this.getPage().locator('[placeholder="What is this channel about?"]');
-	}
-
-	private buttonCreateChannel(): Locator {
-		return this.getPage().locator('//ul[@class="rc-popover__list"]//li[@class="rcx-option"][1]');
-	}
-
-	private channelName(): Locator {
-		return this.getPage().locator('//header//div//div//div//div[2]');
-	}
-
-	private buttonConfirmCreation(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Create" )]');
-	}
-
-	private privateChannel(): Locator {
-		return this.getPage().locator('//label[contains(text(),"Private")]/../following-sibling::label/i');
-	}
-
-	private searchChannel(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search"]');
-	}
-
-	private searchChannelInput(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search-input"]');
-	}
-
-	private textArea(): Locator {
-		return this.getPage().locator('.rc-message-box__textarea');
-	}
-
-	private lastMessage(): Locator {
-		return this.getPage().locator('.message:last-child .body');
-	}
-
-	public async createChannel(name: string, isPrivate: boolean): Promise<void> {
-		await this.buttonCreate().click();
-		await this.buttonCreateChannel().click();
-		await this.inputChannelName().type(name);
-		await this.inputChannelDescription().type('any_description');
-		if (!isPrivate) {
-			await this.privateChannel().click();
-		}
-		await this.buttonConfirmCreation().click();
-
-		await expect(this.channelName()).toHaveText(name);
-	}
-
-	public async sendMessage(targetUser: string, message: string): Promise<void> {
-		await this.searchChannel().click();
-		await this.searchChannelInput().type(targetUser, { delay: 200 });
-		await this.keyboardPress(ENTER);
-
-		await this.textArea().type(message);
-		await this.keyboardPress(ENTER);
-
-		await expect(this.lastMessage()).toBeVisible();
-		await expect(this.lastMessage()).toHaveText(message);
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Discussion.ts b/apps/meteor/tests/e2e/utils/pageobjects/Discussion.ts
deleted file mode 100644
index afe9a22ab3280..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/Discussion.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Locator, expect } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class Discussion extends BasePage {
-	public startDiscussionContextItem(): Locator {
-		return this.getPage().locator('[data-qa-id="start-discussion"][data-qa-type="message-action"]');
-	}
-
-	public createDiscussionBtn(): Locator {
-		return this.getPage().locator('.rcx-option__content >> text="Discussion"');
-	}
-
-	public channelName(): Locator {
-		return this.getPage().locator('.rcx-input-box--undecorated.rcx-input-box').first();
-	}
-
-	public discussionName(): Locator {
-		return this.getPage().locator('[placeholder="A meaningful name for the discussion room"]');
-	}
-
-	public discussionMessage(): Locator {
-		return this.getPage().locator('textarea.rcx-input-box');
-	}
-
-	public buttonCreateDiscussion(): Locator {
-		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Create"');
-	}
-
-	public discussionCreated(discussionName: string): Locator {
-		return this.getPage().locator(`[data-qa="sidebar-item-title"] >> text='${discussionName}'`);
-	}
-
-	async createDiscussion(channelName: string, discussionName: string, message: string): Promise<void> {
-		await this.createDiscussionBtn().click();
-		await this.channelName().type(channelName);
-		await this.getPage().keyboard.press('Enter');
-
-		await this.discussionName().type(discussionName);
-		await this.discussionMessage().type(message);
-
-		await this.buttonCreateDiscussion().click();
-
-		await expect(this.discussionCreated(discussionName)).toBeVisible();
-	}
-
-	async createDiscussionInContext(message: string): Promise<void> {
-		await this.startDiscussionContextItem().waitFor();
-		await this.getPage().pause();
-		await this.startDiscussionContextItem().click();
-		await this.buttonCreateDiscussion().click();
-		await expect(this.discussionCreated(message)).toBeVisible();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts b/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
deleted file mode 100644
index 2c2a8f6ac1282..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/FlexTab.ts
+++ /dev/null
@@ -1,407 +0,0 @@
-import { expect, Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-import Global from './Global';
-
-export default class FlexTab extends BasePage {
-	private global = new Global(this.getPage());
-
-	public mainSideBar(): Locator {
-		return this.getPage().locator('//main//aside');
-	}
-
-	public mainSideBarBack(): Locator {
-		return this.getPage().locator('(//main//aside/h3//button)[1]');
-	}
-
-	public mainSideBarClose(): Locator {
-		return this.getPage().locator('//main//aside/h3//i[contains(@class, "rcx-icon--name-cross")]/..');
-	}
-
-	public headerMoreActions(): Locator {
-		return this.getPage().locator('//main/header//*[contains(@class, "rcx-icon--name-kebab")]/..');
-	}
-
-	public messageInput(): Locator {
-		return this.getPage().locator('.rcx-vertical-bar .js-input-message');
-	}
-
-	public channelTab(): Locator {
-		return this.getPage().locator('(//main//*[contains(@class, "rcx-icon--name-info-circled")])[1]/..');
-	}
-
-	public channelSettings(): Locator {
-		return this.getPage().locator(
-			'//aside/h3/div/i[contains(@class,"rcx-icon--name-info-circled") and contains(@class,"rcx-icon--name-info-circled")]',
-		);
-	}
-
-	public editNameBtn(): Locator {
-		return this.getPage().locator('//aside//button[contains(text(), "Edit")]');
-	}
-
-	public editUnreadAlertBtn(): Locator {
-		return this.getPage().locator('[data-edit="unreadAlert"]');
-	}
-
-	public editNameTextInput(): Locator {
-		return this.getPage().locator('//aside//label[contains(text(), "Name")]/..//input');
-	}
-
-	public editTopicTextInput(): Locator {
-		return this.getPage().locator('//main//aside//label[contains(text(), "Topic")]/..//textarea');
-	}
-
-	public editAnnouncementTextInput(): Locator {
-		return this.getPage().locator('//main//aside//label[contains(text(), "Announcement")]/..//textarea');
-	}
-
-	public editDescriptionTextInput(): Locator {
-		return this.getPage().locator('//main//aside//label[contains(text(), "Description")]/..//textarea');
-	}
-
-	public editNameSave(): Locator {
-		return this.getPage().locator('//aside//button[contains(text(), "Save")]');
-	}
-
-	public membersTab(): Locator {
-		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-members');
-	}
-
-	public membersTabContent(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-members');
-	}
-
-	public setOwnerBtn(): Locator {
-		return this.getPage().locator('//main//aside//button[contains(text(), "Set as owner")]');
-	}
-
-	public setModeratorBtn(): Locator {
-		return this.getPage().locator('[value="changeModerator"]');
-	}
-
-	public muteUserBtn(): Locator {
-		return this.getPage().locator('[value="muteUser"]');
-	}
-
-	public avatarImage(): Locator {
-		return this.getPage().locator('(//aside[contains(@class, "rcx-vertical-bar")]//*[contains(@class, "avatar")])[1]');
-	}
-
-	public memberRealName(): Locator {
-		return this.getPage().locator('[data-qa="UserInfoUserName"]');
-	}
-
-	public searchTab(): Locator {
-		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-magnifier');
-	}
-
-	public searchTabContent(): Locator {
-		return this.getPage().locator('.rocket-search-result');
-	}
-
-	public messageSearchBar(): Locator {
-		return this.getPage().locator('#message-search');
-	}
-
-	public searchResult(): Locator {
-		return this.getPage().locator('.new-day');
-	}
-
-	public notificationsTab(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Notifications Preferences")]');
-	}
-
-	public notificationsSettings(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-box--full.rcx-icon--name-bell');
-	}
-
-	public filesTab(): Locator {
-		return this.getPage().locator('.rcx-room-header .rcx-button-group__item:not(.hidden) .rcx-icon--name-clip');
-	}
-
-	public filesTabContent(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-attachment');
-	}
-
-	public fileDownload(): Locator {
-		return this.getPage().locator('.uploaded-files-list ul:first-child .file-download');
-	}
-
-	public fileName(): Locator {
-		return this.getPage().locator('.uploaded-files-list ul:first-child .room-file-item');
-	}
-
-	public mentionsTab(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Mentions")]');
-	}
-
-	public mentionsTabContent(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-at');
-	}
-
-	public starredTab(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Starred Messages")]');
-	}
-
-	public starredTabContent(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-star');
-	}
-
-	public pinnedTab(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Pinned Messages")]');
-	}
-
-	public pinnedTabContent(): Locator {
-		return this.getPage().locator('aside > h3 > div > i.rcx-icon--name-pin');
-	}
-
-	public firstSetting(): Locator {
-		return this.getPage().locator('//aside//i[contains(@class, "rcx-icon--name-hashtag")]/../div');
-	}
-
-	public secondSetting(topic: string): Locator {
-		return this.getPage().locator(`//header//*[contains(text(), "${topic}")]`);
-	}
-
-	public thirdSetting(): Locator {
-		return this.getPage().locator('[data-qa="AnnouncementAnnoucementComponent"] div:nth-child(1)');
-	}
-
-	public fourthSetting(): Locator {
-		return this.getPage().locator('//main//aside//div[contains(text(), "Description")]//following-sibling::div');
-	}
-
-	public usersAddUserTab(): Locator {
-		return this.getPage().locator('//button[text()="New"]');
-	}
-
-	public usersAddUserTabClose(): Locator {
-		return this.getPage().locator('//div[text()="Add User"]//button');
-	}
-
-	public usersButtonCancel(): Locator {
-		return this.getPage().locator('//button[text()="Cancel"]');
-	}
-
-	public usersButtonSave(): Locator {
-		return this.getPage().locator('//button[text()="Save"]');
-	}
-
-	public usersAddUserName(): Locator {
-		return this.getPage().locator('//label[text()="Name"]/following-sibling::span//input');
-	}
-
-	public usersAddUserUsername(): Locator {
-		return this.getPage().locator('//label[text()="Username"]/following-sibling::span//input');
-	}
-
-	public usersAddUserEmail(): Locator {
-		return this.getPage().locator('//label[text()="Email"]/following-sibling::span//input').first();
-	}
-
-	public usersAddUserRoleList(): Locator {
-		return this.getPage().locator('//label[text()="Roles"]/following-sibling::span//input');
-	}
-
-	public fileDescription(): Locator {
-		return this.getPage().locator(
-			'//li[@data-username="rocketchat.internal.admin.test"][last()]//div[@class="js-block-wrapper"]/following-sibling::div//div//p',
-		);
-	}
-
-	public usersAddUserPassword(): Locator {
-		return this.getPage().locator('//label[text()="Password"]/following-sibling::span//input');
-	}
-
-	public usersAddUserVerifiedCheckbox(): Locator {
-		return this.getPage().locator('//label[text()="Email"]/following-sibling::span//input/following-sibling::i');
-	}
-
-	public usersAddUserChangePasswordCheckbox(): Locator {
-		return this.getPage().locator('//div[text()="Require password change"]/following-sibling::label//input');
-	}
-
-	public usersAddUserDefaultChannelCheckbox(): Locator {
-		return this.getPage().locator('//div[text()="Join default channels"]/following-sibling::label//input');
-	}
-
-	public usersAddUserWelcomeEmailCheckbox(): Locator {
-		return this.getPage().locator('//div[text()="Send welcome email"]/following-sibling::label//input');
-	}
-
-	public usersAddUserRandomPassword(): Locator {
-		return this.getPage().locator('//div[text()="Set random password and send by email"]/following-sibling::label//input');
-	}
-
-	public closeThreadMessage(): Locator {
-		return this.getPage().locator(
-			'//html//body//div[1]//div//div[3]//div[1]//main//div//aside//div[2]//div//div//h3//div//div[2]//button[2]',
-		);
-	}
-
-	public getUserEl(username: string): Locator {
-		return this.getPage().locator(`[data-qa="MemberItem-${username}"]`);
-	}
-
-	public addUserTable(): Locator {
-		return this.getPage().locator('//div[text()="Add User"]');
-	}
-
-	public addUserButton(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Add")]');
-	}
-
-	public addUserButtonAfterChoose(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Add users")]');
-	}
-
-	public chooseUserSearch(): Locator {
-		return this.getPage().locator('//label[contains(text(), "Choose users")]/..//input');
-	}
-
-	public chooseUserOptions(): Locator {
-		return this.getPage().locator('(//div[@role="option"]//ol/li)[1]');
-	}
-
-	public userMoreActions(): Locator {
-		return this.getPage().locator('[data-qa="UserUserInfo-menu"]');
-	}
-
-	public async setUserOwner(user: string): Promise<void> {
-		await this.enterUserView(user);
-		await this.setOwnerBtn().waitFor();
-		await this.setOwnerBtn().click();
-	}
-
-	public async setUserModerator(user: string): Promise<void> {
-		await this.enterUserView(user);
-		await this.userMoreActions().click();
-		await this.setModeratorBtn().waitFor();
-		await this.setModeratorBtn().click();
-	}
-
-	public async muteUser(user: string): Promise<void> {
-		await this.enterUserView(user);
-		await this.userMoreActions().click();
-		await this.muteUserBtn().waitFor();
-		await this.muteUserBtn().click();
-		await this.global.confirmPopup();
-		await this.mainSideBarBack().click();
-	}
-
-	public async enterUserView(user: string): Promise<void> {
-		const userEl = this.getUserEl(user);
-		await userEl.waitFor();
-		await userEl.click();
-	}
-
-	public async addPeopleToChannel(user: string): Promise<void> {
-		await this.addUserButton().click();
-		await this.chooseUserSearch().type(user);
-		await this.getPage().waitForTimeout(3000);
-		await this.chooseUserOptions().click();
-		await this.addUserButtonAfterChoose().click();
-	}
-
-	public async operateFlexTab(desiredTab: string, desiredState: boolean): Promise<void> {
-		// desiredState true=open false=closed
-		const locator: { [K: string]: Locator } = {
-			channelSettings: this.channelSettings(),
-			messageSearchBar: this.messageSearchBar(),
-			avatarImage: this.avatarImage(),
-			notificationsSettings: this.notificationsSettings(),
-			filesTabContent: this.filesTabContent(),
-			mentionsTabContent: this.mentionsTabContent(),
-			starredTabContent: this.starredTabContent(),
-			pinnedTabContent: this.pinnedTabContent(),
-			channelTab: this.channelTab(),
-			searchTab: this.searchTab(),
-			membersTab: this.membersTab(),
-			notificationsTab: this.notificationsTab(),
-			filesTab: this.filesTab(),
-			mentionsTab: this.mentionsTab(),
-			starredTab: this.starredTab(),
-			pinnedTab: this.pinnedTab(),
-		};
-
-		const operate = async (tab: string, panel: string, more: boolean): Promise<void> => {
-			// this[panel].should(!desiredState ? 'be.visible' : 'not.exist');
-			if (!desiredState) {
-				await expect(locator[panel]).toBeVisible();
-			} else {
-				await expect(locator[panel]).not.toBeVisible();
-			}
-
-			if (more) {
-				await this.headerMoreActions().click();
-			}
-
-			await locator[tab].click();
-
-			// The button "more" keeps the focus when popover is closed from a click
-			// on an item, need to click again to change the status to unselected and
-			// allow the next click to open the popover again
-			if (more) {
-				await this.headerMoreActions().click();
-			}
-
-			if (desiredState) {
-				await expect(locator[panel]).toBeVisible();
-			} else {
-				await expect(locator[panel]).not.toBeVisible();
-			}
-		};
-
-		const tabs: { [K: string]: Function } = {
-			info: async (): Promise<void> => {
-				await operate('channelTab', 'channelSettings', false);
-			},
-
-			search: async (): Promise<void> => {
-				await operate('searchTab', 'messageSearchBar', false);
-			},
-
-			members: async (): Promise<void> => {
-				await operate('membersTab', 'avatarImage', false);
-			},
-
-			notifications: async (): Promise<void> => {
-				await operate('notificationsTab', 'notificationsSettings', true);
-			},
-
-			files: async (): Promise<void> => {
-				await operate('filesTab', 'filesTabContent', false);
-			},
-
-			mentions: async (): Promise<void> => {
-				await operate('mentionsTab', 'mentionsTabContent', true);
-			},
-
-			starred: async (): Promise<void> => {
-				await operate('starredTab', 'starredTabContent', true);
-			},
-
-			pinned: async (): Promise<void> => {
-				await operate('pinnedTab', 'pinnedTabContent', true);
-			},
-		};
-
-		const callFunctionTabs = async (name: string): Promise<void> => {
-			return tabs[name]();
-		};
-
-		await callFunctionTabs(desiredTab);
-	}
-
-	public flexTabViewThreadMessage(): Locator {
-		return this.getPage().locator(
-			'div.thread-list.js-scroll-thread ul.thread [data-qa-type="message"]:last-child div.message-body-wrapper [data-qa-type="message-body"]',
-		);
-	}
-
-	public async doAddRole(role: string): Promise<void> {
-		await this.usersAddUserRoleList().click();
-		await this.getPage().locator(`li[value=${role}]`).click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts b/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
deleted file mode 100644
index 4874f40af229a..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/Global.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class Global extends BasePage {
-	public modalConfirm(): Locator {
-		return this.getPage().locator('.rcx-modal .rcx-button--primary-danger');
-	}
-
-	public modalFilePreview(): Locator {
-		return this.getPage().locator('.rc-modal .upload-preview-file');
-	}
-
-	public getToastBar(): Locator {
-		return this.getPage().locator('.rcx-toastbar');
-	}
-
-	public getToastBarError(): Locator {
-		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--error');
-	}
-
-	public getToastBarSuccess(): Locator {
-		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--success');
-	}
-
-	public flexNav(): Locator {
-		return this.getPage().locator('.flex-nav');
-	}
-
-	public async confirmPopup(): Promise<void> {
-		await this.modalConfirm().waitFor();
-		await this.modalConfirm().click();
-	}
-
-	public async dismissToastBar(): Promise<void> {
-		await this.getToastBar().locator('button').click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts b/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
deleted file mode 100644
index e62277ccd5fb7..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Locator, expect } from '@playwright/test';
-
-import { ILogin, IRegister } from '../interfaces/Login';
-import BasePage from './BasePage';
-import { HOME_SELECTOR, REGISTER_STEP2_BUTTON } from '../mocks/waitSelectorsMock';
-
-export default class LoginPage extends BasePage {
-	private registerButton(): Locator {
-		return this.getPage().locator('button.register');
-	}
-
-	private forgotPasswordButton(): Locator {
-		return this.getPage().locator('.forgot-password');
-	}
-
-	public submitButton(): Locator {
-		return this.getPage().locator('.login');
-	}
-
-	public registerNextButton(): Locator {
-		return this.getPage().locator('button[data-loading-text=" Please_wait ..."]');
-	}
-
-	public emailOrUsernameField(): Locator {
-		return this.getPage().locator('[name=emailOrUsername]');
-	}
-
-	public nameField(): Locator {
-		return this.getPage().locator('[name=name]');
-	}
-
-	public emailField(): Locator {
-		return this.getPage().locator('[name=email]');
-	}
-
-	public passwordField(): Locator {
-		return this.getPage().locator('[name=pass]');
-	}
-
-	public confirmPasswordField(): Locator {
-		return this.getPage().locator('[name=confirm-pass]');
-	}
-
-	public nameInvalidText(): Locator {
-		return this.getPage().locator('[name=name]~.input-error');
-	}
-
-	public emailInvalidText(): Locator {
-		return this.getPage().locator('[name=email]~.input-error');
-	}
-
-	public passwordInvalidText(): Locator {
-		return this.getPage().locator('[name=pass]~.input-error');
-	}
-
-	public confirmPasswordInvalidText(): Locator {
-		return this.getPage().locator('[name=confirm-pass]~.input-error');
-	}
-
-	public getSideBarAvatarButton(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-avatar-button"]');
-	}
-
-	public async gotToRegister(): Promise<void> {
-		await this.registerButton().click();
-	}
-
-	public async gotToForgotPassword(): Promise<void> {
-		await this.forgotPasswordButton().click();
-	}
-
-	public async registerNewUser({ name, email, password }: IRegister): Promise<void> {
-		await this.nameField().type(name);
-		await this.emailField().type(email);
-		await this.passwordField().type(password);
-		await this.confirmPasswordField().type(password);
-		await this.submit();
-
-		await this.waitForSelector(REGISTER_STEP2_BUTTON);
-		await this.registerNextButton().click();
-		await this.waitForSelector(HOME_SELECTOR);
-	}
-
-	public async login({ email, password }: ILogin): Promise<void> {
-		await this.emailOrUsernameField().type(email);
-		await this.passwordField().type(password);
-		await this.submitButton().click();
-	}
-
-	public async submit(): Promise<void> {
-		await this.submitButton().click();
-	}
-
-	public async registerFail(): Promise<void> {
-		await this.gotToRegister();
-		await this.submit();
-
-		await expect(this.nameInvalidText()).toBeVisible();
-		await expect(this.emailInvalidText()).toBeVisible();
-		await expect(this.passwordInvalidText()).toBeVisible();
-	}
-
-	public async registerFailWithDifferentPassword({ name, email, password }: IRegister, invalidPassword: string): Promise<void> {
-		await this.gotToRegister();
-		await this.passwordField().type(password);
-		await this.emailField().type(email);
-		await this.nameField().type(name);
-		await this.confirmPasswordField().type(invalidPassword);
-
-		await this.submit();
-		await expect(this.confirmPasswordInvalidText()).toBeVisible();
-		await expect(this.confirmPasswordInvalidText()).toHaveText('The password confirmation does not match password');
-	}
-
-	public async logout(): Promise<void> {
-		await this.getSideBarAvatarButton().click();
-		await this.getPage().locator('li.rcx-option >> text="Logout"').click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts b/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
deleted file mode 100644
index d5af8fdb46537..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-import fs from 'fs';
-
-import { expect, Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class MainContent extends BasePage {
-	public mainContent(): Locator {
-		return this.getPage().locator('.main-content');
-	}
-
-	public emptyFavoriteStar(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-room-header")]//*[contains(@class, "rcx-icon--name-star")]');
-	}
-
-	public favoriteStar(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-room-header")]//*[contains(@class, "rcx-icon--name-star-filled")]');
-	}
-
-	public channelTitle(title: string): Locator {
-		return this.getPage().locator('.rcx-room-header', { hasText: title });
-	}
-
-	public messageInput(): Locator {
-		return this.getPage().locator('[name="msg"]');
-	}
-
-	public sendBtn(): Locator {
-		return this.getPage().locator('.rc-message-box__icon.js-send');
-	}
-
-	public messageBoxActions(): Locator {
-		return this.getPage().locator('(//*[contains(@class, "rc-message-box__icon")])[1]');
-	}
-
-	public recordBtn(): Locator {
-		return this.getPage().locator('[data-qa-id="audio-record"]');
-	}
-
-	public emojiBtn(): Locator {
-		return this.getPage().locator('.rc-message-box__icon.emoji-picker-icon');
-	}
-
-	public messagePopUp(): Locator {
-		return this.getPage().locator('.message-popup');
-	}
-
-	public messagePopUpTitle(): Locator {
-		return this.getPage().locator('.message-popup-title');
-	}
-
-	public messagePopUpItems(): Locator {
-		return this.getPage().locator('.message-popup-items');
-	}
-
-	public messagePopUpFirstItem(): Locator {
-		return this.getPage().locator('.popup-item.selected');
-	}
-
-	public lastMessageUser(): Locator {
-		return this.getPage().locator('.message:last-child div:nth-child(2) button');
-	}
-
-	public lastMessageFileName(): Locator {
-		return this.getPage().locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div a:nth-child(1)');
-	}
-
-	public lastMessage(): Locator {
-		return this.getPage().locator('.messages-box [data-qa-type="message"]').last();
-	}
-
-	public lastMessageRoleAdded(): Locator {
-		return this.getPage().locator('.message:last-child.subscription-role-added .body');
-	}
-
-	public lastMessageUserTag(): Locator {
-		return this.getPage().locator('.message:last-child .role-tag');
-	}
-
-	public lastMessageForMessageTest(): Locator {
-		return this.getPage().locator('[data-qa-type="message"]:last-child div.message-body-wrapper div:nth-child(2)');
-	}
-
-	public messageOptionsBtns(): Locator {
-		return this.getPage().locator('.message:last-child .message-actions');
-	}
-
-	public messageReply(): Locator {
-		return this.getPage().locator('[data-qa-id="reply-in-thread"]');
-	}
-
-	public messageEdit(): Locator {
-		return this.getPage().locator('[data-qa-id="edit-message"]');
-	}
-
-	public messageDelete(): Locator {
-		return this.getPage().locator('[data-qa-id="delete-message"]');
-	}
-
-	public messagePermalink(): Locator {
-		return this.getPage().locator('[data-qa-id="permalink"]');
-	}
-
-	public messageCopy(): Locator {
-		return this.getPage().locator('[data-qa-id="copy"]');
-	}
-
-	public messageQuote(): Locator {
-		return this.getPage().locator('[data-qa-id="quote-message"]');
-	}
-
-	public messageStar(): Locator {
-		return this.getPage().locator('[data-qa-id="star-message"]');
-	}
-
-	public messageUnread(): Locator {
-		return this.getPage().locator('[data-id="mark-message-as-unread"][data-type="message-action"]');
-	}
-
-	public emojiPickerMainScreen(): Locator {
-		return this.getPage().locator('.emoji-picker');
-	}
-
-	public emojiPickerPeopleIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-people")]');
-	}
-
-	public emojiPickerNatureIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-nature")]');
-	}
-
-	public emojiPickerFoodIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-food")]');
-	}
-
-	public emojiPickerActivityIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-activity")]');
-	}
-
-	public emojiPickerTravelIcon(): Locator {
-		return this.getPage().locator('.emoji-picker .icon-travel');
-	}
-
-	public emojiPickerObjectsIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-objects")]');
-	}
-
-	public emojiPickerSymbolsIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-symbols")]');
-	}
-
-	public emojiPickerFlagsIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-flags")]');
-	}
-
-	public emojiPickerCustomIcon(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "icon-rocket")]');
-	}
-
-	public emojiPickerFilter(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "js-emojipicker-search")]');
-	}
-
-	public emojiPickerChangeTone(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "change-tone")]');
-	}
-
-	public emojiGrinning(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "emoji-grinning")]');
-	}
-
-	public emojiSmile(): Locator {
-		return this.getPage().locator('//*[contains(@class, "emoji-picker")]//*[contains(@class, "emoji-smile")]');
-	}
-
-	public modalTitle(): Locator {
-		return this.getPage().locator('#modal-root .rcx-modal__title');
-	}
-
-	public modalCancelButton(): Locator {
-		return this.getPage().locator('#modal-root .rcx-button-group--align-end .rcx-button--ghost');
-	}
-
-	public modalDeleteMessageButton(): Locator {
-		return this.getPage().locator('#modal-root .rcx-button-group--align-end .rcx-button--primary-danger');
-	}
-
-	public buttonSend(): Locator {
-		return this.getPage().locator('#modal-root .rcx-button-group--align-end .rcx-button--primary');
-	}
-
-	public modalFilePreview(): Locator {
-		return this.getPage().locator(
-			'//div[@id="modal-root"]//header//following-sibling::div[1]//div//div//img | //div[@id="modal-root"]//header//following-sibling::div[1]//div//div//div//i',
-		);
-	}
-
-	public fileName(): Locator {
-		return this.getPage().locator('//div[@id="modal-root"]//fieldset//div[1]//label');
-	}
-
-	public fileDescription(): Locator {
-		return this.getPage().locator('//div[@id="modal-root"]//fieldset//div[2]//label');
-	}
-
-	public async waitForLastMessageEqualsHtml(text: string): Promise<void> {
-		await expect(this.getPage().locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
-	}
-
-	public async waitForLastMessageEqualsText(text: string): Promise<void> {
-		await expect(this.getPage().locator('(//*[contains(@class, "message") and contains(@class, "body")])[last()]')).toContainText(text);
-	}
-
-	public async sendMessage(text: string): Promise<void> {
-		await this.setTextToInput(text);
-		await this.keyboardPress('Enter');
-	}
-
-	public async addTextToInput(text: any): Promise<void> {
-		await this.messageInput().type(text);
-	}
-
-	public async setTextToInput(text: string, options: { delay?: number } = {}): Promise<void> {
-		await this.messageInput().click({ clickCount: 3 });
-		await this.getPage().keyboard.press('Backspace');
-		await this.messageInput().type(text, { delay: options.delay ?? 0 });
-	}
-
-	public async dragAndDropFile(): Promise<void> {
-		const contract = await fs.promises.readFile('./tests/e2e/utils/fixtures/any_file.txt', 'utf-8');
-
-		const dataTransfer = await this.getPage().evaluateHandle((contract) => {
-			const data = new DataTransfer();
-			const file = new File([`${contract}`], 'any_file.txt', {
-				type: 'text/plain',
-			});
-			data.items.add(file);
-			return data;
-		}, contract);
-
-		await this.getPage().dispatchEvent(
-			'div.dropzone-overlay.dropzone-overlay--enabled.background-transparent-darkest.color-content-background-color',
-			'drop',
-			{ dataTransfer },
-		);
-	}
-
-	public async sendFileClick(): Promise<void> {
-		await this.buttonSend().click();
-	}
-
-	public descriptionInput(): Locator {
-		return this.getPage().locator('//div[@id="modal-root"]//fieldset//div[2]//span//input');
-	}
-
-	public fileNameInput(): Locator {
-		return this.getPage().locator('//div[@id="modal-root"]//fieldset//div[1]//span//input');
-	}
-
-	public async setFileName(): Promise<void> {
-		await this.fileNameInput().fill('any_file1.txt');
-	}
-
-	public async setDescription(): Promise<void> {
-		await this.descriptionInput().type('any_description');
-	}
-
-	public getFileDescription(): Locator {
-		return this.getPage().locator('[data-qa-type="message"]:last-child div:nth-child(3) div:nth-child(2) div p');
-	}
-
-	public async selectAction(action: string): Promise<void> {
-		switch (action) {
-			case 'edit':
-				await this.messageEdit().click();
-				await this.messageInput().fill('this message was edited');
-				await this.keyboardPress('Enter');
-				await expect(this.lastMessageForMessageTest()).toHaveText('this message was edited');
-				break;
-			case 'reply':
-				this.messageReply().click();
-				break;
-			case 'delete':
-				await this.messageDelete().click();
-				await this.acceptDeleteMessage();
-				await expect(this.lastMessageForMessageTest()).not.toHaveText('Message for Message Delete Tests');
-				break;
-			case 'permalink':
-				await this.messagePermalink().click();
-				break;
-			case 'copy':
-				await this.messageCopy().click();
-				break;
-			case 'quote':
-				await this.messageQuote().click();
-				await this.messageInput().type('this is a quote message');
-				await this.keyboardPress('Enter');
-				break;
-			case 'star':
-				await this.messageStar().click();
-				await expect(this.getPage().locator('div.rcx-toastbar:has-text("Message has been starred")')).toBeVisible();
-				break;
-			case 'unread':
-				await this.messageUnread().click();
-				break;
-			case 'reaction':
-				await this.messageReply().click();
-				await this.emojiPickerPeopleIcon().click();
-				await this.emojiGrinning().click();
-				break;
-		}
-	}
-
-	public async openMessageActionMenu(): Promise<void> {
-		await this.getPage().locator('.messages-box [data-qa-type="message"]:last-child').hover();
-		await this.getPage().locator('[data-qa-type="message"]:last-child div.message-actions__menu').waitFor();
-		await this.getPage().locator('[data-qa-type="message"]:last-child div.message-actions__menu').click();
-	}
-
-	public async openMoreActionMenu(): Promise<void> {
-		await this.getPage().locator('.rc-message-box [data-qa-id="menu-more-actions"]').click();
-		await this.getPage().waitForSelector('.rc-popover__content');
-	}
-
-	public async acceptDeleteMessage(): Promise<void> {
-		await this.modalDeleteMessageButton().click();
-	}
-
-	public waitForLastMessageTextAttachmentEqualsText(): Locator {
-		return this.getPage().locator('[data-qa-type="message"]:last-child .rcx-attachment__details .rcx-box--with-inline-elements');
-	}
-
-	public userCard(): Locator {
-		return this.getPage().locator('[data-qa="UserCard"]');
-	}
-
-	public viewUserProfile(): Locator {
-		return this.getPage().locator('[data-qa="UserCard"] a');
-	}
-
-	public async doReload(): Promise<void> {
-		await this.getPage().reload({ waitUntil: 'load' });
-		await this.getPage().waitForSelector('.messages-box');
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts b/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
deleted file mode 100644
index 5d8c95441ccf8..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/PreferencesMainContent.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { expect, Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-
-export default class PreferencesMainContent extends BasePage {
-	public realNameTextInput(): Locator {
-		return this.getPage().locator('//label[contains(text(), "Name")]/..//input');
-	}
-
-	public userNameTextInput(): Locator {
-		return this.getPage().locator('//label[contains(text(), "Username")]/..//input');
-	}
-
-	public emailTextInput(): Locator {
-		return this.getPage().locator('//label[contains(text(), "Email")]/..//input');
-	}
-
-	public passwordTextInput(): Locator {
-		return this.getPage().locator('//label[contains(text(), "Password")]/..//input');
-	}
-
-	public avatarFileInput(): Locator {
-		return this.getPage().locator('.avatar-file-input');
-	}
-
-	public useUploadedAvatar(): Locator {
-		return this.getPage().locator('.avatar-suggestion-item:nth-of-type(2) .select-service');
-	}
-
-	public submitBtn(): Locator {
-		return this.getPage().locator('[data-qa="AccountProfilePageSaveButton"]');
-	}
-
-	public async changeUsername(userName: string): Promise<void> {
-		await this.userNameTextInput().fill(userName);
-	}
-
-	public async changeRealName(realName: string): Promise<void> {
-		await this.realNameTextInput().fill(realName);
-	}
-
-	public async saveChanges(): Promise<void> {
-		await expect(this.submitBtn()).toBeEnabled();
-		await this.submitBtn().click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts b/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
deleted file mode 100644
index f32d5a3c9913d..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/SetupWizard.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import { expect, Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-import { reason, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from '../mocks/userAndPasswordMock';
-import { IRegister } from '../interfaces/Login';
-import { BACKSPACE } from '../mocks/keyboardKeyMock';
-
-export default class SetupWizard extends BasePage {
-	private nextStep(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Next")]');
-	}
-
-	private fullName(): Locator {
-		return this.getPage().locator('[name="fullname"]');
-	}
-
-	private userName(): Locator {
-		return this.getPage().locator('[name="username"]');
-	}
-
-	private companyEmail(): Locator {
-		return this.getPage().locator('[name="companyEmail"]');
-	}
-
-	private password(): Locator {
-		return this.getPage().locator('[name="password"]');
-	}
-
-	public goToWorkspace(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Confirm")]');
-	}
-
-	private organizationType(): Locator {
-		return this.getPage().locator('[name="organizationType"]');
-	}
-
-	private organizationTypeSelect(): Locator {
-		return this.getPage().locator('.rcx-options .rcx-option:first-child');
-	}
-
-	private organizationName(): Locator {
-		return this.getPage().locator('[name="organizationName"]');
-	}
-
-	private industry(): Locator {
-		return this.getPage().locator('[name="organizationIndustry"]');
-	}
-
-	private industrySelect(): Locator {
-		return this.getPage().locator('.rcx-options .rcx-option:first-child');
-	}
-
-	private size(): Locator {
-		return this.getPage().locator('[name="organizationSize"]');
-	}
-
-	private sizeSelect(): Locator {
-		return this.getPage().locator('.rcx-options .rcx-option:first-child');
-	}
-
-	private country(): Locator {
-		return this.getPage().locator('[name="country"]');
-	}
-
-	private countrySelect(): Locator {
-		return this.getPage().locator('.rcx-options .rcx-option:first-child');
-	}
-
-	public registeredServer(): Locator {
-		return this.getPage().locator('input[name=email]');
-	}
-
-	public registerButton(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Register")]');
-	}
-
-	public agreementField(): Locator {
-		return this.getPage().locator('//input[@name="agreement"]/../i[contains(@class, "rcx-check-box")]');
-	}
-
-	public standaloneServer(): Locator {
-		return this.getPage().locator('//button[contains(text(), "Continue as standalone")]');
-	}
-
-	public standaloneConfirmText(): Locator {
-		return this.getPage().locator('//*[contains(text(), "Standalone Server Confirmation")]');
-	}
-
-	private fullNameInvalidText(): Locator {
-		return this.getPage().locator('//input[@name="fullname"]/../following-sibling::span');
-	}
-
-	private userNameInvalidText(): Locator {
-		return this.getPage().locator('//input[@name="username"]/../following-sibling::span');
-	}
-
-	private companyEmailInvalidText(): Locator {
-		return this.getPage().locator('//input[@name="companyEmail"]/../following-sibling::span');
-	}
-
-	private passwordInvalidText(): Locator {
-		return this.getPage().locator('//input[@name="password"]/../../../span[contains(@class, "rcx-field__error")]');
-	}
-
-	private industryInvalidSelect(): Locator {
-		return this.getPage().locator('//div[@name="organizationIndustry"]/../following-sibling::span');
-	}
-
-	private sizeInvalidSelect(): Locator {
-		return this.getPage().locator('//div[@name="organizationSize"]/../following-sibling::span');
-	}
-
-	private countryInvalidSelect(): Locator {
-		return this.getPage().locator('//div[@name="country"]/../following-sibling::span');
-	}
-
-	private stepThreeInputInvalidMail(): Locator {
-		return this.getPage().locator('//input[@name="email"]/../../span[contains(text(), "This field is required")]');
-	}
-
-	public async stepTwoSuccess(): Promise<void> {
-		await this.organizationName().type(reason);
-		await this.organizationType().click();
-		await this.organizationTypeSelect().click();
-		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-		await this.industry().click();
-		await this.industrySelect().click();
-		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-		await this.size().click();
-		await this.sizeSelect().click();
-		await expect(this.getPage().locator('.rcx-options')).toHaveCount(0);
-		await this.country().click();
-		await this.countrySelect().click();
-		await this.nextStep().click();
-	}
-
-	public async stepThreeSuccess(): Promise<void> {
-		await this.standaloneServer().click();
-	}
-
-	public async stepOneFailedBlankFields(): Promise<void> {
-		await this.nextStep().click();
-		await expect(this.fullNameInvalidText()).toBeVisible();
-		await expect(this.userNameInvalidText()).toBeVisible();
-		await expect(this.companyEmailInvalidText()).toBeVisible();
-		await expect(this.passwordInvalidText()).toBeVisible();
-	}
-
-	public async stepOneFailedWithInvalidEmail(adminCredentials: IRegister): Promise<void> {
-		await this.fullName().type(adminCredentials.name);
-		await this.userName().type(adminCredentials.name);
-		await this.companyEmail().type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
-		await this.password().type(adminCredentials.password);
-		await this.nextStep().click();
-		await expect(this.companyEmail()).toBeFocused();
-	}
-
-	public async stepTwoFailedWithBlankFields(): Promise<void> {
-		await this.nextStep().click();
-		await expect(this.organizationName()).toBeVisible();
-		await expect(this.industryInvalidSelect()).toBeVisible();
-		await expect(this.sizeInvalidSelect()).toBeVisible();
-		await expect(this.countryInvalidSelect()).toBeVisible();
-	}
-
-	public async stepThreeFailedWithInvalidField(): Promise<void> {
-		await this.registeredServer().type(INVALID_EMAIL_WITHOUT_MAIL_PROVIDER);
-		await this.registeredServer().click({ clickCount: 3 });
-		await this.keyboardPress(BACKSPACE);
-		await expect(this.stepThreeInputInvalidMail()).toBeVisible();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts b/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
deleted file mode 100644
index 0546d1c735d6c..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import { expect, Locator } from '@playwright/test';
-
-import BasePage from './BasePage';
-import { ENTER } from '../mocks/keyboardKeyMock';
-
-export default class SideNav extends BasePage {
-	public channelType(): Locator {
-		return this.getPage().locator(
-			'//*[@id="modal-root"]//*[contains(@class, "rcx-field") and contains(text(), "Private")]/../following-sibling::label/i',
-		);
-	}
-
-	public channelName(): Locator {
-		return this.getPage().locator('#modal-root [placeholder="Channel Name"]');
-	}
-
-	public saveChannelBtn(): Locator {
-		return this.getPage().locator('//*[@id="modal-root"]//button[contains(text(), "Create")]');
-	}
-
-	public sidebarUserMenu(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-avatar-button"]');
-	}
-
-	public statusOnline(): Locator {
-		return this.getPage().locator('(//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "online")])[1]');
-	}
-
-	public statusAway(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "away")]');
-	}
-
-	public statusBusy(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "busy")]');
-	}
-
-	public statusOffline(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-box--with-inline-elements") and contains(text(), "offline")]');
-	}
-
-	public account(): Locator {
-		return this.getPage().locator('//li[@class="rcx-option"]//div[contains(text(), "My Account")]');
-	}
-
-	public admin(): Locator {
-		return this.getPage().locator('//li[@class="rcx-option"]//div[contains(text(), "Administration")]');
-	}
-
-	public omnichannel(): Locator {
-		return this.getPage().locator('li.rcx-option >> text="Omnichannel"');
-	}
-
-	get users(): Locator {
-		return this.getPage().locator('.flex-nav [href="/admin/users"]');
-	}
-
-	public logout(): Locator {
-		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]');
-	}
-
-	public sideNavBar(): Locator {
-		return this.getPage().locator('.sidebar');
-	}
-
-	public flexNav(): Locator {
-		return this.getPage().locator('.flex-nav');
-	}
-
-	public spotlightSearchIcon(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search"]');
-	}
-
-	public spotlightSearch(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search-input"]');
-	}
-
-	public spotlightSearchPopUp(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search-result"]');
-	}
-
-	public newChannelBtnToolbar(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-create"]');
-	}
-
-	public newChannelBtn(): Locator {
-		return this.getPage().locator('li.rcx-option >> text="Channel"');
-	}
-
-	public general(): Locator {
-		return this.getChannelFromList('general');
-	}
-
-	public preferences(): Locator {
-		return this.getPage().locator('[href="/account/preferences"]');
-	}
-
-	public profile(): Locator {
-		return this.getPage().locator('[href="/account/profile"]');
-	}
-
-	public preferencesClose(): Locator {
-		return this.getPage().locator('//*[contains(@class,"flex-nav")]//i[contains(@class, "rcx-icon--name-cross")]');
-	}
-
-	public burgerBtn(): Locator {
-		return this.getPage().locator('[data-qa-id="burger-menu"]');
-	}
-
-	public firstSidebarItemMenu(): Locator {
-		return this.getPage().locator('[data-qa=sidebar-avatar-button]');
-	}
-
-	public returnToMenuInLowResolution(): Locator {
-		return this.getPage().locator('//button[@aria-label="Close menu"]');
-	}
-
-	public async isSideBarOpen(): Promise<boolean> {
-		return !!(await this.sideNavBar().getAttribute('style'));
-	}
-
-	public async openChannel(channelName: string): Promise<void> {
-		await this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).scrollIntoViewIfNeeded();
-		await this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).click();
-		await expect(this.getPage().locator('.rcx-room-header')).toContainText(channelName);
-	}
-
-	public async searchChannel(channelName: string): Promise<void> {
-		await expect(this.spotlightSearch()).toBeVisible();
-
-		await this.spotlightSearch().click();
-
-		await expect(this.spotlightSearch()).toBeFocused();
-		await this.spotlightSearch().type(channelName);
-
-		await expect(this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName }).first()).toContainText(channelName);
-
-		await this.spotlightSearchPopUp().click();
-	}
-
-	public getChannelFromList(channelName: any): Locator {
-		return this.getPage().locator('[data-qa="sidebar-item-title"]', { hasText: channelName });
-	}
-
-	private searchUser(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search"]');
-	}
-
-	private searchInput(): Locator {
-		return this.getPage().locator('[data-qa="sidebar-search-input"]');
-	}
-
-	public async createChannel(channelName: any, isPrivate: any /* isReadOnly*/): Promise<void> {
-		await this.newChannelBtnToolbar().click();
-
-		await this.newChannelBtn().click();
-
-		if (!isPrivate) {
-			await this.channelType().click();
-		}
-
-		await this.channelName().type(channelName);
-
-		await expect(this.saveChannelBtn()).toBeEnabled();
-
-		await this.saveChannelBtn().click();
-		await expect(this.channelType()).not.toBeVisible();
-	}
-
-	public async findForChat(target: string): Promise<void> {
-		await this.searchUser().click();
-		await this.searchInput().type(target, { delay: 100 });
-		await this.getPage().keyboard.press(ENTER);
-	}
-
-	public async doLogout(): Promise<void> {
-		await this.getPage().goto('/home');
-		await this.sidebarUserMenu().click();
-		await this.logout().click();
-	}
-}
diff --git a/apps/meteor/tests/e2e/utils/pageobjects/index.ts b/apps/meteor/tests/e2e/utils/pageobjects/index.ts
deleted file mode 100644
index 3a0e4236cff2b..0000000000000
--- a/apps/meteor/tests/e2e/utils/pageobjects/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Administration } from './Administration';
-export { default as ChannelCreation } from './ChannelCreation';
-export { default as FlexTab } from './FlexTab';
-export { default as Global } from './Global';
-export { default as LoginPage } from './LoginPage';
-export { default as MainContent } from './MainContent';
-export { default as PreferencesMainContent } from './PreferencesMainContent';
-export { default as SetupWizard } from './SetupWizard';
-export { default as SideNav } from './SideNav';
diff --git a/apps/meteor/tests/e2e/utils/types/ChatContext.ts b/apps/meteor/tests/e2e/utils/types/ChatContext.ts
deleted file mode 100644
index ec1a505677d49..0000000000000
--- a/apps/meteor/tests/e2e/utils/types/ChatContext.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import MainContent from '../pageobjects/MainContent';
-import SideNav from '../pageobjects/SideNav';
-
-export type ChatContext = {
-	mainContent: MainContent;
-	sideNav: SideNav;
-};

From 648dd164bb9aa78093698ef24b2d560321ddd406 Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Wed, 15 Jun 2022 10:22:32 -0300
Subject: [PATCH 26/36] Chore: convert communication methods to Typescript
 (#25503)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
---
 .../communication/{index.js => index.ts}      |   0
 .../communication/{methods.js => methods.ts}  |  49 +--
 .../app/apps/server/communication/uikit.js    | 321 -----------------
 .../app/apps/server/communication/uikit.ts    | 326 ++++++++++++++++++
 .../{websockets.js => websockets.ts}          | 121 ++++---
 apps/meteor/package.json                      |   2 +
 yarn.lock                                     |  20 +-
 7 files changed, 446 insertions(+), 393 deletions(-)
 rename apps/meteor/app/apps/server/communication/{index.js => index.ts} (100%)
 rename apps/meteor/app/apps/server/communication/{methods.js => methods.ts} (55%)
 delete mode 100644 apps/meteor/app/apps/server/communication/uikit.js
 create mode 100644 apps/meteor/app/apps/server/communication/uikit.ts
 rename apps/meteor/app/apps/server/communication/{websockets.js => websockets.ts} (61%)

diff --git a/apps/meteor/app/apps/server/communication/index.js b/apps/meteor/app/apps/server/communication/index.ts
similarity index 100%
rename from apps/meteor/app/apps/server/communication/index.js
rename to apps/meteor/app/apps/server/communication/index.ts
diff --git a/apps/meteor/app/apps/server/communication/methods.js b/apps/meteor/app/apps/server/communication/methods.ts
similarity index 55%
rename from apps/meteor/app/apps/server/communication/methods.js
rename to apps/meteor/app/apps/server/communication/methods.ts
index 1bccb4fbed460..a469408146b24 100644
--- a/apps/meteor/app/apps/server/communication/methods.js
+++ b/apps/meteor/app/apps/server/communication/methods.ts
@@ -1,27 +1,27 @@
 import { Meteor } from 'meteor/meteor';
+import { SettingValue } from '@rocket.chat/core-typings';
 
 import { Settings } from '../../../models/server/raw';
 import { hasPermission } from '../../../authorization/server';
 import { twoFactorRequired } from '../../../2fa/server/twoFactorRequired';
+import { AppServerOrchestrator } from '../orchestrator';
 
-const waitToLoad = function (orch) {
-	return new Promise((resolve) => {
-		let id = setInterval(() => {
+const waitToLoad = function (orch: AppServerOrchestrator): unknown {
+	return new Promise<void>((resolve) => {
+		const id = setInterval(() => {
 			if (orch.isEnabled() && orch.isLoaded()) {
 				clearInterval(id);
-				id = -1;
 				resolve();
 			}
 		}, 100);
 	});
 };
 
-const waitToUnload = function (orch) {
-	return new Promise((resolve) => {
-		let id = setInterval(() => {
+const waitToUnload = function (orch: AppServerOrchestrator): unknown {
+	return new Promise<void>((resolve) => {
+		const id = setInterval(() => {
 			if (!orch.isEnabled() && !orch.isLoaded()) {
 				clearInterval(id);
-				id = -1;
 				resolve();
 			}
 		}, 100);
@@ -29,21 +29,24 @@ const waitToUnload = function (orch) {
 };
 
 export class AppMethods {
-	constructor(orch) {
-		this._orch = orch;
+	private orch: AppServerOrchestrator;
 
-		this._addMethods();
+	constructor(orch: AppServerOrchestrator) {
+		this.orch = orch;
+
+		this.addMethods();
 	}
 
-	isEnabled() {
-		return typeof this._orch !== 'undefined' && this._orch.isEnabled();
+	isEnabled(): SettingValue {
+		return typeof this.orch !== 'undefined' && this.orch.isEnabled();
 	}
 
-	isLoaded() {
-		return typeof this._orch !== 'undefined' && this._orch.isEnabled() && this._orch.isLoaded();
+	isLoaded(): boolean {
+		return Boolean(typeof this.orch !== 'undefined' && this.orch.isEnabled() && this.orch.isLoaded());
 	}
 
-	_addMethods() {
+	private addMethods(): void {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		const instance = this;
 
 		Meteor.methods({
@@ -56,13 +59,14 @@ export class AppMethods {
 			},
 
 			'apps/go-enable': twoFactorRequired(function _appsGoEnable() {
-				if (!Meteor.userId()) {
+				const uid = Meteor.userId();
+				if (!uid) {
 					throw new Meteor.Error('error-invalid-user', 'Invalid user', {
 						method: 'apps/go-enable',
 					});
 				}
 
-				if (!hasPermission(Meteor.userId(), 'manage-apps')) {
+				if (!hasPermission(uid, 'manage-apps')) {
 					throw new Meteor.Error('error-action-not-allowed', 'Not allowed', {
 						method: 'apps/go-enable',
 					});
@@ -70,17 +74,18 @@ export class AppMethods {
 
 				Settings.updateValueById('Apps_Framework_enabled', true);
 
-				Promise.await(waitToLoad(instance._orch));
+				Promise.await(waitToLoad(instance.orch));
 			}),
 
 			'apps/go-disable': twoFactorRequired(function _appsGoDisable() {
-				if (!Meteor.userId()) {
+				const uid = Meteor.userId();
+				if (!uid) {
 					throw new Meteor.Error('error-invalid-user', 'Invalid user', {
 						method: 'apps/go-enable',
 					});
 				}
 
-				if (!hasPermission(Meteor.userId(), 'manage-apps')) {
+				if (!hasPermission(uid, 'manage-apps')) {
 					throw new Meteor.Error('error-action-not-allowed', 'Not allowed', {
 						method: 'apps/go-enable',
 					});
@@ -88,7 +93,7 @@ export class AppMethods {
 
 				Settings.updateValueById('Apps_Framework_enabled', false);
 
-				Promise.await(waitToUnload(instance._orch));
+				Promise.await(waitToUnload(instance.orch));
 			}),
 		});
 	}
diff --git a/apps/meteor/app/apps/server/communication/uikit.js b/apps/meteor/app/apps/server/communication/uikit.js
deleted file mode 100644
index 27b7c906f8cff..0000000000000
--- a/apps/meteor/app/apps/server/communication/uikit.js
+++ /dev/null
@@ -1,321 +0,0 @@
-import express from 'express';
-import cors from 'cors';
-import rateLimit from 'express-rate-limit';
-import { Meteor } from 'meteor/meteor';
-import { WebApp } from 'meteor/webapp';
-import { UIKitIncomingInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
-import { AppInterface } from '@rocket.chat/apps-engine/definition/metadata';
-
-import { Users } from '../../../models/server';
-import { settings } from '../../../settings/server';
-import { Apps } from '../orchestrator';
-import { UiKitCoreApp } from '../../../../server/sdk';
-
-const apiServer = express();
-
-apiServer.disable('x-powered-by');
-
-let corsEnabled = false;
-let allowListOrigins = [];
-
-settings.watch('API_Enable_CORS', (value) => {
-	corsEnabled = value;
-});
-
-settings.watch('API_CORS_Origin', (value) => {
-	allowListOrigins = value
-		? value
-				.trim()
-				.split(',')
-				.map((origin) => String(origin).trim().toLocaleLowerCase())
-		: [];
-});
-
-const corsOptions = {
-	origin: (origin, callback) => {
-		if (
-			!origin ||
-			!corsEnabled ||
-			allowListOrigins.includes('*') ||
-			allowListOrigins.includes(origin) ||
-			origin === settings.get('Site_Url')
-		) {
-			callback(null, true);
-		} else {
-			callback('Not allowed by CORS', false);
-		}
-	},
-};
-
-WebApp.connectHandlers.use(apiServer);
-
-// eslint-disable-next-line new-cap
-const router = express.Router();
-
-const unauthorized = (res) =>
-	res.status(401).send({
-		status: 'error',
-		message: 'You must be logged in to do this.',
-	});
-
-Meteor.startup(() => {
-	// use specific rate limit of 600 (which is 60 times the default limits) requests per minute (around 10/second)
-	const apiLimiter = rateLimit({
-		windowMs: settings.get('API_Enable_Rate_Limiter_Limit_Time_Default'),
-		max: settings.get('API_Enable_Rate_Limiter_Limit_Calls_Default') * 60,
-		skip: () =>
-			settings.get('API_Enable_Rate_Limiter') !== true ||
-			(process.env.NODE_ENV === 'development' && settings.get('API_Enable_Rate_Limiter_Dev') !== true),
-	});
-	router.use(apiLimiter);
-});
-
-router.use((req, res, next) => {
-	const { 'x-user-id': userId, 'x-auth-token': authToken, 'x-visitor-token': visitorToken } = req.headers;
-
-	if (userId && authToken) {
-		req.user = Users.findOneByIdAndLoginToken(userId, authToken);
-		req.userId = req.user._id;
-	}
-
-	if (visitorToken) {
-		req.visitor = Apps.getConverters().get('visitors').convertByToken(visitorToken);
-	}
-
-	if (!req.user && !req.visitor) {
-		return unauthorized(res);
-	}
-
-	next();
-});
-
-apiServer.use('/api/apps/ui.interaction/', cors(corsOptions), router);
-
-const getPayloadForType = (type, req) => {
-	if (type === UIKitIncomingInteractionType.BLOCK) {
-		const { type, actionId, triggerId, mid, rid, payload, container } = req.body;
-
-		const { visitor, user } = req;
-		const room = rid; // orch.getConverters().get('rooms').convertById(rid);
-		const message = mid;
-
-		return {
-			type,
-			container,
-			actionId,
-			message,
-			triggerId,
-			payload,
-			user,
-			visitor,
-			room,
-		};
-	}
-
-	if (type === UIKitIncomingInteractionType.VIEW_CLOSED) {
-		const {
-			type,
-			actionId,
-			payload: { view, isCleared },
-		} = req.body;
-
-		const { user } = req;
-
-		return {
-			type,
-			actionId,
-			user,
-			payload: {
-				view,
-				isCleared,
-			},
-		};
-	}
-
-	if (type === UIKitIncomingInteractionType.VIEW_SUBMIT) {
-		const { type, actionId, triggerId, payload } = req.body;
-
-		const { user } = req;
-
-		return {
-			type,
-			actionId,
-			triggerId,
-			payload,
-			user,
-		};
-	}
-
-	throw new Error('Type not supported');
-};
-
-router.post('/:appId', async (req, res, next) => {
-	const { appId } = req.params;
-
-	const isCore = await UiKitCoreApp.isRegistered(appId);
-	if (!isCore) {
-		return next();
-	}
-
-	const { type } = req.body;
-
-	try {
-		const payload = {
-			...getPayloadForType(type, req),
-			appId,
-		};
-
-		const result = await UiKitCoreApp[type](payload);
-
-		res.send(result);
-	} catch (e) {
-		console.error('ops', e);
-		res.status(500).send({ error: e.message });
-	}
-});
-
-const appsRoutes = (orch) => (req, res) => {
-	const { appId } = req.params;
-
-	const { type } = req.body;
-
-	switch (type) {
-		case UIKitIncomingInteractionType.BLOCK: {
-			const { type, actionId, triggerId, mid, rid, payload, container } = req.body;
-
-			const { visitor } = req;
-			const room = orch.getConverters().get('rooms').convertById(rid);
-			const user = orch.getConverters().get('users').convertToApp(req.user);
-			const message = mid && orch.getConverters().get('messages').convertById(mid);
-
-			const action = {
-				type,
-				container,
-				appId,
-				actionId,
-				message,
-				triggerId,
-				payload,
-				user,
-				visitor,
-				room,
-			};
-
-			try {
-				const eventInterface = !visitor ? AppInterface.IUIKitInteractionHandler : AppInterface.IUIKitLivechatInteractionHandler;
-
-				const result = Promise.await(orch.triggerEvent(eventInterface, action));
-
-				res.send(result);
-			} catch (e) {
-				res.status(500).send(e.message);
-			}
-			break;
-		}
-
-		case UIKitIncomingInteractionType.VIEW_CLOSED: {
-			const {
-				type,
-				actionId,
-				payload: { view, isCleared },
-			} = req.body;
-
-			const user = orch.getConverters().get('users').convertToApp(req.user);
-
-			const action = {
-				type,
-				appId,
-				actionId,
-				user,
-				payload: {
-					view,
-					isCleared,
-				},
-			};
-
-			try {
-				Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
-
-				res.sendStatus(200);
-			} catch (e) {
-				res.status(500).send(e.message);
-			}
-			break;
-		}
-
-		case UIKitIncomingInteractionType.VIEW_SUBMIT: {
-			const { type, actionId, triggerId, payload } = req.body;
-
-			const user = orch.getConverters().get('users').convertToApp(req.user);
-
-			const action = {
-				type,
-				appId,
-				actionId,
-				triggerId,
-				payload,
-				user,
-			};
-
-			try {
-				const result = Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
-
-				res.send(result);
-			} catch (e) {
-				res.status(500).send(e.message);
-			}
-			break;
-		}
-
-		case UIKitIncomingInteractionType.ACTION_BUTTON: {
-			const {
-				type,
-				actionId,
-				triggerId,
-				rid,
-				mid,
-				payload: { context },
-			} = req.body;
-
-			const room = orch.getConverters().get('rooms').convertById(rid);
-			const user = orch.getConverters().get('users').convertToApp(req.user);
-			const message = mid && orch.getConverters().get('messages').convertById(mid);
-
-			const action = {
-				type,
-				appId,
-				actionId,
-				triggerId,
-				user,
-				room,
-				message,
-				payload: {
-					context,
-				},
-			};
-
-			try {
-				const result = Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
-
-				res.send(result);
-			} catch (e) {
-				res.status(500).send(e.message);
-			}
-			break;
-		}
-
-		default: {
-			res.status(400).send({ error: 'Unknown action' });
-		}
-	}
-
-	// TODO: validate payloads per type
-};
-
-export class AppUIKitInteractionApi {
-	constructor(orch) {
-		this.orch = orch;
-
-		router.post('/:appId', appsRoutes(orch));
-	}
-}
diff --git a/apps/meteor/app/apps/server/communication/uikit.ts b/apps/meteor/app/apps/server/communication/uikit.ts
new file mode 100644
index 0000000000000..266cc3f841a32
--- /dev/null
+++ b/apps/meteor/app/apps/server/communication/uikit.ts
@@ -0,0 +1,326 @@
+import express, { Request, Response } from 'express';
+import cors from 'cors';
+import rateLimit from 'express-rate-limit';
+import { Meteor } from 'meteor/meteor';
+import { WebApp } from 'meteor/webapp';
+import { UIKitIncomingInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
+import { AppInterface } from '@rocket.chat/apps-engine/definition/metadata';
+
+import { Users } from '../../../models/server';
+import { settings } from '../../../settings/server';
+import { Apps, AppServerOrchestrator } from '../orchestrator';
+import { UiKitCoreApp } from '../../../../server/sdk';
+
+const apiServer = express();
+
+apiServer.disable('x-powered-by');
+
+let corsEnabled = false;
+let allowListOrigins: string[] = [];
+
+settings.watch('API_Enable_CORS', (value: boolean) => {
+	corsEnabled = value;
+});
+
+settings.watch('API_CORS_Origin', (value: string) => {
+	allowListOrigins = value
+		? value
+				.trim()
+				.split(',')
+				.map((origin) => String(origin).trim().toLocaleLowerCase())
+		: [];
+});
+
+WebApp.connectHandlers.use(apiServer);
+
+// eslint-disable-next-line new-cap
+const router = express.Router();
+
+const unauthorized = (res: Response): unknown =>
+	res.status(401).send({
+		status: 'error',
+		message: 'You must be logged in to do this.',
+	});
+
+Meteor.startup(() => {
+	// use specific rate limit of 600 (which is 60 times the default limits) requests per minute (around 10/second)
+	const apiLimiter = rateLimit({
+		windowMs: settings.get('API_Enable_Rate_Limiter_Limit_Time_Default'),
+		max: (settings.get('API_Enable_Rate_Limiter_Limit_Calls_Default') as number) * 60,
+		skip: () =>
+			settings.get('API_Enable_Rate_Limiter') !== true ||
+			(process.env.NODE_ENV === 'development' && settings.get('API_Enable_Rate_Limiter_Dev') !== true),
+	});
+	router.use(apiLimiter);
+});
+
+router.use((req, res, next) => {
+	const { 'x-user-id': userId, 'x-auth-token': authToken, 'x-visitor-token': visitorToken } = req.headers;
+
+	if (userId && authToken) {
+		req.body.user = Users.findOneByIdAndLoginToken(userId, authToken);
+		req.body.userId = req.body.user._id;
+	}
+
+	if (visitorToken) {
+		req.body.visitor = Apps.getConverters()?.get('visitors').convertByToken(visitorToken);
+	}
+
+	if (!req.body.user && !req.body.visitor) {
+		return unauthorized(res);
+	}
+
+	next();
+});
+
+const corsOptions = {
+	origin: (origin: string | undefined, callback: Function): void => {
+		if (
+			!origin ||
+			!corsEnabled ||
+			allowListOrigins.includes('*') ||
+			allowListOrigins.includes(origin) ||
+			origin === settings.get('Site_Url')
+		) {
+			callback(null, true);
+		} else {
+			callback('Not allowed by CORS', false);
+		}
+	},
+};
+
+apiServer.use('/api/apps/ui.interaction/', cors(corsOptions), router); // didn't have the rateLimiter option
+
+const getPayloadForType = (type: UIKitIncomingInteractionType, req: Request): {} => {
+	if (type === UIKitIncomingInteractionType.BLOCK) {
+		const { type, actionId, triggerId, mid, rid, payload, container } = req.body;
+
+		const { visitor, user } = req.body;
+		const room = rid; // orch.getConverters().get('rooms').convertById(rid);
+		const message = mid;
+
+		return {
+			type,
+			container,
+			actionId,
+			message,
+			triggerId,
+			payload,
+			user,
+			visitor,
+			room,
+		};
+	}
+
+	if (type === UIKitIncomingInteractionType.VIEW_CLOSED) {
+		const {
+			type,
+			actionId,
+			payload: { view, isCleared },
+		} = req.body;
+
+		const { user } = req.body;
+
+		return {
+			type,
+			actionId,
+			user,
+			payload: {
+				view,
+				isCleared,
+			},
+		};
+	}
+
+	if (type === UIKitIncomingInteractionType.VIEW_SUBMIT) {
+		const { type, actionId, triggerId, payload } = req.body;
+
+		const { user } = req.body;
+
+		return {
+			type,
+			actionId,
+			triggerId,
+			payload,
+			user,
+		};
+	}
+
+	throw new Error('Type not supported');
+};
+
+router.post('/:appId', async (req, res, next) => {
+	const { appId } = req.params;
+
+	const isCore = await UiKitCoreApp.isRegistered(appId);
+	if (!isCore) {
+		return next();
+	}
+
+	// eslint-disable-next-line prefer-destructuring
+	const type: UIKitIncomingInteractionType = req.body.type;
+
+	try {
+		const payload = {
+			...getPayloadForType(type, req),
+			appId,
+		};
+
+		const result = await (UiKitCoreApp as any)[type](payload); // TO-DO: fix type
+
+		res.send(result);
+	} catch (e) {
+		if (e instanceof Error) res.status(500).send({ error: e.message });
+		else res.status(500).send({ error: e });
+	}
+});
+
+const appsRoutes =
+	(orch: AppServerOrchestrator) =>
+	(req: Request, res: Response): void => {
+		const { appId } = req.params;
+
+		const { type } = req.body;
+
+		switch (type) {
+			case UIKitIncomingInteractionType.BLOCK: {
+				const { type, actionId, triggerId, mid, rid, payload, container } = req.body;
+
+				const { visitor } = req.body;
+				const room = orch.getConverters()?.get('rooms').convertById(rid);
+				const user = orch.getConverters()?.get('users').convertToApp(req.body.user);
+				const message = mid && orch.getConverters()?.get('messages').convertById(mid);
+
+				const action = {
+					type,
+					container,
+					appId,
+					actionId,
+					message,
+					triggerId,
+					payload,
+					user,
+					visitor,
+					room,
+				};
+
+				try {
+					const eventInterface = !visitor ? AppInterface.IUIKitInteractionHandler : AppInterface.IUIKitLivechatInteractionHandler;
+
+					const result = Promise.await(orch.triggerEvent(eventInterface, action));
+
+					res.send(result);
+				} catch (e) {
+					res.status(500).send(e); // e.message
+				}
+				break;
+			}
+
+			case UIKitIncomingInteractionType.VIEW_CLOSED: {
+				const {
+					type,
+					actionId,
+					payload: { view, isCleared },
+				} = req.body;
+
+				const user = orch.getConverters()?.get('users').convertToApp(req.body.user);
+
+				const action = {
+					type,
+					appId,
+					actionId,
+					user,
+					payload: {
+						view,
+						isCleared,
+					},
+				};
+
+				try {
+					Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
+
+					res.sendStatus(200);
+				} catch (e) {
+					res.status(500).send(e); // e.message
+				}
+				break;
+			}
+
+			case UIKitIncomingInteractionType.VIEW_SUBMIT: {
+				const { type, actionId, triggerId, payload } = req.body;
+
+				const user = orch.getConverters()?.get('users').convertToApp(req.body.user);
+
+				const action = {
+					type,
+					appId,
+					actionId,
+					triggerId,
+					payload,
+					user,
+				};
+
+				try {
+					const result = Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
+
+					res.send(result);
+				} catch (e) {
+					res.status(500).send(e); // e.message
+				}
+				break;
+			}
+
+			case UIKitIncomingInteractionType.ACTION_BUTTON: {
+				const {
+					type,
+					actionId,
+					triggerId,
+					rid,
+					mid,
+					payload: { context },
+				} = req.body;
+
+				const room = orch.getConverters()?.get('rooms').convertById(rid);
+				const user = orch.getConverters()?.get('users').convertToApp(req.body.user);
+				const message = mid && orch.getConverters()?.get('messages').convertById(mid);
+
+				const action = {
+					type,
+					appId,
+					actionId,
+					triggerId,
+					user,
+					room,
+					message,
+					payload: {
+						context,
+					},
+				};
+
+				try {
+					const result = Promise.await(orch.triggerEvent('IUIKitInteractionHandler', action));
+
+					res.send(result);
+				} catch (e) {
+					res.status(500).send(e); // e.message
+				}
+				break;
+			}
+
+			default: {
+				res.status(400).send({ error: 'Unknown action' });
+			}
+		}
+
+		// TODO: validate payloads per type
+	};
+
+export class AppUIKitInteractionApi {
+	orch: AppServerOrchestrator;
+
+	constructor(orch: AppServerOrchestrator) {
+		this.orch = orch;
+
+		router.post('/:appId', appsRoutes(orch));
+	}
+}
diff --git a/apps/meteor/app/apps/server/communication/websockets.js b/apps/meteor/app/apps/server/communication/websockets.ts
similarity index 61%
rename from apps/meteor/app/apps/server/communication/websockets.js
rename to apps/meteor/app/apps/server/communication/websockets.ts
index 005e74345733b..cfdfdf2b77b56 100644
--- a/apps/meteor/app/apps/server/communication/websockets.js
+++ b/apps/meteor/app/apps/server/communication/websockets.ts
@@ -1,23 +1,35 @@
-import { AppStatusUtils } from '@rocket.chat/apps-engine/definition/AppStatus';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { AppStatus, AppStatusUtils } from '@rocket.chat/apps-engine/definition/AppStatus';
+import { ISetting } from '@rocket.chat/core-typings';
+import { IStreamer } from 'meteor/rocketchat:streamer';
 
 import { SystemLogger } from '../../../../server/lib/logger/system';
 import notifications from '../../../notifications/server/lib/Notifications';
-
-export const AppEvents = Object.freeze({
-	APP_ADDED: 'app/added',
-	APP_REMOVED: 'app/removed',
-	APP_UPDATED: 'app/updated',
-	APP_STATUS_CHANGE: 'app/statusUpdate',
-	APP_SETTING_UPDATED: 'app/settingUpdated',
-	COMMAND_ADDED: 'command/added',
-	COMMAND_DISABLED: 'command/disabled',
-	COMMAND_UPDATED: 'command/updated',
-	COMMAND_REMOVED: 'command/removed',
-	ACTIONS_CHANGED: 'actions/changed',
-});
+import { AppServerOrchestrator } from '../orchestrator';
+
+export enum AppEvents {
+	APP_ADDED = 'app/added',
+	APP_REMOVED = 'app/removed',
+	APP_UPDATED = 'app/updated',
+	APP_STATUS_CHANGE = 'app/statusUpdate',
+	APP_SETTING_UPDATED = 'app/settingUpdated',
+	COMMAND_ADDED = 'command/added',
+	COMMAND_DISABLED = 'command/disabled',
+	COMMAND_UPDATED = 'command/updated',
+	COMMAND_REMOVED = 'command/removed',
+	ACTIONS_CHANGED = 'actions/changed',
+}
 
 export class AppServerListener {
-	constructor(orch, engineStreamer, clientStreamer, received) {
+	private orch: AppServerOrchestrator;
+
+	engineStreamer: IStreamer;
+
+	clientStreamer: IStreamer;
+
+	received;
+
+	constructor(orch: AppServerOrchestrator, engineStreamer: IStreamer, clientStreamer: IStreamer, received: Map<any, any>) {
 		this.orch = orch;
 		this.engineStreamer = engineStreamer;
 		this.clientStreamer = clientStreamer;
@@ -36,13 +48,13 @@ export class AppServerListener {
 		this.engineStreamer.on(AppEvents.COMMAND_REMOVED, this.onCommandRemoved.bind(this));
 	}
 
-	async onAppAdded(appId) {
-		await this.orch.getManager().loadOne(appId);
+	async onAppAdded(appId: string): Promise<void> {
+		await (this.orch.getManager()! as any).loadOne(appId); // TO-DO: fix type
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_ADDED, appId);
 	}
 
-	async onAppStatusUpdated({ appId, status }) {
-		const app = this.orch.getManager().getOneById(appId);
+	async onAppStatusUpdated({ appId, status }: { appId: string; status: AppStatus }): Promise<void> {
+		const app = this.orch.getManager()?.getOneById(appId);
 
 		if (!app || app.getStatus() === status) {
 			return;
@@ -55,70 +67,81 @@ export class AppServerListener {
 		});
 
 		if (AppStatusUtils.isEnabled(status)) {
-			await this.orch.getManager().enable(appId).catch(SystemLogger.error);
+			await this.orch.getManager()?.enable(appId).catch(SystemLogger.error);
 			this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_STATUS_CHANGE, { appId, status });
 		} else if (AppStatusUtils.isDisabled(status)) {
-			await this.orch.getManager().disable(appId, status, true).catch(SystemLogger.error);
+			await this.orch.getManager()?.disable(appId, status, true).catch(SystemLogger.error);
 			this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_STATUS_CHANGE, { appId, status });
 		}
 	}
 
-	async onAppSettingUpdated({ appId, setting }) {
-		this.received.set(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting.id}`, {
+	async onAppSettingUpdated({ appId, setting }: { appId: string; setting: ISetting }): Promise<void> {
+		this.received.set(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting._id}`, {
 			appId,
 			setting,
 			when: new Date(),
 		});
-		await this.orch.getManager().getSettingsManager().updateAppSetting(appId, setting);
+		await this.orch
+			.getManager()!
+			.getSettingsManager()
+			.updateAppSetting(appId, setting as any); // TO-DO: fix type of `setting`
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_SETTING_UPDATED, { appId });
 	}
 
-	async onAppUpdated(appId) {
+	async onAppUpdated(appId: string): Promise<void> {
 		this.received.set(`${AppEvents.APP_UPDATED}_${appId}`, { appId, when: new Date() });
 
-		const storageItem = await this.orch.getStorage().retrieveOne(appId);
+		const storageItem = await this.orch.getStorage()!.retrieveOne(appId);
 
-		const appPackage = await this.orch.getAppSourceStorage().fetch(storageItem);
+		const appPackage = await this.orch.getAppSourceStorage()!.fetch(storageItem);
 
-		await this.orch.getManager().updateLocal(storageItem, appPackage);
+		await this.orch.getManager()!.updateLocal(storageItem, appPackage);
 
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_UPDATED, appId);
 	}
 
-	async onAppRemoved(appId) {
-		const app = this.orch.getManager().getOneById(appId);
+	async onAppRemoved(appId: string): Promise<void> {
+		const app = this.orch.getManager()!.getOneById(appId);
 
 		if (!app) {
 			return;
 		}
 
-		await this.orch.getManager().removeLocal(appId);
+		await this.orch.getManager()!.removeLocal(appId);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_REMOVED, appId);
 	}
 
-	async onCommandAdded(command) {
+	async onCommandAdded(command: string): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_ADDED, command);
 	}
 
-	async onCommandDisabled(command) {
+	async onCommandDisabled(command: string): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_DISABLED, command);
 	}
 
-	async onCommandUpdated(command) {
+	async onCommandUpdated(command: string): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_UPDATED, command);
 	}
 
-	async onCommandRemoved(command) {
+	async onCommandRemoved(command: string): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_REMOVED, command);
 	}
 
-	async onActionsChanged() {
+	async onActionsChanged(): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.ACTIONS_CHANGED);
 	}
 }
 
 export class AppServerNotifier {
-	constructor(orch) {
+	engineStreamer: IStreamer;
+
+	clientStreamer: IStreamer;
+
+	received: Map<any, any>;
+
+	listener: AppServerListener;
+
+	constructor(orch: AppServerOrchestrator) {
 		this.engineStreamer = notifications.streamAppsEngine;
 
 		// This is used to broadcast to the web clients
@@ -128,17 +151,17 @@ export class AppServerNotifier {
 		this.listener = new AppServerListener(orch, this.engineStreamer, this.clientStreamer, this.received);
 	}
 
-	async appAdded(appId) {
+	async appAdded(appId: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.APP_ADDED, appId);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_ADDED, appId);
 	}
 
-	async appRemoved(appId) {
+	async appRemoved(appId: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.APP_REMOVED, appId);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_REMOVED, appId);
 	}
 
-	async appUpdated(appId) {
+	async appUpdated(appId: string): Promise<void> {
 		if (this.received.has(`${AppEvents.APP_UPDATED}_${appId}`)) {
 			this.received.delete(`${AppEvents.APP_UPDATED}_${appId}`);
 			return;
@@ -148,7 +171,7 @@ export class AppServerNotifier {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_UPDATED, appId);
 	}
 
-	async appStatusUpdated(appId, status) {
+	async appStatusUpdated(appId: string, status: AppStatus): Promise<void> {
 		if (this.received.has(`${AppEvents.APP_STATUS_CHANGE}_${appId}`)) {
 			const details = this.received.get(`${AppEvents.APP_STATUS_CHANGE}_${appId}`);
 			if (details.status === status) {
@@ -161,9 +184,9 @@ export class AppServerNotifier {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_STATUS_CHANGE, { appId, status });
 	}
 
-	async appSettingsChange(appId, setting) {
-		if (this.received.has(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting.id}`)) {
-			this.received.delete(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting.id}`);
+	async appSettingsChange(appId: string, setting: ISetting): Promise<void> {
+		if (this.received.has(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting._id}`)) {
+			this.received.delete(`${AppEvents.APP_SETTING_UPDATED}_${appId}_${setting._id}`);
 			return;
 		}
 
@@ -171,27 +194,27 @@ export class AppServerNotifier {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.APP_SETTING_UPDATED, { appId });
 	}
 
-	async commandAdded(command) {
+	async commandAdded(command: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.COMMAND_ADDED, command);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_ADDED, command);
 	}
 
-	async commandDisabled(command) {
+	async commandDisabled(command: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.COMMAND_DISABLED, command);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_DISABLED, command);
 	}
 
-	async commandUpdated(command) {
+	async commandUpdated(command: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.COMMAND_UPDATED, command);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_UPDATED, command);
 	}
 
-	async commandRemoved(command) {
+	async commandRemoved(command: string): Promise<void> {
 		this.engineStreamer.emit(AppEvents.COMMAND_REMOVED, command);
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.COMMAND_REMOVED, command);
 	}
 
-	async actionsChanged() {
+	async actionsChanged(): Promise<void> {
 		this.clientStreamer.emitWithoutBroadcast(AppEvents.ACTIONS_CHANGED);
 	}
 }
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index f73336794d109..630192e251465 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -91,9 +91,11 @@
 		"@types/clipboard": "^2.0.7",
 		"@types/codemirror": "^5",
 		"@types/cookie-parser": "^1.4.2",
+		"@types/cors": "^2.8.5",
 		"@types/dompurify": "^2.2.2",
 		"@types/ejson": "^2.2.0",
 		"@types/express": "^4.17.12",
+		"@types/express-rate-limit": "^5.1.3",
 		"@types/fibers": "^3.1.1",
 		"@types/google-libphonenumber": "^7.4.21",
 		"@types/imap": "^0.8.35",
diff --git a/yarn.lock b/yarn.lock
index 8509f25ad3cce..04f22677f49c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3782,9 +3782,11 @@ __metadata:
     "@types/codemirror": ^5
     "@types/cookie": ^0.5.1
     "@types/cookie-parser": ^1.4.2
+    "@types/cors": ^2.8.5
     "@types/dompurify": ^2.2.2
     "@types/ejson": ^2.2.0
     "@types/express": ^4.17.12
+    "@types/express-rate-limit": ^5.1.3
     "@types/fibers": ^3.1.1
     "@types/google-libphonenumber": ^7.4.21
     "@types/imap": ^0.8.35
@@ -5824,6 +5826,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cors@npm:^2.8.5":
+  version: 2.8.12
+  resolution: "@types/cors@npm:2.8.12"
+  checksum: 8c45f112c7d1d2d831b4b266f2e6ed33a1887a35dcbfe2a18b28370751fababb7cd045e745ef84a523c33a25932678097bf79afaa367c6cb3fa0daa7a6438257
+  languageName: node
+  linkType: hard
+
 "@types/dompurify@npm:^2.2.2":
   version: 2.3.3
   resolution: "@types/dompurify@npm:2.3.3"
@@ -5881,6 +5890,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/express-rate-limit@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "@types/express-rate-limit@npm:5.1.3"
+  dependencies:
+    "@types/express": "*"
+  checksum: 44c0b79e48a9416309459e4aad7dbac6bdf0e1777ed2d9620d1512eecfacbd32d7d1b86789c116ced32e926b595ea55d212076b46ea934676ab352e260233686
+  languageName: node
+  linkType: hard
+
 "@types/express-serve-static-core@npm:^4.17.18":
   version: 4.17.28
   resolution: "@types/express-serve-static-core@npm:4.17.28"
@@ -7561,7 +7579,7 @@ __metadata:
     human-interval: ~1.0.0
     moment-timezone: ~0.5.27
     mongodb: ~3.5.0
-  checksum: f5f68008298f9482631f1f494e392cd6b8ba7971a3b0ece81ae2abe60f53d67973ff4476156fa5c9c41b8b58c4ccd284e95c545e0523996dfd05f9a80b843e07
+  checksum: cc8c1bbba7545628d9d039c58e701ff65cf07f241f035b731716eec0d5ef906ce09d60c3b321bbfb9e6c641994d1afd23aaeb92d645b33bf7be9942f13574173
   languageName: node
   linkType: hard
 

From 208b6ad952b7c844c543e443fb1a8313c04541f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <henrique.jobs1@gmail.com>
Date: Wed, 15 Jun 2022 11:55:28 -0300
Subject: [PATCH 27/36] Chore: Translate admin helpers to TS (#25690)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
---
 .../app/apps/client/@types/IOrchestrator.ts   | 23 +------
 apps/meteor/app/apps/client/orchestrator.ts   | 42 ------------
 .../client/views/admin/apps/PriceDisplay.tsx  |  6 +-
 .../admin/apps/{helpers.js => helpers.ts}     | 68 ++++++++++++-------
 .../views/admin/apps/hooks/useAppInfo.ts      |  2 +-
 .../rocketchat-i18n/i18n/en.i18n.json         |  1 +
 packages/core-typings/src/Apps.ts             | 51 +++++++++++---
 7 files changed, 94 insertions(+), 99 deletions(-)
 rename apps/meteor/client/views/admin/apps/{helpers.js => helpers.ts} (68%)

diff --git a/apps/meteor/app/apps/client/@types/IOrchestrator.ts b/apps/meteor/app/apps/client/@types/IOrchestrator.ts
index 55400407a9462..848dcdfabf821 100644
--- a/apps/meteor/app/apps/client/@types/IOrchestrator.ts
+++ b/apps/meteor/app/apps/client/@types/IOrchestrator.ts
@@ -1,4 +1,5 @@
 import { ISetting } from '@rocket.chat/apps-engine/definition/settings/ISetting';
+import { App } from '@rocket.chat/core-typings';
 
 export interface IDetailedDescription {
 	raw: string;
@@ -109,26 +110,6 @@ export enum EAppPurchaseType {
 	PurchaseTypeSubscription = 'subscription',
 }
 
-export interface IAppFromMarketplace {
-	appId: string;
-	latest: ILatest;
-	isAddon: boolean;
-	isEnterpriseOnly: boolean;
-	isBundle: boolean;
-	bundledAppIds: any[];
-	bundledIn: IBundledIn[];
-	isPurchased: boolean;
-	isSubscribed: boolean;
-	subscriptionInfo: ISubscriptionInfo;
-	price: number;
-	purchaseType: EAppPurchaseType;
-	isUsageBased: boolean;
-	createdAt: Date;
-	modifiedAt: Date;
-	pricingPlans: IPricingPlan[];
-	addonId: string;
-}
-
 export interface ILanguageInfo {
 	Params: string;
 	Description: string;
@@ -163,7 +144,7 @@ export interface ICategory {
 // }
 
 export interface IAppSynced {
-	app: IAppFromMarketplace;
+	app: App;
 	success: boolean;
 }
 
diff --git a/apps/meteor/app/apps/client/orchestrator.ts b/apps/meteor/app/apps/client/orchestrator.ts
index ea224409fbc4e..155027a31f942 100644
--- a/apps/meteor/app/apps/client/orchestrator.ts
+++ b/apps/meteor/app/apps/client/orchestrator.ts
@@ -15,8 +15,6 @@ import { settings } from '../../settings/client';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { createDeferredValue } from '../lib/misc/DeferredValue';
 import {
-	IPricingPlan,
-	EAppPurchaseType,
 	// IAppFromMarketplace,
 	IAppLanguage,
 	IAppExternalURL,
@@ -24,10 +22,6 @@ import {
 	// IAppSynced,
 	// IAppScreenshots,
 	// IScreenshot,
-	IAuthor,
-	IDetailedChangelog,
-	IDetailedDescription,
-	ISubscriptionInfo,
 } from './@types/IOrchestrator';
 import { AppWebsocketReceiver } from './communication';
 import { handleI18nResources } from './i18n';
@@ -35,42 +29,6 @@ import { RealAppsEngineUIHost } from './RealAppsEngineUIHost';
 import { APIClient } from '../../utils/client';
 import { hasAtLeastOnePermission } from '../../authorization/client';
 
-export interface IAppsFromMarketplace {
-	price: number;
-	pricingPlans: IPricingPlan[];
-	purchaseType: EAppPurchaseType;
-	isEnterpriseOnly: boolean;
-	modifiedAt: Date;
-	internalId: string;
-	id: string;
-	name: string;
-	nameSlug: string;
-	version: string;
-	categories: string[];
-	description: string;
-	detailedDescription: IDetailedDescription;
-	detailedChangelog: IDetailedChangelog;
-	requiredApiVersion: string;
-	author: IAuthor;
-	classFile: string;
-	iconFile: string;
-	iconFileData: string;
-	status: string;
-	isVisible: boolean;
-	createdDate: Date;
-	modifiedDate: Date;
-	isPurchased: boolean;
-	isSubscribed: boolean;
-	subscriptionInfo: ISubscriptionInfo;
-	compiled: boolean;
-	compileJobId: string;
-	changesNote: string;
-	languages: string[];
-	privacyPolicySummary: string;
-	internalChangesNote: string;
-	permissions: IPermission[];
-}
-
 class AppClientOrchestrator {
 	private _appClientUIHost: RealAppsEngineUIHost;
 
diff --git a/apps/meteor/client/views/admin/apps/PriceDisplay.tsx b/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
index e185850800e4f..8ad3ac19fffda 100644
--- a/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
+++ b/apps/meteor/client/views/admin/apps/PriceDisplay.tsx
@@ -1,4 +1,4 @@
-import type { PricingPlan } from '@rocket.chat/core-typings';
+import type { AppPricingPlan } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, useMemo } from 'react';
@@ -7,7 +7,7 @@ import { formatPricingPlan, formatPrice } from './helpers';
 
 type PriceDisplayProps = {
 	purchaseType: string;
-	pricingPlans: PricingPlan[];
+	pricingPlans: AppPricingPlan[];
 	price: number;
 	showType?: boolean;
 	marginInline?: string;
@@ -20,7 +20,7 @@ type FormattedPriceAndPlan = {
 	price: string;
 };
 
-const formatPriceAndPurchaseType = (purchaseType: string, pricingPlans: PricingPlan[], price: number): FormattedPriceAndPlan => {
+const formatPriceAndPurchaseType = (purchaseType: string, pricingPlans: AppPricingPlan[], price: number): FormattedPriceAndPlan => {
 	if (purchaseType === 'subscription') {
 		const type = 'Subscription';
 		if (!pricingPlans || !Array.isArray(pricingPlans) || pricingPlans.length === 0) {
diff --git a/apps/meteor/client/views/admin/apps/helpers.js b/apps/meteor/client/views/admin/apps/helpers.ts
similarity index 68%
rename from apps/meteor/client/views/admin/apps/helpers.js
rename to apps/meteor/client/views/admin/apps/helpers.ts
index 1314bd1b56a7b..bf44e5ebd3706 100644
--- a/apps/meteor/client/views/admin/apps/helpers.js
+++ b/apps/meteor/client/views/admin/apps/helpers.ts
@@ -1,4 +1,6 @@
 import { AppStatus } from '@rocket.chat/apps-engine/definition/AppStatus';
+import { IApiEndpointMetadata } from '@rocket.chat/apps-engine/definition/api';
+import { App, AppPricingPlan } from '@rocket.chat/core-typings';
 import semver from 'semver';
 
 import { Utilities } from '../../../../app/apps/lib/misc/Utilities';
@@ -14,26 +16,29 @@ const appErroredStatuses = [
 	AppStatus.INVALID_LICENSE_DISABLED,
 ];
 
-export const apiCurlGetter = (absoluteUrl) => (method, api) => {
-	const example = api.examples[method] || {};
-	return Utilities.curl({
-		url: absoluteUrl(api.computedPath),
-		method,
-		params: example.params,
-		query: example.query,
-		content: example.content,
-		headers: example.headers,
-	}).split('\n');
-};
+export const apiCurlGetter =
+	(absoluteUrl: (path: string) => string) =>
+	(method: string, api: IApiEndpointMetadata): string[] => {
+		const example = (api.examples && api.examples[method]) || {};
+		return Utilities.curl({
+			url: absoluteUrl(api.computedPath),
+			method,
+			params: example.params,
+			query: example.query,
+			content: example.content,
+			headers: example.headers,
+			auth: '',
+		}).split('\n');
+	};
 
-export function handleInstallError(apiError) {
+export function handleInstallError(apiError: { xhr: { responseJSON: { status: any; messages: any; error: any; payload?: any } } }): void {
 	if (!apiError.xhr || !apiError.xhr.responseJSON) {
 		return;
 	}
 
 	const { status, messages, error, payload = null } = apiError.xhr.responseJSON;
 
-	let message;
+	let message: string;
 
 	switch (status) {
 		case 'storage_error':
@@ -41,7 +46,7 @@ export function handleInstallError(apiError) {
 			break;
 		case 'app_user_error':
 			message = messages.join('');
-			if (payload && payload.username) {
+			if (payload?.username) {
 				message = t('Apps_User_Already_Exists', { username: payload.username });
 			}
 			break;
@@ -49,20 +54,23 @@ export function handleInstallError(apiError) {
 			if (error) {
 				message = error;
 			} else {
-				message = 'There has been an error installing the app';
+				message = t('There_has_been_an_error_installing_the_app');
 			}
 	}
 
 	dispatchToastMessage({ type: 'error', message });
 }
 
-const shouldHandleErrorAsWarning = (message) => {
+const shouldHandleErrorAsWarning = (message: string): boolean => {
 	const warnings = ['Could not reach the Marketplace'];
 
 	return warnings.includes(message);
 };
 
-export const handleAPIError = (error) => {
+export const handleAPIError = (error: {
+	xhr: { responseJSON: { status: any; messages: any; error: any; payload?: any } };
+	message: string;
+}): void => {
 	const message = (error.xhr && error.xhr.responseJSON && error.xhr.responseJSON.error) || error.message;
 
 	if (shouldHandleErrorAsWarning(message)) {
@@ -73,7 +81,7 @@ export const handleAPIError = (error) => {
 	dispatchToastMessage({ type: 'error', message });
 };
 
-export const warnStatusChange = (appName, status) => {
+export const warnStatusChange = (appName: string, status: AppStatus): void => {
 	if (appErroredStatuses.includes(status)) {
 		dispatchToastMessage({ type: 'error', message: (t(`App_status_${status}`), appName) });
 		return;
@@ -82,6 +90,12 @@ export const warnStatusChange = (appName, status) => {
 	dispatchToastMessage({ type: 'info', message: (t(`App_status_${status}`), appName) });
 };
 
+type appButtonPropsResponse = {
+	action: 'update' | 'install' | 'purchase';
+	icon?: 'reload';
+	label: 'Update' | 'Install' | 'Subscribe' | 'See Pricing' | 'Try now' | 'Buy';
+};
+
 export const appButtonProps = ({
 	installed,
 	version,
@@ -92,7 +106,7 @@ export const appButtonProps = ({
 	subscriptionInfo,
 	pricingPlans,
 	isEnterpriseOnly,
-}) => {
+}: App): appButtonPropsResponse | undefined => {
 	const canUpdate = installed && version && marketplaceVersion && semver.lt(version, marketplaceVersion);
 	if (canUpdate) {
 		return {
@@ -153,12 +167,18 @@ export const appButtonProps = ({
 	};
 };
 
-export const appStatusSpanProps = ({ installed, status, subscriptionInfo }) => {
+type appStatusSpanPropsResponse = {
+	type?: 'failed' | 'warning';
+	icon: 'warning' | 'ban' | 'checkmark-circled' | 'check';
+	label: 'Config Needed' | 'Failed' | 'Disabled' | 'Trial period' | 'Enabled';
+};
+
+export const appStatusSpanProps = ({ installed, status, subscriptionInfo }: App): appStatusSpanPropsResponse | undefined => {
 	if (!installed) {
 		return;
 	}
 
-	const isFailed = appErroredStatuses.includes(status);
+	const isFailed = status && appErroredStatuses.includes(status);
 	if (isFailed) {
 		return {
 			type: 'failed',
@@ -167,7 +187,7 @@ export const appStatusSpanProps = ({ installed, status, subscriptionInfo }) => {
 		};
 	}
 
-	const isEnabled = appEnabledStatuses.includes(status);
+	const isEnabled = status && appEnabledStatuses.includes(status);
 	if (!isEnabled) {
 		return {
 			type: 'warning',
@@ -190,9 +210,9 @@ export const appStatusSpanProps = ({ installed, status, subscriptionInfo }) => {
 	};
 };
 
-export const formatPrice = (price) => `\$${Number.parseFloat(price).toFixed(2)}`;
+export const formatPrice = (price: number): string => `\$${price.toFixed(2)}`;
 
-export const formatPricingPlan = ({ strategy, price, tiers = [], trialDays }) => {
+export const formatPricingPlan = ({ strategy, price, tiers = [], trialDays }: AppPricingPlan): string => {
 	const { perUnit = false } = (Array.isArray(tiers) && tiers.find((tier) => tier.price === price)) || {};
 
 	const pricingPlanTranslationString = [
diff --git a/apps/meteor/client/views/admin/apps/hooks/useAppInfo.ts b/apps/meteor/client/views/admin/apps/hooks/useAppInfo.ts
index 313f4291bf40b..499b0d323341d 100644
--- a/apps/meteor/client/views/admin/apps/hooks/useAppInfo.ts
+++ b/apps/meteor/client/views/admin/apps/hooks/useAppInfo.ts
@@ -1,3 +1,4 @@
+import { App } from '@rocket.chat/core-typings';
 import { useEndpoint, EndpointFunction } from '@rocket.chat/ui-contexts';
 import { useState, useEffect, useContext } from 'react';
 
@@ -5,7 +6,6 @@ import { ISettings } from '../../../../../app/apps/client/@types/IOrchestrator';
 import { Apps } from '../../../../../app/apps/client/orchestrator';
 import { AppsContext } from '../AppsContext';
 import { AppInfo } from '../definitions/AppInfo';
-import { App } from '../types';
 
 const getBundledInApp = async (app: App): Promise<App['bundledIn']> => {
 	const { bundledIn = [] } = app;
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index b68930eb02d90..98cb59cc79fa5 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -4407,6 +4407,7 @@
   "There_are_no_personal_access_tokens_created_yet": "There are no Personal Access Tokens created yet.",
   "There_are_no_users_in_this_role": "There are no users in this role.",
   "There_is_one_or_more_apps_in_an_invalid_state_Click_here_to_review": "There is one or more apps in an invalid state. Click here to review.",
+  "There_has_been_an_error_installing_the_app": "There has been an error installing the app",
   "These_notes_will_be_available_in_the_call_summary": "These notes will be available in the call summary",
   "This_agent_was_already_selected": "This agent was already selected",
   "this_app_is_included_with_subscription": "This app is included with __bundleName__ subscription",
diff --git a/packages/core-typings/src/Apps.ts b/packages/core-typings/src/Apps.ts
index 23bc6d952e9b2..65974751bbf1c 100644
--- a/packages/core-typings/src/Apps.ts
+++ b/packages/core-typings/src/Apps.ts
@@ -10,21 +10,49 @@ export type AppScreenshot = {
 	modifiedAt: string;
 };
 
-export type PricingPlan = {
+export type AppTiers = {
+	perUnit: boolean;
+	minimum: number;
+	maximum: number;
+	price: number;
+};
+
+export type AppPricingPlan = {
 	id: string;
 	enabled: boolean;
 	price: number;
 	trialDays: number;
 	strategy: string;
 	isPerSeat: boolean;
-	tiers?: Tiers[];
+	tiers?: AppTiers[];
 };
 
-export type Tiers = {
-	perUnit: boolean;
-	minimum: number;
-	maximum: number;
-	price: number;
+export type AppLicense = {
+	license: string;
+	version: number;
+	expireDate: string;
+};
+
+export enum AppSubscriptionStatus {
+	Trialing = 'trialing',
+	Active = 'active',
+	Cancelled = 'cancelled',
+	Cancelling = 'cancelling',
+	PastDue = 'pastDue',
+}
+
+export type AppSubscriptionInfo = {
+	typeOf: string;
+	status: AppSubscriptionStatus;
+	statusFromBilling: boolean;
+	isSeatBased: boolean;
+	seats: number;
+	maxSeats: number;
+	license: AppLicense;
+	startDate: string;
+	periodEnd: string;
+	endDate: string;
+	isSubscribedViaBundle: boolean;
 };
 
 export type App = {
@@ -41,14 +69,19 @@ export type App = {
 		raw: string;
 		rendered: string;
 	};
+	detailedChangelog: {
+		raw: string;
+		rendered: string;
+	};
 	categories: string[];
 	version: string;
 	price: number;
 	purchaseType: string;
-	pricingPlans: PricingPlan[];
+	pricingPlans: AppPricingPlan[];
 	iconFileContent: string;
 	installed?: boolean;
 	isEnterpriseOnly?: boolean;
+	isPurchased?: boolean;
 	isSubscribed: boolean;
 	bundledIn: {
 		bundleId: string;
@@ -59,6 +92,7 @@ export type App = {
 	marketplaceVersion: string;
 	latest: App;
 	status?: AppStatus;
+	subscriptionInfo: AppSubscriptionInfo;
 	licenseValidation?: {
 		errors: { [key: string]: string };
 		warnings: { [key: string]: string };
@@ -66,4 +100,5 @@ export type App = {
 	marketplace: unknown;
 	modifiedAt: string;
 	permissions: unknown[];
+	languages: string[];
 };

From 52573cc1f8f82c0929409e887f859578032f04ff Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 15 Jun 2022 12:41:35 -0300
Subject: [PATCH 28/36] Regression: Fix extended sidebar item (#25887)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
---
 apps/meteor/client/sidebar/Item/Extended.tsx                    | 2 +-
 .../client/sidebar/RoomList/SideBarItemTemplateWithData.tsx     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/meteor/client/sidebar/Item/Extended.tsx b/apps/meteor/client/sidebar/Item/Extended.tsx
index 26f7144ff40ca..2f66445fe25d2 100644
--- a/apps/meteor/client/sidebar/Item/Extended.tsx
+++ b/apps/meteor/client/sidebar/Item/Extended.tsx
@@ -52,7 +52,7 @@ const Extended: VFC<ExtendedProps> = ({
 	};
 
 	return (
-		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} {...(href as any)} clickable={!!href}>
+		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} {...({ href } as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Content>
diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
index a9cb0476d5b7d..8a01dfce72ce5 100644
--- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
+++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx
@@ -137,7 +137,6 @@ function SideBarItemTemplateWithData({
 			data-qa='sidebar-item'
 			aria-level={2}
 			unread={highlighted}
-			threadUnread={threadUnread}
 			selected={selected}
 			href={href}
 			onClick={(): void => !selected && sidebar.toggle()}

From c03dd9e6575552559559cb35d12d0aff9d4d065d Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 15 Jun 2022 12:55:45 -0300
Subject: [PATCH 29/36] [FIX] Kebab menu clicking issue (#25869)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 apps/meteor/package.json                      |  2 +-
 .../tests/e2e/04-main-elements-render.spec.ts |  2 +-
 apps/meteor/tests/e2e/pageobjects/FlexTab.ts  |  7 --
 yarn.lock                                     | 93 ++++++++++++++++++-
 4 files changed, 92 insertions(+), 12 deletions(-)

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 630192e251465..04d2e49d005e0 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -196,7 +196,7 @@
 		"@rocket.chat/emitter": "~0.31.12",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "0.31.13",
+		"@rocket.chat/fuselage": "0.32.0-dev.49",
 		"@rocket.chat/fuselage-hooks": "~0.31.12",
 		"@rocket.chat/fuselage-polyfills": "~0.31.12",
 		"@rocket.chat/fuselage-toastbar": "^0.32.0-dev.22",
diff --git a/apps/meteor/tests/e2e/04-main-elements-render.spec.ts b/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
index 7f3106d813b54..50e3712e5ae6e 100644
--- a/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
+++ b/apps/meteor/tests/e2e/04-main-elements-render.spec.ts
@@ -180,7 +180,7 @@ test.describe('[Main Elements Render]', function () {
 				});
 			});
 
-			test.describe.skip('[Members Tab]', () => {
+			test.describe('[Members Tab]', () => {
 				test.beforeAll(async () => {
 					await flexTab.operateFlexTab('members', true);
 				});
diff --git a/apps/meteor/tests/e2e/pageobjects/FlexTab.ts b/apps/meteor/tests/e2e/pageobjects/FlexTab.ts
index 284ce14fb20a0..7471e99abfed3 100644
--- a/apps/meteor/tests/e2e/pageobjects/FlexTab.ts
+++ b/apps/meteor/tests/e2e/pageobjects/FlexTab.ts
@@ -342,13 +342,6 @@ export class FlexTab extends BasePage {
 
 			await locator[tab].click();
 
-			// The button "more" keeps the focus when popover is closed from a click
-			// on an item, need to click again to change the status to unselected and
-			// allow the next click to open the popover again
-			if (more) {
-				await this.headerMoreActions.click();
-			}
-
 			if (desiredState) {
 				await expect(locator[panel]).toBeVisible();
 			} else {
diff --git a/yarn.lock b/yarn.lock
index 04f22677f49c8..131abdfa35780 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3331,6 +3331,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/css-in-js@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/css-in-js@npm:0.31.14-dev.2"
+  dependencies:
+    "@emotion/hash": ^0.8.0
+    "@rocket.chat/css-supports": ~0.31.14-dev.2
+    "@rocket.chat/memo": ~0.31.14-dev.2
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.14-dev.2
+    stylis: ~4.0.13
+  checksum: 2b8385be25da2a3bf131694e52edbf0fa094449a2ed8e3426eca4149be49dc3b703dea9d257c91d394089a8a9100eb4fad92d86b6aa4049a9f6b89fb3a08d474
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/css-supports@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/css-supports@npm:0.31.13"
@@ -3349,6 +3362,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/css-supports@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/css-supports@npm:0.31.14-dev.2"
+  dependencies:
+    "@rocket.chat/memo": ~0.31.14-dev.2
+  checksum: 0f57cfed074e734c592c0f49cd76f1f33bb373cef889e20e0dc63008b038f67dca5715aee3910c185438ee128c85196ee927f42035285ae2cbc48e2e7389f46d
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/ddp-streamer@workspace:ee/apps/ddp-streamer":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/ddp-streamer@workspace:ee/apps/ddp-streamer"
@@ -3536,13 +3558,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.11, @rocket.chat/fuselage-tokens@npm:~0.31.12":
+"@rocket.chat/fuselage-tokens@npm:^0.31.13, @rocket.chat/fuselage-tokens@npm:~0.31.12":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage-tokens@npm:0.31.13"
   checksum: 848a800e6bd8c8fc46d473f18152168515e54ecf5b5a51ec4920d5478a28797e9d5bad652708b988305484cf646b3a167d0bff4bf0689bfbc7999f50f4bbf3ef
   languageName: node
   linkType: hard
 
+"@rocket.chat/fuselage-tokens@npm:~0.31.11":
+  version: 0.31.11
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.31.11"
+  checksum: 084ae967f460018002bdf6b0a790c03be520ee76eb7df280bd8efa15d53570f9958692d38edf9e3cc8361d196f2aed66b21ab521737b3008fae7b9d267e3eec7
+  languageName: node
+  linkType: hard
+
+"@rocket.chat/fuselage-tokens@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.31.14-dev.2"
+  checksum: cda2f7751699ddf14ac77a4902aeeacf8e2863e9a07481f48fbebb4d3ed36ca3dcc655586ca51e8dd7a5e8de613391c32d41961110f8c24a0cbee31fb69dd7a3
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/fuselage-ui-kit@npm:~0.31.14-dev.1":
   version: 0.31.14-dev.1
   resolution: "@rocket.chat/fuselage-ui-kit@npm:0.31.14-dev.1"
@@ -3561,7 +3597,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage@npm:0.31.13, @rocket.chat/fuselage@npm:^0.31.13":
+"@rocket.chat/fuselage@npm:0.32.0-dev.49":
+  version: 0.32.0-dev.49
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.49"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.14-dev.2
+    "@rocket.chat/css-supports": ~0.31.14-dev.2
+    "@rocket.chat/fuselage-tokens": ~0.31.14-dev.2
+    "@rocket.chat/memo": ~0.31.14-dev.2
+    "@rocket.chat/styled": ~0.31.14-dev.2
+    invariant: ^2.2.4
+    react-keyed-flatten-children: ^1.3.0
+  peerDependencies:
+    "@rocket.chat/fuselage-hooks": "*"
+    "@rocket.chat/fuselage-polyfills": "*"
+    "@rocket.chat/icons": "*"
+    react: ^17.0.2
+    react-dom: ^17.0.2
+    react-virtuoso: 1.2.4
+  checksum: 53a45233f48819b6aa91f7e7cf9b4dfa37af219c2ceab73968b8c434dd281ea5233cc2c2c74991ab95f053451c0c9646a77b6381322205f0fddb298a6eb8aec7
+  languageName: node
+  linkType: hard
+
+"@rocket.chat/fuselage@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/fuselage@npm:0.31.13"
   dependencies:
@@ -3699,6 +3757,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/memo@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/memo@npm:0.31.14-dev.2"
+  checksum: e5892cec4e3137f7f84c51567aa90934c413a0b2deb520385e04646e626147b10a915f486304b4543a386ce83c38b0715d02bfce1d439231f15e60ba6500d220
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/message-parser@npm:next":
   version: 0.31.14-dev.1
   resolution: "@rocket.chat/message-parser@npm:0.31.14-dev.1"
@@ -3741,7 +3806,7 @@ __metadata:
     "@rocket.chat/eslint-config": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": 0.31.13
+    "@rocket.chat/fuselage": 0.32.0-dev.49
     "@rocket.chat/fuselage-hooks": ~0.31.12
     "@rocket.chat/fuselage-polyfills": ~0.31.12
     "@rocket.chat/fuselage-toastbar": ^0.32.0-dev.22
@@ -4109,6 +4174,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/styled@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/styled@npm:0.31.14-dev.2"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.14-dev.2
+    tslib: ^2.3.1
+  checksum: 792890b3c2f93e7d2f39065bb4b614bcf9525842566cabda60326f148ad81dd64f40ddaf5770a2cda01c847ee2ba6681ebf6e0403f7f1d11c879ee80dc6049c1
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/stylis-logical-props-middleware@npm:^0.31.13":
   version: 0.31.13
   resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.13"
@@ -4133,6 +4208,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.14-dev.2":
+  version: 0.31.14-dev.2
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.14-dev.2"
+  dependencies:
+    "@rocket.chat/css-supports": ~0.31.14-dev.2
+    tslib: ^2.3.1
+  peerDependencies:
+    stylis: 4.0.10
+  checksum: e3ed7b3bdab5f330045d1fc4f7d57e3086ba44e0dbdfd8b98c1f315a1662256815e2383f26c4a32838afeafa4d6aae5d40f8fca69b265655b3264d43f9af61b2
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/ui-contexts@workspace:^, @rocket.chat/ui-contexts@workspace:packages/ui-contexts":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/ui-contexts@workspace:packages/ui-contexts"

From 04564dbc1b71804e33a56ae735b41c3103c82b17 Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Wed, 15 Jun 2022 14:26:49 -0300
Subject: [PATCH 30/36] Chore: convert apps/meteor/app/api/server/lib/ files to
 TS (#25840)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
---
 apps/meteor/app/api/server/api.d.ts           |  8 +-
 .../app/api/server/helpers/parseJsonQuery.ts  |  2 +-
 .../meteor/app/api/server/lib/emoji-custom.js | 20 -----
 .../meteor/app/api/server/lib/emoji-custom.ts | 34 +++++++
 .../app/api/server/lib/getUploadFormData.js   | 36 --------
 .../app/api/server/lib/getUploadFormData.ts   | 90 +++++++++++++++++++
 .../server/lib/{messages.js => messages.ts}   | 72 +++++++++++++--
 .../app/api/server/lib/{rooms.js => rooms.ts} | 62 ++++++++++---
 .../app/api/server/lib/{users.js => users.ts} | 43 +++++++--
 apps/meteor/app/api/server/v1/assets.js       |  6 +-
 apps/meteor/app/api/server/v1/emoji-custom.ts | 43 +++++----
 apps/meteor/app/api/server/v1/rooms.js        | 11 ++-
 apps/meteor/app/api/server/v1/users.js        |  9 +-
 .../app/apps/server/bridges/listeners.js      |  1 +
 .../app/apps/server/communication/rest.js     | 22 +++--
 .../client/{index.js => index.ts}             |  0
 .../client/lib/{streamer.js => streamer.ts}   |  0
 apps/meteor/app/authorization/index.js        |  2 +-
 ...anDeleteMessage.js => canDeleteMessage.ts} | 11 ++-
 .../livechat/imports/server/rest/upload.js    | 11 ++-
 apps/meteor/package.json                      |  1 +
 yarn.lock                                     | 10 +++
 22 files changed, 355 insertions(+), 139 deletions(-)
 delete mode 100644 apps/meteor/app/api/server/lib/emoji-custom.js
 create mode 100644 apps/meteor/app/api/server/lib/emoji-custom.ts
 delete mode 100644 apps/meteor/app/api/server/lib/getUploadFormData.js
 create mode 100644 apps/meteor/app/api/server/lib/getUploadFormData.ts
 rename apps/meteor/app/api/server/lib/{messages.js => messages.ts} (66%)
 rename apps/meteor/app/api/server/lib/{rooms.js => rooms.ts} (69%)
 rename apps/meteor/app/api/server/lib/{users.js => users.ts} (66%)
 rename apps/meteor/app/authorization/client/{index.js => index.ts} (100%)
 rename apps/meteor/app/authorization/client/lib/{streamer.js => streamer.ts} (100%)
 rename apps/meteor/app/authorization/server/functions/{canDeleteMessage.js => canDeleteMessage.ts} (73%)

diff --git a/apps/meteor/app/api/server/api.d.ts b/apps/meteor/app/api/server/api.d.ts
index e8a8634e06154..a1dd637137478 100644
--- a/apps/meteor/app/api/server/api.d.ts
+++ b/apps/meteor/app/api/server/api.d.ts
@@ -9,6 +9,7 @@ import type {
 } from '@rocket.chat/rest-typings';
 import type { IUser, IMethodConnection, IRoom } from '@rocket.chat/core-typings';
 import type { ValidateFunction } from 'ajv';
+import type { Request } from 'express';
 
 import { ITwoFactorOptions } from '../../2fa/server/code';
 
@@ -70,13 +71,6 @@ type Options = (
 	validateParams?: ValidateFunction;
 };
 
-type Request = {
-	method: 'GET' | 'POST' | 'PUT' | 'DELETE';
-	url: string;
-	headers: Record<string, string>;
-	body: any;
-};
-
 type PartialThis = {
 	readonly request: Request & { query: Record<string, string> };
 };
diff --git a/apps/meteor/app/api/server/helpers/parseJsonQuery.ts b/apps/meteor/app/api/server/helpers/parseJsonQuery.ts
index 7e3592e765a0a..4710aac5bc256 100644
--- a/apps/meteor/app/api/server/helpers/parseJsonQuery.ts
+++ b/apps/meteor/app/api/server/helpers/parseJsonQuery.ts
@@ -70,7 +70,7 @@ API.helperMethods.set(
 		if (typeof fields === 'object') {
 			let nonSelectableFields = Object.keys(API.v1.defaultFieldsToExclude);
 			if (this.request.route.includes('/v1/users.')) {
-				const getFields = () =>
+				const getFields = (): string[] =>
 					Object.keys(
 						hasPermission(this.userId, 'view-full-other-user-info')
 							? API.v1.limitedUserFieldsToExcludeIfIsPrivilegedUser
diff --git a/apps/meteor/app/api/server/lib/emoji-custom.js b/apps/meteor/app/api/server/lib/emoji-custom.js
deleted file mode 100644
index 1d7dde2706646..0000000000000
--- a/apps/meteor/app/api/server/lib/emoji-custom.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { EmojiCustom } from '../../../models/server/raw';
-
-export async function findEmojisCustom({ query = {}, pagination: { offset, count, sort } }) {
-	const cursor = EmojiCustom.find(query, {
-		sort: sort || { name: 1 },
-		skip: offset,
-		limit: count,
-	});
-
-	const total = await cursor.count();
-
-	const emojis = await cursor.toArray();
-
-	return {
-		emojis,
-		count: emojis.length,
-		offset,
-		total,
-	};
-}
diff --git a/apps/meteor/app/api/server/lib/emoji-custom.ts b/apps/meteor/app/api/server/lib/emoji-custom.ts
new file mode 100644
index 0000000000000..2c3f660c67f15
--- /dev/null
+++ b/apps/meteor/app/api/server/lib/emoji-custom.ts
@@ -0,0 +1,34 @@
+import { IEmojiCustom, ILivechatDepartmentRecord } from '@rocket.chat/core-typings';
+import { FilterQuery, SortOptionObject } from 'mongodb';
+
+import { EmojiCustom } from '../../../models/server/raw';
+
+export async function findEmojisCustom({
+	query = {},
+	pagination: { offset, count, sort },
+}: {
+	query: FilterQuery<ILivechatDepartmentRecord>;
+	pagination: { offset: number; count: number; sort: SortOptionObject<IEmojiCustom> };
+}): Promise<{
+	emojis: IEmojiCustom[];
+	count: number;
+	offset: any;
+	total: number;
+}> {
+	const cursor = EmojiCustom.find(query, {
+		sort: sort || { name: 1 },
+		skip: offset,
+		limit: count,
+	});
+
+	const total = await cursor.count();
+
+	const emojis = await cursor.toArray();
+
+	return {
+		emojis,
+		count: emojis.length,
+		offset,
+		total,
+	};
+}
diff --git a/apps/meteor/app/api/server/lib/getUploadFormData.js b/apps/meteor/app/api/server/lib/getUploadFormData.js
deleted file mode 100644
index 553ebe0a27baf..0000000000000
--- a/apps/meteor/app/api/server/lib/getUploadFormData.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import busboy from 'busboy';
-
-export const getUploadFormData = async ({ request }) =>
-	new Promise((resolve, reject) => {
-		const bb = busboy({ headers: request.headers, defParamCharset: 'utf8' });
-
-		const fields = {};
-
-		bb.on('file', (fieldname, file, { filename, encoding, mimeType: mimetype }) => {
-			const fileData = [];
-
-			file.on('data', (data) => fileData.push(data));
-
-			file.on('end', () => {
-				if (fields.hasOwnProperty(fieldname)) {
-					return reject('Just 1 file is allowed');
-				}
-
-				fields[fieldname] = {
-					file,
-					filename,
-					encoding,
-					mimetype,
-					fileBuffer: Buffer.concat(fileData),
-				};
-			});
-		});
-
-		bb.on('field', (fieldname, value) => {
-			fields[fieldname] = value;
-		});
-
-		bb.on('finish', () => resolve(fields));
-
-		request.pipe(bb);
-	});
diff --git a/apps/meteor/app/api/server/lib/getUploadFormData.ts b/apps/meteor/app/api/server/lib/getUploadFormData.ts
new file mode 100644
index 0000000000000..c9cf0263c5d84
--- /dev/null
+++ b/apps/meteor/app/api/server/lib/getUploadFormData.ts
@@ -0,0 +1,90 @@
+import { Readable } from 'stream';
+
+import { Meteor } from 'meteor/meteor';
+import type { Request } from 'express';
+import busboy from 'busboy';
+import { ValidateFunction } from 'ajv';
+
+type UploadResult = {
+	file: Readable;
+	filename: string;
+	encoding: string;
+	mimetype: string;
+	fileBuffer: Buffer;
+};
+
+export const getUploadFormData = async <T extends string, K, V extends ValidateFunction<K>>(
+	{ request }: { request: Request },
+	options: {
+		field?: T;
+		validate?: V;
+	} = {},
+): Promise<
+	[
+		UploadResult,
+		K extends unknown
+			? {
+					[k: string]: string;
+			  }
+			: K,
+		T,
+	]
+> =>
+	new Promise((resolve, reject) => {
+		const bb = busboy({ headers: request.headers, defParamCharset: 'utf8' });
+		const fields: { [K: string]: string } = Object.create(null);
+
+		let uploadedFile: UploadResult | undefined;
+
+		let assetName: T | undefined;
+
+		bb.on(
+			'file',
+			(
+				fieldname: string,
+				file: Readable,
+				{ filename, encoding, mimeType: mimetype }: { filename: string; encoding: string; mimeType: string },
+			) => {
+				const fileData: Uint8Array[] = [];
+
+				file.on('data', (data: any) => fileData.push(data));
+
+				file.on('end', () => {
+					if (uploadedFile) {
+						return reject('Just 1 file is allowed');
+					}
+					if (options.field && fieldname !== options.field) {
+						return reject(new Meteor.Error('invalid-field'));
+					}
+					uploadedFile = {
+						file,
+						filename,
+						encoding,
+						mimetype,
+						fileBuffer: Buffer.concat(fileData),
+					};
+
+					assetName = fieldname as T;
+				});
+			},
+		);
+
+		bb.on('field', (fieldname, value) => {
+			fields[fieldname] = value;
+		});
+
+		bb.on('finish', () => {
+			if (!uploadedFile || !assetName) {
+				return reject('No file uploaded');
+			}
+			if (options.validate === undefined) {
+				return resolve([uploadedFile, fields, assetName]);
+			}
+			if (!options.validate(fields)) {
+				return reject(`Invalid fields${options.validate.errors?.join(', ')}`);
+			}
+			return resolve([uploadedFile, fields, assetName]);
+		});
+
+		request.pipe(bb);
+	});
diff --git a/apps/meteor/app/api/server/lib/messages.js b/apps/meteor/app/api/server/lib/messages.ts
similarity index 66%
rename from apps/meteor/app/api/server/lib/messages.js
rename to apps/meteor/app/api/server/lib/messages.ts
index d06eef7f06711..194bdabdd2740 100644
--- a/apps/meteor/app/api/server/lib/messages.js
+++ b/apps/meteor/app/api/server/lib/messages.ts
@@ -1,13 +1,28 @@
+import { IMessage, IUser } from '@rocket.chat/core-typings';
+
 import { canAccessRoomAsync } from '../../../authorization/server/functions/canAccessRoom';
 import { Rooms, Messages, Users } from '../../../models/server/raw';
 import { getValue } from '../../../settings/server/raw';
 
-export async function findMentionedMessages({ uid, roomId, pagination: { offset, count, sort } }) {
+export async function findMentionedMessages({
+	uid,
+	roomId,
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	roomId: string;
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	messages: IMessage[];
+	count: number;
+	offset: number;
+	total: number;
+}> {
 	const room = await Rooms.findOneById(roomId);
 	if (!(await canAccessRoomAsync(room, { _id: uid }))) {
 		throw new Error('error-not-allowed');
 	}
-	const user = await Users.findOneById(uid, { fields: { username: 1 } });
+	const user: IUser | null = await Users.findOneById(uid, { fields: { username: 1 } });
 	if (!user) {
 		throw new Error('invalid-user');
 	}
@@ -30,7 +45,20 @@ export async function findMentionedMessages({ uid, roomId, pagination: { offset,
 	};
 }
 
-export async function findStarredMessages({ uid, roomId, pagination: { offset, count, sort } }) {
+export async function findStarredMessages({
+	uid,
+	roomId,
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	roomId: string;
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	messages: IMessage[];
+	count: number;
+	offset: any;
+	total: number;
+}> {
 	const room = await Rooms.findOneById(roomId);
 	if (!(await canAccessRoomAsync(room, { _id: uid }))) {
 		throw new Error('error-not-allowed');
@@ -58,7 +86,7 @@ export async function findStarredMessages({ uid, roomId, pagination: { offset, c
 	};
 }
 
-export async function findSnippetedMessageById({ uid, messageId }) {
+export async function findSnippetedMessageById({ uid, messageId }: { uid: string; messageId: string }): Promise<IMessage> {
 	if (!(await getValue('Message_AllowSnippeting'))) {
 		throw new Error('error-not-allowed');
 	}
@@ -83,12 +111,23 @@ export async function findSnippetedMessageById({ uid, messageId }) {
 		throw new Error('error-not-allowed');
 	}
 
-	return {
-		message: snippet,
-	};
+	return snippet;
 }
 
-export async function findSnippetedMessages({ uid, roomId, pagination: { offset, count, sort } }) {
+export async function findSnippetedMessages({
+	uid,
+	roomId,
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	roomId: string;
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	messages: IMessage[];
+	count: number;
+	offset: number;
+	total: number;
+}> {
 	if (!(await getValue('Message_AllowSnippeting'))) {
 		throw new Error('error-not-allowed');
 	}
@@ -116,7 +155,22 @@ export async function findSnippetedMessages({ uid, roomId, pagination: { offset,
 	};
 }
 
-export async function findDiscussionsFromRoom({ uid, roomId, text, pagination: { offset, count, sort } }) {
+export async function findDiscussionsFromRoom({
+	uid,
+	roomId,
+	text,
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	roomId: string;
+	text: string;
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	messages: IMessage[];
+	count: number;
+	offset: number;
+	total: number;
+}> {
 	const room = await Rooms.findOneById(roomId);
 
 	if (!(await canAccessRoomAsync(room, { _id: uid }))) {
diff --git a/apps/meteor/app/api/server/lib/rooms.js b/apps/meteor/app/api/server/lib/rooms.ts
similarity index 69%
rename from apps/meteor/app/api/server/lib/rooms.js
rename to apps/meteor/app/api/server/lib/rooms.ts
index 0e402dec3ffee..5ffd4798bb786 100644
--- a/apps/meteor/app/api/server/lib/rooms.js
+++ b/apps/meteor/app/api/server/lib/rooms.ts
@@ -1,15 +1,32 @@
+import { IRoom, ISubscription } from '@rocket.chat/core-typings';
+
 import { hasPermissionAsync, hasAtLeastOnePermissionAsync } from '../../../authorization/server/functions/hasPermission';
 import { Rooms } from '../../../models/server/raw';
 import { Subscriptions } from '../../../models/server';
 import { adminFields } from '../../../../lib/rooms/adminFields';
 
-export async function findAdminRooms({ uid, filter, types = [], pagination: { offset, count, sort } }) {
+export async function findAdminRooms({
+	uid,
+	filter,
+	types = [],
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	filter: string;
+	types: string[];
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	rooms: IRoom[];
+	count: number;
+	offset: number;
+	total: number;
+}> {
 	if (!(await hasPermissionAsync(uid, 'view-room-administration'))) {
 		throw new Error('error-not-authorized');
 	}
-	const name = filter && filter.trim();
-	const discussion = types && types.includes('discussions');
-	const includeTeams = types && types.includes('teams');
+	const name = filter?.trim();
+	const discussion = types?.includes('discussions');
+	const includeTeams = types?.includes('teams');
 	const showOnlyTeams = types.length === 1 && types.includes('teams');
 	const typesToRemove = ['discussions', 'teams'];
 	const showTypes = Array.isArray(types) ? types.filter((type) => !typesToRemove.includes(type)) : [];
@@ -41,7 +58,7 @@ export async function findAdminRooms({ uid, filter, types = [], pagination: { of
 	};
 }
 
-export async function findAdminRoom({ uid, rid }) {
+export async function findAdminRoom({ uid, rid }: { uid: string; rid: string }): Promise<unknown> {
 	if (!(await hasPermissionAsync(uid, 'view-room-administration'))) {
 		throw new Error('error-not-authorized');
 	}
@@ -49,7 +66,9 @@ export async function findAdminRoom({ uid, rid }) {
 	return Rooms.findOneById(rid, { fields: adminFields });
 }
 
-export async function findChannelAndPrivateAutocomplete({ uid, selector }) {
+export async function findChannelAndPrivateAutocomplete({ uid, selector }: { uid: string; selector: { name: string } }): Promise<{
+	items: IRoom[];
+}> {
 	const options = {
 		fields: {
 			_id: 1,
@@ -66,7 +85,7 @@ export async function findChannelAndPrivateAutocomplete({ uid, selector }) {
 
 	const userRoomsIds = Subscriptions.cachedFindByUserId(uid, { fields: { rid: 1 } })
 		.fetch()
-		.map((item) => item.rid);
+		.map((item: Pick<ISubscription, 'rid'>) => item.rid);
 
 	const rooms = await Rooms.findRoomsWithoutDiscussionsByRoomIds(selector.name, userRoomsIds, options).toArray();
 
@@ -75,7 +94,9 @@ export async function findChannelAndPrivateAutocomplete({ uid, selector }) {
 	};
 }
 
-export async function findAdminRoomsAutocomplete({ uid, selector }) {
+export async function findAdminRoomsAutocomplete({ uid, selector }: { uid: string; selector: { name: string } }): Promise<{
+	items: IRoom[];
+}> {
 	if (!(await hasAtLeastOnePermissionAsync(uid, ['view-room-administration', 'can-audit']))) {
 		throw new Error('error-not-authorized');
 	}
@@ -100,10 +121,21 @@ export async function findAdminRoomsAutocomplete({ uid, selector }) {
 	};
 }
 
-export async function findChannelAndPrivateAutocompleteWithPagination({ uid, selector, pagination: { offset, count, sort } }) {
+export async function findChannelAndPrivateAutocompleteWithPagination({
+	uid,
+	selector,
+	pagination: { offset, count, sort },
+}: {
+	uid: string;
+	selector: { name: string };
+	pagination: { offset: number; count: number; sort: [string, number][] };
+}): Promise<{
+	items: IRoom[];
+	total: number;
+}> {
 	const userRoomsIds = Subscriptions.cachedFindByUserId(uid, { fields: { rid: 1 } })
 		.fetch()
-		.map((item) => item.rid);
+		.map((item: Pick<ISubscription, 'rid'>) => item.rid);
 
 	const options = {
 		fields: {
@@ -129,7 +161,9 @@ export async function findChannelAndPrivateAutocompleteWithPagination({ uid, sel
 	};
 }
 
-export async function findRoomsAvailableForTeams({ uid, name }) {
+export async function findRoomsAvailableForTeams({ uid, name }: { uid: string; name: string }): Promise<{
+	items: IRoom[];
+}> {
 	const options = {
 		fields: {
 			_id: 1,
@@ -144,9 +178,9 @@ export async function findRoomsAvailableForTeams({ uid, name }) {
 		},
 	};
 
-	const userRooms = Subscriptions.findByUserIdAndRoles(uid, ['owner'], { fields: { rid: 1 } })
-		.fetch()
-		.map((item) => item.rid);
+	const userRooms = (
+		Subscriptions.findByUserIdAndRoles(uid, ['owner'], { fields: { rid: 1 } }).fetch() as Pick<ISubscription, 'rid'>[]
+	).map((item) => item.rid);
 
 	const rooms = await Rooms.findChannelAndGroupListWithoutTeamsByNameStartingByOwner(uid, name, userRooms, options).toArray();
 
diff --git a/apps/meteor/app/api/server/lib/users.js b/apps/meteor/app/api/server/lib/users.ts
similarity index 66%
rename from apps/meteor/app/api/server/lib/users.js
rename to apps/meteor/app/api/server/lib/users.ts
index 1e7eb9a7a2428..8ff1737cc6924 100644
--- a/apps/meteor/app/api/server/lib/users.js
+++ b/apps/meteor/app/api/server/lib/users.ts
@@ -1,9 +1,23 @@
 import { escapeRegExp } from '@rocket.chat/string-helpers';
+import { ILivechatDepartmentRecord, IUser } from '@rocket.chat/core-typings';
+import { FilterQuery } from 'mongodb';
 
 import { Users } from '../../../models/server/raw';
 import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission';
 
-export async function findUsersToAutocomplete({ uid, selector }) {
+export async function findUsersToAutocomplete({
+	uid,
+	selector,
+}: {
+	uid: string;
+	selector: {
+		exceptions: string[];
+		conditions: FilterQuery<ILivechatDepartmentRecord>;
+		term: string;
+	};
+}): Promise<{
+	items: IUser[];
+}> {
 	if (!(await hasPermissionAsync(uid, 'view-outside-room'))) {
 		return { items: [] };
 	}
@@ -39,8 +53,8 @@ export async function findUsersToAutocomplete({ uid, selector }) {
  * Returns a new query object with the inclusive fields only
  * @param {Object} query search query for matching rows
  */
-export function getInclusiveFields(query) {
-	const newQuery = {};
+export function getInclusiveFields(query: { [k: string]: 1 }): {} {
+	const newQuery = Object.create(null);
 
 	for (const [key, value] of Object.entries(query)) {
 		if (value === 1) {
@@ -55,7 +69,16 @@ export function getInclusiveFields(query) {
  * get the default fields if **fields** are empty (`{}`) or `undefined`/`null`
  * @param {Object|null|undefined} fields the fields from parsed jsonQuery
  */
-export function getNonEmptyFields(fields) {
+export function getNonEmptyFields(fields: {}): {
+	name: number;
+	username: number;
+	emails: number;
+	roles: number;
+	status: number;
+	active: number;
+	avatarETag: number;
+	lastLogin: number;
+} {
 	const defaultFields = {
 		name: 1,
 		username: 1,
@@ -74,11 +97,21 @@ export function getNonEmptyFields(fields) {
 	return { ...defaultFields, ...fields };
 }
 
+const _defaultQuery = {
+	$or: [
+		{ 'emails.address': { $regex: '', $options: 'i' } },
+		{ username: { $regex: '', $options: 'i' } },
+		{ name: { $regex: '', $options: 'i' } },
+	],
+};
+
 /**
  * get the default query if **query** is empty (`{}`) or `undefined`/`null`
  * @param {Object|null|undefined} query the query from parsed jsonQuery
  */
-export function getNonEmptyQuery(query) {
+
+type Query = { [k: string]: unknown };
+export function getNonEmptyQuery(query: Query): typeof _defaultQuery | (typeof _defaultQuery & Query) {
 	const defaultQuery = {
 		$or: [
 			{ 'emails.address': { $regex: '', $options: 'i' } },
diff --git a/apps/meteor/app/api/server/v1/assets.js b/apps/meteor/app/api/server/v1/assets.js
index c232d3c0ff2c4..7138d565034b5 100644
--- a/apps/meteor/app/api/server/v1/assets.js
+++ b/apps/meteor/app/api/server/v1/assets.js
@@ -9,7 +9,7 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		post() {
-			const { refreshAllClients, ...files } = Promise.await(
+			const [asset, { refreshAllClients }, assetName] = Promise.await(
 				getUploadFormData({
 					request: this.request,
 				}),
@@ -17,16 +17,12 @@ API.v1.addRoute(
 
 			const assetsKeys = Object.keys(RocketChatAssets.assets);
 
-			const [assetName] = Object.keys(files);
-
 			const isValidAsset = assetsKeys.includes(assetName);
 			if (!isValidAsset) {
 				throw new Meteor.Error('error-invalid-asset', 'Invalid asset');
 			}
 
 			Meteor.runAsUser(this.userId, () => {
-				const { [assetName]: asset } = files;
-
 				Meteor.call('setAsset', asset.fileBuffer, asset.mimetype, assetName);
 				if (refreshAllClients) {
 					Meteor.call('refreshClients');
diff --git a/apps/meteor/app/api/server/v1/emoji-custom.ts b/apps/meteor/app/api/server/v1/emoji-custom.ts
index fe16e3ed2392c..df66f686edfd4 100644
--- a/apps/meteor/app/api/server/v1/emoji-custom.ts
+++ b/apps/meteor/app/api/server/v1/emoji-custom.ts
@@ -67,13 +67,12 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		async post() {
-			const { emoji, ...fields } = await getUploadFormData({
-				request: this.request,
-			});
-
-			if (!emoji) {
-				throw new Meteor.Error('invalid-field');
-			}
+			const [emoji, fields] = await getUploadFormData(
+				{
+					request: this.request,
+				},
+				{ field: 'emoji' },
+			);
 
 			const isUploadable = await Media.isImage(emoji.fileBuffer);
 			if (!isUploadable) {
@@ -83,11 +82,16 @@ API.v1.addRoute(
 			const [, extension] = emoji.mimetype.split('/');
 			fields.extension = extension;
 
-			fields.newFile = true;
-			fields.aliases = fields.aliases || '';
-
-			Meteor.call('insertOrUpdateEmoji', fields);
-			Meteor.call('uploadEmojiCustom', emoji.fileBuffer, emoji.mimetype, fields);
+			Meteor.call('insertOrUpdateEmoji', {
+				...fields,
+				newFile: true,
+				aliases: fields.aliases || '',
+			});
+			Meteor.call('uploadEmojiCustom', emoji.fileBuffer, emoji.mimetype, {
+				...fields,
+				newFile: true,
+				aliases: fields.aliases || '',
+			});
 
 			return API.v1.success();
 		},
@@ -99,9 +103,12 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		async post() {
-			const { emoji, ...fields } = await getUploadFormData({
-				request: this.request,
-			});
+			const [emoji, fields] = await getUploadFormData(
+				{
+					request: this.request,
+				},
+				{ field: 'emoji' },
+			);
 
 			if (!fields._id) {
 				throw new Meteor.Error('The required "_id" query param is missing.');
@@ -115,7 +122,7 @@ API.v1.addRoute(
 			fields.previousName = emojiToUpdate.name;
 			fields.previousExtension = emojiToUpdate.extension;
 			fields.aliases = fields.aliases || '';
-			fields.newFile = Boolean(emoji?.fileBuffer.length);
+			const newFile = Boolean(emoji?.fileBuffer.length);
 
 			if (fields.newFile) {
 				const isUploadable = Promise.await(Media.isImage(emoji.fileBuffer));
@@ -129,9 +136,9 @@ API.v1.addRoute(
 				fields.extension = emojiToUpdate.extension;
 			}
 
-			Meteor.call('insertOrUpdateEmoji', fields);
+			Meteor.call('insertOrUpdateEmoji', { ...fields, newFile });
 			if (fields.newFile) {
-				Meteor.call('uploadEmojiCustom', emoji.fileBuffer, emoji.mimetype, fields);
+				Meteor.call('uploadEmojiCustom', emoji.fileBuffer, emoji.mimetype, { ...fields, newFile });
 			}
 			return API.v1.success();
 		},
diff --git a/apps/meteor/app/api/server/v1/rooms.js b/apps/meteor/app/api/server/v1/rooms.js
index 5d722a6e9fc4e..3efbf9f00116c 100644
--- a/apps/meteor/app/api/server/v1/rooms.js
+++ b/apps/meteor/app/api/server/v1/rooms.js
@@ -85,10 +85,13 @@ API.v1.addRoute(
 				return API.v1.unauthorized();
 			}
 
-			const { file, ...fields } = Promise.await(
-				getUploadFormData({
-					request: this.request,
-				}),
+			const [file, fields] = Promise.await(
+				getUploadFormData(
+					{
+						request: this.request,
+					},
+					{ field: 'file' },
+				),
 			);
 
 			if (!file) {
diff --git a/apps/meteor/app/api/server/v1/users.js b/apps/meteor/app/api/server/v1/users.js
index d57d477a4cf33..094570518e2d0 100644
--- a/apps/meteor/app/api/server/v1/users.js
+++ b/apps/meteor/app/api/server/v1/users.js
@@ -462,9 +462,12 @@ API.v1.addRoute(
 				return API.v1.success();
 			}
 
-			const { image, ...fields } = await getUploadFormData({
-				request: this.request,
-			});
+			const [image, fields] = await getUploadFormData(
+				{
+					request: this.request,
+				},
+				{ field: 'image' },
+			);
 
 			if (!image) {
 				return API.v1.failure("The 'image' param is required");
diff --git a/apps/meteor/app/apps/server/bridges/listeners.js b/apps/meteor/app/apps/server/bridges/listeners.js
index 57e0a9b63bba4..ced6e1aea31b8 100644
--- a/apps/meteor/app/apps/server/bridges/listeners.js
+++ b/apps/meteor/app/apps/server/bridges/listeners.js
@@ -7,6 +7,7 @@ export class AppListenerBridge {
 	}
 
 	async handleEvent(event, ...payload) {
+		// eslint-disable-next-line complexity
 		const method = (() => {
 			switch (event) {
 				case AppInterface.IPreMessageSentPrevent:
diff --git a/apps/meteor/app/apps/server/communication/rest.js b/apps/meteor/app/apps/server/communication/rest.js
index 2bc64e1f8be58..0b7122e375210 100644
--- a/apps/meteor/app/apps/server/communication/rest.js
+++ b/apps/meteor/app/apps/server/communication/rest.js
@@ -213,10 +213,13 @@ export class AppsRestApi {
 							return API.v1.failure({ error: 'Direct installation of an App is disabled.' });
 						}
 
-						const formData = await getUploadFormData({
-							request: this.request,
-						});
-						buff = formData?.app?.fileBuffer;
+						const [app, formData] = await getUploadFormData(
+							{
+								request: this.request,
+							},
+							{ field: 'app' },
+						);
+						buff = app?.fileBuffer;
 						permissionsGranted = (() => {
 							try {
 								const permissions = JSON.parse(formData?.permissions || '');
@@ -462,10 +465,13 @@ export class AppsRestApi {
 							return API.v1.failure({ error: 'Direct updating of an App is disabled.' });
 						}
 
-						const formData = await getUploadFormData({
-							request: this.request,
-						});
-						buff = formData?.app?.fileBuffer;
+						const [app, formData] = await getUploadFormData(
+							{
+								request: this.request,
+							},
+							{ field: 'app' },
+						);
+						buff = app?.fileBuffer;
 						permissionsGranted = (() => {
 							try {
 								const permissions = JSON.parse(formData?.permissions || '');
diff --git a/apps/meteor/app/authorization/client/index.js b/apps/meteor/app/authorization/client/index.ts
similarity index 100%
rename from apps/meteor/app/authorization/client/index.js
rename to apps/meteor/app/authorization/client/index.ts
diff --git a/apps/meteor/app/authorization/client/lib/streamer.js b/apps/meteor/app/authorization/client/lib/streamer.ts
similarity index 100%
rename from apps/meteor/app/authorization/client/lib/streamer.js
rename to apps/meteor/app/authorization/client/lib/streamer.ts
diff --git a/apps/meteor/app/authorization/index.js b/apps/meteor/app/authorization/index.js
index a67eca871efbb..c20f7ea60706a 100644
--- a/apps/meteor/app/authorization/index.js
+++ b/apps/meteor/app/authorization/index.js
@@ -1,7 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 
 if (Meteor.isClient) {
-	module.exports = require('./client/index.js');
+	module.exports = require('./client/');
 }
 if (Meteor.isServer) {
 	module.exports = require('./server/index.js');
diff --git a/apps/meteor/app/authorization/server/functions/canDeleteMessage.js b/apps/meteor/app/authorization/server/functions/canDeleteMessage.ts
similarity index 73%
rename from apps/meteor/app/authorization/server/functions/canDeleteMessage.js
rename to apps/meteor/app/authorization/server/functions/canDeleteMessage.ts
index 1e5f2a577eeff..36d7b30394c97 100644
--- a/apps/meteor/app/authorization/server/functions/canDeleteMessage.js
+++ b/apps/meteor/app/authorization/server/functions/canDeleteMessage.ts
@@ -1,13 +1,15 @@
+import { IUser } from '@rocket.chat/core-typings';
+
 import { hasPermissionAsync } from './hasPermission';
 import { getValue } from '../../../settings/server/raw';
-import { Rooms } from '../../../models';
+import { Rooms } from '../../../models/server';
 
-const elapsedTime = (ts) => {
+const elapsedTime = (ts: number): number => {
 	const dif = Date.now() - ts;
 	return Math.round(dif / 1000 / 60);
 };
 
-export const canDeleteMessageAsync = async (uid, { u, rid, ts }) => {
+export const canDeleteMessageAsync = async (uid: string, { u, rid, ts }: { u: IUser; rid: string; ts: number }): Promise<boolean> => {
 	const forceDelete = await hasPermissionAsync(uid, 'force-delete-message', rid);
 
 	if (forceDelete) {
@@ -47,4 +49,5 @@ export const canDeleteMessageAsync = async (uid, { u, rid, ts }) => {
 	return true;
 };
 
-export const canDeleteMessage = (uid, { u, rid, ts }) => Promise.await(canDeleteMessageAsync(uid, { u, rid, ts }));
+export const canDeleteMessage = (uid: string, { u, rid, ts }: { u: IUser; rid: string; ts: number }): boolean =>
+	Promise.await(canDeleteMessageAsync(uid, { u, rid, ts }));
diff --git a/apps/meteor/app/livechat/imports/server/rest/upload.js b/apps/meteor/app/livechat/imports/server/rest/upload.js
index 8547b94645f1d..f6d4f1485a324 100644
--- a/apps/meteor/app/livechat/imports/server/rest/upload.js
+++ b/apps/meteor/app/livechat/imports/server/rest/upload.js
@@ -36,10 +36,13 @@ API.v1.addRoute('livechat/upload/:rid', {
 			return API.v1.unauthorized();
 		}
 
-		const { file, ...fields } = Promise.await(
-			getUploadFormData({
-				request: this.request,
-			}),
+		const [file, fields] = Promise.await(
+			getUploadFormData(
+				{
+					request: this.request,
+				},
+				{ field: 'file' },
+			),
 		);
 
 		if (!fileUploadIsValidContentType(file.mimetype)) {
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 04d2e49d005e0..b4490100493c8 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -84,6 +84,7 @@
 		"@types/bad-words": "^3.0.1",
 		"@types/bcrypt": "^5.0.0",
 		"@types/body-parser": "^1.19.0",
+		"@types/busboy": "^1.5.0",
 		"@types/chai": "^4.2.22",
 		"@types/chai-datetime": "0.0.37",
 		"@types/chai-dom": "0.0.12",
diff --git a/yarn.lock b/yarn.lock
index 131abdfa35780..06f4fc2cfcfa6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3839,6 +3839,7 @@ __metadata:
     "@types/bad-words": ^3.0.1
     "@types/bcrypt": ^5.0.0
     "@types/body-parser": ^1.19.0
+    "@types/busboy": ^1.5.0
     "@types/chai": ^4.2.22
     "@types/chai-datetime": 0.0.37
     "@types/chai-dom": 0.0.12
@@ -5829,6 +5830,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/busboy@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@types/busboy@npm:1.5.0"
+  dependencies:
+    "@types/node": "*"
+  checksum: ffa7bf25c0395f6927526b7d97e70cd2df789e4ca0d231e41855fb08542fa236891ce457d83cc50cac6e5cef6be092ab80597070dcf1413f736462690a23e987
+  languageName: node
+  linkType: hard
+
 "@types/chai-datetime@npm:0.0.37":
   version: 0.0.37
   resolution: "@types/chai-datetime@npm:0.0.37"

From 38d3a81c501b13da7ef6fa4a99d317a36dad6856 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 15 Jun 2022 15:36:28 -0300
Subject: [PATCH 31/36] Chore: Fix correct unit test to api files (#25870)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 apps/meteor/.mocharc.api.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/.mocharc.api.js b/apps/meteor/.mocharc.api.js
index 934fd1509ae15..c7994105d68a2 100644
--- a/apps/meteor/.mocharc.api.js
+++ b/apps/meteor/.mocharc.api.js
@@ -9,5 +9,10 @@ module.exports = {
 	timeout: 10000,
 	bail: true,
 	file: 'tests/end-to-end/teardown.js',
-	spec: ['tests/unit/app/api/server/v1/*.spec.ts', 'tests/end-to-end/api/*.js', 'tests/end-to-end/api/*.ts', 'tests/end-to-end/apps/*.js'],
+	spec: [
+		'tests/unit/app/api/server/v1/**/*.spec.ts',
+		'tests/end-to-end/api/*.js',
+		'tests/end-to-end/api/*.ts',
+		'tests/end-to-end/apps/*.js',
+	],
 };

From 45b6640f41092c068210f95ccab0ee7d66885029 Mon Sep 17 00:00:00 2001
From: souzaramon <ramon.souza@objective.com.br>
Date: Wed, 15 Jun 2022 17:04:47 -0300
Subject: [PATCH 32/36] Chore: create a e2e test guideline (#25884)

## Proposed changes (including videos or screenshots)
- Create a e2e guideline
---
 apps/meteor/tests/e2e/07-emoji.spec.ts |  2 +-
 apps/meteor/tests/e2e/README.md        | 42 ++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 apps/meteor/tests/e2e/README.md

diff --git a/apps/meteor/tests/e2e/07-emoji.spec.ts b/apps/meteor/tests/e2e/07-emoji.spec.ts
index da2bdc52cc177..473b4c2f640e1 100644
--- a/apps/meteor/tests/e2e/07-emoji.spec.ts
+++ b/apps/meteor/tests/e2e/07-emoji.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test';
 import { SideNav, MainContent, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 
-test.describe('[Emoji]', function () {
+test.describe('[Emoji]', () => {
 	let loginPage: LoginPage;
 	let mainContent: MainContent;
 	let sideNav: SideNav;
diff --git a/apps/meteor/tests/e2e/README.md b/apps/meteor/tests/e2e/README.md
new file mode 100644
index 0000000000000..bd4f89a8d209e
--- /dev/null
+++ b/apps/meteor/tests/e2e/README.md
@@ -0,0 +1,42 @@
+# E2E Testing with playwright
+
+## Running tests
+The application must be started with `TEST_MODE=true`
+
+```sh
+$ TEST_MODE=true yarn dev
+```
+
+Then we can run a single suite with
+
+```sh
+$ yarn test:playwright ./tests/e2e/01-forgot-password.spec.ts
+```
+
+Or all the tests with
+
+```sh
+$ yarn test:playwright
+```
+
+We can also provide some env vars to `test:playwright` script:
+- `BASE_URL=<any_url>` Run the tests to the given url
+- `PWDEBUG=1` Controll the test execution
+
+## Current limitations
+- 00-wizard.spec.ts will only pass if the database is empty
+- There are some dependencies between tests, so we can't run the suites in parallel
+
+## Page Objects
+- Any locator name must start with of one the following prefixes: `btn`, `link`, `input`, `select`, `checkbox`, `text`
+- Any action name should starts with the prefix `do`
+
+## Important links
+- [playwright docs](https://playwright.dev/docs/intro)
+
+## Assertions
+Checking if a element is visible
+
+```ts
+ await expect(anyElement).toBeVisible();
+ ```

From 750f0ef5b146ed6e42ac1c922badf9c21b10c3ff Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Thu, 16 Jun 2022 09:25:21 +0530
Subject: [PATCH 33/36] Regression: TOTP Modal with new rest api package
 (#25893)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com>
---
 apps/meteor/app/utils/client/lib/RestApiClient.ts | 13 +++++++++----
 packages/api-client/src/index.ts                  |  5 +++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/app/utils/client/lib/RestApiClient.ts b/apps/meteor/app/utils/client/lib/RestApiClient.ts
index 0621fe9850da9..38b2dc44b5ee0 100644
--- a/apps/meteor/app/utils/client/lib/RestApiClient.ts
+++ b/apps/meteor/app/utils/client/lib/RestApiClient.ts
@@ -28,11 +28,16 @@ export const APIClient = new RestApiClient({
 	baseUrl: baseURI.replace(/\/$/, ''),
 });
 
-APIClient.use(function (request, next) {
+APIClient.use(async function (request, next) {
 	try {
-		return next(...request);
-	} catch (e) {
-		return new Promise((resolve, reject) => {
+		return await next(...request);
+	} catch (error) {
+		if (!(error instanceof Response) || error.status !== 400) {
+			throw error;
+		}
+
+		return new Promise(async (resolve, reject) => {
+			const e = await error.json();
 			process2faReturn({
 				error: e,
 				result: null,
diff --git a/packages/api-client/src/index.ts b/packages/api-client/src/index.ts
index 90905a7812b5b..c75b39da3b387 100644
--- a/packages/api-client/src/index.ts
+++ b/packages/api-client/src/index.ts
@@ -161,6 +161,11 @@ export class RestClient implements RestClientInterface {
 			...options,
 			headers: { ...this.getCredentialsAsHeaders(), ...this.headers, ...headers },
 			method,
+		}).then(function (response) {
+			if (!response.ok) {
+				return Promise.reject(response);
+			}
+			return response;
 		});
 	}
 

From 419f07ab48b0f9539019eba510a7f0276ba4990c Mon Sep 17 00:00:00 2001
From: Luciano Marcos Pierdona Junior
 <64279791+LucianoPierdona@users.noreply.github.com>
Date: Thu, 16 Jun 2022 11:55:31 -0300
Subject: [PATCH 34/36] [FIX] Update import from `csv-parse` (#25872)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

This PR updates the importing of `csv-parse` because the used method wasn't working anymore, we were receiving the following error:

`error: "this.csvParser is not a function"`

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 apps/meteor/app/importer-csv/server/importer.js         | 4 +++-
 apps/meteor/app/importer-slack-users/server/importer.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/app/importer-csv/server/importer.js b/apps/meteor/app/importer-csv/server/importer.js
index d4d3d014dbfae..1d2ce78e38dd7 100644
--- a/apps/meteor/app/importer-csv/server/importer.js
+++ b/apps/meteor/app/importer-csv/server/importer.js
@@ -7,7 +7,9 @@ export class CsvImporter extends Base {
 	constructor(info, importRecord) {
 		super(info, importRecord);
 
-		this.csvParser = require('csv-parse/lib/sync');
+		const { parse } = require('csv-parse/lib/sync');
+
+		this.csvParser = parse;
 	}
 
 	prepareUsingLocalFile(fullFilePath) {
diff --git a/apps/meteor/app/importer-slack-users/server/importer.js b/apps/meteor/app/importer-slack-users/server/importer.js
index 5fcf3924499b8..9646ac79e7b34 100644
--- a/apps/meteor/app/importer-slack-users/server/importer.js
+++ b/apps/meteor/app/importer-slack-users/server/importer.js
@@ -11,7 +11,9 @@ export class SlackUsersImporter extends Base {
 	constructor(info, importRecord) {
 		super(info, importRecord);
 
-		this.csvParser = require('csv-parse/lib/sync');
+		const { parse } = require('csv-parse/lib/sync');
+
+		this.csvParser = parse;
 		this.userMap = new Map();
 		this.admins = []; // Array of ids of the users which are admins
 	}

From 2c05ffd12647f2685efeccf142477c158e7af844 Mon Sep 17 00:00:00 2001
From: Diego Sampaio <chinello@gmail.com>
Date: Fri, 17 Jun 2022 09:59:27 -0300
Subject: [PATCH 35/36] [FIX] Settings not being overwritten to their default
 values (#25891)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->
---
 .../app/settings/server/SettingsRegistry.ts    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/app/settings/server/SettingsRegistry.ts b/apps/meteor/app/settings/server/SettingsRegistry.ts
index d6799596ed9a8..0c5c00ff2c102 100644
--- a/apps/meteor/app/settings/server/SettingsRegistry.ts
+++ b/apps/meteor/app/settings/server/SettingsRegistry.ts
@@ -135,8 +135,10 @@ export class SettingsRegistry {
 			throw new Error(`Enterprise setting ${_id} is missing the invalidValue option`);
 		}
 
+		const settingFromCodeOverwritten = overwriteSetting(settingFromCode);
+
 		const settingStored = this.store.getSetting(_id);
-		const settingOverwritten = overwriteSetting(settingFromCode);
+		const settingStoredOverwritten = settingStored && overwriteSetting(settingStored);
 
 		try {
 			validateSetting(settingFromCode._id, settingFromCode.type, settingFromCode.value);
@@ -144,14 +146,14 @@ export class SettingsRegistry {
 			IS_DEVELOPMENT && SystemLogger.error(`Invalid setting code ${_id}: ${(e as Error).message}`);
 		}
 
-		const isOverwritten = settingFromCode !== settingOverwritten;
+		const isOverwritten = settingFromCode !== settingFromCodeOverwritten || (settingStored && settingStored !== settingStoredOverwritten);
 
-		const { _id: _, ...settingProps } = settingOverwritten;
+		const { _id: _, ...settingProps } = settingFromCodeOverwritten;
 
-		if (settingStored && !compareSettings(settingStored, settingOverwritten)) {
-			const { value: _value, ...settingOverwrittenProps } = settingOverwritten;
+		if (settingStored && !compareSettings(settingStored, settingFromCodeOverwritten)) {
+			const { value: _value, ...settingOverwrittenProps } = settingFromCodeOverwritten;
 
-			const overwrittenKeys = Object.keys(settingOverwritten);
+			const overwrittenKeys = Object.keys(settingFromCodeOverwritten);
 			const removedKeys = Object.keys(settingStored).filter((key) => !['_updatedAt'].includes(key) && !overwrittenKeys.includes(key));
 
 			this.model.upsert(
@@ -168,7 +170,7 @@ export class SettingsRegistry {
 		}
 
 		if (settingStored && isOverwritten) {
-			if (settingStored.value !== settingOverwritten.value) {
+			if (settingStored.value !== settingFromCodeOverwritten.value) {
 				this.model.upsert({ _id }, settingProps);
 			}
 			return;
@@ -185,7 +187,7 @@ export class SettingsRegistry {
 
 		const settingOverwrittenDefault = overrideSetting(settingFromCode);
 
-		const setting = isOverwritten ? settingOverwritten : settingOverwrittenDefault;
+		const setting = isOverwritten ? settingFromCodeOverwritten : settingOverwrittenDefault;
 
 		this.model.insert(setting); // no need to emit unless we remove the oplog
 

From 6b6f9dcb74dcfea8e9355d8ecab925c0801c4a26 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 17 Jun 2022 10:37:17 -0300
Subject: [PATCH 36/36] Chore: Convert users endpoints (#25635)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 apps/meteor/app/api/server/api.d.ts           |   11 +-
 apps/meteor/app/api/server/lib/users.ts       |   15 +-
 .../app/api/server/v1/{users.js => users.ts}  | 1041 ++++++++---------
 ...{getFullUserData.js => getFullUserData.ts} |   40 +-
 .../app/lib/server/functions/setUserAvatar.ts |   22 +-
 apps/meteor/client/lib/presence.ts            |   14 -
 apps/meteor/server/sdk/types/ITeamService.ts  |    1 +
 apps/meteor/tests/end-to-end/api/01-users.js  |    2 +-
 packages/core-typings/src/IUser.ts            |    1 +
 packages/rest-typings/src/index.ts            |    6 +
 packages/rest-typings/src/v1/users.ts         |  233 +++-
 .../src/v1/users/UserCreateParamsPOST.ts      |   51 +
 .../v1/users/UserDeactivateIdleParamsPOST.ts  |   26 +
 .../src/v1/users/UserLogoutParamsPOST.ts      |   22 +
 .../src/v1/users/UserRegisterParamsPOST.ts    |   47 +
 .../v1/users/UserSetActiveStatusParamsPOST.ts |   24 +
 .../v1/users/UsersAutocompleteParamsGET.ts    |   20 +
 .../src/v1/users/UsersInfoParamsGet.ts        |   44 +
 .../src/v1/users/UsersListTeamsParamsGET.ts   |   21 +
 .../src/v1/users/UsersSetAvatarParamsPOST.ts  |   33 +
 .../v1/users/UsersSetPreferenceParamsPOST.ts  |  190 +++
 .../UsersUpdateOwnBasicInfoParamsPOST.ts      |   67 ++
 .../src/v1/users/UsersUpdateParamsPOST.ts     |  108 ++
 23 files changed, 1370 insertions(+), 669 deletions(-)
 rename apps/meteor/app/api/server/v1/{users.js => users.ts} (66%)
 rename apps/meteor/app/lib/server/functions/{getFullUserData.js => getFullUserData.ts} (65%)
 create mode 100644 packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UserDeactivateIdleParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UserLogoutParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UserRegisterParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UserSetActiveStatusParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersAutocompleteParamsGET.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersInfoParamsGet.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersListTeamsParamsGET.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersSetAvatarParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersUpdateOwnBasicInfoParamsPOST.ts
 create mode 100644 packages/rest-typings/src/v1/users/UsersUpdateParamsPOST.ts

diff --git a/apps/meteor/app/api/server/api.d.ts b/apps/meteor/app/api/server/api.d.ts
index a1dd637137478..ebc4871610e33 100644
--- a/apps/meteor/app/api/server/api.d.ts
+++ b/apps/meteor/app/api/server/api.d.ts
@@ -9,7 +9,7 @@ import type {
 } from '@rocket.chat/rest-typings';
 import type { IUser, IMethodConnection, IRoom } from '@rocket.chat/core-typings';
 import type { ValidateFunction } from 'ajv';
-import type { Request } from 'express';
+import type { Request, Response } from 'express';
 
 import { ITwoFactorOptions } from '../../2fa/server/code';
 
@@ -73,11 +73,13 @@ type Options = (
 
 type PartialThis = {
 	readonly request: Request & { query: Record<string, string> };
+	readonly response: Response;
 };
 
 type ActionThis<TMethod extends Method, TPathPattern extends PathPattern, TOptions> = {
 	readonly requestIp: string;
 	urlParams: UrlParams<TPathPattern>;
+	readonly response: Response;
 	// TODO make it unsafe
 	readonly queryParams: TMethod extends 'GET'
 		? TOptions extends { validateParams: ValidateFunction<infer T> }
@@ -91,6 +93,9 @@ type ActionThis<TMethod extends Method, TPathPattern extends PathPattern, TOptio
 		? T
 		: Partial<OperationParams<TMethod, TPathPattern>>;
 	readonly request: Request;
+
+	readonly queryOperations: TOptions extends { queryOperations: infer T } ? T : never;
+
 	/* @deprecated */
 	requestParams(): OperationParams<TMethod, TPathPattern>;
 	getLoggedInUser(): TOptions extends { authRequired: true } ? IUser : IUser | undefined;
@@ -106,6 +111,8 @@ type ActionThis<TMethod extends Method, TPathPattern extends PathPattern, TOptio
 	/* @deprecated */
 	getUserFromParams(): IUser;
 	/* @deprecated */
+	isUserFromParams(): boolean;
+	/* @deprecated */
 	getUserInfo(me: IUser): TOptions extends { authRequired: true }
 		? IUser & {
 				email?: string;
@@ -153,6 +160,8 @@ type Operations<TPathPattern extends PathPattern, TOptions extends Options = {}>
 declare class APIClass<TBasePath extends string = '/'> {
 	fieldSeparator: string;
 
+	updateRateLimiterDictionaryForRoute(route: string, rateLimiterDictionary: number): void;
+
 	limitedUserFieldsToExclude(fields: { [x: string]: unknown }, limitedUserFieldsToExclude: unknown): { [x: string]: unknown };
 
 	limitedUserFieldsToExcludeIfIsPrivilegedUser(
diff --git a/apps/meteor/app/api/server/lib/users.ts b/apps/meteor/app/api/server/lib/users.ts
index 8ff1737cc6924..7762b9b20a183 100644
--- a/apps/meteor/app/api/server/lib/users.ts
+++ b/apps/meteor/app/api/server/lib/users.ts
@@ -16,7 +16,7 @@ export async function findUsersToAutocomplete({
 		term: string;
 	};
 }): Promise<{
-	items: IUser[];
+	items: Required<Pick<IUser, '_id' | 'name' | 'username' | 'nickname' | 'status' | 'avatarETag'>>[];
 }> {
 	if (!(await hasPermissionAsync(uid, 'view-outside-room'))) {
 		return { items: [] };
@@ -69,16 +69,7 @@ export function getInclusiveFields(query: { [k: string]: 1 }): {} {
  * get the default fields if **fields** are empty (`{}`) or `undefined`/`null`
  * @param {Object|null|undefined} fields the fields from parsed jsonQuery
  */
-export function getNonEmptyFields(fields: {}): {
-	name: number;
-	username: number;
-	emails: number;
-	roles: number;
-	status: number;
-	active: number;
-	avatarETag: number;
-	lastLogin: number;
-} {
+export function getNonEmptyFields(fields: { [k: string]: 1 | 0 }): { [k: string]: 1 } {
 	const defaultFields = {
 		name: 1,
 		username: 1,
@@ -88,7 +79,7 @@ export function getNonEmptyFields(fields: {}): {
 		active: 1,
 		avatarETag: 1,
 		lastLogin: 1,
-	};
+	} as const;
 
 	if (!fields || Object.keys(fields).length === 0) {
 		return defaultFields;
diff --git a/apps/meteor/app/api/server/v1/users.js b/apps/meteor/app/api/server/v1/users.ts
similarity index 66%
rename from apps/meteor/app/api/server/v1/users.js
rename to apps/meteor/app/api/server/v1/users.ts
index 094570518e2d0..8e6808fd34b42 100644
--- a/apps/meteor/app/api/server/v1/users.js
+++ b/apps/meteor/app/api/server/v1/users.ts
@@ -1,57 +1,236 @@
+import {
+	isUserCreateParamsPOST,
+	isUserSetActiveStatusParamsPOST,
+	isUserDeactivateIdleParamsPOST,
+	isUsersInfoParamsGetProps,
+	isUserRegisterParamsPOST,
+	isUserLogoutParamsPOST,
+	isUsersListTeamsProps,
+	isUsersAutocompleteProps,
+	isUsersSetAvatarProps,
+	isUsersUpdateParamsPOST,
+	isUsersUpdateOwnBasicInfoParamsPOST,
+	isUsersSetPreferencesParamsPOST,
+} from '@rocket.chat/rest-typings';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Match, check } from 'meteor/check';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-import _ from 'underscore';
+import { IExportOperation, IPersonalAccessToken, IUser } from '@rocket.chat/core-typings';
 
 import { Users, Subscriptions } from '../../../models/server';
 import { Users as UsersRaw } from '../../../models/server/raw';
-import { hasPermission } from '../../../authorization';
+import { hasPermission } from '../../../authorization/server';
 import { settings } from '../../../settings/server';
-import { getURL } from '../../../utils';
 import {
 	validateCustomFields,
 	saveUser,
 	saveCustomFieldsWithoutValidation,
 	checkUsernameAvailability,
+	setStatusText,
 	setUserAvatar,
 	saveCustomFields,
-	setStatusText,
 } from '../../../lib/server';
 import { getFullUserDataByIdOrUsername } from '../../../lib/server/functions/getFullUserData';
 import { API } from '../api';
-import { getUploadFormData } from '../lib/getUploadFormData';
 import { findUsersToAutocomplete, getInclusiveFields, getNonEmptyFields, getNonEmptyQuery } from '../lib/users';
 import { getUserForCheck, emailCheck } from '../../../2fa/server/code';
 import { resetUserE2EEncriptionKey } from '../../../../server/lib/resetUserE2EKey';
-import { setUserStatus } from '../../../../imports/users-presence/server/activeUsers';
 import { resetTOTP } from '../../../2fa/server/functions/resetTOTP';
 import { Team } from '../../../../server/sdk';
 import { isValidQuery } from '../lib/isValidQuery';
+import { setUserStatus } from '../../../../imports/users-presence/server/activeUsers';
+import { getURL } from '../../../utils/server';
+import { getUploadFormData } from '../lib/getUploadFormData';
 
 API.v1.addRoute(
-	'users.create',
-	{ authRequired: true },
+	'users.getAvatar',
+	{ authRequired: false },
+	{
+		get() {
+			const user = this.getUserFromParams();
+
+			const url = getURL(`/avatar/${user.username}`, { cdn: false, full: true });
+			this.response.setHeader('Location', url);
+
+			return {
+				statusCode: 307,
+				body: url,
+			};
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.update',
+	{ authRequired: true, twoFactorRequired: true, validateParams: isUsersUpdateParamsPOST },
+	{
+		post() {
+			const userData = { _id: this.bodyParams.userId, ...this.bodyParams.data };
+
+			Meteor.runAsUser(this.userId, () => saveUser(this.userId, userData));
+
+			if (this.bodyParams.data.customFields) {
+				saveCustomFields(this.bodyParams.userId, this.bodyParams.data.customFields);
+			}
+
+			if (typeof this.bodyParams.data.active !== 'undefined') {
+				const {
+					userId,
+					data: { active },
+					confirmRelinquish,
+				} = this.bodyParams;
+
+				Meteor.call('setUserActiveStatus', userId, active, Boolean(confirmRelinquish));
+			}
+			const { fields } = this.parseJsonQuery();
+
+			return API.v1.success({ user: Users.findOneById(this.bodyParams.userId, { fields }) });
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.updateOwnBasicInfo',
+	{ authRequired: true, validateParams: isUsersUpdateOwnBasicInfoParamsPOST },
+	{
+		post() {
+			const userData = {
+				email: this.bodyParams.data.email,
+				realname: this.bodyParams.data.name,
+				username: this.bodyParams.data.username,
+				nickname: this.bodyParams.data.nickname,
+				statusText: this.bodyParams.data.statusText,
+				newPassword: this.bodyParams.data.newPassword,
+				typedPassword: this.bodyParams.data.currentPassword,
+			};
+
+			// saveUserProfile now uses the default two factor authentication procedures, so we need to provide that
+			const twoFactorOptions = !userData.typedPassword
+				? null
+				: {
+						twoFactorCode: userData.typedPassword,
+						twoFactorMethod: 'password',
+				  };
+
+			Meteor.call('saveUserProfile', userData, this.bodyParams.customFields, twoFactorOptions);
+
+			return API.v1.success({
+				user: Users.findOneById(this.userId, { fields: API.v1.defaultFieldsToExclude }),
+			});
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.setPreferences',
+	{ authRequired: true, validateParams: isUsersSetPreferencesParamsPOST },
 	{
 		post() {
-			check(this.bodyParams, {
-				email: String,
-				name: String,
-				password: String,
-				username: String,
-				active: Match.Maybe(Boolean),
-				bio: Match.Maybe(String),
-				nickname: Match.Maybe(String),
-				statusText: Match.Maybe(String),
-				roles: Match.Maybe(Array),
-				joinDefaultChannels: Match.Maybe(Boolean),
-				requirePasswordChange: Match.Maybe(Boolean),
-				setRandomPassword: Match.Maybe(Boolean),
-				sendWelcomeEmail: Match.Maybe(Boolean),
-				verified: Match.Maybe(Boolean),
-				customFields: Match.Maybe(Object),
+			if (this.bodyParams.userId && this.bodyParams.userId !== this.userId && !hasPermission(this.userId, 'edit-other-user-info')) {
+				throw new Meteor.Error('error-action-not-allowed', 'Editing user is not allowed');
+			}
+			const userId = this.bodyParams.userId ? this.bodyParams.userId : this.userId;
+			if (!Users.findOneById(userId)) {
+				throw new Meteor.Error('error-invalid-user', 'The optional "userId" param provided does not match any users');
+			}
+
+			Meteor.runAsUser(userId, () => Meteor.call('saveUserPreferences', this.bodyParams.data));
+			const user = Users.findOneById(userId, {
+				fields: {
+					'settings.preferences': 1,
+					'language': 1,
+				},
 			});
+			return API.v1.success({
+				user: {
+					_id: user._id,
+					settings: {
+						preferences: {
+							...user.settings.preferences,
+							language: user.language,
+						},
+					},
+				},
+			});
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.setAvatar',
+	{ authRequired: true, validateParams: isUsersSetAvatarProps },
+	{
+		async post() {
+			const canEditOtherUserAvatar = hasPermission(this.userId, 'edit-other-user-avatar');
+
+			if (!settings.get('Accounts_AllowUserAvatarChange') && !canEditOtherUserAvatar) {
+				throw new Meteor.Error('error-not-allowed', 'Change avatar is not allowed', {
+					method: 'users.setAvatar',
+				});
+			}
+
+			let user = ((): IUser | undefined => {
+				if (this.isUserFromParams()) {
+					return Meteor.users.findOne(this.userId) as IUser | undefined;
+				}
+				if (canEditOtherUserAvatar) {
+					return this.getUserFromParams();
+				}
+			})();
+
+			if (!user) {
+				return API.v1.unauthorized();
+			}
+
+			if (this.bodyParams.avatarUrl) {
+				setUserAvatar(user, this.bodyParams.avatarUrl, '', 'url');
+				return API.v1.success();
+			}
+
+			const [image, fields] = await getUploadFormData(
+				{
+					request: this.request,
+				},
+				{
+					field: 'image',
+				},
+			);
+
+			if (!image) {
+				return API.v1.failure("The 'image' param is required");
+			}
+
+			const sentTheUserByFormData = fields.userId || fields.username;
+			if (sentTheUserByFormData) {
+				if (fields.userId) {
+					user = Users.findOneById(fields.userId, { fields: { username: 1 } });
+				} else if (fields.username) {
+					user = Users.findOneByUsernameIgnoringCase(fields.username, { fields: { username: 1 } });
+				}
+
+				if (!user) {
+					throw new Meteor.Error('error-invalid-user', 'The optional "userId" or "username" param provided does not match any users');
+				}
+
+				const isAnotherUser = this.userId !== user._id;
+				if (isAnotherUser && !hasPermission(this.userId, 'edit-other-user-avatar')) {
+					throw new Meteor.Error('error-not-allowed', 'Not allowed');
+				}
+			}
 
+			setUserAvatar(user, image.fileBuffer, image.mimetype, 'rest');
+
+			return API.v1.success();
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.create',
+	{ authRequired: true, validateParams: isUserCreateParamsPOST },
+	{
+		post() {
 			// New change made by pull request #5152
 			if (typeof this.bodyParams.joinDefaultChannels === 'undefined') {
 				this.bodyParams.joinDefaultChannels = true;
@@ -68,9 +247,7 @@ API.v1.addRoute(
 			}
 
 			if (typeof this.bodyParams.active !== 'undefined') {
-				Meteor.runAsUser(this.userId, () => {
-					Meteor.call('setUserActiveStatus', newUserId, this.bodyParams.active);
-				});
+				Meteor.call('setUserActiveStatus', newUserId, this.bodyParams.active);
 			}
 
 			const { fields } = this.parseJsonQuery();
@@ -92,9 +269,7 @@ API.v1.addRoute(
 			const user = this.getUserFromParams();
 			const { confirmRelinquish = false } = this.requestParams();
 
-			Meteor.runAsUser(this.userId, () => {
-				Meteor.call('deleteUser', user._id, confirmRelinquish);
-			});
+			Meteor.call('deleteUser', user._id, confirmRelinquish);
 
 			return API.v1.success();
 		},
@@ -116,52 +291,24 @@ API.v1.addRoute(
 
 			const { confirmRelinquish = false } = this.requestParams();
 
-			Meteor.runAsUser(this.userId, () => {
-				Meteor.call('deleteUserOwnAccount', password, confirmRelinquish);
-			});
+			Meteor.call('deleteUserOwnAccount', password, confirmRelinquish);
 
 			return API.v1.success();
 		},
 	},
 );
 
-API.v1.addRoute(
-	'users.getAvatar',
-	{ authRequired: false },
-	{
-		get() {
-			const user = this.getUserFromParams();
-
-			const url = getURL(`/avatar/${user.username}`, { cdn: false, full: true });
-			this.response.setHeader('Location', url);
-
-			return {
-				statusCode: 307,
-				body: url,
-			};
-		},
-	},
-);
-
 API.v1.addRoute(
 	'users.setActiveStatus',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUserSetActiveStatusParamsPOST },
 	{
 		post() {
-			check(this.bodyParams, {
-				userId: String,
-				activeStatus: Boolean,
-				confirmRelinquish: Match.Maybe(Boolean),
-			});
-
 			if (!hasPermission(this.userId, 'edit-other-user-active-status')) {
 				return API.v1.unauthorized();
 			}
 
-			Meteor.runAsUser(this.userId, () => {
-				const { userId, activeStatus, confirmRelinquish = false } = this.bodyParams;
-				Meteor.call('setUserActiveStatus', userId, activeStatus, confirmRelinquish);
-			});
+			const { userId, activeStatus, confirmRelinquish = false } = this.bodyParams;
+			Meteor.call('setUserActiveStatus', userId, activeStatus, confirmRelinquish);
 			return API.v1.success({
 				user: Users.findOneById(this.bodyParams.userId, { fields: { active: 1 } }),
 			});
@@ -171,14 +318,9 @@ API.v1.addRoute(
 
 API.v1.addRoute(
 	'users.deactivateIdle',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUserDeactivateIdleParamsPOST },
 	{
 		post() {
-			check(this.bodyParams, {
-				daysIdle: Match.Integer,
-				role: Match.Optional(String),
-			});
-
 			if (!hasPermission(this.userId, 'edit-other-user-active-status')) {
 				return API.v1.unauthorized();
 			}
@@ -197,68 +339,41 @@ API.v1.addRoute(
 	},
 );
 
-API.v1.addRoute(
-	'users.getPresence',
-	{ authRequired: true },
-	{
-		get() {
-			if (this.isUserFromParams()) {
-				const user = Users.findOneById(this.userId);
-				return API.v1.success({
-					presence: user.status,
-					connectionStatus: user.statusConnection,
-					lastLogin: user.lastLogin,
-				});
-			}
-
-			const user = this.getUserFromParams();
-
-			return API.v1.success({
-				presence: user.status,
-			});
-		},
-	},
-);
-
 API.v1.addRoute(
 	'users.info',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUsersInfoParamsGetProps },
 	{
-		get() {
-			const { username, userId } = this.requestParams();
+		async get() {
 			const { fields } = this.parseJsonQuery();
 
-			check(userId, Match.Maybe(String));
-			check(username, Match.Maybe(String));
-
-			if (userId !== undefined && username !== undefined) {
-				throw new Meteor.Error('invalid-filter', 'Cannot filter by id and username at once');
-			}
-
-			if (!userId && !username) {
-				throw new Meteor.Error('invalid-filter', 'Must filter by id or username');
-			}
-
-			const user = getFullUserDataByIdOrUsername({ userId: this.userId, filterId: userId, filterUsername: username });
+			const user = await getFullUserDataByIdOrUsername(this.userId, {
+				filterId: (this.queryParams as any).userId,
+				filterUsername: (this.queryParams as any).username,
+			});
 
 			if (!user) {
 				return API.v1.failure('User not found.');
 			}
 			const myself = user._id === this.userId;
 			if (fields.userRooms === 1 && (myself || hasPermission(this.userId, 'view-other-user-channels'))) {
-				user.rooms = Subscriptions.findByUserId(user._id, {
-					fields: {
-						rid: 1,
-						name: 1,
-						t: 1,
-						roles: 1,
-						unread: 1,
-					},
-					sort: {
-						t: 1,
-						name: 1,
+				return API.v1.success({
+					user: {
+						...user,
+						rooms: Subscriptions.findByUserId(user._id, {
+							projection: {
+								rid: 1,
+								name: 1,
+								t: 1,
+								roles: 1,
+								unread: 1,
+							},
+							sort: {
+								t: 1,
+								name: 1,
+							},
+						}).fetch(),
 					},
-				}).fetch();
+				});
 			}
 
 			return API.v1.success({
@@ -298,14 +413,14 @@ API.v1.addRoute(
 						inclusiveFieldsKeys.includes('emails') && 'emails.address.*',
 						inclusiveFieldsKeys.includes('username') && 'username.*',
 						inclusiveFieldsKeys.includes('name') && 'name.*',
-					].filter(Boolean),
+					].filter(Boolean) as string[],
 					this.queryOperations,
 				)
 			) {
 				throw new Meteor.Error('error-invalid-query', isValidQuery.errors.join('\n'));
 			}
 
-			const actualSort = sort && sort.name ? { nameInsensitive: sort.name, ...sort } : sort || { username: 1 };
+			const actualSort = sort?.name ? { nameInsensitive: sort.name, ...sort } : sort || { username: 1 };
 
 			const limit =
 				count !== 0
@@ -373,6 +488,7 @@ API.v1.addRoute(
 			numRequestsAllowed: settings.get('Rate_Limiter_Limit_RegisterUser'),
 			intervalTimeInMS: settings.get('API_Enable_Rate_Limiter_Limit_Time_Default'),
 		},
+		validateParams: isUserRegisterParamsPOST,
 	},
 	{
 		post() {
@@ -380,306 +496,40 @@ API.v1.addRoute(
 				return API.v1.failure('Logged in users can not register again.');
 			}
 
-			// We set their username here, so require it
-			// The `registerUser` checks for the other requirements
-			check(
-				this.bodyParams,
-				Match.ObjectIncluding({
-					username: String,
-				}),
-			);
-
 			if (!checkUsernameAvailability(this.bodyParams.username)) {
 				return API.v1.failure('Username is already in use');
 			}
 
 			// Register the user
-			const userId = Meteor.call('registerUser', this.bodyParams);
-
-			// Now set their username
-			Meteor.runAsUser(userId, () => Meteor.call('setUsername', this.bodyParams.username));
-			const { fields } = this.parseJsonQuery();
-
-			return API.v1.success({ user: Users.findOneById(userId, { fields }) });
-		},
-	},
-);
-
-API.v1.addRoute(
-	'users.resetAvatar',
-	{ authRequired: true },
-	{
-		post() {
-			const user = this.getUserFromParams();
-
-			if (settings.get('Accounts_AllowUserAvatarChange') && user._id === this.userId) {
-				Meteor.runAsUser(this.userId, () => Meteor.call('resetAvatar'));
-			} else if (hasPermission(this.userId, 'edit-other-user-avatar')) {
-				Meteor.runAsUser(this.userId, () => Meteor.call('resetAvatar', user._id));
-			} else {
-				throw new Meteor.Error('error-not-allowed', 'Reset avatar is not allowed', {
-					method: 'users.resetAvatar',
-				});
-			}
-
-			return API.v1.success();
-		},
-	},
-);
-
-API.v1.addRoute(
-	'users.setAvatar',
-	{ authRequired: true },
-	{
-		async post() {
-			check(
-				this.bodyParams,
-				Match.ObjectIncluding({
-					avatarUrl: Match.Maybe(String),
-					userId: Match.Maybe(String),
-					username: Match.Maybe(String),
-				}),
-			);
-			const canEditOtherUserAvatar = hasPermission(this.userId, 'edit-other-user-avatar');
-
-			if (!settings.get('Accounts_AllowUserAvatarChange') && !canEditOtherUserAvatar) {
-				throw new Meteor.Error('error-not-allowed', 'Change avatar is not allowed', {
-					method: 'users.setAvatar',
-				});
-			}
-
-			let user;
-			if (this.isUserFromParams()) {
-				user = Meteor.users.findOne(this.userId);
-			} else if (canEditOtherUserAvatar) {
-				user = this.getUserFromParams();
-			} else {
-				return API.v1.unauthorized();
-			}
-
-			if (this.bodyParams.avatarUrl) {
-				setUserAvatar(user, this.bodyParams.avatarUrl, '', 'url');
-				return API.v1.success();
-			}
-
-			const [image, fields] = await getUploadFormData(
-				{
-					request: this.request,
-				},
-				{ field: 'image' },
-			);
-
-			if (!image) {
-				return API.v1.failure("The 'image' param is required");
-			}
-
-			const sentTheUserByFormData = fields.userId || fields.username;
-			if (sentTheUserByFormData) {
-				if (fields.userId) {
-					user = Users.findOneById(fields.userId, { fields: { username: 1 } });
-				} else if (fields.username) {
-					user = Users.findOneByUsernameIgnoringCase(fields.username, { fields: { username: 1 } });
-				}
-
-				if (!user) {
-					throw new Meteor.Error('error-invalid-user', 'The optional "userId" or "username" param provided does not match any users');
-				}
-
-				const isAnotherUser = this.userId !== user._id;
-				if (isAnotherUser && !hasPermission(this.userId, 'edit-other-user-avatar')) {
-					throw new Meteor.Error('error-not-allowed', 'Not allowed');
-				}
-			}
-
-			setUserAvatar(user, image.fileBuffer, image.mimetype, 'rest');
-
-			return API.v1.success();
-		},
-	},
-);
-
-API.v1.addRoute(
-	'users.getStatus',
-	{ authRequired: true },
-	{
-		get() {
-			if (this.isUserFromParams()) {
-				const user = Users.findOneById(this.userId);
-				return API.v1.success({
-					_id: user._id,
-					message: user.statusText,
-					connectionStatus: user.statusConnection,
-					status: user.status,
-				});
-			}
-
-			const user = this.getUserFromParams();
-
-			return API.v1.success({
-				_id: user._id,
-				message: user.statusText,
-				status: user.status,
-			});
-		},
-	},
-);
-
-API.v1.addRoute(
-	'users.setStatus',
-	{ authRequired: true },
-	{
-		post() {
-			check(
-				this.bodyParams,
-				Match.ObjectIncluding({
-					status: Match.Maybe(String),
-					message: Match.Maybe(String),
-				}),
-			);
-
-			if (!settings.get('Accounts_AllowUserStatusMessageChange')) {
-				throw new Meteor.Error('error-not-allowed', 'Change status is not allowed', {
-					method: 'users.setStatus',
-				});
-			}
-
-			let user;
-			if (this.isUserFromParams()) {
-				user = Meteor.users.findOne(this.userId);
-			} else if (hasPermission(this.userId, 'edit-other-user-info')) {
-				user = this.getUserFromParams();
-			} else {
-				return API.v1.unauthorized();
-			}
-
-			Meteor.runAsUser(user._id, () => {
-				if (this.bodyParams.message || this.bodyParams.message === '') {
-					setStatusText(user._id, this.bodyParams.message);
-				}
-				if (this.bodyParams.status) {
-					const validStatus = ['online', 'away', 'offline', 'busy'];
-					if (validStatus.includes(this.bodyParams.status)) {
-						const { status } = this.bodyParams;
-
-						if (status === 'offline' && !settings.get('Accounts_AllowInvisibleStatusOption')) {
-							throw new Meteor.Error('error-status-not-allowed', 'Invisible status is disabled', {
-								method: 'users.setStatus',
-							});
-						}
-
-						Meteor.users.update(user._id, {
-							$set: {
-								status,
-								statusDefault: status,
-							},
-						});
-
-						setUserStatus(user, status);
-					} else {
-						throw new Meteor.Error('error-invalid-status', 'Valid status types include online, away, offline, and busy.', {
-							method: 'users.setStatus',
-						});
-					}
-				}
-			});
-
-			return API.v1.success();
-		},
-	},
-);
-
-API.v1.addRoute(
-	'users.update',
-	{ authRequired: true, twoFactorRequired: true },
-	{
-		post() {
-			check(this.bodyParams, {
-				userId: String,
-				data: Match.ObjectIncluding({
-					email: Match.Maybe(String),
-					name: Match.Maybe(String),
-					password: Match.Maybe(String),
-					username: Match.Maybe(String),
-					bio: Match.Maybe(String),
-					nickname: Match.Maybe(String),
-					statusText: Match.Maybe(String),
-					active: Match.Maybe(Boolean),
-					roles: Match.Maybe(Array),
-					joinDefaultChannels: Match.Maybe(Boolean),
-					requirePasswordChange: Match.Maybe(Boolean),
-					sendWelcomeEmail: Match.Maybe(Boolean),
-					verified: Match.Maybe(Boolean),
-					customFields: Match.Maybe(Object),
-				}),
-			});
-
-			const userData = _.extend({ _id: this.bodyParams.userId }, this.bodyParams.data);
-
-			Meteor.runAsUser(this.userId, () => saveUser(this.userId, userData));
-
-			if (this.bodyParams.data.customFields) {
-				saveCustomFields(this.bodyParams.userId, this.bodyParams.data.customFields);
-			}
-
-			if (typeof this.bodyParams.data.active !== 'undefined') {
-				const {
-					userId,
-					data: { active },
-					confirmRelinquish = false,
-				} = this.bodyParams;
+			const userId = Meteor.call('registerUser', this.bodyParams);
 
-				Meteor.runAsUser(this.userId, () => {
-					Meteor.call('setUserActiveStatus', userId, active, confirmRelinquish);
-				});
-			}
+			// Now set their username
+			Meteor.runAsUser(userId, () => Meteor.call('setUsername', this.bodyParams.username));
 			const { fields } = this.parseJsonQuery();
 
-			return API.v1.success({ user: Users.findOneById(this.bodyParams.userId, { fields }) });
+			return API.v1.success({ user: Users.findOneById(userId, { fields }) });
 		},
 	},
 );
 
 API.v1.addRoute(
-	'users.updateOwnBasicInfo',
+	'users.resetAvatar',
 	{ authRequired: true },
 	{
 		post() {
-			check(this.bodyParams, {
-				data: Match.ObjectIncluding({
-					email: Match.Maybe(String),
-					name: Match.Maybe(String),
-					username: Match.Maybe(String),
-					nickname: Match.Maybe(String),
-					statusText: Match.Maybe(String),
-					currentPassword: Match.Maybe(String),
-					newPassword: Match.Maybe(String),
-				}),
-				customFields: Match.Maybe(Object),
-			});
-
-			const userData = {
-				email: this.bodyParams.data.email,
-				realname: this.bodyParams.data.name,
-				username: this.bodyParams.data.username,
-				nickname: this.bodyParams.data.nickname,
-				statusText: this.bodyParams.data.statusText,
-				newPassword: this.bodyParams.data.newPassword,
-				typedPassword: this.bodyParams.data.currentPassword,
-			};
-
-			// saveUserProfile now uses the default two factor authentication procedures, so we need to provide that
-			const twoFactorOptions = !userData.typedPassword
-				? null
-				: {
-						twoFactorCode: userData.typedPassword,
-						twoFactorMethod: 'password',
-				  };
+			const user = this.getUserFromParams();
 
-			Meteor.runAsUser(this.userId, () => Meteor.call('saveUserProfile', userData, this.bodyParams.customFields, twoFactorOptions));
+			if (settings.get('Accounts_AllowUserAvatarChange') && user._id === this.userId) {
+				Meteor.runAsUser(this.userId, () => Meteor.call('resetAvatar'));
+			} else if (hasPermission(this.userId, 'edit-other-user-avatar')) {
+				Meteor.runAsUser(this.userId, () => Meteor.call('resetAvatar', user._id));
+			} else {
+				throw new Meteor.Error('error-not-allowed', 'Reset avatar is not allowed', {
+					method: 'users.resetAvatar',
+				});
+			}
 
-			return API.v1.success({
-				user: Users.findOneById(this.userId, { fields: API.v1.defaultFieldsToExclude }),
-			});
+			return API.v1.success();
 		},
 	},
 );
@@ -690,10 +540,7 @@ API.v1.addRoute(
 	{
 		post() {
 			const user = this.getUserFromParams();
-			let data;
-			Meteor.runAsUser(this.userId, () => {
-				data = Meteor.call('createToken', user._id);
-			});
+			const data = Meteor.call('createToken', user._id);
 			return data ? API.v1.success({ data }) : API.v1.unauthorized();
 		},
 	},
@@ -718,77 +565,6 @@ API.v1.addRoute(
 	},
 );
 
-API.v1.addRoute(
-	'users.setPreferences',
-	{ authRequired: true },
-	{
-		post() {
-			check(this.bodyParams, {
-				userId: Match.Maybe(String),
-				data: Match.ObjectIncluding({
-					newRoomNotification: Match.Maybe(String),
-					newMessageNotification: Match.Maybe(String),
-					clockMode: Match.Maybe(Number),
-					useEmojis: Match.Maybe(Boolean),
-					convertAsciiEmoji: Match.Maybe(Boolean),
-					saveMobileBandwidth: Match.Maybe(Boolean),
-					collapseMediaByDefault: Match.Maybe(Boolean),
-					autoImageLoad: Match.Maybe(Boolean),
-					emailNotificationMode: Match.Maybe(String),
-					unreadAlert: Match.Maybe(Boolean),
-					notificationsSoundVolume: Match.Maybe(Number),
-					desktopNotifications: Match.Maybe(String),
-					pushNotifications: Match.Maybe(String),
-					enableAutoAway: Match.Maybe(Boolean),
-					highlights: Match.Maybe(Array),
-					desktopNotificationRequireInteraction: Match.Maybe(Boolean),
-					messageViewMode: Match.Maybe(Number),
-					showMessageInMainThread: Match.Maybe(Boolean),
-					hideUsernames: Match.Maybe(Boolean),
-					hideRoles: Match.Maybe(Boolean),
-					displayAvatars: Match.Maybe(Boolean),
-					hideFlexTab: Match.Maybe(Boolean),
-					sendOnEnter: Match.Maybe(String),
-					language: Match.Maybe(String),
-					sidebarShowFavorites: Match.Optional(Boolean),
-					sidebarShowUnread: Match.Optional(Boolean),
-					sidebarSortby: Match.Optional(String),
-					sidebarViewMode: Match.Optional(String),
-					sidebarDisplayAvatar: Match.Optional(Boolean),
-					sidebarGroupByType: Match.Optional(Boolean),
-					muteFocusedConversations: Match.Optional(Boolean),
-				}),
-			});
-			if (this.bodyParams.userId && this.bodyParams.userId !== this.userId && !hasPermission(this.userId, 'edit-other-user-info')) {
-				throw new Meteor.Error('error-action-not-allowed', 'Editing user is not allowed');
-			}
-			const userId = this.bodyParams.userId ? this.bodyParams.userId : this.userId;
-			if (!Users.findOneById(userId)) {
-				throw new Meteor.Error('error-invalid-user', 'The optional "userId" param provided does not match any users');
-			}
-
-			Meteor.runAsUser(userId, () => Meteor.call('saveUserPreferences', this.bodyParams.data));
-			const user = Users.findOneById(userId, {
-				fields: {
-					'settings.preferences': 1,
-					'language': 1,
-				},
-			});
-			return API.v1.success({
-				user: {
-					_id: user._id,
-					settings: {
-						preferences: {
-							...user.settings.preferences,
-							language: user.language,
-						},
-					},
-				},
-			});
-		},
-	},
-);
-
 API.v1.addRoute(
 	'users.forgotPassword',
 	{ authRequired: false },
@@ -810,7 +586,7 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		get() {
-			const result = Meteor.runAsUser(this.userId, () => Meteor.call('getUsernameSuggestion'));
+			const result = Meteor.call('getUsernameSuggestion');
 
 			return API.v1.success({ result });
 		},
@@ -826,7 +602,7 @@ API.v1.addRoute(
 			if (!tokenName) {
 				return API.v1.failure("The 'tokenName' param is required");
 			}
-			const token = Meteor.runAsUser(this.userId, () => Meteor.call('personalAccessTokens:generateToken', { tokenName, bypassTwoFactor }));
+			const token = Meteor.call('personalAccessTokens:generateToken', { tokenName, bypassTwoFactor });
 
 			return API.v1.success({ token });
 		},
@@ -842,7 +618,7 @@ API.v1.addRoute(
 			if (!tokenName) {
 				return API.v1.failure("The 'tokenName' param is required");
 			}
-			const token = Meteor.runAsUser(this.userId, () => Meteor.call('personalAccessTokens:regenerateToken', { tokenName }));
+			const token = Meteor.call('personalAccessTokens:regenerateToken', { tokenName });
 
 			return API.v1.success({ token });
 		},
@@ -857,19 +633,19 @@ API.v1.addRoute(
 			if (!hasPermission(this.userId, 'create-personal-access-tokens')) {
 				throw new Meteor.Error('not-authorized', 'Not Authorized');
 			}
-			const loginTokens = Users.getLoginTokensByUserId(this.userId).fetch()[0];
-			const getPersonalAccessTokens = () =>
-				loginTokens.services.resume.loginTokens
-					.filter((loginToken) => loginToken.type && loginToken.type === 'personalAccessToken')
-					.map((loginToken) => ({
-						name: loginToken.name,
-						createdAt: loginToken.createdAt,
-						lastTokenPart: loginToken.lastTokenPart,
-						bypassTwoFactor: loginToken.bypassTwoFactor,
-					}));
+
+			const user = Users.getLoginTokensByUserId(this.userId).fetch()[0] as IUser | undefined;
 
 			return API.v1.success({
-				tokens: loginTokens ? getPersonalAccessTokens() : [],
+				tokens:
+					user?.services?.resume?.loginTokens
+						?.filter((loginToken: any) => loginToken.type === 'personalAccessToken')
+						.map((loginToken: IPersonalAccessToken) => ({
+							name: loginToken.name,
+							createdAt: loginToken.createdAt.toISOString(),
+							lastTokenPart: loginToken.lastTokenPart,
+							bypassTwoFactor: Boolean(loginToken.bypassTwoFactor),
+						})) || [],
 			});
 		},
 	},
@@ -884,11 +660,9 @@ API.v1.addRoute(
 			if (!tokenName) {
 				return API.v1.failure("The 'tokenName' param is required");
 			}
-			Meteor.runAsUser(this.userId, () =>
-				Meteor.call('personalAccessTokens:removeToken', {
-					tokenName,
-				}),
-			);
+			Meteor.call('personalAccessTokens:removeToken', {
+				tokenName,
+			});
 
 			return API.v1.success();
 		},
@@ -931,7 +705,7 @@ API.v1.addRoute('users.2fa.sendEmailCode', {
 		const userId = this.userId || Users[method](emailOrUsername, { fields: { _id: 1 } })?._id;
 
 		if (!userId) {
-			this.logger.error('[2fa] User was not found when requesting 2fa email code');
+			// this.logger.error('[2fa] User was not found when requesting 2fa email code');
 			return API.v1.success();
 		}
 
@@ -968,7 +742,7 @@ API.v1.addRoute(
 
 			if (from) {
 				const ts = new Date(from);
-				const diff = (Date.now() - ts) / 1000 / 60;
+				const diff = (Date.now() - Number(ts)) / 1000 / 60;
 
 				if (diff < 10) {
 					return API.v1.success({
@@ -992,10 +766,13 @@ API.v1.addRoute(
 	{
 		get() {
 			const { fullExport = false } = this.queryParams;
-			const result = Meteor.runAsUser(this.userId, () => Meteor.call('requestDataDownload', { fullExport: fullExport === 'true' }));
+			const result = Meteor.call('requestDataDownload', { fullExport: fullExport === 'true' }) as {
+				requested: boolean;
+				exportOperation: IExportOperation;
+			};
 
 			return API.v1.success({
-				requested: result.requested,
+				requested: Boolean(result.requested),
 				exportOperation: result.exportOperation,
 			});
 		},
@@ -1007,48 +784,43 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		async post() {
-			try {
-				const hashedToken = Accounts._hashLoginToken(this.request.headers['x-auth-token']);
+			const xAuthToken = this.request.headers['x-auth-token'] as string;
 
-				if (!(await UsersRaw.removeNonPATLoginTokensExcept(this.userId, hashedToken))) {
-					throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
-				}
+			if (!xAuthToken) {
+				throw new Meteor.Error('error-parameter-required', 'x-auth-token is required');
+			}
+			const hashedToken = Accounts._hashLoginToken(xAuthToken);
 
-				const me = await UsersRaw.findOneById(this.userId, { projection: { 'services.resume.loginTokens': 1 } });
+			if (!(await UsersRaw.removeNonPATLoginTokensExcept(this.userId, hashedToken))) {
+				throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
+			}
 
-				const token = me.services.resume.loginTokens.find((token) => token.hashedToken === hashedToken);
+			const me = (await UsersRaw.findOneById(this.userId, { projection: { 'services.resume.loginTokens': 1 } })) as Pick<IUser, 'services'>;
 
-				const tokenExpires = new Date(token.when.getTime() + settings.get('Accounts_LoginExpiration') * 1000);
+			const token = me.services?.resume?.loginTokens?.find((token) => token.hashedToken === hashedToken);
 
-				return API.v1.success({
-					token: this.request.headers['x-auth-token'],
-					tokenExpires,
-				});
-			} catch (error) {
-				return API.v1.failure(error);
-			}
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			const tokenExpires = new Date(token!.when.getTime() + settings.get<number>('Accounts_LoginExpiration') * 1000);
+
+			return API.v1.success({
+				token: xAuthToken,
+				tokenExpires: tokenExpires.toISOString() || '',
+			});
 		},
 	},
 );
 
 API.v1.addRoute(
 	'users.autocomplete',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUsersAutocompleteProps },
 	{
-		get() {
+		async get() {
 			const { selector } = this.queryParams;
-
-			if (!selector) {
-				return API.v1.failure("The 'selector' param is required");
-			}
-
 			return API.v1.success(
-				Promise.await(
-					findUsersToAutocomplete({
-						uid: this.userId,
-						selector: JSON.parse(selector),
-					}),
-				),
+				await findUsersToAutocomplete({
+					uid: this.userId,
+					selector: JSON.parse(selector),
+				}),
 			);
 		},
 	},
@@ -1059,7 +831,7 @@ API.v1.addRoute(
 	{ authRequired: true },
 	{
 		post() {
-			API.v1.success(Meteor.call('removeOtherTokens'));
+			return API.v1.success(Meteor.call('removeOtherTokens'));
 		},
 	},
 );
@@ -1069,30 +841,28 @@ API.v1.addRoute(
 	{ authRequired: true, twoFactorRequired: true, twoFactorOptions: { disableRememberMe: true } },
 	{
 		post() {
-			// reset own keys
-			if (this.isUserFromParams()) {
-				resetUserE2EEncriptionKey(this.userId, false);
-				return API.v1.success();
-			}
+			if ('userId' in this.bodyParams || 'username' in this.bodyParams || 'user' in this.bodyParams) {
+				// reset other user keys
+				const user = this.getUserFromParams();
+				if (!user) {
+					throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
+				}
 
-			// reset other user keys
-			const user = this.getUserFromParams();
-			if (!user) {
-				throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
-			}
+				if (!settings.get('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback')) {
+					throw new Meteor.Error('error-not-allowed', 'Not allowed');
+				}
 
-			if (!settings.get('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback')) {
-				throw new Meteor.Error('error-not-allowed', 'Not allowed');
-			}
+				if (!hasPermission(this.userId, 'edit-other-user-e2ee')) {
+					throw new Meteor.Error('error-not-allowed', 'Not allowed');
+				}
 
-			if (!hasPermission(Meteor.userId(), 'edit-other-user-e2ee')) {
-				throw new Meteor.Error('error-not-allowed', 'Not allowed');
-			}
+				if (!resetUserE2EEncriptionKey(user._id, true)) {
+					return API.v1.failure();
+				}
 
-			if (!resetUserE2EEncriptionKey(user._id, true)) {
-				return API.v1.failure();
+				return API.v1.success();
 			}
-
+			resetUserE2EEncriptionKey(this.userId, false);
 			return API.v1.success();
 		},
 	},
@@ -1102,29 +872,28 @@ API.v1.addRoute(
 	'users.resetTOTP',
 	{ authRequired: true, twoFactorRequired: true, twoFactorOptions: { disableRememberMe: true } },
 	{
-		post() {
-			// reset own keys
-			if (this.isUserFromParams()) {
-				Promise.await(resetTOTP(this.userId, false));
-				return API.v1.success();
-			}
-
-			// reset other user keys
-			const user = this.getUserFromParams();
-			if (!user) {
-				throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
-			}
+		async post() {
+			// // reset own keys
+			if ('userId' in this.bodyParams || 'username' in this.bodyParams || 'user' in this.bodyParams) {
+				// reset other user keys
+				if (!hasPermission(this.userId, 'edit-other-user-totp')) {
+					throw new Meteor.Error('error-not-allowed', 'Not allowed');
+				}
 
-			if (!settings.get('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback')) {
-				throw new Meteor.Error('error-not-allowed', 'Not allowed');
-			}
+				if (!settings.get('Accounts_TwoFactorAuthentication_Enforce_Password_Fallback')) {
+					throw new Meteor.Error('error-not-allowed', 'Not allowed');
+				}
 
-			if (!hasPermission(Meteor.userId(), 'edit-other-user-totp')) {
-				throw new Meteor.Error('error-not-allowed', 'Not allowed');
-			}
+				const user = this.getUserFromParams();
+				if (!user) {
+					throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
+				}
 
-			Promise.await(resetTOTP(user._id, true));
+				await resetTOTP(user._id, true);
 
+				return API.v1.success();
+			}
+			await resetTOTP(this.userId, false);
 			return API.v1.success();
 		},
 	},
@@ -1132,25 +901,22 @@ API.v1.addRoute(
 
 API.v1.addRoute(
 	'users.listTeams',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUsersListTeamsProps },
 	{
-		get() {
+		async get() {
 			check(
 				this.queryParams,
 				Match.ObjectIncluding({
 					userId: Match.Maybe(String),
 				}),
 			);
-			const { userId } = this.queryParams;
 
-			if (!userId) {
-				throw new Meteor.Error('error-invalid-user-id', 'Invalid user id');
-			}
+			const { userId } = this.queryParams;
 
 			// If the caller has permission to view all teams, there's no need to filter the teams
 			const adminId = hasPermission(this.userId, 'view-all-teams') ? undefined : this.userId;
 
-			const teams = Promise.await(Team.findBySubscribedUserIds(userId, adminId));
+			const teams = await Team.findBySubscribedUserIds(userId, adminId);
 
 			return API.v1.success({
 				teams,
@@ -1161,7 +927,7 @@ API.v1.addRoute(
 
 API.v1.addRoute(
 	'users.logout',
-	{ authRequired: true },
+	{ authRequired: true, validateParams: isUserLogoutParamsPOST },
 	{
 		post() {
 			const userId = this.bodyParams.userId || this.userId;
@@ -1182,7 +948,130 @@ API.v1.addRoute(
 	},
 );
 
-settings.watch('Rate_Limiter_Limit_RegisterUser', (value) => {
+API.v1.addRoute(
+	'users.getPresence',
+	{ authRequired: true },
+	{
+		get() {
+			if (this.isUserFromParams()) {
+				const user = Users.findOneById(this.userId);
+				return API.v1.success({
+					presence: user.status || 'offline',
+					connectionStatus: user.statusConnection || 'offline',
+					...(user.lastLogin && { lastLogin: user.lastLogin }),
+				});
+			}
+
+			const user = this.getUserFromParams();
+
+			return API.v1.success({
+				presence: user.status || 'offline',
+			});
+		},
+	},
+);
+
+API.v1.addRoute(
+	'users.setStatus',
+	{ authRequired: true },
+	{
+		post() {
+			check(
+				this.bodyParams,
+				Match.ObjectIncluding({
+					status: Match.Maybe(String),
+					message: Match.Maybe(String),
+				}),
+			);
+
+			if (!settings.get('Accounts_AllowUserStatusMessageChange')) {
+				throw new Meteor.Error('error-not-allowed', 'Change status is not allowed', {
+					method: 'users.setStatus',
+				});
+			}
+
+			const user = ((): IUser | undefined => {
+				if (this.isUserFromParams()) {
+					return Meteor.users.findOne(this.userId) as IUser;
+				}
+				if (hasPermission(this.userId, 'edit-other-user-info')) {
+					return this.getUserFromParams();
+				}
+			})();
+
+			if (user === undefined) {
+				return API.v1.unauthorized();
+			}
+
+			Meteor.runAsUser(user._id, () => {
+				if (this.bodyParams.message || this.bodyParams.message === '') {
+					setStatusText(user._id, this.bodyParams.message);
+				}
+				if (this.bodyParams.status) {
+					const validStatus = ['online', 'away', 'offline', 'busy'];
+					if (validStatus.includes(this.bodyParams.status)) {
+						const { status } = this.bodyParams;
+
+						if (status === 'offline' && !settings.get('Accounts_AllowInvisibleStatusOption')) {
+							throw new Meteor.Error('error-status-not-allowed', 'Invisible status is disabled', {
+								method: 'users.setStatus',
+							});
+						}
+
+						Meteor.users.update(user._id, {
+							$set: {
+								status,
+								statusDefault: status,
+							},
+						});
+
+						setUserStatus(user, status);
+					} else {
+						throw new Meteor.Error('error-invalid-status', 'Valid status types include online, away, offline, and busy.', {
+							method: 'users.setStatus',
+						});
+					}
+				}
+			});
+
+			return API.v1.success();
+		},
+	},
+);
+
+// status: 'online' | 'offline' | 'away' | 'busy';
+// message?: string;
+// _id: string;
+// connectionStatus?: 'online' | 'offline' | 'away' | 'busy';
+// };
+
+API.v1.addRoute(
+	'users.getStatus',
+	{ authRequired: true },
+	{
+		get() {
+			if (this.isUserFromParams()) {
+				const user = Users.findOneById(this.userId);
+				return API.v1.success({
+					_id: user._id,
+					// message: user.statusText,
+					connectionStatus: (user.statusConnection || 'offline') as 'online' | 'offline' | 'away' | 'busy',
+					status: (user.status || 'offline') as 'online' | 'offline' | 'away' | 'busy',
+				});
+			}
+
+			const user = this.getUserFromParams();
+
+			return API.v1.success({
+				_id: user._id,
+				// message: user.statusText,
+				status: (user.status || 'offline') as 'online' | 'offline' | 'away' | 'busy',
+			});
+		},
+	},
+);
+
+settings.watch<number>('Rate_Limiter_Limit_RegisterUser', (value) => {
 	const userRegisterRoute = '/api/v1/users.registerpost';
 
 	API.v1.updateRateLimiterDictionaryForRoute(userRegisterRoute, value);
diff --git a/apps/meteor/app/lib/server/functions/getFullUserData.js b/apps/meteor/app/lib/server/functions/getFullUserData.ts
similarity index 65%
rename from apps/meteor/app/lib/server/functions/getFullUserData.js
rename to apps/meteor/app/lib/server/functions/getFullUserData.ts
index d328f3b058324..74bf410aee9be 100644
--- a/apps/meteor/app/lib/server/functions/getFullUserData.js
+++ b/apps/meteor/app/lib/server/functions/getFullUserData.ts
@@ -1,7 +1,9 @@
-import { Logger } from '../../../logger';
+import { IUser } from '@rocket.chat/core-typings';
+
+import { Logger } from '../../../logger/server';
 import { settings } from '../../../settings/server';
 import { Users } from '../../../models/server';
-import { hasPermission } from '../../../authorization';
+import { hasPermission } from '../../../authorization/server';
 
 const logger = new Logger('getFullUserData');
 
@@ -18,7 +20,7 @@ const defaultFields = {
 	statusText: 1,
 	avatarETag: 1,
 	extension: 1,
-};
+} as const;
 
 const fullFields = {
 	emails: 1,
@@ -31,12 +33,12 @@ const fullFields = {
 	requirePasswordChange: 1,
 	requirePasswordChangeReason: 1,
 	roles: 1,
-};
+} as const;
 
-let publicCustomFields = {};
-let customFields = {};
+let publicCustomFields: Record<string, 0 | 1> = {};
+let customFields: Record<string, 0 | 1> = {};
 
-settings.watch('Accounts_CustomFields', (value) => {
+settings.watch<string>('Accounts_CustomFields', (value) => {
 	publicCustomFields = {};
 	customFields = {};
 
@@ -58,29 +60,23 @@ settings.watch('Accounts_CustomFields', (value) => {
 	}
 });
 
-const getCustomFields = (canViewAllInfo) => (canViewAllInfo ? customFields : publicCustomFields);
+const getCustomFields = (canViewAllInfo: boolean): Record<string, 0 | 1> => (canViewAllInfo ? customFields : publicCustomFields);
 
-const getFields = (canViewAllInfo) => ({
+const getFields = (canViewAllInfo: boolean): Record<string, 0 | 1> => ({
 	...defaultFields,
 	...(canViewAllInfo && fullFields),
 	...getCustomFields(canViewAllInfo),
 });
 
-const removePasswordInfo = (user) => {
-	if (user && user.services) {
-		delete user.services.password;
-		delete user.services.email;
-		delete user.services.resume;
-		delete user.services.emailCode;
-		delete user.services.cloud;
-		delete user.services.email2fa;
-		delete user.services.totp;
-	}
-
-	return user;
+const removePasswordInfo = (user: IUser): Omit<IUser, 'services'> => {
+	const { services, ...result } = user;
+	return result;
 };
 
-export function getFullUserDataByIdOrUsername({ userId, filterId, filterUsername }) {
+export async function getFullUserDataByIdOrUsername(
+	userId: string,
+	{ filterId, filterUsername }: { filterId: string; filterUsername?: undefined } | { filterId?: undefined; filterUsername: string },
+): Promise<IUser | null> {
 	const caller = Users.findOneById(userId, { fields: { username: 1 } });
 	const targetUser = filterId || filterUsername;
 	const myself = (filterId && targetUser === userId) || (filterUsername && targetUser === caller.username);
diff --git a/apps/meteor/app/lib/server/functions/setUserAvatar.ts b/apps/meteor/app/lib/server/functions/setUserAvatar.ts
index e72b847c5cee2..4718303b21caa 100644
--- a/apps/meteor/app/lib/server/functions/setUserAvatar.ts
+++ b/apps/meteor/app/lib/server/functions/setUserAvatar.ts
@@ -8,12 +8,26 @@ import { SystemLogger } from '../../../../server/lib/logger/system';
 import { api } from '../../../../server/sdk/api';
 import { fetch } from '../../../../server/lib/http/fetch';
 
-export const setUserAvatar = function (
+export function setUserAvatar(
+	user: Pick<IUser, '_id' | 'username'>,
+	dataURI: Buffer,
+	contentType: string,
+	service: 'rest',
+	etag?: string,
+): void;
+export function setUserAvatar(
 	user: Pick<IUser, '_id' | 'username'>,
 	dataURI: string,
 	contentType: string,
 	service: 'initials' | 'url' | 'rest' | string,
 	etag?: string,
+): void;
+export function setUserAvatar(
+	user: Pick<IUser, '_id' | 'username'>,
+	dataURI: string | Buffer,
+	contentType: string,
+	service: 'initials' | 'url' | 'rest' | string,
+	etag?: string,
 ): void {
 	if (service === 'initials') {
 		Users.setAvatarData(user._id, service, null);
@@ -22,7 +36,7 @@ export const setUserAvatar = function (
 
 	const { buffer, type } = Promise.await(
 		(async (): Promise<{ buffer: Buffer; type: string }> => {
-			if (service === 'url') {
+			if (service === 'url' && typeof dataURI === 'string') {
 				let response: Response;
 				try {
 					response = await fetch(dataURI);
@@ -69,7 +83,7 @@ export const setUserAvatar = function (
 
 			if (service === 'rest') {
 				return {
-					buffer: Buffer.from(dataURI, 'binary'),
+					buffer: dataURI instanceof Buffer ? dataURI : Buffer.from(dataURI, 'binary'),
 					type: contentType,
 				};
 			}
@@ -103,4 +117,4 @@ export const setUserAvatar = function (
 			avatarETag,
 		});
 	}, 500);
-};
+}
diff --git a/apps/meteor/client/lib/presence.ts b/apps/meteor/client/lib/presence.ts
index 5c81820e7e4e2..4a14c1478b283 100644
--- a/apps/meteor/client/lib/presence.ts
+++ b/apps/meteor/client/lib/presence.ts
@@ -27,11 +27,6 @@ export type UserPresence = Readonly<
 	Partial<Pick<IUser, 'name' | 'status' | 'utcOffset' | 'statusText' | 'avatarETag' | 'roles' | 'username'>> & Required<Pick<IUser, '_id'>>
 >;
 
-type UsersPresencePayload = {
-	users: UserPresence[];
-	full: boolean;
-};
-
 const isUid = (eventType: keyof Events): eventType is UserPresence['_id'] =>
 	Boolean(eventType) && typeof eventType === 'string' && !['reset', 'restart', 'remove'].includes(eventType);
 
@@ -51,15 +46,6 @@ const notify = (presence: UserPresence): void => {
 	}
 };
 
-declare module '@rocket.chat/rest-typings' {
-	// eslint-disable-next-line @typescript-eslint/interface-name-prefix
-	export interface Endpoints {
-		'/v1/users.presence': {
-			GET: (params: { ids: string[] }) => UsersPresencePayload;
-		};
-	}
-}
-
 const getPresence = ((): ((uid: UserPresence['_id']) => void) => {
 	let timer: ReturnType<typeof setTimeout>;
 
diff --git a/apps/meteor/server/sdk/types/ITeamService.ts b/apps/meteor/server/sdk/types/ITeamService.ts
index 1564ae5c6cdd0..607413f82889e 100644
--- a/apps/meteor/server/sdk/types/ITeamService.ts
+++ b/apps/meteor/server/sdk/types/ITeamService.ts
@@ -112,4 +112,5 @@ export interface ITeamService {
 	removeAllMembersFromTeam(teamId: string): Promise<void>;
 	removeRolesFromMember(teamId: string, userId: string, roles: Array<IRole['_id']>): Promise<boolean>;
 	getStatistics(): Promise<ITeamStats>;
+	findBySubscribedUserIds(userId: string, callerId?: string): Promise<ITeam[]>;
 }
diff --git a/apps/meteor/tests/end-to-end/api/01-users.js b/apps/meteor/tests/end-to-end/api/01-users.js
index 6efd6989c9693..77949612333b1 100644
--- a/apps/meteor/tests/end-to-end/api/01-users.js
+++ b/apps/meteor/tests/end-to-end/api/01-users.js
@@ -328,6 +328,7 @@ describe('[Users]', function () {
 					email,
 					name: 'name',
 					username,
+					pass: 'test',
 				})
 				.expect('Content-Type', 'application/json')
 				.expect(400)
@@ -3117,7 +3118,6 @@ describe('[Users]', function () {
 					.expect(400)
 					.expect((res) => {
 						expect(res.body).to.have.property('success', false);
-						expect(res.body.error).to.be.equal("The 'selector' param is required");
 					})
 					.end(done);
 			});
diff --git a/packages/core-typings/src/IUser.ts b/packages/core-typings/src/IUser.ts
index 0dde24a2d7ba9..15cb0d6bf9ee9 100644
--- a/packages/core-typings/src/IUser.ts
+++ b/packages/core-typings/src/IUser.ts
@@ -54,6 +54,7 @@ export interface IUserServices {
 	resume?: {
 		loginTokens?: LoginToken[];
 	};
+	cloud?: unknown;
 	google?: any;
 	facebook?: any;
 	github?: any;
diff --git a/packages/rest-typings/src/index.ts b/packages/rest-typings/src/index.ts
index e50250dbb060d..8ee8f93a7c502 100644
--- a/packages/rest-typings/src/index.ts
+++ b/packages/rest-typings/src/index.ts
@@ -176,3 +176,9 @@ export * from './helpers/PaginatedRequest';
 export * from './helpers/PaginatedResult';
 export * from './helpers/ReplacePlaceholders';
 export * from './v1/emojiCustom';
+
+export * from './v1/users';
+export * from './v1/users/UsersSetAvatarParamsPOST';
+export * from './v1/users/UsersSetPreferenceParamsPOST';
+export * from './v1/users/UsersUpdateOwnBasicInfoParamsPOST';
+export * from './v1/users/UsersUpdateParamsPOST';
diff --git a/packages/rest-typings/src/v1/users.ts b/packages/rest-typings/src/v1/users.ts
index 9d9413034dde5..3a49e8c38ceba 100644
--- a/packages/rest-typings/src/v1/users.ts
+++ b/packages/rest-typings/src/v1/users.ts
@@ -1,6 +1,14 @@
-import type { ITeam, IUser } from '@rocket.chat/core-typings';
+import type { IExportOperation, ISubscription, ITeam, IUser } from '@rocket.chat/core-typings';
 import Ajv from 'ajv';
 
+import type { UserCreateParamsPOST } from './users/UserCreateParamsPOST';
+import type { UserDeactivateIdleParamsPOST } from './users/UserDeactivateIdleParamsPOST';
+import type { UserLogoutParamsPOST } from './users/UserLogoutParamsPOST';
+import type { UserRegisterParamsPOST } from './users/UserRegisterParamsPOST';
+import type { UsersAutocompleteParamsGET } from './users/UsersAutocompleteParamsGET';
+import type { UserSetActiveStatusParamsPOST } from './users/UserSetActiveStatusParamsPOST';
+import type { UsersInfoParamsGet } from './users/UsersInfoParamsGet';
+import type { UsersListTeamsParamsGET } from './users/UsersListTeamsParamsGET';
 import type { PaginatedRequest } from '../helpers/PaginatedRequest';
 import type { PaginatedResult } from '../helpers/PaginatedResult';
 
@@ -43,36 +51,6 @@ const Users2faSendEmailCodeSchema = {
 
 export const isUsers2faSendEmailCodeProps = ajv.compile<Users2faSendEmailCode>(Users2faSendEmailCodeSchema);
 
-type UsersAutocomplete = { selector: string };
-
-const UsersAutocompleteSchema = {
-	type: 'object',
-	properties: {
-		selector: {
-			type: 'string',
-		},
-	},
-	required: ['selector'],
-	additionalProperties: false,
-};
-
-export const isUsersAutocompleteProps = ajv.compile<UsersAutocomplete>(UsersAutocompleteSchema);
-
-type UsersListTeams = { userId: IUser['_id'] };
-
-const UsersListTeamsSchema = {
-	type: 'object',
-	properties: {
-		userId: {
-			type: 'string',
-		},
-	},
-	required: ['userId'],
-	additionalProperties: false,
-};
-
-export const isUsersListTeamsProps = ajv.compile<UsersListTeams>(UsersListTeamsSchema);
-
 type UsersSetAvatar = { userId?: IUser['_id']; username?: IUser['username']; avatarUrl?: string };
 
 const UsersSetAvatarSchema = {
@@ -127,31 +105,208 @@ export type UserPresence = Readonly<
 >;
 
 export type UsersEndpoints = {
-	'/v1/users.info': {
-		GET: (params: UsersInfo) => {
-			user: IUser;
-		};
+	'/v1/users.2fa.enableEmail': {
+		POST: () => void;
+	};
+
+	'/v1/users.2fa.disableEmail': {
+		POST: () => void;
 	};
+
 	'/v1/users.2fa.sendEmailCode': {
 		POST: (params: Users2faSendEmailCode) => void;
 	};
+
+	'/v1/users.listTeams': {
+		GET: (params: UsersListTeamsParamsGET) => { teams: ITeam[] };
+	};
 	'/v1/users.autocomplete': {
-		GET: (params: UsersAutocomplete) => {
+		GET: (params: UsersAutocompleteParamsGET) => {
 			items: Required<Pick<IUser, '_id' | 'name' | 'username' | 'nickname' | 'status' | 'avatarETag'>>[];
 		};
 	};
+
 	'/v1/users.list': {
 		GET: (params: PaginatedRequest<{ query: string }>) => PaginatedResult<{
 			users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[];
 		}>;
 	};
-	'/v1/users.listTeams': {
-		GET: (params: UsersListTeams) => { teams: Array<ITeam> };
-	};
+
 	'/v1/users.setAvatar': {
 		POST: (params: UsersSetAvatar) => void;
 	};
 	'/v1/users.resetAvatar': {
 		POST: (params: UsersResetAvatar) => void;
 	};
+
+	'/v1/users.requestDataDownload': {
+		GET: (params: { fullExport?: 'true' | 'false' }) => {
+			requested: boolean;
+			exportOperation: IExportOperation;
+		};
+	};
+	'/v1/users.logoutOtherClients': {
+		POST: () => {
+			token: string;
+			tokenExpires: string;
+		};
+	};
+	'/v1/users.removeOtherTokens': {
+		POST: () => void;
+	};
+	'/v1/users.resetE2EKey': {
+		POST: (
+			params:
+				| {
+						userId: string;
+				  }
+				| {
+						username: string;
+				  }
+				| {
+						user: string;
+				  },
+		) => void;
+	};
+	'/v1/users.resetTOTP': {
+		POST: (
+			params:
+				| {
+						userId: string;
+				  }
+				| {
+						username: string;
+				  }
+				| {
+						user: string;
+				  },
+		) => void;
+	};
+
+	'/v1/users.presence': {
+		GET: (params: { from?: string; ids: string | string[] }) => UsersPresencePayload;
+	};
+
+	'/v1/users.removePersonalAccessToken': {
+		POST: (params: { tokenName: string }) => void;
+	};
+
+	'/v1/users.getPersonalAccessTokens': {
+		GET: () => {
+			tokens: {
+				name?: string;
+				createdAt: string;
+				lastTokenPart: string;
+				bypassTwoFactor: boolean;
+			}[];
+		};
+	};
+	'/v1/users.regeneratePersonalAccessToken': {
+		POST: (params: { tokenName: string }) => {
+			token: string;
+		};
+	};
+	'/v1/users.generatePersonalAccessToken': {
+		POST: (params: { tokenName: string; bypassTwoFactor: boolean }) => {
+			token: string;
+		};
+	};
+	'/v1/users.getUsernameSuggestion': {
+		GET: () => {
+			result: string;
+		};
+	};
+	'/v1/users.forgotPassword': {
+		POST: (params: { email: string }) => void;
+	};
+	'/v1/users.getPreferences': {
+		GET: () => {
+			preferences: Required<IUser>['settings']['preferences'];
+		};
+	};
+	'/v1/users.createToken': {
+		POST: () => {
+			data: {
+				userId: string;
+				authToken: string;
+			};
+		};
+	};
+
+	'/v1/users.create': {
+		POST: (params: UserCreateParamsPOST) => {
+			user: IUser;
+		};
+	};
+
+	'/v1/users.setActiveStatus': {
+		POST: (params: UserSetActiveStatusParamsPOST) => {
+			user: IUser;
+		};
+	};
+
+	'/v1/users.deactivateIdle': {
+		POST: (params: UserDeactivateIdleParamsPOST) => {
+			count: number;
+		};
+	};
+
+	'/v1/users.getPresence': {
+		GET: (
+			params:
+				| {
+						userId: string;
+				  }
+				| {
+						username: string;
+				  }
+				| {
+						user: string;
+				  },
+		) => {
+			presence: 'online' | 'offline' | 'away' | 'busy';
+			connectionStatus?: 'online' | 'offline' | 'away' | 'busy';
+			lastLogin?: string;
+		};
+	};
+
+	'/v1/users.setStatus': {
+		POST: (params: { message?: string; status?: 'online' | 'offline' | 'away' | 'busy' }) => void;
+	};
+
+	'/v1/users.getStatus': {
+		GET: () => {
+			status: 'online' | 'offline' | 'away' | 'busy';
+			message?: string;
+			_id: string;
+			connectionStatus?: 'online' | 'offline' | 'away' | 'busy';
+		};
+	};
+
+	'/v1/users.info': {
+		GET: (params: UsersInfoParamsGet) => {
+			user: IUser & { rooms?: Pick<ISubscription, 'rid' | 'name' | 't' | 'roles' | 'unread'>[] };
+		};
+	};
+
+	'/v1/users.register': {
+		POST: (params: UserRegisterParamsPOST) => {
+			user: Partial<IUser>;
+		};
+	};
+
+	'/v1/users.logout': {
+		POST: (params: UserLogoutParamsPOST) => {
+			message: string;
+		};
+	};
 };
+
+export * from './users/UserCreateParamsPOST';
+export * from './users/UserSetActiveStatusParamsPOST';
+export * from './users/UserDeactivateIdleParamsPOST';
+export * from './users/UsersInfoParamsGet';
+export * from './users/UserRegisterParamsPOST';
+export * from './users/UserLogoutParamsPOST';
+export * from './users/UsersListTeamsParamsGET';
+export * from './users/UsersAutocompleteParamsGET';
diff --git a/packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts b/packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts
new file mode 100644
index 0000000000000..3474989990117
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts
@@ -0,0 +1,51 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserCreateParamsPOST = {
+	email: string;
+	name: string;
+	password: string;
+	username: string;
+	active?: boolean;
+	bio?: string;
+	nickname?: string;
+	statusText?: string;
+	roles?: string[];
+	joinDefaultChannels?: boolean;
+	requirePasswordChange?: boolean;
+	setRandomPassword?: boolean;
+	sendWelcomeEmail?: boolean;
+	verified?: boolean;
+	customFields?: object;
+	/* @deprecated */
+	fields: string;
+};
+
+const userCreateParamsPostSchema = {
+	type: 'object',
+	properties: {
+		email: { type: 'string' },
+		name: { type: 'string' },
+		password: { type: 'string' },
+		username: { type: 'string' },
+		active: { type: 'boolean', nullable: true },
+		bio: { type: 'string', nullable: true },
+		nickname: { type: 'string', nullable: true },
+		statusText: { type: 'string', nullable: true },
+		roles: { type: 'array', items: { type: 'string' } },
+		joinDefaultChannels: { type: 'boolean', nullable: true },
+		requirePasswordChange: { type: 'boolean', nullable: true },
+		setRandomPassword: { type: 'boolean', nullable: true },
+		sendWelcomeEmail: { type: 'boolean', nullable: true },
+		verified: { type: 'boolean', nullable: true },
+		customFields: { type: 'object' },
+		fields: { type: 'string', nullable: true },
+	},
+	additionalProperties: false,
+	required: ['email', 'name', 'password', 'username'],
+};
+
+export const isUserCreateParamsPOST = ajv.compile<UserCreateParamsPOST>(userCreateParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UserDeactivateIdleParamsPOST.ts b/packages/rest-typings/src/v1/users/UserDeactivateIdleParamsPOST.ts
new file mode 100644
index 0000000000000..0b7fb03ed5d1c
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UserDeactivateIdleParamsPOST.ts
@@ -0,0 +1,26 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserDeactivateIdleParamsPOST = {
+	daysIdle: number;
+	role?: string;
+};
+
+const userDeactivateIdleSchema = {
+	type: 'object',
+	properties: {
+		daysIdle: {
+			type: 'number',
+		},
+		role: {
+			type: 'string',
+		},
+	},
+	required: ['daysIdle'],
+	additionalProperties: false,
+};
+
+export const isUserDeactivateIdleParamsPOST = ajv.compile<UserDeactivateIdleParamsPOST>(userDeactivateIdleSchema);
diff --git a/packages/rest-typings/src/v1/users/UserLogoutParamsPOST.ts b/packages/rest-typings/src/v1/users/UserLogoutParamsPOST.ts
new file mode 100644
index 0000000000000..cd51b37495d65
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UserLogoutParamsPOST.ts
@@ -0,0 +1,22 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserLogoutParamsPOST = {
+	userId?: string;
+};
+
+const UserLogoutParamsPostSchema = {
+	type: 'object',
+	properties: {
+		userId: {
+			type: 'string',
+			nullable: true,
+		},
+	},
+	required: [],
+};
+
+export const isUserLogoutParamsPOST = ajv.compile<UserLogoutParamsPOST>(UserLogoutParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UserRegisterParamsPOST.ts b/packages/rest-typings/src/v1/users/UserRegisterParamsPOST.ts
new file mode 100644
index 0000000000000..0551e7839206b
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UserRegisterParamsPOST.ts
@@ -0,0 +1,47 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserRegisterParamsPOST = {
+	username: string;
+	name?: string;
+	email: string;
+	pass: string;
+	secret?: string;
+	reason?: string;
+};
+
+const UserRegisterParamsPostSchema = {
+	type: 'object',
+	properties: {
+		username: {
+			type: 'string',
+			minLength: 3,
+		},
+
+		name: {
+			type: 'string',
+			nullable: true,
+		},
+		email: {
+			type: 'string',
+		},
+		pass: {
+			type: 'string',
+		},
+		secret: {
+			type: 'string',
+			nullable: true,
+		},
+		reason: {
+			type: 'string',
+			nullable: true,
+		},
+	},
+	required: ['username', 'email', 'pass'],
+	additionalProperties: false,
+};
+
+export const isUserRegisterParamsPOST = ajv.compile<UserRegisterParamsPOST>(UserRegisterParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UserSetActiveStatusParamsPOST.ts b/packages/rest-typings/src/v1/users/UserSetActiveStatusParamsPOST.ts
new file mode 100644
index 0000000000000..ad503f5d29848
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UserSetActiveStatusParamsPOST.ts
@@ -0,0 +1,24 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserSetActiveStatusParamsPOST = {
+	userId: string;
+	activeStatus: boolean;
+	confirmRelinquish?: boolean;
+};
+
+const UserCreateParamsPostSchema = {
+	type: 'object',
+	properties: {
+		userId: { type: 'string' },
+		activeStatus: { type: 'boolean' },
+		confirmRelinquish: { type: 'boolean', nullable: true },
+	},
+	required: ['userId', 'activeStatus'],
+	additionalProperties: false,
+};
+
+export const isUserSetActiveStatusParamsPOST = ajv.compile<UserSetActiveStatusParamsPOST>(UserCreateParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersAutocompleteParamsGET.ts b/packages/rest-typings/src/v1/users/UsersAutocompleteParamsGET.ts
new file mode 100644
index 0000000000000..bdb6578db24d9
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersAutocompleteParamsGET.ts
@@ -0,0 +1,20 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersAutocompleteParamsGET = { selector: string };
+
+const UsersAutocompleteParamsGetSchema = {
+	type: 'object',
+	properties: {
+		selector: {
+			type: 'string',
+		},
+	},
+	required: ['selector'],
+	additionalProperties: false,
+};
+
+export const isUsersAutocompleteProps = ajv.compile<UsersAutocompleteParamsGET>(UsersAutocompleteParamsGetSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersInfoParamsGet.ts b/packages/rest-typings/src/v1/users/UsersInfoParamsGet.ts
new file mode 100644
index 0000000000000..ddae73750ea86
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersInfoParamsGet.ts
@@ -0,0 +1,44 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersInfoParamsGet = ({ userId: string } | { username: string }) & {
+	fields?: string;
+};
+
+const UsersInfoParamsGetSchema = {
+	anyOf: [
+		{
+			type: 'object',
+			properties: {
+				userId: {
+					type: 'string',
+				},
+				fields: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['userId'],
+			additionalProperties: false,
+		},
+		{
+			type: 'object',
+			properties: {
+				username: {
+					type: 'string',
+				},
+				fields: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: ['username'],
+			additionalProperties: false,
+		},
+	],
+};
+
+export const isUsersInfoParamsGetProps = ajv.compile<UsersInfoParamsGet>(UsersInfoParamsGetSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersListTeamsParamsGET.ts b/packages/rest-typings/src/v1/users/UsersListTeamsParamsGET.ts
new file mode 100644
index 0000000000000..336fd6b3144a3
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersListTeamsParamsGET.ts
@@ -0,0 +1,21 @@
+import Ajv from 'ajv';
+import type { IUser } from '@rocket.chat/core-typings';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersListTeamsParamsGET = { userId: IUser['_id'] };
+
+const UsersListTeamsParamsGetSchema = {
+	type: 'object',
+	properties: {
+		userId: {
+			type: 'string',
+		},
+	},
+	required: ['userId'],
+	additionalProperties: false,
+};
+
+export const isUsersListTeamsProps = ajv.compile<UsersListTeamsParamsGET>(UsersListTeamsParamsGetSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersSetAvatarParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersSetAvatarParamsPOST.ts
new file mode 100644
index 0000000000000..9a43dc7b07f35
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersSetAvatarParamsPOST.ts
@@ -0,0 +1,33 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UserSetAvatarParamsPOST = {
+	avatarUrl?: string;
+	userId?: string;
+	username?: string;
+};
+
+const UserSetAvatarParamsPostSchema = {
+	type: 'object',
+	properties: {
+		avatarUrl: {
+			type: 'string',
+			nullable: true,
+		},
+		userId: {
+			type: 'string',
+			nullable: true,
+		},
+		username: {
+			type: 'string',
+			nullable: true,
+		},
+	},
+	required: [],
+	additionalProperties: false,
+};
+
+export const isUserSetAvatarParamsPOST = ajv.compile<UserSetAvatarParamsPOST>(UserSetAvatarParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
new file mode 100644
index 0000000000000..5379276b4dee6
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
@@ -0,0 +1,190 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersSetPreferencesParamsPOST = {
+	userId?: string;
+	data: {
+		newRoomNotification?: string;
+		newMessageNotification?: string;
+		clockMode?: number;
+		useEmojis?: boolean;
+		convertAsciiEmoji?: boolean;
+		saveMobileBandwidth?: boolean;
+		collapseMediaByDefault?: boolean;
+		autoImageLoad?: boolean;
+		emailNotificationMode?: string;
+		unreadAlert?: boolean;
+		notificationsSoundVolume?: number;
+		desktopNotifications?: string;
+		pushNotifications?: string;
+		enableAutoAway?: boolean;
+		highlights?: string[];
+		desktopNotificationRequireInteraction?: boolean;
+		messageViewMode?: number;
+		showMessageInMainThread?: boolean;
+		hideUsernames?: boolean;
+		hideRoles?: boolean;
+		displayAvatars?: boolean;
+		hideFlexTab?: boolean;
+		sendOnEnter?: string;
+		language?: string;
+		sidebarShowFavorites?: boolean;
+		sidebarShowUnread?: boolean;
+		sidebarSortby?: string;
+		sidebarViewMode?: string;
+		sidebarDisplayAvatar?: boolean;
+		sidebarGroupByType?: boolean;
+		muteFocusedConversations?: boolean;
+	};
+};
+
+const UsersSetPreferencesParamsPostSchema = {
+	type: 'object',
+	properties: {
+		userId: {
+			type: 'string',
+			nullable: true,
+		},
+		data: {
+			type: 'object',
+			properties: {
+				newRoomNotification: {
+					type: 'string',
+					nullable: true,
+				},
+				newMessageNotification: {
+					type: 'string',
+					nullable: true,
+				},
+				clockMode: {
+					type: 'number',
+					nullable: true,
+				},
+				useEmojis: {
+					type: 'boolean',
+					nullable: true,
+				},
+				convertAsciiEmoji: {
+					type: 'boolean',
+					nullable: true,
+				},
+				saveMobileBandwidth: {
+					type: 'boolean',
+					nullable: true,
+				},
+				collapseMediaByDefault: {
+					type: 'boolean',
+					nullable: true,
+				},
+				autoImageLoad: {
+					type: 'boolean',
+					nullable: true,
+				},
+				emailNotificationMode: {
+					type: 'string',
+					nullable: true,
+				},
+				unreadAlert: {
+					type: 'boolean',
+					nullable: true,
+				},
+				notificationsSoundVolume: {
+					type: 'number',
+					nullable: true,
+				},
+				desktopNotifications: {
+					type: 'string',
+					nullable: true,
+				},
+				pushNotifications: {
+					type: 'string',
+					nullable: true,
+				},
+				enableAutoAway: {
+					type: 'boolean',
+					nullable: true,
+				},
+				highlights: {
+					type: 'array',
+					items: {
+						type: 'string',
+					},
+					nullable: true,
+				},
+				desktopNotificationRequireInteraction: {
+					type: 'boolean',
+					nullable: true,
+				},
+				messageViewMode: {
+					type: 'number',
+					nullable: true,
+				},
+				showMessageInMainThread: {
+					type: 'boolean',
+					nullable: true,
+				},
+				hideUsernames: {
+					type: 'boolean',
+					nullable: true,
+				},
+				hideRoles: {
+					type: 'boolean',
+					nullable: true,
+				},
+				displayAvatars: {
+					type: 'boolean',
+					nullable: true,
+				},
+				hideFlexTab: {
+					type: 'boolean',
+					nullable: true,
+				},
+				sendOnEnter: {
+					type: 'string',
+					nullable: true,
+				},
+				language: {
+					type: 'string',
+					nullable: true,
+				},
+				sidebarShowFavorites: {
+					type: 'boolean',
+					nullable: true,
+				},
+				sidebarShowUnread: {
+					type: 'boolean',
+					nullable: true,
+				},
+				sidebarSortby: {
+					type: 'string',
+					nullable: true,
+				},
+				sidebarViewMode: {
+					type: 'string',
+					nullable: true,
+				},
+				sidebarDisplayAvatar: {
+					type: 'boolean',
+					nullable: true,
+				},
+				sidebarGroupByType: {
+					type: 'boolean',
+					nullable: true,
+				},
+				muteFocusedConversations: {
+					type: 'boolean',
+					nullable: true,
+				},
+			},
+			required: [],
+			additionalProperties: false,
+		},
+	},
+	required: ['data'],
+	additionalProperties: false,
+};
+
+export const isUsersSetPreferencesParamsPOST = ajv.compile<UsersSetPreferencesParamsPOST>(UsersSetPreferencesParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersUpdateOwnBasicInfoParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersUpdateOwnBasicInfoParamsPOST.ts
new file mode 100644
index 0000000000000..90f80dedc1303
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersUpdateOwnBasicInfoParamsPOST.ts
@@ -0,0 +1,67 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersUpdateOwnBasicInfoParamsPOST = {
+	data: {
+		email?: string;
+		name?: string;
+		username?: string;
+		nickname?: string;
+		statusText?: string;
+		currentPassword?: string;
+		newPassword?: string;
+	};
+	customFields?: {};
+};
+
+const UsersUpdateOwnBasicInfoParamsPostSchema = {
+	type: 'object',
+	properties: {
+		data: {
+			type: 'object',
+			properties: {
+				email: {
+					type: 'string',
+					nullable: true,
+				},
+				name: {
+					type: 'string',
+					nullable: true,
+				},
+				username: {
+					type: 'string',
+					nullable: true,
+				},
+				nickname: {
+					type: 'string',
+					nullable: true,
+				},
+				statusText: {
+					type: 'string',
+					nullable: true,
+				},
+				currentPassword: {
+					type: 'string',
+					nullable: true,
+				},
+				newPassword: {
+					type: 'string',
+					nullable: true,
+				},
+			},
+			required: [],
+			additionalProperties: false,
+		},
+		customFields: {
+			type: 'object',
+			nullable: true,
+		},
+	},
+	required: ['data'],
+	additionalProperties: false,
+};
+
+export const isUsersUpdateOwnBasicInfoParamsPOST = ajv.compile<UsersUpdateOwnBasicInfoParamsPOST>(UsersUpdateOwnBasicInfoParamsPostSchema);
diff --git a/packages/rest-typings/src/v1/users/UsersUpdateParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersUpdateParamsPOST.ts
new file mode 100644
index 0000000000000..3d0d6c07b5bec
--- /dev/null
+++ b/packages/rest-typings/src/v1/users/UsersUpdateParamsPOST.ts
@@ -0,0 +1,108 @@
+import Ajv from 'ajv';
+
+const ajv = new Ajv({
+	coerceTypes: true,
+});
+
+export type UsersUpdateParamsPOST = {
+	userId: string;
+	data: {
+		email?: string;
+		name?: string;
+		password?: string;
+		username?: string;
+		bio?: string;
+		nickname?: string;
+		statusText?: string;
+		active?: boolean;
+		roles?: string[];
+		joinDefaultChannels?: boolean;
+		requirePasswordChange?: boolean;
+		sendWelcomeEmail?: boolean;
+		verified?: boolean;
+		customFields?: {};
+	};
+	confirmRelinquish?: boolean;
+};
+
+const UsersUpdateParamsPostSchema = {
+	type: 'object',
+	properties: {
+		userId: {
+			type: 'string',
+		},
+		confirmRelinquish: {
+			type: 'boolean',
+		},
+		data: {
+			type: 'object',
+			properties: {
+				email: {
+					type: 'string',
+					nullable: true,
+				},
+				name: {
+					type: 'string',
+					nullable: true,
+				},
+				password: {
+					type: 'string',
+					nullable: true,
+				},
+				username: {
+					type: 'string',
+					nullable: true,
+				},
+				bio: {
+					type: 'string',
+					nullable: true,
+				},
+				nickname: {
+					type: 'string',
+					nullable: true,
+				},
+				statusText: {
+					type: 'string',
+					nullable: true,
+				},
+				active: {
+					type: 'boolean',
+					nullable: true,
+				},
+				roles: {
+					type: 'array',
+					items: {
+						type: 'string',
+					},
+					nullable: true,
+				},
+				joinDefaultChannels: {
+					type: 'boolean',
+					nullable: true,
+				},
+				requirePasswordChange: {
+					type: 'boolean',
+					nullable: true,
+				},
+				sendWelcomeEmail: {
+					type: 'boolean',
+					nullable: true,
+				},
+				verified: {
+					type: 'boolean',
+					nullable: true,
+				},
+				customFields: {
+					type: 'object',
+					nullable: true,
+				},
+			},
+			required: [],
+			additionalProperties: false,
+		},
+	},
+	required: ['userId', 'data'],
+	additionalProperties: false,
+};
+
+export const isUsersUpdateParamsPOST = ajv.compile<UsersUpdateParamsPOST>(UsersUpdateParamsPostSchema);