[FIX] Notification preferences not updated on save (#26461)

apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx

@@ -11,7 +11,7 @@ import { useToolboxContext } from '../../lib/Toolbox/ToolboxContext';
 import { useTab, useTabBarOpen } from '../../providers/ToolboxProvider';
 
 const renderMenuOption: OptionRenderer = ({ label: { title, icon }, ...props }: any): ReactNode => (
-	<Option label={title} icon={icon} {...props} />
+	<Option label={title} icon={icon} data-qa-id={`ToolBoxAction-${icon}`} {...props} />
 );
 
 type ToolBoxProps = {

apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx

@@ -17,6 +17,7 @@ export const NotificationByDevice = ({ device, icon, children }: NotificationByD
 				</Box>
 			</Box>
 		}
+		data-qa-id={`${device}-notifications`}
 	>
 		<FieldGroup>{children}</FieldGroup>
 	</Accordion.Item>

apps/meteor/server/modules/watchers/publishFields.ts

@@ -21,6 +21,9 @@ export const subscriptionFields = {
 	desktopNotifications: 1,
 	mobilePushNotifications: 1,
 	emailNotifications: 1,
+	desktopPrefOrigin: 1,
+	mobilePrefOrigin: 1,
+	emailPrefOrigin: 1,
 	unreadAlert: 1,
 	_updatedAt: 1,
 	blocked: 1,

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -82,4 +82,24 @@ test.describe.serial('channel-management', () => {
 
 		await expect(page).toHaveURL(`/channel/NAME-EDITED-${targetChannel}`);
 	});
+
+	test('expect edit notification preferences of "targetChannel"', async () => {
+		await poHomeChannel.sidenav.openChat(targetChannel);
+		await poHomeChannel.tabs.btnMoreItems.click({ force: true });
+		await poHomeChannel.tabs.btnNotificationPreferences.click({ force: true });
+		await poHomeChannel.tabs.notificationPreferences.updateAllNotificaitonPreferences();
+		await poHomeChannel.tabs.notificationPreferences.btnSave.click();
+
+		await expect(poHomeChannel.toastSuccess).toBeVisible();
+	});
+
+	test('expect all notification preferences of "targetChannel" to be "Mentions"', async () => {
+		await poHomeChannel.sidenav.openChat(targetChannel);
+		await poHomeChannel.tabs.btnMoreItems.click({ force: true });
+		await poHomeChannel.tabs.btnNotificationPreferences.click({ force: true });
+
+		await expect(poHomeChannel.tabs.notificationPreferences.getPreferenceByDevice('Desktop')).toContainText('Mentions');
+		await expect(poHomeChannel.tabs.notificationPreferences.getPreferenceByDevice('Mobile')).toContainText('Mentions');
+		await expect(poHomeChannel.tabs.notificationPreferences.getPreferenceByDevice('Email')).toContainText('Mentions');
+	});
 });

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

@@ -0,0 +1,41 @@
+import type { Locator, Page } from '@playwright/test';
+
+export class HomeFlextabNotificationPreferences {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	get btnSave(): Locator {
+		return this.page.locator('//aside//button[contains(text(), "Save")]');
+	}
+
+	getPreferenceByDevice(device: string): Locator {
+		return this.page.locator(`//div[@id="${device}Alert"]`);
+	}
+
+	async selectDropdownById(text: string): Promise<void> {
+		await this.page.locator(`//div[@id="${text}"]`).click();
+	}
+
+	async selectOptionByLabel(text: string): Promise<void> {
+		await this.page.locator(`li.rcx-option >> text="${text}"`).click();
+	}
+
+	async selectDevice(text: string): Promise<void> {
+		await this.page.locator(`[data-qa-id="${text}-notifications"]`).click();
+	}
+
+	async updateDevicePreference(device: string): Promise<void> {
+		await this.selectDevice(device);
+		await this.selectDropdownById(`${device}Alert`);
+		await this.selectOptionByLabel('Mentions');
+	}
+
+	async updateAllNotificaitonPreferences(): Promise<void> {
+		await this.updateDevicePreference('Desktop');
+		await this.updateDevicePreference('Mobile');
+		await this.updateDevicePreference('Email');
+	}
+}

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

@@ -1,6 +1,7 @@
 import type { Locator, Page } from '@playwright/test';
 
 import { HomeFlextabMembers } from './home-flextab-members';
+import { HomeFlextabNotificationPreferences } from './home-flextab-notificationPreferences';
 import { HomeFlextabRoom } from './home-flextab-room';
 
 export class HomeFlextab {
@@ -10,10 +11,13 @@ export class HomeFlextab {
 
 	readonly room: HomeFlextabRoom;
 
+	readonly notificationPreferences: HomeFlextabNotificationPreferences;
+
 	constructor(page: Page) {
 		this.page = page;
 		this.members = new HomeFlextabMembers(page);
 		this.room = new HomeFlextabRoom(page);
+		this.notificationPreferences = new HomeFlextabNotificationPreferences(page);
 	}
 
 	get btnTabMembers(): Locator {
@@ -24,6 +28,14 @@ export class HomeFlextab {
 		return this.page.locator('[data-qa-id=ToolBoxAction-info-circled]');
 	}
 
+	get btnMoreItems(): Locator {
+		return this.page.locator('[data-qa-id=ToolBox-Menu]');
+	}
+
+	get btnNotificationPreferences(): Locator {
+		return this.page.locator('[data-qa-id=ToolBoxAction-bell]');
+	}
+
 	get flexTabViewThreadMessage(): Locator {
 		return this.page.locator(
 			'div.thread-list.js-scroll-thread ul.thread [data-qa-type="message"]:last-child div.message-body-wrapper [data-qa-type="message-body"]',