Allow knocking rooms (#11353)

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

test/components/structures/RoomView-test.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { createRef, RefObject } from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
-import { Room, RoomEvent, EventType, MatrixError, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import { Room, RoomEvent, EventType, JoinRule, MatrixError, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
 import { fireEvent, render, screen, RenderResult } from "@testing-library/react";
@@ -34,10 +34,12 @@ import {
     mkRoomMemberJoinEvent,
     mkThirdPartyInviteEvent,
     emitPromise,
+    createTestClient,
+    untilDispatch,
 } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { Action } from "../../../src/dispatcher/actions";
-import { defaultDispatcher } from "../../../src/dispatcher/dispatcher";
+import dis, { defaultDispatcher } from "../../../src/dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../src/dispatcher/payloads/ViewRoomPayload";
 import { RoomView as _RoomView } from "../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
@@ -543,4 +545,41 @@ describe("RoomView", () => {
             expect(screen.queryByLabelText("Forget room")).not.toBeInTheDocument();
         });
     });
+
+    describe("knock rooms", () => {
+        const client = createTestClient();
+
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => setting === "feature_ask_to_join");
+            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+            jest.spyOn(dis, "dispatch");
+        });
+
+        it("allows to request to join", async () => {
+            jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client);
+            jest.spyOn(client, "knockRoom").mockResolvedValue({ room_id: room.roomId });
+
+            await mountRoomView();
+            fireEvent.click(screen.getByRole("button", { name: "Request access" }));
+            await untilDispatch(Action.SubmitAskToJoin, dis);
+
+            expect(dis.dispatch).toHaveBeenCalledWith({
+                action: "submit_ask_to_join",
+                roomId: room.roomId,
+                opts: { reason: undefined },
+            });
+        });
+
+        it("allows to cancel a join request", async () => {
+            jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client);
+            jest.spyOn(client, "leave").mockResolvedValue({});
+            jest.spyOn(room, "getMyMembership").mockReturnValue("knock");
+
+            await mountRoomView();
+            fireEvent.click(screen.getByRole("button", { name: "Cancel request" }));
+            await untilDispatch(Action.CancelAskToJoin, dis);
+
+            expect(dis.dispatch).toHaveBeenCalledWith({ action: "cancel_ask_to_join", roomId: room.roomId });
+        });
+    });
 });

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

@@ -425,4 +425,60 @@ describe("<RoomPreviewBar />", () => {
             });
         });
     });
+
+    describe("message case AskToJoin", () => {
+        it("renders the corresponding message", () => {
+            const component = getComponent({ promptAskToJoin: true });
+            expect(getMessage(component)).toMatchSnapshot();
+        });
+
+        it("renders the corresponding message with a generic title", () => {
+            const component = render(<RoomPreviewBar promptAskToJoin />);
+            expect(getMessage(component)).toMatchSnapshot();
+        });
+
+        it("renders the corresponding actions", () => {
+            const component = getComponent({ promptAskToJoin: true });
+            expect(getActions(component)).toMatchSnapshot();
+        });
+
+        it("triggers the primary action callback", () => {
+            const onSubmitAskToJoin = jest.fn();
+            const component = getComponent({ promptAskToJoin: true, onSubmitAskToJoin });
+
+            fireEvent.click(getPrimaryActionButton(component)!);
+            expect(onSubmitAskToJoin).toHaveBeenCalled();
+        });
+
+        it("triggers the primary action callback with a reason", () => {
+            const onSubmitAskToJoin = jest.fn();
+            const reason = "some reason";
+            const component = getComponent({ promptAskToJoin: true, onSubmitAskToJoin });
+
+            fireEvent.change(component.container.querySelector("textarea")!, { target: { value: reason } });
+            fireEvent.click(getPrimaryActionButton(component)!);
+
+            expect(onSubmitAskToJoin).toHaveBeenCalledWith(reason);
+        });
+    });
+
+    describe("message case Knocked", () => {
+        it("renders the corresponding message", () => {
+            const component = getComponent({ knocked: true });
+            expect(getMessage(component)).toMatchSnapshot();
+        });
+
+        it("renders the corresponding actions", () => {
+            const component = getComponent({ knocked: true, onCancelAskToJoin: () => {} });
+            expect(getActions(component)).toMatchSnapshot();
+        });
+
+        it("triggers the secondary action callback", () => {
+            const onCancelAskToJoin = jest.fn();
+            const component = getComponent({ knocked: true, onCancelAskToJoin });
+
+            fireEvent.click(getSecondaryActionButton(component)!);
+            expect(onCancelAskToJoin).toHaveBeenCalled();
+        });
+    });
 });

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

