Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/eslint1

 Conflicts:

	src/components/views/dialogs/CreateRoomDialog.tsx

	src/components/views/messages/MImageBody.tsx

src/components/structures/FilePanel.tsx

@@ -36,6 +36,7 @@ import ResizeNotifier from '../../utils/ResizeNotifier';
 import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from '../views/rooms/EventTile';
+import { Layout } from "../../settings/Layout";
 
 interface IProps {
     roomId: string;
@@ -267,6 +268,7 @@ class FilePanel extends React.Component<IProps, IState> {
                         tileShape={TileShape.FileGrid}
                         resizeNotifier={this.props.resizeNotifier}
                         empty={emptyState}
+                        layout={Layout.Group}
                     />
                 </BaseCard>
             );

src/components/structures/NotificationPanel.tsx

@@ -23,6 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import TimelinePanel from "./TimelinePanel";
 import Spinner from "../views/elements/Spinner";
 import { TileShape } from "../views/rooms/EventTile";
+import { Layout } from "../../settings/Layout";
 
 interface IProps {
     onClose(): void;
@@ -52,6 +53,7 @@ export default class NotificationPanel extends React.PureComponent<IProps> {
                     tileShape={TileShape.Notif}
                     empty={emptyState}
                     alwaysShowTimestamps={true}
+                    layout={Layout.Group}
                 />
             );
         } else {

src/components/structures/SpaceRoomView.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { RefObject, useContext, useRef, useState } from "react";
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { Preset } from "matrix-js-sdk/src/@types/partials";
+import { Preset, JoinRule } from "matrix-js-sdk/src/@types/partials";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventSubscription } from "fbemitter";
 
@@ -66,7 +66,6 @@ import Modal from "../../Modal";
 import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../SdkConfig";
 import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
-import { JoinRule } from "../views/settings/tabs/room/SecurityRoomSettingsTab";
 
 interface IProps {
     space: Room;
@@ -309,7 +308,6 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
 };
 
 const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
-    const cli = useContext(MatrixClientContext);
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
 
     let contextMenu;
@@ -332,7 +330,7 @@ const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
                         e.stopPropagation();
                         closeMenu();
 
-                        if (await showCreateNewRoom(cli, space)) {
+                        if (await showCreateNewRoom(space)) {
                             onNewRoomAdded();
                         }
                     }}
@@ -345,7 +343,7 @@ const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
                         e.stopPropagation();
                         closeMenu();
 
-                        const [added] = await showAddExistingRooms(cli, space);
+                        const [added] = await showAddExistingRooms(space);
                         if (added) {
                             onNewRoomAdded();
                         }
@@ -399,11 +397,11 @@ const SpaceLanding = ({ space }) => {
     }
 
     let settingsButton;
