Show a tile for an unloaded predecessor room if it has via_servers

src/components/views/messages/RoomPredecessorTile.tsx

@@ -18,6 +18,7 @@ limitations under the License.
 import React, { useCallback, useContext } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -29,6 +30,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import RoomContext from "../../../contexts/RoomContext";
 import { useRoomState } from "../../../hooks/useRoomState";
 import SettingsStore from "../../../settings/SettingsStore";
+import MatrixToPermalinkConstructor from "../../../utils/permalinks/MatrixToPermalinkConstructor";
 
 interface IProps {
     /** The m.room.create MatrixEvent that this tile represents */
@@ -86,18 +88,32 @@ 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 <></>;
-    }
-    const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor.roomId);
-    permalinkCreator.load();
-    let predecessorPermalink: string;
-    if (predecessor.eventId) {
-        predecessorPermalink = permalinkCreator.forEvent(predecessor.eventId);
-    } else {
-        predecessorPermalink = permalinkCreator.forRoom();
+        return (
+            <EventTileBubble
+                className="mx_CreateEvent"
+                title={_t("This room is a continuation of another conversation.")}
+                timestamp={timestamp}
+            >
+                <div className="mx_EventTile_body">
+                    <span className="mx_EventTile_tileError">
+                        {_t("Can't find the old version of this room (room id: %(roomId)s).", {
+                            roomId: predecessor.roomId,
+                        })}
+                    </span>
+                </div>
+            </EventTileBubble>
+        );
     }
+
+    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.")}
@@ -112,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);
+        }
+    }
 };

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx

@@ -44,6 +44,7 @@ interface IState {
     upgradeRecommendation?: IRecommendedVersion;
     oldRoomId?: string;
     oldEventId?: string;
+    oldViaServers?: string[];
     upgraded?: boolean;
 }
 
@@ -65,6 +66,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
             if (predecessor) {
                 additionalStateChanges.oldRoomId = predecessor.roomId;
                 additionalStateChanges.oldEventId = predecessor.eventId;
+                additionalStateChanges.oldViaServers = predecessor.viaServers;
             }
 
             this.setState({
@@ -88,6 +90,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
             action: Action.ViewRoom,
             room_id: this.state.oldRoomId,
             event_id: this.state.oldEventId,
+            via_servers: this.state.oldViaServers,
             metricsTrigger: "WebPredecessorSettings",
             metricsViaKeyboard: e.type !== "click",
         });

src/i18n/strings/en_EN.json

@@ -2464,8 +2464,9 @@
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
     "%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
-    "Click here to see older messages.": "Click here to see older messages.",
     "This room is a continuation of another conversation.": "This room is a continuation of another conversation.",
+    "Can't find the old version of this room (room id: %(roomId)s).": "Can't find the old version of this room (room id: %(roomId)s).",
+    "Click here to see older messages.": "Click here to see older messages.",
     "Add an Integration": "Add an Integration",
     "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?",
     "Edited at %(date)s": "Edited at %(date)s",

src/utils/permalinks/Permalinks.ts

@@ -96,7 +96,7 @@ export class RoomPermalinkCreator {
     // Some of the tests done by this class are relatively expensive, so normally
     // throttled to not happen on every update. Pass false as the shouldThrottle
     // param to disable this behaviour, eg. for tests.
-    public constructor(private room: Room, roomId: string | null = null, shouldThrottle = true) {
+    public constructor(private room: Room | null, roomId: string | null = null, shouldThrottle = true) {
         this.roomId = room ? room.roomId : roomId!;
 
         if (!this.roomId) {

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

@@ -26,7 +26,7 @@ import { RoomPredecessorTile } from "../../../../src/components/views/messages/R
 import { stubClient, upsertRoomStateEvents } from "../../../test-utils/test-utils";
 import { Action } from "../../../../src/dispatcher/actions";
 import RoomContext from "../../../../src/contexts/RoomContext";
-import { getRoomContext } from "../../../test-utils";
+import { filterConsole, getRoomContext } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 
 jest.mock("../../../../src/dispatcher/dispatcher");
@@ -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();
@@ -118,9 +131,14 @@ describe("<RoomPredecessorTile />", () => {
         );
     });
 
-    it("Shows an empty div if there is no predecessor", () => {
-        renderTile(roomNoPredecessors);
-        expect(screen.queryByText("Click here to see older messages.", { exact: false })).toBeNull();
+    describe("(filtering warnings about no predecessor)", () => {
+        filterConsole("RoomPredecessorTile unexpectedly used in a room with no predecessor.");
+
+        it("Shows an empty div if there is no predecessor", () => {
+            filterConsole;
+            renderTile(roomNoPredecessors);
+            expect(screen.queryByText("Click here to see older messages.", { exact: false })).toBeNull();
+        });
     });
 
     it("Opens the old room on click", async () => {
@@ -149,6 +167,19 @@ describe("<RoomPredecessorTile />", () => {
         );
     });
 
+    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();
+        });
+    });
+
     describe("When feature_dynamic_room_predecessors = true", () => {
         beforeEach(() => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation(
@@ -183,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",
+                );
+            });
+        });
     });
 });

test/components/views/settings/tabs/room/AdvancedRoomSettingsTab-test.tsx

@@ -47,7 +47,7 @@ describe("AdvancedRoomSettingsTab", () => {
         mocked(dis.dispatch).mockReset();
         mocked(room.findPredecessor).mockImplementation((msc3946: boolean) =>
             msc3946
-                ? { roomId: "old_room_id_via_predecessor" }
+                ? { roomId: "old_room_id_via_predecessor", viaServers: ["one.example.com", "two.example.com"] }
                 : { roomId: "old_room_id", eventId: "tombstone_event_id" },
         );
     });
@@ -138,6 +138,7 @@ describe("AdvancedRoomSettingsTab", () => {
                 action: Action.ViewRoom,
                 event_id: undefined,
                 room_id: "old_room_id_via_predecessor",
+                via_servers: ["one.example.com", "two.example.com"],
                 metricsTrigger: "WebPredecessorSettings",
                 metricsViaKeyboard: false,
             });

test/utils/permalinks/MatrixToPermalinkConstructor-test.ts

@@ -41,4 +41,20 @@ describe("MatrixToPermalinkConstructor", () => {
             );
         });
     });
+
+    describe("forRoom", () => {
+        it("constructs a link given a room ID and via servers", () => {
+            expect(peramlinkConstructor.forRoom("!myroom:example.com", ["one.example.com", "two.example.com"])).toEqual(
+                "https://matrix.to/#/!myroom:example.com?via=one.example.com&via=two.example.com",
+            );
+        });
+    });
+
+    describe("forEvent", () => {
+        it("constructs a link given an event ID, room ID and via servers", () => {
+            expect(
+                peramlinkConstructor.forEvent("!myroom:example.com", "$event4", ["one.example.com", "two.example.com"]),
+            ).toEqual("https://matrix.to/#/!myroom:example.com/$event4?via=one.example.com&via=two.example.com");
+        });
+    });
 });