@@ -83,6 +83,9 @@ describe("<SendMessageComposer/>", () => {
         narrow: false,
         activeCall: null,
         msc3946ProcessDynamicPredecessor: false,
+        canAskToJoin: false,
+        promptAskToJoin: false,
+        knocked: false,
     };
     describe("createMessageContent", () => {
         const permalinkCreator = jest.fn() as any;

test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -1,5 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding actions 1`] = `
+<div
+  class="mx_RoomPreviewBar_actions mx_RoomPreviewBar_fullWidth"
+>
+  <div
+    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+    role="button"
+    tabindex="0"
+  >
+    Request access
+  </div>
+</div>
+`;
+
+exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding message 1`] = `
+<div
+  class="mx_RoomPreviewBar_message"
+>
+  <h3>
+    Ask to join RoomPreviewBar-test-room?
+  </h3>
+  <p>
+    <span
+      class="mx_BaseAvatar"
+      role="presentation"
+    >
+      <span
+        aria-hidden="true"
+        class="mx_BaseAvatar_initial"
+        style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+      >
+        R
+      </span>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="mx_BaseAvatar_image"
+        data-testid="avatar-img"
+        loading="lazy"
+        src="data:image/png;base64,00"
+        style="width: 36px; height: 36px;"
+      />
+    </span>
+  </p>
+  <p>
+    You need to be granted access to this room in order to view or participate in the conversation. You can send a request to join below.
+  </p>
+</div>
+`;
+
+exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding message with a generic title 1`] = `
+<div
+  class="mx_RoomPreviewBar_message"
+>
+  <h3>
+    Ask to join?
+  </h3>
+  <p>
+    <span
+      class="mx_BaseAvatar"
+      role="presentation"
+    >
+      <span
+        aria-hidden="true"
+        class="mx_BaseAvatar_initial"
+        style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
+      >
+        ?
+      </span>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="mx_BaseAvatar_image"
+        data-testid="avatar-img"
+        loading="lazy"
+        src="data:image/png;base64,00"
+        style="width: 36px; height: 36px;"
+      />
+    </span>
+  </p>
+  <p>
+    You need to be granted access to this room in order to view or participate in the conversation. You can send a request to join below.
+  </p>
+</div>
+`;
+
+exports[`<RoomPreviewBar /> message case Knocked renders the corresponding actions 1`] = `
+<div
+  class="mx_RoomPreviewBar_actions"
+>
+  <div
+    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
+    role="button"
+    tabindex="0"
+  >
+    Cancel request
+  </div>
+</div>
+`;
+
+exports[`<RoomPreviewBar /> message case Knocked renders the corresponding message 1`] = `
+<div
+  class="mx_RoomPreviewBar_message"
+>
+  <h3>
+    Request to join sent
+  </h3>
+  <p>
+    <div
+      class="mx_Icon mx_Icon_16 mx_RoomPreviewBar_icon"
+    />
+    Your request to join is pending.
+  </p>
+</div>
+`;
+
 exports[`<RoomPreviewBar /> renders banned message 1`] = `
 <div
   class="mx_RoomPreviewBar_message"

test/stores/RoomViewStore-test.ts

@@ -39,6 +39,10 @@ import {
 } from "../../src/voice-broadcast";
 import { mkVoiceBroadcastInfoStateEvent } from "../voice-broadcast/utils/test-utils";
 import Modal from "../../src/Modal";
+import ErrorDialog from "../../src/components/views/dialogs/ErrorDialog";
+import { CancelAskToJoinPayload } from "../../src/dispatcher/payloads/CancelAskToJoinPayload";
+import { JoinRoomErrorPayload } from "../../src/dispatcher/payloads/JoinRoomErrorPayload";
+import { SubmitAskToJoinPayload } from "../../src/dispatcher/payloads/SubmitAskToJoinPayload";
 
 jest.mock("../../src/Modal");
 
@@ -97,6 +101,8 @@ describe("RoomViewStore", function () {
         supportsThreads: jest.fn(),
         isInitialSyncComplete: jest.fn().mockResolvedValue(false),
         relations: jest.fn(),
+        knockRoom: jest.fn(),
+        leave: jest.fn(),
     });
     const room = new Room(roomId, mockClient, userId);
     const room2 = new Room(roomId2, mockClient, userId);
@@ -111,6 +117,21 @@ describe("RoomViewStore", function () {
         await untilDispatch(Action.ViewRoom, dis);
     };
 
+    const dispatchPromptAskToJoin = async () => {
+        dis.dispatch({ action: Action.PromptAskToJoin });
+        await untilDispatch(Action.PromptAskToJoin, dis);
+    };
+
+    const dispatchSubmitAskToJoin = async (roomId: string, reason?: string) => {
+        dis.dispatch<SubmitAskToJoinPayload>({ action: Action.SubmitAskToJoin, roomId, opts: { reason } });
+        await untilDispatch(Action.SubmitAskToJoin, dis);
+    };
+
+    const dispatchCancelAskToJoin = async (roomId: string) => {
+        dis.dispatch<CancelAskToJoinPayload>({ action: Action.CancelAskToJoin, roomId });
+        await untilDispatch(Action.CancelAskToJoin, dis);
+    };
+
     let roomViewStore: RoomViewStore;
     let slidingSyncManager: SlidingSyncManager;
     let dis: MatrixDispatcher;
@@ -436,4 +457,131 @@ describe("RoomViewStore", function () {
             });
         });
     });