-    if (shouldShowSpaceSettings(cli, space)) {
+    if (shouldShowSpaceSettings(space)) {
         settingsButton = <AccessibleTooltipButton
             className="mx_SpaceRoomView_landing_settingsButton"
             onClick={() => {
-                showSpaceSettings(cli, space);
+                showSpaceSettings(space);
             }}
             title={_t("Settings")}
         />;

src/components/views/avatars/RoomAvatar.tsx

@@ -13,9 +13,11 @@ 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, { ComponentProps } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
+import classNames from "classnames";
 
 import BaseAvatar from './BaseAvatar';
 import ImageView from '../elements/ImageView';
@@ -32,11 +34,14 @@ interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idNam
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    oobData?: IOOBData;
+    oobData?: IOOBData & {
+        roomId?: string;
+    };
     width?: number;
     height?: number;
     resizeMethod?: ResizeMethod;
     viewAvatarOnClick?: boolean;
+    className?: string;
     onClick?(): void;
 }
 
@@ -129,15 +134,19 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props;
+        const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
 
         const roomName = room ? room.name : oobData.name;
         // If the room is a DM, we use the other user's ID for the color hash
         // in order to match the room avatar with their avatar
-        const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : null;
+        const idName = room ? (DMRoomMap.shared().getUserIdForRoomId(room.roomId) ?? room.roomId) : oobData.roomId;
 
         return (
-            <BaseAvatar {...otherProps}
+            <BaseAvatar
+                {...otherProps}
+                className={classNames(className, {
+                    mx_RoomAvatar_isSpaceRoom: room?.isSpaceRoom(),
+                })}
                 name={roomName}
                 idName={idName}
                 urls={this.state.urls}

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import React, { ReactNode, useContext, useMemo, useState } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { MatrixClient } from "matrix-js-sdk/src/client";
 import { sleep } from "matrix-js-sdk/src/utils";
 
 import { _t } from '../../../languageHandler';
@@ -44,9 +43,8 @@ import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";
 
 interface IProps extends IDialogProps {
-    matrixClient: MatrixClient;
     space: Room;
-    onCreateRoomClick(cli: MatrixClient, space: Room): void;
+    onCreateRoomClick(space: Room): void;
 }
 
 const Entry = ({ room, checked, onChange }) => {
@@ -301,7 +299,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     </div>;
 };
 
-const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space, onCreateRoomClick, onFinished }) => {
+const AddExistingToSpaceDialog: React.FC<IProps> = ({ space, onCreateRoomClick, onFinished }) => {
     const [selectedSpace, setSelectedSpace] = useState(space);
     const existingSubspaces = SpaceStore.instance.getChildSpaces(space.roomId);
 
@@ -350,13 +348,13 @@ const AddExistingToSpaceDialog: React.FC<IProps> = ({ matrixClient: cli, space,
         onFinished={onFinished}
         fixedWidth={false}
     >
-        <MatrixClientContext.Provider value={cli}>
+        <MatrixClientContext.Provider value={space.client}>
             <AddExistingToSpace
                 space={space}
                 onFinished={onFinished}
                 footerPrompt={<>
                     <div>{ _t("Want to add a new room instead?") }</div>
-                    <AccessibleButton onClick={() => onCreateRoomClick(cli, space)} kind="link">
+                    <AccessibleButton onClick={() => onCreateRoomClick(space)} kind="link">
                         { _t("Create a new room") }
                     </AccessibleButton>
                 </>}

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 
 import React, { ChangeEvent, createRef, KeyboardEvent, SyntheticEvent } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
 
 import SdkConfig from '../../../SdkConfig';
 import withValidation, { IFieldState } from '../elements/Validation';
@@ -31,7 +32,8 @@ import RoomAliasField from "../elements/RoomAliasField";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
-import { Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
+import Dropdown from "../elements/Dropdown";
+import SpaceStore from "../../../stores/SpaceStore";
 
 interface IProps {
     defaultPublic?: boolean;
@@ -41,7 +43,7 @@ interface IProps {
 }
 
 interface IState {
-    isPublic: boolean;
+    joinRule: JoinRule;
     isEncrypted: boolean;
     name: string;
     topic: string;
@@ -54,15 +56,25 @@ interface IState {
 
 @replaceableComponent("views.dialogs.CreateRoomDialog")
 export default class CreateRoomDialog extends React.Component<IProps, IState> {
+    private readonly supportsRestricted: boolean;
     private nameField = createRef<Field>();
     private aliasField = createRef<RoomAliasField>();
 
     constructor(props) {
         super(props);
 
+        this.supportsRestricted = this.props.parentSpace && !!SpaceStore.instance.restrictedJoinRuleSupport?.preferred;
+
+        let joinRule = JoinRule.Invite;
+        if (this.props.defaultPublic) {
+            joinRule = JoinRule.Public;
+        } else if (this.supportsRestricted) {
+            joinRule = JoinRule.Restricted;
+        }
+
         const config = SdkConfig.get();
         this.state = {
-            isPublic: this.props.defaultPublic || false,
+            joinRule,
             isEncrypted: privateShouldBeEncrypted(),
             name: this.props.defaultName || "",
             topic: "",
@@ -81,13 +93,18 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         const opts: IOpts = {};
         const createOpts: IOpts["createOpts"] = opts.createOpts = {};
         createOpts.name = this.state.name;
-        if (this.state.isPublic) {
+
+        if (this.state.joinRule === JoinRule.Public) {
             createOpts.visibility = Visibility.Public;
             createOpts.preset = Preset.PublicChat;
             opts.guestAccess = false;
             const { alias } = this.state;
             createOpts.room_alias_name = alias.substr(1, alias.indexOf(":") - 1);
+        } else {
+            // If we cannot change encryption we pass `true` for safety, the server should automatically do this for us.
+            opts.encryption = this.state.canChangeEncryption ? this.state.isEncrypted : true;
         }
+
         if (this.state.topic) {
             createOpts.topic = this.state.topic;
         }
@@ -95,22 +112,13 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             createOpts.creation_content = { 'm.federate': false };
         }
 
-        if (!this.state.isPublic) {
-            if (this.state.canChangeEncryption) {
-                opts.encryption = this.state.isEncrypted;
-            } else {
-                // the server should automatically do this for us, but for safety
-                // we'll demand it too.
-                opts.encryption = true;
-            }
-        }
-
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
         }
 
-        if (this.props.parentSpace) {
+        if (this.props.parentSpace && this.state.joinRule === JoinRule.Restricted) {
             opts.parentSpace = this.props.parentSpace;
+            opts.joinRule = JoinRule.Restricted;
         }
 
         return opts;
@@ -172,8 +180,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         this.setState({ topic: ev.target.value });
     };
 
-    private onPublicChange = (isPublic: boolean) => {
-        this.setState({ isPublic });
+    private onJoinRuleChange = (joinRule: JoinRule) => {
+        this.setState({ joinRule });
     };
 
     private onEncryptedChange = (isEncrypted: boolean) => {
@@ -210,7 +218,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
 
     render() {
         let aliasField;
-        if (this.state.isPublic) {
+        if (this.state.joinRule === JoinRule.Public) {
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
@@ -224,19 +232,46 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             );
         }
 
-        let publicPrivateLabel = <p>{ _t(
-            "Private rooms can be found and joined by invitation only. Public rooms can be " +
-            "found and joined by anyone.",
-        ) }</p>;
+        let publicPrivateLabel: JSX.Element;
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
-            publicPrivateLabel = <p>{ _t(
-                "Private rooms can be found and joined by invitation only. Public rooms can be " +
-                "found and joined by anyone in this community.",
-            ) }</p>;
+            publicPrivateLabel = <p>
+                { _t(
+                    "Private rooms can be found and joined by invitation only. Public rooms can be " +
+                    "found and joined by anyone in this community.",
+                ) }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Restricted) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Everyone in <SpaceName/> will be able to find and join this room.", {}, {
+                        SpaceName: () => <b>{ this.props.parentSpace.name }</b>,
+                    },
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Public) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Anyone will be able to find and join this room, not just members of <SpaceName/>.", {}, {
+                        SpaceName: () => <b>{ this.props.parentSpace.name }</b>,
+                    },
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Invite) {
+            publicPrivateLabel = <p>
+                { _t(
+                    "Only people invited will be able to find and join this room.",
+                ) }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
         }
 
         let e2eeSection;
-        if (!this.state.isPublic) {
+        if (this.state.joinRule !== JoinRule.Public) {
             let microcopy;
             if (privateShouldBeEncrypted()) {
                 if (this.state.canChangeEncryption) {
@@ -273,17 +308,31 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             );
         }
 
-        let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
+        let title = _t("Create a room");
         if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
             const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
             title = _t("Create a room in %(communityName)s", { communityName: name });
+        } else if (!this.props.parentSpace) {
+            title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room');
         }
+
+        const options = [
+            <div key={JoinRule.Invite} className="mx_CreateRoomDialog_dropdown_invite">
+                { _t("Private room (invite only)") }
+            </div>,
+            <div key={JoinRule.Public} className="mx_CreateRoomDialog_dropdown_public">
+                { _t("Public room") }
+            </div>,
+        ];
+
+        if (this.supportsRestricted) {
+            options.unshift(<div key={JoinRule.Restricted} className="mx_CreateRoomDialog_dropdown_restricted">
+                { _t("Visible to space members") }
+            </div>);
+        }
+
         return (
-            <BaseDialog
-                className="mx_CreateRoomDialog"
-                onFinished={this.props.onFinished}
-                title={title}
-            >
+            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished} title={title}>
                 <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field
@@ -300,11 +349,18 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             value={this.state.topic}
                             className="mx_CreateRoomDialog_topic"
                         />
-                        <LabelledToggleSwitch
-                            label={_t("Make this room public")}
-                            onChange={this.onPublicChange}
-                            value={this.state.isPublic}
-                        />
+
+                        <Dropdown
+                            id="mx_CreateRoomDialog_typeDropdown"
+                            className="mx_CreateRoomDialog_typeDropdown"
+                            onOptionChange={this.onJoinRuleChange}
+                            menuWidth={448}
+                            value={this.state.joinRule}
+                            label={_t("Room visibility")}
+                        >
+                            { options }
+                        </Dropdown>
+
                         { publicPrivateLabel }
                         { e2eeSection }
                         { aliasField }

src/components/views/dialogs/InfoDialog.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd.
 Copyright 2019 Bastian Masanek, Noxware IT <matrix@noxware.de>
+Copyright 2015 - 2021 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.
@@ -16,31 +15,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import React, { ReactNode, KeyboardEvent } from 'react';
 import classNames from "classnames";
 
-export default class InfoDialog extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        title: PropTypes.string,
-        description: PropTypes.node,
-        button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        onFinished: PropTypes.func,
-        hasCloseButton: PropTypes.bool,
-        onKeyDown: PropTypes.func,
-        fixedWidth: PropTypes.bool,
-    };
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import { IDialogProps } from "./IDialogProps";
 
+interface IProps extends IDialogProps {
+    title?: string;
+    description?: ReactNode;
+    className?: string;
+    button?: boolean | string;
+    hasCloseButton?: boolean;
+    fixedWidth?: boolean;
+    onKeyDown?(event: KeyboardEvent): void;
+}
+
+export default class InfoDialog extends React.Component<IProps> {
     static defaultProps = {
         title: '',
         description: '',
         hasCloseButton: false,
     };
 
-    onFinished = () => {
+    private onFinished = () => {
         this.props.onFinished();
     };
 

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -0,0 +1,192 @@
+/*
+Copyright 2021 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, { useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import SearchBox from "../../structures/SearchBox";
+import SpaceStore from "../../../stores/SpaceStore";
+import RoomAvatar from "../avatars/RoomAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps extends IDialogProps {
+    room: Room;
+    selected?: string[];
+}
+
+const Entry = ({ room, checked, onChange }) => {
+    const localRoom = room instanceof Room;
+
+    let description;
+    if (localRoom) {
+        description = _t("%(count)s members", { count: room.getJoinedMemberCount() });
+        const numChildRooms = SpaceStore.instance.getChildRooms(room.roomId).length;
+        if (numChildRooms > 0) {
+            description += " · " + _t("%(count)s rooms", { count: numChildRooms });
+        }
+    }
+
+    return <label className="mx_ManageRestrictedJoinRuleDialog_entry">
+        <div>
+            <div>
+                { localRoom
+                    ? <RoomAvatar room={room} height={20} width={20} />
+                    : <RoomAvatar oobData={room} height={20} width={20} />
+                }
+                <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{ room.name }</span>
+            </div>
+            { description && <div className="mx_ManageRestrictedJoinRuleDialog_entry_description">
+                { description }
+            </div> }
+        </div>
+        <StyledCheckbox
+            onChange={onChange ? (e) => onChange(e.target.checked) : null}
+            checked={checked}
+            disabled={!onChange}
+        />
+    </label>;
+};
+
+const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [], onFinished }) => {
+    const cli = room.client;
+    const [newSelected, setNewSelected] = useState(new Set<string>(selected));
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
+
+    const [spacesContainingRoom, otherEntries] = useMemo(() => {
+        const spaces = cli.getVisibleRooms().filter(r => r.getMyMembership() === "join" && r.isSpaceRoom());
+        return [
+            spaces.filter(r => SpaceStore.instance.getSpaceFilteredRoomIds(r).has(room.roomId)),
+            selected.map(roomId => {
+                const room = cli.getRoom(roomId);
+                if (!room) {
+                    return { roomId, name: roomId } as Room;
+                }
+                if (room.getMyMembership() !== "join" || !room.isSpaceRoom()) {
+                    return room;
+                }
+            }).filter(Boolean),
+        ];
+    }, [cli, selected, room.roomId]);
+
+    const [filteredSpacesContainingRooms, filteredOtherEntries] = useMemo(() => [
+        spacesContainingRoom.filter(r => r.name.toLowerCase().includes(lcQuery)),
+        otherEntries.filter(r => r.name.toLowerCase().includes(lcQuery)),
+    ], [spacesContainingRoom, otherEntries, lcQuery]);
+
+    const onChange = (checked: boolean, room: Room): void => {
+        if (checked) {
+            newSelected.add(room.roomId);
+        } else {
+            newSelected.delete(room.roomId);
+        }
+        setNewSelected(new Set(newSelected));
+    };
+
+    let inviteOnlyWarning;
+    if (newSelected.size < 1) {
+        inviteOnlyWarning = <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
+            { _t("You're removing all spaces. Access will default to invite only") }
+        </div>;
+    }
+
+    return <BaseDialog
+        title={_t("Select spaces")}
+        className="mx_ManageRestrictedJoinRuleDialog"
+        onFinished={onFinished}
+        fixedWidth={false}
+    >
+        <p>
+            { _t("Decide which spaces can access this room. " +
+                "If a space is selected, its members can find and join <RoomName/>.", {}, {
+                RoomName: () => <b>{ room.name }</b>,
+            }) }
+        </p>
+        <MatrixClientContext.Provider value={cli}>
+            <SearchBox
+                className="mx_textinput_icon mx_textinput_search"
+                placeholder={_t("Search spaces")}
+                onSearch={setQuery}
+                autoComplete={true}
+                autoFocus={true}
+            />
+            <AutoHideScrollbar className="mx_ManageRestrictedJoinRuleDialog_content">
+                { filteredSpacesContainingRooms.length > 0 ? (
+                    <div className="mx_ManageRestrictedJoinRuleDialog_section">
+                        <h3>{ _t("Spaces you know that contain this room") }</h3>
+                        { filteredSpacesContainingRooms.map(space => {
+                            return <Entry
+                                key={space.roomId}
+                                room={space}
+                                checked={newSelected.has(space.roomId)}
+                                onChange={(checked: boolean) => {
+                                    onChange(checked, space);
+                                }}
+                            />;
+                        }) }
+                    </div>
+                ) : undefined }
+
+                { filteredOtherEntries.length > 0 ? (
+                    <div className="mx_ManageRestrictedJoinRuleDialog_section">
+                        <h3>{ _t("Other spaces or rooms you might not know") }</h3>
+                        <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
+                            <div>{ _t("These are likely ones other room admins are a part of.") }</div>
+                        </div>
+                        { filteredOtherEntries.map(space => {
+                            return <Entry
+                                key={space.roomId}
+                                room={space}
+                                checked={newSelected.has(space.roomId)}
+                                onChange={(checked: boolean) => {
+                                    onChange(checked, space);
+                                }}
+                            />;
+                        }) }
+                    </div>
+                ) : null }
+
+                { filteredSpacesContainingRooms.length + filteredOtherEntries.length < 1
+                    ? <span className="mx_ManageRestrictedJoinRuleDialog_noResults">
+                        { _t("No results") }
+                    </span>
+                    : undefined
+                }
+            </AutoHideScrollbar>
+
+            <div className="mx_ManageRestrictedJoinRuleDialog_footer">
+                { inviteOnlyWarning }
+                <div className="mx_ManageRestrictedJoinRuleDialog_footer_buttons">
+                    <AccessibleButton kind="primary_outline" onClick={() => onFinished()}>
+                        { _t("Cancel") }
+                    </AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={() => onFinished(Array.from(newSelected))}>
+                        { _t("Confirm") }
+                    </AccessibleButton>
+                </div>
+            </div>
+        </MatrixClientContext.Provider>
+    </BaseDialog>;
+};
+
+export default ManageRestrictedJoinRuleDialog;
+

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018 - 2021 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.
@@ -15,19 +15,29 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import { Room } from "matrix-js-sdk/src/models/room";
+
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { upgradeRoom } from "../../../utils/RoomUpgrade";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import ErrorDialog from './ErrorDialog';
+import DialogButtons from '../elements/DialogButtons';
+import Spinner from "../elements/Spinner";
+
+interface IProps extends IDialogProps {
+    room: Room;
+}
+
+interface IState {
+    busy: boolean;
+}
 
 @replaceableComponent("views.dialogs.RoomUpgradeDialog")
-export default class RoomUpgradeDialog extends React.Component {
-    static propTypes = {
-        room: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
+export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
+    private targetVersion: string;
 
     state = {
         busy: true,
@@ -35,20 +45,19 @@ export default class RoomUpgradeDialog extends React.Component {
 
     async componentDidMount() {
         const recommended = await this.props.room.getRecommendedVersion();
-        this._targetVersion = recommended.version;
+        this.targetVersion = recommended.version;
         this.setState({ busy: false });
     }
 
-    _onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(false);
     };
 
-    _onUpgradeClick = () => {
+    private onUpgradeClick = (): void => {
         this.setState({ busy: true });
-        MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
+        upgradeRoom(this.props.room, this.targetVersion, false, false).then(() => {
             this.props.onFinished(true);
         }).catch((err) => {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to upgrade room', '', ErrorDialog, {
                 title: _t("Failed to upgrade room"),
                 description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")),
@@ -59,29 +68,22 @@ export default class RoomUpgradeDialog extends React.Component {
     };
 
     render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-
         let buttons;
         if (this.state.busy) {
             buttons = <Spinner />;
         } else {
             buttons = <DialogButtons
-                primaryButton={_t(
-                    'Upgrade this room to version %(version)s',
-                    { version: this._targetVersion },
-                )}
+                primaryButton={_t('Upgrade this room to version %(version)s', { version: this.targetVersion })}
                 primaryButtonClass="danger"
                 hasCancel={true}
-                onPrimaryButtonClick={this._onUpgradeClick}
-                focus={this.props.focus}
-                onCancel={this._onCancelClick}
+                onPrimaryButtonClick={this.onUpgradeClick}
+                onCancel={this.onCancelClick}
             />;
         }
 
         return (
-            <BaseDialog className="mx_RoomUpgradeDialog"
+            <BaseDialog
+                className="mx_RoomUpgradeDialog"
                 onFinished={this.props.onFinished}
                 title={_t("Upgrade Room Version")}
                 contentId='mx_Dialog_content'
@@ -97,8 +99,10 @@ export default class RoomUpgradeDialog extends React.Component {
                 <ol>
                     <li>{ _t("Create a new room with the same name, description and avatar") }</li>
                     <li>{ _t("Update any local room aliases to point to the new room") }</li>
-                    <li>{ _t("Stop users from speaking in the old version of the room, and post a message advising users to move to the new room") }</li>
-                    <li>{ _t("Put a link back to the old room at the start of the new room so people can see old messages") }</li>
+                    <li>{ _t("Stop users from speaking in the old version of the room, " +
+                        "and post a message advising users to move to the new room") }</li>
+                    <li>{ _t("Put a link back to the old room at the start of the new room " +
+                        "so people can see old messages") }</li>
                 </ol>
                 { buttons }
             </BaseDialog>

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 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.
@@ -14,73 +14,82 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import { JoinRule } from 'matrix-js-sdk/src/@types/partials';
+
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IDialogProps } from "./IDialogProps";
+import BugReportDialog from './BugReportDialog';
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps {
+    roomId: string;
+    targetVersion: string;
+    description?: ReactNode;
+}
+
+interface IState {
+    inviteUsersToNewRoom: boolean;
+}
 
 @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
-export default class RoomUpgradeWarningDialog extends React.Component {
-    static propTypes = {
-        onFinished: PropTypes.func.isRequired,
-        roomId: PropTypes.string.isRequired,
-        targetVersion: PropTypes.string.isRequired,
-    };
+export default class RoomUpgradeWarningDialog extends React.Component<IProps, IState> {
+    private readonly isPrivate: boolean;
+    private readonly currentVersion: string;
 
     constructor(props) {
         super(props);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        const joinRules = room ? room.currentState.getStateEvents("m.room.join_rules", "") : null;
-        const isPrivate = joinRules ? joinRules.getContent()['join_rule'] !== 'public' : true;
+        const joinRules = room?.currentState.getStateEvents(EventType.RoomJoinRules, "");
+        this.isPrivate = joinRules?.getContent()['join_rule'] !== JoinRule.Public ?? true;
+        this.currentVersion = room?.getVersion() || "1";
+
         this.state = {
-            currentVersion: room ? room.getVersion() : "1",
-            isPrivate,
             inviteUsersToNewRoom: true,
         };
     }
 
-    _onContinue = () => {
-        this.props.onFinished({ continue: true, invite: this.state.isPrivate && this.state.inviteUsersToNewRoom });
+    private onContinue = () => {
+        this.props.onFinished({ continue: true, invite: this.isPrivate && this.state.inviteUsersToNewRoom });
     };
 
-    _onCancel = () => {
+    private onCancel = () => {
         this.props.onFinished({ continue: false, invite: false });
     };
 
-    _onInviteUsersToggle = (newVal) => {
-        this.setState({ inviteUsersToNewRoom: newVal });
+    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean) => {
+        this.setState({ inviteUsersToNewRoom });
     };
 
-    _openBugReportDialog = (e) => {
+    private openBugReportDialog = (e) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {});
     };
 
     render() {
         const brand = SdkConfig.get().brand;
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         let inviteToggle = null;
-        if (this.state.isPrivate) {
+        if (this.isPrivate) {
             inviteToggle = (
                 <LabelledToggleSwitch
                     value={this.state.inviteUsersToNewRoom}
-                    onChange={this._onInviteUsersToggle}
-                    label={_t("Automatically invite users")} />
+                    onChange={this.onInviteUsersToggle}
+                    label={_t("Automatically invite members from this room to the new one")} />
             );
         }
 
-        const title = this.state.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
+        const title = this.isPrivate ? _t("Upgrade private room") : _t("Upgrade public room");
 
         let bugReports = (
             <p>
@@ -101,7 +110,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                         },
                         {
                             "a": (sub) => {
-                                return <a href='#' onClick={this._openBugReportDialog}>{ sub }</a>;
+                                return <a href='#' onClick={this.openBugReportDialog}>{ sub }</a>;
                             },
                         },
                     ) }
@@ -119,18 +128,26 @@ export default class RoomUpgradeWarningDialog extends React.Component {
             >
                 <div>
                     <p>
-                        { _t(
+                        { this.props.description || _t(
                             "Upgrading a room is an advanced action and is usually recommended when a room " +
                             "is unstable due to bugs, missing features or security vulnerabilities.",
                         ) }
                     </p>
+                    <p>
+                        { _t(
+                            "<b>Please note upgrading will make a new version of the room</b>. " +
+                            "All current messages will stay in this archived room.", {}, {
+                                b: sub => <b>{ sub }</b>,
+                            },
+                        ) }
+                    </p>
                     { bugReports }
                     <p>
                         { _t(
                             "You'll upgrade this room from <oldVersion /> to <newVersion />.",
                             {},
                             {
-                                oldVersion: () => <code>{ this.state.currentVersion }</code>,
+                                oldVersion: () => <code>{ this.currentVersion }</code>,
                                 newVersion: () => <code>{ this.props.targetVersion }</code>,
                             },
                         ) }
@@ -139,9 +156,9 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                 </div>
                 <DialogButtons
                     primaryButton={_t("Upgrade")}
-                    onPrimaryButtonClick={this._onContinue}
+                    onPrimaryButtonClick={this.onContinue}
                     cancelButton={_t("Cancel")}
-                    onCancel={this._onCancel}
+                    onCancel={this.onCancel}
                 />
             </BaseDialog>
         );

src/components/views/elements/Dropdown.tsx

@@ -1,7 +1,6 @@
 /*
-Copyright 2017 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2017 - 2021 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.
@@ -16,34 +15,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { ChangeEvent, createRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import classnames from 'classnames';
+
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-class MenuOption extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onMouseEnter = this._onMouseEnter.bind(this);
-        this._onClick = this._onClick.bind(this);
-    }
+interface IMenuOptionProps {
+    children: ReactElement;
+    highlighted?: boolean;
+    dropdownKey: string;
+    id?: string;
+    inputRef?: Ref<HTMLDivElement>;
+    onClick(dropdownKey: string): void;
+    onMouseEnter(dropdownKey: string): void;
+}
 
+class MenuOption extends React.Component<IMenuOptionProps> {
     static defaultProps = {
         disabled: false,
     };
 
-    _onMouseEnter() {
+    private onMouseEnter = () => {
         this.props.onMouseEnter(this.props.dropdownKey);
-    }
+    };
 
-    _onClick(e) {
+    private onClick = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         this.props.onClick(this.props.dropdownKey);
-    }
+    };
 
     render() {
         const optClasses = classnames({
@@ -54,8 +57,8 @@ class MenuOption extends React.Component {
         return <div
             id={this.props.id}
             className={optClasses}
-            onClick={this._onClick}
-            onMouseEnter={this._onMouseEnter}
+            onClick={this.onClick}
+            onMouseEnter={this.onMouseEnter}
             role="option"
             aria-selected={this.props.highlighted}
             ref={this.props.inputRef}
@@ -65,91 +68,97 @@ class MenuOption extends React.Component {
     }
 }
 
-MenuOption.propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-    highlighted: PropTypes.bool,
-    dropdownKey: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    onMouseEnter: PropTypes.func.isRequired,
-    inputRef: PropTypes.any,
-};
+interface IProps {
+    id: string;
+    // ARIA label
+    label: string;
+    value?: string;
+    className?: string;
+    children: ReactElement[];
+    // negative for consistency with HTML
+    disabled?: boolean;
+    // The width that the dropdown should be. If specified,
+    // the dropped-down part of the menu will be set to this
+    // width.
+    menuWidth?: number;
+    searchEnabled?: boolean;
+    // Called when the selected option changes
+    onOptionChange(dropdownKey: string): void;
+    // Called when the value of the search field changes
+    onSearchChange?(query: string): void;
+    // Function that, given the key of an option, returns
+    // a node representing that option to be displayed in the
+    // box itself as the currently-selected option (ie. as
+    // opposed to in the actual dropped-down part). If
+    // unspecified, the appropriate child element is used as
+    // in the dropped-down menu.
+    getShortOption?(value: string): ReactNode;
+}
+
+interface IState {
+    expanded: boolean;
+    highlightedOption: string | null;
+    searchQuery: string;
+}
 
 /*
  * Reusable dropdown select control, akin to react-select,
  * but somewhat simpler as react-select is 79KB of minified
  * javascript.
- *
- * TODO: Port NetworkDropdown to use this.
  */
 @replaceableComponent("views.elements.Dropdown")
-export default class Dropdown extends React.Component {
-    constructor(props) {
+export default class Dropdown extends React.Component<IProps, IState> {
+    private readonly buttonRef = createRef<HTMLDivElement>();
+    private dropdownRootElement: HTMLDivElement = null;
+    private ignoreEvent: MouseEvent = null;
+    private childrenByKey: Record<string, ReactNode> = {};
+
+    constructor(props: IProps) {
         super(props);
 
-        this.dropdownRootElement = null;
-        this.ignoreEvent = null;
+        this.reindexChildren(this.props.children);
 
-        this._onInputClick = this._onInputClick.bind(this);
-        this._onRootClick = this._onRootClick.bind(this);
-        this._onDocumentClick = this._onDocumentClick.bind(this);
-        this._onMenuOptionClick = this._onMenuOptionClick.bind(this);
-        this._onInputChange = this._onInputChange.bind(this);
-        this._collectRoot = this._collectRoot.bind(this);
-        this._collectInputTextBox = this._collectInputTextBox.bind(this);
-        this._setHighlightedOption = this._setHighlightedOption.bind(this);
-
-        this.inputTextBox = null;
-
-        this._reindexChildren(this.props.children);
-
-        const firstChild = React.Children.toArray(props.children)[0];
+        const firstChild = React.Children.toArray(props.children)[0] as ReactElement;
 
         this.state = {
             // True if the menu is dropped-down
             expanded: false,
             // The key of the highlighted option
             // (the option that would become selected if you pressed enter)
-            highlightedOption: firstChild ? firstChild.key : null,
+            highlightedOption: firstChild ? firstChild.key as string : null,
             // the current search query
             searchQuery: '',
         };
-    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
-        this._button = createRef();
         // Listen for all clicks on the document so we can close the
         // menu when the user clicks somewhere else
-        document.addEventListener('click', this._onDocumentClick, false);
+        document.addEventListener('click', this.onDocumentClick, false);
     }
 
     componentWillUnmount() {
-        document.removeEventListener('click', this._onDocumentClick, false);
+        document.removeEventListener('click', this.onDocumentClick, false);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line
         if (!nextProps.children || nextProps.children.length === 0) {
             return;
         }
-        this._reindexChildren(nextProps.children);
+        this.reindexChildren(nextProps.children);
         const firstChild = nextProps.children[0];
         this.setState({
             highlightedOption: firstChild ? firstChild.key : null,
         });
     }
 
-    _reindexChildren(children) {
+    private reindexChildren(children: ReactElement[]): void {
         this.childrenByKey = {};
         React.Children.forEach(children, (child) => {
             this.childrenByKey[child.key] = child;
         });
     }
 
-    _onDocumentClick(ev) {
+    private onDocumentClick = (ev: MouseEvent) => {
         // Close the dropdown if the user clicks anywhere that isn't
         // within our root element
         if (ev !== this.ignoreEvent) {
@@ -157,9 +166,9 @@ export default class Dropdown extends React.Component {
                 expanded: false,
             });
         }
-    }
+    };
 
-    _onRootClick(ev) {
+    private onRootClick = (ev: MouseEvent) => {
         // This captures any clicks that happen within our elements,
         // such that we can then ignore them when they're seen by the
         // click listener on the document handler, ie. not close the
@@ -167,9 +176,9 @@ export default class Dropdown extends React.Component {
         // NB. We can't just stopPropagation() because then the event
         // doesn't reach the React onClick().
         this.ignoreEvent = ev;
-    }
+    };
 
-    _onInputClick(ev) {
+    private onInputClick = (ev: React.MouseEvent) => {
         if (this.props.disabled) return;
 
         if (!this.state.expanded) {
@@ -178,24 +187,24 @@ export default class Dropdown extends React.Component {
             });
             ev.preventDefault();
         }
-    }
+    };
 
-    _close() {
+    private close() {
         this.setState({
             expanded: false,
         });
         // their focus was on the input, its getting unmounted, move it to the button
-        if (this._button.current) {
-            this._button.current.focus();
+        if (this.buttonRef.current) {
+            this.buttonRef.current.focus();
         }
     }
 
-    _onMenuOptionClick(dropdownKey) {
-        this._close();
+    private onMenuOptionClick = (dropdownKey: string) => {
+        this.close();
         this.props.onOptionChange(dropdownKey);
-    }
+    };
 
-    _onInputKeyDown = (e) => {
+    private onInputKeyDown = (e: React.KeyboardEvent) => {
         let handled = true;
 
         // These keys don't generate keypress events and so needs to be on keyup
@@ -204,16 +213,16 @@ export default class Dropdown extends React.Component {
                 this.props.onOptionChange(this.state.highlightedOption);
                 // fallthrough
             case Key.ESCAPE:
-                this._close();
+                this.close();
                 break;
             case Key.ARROW_DOWN:
                 this.setState({
-                    highlightedOption: this._nextOption(this.state.highlightedOption),
+                    highlightedOption: this.nextOption(this.state.highlightedOption),
                 });
                 break;
             case Key.ARROW_UP:
                 this.setState({
-                    highlightedOption: this._prevOption(this.state.highlightedOption),
+                    highlightedOption: this.prevOption(this.state.highlightedOption),
                 });
                 break;
             default:
@@ -224,53 +233,46 @@ export default class Dropdown extends React.Component {
             e.preventDefault();
             e.stopPropagation();
         }
-    }
+    };
 
-    _onInputChange(e) {
+    private onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({
-            searchQuery: e.target.value,
+            searchQuery: e.currentTarget.value,
         });
         if (this.props.onSearchChange) {
-            this.props.onSearchChange(e.target.value);
+            this.props.onSearchChange(e.currentTarget.value);
         }
-    }
+    };
 
-    _collectRoot(e) {
+    private collectRoot = (e: HTMLDivElement) => {
         if (this.dropdownRootElement) {
-            this.dropdownRootElement.removeEventListener(
-                'click', this._onRootClick, false,
-            );
+            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
         }
         if (e) {
-            e.addEventListener('click', this._onRootClick, false);
+            e.addEventListener('click', this.onRootClick, false);
         }
         this.dropdownRootElement = e;
-    }
+    };
 
-    _collectInputTextBox(e) {
-        this.inputTextBox = e;
-        if (e) e.focus();
-    }
-
-    _setHighlightedOption(optionKey) {
+    private setHighlightedOption = (optionKey: string) => {
         this.setState({
             highlightedOption: optionKey,
         });
-    }
+    };
 
-    _nextOption(optionKey) {
+    private nextOption(optionKey: string): string {
         const keys = Object.keys(this.childrenByKey);
         const index = keys.indexOf(optionKey);
         return keys[(index + 1) % keys.length];
     }
 
-    _prevOption(optionKey) {
+    private prevOption(optionKey: string): string {
         const keys = Object.keys(this.childrenByKey);
         const index = keys.indexOf(optionKey);
         return keys[(index - 1) % keys.length];
     }
 
-    _scrollIntoView(node) {
+    private scrollIntoView(node: Element) {
         if (node) {
             node.scrollIntoView({
                 block: "nearest",
@@ -279,18 +281,18 @@ export default class Dropdown extends React.Component {
         }
     }
 
-    _getMenuOptions() {
+    private getMenuOptions() {
         const options = React.Children.map(this.props.children, (child) => {
             const highlighted = this.state.highlightedOption === child.key;
             return (
                 <MenuOption
                     id={`${this.props.id}__${child.key}`}
                     key={child.key}
-                    dropdownKey={child.key}
+                    dropdownKey={child.key as string}
                     highlighted={highlighted}
-                    onMouseEnter={this._setHighlightedOption}
-                    onClick={this._onMenuOptionClick}
-                    inputRef={highlighted ? this._scrollIntoView : undefined}
+                    onMouseEnter={this.setHighlightedOption}
+                    onClick={this.onMenuOptionClick}
+                    inputRef={highlighted ? this.scrollIntoView : undefined}
                 >
                     { child }
                 </MenuOption>
@@ -307,7 +309,7 @@ export default class Dropdown extends React.Component {
     render() {
         let currentValue;
 
-        const menuStyle = {};
+        const menuStyle: CSSProperties = {};
         if (this.props.menuWidth) menuStyle.width = this.props.menuWidth;
 
         let menu;
@@ -316,10 +318,10 @@ export default class Dropdown extends React.Component {
                 currentValue = (
                     <input
                         type="text"
+                        autoFocus={true}
                         className="mx_Dropdown_option"
-                        ref={this._collectInputTextBox}
-                        onKeyDown={this._onInputKeyDown}
-                        onChange={this._onInputChange}
+                        onKeyDown={this.onInputKeyDown}
+                        onChange={this.onInputChange}
                         value={this.state.searchQuery}
                         role="combobox"
                         aria-autocomplete="list"
@@ -332,7 +334,7 @@ export default class Dropdown extends React.Component {
             }
             menu = (
                 <div className="mx_Dropdown_menu" style={menuStyle} role="listbox" id={`${this.props.id}_listbox`}>
-                    { this._getMenuOptions() }
+                    { this.getMenuOptions() }
                 </div>
             );
         }
@@ -356,14 +358,14 @@ export default class Dropdown extends React.Component {
 
         // Note the menu sits inside the AccessibleButton div so it's anchored
         // to the input, but overflows below it. The root contains both.
-        return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
+        return <div className={classnames(dropdownClasses)} ref={this.collectRoot}>
             <AccessibleButton
                 className="mx_Dropdown_input mx_no_textinput"
-                onClick={this._onInputClick}
+                onClick={this.onInputClick}
                 aria-haspopup="listbox"
                 aria-expanded={this.state.expanded}
                 disabled={this.props.disabled}
-                inputRef={this._button}
+                inputRef={this.buttonRef}
                 aria-label={this.props.label}
                 aria-describedby={`${this.props.id}_value`}
             >
@@ -374,28 +376,3 @@ export default class Dropdown extends React.Component {
         </div>;
     }
 }
-
-Dropdown.propTypes = {
-    id: PropTypes.string.isRequired,
-    // The width that the dropdown should be. If specified,
-    // the dropped-down part of the menu will be set to this
-    // width.
-    menuWidth: PropTypes.number,
-    // Called when the selected option changes
-    onOptionChange: PropTypes.func.isRequired,
-    // Called when the value of the search field changes
-    onSearchChange: PropTypes.func,
-    searchEnabled: PropTypes.bool,
-    // Function that, given the key of an option, returns
-    // a node representing that option to be displayed in the
-    // box itself as the currently-selected option (ie. as
-    // opposed to in the actual dropped-down part). If
-    // unspecified, the appropriate child element is used as
-    // in the dropped-down menu.
-    getShortOption: PropTypes.func,
-    value: PropTypes.string,
-    // negative for consistency with HTML
-    disabled: PropTypes.bool,
-    // ARIA label
-    label: PropTypes.string.isRequired,
-};

src/components/views/elements/ImageView.tsx

@@ -160,41 +160,80 @@ export default class ImageView extends React.Component<IProps, IState> {
         });
     };
 
-    private zoom(delta: number) {
-        const newZoom = this.state.zoom + delta;
+    private zoomDelta(delta: number, anchorX?: number, anchorY?: number) {
+        this.zoom(this.state.zoom + delta, anchorX, anchorY);
+    }
+
+    private zoom(zoomLevel: number, anchorX?: number, anchorY?: number) {
+        const oldZoom = this.state.zoom;
+        const newZoom = Math.min(zoomLevel, this.state.maxZoom);
 
         if (newZoom <= this.state.minZoom) {
+            // Zoom out fully
             this.setState({
                 zoom: this.state.minZoom,
                 translationX: 0,
                 translationY: 0,
             });
-            return;
-        }
-        if (newZoom >= this.state.maxZoom) {
-            this.setState({ zoom: this.state.maxZoom });
-            return;
-        }
+        } else if (typeof anchorX !== "number" && typeof anchorY !== "number") {
+            // Zoom relative to the center of the view
+            this.setState({
+                zoom: newZoom,
+                translationX: this.state.translationX * newZoom / oldZoom,
+                translationY: this.state.translationY * newZoom / oldZoom,
+            });
+        } else {
+            // Zoom relative to the given point on the image.
+            // First we need to figure out the offset of the anchor point
+            // relative to the center of the image, accounting for rotation.
+            let offsetX;
+            let offsetY;
+            // The modulo operator can return negative values for some
+            // rotations, so we have to do some extra work to normalize it
+            switch (((this.state.rotation % 360) + 360) % 360) {
+                case 0:
+                    offsetX = this.image.current.clientWidth / 2 - anchorX;
+                    offsetY = this.image.current.clientHeight / 2 - anchorY;
+                    break;
+                case 90:
+                    offsetX = anchorY - this.image.current.clientHeight / 2;
+                    offsetY = this.image.current.clientWidth / 2 - anchorX;
+                    break;
+                case 180:
+                    offsetX = anchorX - this.image.current.clientWidth / 2;
+                    offsetY = anchorY - this.image.current.clientHeight / 2;
+                    break;
+                case 270:
+                    offsetX = this.image.current.clientHeight / 2 - anchorY;
+                    offsetY = anchorX - this.image.current.clientWidth / 2;
+            }
 
-        this.setState({
-            zoom: newZoom,
-        });
+            // Apply the zoom and offset
+            this.setState({
+                zoom: newZoom,
+                translationX: this.state.translationX + (newZoom - oldZoom) * offsetX,
+                translationY: this.state.translationY + (newZoom - oldZoom) * offsetY,
+            });
+        }
     }
 
     private onWheel = (ev: WheelEvent) => {
-        ev.stopPropagation();
-        ev.preventDefault();
+        if (ev.target === this.image.current) {
+            ev.stopPropagation();
+            ev.preventDefault();
 
-        const { deltaY } = normalizeWheelEvent(ev);
-        this.zoom(-(deltaY * ZOOM_COEFFICIENT));
+            const { deltaY } = normalizeWheelEvent(ev);
+            // Zoom in on the point on the image targeted by the cursor
+            this.zoomDelta(-deltaY * ZOOM_COEFFICIENT, ev.offsetX, ev.offsetY);
+        }
     };
 
     private onZoomInClick = () => {
-        this.zoom(ZOOM_STEP);
+        this.zoomDelta(ZOOM_STEP);
     };
 
     private onZoomOutClick = () => {
-        this.zoom(-ZOOM_STEP);
+        this.zoomDelta(-ZOOM_STEP);
     };
 
     private onKeyDown = (ev: KeyboardEvent) => {
@@ -259,7 +298,7 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         // Zoom in if we are completely zoomed out
         if (this.state.zoom === this.state.minZoom) {
-            this.setState({ zoom: this.state.maxZoom });
+            this.zoom(this.state.maxZoom, ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
             return;
         }
 
@@ -289,11 +328,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE &&
             Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
         ) {
-            this.setState({
-                zoom: this.state.minZoom,
-                translationX: 0,
-                translationY: 0,
-            });
+            this.zoom(this.state.minZoom);
             this.initX = 0;
             this.initY = 0;
         }

src/components/views/elements/StyledRadioGroup.tsx

@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 
 import StyledRadioButton from "./StyledRadioButton";
 
-interface IDefinition<T extends string> {
+export interface IDefinition<T extends string> {
     value: T;
     className?: string;
     disabled?: boolean;
-    label: React.ReactChild;
-    description?: React.ReactChild;
+    label: ReactNode;
+    description?: ReactNode;
     checked?: boolean; // If provided it will override the value comparison done in the group
 }
 
@@ -59,7 +59,7 @@ function StyledRadioGroup<T extends string>({
                 checked={d.checked !== undefined ? d.checked : d.value === value}
                 name={name}
                 value={d.value}
-                disabled={disabled || d.disabled}
+                disabled={d.disabled ?? disabled}
                 outlined={outlined}
             >
                 { d.label }

src/components/views/messages/MImageBody.tsx

@@ -347,7 +347,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     className="mx_MImageBody_thumbnail"
                     src={thumbUrl}
                     ref={this.image}
-                    style={{ maxWidth: maxWidth + "px" }}
+                    style={{ maxWidth: `min(100%, ${maxWidth}px)` }}
                     alt={content.body}
                     onError={this.onImageError}
                     onLoad={this.onImageLoad}
@@ -372,7 +372,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                         className="mx_MImageBody_thumbnail"
                         style={{
                             // Constrain width here so that spinner appears central to the loaded thumbnail
-                            maxWidth: infoWidth + "px",
+                            maxWidth: `min(100%, ${infoWidth}px)`,
                         }}
                     >
                         { placeholder }
@@ -461,7 +461,7 @@ export class HiddenImagePlaceholder extends React.PureComponent<PlaceholderIProp
         let className = 'mx_HiddenImagePlaceholder';
         if (this.props.hover) className += ' mx_HiddenImagePlaceholder_hover';
         return (
-            <div className={className} style={{ maxWidth: maxWidth }}>
+            <div className={className} style={{ maxWidth: `min(100%, ${maxWidth}px)` }}>
                 <div className='mx_HiddenImagePlaceholder_button'>
                     <span className='mx_HiddenImagePlaceholder_eye' />
                     <span>{ _t("Show image") }</span>

src/components/views/messages/TextualBody.tsx

@@ -514,7 +514,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         switch (content.msgtype) {
             case MsgType.Emote:
                 return (
-                    <span className="mx_MEmoteBody mx_EventTile_content">
+                    <div className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
                         <span
                             className="mx_MEmoteBody_sender"
@@ -525,21 +525,21 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                         &nbsp;
                         { body }
                         { widgets }
-                    </span>
+                    </div>
                 );
             case MsgType.Notice:
                 return (
-                    <span className="mx_MNoticeBody mx_EventTile_content">
+                    <div className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                         { widgets }
-                    </span>
+                    </div>
                 );
             default: // including "m.text"
                 return (
-                    <span className="mx_MTextBody mx_EventTile_content">
+                    <div className="mx_MTextBody mx_EventTile_content">
                         { body }
                         { widgets }
-                    </span>
+                    </div>
                 );
         }
     }

src/components/views/rooms/EventTile.tsx

@@ -1147,6 +1147,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         { ircTimestamp }
                         { sender }
                         { ircPadlock }
+                        { avatar }
                         <div className="mx_EventTile_line" key="mx_EventTile_line">
                             { groupTimestamp }
                             { groupPadlock }
@@ -1167,7 +1168,6 @@ export default class EventTile extends React.Component<IProps, IState> {
                         </div>
                         { reactionsRow }
                         { msgOption }
-                        { avatar }
                     </>)
                 );
             }

src/components/views/rooms/RoomList.tsx

@@ -140,7 +140,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                             e.preventDefault();
                             e.stopPropagation();
                             onFinished();
-                            showCreateNewRoom(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                            showCreateNewRoom(SpaceStore.instance.activeSpace);
                         }}
                         disabled={!canAddRooms}
                         tooltip={canAddRooms ? undefined
@@ -153,7 +153,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                             e.preventDefault();
                             e.stopPropagation();
                             onFinished();
-                            showAddExistingRooms(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
+                            showAddExistingRooms(SpaceStore.instance.activeSpace);
                         }}
                         disabled={!canAddRooms}
                         tooltip={canAddRooms ? undefined

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

@@ -15,52 +15,43 @@ limitations under the License.
 */
 
 import React from 'react';
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { GuestAccess, HistoryVisibility, JoinRule, RestrictedAllowType } from "matrix-js-sdk/src/@types/partials";
+import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import Modal from "../../../../../Modal";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
-import StyledRadioGroup from '../../../elements/StyledRadioGroup';
+import StyledRadioGroup, { IDefinition } from '../../../elements/StyledRadioGroup';
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
+import AccessibleButton from "../../../elements/AccessibleButton";
+import SpaceStore from "../../../../../stores/SpaceStore";
+import RoomAvatar from "../../../avatars/RoomAvatar";
+import ManageRestrictedJoinRuleDialog from '../../../dialogs/ManageRestrictedJoinRuleDialog';
+import RoomUpgradeWarningDialog from '../../../dialogs/RoomUpgradeWarningDialog';
+import { upgradeRoom } from "../../../../../utils/RoomUpgrade";
+import { arrayHasDiff } from "../../../../../utils/arrays";
 import SettingsFlag from '../../../elements/SettingsFlag';
 
-// Knock and private are reserved keywords which are not yet implemented.
-export enum JoinRule {
-    Public = "public",
-    Knock = "knock",
-    Invite = "invite",
-    /**
-     * @deprecated Reserved. Should not be used.
-     */
-    Private = "private",
-}
-
-export enum GuestAccess {
-    CanJoin = "can_join",
-    Forbidden = "forbidden",
-}
-
-export enum HistoryVisibility {
-    Invited = "invited",
-    Joined = "joined",
-    Shared = "shared",
-    WorldReadable = "world_readable",
-}
-
 interface IProps {
     roomId: string;
 }
 
 interface IState {
     joinRule: JoinRule;
+    restrictedAllowRoomIds?: string[];
     guestAccess: GuestAccess;
     history: HistoryVisibility;
     hasAliases: boolean;
     encrypted: boolean;
+    roomSupportsRestricted?: boolean;
+    preferredRestrictionVersion?: string;
+    showAdvancedSection: boolean;
 }
 
 @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
@@ -70,44 +61,58 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
         this.state = {
             joinRule: JoinRule.Invite,
-            guestAccess: GuestAccess.CanJoin,
+            guestAccess: GuestAccess.Forbidden,
             history: HistoryVisibility.Shared,
             hasAliases: false,
             encrypted: false,
+            showAdvancedSection: false,
         };
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
-    async UNSAFE_componentWillMount() { // eslint-disable-line
-        MatrixClientPeg.get().on("RoomState.events", this.onStateEvent);
+    UNSAFE_componentWillMount() { // eslint-disable-line
+        const cli = MatrixClientPeg.get();
+        cli.on("RoomState.events", this.onStateEvent);
 
-        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+        const room = cli.getRoom(this.props.roomId);
         const state = room.currentState;
 
-        const joinRule: JoinRule = this.pullContentPropertyFromEvent(
-            state.getStateEvents("m.room.join_rules", ""),
+        const joinRuleEvent = state.getStateEvents(EventType.RoomJoinRules, "");
+        const joinRule: JoinRule = this.pullContentPropertyFromEvent<JoinRule>(
+            joinRuleEvent,
             'join_rule',
             JoinRule.Invite,
         );
-        const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
-            state.getStateEvents("m.room.guest_access", ""),
+        const restrictedAllowRoomIds = joinRule === JoinRule.Restricted
+            ? joinRuleEvent?.getContent().allow
+                ?.filter(a => a.type === RestrictedAllowType.RoomMembership)
+                ?.map(a => a.room_id)
+            : undefined;
+
+        const guestAccess: GuestAccess = this.pullContentPropertyFromEvent<GuestAccess>(
+            state.getStateEvents(EventType.RoomGuestAccess, ""),
             'guest_access',
             GuestAccess.Forbidden,
         );
-        const history: HistoryVisibility = this.pullContentPropertyFromEvent(
-            state.getStateEvents("m.room.history_visibility", ""),
+        const history: HistoryVisibility = this.pullContentPropertyFromEvent<HistoryVisibility>(
+            state.getStateEvents(EventType.RoomHistoryVisibility, ""),
             'history_visibility',
             HistoryVisibility.Shared,
         );
+
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
-        this.setState({ joinRule, guestAccess, history, encrypted });
-        const hasAliases = await this.hasAliases();
-        this.setState({ hasAliases });
+        const restrictedRoomCapabilities = SpaceStore.instance.restrictedJoinRuleSupport;
+        const roomSupportsRestricted = Array.isArray(restrictedRoomCapabilities?.support)
+            && restrictedRoomCapabilities.support.includes(room.getVersion());
+        const preferredRestrictionVersion = roomSupportsRestricted ? undefined : restrictedRoomCapabilities?.preferred;
+        this.setState({ joinRule, restrictedAllowRoomIds, guestAccess, history, encrypted,
+            roomSupportsRestricted, preferredRestrictionVersion });
+
+        this.hasAliases().then(hasAliases => this.setState({ hasAliases }));
     }
 
     private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
-        if (!event || !event.getContent()) return defaultValue;
-        return event.getContent()[key] || defaultValue;
+        return event?.getContent()[key] || defaultValue;
     }
 
     componentWillUnmount() {
@@ -115,13 +120,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
     }
 
     private onStateEvent = (e: MatrixEvent) => {
-        const refreshWhenTypes = [
-            'm.room.join_rules',
-            'm.room.guest_access',
-            'm.room.history_visibility',
-            'm.room.encryption',
+        const refreshWhenTypes: EventType[] = [
+            EventType.RoomJoinRules,
+            EventType.RoomGuestAccess,
+            EventType.RoomHistoryVisibility,
+            EventType.RoomEncryption,
         ];
-        if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
+        if (refreshWhenTypes.includes(e.getType() as EventType)) this.forceUpdate();
     };
 
     private onEncryptionChange = () => {
@@ -149,7 +154,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                 const beforeEncrypted = this.state.encrypted;
                 this.setState({ encrypted: true });
                 MatrixClientPeg.get().sendStateEvent(
-                    this.props.roomId, "m.room.encryption",
+                    this.props.roomId, EventType.RoomEncryption,
                     { algorithm: "m.megolm.v1.aes-sha2" },
                 ).catch((e) => {
                     console.error(e);
@@ -159,89 +164,91 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         });
     };
 
-    private fixGuestAccess = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const joinRule = JoinRule.Invite;
-        const guestAccess = GuestAccess.CanJoin;
-
+    private onJoinRuleChange = async (joinRule: JoinRule) => {
         const beforeJoinRule = this.state.joinRule;
-        const beforeGuestAccess = this.state.guestAccess;
-        this.setState({ joinRule, guestAccess });
+
+        let restrictedAllowRoomIds: string[];
+        if (joinRule === JoinRule.Restricted) {
+            const matrixClient = MatrixClientPeg.get();
+            const roomId = this.props.roomId;
+            const room = matrixClient.getRoom(roomId);
+
+            if (beforeJoinRule === JoinRule.Restricted || this.state.roomSupportsRestricted) {
+                // Have the user pick which spaces to allow joins from
+                restrictedAllowRoomIds = await this.editRestrictedRoomIds();
+                if (!Array.isArray(restrictedAllowRoomIds)) return;
+            } else if (this.state.preferredRestrictionVersion) {
+                // Block this action on a room upgrade otherwise it'd make their room unjoinable
+                const targetVersion = this.state.preferredRestrictionVersion;
+                Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, {
+                    roomId,
+                    targetVersion,
+                    description: _t("This upgrade will allow members of selected spaces " +
+                        "access to this room without an invite."),
+                    onFinished: (resp) => {
+                        if (!resp?.continue) return;
+                        upgradeRoom(room, targetVersion, resp.invite);
+                    },
+                });
+                return;
+            }
+        }
+
+        if (beforeJoinRule === joinRule && !restrictedAllowRoomIds) return;
+
+        const content: IContent = {
+            join_rule: joinRule,
+        };
+
+        // pre-set the accepted spaces with the currently viewed one as per the microcopy
+        if (joinRule === JoinRule.Restricted) {
+            content.allow = restrictedAllowRoomIds.map(roomId => ({
+                "type": RestrictedAllowType.RoomMembership,
+                "room_id": roomId,
+            }));
+        }
+
+        this.setState({ joinRule, restrictedAllowRoomIds });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(
-            this.props.roomId,
-            "m.room.join_rules",
-            { join_rule: joinRule },
-            "",
-        ).catch((e) => {
+        client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, content, "").catch((e) => {
             console.error(e);
-            this.setState({ joinRule: beforeJoinRule });
-        });
-        client.sendStateEvent(
-            this.props.roomId,
-            "m.room.guest_access",
-            { guest_access: guestAccess },
-            "",
-        ).catch((e) => {
-            console.error(e);
-            this.setState({ guestAccess: beforeGuestAccess });
+            this.setState({
+                joinRule: beforeJoinRule,
+                restrictedAllowRoomIds: undefined,
+            });
         });
     };
 
-    private onRoomAccessRadioToggle = (roomAccess: string) => {
-        //                         join_rule
-        //                      INVITE  |  PUBLIC
-        //        ----------------------+----------------
-        // guest  CAN_JOIN   | inv_only | pub_with_guest
-        // access ----------------------+----------------
-        //        FORBIDDEN  | inv_only | pub_no_guest
-        //        ----------------------+----------------
-
-        // we always set guests can_join here as it makes no sense to have
-        // an invite-only room that guests can't join.  If you explicitly
-        // invite them, you clearly want them to join, whether they're a
-        // guest or not.  In practice, guest_access should probably have
-        // been implemented as part of the join_rules enum.
-        let joinRule = JoinRule.Invite;
-        let guestAccess = GuestAccess.CanJoin;
-
-        switch (roomAccess) {
-            case "invite_only":
-                // no change - use defaults above
-                break;
-            case "public_no_guests":
-                joinRule = JoinRule.Public;
-                guestAccess = GuestAccess.Forbidden;
-                break;
-            case "public_with_guests":
-                joinRule = JoinRule.Public;
-                guestAccess = GuestAccess.CanJoin;
-                break;
-        }
-
-        const beforeJoinRule = this.state.joinRule;
-        const beforeGuestAccess = this.state.guestAccess;
-        this.setState({ joinRule, guestAccess });
+    private onRestrictedRoomIdsChange = (restrictedAllowRoomIds: string[]) => {
+        const beforeRestrictedAllowRoomIds = this.state.restrictedAllowRoomIds;
+        if (!arrayHasDiff(beforeRestrictedAllowRoomIds || [], restrictedAllowRoomIds)) return;
+        this.setState({ restrictedAllowRoomIds });
 
         const client = MatrixClientPeg.get();
-        client.sendStateEvent(
-            this.props.roomId,
-            "m.room.join_rules",
-            { join_rule: joinRule },
-            "",
-        ).catch((e) => {
+        client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, {
+            join_rule: JoinRule.Restricted,
+            allow: restrictedAllowRoomIds.map(roomId => ({
+                "type": RestrictedAllowType.RoomMembership,
+                "room_id": roomId,
+            })),
+        }, "").catch((e) => {
             console.error(e);
-            this.setState({ joinRule: beforeJoinRule });
+            this.setState({ restrictedAllowRoomIds: beforeRestrictedAllowRoomIds });
         });
-        client.sendStateEvent(
-            this.props.roomId,
-            "m.room.guest_access",
-            { guest_access: guestAccess },
-            "",
-        ).catch((e) => {
+    };
+
+    private onGuestAccessChange = (allowed: boolean) => {
+        const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden;
+        const beforeGuestAccess = this.state.guestAccess;
+        if (beforeGuestAccess === guestAccess) return;
+
+        this.setState({ guestAccess });
+
+        const client = MatrixClientPeg.get();
+        client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, {
+            guest_access: guestAccess,
+        }, "").catch((e) => {
             console.error(e);
             this.setState({ guestAccess: beforeGuestAccess });
         });
@@ -249,8 +256,10 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
 
     private onHistoryRadioToggle = (history: HistoryVisibility) => {
         const beforeHistory = this.state.history;
+        if (beforeHistory === history) return;
+
         this.setState({ history: history });
-        MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
+        MatrixClientPeg.get().sendStateEvent(this.props.roomId, EventType.RoomHistoryVisibility, {
             history_visibility: history,
         }, "").catch((e) => {
             console.error(e);
@@ -270,36 +279,48 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
             return Array.isArray(localAliases) && localAliases.length !== 0;
         } else {
             const room = cli.getRoom(this.props.roomId);
-            const aliasEvents = room.currentState.getStateEvents("m.room.aliases") || [];
+            const aliasEvents = room.currentState.getStateEvents(EventType.RoomAliases) || [];
             const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
             return hasAliases;
         }
     }
 
-    private renderRoomAccess() {
+    private editRestrictedRoomIds = async (): Promise<string[] | undefined> => {
+        let selected = this.state.restrictedAllowRoomIds;
+        if (!selected?.length && SpaceStore.instance.activeSpace) {
+            selected = [SpaceStore.instance.activeSpace.roomId];
+        }
+
+        const matrixClient = MatrixClientPeg.get();
+        const { finished } = Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, {
+            matrixClient,
+            room: matrixClient.getRoom(this.props.roomId),
+            selected,
+        }, "mx_ManageRestrictedJoinRuleDialog_wrapper");
+
+        const [restrictedAllowRoomIds] = await finished;
+        return restrictedAllowRoomIds;
+    };
+
+    private onEditRestrictedClick = async () => {
+        const restrictedAllowRoomIds = await this.editRestrictedRoomIds();
+        if (!Array.isArray(restrictedAllowRoomIds)) return;
+        if (restrictedAllowRoomIds.length > 0) {
+            this.onRestrictedRoomIdsChange(restrictedAllowRoomIds);
+        } else {
+            this.onJoinRuleChange(JoinRule.Invite);
+        }
+    };
+
+    private renderJoinRule() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const joinRule = this.state.joinRule;
-        const guestAccess = this.state.guestAccess;
 
-        const canChangeAccess = room.currentState.mayClientSendStateEvent("m.room.join_rules", client)
-            && room.currentState.mayClientSendStateEvent("m.room.guest_access", client);
-
-        let guestWarning = null;
-        if (joinRule !== 'public' && guestAccess === 'forbidden') {
-            guestWarning = (
-                <div className='mx_SecurityRoomSettingsTab_warning'>
-                    <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
-                    <span>
-                        { _t("Guests cannot join this room even if explicitly invited.") }&nbsp;
-                        <a href="" onClick={this.fixGuestAccess}>{ _t("Click here to fix") }</a>
-                    </span>
-                </div>
-            );
-        }
+        const canChangeJoinRule = room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, client);
 
         let aliasWarning = null;
-        if (joinRule === 'public' && !this.state.hasAliases) {
+        if (joinRule === JoinRule.Public && !this.state.hasAliases) {
             aliasWarning = (
                 <div className='mx_SecurityRoomSettingsTab_warning'>
                     <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
@@ -310,34 +331,107 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
             );
         }
 
+        const radioDefinitions: IDefinition<JoinRule>[] = [{
+            value: JoinRule.Invite,
+            label: _t("Private (invite only)"),
+            description: _t("Only invited people can join."),
+            checked: this.state.joinRule === JoinRule.Invite
+                || (this.state.joinRule === JoinRule.Restricted && !this.state.restrictedAllowRoomIds?.length),
+        }, {
+            value: JoinRule.Public,
+            label: _t("Public"),
+            description: _t("Anyone can find and join."),
+        }];
+
+        if (this.state.roomSupportsRestricted ||
+            this.state.preferredRestrictionVersion ||
+            joinRule === JoinRule.Restricted
+        ) {
+            let upgradeRequiredPill;
+            if (this.state.preferredRestrictionVersion) {
+                upgradeRequiredPill = <span className="mx_SecurityRoomSettingsTab_upgradeRequired">
+                    { _t("Upgrade required") }
+                </span>;
+            }
+
+            let description;
+            if (joinRule === JoinRule.Restricted && this.state.restrictedAllowRoomIds?.length) {
+                const shownSpaces = this.state.restrictedAllowRoomIds
+                    .map(roomId => client.getRoom(roomId))
+                    .filter(room => room?.isSpaceRoom())
+                    .slice(0, 4);
+
+                let moreText;
+                if (shownSpaces.length < this.state.restrictedAllowRoomIds.length) {
+                    if (shownSpaces.length > 0) {
+                        moreText = _t("& %(count)s more", {
+                            count: this.state.restrictedAllowRoomIds.length - shownSpaces.length,
+                        });
+                    } else {
+                        moreText = _t("Currently, %(count)s spaces have access", {
+                            count: this.state.restrictedAllowRoomIds.length,
+                        });
+                    }
+                }
+
+                description = <div>
+                    <span>
+                        { _t("Anyone in a space can find and join. <a>Edit which spaces can access here.</a>", {}, {
+                            a: sub => <AccessibleButton
+                                disabled={!canChangeJoinRule}
+                                onClick={this.onEditRestrictedClick}
+                                kind="link"
+                            >
+                                { sub }
+                            </AccessibleButton>,
+                        }) }
+                    </span>
+
+                    <div className="mx_SecurityRoomSettingsTab_spacesWithAccess">
+                        <h4>{ _t("Spaces with access") }</h4>
+                        { shownSpaces.map(room => {
+                            return <span key={room.roomId}>
+                                <RoomAvatar room={room} height={32} width={32} />
+                                { room.name }
+                            </span>;
+                        }) }
+                        { moreText && <span>{ moreText }</span> }
+                    </div>
+                </div>;
+            } else if (SpaceStore.instance.activeSpace) {
+                description = _t("Anyone in %(spaceName)s can find and join. You can select other spaces too.", {
+                    spaceName: SpaceStore.instance.activeSpace.name,
+                });
+            } else {
+                description = _t("Anyone in a space can find and join. You can select multiple spaces.");
+            }
+
+            radioDefinitions.splice(1, 0, {
+                value: JoinRule.Restricted,
+                label: <>
+                    { _t("Space members") }
+                    { upgradeRequiredPill }
+                </>,
+                description,
+                // if there are 0 allowed spaces then render it as invite only instead
+                checked: this.state.joinRule === JoinRule.Restricted && !!this.state.restrictedAllowRoomIds?.length,
+            });
+        }
+
         return (
-            <div>
-                { guestWarning }
+            <div className="mx_SecurityRoomSettingsTab_joinRule">
+                <div className="mx_SettingsTab_subsectionText">
+                    <span>{ _t("Decide who can join %(roomName)s.", {
+                        roomName: client.getRoom(this.props.roomId)?.name,
+                    }) }</span>
+                </div>
                 { aliasWarning }
                 <StyledRadioGroup
-                    name="roomVis"
+                    name="joinRule"
                     value={joinRule}
-                    onChange={this.onRoomAccessRadioToggle}
-                    definitions={[
-                        {
-                            value: "invite_only",
-                            disabled: !canChangeAccess,
-                            label: _t('Only people who have been invited'),
-                            checked: joinRule !== "public",
-                        },
-                        {
-                            value: "public_no_guests",
-                            disabled: !canChangeAccess,
-                            label: _t('Anyone who knows the room\'s link, apart from guests'),
-                            checked: joinRule === "public" && guestAccess !== "can_join",
-                        },
-                        {
-                            value: "public_with_guests",
-                            disabled: !canChangeAccess,
-                            label: _t("Anyone who knows the room's link, including guests"),
-                            checked: joinRule === "public" && guestAccess === "can_join",
-                        },
-                    ]}
+                    onChange={this.onJoinRuleChange}
+                    definitions={radioDefinitions}
+                    disabled={!canChangeJoinRule}
                 />
             </div>
         );
@@ -347,7 +441,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         const client = MatrixClientPeg.get();
         const history = this.state.history;
         const state = client.getRoom(this.props.roomId).currentState;
-        const canChangeHistory = state.mayClientSendStateEvent('m.room.history_visibility', client);
+        const canChangeHistory = state.mayClientSendStateEvent(EventType.RoomHistoryVisibility, client);
 
         const options = [
             {
@@ -389,11 +483,35 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         );
     }
 
+    private toggleAdvancedSection = () => {
+        this.setState({ showAdvancedSection: !this.state.showAdvancedSection });
+    };
+
+    private renderAdvanced() {
+        const client = MatrixClientPeg.get();
+        const guestAccess = this.state.guestAccess;
+        const state = client.getRoom(this.props.roomId).currentState;
+        const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
+
+        return <div className="mx_SettingsTab_section">
+            <LabelledToggleSwitch
+                value={guestAccess === GuestAccess.CanJoin}
+                onChange={this.onGuestAccessChange}
+                disabled={!canSetGuestAccess}
+                label={_t("Enable guest access")}
+            />
+            <p>
+                { _t("People with supported clients will be able to join " +
+                    "the room without having a registered account.") }
+            </p>
+        </div>;
+    }
+
     render() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const isEncrypted = this.state.encrypted;
-        const hasEncryptionPermission = room.currentState.mayClientSendStateEvent("m.room.encryption", client);
+        const hasEncryptionPermission = room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, client);
         const canEnableEncryption = !isEncrypted && hasEncryptionPermission;
 
         let encryptionSettings = null;
@@ -436,11 +554,20 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                     { encryptionSettings }
                 </div>
 
-                <span className='mx_SettingsTab_subheading'>{ _t("Who can access this room?") }</span>
+                <span className='mx_SettingsTab_subheading'>{ _t("Access") }</span>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    { this.renderRoomAccess() }
+                    { this.renderJoinRule() }
                 </div>
 
+                <AccessibleButton
+                    onClick={this.toggleAdvancedSection}
+                    kind="link"
+                    className="mx_SettingsTab_showAdvanced"
+                >
+                    { this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
+                </AccessibleButton>
+                { this.state.showAdvancedSection && this.renderAdvanced() }
+
                 { historySection }
             </div>
         );

src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

@@ -18,13 +18,13 @@ import React, { useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { EventType } from "matrix-js-sdk/src/@types/event";
+import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import AliasSettings from "../room_settings/AliasSettings";
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import { GuestAccess, HistoryVisibility, JoinRule } from "../settings/tabs/room/SecurityRoomSettingsTab";
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 
 interface IProps {

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -203,7 +203,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        showSpaceSettings(this.context, this.props.space);
+        showSpaceSettings(this.props.space);
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
@@ -222,7 +222,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        showCreateNewRoom(this.context, this.props.space);
+        showCreateNewRoom(this.props.space);
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
@@ -230,7 +230,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        showAddExistingRooms(this.context, this.props.space);
+        showAddExistingRooms(this.props.space);
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
@@ -285,7 +285,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
             let settingsOption;
             let leaveSection;
-            if (shouldShowSpaceSettings(this.context, this.props.space)) {
+            if (shouldShowSpaceSettings(this.props.space)) {
                 settingsOption = (
                     <IconizedContextMenuOption
                         iconClassName="mx_SpacePanel_iconSettings"