Ensure 1:1 DM rooms always have the same avatar colour

Author: weeman1337

src/components/views/avatars/RoomAvatar.tsx

@@ -29,6 +29,7 @@ import * as Avatar from "../../../Avatar";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
+import { LocalRoom } from "../../../models/LocalRoom";
 
 interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
     // Room may be left unset here, but if it is,
@@ -117,13 +118,26 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
+    private get roomIdName(): string {
+        const room = this.props.room;
+
+        if (room) {
+            const dmMapUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+            // If the room is a DM, we use the other user's ID for the color hash
+            // in order to match the room avatar with their avatar
+            if (dmMapUserId) return dmMapUserId;
+
+            if (room instanceof LocalRoom && room.targets.length === 1) {
+                return room.targets[0].userId;
+            }
+        }
+
+        return this.props.room.roomId || this.props.oobData.roomId;
+    }
+
     public render() {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
-
         const roomName = room?.name ?? oobData.name;
-        // If the room is a DM, we use the other user's ID for the color hash
-        // in order to match the room avatar with their avatar
-        const idName = room ? DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId : oobData.roomId;
 
         return (
             <BaseAvatar
@@ -132,7 +146,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
                     mx_RoomAvatar_isSpaceRoom: (room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space,
                 })}
                 name={roomName}
-                idName={idName}
+                idName={this.roomIdName}
                 urls={this.state.urls}
                 onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
             />

test/components/views/avatars/RoomAvatar-test.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { mocked } from "jest-mock";
+
+import RoomAvatar from "../../../../src/components/views/avatars/RoomAvatar";
+import { stubClient } from "../../../test-utils";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import { LocalRoom } from "../../../../src/models/LocalRoom";
+import * as AvatarModule from "../../../../src/Avatar";
+import { DirectoryMember } from "../../../../src/utils/direct-messages";
+
+describe("RoomAvatar", () => {
+    let client: MatrixClient;
+
+    beforeAll(() => {
+        client = stubClient();
+        const dmRoomMap = new DMRoomMap(client);
+        jest.spyOn(dmRoomMap, "getUserIdForRoomId");
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+        jest.spyOn(AvatarModule, "defaultAvatarUrlForString");
+    });
+
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    afterEach(() => {
+        mocked(DMRoomMap.shared().getUserIdForRoomId).mockReset();
+        mocked(AvatarModule.defaultAvatarUrlForString).mockClear();
+    });
+
+    it("should render as expected for a Room", () => {
+        const room = new Room("!room:example.com", client, client.getSafeUserId());
+        room.name = "test room";
+        expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
+        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(room.roomId);
+    });
+
+    it("should render as expected for a DM room", () => {
+        const userId = "@dm_user@example.com";
+        const room = new Room("!room:example.com", client, client.getSafeUserId());
+        room.name = "DM room";
+        mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue(userId);
+        expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
+        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
+    });
+
+    it("should render as expected for a LocalRoom", () => {
+        const userId = "@local_room_user@example.com";
+        const localRoom = new LocalRoom("!room:example.com", client, client.getSafeUserId());
+        localRoom.name = "local test room";
+        localRoom.targets.push(new DirectoryMember({ user_id: userId }));
+        expect(render(<RoomAvatar room={localRoom} />).container).toMatchSnapshot();
+        expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
+    });
+});

test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomAvatar should render as expected for a DM room 1`] = `
+<div>
+  <span
+    class="mx_BaseAvatar"
+    role="presentation"
+  >
+    <span
+      aria-hidden="true"
+      class="mx_BaseAvatar_initial"
+      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+    >
+      D
+    </span>
+    <img
+      alt=""
+      aria-hidden="true"
+      class="mx_BaseAvatar_image"
+      data-testid="avatar-img"
+      src="data:image/png;base64,00"
+      style="width: 36px; height: 36px;"
+    />
+  </span>
+</div>
+`;
+
+exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
+<div>
+  <span
+    class="mx_BaseAvatar"
+    role="presentation"
+  >
+    <span
+      aria-hidden="true"
+      class="mx_BaseAvatar_initial"
+      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+    >
+      L
+    </span>
+    <img
+      alt=""
+      aria-hidden="true"
+      class="mx_BaseAvatar_image"
+      data-testid="avatar-img"
+      src="data:image/png;base64,00"
+      style="width: 36px; height: 36px;"
+    />
+  </span>
+</div>
+`;
+
+exports[`RoomAvatar should render as expected for a Room 1`] = `
+<div>
+  <span
+    class="mx_BaseAvatar"
+    role="presentation"
+  >
+    <span
+      aria-hidden="true"
+      class="mx_BaseAvatar_initial"
+      style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+    >
+      T
+    </span>
+    <img
+      alt=""
+      aria-hidden="true"
+      class="mx_BaseAvatar_image"
+      data-testid="avatar-img"
+      src="data:image/png;base64,00"
+      style="width: 36px; height: 36px;"
+    />
+  </span>
+</div>
+`;