Factor out common function to generate the URLs

src/home/CallList.tsx

@@ -22,7 +22,7 @@ import { Room } from "matrix-js-sdk";
 import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
@@ -68,7 +68,9 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
   return (
     <div className={styles.callTile}>
       <Link
-        to={`/room/#?roomId=${room.roomId}`}
+        // note we explicitly omit the password here as we don't want it on this link because
+        // it's just for the user to navigate around and not for sharing
+        to={getRelativeRoomUrl(room.roomId, room.name)}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
@@ -82,7 +84,11 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
+        value={getAbsoluteRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined
+        )}
       />
     </div>
   );

src/home/RegisteredView.tsx

@@ -23,6 +23,7 @@ import { Heading } from "@vector-im/compound-web";
 
 import {
   createRoom,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
 } from "../matrix-utils";
@@ -86,7 +87,7 @@ export function RegisteredView({ client }: Props) {
           );
         }
 
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(getRelativeRoomUrl(roomId, roomName));
       }
 
       submit().catch((error) => {

src/home/UnauthenticatedView.tsx

@@ -27,6 +27,7 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import {
   createRoom,
+  getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
 } from "../matrix-utils";
@@ -125,7 +126,7 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(`/room/#?roomId=${roomId}`);
+        history.push(getRelativeRoomUrl(roomId, roomName));
       }
 
       submit().catch((error) => {

src/matrix-utils.ts

@@ -340,17 +340,33 @@ export async function createRoom(
 }
 
 /**
- * Returns a URL to that will load Element Call with the given room
+ * Returns an absolute URL to that will load Element Call with the given room
- * @param roomId of the room
+ * @param roomId ID of the room
- * @param password
+ * @param roomName Name of the room
- * @returns
+ * @param password e2e key for the room
  */
-export function getRoomUrl(
+export function getAbsoluteRoomUrl(
   roomId: string,
   roomName?: string,
   password?: string
 ): string {
-  return `${window.location.protocol}//${window.location.host}/#${
+  return `${window.location.protocol}//${
+    window.location.host
+  }${getRelativeRoomUrl(roomId, roomName, password)}`;
+}
+
+/**
+ * Returns a relative URL to that will load Element Call with the given room
+ * @param roomId ID of the room
+ * @param roomName Name of the room
+ * @param password e2e key for the room
+ */
+export function getRelativeRoomUrl(
+  roomId: string,
+  roomName?: string,
+  password?: string
+): string {
+  return `/room/#${
     roomName ? "/" + roomAliasLocalpartFromRoomName(roomName) : ""
   }?roomId=${roomId}${password ? "&" + PASSWORD_STRING + password : ""}`;
 }

src/room/AppSelectionModal.tsx

@@ -21,7 +21,7 @@ import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/
 
 import { Modal } from "../Modal";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
 
@@ -52,7 +52,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     const url = new URL(
       roomId === null
         ? window.location.href
-        : getRoomUrl(roomId, undefined, roomSharedKey ?? undefined)
+        : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined)
     );
     // Edit the URL to prevent the app selection prompt from appearing a second
     // time within the app, and to keep the user confined to the current room

src/room/ShareModal.tsx

@@ -20,7 +20,7 @@ import { Room } from "matrix-js-sdk";
 
 import { Modal } from "../Modal";
 import { CopyButton } from "../button";
-import { getRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./ShareModal.module.css";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
@@ -39,7 +39,11 @@ export const ShareModal: FC<Props> = ({ room, open, onDismiss }) => {
       <p>{t("Copy and share this call link")}</p>
       <CopyButton
         className={styles.copyButton}
-        value={getRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined)}
+        value={getAbsoluteRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined
+        )}
         data-testid="modal_inviteLink"
       />
     </Modal>