From ac3d6ab7dd91adfb8c0319244d29434716d24390 Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Wed, 21 Jun 2023 08:57:22 +0100
Subject: [PATCH] Add at room avatar for RTE (#11106)

* add at room avatar logic

* fix broken test

* fix TS error

* add param comment

* increase test coverage

* update code to solve conflict
---
 .../wysiwyg_composer/utils/autocomplete.ts    | 13 ++++++++-
 .../utils/autocomplete-test.ts                | 28 +++++++++++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
index a40f1075aa..c89e9d706b 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
@@ -89,6 +89,7 @@ export function getMentionDisplayText(completion: ICompletion, client: MatrixCli
  *
  * @param completion - the item selected from the autocomplete
  * @param client - the MatrixClient is required for us to look up the correct room mention text
+ * @param room - the room the composer is currently in
  * @returns an object of attributes containing HTMLAnchor attributes or data-* attributes
  */
 export function getMentionAttributes(
@@ -133,8 +134,18 @@ export function getMentionAttributes(
         attributes.set("data-mention-type", completion.type);
         attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
     } else if (completion.type === "at-room") {
-        // TODO add avatar logic for at-room
+        // logic as used in RoomPillPart.setAvatar in parts.ts, but now we know the current room
+        // from the arguments passed
+        let initialLetter = defaultLetterContent;
+        let avatarUrl = Avatar.avatarUrlForRoom(room, 16, 16, "crop");
+
+        if (!avatarUrl) {
+            initialLetter = Avatar.getInitialLetter(room.name) ?? defaultLetterContent;
+            avatarUrl = Avatar.defaultAvatarUrlForString(room.roomId);
+        }
+
         attributes.set("data-mention-type", completion.type);
+        attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
     }
 
     return attributes;
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
index b997e2fd96..2cb049932d 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
@@ -242,12 +242,36 @@ describe("getMentionAttributes", () => {
     });
 
     describe("at-room mentions", () => {
-        it("returns expected attributes", () => {
+        it("returns expected attributes when avatar url for room is truthyf", () => {
             const atRoomCompletion = createMockCompletion({ type: "at-room" });
 
             const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom);
 
-            expect(result).toEqual(new Map([["data-mention-type", "at-room"]]));
+            expect(result).toEqual(
+                new Map([
+                    ["data-mention-type", "at-room"],
+                    ["style", `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`],
+                ]),
+            );
+        });
+
+        it("returns expected style attributes when avatar url for room is falsy", () => {
+            const atRoomCompletion = createMockCompletion({ type: "at-room" });
+
+            // mock a single implementation of avatarUrlForRoom to make it falsy
+            mockAvatar.avatarUrlForRoom.mockReturnValueOnce(null);
+
+            const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom);
+
+            expect(result).toEqual(
+                new Map([
+                    ["data-mention-type", "at-room"],
+                    [
+                        "style",
+                        `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
+                    ],
+                ]),
+            );
         });
     });
 });