Allow managing room knocks (#11404)

* Allow managing room knocks

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

* Apply PR feedback

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

* Apply Sonar feedback

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

---------

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

test/components/views/dialogs/RoomSettingsDialog-test.tsx

@@ -16,7 +16,16 @@ limitations under the License.
 
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { Room, Visibility } from "matrix-js-sdk/src/matrix";
+import { mkEvent } from "matrix-js-sdk/spec/test-utils/test-utils";
+import {
+    EventTimeline,
+    EventType,
+    JoinRule,
+    MatrixEvent,
+    Room,
+    RoomStateEvent,
+    Visibility,
+} from "matrix-js-sdk/src/matrix";
 
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
 import RoomSettingsDialog from "../../../../src/components/views/dialogs/RoomSettingsDialog";
@@ -84,6 +93,54 @@ describe("<RoomSettingsDialog />", () => {
             expect(container.querySelectorAll(".mx_TabbedView_tabLabel")).toMatchSnapshot();
         });
 
+        describe("people settings tab", () => {
+            it("does not render when disabled and room join rule is not knock", () => {
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
+                getComponent();
+                expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument();
+            });
+
+            it("does not render when disabled and room join rule is knock", () => {
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+                getComponent();
+                expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument();
+            });
+
+            it("does not render when enabled and room join rule is not knock", () => {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                    (setting) => setting === "feature_ask_to_join",
+                );
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
+                getComponent();
+                expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument();
+            });
+
+            it("renders when enabled and room join rule is knock", () => {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                    (setting) => setting === "feature_ask_to_join",
+                );
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+                getComponent();
+                expect(screen.getByTestId("settings-tab-ROOM_PEOPLE_TAB")).toBeInTheDocument();
+            });
+
+            it("re-renders on room join rule changes", () => {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                    (setting) => setting === "feature_ask_to_join",
+                );
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+                getComponent();
+                jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
+                mockClient.emit(
+                    RoomStateEvent.Events,
+                    new MatrixEvent(mkEvent({ content: {}, type: EventType.RoomJoinRules })),
+                    room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+                    null,
+                );
+                expect(screen.queryByTestId("settings-tab-ROOM_PEOPLE_TAB")).not.toBeInTheDocument();
+            });
+        });
+
         it("renders voip settings tab when enabled", () => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) => settingName === "feature_group_calls",

test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx

