fix: cleaning the room filter between navigation on the admin section (#32152)

Co-authored-by: dougfabris <devfabris@gmail.com>
Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>

Author: 3 people

.changeset/brown-lobsters-join.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Resolved an issue with the room type filter not being reset after navigating between admin sections.

apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx

@@ -2,10 +2,10 @@ import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import type { Dispatch, ReactElement, SetStateAction } from 'react';
 
-const roomTypeFilterStructure = [
+const initialRoomTypeFilterStructure = [
 	{
 		id: 'filter_by_room',
 		text: 'Filter_by_room',
@@ -49,6 +49,13 @@ const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch<SetStateAction
 
 	const [roomTypeSelectedOptions, setRoomTypeSelectedOptions] = useState<OptionProp[]>([]);
 
+	const roomTypeFilterStructure = useMemo(() => {
+		return initialRoomTypeFilterStructure.map((option) => ({
+			...option,
+			checked: roomTypeSelectedOptions.some((selectedOption) => selectedOption.id === option.id),
+		}));
+	}, [roomTypeSelectedOptions]);
+
 	const handleSearchTextChange = useCallback(
 		(event) => {
 			const text = event.currentTarget.value;
@@ -88,7 +95,7 @@ const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch<SetStateAction
 			</Box>
 			<Box minWidth='x224' m='x4'>
 				<MultiSelectCustom
-					dropdownOptions={roomTypeFilterStructure}
+					dropdownOptions={roomTypeFilterStructure as OptionProp[]}
 					defaultTitle={'All_rooms' as any}
 					selectedOptionsTitle='Rooms'
 					setSelectedOptions={handleRoomTypeChange}

apps/meteor/tests/e2e/admin-room.spec.ts

@@ -0,0 +1,97 @@
+import { faker } from '@faker-js/faker';
+
+import { Users } from './fixtures/userStates';
+import { Admin, AdminSectionsHref } from './page-objects';
+import { createTargetChannel, createTargetPrivateChannel } from './utils';
+import { expect, test } from './utils/test';
+
+test.use({ storageState: Users.admin.state });
+
+test.describe.serial('admin-rooms', () => {
+	let channel: string;
+	let privateRoom: string;
+	let admin: Admin;
+
+	test.beforeEach(async ({ page }) => {
+		admin = new Admin(page);
+		await page.goto('/admin/rooms');
+	});
+
+	test.beforeAll(async ({ browser, api }) => {
+		[channel, privateRoom] = await Promise.all([
+			createTargetChannel(api),
+			createTargetPrivateChannel(api),
+			browser.newPage({ storageState: Users.admin.state }).then(async (page) => {
+				await page.goto('/home');
+				await page.waitForSelector('[data-qa-id="home-header"]');
+				return page;
+			}),
+		]);
+	});
+
+	test('should display the Rooms Table', async ({ page }) => {
+		await expect(page.locator('[data-qa-type="PageHeader-title"]')).toContainText('Rooms');
+	});
+
+	test('should filter room by name', async ({ page }) => {
+		await admin.inputSearchRooms.fill(channel);
+
+		await expect(page.locator(`[qa-room-name="${channel}"]`)).toBeVisible();
+	});
+
+	test('should filter rooms by type', async ({ page }) => {
+		const dropdown = await admin.dropdownFilterRoomType();
+		await dropdown.click();
+
+		const privateOption = page.locator('text=Private channels');
+
+		await privateOption.waitFor();
+		await privateOption.click();
+
+		const selectedDropdown = await admin.dropdownFilterRoomType('Rooms (1)');
+		await expect(selectedDropdown).toBeVisible();
+
+		await expect(page.locator('text=Private Channel').first()).toBeVisible();
+	});
+
+	test('should filter rooms by type and name', async ({ page }) => {
+		await admin.inputSearchRooms.fill(privateRoom);
+
+		const dropdown = await admin.dropdownFilterRoomType();
+		await dropdown.click();
+
+		await page.locator('text=Private channels').click();
+
+		await expect(page.locator(`[qa-room-name="${privateRoom}"]`)).toBeVisible();
+	});
+
+	test('should be empty in case of the search does not find any room', async ({ page }) => {
+		const nonExistingChannel = faker.string.alpha(10);
+
+		await admin.inputSearchRooms.fill(nonExistingChannel);
+
+		const dropdown = await admin.dropdownFilterRoomType();
+		await dropdown.click();
+
+		await page.locator('text=Private channels').click();
+
+		await expect(page.locator('text=No results found')).toBeVisible();
+	});
+
+	test('should filter rooms by type and name and clean the filter after changing section', async ({ page }) => {
+		await admin.inputSearchRooms.fill(privateRoom);
+		const dropdown = await admin.dropdownFilterRoomType();
+		await dropdown.click();
+
+		await page.locator('text=Private channels').click();
+
+		const workspaceButton = await admin.adminSectionButton(AdminSectionsHref.Workspace);
+		await workspaceButton.click();
+
+		const roomsButton = await admin.adminSectionButton(AdminSectionsHref.Rooms);
+		await roomsButton.click();
+
+		const selectDropdown = await admin.dropdownFilterRoomType('All rooms');
+		await expect(selectDropdown).toBeVisible();
+	});
+});

apps/meteor/tests/e2e/page-objects/admin.ts

@@ -2,6 +2,28 @@ import type { Locator, Page } from '@playwright/test';
 
 import { AdminFlextab } from './fragments/admin-flextab';
 
+export enum AdminSectionsHref {
+	Workspace = '/admin/info',
+	Subscription = '/admin/subscription',
+	Engagement = '/admin/engagement/users',
+	Moderation = '/admin/moderation',
+	Federation = '/admin/federation',
+	Rooms = '/admin/rooms',
+	Users = '/admin/users',
+	Invites = '/admin/invites',
+	User_Status = '/admin/user-status',
+	Permissions = '/admin/permissions',
+	Device_Management = '/admin/device-management',
+	Email_Inboxes = '/admin/email-inboxes',
+	Mailer = '/admin/mailer',
+	Third_party_login = '/admin/third-party-login',
+	Integrations = '/admin/integrations',
+	Import = '/admin/import',
+	Reports = '/admin/reports',
+	Sounds = '/admin/sounds',
+	Emoji = '/admin/emoji',
+	Settings = '/admin/settings',
+}
 export class Admin {
 	public readonly page: Page;
 
@@ -268,4 +290,12 @@ export class Admin {
 	get btnFullScreen(): Locator {
 		return this.page.getByRole('button', { name: 'Full Screen' });
 	}
+
+	async dropdownFilterRoomType(text = 'All rooms'): Promise<Locator> {
+		return this.page.locator(`div[role="button"]:has-text("${text}")`);
+	}
+
+	async adminSectionButton(href: AdminSectionsHref): Promise<Locator> {
+		return this.page.locator(`a[href="${href}"]`);
+	}
 }

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx

@@ -105,8 +105,9 @@ export const MultiSelectCustom = ({
 		<Box display='flex' flexGrow={1} position='relative'>
 			<MultiSelectCustomAnchor
 				ref={reference}
-				onClick={toggleCollapsed as any}
 				collapsed={collapsed}
+				onClick={() => toggleCollapsed(!collapsed)}
+				onKeyDown={(e) => (e.code === 'Enter' || e.code === 'Space') && toggleCollapsed(!collapsed)}
 				defaultTitle={defaultTitle}
 				selectedOptionsTitle={selectedOptionsTitle}
 				selectedOptionsCount={count}

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx

@@ -1,66 +1,44 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Button, Icon, Palette } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 
 type MultiSelectCustomAnchorProps = {
-	onClick?: (value: boolean) => void;
 	collapsed: boolean;
 	defaultTitle: TranslationKey;
 	selectedOptionsTitle: TranslationKey;
 	selectedOptionsCount: number;
 	maxCount: number;
-} & ComponentProps<typeof Button>;
+} & ComponentProps<typeof Box>;
 
 const MultiSelectCustomAnchor = forwardRef<HTMLElement, MultiSelectCustomAnchorProps>(function MultiSelectCustomAnchor(
-	{ onClick, collapsed, selectedOptionsCount, selectedOptionsTitle, defaultTitle, maxCount, ...props },
+	{ collapsed, selectedOptionsCount, selectedOptionsTitle, defaultTitle, maxCount, ...props },
 	ref,
 ) {
 	const t = useTranslation();
-
-	const inputStyle = collapsed
-		? css`
-				&,
-				&:hover,
-				&:active,
-				&:focus {
-					cursor: pointer;
-					border-color: ${Palette.stroke['stroke-highlight'].toString()}!important;
-					box-shadow: 0 0 0 2px ${Palette.shadow['shadow-highlight'].toString()};
-				}
-		  `
-		: css`
-				& {
-					cursor: pointer;
-				}
-		  `;
-
+	const customStyle = css`
+		&:hover {
+			cursor: pointer;
+		}
+	`;
 	const isDirty = selectedOptionsCount > 0 && selectedOptionsCount !== maxCount - 1;
 
 	return (
 		<Box
 			ref={ref}
-			onClick={onClick}
+			role='button'
+			tabIndex={0}
 			display='flex'
 			justifyContent='space-between'
 			alignItems='center'
-			flexDirection='row'
-			borderColor={Palette.stroke['stroke-light'].toString()}
-			borderWidth='x1'
-			borderRadius={4}
-			bg={Palette.surface['surface-light'].toString()}
 			h='x40'
-			w='full'
-			pb={10}
-			pi={16}
-			color={isDirty ? Palette.text['font-default'].toString() : Palette.text['font-annotation'].toString()}
-			className={inputStyle}
+			className={['rcx-input-box__wrapper', customStyle].filter(Boolean)}
 			{...props}
 		>
 			{isDirty ? `${t(selectedOptionsTitle)} (${selectedOptionsCount})` : t(defaultTitle)}
-			<Icon name='chevron-down' fontSize='x20' color='hint' />
+			<Icon name={collapsed ? 'chevron-up' : 'chevron-down'} fontSize='x20' color='hint' />
 		</Box>
 	);
 });

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx

@@ -6,7 +6,7 @@ const MultiSelectCustomListWrapper = forwardRef<Element, ComponentProps<typeof B
 	ref,
 ) {
 	return (
-		<Box ref={ref} zIndex='2' w='full' position='absolute' mbs={40} pbs={4}>
+		<Box ref={ref} zIndex={99} w='full' position='absolute' mbs={40} pbs={4}>
 			{children}
 		</Box>
 	);