Display a tile for predecessor event if it contains via servers

Author: andybalaam

src/components/views/messages/RoomPredecessorTile.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext } from "react";
+import React, { ReactElement, useCallback, useContext } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
@@ -29,6 +29,8 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import RoomContext from "../../../contexts/RoomContext";
 import { useRoomState } from "../../../hooks/useRoomState";
 import SettingsStore from "../../../settings/SettingsStore";
+import { Room } from "matrix-js-sdk/src/matrix";
+import MatrixToPermalinkConstructor from "../../../utils/permalinks/MatrixToPermalinkConstructor";
 
 interface IProps {
     /** The m.room.create MatrixEvent that this tile represents */
@@ -86,7 +88,10 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
     }
 
     const prevRoom = MatrixClientPeg.get().getRoom(predecessor.roomId);
-    if (!prevRoom) {
+
+    // We need either the previous room, or some servers to find it with.
+    // Otherwise, we must bail out here
+    if (!prevRoom && !predecessor.viaServers) {
         logger.warn(`Failed to find predecessor room with id ${predecessor.roomId}`);
         return (
             <EventTileBubble
@@ -104,14 +109,11 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
             </EventTileBubble>
         );
     }
-    const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor.roomId);
-    permalinkCreator.load();
-    let predecessorPermalink: string;
-    if (predecessor.eventId) {
-        predecessorPermalink = permalinkCreator.forEvent(predecessor.eventId);
-    } else {
-        predecessorPermalink = permalinkCreator.forRoom();
-    }
+
+    const predecessorPermalink = prevRoom
+        ? createLinkWithRoom(prevRoom, predecessor.roomId, predecessor.eventId)
+        : createLinkWithoutRoom(predecessor.roomId, predecessor.viaServers);
+
     const link = (
         <a href={predecessorPermalink} onClick={onLinkClicked}>
             {_t("Click here to see older messages.")}
@@ -126,4 +128,23 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
             timestamp={timestamp}
         />
     );
+
+    function createLinkWithRoom(room: Room, roomId: string, eventId?: string): string {
+        const permalinkCreator = new RoomPermalinkCreator(room, roomId);
+        permalinkCreator.load();
+        if (eventId) {
+            return permalinkCreator.forEvent(eventId);
+        } else {
+            return permalinkCreator.forRoom();
+        }
+    }
+
+    function createLinkWithoutRoom(roomId: string, viaServers: string[], eventId?: string): string {
+        const matrixToPermalinkConstructor = new MatrixToPermalinkConstructor();
+        if (eventId) {
+            return matrixToPermalinkConstructor.forEvent(roomId, eventId, viaServers);
+        } else {
+            return matrixToPermalinkConstructor.forRoom(roomId, viaServers);
+        }
+    }
 };

test/components/views/messages/RoomPredecessorTile-test.tsx

@@ -62,6 +62,17 @@ describe("<RoomPredecessorTile />", () => {
         },
         event_id: "$create",
     });
+    const viaPredecessorEvent = new MatrixEvent({
+        type: EventType.RoomPredecessor,
+        state_key: "",
+        sender: userId,
+        room_id: roomId,
+        content: {
+            predecessor_room_id: "old_room_id_from_predecessor",
+            via_servers: ["a.example.com", "b.example.com"],
+        },
+        event_id: "$create",
+    });
     const predecessorEventWithEventId = new MatrixEvent({
         type: EventType.RoomPredecessor,
         state_key: "",
@@ -83,6 +94,8 @@ describe("<RoomPredecessorTile />", () => {
     upsertRoomStateEvents(roomCreateAndPredecessorWithEventId, [createEvent, predecessorEventWithEventId]);
     const roomNoPredecessors = new Room(roomId, client, userId);
     upsertRoomStateEvents(roomNoPredecessors, [createEventWithoutPredecessor]);
+    const roomCreateAndViaPredecessor = new Room(roomId, client, userId);
+    upsertRoomStateEvents(roomCreateAndViaPredecessor, [createEvent, viaPredecessorEvent]);
 
     beforeEach(() => {
         jest.clearAllMocks();
@@ -161,7 +174,7 @@ describe("<RoomPredecessorTile />", () => {
             mocked(MatrixClientPeg.get().getRoom).mockReturnValue(null);
         });
 
-        it("Shows an error", () => {
+        it("Shows an error if there are no via servers", () => {
             renderTile(roomCreateAndPredecessor);
             expect(screen.getByText("Can't find the old version of this room", { exact: false })).toBeInTheDocument();
         });
@@ -201,5 +214,28 @@ describe("<RoomPredecessorTile />", () => {
                 "https://matrix.to/#/old_room_id_from_predecessor/tombstone_event_id_from_predecessor",
             );
         });
+
+        describe("If the predecessor room is not found", () => {
+            filterConsole("Failed to find predecessor room with id old_room_id");
+
+            beforeEach(() => {
+                mocked(MatrixClientPeg.get().getRoom).mockReturnValue(null);
+            });
+
+            it("Shows an error if there are no via servers", () => {
+                renderTile(roomCreateAndPredecessor);
+                expect(
+                    screen.getByText("Can't find the old version of this room", { exact: false }),
+                ).toBeInTheDocument();
+            });
+
+            it("Shows a tile if there are via servers", () => {
+                renderTile(roomCreateAndViaPredecessor);
+                expect(screen.getByText("Click here to see older messages.")).toHaveAttribute(
+                    "href",
+                    "https://matrix.to/#/old_room_id_from_predecessor?via=a.example.com&via=b.example.com",
+                );
+            });
+        });
     });
 });