From 760ae5c01a6df34567f287542225fda06fdfe2d9 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Thu, 10 Oct 2024 07:33:08 +0530
Subject: [PATCH] fix: "Filter by room type" selectable in Rooms filter
 (#33507)

---
 .changeset/tender-cheetahs-teach.md           |  6 +++
 .../views/admin/rooms/RoomsTableFilters.tsx   |  1 +
 .../MultiSelectCustom/MultiSelectCustom.tsx   |  1 +
 .../MultiSelectCustomList.spec.tsx            | 44 +++++++++++++++++++
 .../MultiSelectCustomList.tsx                 |  4 +-
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tender-cheetahs-teach.md
 create mode 100644 packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.spec.tsx

diff --git a/.changeset/tender-cheetahs-teach.md b/.changeset/tender-cheetahs-teach.md
new file mode 100644
index 000000000000..bbb956d74715
--- /dev/null
+++ b/.changeset/tender-cheetahs-teach.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-client': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixed an issue where "Filter by room type" was selectable in the Rooms filter.
diff --git a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
index 2ec5954332f7..5d84c451df9a 100644
--- a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
+++ b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
@@ -9,6 +9,7 @@ const initialRoomTypeFilterStructure = [
 	{
 		id: 'filter_by_room',
 		text: 'Filter_by_room',
+		isGroupTitle: true,
 	},
 	{
 		id: 'd',
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
index 0855e5fc68c5..7694dda2944a 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
@@ -24,6 +24,7 @@ export type OptionProp = {
 	id: string;
 	text: string;
 	checked?: boolean;
+	isGroupTitle?: boolean;
 };
 
 /**
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.spec.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.spec.tsx
new file mode 100644
index 000000000000..7d8596d8f0ea
--- /dev/null
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.spec.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+
+import MultiSelectCustomList from './MultiSelectCustomList';
+
+it('should render options with correct checked state', () => {
+	render(
+		<MultiSelectCustomList
+			options={[
+				{ id: '1', text: 'Option 1', checked: true },
+				{ id: '2', text: 'Option 2', checked: false },
+			]}
+			onSelected={jest.fn()}
+		/>,
+		{ legacyRoot: true },
+	);
+
+	const option1 = screen.getByLabelText('Option 1');
+	expect(option1).toBeInTheDocument();
+	expect(option1).toBeChecked();
+
+	const option2 = screen.getByLabelText('Option 2');
+	expect(option2).toBeInTheDocument();
+	expect(option2).not.toBeChecked();
+});
+
+it('should not render group title as selectable option', () => {
+	render(
+		<MultiSelectCustomList
+			options={[
+				{ id: '1', text: 'Group title', isGroupTitle: true },
+				{ id: '2', text: 'Option 1', checked: false },
+			]}
+			onSelected={jest.fn()}
+		/>,
+		{ legacyRoot: true },
+	);
+
+	expect(screen.getByText('Group title')).toBeInTheDocument();
+	expect(screen.queryByRole('checkbox', { name: /Group title/i })).not.toBeInTheDocument();
+
+	const option1 = screen.getByLabelText('Option 1');
+	expect(option1).toBeInTheDocument();
+	expect(option1).not.toBeChecked();
+});
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
index d73d9ce6b88b..7a2268743fd4 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
@@ -40,8 +40,8 @@ const MultiSelectCustomList = ({
 			)}
 			{filteredOptions.map((option) => (
 				<Fragment key={option.id}>
-					{!option.hasOwnProperty('checked') ? (
-						<Box mi={12} mb={4} fontScale='p2b' color='default'>
+					{option.isGroupTitle || !option.hasOwnProperty('checked') ? (
+						<Box mi='x10' mb={4} fontScale='p2b' color='default'>
 							{t(option.text as TranslationKey)}
 						</Box>
 					) : (