Use room name as room intro (#9231)

* Use roon name for room intro

* Fix types

* Revert caption var change

* Fix type issue

src/components/views/rooms/NewRoomIntro.tsx

@@ -55,10 +55,10 @@ const NewRoomIntro = () => {
         ? room.targets[0]?.userId
         : DMRoomMap.shared().getUserIdForRoomId(roomId);
 
-    let body;
+    let body: JSX.Element;
     if (dmPartner) {
         let introMessage = _t("This is the beginning of your direct message history with <displayName/>.");
-        let caption;
+        let caption: string | undefined;
 
         if (isLocalRoom) {
             introMessage = _t("Send your first message to invite <displayName/> to chat");
@@ -67,7 +67,7 @@ const NewRoomIntro = () => {
         }
 
         const member = room?.getMember(dmPartner);
-        const displayName = member?.rawDisplayName || dmPartner;
+        const displayName = room?.name || member?.rawDisplayName || dmPartner;
         body = <React.Fragment>
             <RoomAvatar
                 room={room}

test/components/views/rooms/NewRoomIntro-test.tsx

@@ -53,12 +53,14 @@ describe("NewRoomIntro", () => {
     describe("for a DM Room", () => {
         beforeEach(() => {
             jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(userId);
-            renderNewRoomIntro(client, new Room(roomId, client, client.getUserId()));
+            const room = new Room(roomId, client, client.getUserId());
+            room.name = "test_room";
+            renderNewRoomIntro(client, room);
         });
 
         it("should render the expected intro", () => {
-            const expected = `This is the beginning of your direct message history with ${userId}.`;
+            const expected = `This is the beginning of your direct message history with test_room.`;
-            screen.getByText((id, element) => element.tagName === "SPAN" && element.textContent === expected);
+            screen.getByText((id, element) => element?.tagName === "SPAN" && element?.textContent === expected);
         });
     });
 
@@ -66,13 +68,14 @@ describe("NewRoomIntro", () => {
         beforeEach(() => {
             jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(userId);
             const localRoom = new LocalRoom(roomId, client, client.getUserId());
+            localRoom.name = "test_room";
             localRoom.targets.push(new DirectoryMember({ user_id: userId }));
             renderNewRoomIntro(client, localRoom);
         });
 
         it("should render the expected intro", () => {
-            const expected = `Send your first message to invite ${userId} to chat`;
+            const expected = `Send your first message to invite test_room to chat`;
-            screen.getByText((id, element) => element.tagName === "SPAN" && element.textContent === expected);
+            screen.getByText((id, element) => element?.tagName === "SPAN" && element?.textContent === expected);
         });
     });
 });