[NEW] Fuselage ToastBar

.yarnrc.yml

@@ -11,3 +11,4 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
 
 yarnPath: .yarn/releases/yarn-3.2.0.cjs
+checksumBehavior: 'ignore'

apps/meteor/client/lib/utils/handleError.ts

@@ -1,6 +1,8 @@
 import { escapeHTML } from '@rocket.chat/string-helpers';
 import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-import toastr from 'toastr';
+// import toastr from 'toastr';
+
+import { dispatchToastMessage } from '../toast';
 
 const hasXHR = (error: {}): error is { xhr: JQuery.jqXHR } => 'xhr' in error;
 
@@ -31,10 +33,19 @@ export const handleError = (error: {}, useToastr = true): JQuery<HTMLElement> |
 			return;
 		}
 
-		return toastr.error(
-			TAPi18n.__(message, Object.fromEntries(Object.entries(details).map(([key, value]) => [key, escapeHTML(TAPi18n.__(value))]))),
-			hasErrorTitle(details) ? TAPi18n.__(details.errorTitle) : undefined,
-		);
+		const i18message =
+			(hasErrorTitle(details) ? TAPi18n.__(details.errorTitle) : '') +
+			TAPi18n.__(message, Object.fromEntries(Object.entries(details).map(([key, value]) => [key, escapeHTML(TAPi18n.__(value))])));
+
+		dispatchToastMessage({
+			type: 'error',
+			message: i18message,
+		});
+
+		// return toastr.error(
+		// 	TAPi18n.__(message, Object.fromEntries(Object.entries(details).map(([key, value]) => [key, escapeHTML(TAPi18n.__(value))]))),
+		// 	hasErrorTitle(details) ? TAPi18n.__(details.errorTitle) : undefined,
+		// );
 	}
 
 	return escapeHTML(TAPi18n.__(message, Object.fromEntries(Object.entries(details).map(([key, value]) => [key, TAPi18n.__(value)]))));

apps/meteor/client/providers/ToastMessagesProvider.tsx