@@ -0,0 +1,217 @@
+/*
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+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 { act, fireEvent, render, screen, within } from "@testing-library/react";
+import {
+    EventTimeline,
+    EventType,
+    MatrixError,
+    MatrixEvent,
+    Room,
+    RoomMember,
+    RoomStateEvent,
+} from "matrix-js-sdk/src/matrix";
+import React from "react";
+
+import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog";
+import { PeopleRoomSettingsTab } from "../../../../../../src/components/views/settings/tabs/room/PeopleRoomSettingsTab";
+import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
+import Modal from "../../../../../../src/Modal";
+import { flushPromises, getMockClientWithEventEmitter } from "../../../../../test-utils";
+
+describe("PeopleRoomSettingsTab", () => {
+    const client = getMockClientWithEventEmitter({
+        getUserId: jest.fn(),
+        invite: jest.fn(),
+        kick: jest.fn(),
+        mxcUrlToHttp: (mxcUrl: string) => mxcUrl,
+    });
+    const roomId = "#ask-to-join:example.org";
+    const userId = "@alice:example.org";
+    const member = new RoomMember(roomId, userId);
+    const room = new Room(roomId, client, userId);
+    const state = room.getLiveTimeline().getState(EventTimeline.FORWARDS)!;
+
+    const getButton = (name: "Approve" | "Deny" | "See less" | "See more") => screen.getByRole("button", { name });
+    const getComponent = (room: Room) =>
+        render(
+            <MatrixClientContext.Provider value={client}>
+                <PeopleRoomSettingsTab room={room} />
+            </MatrixClientContext.Provider>,
+        );
+    const getGroup = () => screen.getByRole("group", { name: "Asking to join" });
+    const getParagraph = () => screen.getByRole("paragraph");
+
+    it("renders a heading", () => {
+        getComponent(room);
+        expect(screen.getByRole("heading")).toHaveTextContent("People");
+    });
+
+    it('renders a group "asking to join"', () => {
+        getComponent(room);
+        expect(getGroup()).toBeInTheDocument();
+    });
+
+    describe("without requests to join", () => {
+        it('renders a paragraph "no requests"', () => {
+            getComponent(room);
+            expect(getParagraph()).toHaveTextContent("No requests");
+        });
+    });
+
+    describe("with requests to join", () => {
+        const error = new MatrixError();
+        const knockUserId = "@albert.einstein:example.org";
+        const knockMember = new RoomMember(roomId, knockUserId);
+        const reason =
+            "There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.";
+
+        beforeEach(() => {
+            jest.spyOn(Modal, "createDialog");
+            jest.spyOn(room, "canInvite").mockReturnValue(true);
+            jest.spyOn(room, "getMember").mockReturnValue(member);
+            jest.spyOn(room, "getMembersWithMembership").mockReturnValue([knockMember]);
+            jest.spyOn(state, "hasSufficientPowerLevelFor").mockReturnValue(true);
+
+            knockMember.setMembershipEvent(
+                new MatrixEvent({
+                    content: {
+                        avatar_url: "mxc://example.org/albert-einstein.png",
+                        displayname: "Albert Einstein",
+                        membership: "knock",
+                        reason,
+                    },
+                    origin_server_ts: -464140800000,
+                    type: EventType.RoomMember,
+                }),
+            );
+        });
+
+        it("renders requests fully", () => {
+            getComponent(room);
+            expect(getGroup()).toMatchSnapshot();
+        });
+
+        it("renders requests reduced", () => {
+            knockMember.setMembershipEvent(
+                new MatrixEvent({
+                    content: {
+                        displayname: "albert.einstein",
+                        membership: "knock",
+                    },
+                    type: EventType.RoomMember,
+                }),
+            );
+            getComponent(room);
+            expect(getGroup()).toMatchSnapshot();
+        });
+
+        it("allows to expand a reason", () => {
+            getComponent(room);
+            fireEvent.click(getButton("See more"));
+            expect(within(getGroup()).getByRole("paragraph")).toHaveTextContent(reason);
+        });
+
+        it("allows to collapse a reason", () => {
+            getComponent(room);
+            fireEvent.click(getButton("See more"));
+            fireEvent.click(getButton("See less"));
+            expect(getParagraph()).toHaveTextContent(`${reason.substring(0, 120)}…`);
+        });
+
+        it("does not truncate a reason unnecessarily", () => {
+            const reason = "I have no special talents. I am only passionately curious.";
+            knockMember.setMembershipEvent(
+                new MatrixEvent({
+                    content: {
+                        displayname: "albert.einstein",
+                        membership: "knock",
+                        reason,
+                    },
+                    type: EventType.RoomMember,
+                }),
+            );
+            getComponent(room);
+            expect(getParagraph()).toHaveTextContent(reason);
+        });
+
+        it("disables the deny button if the power level is insufficient", () => {
+            jest.spyOn(state, "hasSufficientPowerLevelFor").mockReturnValue(false);
+            getComponent(room);
+            expect(getButton("Deny")).toHaveAttribute("disabled");
+        });
+
+        it("calls kick on deny", () => {
+            jest.spyOn(client, "kick").mockResolvedValue({});
+            getComponent(room);
+            fireEvent.click(getButton("Deny"));
+            expect(client.kick).toHaveBeenCalledWith(roomId, knockUserId);
+        });
+
+        it("fails to deny a request", async () => {
+            jest.spyOn(client, "kick").mockRejectedValue(error);
+            getComponent(room);
+            fireEvent.click(getButton("Deny"));
+            await act(() => flushPromises());
+            expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
+                title: error.name,
+                description: error.message,
+            });
+        });
+
+        it("succeeds to deny a request", () => {
+            jest.spyOn(room, "getMembersWithMembership").mockReturnValue([]);
+            getComponent(room);
+            act(() => {
+                room.emit(RoomStateEvent.Members, new MatrixEvent(), state, knockMember);
+            });
+            expect(getParagraph()).toHaveTextContent("No requests");
+        });
+
+        it("disables the approve button if the power level is insufficient", () => {
+            jest.spyOn(room, "canInvite").mockReturnValue(false);
+            getComponent(room);
+            expect(getButton("Approve")).toHaveAttribute("disabled");
+        });
+
+        it("calls invite on approve", () => {
+            jest.spyOn(client, "invite").mockResolvedValue({});
+            getComponent(room);
+            fireEvent.click(getButton("Approve"));
+            expect(client.invite).toHaveBeenCalledWith(roomId, knockUserId);
+        });
+
+        it("fails to approve a request", async () => {
+            jest.spyOn(client, "invite").mockRejectedValue(error);
+            getComponent(room);
+            fireEvent.click(getButton("Approve"));
+            await act(() => flushPromises());
+            expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
+                title: error.name,
+                description: error.message,
+            });
+        });
+
+        it("succeeds to approve a request", () => {
+            jest.spyOn(room, "getMembersWithMembership").mockReturnValue([]);
+            getComponent(room);
+            act(() => {
+                room.emit(RoomStateEvent.Members, new MatrixEvent(), state, knockMember);
+            });
+            expect(getParagraph()).toHaveTextContent("No requests");
+        });
+    });
+});

test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`] = `
+<fieldset
+  class="mx_SettingsFieldset"
+>
+  <legend
+    class="mx_SettingsFieldset_legend"
+  >
+    Asking to join
+  </legend>
+  <div
+    class="mx_SettingsFieldset_content"
+  >
+    <div
+      class="mx_PeopleRoomSettingsTab_knock"
+    >
+      <img
+        alt=""
+        class="mx_BaseAvatar mx_BaseAvatar_image"
+        data-testid="avatar-img"
+        loading="lazy"
+        src="mxc://example.org/albert-einstein.png"
+        style="width: 42px; height: 42px;"
+        title="@albert.einstein:example.org"
+      />
+      <div
+        class="mx_PeopleRoomSettingsTab_content"
+      >
+        <span
+          class="mx_PeopleRoomSettingsTab_name"
+        >
+          Albert Einstein
+        </span>
+        <time
+          class="mx_PeopleRoomSettingsTab_timestamp"
+        >
+          Apr 18, 1955
+        </time>
+        <span
+          class="mx_PeopleRoomSettingsTab_userId"
+        >
+          @albert.einstein:example.org
+        </span>
+        <p
+          class="mx_PeopleRoomSettingsTab_seeMoreOrLess"
+        >
+          There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a…
+        </p>
+        <div
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
+          role="button"
+          tabindex="0"
+        >
+          See more
+        </div>
+      </div>
+      <div
+        class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
+        role="button"
+        tabindex="0"
+        title="Deny"
+      >
+        <div
+          height="18"
+          width="18"
+        />
+      </div>
+      <div
+        class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
+        role="button"
+        tabindex="0"
+        title="Approve"
+      >
+        <div
+          height="18"
+          width="18"
+        />
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`] = `
+<fieldset
+  class="mx_SettingsFieldset"
+>
+  <legend
+    class="mx_SettingsFieldset_legend"
+  >
+    Asking to join
+  </legend>
+  <div
+    class="mx_SettingsFieldset_content"
+  >
+    <div
+      class="mx_PeopleRoomSettingsTab_knock"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 27.3px; width: 42px; line-height: 42px;"
+        >
+          A
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          data-testid="avatar-img"
+          loading="lazy"
+          src="data:image/png;base64,00"
+          style="width: 42px; height: 42px;"
+          title="@albert.einstein:example.org"
+        />
+      </span>
+      <div
+        class="mx_PeopleRoomSettingsTab_content"
+      >
+        <span
+          class="mx_PeopleRoomSettingsTab_name"
+        >
+          albert.einstein
+        </span>
+        <span
+          class="mx_PeopleRoomSettingsTab_userId"
+        >
+          @albert.einstein:example.org
+        </span>
+      </div>
+      <div
+        class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
+        role="button"
+        tabindex="0"
+        title="Deny"
+      >
+        <div
+          height="18"
+          width="18"
+        />
+      </div>
+      <div
+        class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
+        role="button"
+        tabindex="0"
+        title="Approve"
+      >
+        <div
+          height="18"
+          width="18"
+        />
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;