From 8788776284953b582f82836ec9890aa40e8f0a62 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Tue, 12 Sep 2023 14:32:21 -0300
Subject: [PATCH] fix: selected departments not being displayed due to
 pagination

---
 .changeset/slimy-cheetahs-heal.md                          | 5 +++++
 .../components/Omnichannel/hooks/useDepartmentsList.ts     | 4 ----
 .../omnichannel/departments/EditDepartmentWithData.tsx     | 2 +-
 .../omnichannel/additionalForms/DepartmentForwarding.tsx   | 7 ++++++-
 4 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/slimy-cheetahs-heal.md

diff --git a/.changeset/slimy-cheetahs-heal.md b/.changeset/slimy-cheetahs-heal.md
new file mode 100644
index 000000000000..44233bc87766
--- /dev/null
+++ b/.changeset/slimy-cheetahs-heal.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed selected departments not being displayed due to pagination
diff --git a/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts b/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts
index 3b39ea79d42f..fd3c0a29effe 100644
--- a/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts
+++ b/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts
@@ -20,7 +20,6 @@ type DepartmentListItem = {
 	_id: string;
 	label: string;
 	value: string;
-	_updatedAt: Date;
 };
 
 export const useDepartmentsList = (
@@ -66,7 +65,6 @@ export const useDepartmentsList = (
 						_id,
 						label: department.archived ? `${name} [${t('Archived')}]` : name,
 						value: _id,
-						_updatedAt: new Date(_updatedAt || ''),
 					};
 				});
 
@@ -75,7 +73,6 @@ export const useDepartmentsList = (
 					_id: '',
 					label: t('All'),
 					value: 'all',
-					_updatedAt: new Date(),
 				});
 
 			options.haveNone &&
@@ -83,7 +80,6 @@ export const useDepartmentsList = (
 					_id: '',
 					label: t('None'),
 					value: '',
-					_updatedAt: new Date(),
 				});
 
 			return {
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
index 7f5389d0fbe7..64016d23db23 100644
--- a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
@@ -22,7 +22,7 @@ const EditDepartmentWithData = ({ id, title }: EditDepartmentWithDataProps) => {
 	});
 
 	if (isInitialLoading) {
-		return <FormSkeleton />;
+		return <FormSkeleton padding='1.5rem 1rem' maxWidth='37.5rem' margin='0 auto' />;
 	}
 
 	if (isError || (id && !data?.department)) {
diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx b/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx
index 1d93108debf7..ed9a40e4bd0e 100644
--- a/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx
+++ b/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx
@@ -28,6 +28,11 @@ export const DepartmentForwarding = ({ departmentId, value = [], handler, label
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
+	const options = useMemo(() => {
+		const pending = value.filter(({ value }) => !departmentsItems.find((dep) => dep.value === value));
+		return [...departmentsItems, ...pending];
+	}, [departmentsItems, value]);
+
 	return (
 		<Field>
 			<Field.Label>{t(label)}</Field.Label>
@@ -41,7 +46,7 @@ export const DepartmentForwarding = ({ departmentId, value = [], handler, label
 						filter={debouncedDepartmentsFilter}
 						setFilter={setDepartmentsFilter}
 						onChange={handler}
-						options={departmentsItems}
+						options={options}
 						value={value}
 						placeholder={t('Select_an_option')}
 						endReached={