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

 Conflicts:

	src/components/structures/SpaceRoomView.tsx

	src/components/views/rooms/MemberList.tsx

	src/components/views/rooms/RoomList.tsx

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -41,7 +41,7 @@ import { logger } from "matrix-js-sdk/src/logger";
  *
  * matrixClient:           A matrix client. May be a different one to the one
  *                         currently being used generally (eg. to register with
- *                         one HS whilst beign a guest on another).
+ *                         one HS whilst being a guest on another).
  * loginType:              the login type of the auth stage being attempted
  * authSessionId:          session id from the server
  * clientSecret:           The client secret in use for identity server auth sessions
@@ -84,6 +84,7 @@ interface IAuthEntryProps {
     loginType: string;
     authSessionId: string;
     errorText?: string;
+    errorCode?: string;
     // Is the auth logic currently waiting for something to happen?
     busy?: boolean;
     onPhaseChange: (phase: number) => void;
@@ -427,18 +428,29 @@ export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEn
     }
 
     render() {
+        let errorSection;
+        // ignore the error when errcode is M_UNAUTHORIZED as we expect that error until the link is clicked.
+        if (this.props.errorText && this.props.errorCode !== "M_UNAUTHORIZED") {
+            errorSection = (
+                <div className="error" role="alert">
+                    { this.props.errorText }
+                </div>
+            );
+        }
+
         // This component is now only displayed once the token has been requested,
         // so we know the email has been sent. It can also get loaded after the user
         // has clicked the validation link if the server takes a while to propagate
         // the validation internally. If we're in the session spawned from clicking
         // the validation link, we won't know the email address, so if we don't have it,
         // assume that the link has been clicked and the server will realise when we poll.
-        if (this.props.inputs.emailAddress === undefined) {
-            return <Spinner />;
-        } else if (this.props.stageState?.emailSid) {
-            // we only have a session ID if the user has clicked the link in their email,
-            // so show a loading state instead of "an email has been sent to..." because
-            // that's confusing when you've already read that email.
+        // We only have a session ID if the user has clicked the link in their email,
+        // so show a loading state instead of "an email has been sent to..." because
+        // that's confusing when you've already read that email.
+        if (this.props.inputs.emailAddress === undefined || this.props.stageState?.emailSid) {
+            if (errorSection) {
+                return errorSection;
+            }
             return <Spinner />;
         } else {
             return (
@@ -448,6 +460,7 @@ export class EmailIdentityAuthEntry extends React.Component<IEmailIdentityAuthEn
                     ) }
                     </p>
                     <p>{ _t("Open the link in the email to continue registration.") }</p>
+                    { errorSection }
                 </div>
             );
         }

src/components/views/avatars/MemberAvatar.tsx

@@ -33,7 +33,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     resizeMethod?: ResizeMethod;
     // The onClick to give the avatar
     onClick?: React.MouseEventHandler;
-    // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+    // Whether the onClick of the avatar should be overridden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
     style?: any;

src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx

@@ -0,0 +1,85 @@
+/*
+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, { ComponentProps, useMemo, useState } from 'react';
+
+import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
+import SpaceStore from "../../../stores/SpaceStore";
+import { Room } from "matrix-js-sdk/src/models/room";
+import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
+
+type BaseProps = ComponentProps<typeof ConfirmUserActionDialog>;
+interface IProps extends Omit<BaseProps, "groupMember" | "matrixClient" | "children" | "onFinished"> {
+    space: Room;
+    allLabel: string;
+    specificLabel: string;
+    noneLabel?: string;
+    warningMessage?: string;
+    onFinished(success: boolean, reason?: string, rooms?: Room[]): void;
+    spaceChildFilter?(child: Room): boolean;
+}
+
+const ConfirmSpaceUserActionDialog: React.FC<IProps> = ({
+    space,
+    spaceChildFilter,
+    allLabel,
+    specificLabel,
+    noneLabel,
+    warningMessage,
+    onFinished,
+    ...props
+}) => {
+    const spaceChildren = useMemo(() => {
+        const children = SpaceStore.instance.getChildren(space.roomId);
+        if (spaceChildFilter) {
+            return children.filter(spaceChildFilter);
+        }
+        return children;
+    }, [space.roomId, spaceChildFilter]);
+
+    const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+    const selectedRooms = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
+
+    let warning: JSX.Element;
+    if (warningMessage) {
+        warning = <div className="mx_ConfirmSpaceUserActionDialog_warning">
+            { warningMessage }
+        </div>;
+    }
+
+    return (
+        <ConfirmUserActionDialog
+            {...props}
+            onFinished={(success: boolean, reason?: string) => {
+                onFinished(success, reason, roomsToLeave);
+            }}
+            className="mx_ConfirmSpaceUserActionDialog"
+        >
+            { warning }
+            <SpaceChildrenPicker
+                space={space}
+                spaceChildren={spaceChildren}
+                selected={selectedRooms}
+                allLabel={allLabel}
+                specificLabel={specificLabel}
+                noneLabel={noneLabel}
+                onChange={setRoomsToLeave}
+            />
+        </ConfirmUserActionDialog>
+    );
+};
+
+export default ConfirmSpaceUserActionDialog;

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import classNames from "classnames";
+
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -25,12 +27,13 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import BaseAvatar from '../avatars/BaseAvatar';
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import Field from '../elements/Field';
 
 interface IProps {
     // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
-    member: RoomMember;
+    member?: RoomMember;
     // group member object. Supply either this or 'member'
-    groupMember: GroupMemberType;
+    groupMember?: GroupMemberType;
     // needed if a group member is specified
     matrixClient?: MatrixClient;
     action: string; // eg. 'Ban'
@@ -41,9 +44,15 @@ interface IProps {
     // be the string entered.
     askReason?: boolean;
     danger?: boolean;
+    children?: ReactNode;
+    className?: string;
     onFinished: (success: boolean, reason?: string) => void;
 }
 
+interface IState {
+    reason: string;
+}
+
 /*
  * A dialog for confirming an operation on another user.
  * Takes a user ID and a verb, displays the target user prominently
@@ -53,37 +62,50 @@ interface IProps {
  * Also tweaks the style for 'dangerous' actions (albeit only with colour)
  */
 @replaceableComponent("views.dialogs.ConfirmUserActionDialog")
-export default class ConfirmUserActionDialog extends React.Component<IProps> {
-    private reasonField: React.RefObject<HTMLInputElement> = React.createRef();
-
+export default class ConfirmUserActionDialog extends React.Component<IProps, IState> {
     static defaultProps = {
         danger: false,
         askReason: false,
     };
 
-    public onOk = (): void => {
-        this.props.onFinished(true, this.reasonField.current?.value);
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            reason: "",
+        };
+    }
+
+    private onOk = (): void => {
+        this.props.onFinished(true, this.state.reason);
     };
 
-    public onCancel = (): void => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
+    private onReasonChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            reason: ev.target.value,
+        });
+    };
+
     public render() {
         const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
         if (this.props.askReason) {
             reasonBox = (
-                <div>
-                    <form onSubmit={this.onOk}>
-                        <input className="mx_ConfirmUserActionDialog_reasonField"
-                            ref={this.reasonField}
-                            placeholder={_t("Reason")}
-                            autoFocus={true}
-                        />
-                    </form>
-                </div>
+                <form onSubmit={this.onOk}>
+                    <Field
+                        type="text"
+                        onChange={this.onReasonChange}
+                        value={this.state.reason}
+                        className="mx_ConfirmUserActionDialog_reasonField"
+                        label={_t("Reason")}
+                        autoFocus={true}
+                    />
+                </form>
             );
         }
 
@@ -105,19 +127,23 @@ export default class ConfirmUserActionDialog extends React.Component<IProps> {
 
         return (
             <BaseDialog
-                className="mx_ConfirmUserActionDialog"
+                className={classNames("mx_ConfirmUserActionDialog", this.props.className)}
                 onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
             >
                 <div id="mx_Dialog_content" className="mx_Dialog_content">
-                    <div className="mx_ConfirmUserActionDialog_avatar">
-                        { avatar }
+                    <div className="mx_ConfirmUserActionDialog_user">
+                        <div className="mx_ConfirmUserActionDialog_avatar">
+                            { avatar }
+                        </div>
+                        <div className="mx_ConfirmUserActionDialog_name">{ name }</div>
+                        <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
                     </div>
-                    <div className="mx_ConfirmUserActionDialog_name">{ name }</div>
-                    <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
+
+                    { reasonBox }
+                    { this.props.children }
                 </div>
-                { reasonBox }
                 <DialogButtons primaryButton={this.props.action}
                     onPrimaryButtonClick={this.onOk}
                     primaryButtonClass={confirmButtonClass}

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -39,6 +39,8 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "./UserSettingsDialog";
 import TagOrderActions from "../../../actions/TagOrderActions";
+import { inviteUsersToRoom } from "../../../RoomInvite";
+import ProgressBar from "../elements/ProgressBar";
 
 interface IProps {
     matrixClient: MatrixClient;
@@ -90,10 +92,22 @@ export interface IGroupSummary {
 }
 /* eslint-enable camelcase */
 
+enum Progress {
+    NotStarted,
+    ValidatingInputs,
+    FetchingData,
+    CreatingSpace,
+    InvitingUsers,
+    // anything beyond here is inviting user n - 4
+}
+
 const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, groupId, onFinished }) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string>(null);
-    const [busy, setBusy] = useState(false);
+
+    const [progress, setProgress] = useState(Progress.NotStarted);
+    const [numInvites, setNumInvites] = useState(0);
+    const busy = progress > 0;
 
     const [avatar, setAvatar] = useState<File>(null); // undefined means to remove avatar
     const [name, setName] = useState("");
@@ -122,30 +136,34 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
         if (busy) return;
 
         setError(null);
-        setBusy(true);
+        setProgress(Progress.ValidatingInputs);
 
         // require & validate the space name field
         if (!(await spaceNameField.current.validate({ allowEmpty: false }))) {
-            setBusy(false);
+            setProgress(0);
             spaceNameField.current.focus();
             spaceNameField.current.validate({ allowEmpty: false, focused: true });
             return;
         }
         // validate the space name alias field but do not require it
         if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) {
-            setBusy(false);
+            setProgress(0);
             spaceAliasField.current.focus();
             spaceAliasField.current.validate({ allowEmpty: true, focused: true });
             return;
         }
 
         try {
+            setProgress(Progress.FetchingData);
+
             const [rooms, members, invitedMembers] = await Promise.all([
                 cli.getGroupRooms(groupId).then(parseRoomsResponse) as Promise<IGroupRoom[]>,
                 cli.getGroupUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
                 cli.getGroupInvitedUsers(groupId).then(parseMembersResponse) as Promise<GroupMember[]>,
             ]);
 
+            setNumInvites(members.length + invitedMembers.length);
+
             const viaMap = new Map<string, string[]>();
             for (const { roomId, canonicalAlias } of rooms) {
                 const room = cli.getRoom(roomId);
@@ -167,6 +185,8 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
                 }
             }
 
+            setProgress(Progress.CreatingSpace);
+
             const spaceAvatar = avatar !== undefined ? avatar : groupSummary.profile.avatar_url;
             const roomId = await createSpace(name, joinRule === JoinRule.Public, alias, topic, spaceAvatar, {
                 creation_content: {
@@ -179,11 +199,16 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
                         via: viaMap.get(roomId) || [],
                     },
                 })),
-                invite: [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()),
+                // we do not specify the inviters here because Synapse applies a limit and this may cause it to trip
             }, {
                 andView: false,
             });
 
+            setProgress(Progress.InvitingUsers);
+
+            const userIds = [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId());
+            await inviteUsersToRoom(roomId, userIds, () => setProgress(p => p + 1));
+
             // eagerly remove it from the community panel
             dis.dispatch(TagOrderActions.removeTag(cli, groupId));
 
@@ -250,7 +275,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
             setError(e);
         }
 
-        setBusy(false);
+        setProgress(Progress.NotStarted);
     };
 
     let footer;
@@ -267,13 +292,41 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
                 { _t("Retry") }
             </AccessibleButton>
         </>;
+    } else if (busy) {
+        let description: string;
+        switch (progress) {
+            case Progress.ValidatingInputs:
+            case Progress.FetchingData:
+                description = _t("Fetching data...");
+                break;
+            case Progress.CreatingSpace:
+                description = _t("Creating Space...");
+                break;
+            case Progress.InvitingUsers:
+            default:
+                description = _t("Adding rooms... (%(progress)s out of %(count)s)", {
+                    count: numInvites,
+                    progress,
+                });
+                break;
+        }
+
+        footer = <span>
+            <ProgressBar
+                value={progress > Progress.FetchingData ? progress : 0}
+                max={numInvites + Progress.InvitingUsers}
+            />
+            <div className="mx_CreateSpaceFromCommunityDialog_progressText">
+                { description }
+            </div>
+        </span>;
     } else {
         footer = <>
-            <AccessibleButton kind="primary_outline" disabled={busy} onClick={() => onFinished()}>
+            <AccessibleButton kind="primary_outline" onClick={() => onFinished()}>
                 { _t("Cancel") }
             </AccessibleButton>
-            <AccessibleButton kind="primary" disabled={busy} onClick={onCreateSpaceClick}>
-                { busy ? _t("Creating...") : _t("Create Space") }
+            <AccessibleButton kind="primary" onClick={onCreateSpaceClick}>
+                { _t("Create Space") }
             </AccessibleButton>
         </>;
     }

