From 83d06d09e481446c78722b45afb52a123477fe78 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Mon, 21 Jun 2021 19:37:31 -0300
Subject: [PATCH] [FIX] Rewrite CurrentChats to TS (#22424)

---
 .github/workflows/build_and_test.yml          |  6 +-
 client/components/AutoCompleteAgent.js        | 63 ++++++++++-------
 client/components/AutoCompleteDepartment.js   | 10 ++-
 client/components/GenericTable/HeaderCell.tsx |  4 +-
 .../Omnichannel/hooks/useAgentsList.ts        | 70 +++++++++++++++++++
 .../Omnichannel/hooks/useDepartmentsList.ts   | 47 +++++++++----
 .../Omnichannel/modals/ForwardChatModal.js    |  1 +
 client/components/Page/PageContent.tsx        |  7 +-
 client/contexts/ServerContext/endpoints.ts    |  6 ++
 .../endpoints/v1/livechat/customFields.ts     | 10 +++
 .../endpoints/v1/livechat/rooms.ts            | 15 ++++
 .../endpoints/v1/livechat/usersAgent.ts       | 27 +++++++
 .../omnichannel/analytics/AnalyticsPage.js    |  2 +-
 .../currentChats/CurrentChatsPage.js          | 32 ---------
 .../currentChats/CurrentChatsPage.tsx         | 35 ++++++++++
 ...entChatsRoute.js => CurrentChatsRoute.tsx} | 61 +++++++++++-----
 .../{FilterByText.js => FilterByText.tsx}     | 55 +++++++++------
 .../views/omnichannel/currentChats/Label.js   |  6 --
 .../views/omnichannel/currentChats/Label.tsx  |  8 +++
 ...RemoveAllClosed.js => RemoveAllClosed.tsx} |  7 +-
 ...moveChatButton.js => RemoveChatButton.tsx} | 12 ++--
 .../RealTimeMonitoringPage.js                 | 43 ++++++------
 definition/ILivechatAgentRecord.ts            | 17 +++++
 .../additionalForms/DepartmentForwarding.js   |  1 +
 package-lock.json                             |  6 +-
 package.json                                  |  2 +-
 packages/rocketchat-i18n/i18n/en.i18n.json    |  2 +
 27 files changed, 393 insertions(+), 162 deletions(-)
 create mode 100644 client/components/Omnichannel/hooks/useAgentsList.ts
 create mode 100644 client/contexts/ServerContext/endpoints/v1/livechat/customFields.ts
 create mode 100644 client/contexts/ServerContext/endpoints/v1/livechat/rooms.ts
 create mode 100644 client/contexts/ServerContext/endpoints/v1/livechat/usersAgent.ts
 delete mode 100644 client/views/omnichannel/currentChats/CurrentChatsPage.js
 create mode 100644 client/views/omnichannel/currentChats/CurrentChatsPage.tsx
 rename client/views/omnichannel/currentChats/{CurrentChatsRoute.js => CurrentChatsRoute.tsx} (83%)
 rename client/views/omnichannel/currentChats/{FilterByText.js => FilterByText.tsx} (80%)
 delete mode 100644 client/views/omnichannel/currentChats/Label.js
 create mode 100644 client/views/omnichannel/currentChats/Label.tsx
 rename client/views/omnichannel/currentChats/{RemoveAllClosed.js => RemoveAllClosed.tsx} (83%)
 rename client/views/omnichannel/currentChats/{RemoveChatButton.js => RemoveChatButton.tsx} (85%)
 create mode 100644 definition/ILivechatAgentRecord.ts

diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml
index 768d755455f78..8579f0ffd353c 100644
--- a/.github/workflows/build_and_test.yml
+++ b/.github/workflows/build_and_test.yml
@@ -64,7 +64,7 @@ jobs:
         path: |
           ./node_modules
           ./ee/server/services/node_modules
-        key: ${{ runner.OS }}-node_modules-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
+        key: ${{ runner.OS }}-node_modules-2-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
 
     - name: Cache meteor local
       uses: actions/cache@v2
@@ -246,7 +246,7 @@ jobs:
         path: |
           ./node_modules
           ./ee/server/services/node_modules
-        key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
+        key: ${{ runner.OS }}-node_modules-2-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
 
     - name: NPM install
       if: steps.cache-nodemodules.outputs.cache-hit != 'true' || steps.cache-cypress.outputs.cache-hit != 'true'
@@ -310,7 +310,7 @@ jobs:
         path: |
           ./node_modules
           ./ee/server/services/node_modules
-        key: ${{ runner.OS }}-node_modules-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
+        key: ${{ runner.OS }}-node_modules-2-${{ hashFiles('**/package-lock.json', '.github/workflows/build_and_test.yml') }}
 
     - name: Cache meteor local
       uses: actions/cache@v2
