Fix permalink via parsing for rooms

This adjusts the app local link parsing path to better handle `via`s in query
params. Previously this path only expected them when an event ID was also
present, but it's also valid to have `via`s without event IDs as well.

Fixes https://github.com/vector-im/element-web/issues/16345

src/utils/permalinks/ElementPermalinkConstructor.js

@@ -92,6 +92,11 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
             throw new Error("URL is missing parts");
         }
 
+        // Split optional query out of last part
+        const [lastPartMaybeWithQuery] = parts.splice(-1, 1);
+        const [lastPart, query = ""] = lastPartMaybeWithQuery.split("?");
+        parts.push(lastPart);
+
         const entityType = parts[0];
         const entity = parts[1];
         if (entityType === 'user') {
@@ -101,16 +106,9 @@ export default class ElementPermalinkConstructor extends PermalinkConstructor {
             // Probably a group, no further parsing needed.
             return PermalinkParts.forGroup(entity);
         } else if (entityType === 'room') {
-            // rejoin the rest because v3 events can have slashes (annoyingly)
+            // Rejoin the rest because v3 events can have slashes (annoyingly)
-            const eventIdAndQuery = parts.length > 2 ? parts.slice(2).join('/') : "";
+            const eventId = parts.length > 2 ? parts.slice(2).join('/') : "";
-            const secondaryParts = eventIdAndQuery.split("?");
+            const via = query.split(/&?via=/).filter(p => !!p);
-
-            const eventId = secondaryParts[0];
-            const query = secondaryParts.length > 1 ? secondaryParts[1] : "";
-
-            // TODO: Verify Element works with via args
-            const via = query.split("via=").filter(p => !!p);
-
             return PermalinkParts.forEvent(entity, eventId, via);
         } else {
             throw new Error("Unknown entity type in permalink");

test/components/views/messages/TextualBody-test.js

@@ -242,6 +242,38 @@ describe("<TextualBody />", () => {
                 'rel="noreferrer noopener">event link</a> with text</span>',
             );
         });
+
+        it("pills appear for room links with vias", () => {
+            const ev = mkEvent({
+                type: "m.room.message",
+                room: "room_id",
+                user: "sender",
+                content: {
+                    body:
+                        "A [room link](https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com" +
+                        "?via=example.com&via=bob.com) with vias",
+                    msgtype: "m.text",
+                    format: "org.matrix.custom.html",
+                    formatted_body:
+                        "A <a href=\"https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com" +
+                        "?via=example.com&amp;via=bob.com\">room link</a> with vias",
+                },
+                event: true,
+            });
+
+            const wrapper = mount(<TextualBody mxEvent={ev} />);
+            expect(wrapper.text()).toBe("A !ZxbRYPQXDXKGmDnJNg:example.com with vias");
+            const content = wrapper.find(".mx_EventTile_body");
+            expect(content.html()).toBe(
+                '<span class="mx_EventTile_body markdown-body" dir="auto">' +
+                'A <span><a class="mx_Pill mx_RoomPill" href="#/room/!ZxbRYPQXDXKGmDnJNg:example.com' +
+                '?via=example.com&amp;via=bob.com" ' +
+                'title="!ZxbRYPQXDXKGmDnJNg:example.com"><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
+                'src="mxc://avatar.url/room.png" ' +
+                'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
+                '!ZxbRYPQXDXKGmDnJNg:example.com</a></span> with vias</span>',
+            );
+        });
     });
 
     it("renders url previews correctly", () => {

test/test-utils.js

@@ -243,6 +243,7 @@ export function mkStubRoom(roomId = null) {
         on: jest.fn(),
         removeListener: jest.fn(),
         getDMInviter: jest.fn(),
+        getAvatarUrl: () => 'mxc://avatar.url/room.png',
     };
 }