@@ -1,6 +1,7 @@
+import { ToastBarProvider, useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import { ToastMessagesContext } from '@rocket.chat/ui-contexts';
 import React, { FC, useEffect } from 'react';
-import toastr from 'toastr';
+// import toastr from 'toastr';
 
 import { dispatchToastMessage, subscribeToToastMessages } from '../lib/toast';
 import { handleError } from '../lib/utils/handleError';
@@ -9,10 +10,12 @@ const contextValue = {
 	dispatch: dispatchToastMessage,
 };
 
-const ToastMessagesProvider: FC = ({ children }) => {
+const ToastMessageInnerProvider: FC = ({ children }) => {
+	const dispatchToastBar = useToastBarDispatch();
+
 	useEffect(
 		() =>
-			subscribeToToastMessages(({ type, message, title, options }) => {
+			subscribeToToastMessages(({ type, message, title = '' }) => {
 				if (type === 'error' && typeof message === 'object') {
 					handleError(message);
 					return;
@@ -22,12 +25,24 @@ const ToastMessagesProvider: FC = ({ children }) => {
 					message = `[${message.name}] ${message.message}`;
 				}
 
-				toastr[type](message, title, options);
+				if (type === 'warning') {
+					return;
+				}
+
+				// toastr[type](message, title, options);
+				dispatchToastBar({ type, message: title + message });
 			}),
-		[],
+		[dispatchToastBar],
 	);
 
 	return <ToastMessagesContext.Provider children={children} value={contextValue} />;
 };
 
+// eslint-disable-next-line react/no-multi-comp
+const ToastMessagesProvider: FC = ({ children }) => (
+	<ToastBarProvider>
+		<ToastMessageInnerProvider children={children} />
+	</ToastBarProvider>
+);
+
 export default ToastMessagesProvider;

apps/meteor/package.json

@@ -194,6 +194,7 @@
 		"@rocket.chat/fuselage": "0.31.13",
 		"@rocket.chat/fuselage-hooks": "~0.31.12",
 		"@rocket.chat/fuselage-polyfills": "~0.31.12",
+		"@rocket.chat/fuselage-toastbar": "next",
 		"@rocket.chat/fuselage-tokens": "~0.31.12",
 		"@rocket.chat/fuselage-ui-kit": "~0.31.12",
 		"@rocket.chat/icons": "~0.31.12",

apps/meteor/tests/e2e/01-forgot-password.spec.ts

@@ -1,13 +1,16 @@
 import { test, expect } from '@playwright/test';
 
 import LoginPage from './utils/pageobjects/LoginPage';
+import Global from './utils/pageobjects/Global';
 import { VALID_EMAIL, INVALID_EMAIL, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from './utils/mocks/userAndPasswordMock';
 
 test.describe('[Forgot Password]', () => {
 	let loginPage: LoginPage;
+	let global: Global;
 
 	test.beforeEach(async ({ page, baseURL }) => {
 		loginPage = new LoginPage(page);
+		global = new Global(page);
 		const baseUrl = baseURL as string;
 		await loginPage.goto(baseUrl);
 		await loginPage.gotToForgotPassword();
@@ -34,6 +37,6 @@ test.describe('[Forgot Password]', () => {
 	test('expect user type a valid email', async () => {
 		await loginPage.emailField().type(VALID_EMAIL);
 		await loginPage.submit();
-		await expect(loginPage.getToastMessageSuccess()).toBeVisible();
+		await expect(global.getToastBarSuccess()).toBeVisible();
 	});
 });

apps/meteor/tests/e2e/03-login.spec.ts

@@ -2,14 +2,17 @@ import { test, expect } from '@playwright/test';
 
 import { validUser } from './utils/mocks/userAndPasswordMock';
 import LoginPage from './utils/pageobjects/LoginPage';
+import Global from './utils/pageobjects/Global';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';
 
 test.describe('[Login]', () => {
 	let loginPage: LoginPage;
+	let global: Global;
 
 	test.beforeEach(async ({ page, baseURL }) => {
 		const baseUrl = baseURL;
 		loginPage = new LoginPage(page);
+		global = new Global(page);
 		await loginPage.goto(baseUrl as string);
 	});
 
@@ -19,7 +22,7 @@ test.describe('[Login]', () => {
 			password: 'any_password1',
 		};
 		await loginPage.login(invalidUserPassword);
-		await expect(loginPage.getToastError()).toBeVisible();
+		await expect(global.getToastBarError()).toBeVisible();
 	});
 
 	test('expect user make login', async () => {

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

@@ -102,23 +102,23 @@ test.describe('[Channel]', () => {
 
 		test.describe('Adding a user to the room:', async () => {
 			test.beforeAll(async () => {
-				if (await global.toastAlert().isVisible()) {
-					await global.dismissToast();
+				if (await global.getToastBar().isVisible()) {
+					await global.dismissToastBar();
 				}
 				await flexTab.operateFlexTab('members', true);
 			});
 
 			test.afterAll(async () => {
-				if (await global.toastAlert().isVisible()) {
-					await global.dismissToast();
+				if (await global.getToastBar().isVisible()) {
+					await global.dismissToastBar();
 				}
 				await flexTab.operateFlexTab('members', false);
 			});
 
 			test('expect add people to the room', async () => {
 				await flexTab.addPeopleToChannel(targetUser);
 				hasUserAddedInChannel = true;
-				await expect(global.toastAlert()).toBeVisible();
+				await expect(global.getToastBarSuccess()).toBeVisible();
 			});
 		});
 
@@ -130,8 +130,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					if (await flexTab.mainSideBar().isVisible()) {
 						await flexTab.mainSideBarClose().click();
@@ -158,8 +158,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					if (await flexTab.mainSideBar().isVisible()) {
 						await flexTab.mainSideBarClose().click();
@@ -186,8 +186,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					if (await flexTab.mainSideBar().isVisible()) {
 						await flexTab.mainSideBarClose().click();
@@ -221,8 +221,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
 				});
@@ -243,8 +243,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
 				});
@@ -254,8 +254,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test('expect dismiss the toast', async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 				});
 
@@ -279,8 +279,8 @@ test.describe('[Channel]', () => {
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('members', false);
 				});
@@ -296,15 +296,15 @@ test.describe('[Channel]', () => {
 
 			test.describe('Channel name edit', async () => {
 				test.beforeAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 					await flexTab.operateFlexTab('info', true);
 				});
 
 				test.afterAll(async () => {
-					if (await global.toastAlert().isVisible()) {
-						await global.dismissToast();
+					if (await global.getToastBar().isVisible()) {
+						await global.dismissToastBar();
 					}
 
 					if (await flexTab.mainSideBar().isVisible()) {

apps/meteor/tests/e2e/omnichannel-departaments.spec.ts

@@ -1,6 +1,7 @@
 import { test, Page, expect } from '@playwright/test';
 
 import LoginPage from './utils/pageobjects/LoginPage';
+import Global from './utils/pageobjects/Global';
 import SideNav from './utils/pageobjects/SideNav';
 import Departments from './utils/pageobjects/Departments';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
@@ -10,6 +11,8 @@ test.describe('[Department]', () => {
 	let sideNav: SideNav;
 	let departments: Departments;
 	let page: Page;
+	let global: Global;
+
 	test.beforeAll(async ({ browser }) => {
 		page = await browser.newPage();
 		const basePath = '/';
@@ -18,6 +21,7 @@ test.describe('[Department]', () => {
 		loginPage = new LoginPage(page);
 		sideNav = new SideNav(page);
 		departments = new Departments(page);
+		global = new Global(page);
 
 		await loginPage.login(adminLogin);
 		await sideNav.sidebarUserMenu().click();
@@ -39,7 +43,7 @@ test.describe('[Department]', () => {
 		});
 		test.describe('[Create and Edit]', async () => {
 			test.afterEach(async () => {
-				await departments.toastSuccess.click();
+				await global.dismissToastBar();
 			});
 
 			test('expect new department is created', async () => {

apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts

@@ -1,4 +1,4 @@
-import { Page, Locator } from '@playwright/test';
+import { Page } from '@playwright/test';
 
 class BasePage {
 	private page: Page;
@@ -22,9 +22,5 @@ class BasePage {
 	public async keyboardPress(key: string): Promise<void> {
 		await this.getPage().keyboard.press(key);
 	}
-
-	get toastSuccess(): Locator {
-		return this.getPage().locator('#toast-container');
-	}
 }
 export default BasePage;

apps/meteor/tests/e2e/utils/pageobjects/Global.ts

@@ -40,8 +40,16 @@ class Global extends BasePage {
 		return this.getPage().locator('.rc-modal .upload-preview-title');
 	}
 
-	public toastAlert(): Locator {
-		return this.getPage().locator('.toast-message');
+	public getToastBar(): Locator {
+		return this.getPage().locator('.rcx-toastbar');
+	}
+
+	public getToastBarError(): Locator {
+		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--error');
+	}
+
+	public getToastBarSuccess(): Locator {
+		return this.getPage().locator('.rcx-toastbar.rcx-toastbar--success');
 	}
 
 	public async confirmPopup(): Promise<void> {
@@ -50,8 +58,8 @@ class Global extends BasePage {
 		await this.modalConfirm().click();
 	}
 
-	public async dismissToast(): Promise<void> {
-		await this.toastAlert().click();
+	public async dismissToastBar(): Promise<void> {
+		await this.getToastBar().locator('button').click();
 	}
 }
 

apps/meteor/tests/e2e/utils/pageobjects/LoginPage.ts

@@ -49,14 +49,6 @@ class LoginPage extends BasePage {
 		return this.getPage().locator('[name=confirm-pass]');
 	}
 
-	public getToastError(): Locator {
-		return this.getPage().locator('.toast');
-	}
-
-	public getToastMessageSuccess(): Locator {
-		return this.getPage().locator('.toast-message');
-	}
-
 	public emailOrUsernameInvalidText(): Locator {
 		return this.getPage().locator('[name=emailOrUsername]~.input-error');
 	}

apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts

@@ -384,7 +384,7 @@ export default class MainContent extends BasePage {
 				break;
 			case 'star':
 				await this.messageStar().click();
-				await expect(this.getPage().locator('div.toast-message:has-text("Message has been starred")')).toBeVisible();
+				await expect(this.getPage().locator('div.rcx-toastbar:has-text("Message has been starred")')).toBeVisible();
 				break;
 			case 'unread':
 				await this.messageUnread().click();