diff --git a/.changeset/hot-balloons-travel.md b/.changeset/hot-balloons-travel.md new file mode 100644 index 000000000000..d6154babc49d --- /dev/null +++ b/.changeset/hot-balloons-travel.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixed issue where when you marked a room as unread and you were part of it, sometimes it would mark it as read right after diff --git a/apps/meteor/app/message-mark-as-unread/client/actionButton.ts b/apps/meteor/app/message-mark-as-unread/client/actionButton.ts index fc4a9d80c43c..e1e35d216029 100644 --- a/apps/meteor/app/message-mark-as-unread/client/actionButton.ts +++ b/apps/meteor/app/message-mark-as-unread/client/actionButton.ts @@ -19,7 +19,6 @@ Meteor.startup(() => { const { message = messageArgs(this).msg } = props; try { - await sdk.call('unreadMessages', message); const subscription = ChatSubscription.findOne({ rid: message.rid, }); @@ -27,8 +26,9 @@ Meteor.startup(() => { 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 }); } diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx index cc7cdfbe7761..35d098151204 100644 --- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx @@ -167,7 +167,7 @@ function SideBarItemTemplateWithData({ const badges = ( {showBadge && isUnread && ( - + {unread + tunread?.length} )} @@ -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} diff --git a/apps/meteor/client/sidebar/RoomMenu.tsx b/apps/meteor/client/sidebar/RoomMenu.tsx index 06b1352d2803..05f02220104b 100644 --- a/apps/meteor/client/sidebar/RoomMenu.tsx +++ b/apps/meteor/client/sidebar/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 = useMutableCallback(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 }); } diff --git a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx b/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx index 51b8ce495af6..e1f66ba93b4e 100644 --- a/apps/meteor/client/sidebarv2/RoomList/SidebarItemTemplateWithData.tsx +++ b/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} diff --git a/apps/meteor/client/sidebarv2/RoomMenu.tsx b/apps/meteor/client/sidebarv2/RoomMenu.tsx index e88225df40ca..aac68b9ef79e 100644 --- a/apps/meteor/client/sidebarv2/RoomMenu.tsx +++ b/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 }); } diff --git a/apps/meteor/tests/e2e/mark-unread.spec.ts b/apps/meteor/tests/e2e/mark-unread.spec.ts new file mode 100644 index 000000000000..81ae93965856 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts index d0bdd5028010..823469d02a96 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts +++ b/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 }); + } } diff --git a/apps/meteor/tests/e2e/page-objects/home-channel.ts b/apps/meteor/tests/e2e/page-objects/home-channel.ts index a2784ea4c67b..ce51896eb449 100644 --- a/apps/meteor/tests/e2e/page-objects/home-channel.ts +++ b/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"]'); + } }