From c9941dedb9c8963518104ec682f3d15151b75de9 Mon Sep 17 00:00:00 2001
From: Mihaela Dumitru <mihdmt@gmail.com>
Date: Wed, 26 Jan 2022 12:10:48 +0200
Subject: [PATCH] fix(notifications): support html descriptions

---
 .../notifications/components/web/Notification.js    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/react/features/notifications/components/web/Notification.js b/react/features/notifications/components/web/Notification.js
index 4fd035a58..c50f6e715 100644
--- a/react/features/notifications/components/web/Notification.js
+++ b/react/features/notifications/components/web/Notification.js
@@ -8,7 +8,7 @@ import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import QuestionsIcon from '@atlaskit/icon/glyph/questions';
-import React from 'react';
+import React, { isValidElement } from 'react';
 
 import { translate } from '../../../base/i18n';
 import Message from '../../../base/react/components/web/Message';
@@ -78,12 +78,19 @@ class Notification extends AbstractNotification<Props> {
      * @returns {ReactElement}
      */
     _renderDescription() {
-        const description = this._getDescription().join(' ');
+        const description = this._getDescription();
+
+        // Keeping in mind that:
+        // - Notifications that use the `translateToHtml` function get an element-based description array with one entry
+        // - Message notifications receive string-based description arrays that might need additional parsing
+        // We look for ready-to-render elements, and if present, we roll with them
+        // Otherwise, we use the Message component that accepts a string `text` prop
+        const shouldRenderHtml = description.length === 1 && isValidElement(description[0]);
 
         // the id is used for testing the UI
         return (
             <p data-testid = { this._getDescriptionKey() } >
-                <Message text = { description } />
+                { shouldRenderHtml ? description : <Message text = { description.join(' ') } /> }
             </p>
         );
     }