src/components/views/dialogs/ExportDialog.tsx

@@ -0,0 +1,397 @@
+/*
+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, { useRef, useState } from "react";
+import { Room } from "matrix-js-sdk/src";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+import Field from "../elements/Field";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import {
+    ExportFormat,
+    ExportType,
+    textForFormat,
+    textForType,
+} from "../../../utils/exportUtils/exportUtils";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
+import HTMLExporter from "../../../utils/exportUtils/HtmlExport";
+import JSONExporter from "../../../utils/exportUtils/JSONExport";
+import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
+import { useStateCallback } from "../../../hooks/useStateCallback";
+import Exporter from "../../../utils/exportUtils/Exporter";
+import Spinner from "../elements/Spinner";
+import InfoDialog from "./InfoDialog";
+
+interface IProps extends IDialogProps {
+    room: Room;
+}
+
+const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
+    const [exportFormat, setExportFormat] = useState(ExportFormat.Html);
+    const [exportType, setExportType] = useState(ExportType.Timeline);
+    const [includeAttachments, setAttachments] = useState(false);
+    const [isExporting, setExporting] = useState(false);
+    const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
+    const [sizeLimit, setSizeLimit] = useState<number | null>(8);
+    const sizeLimitRef = useRef<Field>();
+    const messageCountRef = useRef<Field>();
+    const [exportProgressText, setExportProgressText] = useState("Processing...");
+    const [displayCancel, setCancelWarning] = useState(false);
+    const [exportCancelled, setExportCancelled] = useState(false);
+    const [exportSuccessful, setExportSuccessful] = useState(false);
+    const [exporter, setExporter] = useStateCallback<Exporter>(
+        null,
+        async (exporter: Exporter) => {
+            await exporter?.export().then(() => {
+                if (!exportCancelled) setExportSuccessful(true);
+            });
+        },
+    );
+
+    const startExport = async () => {
+        const exportOptions = {
+            numberOfMessages,
+            attachmentsIncluded: includeAttachments,
+            maxSize: sizeLimit * 1024 * 1024,
+        };
+        switch (exportFormat) {
+            case ExportFormat.Html:
+                setExporter(
+                    new HTMLExporter(
+                        room,
+                        ExportType[exportType],
+                        exportOptions,
+                        setExportProgressText,
+                    ),
+                );
+                break;
+            case ExportFormat.Json:
+                setExporter(
+                    new JSONExporter(
+                        room,
+                        ExportType[exportType],
+                        exportOptions,
+                        setExportProgressText,
+                    ),
+                );
+                break;
+            case ExportFormat.PlainText:
+                setExporter(
+                    new PlainTextExporter(
+                        room,
+                        ExportType[exportType],
+                        exportOptions,
+                        setExportProgressText,
+                    ),
+                );
+                break;
+            default:
+                console.error("Unknown export format");
+                return;
+        }
+    };
+
+    const onExportClick = async () => {
+        const isValidSize = await sizeLimitRef.current.validate({
+            focused: false,
+        });
+        if (!isValidSize) {
+            sizeLimitRef.current.validate({ focused: true });
+            return;
+        }
+        if (exportType === ExportType.LastNMessages) {
+            const isValidNumberOfMessages =
+                await messageCountRef.current.validate({ focused: false });
+            if (!isValidNumberOfMessages) {
+                messageCountRef.current.validate({ focused: true });
+                return;
+            }
+        }
+        setExporting(true);
+        await startExport();
+    };
+
+    const validateSize = withValidation({
+        rules: [
+            {
+                key: "required",
+                test({ value, allowEmpty }) {
+                    return allowEmpty || !!value;
+                },
+                invalid: () => {
+                    const min = 1;
+                    const max = 10 ** 8;
+                    return _t("Enter a number between %(min)s and %(max)s", {
+                        min,
+                        max,
+                    });
+                },
+            }, {
+                key: "number",
+                test: ({ value }) => {
+                    const parsedSize = parseFloat(value);
+                    const min = 1;
+                    const max = 2000;
+                    return !(isNaN(parsedSize) || min > parsedSize || parsedSize > max);
+                },
+                invalid: () => {
+                    const min = 1;
+                    const max = 2000;
+                    return _t(
+                        "Size can only be a number between %(min)s MB and %(max)s MB",
+                        { min, max },
+                    );
+                },
+            },
+        ],
+    });
+
+    const onValidateSize = async (fieldState: IFieldState): Promise<IValidationResult> => {
+        const result = await validateSize(fieldState);
+        return result;
+    };
+
+    const validateNumberOfMessages = withValidation({
+        rules: [
+            {
+                key: "required",
+                test({ value, allowEmpty }) {
+                    return allowEmpty || !!value;
+                },
+                invalid: () => {
+                    const min = 1;
+                    const max = 10 ** 8;
+                    return _t("Enter a number between %(min)s and %(max)s", {
+                        min,
+                        max,
+                    });
+                },
+            }, {
+                key: "number",
+                test: ({ value }) => {
+                    const parsedSize = parseFloat(value);
+                    const min = 1;
+                    const max = 10 ** 8;
+                    if (isNaN(parsedSize)) return false;
+                    return !(min > parsedSize || parsedSize > max);
+                },
+                invalid: () => {
+                    const min = 1;
+                    const max = 10 ** 8;
+                    return _t(
+                        "Number of messages can only be a number between %(min)s and %(max)s",
+                        { min, max },
+                    );
+                },
+            },
+        ],
+    });
+
+    const onValidateNumberOfMessages = async (fieldState: IFieldState): Promise<IValidationResult> => {
+        const result = await validateNumberOfMessages(fieldState);
+        return result;
+    };
+
+    const onCancel = async () => {
+        if (isExporting) setCancelWarning(true);
+        else onFinished(false);
+    };
+
+    const confirmCanel = async () => {
+        await exporter?.cancelExport();
+        setExportCancelled(true);
+        setExporting(false);
+        setExporter(null);
+    };
+
+    const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
+        value: ExportFormat[format],
+        label: textForFormat(ExportFormat[format]),
+    }));
+
+    const exportTypeOptions = Object.keys(ExportType).map((type) => {
+        return (
+            <option key={type} value={ExportType[type]}>
+                { textForType(ExportType[type]) }
+            </option>
+        );
+    });
+
+    let messageCount = null;
+    if (exportType === ExportType.LastNMessages) {
+        messageCount = (
+            <Field
+                element="input"
+                type="number"
+                value={numberOfMessages.toString()}
+                ref={messageCountRef}
+                onValidate={onValidateNumberOfMessages}
+                label={_t("Number of messages")}
+                onChange={(e) => {
+                    setNumberOfMessages(parseInt(e.target.value));
+                }}
+            />
+        );
+    }
+
+    const sizePostFix = <span>{ _t("MB") }</span>;
+
+    if (exportCancelled) {
+        // Display successful cancellation message
+        return (
+            <InfoDialog
+                title={_t("Export Successful")}
+                description={_t("The export was cancelled successfully")}
+                hasCloseButton={true}
+                onFinished={onFinished}
+            />
+        );
+    } else if (exportSuccessful) {
+        // Display successful export message
+        return (
+            <InfoDialog
+                title={_t("Export Successful")}
+                description={_t(
+                    "Your export was successful. Find it in your Downloads folder.",
+                )}
+                hasCloseButton={true}
+                onFinished={onFinished}
+            />
+        );
+    } else if (displayCancel) {
+        // Display cancel warning
+        return (
+            <BaseDialog
+                title={_t("Warning")}
+                className="mx_ExportDialog"
+                contentId="mx_Dialog_content"
+                onFinished={onFinished}
+                fixedWidth={true}
+            >
+                <p>
+                    { _t(
+                        "Are you sure you want to stop exporting your data? If you do, you'll need to start over.",
+                    ) }
+                </p>
+                <DialogButtons
+                    primaryButton={_t("Stop")}
+                    primaryButtonClass="danger"
+                    hasCancel={true}
+                    cancelButton={_t("Continue")}
+                    onCancel={() => setCancelWarning(false)}
+                    onPrimaryButtonClick={confirmCanel}
+                />
+            </BaseDialog>
+        );
+    } else {
+        // Display export settings
+        return (
+            <BaseDialog
+                title={isExporting ? _t("Exporting your data") : _t("Export Chat")}
+                className={`mx_ExportDialog ${isExporting && "mx_ExportDialog_Exporting"}`}
+                contentId="mx_Dialog_content"
+                hasCancel={true}
+                onFinished={onFinished}
+                fixedWidth={true}
+            >
+                { !isExporting ? <p>
+                    { _t(
+                        "Select from the options below to export chats from your timeline",
+                    ) }
+                </p> : null }
+
+                <span className="mx_ExportDialog_subheading">
+                    { _t("Format") }
+                </span>
+
+                <div className="mx_ExportDialog_options">
+                    <StyledRadioGroup
+                        name="exportFormat"
+                        value={exportFormat}
+                        onChange={(key) => setExportFormat(ExportFormat[key])}
+                        definitions={exportFormatOptions}
+                    />
+
+                    <span className="mx_ExportDialog_subheading">
+                        { _t("Messages") }
+                    </span>
+
+                    <Field
+                        element="select"
+                        value={exportType}
+                        onChange={(e) => {
+                            setExportType(ExportType[e.target.value]);
+                        }}
+                    >
+                        { exportTypeOptions }
+                    </Field>
+                    { messageCount }
+
+                    <span className="mx_ExportDialog_subheading">
+                        { _t("Size Limit") }
+                    </span>
+
+                    <Field
+                        type="number"
+                        autoComplete="off"
+                        onValidate={onValidateSize}
+                        element="input"
+                        ref={sizeLimitRef}
+                        value={sizeLimit.toString()}
+                        postfixComponent={sizePostFix}
+                        onChange={(e) => setSizeLimit(parseInt(e.target.value))}
+                    />
+
+                    <StyledCheckbox
+                        checked={includeAttachments}
+                        onChange={(e) =>
+                            setAttachments(
+                                (e.target as HTMLInputElement).checked,
+                            )
+                        }
+                    >
+                        { _t("Include Attachments") }
+                    </StyledCheckbox>
+                </div>
+                { isExporting ? (
+                    <div className="mx_ExportDialog_progress">
+                        <Spinner w={24} h={24} />
+                        <p>
+                            { exportProgressText }
+                        </p>
+                        <DialogButtons
+                            primaryButton={_t("Cancel")}
+                            primaryButtonClass="danger"
+                            hasCancel={false}
+                            onPrimaryButtonClick={onCancel}
+                        />
+                    </div>
+                ) : (
+                    <DialogButtons
+                        primaryButton={_t("Export")}
+                        onPrimaryButtonClick={onExportClick}
+                        onCancel={() => onFinished(false)}
+                    />
+                ) }
+            </BaseDialog>
+        );
+    }
+};
+
+export default ExportDialog;

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
@@ -22,108 +22,7 @@ import { _t } from '../../../languageHandler';
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
 import SpaceStore from "../../../stores/SpaceStore";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import { Entry } from "./AddExistingToSpaceDialog";
-import SearchBox from "../../structures/SearchBox";
-import QueryMatcher from "../../../autocomplete/QueryMatcher";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
-
-enum RoomsToLeave {
-    All = "All",
-    Specific = "Specific",
-    None = "None",
-}
-
-const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => {
-    const [query, setQuery] = useState("");
-    const lcQuery = query.toLowerCase().trim();
-
-    const filteredRooms = useMemo(() => {
-        if (!lcQuery) {
-            return rooms;
-        }
-
-        const matcher = new QueryMatcher<Room>(rooms, {
-            keys: ["name"],
-            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
-            shouldMatchWordsOnly: false,
-        });
-
-        return matcher.match(lcQuery);
-    }, [rooms, lcQuery]);
-
-    return <div className="mx_LeaveSpaceDialog_section">
-        <SearchBox
-            className="mx_textinput_icon mx_textinput_search"
-            placeholder={filterPlaceholder}
-            onSearch={setQuery}
-            autoFocus={true}
-        />
-        <AutoHideScrollbar className="mx_LeaveSpaceDialog_content">
-            { filteredRooms.map(room => {
-                return <Entry
-                    key={room.roomId}
-                    room={room}
-                    checked={selected.has(room)}
-                    onChange={(checked) => {
-                        onChange(checked, room);
-                    }}
-                />;
-            }) }
-            { filteredRooms.length < 1 ? <span className="mx_LeaveSpaceDialog_noResults">
-                { _t("No results") }
-            </span> : undefined }
-        </AutoHideScrollbar>
-    </div>;
-};
-
-const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave }) => {
-    const selected = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
-    const [state, setState] = useState<string>(RoomsToLeave.None);
-
-    useEffect(() => {
-        if (state === RoomsToLeave.All) {
-            setRoomsToLeave(spaceChildren);
-        } else {
-            setRoomsToLeave([]);
-        }
-    }, [setRoomsToLeave, state, spaceChildren]);
-
-    return <div className="mx_LeaveSpaceDialog_section">
-        <StyledRadioGroup
-            name="roomsToLeave"
-            value={state}
-            onChange={setState}
-            definitions={[
-                {
-                    value: RoomsToLeave.None,
-                    label: _t("Don't leave any rooms"),
-                }, {
-                    value: RoomsToLeave.All,
-                    label: _t("Leave all rooms"),
-                }, {
-                    value: RoomsToLeave.Specific,
-                    label: _t("Leave some rooms"),
-                },
-            ]}
-        />
-
-        { state === RoomsToLeave.Specific && (
-            <SpaceChildPicker
-                filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
-                rooms={spaceChildren}
-                selected={selected}
-                onChange={(selected: boolean, room: Room) => {
-                    if (selected) {
-                        setRoomsToLeave([room, ...roomsToLeave]);
-                    } else {
-                        setRoomsToLeave(roomsToLeave.filter(r => r !== room));
-                    }
-                }}
-            />
-        ) }
-    </div>;
-};
+import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
 
 interface IProps {
     space: Room;
@@ -144,6 +43,7 @@ const isOnlyAdmin = (room: Room): boolean => {
 const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
     const spaceChildren = useMemo(() => SpaceStore.instance.getChildren(space.roomId), [space.roomId]);
     const [roomsToLeave, setRoomsToLeave] = useState<Room[]>([]);
+    const selectedRooms = useMemo(() => new Set(roomsToLeave), [roomsToLeave]);
 
     let rejoinWarning;
     if (space.getJoinRule() !== JoinRule.Public) {
@@ -180,12 +80,17 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
                 { spaceChildren.length > 0 && _t("Would you like to leave the rooms in this space?") }
             </p>
 
-            { spaceChildren.length > 0 && <LeaveRoomsPicker
-                space={space}
-                spaceChildren={spaceChildren}
-                roomsToLeave={roomsToLeave}
-                setRoomsToLeave={setRoomsToLeave}
-            /> }
+            { spaceChildren.length > 0 && (
+                <SpaceChildrenPicker
+                    space={space}
+                    spaceChildren={spaceChildren}
+                    selected={selectedRooms}
+                    onChange={setRoomsToLeave}
+                    noneLabel={_t("Don't leave any rooms")}
+                    allLabel={_t("Leave all rooms")}
+                    specificLabel={_t("Leave some rooms")}
+                />
+            ) }
 
             { onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">
                 { onlyAdminWarning }

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -44,18 +44,31 @@ interface IProps {
     initialTabId?: string;
 }
 
+interface IState {
+    roomName: string;
+}
+
 @replaceableComponent("views.dialogs.RoomSettingsDialog")
-export default class RoomSettingsDialog extends React.Component<IProps> {
+export default class RoomSettingsDialog extends React.Component<IProps, IState> {
     private dispatcherRef: string;
 
+    constructor(props: IProps) {
+        super(props);
+        this.state = { roomName: '' };
+    }
+
     public componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
+        MatrixClientPeg.get().on("Room.name", this.onRoomName);
+        this.onRoomName();
     }
 
     public componentWillUnmount() {
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
         }
+
+        MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
     }
 
     private onAction = (payload): void => {
@@ -66,6 +79,12 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
         }
     };
 
+    private onRoomName = (): void => {
+        this.setState({
+            roomName: MatrixClientPeg.get().getRoom(this.props.roomId).name,
+        });
+    };
+
     private getTabs(): Tab[] {
         const tabs: Tab[] = [];
 
@@ -122,7 +141,7 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
     }
 
     render() {
-        const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
+        const roomName = this.state.roomName;
         return (
             <BaseDialog
                 className='mx_RoomSettingsDialog'

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -28,15 +28,25 @@ import { IDialogProps } from "./IDialogProps";
 import BugReportDialog from './BugReportDialog';
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import ProgressBar from "../elements/ProgressBar";
+
+export interface IFinishedOpts {
+    continue: boolean;
+    invite: boolean;
+}
 
 interface IProps extends IDialogProps {
     roomId: string;
     targetVersion: string;
     description?: ReactNode;
+    doUpgrade?(opts: IFinishedOpts, fn: (progressText: string, progress: number, total: number) => void): Promise<void>;
 }
 
 interface IState {
     inviteUsersToNewRoom: boolean;
+    progressText?: string;
+    progress?: number;
+    total?: number;
 }
 
 @replaceableComponent("views.dialogs.RoomUpgradeWarningDialog")
@@ -50,15 +60,30 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         const joinRules = room?.currentState.getStateEvents(EventType.RoomJoinRules, "");
         this.isPrivate = joinRules?.getContent()['join_rule'] !== JoinRule.Public ?? true;
-        this.currentVersion = room?.getVersion() || "1";
+        this.currentVersion = room?.getVersion();
 
         this.state = {
             inviteUsersToNewRoom: true,
         };
     }
 
+    private onProgressCallback = (progressText: string, progress: number, total: number): void => {
+        this.setState({ progressText, progress, total });
+    };
+
     private onContinue = () => {
-        this.props.onFinished({ continue: true, invite: this.isPrivate && this.state.inviteUsersToNewRoom });
+        const opts = {
+            continue: true,
+            invite: this.isPrivate && this.state.inviteUsersToNewRoom,
+        };
+
+        if (this.props.doUpgrade) {
+            this.props.doUpgrade(opts, this.onProgressCallback).then(() => {
+                this.props.onFinished(opts);
+            });
+        } else {
+            this.props.onFinished(opts);
+        }
     };
 
     private onCancel = () => {
@@ -118,6 +143,23 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
             );
         }
 
+        let footer: JSX.Element;
+        if (this.state.progressText) {
+            footer = <span className="mx_RoomUpgradeWarningDialog_progress">
+                <ProgressBar value={this.state.progress} max={this.state.total} />
+                <div className="mx_RoomUpgradeWarningDialog_progressText">
+                    { this.state.progressText }
+                </div>
+            </span>;
+        } else {
+            footer = <DialogButtons
+                primaryButton={_t("Upgrade")}
+                onPrimaryButtonClick={this.onContinue}
+                cancelButton={_t("Cancel")}
+                onCancel={this.onCancel}
+            />;
+        }
+
         return (
             <BaseDialog
                 className='mx_RoomUpgradeWarningDialog'
@@ -154,12 +196,7 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
                     </p>
                     { inviteToggle }
                 </div>
-                <DialogButtons
-                    primaryButton={_t("Upgrade")}
-                    onPrimaryButtonClick={this.onContinue}
-                    cancelButton={_t("Cancel")}
-                    onCancel={this.onCancel}
-                />
+                { footer }
             </BaseDialog>
         );
     }

src/components/views/directory/NetworkDropdown.tsx

@@ -268,7 +268,7 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
         };
 
         const buttonRect = handle.current.getBoundingClientRect();
-        content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu}>
+        content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu} focusLock>
             <div className="mx_NetworkDropdown_menu">
                 { options }
                 <MenuItem className="mx_NetworkDropdown_server_add" label={undefined} onClick={onClick}>

src/components/views/elements/Dropdown.tsx

@@ -178,6 +178,14 @@ export default class Dropdown extends React.Component<IProps, IState> {
         this.ignoreEvent = ev;
     };
 
+    private onChevronClick = (ev: React.MouseEvent) => {
+        if (this.state.expanded) {
+            this.setState({ expanded: false });
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    };
+
     private onAccessibleButtonClick = (ev: ButtonEvent) => {
         if (this.props.disabled) return;
 
@@ -375,7 +383,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
                 onKeyDown={this.onKeyDown}
             >
                 { currentValue }
-                <span className="mx_Dropdown_arrow" />
+                <span onClick={this.onChevronClick} className="mx_Dropdown_arrow" />
                 { menu }
             </AccessibleButton>
         </div>;

src/components/views/elements/Field.tsx

@@ -143,6 +143,10 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
 
     public focus() {
         this.input.focus();
+        // programmatic does not fire onFocus handler
+        this.setState({
+            focused: true,
+        });
     }
 
     private onFocus = (ev) => {

src/components/views/elements/ReplyThread.tsx

@@ -53,6 +53,7 @@ interface IProps {
     layout?: Layout;
     // Whether to always show a timestamp
     alwaysShowTimestamps?: boolean;
+    forExport?: boolean;
     isQuoteExpanded?: boolean;
     setQuoteExpanded: (isExpanded: boolean) => void;
 }
@@ -381,6 +382,17 @@ export default class ReplyThread extends React.Component<IProps, IState> {
                     })
                 }
             </blockquote>;
+        } else if (this.props.forExport) {
+            const eventId = ReplyThread.getParentEventId(this.props.parentEv);
+            header = <p className="mx_ReplyThread_Export">
+                { _t("In reply to <a>this message</a>",
+                    {},
+                    { a: (sub) => (
+                        <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { sub } </a>
+                    ),
+                    })
+                }
+            </p>;
         } else if (this.state.loading) {
             header = <Spinner w={16} h={16} />;
         }

src/components/views/messages/DateSeparator.tsx

@@ -35,12 +35,17 @@ function getDaysArray(): string[] {
 
 interface IProps {
     ts: number;
+    forExport?: boolean;
 }
 
 @replaceableComponent("views.messages.DateSeparator")
 export default class DateSeparator extends React.Component<IProps> {
     private getLabel() {
         const date = new Date(this.props.ts);
+
+        // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
+        if (this.props.forExport) return formatFullDateNoTime(date);
+
         const today = new Date();
         const yesterday = new Date();
         const days = getDaysArray();

src/components/views/messages/IBodyProps.ts

@@ -33,6 +33,7 @@ export interface IBodyProps {
     onHeightChanged: () => void;
 
     showUrlPreview?: boolean;
+    forExport?: boolean;
     tileShape: TileShape;
     maxImageHeight?: number;
     replacingEventId?: string;

src/components/views/messages/MAudioBody.tsx

@@ -90,6 +90,17 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
             );
         }
 
+        if (this.props.forExport) {
+            const content = this.props.mxEvent.getContent();
+            // During export, the content url will point to the MSC, which will later point to a local url
+            const contentUrl = content.file?.url || content.url;
+            return (
+                <span className="mx_MAudioBody">
+                    <audio src={contentUrl} controls />
+                </span>
+            );
+        }
+
         if (!this.state.playback) {
             return (
                 <span className="mx_MAudioBody">

src/components/views/messages/MFileBody.tsx

@@ -123,6 +123,11 @@ export default class MFileBody extends React.Component<IProps, IState> {
         this.state = {};
     }
 
+    private getContentUrl(): string | null {
+        if (this.props.forExport) return null;
+        const media = mediaFromContent(this.props.mxEvent.getContent());
+        return media.srcHttp;
+    }
     private get content(): IMediaEventContent {
         return this.props.mxEvent.getContent<IMediaEventContent>();
     }
@@ -149,11 +154,6 @@ export default class MFileBody extends React.Component<IProps, IState> {
         });
     }
 
-    private getContentUrl(): string {
-        const media = mediaFromContent(this.props.mxEvent.getContent());
-        return media.srcHttp;
-    }
-
     public componentDidUpdate(prevProps, prevState) {
         if (this.props.onHeightChanged && !prevState.decryptedBlob && this.state.decryptedBlob) {
             this.props.onHeightChanged();
@@ -213,6 +213,16 @@ export default class MFileBody extends React.Component<IProps, IState> {
             );
         }
 
+        if (this.props.forExport) {
+            const content = this.props.mxEvent.getContent();
+            // During export, the content url will point to the MSC, which will later point to a local url
+            return <span className="mx_MFileBody">
+                <a href={content.file?.url || content.url}>
+                    { placeholder }
+                </a>
+            </span>;
+        }
+
         const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
 
         if (isEncrypted) {

src/components/views/messages/MImageBody.tsx

@@ -179,6 +179,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     };
 
     protected getContentUrl(): string {
+        const content: IMediaEventContent = this.props.mxEvent.getContent();
+        // During export, the content url will point to the MSC, which will later point to a local url
+        if (this.props.forExport) return content.url || content.file?.url;
         if (this.media.isEncrypted) {
             return this.state.decryptedUrl;
         } else {
@@ -372,7 +375,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         let placeholder = null;
         let gifLabel = null;
 
-        if (!this.state.imgLoaded) {
+        if (!this.props.forExport && !this.state.imgLoaded) {
             placeholder = this.getPlaceholder(maxWidth, maxHeight);
         }
 
@@ -462,7 +465,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
     // Overidden by MStickerBody
     protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
-        return <a href={contentUrl} onClick={this.onClick}>
+        return <a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}>
             { children }
         </a>;
     }
@@ -490,6 +493,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
     // Overidden by MStickerBody
     protected getFileBody(): string | JSX.Element {
+        if (this.props.forExport) return null;
         // We only ever need the download bar if we're appearing outside of the timeline
         if (this.props.tileShape) {
             return <MFileBody {...this.props} showGenericPlaceholder={false} />;
@@ -510,7 +514,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const contentUrl = this.getContentUrl();
         let thumbUrl;
-        if (this.isGif() && SettingsStore.getValue("autoplayGifs")) {
+        if (this.props.forExport || (this.isGif() && SettingsStore.getValue("autoplayGifs"))) {
             thumbUrl = contentUrl;
         } else {
             thumbUrl = this.getThumbUrl();

src/components/views/messages/MVideoBody.tsx

@@ -79,7 +79,10 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     }
 
     private getContentUrl(): string|null {
-        const media = mediaFromContent(this.props.mxEvent.getContent());
+        const content = this.props.mxEvent.getContent<IMediaEventContent>();
+        // During export, the content url will point to the MSC, which will later point to a local url
+        if (this.props.forExport) return content.file?.url || content.url;
+        const media = mediaFromContent(content);
         if (media.isEncrypted) {
             return this.state.decryptedUrl;
         } else {
@@ -93,6 +96,9 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     }
 
     private getThumbUrl(): string|null {
+        // there's no need of thumbnail when the content is local
+        if (this.props.forExport) return null;
+
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
         const media = mediaFromContent(content);
 
@@ -209,6 +215,11 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         this.props.onHeightChanged();
     };
 
+    private getFileBody = () => {
+        if (this.props.forExport) return null;
+        return this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} />;
+    };
+
     render() {
         const content = this.props.mxEvent.getContent();
         const autoplay = SettingsStore.getValue("autoplayVideo");
@@ -222,8 +233,8 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
             );
         }
 
-        // Important: If we aren't autoplaying and we haven't decrypred it yet, show a video with a poster.
-        if (content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
+        // Important: If we aren't autoplaying and we haven't decrypted it yet, show a video with a poster.
+        if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
@@ -254,6 +265,8 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                 preload = "none";
             }
         }
+
+        const fileBody = this.getFileBody();
         return (
             <span className="mx_MVideoBody">
                 <video
@@ -270,7 +283,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                     poster={poster}
                     onPlay={this.videoOnPlay}
                 />
-                { this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
+                { fileBody }
             </span>
         );
     }

src/components/views/messages/MVoiceOrAudioBody.tsx

@@ -24,7 +24,7 @@ import { isVoiceMessage } from "../../../utils/EventUtils";
 @replaceableComponent("views.messages.MVoiceOrAudioBody")
 export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
     public render() {
-        if (isVoiceMessage(this.props.mxEvent)) {
+        if (!this.props.forExport && isVoiceMessage(this.props.mxEvent)) {
             return <MVoiceMessageBody {...this.props} />;
         } else {
             return <MAudioBody {...this.props} />;

src/components/views/messages/MessageActionBar.tsx

@@ -27,7 +27,7 @@ import { Action } from '../../../dispatcher/actions';
 import { RightPanelPhases } from '../../../stores/RightPanelStorePhases';
 import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
-import RoomContext from "../../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import Toolbar from "../../../accessibility/Toolbar";
 import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -128,11 +128,6 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
     </React.Fragment>;
 };
 
-export enum ActionBarRenderingContext {
-    Room,
-    Thread
-}
-
 interface IMessageActionBarProps {
     mxEvent: MatrixEvent;
     reactions?: Relations;
@@ -142,7 +137,6 @@ interface IMessageActionBarProps {
     permalinkCreator?: RoomPermalinkCreator;
     onFocusChange?: (menuDisplayed: boolean) => void;
     toggleThreadExpanded: () => void;
-    renderingContext?: ActionBarRenderingContext;
     isQuoteExpanded?: boolean;
 }
 
@@ -150,10 +144,6 @@ interface IMessageActionBarProps {
 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
     public static contextType = RoomContext;
 
-    public static defaultProps = {
-        renderingContext: ActionBarRenderingContext.Room,
-    };
-
     public componentDidMount(): void {
         if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
             this.props.mxEvent.on("Event.status", this.onSent);
@@ -217,8 +207,9 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
 
     private onEditClick = (ev: React.MouseEvent): void => {
         dis.dispatch({
-            action: 'edit_event',
+            action: Action.EditEvent,
             event: this.props.mxEvent,
+            timelineRenderingType: this.context.timelineRenderingType,
         });
     };
 
@@ -298,7 +289,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // Like the resend button, the react and reply buttons need to appear before the edit.
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
-                if (this.context.canReply && this.props.renderingContext === ActionBarRenderingContext.Room) {
+                if (this.context.canReply && this.context.timelineRenderingType !== TimelineRenderingType.Thread) {
                     toolbarOpts.splice(0, 0, <>
                         <RovingAccessibleTooltipButton
                             className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
@@ -334,6 +325,19 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     />);
                 }
             }
+            // Show thread icon even for deleted messages, but only within main timeline
+            if (this.context.timelineRenderingType === TimelineRenderingType.Room &&
+                SettingsStore.getValue("feature_thread") &&
+                this.props.mxEvent.getThread() &&
+                !isContentActionable(this.props.mxEvent)
+            ) {
+                toolbarOpts.unshift(<RovingAccessibleTooltipButton
+                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+                    title={_t("Thread")}
+                    onClick={this.onThreadClick}
+                    key="thread"
+                />);
+            }
 
             if (allowCancel) {
                 toolbarOpts.push(cancelSendingButton);

src/components/views/messages/MessageEvent.tsx

@@ -136,6 +136,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             highlightLink={this.props.highlightLink}
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
+            forExport={this.props.forExport}
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}
             editState={this.props.editState}

src/components/views/messages/RedactedBody.tsx

@@ -29,7 +29,6 @@ interface IProps {
 
 const RedactedBody = React.forwardRef<any, IProps | IBodyProps>(({ mxEvent }, ref) => {
     const cli: MatrixClient = useContext(MatrixClientContext);
-
     let text = _t("Message deleted");
     const unsigned = mxEvent.getUnsigned();
     const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;

src/components/views/right_panel/EncryptionInfo.tsx

@@ -49,16 +49,18 @@ const EncryptionInfo: React.FC<IProps> = ({
     isSelfVerification,
 }: IProps) => {
     let content: JSX.Element;
-    if (waitingForOtherParty || waitingForNetwork) {
+    if (waitingForOtherParty && isSelfVerification) {
+        content = (
+            <div>
+                { _t("To proceed, please accept the verification request on your other login.") }
+            </div>
+        );
+    } else if (waitingForOtherParty || waitingForNetwork) {
         let text: string;
         if (waitingForOtherParty) {
-            if (isSelfVerification) {
-                text = _t("Accept on your other login…");
-            } else {
-                text = _t("Waiting for %(displayName)s to accept…", {
-                    displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
-                });
-            }
+            text = _t("Waiting for %(displayName)s to accept…", {
+                displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
+            });
         } else {
             text = _t("Accepting…");
         }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -47,6 +47,7 @@ import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RoomName from "../elements/RoomName";
 import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
 
 interface IProps {
     room: Room;
@@ -240,6 +241,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
         });
     };
 
+    const onRoomExportClick = async () => {
+        Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
+            room,
+        });
+    };
+
     const isRoomEncrypted = useIsEncrypted(cli, room);
     const roomContext = useContext(RoomContext);
     const e2eStatus = roomContext.e2eStatus;
@@ -280,6 +287,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                 { _t("Show files") }
             </Button>
+            <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
+                { _t("Export chat") }
+            </Button>
             { SettingsStore.getValue("feature_thread") && (
                 <Button className="mx_RoomSummaryCard_icon_threads" onClick={onRoomThreadsClick}>
                     { _t("Show threads") }

src/components/views/right_panel/UserInfo.tsx

@@ -70,8 +70,12 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import UIStore from "../../../stores/UIStore";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import SpaceStore from "../../../stores/SpaceStore";
+import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog";
+import { bulkSpaceBehaviour } from "../../../utils/space";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 
 export interface IDevice {
     deviceId: string;
@@ -393,7 +397,7 @@ const UserOptionsSection: React.FC<{
             );
         }
 
-        if (canInvite && (!member || !member.membership || member.membership === 'leave')) {
+        if (canInvite && (member?.membership ?? 'leave') === 'leave' && shouldShowComponent(UIComponent.InviteUsers)) {
             const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
             const onInviteUserButton = async () => {
                 try {
@@ -532,7 +536,7 @@ interface IBaseProps {
     stopUpdating(): void;
 }
 
-const RoomKickButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdating }) => {
+const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBaseRoomProps, "powerLevels">) => {
     const cli = useContext(MatrixClientContext);
 
     // check if user can be kicked/disinvited
@@ -542,21 +546,38 @@ const RoomKickButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdat
         const { finished } = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onKick',
-            ConfirmUserActionDialog,
+            room.isSpaceRoom() ? ConfirmSpaceUserActionDialog : ConfirmUserActionDialog,
             {
                 member,
                 action: member.membership === "invite" ? _t("Disinvite") : _t("Kick"),
-                title: member.membership === "invite" ? _t("Disinvite this user?") : _t("Kick this user?"),
+                title: member.membership === "invite"
+                    ? _t("Disinvite from %(roomName)s", { roomName: room.name })
+                    : _t("Kick from %(roomName)s", { roomName: room.name }),
                 askReason: member.membership === "join",
                 danger: true,
+                // space-specific props
+                space: room,
+                spaceChildFilter: (child: Room) => {
+                    // Return true if the target member is not banned and we have sufficient PL to ban them
+                    const myMember = child.getMember(cli.credentials.userId);
+                    const theirMember = child.getMember(member.userId);
+                    return myMember && theirMember && theirMember.membership === member.membership &&
+                        myMember.powerLevel > theirMember.powerLevel &&
+                        child.currentState.hasSufficientPowerLevelFor("kick", myMember.powerLevel);
+                },
+                allLabel: _t("Kick them from everything I'm able to"),
+                specificLabel: _t("Kick them from specific things I'm able to"),
+                warningMessage: _t("They'll still be able to access whatever you're not an admin of."),
             },
+            room.isSpaceRoom() ? "mx_ConfirmSpaceUserActionDialog_wrapper" : undefined,
         );
 
-        const [proceed, reason] = await finished;
+        const [proceed, reason, rooms = []] = await finished;
         if (!proceed) return;
 
         startUpdating();
-        cli.kick(member.roomId, member.userId, reason || undefined).then(() => {
+
+        bulkSpaceBehaviour(room, rooms, room => cli.kick(room.roomId, member.userId, reason || undefined)).then(() => {
             // NO-OP; rely on the m.room.member event coming down else we could
             // get out of sync if we force setState here!
             logger.log("Kick success");
@@ -656,34 +677,69 @@ const RedactMessagesButton: React.FC<IBaseProps> = ({ member }) => {
     </AccessibleButton>;
 };
 
-const BanToggleButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpdating }) => {
+const BanToggleButton = ({ room, member, startUpdating, stopUpdating }: Omit<IBaseRoomProps, "powerLevels">) => {
     const cli = useContext(MatrixClientContext);
 
+    const isBanned = member.membership === "ban";
     const onBanOrUnban = async () => {
         const { finished } = Modal.createTrackedDialog(
             'Confirm User Action Dialog',
             'onBanOrUnban',
-            ConfirmUserActionDialog,
+            room.isSpaceRoom() ? ConfirmSpaceUserActionDialog : ConfirmUserActionDialog,
             {
                 member,
-                action: member.membership === 'ban' ? _t("Unban") : _t("Ban"),
-                title: member.membership === 'ban' ? _t("Unban this user?") : _t("Ban this user?"),
-                askReason: member.membership !== 'ban',
-                danger: member.membership !== 'ban',
+                action: isBanned ? _t("Unban") : _t("Ban"),
+                title: isBanned
+                    ? _t("Unban from %(roomName)s", { roomName: room.name })
+                    : _t("Ban from %(roomName)s", { roomName: room.name }),
+                askReason: !isBanned,
+                danger: !isBanned,
+                // space-specific props
+                space: room,
+                spaceChildFilter: isBanned
+                    ? (child: Room) => {
+                        // Return true if the target member is banned and we have sufficient PL to unban
+                        const myMember = child.getMember(cli.credentials.userId);
+                        const theirMember = child.getMember(member.userId);
+                        return myMember && theirMember && theirMember.membership === "ban" &&
+                            myMember.powerLevel > theirMember.powerLevel &&
+                            child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel);
+                    }
+                    : (child: Room) => {
+                        // Return true if the target member isn't banned and we have sufficient PL to ban
+                        const myMember = child.getMember(cli.credentials.userId);
+                        const theirMember = child.getMember(member.userId);
+                        return myMember && theirMember && theirMember.membership !== "ban" &&
+                            myMember.powerLevel > theirMember.powerLevel &&
+                            child.currentState.hasSufficientPowerLevelFor("ban", myMember.powerLevel);
+                    },
+                allLabel: isBanned
+                    ? _t("Unban them from everything I'm able to")
+                    : _t("Ban them from everything I'm able to"),
+                specificLabel: isBanned
+                    ? _t("Unban them from specific things I'm able to")
+                    : _t("Ban them from specific things I'm able to"),
+                warningMessage: isBanned
+                    ? _t("They won't be able to access whatever you're not an admin of.")
+                    : _t("They'll still be able to access whatever you're not an admin of."),
             },
+            room.isSpaceRoom() ? "mx_ConfirmSpaceUserActionDialog_wrapper" : undefined,
         );
 
-        const [proceed, reason] = await finished;
+        const [proceed, reason, rooms = []] = await finished;
         if (!proceed) return;
 
         startUpdating();
-        let promise;
-        if (member.membership === 'ban') {
-            promise = cli.unban(member.roomId, member.userId);
-        } else {
-            promise = cli.ban(member.roomId, member.userId, reason || undefined);
-        }
-        promise.then(() => {
+
+        const fn = (roomId: string) => {
+            if (isBanned) {
+                return cli.unban(roomId, member.userId);
+            } else {
+                return cli.ban(roomId, member.userId, reason || undefined);
+            }
+        };
+
+        bulkSpaceBehaviour(room, rooms, room => fn(room.roomId)).then(() => {
             // NO-OP; rely on the m.room.member event coming down else we could
             // get out of sync if we force setState here!
             logger.log("Ban success");
@@ -699,12 +755,12 @@ const BanToggleButton: React.FC<IBaseProps> = ({ member, startUpdating, stopUpda
     };
 
     let label = _t("Ban");
-    if (member.membership === 'ban') {
+    if (isBanned) {
         label = _t("Unban");
     }
 
     const classes = classNames("mx_UserInfo_field", {
-        mx_UserInfo_destructive: member.membership !== 'ban',
+        mx_UserInfo_destructive: !isBanned,
     });
 
     return <AccessibleButton className={classes} onClick={onBanOrUnban}>
@@ -817,18 +873,28 @@ const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
     const isMe = me.userId === member.userId;
     const canAffectUser = member.powerLevel < me.powerLevel || isMe;
 
-    if (canAffectUser && me.powerLevel >= kickPowerLevel) {
-        kickButton = <RoomKickButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
+    if (!isMe && canAffectUser && me.powerLevel >= kickPowerLevel) {
+        kickButton = <RoomKickButton
+            room={room}
+            member={member}
+            startUpdating={startUpdating}
+            stopUpdating={stopUpdating}
+        />;
     }
     if (me.powerLevel >= redactPowerLevel && (!SpaceStore.spacesEnabled || !room.isSpaceRoom())) {
         redactButton = (
             <RedactMessagesButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />
         );
     }
-    if (canAffectUser && me.powerLevel >= banPowerLevel) {
-        banButton = <BanToggleButton member={member} startUpdating={startUpdating} stopUpdating={stopUpdating} />;
+    if (!isMe && canAffectUser && me.powerLevel >= banPowerLevel) {
+        banButton = <BanToggleButton
+            room={room}
+            member={member}
+            startUpdating={startUpdating}
+            stopUpdating={stopUpdating}
+        />;
     }
-    if (canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) {
+    if (!isMe && canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) {
         muteButton = (
             <MuteToggleButton
                 member={member}

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -35,7 +35,7 @@ interface IState {
     avatarFile: File;
     originalTopic: string;
     topic: string;
-    enableProfileSave: boolean;
+    profileFieldsTouched: Record<string, boolean>;
     canSetName: boolean;
     canSetTopic: boolean;
     canSetAvatar: boolean;
@@ -71,7 +71,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
             avatarFile: null,
             originalTopic: topic,
             topic: topic,
-            enableProfileSave: false,
+            profileFieldsTouched: {},
             canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()),
             canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()),
             canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()),
@@ -88,17 +88,24 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
         this.setState({
             avatarUrl: null,
             avatarFile: null,
-            enableProfileSave: true,
+            profileFieldsTouched: {
+                ...this.state.profileFieldsTouched,
+                avatar: true,
+            },
         });
     };
 
+    private isSaveEnabled = () => {
+        return Boolean(Object.values(this.state.profileFieldsTouched).length);
+    };
+
     private cancelProfileChanges = async (e: React.MouseEvent): Promise<void> => {
         e.stopPropagation();
         e.preventDefault();
 
-        if (!this.state.enableProfileSave) return;
+        if (!this.isSaveEnabled()) return;
         this.setState({
-            enableProfileSave: false,
+            profileFieldsTouched: {},
             displayName: this.state.originalDisplayName,
             topic: this.state.originalTopic,
             avatarUrl: this.state.originalAvatarUrl,
@@ -110,8 +117,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
         e.stopPropagation();
         e.preventDefault();
 
-        if (!this.state.enableProfileSave) return;
-        this.setState({ enableProfileSave: false });
+        if (!this.isSaveEnabled()) return;
+        this.setState({ profileFieldsTouched: {} });
 
         const client = MatrixClientPeg.get();
 
@@ -156,18 +163,38 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
     private onDisplayNameChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.setState({ displayName: e.target.value });
         if (this.state.originalDisplayName === e.target.value) {
-            this.setState({ enableProfileSave: false });
+            this.setState({
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    name: false,
+                },
+            });
         } else {
-            this.setState({ enableProfileSave: true });
+            this.setState({
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    name: true,
+                },
+            });
         }
     };
 
     private onTopicChanged = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
         this.setState({ topic: e.target.value });
         if (this.state.originalTopic === e.target.value) {
-            this.setState({ enableProfileSave: false });
+            this.setState({
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    topic: false,
+                },
+            });
         } else {
-            this.setState({ enableProfileSave: true });
+            this.setState({
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    topic: true,
+                },
+            });
         }
     };
 
@@ -176,7 +203,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
             this.setState({
                 avatarUrl: this.state.originalAvatarUrl,
                 avatarFile: null,
-                enableProfileSave: false,
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    avatar: false,
+                },
             });
             return;
         }
@@ -187,7 +217,10 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
             this.setState({
                 avatarUrl: String(ev.target.result),
                 avatarFile: file,
-                enableProfileSave: true,
+                profileFieldsTouched: {
+                    ...this.state.profileFieldsTouched,
+                    avatar: true,
+                },
             });
         };
         reader.readAsDataURL(file);
@@ -205,14 +238,14 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
                     <AccessibleButton
                         onClick={this.cancelProfileChanges}
                         kind="link"
-                        disabled={!this.state.enableProfileSave}
+                        disabled={!this.isSaveEnabled()}
                     >
                         { _t("Cancel") }
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.saveProfile}
                         kind="primary"
-                        disabled={!this.state.enableProfileSave}
+                        disabled={!this.isSaveEnabled()}
                     >
                         { _t("Save") }
                     </AccessibleButton>

src/components/views/rooms/EditMessageComposer.tsx

@@ -28,7 +28,6 @@ import { parseEvent } from '../../../editor/deserialize';
 import { CommandPartCreator, Part, PartCreator, Type } from '../../../editor/parts';
 import EditorStateTransfer from '../../../utils/EditorStateTransfer';
 import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import { Action } from "../../../dispatcher/actions";
 import CountlyAnalytics from "../../../CountlyAnalytics";
@@ -36,7 +35,7 @@ import { getKeyBindingsManager, MessageComposerAction } from '../../../KeyBindin
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import SendHistoryManager from '../../../SendHistoryManager';
 import Modal from '../../../Modal';
-import { MsgType } from 'matrix-js-sdk/src/@types/event';
+import { MsgType, UNSTABLE_ELEMENT_REPLY_IN_THREAD } from 'matrix-js-sdk/src/@types/event';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
@@ -46,6 +45,8 @@ import { createRedactEventDialog } from '../dialogs/ConfirmRedactDialog';
 import SettingsStore from "../../../settings/SettingsStore";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { withMatrixClientHOC, MatrixClientProps } from '../../../contexts/MatrixClientContext';
+import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -66,7 +67,11 @@ function getTextReplyFallback(mxEvent: MatrixEvent): string {
     return "";
 }
 
-function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IContent {
+function createEditContent(
+    model: EditorModel,
+    editedEvent: MatrixEvent,
+    renderingContext?: TimelineRenderingType,
+): IContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
         model = stripEmoteCommand(model);
@@ -99,41 +104,49 @@ function createEditContent(model: EditorModel, editedEvent: MatrixEvent): IConte
         contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
     }
 
-    return Object.assign({
+    const relation = {
         "m.new_content": newContent,
         "m.relates_to": {
             "rel_type": "m.replace",
             "event_id": editedEvent.getId(),
         },
-    }, contentBody);
+    };
+
+    if (renderingContext === TimelineRenderingType.Thread) {
+        relation['m.relates_to'][UNSTABLE_ELEMENT_REPLY_IN_THREAD.name] = true;
+    }
+
+    return Object.assign(relation, contentBody);
 }
 
-interface IProps {
+interface IEditMessageComposerProps extends MatrixClientProps {
     editState: EditorStateTransfer;
     className?: string;
 }
-
 interface IState {
     saveDisabled: boolean;
 }
 
 @replaceableComponent("views.rooms.EditMessageComposer")
-export default class EditMessageComposer extends React.Component<IProps, IState> {
-    static contextType = MatrixClientContext;
-    context!: React.ContextType<typeof MatrixClientContext>;
+class EditMessageComposer extends React.Component<IEditMessageComposerProps, IState> {
+    static contextType = RoomContext;
+    context!: React.ContextType<typeof RoomContext>;
 
     private readonly editorRef = createRef<BasicMessageComposer>();
     private readonly dispatcherRef: string;
     private model: EditorModel = null;
 
-    constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
         super(props);
         this.context = context; // otherwise React will only set it prior to render due to type def above
 
         const isRestored = this.createEditorModel();
         const ev = this.props.editState.getEvent();
+
+        const renderingContext = this.context.timelineRenderingType;
+        const editContent = createEditContent(this.model, ev, renderingContext);
         this.state = {
-            saveDisabled: !isRestored || !this.isContentModified(createEditContent(this.model, ev)["m.new_content"]),
+            saveDisabled: !isRestored || !this.isContentModified(editContent["m.new_content"]),
         };
 
         window.addEventListener("beforeunload", this.saveStoredEditorState);
@@ -141,7 +154,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     }
 
     private getRoom(): Room {
-        return this.context.getRoom(this.props.editState.getEvent().getRoomId());
+        return this.props.mxClient.getRoom(this.props.editState.getEvent().getRoomId());
     }
 
     private onKeyDown = (event: KeyboardEvent): void => {
@@ -162,10 +175,17 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
                 if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtStart()) {
                     return;
                 }
-                const previousEvent = findEditableEvent(this.getRoom(), false,
-                    this.props.editState.getEvent().getId());
+                const previousEvent = findEditableEvent({
+                    events: this.events,
+                    isForward: false,
+                    fromEventId: this.props.editState.getEvent().getId(),
+                });
                 if (previousEvent) {
-                    dis.dispatch({ action: 'edit_event', event: previousEvent });
+                    dis.dispatch({
+                        action: Action.EditEvent,
+                        event: previousEvent,
+                        timelineRenderingType: this.context.timelineRenderingType,
+                    });
                     event.preventDefault();
                 }
                 break;
@@ -174,12 +194,24 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
                 if (this.editorRef.current?.isModified() || !this.editorRef.current?.isCaretAtEnd()) {
                     return;
                 }
-                const nextEvent = findEditableEvent(this.getRoom(), true, this.props.editState.getEvent().getId());
+                const nextEvent = findEditableEvent({
+                    events: this.events,
+                    isForward: true,
+                    fromEventId: this.props.editState.getEvent().getId(),
+                });
                 if (nextEvent) {
-                    dis.dispatch({ action: 'edit_event', event: nextEvent });
+                    dis.dispatch({
+                        action: Action.EditEvent,
+                        event: nextEvent,
+                        timelineRenderingType: this.context.timelineRenderingType,
+                    });
                 } else {
                     this.clearStoredEditorState();
-                    dis.dispatch({ action: 'edit_event', event: null });
+                    dis.dispatch({
+                        action: Action.EditEvent,
+                        event: null,
+                        timelineRenderingType: this.context.timelineRenderingType,
+                    });
                     dis.fire(Action.FocusSendMessageComposer);
                 }
                 event.preventDefault();
@@ -189,16 +221,27 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     };
 
     private get editorRoomKey(): string {
-        return `mx_edit_room_${this.getRoom().roomId}`;
+        return `mx_edit_room_${this.getRoom().roomId}_${this.context.timelineRenderingType}`;
     }
 
     private get editorStateKey(): string {
         return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
     }
 
+    private get events(): MatrixEvent[] {
+        const liveTimelineEvents = this.context.liveTimeline.getEvents();
+        const pendingEvents = this.getRoom().getPendingEvents();
+        const isInThread = Boolean(this.props.editState.getEvent().getThread());
+        return liveTimelineEvents.concat(isInThread ? [] : pendingEvents);
+    }
+
     private cancelEdit = (): void => {
         this.clearStoredEditorState();
-        dis.dispatch({ action: "edit_event", event: null });
+        dis.dispatch({
+            action: Action.EditEvent,
+            event: null,
+            timelineRenderingType: this.context.timelineRenderingType,
+        });
         dis.fire(Action.FocusSendMessageComposer);
     };
 
@@ -326,8 +369,8 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
             const position = this.model.positionForOffset(caret.offset, caret.atNodeEnd);
             this.editorRef.current?.replaceEmoticon(position, REGEX_EMOTICON);
         }
-
-        const editContent = createEditContent(this.model, editedEvent);
+        const renderingContext = this.context.timelineRenderingType;
+        const editContent = createEditContent(this.model, editedEvent, renderingContext);
         const newContent = editContent["m.new_content"];
 
         let shouldSend = true;
@@ -381,7 +424,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
             }
             if (shouldSend) {
                 this.cancelPreviousPendingEdit();
-                const prom = this.context.sendMessage(roomId, editContent);
+                const prom = this.props.mxClient.sendMessage(roomId, editContent);
                 this.clearStoredEditorState();
                 dis.dispatch({ action: "message_sent" });
                 CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, true, false, editContent);
@@ -389,7 +432,11 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
         }
 
         // close the event editing and focus composer
-        dis.dispatch({ action: "edit_event", event: null });
+        dis.dispatch({
+            action: Action.EditEvent,
+            event: null,
+            timelineRenderingType: this.context.timelineRenderingType,
+        });
         dis.fire(Action.FocusSendMessageComposer);
     };
 
@@ -400,7 +447,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
             previousEdit.status === EventStatus.QUEUED ||
             previousEdit.status === EventStatus.NOT_SENT
         )) {
-            this.context.cancelPendingEvent(previousEdit);
+            this.props.mxClient.cancelPendingEvent(previousEdit);
         }
     }
 
@@ -428,7 +475,7 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
     private createEditorModel(): boolean {
         const { editState } = this.props;
         const room = this.getRoom();
-        const partCreator = new CommandPartCreator(room, this.context);
+        const partCreator = new CommandPartCreator(room, this.props.mxClient);
 
         let parts;
         let isRestored = false;
@@ -493,3 +540,6 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
         </div>);
     }
 }
+
+const EditMessageComposerWithMatrixClient = withMatrixClientHOC(EditMessageComposer);
+export default EditMessageComposerWithMatrixClient;

src/components/views/rooms/EventTile.tsx

@@ -53,7 +53,7 @@ import SenderProfile from '../messages/SenderProfile';
 import MessageTimestamp from '../messages/MessageTimestamp';
 import TooltipButton from '../elements/TooltipButton';
 import ReadReceiptMarker from "./ReadReceiptMarker";
-import MessageActionBar, { ActionBarRenderingContext } from "../messages/MessageActionBar";
+import MessageActionBar from "../messages/MessageActionBar";
 import ReactionsRow from '../messages/ReactionsRow';
 import { getEventDisplayInfo } from '../../../utils/EventUtils';
 import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
@@ -264,6 +264,8 @@ interface IProps {
     // for now.
     tileShape?: TileShape;
 
+    forExport?: boolean;
+
     // show twelve hour timestamps
     isTwelveHour?: boolean;
 
@@ -340,6 +342,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     static defaultProps = {
         // no-op function because onHeightChanged is optional yet some sub-components assume its existence
         onHeightChanged: function() {},
+        forExport: false,
         layout: Layout.Group,
     };
 
@@ -382,7 +385,7 @@ export default class EventTile extends React.Component<IProps, IState> {
      * or 'sent' receipt, for example.
      * @returns {boolean}
      */
