Allow managing room knocks

res/css/_components.pcss

@@ -339,6 +339,7 @@
 @import "./views/settings/tabs/_SettingsSection.pcss";
 @import "./views/settings/tabs/_SettingsTab.pcss";
 @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";
+@import "./views/settings/tabs/room/_PeopleRoomSettingsTab.pcss";
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
 @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
 @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -50,6 +50,10 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
 }
 
+.mx_RoomSettingsDialog_peopleIcon::before {
+    mask-image: url("$(res)/img/element-icons/group-members.svg");
+}
+
 .mx_RoomSettingsDialog .mx_Dialog_title {
     -ms-text-overflow: ellipsis;
     text-overflow: ellipsis;

res/css/views/elements/_AccessibleButton.pcss

@@ -20,6 +20,8 @@ limitations under the License.
     &.mx_AccessibleButton_disabled {
         cursor: not-allowed;
 
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline,
         &.mx_AccessibleButton_kind_primary,
         &.mx_AccessibleButton_kind_primary_outline,
         &.mx_AccessibleButton_kind_primary_sm,
@@ -80,29 +82,37 @@ limitations under the License.
             }
         }
 
-        &.mx_AccessibleButton_kind_icon {
+        &.mx_AccessibleButton_kind_icon,
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline {
             padding: 0;
             height: 32px;
             width: 32px;
         }
     }
 
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_icon_primary_outline,
     &.mx_AccessibleButton_kind_primary,
     &.mx_AccessibleButton_kind_primary_outline,
     &.mx_AccessibleButton_kind_secondary {
         font-weight: var(--cpd-font-weight-semibold);
     }
 
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_icon_primary_outline,
     &.mx_AccessibleButton_kind_primary,
     &.mx_AccessibleButton_kind_primary_outline {
         border: 1px solid $accent;
     }
 
+    &.mx_AccessibleButton_kind_icon_primary,
     &.mx_AccessibleButton_kind_primary {
         color: $button-primary-fg-color;
         background-color: $accent;
     }
 
+    &.mx_AccessibleButton_kind_icon_primary_outline,
     &.mx_AccessibleButton_kind_primary_outline {
         color: $accent;
     }

res/css/views/settings/tabs/room/_PeopleRoomSettingsTab.pcss

