chore: accept ReactNode as toast message (#35537)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: juliajforesti

apps/meteor/client/lib/toast.ts

@@ -1,9 +1,10 @@
 import { Emitter } from '@rocket.chat/emitter';
+import type { ReactNode } from 'react';
 
 type ToastMessagePayload =
 	| {
 			type: 'success' | 'info' | 'warning';
-			message: string;
+			message: ReactNode | string;
 			title?: string;
 			options?: object;
 	  }

apps/meteor/client/providers/ToastMessagesProvider.tsx

@@ -3,7 +3,7 @@ import { ToastMessagesContext } from '@rocket.chat/ui-contexts';
 import type { DefaultError, Query } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
-import { useEffect } from 'react';
+import { isValidElement, useEffect } from 'react';
 
 import { getErrorMessage } from '../lib/errorHandling';
 import { dispatchToastMessage, subscribeToToastMessages } from '../lib/toast';
@@ -47,9 +47,9 @@ const ToastMessageInnerProvider = ({ children }: ToastMessageInnerProviderProps)
 
 	useEffect(
 		() =>
-			subscribeToToastMessages(({ type, message, title = '' }) => {
+			subscribeToToastMessages(({ type, message, title = '', options }) => {
 				if (type === 'error' && typeof message === 'object') {
-					dispatchToastBar({ type, message: getErrorMessage(message) });
+					dispatchToastBar({ type, title, message: getErrorMessage(message), ...options });
 					return;
 				}
 
@@ -61,7 +61,12 @@ const ToastMessageInnerProvider = ({ children }: ToastMessageInnerProviderProps)
 					return;
 				}
 
-				dispatchToastBar({ type, message: title + message });
+				if (isValidElement(message)) {
+					dispatchToastBar({ type, title, message, ...options });
+					return;
+				}
+
+				dispatchToastBar({ type, title, message: String(message), ...options });
 			}),
 		[dispatchToastBar],
 	);

apps/meteor/package.json

@@ -249,7 +249,7 @@
 		"@rocket.chat/fuselage": "~0.61.0",
 		"@rocket.chat/fuselage-hooks": "~0.35.0",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
-		"@rocket.chat/fuselage-toastbar": "~0.34.0",
+		"@rocket.chat/fuselage-toastbar": "^0.35.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
 		"@rocket.chat/gazzodown": "workspace:^",

apps/uikit-playground/package.json

@@ -21,7 +21,7 @@
     "@rocket.chat/fuselage": "~0.61.0",
     "@rocket.chat/fuselage-hooks": "~0.35.0",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
-    "@rocket.chat/fuselage-toastbar": "~0.34.0",
+    "@rocket.chat/fuselage-toastbar": "^0.35.0",
     "@rocket.chat/fuselage-tokens": "~0.33.2",
     "@rocket.chat/fuselage-ui-kit": "workspace:~",
     "@rocket.chat/icons": "^0.40.0",

packages/ui-contexts/src/ToastMessagesContext.ts

@@ -1,9 +1,10 @@
+import type { ReactNode } from 'react';
 import { createContext } from 'react';
 
 type ToastMessagePayload =
 	| {
 			type: 'success' | 'info' | 'warning';
-			message: string;
+			message: ReactNode | string;
 			title?: string;
 			options?: object;
 	  }

yarn.lock

@@ -8323,9 +8323,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-toastbar@npm:~0.34.0":
-  version: 0.34.0
-  resolution: "@rocket.chat/fuselage-toastbar@npm:0.34.0"
+"@rocket.chat/fuselage-toastbar@npm:^0.35.0":
+  version: 0.35.0
+  resolution: "@rocket.chat/fuselage-toastbar@npm:0.35.0"
   dependencies:
     react-timing-hooks: "npm:~4.0.2"
   peerDependencies:
@@ -8335,7 +8335,7 @@ __metadata:
     "@rocket.chat/styled": "*"
     react: "*"
     react-dom: "*"
-  checksum: 10/09523efcd06151106d060405e92593af03eab2c619223bd02ace6f142a1481467d31b715a4c1208faf2ca76f2c3cdf7a4b8beee0a4f37d84c25fd3c346ac29b7
+  checksum: 10/d3d1a89ecc490ad0c913be39694855ffcf603a800c58231cf2806fedbf20bd254560dde82ae9093a523bb58c548f9e6a80d9c91b9b44e0f7f06e03d6c804d7a4
   languageName: node
   linkType: hard
 
@@ -8821,7 +8821,7 @@ __metadata:
     "@rocket.chat/fuselage": "npm:~0.61.0"
     "@rocket.chat/fuselage-hooks": "npm:~0.35.0"
     "@rocket.chat/fuselage-polyfills": "npm:~0.31.25"
-    "@rocket.chat/fuselage-toastbar": "npm:~0.34.0"
+    "@rocket.chat/fuselage-toastbar": "npm:^0.35.0"
     "@rocket.chat/fuselage-tokens": "npm:~0.33.2"
     "@rocket.chat/fuselage-ui-kit": "workspace:^"
     "@rocket.chat/gazzodown": "workspace:^"
@@ -10037,7 +10037,7 @@ __metadata:
     "@rocket.chat/fuselage": "npm:~0.61.0"
     "@rocket.chat/fuselage-hooks": "npm:~0.35.0"
     "@rocket.chat/fuselage-polyfills": "npm:~0.31.25"
-    "@rocket.chat/fuselage-toastbar": "npm:~0.34.0"
+    "@rocket.chat/fuselage-toastbar": "npm:^0.35.0"
     "@rocket.chat/fuselage-tokens": "npm:~0.33.2"
     "@rocket.chat/fuselage-ui-kit": "workspace:~"
     "@rocket.chat/icons": "npm:^0.40.0"