-    private get isEligibleForSpecialReceipt() {
+    private get isEligibleForSpecialReceipt(): boolean {
         // First, if there are other read receipts then just short-circuit this.
         if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
         if (!this.props.mxEvent) return false;
@@ -453,16 +456,18 @@ export default class EventTile extends React.Component<IProps, IState> {
     componentDidMount() {
         this.suppressReadReceiptAnimation = false;
         const client = this.context;
-        client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        client.on("userTrustStatusChanged", this.onUserVerificationChanged);
-        this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
-        if (this.props.showReactions) {
-            this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
-        }
+        if (!this.props.forExport) {
+            client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+            client.on("userTrustStatusChanged", this.onUserVerificationChanged);
+            this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
+            if (this.props.showReactions) {
+                this.props.mxEvent.on("Event.relationsCreated", this.onReactionsCreated);
+            }
 
-        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
-            client.on("Room.receipt", this.onRoomReceipt);
-            this.isListeningForReceipts = true;
+            if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+                client.on("Room.receipt", this.onRoomReceipt);
+                this.isListeningForReceipts = true;
+            }
         }
 
         if (SettingsStore.getValue("feature_thread")) {
@@ -698,6 +703,7 @@ export default class EventTile extends React.Component<IProps, IState> {
     }
 
     shouldHighlight() {
+        if (this.props.forExport) return false;
         const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
 
@@ -1056,17 +1062,14 @@ export default class EventTile extends React.Component<IProps, IState> {
             }
         }
 
-        const renderingContext = this.props.tileShape === TileShape.Thread
-            ? ActionBarRenderingContext.Thread
-            : ActionBarRenderingContext.Room;
-        const actionBar = !isEditing ? <MessageActionBar
+        const showMessageActionBar = !isEditing && !this.props.forExport;
+        const actionBar = showMessageActionBar ? <MessageActionBar
             mxEvent={this.props.mxEvent}
             reactions={this.state.reactions}
             permalinkCreator={this.props.permalinkCreator}
             getTile={this.getTile}
             getReplyThread={this.getReplyThread}
             onFocusChange={this.onActionBarFocusChange}
-            renderingContext={renderingContext}
             isQuoteExpanded={isQuoteExpanded}
             toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
         /> : undefined;
@@ -1171,6 +1174,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             showUrlPreview={this.props.showUrlPreview}
                             onHeightChanged={this.props.onHeightChanged}
                             tileShape={this.props.tileShape}
+                            editState={this.props.editState}
                         />
                     </div>,
                 ]);
@@ -1204,6 +1208,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                             showUrlPreview={this.props.showUrlPreview}
                             onHeightChanged={this.props.onHeightChanged}
                             tileShape={this.props.tileShape}
+                            editState={this.props.editState}
+                            replacingEventId={this.props.replacingEventId}
                         />
                         { actionBar }
                     </div>,
@@ -1224,6 +1230,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             showUrlPreview={this.props.showUrlPreview}
                             tileShape={this.props.tileShape}
                             onHeightChanged={this.props.onHeightChanged}
+                            editState={this.props.editState}
                         />
                     </div>,
                     <a
@@ -1247,6 +1254,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             parentEv={this.props.mxEvent}
                             onHeightChanged={this.props.onHeightChanged}
                             ref={this.replyThread}
+                            forExport={this.props.forExport}
                             permalinkCreator={this.props.permalinkCreator}
                             layout={this.props.layout}
                             alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover}
@@ -1280,6 +1288,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                             { thread }
                             <EventTileType ref={this.tile}
                                 mxEvent={this.props.mxEvent}
+                                forExport={this.props.forExport}
                                 replacingEventId={this.props.replacingEventId}
                                 editState={this.props.editState}
                                 highlights={this.props.highlights}
@@ -1305,7 +1314,7 @@ export default class EventTile extends React.Component<IProps, IState> {
 
 // XXX this'll eventually be dynamic based on the fields once we have extensible event types
 const messageTypes = ['m.room.message', 'm.sticker'];
-function isMessageEvent(ev) {
+function isMessageEvent(ev: MatrixEvent): boolean {
     return (messageTypes.includes(ev.getType()));
 }
 

src/components/views/rooms/MemberList.tsx

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

src/components/views/rooms/MessageComposer.tsx

@@ -45,13 +45,15 @@ import { RecordingState } from "../../../audio/VoiceRecording";
 import Tooltip, { Alignment } from "../elements/Tooltip";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import { E2EStatus } from '../../../utils/ShieldUtils';
-import SendMessageComposer from "./SendMessageComposer";
+import SendMessageComposer, { SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
 import EditorModel from "../../../editor/model";
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
 import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
+import Modal from "../../../Modal";
+import InfoDialog from "../dialogs/InfoDialog";
 
 let instanceCount = 0;
 const NARROW_MODE_BREAKPOINT = 500;
@@ -193,6 +195,31 @@ class UploadButton extends React.Component<IUploadButtonProps> {
     }
 }
 
+// TODO: [polls] Make this component actually do something
+class PollButton extends React.PureComponent {
+    private onCreateClick = () => {
+        Modal.createTrackedDialog('Polls', 'Not Yet Implemented', InfoDialog, {
+            // XXX: Deliberately not translated given this dialog is meant to be replaced and we don't
+            // want to clutter the language files with short-lived strings.
+            title: "Polls are currently in development",
+            description: "" +
+                "Thanks for testing polls! We haven't quite gotten a chance to write the feature yet " +
+                "though. Check back later for updates.",
+            hasCloseButton: true,
+        });
+    };
+
+    render() {
+        return (
+            <AccessibleTooltipButton
+                className="mx_MessageComposer_button mx_MessageComposer_poll"
+                onClick={this.onCreateClick}
+                title={_t('Create poll')}
+            />
+        );
+    }
+}
+
 interface IProps {
     room: Room;
     resizeNotifier: ResizeNotifier;
@@ -219,8 +246,8 @@ interface IState {
 @replaceableComponent("views.rooms.MessageComposer")
 export default class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef: string;
-    private messageComposerInput: SendMessageComposer;
-    private voiceRecordingButton: VoiceRecordComposerTile;
+    private messageComposerInput = createRef<SendMessageComposerClass>();
+    private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private instanceId: number;
 
@@ -378,14 +405,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     }
 
     private sendMessage = async () => {
-        if (this.state.haveRecording && this.voiceRecordingButton) {
+        if (this.state.haveRecording && this.voiceRecordingButton.current) {
             // There shouldn't be any text message to send when a voice recording is active, so
             // just send out the voice recording.
-            await this.voiceRecordingButton.send();
+            await this.voiceRecordingButton.current?.send();
             return;
         }
 
-        this.messageComposerInput.sendMessage();
+        this.messageComposerInput.current?.sendMessage();
     };
 
     private onChange = (model: EditorModel) => {
@@ -432,6 +459,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
         const buttons: JSX.Element[] = [];
         if (!this.state.haveRecording) {
+            if (SettingsStore.getValue("feature_polls")) {
+                buttons.push(
+                    <PollButton key="polls" />,
+                );
+            }
             buttons.push(
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
             );
@@ -460,7 +492,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             buttons.push(
                 <AccessibleTooltipButton
                     className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
-                    onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
+                    onClick={() => this.voiceRecordingButton.current?.onRecordStartEndClick()}
                     title={_t("Send voice message")}
                 />,
             );
@@ -521,7 +553,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         if (!this.state.tombstone && this.state.canSendMessages) {
             controls.push(
                 <SendMessageComposer
-                    ref={(c) => this.messageComposerInput = c}
+                    ref={this.messageComposerInput}
                     key="controls_input"
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
@@ -535,7 +567,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
             controls.push(<VoiceRecordComposerTile
                 key="controls_voice_record"
-                ref={c => this.voiceRecordingButton = c}
+                ref={this.voiceRecordingButton}
                 room={this.props.room} />);
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];

src/components/views/rooms/NewRoomIntro.tsx

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

src/components/views/rooms/RoomList.tsx

@@ -49,6 +49,8 @@ import { showAddExistingRooms, showCreateNewRoom, showSpaceInvite } from "../../
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
 import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 interface IProps {
@@ -134,32 +136,38 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
                     MatrixClientPeg.get().getUserId());
 
                 return <IconizedContextMenuOptionList first>
-                    <IconizedContextMenuOption
-                        label={_t("Create new room")}
-                        iconClassName="mx_RoomList_iconPlus"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onFinished();
-                            showCreateNewRoom(SpaceStore.instance.activeSpace);
-                        }}
-                        disabled={!canAddRooms}
-                        tooltip={canAddRooms ? undefined
-                            : _t("You do not have permissions to create new rooms in this space")}
-                    />
-                    <IconizedContextMenuOption
-                        label={_t("Add existing room")}
-                        iconClassName="mx_RoomList_iconHash"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onFinished();
-                            showAddExistingRooms(SpaceStore.instance.activeSpace);
-                        }}
-                        disabled={!canAddRooms}
-                        tooltip={canAddRooms ? undefined
-                            : _t("You do not have permissions to add rooms to this space")}
-                    />
+                    {
+                        shouldShowComponent(UIComponent.CreateRooms)
+                            ? (<>
+                                <IconizedContextMenuOption
+                                    label={_t("Create new room")}
+                                    iconClassName="mx_RoomList_iconPlus"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onFinished();
+                                        showCreateNewRoom(SpaceStore.instance.activeSpace);
+                                    }}
+                                    disabled={!canAddRooms}
+                                    tooltip={canAddRooms ? undefined
+                                        : _t("You do not have permissions to create new rooms in this space")}
+                                />
+                                <IconizedContextMenuOption
+                                    label={_t("Add existing room")}
+                                    iconClassName="mx_RoomList_iconHash"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        onFinished();
+                                        showAddExistingRooms(SpaceStore.instance.activeSpace);
+                                    }}
+                                    disabled={!canAddRooms}
+                                    tooltip={canAddRooms ? undefined
+                                        : _t("You do not have permissions to add rooms to this space")}
+                                />
+                            </>)
+                            : null
+                    }
                     <IconizedContextMenuOption
                         label={_t("Explore rooms")}
                         iconClassName="mx_RoomList_iconBrowse"
