Call Guest Access, give user the option to change the acces level so they can generate a call link. (#12401)

* Ask the user to change the room access settings if they click the create link button.

Signed-off-by: Timo K <toger5@hotmail.de>

* disable call button if appropriate.

Signed-off-by: Timo K <toger5@hotmail.de>

* Add tests
Refactor tests to be in CallGuestLinkButton-test instead of the RoomHeader

Signed-off-by: Timo K <toger5@hotmail.de>

* add test for: no button if cannot change join rule and room not public nor knock

Signed-off-by: Timo K <toger5@hotmail.de>

* fix tests

Signed-off-by: Timo K <toger5@hotmail.de>

* add JoinRuleDialog tests

Signed-off-by: Timo K <toger5@hotmail.de>

* move spy into before each

Signed-off-by: Timo K <toger5@hotmail.de>

* Update src/i18n/strings/en_EN.json

Co-authored-by: Robin <robin@robin.town>

* remove inline css and update modal style

Signed-off-by: Timo K <toger5@hotmail.de>

* Update src/i18n/strings/en_EN.json

Co-authored-by: Robin <robin@robin.town>

* Update src/i18n/strings/en_EN.json

Co-authored-by: Robin <robin@robin.town>

* Invite state was not reactive.
Changing power level did not update the ui.

Signed-off-by: Timo K <toger5@hotmail.de>

* linter

Signed-off-by: Timo K <toger5@hotmail.de>

* make useGuestAccessInformation use useRoomState

Signed-off-by: Timo K <toger5@hotmail.de>

* fix tests and simplify logic

* fix tests

* review

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Robin <robin@robin.town>

res/css/_components.pcss

@@ -272,6 +272,7 @@
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
+@import "./views/rooms/_CallGuestLinkButton.pcss";
 @import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";

res/css/views/rooms/_CallGuestLinkButton.pcss

@@ -0,0 +1,7 @@
+.mx_JoinRuleDialog {
+    .mx_JoinRuleDialogButtons {
+        display: flex;
+        column-gap: 5px;
+        justify-content: center;
+    }
+}

src/components/views/context_menus/RoomContextMenu.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { useContext } from "react";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { Room, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
@@ -117,9 +117,9 @@ const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
     const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
     const isVideoRoom =
         videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));
-
+    const canInvite = useEventEmitterState(cli, RoomMemberEvent.PowerLevel, () => room.canInvite(cli.getUserId()!));
     let inviteOption: JSX.Element | undefined;