@@ -0,0 +1,56 @@
+/*
+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.
+*/
+
+.mx_PeopleRoomSettingsTab_knock {
+    display: flex;
+    margin-top: var(--cpd-space-2x);
+}
+
+.mx_PeopleRoomSettingsTab_content {
+    flex-grow: 1;
+    margin: 0 var(--cpd-space-4x);
+}
+
+.mx_PeopleRoomSettingsTab_name {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_PeopleRoomSettingsTab_timestamp {
+    color: $secondary-content;
+    margin-left: var(--cpd-space-1x);
+}
+
+.mx_PeopleRoomSettingsTab_userId {
+    color: $secondary-content;
+    display: block;
+    font-size: var(--cpd-font-size-body-sm);
+}
+
+.mx_PeopleRoomSettingsTab_seeMoreOrLess {
+    margin: var(--cpd-space-3x) 0 0;
+}
+
+.mx_PeopleRoomSettingsTab_action {
+    flex-shrink: 0;
+
+    + .mx_PeopleRoomSettingsTab_action {
+        margin-left: var(--cpd-space-3x);
+    }
+}
+
+.mx_PeopleRoomSettingsTab_paragraph {
+    margin: 0;
+}

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { RoomEvent, Room } from "matrix-js-sdk/src/matrix";
+import { RoomEvent, Room, RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 
 import TabbedView, { Tab } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
@@ -39,9 +39,11 @@ import { ActionPayload } from "../../../dispatcher/payloads";
 import { NonEmptyArray } from "../../../@types/common";
 import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
+import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
 
 export const enum RoomSettingsTab {
     General = "ROOM_GENERAL_TAB",
+    People = "ROOM_PEOPLE_TAB",
     Voip = "ROOM_VOIP_TAB",
     Security = "ROOM_SECURITY_TAB",
     Roles = "ROOM_ROLES_TAB",
@@ -74,6 +76,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
     public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.safeGet().on(RoomEvent.Name, this.onRoomName);
+        MatrixClientPeg.safeGet().on(RoomStateEvent.Events, this.onStateEvent);
         this.onRoomName();
     }
 
@@ -90,6 +93,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
         }
 
         MatrixClientPeg.get()?.removeListener(RoomEvent.Name, this.onRoomName);
+        MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onStateEvent);
     }
 
     /**
@@ -120,6 +124,10 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
         this.forceUpdate();
     };
 
+    private onStateEvent = (event: MatrixEvent): void => {
+        if (event.getType() === EventType.RoomJoinRules) this.forceUpdate();
+    };
+
     private getTabs(): NonEmptyArray<Tab<RoomSettingsTab>> {
         const tabs: Tab<RoomSettingsTab>[] = [];
 
@@ -132,6 +140,16 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                 "RoomSettingsGeneral",
             ),
         );
+        if (SettingsStore.getValue("feature_ask_to_join") && this.state.room.getJoinRule() === "knock") {
+            tabs.push(
+                new Tab(
+                    RoomSettingsTab.People,
+                    _td("People"),
+                    "mx_RoomSettingsDialog_peopleIcon",
+                    <PeopleRoomSettingsTab room={this.state.room} />,
+                ),
+            );
+        }
         if (SettingsStore.getValue("feature_group_calls")) {
             tabs.push(
                 new Tab(

src/components/views/elements/AccessibleButton.tsx

@@ -38,7 +38,9 @@ type AccessibleButtonKind =
     | "link_sm"
     | "confirm_sm"
     | "cancel_sm"
-    | "icon";
+    | "icon"
+    | "icon_primary"
+    | "icon_primary_outline";
 
 /**
  * This type construct allows us to specifically pass those props down to the element we’re creating that the element

src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

@@ -0,0 +1,173 @@
+/*
+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 { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import React, { useCallback, useState, VFC } from "react";
+
+import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
+import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
+import { formatRelativeTime } from "../../../../../DateUtils";
+import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
+import { _t } from "../../../../../languageHandler";
+import Modal, { IHandle } from "../../../../../Modal";
+import MemberAvatar from "../../../avatars/MemberAvatar";
+import ErrorDialog from "../../../dialogs/ErrorDialog";
+import AccessibleButton from "../../../elements/AccessibleButton";
+import SettingsFieldset from "../../SettingsFieldset";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsTab from "../SettingsTab";
+
+const Timestamp: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => {
+    const timestamp = roomMember.events.member?.event.origin_server_ts;
+    if (!timestamp) return null;
+    return <time className="mx_PeopleRoomSettingsTab_timestamp">{formatRelativeTime(new Date(timestamp))}</time>;
+};
+
+const SeeMoreOrLess: VFC<{ roomMember: RoomMember }> = ({ roomMember }) => {
+    const [seeMore, setSeeMore] = useState(false);
+    const reason = roomMember.events.member?.getContent().reason;
+
+    if (!reason) return null;
+
+    const truncateAt = 120;
+    const shouldTruncate = reason.length > truncateAt;
+
+    return (
+        <>
+            <p className="mx_PeopleRoomSettingsTab_seeMoreOrLess">
+                {seeMore || !shouldTruncate ? reason : `${reason.substring(0, truncateAt)}…`}
+            </p>
+            {shouldTruncate && (
+                <AccessibleButton kind="link" onClick={() => setSeeMore(!seeMore)}>
+                    {seeMore ? _t("See less") : _t("See more")}
+                </AccessibleButton>
+            )}
+        </>
+    );
+};
+
+const Knock: VFC<{
+    canInvite: boolean;
+    canKick: boolean;
+    onApprove: (userId: string) => Promise<void>;
+    onDeny: (userId: string) => Promise<void>;
+    roomMember: RoomMember;
+}> = ({ canKick, canInvite, onApprove, onDeny, roomMember }) => {
+    const [disabled, setDisabled] = useState(false);
+
+    const handleApprove = (userId: string): void => {
+        setDisabled(true);
+        onApprove(userId).catch(onError);
+    };
+
+    const handleDeny = (userId: string): void => {
+        setDisabled(true);
+        onDeny(userId).catch(onError);
+    };
+
+    const onError = (): void => setDisabled(false);
+
+    return (
+        <div className="mx_PeopleRoomSettingsTab_knock">
+            <MemberAvatar height={42} member={roomMember} width={42} />
+            <div className="mx_PeopleRoomSettingsTab_content">
+                <span className="mx_PeopleRoomSettingsTab_name">{roomMember.name}</span>
+                <Timestamp roomMember={roomMember} />
+                <span className="mx_PeopleRoomSettingsTab_userId">{roomMember.userId}</span>
+                <SeeMoreOrLess roomMember={roomMember} />
+            </div>
+            <AccessibleButton
+                className="mx_PeopleRoomSettingsTab_action"
+                disabled={!canKick || disabled}
+                kind="icon_primary_outline"
+                onClick={() => handleDeny(roomMember.userId)}
+                title={_t("Deny")}
+            >
+                <XIcon width={18} height={18} />
+            </AccessibleButton>
+            <AccessibleButton
+                className="mx_PeopleRoomSettingsTab_action"
+                disabled={!canInvite || disabled}
+                kind="icon_primary"
+                onClick={() => handleApprove(roomMember.userId)}
+                title={_t("Approve")}
+            >
+                <CheckIcon width={18} height={18} />
+            </AccessibleButton>
+        </div>
+    );
+};
+
+export const PeopleRoomSettingsTab: VFC<{ room: Room }> = ({ room }) => {
+    const client = room.client;
+    const userId = client.getUserId() || "";
+    const canInvite = room.canInvite(userId);
+    const member = room.getMember(userId);
+    const state = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
+    const canKick = member && state ? state.hasSufficientPowerLevelFor("kick", member.powerLevel) : false;
+    const roomId = room.roomId;
+
+    const handleApprove = (userId: string): Promise<void> =>
+        new Promise((_, reject) =>
+            client.invite(roomId, userId).catch((error) => {
+                onError(error);
+                reject(error);
+            }),
+        );
+
+    const handleDeny = (userId: string): Promise<void> =>
+        new Promise((_, reject) =>
+            client.kick(roomId, userId).catch((error) => {
+                onError(error);
+                reject(error);
+            }),
+        );
+
+    const onError = (error: MatrixError): IHandle<typeof ErrorDialog> =>
+        Modal.createDialog(ErrorDialog, {
+            title: error.name,
+            description: error.message,
+        });
+
+    const knockMembers = useTypedEventEmitterState(
+        room,
+        RoomStateEvent.Members,
+        useCallback(() => room.getMembersWithMembership("knock"), [room]),
+    );
+
+    return (
+        <SettingsTab>
+            <SettingsSection heading={_t("People")}>
+                <SettingsFieldset legend={_t("Asking to join")}>
+                    {knockMembers.length ? (
+                        knockMembers.map((knockMember) => (
+                            <Knock
+                                canInvite={canInvite}
+                                canKick={canKick}
+                                key={knockMember.userId}
+                                onApprove={handleApprove}
+                                onDeny={handleDeny}
+                                roomMember={knockMember}
+                            />
+                        ))
+                    ) : (
+                        <p className="mx_PeopleRoomSettingsTab_paragraph">{_t("No requests")}</p>
+                    )}
+                </SettingsFieldset>
+            </SettingsSection>
+        </SettingsTab>
+    );
+};