Add customisation point for visibility of invites and room creation

Fixes https://github.com/vector-im/element-web/issues/19331

src/components/structures/SpaceRoomView.tsx

@@ -81,6 +81,8 @@ import GroupAvatar from "../views/avatars/GroupAvatar";
 import { useDispatcher } from "../../hooks/useDispatcher";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../settings/UIFeature";
 
 interface IProps {
     space: Room;
@@ -411,7 +413,7 @@ const SpaceLanding = ({ space }) => {
     const userId = cli.getUserId();
 
     let inviteButton;
-    if (myMembership === "join" && space.canInvite(userId)) {
+    if (myMembership === "join" && space.canInvite(userId) && shouldShowComponent(UIComponent.InviteUsers)) {
         inviteButton = (
             <AccessibleButton
                 kind="primary"

src/components/views/right_panel/UserInfo.tsx

@@ -72,6 +72,8 @@ import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInse
 import SpaceStore from "../../../stores/SpaceStore";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 export interface IDevice {
     deviceId: string;
@@ -393,7 +395,7 @@ const UserOptionsSection: React.FC<{
             );
         }
 
-        if (canInvite && (!member || !member.membership || member.membership === 'leave')) {
+        if (canInvite && (member?.membership ?? 'leave') === 'leave' && shouldShowComponent(UIComponent.InviteUsers)) {
             const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
             const onInviteUserButton = async () => {
                 try {

src/components/views/rooms/MemberList.tsx

@@ -44,6 +44,8 @@ import MemberTile from "./MemberTile";
 import BaseAvatar from '../avatars/BaseAvatar';
 import { throttle } from 'lodash';
 import SpaceStore from "../../../stores/SpaceStore";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 const getSearchQueryLSKey = (roomId: string) => `mx_MemberList_searchQuarry_${roomId}`;
 
@@ -530,7 +532,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         const room = cli.getRoom(this.props.roomId);
         let inviteButton;
 
-        if (room && room.getMyMembership() === 'join') {
+        if (room?.getMyMembership() === 'join' && shouldShowComponent(UIComponent.InviteUsers)) {
             let inviteButtonText = _t("Invite to this room");
             const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat();
             if (chat && chat.roomId === this.props.roomId) {

src/components/views/rooms/NewRoomIntro.tsx

@@ -28,15 +28,17 @@ import AccessibleButton from "../elements/AccessibleButton";
 import MiniAvatarUploader, { AVATAR_SIZE } from "../elements/MiniAvatarUploader";
 import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
 import { Action } from "../../../dispatcher/actions";
-import dis from "../../../dispatcher/dispatcher";
 import SpaceStore from "../../../stores/SpaceStore";
 import { showSpaceInvite } from "../../../utils/space";
 import { privateShouldBeEncrypted } from "../../../createRoom";
 import EventTileBubble from "../messages/EventTileBubble";
 import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -150,7 +152,7 @@ const NewRoomIntro = () => {
                     { _t("Invite to just this room") }
                 </AccessibleButton> }
             </div>;
-        } else if (room.canInvite(cli.getUserId())) {
+        } else if (room.canInvite(cli.getUserId()) && shouldShowComponent(UIComponent.InviteUsers)) {
             buttons = <div className="mx_NewRoomIntro_buttons">
                 <AccessibleButton
                     className="mx_NewRoomIntro_inviteButton"

src/components/views/rooms/RoomList.tsx

@@ -49,6 +49,8 @@ import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -133,32 +135,38 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                     MatrixClientPeg.get().getUserId());
 
                 return <IconizedContextMenuOptionList first>
-                    <IconizedContextMenuOption
-                        label={_t("Create new room")}
-                        iconClassName="mx_RoomList_iconPlus"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onFinished();
-                            showCreateNewRoom(SpaceStore.instance.activeSpace);
-                        }}
-                        disabled={!canAddRooms}
-                        tooltip={canAddRooms ? undefined
-                            : _t("You do not have permissions to create new rooms in this space")}
-                    />
-                    <IconizedContextMenuOption
-                        label={_t("Add existing room")}
-                        iconClassName="mx_RoomList_iconHash"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onFinished();
-                            showAddExistingRooms(SpaceStore.instance.activeSpace);
-                        }}
-                        disabled={!canAddRooms}
-                        tooltip={canAddRooms ? undefined
-                            : _t("You do not have permissions to add rooms to this space")}
-                    />
+                    {
+                        shouldShowComponent(UIComponent.CreateRooms)
+                            ? (<>
+                                <IconizedContextMenuOption
+                                    label={_t("Create new room")}
+                                    iconClassName="mx_RoomList_iconPlus"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onFinished();
+                                        showCreateNewRoom(SpaceStore.instance.activeSpace);
+                                    }}
+                                    disabled={!canAddRooms}
+                                    tooltip={canAddRooms ? undefined
+                                        : _t("You do not have permissions to create new rooms in this space")}
+                                />
+                                <IconizedContextMenuOption
+                                    label={_t("Add existing room")}
+                                    iconClassName="mx_RoomList_iconHash"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onFinished();
+                                        showAddExistingRooms(SpaceStore.instance.activeSpace);
+                                    }}
+                                    disabled={!canAddRooms}
+                                    tooltip={canAddRooms ? undefined
+                                        : _t("You do not have permissions to add rooms to this space")}
+                                />
+                            </>)
+                            : null
+                    }
                     <IconizedContextMenuOption
                         label={_t("Explore rooms")}
                         iconClassName="mx_RoomList_iconBrowse"

src/components/views/rooms/RoomSublist.tsx

@@ -55,6 +55,8 @@ import { ListNotificationState } from "../../../stores/notifications/ListNotific
 import IconizedContextMenu from "../context_menus/IconizedContextMenu";
 import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
 const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
@@ -675,7 +677,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     );
 
                     let addRoomButton = null;
-                    if (!!this.props.onAddRoom) {
+                    if (!!this.props.onAddRoom && shouldShowComponent(UIComponent.CreateRooms)) {
                         addRoomButton = (
                             <AccessibleTooltipButton
                                 tabIndex={tabIndex}
@@ -687,6 +689,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                             />
                         );
                     } else if (this.props.addRoomContextMenu) {
+                        // We assume that shouldShowComponent() is checked by the context menu itself.
                         addRoomButton = (
                             <ContextMenuTooltipButton
                                 tabIndex={tabIndex}

src/components/views/spaces/SpacePublicShare.tsx

@@ -24,6 +24,8 @@ import { copyPlaintext } from "../../../utils/strings";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { showRoomInviteDialog } from "../../../RoomInvite";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 interface IProps {
     space: Room;
@@ -51,16 +53,18 @@ const SpacePublicShare = ({ space, onFinished }: IProps) => {
             <h3>{ _t("Share invite link") }</h3>
             <span>{ copiedText }</span>
         </AccessibleButton>
-        { space.canInvite(MatrixClientPeg.get()?.getUserId()) ? <AccessibleButton
-            className="mx_SpacePublicShare_inviteButton"
-            onClick={() => {
-                if (onFinished) onFinished();
-                showRoomInviteDialog(space.roomId);
-            }}
-        >
-            <h3>{ _t("Invite people") }</h3>
-            <span>{ _t("Invite with email or username") }</span>
-        </AccessibleButton> : null }
+        { space.canInvite(MatrixClientPeg.get()?.getUserId()) && shouldShowComponent(UIComponent.InviteUsers)
+            ? <AccessibleButton
+                className="mx_SpacePublicShare_inviteButton"
+                onClick={() => {
+                    if (onFinished) onFinished();
+                    showRoomInviteDialog(space.roomId);
+                }}
+            >
+                <h3>{ _t("Invite people") }</h3>
+                <span>{ _t("Invite with email or username") }</span>
+            </AccessibleButton>
+            : null }
     </div>;
 };