@@ -450,8 +458,8 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     }
 
     private renderSublists(): React.ReactElement[] {
-        // show a skeleton UI if the user is in no rooms and they are not filtering
-        const showSkeleton = !this.state.isNameFiltering &&
+        // show a skeleton UI if the user is in no rooms and they are not filtering and have no suggested rooms
+        const showSkeleton = !this.state.isNameFiltering && !this.state.suggestedRooms?.length &&
             Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
 
         return TAG_ORDER.reduce((tags, tagId) => {

src/components/views/rooms/RoomPreviewBar.tsx

@@ -35,6 +35,8 @@ import InviteReason from "../elements/InviteReason";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
 import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
+import { UIFeature } from "../../../settings/UIFeature";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const MemberEventHtmlReasonField = "io.element.html_reason";
 
@@ -339,8 +341,10 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             }
             case MessageCase.NotLoggedIn: {
                 title = _t("Join the conversation with an account");
-                primaryActionLabel = _t("Sign Up");
-                primaryActionHandler = this.onRegisterClick;
+                if (SettingsStore.getValue(UIFeature.Registration)) {
+                    primaryActionLabel = _t("Sign Up");
+                    primaryActionHandler = this.onRegisterClick;
+                }
                 secondaryActionLabel = _t("Sign In");
                 secondaryActionHandler = this.onLoginClick;
                 if (this.props.previewLoading) {

src/components/views/rooms/RoomSublist.tsx

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

src/components/views/rooms/RoomTile.tsx

@@ -29,10 +29,9 @@ import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextM
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE } from "../../../RoomNotifs";
+import { RoomNotifState } from "../../../RoomNotifs";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import NotificationBadge from "./NotificationBadge";
-import { Volume } from "../../../RoomNotifsTypes";
 import RoomListStore from "../../../stores/room-list/RoomListStore";
 import RoomListActions from "../../../actions/RoomListActions";
 import { ActionPayload } from "../../../dispatcher/payloads";
@@ -364,7 +363,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.setState({ generalMenuPosition: null }); // hide the menu
     };
 
-    private async saveNotifState(ev: ButtonEvent, newState: Volume) {
+    private async saveNotifState(ev: ButtonEvent, newState: RoomNotifState) {
         ev.preventDefault();
         ev.stopPropagation();
         if (MatrixClientPeg.get().isGuest()) return;
@@ -378,10 +377,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         }
     }
 
-    private onClickAllNotifs = ev => this.saveNotifState(ev, ALL_MESSAGES);
-    private onClickAlertMe = ev => this.saveNotifState(ev, ALL_MESSAGES_LOUD);
-    private onClickMentions = ev => this.saveNotifState(ev, MENTIONS_ONLY);
-    private onClickMute = ev => this.saveNotifState(ev, MUTE);
+    private onClickAllNotifs = ev => this.saveNotifState(ev, RoomNotifState.AllMessages);
+    private onClickAlertMe = ev => this.saveNotifState(ev, RoomNotifState.AllMessagesLoud);
+    private onClickMentions = ev => this.saveNotifState(ev, RoomNotifState.MentionsOnly);
+    private onClickMute = ev => this.saveNotifState(ev, RoomNotifState.Mute);
 
     private renderNotificationsMenu(isActive: boolean): React.ReactElement {
         if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived ||
@@ -404,25 +403,25 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                 <IconizedContextMenuOptionList first>
                     <IconizedContextMenuRadio
                         label={_t("Use default")}
-                        active={state === ALL_MESSAGES}
+                        active={state === RoomNotifState.AllMessages}
                         iconClassName="mx_RoomTile_iconBell"
                         onClick={this.onClickAllNotifs}
                     />
                     <IconizedContextMenuRadio
                         label={_t("All messages")}
-                        active={state === ALL_MESSAGES_LOUD}
+                        active={state === RoomNotifState.AllMessagesLoud}
                         iconClassName="mx_RoomTile_iconBellDot"
                         onClick={this.onClickAlertMe}
                     />
                     <IconizedContextMenuRadio
                         label={_t("Mentions & Keywords")}
-                        active={state === MENTIONS_ONLY}
+                        active={state === RoomNotifState.MentionsOnly}
                         iconClassName="mx_RoomTile_iconBellMentions"
                         onClick={this.onClickMentions}
                     />
                     <IconizedContextMenuRadio
                         label={_t("None")}
-                        active={state === MUTE}
+                        active={state === RoomNotifState.Mute}
                         iconClassName="mx_RoomTile_iconBellCrossed"
                         onClick={this.onClickMute}
                     />
@@ -432,14 +431,14 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         const classes = classNames("mx_RoomTile_notificationsButton", {
             // Show bell icon for the default case too.
-            mx_RoomTile_iconBell: state === ALL_MESSAGES,
-            mx_RoomTile_iconBellDot: state === ALL_MESSAGES_LOUD,
-            mx_RoomTile_iconBellMentions: state === MENTIONS_ONLY,
-            mx_RoomTile_iconBellCrossed: state === MUTE,
+            mx_RoomTile_iconBell: state === RoomNotifState.AllMessages,
+            mx_RoomTile_iconBellDot: state === RoomNotifState.AllMessagesLoud,
+            mx_RoomTile_iconBellMentions: state === RoomNotifState.MentionsOnly,
+            mx_RoomTile_iconBellCrossed: state === RoomNotifState.Mute,
 
             // Only show the icon by default if the room is overridden to muted.
             // TODO: [FTUE Notifications] Probably need to detect global mute state
-            mx_RoomTile_notificationsButton_show: state === MUTE,
+            mx_RoomTile_notificationsButton_show: state === RoomNotifState.Mute,
         });
 
         return (

src/components/views/rooms/SendMessageComposer.tsx

@@ -19,6 +19,7 @@ import EMOJI_REGEX from 'emojibase-regex';
 import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { DebouncedFunc, throttle } from 'lodash';
 import { EventType, RelationType } from "matrix-js-sdk/src/@types/event";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import dis from '../../../dispatcher/dispatcher';
 import EditorModel from '../../../editor/model';
@@ -40,7 +41,7 @@ import { Command, CommandCategories, getCommand } from '../../../SlashCommands';
 import Modal from '../../../Modal';
 import { _t, _td } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { withMatrixClientHOC, MatrixClientProps } from "../../../contexts/MatrixClientContext";
 import { Action } from "../../../dispatcher/actions";
 import { containsEmoji } from "../../../effects/utils";
 import { CHAT_EFFECTS } from '../../../effects';
@@ -55,8 +56,7 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { decorateStartSendingTime, sendRoundTripMetric } from "../../../sendTimePerformanceMetrics";
-
-import { logger } from "matrix-js-sdk/src/logger";
+import RoomContext from '../../../contexts/RoomContext';
 
 function addReplyToMessageContent(
     content: IContent,
@@ -130,7 +130,7 @@ export function isQuickReaction(model: EditorModel): boolean {
     return false;
 }
 
-interface IProps {
+interface ISendMessageComposerProps extends MatrixClientProps {
     room: Room;
     placeholder?: string;
     permalinkCreator: RoomPermalinkCreator;
@@ -141,10 +141,8 @@ interface IProps {
 }
 
 @replaceableComponent("views.rooms.SendMessageComposer")
-export default class SendMessageComposer extends React.Component<IProps> {
-    static contextType = MatrixClientContext;
-    context!: React.ContextType<typeof MatrixClientContext>;
-
+export class SendMessageComposer extends React.Component<ISendMessageComposerProps> {
+    static contextType = RoomContext;
     private readonly prepareToEncrypt?: DebouncedFunc<() => void>;
     private readonly editorRef = createRef<BasicMessageComposer>();
     private model: EditorModel = null;
@@ -152,26 +150,25 @@ export default class SendMessageComposer extends React.Component<IProps> {
     private dispatcherRef: string;
     private sendHistoryManager: SendHistoryManager;
 
-    constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    constructor(props: ISendMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
         super(props);
-        this.context = context; // otherwise React will only set it prior to render due to type def above
-        if (this.context.isCryptoEnabled() && this.context.isRoomEncrypted(this.props.room.roomId)) {
+        if (this.props.mxClient.isCryptoEnabled() && this.props.mxClient.isRoomEncrypted(this.props.room.roomId)) {
             this.prepareToEncrypt = throttle(() => {
-                this.context.prepareToEncrypt(this.props.room);
+                this.props.mxClient.prepareToEncrypt(this.props.room);
             }, 60000, { leading: true, trailing: false });
         }
 
         window.addEventListener("beforeunload", this.saveStoredEditorState);
     }
 
-    public componentDidUpdate(prevProps: IProps): void {
+    public componentDidUpdate(prevProps: ISendMessageComposerProps): void {
         const replyToEventChanged = this.props.replyInThread && (this.props.replyToEvent !== prevProps.replyToEvent);
         if (replyToEventChanged) {
             this.model.reset([]);
         }
 
         if (this.props.replyInThread && this.props.replyToEvent && (!prevProps.replyToEvent || replyToEventChanged)) {
-            const partCreator = new CommandPartCreator(this.props.room, this.context);
+            const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
             const parts = this.restoreStoredEditorState(partCreator) || [];
             this.model.reset(parts);
             this.editorRef.current?.focus();
@@ -202,13 +199,20 @@ export default class SendMessageComposer extends React.Component<IProps> {
             case MessageComposerAction.EditPrevMessage:
                 // selection must be collapsed and caret at start
                 if (this.editorRef.current?.isSelectionCollapsed() && this.editorRef.current?.isCaretAtStart()) {
-                    const editEvent = findEditableEvent(this.props.room, false);
+                    const events =
+                        this.context.liveTimeline.getEvents()
+                            .concat(this.props.replyInThread ? [] : this.props.room.getPendingEvents());
+                    const editEvent = findEditableEvent({
+                        events,
+                        isForward: false,
+                    });
                     if (editEvent) {
                         // We're selecting history, so prevent the key event from doing anything else
                         event.preventDefault();
                         dis.dispatch({
-                            action: 'edit_event',
+                            action: Action.EditEvent,
                             event: editEvent,
+                            timelineRenderingType: this.context.timelineRenderingType,
                         });
                     }
                 }
@@ -275,7 +279,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
     }
 
     private sendQuickReaction(): void {
-        const timeline = this.props.room.getLiveTimeline();
+        const timeline = this.context.liveTimeline();
         const events = timeline.getEvents();
         const reaction = this.model.parts[1].text;
         for (let i = events.length - 1; i >= 0; i--) {
@@ -448,7 +452,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
                 decorateStartSendingTime(content);
             }
 
-            const prom = this.context.sendMessage(roomId, content);
+            const prom = this.props.mxClient.sendMessage(roomId, content);
             if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
                 // if the send fails, retry will handle resending.
@@ -465,7 +469,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
             });
             if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
                 prom.then(resp => {
-                    sendRoundTripMetric(this.context, roomId, resp.event_id);
+                    sendRoundTripMetric(this.props.mxClient, roomId, resp.event_id);
                 });
             }
             CountlyAnalytics.instance.trackSendMessage(startTime, prom, roomId, false, !!replyToEvent, content);
@@ -490,7 +494,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
 
     // TODO: [REACT-WARNING] Move this to constructor
     UNSAFE_componentWillMount() { // eslint-disable-line
-        const partCreator = new CommandPartCreator(this.props.room, this.context);
+        const partCreator = new CommandPartCreator(this.props.room, this.props.mxClient);
         const parts = this.restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);
         this.dispatcherRef = dis.register(this.onAction);
@@ -577,7 +581,7 @@ export default class SendMessageComposer extends React.Component<IProps> {
         // it puts the filename in as text/plain which we want to ignore.
         if (clipboardData.files.length && !clipboardData.types.includes("text/rtf")) {
             ContentMessages.sharedInstance().sendContentListToRoom(
-                Array.from(clipboardData.files), this.props.room.roomId, this.context,
+                Array.from(clipboardData.files), this.props.room.roomId, this.props.mxClient,
             );
             return true; // to skip internal onPaste handler
         }
@@ -608,3 +612,6 @@ export default class SendMessageComposer extends React.Component<IProps> {
         );
     }
 }
+
+const SendMessageComposerWithMatrixClient = withMatrixClientHOC(SendMessageComposer);
+export default SendMessageComposerWithMatrixClient;

src/components/views/settings/JoinRuleSettings.tsx

@@ -27,8 +27,7 @@ import SpaceStore from "../../../stores/SpaceStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import ManageRestrictedJoinRuleDialog from "../dialogs/ManageRestrictedJoinRuleDialog";
-import RoomUpgradeWarningDialog from "../dialogs/RoomUpgradeWarningDialog";
-import QuestionDialog from "../dialogs/QuestionDialog";
+import RoomUpgradeWarningDialog, { IFinishedOpts } from "../dialogs/RoomUpgradeWarningDialog";
 import { upgradeRoom } from "../../../utils/RoomUpgrade";
 import { arrayHasDiff } from "../../../utils/arrays";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
@@ -210,47 +209,70 @@ const JoinRuleSettings = ({ room, promptUpgrade, onError, beforeChange, closeSet
                 // Block this action on a room upgrade otherwise it'd make their room unjoinable
                 const targetVersion = preferredRestrictionVersion;
 
-                const modal = Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, {
-                    roomId: room.roomId,
-                    targetVersion,
-                    description: _t("This upgrade will allow members of selected spaces " +
-                        "access to this room without an invite."),
-                });
-
-                const [resp] = await modal.finished;
-                if (!resp?.continue) return;
-
+                let warning: JSX.Element;
                 const userId = cli.getUserId();
                 const unableToUpdateSomeParents = Array.from(SpaceStore.instance.getKnownParents(room.roomId))
                     .some(roomId => !cli.getRoom(roomId)?.currentState.maySendStateEvent(EventType.SpaceChild, userId));
                 if (unableToUpdateSomeParents) {
-                    const modal = Modal.createTrackedDialog<[boolean]>('Parent relink warning', '', QuestionDialog, {
-                        title: _t("Before you upgrade"),
-                        description: (
-                            <div>{ _t("This room is in some spaces you’re not an admin of. " +
-                                "In those spaces, the old room will still be shown, " +
-                                "but people will be prompted to join the new one.") }</div>
-                        ),
-                        hasCancelButton: true,
-                        button: _t("Upgrade anyway"),
-                        danger: true,
-                    });
-
-                    const [shouldUpgrade] = await modal.finished;
-                    if (!shouldUpgrade) return;
+                    warning = <b>
+                        { _t("This room is in some spaces you’re not an admin of. " +
+                            "In those spaces, the old room will still be shown, " +
+                            "but people will be prompted to join the new one.") }
+                    </b>;
                 }
 
-                const roomId = await upgradeRoom(room, targetVersion, resp.invite, true, true, true);
-                closeSettingsFn();
-                // switch to the new room in the background
-                dis.dispatch({
-                    action: "view_room",
-                    room_id: roomId,
-                });
-                // open new settings on this tab
-                dis.dispatch({
-                    action: "open_room_settings",
-                    initial_tab_id: ROOM_SECURITY_TAB,
+                Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, {
+                    roomId: room.roomId,
+                    targetVersion,
+                    description: <>
+                        { _t("This upgrade will allow members of selected spaces " +
+                            "access to this room without an invite.") }
+                        { warning }
+                    </>,
+                    doUpgrade: async (
+                        opts: IFinishedOpts,
+                        fn: (progressText: string, progress: number, total: number) => void,
+                    ): Promise<void> => {
+                        const roomId = await upgradeRoom(
+                            room,
+                            targetVersion,
+                            opts.invite,
+                            true,
+                            true,
+                            true,
+                            progress => {
+                                const total = 2 + progress.updateSpacesTotal + progress.inviteUsersTotal;
+                                if (!progress.roomUpgraded) {
+                                    fn(_t("Upgrading room"), 0, total);
+                                } else if (!progress.roomSynced) {
+                                    fn(_t("Loading new room"), 1, total);
+                                } else if (progress.inviteUsersProgress < progress.inviteUsersTotal) {
+                                    fn(_t("Sending invites... (%(progress)s out of %(count)s)", {
+                                        progress: progress.inviteUsersProgress,
+                                        count: progress.inviteUsersTotal,
+                                    }), 2 + progress.inviteUsersProgress, total);
+                                } else if (progress.updateSpacesProgress < progress.updateSpacesTotal) {
+                                    fn(_t("Updating spaces... (%(progress)s out of %(count)s)", {
+                                        progress: progress.updateSpacesProgress,
+                                        count: progress.updateSpacesTotal,
+                                    }), 2 + progress.inviteUsersProgress + progress.updateSpacesProgress, total);
+                                }
+                            },
+                        );
+                        closeSettingsFn();
+
+                        // switch to the new room in the background
+                        dis.dispatch({
+                            action: "view_room",
+                            room_id: roomId,
+                        });
+
+                        // open new settings on this tab
+                        dis.dispatch({
+                            action: "open_room_settings",
+                            initial_tab_id: ROOM_SECURITY_TAB,
+                        });
+                    },
                 });
 
                 return;

src/components/views/settings/account/PhoneNumbers.tsx

@@ -268,7 +268,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
                         <AccessibleButton
                             onClick={this.onContinueClick}
                             kind="primary"
-                            disabled={this.state.continueDisabled}
+                            disabled={this.state.continueDisabled || this.state.newPhoneNumberCode.length === 0}
                         >
                             { _t("Continue") }
                         </AccessibleButton>

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { ContextType } from 'react';
 import { _t } from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
 import AccessibleButton from "../../../elements/AccessibleButton";
@@ -38,9 +38,10 @@ interface IState {
 @replaceableComponent("views.settings.tabs.room.GeneralRoomSettingsTab")
 export default class GeneralRoomSettingsTab extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
+    context: ContextType<typeof MatrixClientContext>;
 
-    constructor(props: IProps) {
-        super(props);
+    constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
+        super(props, context);
 
         this.state = {
             isRoomPublished: false, // loaded async
@@ -89,6 +90,18 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
             </>;
         }
 
+        let leaveSection;
+        if (room.getMyMembership() === "join") {
+            leaveSection = <>
+                <span className='mx_SettingsTab_subheading'>{ _t("Leave room") }</span>
+                <div className='mx_SettingsTab_section'>
+                    <AccessibleButton kind='danger' onClick={this.onLeaveClick}>
+                        { _t('Leave room') }
+                    </AccessibleButton>
+                </div>
+            </>;
+        }
+
         return (
             <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("General") }</div>
@@ -108,13 +121,7 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
                 <div className="mx_SettingsTab_heading">{ _t("Other") }</div>
                 { flairSection }
                 { urlPreviewSettings }
-
-                <span className='mx_SettingsTab_subheading'>{ _t("Leave room") }</span>
-                <div className='mx_SettingsTab_section'>
-                    <AccessibleButton kind='danger' onClick={this.onLeaveClick}>
-                        { _t('Leave room') }
-                    </AccessibleButton>
-                </div>
+                { leaveSection }
             </div>
         );
     }

src/components/views/spaces/SpaceChildrenPicker.tsx

@@ -0,0 +1,150 @@
+/*
+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, { useEffect, useMemo, useState } from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from "../../../languageHandler";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import QueryMatcher from "../../../autocomplete/QueryMatcher";
+import SearchBox from "../../structures/SearchBox";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import { Entry } from "../dialogs/AddExistingToSpaceDialog";
+
+enum Target {
+    All = "All",
+    Specific = "Specific",
+    None = "None",
+}
+
+interface ISpecificChildrenPickerProps {
+    filterPlaceholder: string;
+    rooms: Room[];
+    selected: Set<Room>;
+    onChange(selected: boolean, room: Room): void;
+}
+
+const SpecificChildrenPicker = ({ filterPlaceholder, rooms, selected, onChange }: ISpecificChildrenPickerProps) => {
+    const [query, setQuery] = useState("");
+    const lcQuery = query.toLowerCase().trim();
+
+    const filteredRooms = useMemo(() => {
+        if (!lcQuery) {
+            return rooms;
+        }
+
+        const matcher = new QueryMatcher<Room>(rooms, {
+            keys: ["name"],
+            funcs: [r => [r.getCanonicalAlias(), ...r.getAltAliases()].filter(Boolean)],
+            shouldMatchWordsOnly: false,
+        });
+
+        return matcher.match(lcQuery);
+    }, [rooms, lcQuery]);
+
+    return <div className="mx_SpaceChildrenPicker">
+        <SearchBox
+            className="mx_textinput_icon mx_textinput_search"
+            placeholder={filterPlaceholder}
+            onSearch={setQuery}
+            autoFocus={true}
+        />
+        <AutoHideScrollbar>
+            { filteredRooms.map(room => {
+                return <Entry
+                    key={room.roomId}
+                    room={room}
+                    checked={selected.has(room)}
+                    onChange={(checked) => {
+                        onChange(checked, room);
+                    }}
+                />;
+            }) }
+            { filteredRooms.length < 1 ? <span className="mx_SpaceChildrenPicker_noResults">
+                { _t("No results") }
+            </span> : undefined }
+        </AutoHideScrollbar>
+    </div>;
+};
+
+interface IProps {
+    space: Room;
+    spaceChildren: Room[];
+    selected: Set<Room>;
+    noneLabel?: string;
+    allLabel: string;
+    specificLabel: string;
+    onChange(rooms: Room[]): void;
+}
+
+const SpaceChildrenPicker = ({
+    space,
+    spaceChildren,
+    selected,
+    onChange,
+    noneLabel,
+    allLabel,
+    specificLabel,
+}: IProps) => {
+    const [state, setState] = useState<string>(noneLabel ? Target.None : Target.All);
+
+    useEffect(() => {
+        if (state === Target.All) {
+            onChange(spaceChildren);
+        } else {
+            onChange([]);
+        }
+    }, [onChange, state, spaceChildren]);
+
+    return <>
+        <div className="mx_SpaceChildrenPicker">
+            <StyledRadioGroup
+                name="roomsToLeave"
+                value={state}
+                onChange={setState}
+                definitions={[
+                    {
+                        value: Target.None,
+                        label: noneLabel,
+                    }, {
+                        value: Target.All,
+                        label: allLabel,
+                    }, {
+                        value: Target.Specific,
+                        label: specificLabel,
+                    },
+                ].filter(d => d.label)}
+            />
+        </div>
+
+        { state === Target.Specific && (
+            <SpecificChildrenPicker
+                filterPlaceholder={_t("Search %(spaceName)s", { spaceName: space.name })}
+                rooms={spaceChildren}
+                selected={selected}
+                onChange={(isSelected: boolean, room: Room) => {
+                    if (isSelected) {
+                        onChange([room, ...selected]);
+                    } else {
+                        onChange([...selected].filter(r => r !== room));
+                    }
+                }}
+            />
+        ) }
+    </>;
+};
+
+export default SpaceChildrenPicker;

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -17,9 +17,8 @@ limitations under the License.
 import React, { ComponentProps, RefObject, SyntheticEvent, KeyboardEvent, useContext, useRef, useState } from "react";
 import classNames from "classnames";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
-import FocusLock from "react-focus-lock";
-import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials";
 import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests";
+import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials";
 
 import { _t } from "../../../languageHandler";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
@@ -215,7 +214,6 @@ export const SpaceCreateForm: React.FC<ISpaceCreateFormProps> = ({
 };
 
 const SpaceCreateMenu = ({ onFinished }) => {
-    const cli = useContext(MatrixClientContext);
     const [visibility, setVisibility] = useState<Visibility>(null);
     const [busy, setBusy] = useState<boolean>(false);
 
@@ -239,13 +237,9 @@ const SpaceCreateMenu = ({ onFinished }) => {
             return;
         }
 
-        // validate the space alias field but do not require it
-        const aliasLocalpart = alias.substring(1, alias.length - cli.getDomain().length - 1);
-        if (visibility === Visibility.Public && aliasLocalpart &&
-            (await spaceAliasField.current.validate({ allowEmpty: true })) === false
-        ) {
+        if (visibility === Visibility.Public && !(await spaceAliasField.current.validate({ allowEmpty: false }))) {
             spaceAliasField.current.focus();
-            spaceAliasField.current.validate({ allowEmpty: true, focused: true });
+            spaceAliasField.current.validate({ allowEmpty: false, focused: true });
             setBusy(false);
             return;
         }
@@ -254,7 +248,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
             await createSpace(
                 name,
                 visibility === Visibility.Public,
-                aliasLocalpart ? alias : undefined,
+                alias,
                 topic,
                 avatar,
             );
@@ -361,9 +355,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
         wrapperClassName="mx_SpaceCreateMenu_wrapper"
         managed={false}
     >
-        <FocusLock returnFocus={true}>
-            { body }
-        </FocusLock>
+        { body }
     </ContextMenu>;
 };
 

src/components/views/spaces/SpacePublicShare.tsx

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

src/components/views/verification/VerificationShowSas.tsx

@@ -121,24 +121,24 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
         }
 
         let confirm;
-        if (this.state.pending || this.state.cancelling) {
+        if (this.state.pending && this.props.isSelf) {
+            let text;
+            // device shouldn't be null in this situation but it can be, eg. if the device is
+            // logged out during verification
+            if (this.props.device) {
+                text = _t("Waiting for you to verify on your other session, %(deviceName)s (%(deviceId)s)…", {
+                    deviceName: this.props.device ? this.props.device.getDisplayName() : '',
+                    deviceId: this.props.device ? this.props.device.deviceId : '',
+                });
+            } else {
+                text = _t("Waiting for you to verify on your other session…");
+            }
+            confirm = <p>{ text }</p>;
+        } else if (this.state.pending || this.state.cancelling) {
             let text;
             if (this.state.pending) {
-                if (this.props.isSelf) {
-                    // device shouldn't be null in this situation but it can be, eg. if the device is
-                    // logged out during verification
-                    if (this.props.device) {
-                        text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
-                            deviceName: this.props.device ? this.props.device.getDisplayName() : '',
-                            deviceId: this.props.device ? this.props.device.deviceId : '',
-                        });
-                    } else {
-                        text = _t("Waiting for your other session to verify…");
-                    }
-                } else {
-                    const { displayName } = this.props;
-                    text = _t("Waiting for %(displayName)s to verify…", { displayName });
-                }
+                const { displayName } = this.props;
+                text = _t("Waiting for %(displayName)s to verify…", { displayName });
             } else {
                 text = _t("Cancelling…");
             }