fix: Mark as unread not working

.changeset/hot-balloons-travel.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed issue where when you marked a room as read and you were part of it, sometimes it would mark it as read right after

apps/meteor/app/message-mark-as-unread/client/actionButton.ts

@@ -19,16 +19,16 @@ Meteor.startup(() => {
 			const { message = messageArgs(this).msg } = props;
 
 			try {
-				await sdk.call('unreadMessages', message);
 				const subscription = ChatSubscription.findOne({
 					rid: message.rid,
 				});
 
 				if (subscription == null) {
 					return;
 				}
+				router.navigate('/home');
 				await LegacyRoomManager.close(subscription.t + subscription.name);
-				return router.navigate('/home');
+				await sdk.call('unreadMessages', message);
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
 			}

apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx

@@ -167,7 +167,7 @@ function SideBarItemTemplateWithData({
 	const badges = (
 		<Margins inlineStart={8}>
 			{showBadge && isUnread && (
-				<Badge {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
+				<Badge role='status' {...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)} variant={variant} title={badgeTitle}>
 					{unread + tunread?.length}
 				</Badge>
 			)}
@@ -180,6 +180,7 @@ function SideBarItemTemplateWithData({
 			is='a'
 			id={id}
 			data-qa='sidebar-item'
+			data-unread={highlighted}
 			unread={highlighted}
 			selected={selected}
 			href={href}
@@ -205,7 +206,7 @@ function SideBarItemTemplateWithData({
 						threadUnread={threadUnread}
 						rid={rid}
 						unread={!!unread}
-						roomOpen={false}
+						roomOpen={selected}
 						type={type}
 						cl={cl}
 						name={title}

apps/meteor/client/sidebar/RoomMenu.tsx

@@ -1,6 +1,6 @@
 import type { RoomType } from '@rocket.chat/core-typings';
 import { Option, Menu } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey, Fields } from '@rocket.chat/ui-contexts';
 import {
 	useRouter,
@@ -13,6 +13,7 @@ import {
 	useTranslation,
 	useEndpoint,
 } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { memo, useMemo } from 'react';
 
@@ -100,6 +101,8 @@ const RoomMenu = ({
 	const isOmnichannelRoom = type === 'l';
 	const prioritiesMenu = useOmnichannelPrioritiesMenu(rid);
 
+	const queryClient = useQueryClient();
+
 	const canLeave = ((): boolean => {
 		if (type === 'c' && !canLeaveChannel) {
 			return false;
@@ -171,19 +174,24 @@ const RoomMenu = ({
 		);
 	});
 
-	const handleToggleRead = useMutableCallback(async () => {
+	const handleToggleRead = useEffectEvent(async () => {
 		try {
+			queryClient.invalidateQueries(['sidebar/search/spotlight']);
+
 			if (isUnread) {
 				await readMessages({ rid, readThreads: true });
 				return;
 			}
-			await unreadMessages(undefined, rid);
+
 			if (subscription == null) {
 				return;
 			}
+
 			LegacyRoomManager.close(subscription.t + subscription.name);
 
 			router.navigate('/home');
+
+			await unreadMessages(undefined, rid);
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}

apps/meteor/client/sidebarv2/RoomList/SideBarItemTemplateWithData.tsx

@@ -180,6 +180,7 @@ const SideBarItemTemplateWithData = ({
 			is='a'
 			id={id}
 			data-qa='sidebar-item'
+			data-unread={highlighted}
 			unread={highlighted}
 			selected={selected}
 			href={href}
@@ -205,7 +206,7 @@ const SideBarItemTemplateWithData = ({
 						threadUnread={threadUnread}
 						rid={rid}
 						unread={!!unread}
-						roomOpen={false}
+						roomOpen={selected}
 						type={type}
 						cl={cl}
 						name={title}

apps/meteor/client/sidebarv2/RoomMenu.tsx

@@ -13,6 +13,7 @@ import {
 	useTranslation,
 	useEndpoint,
 } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { memo, useMemo } from 'react';
 
@@ -100,6 +101,8 @@ const RoomMenu = ({
 	const isOmnichannelRoom = type === 'l';
 	const prioritiesMenu = useOmnichannelPrioritiesMenu(rid);
 
+	const queryClient = useQueryClient();
+
 	const canLeave = ((): boolean => {
 		if (type === 'c' && !canLeaveChannel) {
 			return false;
@@ -173,17 +176,22 @@ const RoomMenu = ({
 
 	const handleToggleRead = useEffectEvent(async () => {
 		try {
+			queryClient.invalidateQueries(['sidebar/search/spotlight']);
+
 			if (isUnread) {
 				await readMessages({ rid, readThreads: true });
 				return;
 			}
-			await unreadMessages(undefined, rid);
+
 			if (subscription == null) {
 				return;
 			}
+
 			LegacyRoomManager.close(subscription.t + subscription.name);
 
 			router.navigate('/home');
+
+			await unreadMessages(undefined, rid);
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}

apps/meteor/tests/e2e/mark-unread.spec.ts

@@ -0,0 +1,71 @@
+import { createAuxContext } from './fixtures/createAuxContext';
+import { Users } from './fixtures/userStates';
+import { HomeChannel } from './page-objects';
+import { createTargetChannel } from './utils';
+import { test, expect } from './utils/test';
+
+test.use({ storageState: Users.admin.state });
+
+test.describe.serial('mark-unread', () => {
+	let poHomeChannel: HomeChannel;
+	let targetChannel: string;
+
+	test.beforeEach(async ({ page, api }) => {
+		poHomeChannel = new HomeChannel(page);
+		targetChannel = await createTargetChannel(api, { members: ['user2'] });
+
+		await page.emulateMedia({ reducedMotion: 'reduce' });
+		await page.goto('/home');
+	});
+
+	test.afterEach(async ({ api }) => {
+		await api.post('/channels.delete', { roomName: targetChannel });
+	});
+
+	test.describe('Mark Unread - Sidebar Action', () => {
+		test('should not mark empty room as unread', async () => {
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
+
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).not.toBeVisible();
+		});
+
+		test('should mark a populated room as unread', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.content.sendMessage('this is a message for reply');
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
+
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
+		});
+
+		test('should mark a populated room as unread - search', async () => {
+			await poHomeChannel.sidenav.openChat(targetChannel);
+			await poHomeChannel.content.sendMessage('this is a message for reply');
+			await poHomeChannel.sidenav.selectMarkAsUnread(targetChannel);
+			await poHomeChannel.sidenav.searchRoom(targetChannel);
+
+			await expect(poHomeChannel.sidenav.getSearchChannelBadge(targetChannel)).toBeVisible();
+		});
+	});
+
+	test.describe('Mark Unread - Message Action', () => {
+		let poHomeChannelUser2: HomeChannel;
+
+		test('should mark a populated room as unread', async ({ browser }) => {
+			const { page: user2Page } = await createAuxContext(browser, Users.user2);
+			poHomeChannelUser2 = new HomeChannel(user2Page);
+
+			await poHomeChannelUser2.sidenav.openChat(targetChannel);
+			await poHomeChannelUser2.content.sendMessage('this is a message for reply');
+			await user2Page.close();
+
+			await poHomeChannel.sidenav.openChat(targetChannel);
+
+			// wait for the sidebar item to be read
+			await poHomeChannel.sidenav.getSidebarItemByName(targetChannel, true).waitFor();
+			await poHomeChannel.content.openLastMessageMenu();
+			await poHomeChannel.markUnread.click();
+
+			await expect(poHomeChannel.sidenav.getRoomBadge(targetChannel)).toBeVisible();
+		});
+	});
+});

apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts

@@ -68,8 +68,18 @@ export class HomeSidenav {
 		return this.page.locator('role=menuitemcheckbox[name="Profile"]');
 	}
 
-	getSidebarItemByName(name: string): Locator {
-		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`);
+	// TODO: refactor getSidebarItemByName to not use data-qa
+	getSidebarItemByName(name: string, isRead?: boolean): Locator {
+		return this.page.locator(
+			['[data-qa="sidebar-item"]', `[aria-label="${name}"]`, isRead && '[data-unread="false"]'].filter(Boolean).join(''),
+		);
+	}
+
+	async selectMarkAsUnread(name: string) {
+		const sidebarItem = this.getSidebarItemByName(name);
+		await sidebarItem.focus();
+		await sidebarItem.locator('.rcx-sidebar-item__menu').click();
+		await this.page.getByRole('option', { name: 'Mark Unread' }).click();
 	}
 
 	async selectPriority(name: string, priority: string) {
@@ -170,4 +180,12 @@ export class HomeSidenav {
 		await this.checkboxEncryption.click();
 		await this.btnCreate.click();
 	}
+
+	getRoomBadge(roomName: string): Locator {
+		return this.getSidebarItemByName(roomName).getByRole('status', { exact: true });
+	}
+
+	getSearchChannelBadge(name: string): Locator {
+		return this.page.locator(`[data-qa="sidebar-item"][aria-label="${name}"]`).first().getByRole('status', { exact: true });
+	}
 }

apps/meteor/tests/e2e/page-objects/home-channel.ts

@@ -59,4 +59,8 @@ export class HomeChannel {
 	get roomHeaderToolbar(): Locator {
 		return this.page.locator('[role=toolbar][aria-label="Primary Room actions"]');
 	}
+
+	get markUnread(): Locator {
+		return this.page.locator('role=menuitem[name="Mark Unread"]');
+	}
 }