Handle JSX in MELS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/elements/EventListSummary.tsx

@@ -33,7 +33,7 @@ interface IProps {
     // The list of room members for which to show avatars next to the summary
     summaryMembers?: RoomMember[];
     // The text to show as the summary of this event list
-    summaryText?: string;
+    summaryText?: string | JSX.Element;
     // An array of EventTiles to render when expanded
     children: ReactNode[];
     // Called when the event list expansion is toggled

src/components/views/elements/MemberEventListSummary.tsx

@@ -25,6 +25,7 @@ import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import { isValid3pidInvite } from "../../../RoomInvite";
 import EventListSummary from "./EventListSummary";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { join } from '../../../utils/ReactUtils';
 
 interface IProps extends Omit<ComponentProps<typeof EventListSummary>, "summaryText" | "summaryMembers"> {
     // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
@@ -89,7 +90,10 @@ export default class MemberEventListSummary extends React.Component<IProps> {
      * `Object.keys(eventAggregates)`.
      * @returns {string} the textual summary of the aggregated events that occurred.
      */
-    private generateSummary(eventAggregates: Record<string, string[]>, orderedTransitionSequences: string[]) {
+    private generateSummary(
+        eventAggregates: Record<string, string[]>,
+        orderedTransitionSequences: string[],
+    ): string | JSX.Element {
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
             const nameList = this.renderNameList(userNames);
@@ -118,7 +122,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
             return null;
         }
 
-        return summaries.join(", ");
+        return join(summaries, ", ");
     }
 
     /**
@@ -212,7 +216,11 @@ export default class MemberEventListSummary extends React.Component<IProps> {
      * @param {number} repeats the number of times the transition was repeated in a row.
      * @returns {string} the written Human Readable equivalent of the transition.
      */
-    private static getDescriptionForTransition(t: TransitionType, userCount: number, repeats: number) {
+    private static getDescriptionForTransition(
+        t: TransitionType,
+        userCount: number,
+        repeats: number,
+    ): string | JSX.Element {
         // The empty interpolations 'severalUsers' and 'oneUser'
         // are there only to show translators to non-English languages
         // that the verb is conjugated to plural or singular Subject.

src/utils/FormattingUtils.ts

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import { _t } from '../languageHandler';
+import { join } from './ReactUtils';
 
 /**
  * formats numbers to fit into ~3 characters, suitable for badge counts
@@ -103,7 +104,7 @@ export function getUserNameColorClass(userId: string): string {
  * @returns {string} a string constructed by joining `items` with a comma
  * between each item, but with the last item appended as " and [lastItem]".
  */
-export function formatCommaSeparatedList(items: string[], itemLimit?: number): string {
+export function formatCommaSeparatedList(items: Array<string | JSX.Element>, itemLimit?: number): string | JSX.Element {
     const remaining = itemLimit === undefined ? 0 : Math.max(
         items.length - itemLimit, 0,
     );
@@ -113,9 +114,9 @@ export function formatCommaSeparatedList(items: string[], itemLimit?: number): s
         return items[0];
     } else if (remaining > 0) {
         items = items.slice(0, itemLimit);
-        return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
+        return _t("%(items)s and %(count)s others", { items: join(items, ', '), count: remaining } );
     } else {
         const lastItem = items.pop();
-        return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
+        return _t("%(items)s and %(lastItem)s", { items: join(items, ', '), lastItem: lastItem });
     }
 }