+
+    describe("Action.JoinRoom", () => {
+        it("dispatches Action.JoinRoomError and Action.AskToJoin when the join fails", async () => {
+            const err = new MatrixError();
+
+            jest.spyOn(dis, "dispatch");
+            jest.spyOn(mockClient, "joinRoom").mockRejectedValueOnce(err);
+
+            dis.dispatch({ action: Action.JoinRoom, canAskToJoin: true });
+            await untilDispatch(Action.PromptAskToJoin, dis);
+
+            expect(mocked(dis.dispatch).mock.calls[0][0]).toEqual({ action: "join_room", canAskToJoin: true });
+            expect(mocked(dis.dispatch).mock.calls[1][0]).toEqual({
+                action: "join_room_error",
+                roomId: null,
+                err,
+                canAskToJoin: true,
+            });
+            expect(mocked(dis.dispatch).mock.calls[2][0]).toEqual({ action: "prompt_ask_to_join" });
+        });
+    });
+
+    describe("Action.JoinRoomError", () => {
+        const err = new MatrixError();
+        beforeEach(() => jest.spyOn(roomViewStore, "showJoinRoomError"));
+
+        it("calls showJoinRoomError()", async () => {
+            dis.dispatch<JoinRoomErrorPayload>({ action: Action.JoinRoomError, roomId, err });
+            await untilDispatch(Action.JoinRoomError, dis);
+            expect(roomViewStore.showJoinRoomError).toHaveBeenCalledWith(err, roomId);
+        });
+
+        it("does not call showJoinRoomError() when canAskToJoin is true", async () => {
+            dis.dispatch<JoinRoomErrorPayload>({ action: Action.JoinRoomError, roomId, err, canAskToJoin: true });
+            await untilDispatch(Action.JoinRoomError, dis);
+            expect(roomViewStore.showJoinRoomError).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("askToJoin()", () => {
+        it("returns false", () => {
+            expect(roomViewStore.promptAskToJoin()).toBe(false);
+        });
+
+        it("returns true", async () => {
+            await dispatchPromptAskToJoin();
+            expect(roomViewStore.promptAskToJoin()).toBe(true);
+        });
+    });
+
+    describe("knocked()", () => {
+        it("returns false", () => {
+            expect(roomViewStore.knocked()).toBe(false);
+        });
+
+        it("returns true", async () => {
+            jest.spyOn(mockClient, "knockRoom").mockResolvedValue({ room_id: roomId });
+            await dispatchSubmitAskToJoin(roomId);
+            expect(roomViewStore.knocked()).toBe(true);
+        });
+    });
+
+    describe("Action.SubmitAskToJoin", () => {
+        const reason = "some reason";
+        beforeEach(async () => await dispatchPromptAskToJoin());
+
+        it("calls knockRoom(), sets askToJoin state to false and knocked state to true", async () => {
+            jest.spyOn(mockClient, "knockRoom").mockResolvedValue({ room_id: roomId });
+            await dispatchSubmitAskToJoin(roomId, reason);
+
+            expect(mockClient.knockRoom).toHaveBeenCalledWith(roomId, { reason, viaServers: [] });
+            expect(roomViewStore.promptAskToJoin()).toBe(false);
+            expect(roomViewStore.knocked()).toBe(true);
+        });
+
+        it("calls knockRoom(), sets askToJoin to false, keeps knocked state false and shows an error dialog", async () => {
+            const error = new MatrixError(undefined, 403);
+            jest.spyOn(mockClient, "knockRoom").mockRejectedValue(error);
+            await dispatchSubmitAskToJoin(roomId, reason);
+
+            expect(mockClient.knockRoom).toHaveBeenCalledWith(roomId, { reason, viaServers: [] });
+            expect(roomViewStore.promptAskToJoin()).toBe(false);
+            expect(roomViewStore.knocked()).toBe(false);
+            expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
+                description: "You need an invite to access this room.",
+                title: "Failed to join",
+            });
+        });
+
+        it("shows an error dialog with a generic error message", async () => {
+            const error = new MatrixError();
+            jest.spyOn(mockClient, "knockRoom").mockRejectedValue(error);
+            await dispatchSubmitAskToJoin(roomId);
+            expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
+                description: error.message,
+                title: "Failed to join",
+            });
+        });
+    });
+
+    describe("Action.CancelAskToJoin", () => {
+        beforeEach(async () => {
+            jest.spyOn(mockClient, "knockRoom").mockResolvedValue({ room_id: roomId });
+            await dispatchSubmitAskToJoin(roomId);
+        });
+
+        it("calls leave() and sets knocked state to false", async () => {
+            jest.spyOn(mockClient, "leave").mockResolvedValue({});
+            await dispatchCancelAskToJoin(roomId);
+
+            expect(mockClient.leave).toHaveBeenCalledWith(roomId);
+            expect(roomViewStore.knocked()).toBe(false);
+        });
+
+        it("calls leave(), keeps knocked state true and shows an error dialog", async () => {
+            const error = new MatrixError();
+            jest.spyOn(mockClient, "leave").mockRejectedValue(error);
+            await dispatchCancelAskToJoin(roomId);
+
+            expect(mockClient.leave).toHaveBeenCalledWith(roomId);
+            expect(roomViewStore.knocked()).toBe(true);
+            expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
+                description: error.message,
+                title: "Failed to cancel",
+            });
+        });
+    });
 });

test/test-utils/room.ts

@@ -88,6 +88,9 @@ export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoom
         narrow: false,
         activeCall: null,
         msc3946ProcessDynamicPredecessor: false,
+        canAskToJoin: false,
+        promptAskToJoin: false,
+        knocked: false,
 
         ...override,
     };

test/test-utils/test-utils.ts

@@ -242,6 +242,8 @@ export function createTestClient(): MatrixClient {
         getSyncStateData: jest.fn(),
         getDehydratedDevice: jest.fn(),
         exportRoomKeys: jest.fn(),
+        knockRoom: jest.fn(),
+        leave: jest.fn(),
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);