-    if (room.canInvite(cli.getUserId()!) && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {
+    if (canInvite && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {
         const onInviteClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -32,7 +32,7 @@ import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-s
 import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
 import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
-import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@@ -393,6 +393,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
     const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
         RoomListStore.instance.getTagsForRoom(room),
     );
+    const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
     const isFavorite = roomTags.includes(DefaultTagID.Favourite);
 
     return (
@@ -439,7 +440,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
             <MenuItem
                 Icon={UserAddIcon}
                 label={_t("action|invite")}
-                disabled={!canInviteTo(room)}
+                disabled={!canInviteToState}
                 onSelect={() => inviteToRoom(room)}
             />
             <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />

src/components/views/rooms/RoomHeader.tsx

@@ -18,7 +18,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
-import { Icon as ExternalLinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
 import { Icon as CloseCallIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
 import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
@@ -27,7 +26,6 @@ import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error
 import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { useRoomName } from "../../../hooks/useRoomName";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -56,8 +54,7 @@ import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
 import { RoomKnocksBar } from "./RoomKnocksBar";
 import { isVideoRoom } from "../../../utils/video-rooms";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
-import Modal from "../../../Modal";
+import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
-import ShareDialog from "../dialogs/ShareDialog";
 
 export default function RoomHeader({
     room,
@@ -82,8 +79,6 @@ export default function RoomHeader({
         videoCallClick,
         toggleCallMaximized: toggleCall,
         isViewingCall,
-        generateCallLink,
-        canGenerateCallLink,
         isConnectedToCall,
         hasActiveCallSession,
         callOptions,
@@ -124,20 +119,6 @@ export default function RoomHeader({
 
     const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
 
-    const shareClick = useCallback(() => {
-        try {
-            // generateCallLink throws if the permissions are not met
-            const target = generateCallLink();
-            Modal.createDialog(ShareDialog, {
-                target,
-                customTitle: _t("share|share_call"),
-                subtitle: _t("share|share_call_subtitle"),
-            });
-        } catch (e) {
-            logger.error("Could not generate call link.", e);
-        }
-    }, [generateCallLink]);
-
     const toggleCallButton = (
         <Tooltip label={isViewingCall ? _t("voip|minimise_call") : _t("voip|maximise_call")}>
             <IconButton onClick={toggleCall}>
@@ -145,13 +126,7 @@ export default function RoomHeader({
             </IconButton>
         </Tooltip>
     );
-    const createExternalLinkButton = (
+
-        <Tooltip label={_t("voip|get_call_link")}>
-            <IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
-                <ExternalLinkIcon />
-            </IconButton>
-        </Tooltip>
-    );
     const joinCallButton = (
         <Tooltip label={videoCallDisabledReason ?? _t("voip|video_call")}>
             <Button
@@ -227,7 +202,10 @@ export default function RoomHeader({
     const voiceCallButton = (
         <Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
             <IconButton
-                disabled={!!voiceCallDisabledReason}
+                // We need both: isViewingCall and isConnectedToCall
+                //  - in the Lobby we are viewing a call but are not connected to it.
+                //  - in pip view we are connected to the call but not viewing it.
+                disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
                 aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
                 onClick={(ev) => voiceCallClick(ev, callOptions[0])}
             >
@@ -335,7 +313,8 @@ export default function RoomHeader({
                             </Tooltip>
                         );
                     })}
-                    {isViewingCall && canGenerateCallLink && createExternalLinkButton}
+
+                    {isViewingCall && <CallGuestLinkButton room={room} />}
                     {((isConnectedToCall && isViewingCall) || isVideoRoom(room)) && <VideoRoomChatButton room={room} />}
 
                     {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (

src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx

@@ -0,0 +1,167 @@
+/*
+Copyright 2024 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 { Icon as ExternalLinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
+import { Button, IconButton, Tooltip } from "@vector-im/compound-web";
+import React, { useCallback } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+import { EventType, IJoinRuleEventContent, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../../Modal";
+import ShareDialog from "../../dialogs/ShareDialog";
+import { _t } from "../../../../languageHandler";
+import SettingsStore from "../../../../settings/SettingsStore";
+import { calculateRoomVia } from "../../../../utils/permalinks/Permalinks";
+import BaseDialog from "../../dialogs/BaseDialog";
+import { useGuestAccessInformation } from "../../../../hooks/room/useGuestAccessInformation";
+
+/**
+ * Display a button to open a dialog to share a link to the call using a element call guest spa url (`element_call:guest_spa_url` in the EW config).
+ * @param room
+ * @returns Nothing if there is not the option to share a link (No guest_spa_url is set) or a button to open a dialog to share the link.
+ */
+export const CallGuestLinkButton: React.FC<{ room: Room }> = ({ room }) => {
+    const { canInviteGuests, guestSpaUrl, isRoomJoinable, canInvite } = useGuestAccessInformation(room);
+
+    const generateCallLink = useCallback(() => {
+        if (!isRoomJoinable()) throw new Error("Cannot create link for room that users can not join without invite.");
+        if (!guestSpaUrl) throw new Error("No guest SPA url for external links provided.");
+        const url = new URL(guestSpaUrl);
+        url.pathname = "/room/";
+        // Set params for the sharable url
+        url.searchParams.set("roomId", room.roomId);
+        if (room.hasEncryptionStateEvent()) url.searchParams.set("perParticipantE2EE", "true");
+        for (const server of calculateRoomVia(room)) {
+            url.searchParams.set("viaServers", server);
+        }
+
+        // Move params into hash
+        url.hash = "/" + room.name + url.search;
+        url.search = "";
+
+        logger.info("Generated element call external url:", url);
+        return url;
+    }, [guestSpaUrl, isRoomJoinable, room]);
+
+    const showLinkModal = useCallback(() => {
+        try {
+            // generateCallLink throws if the invite rules are not met
+            const target = generateCallLink();
+            Modal.createDialog(ShareDialog, {
+                target,
+                customTitle: _t("share|share_call"),
+                subtitle: _t("share|share_call_subtitle"),
+            });
+        } catch (e) {
+            logger.error("Could not generate call link.", e);
+        }
+    }, [generateCallLink]);
+
+    const shareClick = useCallback(() => {
+        if (isRoomJoinable()) {
+            showLinkModal();
+        } else {
+            // the room needs to be set to public or knock to generate a link
+            Modal.createDialog(JoinRuleDialog, {
+                room,
+                // If the user cannot invite the Knocking is not given as an option.
+                canInvite,
+            }).finished.then(() => {
+                // we need to use the function here because the callback got called before the state was updated.
+                if (isRoomJoinable()) showLinkModal();
+            });
+        }
+    }, [isRoomJoinable, showLinkModal, room, canInvite]);
+
+    return (
+        <>
+            {canInviteGuests && (
+                <Tooltip label={_t("voip|get_call_link")}>
+                    <IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
+                        <ExternalLinkIcon />
+                    </IconButton>
+                </Tooltip>
+            )}
+        </>
+    );
+};
+
+/**
+ * A dialog to change the join rule of a room to public or knock.
+ * @param room The room to change the join rule of.
+ * @param onFinished Callback that is getting called if the dialog wants to close.
+ */
+export const JoinRuleDialog: React.FC<{
+    onFinished(): void;
+    room: Room;
+    canInvite: boolean;
+}> = ({ onFinished, room, canInvite }) => {
+    const askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
+    const [isUpdating, setIsUpdating] = React.useState<undefined | JoinRule>(undefined);
+    const changeJoinRule = useCallback(
+        async (newRule: JoinRule) => {
+            if (isUpdating !== undefined) return;
+            setIsUpdating(newRule);
+            await room.client.sendStateEvent(
+                room.roomId,
+                EventType.RoomJoinRules,
+                {
+                    join_rule: newRule,
+                } as IJoinRuleEventContent,
+                "",
+            );
+            // Show the dialog for a bit to give the user feedback
+            setTimeout(() => onFinished(), 500);
+        },
+        [isUpdating, onFinished, room.client, room.roomId],
+    );
+    return (
+        <BaseDialog title={_t("update_room_access_modal|title")} onFinished={onFinished} className="mx_JoinRuleDialog">
+            <p>{_t("update_room_access_modal|description")}</p>
+            <div className="mx_JoinRuleDialogButtons">
+                {askToJoinEnabled && canInvite && (
+                    <Button
+                        kind="secondary"
+                        className="mx_Dialog_nonDialogButton"
+                        disabled={isUpdating === JoinRule.Knock}
+                        onClick={() => changeJoinRule(JoinRule.Knock)}
+                    >
+                        {_t("action|ask_to_join")}
+                    </Button>
+                )}
+                <Button
+                    className="mx_Dialog_nonDialogButton"
+                    kind="destructive"
+                    disabled={isUpdating === JoinRule.Public}
+                    onClick={() => changeJoinRule(JoinRule.Public)}
+                >
+                    {_t("common|public")}
+                </Button>
+            </div>
+            <p>{_t("update_room_access_modal|dont_change_description")}</p>
+            <div className="mx_JoinRuleDialogButtons">
+                <Button
+                    kind="tertiary"
+                    className="mx_Dialog_nonDialogButton"
+                    onClick={() => {
+                        if (isUpdating === undefined) onFinished();
+                    }}
+                >
+                    {_t("update_room_access_modal|no_change")}
+                </Button>
+            </div>
+        </BaseDialog>
+    );
+};

src/hooks/room/useGuestAccessInformation.ts

@@ -0,0 +1,58 @@
+/*
+Copyright 2024 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 { useMemo } from "react";
+import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+
+import SdkConfig from "../../SdkConfig";
+import { useRoomState } from "../useRoomState";
+
+interface GuestAccessInformation {
+    canInviteGuests: boolean;
+    guestSpaUrl?: string;
+    isRoomJoinable: () => boolean;
+    canInvite: boolean;
+}
+
+/**
+ * Helper to retrieve the guest access related information for a room.
+ * @param room
+ * @returns The GuestAccessInformation which helps decide what options the user should be given.
+ */
+export const useGuestAccessInformation = (room: Room): GuestAccessInformation => {
+    const guestSpaUrl = useMemo(() => {
+        return SdkConfig.get("element_call").guest_spa_url;
+    }, []);
+
+    // We use the direct function only in functions triggered by user interaction to avoid computation on every render.
+    const { joinRule, canInvite, canChangeJoinRule } = useRoomState(room, (roomState) => ({
+        joinRule: room.getJoinRule(),
+        canInvite: room.canInvite(room.myUserId),
+        canChangeJoinRule: roomState.maySendStateEvent(EventType.RoomJoinRules, room.myUserId),
+    }));
+    const isRoomJoinable = useMemo(
+        () => joinRule === JoinRule.Public || (joinRule === JoinRule.Knock && canInvite),
+        [canInvite, joinRule],
+    );
+    const canInviteGuests = useMemo(
+        () => (canChangeJoinRule || isRoomJoinable) && guestSpaUrl !== undefined,
+        [canChangeJoinRule, isRoomJoinable, guestSpaUrl],
+    );
+
+    const isRoomJoinableFunction = (): boolean =>
+        room.getJoinRule() === JoinRule.Public || (joinRule === JoinRule.Knock && room.canInvite(room.myUserId));
+    return { canInviteGuests, guestSpaUrl, isRoomJoinable: isRoomJoinableFunction, canInvite };
+};

src/hooks/room/useRoomCall.ts

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { JoinRule, Room } from "matrix-js-sdk/src/matrix";
+import { Room } from "matrix-js-sdk/src/matrix";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { useFeatureEnabled } from "../useSettings";
 import SdkConfig from "../../SdkConfig";
@@ -27,7 +26,7 @@ import { useWidgets } from "../../components/views/right_panel/RoomSummaryCard";
 import { WidgetType } from "../../widgets/WidgetType";
 import { useCall, useConnectionState, useParticipantCount } from "../useCall";
 import { useRoomMemberCount } from "../useRoomMembers";
-import { Call, ConnectionState, ElementCall } from "../../models/Call";
+import { ConnectionState, ElementCall } from "../../models/Call";
 import { placeCall } from "../../utils/room/placeCall";
 import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import { useRoomState } from "../useRoomState";
@@ -40,8 +39,8 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../dispatcher/actions";
 import { CallStore, CallStoreEvent } from "../../stores/CallStore";
-import { calculateRoomVia } from "../../utils/permalinks/Permalinks";
 import { isVideoRoom } from "../../utils/video-rooms";
+import { useGuestAccessInformation } from "./useGuestAccessInformation";
 
 export enum PlatformCallType {
     ElementCall,
@@ -81,8 +80,6 @@ export const useRoomCall = (
     videoCallClick(evt: React.MouseEvent | undefined, selectedType: PlatformCallType): void;
     toggleCallMaximized: () => void;
     isViewingCall: boolean;
-    generateCallLink: () => URL;
-    canGenerateCallLink: boolean;
     isConnectedToCall: boolean;
     hasActiveCallSession: boolean;
     callOptions: PlatformCallType[];
@@ -93,10 +90,6 @@ export const useRoomCall = (
         return SdkConfig.get("element_call").use_exclusively;
     }, []);
 
-    const guestSpaUrl = useMemo(() => {
-        return SdkConfig.get("element_call").guest_spa_url;
-    }, []);
-
     const hasLegacyCall = useEventEmitterState(
         LegacyCallHandler.instance,
         LegacyCallHandlerEvent.CallsChanged,
@@ -123,11 +116,9 @@ export const useRoomCall = (
     // room
     const memberCount = useRoomMemberCount(room);
 
-    const [mayEditWidgets, mayCreateElementCalls, canJoinWithoutInvite] = useRoomState(room, () => [
+    const [mayEditWidgets, mayCreateElementCalls] = useRoomState(room, () => [
         room.currentState.mayClientSendStateEvent("im.vector.modular.widgets", room.client),
         room.currentState.mayClientSendStateEvent(ElementCall.MEMBER_EVENT_TYPE.name, room.client),
-        room.getJoinRule() === "public" || room.getJoinRule() === JoinRule.Knock,
-        /*|| room.getJoinRule() === JoinRule.Restricted <- rule for joining via token?*/
     ]);
 
     // The options provided to the RoomHeader.
@@ -180,17 +171,16 @@ export const useRoomCall = (
     useEffect(() => {
         updateWidgetState();
     }, [room, jitsiWidget, groupCall, updateWidgetState]);
-    const [activeCalls, setActiveCalls] = useState<Call[]>(Array.from(CallStore.instance.activeCalls));
-    useEventEmitter(CallStore.instance, CallStoreEvent.ActiveCalls, () => {
-        setActiveCalls(Array.from(CallStore.instance.activeCalls));
-    });
     const [canPinWidget, setCanPinWidget] = useState(false);
     const [widgetPinned, setWidgetPinned] = useState(false);
     // We only want to prompt to pin the widget if it's not element call based.
     const isECWidget = WidgetType.CALL.matches(widget?.type ?? "");
     const promptPinWidget = !isECWidget && canPinWidget && !widgetPinned;
-    const userId = room.client.getUserId();
+    const activeCalls = useEventEmitterState(CallStore.instance, CallStoreEvent.ActiveCalls, () =>
-    const canInviteToRoom = userId ? room.canInvite(userId) : false;
+        Array.from(CallStore.instance.activeCalls),
+    );
+    const { canInviteGuests } = useGuestAccessInformation(room);
+
     const state = useMemo((): State => {
         if (activeCalls.find((call) => call.roomId != room.roomId)) {
             return State.Ongoing;
@@ -201,9 +191,7 @@ export const useRoomCall = (
         if (hasLegacyCall) {
             return State.Ongoing;
         }
-        const canCallAlone =
+        if (memberCount <= 1 && !canInviteGuests) {
-            canInviteToRoom && (room.getJoinRule() === "public" || room.getJoinRule() === JoinRule.Knock);
-        if (!(memberCount > 1 || canCallAlone)) {
             return State.NoOneHere;
         }
 
@@ -213,7 +201,7 @@ export const useRoomCall = (
         return State.NoCall;
     }, [
         activeCalls,
-        canInviteToRoom,
+        canInviteGuests,
         hasGroupCall,
         hasJitsiWidget,
         hasLegacyCall,
@@ -222,7 +210,7 @@ export const useRoomCall = (
         mayEditWidgets,
         memberCount,
         promptPinWidget,
-        room,
+        room.roomId,
     ]);
 
     const voiceCallClick = useCallback(
@@ -278,26 +266,6 @@ export const useRoomCall = (
         });
     }, [isViewingCall, room.roomId]);
 
-    const generateCallLink = useCallback(() => {
-        if (!canJoinWithoutInvite)
-            throw new Error("Cannot create link for room that users can not join without invite.");
-        if (!guestSpaUrl) throw new Error("No guest SPA url for external links provided.");
-        const url = new URL(guestSpaUrl);
-        url.pathname = "/room/";
-        // Set params for the sharable url
-        url.searchParams.set("roomId", room.roomId);
-        if (room.hasEncryptionStateEvent()) url.searchParams.set("perParticipantE2EE", "true");
-        for (const server of calculateRoomVia(room)) {
-            url.searchParams.set("viaServers", server);
-        }
-
-        // Move params into hash
-        url.hash = "/" + room.name + url.search;
-        url.search = "";
-
-        logger.info("Generated element call external url:", url);
-        return url;
-    }, [canJoinWithoutInvite, guestSpaUrl, room]);
     /**
      * We've gone through all the steps
      */
@@ -308,8 +276,6 @@ export const useRoomCall = (
         videoCallClick,
         toggleCallMaximized: toggleCallMaximized,
         isViewingCall: isViewingCall,
-        generateCallLink,
-        canGenerateCallLink: guestSpaUrl !== undefined && canJoinWithoutInvite,
         isConnectedToCall: isConnectedToCall,
         hasActiveCallSession: hasActiveCallSession,
         callOptions,

src/i18n/strings/en_EN.json

@@ -3662,6 +3662,12 @@
         "toast_title": "Update %(brand)s",
         "unavailable": "Unavailable"
     },
+    "update_room_access_modal": {
+        "description": "To create a share link, you need to allow guests to join this room. This may make the room less secure. When you're done with the call, you can make the room private again.",
+        "dont_change_description": "Alternatively, you can hold the call in a separate room.",
+        "no_change": "I don't want to change the access level.",
+        "title": "Change the room access level"
+    },
     "upload_failed_generic": "The file '%(fileName)s' failed to upload.",
     "upload_failed_size": "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",
     "upload_failed_title": "Upload Failed",

test/components/views/rooms/RoomHeader-test.tsx

@@ -61,8 +61,7 @@ import { _t } from "../../../../src/languageHandler";
 import * as UseCall from "../../../../src/hooks/useCall";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import WidgetStore, { IApp } from "../../../../src/stores/WidgetStore";
-import ShareDialog from "../../../../src/components/views/dialogs/ShareDialog";
+
-import Modal from "../../../../src/Modal";
 jest.mock("../../../../src/utils/ShieldUtils");
 
 function getWrapper(): RenderOptions {
@@ -382,10 +381,32 @@ describe("RoomHeader", () => {
         it("can call if you have no friends but can invite friends", () => {
             mockRoomMembers(room, 1);
             // go through all the different `canInvite` and `getJoinRule` combinations
+
+            // check where we can't do anything but can upgrade
+            jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(true);
             jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
             jest.spyOn(room, "canInvite").mockReturnValue(false);
+            const guestSpaUrlMock = jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            });
+            const { container: containerNoInviteNotPublicCanUpgradeAccess } = render(
+                <RoomHeader room={room} />,
+                getWrapper(),
+            );
+            expect(
+                queryAllByLabelText(containerNoInviteNotPublicCanUpgradeAccess, "There's no one here to call"),
+            ).toHaveLength(0);
+
+            // dont allow upgrading anymore and go through the other combinations
+            jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(false);
+            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
+            jest.spyOn(room, "canInvite").mockReturnValue(false);
+            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            });
             const { container: containerNoInviteNotPublic } = render(<RoomHeader room={room} />, getWrapper());
             expect(queryAllByLabelText(containerNoInviteNotPublic, "There's no one here to call")).toHaveLength(2);
+
             jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
             jest.spyOn(room, "canInvite").mockReturnValue(false);
             const { container: containerNoInvitePublic } = render(<RoomHeader room={room} />, getWrapper());
@@ -400,6 +421,13 @@ describe("RoomHeader", () => {
             jest.spyOn(room, "canInvite").mockReturnValue(true);
             const { container: containerInvitePublic } = render(<RoomHeader room={room} />, getWrapper());
             expect(queryAllByLabelText(containerInvitePublic, "There's no one here to call")).toHaveLength(0);
+
+            // last we can allow everything but without guest_spa_url nothing will work
+            guestSpaUrlMock.mockRestore();
+            const { container: containerAllAllowedButNoGuestSpaUrl } = render(<RoomHeader room={room} />, getWrapper());
+            expect(
+                queryAllByLabelText(containerAllAllowedButNoGuestSpaUrl, "There's no one here to call"),
+            ).toHaveLength(2);
         });
 
         it("calls using legacy or jitsi", async () => {
@@ -516,39 +544,12 @@ describe("RoomHeader", () => {
             const { container } = render(<RoomHeader room={room} />, getWrapper());
             getByLabelText(container, "Close lobby");
         });
-    });
-
-    describe("External conference", () => {
-        const oldGet = SdkConfig.get;
-        beforeEach(() => {
-            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
-                if (key === "element_call") {
-                    return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
-                }
-                return oldGet(key);
-            });
-            mockRoomMembers(room, 3);
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
-        });
-
-        it("shows the external conference if the room has public join rules", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-
-            const { container } = render(<RoomHeader room={room} />, getWrapper());
-            expect(getByLabelText(container, _t("voip|get_call_link"))).toBeInTheDocument();
-        });
-
-        it("shows the external conference if the room has Knock join rules", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
-
-            const { container } = render(<RoomHeader room={room} />, getWrapper());
-            expect(getByLabelText(container, _t("voip|get_call_link"))).toBeInTheDocument();
-        });
 
         it("don't show external conference button if the call is not shown", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
             jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(false);
-
+            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            });
             let { container } = render(<RoomHeader room={room} />, getWrapper());
             expect(screen.queryByLabelText(_t("voip|get_call_link"))).not.toBeInTheDocument();
 
@@ -558,69 +559,6 @@ describe("RoomHeader", () => {
 
             expect(getByLabelText(container, _t("voip|get_call_link"))).toBeInTheDocument();
         });
-
-        it("don't show external conference button if now guest spa link is configured", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
-
-            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
-                if (key === "element_call") {
-                    return { url: "https://example2.com" };
-                }
-                return oldGet(key);
-            });
-
-            render(<RoomHeader room={room} />, getWrapper());
-
-            // We only change the SdkConfig and show that this everything else is
-            // configured so that the call link button is shown.
-
-            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
-                if (key === "element_call") {
-                    return { guest_spa_url: "https://guest_spa_url.com", url: "https://example2.com" };
-                }
-                return oldGet(key);
-            });
-
-            expect(screen.queryByLabelText(_t("voip|get_call_link"))).not.toBeInTheDocument();
-            const { container } = render(<RoomHeader room={room} />, getWrapper());
-            expect(getByLabelText(container, _t("voip|get_call_link"))).toBeInTheDocument();
-        });
-        it("opens the share dialog with the correct share link in an encrypted room", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
-            jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(true);
-
-            const { container } = render(<RoomHeader room={room} />, getWrapper());
-            const modalSpy = jest.spyOn(Modal, "createDialog");
-            fireEvent.click(getByLabelText(container, _t("voip|get_call_link")));
-            const target =
-                "https://guest_spa_url.com/room/#/!1:example.org?roomId=%211%3Aexample.org&perParticipantE2EE=true&viaServers=example.org";
-            expect(modalSpy).toHaveBeenCalled();
-            const arg0 = modalSpy.mock.calls[0][0];
-            const arg1 = modalSpy.mock.calls[0][1] as any;
-            expect(arg0).toEqual(ShareDialog);
-            const { customTitle, subtitle } = arg1;
-            expect({ customTitle, subtitle }).toEqual({
-                customTitle: "Conference invite link",
-                subtitle: _t("share|share_call_subtitle"),
-            });
-            expect(arg1.target.toString()).toEqual(target);
-        });
-
-        it("share dialog has correct link in an unencrypted room", () => {
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-            jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(false);
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
-
-            const { container } = render(<RoomHeader room={room} />, getWrapper());
-            const modalSpy = jest.spyOn(Modal, "createDialog");
-            fireEvent.click(getByLabelText(container, _t("voip|get_call_link")));
-            const target =
-                "https://guest_spa_url.com/room/#/!1:example.org?roomId=%211%3Aexample.org&viaServers=example.org";
-            const arg1 = modalSpy.mock.calls[0][1] as any;
-            expect(arg1.target.toString()).toEqual(target);
-        });
     });
 
     describe("public room", () => {

test/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx

@@ -0,0 +1,290 @@
+/*
+Copyright 2023 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 { TooltipProvider } from "@vector-im/compound-web";
+import { fireEvent, getByLabelText, getByText, render, screen, waitFor } from "@testing-library/react";
+import { EventTimeline, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+
+import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
+import {
+    CallGuestLinkButton,
+    JoinRuleDialog,
+} from "../../../../../src/components/views/rooms/RoomHeader/CallGuestLinkButton";
+import Modal from "../../../../../src/Modal";
+import SdkConfig from "../../../../../src/SdkConfig";
+import ShareDialog from "../../../../../src/components/views/dialogs/ShareDialog";
+import { _t } from "../../../../../src/languageHandler";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+
+describe("<CallGuestLinkButton />", () => {
+    const roomId = "!room:server.org";
+    let sdkContext!: SdkContextClass;
+    let modalSpy: jest.SpyInstance;
+    let modalResolve: (value: unknown[] | PromiseLike<unknown[]>) => void;
+    let room: Room;
+
+    const targetUnencrypted =
+        "https://guest_spa_url.com/room/#/!room:server.org?roomId=%21room%3Aserver.org&viaServers=example.org";
+    const targetEncrypted =
+        "https://guest_spa_url.com/room/#/!room:server.org?roomId=%21room%3Aserver.org&perParticipantE2EE=true&viaServers=example.org";
+    const expectedShareDialogProps = {
+        target: targetEncrypted,
+        customTitle: "Conference invite link",
+        subtitle: "Link for external users to join the call without a matrix account:",
+    };
+
+    /**
+     * Create a room using mocked client
+     * And mock isElementVideoRoom
+     */
+    const makeRoom = (isVideoRoom = true): Room => {
+        const room = new Room(roomId, sdkContext.client!, sdkContext.client!.getSafeUserId());
+        jest.spyOn(room, "isElementVideoRoom").mockReturnValue(isVideoRoom);
+        // stub
+        jest.spyOn(room, "getPendingEvents").mockReturnValue([]);
+        return room;
+    };
+    function mockRoomMembers(room: Room, count: number) {
+        const members = Array(count)
+            .fill(0)
+            .map((_, index) => ({
+                userId: `@user-${index}:example.org`,
+                roomId: room.roomId,
+                membership: KnownMembership.Join,
+            }));
+
+        room.currentState.setJoinedMemberCount(members.length);
+        room.getJoinedMembers = jest.fn().mockReturnValue(members);
+    }
+
+    const getComponent = (room: Room) =>
+        render(<CallGuestLinkButton room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={sdkContext}>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </SDKContext.Provider>
+            ),
+        });
+
+    const oldGet = SdkConfig.get;
+    beforeEach(() => {
+        const client = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+            sendStateEvent: jest.fn(),
+        });
+        sdkContext = new SdkContextClass();
+        sdkContext.client = client;
+        const modalPromise = new Promise<unknown[]>((resolve) => {
+            modalResolve = resolve;
+        });
+        modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({ finished: modalPromise, close: jest.fn() });
+        room = makeRoom();
+        mockRoomMembers(room, 3);
+
+        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+            if (key === "element_call") {
+                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            }
+            return oldGet(key);
+        });
+        jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(true);
+        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("shows the JoinRuleDialog on click with private join rules", async () => {
+        getComponent(room);
+        fireEvent.click(screen.getByLabelText("Share call link"));
+        expect(modalSpy).toHaveBeenCalledWith(JoinRuleDialog, { room, canInvite: false });
+        // pretend public was selected
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        modalResolve([]);
+        await new Promise(process.nextTick);
+        const callParams = modalSpy.mock.calls[1];
+        expect(callParams[0]).toEqual(ShareDialog);
+        expect(callParams[1].target.toString()).toEqual(expectedShareDialogProps.target);
+        expect(callParams[1].subtitle).toEqual(expectedShareDialogProps.subtitle);
+        expect(callParams[1].customTitle).toEqual(expectedShareDialogProps.customTitle);
+    });
+
+    it("shows the ShareDialog on click with public join rules", () => {
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        getComponent(room);
+        fireEvent.click(screen.getByLabelText("Share call link"));
+        const callParams = modalSpy.mock.calls[0];
+        expect(callParams[0]).toEqual(ShareDialog);
+        expect(callParams[1].target.toString()).toEqual(expectedShareDialogProps.target);
+        expect(callParams[1].subtitle).toEqual(expectedShareDialogProps.subtitle);
+        expect(callParams[1].customTitle).toEqual(expectedShareDialogProps.customTitle);
+    });
+
+    it("shows the ShareDialog on click with knock join rules", () => {
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+        jest.spyOn(room, "canInvite").mockReturnValue(true);
+        getComponent(room);
+        fireEvent.click(screen.getByLabelText("Share call link"));
+        const callParams = modalSpy.mock.calls[0];
+        expect(callParams[0]).toEqual(ShareDialog);
+        expect(callParams[1].target.toString()).toEqual(expectedShareDialogProps.target);
+        expect(callParams[1].subtitle).toEqual(expectedShareDialogProps.subtitle);
+        expect(callParams[1].customTitle).toEqual(expectedShareDialogProps.customTitle);
+    });
+
+    it("don't show external conference button if room not public nor knock and the user cannot change join rules", () => {
+        // preparation for if we refactor the related code to not use currentState.
+        jest.spyOn(room, "getLiveTimeline").mockReturnValue({
+            getState: jest.fn().mockReturnValue({
+                maySendStateEvent: jest.fn().mockReturnValue(false),
+            }),
+        } as unknown as EventTimeline);
+        jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(false);
+        getComponent(room);
+        expect(screen.queryByLabelText("Share call link")).not.toBeInTheDocument();
+    });
+
+    it("don't show external conference button if now guest spa link is configured", () => {
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+
+        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+            if (key === "element_call") {
+                return { url: "https://example2.com" };
+            }
+            return oldGet(key);
+        });
+
+        getComponent(room);
+        // We only change the SdkConfig and show that this everything else is
+        // configured so that the call link button is shown.
+        expect(screen.queryByLabelText("Share call link")).not.toBeInTheDocument();
+
+        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+            if (key === "element_call") {
+                return { guest_spa_url: "https://guest_spa_url.com", url: "https://example2.com" };
+            }
+            return oldGet(key);
+        });
+
+        const { container } = getComponent(room);
+        expect(getByLabelText(container, "Share call link")).toBeInTheDocument();
+    });
+
+    it("opens the share dialog with the correct share link in an encrypted room", () => {
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+
+        const { container } = getComponent(room);
+        const modalSpy = jest.spyOn(Modal, "createDialog");
+        fireEvent.click(getByLabelText(container, _t("voip|get_call_link")));
+        // const target =
+        //     "https://guest_spa_url.com/room/#/!room:server.org?roomId=%21room%3Aserver.org&perParticipantE2EE=true&viaServers=example.org";
+        expect(modalSpy).toHaveBeenCalled();
+        const arg0 = modalSpy.mock.calls[0][0];
+        const arg1 = modalSpy.mock.calls[0][1] as any;
+        expect(arg0).toEqual(ShareDialog);
+        const { customTitle, subtitle } = arg1;
+        expect({ customTitle, subtitle }).toEqual({
+            customTitle: "Conference invite link",
+            subtitle: _t("share|share_call_subtitle"),
+        });
+        expect(arg1.target.toString()).toEqual(targetEncrypted);
+    });
+
+    it("share dialog has correct link in an unencrypted room", () => {
+        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(false);
+        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+
+        const { container } = getComponent(room);
+        const modalSpy = jest.spyOn(Modal, "createDialog");
+        fireEvent.click(getByLabelText(container, _t("voip|get_call_link")));
+        const arg1 = modalSpy.mock.calls[0][1] as any;
+        expect(arg1.target.toString()).toEqual(targetUnencrypted);
+    });
+
+    describe("<JoinRuleDialog />", () => {
+        const onFinished = jest.fn();
+
+        const getComponent = (room: Room, canInvite: boolean = true) =>
+            render(<JoinRuleDialog room={room} canInvite={canInvite} onFinished={onFinished} />, {
+                wrapper: ({ children }) => (
+                    <SDKContext.Provider value={sdkContext}>
+                        <TooltipProvider>{children}</TooltipProvider>
+                    </SDKContext.Provider>
+                ),
+            });
+
+        beforeEach(() => {
+            // feature_ask_to_join enabled
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+        });
+
+        it("shows ask to join if feature is enabled", () => {
+            const { container } = getComponent(room);
+            expect(getByText(container, "Ask to join")).toBeInTheDocument();
+        });
+        it("font show ask to join if feature is enabled but cannot invite", () => {
+            getComponent(room, false);
+            expect(screen.queryByText("Ask to join")).not.toBeInTheDocument();
+        });
+        it("doesn't show ask to join if feature is disabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            getComponent(room);
+            expect(screen.queryByText("Ask to join")).not.toBeInTheDocument();
+        });
+
+        it("sends correct state event on click", async () => {
+            const sendStateSpy = jest.spyOn(sdkContext.client!, "sendStateEvent");
+            let container;
+            container = getComponent(room).container;
+            fireEvent.click(getByText(container, "Ask to join"));
+            expect(sendStateSpy).toHaveBeenCalledWith(
+                "!room:server.org",
+                "m.room.join_rules",
+                { join_rule: "knock" },
+                "",
+            );
+            expect(sendStateSpy).toHaveBeenCalledTimes(1);
+            await waitFor(() => expect(onFinished).toHaveBeenCalledTimes(1));
+            onFinished.mockClear();
+            sendStateSpy.mockClear();
+
+            container = getComponent(room).container;
+            fireEvent.click(getByText(container, "Public"));
+            expect(sendStateSpy).toHaveBeenLastCalledWith(
+                "!room:server.org",
+                "m.room.join_rules",
+                { join_rule: "public" },
+                "",
+            );
+            expect(sendStateSpy).toHaveBeenCalledTimes(1);
+            container = getComponent(room).container;
+            await waitFor(() => expect(onFinished).toHaveBeenCalledTimes(1));
+            onFinished.mockClear();
+            sendStateSpy.mockClear();
+
+            fireEvent.click(getByText(container, _t("update_room_access_modal|no_change")));
+            await waitFor(() => expect(onFinished).toHaveBeenCalledTimes(1));
+            // Don't call sendStateEvent if no change is clicked.
+            expect(sendStateSpy).toHaveBeenCalledTimes(0);
+        });
+    });
+});