diff --git a/client/components/AutoCompleteAgent.js b/client/components/AutoCompleteAgent.js
index 4c521fe652b28..7e45c9b1f0428 100644
--- a/client/components/AutoCompleteAgent.js
+++ b/client/components/AutoCompleteAgent.js
@@ -1,38 +1,51 @@
-import { AutoComplete, Option } from '@rocket.chat/fuselage';
+import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { memo, useMemo, useState } from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
-import { useEndpointData } from '../hooks/useEndpointData';
+import { useRecordList } from '../hooks/lists/useRecordList';
+import { AsyncStatePhase } from '../lib/asyncState';
+import { useAgentsList } from './Omnichannel/hooks/useAgentsList';
 
 const AutoCompleteAgent = (props) => {
-	const t = useTranslation();
-	const [filter, setFilter] = useState('');
-	const { value: data } = useEndpointData(
-		'livechat/users/agent',
-		useMemo(() => ({ text: filter }), [filter]),
-	);
+	const [agentsFilter, setAgentsFilter] = useState('');
+
+	const debouncedAgentsFilter = useDebouncedValue(agentsFilter, 500);
 
-	const options = useMemo(
-		() => (data && [...data.users.map((user) => ({ value: user._id, label: user.name }))]) || [],
-		[data],
+	const { itemsList: AgentsList, loadMoreItems: loadMoreAgents } = useAgentsList(
+		useMemo(() => ({ text: debouncedAgentsFilter }), [debouncedAgentsFilter]),
 	);
-	const optionsWithAll = useMemo(
-		() =>
-			(data && [
-				{ value: 'all', label: t('All') },
-				...data.users.map((user) => ({ value: user._id, label: user.name })),
-			]) || [{ value: 'all', label: t('All') }],
-		[data, t],
+
+	const { phase: agentsPhase, items: agentsItems, itemCount: agentsTotal } = useRecordList(
+		AgentsList,
 	);
 
+	const sortedByName = agentsItems.sort((a, b) => {
+		if (a.value === 'all') {
+			return -1;
+		}
+
+		if (a.usename > b.usename) {
+			return 1;
+		}
+		if (a.usename < b.usename) {
+			return -1;
+		}
+
+		return 0;
+	});
+
 	return (
-		<AutoComplete
+		<PaginatedSelectFiltered
 			{...props}
-			filter={filter}
-			setFilter={setFilter}
-			renderSelected={({ label }) => <>{label}</>}
-			renderItem={({ value, ...props }) => <Option key={value} {...props} />}
-			options={props.empty ? options : optionsWithAll}
+			flexShrink={0}
+			filter={agentsFilter}
+			setFilter={setAgentsFilter}
+			options={sortedByName}
+			endReached={
+				agentsPhase === AsyncStatePhase.LOADING
+					? () => {}
+					: (start) => loadMoreAgents(start, Math.min(50, agentsTotal))
+			}
 		/>
 	);
 };
diff --git a/client/components/AutoCompleteDepartment.js b/client/components/AutoCompleteDepartment.js
index ceac520b9db53..1e970f34abbad 100644
--- a/client/components/AutoCompleteDepartment.js
+++ b/client/components/AutoCompleteDepartment.js
@@ -8,7 +8,7 @@ import { AsyncStatePhase } from '../hooks/useAsyncState';
 import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList';
 
 const AutoCompleteDepartment = (props) => {
-	const { value, onlyMyDepartments = false, onChange = () => {} } = props;
+	const { value, onlyMyDepartments = false, onChange = () => {}, haveAll = false } = props;
 
 	const t = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState('');
@@ -16,9 +16,10 @@ const AutoCompleteDepartment = (props) => {
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
 	const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList(
-		useMemo(() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments }), [
+		useMemo(() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments, haveAll }), [
 			debouncedDepartmentsFilter,
 			onlyMyDepartments,
+			haveAll,
 		]),
 	);
 
@@ -29,6 +30,10 @@ const AutoCompleteDepartment = (props) => {
 	} = useRecordList(departmentsList);
 
 	const sortedByName = departmentsItems.sort((a, b) => {
+		if (a.value.value === 'all') {
+			return -1;
+		}
+
 		if (a.name > b.name) {
 			return 1;
 		}
@@ -47,7 +52,6 @@ const AutoCompleteDepartment = (props) => {
 			filter={departmentsFilter}
 			setFilter={setDepartmentsFilter}
 			options={sortedByName}
-			maxWidth='100%'
 			placeholder={t('Select_an_option')}
 			endReached={
 				departmentsPhase === AsyncStatePhase.LOADING
diff --git a/client/components/GenericTable/HeaderCell.tsx b/client/components/GenericTable/HeaderCell.tsx
index 93337be85c27f..52c97154487ac 100644
--- a/client/components/GenericTable/HeaderCell.tsx
+++ b/client/components/GenericTable/HeaderCell.tsx
@@ -1,5 +1,5 @@
 import { Box, Table } from '@rocket.chat/fuselage';
-import React, { FC, useCallback } from 'react';
+import React, { ComponentProps, FC, useCallback } from 'react';
 
 import SortIcon from './SortIcon';
 
@@ -8,7 +8,7 @@ type HeaderCellProps = {
 	direction?: 'asc' | 'desc';
 	sort?: string;
 	onClick?: (sort: string) => void;
-};
+} & ComponentProps<typeof Box>;
 
 const HeaderCell: FC<HeaderCellProps> = ({
 	children,
diff --git a/client/components/Omnichannel/hooks/useAgentsList.ts b/client/components/Omnichannel/hooks/useAgentsList.ts
new file mode 100644
index 0000000000000..62d3f76a5db4c
--- /dev/null
+++ b/client/components/Omnichannel/hooks/useAgentsList.ts
@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+
+import { ILivechatAgentRecord } from '../../../../definition/ILivechatAgentRecord';
+import { useEndpoint } from '../../../contexts/ServerContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
+import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
+import { RecordList } from '../../../lib/lists/RecordList';
+
+type AgentsListOptions = {
+	text: string;
+};
+
+export const useAgentsList = (
+	options: AgentsListOptions,
+): {
+	itemsList: RecordList<ILivechatAgentRecord>;
+	initialItemCount: number;
+	reload: () => void;
+	loadMoreItems: (start: number, end: number) => void;
+} => {
+	const t = useTranslation();
+	const [itemsList, setItemsList] = useState(() => new RecordList<ILivechatAgentRecord>());
+	const reload = useCallback(() => setItemsList(new RecordList<ILivechatAgentRecord>()), []);
+	const endpoint = 'livechat/users/agent';
+
+	const getAgents = useEndpoint('GET', endpoint);
+
+	useComponentDidUpdate(() => {
+		options && reload();
+	}, [options, reload]);
+
+	const fetchData = useCallback(
+		async (start, end) => {
+			const { users: agents, total } = await getAgents({
+				...(options.text && { text: options.text }),
+				offset: start,
+				count: end + start,
+				sort: JSON.stringify({ name: 1 }),
+			});
+
+			const items = agents.map((agent: any) => {
+				agent._updatedAt = new Date(agent._updatedAt);
+				agent.label = agent.username;
+				agent.value = agent._id;
+				return agent;
+			});
+			items.unshift({
+				label: t('All'),
+				value: 'all',
+				_updatedAt: new Date(),
+			});
+
+			return {
+				items,
+				itemCount: total + 1,
+			};
+		},
+		[getAgents, options.text, t],
+	);
+
+	const { loadMoreItems, initialItemCount } = useScrollableRecordList(itemsList, fetchData, 25);
+
+	return {
+		reload,
+		itemsList,
+		loadMoreItems,
+		initialItemCount,
+	};
+};
diff --git a/client/components/Omnichannel/hooks/useDepartmentsList.ts b/client/components/Omnichannel/hooks/useDepartmentsList.ts
index 6c6deba3ab189..5447c37d1877f 100644
--- a/client/components/Omnichannel/hooks/useDepartmentsList.ts
+++ b/client/components/Omnichannel/hooks/useDepartmentsList.ts
@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { ILivechatDepartmentRecord } from '../../../../definition/ILivechatDepartmentRecord';
 import { useEndpoint } from '../../../contexts/ServerContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
 import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
 import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
 import { RecordList } from '../../../lib/lists/RecordList';
@@ -10,6 +11,7 @@ type DepartmentsListOptions = {
 	filter: string;
 	departmentId?: string;
 	onlyMyDepartments?: boolean;
+	haveAll?: boolean;
 };
 
 export const useDepartmentsList = (
@@ -20,6 +22,7 @@ export const useDepartmentsList = (
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
+	const t = useTranslation();
 	const [itemsList, setItemsList] = useState(() => new RecordList<ILivechatDepartmentRecord>());
 	const reload = useCallback(() => setItemsList(new RecordList<ILivechatDepartmentRecord>()), []);
 	const endpoint = 'livechat/department' as 'livechat/department';
@@ -40,24 +43,40 @@ export const useDepartmentsList = (
 				sort: JSON.stringify({ name: 1 }),
 			});
 
+			const items = departments
+				.filter((department) => {
+					if (options.departmentId && department._id === options.departmentId) {
+						return false;
+					}
+					return true;
+				})
+				.map((department: any) => {
+					department._updatedAt = new Date(department._updatedAt);
+					department.label = department.name;
+					department.value = { value: department._id, label: department.name };
+					return department;
+				});
+
+			options.haveAll &&
+				items.unshift({
+					label: t('All'),
+					value: { value: 'all', label: t('All') },
+					_updatedAt: new Date(),
+				});
+
 			return {
-				items: departments
-					.filter((department) => {
-						if (options.departmentId && department._id === options.departmentId) {
-							return false;
-						}
-						return true;
-					})
-					.map((department: any) => {
-						department._updatedAt = new Date(department._updatedAt);
-						department.label = department.name;
-						department.value = { value: department._id, label: department.name };
-						return department;
-					}),
+				items,
 				itemCount: options.departmentId ? total - 1 : total,
 			};
 		},
-		[getDepartments, options],
+		[
+			getDepartments,
+			options.departmentId,
+			options.filter,
+			options.haveAll,
+			options.onlyMyDepartments,
+			t,
+		],
 	);
 
 	const { loadMoreItems, initialItemCount } = useScrollableRecordList(itemsList, fetchData, 25);
diff --git a/client/components/Omnichannel/modals/ForwardChatModal.js b/client/components/Omnichannel/modals/ForwardChatModal.js
index 4b38ff4505915..e6ea39b0dfe88 100644
--- a/client/components/Omnichannel/modals/ForwardChatModal.js
+++ b/client/components/Omnichannel/modals/ForwardChatModal.js
@@ -94,6 +94,7 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }) => {
 					<Field.Label>{t('Forward_to_department')}</Field.Label>
 					<Field.Row>
 						<PaginatedSelectFiltered
+							withTitle
 							filter={departmentsFilter}
 							setFilter={setDepartmentsFilter}
 							options={departmentsItems}
diff --git a/client/components/Page/PageContent.tsx b/client/components/Page/PageContent.tsx
index 421a629a0515b..fa89b53cdfa3c 100644
--- a/client/components/Page/PageContent.tsx
+++ b/client/components/Page/PageContent.tsx
@@ -1,7 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { forwardRef } from 'react';
+import React, { ComponentProps, forwardRef } from 'react';
 
-const PageContent = forwardRef(function PageContent(props, ref) {
+const PageContent = forwardRef<HTMLElement, ComponentProps<typeof Box>>(function PageContent(
+	props,
+	ref,
+) {
 	return (
 		<Box
 			ref={ref}
diff --git a/client/contexts/ServerContext/endpoints.ts b/client/contexts/ServerContext/endpoints.ts
index faec94266142e..46a8e46501679 100644
--- a/client/contexts/ServerContext/endpoints.ts
+++ b/client/contexts/ServerContext/endpoints.ts
@@ -11,11 +11,14 @@ import { ListEndpoint as EmojiCustomListEndpoint } from './endpoints/v1/emoji-cu
 import { FilesEndpoint as GroupsFilesEndpoint } from './endpoints/v1/groups/files';
 import { FilesEndpoint as ImFilesEndpoint } from './endpoints/v1/im/files';
 import { AppearanceEndpoint as LivechatAppearanceEndpoint } from './endpoints/v1/livechat/appearance';
+import { LivechatCustomFieldsEndpoint } from './endpoints/v1/livechat/customFields';
 import { LivechatDepartment } from './endpoints/v1/livechat/department';
 import { LivechatDepartmentsByUnit } from './endpoints/v1/livechat/departmentsByUnit';
 import { LivechatMonitorsList } from './endpoints/v1/livechat/monitorsList';
 import { LivechatRoomOnHoldEndpoint } from './endpoints/v1/livechat/onHold';
+import { LivechatRoomsEndpoint } from './endpoints/v1/livechat/rooms';
 import { LivechatTagsList } from './endpoints/v1/livechat/tagsList';
+import { LivechatUsersAgentEndpoint } from './endpoints/v1/livechat/usersAgent';
 import { LivechatVisitorInfoEndpoint } from './endpoints/v1/livechat/visitorInfo';
 import { AutocompleteAvailableForTeamsEndpoint as RoomsAutocompleteTeamsEndpoint } from './endpoints/v1/rooms/autocompleteAvailableForTeams';
 import { AutocompleteChannelAndPrivateEndpoint as RoomsAutocompleteEndpoint } from './endpoints/v1/rooms/autocompleteChannelAndPrivate';
@@ -48,6 +51,9 @@ export type ServerEndpoints = {
 	'livechat/tags.list': LivechatTagsList;
 	'livechat/department': LivechatDepartment;
 	'livechat/departments.by-unit/': LivechatDepartmentsByUnit;
+	'livechat/custom-fields': LivechatCustomFieldsEndpoint;
+	'livechat/rooms': LivechatRoomsEndpoint;
+	'livechat/users/agent': LivechatUsersAgentEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;
diff --git a/client/contexts/ServerContext/endpoints/v1/livechat/customFields.ts b/client/contexts/ServerContext/endpoints/v1/livechat/customFields.ts
new file mode 100644
index 0000000000000..5968bd12c0258
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/livechat/customFields.ts
@@ -0,0 +1,10 @@
+export type LivechatCustomFieldsEndpoint = {
+	GET: (params: {}) => {
+		customFields: [
+			{
+				_id: string;
+				label: string;
+			},
+		];
+	};
+};
diff --git a/client/contexts/ServerContext/endpoints/v1/livechat/rooms.ts b/client/contexts/ServerContext/endpoints/v1/livechat/rooms.ts
new file mode 100644
index 0000000000000..4a296a9a5eb69
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/livechat/rooms.ts
@@ -0,0 +1,15 @@
+export type LivechatRoomsEndpoint = {
+	GET: (params: {
+		guest: string;
+		fname: string;
+		servedBy: string[];
+		status: string;
+		department: string;
+		from: string;
+		to: string;
+		customFields: any;
+		current: number;
+		itemsPerPage: number;
+		tags: string[];
+	}) => { value: any; reload: () => void };
+};
diff --git a/client/contexts/ServerContext/endpoints/v1/livechat/usersAgent.ts b/client/contexts/ServerContext/endpoints/v1/livechat/usersAgent.ts
new file mode 100644
index 0000000000000..a8fba3f93b812
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/livechat/usersAgent.ts
@@ -0,0 +1,27 @@
+export type LivechatUsersAgentEndpoint = {
+	GET: (params?: {
+		text?: string;
+		offset: number;
+		count: number;
+		sort: string;
+	}) => {
+		users: {
+			_id: string;
+			emails: {
+				address: string;
+				verified: boolean;
+			}[];
+			status: string;
+			name: string;
+			username: string;
+			statusLivechat: string;
+			livechat: {
+				maxNumberSimultaneousChat: number;
+			};
+		}[];
+		count: number;
+		offset: number;
+		total: number;
+		success: boolean;
+	};
+};
diff --git a/client/views/omnichannel/analytics/AnalyticsPage.js b/client/views/omnichannel/analytics/AnalyticsPage.js
index 56216f991f46c..8d1d9ec71594b 100644
--- a/client/views/omnichannel/analytics/AnalyticsPage.js
+++ b/client/views/omnichannel/analytics/AnalyticsPage.js
@@ -59,7 +59,7 @@ const AnalyticsPage = () => {
 							<Label mb='x4'>{t('Type')}</Label>
 							<Select flexShrink={0} options={typeOptions} value={type} onChange={setType} />
 						</Box>
-						<Box display='flex' mi='x4' flexGrow={1} flexDirection='column'>
+						<Box maxWidth='40%' display='flex' mi='x4' flexGrow={1} flexDirection='column'>
 							<Label mb='x4'>{t('Departments')}</Label>
 							<AutoCompleteDepartment
 								value={department}
diff --git a/client/views/omnichannel/currentChats/CurrentChatsPage.js b/client/views/omnichannel/currentChats/CurrentChatsPage.js
deleted file mode 100644
index a1161d4b85e67..0000000000000
--- a/client/views/omnichannel/currentChats/CurrentChatsPage.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-import GenericTable from '../../../components/GenericTable';
-import Page from '../../../components/Page';
-import FilterByText from './FilterByText';
-
-function CurrentChatsPage({ data, header, setParams, params, title, renderRow, reload, children }) {
-	return (
-		<Page flexDirection='row'>
-			<Page>
-				<Page.Header title={title} />
-				<Page.Content>
-					<GenericTable
-						header={header}
-						renderRow={renderRow}
-						results={data && data.rooms}
-						total={data && data.total}
-						setParams={setParams}
-						params={params}
-						reload={reload}
-						renderFilter={({ onChange, ...props }) => (
-							<FilterByText setFilter={onChange} {...props} />
-						)}
-					/>
-				</Page.Content>
-			</Page>
-			{children}
-		</Page>
-	);
-}
-
-export default CurrentChatsPage;
diff --git a/client/views/omnichannel/currentChats/CurrentChatsPage.tsx b/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
new file mode 100644
index 0000000000000..da626d7fa8b2c
--- /dev/null
+++ b/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
@@ -0,0 +1,35 @@
+import React, { FC, memo } from 'react';
+
+import GenericTable from '../../../components/GenericTable';
+import Page from '../../../components/Page';
+import FilterByText from './FilterByText';
+
+const CurrentChatsPage: FC<{
+	data: any;
+	header: any;
+	setParams: any;
+	params: any;
+	title: any;
+	renderRow: any;
+	reload: any;
+}> = ({ data, header, setParams, params, title, renderRow, reload }) => (
+	<Page>
+		<Page.Header title={title} />
+		<Page.Content>
+			<GenericTable
+				header={header}
+				renderRow={renderRow}
+				results={data && data.rooms}
+				total={data && data.total}
+				setParams={setParams}
+				params={params}
+				reload={reload}
+				renderFilter={({ onChange, ...props }: any): any => (
+					<FilterByText setFilter={onChange} {...props} />
+				)}
+			/>
+		</Page.Content>
+	</Page>
+);
+
+export default memo(CurrentChatsPage);
diff --git a/client/views/omnichannel/currentChats/CurrentChatsRoute.js b/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
similarity index 83%
rename from client/views/omnichannel/currentChats/CurrentChatsRoute.js
rename to client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
index ea4101650826c..7e766e4c00f4f 100644
--- a/client/views/omnichannel/currentChats/CurrentChatsRoute.js
+++ b/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
@@ -2,7 +2,7 @@ import { Table } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import moment from 'moment';
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, FC } from 'react';
 
 import GenericTable from '../../../components/GenericTable';
 import NotAuthorizedPage from '../../../components/NotAuthorizedPage';
@@ -12,14 +12,42 @@ import { useEndpointData } from '../../../hooks/useEndpointData';
 import CurrentChatsPage from './CurrentChatsPage';
 import RemoveChatButton from './RemoveChatButton';
 
-const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
+type useQueryType = (
+	debouncedParams: {
+		fname: string;
+		guest: string;
+		servedBy: string;
+		department: string;
+		status: string;
+		from: string;
+		to: string;
+		tags: any[];
+		customFields: any;
+		itemsPerPage: number;
+		current: number;
+	},
+	debouncedSort: any[],
+) => any;
 
-const useQuery = (
+const sortDir = (sortDir: string): number => (sortDir === 'asc' ? 1 : -1);
+
+const useQuery: useQueryType = (
 	{ guest, servedBy, department, status, from, to, tags, customFields, itemsPerPage, current },
 	[column, direction],
 ) =>
 	useMemo(() => {
-		const query = {
+		const query: {
+			roomName?: string;
+			sort: string;
+			count?: number;
+			offset?: number;
+			createdAt?: string;
+			open?: boolean;
+			agents?: string[];
+			departmentId?: string;
+			tags?: string[];
+			customFields?: string;
+		} = {
 			...(guest && { roomName: guest }),
 			sort: JSON.stringify({
 				[column]: sortDir(direction),
@@ -33,12 +61,12 @@ const useQuery = (
 			query.createdAt = JSON.stringify({
 				...(from && {
 					start: moment(new Date(from))
-						.set({ hour: '00', minutes: '00', seconds: '00' })
+						.set({ hour: 0, minutes: 0, seconds: 0 })
 						.format('YYYY-MM-DDTHH:mm:ss'),
 				}),
 				...(to && {
 					end: moment(new Date(to))
-						.set({ hour: '23', minutes: '59', seconds: '59' })
+						.set({ hour: 23, minutes: 59, seconds: 59 })
 						.format('YYYY-MM-DDTHH:mm:ss'),
 				}),
 			});
@@ -77,14 +105,15 @@ const useQuery = (
 		customFields,
 	]);
 
-function CurrentChatsRoute() {
+const CurrentChatsRoute: FC = () => {
 	const t = useTranslation();
 	const canViewCurrentChats = usePermission('view-livechat-current-chats');
 	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
 
 	const [params, setParams] = useState({
+		guest: '',
 		fname: '',
-		servedBy: [],
+		servedBy: '',
 		status: '',
 		department: '',
 		from: '',
@@ -92,13 +121,13 @@ function CurrentChatsRoute() {
 		customFields: {},
 		current: 0,
 		itemsPerPage: 25,
+		tags: [] as string[],
 	});
-	const [sort, setSort] = useState(['ts', 'desc']);
+	const [sort, setSort] = useState<[string, 'asc' | 'desc' | undefined]>(['ts', 'desc']);
 
 	const debouncedParams = useDebouncedValue(params, 500);
 	const debouncedSort = useDebouncedValue(sort, 500);
 	const query = useQuery(debouncedParams, debouncedSort);
-	// const livechatRoomRoute = useRoute('live/:id');
 
 	const onHeaderClick = useMutableCallback((id) => {
 		const [sortBy, sortDirection] = sort;
@@ -122,11 +151,11 @@ function CurrentChatsRoute() {
 		() =>
 			[
 				<GenericTable.HeaderCell
-					key={'name'}
+					key={'fname'}
 					direction={sort[1]}
-					active={sort[0] === 'name'}
+					active={sort[0] === 'fname'}
 					onClick={onHeaderClick}
-					sort='name'
+					sort='fname'
 				>
 					{t('Name')}
 				</GenericTable.HeaderCell>,
@@ -191,7 +220,7 @@ function CurrentChatsRoute() {
 				key={_id}
 				tabIndex={0}
 				role='link'
-				onClick={() => onRowClick(_id)}
+				onClick={(): void => onRowClick(_id)}
 				action
 				qa-user-id={_id}
 			>
@@ -215,15 +244,13 @@ function CurrentChatsRoute() {
 		<CurrentChatsPage
 			setParams={setParams}
 			params={params}
-			onHeaderClick={onHeaderClick}
 			data={data}
-			useQuery={useQuery}
 			reload={reload}
 			header={header}
 			renderRow={renderRow}
 			title={t('Current_Chats')}
 		></CurrentChatsPage>
 	);
-}
+};
 
 export default CurrentChatsRoute;
diff --git a/client/views/omnichannel/currentChats/FilterByText.js b/client/views/omnichannel/currentChats/FilterByText.tsx
similarity index 80%
rename from client/views/omnichannel/currentChats/FilterByText.js
rename to client/views/omnichannel/currentChats/FilterByText.tsx
index d66bd4b4b6dd5..472602d07bfe7 100644
--- a/client/views/omnichannel/currentChats/FilterByText.js
+++ b/client/views/omnichannel/currentChats/FilterByText.tsx
@@ -1,7 +1,7 @@
 import { TextInput, Box, MultiSelect, Select, InputBox } from '@rocket.chat/fuselage';
 import { useMutableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import moment from 'moment';
-import React, { useEffect, useMemo } from 'react';
+import React, { Dispatch, FC, SetStateAction, useEffect, useMemo } from 'react';
 import { useSubscription } from 'use-subscription';
 
 import AutoCompleteAgent from '../../../components/AutoCompleteAgent';
@@ -16,18 +16,23 @@ import { formsSubscription } from '../additionalForms';
 import Label from './Label';
 import RemoveAllClosed from './RemoveAllClosed';
 
-const FilterByText = ({ setFilter, reload, ...props }) => {
+type FilterByTextType = FC<{
+	setFilter: Dispatch<SetStateAction<any>>;
+	reload?: any;
+}>;
+
+const FilterByText: FilterByTextType = ({ setFilter, reload, ...props }) => {
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const t = useTranslation();
 
 	const { value: allCustomFields } = useEndpointData('livechat/custom-fields');
-	const statusOptions = [
+	const statusOptions: [string, string][] = [
 		['all', t('All')],
 		['closed', t('Closed')],
 		['opened', t('Open')],
 	];
-	const customFieldsOptions = useMemo(
+	const customFieldsOptions: [string, string][] = useMemo(
 		() =>
 			allCustomFields && allCustomFields.customFields
 				? allCustomFields.customFields.map(({ _id, label }) => [_id, label])
@@ -38,11 +43,14 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 	const [guest, setGuest] = useLocalStorage('guest', '');
 	const [servedBy, setServedBy] = useLocalStorage('servedBy', 'all');
 	const [status, setStatus] = useLocalStorage('status', 'all');
-	const [department, setDepartment] = useLocalStorage('department', 'all');
+	const [department, setDepartment] = useLocalStorage<{ label: string; value: string }>(
+		'department',
+		{ value: 'all', label: t('All') },
+	);
 	const [from, setFrom] = useLocalStorage('from', '');
 	const [to, setTo] = useLocalStorage('to', '');
-	const [tags, setTags] = useLocalStorage('tags', []);
-	const [customFields, setCustomFields] = useLocalStorage('tags', []);
+	const [tags, setTags] = useLocalStorage<never | { label: string; value: string }[]>('tags', []);
+	const [customFields, setCustomFields] = useLocalStorage<any[]>('tags', []);
 
 	const handleGuest = useMutableCallback((e) => setGuest(e.target.value));
 	const handleServedBy = useMutableCallback((e) => setServedBy(e));
@@ -57,21 +65,21 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 		setGuest('');
 		setServedBy('all');
 		setStatus('all');
-		setDepartment('all');
+		setDepartment({ value: 'all', label: t('All') });
 		setFrom('');
 		setTo('');
 		setTags([]);
 		setCustomFields([]);
 	});
 
-	const forms = useSubscription(formsSubscription);
+	const forms = useSubscription<any>(formsSubscription);
 
-	const { useCurrentChatTags = () => {} } = forms;
+	const { useCurrentChatTags = (): void => undefined } = forms;
 
 	const Tags = useCurrentChatTags();
 
 	const onSubmit = useMutableCallback((e) => e.preventDefault());
-	const reducer = function (acc, curr) {
+	const reducer = function (acc: any, curr: string): any {
 		acc[curr] = '';
 		return acc;
 	};
@@ -81,7 +89,7 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 			guest,
 			servedBy,
 			status,
-			...(department?.value && { department: department.value }),
+			...(department?.value && department.value !== 'all' && { department: department.value }),
 			from: from && moment(new Date(from)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			to: to && moment(new Date(to)).utc().format('YYYY-MM-DDTHH:mm:ss'),
 			tags: tags.map((tag) => tag.label),
@@ -96,7 +104,7 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 	const removeClosedChats = useMethod('livechat:removeAllClosedRooms');
 
 	const handleRemoveClosed = useMutableCallback(async () => {
-		const onDeleteAll = async () => {
+		const onDeleteAll = async (): Promise<void> => {
 			try {
 				await removeClosedChats();
 				reload();
@@ -104,10 +112,10 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}
-			setModal();
+			setModal(null);
 		};
 
-		setModal(<DeleteWarningModal onDelete={onDeleteAll} onCancel={() => setModal()} />);
+		setModal(<DeleteWarningModal onDelete={onDeleteAll} onCancel={(): void => setModal(null)} />);
 	});
 
 	return (
@@ -158,13 +166,16 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
 				/>
 			</Box>
 			<Box display='flex' marginBlockStart='x8' flexGrow={1} flexDirection='column'>
-				<Label mb='x4'>{t('Department')}</Label>
-				<AutoCompleteDepartment
-					value={department}
-					onChange={handleDepartment}
-					label={t('All')}
-					onlyMyDepartments
-				/>
+				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
+					<Label mb='x4'>{t('Department')}</Label>
+					<AutoCompleteDepartment
+						haveAll
+						value={department}
+						onChange={handleDepartment}
+						label={t('All')}
+						onlyMyDepartments
+					/>
+				</Box>
 			</Box>
 			{Tags && (
 				<Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
diff --git a/client/views/omnichannel/currentChats/Label.js b/client/views/omnichannel/currentChats/Label.js
deleted file mode 100644
index c6e3f503b2c42..0000000000000
--- a/client/views/omnichannel/currentChats/Label.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Label = (props) => <Box fontScale='p2' color='default' {...props} />;
-
-export default Label;
diff --git a/client/views/omnichannel/currentChats/Label.tsx b/client/views/omnichannel/currentChats/Label.tsx
new file mode 100644
index 0000000000000..27bbf61dab16a
--- /dev/null
+++ b/client/views/omnichannel/currentChats/Label.tsx
@@ -0,0 +1,8 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const Label: FC<ComponentProps<typeof Box>> = (props) => (
+	<Box fontScale='p2' color='default' {...props} />
+);
+
+export default Label;
diff --git a/client/views/omnichannel/currentChats/RemoveAllClosed.js b/client/views/omnichannel/currentChats/RemoveAllClosed.tsx
similarity index 83%
rename from client/views/omnichannel/currentChats/RemoveAllClosed.js
rename to client/views/omnichannel/currentChats/RemoveAllClosed.tsx
index 444da5db25a7b..220559b49f153 100644
--- a/client/views/omnichannel/currentChats/RemoveAllClosed.js
+++ b/client/views/omnichannel/currentChats/RemoveAllClosed.tsx
@@ -1,10 +1,13 @@
 import { Box, Icon, Menu } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { usePermission } from '../../../contexts/AuthorizationContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
 
-const RemoveAllClosed = ({ handleClearFilters, handleRemoveClosed, ...props }) => {
+const RemoveAllClosed: FC<{
+	handleClearFilters: any;
+	handleRemoveClosed: any;
+}> = ({ handleClearFilters, handleRemoveClosed, ...props }) => {
 	const t = useTranslation();
 	const canRemove = usePermission('remove-closed-livechat-rooms');
 
diff --git a/client/views/omnichannel/currentChats/RemoveChatButton.js b/client/views/omnichannel/currentChats/RemoveChatButton.tsx
similarity index 85%
rename from client/views/omnichannel/currentChats/RemoveChatButton.js
rename to client/views/omnichannel/currentChats/RemoveChatButton.tsx
index 4a195a6dc2689..c2e6af821ad88 100644
--- a/client/views/omnichannel/currentChats/RemoveChatButton.js
+++ b/client/views/omnichannel/currentChats/RemoveChatButton.tsx
@@ -1,6 +1,6 @@
 import { Table, Icon, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import React from 'react';
+import React, { FC } from 'react';
 
 import DeleteWarningModal from '../../../components/DeleteWarningModal';
 import { useSetModal } from '../../../contexts/ModalContext';
@@ -8,7 +8,7 @@ import { useMethod } from '../../../contexts/ServerContext';
 import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
 
-function RemoveChatButton({ _id, reload }) {
+const RemoveChatButton: FC<{ _id: string; reload: () => void }> = ({ _id, reload }) => {
 	const removeChat = useMethod('livechat:removeRoom');
 	const setModal = useSetModal();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -25,17 +25,17 @@ function RemoveChatButton({ _id, reload }) {
 
 	const handleDelete = useMutableCallback((e) => {
 		e.stopPropagation();
-		const onDeleteAgent = async () => {
+		const onDeleteAgent = async (): Promise<void> => {
 			try {
 				await handleRemoveClick();
 				dispatchToastMessage({ type: 'success', message: t('Chat_removed') });
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}
-			setModal();
+			setModal(null);
 		};
 
-		setModal(<DeleteWarningModal onDelete={onDeleteAgent} onCancel={() => setModal()} />);
+		setModal(<DeleteWarningModal onDelete={onDeleteAgent} onCancel={(): void => setModal(null)} />);
 	});
 
 	return (
@@ -45,6 +45,6 @@ function RemoveChatButton({ _id, reload }) {
 			</Button>
 		</Table.Cell>
 	);
-}
+};
 
 export default RemoveChatButton;
diff --git a/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js b/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
index 8d7ca7043d488..868ecbd160698 100644
--- a/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
+++ b/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js
@@ -1,4 +1,4 @@
-import { Box, Select, Field, Margins } from '@rocket.chat/fuselage';
+import { Box, Select, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 
@@ -6,6 +6,7 @@ import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
 import Page from '../../../components/Page';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { getDateRange } from '../../../lib/getDateRange';
+import Label from '../components/Label';
 import AgentStatusChart from './charts/AgentStatusChart';
 import ChatDurationChart from './charts/ChatDurationChart';
 import ChatsChart from './charts/ChatsChart';
@@ -77,28 +78,24 @@ const RealTimeMonitoringPage = () => {
 						alignSelf='center'
 						w='full'
 					>
-						<Field mie='x4' flexShrink={1}>
-							<Field.Label>{t('Department')}</Field.Label>
-							<Field.Row>
-								<AutoCompleteDepartment
-									value={department}
-									onChange={setDepartment}
-									placeholder={t('All')}
-									label={t('All')}
-									onlyMyDepartments
-								/>
-							</Field.Row>
-						</Field>
-						<Field mis='x4' flexShrink={1}>
-							<Field.Label>{t('Update_every')}</Field.Label>
-							<Field.Row>
-								<Select
-									options={reloadOptions}
-									onChange={useMutableCallback((val) => setReloadFrequency(val))}
-									value={reloadFrequency}
-								/>
-							</Field.Row>
-						</Field>
+						<Box maxWidth='50%' display='flex' mi='x4' flexGrow={1} flexDirection='column'>
+							<Label mb='x4'>{t('Departments')}</Label>
+							<AutoCompleteDepartment
+								value={department}
+								onChange={setDepartment}
+								placeholder={t('All')}
+								label={t('All')}
+								onlyMyDepartments
+							/>
+						</Box>
+						<Box maxWidth='50%' display='flex' mi='x4' flexGrow={1} flexDirection='column'>
+							<Label mb='x4'>{t('Update_every')}</Label>
+							<Select
+								options={reloadOptions}
+								onChange={useMutableCallback((val) => setReloadFrequency(val))}
+								value={reloadFrequency}
+							/>
+						</Box>
 					</Box>
 					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
 						<ConversationOverview
diff --git a/definition/ILivechatAgentRecord.ts b/definition/ILivechatAgentRecord.ts
new file mode 100644
index 0000000000000..e95161fa8ce0f
--- /dev/null
+++ b/definition/ILivechatAgentRecord.ts
@@ -0,0 +1,17 @@
+import { IRocketChatRecord } from './IRocketChatRecord';
+
+
+export interface ILivechatAgentRecord extends IRocketChatRecord {
+	_id: string;
+	emails: {
+		address: string;
+		verified: boolean;
+	}[];
+	status: string;
+	name: string;
+	username: string;
+	statusLivechat: string;
+	livechat: {
+		maxNumberSimultaneousChat: number;
+	};
+}
diff --git a/ee/client/omnichannel/additionalForms/DepartmentForwarding.js b/ee/client/omnichannel/additionalForms/DepartmentForwarding.js
index b0b95d84eb824..df48647ee8d21 100644
--- a/ee/client/omnichannel/additionalForms/DepartmentForwarding.js
+++ b/ee/client/omnichannel/additionalForms/DepartmentForwarding.js
@@ -29,6 +29,7 @@ export const DepartmentForwarding = ({ departmentId, value, handler, label }) =>
 			<Field.Row>
 				<Box w='100%'>
 					<PaginatedMultiSelectFiltered
+						withTitle
 						maxWidth='100%'
 						w='100%'
 						flexGrow={1}
diff --git a/package-lock.json b/package-lock.json
index 16a0b157d829d..1098945d3a74c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6316,9 +6316,9 @@
       }
     },
     "@rocket.chat/fuselage": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.25.0.tgz",
-      "integrity": "sha512-lBgDcTRoYux6GzHv735C8+9laEA9qmnIg29Ib7BO6y2YQHnzYSfT6lFYRR+uxypciaSH8/4IIqmEtNX0z9c+KA==",
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.25.1.tgz",
+      "integrity": "sha512-RU1uhtCoz+wGo+OUUi8iUiY9uD5oWjyujDx1Y/eLFRkShFaRe179yCulnljBfqXjcgKGuw8zgR6y6fIyAu8Lbg==",
       "requires": {
         "@rocket.chat/css-in-js": "^0.25.0",
         "@rocket.chat/fuselage-tokens": "^0.25.0",
diff --git a/package.json b/package.json
index 5b4039e21f9df..637ad9902e531 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
 		"@rocket.chat/apps-engine": "1.25.0",
 		"@rocket.chat/css-in-js": "^0.25.0",
 		"@rocket.chat/emitter": "^0.25.0",
-		"@rocket.chat/fuselage": "^0.25.0",
+		"@rocket.chat/fuselage": "^0.25.1",
 		"@rocket.chat/fuselage-hooks": "^0.25.0",
 		"@rocket.chat/fuselage-polyfills": "^0.25.0",
 		"@rocket.chat/fuselage-tokens": "^0.25.0",
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index fb7a97e622681..e7e40f2ce7165 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1972,6 +1972,7 @@
   "Group_mentions_disabled_x_members": "Group mentions `@all` and `@here` have been disabled for rooms with more than __total__ members.",
   "Group_mentions_only": "Group mentions only",
   "Grouping": "Grouping",
+  "Guest": "Guest",
   "Hash": "Hash",
   "Header": "Header",
   "Header_and_Footer": "Header and Footer",
@@ -3807,6 +3808,7 @@
   "Sync_Users": "Sync Users",
   "System_messages": "System Messages",
   "Tag": "Tag",
+  "Tags": "Tags",
   "Tag_removed": "Tag Removed",
   "Tag_already_exists": "Tag already exists",
   "Take_it": "Take it!",