From d35fce198cc8089e1a1d30c187ae3f0a1c2467e8 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 10 Apr 2024 16:46:27 +0200 Subject: [PATCH] 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 * disable call button if appropriate. Signed-off-by: Timo K * Add tests Refactor tests to be in CallGuestLinkButton-test instead of the RoomHeader Signed-off-by: Timo K * add test for: no button if cannot change join rule and room not public nor knock Signed-off-by: Timo K * fix tests Signed-off-by: Timo K * add JoinRuleDialog tests Signed-off-by: Timo K * move spy into before each Signed-off-by: Timo K * Update src/i18n/strings/en_EN.json Co-authored-by: Robin * remove inline css and update modal style Signed-off-by: Timo K * Update src/i18n/strings/en_EN.json Co-authored-by: Robin * Update src/i18n/strings/en_EN.json Co-authored-by: Robin * Invite state was not reactive. Changing power level did not update the ui. Signed-off-by: Timo K * linter Signed-off-by: Timo K * make useGuestAccessInformation use useRoomState Signed-off-by: Timo K * fix tests and simplify logic * fix tests * review Signed-off-by: Timo K --------- Signed-off-by: Timo K Co-authored-by: Robin --- res/css/_components.pcss | 1 + res/css/views/rooms/_CallGuestLinkButton.pcss | 7 + .../views/context_menus/RoomContextMenu.tsx | 6 +- .../views/right_panel/RoomSummaryCard.tsx | 5 +- src/components/views/rooms/RoomHeader.tsx | 37 +-- .../rooms/RoomHeader/CallGuestLinkButton.tsx | 167 ++++++++++ src/hooks/room/useGuestAccessInformation.ts | 58 ++++ src/hooks/room/useRoomCall.ts | 58 +--- src/i18n/strings/en_EN.json | 6 + .../views/rooms/RoomHeader-test.tsx | 128 ++------ .../RoomHeader/CallGuestLinkButton-test.tsx | 290 ++++++++++++++++++ 11 files changed, 588 insertions(+), 175 deletions(-) create mode 100644 res/css/views/rooms/_CallGuestLinkButton.pcss create mode 100644 src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx create mode 100644 src/hooks/room/useGuestAccessInformation.ts create mode 100644 test/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3ef26f8199..cc7e41bc99 100644 --- a/res/css/_components.pcss +++ b/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"; diff --git a/res/css/views/rooms/_CallGuestLinkButton.pcss b/res/css/views/rooms/_CallGuestLinkButton.pcss new file mode 100644 index 0000000000..b11668e547 --- /dev/null +++ b/res/css/views/rooms/_CallGuestLinkButton.pcss @@ -0,0 +1,7 @@ +.mx_JoinRuleDialog { + .mx_JoinRuleDialogButtons { + display: flex; + column-gap: 5px; + justify-content: center; + } +} diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index 6ae926707d..3c77f32cb3 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/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 = ({ 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(); diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index d6182e5e2e..308d21dcf0 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/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 = ({ 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 = ({ room, permalinkCreator, onClose, on inviteToRoom(room)} /> diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 8ca26ebcde..bdc0476aad 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/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 ShareDialog from "../dialogs/ShareDialog"; +import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton"; 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 = ( @@ -145,13 +126,7 @@ export default function RoomHeader({ ); - const createExternalLinkButton = ( - - - - - - ); + const joinCallButton = ( + )} + + +

{_t("update_room_access_modal|dont_change_description")}

+
+ +
+ + ); +}; diff --git a/src/hooks/room/useGuestAccessInformation.ts b/src/hooks/room/useGuestAccessInformation.ts new file mode 100644 index 0000000000..efafcd18d7 --- /dev/null +++ b/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 }; +}; diff --git a/src/hooks/room/useRoomCall.ts b/src/hooks/room/useRoomCall.ts index aed7fcbff4..376a7dbb5f 100644 --- a/src/hooks/room/useRoomCall.ts +++ b/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(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 canInviteToRoom = userId ? room.canInvite(userId) : false; + const activeCalls = useEventEmitterState(CallStore.instance, CallStoreEvent.ActiveCalls, () => + 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 = - canInviteToRoom && (room.getJoinRule() === "public" || room.getJoinRule() === JoinRule.Knock); - if (!(memberCount > 1 || canCallAlone)) { + if (memberCount <= 1 && !canInviteGuests) { 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, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8067412064..e1c6c23ac5 100644 --- a/src/i18n/strings/en_EN.json +++ b/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", diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx index 594d9a8d80..e215775a0d 100644 --- a/test/components/views/rooms/RoomHeader-test.tsx +++ b/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( + , + 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(, 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(, getWrapper()); @@ -400,6 +421,13 @@ describe("RoomHeader", () => { jest.spyOn(room, "canInvite").mockReturnValue(true); const { container: containerInvitePublic } = render(, 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(, 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(, 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(, 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(, 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(, 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(, 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(, 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(, 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(, 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", () => { diff --git a/test/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx b/test/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx new file mode 100644 index 0000000000..465a4b6770 --- /dev/null +++ b/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("", () => { + const roomId = "!room:server.org"; + let sdkContext!: SdkContextClass; + let modalSpy: jest.SpyInstance; + let modalResolve: (value: unknown[] | PromiseLike) => 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(, { + wrapper: ({ children }) => ( + + {children} + + ), + }); + + const oldGet = SdkConfig.get; + beforeEach(() => { + const client = getMockClientWithEventEmitter({ + ...mockClientMethodsUser(), + sendStateEvent: jest.fn(), + }); + sdkContext = new SdkContextClass(); + sdkContext.client = client; + const modalPromise = new Promise((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("", () => { + const onFinished = jest.fn(); + + const getComponent = (room: Room, canInvite: boolean = true) => + render(, { + wrapper: ({ children }) => ( + + {children} + + ), + }); + + 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); + }); + }); +});